/* ==========================================================================
   reason.css — 選ばれる理由（/reason/）
   --------------------------------------------------------------------------
   ★カード（角丸＋枠線の箱）を使わない。区切りは罫線と面の塗り分けだけ。
   ★見出しは中央揃えにしない。すべて左揃え。
   ★色は紺（--navy-*）のトーン展開のみ。第 2 色相を足さない。
   ★ブレークポイントは px 直書き。sm 480 / md 768 / lg 1024 / xl 1280 で統一。
   ========================================================================== */

/* --------------------------------------------------------------------------
   このページ専用の面の色。
   ★意味トークンに «図の地» に当たるものが無いため、ここでローカル変数に束ねる
     （demo/results-concepts.css と同じやり方）。生スケールを各所に散らさない。
   ★--color-bg-tint（navy-50 #f6f5fa）から navy-200 #d8d7ea へ上げている。
     理由（WCAG 式で算出）：navy-50 は白地に対して **1.08:1** しかなく、
     進捗バーの «溝» も比較表の «グローカル列» も、面として見えていなかった。
       navy-50  1.08:1 … 事実上不可視
       navy-100 1.18:1
       navy-200 1.42:1 ← 採用。細い溝でも輪郭が追える
       navy-300 1.91:1 … 塗りより溝が目立ち、図の主従が逆転する
     navy-200 の上に navy-800 を載せたときの本文コントラストは 12.64:1（AA 4.5:1）。
   ★進捗率は数値をテキストでも併記しているので、面だけが情報を担ってはいない。
     3:1 に届いていないのは «図の必須要素» ではないため許容している（WCAG 1.4.11 の除外）。
     それでも 1.08:1 は «見えない» であって «控えめ» ではないので上げた。
   -------------------------------------------------------------------------- */
.reason-table,
.reason-block progress {
  /* 溝・トラック・面の塗り分け。白地比 1.42:1 */
  --reason-plane: var(--navy-200);
}

/*
  図（地図・ドーナツ）の «薄い端»。溝より一段濃い navy-300（白地比 1.91:1）。
  ★溝と分けている理由：図は «薄い端に置かれた区画そのもの» が情報を持つので、
    白地から 3:1 離れている必要がある。溝は背景側なのでその条件が要らない。
  ★navy-200 では足りないことを算出で確認済み（ドーナツの営業 14% が
    白地比 2.27:1、マーケティング 18% の文字が 4.47:1 で落ちる）。
*/
.reason-map,
.reason-pie {
  --reason-figure-light: var(--navy-300);
}

/* --------------------------------------------------------------------------
   節見出し — サービス詳細ページと同じ主従
   「— 節名」を大きく強くし、その下の説明を本文級へ下げる。
   reason-head に限定し、トップページや比較用デモの sec-head には影響させない。
   -------------------------------------------------------------------------- */
