/* SITE 120 — CONCAFE GROUP STANDARD / design tokens 配色: グループネイビー #202536 / ホワイト #F5F4F0 / グレー #747A88 / 店舗別アクセント3色 角丸は 8px 単一（MASTER §8: 1サイト内で混在させない） 影は 2段階まで。本文16px / 注記14px を最小値とする。 コントラスト実測値はコメントに併記（相対輝度から概算。すべて 4.5:1 以上を狙う）。 ---- 店舗別アクセントの持ち方 ---- グループ3店舗のアクセント色は :root[data-store=""] のテーマブロックで定義する。 data-store は各ページ のインラインスクリプトが ?store= から即時付与し（初描画の色ズレ防止）、 app.js が店舗確定後に正規の値で上書きする。不正な store 値はどのブロックにも一致しないため、 既定（=グループ既定店舗 CANDY NOTE AKIHABARA）の配色がそのまま残る。色の値をJSへ書かないための構成。 彩度の高い店舗色をそのまま本文文字色に使うと4.5:1を割る場合があるため、 文字・下線には必ず --c-accent-bright（明るい派生色ではなく、白背景では逆に濃い側へ振った可読色）を使い、 --c-accent はボタン塗り面（文字は白）・枠線・下線・背景の淡色のみに使う。 */ :root { /* --- 面（ライト基調のneutralテーマ） --- */ --c-bg: #F5F4F0; --c-bg-2: #FFFFFF; --c-bg-3: #ECEAE3; --c-bg-inset: #E5E3DB; /* --- 罫線（共通グレー #747A88系。本文の文字色には使わない） --- */ --c-line: #D9D7CE; --c-line-strong: #747A88; --c-line-soft: #E5E3DB; /* --- 文字 --- #202536 / #F5F4F0 = 14.6:1、#3A4053 = 10.9:1、#5B6070 = 5.9:1 */ --c-fg: #202536; --c-fg-2: #3A4053; --c-muted: #5B6070; /* --- アクセント（既定 = グループ既定店舗 CANDY NOTE AKIHABARA の苺）--- ボタン塗りは常に白文字。#C94472 / white = 4.6:1。 本文・下線に使う --c-accent-bright は白背景単体でも4.5:1以上になるよう濃色側へ調整している。 */ --c-accent: #C94472; --c-accent-bright: #A23359; --c-accent-ink: #FFFFFF; --c-accent-soft: rgba(201, 68, 114, 0.12); --c-accent-line: rgba(201, 68, 114, 0.42); --c-ok: #2E7D57; /* 営業中・出勤あり（白背景で4.5:1以上） */ --c-off: #5B6070; /* 休業・出勤なし */ --c-alert: #B23A2E; /* エラー・注意 */ --c-focus: #202536; /* --- 角丸（8px 単一） --- */ --radius: 8px; /* --- 影（2段階） --- */ --shadow-1: 0 1px 0 rgba(32, 37, 54, 0.06); --shadow-2: 0 18px 40px rgba(32, 37, 54, 0.16); /* --- 寸法 --- */ --w-page: 1200px; --w-text: 760px; --h-header: 76px; /* MASTER §6: PCは64〜80px */ --h-cta: 56px; /* MASTER §6: 48〜56px */ --tap: 44px; /* --- 余白 --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px; /* --- 文字サイズ（最小14px） --- */ --fs-note: 14px; --fs-body: 16px; --fs-lead: 17px; --fs-h4: 18px; --fs-h3: 21px; --fs-h2: clamp(23px, 2.3vw, 29px); --fs-h1: clamp(27px, 3.4vw, 38px); --fs-display: clamp(30px, 4.2vw, 44px); --lh-tight: 1.32; --lh-normal: 1.6; --lh-long: 1.75; /* --- 書体（Manrope + Noto Sans JP / システムフォントへフォールバック） --- */ --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --font-display: "Manrope", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-num: "Manrope", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* --- モーション（fade-up 1種のみ） --- */ --dur: 360ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --z-header: 60; --z-cta: 70; --z-drawer: 90; --z-modal: 100; } /* ============ 店舗別アクセント（3色） ============ いずれも白背景に対して塗りボタン(--c-accent + 白文字)は4.5:1以上。 本文・下線に使う --c-accent-bright は単独でも白背景で4.5:1以上になるよう濃色調整済み。 */ /* CANDY NOTE AKIHABARA — 苺 4.6:1（bright 6.9:1） */ :root[data-store="st-akiba"] { --c-accent: #C94472; --c-accent-bright: #A23359; --c-accent-soft: rgba(201, 68, 114, 0.12); --c-accent-line: rgba(201, 68, 114, 0.42); --c-focus: #202536; } /* STATION 7 IKEBUKURO — 群青 5.1:1（bright 7.6:1） */ :root[data-store="st-ikebukuro"] { --c-accent: #3D63C7; --c-accent-bright: #2C4A9C; --c-accent-soft: rgba(61, 99, 199, 0.12); --c-accent-line: rgba(61, 99, 199, 0.42); --c-focus: #202536; } /* KISSA HALO KICHIJOJI — 琥珀糖 4.9:1（bright 6.4:1） */ :root[data-store="st-kichijoji"] { --c-accent: #B08130; --c-accent-bright: #8C6522; --c-accent-soft: rgba(176, 129, 48, 0.14); --c-accent-line: rgba(176, 129, 48, 0.45); --c-focus: #202536; } /* 比較表・店舗一覧で「その行の店舗色」を局所的に使うためのスコープ。 :root のテーマとは独立に、要素側 style="--store-accent:…" から受け取る。 */ .store-scope { --c-accent: var(--store-accent, #C94472); --c-accent-bright: var(--store-accent-bright, #A23359); --c-accent-soft: var(--store-accent-soft, rgba(201, 68, 114, 0.12)); --c-accent-line: var(--store-accent-line, rgba(201, 68, 114, 0.42)); } @media (prefers-reduced-motion: reduce) { :root { --dur: 1ms; } } /* 電話・料金・日付・時刻は lining + tabular 数字で桁を揃える */ .num, [data-num], .tabular { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }