/* ============================================================ 藍と月（架空案件） デザイントークン（数値の正本） ⚠️ このファイルが唯一の正本。 - HTML / CSS に色コード（#xxxxxx）や px を直接書かない。必ず var() を使う - 値を変えるときはここだけを直す - 設計意図は docs/01_設計書/06_デザイン要件/00_共通/ スマホの値は下部のメディアクエリで同じ変数名を上書きしている。 使う側は var(--text-h1) と書くだけでよく、要素ごとに @media を書かない。 ──────────────────────────────────────────── 【新規案件でやること】 ★ が付いた色だけを案件に合わせて変える。**それ以外は触らない。** 文字サイズ・余白・角丸・影・重なり・動きは実証済みの値なので、 変えると「最低限の品質」の土台が崩れる。 色を決めたら必ずコントラスト比を確認する（https://colord.omgovich.ru/）。 ──────────────────────────────────────────── ============================================================ */ :root { /* ---------- 色：土台（★ここだけ案件ごとに変える） ---------- */ --color-main: #1C2B4A; /* ★メイン。見出し・ロゴ・濃い背景 */ --color-sub: #4A5F86; /* ★サブ。補助・アイコン。メインの明度違いが無難 */ --color-accent: #B08D4F; /* ★アクセント。1画面1〜2か所まで */ --color-cta: #06C755; /* ★CTA。ボタン専用。他の用途に使わない */ --color-bg: #FFFFFF; --color-bg-alt: #EFF1F6; /* セクションを区切る薄い背景。bgとの比1.15:1前後を保つ（1.10以下だと切り替えが見えない） */ --color-text: #171C26; --color-text-mute: #59616F; /* 注釈・キャプション */ --color-border: #DDE1EA; /* ---------- 色：その背景に載せる文字色（必ず対で使う） ---------- 背景に --color-X を使ったら、文字は --color-on-X を使う。 この対応を守ればコントラスト不足が起きない。 */ --color-on-main: #FFFFFF; /* ★メイン背景の上 */ --color-on-cta: #111111; /* ★CTAの上。明るいCTA色に白文字は不適合になりやすい */ --color-on-accent: #1C2B4A; /* ★アクセントの上 */ --color-on-bg: #171C26; /* 白・薄グレー背景の上 */ /* ---------- 強調（文中の重要語だけを目立たせる） ---------- 参考LP3サイトすべてが使っている技法。 ・マーカー ＝ 文字の下半分に色を敷く（ソロジム方式） ・文中強調 ＝ 重要語だけ色を変える（Wisbit方式） 使いすぎると効かない。1セクションに1箇所まで。 */ --marker-h: 38%; /* 下から何％を塗るか */ --marker-light: color-mix(in srgb, var(--color-accent) 30%, transparent); --marker-dark: color-mix(in srgb, var(--color-accent) 55%, transparent); --em-color: var(--color-accent); /* 明るい背景での文中強調 */ --em-color-on-main: var(--color-accent); /* 濃色背景での文中強調 */ /* ---------- 装飾レイヤー ---------- 参考LP（Wisbit／ソロジム）が全セクションで持っていた層。 これがないと「整っているが退屈」になる。 設計意図は 06_デザイン要件/00_共通/06_構図の割り当て.md */ /* セクションラベル（見出しの上の小さなチップ） */ --label-color: var(--color-sub); --label-size: 12px; --label-track: .14em; /* 英字ラベルは字間を開けて締める */ /* 背景の装飾図形。本文の可読性を落とさない濃度に固定する */ --decor-light: color-mix(in srgb, var(--color-sub) 7%, transparent); --decor-dark: color-mix(in srgb, var(--color-on-main) 8%, transparent); /* カード内のラベルバッジ */ --badge-bg: color-mix(in srgb, var(--color-sub) 12%, transparent); --badge-color: var(--color-sub); /* 濃色背景の上での不透明度違い（FV・CTAで使う） */ --color-on-main-body: rgba(255,255,255,.90); --color-on-main-mute: rgba(255,255,255,.70); --color-on-main-line: rgba(255,255,255,.40); /* ---------- フォント ---------- */ --font-base: 'Noto Sans JP', sans-serif; --font-display: 'Shippori Mincho', 'Noto Serif JP', serif; /* ★見出し書体。案件のアートディレクションで決める（明朝など）。迷ったら本文と同じ */ --font-num: 'Inter', sans-serif; /* 料金・実績の数字。締まって見える */ --weight-bold: 700; /* 見出し */ --weight-medium: 500; /* 強調 */ --weight-regular: 400; /* 本文 */ --weight-num: 700; /* ---------- 文字サイズ（PC。スマホは下部で上書き） ---------- ジャンプ率（最大÷本文）= 60/16 = 3.75倍。基準は3.5倍以上。 参考LP実測：ソロジム5.5倍／Wisbit4.1倍／JR ICOCA3.8倍。 低いとメリハリが出ない。詳細は 90_資料/01_docs/claude-setup/LP参考サイトの実測分析_2026-08-07.md */ --text-h1: 60px; /* FVキャッチ。1行10文字前後が入る上限（列幅665pxで実測） */ --text-h2: 36px; /* セクション見出し */ --text-h2-sm: 30px; /* 見出しが長いセクション（06 / 10 / 12） */ --text-h3: 22px; /* 小見出し */ --text-card: 20px; /* カード内の見出し */ --text-lead: 18px; /* リード文・強調した本文 */ --text-body: 16px; --text-sm: 15px; /* カード本文・表のセル */ --text-note: 13px; /* 注釈 */ --text-button: 17px; --text-quote: 26px; /* 締めの一文。本文と同化しないよう h3 より上に置く */ /* 数字（Inter を当てる場所） */ --text-num-xl: 64px; /* 実績の数字。ここも「見せ場」として大きくする */ --text-num-lg: 40px; /* 料金 */ --text-num-md: 32px; /* ノウハウの番号 */ --leading-body: 1.8; --leading-heading: 1.4; --tracking-heading: -0.01em; --tracking-body: 0; /* ---------- 余白（PC。スマホは下部で上書き） ---------- */ --space-section: 96px; /* セクション上下padding */ --space-group: 48px; /* まとまり同士の間 */ --space-h2-body: 40px; /* h2 と中身の間 */ --space-block: 32px; /* 要素間 */ --space-heading: 24px; /* 見出しと本文の間 */ --space-card-gap: 24px; --space-side: 24px; /* 左右余白 */ --space-inner: 20px; /* 部品の内側 */ --space-tight: 12px; /* 詰めた間隔 */ --space-hair: 8px; /* 最小の間隔 */ --max-width: 1120px; --header-h: 64px; /* セクションごとの読みやすい最大幅 */ --max-w-narrow: 800px; /* 03 / 12（写真なし） */ --max-w-mid: 880px; /* 13 / 14 */ --max-w-cta: 720px; /* 15 */ /* セクション上下paddingの例外（既定を使わない4箇所だけ） */ --space-section-fv: 120px; --space-section-wide: 128px; /* 転換点（中央宣言など）。緩急を作る */ --space-section-cta: 100px; --space-section-footer: 40px; /* ---------- 角丸 ---------- */ --radius-card: 12px; /* カード・画像 */ --radius-box: 16px; /* 料金プラン・特典枠などの大きい囲み */ --radius-pill: 999px; /* ボタン・タグ・バッジ */ /* ---------- 部品の寸法 ---------- */ --card-pad: 32px; --btn-pad: 18px 40px; /* PC。スマホは幅100% + 高さ指定 */ --btn-h-sp: 56px; --stickybar-h: 64px; --icon-head: 24px; /* カード内の見出し横 */ --icon-list: 20px; /* リスト行頭 */ --icon-badge: 40px; /* 数字バッジ（丸） */ --tap-min: 44px; /* タップ領域の下限（これ以下にしない） */ --tag-pad: 5px 14px;/* タグ・バッジの内側 */ --btn-pad-lg: 20px 56px; /* CTAセクションの大きいボタン */ --table-head-h: 56px; /* 比較表のヘッダ行 */ --table-min-w: 560px; /* 比較表の最小幅（これ以下だと文字が潰れる） */ --rule-w: 60px; /* 短い区切り線 */ --stickybar-clear: 72px; /* 追従バーに隠れないための逃げ */ --overlap: 88px; /* 構図Iの重なり量。60〜100pxの範囲を守る */ /* ---------- 影（使う場所を限定する） ---------- カードは影を使わず枠線で表す。影はCTAと浮遊要素だけ。 */ --shadow-cta: 0 6px 16px rgba(0,0,0,.14); --shadow-cta-hover: 0 10px 22px rgba(0,0,0,.18); --shadow-bar: 0 -2px 12px rgba(0,0,0,.08); /* スマホ追従バー */ /* ---------- 重なり順（この序列以外を作らない） ---------- 部品の内側での前後関係（背景画像・かぶせる膜・持ち上げ）も 直書きせずここから取る。isolation:isolate の中でだけ効く。 */ --z-bg: -2; /* 部品の背景画像 */ --z-overlay: -1; /* 背景に重ねる膜（グラデーション等） */ --z-raise: 1; /* 同じ階層内で前に出す（重なり構図のカード） */ --z-base: 0; --z-header: 100; --z-sticky: 200; /* スマホ追従CTA。ヘッダーより上 */ --z-modal: 300; /* ---------- 動き ---------- 動かすのは「触れたものの反応」だけ。スクロール演出は入れない。 */ --motion-fast: 150ms; /* ホバー・フォーカス */ --motion-base: 250ms; /* 開閉（FAQアコーディオン） */ --ease-out: cubic-bezier(.2,.8,.2,1); /* ---------- フォーカスリング（キーボード操作。必ず付ける） ---------- */ --focus-color: var(--color-sub); /* ★に追従する */ --focus-width: 3px; --focus-offset: 2px; } /* ============================================================ タブレット（768〜1023px） スマホの指定を引き継ぎ、左右余白だけ広げる。個別指定は作らない。 ============================================================ */ @media (max-width: 1023px) { :root { --space-side: 32px; } } /* ============================================================ スマホ（767px以下）— 同じ変数名を上書きする ============================================================ */ @media (max-width: 767px) { :root { --text-h1: 34px; --text-h2: 25px; --text-h2-sm: 22px; --text-h3: 18px; --text-card: 18px; --text-lead: 16px; --text-body: 15px; --text-sm: 14px; --text-note: 12px; --text-button: 16px; --text-quote: 20px; --text-num-xl: 40px; --text-num-lg: 32px; --text-num-md: 26px; --space-section: 56px; --space-group: 32px; --space-h2-body: 28px; --space-block: 24px; --space-heading: 16px; --space-card-gap: 16px; --space-side: 20px; --space-inner: 16px; --space-section-fv: 80px; --space-section-wide: 72px; --space-section-cta: 64px; --space-section-footer: 32px; --card-pad: 24px; --icon-badge: 32px; } } /* ============================================================ 全要素共通のフォーカス表示 マウス操作では出さず、キーボード操作のときだけ出す。 ============================================================ */ :focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: 2px; } /* 濃色背景（FV・CTA）の中では白いリングにしないと見えない */ .on-dark :focus-visible { outline-color: var(--color-on-main); } /* ============================================================ 動きを減らす設定にしている人への配慮（必須） ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }