/* ==========================================================================
   service-newbiz.css — サービスページ 01 新規事業立ち上げ／3 案の共通
   --------------------------------------------------------------------------
   ★3 案で «同じに見えるべき» ものだけをここに置く。
     案ごとの主役の見せ方は service-newbiz-1 / -2 / -3.css に分ける。

   ★守っていること（CLAUDE.md / docs/design-system.md）
     - 角丸カードを使わない。区切りは 1px の罫と、面の塗り分けだけ
     - 見出しは左揃え。中央揃えにしない
     - 色は白と紺 #090459 のトーン展開のみ。第 2 色相を足さない
     - ウェイトは 400 / 500 / 700 の 3 種のみ
     - 数字は «見せる数字» にだけ .u-numeric（Oswald）。本文中の数字には付けない
     - 生のスケール（--navy-700 等）を直接参照しない。意味トークンを使う

   ★明るい地で使ってよい文字色の下限（decisions.md 2026-09-10 の実測）
     navy-300 = 1.91:1 … 使えない。装飾番号でも不可
     navy-400 = 3.21:1 … 18.66px 以上、または bold の «大きい文字» だけ
     gray-600 = 5.68:1 … 通常の文字はここまで
   ========================================================================== */

/* SP の表紙だけ上下の余白を圧縮する。
   PC の共通ヒーローと、タイトル・CTA 間の余白には影響させない。 */
@media (max-width: 767px) {
  .page-hero.page-hero--photo {
    padding-block: var(--space-20) var(--space-24);
  }
}

/* --------------------------------------------------------------------------
   注記（仮素材・ご教示いただきたい箇所）
   ★画面上部の «DEMO» 帯は 2026-09-02 に撤去済み。復活させない（CLAUDE.md）。
     代わりに、その要素の近くに注記を出す方式。
   -------------------------------------------------------------------------- */
.nb-note {
  max-width: var(--measure);
  margin-block: var(--space-5) var(--space-8);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--lh-snug);
}

.on-inverse .nb-note {
  border-left-color: var(--color-border-on-inverse);
  color: var(--color-text-on-inverse-muted);
}

/* ==========================================================================
   1. こんな課題はありませんか
   ★チェックボックスの絵は置かない。診断ツールに見えてしまう。
   ========================================================================== */
.nb-issues__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.nb-issues__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

/* 課題側の装飾番号は抑え、解決策側へ視線が進むようにする */
.nb-issues__no {
  font-family: var(--font-numeric);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}

.on-inverse .nb-issues__no {
  color: var(--color-text-on-inverse-muted);
}

.nb-issues__text {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-text-strong);
}

.nb-issues__content {
  min-width: 0;
}

.on-inverse .nb-issues__text {
  color: var(--color-text-on-inverse);
}

/* --------------------------------------------------------------------------
   項目の下の一文（2026-09-15・案 D-2）
   --------------------------------------------------------------------------
   旧 04「なぜその課題が起きるのか」を節ごとやめ、原因をここで一言だけ添える。
   ★★**課題文より小さく、弱くする。** 課題文が主、この一文が従。
     同じ大きさにすると «原因の節» が項目の中に復活したのと同じになり、
     «上から目線» を避けた意味が無くなる（やめた理由そのもの）。
   ★本文サイズ（17px）・行送りは本文と同じ。色は 1 段落とす。
   ★3 カラム（案 C-1）でも 3 行（1024px 未満）でも同じ規則で効く。
     カラムの中では課題文の下にそのまま積まれる。
   -------------------------------------------------------------------------- */
.nb-issues__why {
  margin-top: var(--space-3);
  /* ★★既定（3 行組み）の .nb-issues__item は «auto minmax(0,1fr)» の 2 列で、
     1 列目が番号、2 列目が課題文。一文は課題文の下に揃えたいので 2 列目に置く。
     ★★**3 カラムの案（.nb-cols-1 / -2 / -3）では外すこと。** 下の @media を参照。 */
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ★★★2026-09-15 の事故の再発防止。**この規則を消すと 02 の番号が消える。**
   3 カラムの案（C-1 / C-2 / C-3）は item を **1 列**（minmax(0,1fr)）にして、
   番号 → 課題文 → 一文 を縦に積む設計。そこへ上の grid-column: 2 が効くと、
   **暗黙の 2 列目が生まれて 1 列目が 0px に潰れ、番号が消えて横並びになる**
   （1425px で実測：番号の幅 0px、課題文が x=129 へ寄る）。
   採用案 C-1 の «番号を上に大きく置く» という設計そのものを壊していた。 */
@media (min-width: 1024px) {
  .nb-cols-1 .nb-issues__why,
  .nb-cols-2 .nb-issues__why,
  .nb-cols-3 .nb-issues__why {
    grid-column: auto;
  }
}

.on-inverse .nb-issues__why {
  color: var(--navy-200);
}

/* 支援の考え方：見出しと前置きを1つのまとまりに見せる。
   ★ 隣接マージンは相殺するので、16px にすると .nb-approach__cause の
     margin-top（24px）が勝ち、実際の間隔は 48px → 24px になる。
   ★ .sec-head はサイト共通クラスなので、この節だけに絞って上書きする。 */
.nb-approach .sec-head {
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   03 支援の考え方 — 勝ち筋モデルを受ける前置き（2026-09-15・案 D-2）
   --------------------------------------------------------------------------
   ★節見出しの «後»、項目の «前»。上の一文が «何をするか»、この一文が «なぜそう見るか»。
   ★★節見出しより強くしない。ここを大きくすると «原因の節» が戻ってくる。
   ★★2026-09-15 三嶋指示で **左の 2px の縦罫を外した**。
     もとは «立場の表明» であることを示すために引いていたが、
     この節で罫が付くのはここだけで、かえって注記（.nb-note）に見えていた。
     ★罫と一緒に padding-left（20px）も外している。罫のためだけの余白なので、
       残すと文頭だけが 20px 右にずれ、節の中で左端が揃わなくなる。
       これで h2・一文・3 項目とすべて同じ左端に乗る。
   ★角丸カードにしない（才流との差別化の 2 本柱）。
   -------------------------------------------------------------------------- */
.nb-approach__cause {
  max-width: var(--measure);
  margin-top: var(--space-6);
  margin-bottom: var(--space-10); /* 前置きとカードの間を 0 → 40px */
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.on-inverse .nb-approach__cause {
  color: var(--color-text-on-inverse);
}

/* ==========================================================================
   2. なぜその課題が起きるのか（既定の見せ方）
   ========================================================================== */
.nb-cause__list {
  display: grid;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .nb-cause__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-10);
  }
}

.nb-cause__item {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border-accent);
}

