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


/* ══════════════════════════════════════════════════════════════════
   ここから下が「けやき不動産 新HP」用の追記部分
   ══════════════════════════════════════════════════════════════════ */

/* ==================================================================
   けやき不動産 新HP ── 記事ページ共通デザイン
   ------------------------------------------------------------------
   正本ドキュメント：プロジェクト「新HP制作」内 claude/DESIGN_SYSTEM.md
   ------------------------------------------------------------------
   【変更履歴】
   v1.0.3  2026-09-03  相談ページ（ID267 /soudan/akiya/、ID269 /soudan/souzoku/、
                       ID271 /soudan/jikka/）の目次を「H2のみ表示」へ変更。
                       目次内のh3段（.toc-list 直下liの中のol）を display:none で隠す。
                       本文のH3見出しはそのまま残す（本文構造は無変更）。
                       ブログ記事の目次仕様（h2＝通常数字／h3＝丸数字／両方表示）は
                       一切変更していない。第11節を新設。
   v1.0.2  2026-09-03  目次のh3番号を丸数字に統一（全記事共通）。
                       ID15専用の body.postid-15 の2ルールを削除し、
                       body.single-post .toc .toc-list > li > ol に一本化。
                       h2は通常数字（Cocoon標準のdecimal）のまま。
                       @counter-style keyaki-circled は v1.0.1 のものを継続使用。
   v1.0.1  2026-09-02  適用範囲を body.single → body.single-post へ変更。
                       将来カスタム投稿タイプ（解決事例・お客様の声など）を
                       追加しても、記事デザインが波及しないようにするため。
                       表示内容の変更は無し（実測値は v1.0.0 と全項目一致）。
   v1.0.0  2026-09-02  新規作成。投稿ID59での検証結果を共通ルール化。
                       ・PC1カラム／本文実効幅780px（枠880px＋左右50px）
                       ・PC 19px・行間1.9／SP 17px・行間1.95
                       ・h2＝淡緑背景＋濃緑左バー
                       ・h3＝淡緑の下線（テラコッタ不使用）
                       ・テラコッタ #C9743A はCTA専用。リンクhoverは濃緑
                       ・記事上部SNSシェア非表示
                       ・本文リンクは下線で判別可能
                       ・冒頭要約ボックス .k-summary（任意使用）
   ------------------------------------------------------------------
   【設計上の注意】
   1) 全セレクタに body.single-post を付けている。
      理由A：記事（単一投稿）だけに適用し、固定ページ・トップページに
              波及させないため。
      理由B：カスタマイザーの「追加CSS」（12,613文字）は子テーマCSSより
              後に読み込まれるため、詳細度を1段上げないと
              `.entry-content h2`（濃緑ベタ塗り）に負ける。
              body.single-post .entry-content h2 → (0,2,1) で確実に勝つ。
   2) カスタムプロパティ（--k-*）の定義は現状「追加CSS」の :root にある。
      将来追加CSSを整理しても崩れないよう、全て var(--x, 実値) の
      フォールバック付きで記述している。
   3) 幅を上書きする箇所には box-sizing:border-box を必ず明記する。
      これが無いと PCで本文が880px幅になり、SPで横スクロールが発生する。
   ================================================================== */


/* ---- 1. レイアウト：記事は1カラム ---------------------------------- */

body.single-post #sidebar {
  display: none !important;
}
body.single-post .content-in {
  justify-content: center;
}
body.single-post #main {
  box-sizing: border-box;          /* 必須。外すと本文幅が780→880pxになる */
  width: 880px !important;
  max-width: 100%;
  padding: 48px 50px 60px !important;
  border-radius: 10px;
}
body.single-post #content {
  padding-top: 8px;
}


/* ---- 2. 記事上部のSNSシェアボタンを非表示 --------------------------- */

body.single-post .sns-share.ss-top,
body.single-post .article-header + .sns-share,
body.single-post .entry-content ~ .sns-share.ss-top {
  display: none !important;
}


/* ---- 3. タイトル・日付 --------------------------------------------- */

