@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){
  /*必要ならばここにコードを書く*/
}

/* =========================================================
   リハビリ健康相談所 — ヘッダー・フッター側のフォント
   本文（additional.css の --font）は .style 配下にしか効かないため、
   テーマが描画するヘッダー・メニュー・フッターはここで揃える。
   Windows の「游ゴシック」は標準の太さが細いので、
   Medium ウェイトを先頭に置いて読みやすくしている。
   ※ 本文側と必ず同じ並びにすること（片方だけ変えると字面がずれる）
   ========================================================= */
body,
.header, .header-container, .navi, .navi-in,
.footer, .footer-in {
  font-family: "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo,
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

/* ---------------------------------------------------------
   ヘッダーのグローバルナビ
   Cocoon 既定は .navi-in a が 16px（テーマの style.css:1248）。
   本文を18pxに上げたことでメニューだけ小さく見えるため、
   同じ 18px に揃え、指の届きやすさも考えて高さと間隔を広げる。
   Cocoon 設定側にメニューの文字サイズ項目は無いのでここで指定する。
   --------------------------------------------------------- */
.navi-in a {
  font-size: 18px;
}
.navi-in > ul > li > a {
  height: 64px;          /* 既定より高くしてタップしやすくする */
  line-height: 64px;
  padding: 0 20px;       /* 項目どうしの間隔。
                            2026-09-07、ヘッダーの「サイト運営」を外して
                            8項目から7項目になったため 20px に戻した。
                            （前日、8項目で「質問を投稿する」に伸ばしたときは
                              16px まで詰めないと 1245px で2行になっていた）
                            7項目・20px なら 1130px 程度まで1行に収まる。
                            項目を増やすときは、この値と折り返しの幅を測り直すこと。 */
}
/* サイト名（ロゴ未設定時のテキスト） */
.header .site-name-text {
  font-size: 30px;
}
/* スマホのメニューは高さを詰めすぎない */
@media (max-width: 1023px) {
  .navi-in > ul > li > a { height: 56px; line-height: 56px; padding: 0 14px; }
}

/* ---------------------------------------------------------
   固定ページの見出しの重複を解消する
   Cocoon は固定ページでも .entry-title（h1）を出すが、
   こちらのデザインは帯（.pagehead）とヒーロー（.hero）に
   それぞれ h1 を持っているため、同じ文字が2回並び h1 も2つになる。
   投稿ページでは .entry-title が唯一の h1 なので、消すのは
   固定ページ（body.page）だけに限定すること。
   Cocoon 設定に固定ページのタイトルを消す項目は無いため CSS で対応する。
   ※ ここはテーマ側の領域。.style 配下ではないので additional.css ではなく
     この style.css に書くこと（引き継ぎメモ 9章の使い分け）。
   --------------------------------------------------------- */
body.page .entry-title {
  display: none;
}

/* ---------------------------------------------------------
   固定ページのアイキャッチ画像を画面に出さない
   アイキャッチは OGP（SNSでシェアしたときのサムネイル）と
   構造化データのために持たせているだけで、デザイン上の出番はない。
   出してしまうと、トップページではヒーロー（.hero の自作分割レイアウト）
   の上に同じ写真がもう一度大きく並び、帯のあるページでは
   .pagehead と二重になる。
   Cocoon は OGP のために DOM には残す作りなので、ここで隠しても
   og:image・twitter:image・JSON-LD には影響しない。
   ※ 投稿（Q&A）は対象外。body.page に限定すること。
   （2026-09-08：トップにアイキャッチを設定した際に表示されたため追加）
   --------------------------------------------------------- */
body.page .eye-catch-wrap {
  display: none;
}

/* ---------------------------------------------------------
   Q&A記事では、Cocoon のタイトルを見出しとして出す

   ★2026-09-10 に方針を変更。それまでは隠していた。
     理由は「タイトルは冒頭30字の要約で、本文の質問文と内容が重なり、
     同じ文が2回並んで見えるため」だったが、利用者の指示により
     記事ページでもタイトルを出す形にした。
     質問文のほうを本文寄りの大きさに下げ、囲みに入れて
     「ここが質問」と分かるようにしてある（additional.css）。
   ★h1 はページ内に2つになる（このタイトルと .qa-question__body）。
     質問文の h1 を h2 に変えるには既存100件の本文を書き換える必要があり、
     HTML5 では h1 が複数あっても差し支えないため、そのままにしている。
   目印の has-qa-question は functions.php の rhs_qa_body_class が付ける。
   タイトルは「冒頭30字＋…」の要約でしかなく、本文の質問文と
   内容が重なって二重に見えるため。質問の全文は本文の
   <h1 class="qa-question__body"> が受け持ち、これがページ内で
   唯一の h1 になる。
   タイトル自体は消していない。一覧・マイページ・ブラウザのタブ・
   検索結果では引き続き使われる。
   目印の has-qa-question は functions.php の rhs_qa_body_class が付ける。
   既存のQ&A22件はタイトルが質問文なので、この class は付かない。
   --------------------------------------------------------- */
body.has-qa-question .entry-title {
  display: block;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.5;
  font-weight: 700;
  color: #2B5C87;                 /* --brand。テーマ側なので実際の値で書く */
  margin: 0 0 24px;
}

/* ---------------------------------------------------------
   グローバルナビの項目幅を、文字の長さに合わせる

   Cocoon は .navi-in > ul li に width: 176px を当てて全項目を等幅に
   している。文字の実幅は 54〜162px とばらつくため、短い項目
   （トップ 54px）が場所を余らせ、長い項目（ログイン/会員登録 152px、
   リハビリ・運動用品 162px）が枠136pxに入りきらず「…」で切れていた。

   文字の合計は894pxで、左右20pxの余白を足しても1214px。ナビの幅は
   1280pxの画面で1265pxあるので、場所そのものは足りている。
   等幅をやめれば、文字を小さくせずに8項目とも1行に収まる。

   1131px より狭い画面では2行に折り返す（切れることはない）。ヘッダーは7項目。
   1024px 未満はスマホ用メニューに切り替わる。
   サブメニューに影響しないよう > ul > li に限定している。
   --------------------------------------------------------- */
.navi-in > ul > li {
  width: auto;
}

/* ---------------------------------------------------------
   お知らせ一覧（/category/news/）の見た目
   2026-09-06 追加。

   このページは Cocoon 標準のアーカイブ表示で、.style の外にある。
   そのため additional.css は当たらず、Q&A一覧（.qa-list）と
   見た目がそろっていなかった。ここで最低限だけ合わせる。

   ・サムネイルは出さない。お知らせにアイキャッチを設定していないため
     「NO IMAGE」の灰色の枠が並ぶだけで、意味を持たない
   ・文字サイズを Q&A一覧に合わせる（タイトル21px / 本文18px）。
     Cocoon 既定はタイトル18px・本文12.8pxで、本文が本文サイズの
     3分の2ほどしかなく、同じサイトの一覧に見えなかった

   ※「本日:0 週:1 …」のアクセス数は Cocoon が管理者にだけ出すもの
     （tmp/entry-card.php の is_user_administrator）。
     一般の読者には表示されないので、ここでは触っていない。
     自分の画面からも消したいときは
     Cocoon設定 > アクセス > 管理者にインデックスでPVを表示する をオフ。
   --------------------------------------------------------- */
.archive .entry-card-thumb,
.archive .card-thumb {
  display: none;
}
/* サムネイルを消したぶん、本文が左端から始まるようにする */
.archive .entry-card-content,
.archive .card-content {
  margin-left: 0;
}
.archive .entry-card-title,
.archive .card-title {
  font-size: 21px;
  line-height: 1.5;
}
.archive .entry-card-snippet,
.archive .card-snippet {
  font-size: 18px;
  line-height: 1.75;
}

/* ---------------------------------------------------------
   フッターメニューのタップ領域（2026-09-08 追加）

   Cocoon 既定ではリンクの高さが 25px しかなく、指で押すには小さい。
   このサイトの読者は高齢の方やそのご家族が中心なので、
   タップの目安とされる 44px を確保する。

   padding で広げているのは、文字を大きくすると
   フッターの見た目のバランスが崩れるため。
   PC では余白が過剰になるので、スマホ・タブレット幅だけに当てる。
   ※ フッターはテーマ側の領域。additional.css ではなくこちらに書く。
   --------------------------------------------------------- */
@media (max-width: 1023px) {
  /* ★セレクタは Cocoon に合わせること。
     Cocoon はスマホ幅で
       .navi-footer-in > .menu-footer li.menu-item a { padding: 0 }
     を当てている。詳細度が高いので、`.footer .menu-item > a` では負ける。
     同じ形に合わせて上書きしている。 */
  .navi-footer-in > .menu-footer li.menu-item a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ---------------------------------------------------------
   スマホでの本文まわりの余白（2026-09-09）
   本文の最後の行の下に166pxもの空白ができていた。内訳は
     .section の余白56 ＋ .style の margin 30 ＋ .entry-content の margin 48 ＋ #main の余白32。
   .section は additional.css の --space-section で調整し、残り3つがここ。
   ※ ここはテーマ側の領域。.style 配下ではないので additional.css ではなく
     この style.css に書くこと（引き継ぎメモ 9章の使い分け）。
   ※ Cocoon 側の指定に勝たせるため #main.main / body .entry-content まで書いている。
     .main や .style だけでは負けて元の値のままになる（2026-09-09 に確認）。
   --------------------------------------------------------- */
@media (max-width: 600px) {
  body #main.main { padding-top: 0; padding-bottom: 0; }
  body .entry-content { margin-top: 0; margin-bottom: 8px; }
  /* Cocoon が .entry-content 直下の要素に付ける 1.8em の余白を消す。
     すぐ下に .entry-content 自身の余白があり、二重になっているため。 */
  body .entry-content > .style { margin-bottom: 0; }

  /* ヘッダーのメニューを出さない（2026-09-09）
     8項目が2列7行で並び、本文が始まる前に160pxを占めていた。
     画面下に固定の「メニュー」ボタン（Cocoonのモバイルボタン）があり、
     そこから同じ8項目のスライドメニュー（#navi-menu-content）を開けるので、
     ヘッダー側は省いてよいと判断した。ロゴとサイト名は残している。
     ★戻したいときは、この1行を消すだけでよい。 */
  .navi { display: none; }

  /* 画面下の固定バーをやめ、右上のハンバーガーだけにする（2026-09-09）
     Cocoon のモバイルボタン（メニュー／ホーム／検索／トップ）が
     画面下に50px居座っていた。スライドメニューの中身（#navi-menu-content）は
     「メニュー」ボタンの <li> の中にあるので、この帯ごと右上へ移せば
     メニューはそのまま開く。設定は変えていないので、
     この指定を消せば元の下の帯に戻る。
     ★「ホーム」「検索」「トップ（先頭へ戻る）」は出なくなる。 */
  .mobile-menu-buttons {
    position: fixed; top: 0; right: 0; bottom: auto; left: auto;
    width: auto; background: transparent;
    border: 0; box-shadow: none; z-index: 100;
  }
  .mobile-menu-buttons > li:not(.navi-menu-button) { display: none; }
  .mobile-menu-buttons > li.navi-menu-button {
    width: 52px; height: 52px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #DCE3EC;
    border-width: 0 0 1px 1px;
    border-radius: 0 0 0 6px;
  }
  .mobile-menu-buttons > li.navi-menu-button > .menu-button-in {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 100%; height: 100%;
  }

  /* フッターを詰める（2026-09-09）
     ロゴ50px＋メニュー98px＋コピーライト25px＋余白で254pxあった。
     ※ リンクの <a> は Cocoon 側の指定が強く、padding も文字サイズも
       上書きできなかった（インライン !important でも変わらなかった）。
       そのため4項目2行の90pxはそのまま。触れたのはロゴと余白だけ。 */
  #footer { padding-top: 0; padding-bottom: 8px; }
  .footer-bottom { margin-top: 12px; padding-top: 0; padding-bottom: 0; }
  .footer-bottom-logo .logo-footer { margin: 0; }
  .footer-bottom-logo img { max-width: 170px; height: auto; }
  #footer .navi-footer .menu-footer li { margin: 0; }
  #footer .footer-bottom .copyright { font-size: 12px; margin-top: 4px; }
}