.on-inverse .nb-cause__item {
  border-top-color: var(--color-text-on-inverse);
}

.nb-cause__key {
  margin-bottom: var(--space-2);
  font-family: var(--font-numeric);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
}

.on-inverse .nb-cause__key {
  color: var(--color-text-on-inverse-muted);
}

.nb-cause__name {
  margin-bottom: var(--space-4);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.on-inverse .nb-cause__name {
  color: var(--color-text-on-inverse);
}

.nb-cause__body {
  line-height: var(--lh-body);
}

/* ==========================================================================
   3 ＋ 5. グローカルの解き方 ／ 支援の内容（既定の見せ方）
   ========================================================================== */
.nb-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.nb-steps__item {
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border-strong);
}

.nb-steps__item:last-child {
  border-bottom: 1px solid var(--color-border-strong);
}

.nb-steps__head {
  margin-bottom: var(--space-8);
}

.nb-steps__no {
  margin-bottom: var(--space-2);
  font-family: var(--font-numeric);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
}

.nb-steps__name {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.nb-steps__tasks {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .nb-steps__tasks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-10);
  }
}

.nb-steps__task-name {
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.nb-steps__task-body {
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

/* 工程の «成果物» の図（2026-09-15 三嶋指示）。
   ★この案は工程そのものが 900px 以上で 2 列に並ぶので、図は «横» ではなく «下» に置く。
     横に割ると 1 工程あたり 235px になり、図も文字も読めない。
   ★角丸カードにしない。輪郭は 1px の罫だけ。 */
.nb-steps__figure {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  background-color: var(--white);
}

.on-inverse .nb-steps__figure {
  border-color: var(--color-border-on-inverse);
}

/* 「手元に残るもの」— 現行サイトに無い欄。空であることを画面に出す */
/* ==========================================================================
   4. 支援で実現できること（既定の見せ方）
   ========================================================================== */
.nb-outcomes__list {
  display: grid;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .nb-outcomes__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
  }
}

.nb-outcomes__item {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border-accent);
}

.on-inverse .nb-outcomes__item {
  border-top-color: var(--color-text-on-inverse);
}

.nb-outcomes__no {
  margin-bottom: var(--space-3);
  font-family: var(--font-numeric);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--navy-400);
}

.on-inverse .nb-outcomes__no {
  color: var(--color-text-on-inverse-muted);
}

.nb-outcomes__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-text-strong);
}

.on-inverse .nb-outcomes__title {
  color: var(--color-text-on-inverse);
}