/*
  節名（h2）の下の余白は **--space-6（24px）で統一する**（2026-09-16 三嶋指示）。

  ★★直す前の実測（1425px）。**h2 の «次に何が来るか» で余白が決まっていた**：
      勝ち筋モデル      12px … h2 の margin-bottom（--space-3）がそのまま出ていた
      他社との比較      24px … 次の .sec-head__lead の margin-top（--space-6）が
                               h2 の 12px と相殺され、大きいほうの 24px になっていた
      データ／ポリシー  24px … 同上
      こんな中小企業に  72px … h2 が節見出しの最後の要素なので、下に相殺してくるのは
        おすすめ               .sec-head 自身の margin-bottom（--section-gap 56px）。
                               ここだけ «節見出しと中身の間» の値が出ていた
    → 3 種類（12 / 24 / 72）になっていた。**どれも意図した値ではなく、相殺の結果**。

  ★24px を選んだ理由：5 節のうち 4 節が既にこの値で、
    共通部品 section-head.css の .sec-head__lead が持つ margin-top と同じ値。
    つまり «部品が元から持っている間合い» に他を合わせた形で、新しい数字を作っていない。

  ★★相殺に任せず、**上（h2）だけが余白を持つ**形に変えた。
    次に来るものが リード でも 本文 でも 何も無くても 同じ 24px になる。
    ★.sec-head__lead / .sec-head__title の margin-top を 0 にするのは
      «下の要素が余白を持たない» を明示するため。0 にしないと相殺の計算が復活する。

  ★トップページ・新規事業ページには影響しない。.reason-head は /reason/ だけに付く。
*/
.reason-head .sec-head__label {
  margin-bottom: var(--space-6);
  color: var(--color-text-strong);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

/* ★余白は上（h2）が持つ。下の要素は持たない。 */
.reason-head .sec-head__lead,
.reason-head .sec-head__title {
  margin-top: 0;
}

/*
  h2 が節見出しの «最後の要素» で、**その直後が本文の段落** の節
  （= リードを持たない「こんな中小企業におすすめ」）。

  ★h2 の下の余白は親の margin-bottom（--section-gap 56px）に相殺され、
    24px ではなく 56px（実測 72px）が出る。そこで **親側を 24px に下げる**。
  ★節の中身（.reason-fit__body）は --text-lg 19px ／ --lh-body で、
    他の節の .sec-head__lead と **同じ組み**。つまりあれが実質のリードなので、
    節見出しとの間合いも他節のリードと同じ 24px でよい。

  ★★条件を 2 つ重ねている。**:has(+ p) を外さないこと。**
    リードが無い節でも、直後が «部品» なら 56px のままにしたい。
    2026-09-16 に FAQ 節（h2 のみ ＋ 直後は div.faq）を足したとき、
    :has(> .sec-head__label:last-child) だけだと FAQ の上罫が節名の 24px 下に付き、
    他の節（節名 → 24px → リード → 56px → 中身）より 1 段詰まって見えた。
    «リード扱いしてよいのは段落» という条件をセレクタに入れて分けている。

  ★:has() を使うのは «構造で決める» ため。節を足したときに書き足さなくて済む。
    このリポジトリでは service-newbiz.css でも使っている手。
    未対応ブラウザでは 56px のまま（直す前の見え方に戻るだけで、崩れない）。
*/
.reason-head:has(> .sec-head__label:last-child):has(+ p) {
  margin-bottom: var(--space-6);
}

.reason-head .sec-head__label::before {
  width: var(--space-10);
}

.reason-head .sec-head__title {
  max-width: var(--measure);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

@media (min-width: 1200px) {
  .reason-head .sec-head__title {
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

/* --------------------------------------------------------------------------
   勝ち筋モデル — トップページの光源線をライトモードへ移植
   構造は b1-method.css を共有し、色だけ白地用に反転する。
   -------------------------------------------------------------------------- */
.reason-method {
  overflow: hidden;
}

/* トップ版は紺背景なので薄い文字だが、ライト版では本文色へ戻す。 */
.reason-method .sec-head__lead {
  color: var(--color-text);
}

.reason-method .accelerator {
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-bg);
}

.reason-method .accelerator::before {
  color: rgb(9 4 89 / 5%);
}

.reason-method .accelerator__eyebrow {
  color: var(--color-text-muted);
}

.reason-method .accelerator__eyebrow span:nth-child(2) {
  color: var(--color-text-strong);
  border-color: var(--navy-400);
}

.reason-method .accelerator__beam {
  background: linear-gradient(90deg, rgb(9 4 89 / 8%), var(--navy-500) 55%, var(--navy-800));
  box-shadow: none;
}

.reason-method .accelerator__target {
  border-color: rgb(9 4 89 / 30%);
}

.reason-method .accelerator__target::before,
.reason-method .accelerator__target::after {
  border-color: rgb(9 4 89 / 20%);
}

.reason-method .accelerator__flare {
  background: var(--navy-800);
  box-shadow: 0 0 0.65rem rgb(9 4 89 / 35%),
              0 0 2.2rem 0.8rem rgb(86 80 185 / 22%),
              0 0 4.5rem 1.8rem rgb(86 80 185 / 10%);
}

.reason-method .accelerator__trigger {
  color: var(--color-text-strong);
  border-color: var(--navy-400);
  background: var(--color-bg);
  backdrop-filter: none;
}

.reason-method .accelerator__trigger:hover,
.reason-method .accelerator__trigger:focus-visible {
  border-color: var(--color-text-strong);
}

.reason-method .accelerator__trigger.is-active {
  color: var(--white);
  border-color: var(--navy-800);
  background: var(--navy-800);
  box-shadow: 0 1.5rem 4rem rgb(9 4 89 / 18%);
}

/* 899px 以下で詳細を直下に開くとき（.is-inline・home-method.css 末尾）は影を外す。
   白地なので、下へ 4rem ぼける影が直下の問いと説明文に灰色の帯としてかかる（2026-10-16） */
@media (max-width: 899px) {
  .reason-method .accelerator.is-inline .accelerator__trigger.is-active {
    box-shadow: none;
  }
}

.reason-method .accelerator__trigger::before {
  background: conic-gradient(from var(--accelerator-trace-angle), transparent 0 68%,
              rgb(86 80 185 / 35%) 74%, var(--navy-800) 82%,
              rgb(86 80 185 / 70%) 87%, transparent 94%);
}

.reason-method .accelerator__number {
  color: var(--navy-400);
}

.reason-method .accelerator__trigger.is-active .accelerator__number {
  color: var(--navy-300);
}

.reason-method .accelerator__details {
  border-top-color: var(--color-border);
}

.reason-method .accelerator__detail > p {
  color: var(--color-text-muted);
}

.reason-method .accelerator__detail > p span,
.reason-method .accelerator__detail h3,
.reason-method .accelerator__detail div strong {
  color: var(--color-text-strong);
}

.reason-method .accelerator__detail div {
  border-left-color: var(--color-border-strong);
}

.reason-method .accelerator__detail div span {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   導入ブロックのキャッチ «中小企業にこそ、戦略を»（reason/sections/intro.php）。
   ★glcl_reason() の 'intro_title_lines' の 1 行ずつを inline-block で包む。
     入りきらない幅では «こそ、» の後ろでだけ折れ、行の中では折れない。
   ★2026-10-14：.page-intro__catch の word-break: auto-phrase が Safari に無く、
     text-wrap: balance だけが効いて «中小企業にこ／そ、戦略を» と語中で割れていた。
     Chrome でも auto-phrase が «中小企業に／こそ、戦略を» と切っていた。
   ★«中小企業にこそ、» 8 字は --text-5xl の最小 36px で 288px。375px 幅（335px）に収まる。
   -------------------------------------------------------------------------- */
.reason-catch__line {
  display: inline-block;
}

/* ==========================================================================
   導入（ヒーロー）
   --------------------------------------------------------------------------
   demo/reason-hero/4/（案04 THE NUMBER）を採用したもの。2026-09-10 本実装。

     REASON ／ 選ばれる理由
     中小企業にこそ、      ｜  累計支援実績
     戦略を               ｜  1,330 件 ／ 注記
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     （導入 3 段落）

   ★«驚き» は装飾ではなく «事実の大きさ» で作る。動くのは数字だけ。
   ★カード（角丸＋枠線の箱）を使わない。区切りは線 1 本。
   ★見出しは左揃え。中央に寄せない。
   ========================================================================== */

.reason-intro {
  padding-block: clamp(3rem, 6vw, 5rem) 0;
}

/* REASON ／ 選ばれる理由 */
.reason-intro__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-16));
}

.reason-intro__label {
  padding-right: var(--space-4);
  border-right: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

/*
  ★h1 はページ名（«選ばれる理由»）。大きく組むのは下の h2 のほう。
    見た目は小さいが、<title> とグローバルナビの表記に一致させている。
    ラベル行の一部として組むので、サイズはラベルと揃える。
*/
.reason-intro__h1 {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

/*
  ★左右は下端で揃える（align-items: end）。
    直下の区切り線が «2 つをまとめて受ける» 形になる。
  ★注記が数字の下に入っているので、線の上に乗るのは
    «見出しの最終行» と «注記»。数字の下端は注記のぶん線から浮く。
*/
.reason-intro__grid {
  display: grid;
  gap: var(--space-10);
}

/*
  見出し。トップの FV と同じ組み方（共通部品 .hero-title）。
  ★行の比率と組みは assets/css/components/hero-title.css が持っている
    （__lead 0.5em ／ __main 1em）。ここが持つのは font-size だけ。
    比率をこちらで上書きしない。head.php が全ページで読むので $extra_css も不要。

  ★clamp(3.5rem, 6.5vw + 0.5rem, 7rem) = 56 → 112px。
    幅を決めるのは «大きい 2 行目» ではなく «小さい 1 行目» のほう：
      1 行目「中小企業にこそ、」8 字 × 0.5em × 1.01 = 4.04F  ← 上限を決めるのはこちら
      2 行目「戦略を」        3 字 × 1.00em × 1.01 = 3.03F
    検算（★未実測・字数計算。左列は 1024px 以上でコンテナの 55%）：
       375px   56.0px  1 行目 226px  使える 335px
      1024px   74.6px  1 行目 301px  使える 541px
      1200px   86.0px  1 行目 347px  使える 638px
      1440px  101.6px  1 行目 410px  使える 660px

  ★★CLAUDE.md の «和文見出しの最小サイズは 40px が上限» は
    «8 文字を 1em で 1 行に置く» 前提の数字。この組み方には当たらない
    （hero-title.css も «幅 ÷ 8 → 幅 ÷ 4» として同じことを書いている）。
  ★span の display: block は hero-title.css 側が持つ。ここでは書かない。
*/
.reason-intro__title {
  margin: 0;
  color: var(--color-text-strong);
  font-size: clamp(3.5rem, 6.5vw + 0.5rem, 7rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.reason-intro__stat-label {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
}

.reason-intro__figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-strong);
}

/*
  ★数字だけ Oswald（.u-numeric）。ここが «実績を大きく見せる» の主役。
    Oswald は Noto より数字が背高（100px/700 で 82 対 75）で字幅が 17% 狭く、
    同じ面積でより大きく見える（tokens.css のコメント）。
  ★clamp(4.5rem, 12vw, 11rem) = 72 → 176px。
    検算（★未実測。Oswald の数字を平均 0.55em として概算。右列は 45%）：
       375px   72.0px  必要 198px  使える 335px
      1200px  144.0px  必要 396px  使える 522px
      1440px  176.0px  必要 475px  使える 540px
    ★1440px が最もきわどい（余裕 65px）。上限を上げるなら測り直すこと。
  ★和文見出しの «最小 40px が上限» はここに当たらない（和文が 1 字も無い）。
  ★カウントアップ中に桁が変わっても行がガタつかないよう tabular-nums。
*/
.reason-intro__value {
  font-size: clamp(4.5rem, 12vw, 11rem);
  font-weight: var(--fw-bold);
  line-height: 0.85;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.reason-intro__unit {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: var(--fw-bold);
}

/* 注記。数字の直下（右列の中）。gray-600 は白地に 5.68:1（算出値） */
.reason-intro__note {
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--lh-snug);
}

/*
  区切り線。
  ★hr の既定の枠線を消して、上辺 4px の紺だけにする。
    --border-width-accent は «見出し左のアクセント罫» と同じ 4px。
  ★箱で囲わず線 1 本で受ける（カード UI を使わない方針）。
*/
.reason-intro__rule {
  height: 0;
  margin: clamp(var(--space-8), 3vw, var(--space-12)) 0 0;
  border: 0;
  border-top: var(--border-width-accent) solid var(--color-border-accent);
}

/* --------------------------------------------------------------------------
   区切り線の下：本文と、ヒーローで使わなかった実績 3 つ
   --------------------------------------------------------------------------
   本文は --measure 42em = 714px で止まる。コンテナ 1200px に対して
   右に 486px 空いていたので、そこに残りの確定実績を置く。

   ★2 段に割る下限は 1024px。
     左に本文の行長 30 字（17px × 30 × 1.03 = 525px）を確保したい。
     1024px でコンテナ内寸 984px、左 60% = 590px なので足りる
     （★未実測・字数計算）。768px で割ると左 437px（25 字）になり、
     和文の読み物としては細い。
   ★--measure は左列に残したまま。
     1200px で左列 672px、1440px 以上で 720px となり、
     42em = 714px が効くのは 1440px 以上だけ。狭いときは列幅が先に効く。
   -------------------------------------------------------------------------- */

.reason-intro__split {
  display: grid;
  gap: var(--space-12);
  padding-top: clamp(var(--space-8), 4vw, var(--space-12));
  padding-bottom: var(--section-py);
}

.reason-intro__body {
  max-width: var(--measure);
}

.reason-intro__body p {
  margin: 0;
}

.reason-intro__body p + p {
  margin-top: var(--space-6);
}

/*
  実績 3 つ。区切りは項目間の細い罫だけ。箱にしない。
  ★上辺の太い紺罫は外した（2026-09-10 三嶋指示）。
    すぐ上にヒーローの区切り線（4px 紺）があり、線が二重に見えていた。
  ★見出しの文言は置いていない。dt がラベルを持っているので通じる
    （原稿に無い見出しを作らないため。intro.php のコメント参照）。
*/
.reason-proof {
  margin: 0;
}

/*
  ★項目の上下余白を 24px → 32〜40px に広げた（三嶋指示「もう少しゆとり」）。
    数値が 40〜56px と大きいのに対して 24px では窮屈だった。
  ★高さの見当（★未実測）：1 項目の中身が約 95px。
    上下 40px で 175px、3 項目 525px。左の本文 3 段落とほぼ同じ高さになる。
    48px まで広げると 572px で右のほうが長くなり、下が余る。
*/
.reason-proof > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: clamp(var(--space-8), 3.3vw, var(--space-10));
  border-bottom: var(--border-width) solid var(--color-border);
}

/*
  ★1 つ目だけ上余白を 0 にする。
    上罫を外したので、余白だけ残ると «顧客満足度» が宙に浮いて見える。
    0 にすると左の本文 1 行目と頭が揃う。
*/
.reason-proof > div:first-child {
  padding-top: 0;
}

.reason-proof dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.reason-proof dd {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-strong);
}

/*
  ★ヒーローの 1,330（72 → 176px）より必ず小さくする。
    同じ大きさだと «どちらが主か» が消える。
  ★clamp(2.5rem, 5vw, 3.5rem) = 40 → 56px。ヒーローの 1/3 前後。
  ★Oswald は等幅数字ではない（tokens.css の注意）。
    «4.31» «92» «30» を縦に並べるので tabular-nums で桁を揃える。
*/
.reason-proof dd strong {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  font-variant-numeric: tabular-nums;
}

.reason-proof dd span {
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
}

@media (min-width: 1024px) {
  .reason-intro__split {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    column-gap: clamp(var(--space-10), 5vw, var(--space-20));
    align-items: start;
  }
}

/*
  ★2 段に割る下限は 1024px。
    左 55 : 右 45。1024px のときコンテナ内寸 984px で
    左 541px（見出し 1 行目 301px が収まる）／右 443px（数字 338px が収まる）。
    768px で割ると左 400px となり、その幅の見出し（約 58px）が
    1 行目 234px …は入るが、右列 328px に数字 253px でぎりぎりになる。
    2 つとも余裕を持たせたいので 1024px から。
*/
@media (min-width: 1024px) {
  .reason-intro__grid {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: clamp(var(--space-8), 4vw, var(--space-16));
    /* 既定は下端揃え。行の高さは背の高い右列（ラベル＋数字＋注記）が決める */
    align-items: end;
  }

  /*
   * ★左の見出しだけ上下中央（2026-09-10 三嶋指示）。
   *   右列は «ラベル → 数字 → 注記» の 3 段で背が高く、
   *   左の見出し 2 行はそれより低い。下端で揃えると左が沈んで見えた。
   * ★align-items を center に変えないこと。
   *   グリッド全体を中央にすると右列の注記が浮き、
   *   直下の区切り線が «注記を受ける» 形でなくなる。
   *   変えるのは左の 1 つだけ。
   */
  .reason-intro__title {
    align-self: center;
  }
}

/* ==========================================================================
   戦略 / 施策 / 体制 の 3 層
   ========================================================================== */

.reason-phases {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
  ★1 列のときは上罫線で区切る。箱にしない。
  ★1024px から 3 列。3 列に割る根拠は本文の長さ（★未実測・字数計算）：
    1 項目 160〜180 字あり、1200px を 3 分割すると 1 列 373px。
    17px × 1.03 で 1 行 21 字、9 行前後になる。2 列（586px＝33 字）だと
    5〜6 行で 3 層の高さが揃わず、時間軸として読めなくなる。
*/
.reason-phase {
  padding-block: var(--space-10);
  border-top: var(--border-width) solid var(--color-border);
}

.reason-phase:first-child {
  border-top: var(--border-width-thick) solid var(--color-border-accent);
}

.reason-phase__key {
  margin: 0 0 var(--space-3);
  color: var(--color-text-strong);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-heading);
}

.reason-phase__name {
  margin: 0 0 var(--space-5);
  color: var(--color-text-strong);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.reason-phase__body {
  margin: 0;
  color: var(--color-text);
}

/* 勝ち筋モデルの工程。罫線だけで示す。箱で囲わない */
.reason-phase__steps {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.reason-phase__steps li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: var(--border-width-thick) solid var(--color-border-accent);
}

.reason-phase__steps li + li {
  margin-top: var(--space-2);
}

.reason-phase__step-no {
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.reason-phase__step-key {
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

.reason-phase__step-name {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (min-width: 1024px) {
  .reason-phases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-10);
  }

  .reason-phase {
    padding-block: var(--space-8) 0;
    border-top: var(--border-width-thick) solid var(--color-border-accent);
  }

  /* 3 列のときは全列を同じ太い罫で受ける（1 列目だけ違う、をやめる） */
  .reason-phase:first-child {
    border-top: var(--border-width-thick) solid var(--color-border-accent);
  }
}

/* ==========================================================================
   こんな経営者におすすめ
   ========================================================================== */

.reason-fit__body {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--lh-body);
}

/* 4象限図（THE BLUEPRINT）。図だけを中央に置き、見出しは左揃えのまま。 */
.fit-matrix {
  max-width: 72rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.fit-matrix__axis {
  margin: 0;
  color: var(--color-link);
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.fit-matrix__axis--y {
  padding-block: var(--space-6);
  text-align: center;
}

.fit-matrix__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.fit-matrix__grid {
  --fm-over: var(--space-1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--border-width) solid var(--color-border-accent);
  background:
    repeating-linear-gradient(to right, var(--navy-400) 0 1px, transparent 1px 10%) top / 100% 10px no-repeat,
    repeating-linear-gradient(to right, var(--navy-400) 0 1px, transparent 1px 10%) bottom / 100% 10px no-repeat,
    repeating-linear-gradient(to bottom, var(--navy-400) 0 1px, transparent 1px 10%) left / 10px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--navy-400) 0 1px, transparent 1px 10%) right / 10px 100% no-repeat;
}

.fit-matrix__grid::before,
.fit-matrix__grid::after {
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: var(--border-width-thick) solid var(--color-border-accent);
  content: "";
  pointer-events: none;
}

.fit-matrix__grid::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.fit-matrix__grid::after { right: -8px; bottom: -8px; border-top: 0; border-left: 0; }

.fit-matrix__quad {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 14rem;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border: 0 solid var(--color-border-accent);
}

.fit-matrix__quad[data-q="1"] { border-right-width: var(--border-width); border-bottom-width: var(--border-width); }
.fit-matrix__quad[data-q="2"] { border-bottom-width: var(--border-width); }
.fit-matrix__quad[data-q="3"] { border-right-width: var(--border-width); }

.fit-matrix__qno {
  margin: 0 0 var(--space-5);
  color: var(--navy-400);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
}

.fit-matrix__need {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}

.fit-matrix__rec {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-4) 0 0;
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.fit-matrix__suffix {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
}

.fit-matrix__logo {
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  height: 1.75rem;
}

/* 紺の節では、グローカルの象限だけ白い面に反転する。 */
.reason-fit.on-inverse .fit-matrix__quad--glocal {
  --color-text: var(--gray-800);
  --color-text-strong: var(--navy-800);
  --color-text-muted: var(--gray-600);
  border-color: var(--color-border-accent);
  background: var(--white);
}

.fit-matrix__arrow {
  position: absolute;
  z-index: 2;
  display: block;
  background: var(--navy-200);
  content: "";
  pointer-events: none;
}

.fit-matrix__arrow--up,
.fit-matrix__arrow--down {
  left: 50%;
  width: 1px;
  height: 18px;
  transform: translateX(-50%);
}

.fit-matrix__arrow--left,
.fit-matrix__arrow--right {
  top: 50%;
  width: 18px;
  height: 1px;
  transform: translateY(-50%);
}

.fit-matrix__arrow--up { top: -18px; }
.fit-matrix__arrow--down { bottom: -18px; }
.fit-matrix__arrow--left { left: -18px; }
.fit-matrix__arrow--right { right: -18px; }

@media (min-width: 1024px) {
  .fit-matrix__body {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
  }

  .fit-matrix__axis--x { white-space: nowrap; }
}

@media (max-width: 1023px) {
  .fit-matrix__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-2) var(--space-4);
  }

  .fit-matrix__grid { grid-column: 1 / -1; order: -1; }
  .fit-matrix__axis--x:last-child { text-align: right; }
  .fit-matrix__arrow--left,
  .fit-matrix__arrow--right { display: none; }
}

