/* ============================================================================= KinKoi 集客 LP — ベース（base.css） ----------------------------------------------------------------------------- 役割: リセット / 基本タイポグラフィ / アクセシビリティの土台（:focus-visible・reduced-motion・skip-link）/ レイアウト骨格（.shell・.rail・.lp-main・.container・.row-3）。コンポーネント固有のスタイルは components.css 側に置く。依存: tokens.css の :root カスタムプロパティ。方針: box-shadow を使わない。font-style: italic を使わない。レイアウト骨格の考え方（左パネル主役の 3 分割 + 中央スクロール）: - 左パネル / 右ナビは position:fixed で 100vh に貼り付け、スクロールしても動かない。 - 横の比率は「左パネル＞中央(468px) ＞右ナビ」（左が一番大きいブランド面）。左パネル幅 = 100vw − 中央 − 右（tokens.css の --lp-rail-left に集約）。 - 中央（.lp-main）は body 通常スクロール領域。固定幅 468px の単一カラム。左パネル幅ぶんの margin-left で中央だけが流れて見える（overflow ジャック無し = アクセシビリティ優先）。 - <1100px はレールを畳んで上部固定バー + 全画面オーバーレイメニューへ。 ============================================================================= */ /* --- リセット ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { /* CSS だけで滑らかなアンカースクロール（reduced-motion 時は下で無効化）。 */ scroll-behavior: smooth; /* アンカー着地オフセット。デスクトップは固定ヘッダーが無いので小さめ、 <1100px の上部固定バー分は下のメディアクエリで上書きする。 */ scroll-padding-top: 1.5rem; /* 自動文字拡大を抑止（横幅縮小時のレイアウト崩れ防止）。 */ text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); /* Latin は Roboto、日本語は Noto Sans JP にフォールバック（LP 限定の指定。 DESIGN.md / React アプリ側の font 指定は変更しない）。両フォントは各 HTML ので Google Fonts から 400/500/700(/800) を読み込む。 */ font-family: Roboto, "Noto Sans JP", sans-serif; font-size: 16px; line-height: var(--lp-line); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* 横スクロール（はみ出し）を物理的に禁止。レスポンシブ崩れの最終防波堤。 */ overflow-x: hidden; } img, picture, svg { display: block; max-width: 100%; } /* MEMO: イタリック全面禁止。em / i を使った場合の保険（要素自体は本文で使わない方針）。 */ em, i { font-style: normal; } a { /* 本文リンクは通常サイズ文字なので AA-normal を満たす --accent-strong を使う。 */ color: var(--accent-strong); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; font-size: 100%; } ul, ol { list-style: none; padding: 0; } /* --- 基本タイポグラフィ --------------------------------------------------- */ h1, h2, h3 { line-height: 1.25; font-weight: 800; letter-spacing: 0; /* 見出しの折返しバランスを整える（Baseline Newly: text-wrap）。非対応ブラウザは通常折返しに無視されるだけで安全。 */ text-wrap: balance; /* MEMO: 狭い単一カラムだと和文見出しが「ちょうどいい」を「ち／ょ…」のように小書き仮名や語中で割る。line-break:strict で禁則（行頭のゃゅょっ等を禁止）を厳格化し、word-break:auto-phrase で文節境界優先の改行にする（auto-phrase 未対応ブラウザは strict の通常改行にフォールバックするだけで安全）。 */ line-break: strict; word-break: auto-phrase; } p { /* 段落のはみ出し（孤立行）を抑える。非対応ブラウザは無視されるだけ。 */ text-wrap: pretty; } strong { font-weight: 700; color: var(--text); } /* --- アクセシビリティ ----------------------------------------------------- */ /* キーボード操作時のフォーカスリングを全 interactive 要素で明示。 */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* 暗背景セクション内のフォーカスは白リングで視認性を確保。 */ .is-inverse :focus-visible { outline-color: #fff; } /* キーボードユーザー向けスキップリンク（フォーカス時のみ可視）。 */ .skip-link { position: absolute; left: var(--space-element); top: -3rem; z-index: 200; padding: 10px 16px; background: var(--surface); color: var(--accent-strong); border: 1px solid var(--hairline); border-radius: var(--radius-btn); font-weight: 700; transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-element); text-decoration: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; /* 旧 clip: rect(...) ではなく非推奨でない clip-path を使う。 */ clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================================= レイアウト骨格（左右固定レール + 中央スクロール） ----------------------------------------------------------------------------- .shell : ページ全体のラッパ（左右レール + 中央を内包）。 .rail : 100vh に固定する縦レール（fixed）。--left / --right で左右指定。 .rail--left : ブランド面の左パネル（残り全部 = 主役。大型ロゴ + タグライン + CTA）。 .rail--right : 縦並びアンカーナビ専用の右レール（細め）。 .lp-main : 中央のスクロール本体。固定幅 468px・左パネル幅ぶんの margin-left。 .container : .lp-main 内のセクション幅（左右パディングのみ。配置は .lp-main）。 .row-3 : 価値 / STEP / 安心などのカード行。中央 468px では 1 カラム縦積み。 ============================================================================= */ .shell { /* レール自体は fixed なのでフローには出ない。中央の流れだけを司る。 */ position: relative; } /* --- 左右固定レール共通 --- */ .rail { position: fixed; top: 0; height: 100vh; /* 一部ブラウザの動的ツールバー対策（対応時は dvh で実 viewport に追従）。 */ height: 100dvh; z-index: 50; display: flex; flex-direction: column; background: var(--surface); overflow-y: auto; } .rail--left { left: 0; width: var(--lp-rail-left); /* 右端の hairline 罫で中央と仕切る（shadow を使わない区切り）。 */ border-right: 1px solid var(--hairline); } .rail--right { right: 0; width: var(--lp-rail-right); /* 左端の hairline 罫で中央と仕切る。 */ border-left: 1px solid var(--hairline); } /* --- 中央スクロール本体 --- 左パネル幅ぶんを margin-left で空け、自身は中央固定幅 468px。右ナビ(fixed)が最後を占めるので中央はちょうどその手前まで流れる。 */ .lp-main { margin-left: var(--lp-rail-left); width: var(--lp-center); min-width: 0; /* グリッド子のはみ出し防止 */ /* MEMO: 中央の見出しは vw ではなく中央幅(=cqi)で伸縮させる。中央は viewport と一致しない固定 468px のため、vw だと desktop で巨大化して 468px 列を溢れる。コンテナクエリ単位なら中央幅に追従し desktop / mobile 共通で破綻しない。 */ container-type: inline-size; container-name: lpmain; /* 中央スコープで見出しタイポを cqi（中央幅基準）へ差し替える。 tokens.css の vw 版は左パネル（viewport に追従して可）でそのまま使う。 custom property の再定義なので各 .section-title 等の規則は無改修で追従する。 */ --lp-fs-hero: clamp(1.75rem, 6.7cqi, 2.4rem); /* Hero h1（468px: 31px） */ --lp-fs-h2: clamp(1.4rem, 5.7cqi, 1.9rem); /* 見出し（468px: 27px） */ --lp-fs-h3: clamp(1.05rem, 4.3cqi, 1.3rem); /* カード見出し（468px: 20px） */ --lp-fs-lead: clamp(0.98rem, 3.8cqi, 1.15rem); /* リード文（468px: 18px） */ } /* セクション内の幅 + 左右パディング。中央は 468px 固定なので max-width は実質 468px 側で頭打ちになる。 */ .container { width: 100%; max-width: var(--lp-max); margin-inline: auto; padding-inline: var(--lp-pad-x); } /* カード行。中央 468px では 3-up は窮屈なため常に 1 カラム縦積み。実際のモバイルでも同じ単一カラムなので中央の中身 CSS はデスクトップ / モバイル共通。 */ .row-3 { display: grid; grid-template-columns: 1fr; gap: var(--lp-gap); } /* --- レスポンシブ（骨格） ------------------------------------------------- ≥1100px : 3 分割固定（左パネル最大 / 中央 468px / 右ナビ）（既定）。 <1100px : レールを畳み、上部固定バー + 中央全幅へ（components.css 側）。 MEMO: 中央の中身（.row-3 等）は単一カラムで desktop / mobile 共通のため、ここで切り替えるのは外側シェル（rails と topbar+overlay）だけ。 */ @media (max-width: 1099px) { /* アンカー着地が上部固定バーに隠れないようオフセットを確保。 */ html { scroll-padding-top: calc(var(--lp-topbar-h) + 0.75rem); } /* レールを畳む。ナビは .topbar + .nav-overlay へ移譲（components.css）。 */ .rail { display: none; } /* 中央は全幅。上部固定バーぶんを padding-top で確保。 */ .lp-main { margin-left: 0; width: 100%; padding-top: var(--lp-topbar-h); } } /* --- Reduce Motion -------------------------------------------------------- prefers-reduced-motion: reduce で全 transition / animation / smooth scroll を停止する（WCAG 2.2 / 前庭障害への配慮）。 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }