/* ========================================================================== service-newbiz-2.css — 07「支援の内容」を主役にするときの見せ方 -------------------------------------------------------------------------- 左に 3 段階の道筋を貼り付け、右をスクロールすると現在地が切り替わる。 ★案 N-2 と案 N-4 の 2 つが読む。案 N-2 «だけ» のものではない。 ★骨格（.figure-switch / .band-stack）は共通部品をそのまま使う。 ここに書くのは «このページで足す差分» だけ。共通部品の値を上書きしない。 ★JS は assets/js/scroll-switch.js を無改変で使う。 ★親に overflow: hidden を作らない。作ると sticky が効かなくなる。 ★900px 未満では貼り付かず縦積みに落ちる（figure-switch.css の仕様）。 ========================================================================== */ .nb2-switch { margin-top: var(--space-10); } @media (min-width: 900px) { .nb2-switch { grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); gap: var(--space-12); } } /* -------------------------------------------------------------------------- 左：立ち上げまでの道筋 ★上から下へ «進む» ことが形で分かるよう、帯の間に縦の継ぎ目を置く。 矢印の絵は描かない（ギミックを増やさない・CLAUDE.md）。 -------------------------------------------------------------------------- */ .nb2-bands { position: relative; } .nb2-band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-4); } .nb2-band .band-stack__key { font-family: var(--font-numeric); font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: var(--lh-none); /* ★共通部品の min-width: 6.5em（figure-switch.css:142）を外す。 あれは «TARGET» «MANAGEMENT» のような欧文の語を揃えるための幅で、 169px を占める。この案のキーは «01» の 2 文字しかないため、 そのままだと工程名の列が 134px になり、必要な 190px に足りず «現状分析とゴ／ール設計» と語中で折れる（1425px で実測）。 外すと工程名に 273px が回り、3 件とも 1 行に収まる。 */ min-width: 0; } .nb2-band .band-stack__name { font-size: var(--text-lg); font-weight: var(--fw-bold); line-height: var(--lh-heading); } .nb2-figure__foot { margin-top: var(--space-5); font-size: var(--text-caption); color: var(--color-text-muted); } /* -------------------------------------------------------------------------- 右：各段階の中身 -------------------------------------------------------------------------- */ .nb2-panel { padding-block: var(--space-10); border-top: 1px solid var(--color-border-strong); } .nb2-panel:last-child { border-bottom: 1px solid var(--color-border-strong); } .nb2-panel__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(--navy-400); } /* ★この案の «主役» の見出し。本文 17px に対して 1280px で 40px（2.4 倍）。 図と数字ではなく «工程の名前» を主役にしているので、 ここは巨大文字ではなく «節見出しより 1 段大きい» までに留める。 */ .nb2-panel__name { font-size: var(--text-4xl); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--color-text-strong); } .nb2-panel__tasks { margin: var(--space-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-6); } .nb2-panel__task { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding-top: var(--space-4); border-top: 1px solid var(--color-border); } /* 15px の通常文字なので navy-400（3.21:1）は使えない。gray-600（5.68:1）にする */ .nb2-panel__task-no { font-family: var(--font-numeric); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text-muted); } /* ★★2026-09-15、項目名・本文・バッジは .nb2-panel__task-main の中に入った。 （左）テキスト ｜（右）図 の 2 カラムにするため、テキストを 1 つの箱にまとめている。 grid-column: 2 の指定は箱の側に移した（中の要素は箱の中で縦に積むだけ）。 */ .nb2-panel__task-main { grid-column: 2; } .nb2-panel__task-name { margin-bottom: var(--space-2); font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--color-text-strong); } .nb2-panel__task-body { font-size: var(--text-base); line-height: var(--lh-body); } /* ★★文字数バッジも **2 列目**に置く（2026-09-15 三嶋指示）。 -------------------------------------------------------------------------- .nb2-panel__task は «auto minmax(0,1fr)» の 2 列。1 列目は番号（01 02 03）だけの 細い列で、2 列目に項目名と本文が入る（どちらも grid-column: 2 を持っている）。 バッジに列の指定が無いと **1 列目へ自動配置**され、番号の下に横並びで出る。 見た目が他の節と違うだけでなく、**1 列目がバッジの幅（約 296px）まで太り、 2 列目が 8px に潰れて文字がはみ出す**（375px で実測・ページ全体が 7px 横スクロール）。 ★★**新しくバッジを足すときは、必ず列を指定すること。** この節の «auto 1fr» は番号のための列であって、中身を置く列ではない。 */ .nb2-panel__task > .nb-spec { grid-column: 2; } /* -------------------------------------------------------------------------- 工程の «成果物» の図（2026-09-15 三嶋指示） -------------------------------------------------------------------------- «（左）項目タイトル・項目本文 ｜（右）図解» の 2 カラム。現行サイトと同じ並び。 ★1000px 以上でだけ横に並べる。パネルの幅は 778px（1425px 時・実測）で、 番号 20px ＋ 隙間 16px ＋ 隙間 32px を引くと 710px。 これを **テキスト 390px ／ 図 320px** で割る。 1000px を切ると図が 260px を下回り、中の文字が読めなくなるので下に落とす。 ★★角丸カードにしない（CLAUDE.md・才流との差別化）。 2026-09-15 三嶋指示で 1px の枠線も外した。図は白地のまま置く。 ★図の下にキャプションを置かない。**左の項目タイトルがキャプションを兼ねる**。 -------------------------------------------------------------------------- */ .nb2-panel__figure { /* 1000px 未満はテキストの下。番号の列（1 列目）に落ちないよう列を指定する （この節の «auto 1fr» は番号のための列であって、中身を置く列ではない） */ grid-column: 2; display: block; width: 100%; height: auto; margin-top: var(--space-4); /* ★2026-09-15 三嶋指示で **枠線を外した**。図そのものが白地で輪郭を持っており、 1px の罫を足すと «囲った箱» に見えていた（角丸カードを使わない方針とも噛み合わない）。 ★background-color は残す。図が差し替わって透過 png になったときの保険。 */ background-color: var(--white); } @media (min-width: 1000px) { .nb2-panel__task { grid-template-columns: auto minmax(0, 1fr) 20rem; align-items: start; } /* ★★図の無い工程（2026-09-28 今林）。新規事業以外のサービスは成果物の図が無いので、 20rem の列を外して «番号 ｜ テキスト» の 2 列に戻す。 外さないとテキストが 390px に押し込まれ、右に 320px の空白が残る。 */ .nb2-panel__task.is-no-figure { grid-template-columns: auto minmax(0, 1fr); } .nb2-panel__figure { grid-column: 3; grid-row: 1; /* 列の隙間（16px）のままだと文字と図がくっつくので、図の側で 32px に広げる。 column-gap を広げると «番号と項目名» の隙間まで広がってしまう */ margin-top: 0; margin-left: var(--space-4); } } /* -------------------------------------------------------------------------- ★900px 未満では図を出さない（2026-09-14 三嶋指示） 図は PC で貼り付けるためのもので、900px 未満では貼り付かず縦積みに落ちる。 そのとき図の 3 項目は **直後の見出しと完全に同じ文字列**になり、 452px ぶんの重複になる（375px で実測）。 ★PC の見え方は変えない。★.nb2-switch の中だけに効かせる。 .figure-switch は /reason/ とスタイルガイドでも使う共通部品なので、 そちらに影響させない。 -------------------------------------------------------------------------- */ @media (max-width: 899px) { .nb2-switch .figure-switch__sticky { display: none; } }