@charset "UTF-8"; /* ===================================================================== lp-forge / base.css — 汎用LP生成エンジンの土台CSS --------------------------------------------------------------------- これは「1本のLPのCSS」ではない。案件ごとに色・書体・写真が入れ替わっても 構造が破綻しないための器だけを書いてある。**色の実値は1つも書いていない。** 設計の根拠と判断理由は docs/css-architecture.md に全部書いた。 ここには「なぜこの値か」を各ブロック1行で置く。 ■ このファイルが守っている禁止（research-and-design-rules.md 5章） - グラデーションを書かない ................ gradient は 0 個 - 均等3カラムの器を作らない ............... repeat(3, 1fr) / auto-fit / auto-fill は 0 個 - 全セクション中央揃えにしない ............ text-align:center は .btn と .stickybar だけ - スクロール連動の演出を書かない .......... animation / @keyframes / IntersectionObserver 前提クラスは 0 個 - フォーカスリングを消さない .............. outline:none は 0 個 - 見出しに飾りを付けない .................. 左罫・下線バー・英字ラベル用の装飾は持たない ■ 読み込み順の約束（重要） レンダラが出す :root のトークンは **このファイルより後** に置くこと。 このファイル末尾でなく先頭の :root に既定値を持っているので、後勝ちで上書きされる。 より確実にしたいなら
のインラインで渡す （インラインは常に勝つ）。 ■ コントラストの責任分界 CSS は「どの組み合わせが本文扱いか」を宣言するだけ。実測は Node 側の監査で行う。 4.5:1 以上が要るペア（本文・注記・ボタン文字。18.5px未満/24px未満の文字が乗る） --fg on --bg 本文・見出し --fg on --sunk 沈めた面の本文（.sec--tone-sunk） --muted on --bg 注記・出典・キャプション（13px。ここが一番落ちる） --muted on --sunk 同上 --accent on --bg リンク・キッカー・.stat__value --accent on --sunk 同上 --accent-fg on --accent 主ボタンの文字・必須バッジの文字（.sec--tone-accent の本文も） --accent on --accent-weak .qa[open] / .voice / .plan--強調 の中の文字 3:1 以上が要るペア（UI部品の輪郭。WCAG 1.4.11） --line on --bg 入力欄の枠・チェックの枠 ← 罫線一般ではなく「入力欄の枠」が対象 フォーカスリングは outline-color を --fg / --accent-fg（面に応じて）にしてある。 **--accent をリングに使っていない**（アクセント地のボタンの上でリングが消えるため）。 色として自由（不問） --line を装飾罫として使う箇所、--accent-weak を面として使う箇所 ■ 書体トークンについて（research-and-design-rules.md 6章） --font-base / --font-head に **Inter / Roboto / system-ui / 游ゴシック を入れない**。 CSS では禁止できないので、監査ゲート側で文字列一致で落とすこと。 ===================================================================== */ /* ===================================================================== 1. トークン既定値 --------------------------------------------------------------------- **色の既定値は置いていない。このファイルに色リテラルは0個。** 置かない理由：既定のグレーを入れておくと、レンダラがトークンを流し忘れても 「それらしいモノクロのLP」が描画されてしまい、事故が静かに通る。 トークンが無ければ色が壁抜けして見た目が壊れる＝すぐ気づく、を選んだ。 （--bg --fg --muted --line --sunk --accent --accent-fg --accent-weak は レンダラが :root か .lp の style 属性で必ず全部渡すこと。監査で存在を検査する） 一方、**寸法と書体には既定値を置いている**。こちらは欠けても壊れ方が静かで、 かつ案件ごとに変える必要が薄いため。 ===================================================================== */ :root{ --font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-head: var(--font-base); --w-text: 40rem; /* 640px。16px本文で全角40字＝実測ルール「35〜45字」の中央 */ --w-wide: 70rem; /* 1120px。器のあるセクションだけがここまで広がる */ --radius: 4px; /* 角丸は控えめ。写真には効かせない（下の .card__media 参照） */ --scheme: light; /* 暗色トークンを流す案件は :root で --scheme:dark に差し替える */ /* --- 余白スケール（4px基準。刻みは末尾ほど粗い＝隣同士が目で見て違う） --- */ --sp-1: 0.25rem; /* 4px バッジ内・アイコンと文字 */ --sp-2: 0.5rem; /* 8px ラベルと入力欄 */ --sp-3: 0.75rem; /* 12px 見出し→直後の本文 */ --sp-4: 1rem; /* 16px 段落と段落／左右ガター（SP） */ --sp-5: 1.5rem; /* 24px ボタン間・カード内の段 */ --sp-6: 2rem; /* 32px 本文→表・リスト・写真 */ --sp-7: 2.5rem; /* 40px h3のまとまり同士・カード同士 */ --sp-8: 3.5rem; /* 56px セクション縦余白（小） */ --sp-9: 4.5rem; /* 72px セクション縦余白（中） */ /* --- 意味づけした余白（実装ではこちらだけを使う） --- */ --flow-tight: var(--sp-3); --flow: var(--sp-4); --flow-loose: var(--sp-6); --gap-group: var(--sp-7); --gutter: var(--sp-4); /* --- 文字スケール --------------------------------------------------- 16px = 1rem 基準。clamp を使うのは h1/h2/h3/lead/数字だけ。 本文以下は固定（本文を可変にすると入力欄が16pxを割ってiOSが自動ズームする）。 clamp の中央値には **必ず rem 項を入れている**。vw だけだとブラウザの 文字サイズ設定に追従せず WCAG 1.4.4（200%拡大）を落とす。 */ --fs-cap: 0.8125rem; /* 13px 下限。これ未満を作らない */ --fs-sm: 0.875rem; /* 14px 表の中・フッター・追従バー */ --fs-base: 1rem; /* 16px 本文・入力欄 */ --fs-lead: clamp(1.0625rem, 1rem + 0.30vw, 1.1875rem); /* 17→19px 導入文 */ --fs-h3: clamp(1.1875rem, 1.10rem + 0.40vw, 1.375rem); /* 19→22px */ --fs-h2: clamp(1.375rem, 1.20rem + 1.10vw, 1.875rem); /* 22→30px 実測レンジ SP22-26 / PC26-30 */ --fs-h1: clamp(1.625rem, 1.30rem + 1.90vw, 2.5rem); /* 26→40px 実測レンジ SP26-32 / PC32-40 */ --fs-num: clamp(2rem, 1.60rem + 2.20vw, 3.25rem); /* 32→52px .stats の先頭1つだけ */ --fs-num-s: 1.5rem; /* 24px それ以外の数値・料金 */ /* --- 行送り・字送り（和文。research-and-design-rules.md 6章） --- */ --lh-body: 1.85; /* 和文本文 1.8〜2.0 の中央 */ --lh-head: 1.45; /* 和文見出し 1.4〜1.5 の中央 */ --lh-tight: 1.25; /* 数字だけ */ --ls-body: 0.02em; --ls-head: 0.03em; /* --- 部品の寸法（高さは全部 min-* 。固定 height を1つも持たない） --- */ --tap: 2.75rem; /* 44px。WCAG 2.5.5 の下限 */ --btn-h: 3rem; /* 48px */ --btn-h-lg: 3.5rem; /* 56px */ --stickybar-h: 4.5rem; /* 72px。追従バーの実高ではなく「フッターに空ける下駄」の見積り */ /* --- 面（tone）。実体は下の .sec--tone-* で差し替える --- */ --surface: var(--bg); --on-surface: var(--fg); } /* ===================================================================== 2. リセット グローバルに触るのは box-sizing と body の余白と text-size-adjust だけ。 WordPress の固定ページに載せてもテーマ側を壊さない範囲に留める。 ===================================================================== */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body{ margin: 0; } .lp{ color-scheme: var(--scheme); font-family: var(--font-base); font-size: var(--fs-base); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--fg); background: var(--bg); /* 中央揃えを既定にしない。中央になるのは .btn のラベルと .stickybar だけ。 text-align を切り替えるユーティリティも用意しない（禁止「全セクション中央揃え」） */ text-align: left; text-underline-offset: 0.22em; overflow-wrap: anywhere; /* 長いURLで横スクロールを出さない（WCAG 1.4.10） */ } /* --------------------------------------------------------------------- 要素セレクタは **すべて :where() で詳細度0** にする。ここは重要な設計判断。 初版は `.lp a{...}` `.lp p{margin:0}` と書いていた。詳細度は (0,1,1) で、 クラス1つのコンポーネント指定 (0,1,0) **より強い**。層の順序が逆転していて、 リセットがコンポーネントを上書きしていた。実測で見つかった被害は2つ: ・`.lp a{color:var(--accent)}` が `.btn--primary{color:var(--accent-fg)}` に勝ち、 主ボタンの文字が地と同色（コントラスト1:1）になっていた ・`.lp p{margin:0}` が `.sec__body > * + *{margin-top}` (0,1,0) に勝ち、 **本文の縦リズムが全滅**していた（実測 marginTop=0px） どちらも「変数は正しいのに当たっていない」ので、目でも計算値でも見つからない。 :where() の中身は詳細度に加算されないので、`:where(.lp) :where(p)` は (0,0,0)。 作者スタイルはUAスタイルより常に強いので、詳細度0でもブラウザ既定には勝つ。 → **クラスを1つでも持つ指定は、必ずこの層に勝つ。** --------------------------------------------------------------------- */ :where(.lp) :where(img){ display: block; max-width: 100%; height: auto; } :where(.lp) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table, fieldset){ margin: 0; } :where(.lp) :where(fieldset){ border: 0; padding: 0; min-width: 0; } :where(.lp) :where(table){ border-collapse: collapse; width: 100%; } :where(.lp) :where(b, strong){ font-weight: 700; } /* 段落の縦リズム。**器の中でも効かせる**。 初版は `.sec__body > * + *` の1本しか無く、`.sec__body` の直下しか見ていなかった。 実測で `.hero__sub` / `.card__body` / `.qa__a` / `.step__body` の中の段落間が すべて 0px だった。詳細度0で置くので、器ごとの指定があればそちらが必ず勝つ。 */ :where(.lp) :where(p, ul, ol, dl, blockquote, figure, table) + :where(p, ul, ol, dl, blockquote, figure, table){ margin-top: var(--flow); } /* リンク色。**ボタンを二重に除外している**（`:not(.btn)` と 詳細度0）。 レンダラはCTAを で出す（href を持つ以上アンカーが正しい）ので、 ここで除外しないと必ず衝突する。 除外しているのは .btn だけ。.news__title / .lp-footer__links / .sec__tel > a / .lp-footer__tel > a / 本文中のリンクには今までどおり当たる。 */ :where(.lp) :where(a:not(.btn)){ color: var(--accent); text-decoration-thickness: 1px; } :where(.lp) :where(a:not(.btn)):hover{ text-decoration-thickness: 2px; } /* アクセント面ではリンクが地に溶ける（--accent on --accent）。面に追従させる */ .sec--tone-accent :where(a:not(.btn)){ color: var(--on-surface); } /* フォーカスリング。outline:none はこのファイルに1つも無い。 色は面に追従する --on-surface。--accent は使わない（アクセント地の上で消えるため）。 */ .lp :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline: 3px solid var(--on-surface); outline-offset: 2px; border-radius: var(--radius); } /* アンカー着地。ヘッダーが sticky になる幅（≥960px）でだけ下駄を履かせる */ .lp [id]{ scroll-margin-top: var(--sp-5); } /* ===================================================================== 3. 器（section / inner / 面 / 縦余白） ===================================================================== */ .sec{ background: var(--surface); color: var(--on-surface); /* 上下を非対称にしている。見出しの上には余白が要るが、末尾（多くはCTAか注記）の 下は詰めてよい。全部同じ数値で積むと「均等余白」になり、禁止事項に触れる。 */ padding-block: var(--sec-pt, var(--sp-9)) var(--sec-pb, var(--sp-8)); } /* 縦余白は3段だけ。段を増やすと「なんとなく違う値」が生まれて統制が消える */ .sec--sp-s{ --sec-pt: var(--sp-7); --sec-pb: var(--sp-6); } /* 40 / 32 密度を上げる帯 */ .sec--sp-m{ --sec-pt: var(--sp-9); --sec-pb: var(--sp-8); } /* 72 / 56 標準 */ .sec--sp-l{ --sec-pt: 5.5rem; --sec-pb: var(--sp-9); } /* 88 / 72 行動する場所 */ /* ヒーローだけ上を詰めて下を空ける。ヘッダーの罫線から主コピーまでを近づける */ .sec--hero{ --sec-pt: var(--sp-6); --sec-pb: var(--sp-9); } /* --- 面（tone） ------------------------------------------------------ --surface / --on-surface / --muted / --line を面ごとに差し替える。 コンポーネント側はこの2〜4個しか見ないので、面が変わっても文字が消えない。 （入力欄だけは例外で --bg / --fg を直接使う。理由は §9 のコメント） */ .sec--tone-base{ --surface: var(--bg); } .sec--tone-sunk{ --surface: var(--sunk); } .sec--tone-accent{ --surface: var(--accent); --on-surface: var(--accent-fg); --muted: var(--accent-fg); /* 弱い文字を作らない。アクセント地で階調を作ると必ずコントラストを割る */ --line: var(--accent-weak); } /* 隣り合う面を同じにしない。**構造的に封じる**： 同じ tone が連続したら、2つ目を地に戻す。テンプレ感の正体のひとつは 「面が交互に切り替わるだけの単調なページ」なので、そもそも作れないようにする。 （黙って変わるのは不親切なので、監査ゲート側でも警告を出すこと） */ .sec--tone-sunk + .sec--tone-sunk{ --surface: var(--bg); } .sec--tone-accent + .sec--tone-accent{ --surface: var(--bg); --on-surface: var(--fg); --muted: var(--muted); --line: var(--line); } /* --- 内側の器 -------------------------------------------------------- 既定は本文幅（--w-text）。**広い器を持つセクションだけ** --w-wide まで広がる。 ページ全体が同じ幅の柱1本にならないので、それだけで型どおりに見えなくなる。 :has() が効かない環境では全部が本文幅に落ちる＝安全側に壊れる。 */ .sec__inner{ width: 100%; margin-inline: auto; padding-inline: var(--gutter); max-width: calc(var(--w-text) + var(--gutter) * 2); } .sec--hero .sec__inner, .sec__inner:has(.cards, .stats, .plans, .voices, .steps){ max-width: calc(var(--w-wide) + var(--gutter) * 2); } /* 見出しのかたまり。本文よりさらに狭くして、見出しが1行に伸び切らないようにする */ .sec__head{ max-width: 34rem; } /* 見出しのかたまりの直後。初版は `+ .sec__body` に限定していたため、 レンダラが .stack / .stats / .cards / .steps / .qa / .form を直に置いた節で **見出しと中身が 0px で密着**していた（実測報告）。器の種類を問わず空ける。 */ .sec__head + *{ margin-top: var(--flow-loose); } /* 縦のリズムは隣接セレクタだけで作る。要素ごとに margin-bottom を書かないので、 最後の要素の下に余分な余白が残る事故が構造的に起きない。 */ .sec__body > * + *{ margin-top: var(--flow); } /* 器の前は広く空ける。ただし **直前が見出しなら空けない**（見出しは下の塊に属する）。 `:not(h2,h3,h4)` で除外しておくことで、下の `.lp :where(h2,h3,h4) + *` と セレクタが重ならない＝詳細度の勝ち負けに依存しなくなる。 */ .sec__body > :not(h2, h3, h4) + h3, .sec__body > :not(h2, h3, h4) + .cards, .sec__body > :not(h2, h3, h4) + .stats, .sec__body > :not(h2, h3, h4) + .steps, .sec__body > :not(h2, h3, h4) + .plans, .sec__body > :not(h2, h3, h4) + .voices, .sec__body > :not(h2, h3, h4) + .qa, .sec__body > :not(h2, h3, h4) + .deflist, .sec__body > :not(h2, h3, h4) + table, .sec__body > :not(h2, h3, h4) + figure{ margin-top: var(--gap-group); } /* ===================================================================== 4. タイポグラフィ 見出しに装飾を付けない（左罫・下線バー・英字ラベル・アイコン）。 制作会社テンプレの指紋はほぼ全部そこに出る。 ===================================================================== */ .sec__kicker{ font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0.04em; /* 0.3em の英字キッカーにしない。和文が前提 */ line-height: 1.6; color: var(--accent); margin-bottom: var(--sp-2); } .sec--tone-accent .sec__kicker{ color: var(--on-surface); } .sec__title{ font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--ls-head); font-weight: 700; color: var(--on-surface); } /* richtext から来る素の見出しの既定。**詳細度0**にしてあるので、 .card__title / .step__title / .plan__name がどの要素で出ても必ず勝つ。 （初版は `.lp h2` (0,1,1) だったため、たとえば

に h2 のサイズが当たって h3 指定が効かない、という取りこぼしが起きる形だった） */ :where(.lp) :where(h2){ font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--ls-head); font-weight: 700; color: var(--on-surface); } :where(.lp) :where(h3, h4){ font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-head); letter-spacing: var(--ls-head); font-weight: 700; color: var(--on-surface); } /* 見出しと直後の本文だけ詰める。初版は !important で通していたが、 リセットの詳細度を下げたので素の (0,1,0) で足りる。ここから !important を外した。 （残る !important は .u-visually-hidden と prefers-reduced-motion の計4個だけ。 どちらも「必ず勝たなければ意味が無い」定型なので残す） §3 の `.sec__body > * + *` より後に置いてあるので、同詳細度で後勝ちする。 */ .lp :where(h2, h3, h4) + *{ margin-top: var(--flow-tight); } .sec__lead{ margin-top: var(--flow-tight); font-size: var(--fs-lead); line-height: 1.8; color: var(--muted); max-width: var(--w-text); } :where(.sec__body) :where(p){ max-width: var(--w-text); } /* セクション内の電話番号。

の中に受付時間の span が入る。 .lp-footer__tel と同じ考え方：

に nowrap を掛けず、番号の だけ折らせない。 */ .sec__tel{ font-size: var(--fs-num-s); font-weight: 700; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; color: var(--on-surface); } .sec__tel > a{ white-space: nowrap; } .sec__telhours{ display: block; /* span で出るので block にしないと margin-top が効かない */ margin-top: var(--sp-1); font-size: var(--fs-cap); font-weight: 400; line-height: 1.7; letter-spacing: var(--ls-body); font-variant-numeric: normal; color: var(--muted); } :where(.lp) :where(small, figcaption), .stat__src, .voice__who, .hero__note, .field__help, .lp-footer__note{ font-size: var(--fs-cap); /* 13px。都合の悪い情報（出典・注記）を小さくして逃げない */ line-height: 1.7; color: var(--muted); } /* ===================================================================== 5. ボタン 高さを固定しない（min-height だけ）。**ボタンには white-space:nowrap を書かない**。 字送りを 0.12em に上書きされても折り返して逃げる（WCAG 1.4.12）。 min-width:0 が要る理由（2026-09-03 実測で判明）: .btn は .hero__ctas / .stickybar の中で flex item になる。flex item の既定は min-width:auto なので、中身より小さくならず **親を押し広げる**。 実測では 390px の画面で .stickybar が 408px になり、18px の横スクロールが出た。 flex-basis を何remにしても、min-width:0 が無ければ縮まない。 ===================================================================== */ .btn{ display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; /* ラベルが長いとき2行に逃がす。高さは min-height で受ける */ gap: var(--sp-2); min-width: 0; /* flex item として縮めるため。これが無いと親を押し広げる */ max-width: 100%; min-height: var(--btn-h); padding: var(--sp-3) var(--sp-6); border: 2px solid transparent; border-radius: var(--radius); font-family: inherit; font-size: var(--fs-base); font-weight: 700; line-height: 1.4; letter-spacing: var(--ls-body); text-align: center; /* 中央揃えを許すのはここと .stickybar だけ */ text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn--primary{ background: var(--accent); color: var(--accent-fg); /* 枠を透明のままにしない。背景と同じ色を明示する。 「操作部品の輪郭」を測る道具は border-color を見るので、transparent だと 比 1.0 と読まれて誤検出になる。値としては見た目に影響しない。 */ border-color: var(--accent); } .btn--ghost{ background: transparent; color: var(--on-surface); border-color: var(--on-surface); } .btn--ghost:hover{ background: var(--accent-weak); } /* 電話ボタン。 **nowrap を外した（2026-09-03 実測）。** 「番号だけなら nowrap で足りる」という見積りが外れた。レンダラが出す実ラベルは 「電話する（8:00〜19:00）」のような受付時間つきで、0.12em上書き下で 392px（画面390px）。 元リサーチ（実測7社中4社が受付時間を併記）に沿った書き方なので、ラベルが短くなる 見込みは無い。**ボタンは折り返せる、を優先する**（WCAG 1.4.12 / 1.4.10）。 番号そのものを折らせない手当ては .lp-footer__tel > a に限定した（§11）。 */ .btn--tel{ background: transparent; color: var(--on-surface); border-color: var(--line-strong); /* 枠だけで成立するボタン＝操作部品の輪郭。3:1 が要る */ font-size: var(--fs-num-s); font-variant-numeric: tabular-nums; } /* ボタン内の補足（レンダラは で出す。

の中に

を置けないため）。 flex の全幅行にして2行目に落とす。色は currentColor のまま＝どの面でも文字が消えない。 */ .btn__note{ flex: 1 1 100%; font-size: var(--fs-cap); font-weight: 400; line-height: 1.6; letter-spacing: var(--ls-body); } /* アクセント地の上では主ボタンが地に溶ける。色を反転させて構造的に潰す */ .sec--tone-accent .btn--primary{ background: var(--accent-fg); color: var(--accent); border-color: var(--accent-fg); } .sec--tone-accent .btn--ghost:hover{ background: transparent; border-color: var(--accent-weak); } /* ===================================================================== 6. ヘッダー SP では sticky にしない（上下を固定バーで挟むと小さい画面が潰れる）。 常時の出口は .stickybar だけが持つ。PC では逆に .stickybar を消して ヘッダーを sticky にする。**画面に常駐するものは常に1つだけ。** ===================================================================== */ /* flex + wrap だと、タグラインが入ったときに **CTAが2行目に落ちる**（実測報告）。 grid で「1行目=屋号とCTA / 2行目=タグライン」を確定させる。 タグラインが無ければ2行目は潰れるので、高さは変わらない。 */ .lp-header{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-4); row-gap: var(--sp-1); min-height: 3.5rem; padding: var(--sp-3) var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line); } .lp-header__brand{ grid-column: 1; grid-row: 1; font-weight: 700; font-size: var(--fs-base); line-height: 1.4; letter-spacing: var(--ls-head); min-width: 0; } .lp-header__brand img{ max-height: 2.25rem; width: auto; } /* タグライン。本文16pxのままだとCTAを押し出す。13pxにして2行目に固定する */ .lp-header__tag{ grid-column: 1; grid-row: 2; min-width: 0; font-size: var(--fs-cap); line-height: 1.6; color: var(--muted); } .lp-header__cta{ grid-column: 2; grid-row: 1 / -1; align-self: center; } .lp-header .btn{ min-height: var(--tap); font-size: var(--fs-sm); padding-inline: var(--sp-4); } /* ===================================================================== 7. ヒーロー **文字が先、写真が後。写真の上に文字を載せない。** 純広告LP4本は4本とも見出しを画像に焼いていた（WCAG 1.4.5違反）。 HTMLテキストで出す以上、順序を反転させるのが素直で、写真が差し替わっても コントラストが崩れない。左テキスト＋右モックアップの2列も作らない（禁止事項）。 ===================================================================== */ .hero__kicker{ font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0.04em; color: var(--accent); margin-bottom: var(--sp-3); } .hero__headline{ font-family: var(--font-head); font-size: var(--fs-h1); line-height: 1.4; letter-spacing: 0.01em; /* 大きい文字は少し詰める */ font-weight: 700; color: var(--on-surface); /* 全角16字で折り返す。実測の主コピーは11〜31字なので2〜3行に収まる。 字送り 0.01em は1字ごとに幅を足すので、器を 16em にすると 16字は 16.16em になって入らず、実際には**15字**で折り返していた。器にも字送りを足す。 実測 2026-09-05: PC1280 で 640px → 646.4px。16字が収まるようになる。 */ max-width: calc(16em + 16 * 0.01em); } /* 極小幅では見出しを1段小さくする。 .hero__headline の器は「画面幅 - 左右の余白」まで潰れる。341px 未満だと 文節ひとつ（11字前後）が2行目に収まらず、行末に1〜2字だけ残る形になる。 実測 2026-09-05: 境目は 333px（320px幅で 11字に 298.6px 必要／器は 288px）。 対象は iPhone SE 第1世代など 320px 端末。検査対象幅（390 / 1280）には当たらない。 */ @media (max-width: 340px){ .hero__headline{ font-size: 1.55rem; } /* 24.8px。11字 = 275.5px ≤ 288px */ } .hero__sub{ margin-top: var(--sp-5); font-size: var(--fs-lead); line-height: 1.8; color: var(--muted); max-width: var(--w-text); } .hero__ctas{ display: flex; flex-wrap: wrap; /* 既定で折り返す。字送り上書きで押し出されても崩れない */ gap: var(--sp-3); margin-top: var(--sp-7); } .hero__ctas .btn{ flex: 1 1 16rem; min-height: var(--btn-h-lg); } .hero__note{ margin-top: var(--sp-3); flex: 1 1 100%; } .hero__media{ margin-top: var(--sp-7); } .hero__media img{ width: 100%; border-radius: 0; } /* 写真に角丸を付けない */ .hero__media figcaption{ margin-top: var(--sp-2); } /* ===================================================================== 8. 内容の器 ===================================================================== */ /* --- 箇条書き ------------------------------------------------------- list-style:none にすると Safari の VoiceOver でリストの役割が落ちる。 ::marker を色付けするだけにして、リスト semantics を触らない。 （role="list" を書き戻す必要が無い＝レンダラ側の事故が減る） */ .stack{ list-style: disc; padding-inline-start: 1.4em; } .stack > li{ padding-inline-start: 0.2em; } .stack > li::marker{ color: var(--accent); } .sec--tone-accent .stack > li::marker{ color: var(--on-surface); } .stack > li + li{ margin-top: var(--sp-3); } /* --- 数字 ----------------------------------------------------------- **均等に並んだ大きい数字3つ** を作らない。先頭1つだけが主数値で、 残りは1段小さい行になる。「全部大きい＝全部読まれない」を構造で防ぐ。 */ .stats{ display: grid; gap: var(--sp-5); } .stat{ border-top: 2px solid var(--line); padding-top: var(--sp-4); } .stat__value{ font-size: var(--fs-num-s); line-height: var(--lh-tight); font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: var(--accent); } .stats > .stat:first-child .stat__value{ font-size: var(--fs-num); } .sec--tone-accent .stat__value{ color: var(--on-surface); } .stat__unit{ font-size: 0.5em; font-weight: 700; margin-inline-start: 0.2em; } .stat__label{ display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; } .stat__src{ display: block; margin-top: var(--sp-2); } /* --- カード --------------------------------------------------------- 箱にしない（枠・影・角丸を持たない）。上に罫線を1本引いた縦組みのブロック。 最大2列。**3列の器はこのファイルに存在しない。** 等高にもしない（align-items:start）。「同じ高さの箱が3つ並ぶ」がテンプレ感の中身。 */ .cards{ display: grid; gap: var(--gap-group); align-items: start; } .card{ border-top: 2px solid var(--line); padding-top: var(--sp-4); } .card__title{ font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-head); letter-spacing: var(--ls-head); font-weight: 700; color: var(--on-surface); } .card__body{ margin-top: var(--flow-tight); } .card__media{ margin-top: var(--sp-4); } .card__media img{ width: 100%; border-radius: 0; } /* --- 手順 ----------------------------------------------------------- 番号は見えるテキスト（.step__no）。CSS counter は読み上げに乗らないことがある。 .step__no を出す以上
    の marker とは二重になるので marker は消す。 → レンダラは
      と .step__no に aria-hidden を書くこと。 */ .steps{ list-style: none; padding: 0; display: grid; gap: 0; } .step{ position: relative; padding: 0 0 var(--sp-6) 3rem; } .step::before{ content: ""; position: absolute; inset-block: 2.2rem 0; inset-inline-start: 0.9rem; width: 2px; background: var(--line); } .step:last-child{ padding-bottom: 0; } .step:last-child::before{ display: none; } .step__no{ position: absolute; inset-block-start: 0; inset-inline-start: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; } .sec--tone-accent .step__no{ background: var(--accent-fg); color: var(--accent); } .step__title{ font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: 700; color: var(--on-surface); } .step__body{ margin-top: var(--sp-2); } /* --- 料金 ----------------------------------------------------------- 最大2列。3プランを横に並べて「真ん中がおすすめ」にする定型を作らない。 */ .plans{ display: grid; gap: var(--sp-5); align-items: start; } .plan{ border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); } .plan__name{ font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: 700; color: var(--on-surface); } .plan__price{ margin-top: var(--sp-2); font-size: var(--fs-num-s); line-height: var(--lh-tight); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); } .sec--tone-accent .plan__price{ color: var(--on-surface); } .plan__note{ margin-top: var(--sp-2); font-size: var(--fs-cap); color: var(--muted); } .plan__items{ margin-top: var(--sp-4); list-style: disc; padding-inline-start: 1.4em; font-size: var(--fs-sm); } .plan__items > li::marker{ color: var(--accent); } .plan__items > li + li{ margin-top: var(--sp-2); } /* --- 声 ------------------------------------------------------------- 丸い顔写真＋名前＋星の定型を作らない。契約に .voice__avatar が無いのは意図的。 */ .voices{ display: grid; gap: var(--sp-5); align-items: start; } .voice{ background: var(--accent-weak); border-radius: var(--radius); padding: var(--sp-5); } .sec--tone-accent .voice{ background: transparent; border: 1px solid var(--line); } .voice__body{ font-size: var(--fs-base); } .voice__who{ display: block; margin-top: var(--sp-3); } /* 所属・肩書き。レンダラは
      の中の span で出す */ .voice__attr{ display: block; margin-top: var(--sp-1); font-size: var(--fs-cap); line-height: 1.7; color: var(--muted); } /* --- FAQ ------------------------------------------------------------ ネイティブの
      。ARIA も JS も書かない（WCAG 4.1.2 を構造で満たす）。 */ .qa{ border-top: 1px solid var(--line); } .qa__item{ border-bottom: 1px solid var(--line); } .qa__q{ display: flex; align-items: flex-start; gap: var(--sp-4); min-height: var(--tap); padding-block: var(--sp-4); font-weight: 700; cursor: pointer; list-style: none; } .qa__q::-webkit-details-marker{ display: none; } .qa__q::after{ content: "＋"; margin-inline-start: auto; flex: none; color: var(--accent); font-weight: 700; } .sec--tone-accent .qa__q::after{ color: var(--on-surface); } .qa__item[open] > .qa__q::after{ content: "−"; } .qa__a{ padding-block: 0 var(--sp-5); } /* --- 定義リスト ----------------------------------------------------- 値が長い項目は ではなくこちら。
      を display:block で縦積みにすると 表の役割がアクセシビリティツリーから落ちる。 */ .deflist{ border-top: 1px solid var(--line); } .deflist > div{ display: grid; gap: var(--sp-1) var(--sp-5); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); } .deflist dt{ font-weight: 700; font-size: var(--fs-sm); color: var(--on-surface); } .deflist dd{ margin: 0; } /*
      の中の注記。レンダラは span で出す（
      直下でも

      を入れ子にしない方針のため） */ .deflist__note{ display: block; margin-top: var(--sp-1); font-size: var(--fs-cap); line-height: 1.7; color: var(--muted); } /* --- 表（richtext から来る素の

      用） ------------------------- 横スクロールさせない。狭い幅では列幅を固定して本文側を折る。 overflow-x:auto にすると、スマホでは表の右側に何かある事に気づかれない。 */ :where(.lp) :where(table){ table-layout: fixed; } :where(.lp) :where(th, td){ padding: var(--sp-3) var(--sp-2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); } :where(.lp) :where(th){ font-weight: 700; width: 34%; } /* ===================================================================== 8-2. レンダラが出すが初版に規則が無かったクラス src/render/sections.mjs / page.mjs の出力と突き合わせて洗い出した分。 規則が無いと「無指定で描画される」だけで、エラーにもコントラスト不足にもならず 静かに崩れる。**器を用意した以上、器の名前は全部ここで受ける。** ===================================================================== */ /* --- ヒーローの器（レンダラは
      の中に __text と __media を出す） --- */ /* 器そのものにも規則を置く。__text にだけ書いて .hero を書き忘れており、 クラス網羅の検査（audit/class_coverage.py）で「無指定1件」として出た唯一の残り。 flow-root は見た目を変えない代わりに、子の上下マージンが器の外へ抜けて セクションの余白（--sec-pt / --sec-pb）を食うのを止める。 overlay で先頭に来る .hero__media は margin-top を持つので、実際に抜ける形をしている。 */ .hero{ display: flow-root; } .hero__text{ display: block; } /* overlay:true のとき、レンダラは写真を先に出す。 **それでも文字は写真の上に載せない**（判断10）。純広告LP4本が見出しを画像に焼いていた のを真似ない、というのがこの土台の立場なので、overlay は「順序が入れ替わるだけ」に留める。 写真が差し替わってもコントラストが崩れない、が守れなくなるため。 */ .hero--overlay .hero__media{ margin-top: 0; margin-bottom: var(--sp-7); } /* --- セクション内のCTA群（.hero__ctas の非ヒーロー版） --- */ .sec__ctas{ display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--gap-group); } .sec__ctas .btn{ flex: 1 1 15rem; min-height: var(--btn-h-lg); } /* --- セクション末尾の注記・署名 --- */ .sec__note{ margin-top: var(--sp-5); font-size: var(--fs-cap); line-height: 1.7; color: var(--muted); } /* richtext の中で、表や本文のすぐ下に添える注釈。 帯の末尾に置く .sec__note と違って本文の一部なので、上の余白は狭くする。 出典・但し書きはここに入れる（G8「実績の数字に出典がある」の受け皿）。 */ .note{ margin-top: var(--sp-3); font-size: var(--fs-cap); line-height: 1.7; color: var(--muted); } .note:last-child{ margin-bottom: 0; } .sec__sign{ margin-top: var(--sp-6); font-weight: 700; } /* 右寄せにしない（中央・右揃えを持たない方針） */ /* --- 本文の器の変種 --- */ .sec__body--narrow{ max-width: 34rem; } /* 共感・メッセージ。読み幅をさらに詰める */ .sec__body--rich > * + *{ margin-top: var(--flow); } /* richtext。素の要素だけで組まれる */ /* --- 写真（figure + figcaption）。角丸は付けない --- */ .media{ display: block; } .media img{ width: 100%; border-radius: 0; } .media__cap{ margin-top: var(--sp-2); } .voice__media{ margin-top: var(--sp-4); } .voice__media img{ width: 100%; border-radius: 0; } /* --- 漫画 ------------------------------------------------------------ コマは縦1列。横に並べない。 2026-09-13 に漫画LP制作会社3社の自社LPを実測して決めた寸法: アイコミックス 51,573px(61画面) / シンフィールド 30,258px(36画面) / LP COMIC 12,701px(15画面) どれも縦に長すぎて読み切られない。そこで ① コマ幅は本文と同じ読み幅（--w-text）に収める。全幅に広げない ② コマ間の余白は --sp-5。詰めすぎると1枚の壁画に見え、開けすぎると話が切れる ③ 画像に角丸・影を付けない。紙の質感を足すと「テンプレっぽさ」が出る コマ間CTA(.manga__mid)は、漫画を読み切らせる前に出口を作るためのもの。 実測でシンフィールドは最初のCTAが2.7画面下にあり、そこまで到達しないと出口が無かった。 */ .manga{ max-width: var(--w-text); margin-inline: auto; } /* 狭い画面ではコマを端まで使う（フルブリード）。 本文に要る左右16pxのガターは、コマには要らない。漫画は元々ページを端まで使う。 これは見た目の好みではなく、可読性の計算から来ている: コマ内の文字の大きさは「画像幅に対する比」で決まる。ガターを外すと 表示幅が 358px → 390px になり、同じ絵でも文字が 9% 大きく出る。 必要比は 13/358 = 3.6% から 13/390 = 3.3% に下がる。 （13px は --fs-cap ＝ このCSSが決めている文字の下限。ここは動かさない） 生成側の scripts/panel_text_check.py も同じ 390px を前提に測ること。 */ @media (max-width: 640px){ .manga{ margin-inline: calc(var(--gutter) * -1); max-width: calc(100% + var(--gutter) * 2); } /* コマ間CTAとキャプションは本文の一部なので、ガターの中に戻す */ .manga__mid, .manga__cap{ margin-inline: var(--gutter); } } .manga__panel{ display: block; margin: 0; } .manga__panel + .manga__panel{ margin-top: var(--sp-5); } .manga__panel img{ width: 100%; height: auto; border-radius: 0; display: block; } .manga__cap{ margin-top: var(--sp-2); font-size: var(--fs-cap); line-height: 1.7; color: var(--muted); } /* コマとコマの間に差すCTA。上下を広めに空けて、コマの続きに見えないようにする */ .manga__mid{ margin-block: var(--sp-7); } .manga__mid .btn{ width: 100%; min-height: var(--btn-h-lg); } .manga + .sec__note{ max-width: var(--w-text); margin-inline: auto; } .manga__ctas{ margin-top: var(--sp-6); } /* 漫画の帯そのもの。コマの下端に絵の余白が入るので、帯の下側を標準より詰める。 詰めないと「コマの余白 + 帯の余白」が二重になって、次の見出しまでが間延びする。 */ .sec--manga{ --sec-pb: var(--sp-8); } /* FVに漫画を置くときのフルブリード。指定は lp.json の media.bleed:true。 .manga と同じ計算（358px → 390px で吹き出しの文字が9%大きく出る）。 */ @media (max-width: 640px){ .hero__media--bleed{ margin-inline: calc(var(--gutter) * -1); max-width: calc(100% + var(--gutter) * 2); } .hero__media--bleed figcaption{ margin-inline: var(--gutter); } } /* --- お知らせ --------------------------------------------------------