.nb-outcomes__body {
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

/* ==========================================================================
   6. 料金（案 B：プラン・スプリット）
   ★金額と支援条件を左右に分け、1プランの判断材料を一度に見せる。
   ========================================================================== */
.nb-price__plans {
  display: grid;
  gap: 0;
  margin-bottom: 0;
  border-block: 2px solid var(--color-border-accent);
}

@media (min-width: 900px) {
  .nb-price__plans {
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
    column-gap: var(--space-12);
  }
}

.nb-price__plan {
  align-self: center;
  padding-block: var(--space-10);
}

.nb-price__name {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.nb-price__total {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.nb-price__total-pre,
.nb-price__total-unit {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-strong);
}

.nb-price__total-num {
  font-family: var(--font-numeric);
  font-size: clamp(4.5rem, 10vw, 8rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  color: var(--color-text-strong);
}

.nb-price__option {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
  border-bottom: 2px solid var(--color-border-accent);
  background: var(--color-bg-subtle);
}

@media (min-width: 768px) {
  .nb-price__option {
    /*
      ★★2026-09-30 三嶋指示「左を少し狭く、右を少し広く」。
        0.6fr : 1.4fr → **0.5fr : 1.5fr**。1425px で 左 301 → 251px ／ 右 702 → 752px。

      ★★最小幅も 13rem → 14rem に上げている。**下げていないのは間違いではない。**
        左列は «広い画面では fr で決まり、狭い画面では最小幅で決まる» 2 段構えで、
        比率を下げると狭い画面では最小幅のほうが勝つ。
        13rem（208px）のままだと 1024px で左列が 220 → 208px に縮み、
        いちばん長い «ITツール導入支援»（209px・実測）が入らず 3 行に割れる。
        14rem（224px）なら 1024px でも 209px が 1 行に収まる。
      ★いちばん長い 1 行は «AI・業務自動化支援» の 236px（業務改善ページ・実測）。
        1425px の 251px には収まる。1024px では 2 行になるが、これは変更前と同じ。
    */
    grid-template-columns: auto minmax(14rem, 0.5fr) minmax(0, 1.5fr);
    gap: var(--space-8);
    align-items: start;
    padding: var(--space-10);
  }
}

.nb-price__option-mark {
  color: var(--color-text-strong);
  font-size: var(--text-5xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-none);
}

.nb-price__option-head {
  display: grid;
  align-content: start;
}

.nb-price__option-name {
  margin-bottom: var(--space-1);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.nb-price__option-price {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.nb-price__option-detail {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .nb-price__option-detail {
    /* ★★説明文を行の «上下中央» に置く（2026-09-30 三嶋指示）。
       .nb-price__option は align-items: start なので、右列は上に貼り付いていた。
       左列（オプション名＋料金）のほうが高いと、その差がまるごと下の余白になる。
       1425px 実測：左列 122px ／ 右列 92px ／ 差 30px。中央に置くと上下 15px ずつに割れる。
       ★align-self だけで足りる。align-content は «自分が引き伸ばされている» ときにしか
         効かないので、ここでは何もしない（親が start のため右列は中身の高さのまま）。
       ★左の縦罫は右列と一緒に動く。長さは変わらない（中身の高さのまま）。
         罫を行いっぱいに伸ばしたい場合は align-self: stretch ＋ align-content: center にする。 */
    align-self: center;
    padding-left: var(--space-8);
    border-left: 1px solid var(--color-border);
  }
}

.nb-price__option-body {
  /*
    ★★2026-09-30 三嶋指示「右が余っているので箱を右まで広げ、3 行を 2 行にしたい」。
      38em（646px）→ --measure（42em・714px）。1425px で 1 行 37 → 41 字。
      採用支援の «採用サイト制作» の説明文 74 字が 3 行 → **2 行**に収まる。
    ★★右列（753px）いっぱいには広げていない。42em はこのサイトの行長の上限で、
      読者に 50 代が多いという前提で決めた値（tokens.css の --measure）。
      753px まで広げると 1 行 43 字になり、この上限を超える。
      残る 39px は «読みやすさのために空けている余白» で、詰め忘れではない。
  */
  max-width: var(--measure);
  line-height: var(--lh-body);
}

.nb-price__option .nb-price__note {
  margin-top: 0;
}

/* ==========================================================================
   7. 他社との違い
   ★表は横に広いので、必ず自分の中でだけ横スクロールさせる。
     ページ本体を横スクロールさせない（audit-page.js の検査項目）。
   ========================================================================== */
.nb-compare__scroll {
  overflow-x: auto;
  margin-bottom: var(--space-8);
}

.nb-compare__table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);
}

.nb-compare__table th,
.nb-compare__table td {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.on-inverse .nb-compare__table th,
.on-inverse .nb-compare__table td {
  border-bottom-color: var(--color-border-on-inverse);
}

.nb-compare__corner,
.nb-compare__row-name {
  text-align: left;
  font-weight: var(--fw-medium);
}

.nb-compare__col {
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.on-inverse .nb-compare__col {
  color: var(--color-text-on-inverse-muted);
}

.nb-compare__col.is-own,
.nb-compare__mark.is-own {
  background-color: var(--navy-50);
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
}

.on-inverse .nb-compare__col.is-own,
.on-inverse .nb-compare__mark.is-own {
  background-color: rgb(255 255 255 / 8%);
  color: var(--color-text-on-inverse);
}

/* 自社の列だけ、左右の縦罫と同系色の薄い面で «ここを見る» を作る。 */
.nb-compare__col.is-own,
.nb-compare__mark.is-own {
  border-inline: 1px solid var(--color-border-accent);
}

.on-inverse .nb-compare__col.is-own,
.on-inverse .nb-compare__mark.is-own {
  border-inline-color: var(--color-text-on-inverse);
}

.nb-compare__mark {
  font-size: var(--text-xl);
}

/* ==========================================================================
   8. 支援事例
   ========================================================================== */
.nb-case__body {
  display: grid;
  gap: var(--space-10);
  padding-top: var(--space-8);
  border-top: 2px solid var(--color-border-accent);
}

.nb-case__item + .nb-case__item {
  margin-top: var(--space-16);
}

@media (min-width: 900px) {
  .nb-case__body {
    grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr);
    gap: var(--space-12);
  }
}

.nb-case__metric-num {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-numeric);
  font-size: var(--text-6xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  color: var(--color-text-strong);
}

.nb-case__metric-unit {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
}

/* ★★«変化前 ⇒ 変化後» の数値（2026-09-28 今林・営業強化の «月1〜2件⇒月10件» など）。
   «⇒» の後で 2 行に割る（割り方は _partials.php の nb_metric_html()）。
   1 行のままだと 1425px で 208px の列から最大 63px はみ出し、右の本文に重なっていた。
   新規事業の数値には «⇒» が無いので、このクラスは付かない。
   ★2026-10-05 今林。«→»（教育・研修ほか）と «／»（事業承継の «売上20％増／営業利益30％増»）も同じ扱いにした。 */
.nb-case__metric-num.is-change {
  flex-direction: column;
  align-items: flex-start;
}

.nb-case__metric-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* ★★原稿を文字列で持つ数値（.is-text・新規事業以外の 5 ページ）は、単位を語の途中で折らない。
   900〜1199px では数値の列が細く（minmax(8rem, 0.22fr)）、«％削／減» «件⇒» のように
   単位が割れ、900px では «月1〜2件⇒月10件» が列からはみ出していた（2026-09-29 実測）。
   単位は 1 語として保ち、入りきらないときは «数字 ｜ 単位» の境目で次の行へ送る。
   ★新規事業（値・単位を分けて持つ形）には付かない。新規事業にも同じ幅で «万円» «億円超» の
     折れと «600万円» のはみ出しがあるが、三嶋の組んだ見た目なので触っていない（要確認）。 */
.nb-case__metric-num.is-text,
.nb-case__metric-num.is-text .nb-case__metric-line {
  flex-wrap: wrap;
}

.nb-case__metric-num.is-text .nb-case__metric-unit {
  white-space: nowrap;
}

.nb-case__metric-label {
  /* ★★2026-09-24 三嶋指示で **ラベルが数字の上**に来た（マークアップも入れ替え済み）。
     それまでは数字の下にあり margin-top で離していた。上下が逆になったので
     margin-bottom に付け替える。値は変えていない。 */
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.nb-case__detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  margin: 0;
}

.nb-case__detail dt {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  white-space: nowrap;
}

.nb-case__detail dd {
  margin: 0;
  line-height: var(--lh-body);
}

/* ==========================================================================
   3 案の入口
   ========================================================================== */
.nb-entry__intro {
  margin-bottom: var(--space-12);
}

.nb-entry__intro p + p {
  margin-top: var(--space-5);
}

.nb-entry__list {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nb-entry__item {
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-border-accent);
}

.nb-entry__no {
  margin-bottom: var(--space-2);
  font-family: var(--font-numeric);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--navy-400);
}

.nb-entry__name {
  margin-bottom: var(--space-5);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.nb-entry__meta,
.nb-entry__actions {
  margin-top: var(--space-6);
}

/* ==========================================================================
   03. グローカルの解き方
   ★3 段階の «名前» だけを見せる節。中身（13 項目）は 05 に置く。
   ========================================================================== */
.nb-approach__list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nb-approach__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(var(--space-6), 5vw, var(--space-12));
  /* ★2026-09-24 三嶋指示で «もっと大きく»。24〜40px → 32〜64px。
     ★同日、«h3 の下の余白を小さくしたい。まずはカードの padding を» のご指示で
     **32〜48px** へ 1 段戻した。1425px で 64px → 48px、900px 以下は 32〜40px で据え置き。 */
  padding: clamp(var(--space-8), 3.4vw, var(--space-12));
  /* ★2026-09-24 三嶋指示「カード（li）の左 padding だけを少し小さく」。
     左は番号（.nb-approach__no）が立つ列なので、四方と同じだけ空けると
     番号の左だけが広く見える。48px → 32px → **42px**（同日ご指示で 1 段戻す。1425px 実測）。
     上下右は 48px のまま。★42px はトークンに無い値なので直接書いている
     （--space-10 が 40px、--space-12 が 48px で、いずれもご指示の 42px にならないため）。 */
  padding-left: clamp(var(--space-6), 3vw, 42px);
  background-color: var(--color-bg);
  border-top: 2px solid var(--color-border-accent);
  border-bottom: 1px solid var(--color-border);
}

.nb-approach__item > :not(.nb-approach__no) {
  grid-column: 2;
}

.on-inverse .nb-approach__item {
  border-top-color: var(--color-text-on-inverse);
}

.nb-approach__no {
  grid-row: 1 / span 4;
  margin: 0;
  font-family: var(--font-numeric);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--navy-400);
}

.on-inverse .nb-approach__no {
  color: var(--color-text-on-inverse-muted);
}

.nb-approach__name {
  /* ★2026-09-24 三嶋指示。8px → 20px → 12px → **24px**。
     12px にしたのは «行が図の高さに引き伸ばされていた» 時期の判断で、
     その原因（grid-template-rows）を直したあとは詰まって見えたため 24px に上げた。 */
  margin-bottom: var(--space-6);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-text-strong);
  /* ★★この 2 つは対で書く。rows / section-head / page-intro と同じ組み合わせ。
     2026-09-14 にページ内目次（240px）を右に入れて本文が 1200 → 912px になった結果、
     3 列の 1 列が約 280px になり «…一気通貫で／対応» と 2 字だけ落ちた（実測）。
     この 3 つの名前は現行サイトの実文（25〜33 字）なので文言を縮められない。
     auto-phrase が文節で切り、balance が行の長さを均す。 */
  word-break: auto-phrase;
  text-wrap: balance;
}

/*
 * PC でだけ有効になる、WHY MOOVY 型の重なりカード。
 * JS が動かない場合は is-stack-enhanced が付かず、通常の縦並びで全文を読める。
 */
@media (min-width: 900px) {
  .nb-approach__list.is-stack-enhanced {
    display: block;
    padding-bottom: 0;
  }

  /* padding は sticky の移動可能範囲に含まれないため、
   * 疑似要素を実体のあるスクロール領域として末尾に置く。 */
  .nb-approach__list.is-stack-enhanced::after {
    display: block;
    /* ★カードの min-height と同じ値にする。ここが «最後の 1 枚がめくれるぶんの
       スクロール量» になるので、揃えないと最後だけ動きが長い／短い。 */
    height: 14rem;
    content: '';
  }

  .nb-approach__list.is-stack-enhanced .nb-approach__item {
    --approach-card-scale: 1;
    --approach-card-overlay: 0;
    position: sticky;
    top: 6.5rem;
    z-index: 1;
    /* ★★2026-09-24 三嶋のご指摘「p タグの下の余白が大きい」で **23rem → 14rem**。
       実測（1425px）：カードの中身は 222px しか要らないのに 23rem＝368px を
       min-height で確保していた。**下に 146px の死んだ余白**が出ていた。
       ★カードは «重なって見える» 必要があるので、3 枚の高さは揃える。
         そのための min-height はやめない。中身に合う値まで下げるだけ。
       ★14rem＝224px。中身 222px のすぐ上に取ってあるので、
         文字が増えたぶんはカードが伸びて受ける（min-height は下限なので壊れない）。 */
    min-height: 14rem;
    margin-bottom: 0;
    box-shadow: 0 1.25rem 2.5rem rgb(4 2 39 / 8%);
    transform: scale(var(--approach-card-scale));
    transform-origin: center top;
  }

  .nb-approach__list.is-stack-enhanced .nb-approach__item::after {
    position: absolute;
    inset: 0;
    background-color: rgb(4 2 39 / var(--approach-card-overlay));
    content: '';
    pointer-events: none;
  }

  .nb-approach__list.is-stack-enhanced .nb-approach__item:last-child {
    margin-bottom: 0;
  }

  .nb-approach__list.is-stack-enhanced .nb-approach__item:nth-child(2) {
    top: 7.75rem;
    z-index: 2;
  }

  .nb-approach__list.is-stack-enhanced .nb-approach__item:nth-child(3) {
    top: 9rem;
    z-index: 3;
  }

}

@media (prefers-reduced-motion: reduce) {
  .nb-approach__list.is-stack-enhanced {
    display: grid;
    padding-bottom: 0;
  }

  .nb-approach__list.is-stack-enhanced .nb-approach__item {
    position: static;
    min-height: 0;
    margin-bottom: 0;
    box-shadow: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   04 の図（2026-09-24 三嶋指示・案 B）— 本文の右に置く 2 カラム
   --------------------------------------------------------------------------
   ★900px 以上でだけ 2 カラム。それ未満は本文の下に落とす
     （図の中の文字が読めなくなる幅では横に並べない）。
   ★図は SVG。写真ではないので枠も影も付けない。
   ★★カードは «3 枚の高さを揃える» 前提の重ね合わせ。図を入れると背が伸びるので、
     min-height は下限のまま据え置き、3 枚とも同じ高さになることを実測で確認すること。
   -------------------------------------------------------------------------- */
.nb-approach__figure {
  margin-top: var(--space-6);
}

.nb-approach__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 図の中の文字。font-family は継承させる（SVG 側で指定しない）。
   ★2026-09-24 三嶋指示で 4 種とも **1px ずつ大きく**（15→16 / 13→14 / 17→18 / 13→14）。
   ★単位は viewBox の座標系。1425px では図が 480 → 418px に縮むので、
     画面上は 0.87 倍で効く（16px → 実測 約 13.9px）。 */
.nb-approach__svg-label {
  font-size: 16px;
  font-weight: var(--fw-bold);
  fill: var(--color-text-strong);
}

.nb-approach__svg-note,
.nb-approach__svg-axis {
  font-size: 14px;
  font-weight: var(--fw-medium);
  fill: var(--color-text-muted);
}

.nb-approach__svg-tint {
  fill: var(--color-bg-subtle);
}

.nb-approach__svg-solid {
  fill: var(--color-bg-inverse);
}

.nb-approach__svg-solid-text {
  font-size: 18px;
  font-weight: var(--fw-bold);
  fill: var(--white);
}

/* 案 E-3（バリュープロポジション）の円。重なりの濃さは fill-opacity の重ねで作る。
   ★第 2 色相を足さない。薄い面と同じ色に不透明度を掛けているだけ。 */
.nb-approach__svg-circle {
  fill: var(--color-bg-subtle);
  fill-opacity: 0.72;
  stroke: var(--color-border);
  stroke-width: 1;
}

/* 同・3 円の重なりの中に置く白文字。重なりの幅が 90px しかないので 15px に落とす */
.nb-approach__svg-vp {
  font-size: 15px;
  font-weight: var(--fw-bold);
  fill: var(--white);
}

/* 矢印の先端。02 の «置き換え»・03 の «往復» で向きを示す（01 は線だけ） */
.nb-approach__svg-arrow {
  fill: var(--color-border-strong);
}

/* 紺ベタの中の小さい説明。白の 100% だと主役の語と並んでうるさいので落とす */
.nb-approach__svg-solid-note {
  font-size: 14px;
  font-weight: var(--fw-medium);
  fill: var(--navy-200);
}

.nb-approach__svg-line {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1;
}

.nb-approach__svg-rule {
  stroke: var(--color-border);
  stroke-width: 1;
}

@media (min-width: 900px) {
  .nb-approach__item {
    /* ★2026-09-24 三嶋指示「右側の図解の横幅を小さく」。
       本文 1 ： 図 1 → **本文 1 ： 図 0.78**。図が縮んだぶんは本文の列に回る。 */
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.78fr);
    /* ★★行を明示する。これが無いと «行が図の高さに引き伸ばされ»、
       h3 の下に最大 180px の死んだ余白ができる（2026-09-24 実測：1 行目 283.8px に対し
       h3 の実テキストは 2 行ぶん）。余った高さは最終行（1fr）だけに逃がす。
       ★もう 1 つ。grid-row: 1 / -1 の «-1» は **明示グリッドの最終線**を指すため、
       grid-template-rows が無いと 1 / 1 と解釈されて図が 1 行目だけに収まっていた。 */
    grid-template-rows: auto auto auto 1fr;
  }

  /* ★★セレクタを «> .nb-approach__figure» にしている。
     上に .nb-approach__item > :not(.nb-approach__no) { grid-column: 2 } があり、
     詳細度が (0,2,0)。クラス 1 つ（0,1,0）だと負けて 2 列目に入ってしまう。 */
  .nb-approach__item > .nb-approach__figure {
    grid-column: 3;
    grid-row: 1 / -1;
    margin-top: 0;
    align-self: center;
  }
}

.on-inverse .nb-approach__name {
  color: var(--color-text-on-inverse);
}

.on-inverse .nb-approach__orig,
.on-inverse /* 節の通し番号（sec-head__label の中）。Oswald。 */
.sec-head__label .u-numeric {
  font-family: var(--font-numeric);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

/* ==========================================================================
   07 の «成果物» 欄（現行サイトに記載が無い）
   ========================================================================== */
.nb-steps__output-empty,
.nb2-panel__output-empty {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.on-inverse .nb-steps__output-empty {
  color: var(--color-text-on-inverse-muted);
}

/* ==========================================================================
   03 料金の注記
   ========================================================================== */
.nb-price__note {
  margin-top: var(--space-6);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.on-inverse .nb-price__note {
  color: var(--color-text-on-inverse-muted);
}

/* ==========================================================================
   07 の工程名（現行の表記の併記）
   ========================================================================== */
.nb-steps__orig {
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ==========================================================================
   03 料金の «支援条件»
   ★AI が表ごと引用することを狙った形。罫だけで組み、枠で囲わない。
   ★PC は 2 列 × 2 段、SP は 1 列 × 4 段で表示する。
   ========================================================================== */
.nb-price__cond {
  display: grid;
  align-content: center;
  margin: 0;
}

.nb-price__cond-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  /* ★★2026-09-15 三嶋指示で **SP だけ 16px → 12px** に詰めた。
     SP は «項目名／値» の 2 段積みになるぶん 1 行が縦に高く、
     4 行が並ぶと «同じ高さの帯» が続いて見えていた。
     ★PC（768px 以上）は 16px のまま。下の @media で戻している。 */
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .nb-price__cond-row {
    grid-template-columns: 7em minmax(0, 1fr);
    gap: var(--space-6);
    align-items: baseline;
    padding-block: var(--space-4);
  }
}

.on-inverse .nb-price__cond,
.on-inverse .nb-price__cond-row {
  border-color: var(--color-border-on-inverse);
}

.nb-price__cond-row dt {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
}

.on-inverse .nb-price__cond-row dt {
  color: var(--color-text-on-inverse-muted);
}

.nb-price__cond-row dd {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text-strong);
}

.on-inverse .nb-price__cond-row dd {
  color: var(--color-text-on-inverse);
}

/* ==========================================================================
   05 解き方の概要文
   ========================================================================== */
.nb-approach__body {
  /* ★2026-09-24 三嶋指示。本文の下に 8px。カードの下辺に文字が寄りすぎないための受け。 */
  margin-bottom: var(--space-2);
  flex: 1;
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

.nb-approach__spec {
  width: 100%;
  margin-block: var(--space-2) var(--space-4);
}

@media (min-width: 900px) {
  .nb-case__spec {
    grid-column: 2;
  }
}


/* ==========================================================================
   07 支援の内容 — 成果物
   ★★才流が «このフェーズのアウトプット» として納品物 17 点を名詞で並べていた形。
     名詞の列挙は AI がいちばん引用しやすい。箱で囲わず、上の罫だけで区切る。
   ========================================================================== */
.nb-steps__output {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border-accent);
}

.on-inverse .nb-steps__output {
  border-top-color: var(--color-text-on-inverse);
}

.nb-steps__output-label {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-strong);
}

.on-inverse .nb-steps__output-label {
  color: var(--color-text-on-inverse);
}

/* --------------------------------------------------------------------------
   この段階の成果物 — 現行サイトのアウトプットイメージ（2026-09-15 三嶋指示）
   --------------------------------------------------------------------------
   ★出典は https://www.glcl.co.jp/service/new_business_strategy/ の flow_1〜13.webp
     （800 × 448）。13 枚が 13 工程と 1 対 1 で対応する。
   ★★角丸カードにしない。図の輪郭は 1px の罫だけで、箱で囲わない
     （CLAUDE.md・才流との差別化）。
   ★図そのものが白地なので、紺の面でも白の面でも罫 1 本で輪郭が付く。
   ★2 列。工程 02 は 7 枚あるので 4 段になる。1 列にすると節が倍に伸びる。
   -------------------------------------------------------------------------- */
.nb-output__grid {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .nb-output__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nb-output__item {
  display: grid;
  gap: var(--space-2);
}

.nb-output__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  background-color: var(--white);
}

.nb-output__cap {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--lh-snug);
}

.on-inverse .nb-output__cap {
  color: var(--color-text-on-inverse-muted);
}

.nb-steps__output-list,
.nb2-panel__output-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 成果物は «タグ» の形。角丸にはしない（才流との差別化） */
.nb-steps__output-list li,
.nb2-panel__output-list li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-strong);
}

