` を中に持つ同じピルにすると、説明文がピルの中に押し込まれて崩れる（実測でそうなった）。 `

` を持つかどうかで分ける。 */ body.v8 .next{display:flex;flex-wrap:wrap;gap:12px} /* 説明文を持つ一覧は、トップの事業一覧と同じ「カードの行」にする */ body.v8 .next:has(a p){display:grid;gap:12px} body.v8 .next a:has(p){ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start; gap:8px clamp(16px,2vw,32px); padding:clamp(18px,2vw,28px) clamp(18px,2.2vw,32px); border:1px solid rgba(24,35,59,.07);border-radius:var(--r-card,24px); background:color-mix(in srgb, var(--white) 62%, var(--paper)); box-shadow:0 10px 40px rgba(14,23,48,.06); color:var(--ink);text-decoration:none; transition:background .2s ease,color .2s ease,border-color .2s ease} body.v8 .next a:has(p) .t{color:var(--principle);font-size:var(--f5);font-weight:600} /* 🚩 説明文の色は**インライン style から外して**ここで指定する。インライン（style="color:var(--ink-2)"）だと、ホバーで紫に反転したとき CSSの `:hover p{color:var(--white)}` が負けて、**紫の面に灰色の文字**になる（実測）。 */ body.v8 .next a:has(p) p{color:var(--ink-2)} body.v8 .next a:has(p) .ar{color:var(--violet-d);align-self:center} body.v8 .next a:has(p):hover,body.v8 .next a:has(p):focus-visible{ background:var(--principle);border-color:var(--principle);color:var(--white)} body.v8 .next a:has(p):hover .t,body.v8 .next a:has(p):hover p,body.v8 .next a:has(p):hover .ar, body.v8 .next a:has(p):focus-visible .t,body.v8 .next a:has(p):focus-visible p, body.v8 .next a:has(p):focus-visible .ar{color:var(--white)} /* 短い出口リンクはピル */ body.v8 .next a:not(:has(p)){ display:inline-flex;align-items:center;gap:10px; min-height:44px;padding:0 clamp(16px,1.6vw,22px); border:1px solid rgba(24,35,59,.16);border-radius:var(--r-full,999px); background:color-mix(in srgb, var(--white) 62%, var(--paper)); color:var(--violet-d);text-decoration:none; font-size:var(--f2);font-weight:600;letter-spacing:.02em; transition:background .2s ease,color .2s ease,border-color .2s ease} body.v8 .next a:not(:has(p)) > div{display:contents} body.v8 .next a:not(:has(p)) .t{font-weight:600} body.v8 .next a:not(:has(p)) .ar{color:var(--violet-d);transition:transform .22s cubic-bezier(.62,0,.22,1),color .2s ease} body.v8 .next a:not(:has(p)):hover,body.v8 .next a:not(:has(p)):focus-visible{ background:var(--principle);border-color:var(--principle);color:var(--white)} body.v8 .next a:not(:has(p)):hover .ar,body.v8 .next a:not(:has(p)):focus-visible .ar{color:var(--white);transform:translateX(4px)} @media (prefers-reduced-motion:reduce){body.v8 .next a .ar{transition:none}} /* ── ⑥ 主要ボタンの形をトップに合わせる ────────────────────── トップの .btn は 22.5px のピル。site.css の .btn は角丸なし。（Codexは「下層の .btn が四角い」と指摘したが、実測すると

内で .btn は使われていなかった。ここは将来使ったときのために形だけ揃えておく） */ body.v8 .btn{border-radius:var(--r-btn,22.5px);min-height:44px} /* ── ⑦ 準備中のタグ ────────────────────────────────────────── 🚩 --ink-3 は紙の上では5.5:1だが、少し沈んだ地(236,235,232)に載ると **4.41〜4.45:1** で基準(4.5)を割る（実測・390px）。フッターで踏んだのと同じ穴。「色で弱める」のをやめ、区別は（準備中）のタグの枠と文字だけで付ける。 */ body.v8 .soon,body.v8 .off .soon{color:var(--violet-d)} /* 🚩 準備中の項目の**名前**は --ink のまま。--ink-3 で弱めると、少し沈んだ地の上で 3.99:1（基準4.5）まで落ちる（実測・390px）。トップの `.face-paper .row.off .t{color:var(--ink)}` と同じ扱いにする。「色で弱めると必ず読めなくなる。階層は色ではなく大きさ・太さ・タグで作る」。 */ body.v8 .off,body.v8 .off .t,body.v8 .off .d, body.v8 .row.off .t,body.v8 .row.off .d{color:var(--ink)} /* ── ⑧ 右下の相談ドックを出さない ──────────────────────────── 🚩 **Chromeで実際にスクロールして初めて見つけた。** 読み込み直後は display:none で、 site.js が途中から出す作りなので、スクショだけ撮っていても写らない。トップにはドックが無い。下層では・ページ末尾の相談CTAと、ASK AIの4ボタンを**そのまま二重に出している** ・固定表示で本文の右側を覆う（実測：一覧の説明文と表の右列が隠れていた）トップに寄せるので出さない。相談導線はヘッダーのボタンと末尾のCTAで足りる。 */ body.v8 #dock,body.v8 .dock{display:none} /* ── ⑨ 中央寄せの見出しの下の飾り罫 ────────────────────────── 🚩 `#askai h2::after` は幅150pxのブロックで `margin:30px 0 0`。見出しは中央寄せなのに罫だけ左端に residual で残り、ズレて見えた（実測）。トップのASK AIには罫が無い。合わせて消す。 */ body.v8 #askai h2::after{content:none} /* 中央寄せの節に罫が残る場合は中央に置く（他ページ用の保険） */ body.v8 [style*="text-align:center"] h2::after, body.v8 .askai h2::after{margin-inline:auto} /* ── ⑩ 節と節のあいだを詰める ──────────────────────────────── 🚩 トップは節のあいだの空きを**脳が埋めている**。脳を流さない下層で同じ空きを取ると、ただの空白になる（実測：相談CTAとASK AIのあいだに約300pxの無地が出ていた）。 */ body.v8 .sec{padding-block:clamp(52px,6vw,96px)} body.v8 .sec.tight{padding-block:clamp(28px,3.2vw,48px)} body.v8 .askai{padding-block:clamp(56px,6.4vw,104px)} /* ── ⑪ 紙の色を1つにする ───────────────────────────────────── 🚩 `.s-white` が純白で、`.s-paper` が #F6F5F0。ページの中で紙が2色になっていて、節の境目に**意図しない色の切り替わり**が出ていた（実測でChromeで確認）。トップは全面が1色。合わせる。 */ body.v8 .s-white{background:var(--paper)} /* ── ⑫ 相談CTAを紙のカードに（2026-09-08・2回目の作り直し）───── 🚩 髙橋さん「これで本当にいいの？ちゃんと確認した？」。1回目は濃紺の箱を紙にしただけで、 **中身の置き方を直していなかった**。実物を見ると：・幅1180pxのカードに対し、文字は左600pxだけ。右上と左下が大きく空いていた・見出しは上、ボタンは右下。互いに何にも揃っていない・カードの内側の余白が大きく、空白がさらに広がっていた「暗くなくなった」で止めていた。ここは**1列の中央寄せ**にして、すぐ下のASK AIのカードと同じ組みに揃える（締めの2枚が同じ形になる）。 */ /* 🚩 節の id はページによって違う（/news/ は #contact、下層の多くは #contact-cta）。 id で狙うとページによって当たらない。**部品のクラス（.ctap）で狙う**。実測：/news/ だけ濃紺のパネルのままだった。 */ body.v8 #contact-cta,body.v8 #contact{background:transparent} body.v8 .ctap{ position:relative;overflow:hidden; background:color-mix(in srgb, var(--white) 62%, var(--paper)); border:1px solid rgba(24,35,59,.07);border-radius:var(--r-card,24px); box-shadow:0 10px 40px rgba(14,23,48,.06); padding:clamp(34px,4vw,60px) clamp(24px,3vw,48px); text-align:center} body.v8 .ctap .aur, body.v8 .ctap .veil{display:none} /* 1列にして中央へ。幅は読める長さで止める */ body.v8 .ctap .in{ display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2vw,28px); max-width:44em;margin-inline:auto;min-height:0} body.v8 .ctap .say{display:flex;flex-direction:column;align-items:center;gap:.6em} /* 「受付中」の小さな四角は、紙の上では意味が読めないので出さない */ body.v8 .ctap .st{color:var(--violet-d);margin:0} body.v8 .ctap .st i{display:none} body.v8 .ctap .t{color:var(--principle);margin:0} body.v8 .ctap .sub{color:var(--ink-2);margin:0;max-width:34em} /* 行動は紫のピル。条件はその下に小さく */ body.v8 .ctap .hit{ display:inline-flex;flex-direction:column;align-items:center;gap:.7em; background:none;border:0;padding:0;margin:0;min-height:0;text-decoration:none} body.v8 .ctap .hit::before, body.v8 .ctap .hit::after{content:none} body.v8 .ctap .hit .lb{ display:inline-flex;align-items:center;gap:.6em;min-height:50px;padding:0 2em; background:var(--principle);color:var(--paper);border-radius:var(--r-full,999px); font-weight:600;letter-spacing:.02em;transition:background .2s ease} body.v8 .ctap .hit:hover .lb, body.v8 .ctap .hit:focus-visible .lb{background:var(--principle-d)} body.v8 .ctap .hit .fx{color:var(--ink-2);font-size:var(--f2)} body.v8 .ctap .hit .fx b{font-weight:600;color:var(--ink)} body.v8 .ctap .hit .fx s{text-decoration:none;color:var(--ink-3);margin:0 .5em} /* ── ⑬ 締めの2枚のあいだを詰める（Chromeで見て気づいた）──────── 🚩 相談CTAのカードの下端から ASK AI の見出しまで、実測で約350pxの無地があり、その真ん中に全幅の1px罫（cta.css:112 の `.askai{border-top}`）が1本走っていた。トップは節の区切りに罫を引かない（「謎の棒」で撤去済み）。下層も同じにする。 */ body.v8 .askai{border-top:0;padding-block:clamp(44px,4.8vw,76px)} /* 相談CTAの直後の「次の一歩」の帯は、CTAとASK AIのあいだに空きを足すだけなので詰める */ body.v8 #contact-cta + .sec.tight,body.v8 #contact + .sec.tight{padding-block:clamp(20px,2.4vw,34px)} body.v8 #contact-cta,body.v8 #contact{padding-block:clamp(44px,5vw,84px)} /* ── ⑭ 書体と横幅の基準をトップに合わせる（Codexのソース照合で発覚）── 実測（1512px）：トップ … 書体 PPNeueMontreal(→Inter) ／ .wrap 幅1280px・左116px 下層5 … 書体 Noto Sans JP ／ .wrap 幅1292px・左110px 見出しの色とカードは寄っても、**文字の表情と本文の始まる位置**が別だった。ページを移った瞬間に本文が6pxずれ、字面も変わる。 🚩 @font-face をここに置いても、`--font-stack` を使うページ（body.v8）以外はダウンロードしない（未使用のフォントは読み込まれない）。 */ @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url("/assets/fonts/inter-variable.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } body.v8{ font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto,"Hiragino Sans","Noto Sans JP",sans-serif; font-feature-settings:"ss01" 1} /* 本文の始まる位置をトップと同じに（1512pxで左116px） */ body.v8 .wrap{max-width:1280px} /* ── ⑮ ASK AI の負マージン ──────────────────────────────────── 🚩 cta.css:113 は `.askai{margin-top:calc(-1 * clamp(20px,2.6vw,44px))}`。 v8align は border と padding だけ上書きしていて、ここが残っていた。実測：/about/ は -39.3px、/services/ は 0px（`#contact-cta + #askai` が効くかどうかで変わる）。**同じ組みなのにページで間隔が違う**状態だった。 */ body.v8 .askai{margin-top:0} /* ── ⑯ 写真帯だった節（.band-text）の見出し ──────────────────── 🚩 写真帯の見出しは `h2.huge`（写真の上に白で乗せる前提の特大）。写真を外して紙に置いた瞬間、**ページのどの見出しよりも大きい紫の塊**になり、本来の主題（h1）を食う（Chromeで /news/ を見て発覚。「お知らせ」より「変わったところだけ、ここに出す」のほうが遥かに大きかった）。節の見出しとして妥当な大きさに落とす。 */ body.v8 .band-text{padding-block:clamp(40px,4.4vw,72px)} body.v8 .band-text h2.huge{ font-size:clamp(24px,2.6vw,38px);line-height:1.4;letter-spacing:-.02em; max-width:22em} body.v8 .band-text .lede{margin-top:1em;max-width:38em} /* ── ⑰ 小見出しラベル（.k）──────────────────────────────────── 🚩 `--ink-3`(#656C7D) は紙の上では 5.5:1 だが、カードの地(235,234,234)に載ると **4.38:1** で基準(4.5)を割る（実測・/services/system-development/）。フッターの準備中・事業一覧の準備中に続いて3度目の同じ穴。「色で弱める」のをやめ、--violet-d（カードの地の上で 9.2:1）にする。弱いラベルではなく、章の見出しとして読ませる。 */ body.v8 .k{color:var(--violet-d)} /* ── ⑱ top.css 系ページの節の下罫 ──────────────────────────── 🚩 top.css は `section{border-bottom:1px solid var(--line-2)}` を持っている。 v8align は `.sec` を狙っていたので、素の `