@media (max-width: 767px) {
  .fit-matrix__quad { min-height: 0; padding: var(--space-5); }
  .fit-matrix__qno { margin-bottom: var(--space-3); font-size: var(--text-3xl); }
  .fit-matrix__rec { font-size: var(--text-base); }
}

/* --------------------------------------------------------------------------
   採用案 02 — THE QUADRANTS
   外枠よりも大きな番号と文字の強弱を主役にし、グローカルだけ白く反転する。
   -------------------------------------------------------------------------- */
.reason-fit .fit-matrix {
  max-width: 76rem;
}

.reason-fit .fit-matrix__grid {
  gap: 1px;
  border: 0;
  background: rgb(255 255 255 / 34%);
}

.reason-fit .fit-matrix__grid::before,
.reason-fit .fit-matrix__grid::after {
  display: none;
}

.reason-fit .fit-matrix__quad {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  border: 0;
  background: var(--navy-900);
}

.reason-fit .fit-matrix__qno {
  position: absolute;
  right: var(--space-6);
  bottom: calc(0px - var(--space-5));
  margin: 0;
  color: rgb(255 255 255 / 8%);
  font-size: clamp(8rem, 15vw, 13rem);
  letter-spacing: -0.06em;
}

.reason-fit .fit-matrix__need,
.reason-fit .fit-matrix__rec {
  position: relative;
  z-index: 1;
  max-width: 25rem;
}