.on-inverse .nb-steps__output-list li {
  border-color: var(--color-border-on-inverse);
  color: var(--color-text-on-inverse);
}

/* ==========================================================================
   入口ページ — 11 節の仕様表
   ★表は横に広いので、必ず自分の中でだけ横スクロールさせる。
     ページ本体を横スクロールさせない（audit-page.js の検査項目）。
   ========================================================================== */
.nb-entry__h2 {
  margin-block: var(--space-16) var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border-accent);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.nb-entry__table-scroll {
  overflow-x: auto;
}

.nb-entry__table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: left;
}

.nb-entry__table th,
.nb-entry__table td {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.nb-entry__table thead th {
  border-bottom: 2px solid var(--color-border-accent);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  white-space: nowrap;
}

.nb-entry__table tfoot th,
.nb-entry__table tfoot td {
  border-top: 2px solid var(--color-border-accent);
  border-bottom: 0;
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.nb-entry__table-no {
  font-family: var(--font-numeric);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}

.nb-entry__table-name {
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  white-space: nowrap;
}

/* 目標文字数。bold の 22px なので navy-400（3.21:1）で足りる */
.nb-entry__table-chars {
  font-family: var(--font-numeric);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--navy-400);
  white-space: nowrap;
}

.nb-entry__table-role {
  line-height: var(--lh-snug);
}

.nb-entry__intro {
  max-width: var(--measure);
  margin-bottom: var(--space-10);
  line-height: var(--lh-body);
}

.nb-entry__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  margin: 0 0 var(--space-5);
}