` で組んである /news/ /en/ /sitemap/ には当たっていなかった（掃引で6件残った）。トップは節の区切りに罫を引かない（「謎の棒」で撤去済み）。同じにする。 */ body.v8 section{border-bottom:0} body.v8 .askai{border-bottom:0} /* ── ⑲ ページ末尾の「次に見る」に見出しを付け、カードに揃える ────────── 2026-09-09 髙橋さん「それぞれのページのここがちょっと微妙だよね」 🚩 直す前の実物：画面幅いっぱいの1px罫（site.css:501 の `.next{border-top}`）の下に、小さいピルが1個だけ左端にぶら下がっていた。**何のための塊か言っていない**うえ、罫はトップで「謎の棒」として撤去済みのもの。見出しが構造を持つので罫は要らない。 🚩 リンクには説明文（

）を入れた＝上の⑤の `a:has(p)` に乗ってカードになる。説明文はリンク先ページ自身の meta description から取った（作文していない）。 */ body.v8 .next{border-top:0} body.v8 .nexthd{ margin:0 0 clamp(14px,1.6vw,22px); font-size:var(--f2);font-weight:600;letter-spacing:.14em; color:var(--violet-d);text-transform:none} /* 末尾の帯だけ、2枚以上なら横に並べる（本文中の一覧＝/services/ の4枚は縦のまま） */ body.v8 .sec.tight .next:has(a p){ display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} /* 見出しが区切りを持つので、帯の上下は本文と同じ間合いに戻す */ body.v8 .sec.tight:has(.nexthd){padding-block:clamp(36px,4vw,64px)}