@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* 記事本文の背景をグレーにする */
/* ページ全体の背景を #333333 に */
body {
  background: #333333;
  color: #ffffff;  /* 文字色を白にしないと読めなくなるので必須 */
}

/* 記事本文の背景も #333333 に */
.article {
  background: #333333;
  color: #ffffff;  /* 記事内の文字も白に */
  padding: 20px;   /* 内側余白を付けて見やすく */
  border-radius: 8px; /* 角を丸める（不要なら消す） */
}


/* ======== Week Nav Floating Buttons ======== */
.week-fab {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  line-height: 1;
  opacity: .96;
}
.week-fab:hover { opacity: 1; }

.week-fab-left  { left: 12px; }
.week-fab-right { right: 12px; }

.week-fab.is-disabled {
  pointer-events: none;
  opacity: .4;
}

:root{
  /* フッターが見えていない通常時の下余白（調整OK） */
  --week-fab-base-bottom: 12px;
  /* JSで動的に上乗せする量（初期0） */
  --week-fab-bottom-dyn: 0px;
}

/* ======== Mobile: 追従ボタンを下部寄せ（やや上にずらす） ======== */
:root{
  /* 好みで 40px〜120px くらいに調整可（ずらし量） */
  --week-fab-mobile-bottom-gap: 72px;
}

@media (max-width: 768px) {
  .week-fab {
    top: auto;                          /* 上固定を無効化 */
    bottom: calc(var(--week-fab-mobile-bottom-gap) + env(safe-area-inset-bottom, 0px));
    transform: none;                     /* 縦中央補正を解除 */
    padding: .5rem .7rem;
    font-size: 90%;
  }
  .week-fab-left  { left: 8px;  right: auto; }
  .week-fab-right { right: 8px; left:  auto; }
}

/* （任意）横向きは少しだけ上げたい場合 */
@media (max-width: 768px) and (orientation: landscape) {
  .week-fab { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* もしフッターに固定バーがあるなら、その分だけさらに上げたい場合の例 */
body.has-sticky-footer .week-fab {
  bottom: calc(var(--week-fab-mobile-bottom-gap) + env(safe-area-inset-bottom, 0px) + 56px);
}



/* ───────────────
   Cocoon 引用デザイン（中間グレー＋強制オレンジ文字）
──────────────── */
.entry-content blockquote {
  background: #444;     
  color: #ffa500 !important;  /* ← !important で強制上書き */
  border: none;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  font-style: normal;
  position: relative;
}

/* 引用内の段落・リンクも強制オレンジ */
.entry-content blockquote p,
.entry-content blockquote a,
.entry-content blockquote cite {
  color: #ffa500 !important;
  font-style: normal;
}

/* “マークと三角形を削除 */
.entry-content blockquote:before,
.entry-content blockquote:after {
  content: none !important;
  display: none !important;
}

/* ───────────────
   Cocoon 吹き出し（シンプル版）
──────────────── */
.speech-balloon {
  background: #444 !important;      /* 中間グレー背景 */
  color: #ffa500 !important;        /* 鮮やかオレンジ文字 */
  border: none !important;          /* 枠線なし */
  border-radius: 6px !important;    /* 角丸 */
  padding: 1em 1.2em !important;
  font-style: normal !important;
}

/* 吹き出しの三角を削除 */
.speech-balloon:before,
.speech-balloon:after {
  content: none !important;
  display: none !important;
}

/* ───────────────
   Cocoon 区切り線（濃いグレー＋太さ調整）
──────────────── */
.entry-content hr,
.entry-content hr.wp-block-separator,
.article hr {
  border: none !important;
  border-top: 4px solid #222 !important;  /* ← 太さを4pxに変更 */
  margin: 2em 0 !important;
}