.nb-entry__meta dt {
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  white-space: nowrap;
}

.nb-entry__meta dd {
  margin: 0;
  line-height: var(--lh-body);
}

.nb-entry__table-from {
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

/* ==========================================================================
   本文中の CTA（03 料金の直後・09 事例の直後）
   --------------------------------------------------------------------------
   ★角丸カードにしない。区切りは上の 2px の罫だけ（才流との差別化）。
   ★見出しは置かない。文言は config.php の確定原稿（desc ＋ label）だけで足りる。
   ★紺地（案 N-1 の料金節）では .on-inverse がボタンを白ベタ・紺文字に反転させる。
     個別に色を上書きしない。
   ========================================================================== */
/* ==========================================================================
   節の見出し（サービス詳細ページだけ）
   --------------------------------------------------------------------------
   ★★共通部品（section-head.css）には足さないこと。
     2026-09-14 に .sec-head__title へ text-wrap: balance を入れて実測したところ、
     **トップページ（demo/b1）の 375px で 2 本の折り位置が動いた**
     （「中小企業の経営課題を解決しま…」254/150 → 127/277 など。行数は不変。1425px は差分 0）。
     «トップページは変えない» ので、このページ側だけに効かせる。

   ★なぜ要るか：h2 が «節の名前（12 字）» から «主張の一文（34 字前後）» に変わり、
     768px で «新規事業のアイディア出しから／戦略策定、実行支援まで一気通貫で／対応»
     と最後に 2 字だけ落ちた。文言は現行サイトの実文なので短くできない。
     auto-phrase（部品側）は «入るだけ入れて残りを落とす» ので、行を均す balance が要る。
   ========================================================================== */
/* --------------------------------------------------------------------------
   ★★2026-09-14 三嶋決定（案 S-3「主従を入れ替える」）。
     **節名を見出しにし、h2 をその説明として下げる。**
   --------------------------------------------------------------------------
   きっかけは三嶋のご指摘「料金が小さくて、その下の文章が料金よりも大きいのが
   違和感がある。他の節名も含めて、最適化して欲しい」。

   変更前（1425px 実測）  節名 15px / 500 / gray-600 ／ h2 40px / 700 → **差 2.67 倍**
   変更後                 節名 32px / 700 / navy-800 ／ h2 22px / 500 → **節名のほうが大きい**

   ★なぜ節名を上げたか：目次・パンくず・URL はどれも «節名» で書かれているのに、
     画面でいちばん大きいのが h2 の一文だった。34 画面ぶん（375px 実測）を
     拾い読みするときに、目次と画面を結ぶ目印が無い。
     節名を見出し級にすると、目次の «03 料金» と画面の «料金» が同じ大きさで対応する。

   ★★これは «h2 に主張の一文» という design-system.md 0-4 の 2 段の形は保ったまま、
     **見た目の大小だけを入れ替えたもの**。0-4 に 8 として書き足してある。
     見た目の大小と HTML の階層が逆になる点は承知のうえでの決定（2026-09-14 三嶋）。

   ★★共通部品（section-head.css）には足さないこと。理由は上と同じ。
     .nb-head はサービス詳細ページの節見出しにだけ付くので、
     トップページ（demo/b1）には効かない。**変更前後で b1 の出力は同一**（実測済み）。

   ★字送りを --ls-wide（0.12em）から --ls-heading（0.01em）へ落としている。
     --ls-wide は «欧文の小文字ラベル（GOAL / PERSONA）» のための値で、
     和文を 32px まで上げると字間が空きすぎて «間延びした見出し» に見える。
   ★色は --color-text-strong。紺地（.on-inverse）では白に自動で振れる。
     個別に上書きしない。コントラストは gray-600 の 5.68:1 から
     navy-800 の 17.90:1 へ **上がる方向**。
   -------------------------------------------------------------------------- */
.nb-head .sec-head__label {
  /* h2 が «節名の説明» になるので、離すと別の要素に見える。20px → 12px */
  margin-bottom: var(--space-3);
  color: var(--color-text-strong);
  font-size: var(--text-3xl); /* 26 → 32px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

/* 節名が 32px になると 32px の罫では «見出しに対して短い棒» に見える。40px に伸ばす */
.nb-head .sec-head__label::before {
  width: var(--space-10);
}

.nb-head .sec-head__title {
  max-width: var(--measure);
  color: var(--color-text);
  /* ★★2026-09-14 三嶋指示でもう一段下げた。--text-xl（22px）→ --text-lg（19px）。
     節名を主にした S-3 のあとも «まだ大きい»（三嶋）。
     導入ブロックのリード（.page-intro__lead）と同じ 19px に揃えたうえで、
     太さ 500 は残す。リードは 400 なので、大きさが同じでも役割の差は出る。
     ★--text-lg は clamp ではない固定値。375px でも 19px のまま。 */
  font-size: var(--text-lg); /* 22 → 19px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  /* ★★字送りを明示する。**この 1 行を消すと折り返しが動く。**
     この一文は <h2> から <p> になった（h2 は節名へ移した）。
     base.css は h1〜h6 に --ls-heading（0.01em）、body に --ls-body（0.03em）を
     当てているので、タグを変えると字送りが 0.02em 広がる。
     19px・35 字で約 13px ぶん伸び、行末の 1 文字が次の行へ落ちる。 */
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

.nb-approach .sec-head__lead {
  margin-top: var(--space-3);
}

/* 補足見出しはPCで1行にする。狭い画面では通常どおり折り返す。 */
@media (min-width: 1200px) {
  .nb-head .sec-head__title {
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  /* ★★09「よくあるご質問」だけは 2 カラムの左（352px）に入るので **折り返す**。
     共通部品にも同じ指定（.faq-layout__intro .sec-head__title）があるが、
     **セレクタの詳細度が同じ（0,2,0）で、後から読まれるこのファイルが勝っていた**。
     そのため一文が左の列を突き抜け、右の質問に重なっていた（2026-09-16 三嶋のご指摘）。
     ここで詳細度を 1 段上げて、確実に折り返す側に倒す。
   ★折り返す位置は文節に合わせる（«ご相談の前に» が «ご相談の／前に» と割れないように）。 */
  .nb-faq .nb-head .sec-head__title {
    max-width: none;
    white-space: normal;
    text-wrap: wrap;
    word-break: auto-phrase;
  }
}

/* ==========================================================================
   本文中の 2 カラム CTA
   --------------------------------------------------------------------------
   トップページの2分割CTAと同じ骨格。各半分全体をリンクにし、
   見出し＋説明＋右端の丸矢印を置く。背景画像は使わない。

   ★★色は **紺のトーン展開だけ**。参考画像は水色〜青のグラデーションだが、
     そこは寄せない（CLAUDE.md「第 2 色相を足さない」「ビビッドな色を使わない」）。
     ゴールドの CTA を不採用にしたのと同じ判断軸。
   ★角は立てる。**角丸の箱にしない**（CLAUDE.md「角丸カードを使わない」）。
     丸い矢印はリンク面全体が押せることを示す視覚的な合図としてだけ使う。
   ★置かれる節は 03（料金の直後）と 09（事例の直後）。どちらも白か薄い面なので、
     紺の面がそのままコントラストになる。
   ========================================================================== */
/* ★★2026-09-15：**100vw をやめた。**
   以前は .container の中に置き、left: 50% ＋ width: 100vw ＋ margin-left: -50vw で
   «外に出す» 形にしていた。100vw は **スクロールバーを含む**ので、
   スクロールバーが出る画面では右に 7.5px はみ出す（1425px 表示で実測）。
   マークアップ側で .container の外（節の直下）へ移したので、
   もう引き算は要らない。節は元から全幅。 */
/* ★★CTA が節の最後にあるとき、その節の下余白を消す（2026-09-15 三嶋指示）。
   --------------------------------------------------------------------------
   CTA は紺ベタの帯なので、下に節の余白（--section-py = 1425px で 99.75px）が
   残ると **帯の下に白い帯が 1 本挟まって見える**。三嶋のご指摘
   「支援の考え方の上の白い余白を削除して。CV エリアの直後に、支援の考え方のセクションを」。
   ★次の節の «上» 余白は残す。見出しが天井に貼り付くのを避けるため。
   ★:has() を使うのは、節が .section か .section--lg かで余白の値が違うため。
     値を打ち直すと片方だけずれる。padding-bottom を 0 にすれば両方で正しい。
     ★未対応のブラウザでは «余白が残る»（いまの姿）に戻るだけで、壊れない。 */
.section:has(> .nb-cta:last-child) {
  padding-bottom: 0;
}

.nb-cta {
  display: grid;
  width: 100%;
  margin-top: var(--space-16);
  /* 紺のトーンだけで、左から右へ控えめに明るくする。 */
  background-image: linear-gradient(
    120deg,
    var(--color-bg-subtle) 0%,
    var(--color-bg) 52%,
    var(--color-bg-tint) 100%
  );
}

@media (min-width: 768px) {
  .nb-cta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nb-cta__item {
  color: var(--color-text);
  text-decoration: none;
  display: grid;
  align-content: center;
  min-height: 18rem;
  /* ★★2026-09-15 三嶋指示で 48px → **72px** に広げた。
     72px は余白スケールに無い値（--space-16 が 64px、--space-20 が 80px）なので
     4.5rem を直に書いている。スケールに足していない（この帯だけの値）。
     ★clamp のまま。375px で 72px を四方に取ると中身が 231px しか残らないので、
       下限は 32px のまま据え置き。6vw が 72px に届くのは 1200px から。 */
  padding: clamp(var(--space-8), 6vw, 4.5rem);
  background-color: transparent;
  transition: background-color var(--duration-base) var(--ease-out);
}

.nb-cta__item:hover,
.nb-cta__item:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
}

/* 区切りは縦罫 1 本だけ。★箱で囲わない。
   ★罫は «2 つめの左» に引く。1 つめの右に引くと、説明文の長さが違うときに
     罫の高さが揃わない（高いほうに合わせたいので、必ず両方の高さを持つ側に引く）。 */
.nb-cta__item + .nb-cta__item {
  border-top: var(--border-width) solid var(--color-border);
}

@media (min-width: 768px) {
  .nb-cta__item + .nb-cta__item {
    border-top: 0;
    border-left: var(--border-width) solid var(--color-border);
  }
}

.nb-cta__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--space-4), 2.5vw, var(--space-8));
  align-items: center;
}

.nb-cta__copy {
  display: grid;
  gap: var(--space-4);
  max-width: 30rem;
}

.nb-cta__title {
  color: var(--color-text-strong);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.nb-cta__text {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

.nb-cta__arrow {
  display: grid;
  place-items: center;
  width: clamp(2.3rem, 4vw, 3.5rem);
  aspect-ratio: 1;
  background: var(--white);
  border-radius: 50%;
}

.nb-cta__arrow::before {
  width: 0.55em;
  height: 0.55em;
  content: "";
  border-top: var(--border-width-thick) solid var(--navy-800);
  border-right: var(--border-width-thick) solid var(--navy-800);
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform var(--duration-base) var(--ease-out);
}

.nb-cta__item:hover .nb-cta__arrow::before,
.nb-cta__item:focus-visible .nb-cta__arrow::before {
  transform: translateX(3px) rotate(45deg) translate(-1px, 1px);
}

@media (prefers-reduced-motion: reduce) {
  .nb-cta__item,
  .nb-cta__arrow::before {
    transition: none;
  }
}

/* デモ用：FAQ の «書き直し» 注記。★本番ページには出さない。 */
/* --------------------------------------------------------------------------
   02「よくある課題」の下余白を詰める（2026-09-15 三嶋指示）
   --------------------------------------------------------------------------
   実測（1425px）：リストの下罫から «— 料金» まで **242px** あった。
     内訳 … 02 の下余白 142.5px（section--lg）＋ 料金の上余白 100px（標準値）
   ★★**罫がすでに «ここで終わり» を示している。**余白でもう一度示す必要が薄いので、
     02 の下余白だけ 142.5px → **80px** に詰める（罫 → 料金見出しで 180px）。
     節どうしの標準の間合いは 100 ＋ 100 ＝ 200px なので、それより少し詰まる。
   ★★**下の罫は残す。** 3 カラムは列の間に縦罫が入っているので、
     上下の横罫で閉じて初めて «3 つで 1 つの帯» になる。
     外すと縦罫が下端で宙に浮く（リストの後ろに要素は無く、この罫が終端そのもの）。
   ★.nb-issues に閉じてある。section--lg を使う他の節（05 支援の流れ）には影響しない。
   -------------------------------------------------------------------------- */
.nb-issues {
  padding-bottom: var(--space-20);
}

/* --------------------------------------------------------------------------
   09 よくあるご質問 — 左に節見出し／右に質問（2026-09-15 三嶋指示）
   --------------------------------------------------------------------------
   ★★あわせて container--narrow（800px・中央寄り）を container（1200px）に戻した。
     この節だけ器が狭く、左端が他の節と 200px ずれていた。
   ★1000px 以上でだけ 2 カラム。左 352px ／ 隙間 80px ／ 右 768px（1200px の器・実測）。
     1000px を切ると左が 260px を下回り、32px の節名が 3 行に折れる。
   ★★左の «一文» は nowrap を解く。.nb-head .sec-head__title は 1200px 以上で
     white-space: nowrap が効く（1 列で使う前提の指定）。左 352px の列でそのままだと
     器を突き抜けて横スクロールが出る。
   ★貼り付け（sticky）はしない。目次で一度やめた判断（2026-09-14）と揃える。
   -------------------------------------------------------------------------- */
/* ★.nb-sub（h2 の下の一文）は 2026-09-14 に廃止した。
   三嶋指示で «棒線＋節名 → h2 に主張» の 2 段（トップページと同じ形）に変え、
   この一文が h2 そのものになったため。セレクタごと消してある。 */


/* ==========================================================================
   04 の «問い»（勝ち筋モデルの各要素が投げかける問い）
   ========================================================================== */
.nb-cause__q {
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.nb-cause__q::before {
  content: "「";
}

.nb-cause__q::after {
  content: "」";
}

.on-inverse .nb-cause__q {
  color: var(--color-text-on-inverse-muted);
}

/* ==========================================================================
   07 の冒頭：このページで扱う支援（中項目）
   ★角丸カードにしない。区切りは縦の罫だけ。
   ========================================================================== */
.nb-services {
  margin-bottom: var(--space-16);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border-accent);
}

.nb-services__label {
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
}

.nb-services__list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .nb-services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) 0;
  }

  .nb-services__item {
    padding-inline: var(--space-8);
  }

  .nb-services__item:first-child {
    padding-left: 0;
  }

  .nb-services__item:nth-child(even) {
    padding-right: 0;
    border-left: 1px solid var(--color-border);
  }

  .nb-services__item:nth-child(odd) {
    padding-left: 0;
  }
}