/*
  ★2026-09-16 三嶋指示「4 象限のフォントサイズはもう少し大きく 18px へ」。
    --text-base（PC 17px ／ SP 16px）から 18px へ上げた。
  ★★18px は型の中に無い値なので、トークンではなく 1.125rem を直に書いている。
    近いのは --text-base（17px）と --text-lg（PC 19px ／ SP 18px）で、
    どちらも 18px にならない。指示どおりの値を優先した。
  ★SP（768px 未満）も 18px になるが、**型は崩れない**（実測で確認）。
    375px では隣の節本文（.reason-fit__body）が --text-lg ＝ 18px なので、
    象限の文字と同じ大きさに並ぶ。トークンの --text-base（SP 16px）より
    大きいが、この節に 16px の文字は出ていない。
  ★実測（マス 1 つの行数）：
      375px  マス幅 160px  5〜6 行
      768px  マス幅 345px  2 行
      1280px マス幅 475px  2 行
    どの幅でも横スクロールは出ていない。
*/
.reason-fit .fit-matrix__need {
  font-size: 1.125rem;
}

.reason-fit .fit-matrix__rec {
  margin-top: auto;
  padding-top: var(--space-8);
  font-size: var(--text-xl);
}

.reason-fit .fit-matrix__quad--glocal {
  background: var(--white);
}

.reason-fit .fit-matrix__quad--glocal .fit-matrix__qno {
  color: rgb(9 4 89 / 7%);
}

@media (max-width: 767px) {
  .reason-fit .fit-matrix__quad {
    min-height: 13rem;
  }

  .reason-fit .fit-matrix__qno {
    font-size: 7rem;
  }
}

/* ==========================================================================
   他社比較
   ========================================================================== */

/* 比較表と次の「データで見るグローカル」の間だけ、通常の節間隔へ少し詰める。 */
.reason-compare {
  background-color: var(--color-bg-subtle);
  padding-bottom: var(--section-py);
}

.reason-data {
  padding-top: var(--section-py);
}

/*
  4 分類は共通部品 .rows--grid-2 に置き換えた（2026-09-11）。
  ここにあった .reason-types / .reason-type* は削除済み。
*/
.reason-compare .rows--grid-2 {
  margin-bottom: clamp(var(--space-12), 6vw, var(--space-20));
}