body.single-post .entry-title {
  font-family: var(--k-serif, "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", serif);
  font-size: 31px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--k-text, #242320);
  margin: 0 0 10px;
}
body.single-post .date-tags {
  color: var(--k-muted, #6B6E62);
  font-size: 13px;
  margin-bottom: 26px;
}


/* ---- 4. 本文タイポグラフィ ----------------------------------------- */

body.single-post .entry-content {
  font-size: 19px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  margin-top: 0;
  margin-bottom: 2.4em;
}
body.single-post .entry-content p {
  margin: 0 0 1.55em;
}


/* ---- 5. 冒頭の要約ボックス（任意。全記事必須ではない） --------------- */
/*  本番クラス名：.k-summary
 *  .k59-summary は ID59 検証時の旧クラス名。
 *  ID59本文を .k-summary に書き換えた後、次バージョンで削除する。      */

body.single-post .entry-content .k-summary,
body.single-post .entry-content .k59-summary {
  background: var(--k-panel, #F2EFE6);
  border-left: 4px solid var(--k-green, #5B7544);
  border-radius: 0 6px 6px 0;
  padding: 20px 24px;
  margin: 0 0 32px;
  font-size: 16.5px;
  line-height: 1.9;
  color: #3A3A34;
}
body.single-post .entry-content .k-summary strong,
body.single-post .entry-content .k59-summary strong {
  color: var(--k-green-deep, #3E5730);
  background: none;
  font-weight: 700;
}


/* ---- 6. 見出し h2：淡緑背景＋濃緑の左バー --------------------------- */

body.single-post .entry-content h2 {
  font-family: var(--k-serif, "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", serif);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  background: var(--k-green-pale, #EDF0E6);
  color: var(--k-green-deep, #3E5730);
  border: none;
  border-left: 5px solid var(--k-green, #5B7544);
  border-radius: 0 6px 6px 0;
  padding: 0.62em 0.9em;
  margin: 2.6em 0 1.1em;
}


/* ---- 7. 見出し h3：淡緑の下線（テラコッタはCTA専用のため不使用） ----- */

body.single-post .entry-content h3 {
  font-family: var(--k-serif, "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--k-green-deep, #3E5730);
  background: none;
  border: none;
  border-bottom: 2px solid #C8D3BC;
  padding: 0 0 0.35em;
  margin: 2.1em 0 0.9em;
}


/* ---- 8. 目次 -------------------------------------------------------- */

body.single-post .toc {
  box-sizing: border-box;          /* 必須。外すとSPで12pxはみ出す */
  background: var(--k-cream, #FAF8F2);
  border: 1px solid var(--k-border, #E3DFD2);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 0 0 34px;
  width: 100%;
  max-width: 100%;
  font-size: 15px;
}
body.single-post .toc-title {
  font-family: var(--k-serif, "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--k-green-deep, #3E5730);
  text-align: left;
  margin-bottom: 8px;
}
body.single-post .toc-content ol,
body.single-post .toc-content ul {
  line-height: 2.05;
  font-size: 15px;
}
body.single-post .toc-content a {
  color: #3A3A34;
  text-decoration: none;
}
body.single-post .toc-content a:hover {
  color: var(--k-green-deep, #3E5730);   /* テラコッタは使わない */
  text-decoration: underline;
}


/* ---- 9. 本文リンク：色だけに依存せず下線でも判別できるように --------- */

body.single-post .entry-content a {
  color: var(--k-green, #5B7544);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.single-post .entry-content a:hover {
  color: var(--k-green-deep, #3E5730);   /* テラコッタは使わない */
  text-decoration: underline;
}


/* ══════════════════════════════════════════════════════════════════
   スマートフォン（834px以下）
   ══════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 834px) {

  body.single-post #main {
    box-sizing: border-box;        /* 必須 */
    width: 100% !important;
    max-width: 100%;
    padding: 26px 18px 36px !important;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
  }
  body.single-post .entry-title {
    font-size: 24px;
    line-height: 1.5;
  }
  body.single-post .entry-content {
    font-size: 17px;
    line-height: 1.95;
  }
  body.single-post .entry-content p {
    margin: 0 0 1.5em;
  }
  body.single-post .entry-content .k-summary,
  body.single-post .entry-content .k59-summary {
    font-size: 15.5px;
    padding: 16px 18px;
    margin-bottom: 26px;
  }
  body.single-post .entry-content h2 {
    font-size: 19.5px;
    padding: 0.6em 0.75em;
    margin: 2.2em 0 1em;
  }
  body.single-post .entry-content h3 {
    font-size: 17.5px;
    margin: 1.9em 0 0.8em;
  }
  body.single-post .toc {
    box-sizing: border-box;        /* 必須 */
    width: 100%;
    max-width: 100%;
    padding: 16px 18px;
    font-size: 14px;
  }
  body.single-post .toc-content ol,
  body.single-post .toc-content ul {
    font-size: 14px;
    line-height: 1.95;
  }
}

/* ---- 10. 目次の見出し番号（全記事共通） --------------------------
   正本：claude/DESIGN_SYSTEM.md 第4-5章
   ルール：h2＝通常数字（1. 2. 3.）／h3＝丸数字（① ② ③）
   Cocoonの目次は h2 と h3 をクラスで区別せず、入れ子の深さだけで表す。
   そのため「.toc-list 直下の li の中にある ol」＝h3の段、と特定している。
   Cocoonの目次番号表記は「通常番号」設定のまま使う。
   「数字（詳細）」に変更すると .toc.tnt-number-detail ol li:before が
   有効になり、丸数字と 1.1. が二重に出るため変更しないこと。
   h4は原則使用しない（使うと fallback の decimal が出て h2 と紛らわしい）。
   ------------------------------------------------------------------ */

@counter-style keyaki-circled {
  system: fixed 1;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩"
           "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳";
  suffix: " ";
  fallback: decimal;      /* 非対応環境・21項目以降は通常の 1. 2. 3. に戻る */
}

/* h3の段だけを丸数字にする。h2の段（.toc-list 自身）は Cocoon 標準の decimal。
   padding-left は Cocoon の 1em のまま。丸数字はマーカー側に出るため
   本文の左端は変わらない（実測で確認済み）。 */
body.single-post .toc .toc-list > li > ol {
  list-style: keyaki-circled;
}

/* ══════════════════════════════════════════════════════════════════
   けやき不動産 追記部分ここまで
   ══════════════════════════════════════════════════════════════════ */

/* ---- 11. 相談ページの目次はH2のみ表示 -----------------------------
   正本：claude/DESIGN_SYSTEM.md 第4-5章

   ルール：/soudan/ 配下の相談ページでは、目次にH2だけを表示する。
           FAQ等で使うH3見出しは本文にはそのまま残し、目次にだけ出さない。

   【この節だけ body.single-post を使っていない理由】
   本ファイルの他の全ルールは body.single-post（＝投稿タイプ post の
   単一ページ）限定だが、相談ページは「固定ページ」であり single-post が
   付かない。そのため本節のみ body.page-id-* で指定している。
   設計原則（1）の意図的な例外であり、記事側には一切影響しない。

   【parent-pageid-264 を使っていない理由】
   /soudan/（ID264）配下という指定のほうが保守は楽だが、固定ページの
   実body classを本番テンプレートで未確認のため、現段階では確実な
   page-id 明示指定とする。相談ページ群の完成後に共通化を再検討する。
   → 相談ページを追加したら、このセレクタにも追記すること。

   競合確認（2026-09-03）：
     Cocoon本体 .toc .toc-list ul, .toc .toc-list ol は padding/margin のみ。
     .toc ul の list-style:none は ul 限定で ol には当たらない。
     .toc.tnt-number-detail ol は「数字（詳細）」設定時のみ有効（現在は未使用）。
     Cocoon本体・インライン・追加CSSのいずれにも目次olへの display 指定と
     !important は無いため、本ルールが競合なく適用される。
   ------------------------------------------------------------------ */

body.page-id-124 .toc .toc-list > li > ol,
body.page-id-280 .toc .toc-list > li > ol,
body.page-id-281 .toc .toc-list > li > ol,
body.page-id-125 .toc .toc-list > li > ol,
body.page-id-126 .toc .toc-list > li > ol,
body.page-id-127 .toc .toc-list > li > ol,
body.page-id-289 .toc .toc-list > li > ol,
body.page-id-267 .toc .toc-list > li > ol,
body.page-id-269 .toc .toc-list > li > ol,
body.page-id-271 .toc .toc-list > li > ol,
body.page-id-273 .toc .toc-list > li > ol,
body.page-id-274 .toc .toc-list > li > ol,
body.page-id-275 .toc .toc-list > li > ol,
body.page-id-276 .toc .toc-list > li > ol,
body.page-id-277 .toc .toc-list > li > ol {
  display: none;
}
/* ---- 12. ハブページUI（/service/・/soudan/） -----------------------
   正本：claude/DESIGN_SYSTEM.md 第4-11章

   対象：ID263 /service/ ・ ID264 /soudan/

   ルール：
     (1) ハブページのカード一覧を、PC 835px以上で3列、834px以下で1列にする。
     (2) ID264 は8枚のため、最終段の7・8枚目を中央寄せにする（12-5）。
     (3) ハブページでは目次そのものを表示しない。

   【本文側の構造】
     wp:group className="keyaki-hub-cards"
       └ wp:group className="keyaki-hub-card"

   【ブレークポイント】
     835px以上を3列、834px以下を1列とする。
     2列の中間段階は設けない。
   ------------------------------------------------------------------ */

/* 12-1. カード一覧（1列 → 835px以上で3列） */
body.page-id-263 .keyaki-hub-cards,
body.page-id-264 .keyaki-hub-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media screen and (min-width: 835px) {
  body.page-id-263 .keyaki-hub-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* WordPress再保存でinner-containerが追加された場合にも対応 */
body.page-id-263 .keyaki-hub-cards > .wp-block-group__inner-container,
body.page-id-263 .keyaki-hub-card > .wp-block-group__inner-container,
body.page-id-264 .keyaki-hub-cards > .wp-block-group__inner-container,
body.page-id-264 .keyaki-hub-card > .wp-block-group__inner-container {
  display: contents;
}

/* 12-2. カード本体 */
body.page-id-263 .keyaki-hub-card,
body.page-id-264 .keyaki-hub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--k-border, #E3DFD2);
  border-radius: 8px;
  padding: 20px 18px;
  box-shadow: 0 1px 2px rgba(36, 35, 32, 0.04);
}

/* 12-3. カード内の各段落 */
body.page-id-263 .keyaki-hub-card p,
body.page-id-264 .keyaki-hub-card p {
  margin: 0;
}

/* サービス名・相談テーマ */
body.page-id-263 .keyaki-hub-card p:nth-of-type(1),
body.page-id-264 .keyaki-hub-card p:nth-of-type(1) {
  font-family: var(--k-serif, "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--k-green-deep, #3E5730);
  margin-bottom: 10px;
}

/* 説明 */
body.page-id-263 .keyaki-hub-card p:nth-of-type(2),
body.page-id-264 .keyaki-hub-card p:nth-of-type(2) {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 16px;
}

/* 詳しく見る */
body.page-id-263 .keyaki-hub-card p:nth-of-type(3),
body.page-id-264 .keyaki-hub-card p:nth-of-type(3) {
  font-size: 15px;
  line-height: 1.6;
}

body.page-id-263 .keyaki-hub-card p:nth-of-type(3) a,
body.page-id-264 .keyaki-hub-card p:nth-of-type(3) a {
  color: var(--k-green-deep, #3E5730);
  font-weight: 700;
  text-decoration: underline;
}

body.page-id-263 .keyaki-hub-card p:nth-of-type(3) a:hover,
body.page-id-264 .keyaki-hub-card p:nth-of-type(3) a:hover {
  text-decoration: none;
}

/* スマホ・タブレット */
@media screen and (max-width: 834px) {
  body.page-id-263 .keyaki-hub-card,
  body.page-id-264 .keyaki-hub-card {
    padding: 18px 16px;
  }

  body.page-id-263 .keyaki-hub-card p:nth-of-type(1),
  body.page-id-264 .keyaki-hub-card p:nth-of-type(1) {
    font-size: 17px;
  }

  body.page-id-263 .keyaki-hub-card p:nth-of-type(2),
  body.page-id-263 .keyaki-hub-card p:nth-of-type(3),
  body.page-id-264 .keyaki-hub-card p:nth-of-type(2),
  body.page-id-264 .keyaki-hub-card p:nth-of-type(3) {
    font-size: 14px;
  }
}

/* 12-4. ハブページでは目次を表示しない */
body.page-id-263 .toc,
body.page-id-264 .toc {
  display: none;
}

/* 12-5. ID264 /soudan/ は8枚。最終段の7・8枚目を中央寄せにする
   6分割グリッドを使い、各カードを2列分ずつ占有させる。
   6列＋gap16px の2列分は、3列レイアウトのカード幅と数値上一致する。
     1 2 3
     4 5 6
       7 8   ← 7枚目を2列目から、8枚目を4列目から開始して中央に寄せる */
@media screen and (min-width: 835px) {
  body.page-id-264 .keyaki-hub-cards {
    grid-template-columns: repeat(6, 1fr);
  }

  body.page-id-264 .keyaki-hub-card {
    grid-column: span 2;
  }

  body.page-id-264 .keyaki-hub-card:nth-child(7) {
    grid-column: 2 / span 2;
  }

  body.page-id-264 .keyaki-hub-card:nth-child(8) {
    grid-column: 4 / span 2;
  }
}
/* ---- 13. トップページUI（ID123 / 固定フロントページ） ---------------
   正本：claude/DESIGN_SYSTEM.md（TOP用の章を新設予定）

   対象：ID123 「/」（固定フロントページ設定後も page-id-123 は残るが、
         念のため .home.page も併記する。追加CSS側と同じ書き方に合わせた）

   方針：
     (1) 第12節（ID263 /service/・ID264 /soudan/）は1バイトも変更しない。
         TOP用の指定は本節への追記だけで完結させる。
     (2) カードの寸法・色は第12節と同じ値を使い、ハブと見え方をそろえる。
     (3) ブレークポイントは既存と同じ 834px / 835px の1本のみ。増やさない。
     (4) 8枚グリッドの指定は .keyaki-hub-cards-8 に限定し、
         6枚のサービスカードへ波及させない。
   ------------------------------------------------------------------ */

/* 13-1. FVの見出し（このページ唯一のh1）
   追加CSS側に .entry-content h2 の緑帯指定があるため、
   h1/h2とも Cocoon・追加CSS の既定を明示的に打ち消す。 */
body.page-id-123 .entry-content h1.k-fv-title,
body.home.page .entry-content h1.k-fv-title {
  font-family: var(--k-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--k-green-deep);
  text-align: center;
  text-wrap: balance;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 24px;
}

/* 13-2. セクション見出し（h2）
   .k-section-title だけでは .entry-content h2（0,1,1）に負けるため、
   打ち消しと再指定をここで行う。 */
body.page-id-123 .entry-content h2.k-section-title,
body.home.page .entry-content h2.k-section-title {
  font-family: var(--k-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.10em;
  color: var(--k-green-deep);
  text-align: center;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 10px;
}

/* 最終CTA（濃緑帯）の見出しは白字にする */
body.page-id-123 .entry-content h2.k-cta-title,
body.home.page .entry-content h2.k-cta-title {
  font-family: var(--k-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-align: center;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
}

/* 13-3. FVのCTA（2導線）
   受付時間はボタン本文に入れず、ボタン直下の補足として出す。 */
body.page-id-123 .k-fv-actions,
body.home.page .k-fv-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px 28px;
  margin: 28px 0 0;
}

body.page-id-123 .k-fv-action,
body.home.page .k-fv-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}

body.page-id-123 .k-fv-note,
body.home.page .k-fv-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--k-muted);
  letter-spacing: 0.04em;
}

/* 電話は副導線。白地に緑の枠線とし、相談ボタンと役割を分ける。
   .k-cta-btn の color に !important があるため打ち消しにも付ける。 */
body.page-id-123 .k-cta-btn.k-cta-btn-tel,
body.home.page .k-cta-btn.k-cta-btn-tel {
  background: #FFFFFF;
  color: var(--k-green-deep) !important;
  border: 2px solid var(--k-green);
  padding: 14px 38px;
}

body.page-id-123 .k-cta-btn.k-cta-btn-tel:hover,
body.home.page .k-cta-btn.k-cta-btn-tel:hover {
  background: var(--k-green-pale);
  color: var(--k-green-deep) !important;
  opacity: 1;
}

/* 13-4. カード一覧（1列 → 835px以上で3列）
   第12節と同じ値。セレクタだけ page-id-123 / home に付け替えている。 */
body.page-id-123 .keyaki-hub-cards,
body.home.page .keyaki-hub-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* WordPress再保存でinner-containerが追加された場合にも対応 */
body.page-id-123 .keyaki-hub-cards > .wp-block-group__inner-container,
body.page-id-123 .keyaki-hub-card > .wp-block-group__inner-container,
body.home.page .keyaki-hub-cards > .wp-block-group__inner-container,
body.home.page .keyaki-hub-card > .wp-block-group__inner-container {
  display: contents;
}

/* 13-5. カード本体 */
body.page-id-123 .keyaki-hub-card,
body.home.page .keyaki-hub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--k-border, #E3DFD2);
  border-radius: 8px;
  padding: 20px 18px;
  box-shadow: 0 1px 2px rgba(36, 35, 32, 0.04);
}

/* 13-6. カード内の各段落 */
body.page-id-123 .keyaki-hub-card p,
body.home.page .keyaki-hub-card p {
  margin: 0;
}

/* 相談テーマ名・サービス名 */
body.page-id-123 .keyaki-hub-card p:nth-of-type(1),
body.home.page .keyaki-hub-card p:nth-of-type(1) {
  font-family: var(--k-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--k-green-deep);
  margin-bottom: 10px;
}

/* 説明 */
body.page-id-123 .keyaki-hub-card p:nth-of-type(2),
body.home.page .keyaki-hub-card p:nth-of-type(2) {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 16px;
}

/* 詳しく見る */
body.page-id-123 .keyaki-hub-card p:nth-of-type(3),
body.home.page .keyaki-hub-card p:nth-of-type(3) {
  font-size: 15px;
  line-height: 1.6;
}

body.page-id-123 .keyaki-hub-card p:nth-of-type(3) a,
body.home.page .keyaki-hub-card p:nth-of-type(3) a {
  color: var(--k-green-deep);
  font-weight: 700;
  text-decoration: underline;
}

body.page-id-123 .keyaki-hub-card p:nth-of-type(3) a:hover,
body.home.page .keyaki-hub-card p:nth-of-type(3) a:hover {
  text-decoration: none;
}

/* 13-7. 835px以上のグリッド
   サービス6枚は3列。相談8枚だけ6分割グリッドにして
   最終段の7・8枚目を中央へ寄せる（第12節 12-5 と同じ考え方）。
   :not() で除外しているので、6枚側へ6分割指定が当たることはない。 */
@media screen and (min-width: 835px) {
  body.page-id-123 .keyaki-hub-cards:not(.keyaki-hub-cards-8),
  body.home.page .keyaki-hub-cards:not(.keyaki-hub-cards-8) {
    grid-template-columns: repeat(3, 1fr);
  }

  body.page-id-123 .keyaki-hub-cards-8,
  body.home.page .keyaki-hub-cards-8 {
    grid-template-columns: repeat(6, 1fr);
  }

  body.page-id-123 .keyaki-hub-cards-8 > .keyaki-hub-card,
  body.home.page .keyaki-hub-cards-8 > .keyaki-hub-card {
    grid-column: span 2;
  }

  body.page-id-123 .keyaki-hub-cards-8 > .keyaki-hub-card:nth-child(7),
  body.home.page .keyaki-hub-cards-8 > .keyaki-hub-card:nth-child(7) {
    grid-column: 2 / span 2;
  }

  body.page-id-123 .keyaki-hub-cards-8 > .keyaki-hub-card:nth-child(8),
  body.home.page .keyaki-hub-cards-8 > .keyaki-hub-card:nth-child(8) {
    grid-column: 4 / span 2;
  }
}

/* 13-8. トップページでは目次を表示しない
   h2が7本になるとCocoonが目次を自動生成するため、ハブと同じく隠す。 */
body.page-id-123 .toc,
body.home.page .toc {
  display: none;
}

/* 13-9. スマホ・タブレット（834px以下） */
@media screen and (max-width: 834px) {
  body.page-id-123 .entry-content h1.k-fv-title,
  body.home.page .entry-content h1.k-fv-title {
    font-size: 24px;
    margin-bottom: 18px;
  }

  body.page-id-123 .entry-content h2.k-section-title,
  body.home.page .entry-content h2.k-section-title {
    font-size: 23px;
  }

  body.page-id-123 .entry-content h2.k-cta-title,
  body.home.page .entry-content h2.k-cta-title {
    font-size: 21px;
  }

  body.page-id-123 .k-fv-actions,
  body.home.page .k-fv-actions {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  body.page-id-123 .k-fv-action,
  body.home.page .k-fv-action {
    width: 100%;
    max-width: 340px;
  }

  body.page-id-123 .k-fv-action .k-cta-btn,
  body.home.page .k-fv-action .k-cta-btn {
    display: block;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;
  }

  body.page-id-123 .keyaki-hub-card,
  body.home.page .keyaki-hub-card {
    padding: 18px 16px;
  }

  body.page-id-123 .keyaki-hub-card p:nth-of-type(1),
  body.home.page .keyaki-hub-card p:nth-of-type(1) {
    font-size: 17px;
  }

  body.page-id-123 .keyaki-hub-card p:nth-of-type(2),
  body.page-id-123 .keyaki-hub-card p:nth-of-type(3),
  body.home.page .keyaki-hub-card p:nth-of-type(2),
  body.home.page .keyaki-hub-card p:nth-of-type(3) {
    font-size: 14px;
  }
}

/* ---- 14. 会社概要（ID120）の目次 下位番号を丸数字に ------------------
   HP-DISPLAY-FIX-02（2026-10-13）本人決定：上位 1.〜6. は維持し、下位だけ ①②。
   第10節の @counter-style keyaki-circled を再利用する（第10節の投稿用ルールは変更しない）。
   対象は body.page-id-120 の「.toc-list 直下 li の中の ol」＝目次の h3 段のみ。
   ------------------------------------------------------------------ */
body.page-id-120 .toc .toc-list > li > ol {
  list-style: keyaki-circled;
}

/* ==================================================================
   15. スマホの文字拡大・上部電話ボタン（HP-MOBILE-UX-01, 2026-10-16）
   - 834px以下（Cocoonのスマホ・タブレット表示）だけに効く。PC（835px以上）は変更しない
   - 電話ボタンの本体は functions.php の keyaki_mobile_telbar() が1か所で出力する
   - この第15節を丸ごと削除すれば、文字サイズと電話ボタンの見た目は元に戻る
   ================================================================== */

/* 15-1. 電話ボタン（PCでは出さない） */
.k-telbar { display: none; }

@media screen and (max-width: 834px) {
  .k-telbar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;                 /* Cocoonのメニュー（引き出し）より下に置く */
    background: #A85A26;        /* テラコッタ（CTA色）を濃くし、白文字との明暗差 5.0:1 を確保 */
    box-shadow: 0 2px 6px rgba(36, 35, 32, 0.18);
  }
  .k-telbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 16px;
    min-height: 60px;
    box-sizing: border-box;
    padding: 6px 12px;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 1.25;
  }
  .k-telbar a:hover,
  .k-telbar a:focus,
  .k-telbar a:visited { color: #FFFFFF; }
  .k-telbar a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -5px; }
  .k-telbar-main { display: flex; flex-direction: column; align-items: flex-start; }
  .k-telbar-label { font-size: 19px; font-weight: 700; letter-spacing: 0.04em; }
  .k-telbar-num {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .k-telbar-hours { font-size: 16px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
  .k-telbar-hours span { display: block; }
  /* 目次などで見出しへ移動したとき、電話ボタンの裏に隠れないようにする */
  html { scroll-padding-top: 84px; }
}

/* 狭い画面（374px以下）：上段＝文言と受付時間、下段＝番号 */
@media screen and (max-width: 374px) {
  .k-telbar a {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "label hours" "num num";
    justify-content: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 5px 10px;
  }
  .k-telbar-main { display: contents; }
  .k-telbar-label { grid-area: label; font-size: 18px; align-self: center; }
  .k-telbar-hours { grid-area: hours; align-self: center; }
  .k-telbar-hours span { display: inline; }
  .k-telbar-hours span + span { margin-left: 0.25em; }
  .k-telbar-num { grid-area: num; justify-self: center; font-size: 26px; }
}

/* ログイン中の管理バー（601〜782pxは上部に固定46px、783px以上は32px） */
@media screen and (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .k-telbar { top: 46px; }
}
@media screen and (min-width: 783px) and (max-width: 834px) {
  body.admin-bar .k-telbar { top: 32px; }
}

/* 15-2. スマホ本文の基準（480px以下：Cocoon標準16px → 18px） */
@media screen and (max-width: 480px) {
  .body,
  .menu-content { font-size: 18px; }
}

/* 15-3. 個別に小さく指定されている箇所（834px以下） */
@media screen and (max-width: 834px) {
  /* 本文の行間 */
  .body .entry-content { line-height: 1.8; }

  /* 記事（投稿）：第4節SPの17px／行間1.95 → 18px／1.8。見出しは本文との大小関係を保つ */
  body.single-post .entry-content { font-size: 18px; line-height: 1.8; }
  body.single-post .entry-content h2 { font-size: 22px; }
  body.single-post .entry-content h3 { font-size: 20px; }
  body.single-post .entry-content .k-summary,
  body.single-post .entry-content .k59-summary { font-size: 18px; }
  body.single-post .toc { font-size: 17px; }
  .related-entry-card-snippet,
  .prev-post-title,
  .next-post-title { font-size: 16px; line-height: 1.5; }

  /* 固定ページの見出し（本文18pxより大きく） */
  body.page .entry-content h2 { font-size: 22px; }
  body.page .entry-content h3 { font-size: 20px; }

  /* ページタイトル（h1）・目次・パンくず・日付 */
  .article h1.entry-title { font-size: 24px; }
  .toc .toc-content,
  body.single-post .toc .toc-content ol,
  body.single-post .toc .toc-content ul { font-size: 17px; }
  .toc .toc-title { font-size: 18px; }
  #breadcrumb { font-size: 16px; }
  .date-tags .entry-date,
  .date-tags .post-update { font-size: 15px; }
  .entry-categories-tags .cat-link,
  .entry-categories-tags .tag-link { font-size: 15px; }
  .related-entry-card-title { font-size: 18px; }

  /* ヘッダーのキャッチ・フッター */
  body #header .tagline { font-size: 16px; }
  #navi-footer .menu-footer a { font-size: 16px; }
  #footer .source-org { font-size: 16px; }

  /* メニュー（引き出し）の項目 */
  .menu-content .menu-drawer a { font-size: 18px; }

  /* お問い合わせフォーム（ID129）：入力文字・ラベル */
  body.page-id-129 .wpcf7 input[type="text"],
  body.page-id-129 .wpcf7 input[type="email"],
  body.page-id-129 .wpcf7 input[type="tel"],
  body.page-id-129 .wpcf7 textarea,
  body.page-id-129 .wpcf7 select { font-size: 18px; }
  body.page-id-129 .wpcf7 .wpcf7-list-item-label { font-size: 18px; }

  /* ハブページ（ID263・264）・トップのカード（第12節・第13節のSP値を上書き） */
  body.page-id-263 .keyaki-hub-card p:nth-of-type(1),
  body.page-id-264 .keyaki-hub-card p:nth-of-type(1),
  body.page-id-123 .keyaki-hub-card p:nth-of-type(1),
  body.home.page .keyaki-hub-card p:nth-of-type(1) { font-size: 20px; }
  body.page-id-263 .keyaki-hub-card p:nth-of-type(2),
  body.page-id-264 .keyaki-hub-card p:nth-of-type(2),
  body.page-id-123 .keyaki-hub-card p:nth-of-type(2),
  body.home.page .keyaki-hub-card p:nth-of-type(2) { font-size: 18px; line-height: 1.75; }
  body.page-id-263 .keyaki-hub-card p:nth-of-type(3),
  body.page-id-264 .keyaki-hub-card p:nth-of-type(3),
  body.page-id-123 .keyaki-hub-card p:nth-of-type(3),
  body.home.page .keyaki-hub-card p:nth-of-type(3) { font-size: 18px; }

  /* トップページの部品（追加CSSのSP値より優先させるため body.page-id-123 を付ける） */
  body.page-id-123 .k-lead, body.home.page .k-lead { font-size: 18px; line-height: 1.9; }
  body.page-id-123 .k-card-title, body.home.page .k-card-title { font-size: 20px; }
  body.page-id-123 .k-card-text, body.home.page .k-card-text { font-size: 18px; line-height: 1.75; }
  body.page-id-123 .k-fv-note, body.home.page .k-fv-note { font-size: 16px; }
  body.page-id-123 .k-cta-hours, body.home.page .k-cta-hours { font-size: 16px; }
  body.page-id-123 .k-cta-btn, body.home.page .k-cta-btn { font-size: 18px; }
  body.page-id-123 .k-section-sub, body.home.page .k-section-sub { font-size: 13px; }
  body.page-id-123 .wp-block-latest-posts__post-title, body.home.page .wp-block-latest-posts__post-title { font-size: 18px; }
  body.page-id-123 .keyaki-news-list time, body.home.page .keyaki-news-list time { font-size: 16px; }

  /* 画面下のメニューボタンの文字（ボタン幅の都合で12px） */
  .mobile-menu-buttons .menu-caption { font-size: 12px; }
}