.nb-services__name {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.nb-services__body {
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

/* ==========================================================================
   08 の «立場の違い»（表の前に置く）
   --------------------------------------------------------------------------
   ★表より先に読ませたいので、本文より一段大きくする。
     ただし節見出し（h2）より小さい。主張であって見出しではない。
   ========================================================================== */
.nb-compare__stance {
  max-width: var(--measure);
  margin-bottom: var(--space-12);
  /* ★★2026-09-15 三嶋指示で **左の 3px の罫を外した**。
     03 の前置き（.nb-approach__cause）と同じ判断。引用のような見た目になり、
     節の «立場の表明» が注記に見えていた。
     ★罫と一緒に padding-left（20px）も外している。罫のためだけの余白なので、
       残すとこの段落だけ左端が 20px 内側にずれる。 */
  /* ★★2026-09-15 三嶋指示で 19px（--text-lg）→ **17px（--text-base）**。
     本文と同じ大きさにした。★行長も 42em 基準なので 798px → 714px に縮む
     （--measure は要素自身の文字サイズに対する em のため）。 */
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text-strong);
}

.on-inverse .nb-compare__stance {
  color: var(--color-text-on-inverse);
}

/* ==========================================================================
   SP の情報密度
   --------------------------------------------------------------------------
   本文サイズと行間は維持し、節間・カード内・CTA の余白だけを整える。
   読みやすさを落とさず、長いサービスページのスクロール量を抑える。
   ========================================================================== */
@media (max-width: 767px) {
  .has-page-toc :target,
  .has-page-toc .sec-head__label {
    scroll-margin-top: calc(var(--header-height-sm) + var(--space-6));
  }

  .page-toc-rail > .section {
    padding-block: var(--space-12);
  }

  .page-toc-rail > .section:has(> .nb-cta:last-child) {
    padding-bottom: 0;
  }

  .page-intro__catch {
    margin-bottom: var(--space-8);
  }

  .nb-head {
    margin-bottom: var(--space-6);
  }

  .nb-issues__item {
    gap: var(--space-4);
    padding-block: var(--space-5);
  }

  .nb-price__plans {
    margin-bottom: 0;
  }

  .nb-price__plan {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0 var(--space-3);
    align-items: baseline;
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--color-border);
  }

  .nb-price__name {
    grid-column: 1 / -1;
  }

  .nb-price__total {
    grid-column: 1;
    margin-bottom: 0;
  }

  .nb-price__total-num {
    font-size: var(--text-5xl);
  }

  .nb-price__cond {
    padding-bottom: var(--space-3);
  }

  .nb-price__option {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .nb-price__option-head {
    grid-column: 1;
    grid-row: 1;
  }

  .nb-price__option-mark {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .nb-price__option-detail {
    grid-column: 1 / -1;
  }

  .nb-approach__list {
    gap: var(--space-5);
  }

  .nb-approach__item {
    gap: 0 var(--space-4);
    padding: var(--space-6) var(--space-5);
  }

  .nb-approach__no {
    grid-row: 1;
  }

  .nb-approach__item > .nb-approach__body,
  .nb-approach__item > .nb-approach__body + .nb-approach__spec,
  /* ★2026-10-14 今林指示「スマホでは図を横幅いっぱいに」。それまでは番号の右の列（2 列目）に
     入ったままで、本文より狭かった（375px で図 237px・本文 295px）。本文と同じ幅にそろえる。 */
  .nb-approach__item > .nb-approach__figure {
    grid-column: 1 / -1;
  }

  .nb2-panel {
    padding-block: var(--space-8);
  }

  .nb2-panel__tasks {
    gap: var(--space-5);
    margin-top: var(--space-6);
  }

  .nb2-panel__task {
    gap: var(--space-3);
  }

  .nb-outcomes__list {
    gap: var(--space-8);
  }

  .nb-case__body {
    gap: var(--space-6);
    padding-top: var(--space-6);
  }

  .nb-cta {
    margin-top: var(--space-12);
  }

  .nb-cta__item {
    min-height: 14rem;
    padding: var(--space-6) var(--space-5);
  }

  .faq__item summary {
    padding-block: var(--space-5);
  }
}