/*
  比較表。
  ★6 列（項目＋5 社種）。375px には入らないので箱ごと横スクロールさせる。
    ページ本体（body）は横スクロールさせない。
  ★min-width の根拠（★未実測。17px 基準の字数計算による見積り。要ブラウザ確認）：
    «顧客課題に即した提案» 10 字 = 176px → 余白込み 220px
    社種列は «作業代行型» 5 字 = 88px → 余白込み 116px × 5 = 580px
    合計 800px。これを下回ると行内で折り返して行高が揃わなくなる。
*/
/*
  ★position: relative は 2026-10-15 に足した。表の中の .u-visually-hidden（position: absolute）は
    ここが基準にならないと横スクロールの枠の外へ漏れ、375px でページ幅が 767px に広がっていた。
*/
.reason-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reason-table-scroll:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.reason-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.reason-table th,
.reason-table td {
  padding: var(--space-4) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.reason-table thead th {
  border-bottom: var(--border-width-thick) solid var(--color-border-accent);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* 行見出し（項目名）だけ左揃え。見出しを中央に寄せない方針に合わせる */
.reason-table th[scope="row"] {
  width: 220px;
  color: var(--color-text-strong);
  font-weight: var(--fw-medium);
  text-align: left;
  white-space: nowrap;
}

.reason-table thead th:first-child {
  text-align: left;
}

/*
  ★グローカル列は «面の塗り分け» で示す。枠線で囲った箱にしない。
    navy-200 (#d8d7ea) の上に navy-800 の記号を置く。**12.64:1**（算出値）。
  ★列の記号は 1 文字なので «大きい文字» 扱いにはしない。本文基準 4.5:1 で見る。
*/
.reason-table .is-glocal {
  /*
    白地に対し 1.42:1（WCAG 式で算出）。列が «塗り分けられている» と分かる最小限。
    列の意味はヘッダーの «グローカル» という文字でも示しているので、
    面だけが情報を担ってはいない。
  */
  background-color: var(--reason-plane);
}

.reason-table thead th.is-glocal {
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
}

.reason-table tbody td {
  color: var(--color-text);
  font-size: var(--text-lg);
}

.reason-table tbody td.is-glocal {
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   データで見るグローカル
   ========================================================================== */

.reason-block + .reason-block {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: var(--border-width) solid var(--color-border);
}

.reason-block__title {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-4);
  border-left: var(--border-width-accent) solid var(--color-border-accent);
  color: var(--color-text-strong);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.reason-block__note {
  max-width: var(--measure);
  margin-top: var(--space-8);
  color: var(--color-text);
}

/* 業界。トップページの支援実績と同じ、角丸なしの四角囲み */
.reason-industries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reason-industries li {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text-strong);
  font-size: 17px;
  line-height: var(--lh-snug);
}

/* --------------------------------------------------------------------------
   地域別の日本地図（ドット）— 白地版
   --------------------------------------------------------------------------
   図そのものは includes/components/japan-dot-map.php が吐く SVG で、
   トップページ（demo/b1 の支援実績）と同じ部品。**形と字送りは共通。**

   ★★配色だけこのページ専用に作り直している。
     トップの支援実績は紺地（.on-inverse ＋ 背景動画）で、
     b1-case-results.css のドットは «白 ↔ navy-500 の混色»、
     地方名 navy-100 / 件数 白 / 合計の箱は白 5% 塗り＋白 28% 罫。
     このデータ節は白地なので、あちらの配色をそのまま持ってくると
     **ドットも地方名も件数も見えない。**

   ★濃淡の向きも反転させている。
     紺地では «明るいほど件数が多い»。白地では «濃いほど件数が多い»。
     PHP が渡す --mix（34〜100）はそのまま使い、混ぜる 2 色だけ入れ替えた。

   ★薄い端は navy-300（--reason-figure-light）。白 #fff 比で算出：
       navy-100 … 最も薄い中国・四国が 2.63:1  ← 3:1 に届かない
       navy-200 … 3.06:1（当初これにしていた）
       navy-300 … 3.93:1  ← 採用
     ★navy-200 から navy-300 へ上げたのは、同じページのドーナツと端を揃えるため。
       ドーナツは mix の下限が 22（地図は 34）まで下がるので、navy-200 だと
       «営業 14%» の区画が白地比 2.27:1 で消え、«マーケティング 18%» の
       区画上の文字が 4.47:1 で本文基準を割る。2 つの図で別の端を使うと
       同じページで濃淡の尺度が 2 本立つので、濃い側に揃えた。
     採用値での全地方（白地比）：
       関東 642    17.90:1     中部 240    13.29:1
       近畿 159     8.94:1     北海道 105   7.61:1
       東北 109     5.54:1     九州・沖縄 44 5.02:1
       中国・四国 31 3.93:1
     ★端を動かすと最も薄いドットが 3:1 を割りうる。動かすなら再計算すること。

   ★合計の箱は «白地に紺文字» ではなく «紺ベタに白文字» にした。
     白地のページで白い箱は面として立たず、罫線で囲うとカード UI になる。
     紺ベタは «面の塗り分け» なので方針どおりで、実績も大きく見える。
     navy-800 の上：ラベル navy-100 = 15.12:1 ／ 数値 白 = 17.90:1 ／ 注記 navy-200 = 12.64:1。

   ★★アニメーションは «.reason-map.is-visible» に紐づけている。
     b1 側は «.support-panel--regions.is-visible»。そのクラスはこのページに無いので、
     b1 の指定をそのまま持ってくるとドットが 1 つも出ない。
     is-visible を付けるのは assets/js/reveal.js。$extra_js から外さないこと。

   ★@keyframes は b1-case-results.css と同名・同内容を意図的に重複させている。
     あちらは demo 専用 CSS でこのページからは読んでいないため、ここに無いと動かない。
     将来 assets/css/components/japan-map.css へ «形だけ» 括り出すのが本筋だが、
     それは b1 側の $extra_css を触ることになるので今回は見送った（要判断）。
   -------------------------------------------------------------------------- */

.reason-map {
  margin-top: calc(0px - var(--space-4));
  margin-bottom: var(--space-8);
}

.reason-map .japan-map {
  display: block;
  width: 100%;
  height: auto;
}

/* 画面が狭いときは左右のガターぶん食い込ませて、地図を大きく使う */
@media (max-width: 767px) {
  .reason-map .japan-map {
    width: calc(100% + 2rem);
    max-width: none;
    margin-inline: -1rem;
  }
}

/*
  ドット。--mix は PHP が地方ごとに渡す 34〜100。
  ★b1 は color-mix(in srgb, var(--white) var(--mix), var(--navy-500))。
    白地では色の順番を入れ替えて «濃いほど多い» にする。
*/
.reason-map .japan-map__dots circle {
  fill: color-mix(in srgb, var(--navy-800) var(--mix), var(--reason-figure-light));
  transform-box: fill-box;
  transform-origin: center;
}

.reason-map.is-visible .japan-map__dots circle {
  animation: japan-dot-land 720ms cubic-bezier(0.22, 0.75, 0.24, 1) both;
  animation-delay: var(--dot-delay);
}

.reason-map.is-visible .japan-map__inset {
  animation: japan-map-copy-in 420ms ease-out 760ms both;
}

.reason-map.is-visible .japan-map__name,
.reason-map.is-visible .japan-map__value {
  animation: japan-map-stat-in 900ms cubic-bezier(0.22, 0.75, 0.24, 1) 950ms both;
}

.reason-map.is-visible .japan-map__total {
  animation: japan-map-copy-in 520ms ease-out 900ms both;
}

@keyframes japan-dot-land {
  0% {
    opacity: 0;
    transform: translateY(calc(0px - var(--drop))) scale(0.72);
  }

  72% {
    opacity: 1;
  }

  88% {
    transform: translateY(1.5px) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes japan-map-copy-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes japan-map-stat-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*
  沖縄インセットの斜め罫。地図の一部ではないのでドットより弱く。
  ★navy-300 は白地に対して 1.91:1（算出値）。非テキストの目安 3:1 には届かない。
    ただしトップ側の rgba(255,255,255,0.24) も紺地に対して 1.96:1 で、
    **意図的に弱くしてある線**。こちらはその強さに合わせただけで、
    白地版で弱めたわけではない。
  ★3:1 まで上げるなら navy-400（3.21:1）。ただし両ページ揃えて変える判断が要る。
*/
.reason-map .japan-map__inset {
  fill: none;
  stroke: var(--navy-300);
  stroke-width: 1.5;
}

.reason-map .japan-map__name {
  fill: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: var(--fw-bold);
}

.reason-map .japan-map__value {
  fill: var(--color-text-strong);
  font-family: var(--font-numeric);
  font-size: 50px;
  font-weight: var(--fw-bold);
}

/* 単位は数字と同じ大きさにしない。数字を主役にする */
.reason-map .japan-map__unit {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: var(--fw-bold);
}

/* 合計の箱。紺ベタ＋白文字（面の塗り分け。枠線の箱にしない） */
.reason-map .japan-map__total rect {
  fill: var(--navy-800);
  stroke: none;
}

.reason-map .japan-map__total-label {
  fill: var(--navy-100);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: var(--fw-bold);
}

.reason-map .japan-map__total-value {
  fill: var(--white);
  font-family: var(--font-numeric);
  font-size: 56px;
  font-weight: var(--fw-bold);
}

.reason-map .japan-map__total-note {
  fill: var(--navy-200);
  font-family: var(--font-sans);
  font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .reason-map.is-visible .japan-map__dots circle,
  .reason-map.is-visible .japan-map__inset,
  .reason-map.is-visible .japan-map__name,
  .reason-map.is-visible .japan-map__value,
  .reason-map.is-visible .japan-map__total {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   契約更新率 ＋ ご依頼内容 の 2 カラム
   --------------------------------------------------------------------------
   トップページの支援実績ダッシュボードと同じ配置。
   1 行目に地域（全幅）、2 行目にこの 2 つが並ぶ。

   ★列比 48:52 はトップの値をそのまま使う。
     b1-case-results.css に «40:60 → 53:47 → 50:50 と試したうえでの値» と
     経緯が残っている。同じ 2 つを並べるので、その結論を引き継ぐ。
   ★2 列に割る下限は 768px。トップと同じ。
     これより狭いと、左の «92%»（clamp の下限 5rem = 80px）と
     右のドーナツ（ラベルを円の外に出す作り）が同じ行に入らない。
   ★トップのダッシュボードと同じく、パネル間を 1px の罫線でつなぐ。
     角丸は付けず、白地用の配色だけこのページ側で持つ。
   -------------------------------------------------------------------------- */

.reason-pair {
  display: grid;
  gap: 0;
  overflow: visible;
  background-color: transparent;
  border: 0;
}

.reason-block + .reason-pair {
  padding-top: 0;
  border-top: 0;
}

.reason-pair__col {
  min-width: 0;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  background-color: var(--color-bg);
}

.reason-pair .reason-block__title {
  margin-bottom: var(--space-6);
  padding-left: 0;
  border-left: 0;
  font-size: var(--text-xl);
}

/*
  横並びにする下限（2026-09-16 三嶋指示で 2 カラム → **3 カラム**）。

  ★★**1280px（xl）から 3 列**。768px や 1024px では割らない。
    実測（描画倍率 = ドーナツ SVG の幅 ÷ 660。文字も同じ率で縮む）：
      1425px … 1 列の内寸 345px → 52% → 名称 10.4px ／ 割合 8.3px
      1280px … 1 列の内寸 307px → 47% → 名称  9.4px ／ 割合 7.5px
      1024px … 1 列の内寸 253px → 38% → 名称  7.6px ／ 割合 6.1px
    → **どの幅でも CLAUDE.md の下限（13px）を下回る。**
      1280px を選んだのは «いちばんマシ» という理由でしかない。
    ★★★ドーナツの文字が読めない問題は **未解決**。三嶋の判断待ち。
      直すには «ラベルを SVG の外（HTML の凡例）へ出す» か
      «横棒に戻す» のどちらかで、どちらも図の設計変更になる。
      共通部品（includes/components/request-donut.php）はトップページと共有なので
      勝手に触らない。

  ★1280px 未満は 1 列に積む。2 カラムには戻さない
    （3 つを 2 列に入れると «2 + 1» の変則になり、空きマスができる）。
*/
@media (min-width: 1280px) {
  .reason-pair {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   契約更新率 — トップページ（支援実績）と同じ見せ方の白地版
   --------------------------------------------------------------------------
   巨大な数値 → <progress> → 2 列の凡例 → 注記。構造はトップと同じ。
   ★配色だけ白地用。トップは紺地パネルの上なので
     数値 白 ／ トラック rgba(255,255,255,.12) ／ 塗り navy-400 ／ 凡例 navy-200。
     そのまま持ってくると白地では数値もトラックも見えない。
   ★算出値（白 #fff 比）：
       数値 navy-800            17.90:1
       progress 塗り navy-800 vs トラック navy-200  12.64:1（図の目安 3:1）
       凡例ラベル gray-600       5.68:1
       凡例の値 navy-800        17.90:1
   ★progress のトラック単体は白地に対して 1.42:1 で、非テキストの目安 3:1 に届かない。
     ただし «92%» を巨大な数字と凡例の両方でテキストにも出しているので、
     トラックだけが情報を担ってはいない（WCAG 1.4.11 の除外）。
     参考にトップ側は rgba(255,255,255,.12) がパネル地に対して 1.31:1、
     塗りとの差が 4.63:1。こちらは 1.42:1 / 12.64:1 で、**どちらも上回っている**。
   -------------------------------------------------------------------------- */

.reason-renewal__value {
  margin: 0;
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/*
  ★数値だけ極端に大きくする。CLAUDE.md の «実績を大きく見せる» に当たる箇所。
    トップと同じ clamp(5rem, 10vw, 9rem)。和文が混ざらない（数字と % だけ）ので
    «見出しの最小 40px» の制約には当たらない。
*/
.reason-renewal__value span {
  font-size: clamp(5rem, 10vw, 9rem);
}

.reason-block progress {
  display: block;
  width: 100%;
  height: 0.35rem;
  margin-top: var(--space-6);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--reason-plane);
  color: var(--color-action);
}

.reason-block progress::-webkit-progress-bar {
  border-radius: var(--radius-full);
  background-color: var(--reason-plane);
}

.reason-block progress::-webkit-progress-value {
  border-radius: var(--radius-full);
  background-color: var(--color-action);
}

.reason-block progress::-moz-progress-bar {
  border-radius: var(--radius-full);
  background-color: var(--color-action);
}

/*
  ★2 つを等分にしない（トップ側と同じ理由）。
    «契約終了 8%» は等分だと «契約終了» と «8%» が離れて置かれ、対になって読めない。
    2 つ目は中身の幅に詰める。1 つ目（契約更新 92%）が残りを取るので
    罫線は右端まで届く。
*/
.reason-renewal__legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.reason-renewal__legend p {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.reason-renewal__legend strong {
  color: var(--color-text-strong);
}

/* --------------------------------------------------------------------------
   ご依頼内容のドーナツ — トップと同じ部品の白地版
   --------------------------------------------------------------------------
   図は includes/components/request-donut.php が吐く SVG（トップと共通部品）。
   クラス名は support-pie__* のまま。ここは色だけ上書きする。

   ★濃淡の向きはトップと逆。
     トップ（紺地）は tone-0 が最も明るい（白 100%）。
     白地では tone-0 を最も濃く（navy-800）し、«濃いほど構成比が大きい» にする。
     区画の並びは «大小交互»（部品側の $pieOrder）なので、
     濃淡は大きさ順ではなく並び順に沿う。トップと同じ性質。

   ★区画上の % 文字の色は tone ごとに切り替える。切り替え位置は算出で決めた
     （白 #fff 比・区画色に対する比、算出値）：
       tone-0 新規事業31%    #090459  白地17.90  白文字17.90 ← 白
       tone-1 業務改善 3%    #201b6a  白地14.72  白文字14.72 ← 白
       tone-2 人事制度17%    #37337b  白地10.93  白文字10.93 ← 白
       tone-3 その他  4%    #4e4a8c  白地 7.83  白文字 7.83 ← 白
       tone-4 マーケ 18%    #65629d  白地 5.54  白文字 5.54 ← 白
       tone-5 採用   13%    #7c79ae  白地 4.04  navy900 4.75 ← navy-900
       tone-6 営業   14%    #9390be  白地 3.01  navy900 6.37 ← navy-900
     区画上の文字は 16px なので «大きい文字» 扱いにせず本文基準 4.5:1 で見る。
     最も薄い tone-6 でも白地に対して 3.01:1 で、区画の輪郭が追える。
   ★★トップの切り替え位置（tone-3 と tone-4 の間）とは違う。
     濃淡を反転したので当然だが、片方を直すときにもう片方も直したくなる。
     **連動していない。**それぞれのページで算出し直すこと。
   -------------------------------------------------------------------------- */

.reason-pie .support-pie__chart {
  display: block;
  width: 100%;
  max-width: 45rem;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .reason-pie .support-pie__chart {
    width: calc(100% + 2rem);
    max-width: none;
    margin-inline: -1rem;
  }
}

.reason-pie .support-pie__tone-0 { --pie-color: color-mix(in srgb, var(--navy-800) 100%, var(--reason-figure-light)); --pie-label: var(--white); }
.reason-pie .support-pie__tone-1 { --pie-color: color-mix(in srgb, var(--navy-800)  87%, var(--reason-figure-light)); --pie-label: var(--white); }
.reason-pie .support-pie__tone-2 { --pie-color: color-mix(in srgb, var(--navy-800)  74%, var(--reason-figure-light)); --pie-label: var(--white); }
.reason-pie .support-pie__tone-3 { --pie-color: color-mix(in srgb, var(--navy-800)  61%, var(--reason-figure-light)); --pie-label: var(--white); }
.reason-pie .support-pie__tone-4 { --pie-color: color-mix(in srgb, var(--navy-800)  48%, var(--reason-figure-light)); --pie-label: var(--white); }
.reason-pie .support-pie__tone-5 { --pie-color: color-mix(in srgb, var(--navy-800)  35%, var(--reason-figure-light)); --pie-label: var(--navy-900); }
.reason-pie .support-pie__tone-6 { --pie-color: color-mix(in srgb, var(--navy-800)  22%, var(--reason-figure-light)); --pie-label: var(--navy-900); }

/* 契約更新率の「契約終了 8%」だけは、補助区画として最も薄い面にする。 */
.reason-renewal-pie .support-pie__tone-1 {
  --pie-color: var(--reason-figure-light);
  --pie-label: var(--navy-900);
}

.reason-pie .support-pie__segment {
  fill: var(--pie-color);
}

/* --------------------------------------------------------------------------
   狭い列用のドーナツ ＋ 凡例（2026-09-16 三嶋指示）
   --------------------------------------------------------------------------
   「円グラフの表示エリアはもっと大きく。数字が見えない。」への対応。

   ★★**原因は列幅ではなく viewBox の無駄だった。**
     もとの viewBox は 0 0 660 410。円は 344×344 しかなく、
     **幅の 48%（316px 相当）は «円の外に置く名称ラベル» の置き場**だった。
     SVG は中の文字も一緒に縮むので、1/3 幅（内寸 319px）では
       描画倍率 48% → 割合 7.7px ／ 名称 9.7px（1425px 実測）
     まで落ちていた。CLAUDE.md の下限 13px を大きく割る。

   ★★**やったこと：viewBox を円の外接矩形（158 33 344 344）に切った。**
     同じ列幅のまま、円の描画幅が **165px → 319px（1.93 倍）**。
     割合の文字は 7.7px → **14.8px**。列を広げずに «表示エリアを大きく» している。
     ★切り替えは PHP 側の $compact（includes/components/request-donut.php）。
       ここは «その姿に合わせた CSS» だけを持つ。

   ★★**名称ラベルは SVG の外（HTML の凡例）へ出した。**
     SVG の中に残すと、何をしても描画倍率と一緒に縮む。
     外に出せば **拡大縮小しない素の 15px**（--text-sm）で出せる。
     ★部品のコメントにある «凡例との色照合をなくす» という当初の方針からは外れる。
       ただし 1/3 幅では «円の外に名称を置く» 作り自体が成立しない
       （円を小さくするか、文字を読めなくするかの二択になる）。
     ★色見本は support-pie__tone-N が持つ --pie-color をそのまま使う。
       色の定義を二重に持たない。

   ★角丸を付けない。色見本も正方形（CLAUDE.md の «角丸カードを使わない»）。
   -------------------------------------------------------------------------- */
.reason-pie--compact .support-pie__chart {
  /* ★正方形に切ったので、列の幅いっぱいまで使わせる。
     ★共通側（b1-case-results.css）の max-width は 660px の横長を前提にした値なので、
       切ったあとの 344px 系に持ち越さない。**代わりに自分で上限を持つ。** */
  width: 100%;
  /* ★★**300px（18.75rem）で止める。上限が無いと 1 カラムに積む幅で破綻する。**
       実測：1280px 未満は 1 列なので、上限なしだと 1279px で
       **円が 1,105px 四方**まで膨らみ、割合の文字が 51.4px になった。
     ★300px の根拠：3 カラム時の実測 319px より一段階小さく見せる値。
       これで «3 列で横並び» と «1 列に積む» で円の大きさがほぼ変わらない。
       ★3 カラム時にもわずかに効き、円を一段階だけ小さく見せる。
  */
  max-width: 18.75rem;
  overflow: visible;
  /* ★★**中央寄せを自分で持つ。共通側任せにしない。**（2026-09-16 三嶋指摘）
       共通側（b1-case-results.css）は 768px 未満で
         .support-pie__chart { width: calc(100% + 2rem); margin-inline: -1rem }
       という «全幅ブリード» を掛けている。横長 660px の図を狭い画面で
       左右いっぱいまで使わせるための指定で、正方形に切ったこの図には要らない。
     ★width と max-width は上書きしていたが **margin を戻し忘れていた**ため、
       430px で円が左に 16px ずれていた（実測 margin-inline: -16px）。
     ★auto にすることで、22rem の上限に当たって余りが出る幅（768〜1279px）でも
       中央に来る。 */
  margin-inline: auto;
}

.reason-pie--compact {
  display: grid;
}

.reason-pie--compact > .support-pie,
.reason-pie--compact > .reason-pie__title,
.reason-pie--compact > .reason-pie__center {
  grid-area: 1 / 1;
}

/*
  ドーナツの «穴の中» に置く箱（2026-09-16 三嶋指示
  「円グラフの中に入れて。契約更新率のテキストの下」）。

  ★★h3 と注釈を **1 つの箱にまとめて** 中央に置く。
    それぞれに align-self / justify-self: center を掛けると、
    同じグリッドのマス（1/1）で **2 つが重なる**。箱で包めば縦に積める。
  ★★**max-width は «%» で書かない。** 最初 50% にしたが、% はこの箱が入っている
    **グリッドのマスの幅**に対して解決される。マスは列いっぱい（実測 868px）で、
    円の幅（上限 18.75rem ＝ 300px）とは無関係なので、箱が 356px になり溢れた。
  ★★**円の上限から実数で決める。**
    部品の viewBox は 344 四方・内円の半径 96 ＝ 穴の直径 192 → **描画幅の 56%**。
    円は .reason-pie--compact .support-pie__chart で 18.75rem（300px）が上限なので、
    穴は最大 168px。**その半分の 9.375rem（150px）**で止めれば、
    どの幅でもリングに文字が乗らない。
    ★★円の上限（18.75rem）を変えたら、**この値も半分に合わせて直すこと。**
  ★pointer-events: none は既存の __title が持っていたものを箱へ移した。
    円の上に透明な箱が乗るので、これが無いと図のホバーやタップを奪う。
*/
.reason-pie__center {
  z-index: 1;
  align-self: center;
  justify-self: center;
  max-width: 9.375rem;
  pointer-events: none;
}

.reason-pie__title {
  z-index: 1;
  align-self: center;
  justify-self: center;
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-align: center;
  pointer-events: none;
}

.reason-pie--compact > .pie-legend {
  grid-area: 2 / 1;
}

/*
  契約更新率の下の注釈（2026-09-16 三嶋指示「フォントサイズを小さくして」）。

  ★★**直す前は --text-xs を指定していたが、このトークンはどこにも定義されていない。**
    未定義の var() は無効値として宣言ごと捨てられるため、font-size が効かず
    **本文サイズを継承していた**（SP 16px／PC 17px）。それが «大きい» の原因。
    ★同じ書き方が b1-method.css と demo/service-concepts.css にも残っている（未対応）。
  ★行間は --lh-snug（1.65）に詰めた。1.8 は行が離れて «注釈» に見えない。

  ★★★**12px は CLAUDE.md の «注釈 13px は SP でも据え置く» の例外。**
    2026-09-16 に «もっと小さく» と三嶋から **2 度**指示があり、
    1 度目で「13px が下限」とお伝えしたうえで **三嶋の判断として下げた**。
    勝手に下げたのではない。戻すときも三嶋の判断を経ること。
    ★★ここだけの例外にするため **--text-xs というトークンは定義していない。**
      定義すると b1-method.css:318 と demo/service-concepts.css（3 箇所）の
      «未定義で無効になっていた指定» が一斉に生き、
      **トップページ（demo/b1 は b1-method.css を読む）の見え方が変わる**。
      CLAUDE.md「トップページの PC 表示は 1px も変えない」に触れるので実数で書く。
    ★これ以上は下げない。11px は本文の 2/3 で、50 代の読者には読めない。

  ★中央揃え（2026-09-16 三嶋指示「円グラフの中央に位置させて」）。
    ★ドーナツ側も中央寄せなので、これで **円の中心軸と揃う**。
    ★CLAUDE.md の «中央揃えにしない» は節見出しの話。
      図に添える注釈を図の中心に合わせるのはその対象外。
*/
/*
  ★★**上余白 32px（--space-8）は «かぶり» を避けるための実測値。**（2026-09-16 三嶋指摘）
    部品は区画名（「契約更新」「契約終了」）を **リングの外** に置く設計だが、
    compact の切り抜きは viewBox="158 33 344 344" ＝ **リングの外接矩形ちょうど**。
    そのため下向きの区画名が箱から出て、overflow: visible でそのまま描かれ、
    この注釈に重なっていた。
    ★実測（1425px）：SVG の箱の下端 6621 に対し「契約更新」は 6627〜6647。
      **26px はみ出している。** 12px（--space-3）では注釈の上端が 6633 で衝突。
      32px にすると 6653 で 6px 逃げる。
  ★★**これは «逃がしただけ» の対処で、原因は直していない。**
    ・数値が変われば区画名の角度が変わり、はみ出し量も変わる（いまは 92% ／ 8%）
    ・横向きの区画名（ご依頼内容の「マーケティング」など）は左右にはみ出している
    根治するなら compact の切り抜きを区画名の分だけ広げるか、
    区画名をリングの内側に置く（部品に is-inside の仕組みが既にある）。
    どちらも部品の変更なので、三嶋の判断を経ること。
*/
.reason-renewal-note {
  grid-area: 2 / 1;
  margin: var(--space-8) 0 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: var(--lh-snug);
  text-align: center;
}

/* 10のお約束とFAQの間に置く本文内CTA。独立した帯なので上余白を重ねない。 */
.reason-policy + .inline-cta {
  margin-top: 0;
}

/* FAQはサービスページと同じ薄紫の面を使う。 */
.reason-faq {
  background-color: var(--color-bg-subtle);
}

.pie-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.pie-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* ★ラベルは 15px。SVG の外なので、円の大きさに関係なくこの実寸で出る。
     CLAUDE.md「ラベル 15px は SP でも据え置く」に合わせている。 */
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.pie-legend__swatch {
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--space-3);
  /* ★色はドーナツの区画と同じ --pie-color。li に付いた
     support-pie__tone-N が背負っているので、ここでは参照するだけ。 */
  background-color: var(--pie-color);
  /* ★いちばん薄い濃淡が白地に埋もれるので、細い枠で輪郭を残す */
  border: var(--border-width) solid var(--color-border);
}

.reason-pie .support-pie__pct {
  fill: var(--pie-label);
  font-family: var(--font-numeric);
  font-size: 16px;
  font-weight: var(--fw-bold);
}

.reason-pie .support-pie__slice-name {
  fill: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-medium);
}

.reason-pie .support-pie__slice-name.is-inside {
  fill: var(--pie-label);
}

.reason-pie--compact .support-pie__pct {
  font-size: 22px;
}

/*
  支援サービス名。円の外に置くので地は白。navy-800 で 17.90:1。
  ★★font-size 20px は includes/components/request-donut.php の
    $labelFontSize / $labelHalfHeight と揃っていること。
    片方だけ変えるとラベルが円に食い込むか、離れすぎる。
    揃える先は部品と、トップ側の b1-case-results.css の 3 箇所。
*/
.reason-pie .support-pie__callout text {
  fill: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   コンサルティングポリシー — 選択型インデックス
   ========================================================================== */

.reason-policy__layout {
  display: grid;
  gap: clamp(var(--space-12), 8vw, var(--space-20));
  align-items: start;
}

.reason-policy__kicker {
  margin: 0 0 var(--space-4);
  color: var(--color-action);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
}

.reason-policy .reason-head {
  margin-bottom: 0;
}

.reason-policy .reason-head .sec-head__label {
  max-width: 8em;
  font-size: clamp(2.5rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  word-break: auto-phrase;
}

.reason-policy .reason-head .sec-head__label::before {
  display: none;
}

.reason-policy .reason-head .sec-head__lead {
  margin-top: var(--space-8);
  line-height: 1.9;
}

.reason-policy__hint {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 2px solid var(--navy-800);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.reason-policy__items {
  border-top: 2px solid var(--navy-800);
}

.reason-policy__item {
  border-bottom: var(--border-width) solid var(--color-border-strong);
}

.reason-policy__item summary {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 1rem;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-6);
  cursor: pointer;
  list-style: none;
}

.reason-policy__item summary::-webkit-details-marker {
  display: none;
}

.reason-policy__item summary::after {
  color: var(--color-action);
  font-size: var(--text-2xl);
  line-height: 1;
  content: "+";
}

.reason-policy__item[open] summary::after {
  content: "−";
}

.reason-policy__no {
  color: var(--navy-400);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
}

.reason-policy__item h3 {
  margin: 0;
  color: var(--color-text-strong);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: inherit;
}

.reason-policy__body {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  padding-bottom: var(--space-8);
}

.reason-policy__body p {
  grid-column: 2;
  max-width: 42rem;
  color: var(--color-text);
  line-height: 1.9;
}

.reason-policy__item[open] {
  background-color: var(--white);
}

.reason-policy__item[open] summary,
.reason-policy__item[open] .reason-policy__body {
  padding-inline: var(--space-5);
}

@media (min-width: 1000px) {
  .reason-policy__layout {
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
  }

  .reason-policy__intro {
    position: sticky;
    top: calc(var(--header-height) + var(--space-16));
  }
}

@media (max-width: 767px) {
  .reason-policy__item summary {
    grid-template-columns: 3rem minmax(0, 1fr) 1rem;
  }

  .reason-policy__body {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .reason-bar {
    grid-template-columns: 10em minmax(0, 1fr) 5em;
  }
}