/* SITE 80 — HOST GROUP STANDARD / design tokens 配色: グループ黒 #14161C / ホワイト #F4F4F2 / 共通グレー #68707C / 店舗別アクセント4色 角丸は 0px 単一（MASTER §8: 1サイト内で混在させない。SITE 67 の 8px / SITE 76 の 4px とは別値） 影は 2段階まで。本文16px / 注記14px を最小値とする。 コントラスト実測値はコメントに併記（すべて 4.5:1 以上）。 ---- 店舗別アクセントの持ち方 ---- グループ4店舗のアクセント色は :root[data-store=""] のテーマブロックで定義する。 data-store は各ページ のインラインスクリプトが ?store= から即時付与し（初描画の色ズレ防止）、 app.js が店舗確定後に正規の値で上書きする。不正な store 値はどのブロックにも一致しないため、 既定（=グループ既定店舗）の配色がそのまま残る。色の値をJSへ書かないための構成。 */ :root { /* --- 面 --- */ --c-bg: #14161C; --c-bg-2: #1A1D25; --c-bg-3: #21252F; --c-bg-inset: #0E1015; /* --- 罫線（共通グレー #68707C 系。本文の文字色には使わない） --- */ --c-line: #262B35; --c-line-strong: #68707C; --c-line-soft: #1F232B; /* --- 文字 --- #F4F4F2 / #14161C = 16.4:1、#C9CDD4 = 11.2:1、#939AA5 = 6.3:1 */ --c-fg: #F4F4F2; --c-fg-2: #C9CDD4; --c-muted: #939AA5; /* --- アクセント（既定 = グループ既定店舗 AXIS GINZA のゴールド）--- #C8A24C / #14161C = 7.5:1、#DCBA6A / #14161C = 9.9:1 塗りボタンの文字は --c-accent-ink（墨色）。#14161C / #C8A24C = 7.5:1 */ --c-accent: #C8A24C; --c-accent-bright: #DCBA6A; --c-accent-ink: #14161C; --c-accent-soft: rgba(200, 162, 76, 0.15); --c-accent-line: rgba(200, 162, 76, 0.48); --c-ok: #6FC79B; /* 営業中・出勤あり（9.0:1） */ --c-off: #939AA5; /* 休業・出勤なし */ --c-alert: #F09182; /* エラー・注意（8.0:1） */ --c-focus: #DCBA6A; /* --- 角丸（0px 単一） --- */ --radius: 0px; /* --- 影（2段階） --- */ --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.6); --shadow-2: 0 18px 40px rgba(0, 0, 0, 0.62); /* --- 寸法 --- */ --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.4vw, 46px); --lh-tight: 1.32; --lh-normal: 1.6; --lh-long: 1.75; /* --- 書体（Montserrat + Noto Sans JP / システムフォントへフォールバック） --- */ --font-base: "Montserrat", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --font-num: "Montserrat", -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; } /* ============ 店舗別アクセント（4色） ============ いずれも背景 #14161C に対して 4.5:1 以上。塗り面の文字は墨色 #14161C を使う。 */ /* AXIS GINZA — ゴールド 7.5:1 */ :root[data-store="st-ginza"] { --c-accent: #C8A24C; --c-accent-bright: #DCBA6A; --c-accent-soft: rgba(200, 162, 76, 0.15); --c-accent-line: rgba(200, 162, 76, 0.48); --c-focus: #DCBA6A; } /* AXIS SHINJUKU — コーラル 5.4:1 */ :root[data-store="st-shinjuku"] { --c-accent: #E2685A; --c-accent-bright: #F08C80; --c-accent-soft: rgba(226, 104, 90, 0.16); --c-accent-line: rgba(226, 104, 90, 0.5); --c-focus: #F08C80; } /* AXIS YOKOHAMA — ブルー 6.8:1 */ :root[data-store="st-yokohama"] { --c-accent: #4FA3E3; --c-accent-bright: #7CBDEC; --c-accent-soft: rgba(79, 163, 227, 0.16); --c-accent-line: rgba(79, 163, 227, 0.5); --c-focus: #7CBDEC; } /* AXIS OMIYA — グリーン 8.0:1 */ :root[data-store="st-omiya"] { --c-accent: #57BE93; --c-accent-bright: #84D3B1; --c-accent-soft: rgba(87, 190, 147, 0.16); --c-accent-line: rgba(87, 190, 147, 0.5); --c-focus: #84D3B1; } /* 比較表・店舗一覧で「その行の店舗色」を局所的に使うためのスコープ。 :root のテーマとは独立に、要素側 style="--store-accent:…" から受け取る。 */ .store-scope { --c-accent: var(--store-accent, #C8A24C); --c-accent-bright: var(--store-accent-bright, #DCBA6A); --c-accent-soft: var(--store-accent-soft, rgba(200, 162, 76, 0.15)); --c-accent-line: var(--store-accent-line, rgba(200, 162, 76, 0.48)); } @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; }