/* SITE 105 — SNACK GROUP STANDARD / design tokens 配色: ネイビー #192231 / アイボリー #F1E8D8 / グレー #747C87 / 店舗別アクセント3色 角丸は 4px 単一（MASTER §8: 1サイト内で混在させない。SITE 80 の 0px / SITE 104 の丸め書体前提とは別値） 影は 2段階まで。本文16px / 注記14px を最小値とする。 コントラスト実測値はコメントに併記（相対輝度から概算。すべて 4.5:1 以上を狙う）。 ---- 店舗別アクセントの持ち方 ---- グループ3店舗のアクセント色は :root[data-store=""] のテーマブロックで定義する。 data-store は各ページ のインラインスクリプトが ?store= から即時付与し（初描画の色ズレ防止）、 app.js が店舗確定後に正規の値で上書きする。不正な store 値はどのブロックにも一致しないため、 既定（=グループ既定店舗 AKARI UENO）の配色がそのまま残る。色の値をJSへ書かないための構成。 彩度の高い店舗色（錦糸町の紅）はそのままだと本文文字色に使うと4.5:1を割るため、 文字・下線には必ず --c-accent-bright（明るい派生色）を使い、--c-accent は ボタン塗り面（文字は墨=--c-accent-ink）・枠線・下線・背景の淡色のみに使う。 */ :root { /* --- 面 --- */ --c-bg: #192231; --c-bg-2: #202B3D; --c-bg-3: #283349; --c-bg-inset: #121A26; /* --- 罫線（共通グレー #747C87。本文の文字色には使わない） --- */ --c-line: #2C3A4E; --c-line-strong: #747C87; --c-line-soft: #212B3C; /* --- 文字 --- #F1E8D8 / #192231 = 13.1:1、#D8DEE6 = 11.8:1、#9BA3AC = 6.3:1 */ --c-fg: #F1E8D8; --c-fg-2: #D8DEE6; --c-muted: #9BA3AC; /* --- アクセント（既定 = グループ既定店舗 AKARI UENO の琥珀）--- #C9A24A / #192231 = 6.7:1、#DDBA6C / #192231 = 8.6:1 塗りボタンの文字は --c-accent-ink（墨色）。#192231 / #C9A24A = 6.7:1 */ --c-accent: #C9A24A; --c-accent-bright: #DDBA6C; --c-accent-ink: #192231; --c-accent-soft: rgba(201, 162, 74, 0.16); --c-accent-line: rgba(201, 162, 74, 0.5); --c-ok: #7FC9A6; /* 営業中・出勤あり */ --c-off: #9BA3AC; /* 休業・出勤なし */ --c-alert: #EE988A; /* エラー・注意 */ --c-focus: #DDBA6C; /* --- 角丸（4px 単一） --- */ --radius: 4px; /* --- 影（2段階） --- */ --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.5); --shadow-2: 0 18px 40px rgba(0, 0, 0, 0.55); /* --- 寸法 --- */ --w-page: 1200px; --w-text: 760px; --h-header: 72px; /* 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.34; --lh-normal: 1.6; --lh-long: 1.75; /* --- 書体（Noto Sans JP 単一 / システムフォントへフォールバック） --- */ --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --font-num: "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色） ============ いずれも背景 #192231 に対して塗りボタン(--c-accent + --c-accent-ink)は4.5:1以上。 本文・下線に使う --c-accent-bright も単独で4.5:1以上になるよう調整済み。 */ /* AKARI UENO — 琥珀 6.7:1（bright 8.6:1） */ :root[data-store="st-ueno"] { --c-accent: #C9A24A; --c-accent-bright: #DDBA6C; --c-accent-soft: rgba(201, 162, 74, 0.16); --c-accent-line: rgba(201, 162, 74, 0.5); --c-focus: #DDBA6C; } /* AKARI KINSHICHO — 紅 4.9:1（bright 5.2:1。文字には必ず bright を使う） */ :root[data-store="st-kinshicho"] { --c-accent: #B5566B; --c-accent-bright: #CC7C8E; --c-accent-soft: rgba(181, 86, 107, 0.16); --c-accent-line: rgba(181, 86, 107, 0.5); --c-focus: #CC7C8E; } /* AKARI KAMATA — 翠 4.9:1（bright 6.9:1） */ :root[data-store="st-kamata"] { --c-accent: #4E9C88; --c-accent-bright: #78BBA9; --c-accent-soft: rgba(78, 156, 136, 0.16); --c-accent-line: rgba(78, 156, 136, 0.5); --c-focus: #78BBA9; } /* 比較表・店舗一覧で「その行の店舗色」を局所的に使うためのスコープ。 :root のテーマとは独立に、要素側 style="--store-accent:…" から受け取る。 */ .store-scope { --c-accent: var(--store-accent, #C9A24A); --c-accent-bright: var(--store-accent-bright, #DDBA6C); --c-accent-soft: var(--store-accent-soft, rgba(201, 162, 74, 0.16)); --c-accent-line: var(--store-accent-line, rgba(201, 162, 74, 0.5)); } @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; }