/* ========================================================================== page-toc.css — ページ内目次（導入ブロックの右。固定しない） -------------------------------------------------------------------------- ★★2026-09-14 三嶋決定で **固定（position: sticky）をやめた**。 位置は変えない（導入ブロックの右）。ヒーローもそのまま。 目次はその節の «右カラム» として置かれ、スクロールで一緒に流れる。 やめた理由（実測）： ・固定していた間、本文が使えるのは 912px。コンテナ 1,280px の 71%。 目次と隙間に 368px（28.75%）を **全部の節で** 払い続けていた ・目次が本当に効くのは «開いた直後»。B2B の詳細ページを頭から読み通す人は ほとんどおらず、読み通す人は目次を見ない ・いちばん要るのは SP（375px で 32.7 画面）だが、固定のままでは出せなかった ・競合 6 社で右に固定している会社は 0 社。いちばん長い船井総研は ヒーロー直下の «置き型» で、SP でも出している → 固定をやめたので、**本文の幅を削るのは目次が乗る 1 節だけ**になった。 02 以降の節は 912px → 1,200px に戻る（実測・+31.6%）。 （以下は «右に置く» と決めたときの記録。位置の判断はいまも有効） 2026-09-14 三嶋決定。競合 6 社を実測したうえで「右」を選んだ（案 T-3）。 ★実測（6 社の詳細ページ 各 1 枚） 船井総研 目次あり（12 項目）／ヒーロー直下・本文幅いっぱい／固定しない／SP でも出る 山田CG 目次あり（3 項目）／左・幅 300px／固定する／SP では消える タナベ・リブ・識学 目次なし 才流 HTML には 10 項目あるが親が display:none で **どの幅でも出ない** → «右に固定» は 6 社中 0 社。承知のうえで三嶋が選んだ形。 判断の材料はこのページの長さ：案 N-4 は 1425px で 18,983px（画面 21 枚）、 375px で 28,025px（34.5 枚）。節は 10。船井とほぼ同じ重さ。 ★★1200px 未満では **出さない**。 目次（240px）＋隙間を本文から引くと、それ未満では中身が破綻するため。 SP の扱いは未決（HANDOFF.md）。山田も SP では消している。 ★★**置き方は «導入ブロックの右に置くだけ»**（2026-09-14 三嶋決定）。 position は持たせない。目次は本文と一緒に流れ、通り過ぎたら画面から出ていく。 ・目次は最初から導入ブロックの中にある（ヒーローには重ならない） ・貼り付かないので «出すタイミング» も «引っ込めるタイミング» も無い ・実測：目次 408px、導入ブロック 662px。**目次はこの 1 節に収まる**（1425px） ★経緯：fixed ＋ JS の出し入れ → sticky → 固定をやめる、と 3 段階で動いた。 fixed のときは «早すぎると面をまたいで白地に白文字／遅いと使えない» の 板挟みが解けず、sticky でその板挟みは消えた。 そのうえで «固定に払う 368px が見合わない» と判断して固定自体をやめた。 ★★**ヒーローより «後» に require すること。** 目次は範囲の先頭に置かれる。 ヒーローを含めると目次が表紙の上に乗る。 マークアップ（includes/page-toc.php が開き、includes/footer.php が閉じる）： .page-toc-rail ここから下が «効く範囲»。position: relative だけ .page-toc-rail__col rail の高さいっぱいの絶対配置。.container を併用して 本文と同じ中央寄せに乗せる（100vw で計算しない） .page-toc col の先頭に置くだけ。position は持たせない ★★**最初の位置は «節の中身の頭» に揃える**（2026-09-14 三嶋のご指摘）。 col の padding-top を節の上余白（--section-py-lg）と同じにしてある。 0 にすると節の上端にぴたりと付き、ヒーローとの間に余白が無くなる。 ========================================================================== */ :root { /* ★256px。節名の最長は «ご相談いただく経営課題» の 11 字。 15px × 11 = 165px に、番号（30px）＋隙間（12px）＋左の余白（20px）を足すと 227px。 216px（13.5rem）で試したら 2 行に折れたので 240px にした（実測）。 */ --page-toc-w: 16rem; --page-toc-gap: var(--space-12); } /* ★既定は出さない。1200px 以上でだけ出す。 目次（256px）＋隙間を本文から引くと、それ未満では中身が破綻するため。 */ .page-toc-rail__col { display: none; } @media (min-width: 1200px) { /* 目次の居場所を決めるための基準。★position: relative 以外を足さないこと。 */ .page-toc-rail { position: relative; } /* 範囲いっぱいに広げた «目次の居場所»。 ★.container を併用しているので、左右の余白も max-width も本文と同一。 目次の右端が .container の右端とぴったり揃う。100vw で計算しない。 ★★本文の上に重なるので pointer-events: none を必ず付ける。 付けないと、rail の高さぶん（＝本文のほぼ全部）リンクが押せなくなる。 */ .page-toc-rail__col { display: flex; position: absolute; inset: 0; z-index: var(--z-sticky); pointer-events: none; /* ★★目次の «最初の位置»。ここを 0 にすると、範囲の先頭＝節の上端に貼り付いて ヒーローとの間に余白が無くなる（2026-09-14 三嶋のご指摘）。 節そのものの上余白（--section-py-lg）と同じだけ空けて、 **目次の頭を、その節の中身の頭に揃える**。 ★節の余白と同じトークンを使うこと。数字を書くと、節の余白を変えたときにずれる。 */ padding-top: var(--section-py-lg); } /* ★★position を持たせない（2026-09-14 三嶋決定で固定をやめた）。 col の先頭に置くだけ。本文と一緒に流れ、通り過ぎたら画面から出ていく。 ★max-height / overflow-y も外した。貼り付かないので «画面より背が高い» が 起きず、付けたままだと目次の中に内側のスクロールバーが出るだけになる。 */ .page-toc { align-self: flex-start; /* ★flex の伸長を止める。伸びると縦に間延びする */ margin-left: auto; /* 右端へ */ pointer-events: auto; width: var(--page-toc-w); /* ★背景を持たせない。浮いた白い箱はカードに見える（角丸カード禁止の主旨）。 */ padding-left: var(--space-5); border-left: var(--border-width) solid var(--color-border); } /* ★★本文を目次の下から逃がすのは **目次が乗る 1 節だけ**（2026-09-14）。 固定をやめたので、2 節目から下に目次は重ならない。 ここを .section 全部に効かせると、目次が無い場所でも 368px を払い続ける （実測：本文 912px。コンテナ 1,280px の 71% しか使えていなかった）。 ★★セレクタは «col の次の節» にしてある。クラス名（.page-intro）で書くと、 導入ブロックを置かないページで効かなくなる。 ★.section の «帯» は全幅のままにしたいので、main や section ではなく **.container の padding だけ**を足す。帯を割らずに中身だけ左へ寄る。 */ .page-toc-rail__col + .section > .container { padding-right: calc(var(--container-gutter) + var(--page-toc-w) + var(--page-toc-gap)); } /* ★アンカーで飛んだとき、見出しが sticky ヘッダー（80px）の下に潜らないようにする。 ★★飛び先は **節名（.sec-head__label）**。2026-09-14 に id を節名へ移した。 以前は一文（.sec-head__title）に付いていたため、一文が 120px に置かれ、 その上の節名が 60px に来てヘッダーに 20px 食い込んで切れていた（実測）。 */ .has-page-toc :target, .has-page-toc .sec-head__label { scroll-margin-top: calc(80px + var(--space-10)); } } .page-toc__title { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); } .page-toc__list { display: grid; gap: var(--space-3); } .page-toc__link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: baseline; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-snug); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } /* 番号。★«見せる数字» なので Oswald（マークアップ側で .u-numeric を付ける）。 ★tokens.css に --text-sm より小さい段は無い。作らずにこのまま使う。 */ .page-toc__no { font-size: var(--text-sm); } .page-toc__link:hover { color: var(--color-text-strong); } /* 現在地。★色だけでなく «太さ» でも差を付ける。色覚に依存させない。 ★★2026-09-14 に固定をやめたため、**いまは出番が無い**。 is-current を付けていた js/page-toc.js は読み込んでおらず、ファイルも消した （復元は `git show 059f06c:assets/js/page-toc.js`）。 規則を残しているのは、目次を貼り付ける置き方に戻すページが出たときのため。 いま効いていると思い込まないこと。 */ .page-toc__link.is-current { color: var(--color-text-strong); font-weight: var(--fw-bold); } /* -------------------------------------------------------------------------- 紺の節の上に来たとき（js/page-toc.js が .is-on-navy を付け外しする） -------------------------------------------------------------------------- ★★2026-09-14 に固定をやめたため、**いまは出番が無い**。 目次は白地の導入ブロックから動かないので、紺の節の上に来ることがない。 規則だけ残してあるのは、目次を別の場所に置くページが出たときのため。 使っていないことに気づかず «効いているはず» と考えないこと。 ★★**.on-inverse を使わないこと。** .on-inverse は base.css で background-color も塗る。目次は浮いているので、 付けると «紺の箱» が本文の上に乗り、角丸こそ無いがカードそのものになる （2026-09-14 に実際に踏んだ）。 .on-inverse は «面を塗る要素» に付けるもの、という決めごとのとおり。 ★ここでやるのは **意味トークンの差し替えだけ**。個別のセレクタに色を書かない。 ★目次（約 350px）は節の境目をまたぐ瞬間がある。そのあいだは上半分だけ 反対の面に乗る。スクロール中の一瞬なので許容する（背景を持たせない代償）。 -------------------------------------------------------------------------- */ .page-toc.is-on-navy { --color-text-muted: var(--navy-200); --color-text-strong: var(--white); --color-border: var(--color-border-on-inverse); }