/* SITE 93 — CABARET GROUP STANDARD / design tokens 配色: グループ黒 #17181C / ホワイト #F4F3EF / グレー #747B86 / 店舗別アクセント5色 書体: Manrope + Noto Sans JP（システムフォントへフォールバック） 角丸は 4px 単一（MASTER §8: 1サイト内で混在させない。SITE 80 の 0px とは別値） 影は2段階まで。本文16px / 注記14px を最小値とする。 コントラストは実測値をコメントに併記（すべて 4.5:1 以上）。 ---- 店舗別アクセントの持ち方 ---- 5店舗のアクセント色は :root[data-store=""] のテーマブロックで定義する。 data-store は各ページ のインラインスクリプトが ?store= から即時付与し（初描画の色ズレ防止）、 app.js が店舗確定後に正規の値で上書きする。不正な store 値はどのブロックにも一致しないため、 既定（= グループ既定店舗）の配色がそのまま残る。色の値をJSへ書かないための構成。 */ :root { /* --- 面 --- */ --c-bg: #17181C; --c-bg-2: #1D1F24; --c-bg-3: #24272E; --c-bg-inset: #101115; /* --- 罫線（共通グレー #747B86 系。本文の文字色には使わない） --- */ --c-line: #2A2E36; --c-line-strong: #747B86; --c-line-soft: #23262D; /* --- 文字 --- #F4F3EF / #17181C = 16.6:1、#CFCEC8 = 11.6:1、#9AA0A9 = 7.0:1 */ --c-fg: #F4F3EF; --c-fg-2: #CFCEC8; --c-muted: #9AA0A9; /* --- アクセント（既定 = グループ既定店舗 CLUB VERENA のシャンパンゴールド）--- #C9A961 / #17181C = 8.1:1、#DCC28A = 10.9:1 塗りボタンの文字は --c-accent-ink（墨色）。#17181C / #C9A961 = 8.1:1 */ --c-accent: #C9A961; --c-accent-bright: #DCC28A; --c-accent-ink: #17181C; --c-accent-soft: rgba(201, 169, 97, 0.15); --c-accent-line: rgba(201, 169, 97, 0.48); --c-ok: #6FC79B; /* 営業中・出勤あり（9.0:1） */ --c-off: #9AA0A9; /* 休業・出勤なし */ --c-alert: #F09182; /* エラー・注意（8.0:1） */ --c-focus: #DCC28A; /* --- 角丸（4px 単一） --- */ --radius: 4px; /* --- 影（2段階） --- */ --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.55); --shadow-2: 0 20px 44px rgba(0, 0, 0, 0.6); /* --- 寸法 --- */ --w-page: 1120px; /* MASTER §7: PC標準幅。UI必須: ヘッダーが1120pxに収まること */ --w-text: 740px; --h-header: 68px; /* MASTER §6: PCは64〜80px */ --h-cta: 54px; /* 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(22px, 2.2vw, 28px); --fs-h1: clamp(26px, 3.2vw, 36px); --fs-display: clamp(29px, 4.2vw, 44px); --lh-tight: 1.34; --lh-normal: 1.6; --lh-long: 1.75; /* --- 書体（Manrope + Noto Sans JP / システムフォントへフォールバック） --- */ --font-base: "Manrope", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --font-num: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* --- モーション（fade-up 1種のみ） --- */ --dur: 340ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --z-header: 60; --z-cta: 70; --z-drawer: 90; --z-modal: 100; } /* ============ 店舗別アクセント（5色） ============ いずれも背景 #17181C に対して 4.5:1 以上。塗り面の文字は墨色 #17181C を使う。 */ /* CLUB VERENA — シャンパンゴールド 8.1:1 */ :root[data-store="st-verena"] { --c-accent: #C9A961; --c-accent-bright: #DCC28A; --c-accent-soft: rgba(201, 169, 97, 0.15); --c-accent-line: rgba(201, 169, 97, 0.48); --c-focus: #DCC28A; } /* CLUB NOELA — ローズ 6.4:1 */ :root[data-store="st-noela"] { --c-accent: #E0798C; --c-accent-bright: #EE9EAC; --c-accent-soft: rgba(224, 121, 140, 0.16); --c-accent-line: rgba(224, 121, 140, 0.5); --c-focus: #EE9EAC; } /* CLUB AMIE — スカイ 7.1:1 */ :root[data-store="st-amie"] { --c-accent: #58A9DE; --c-accent-bright: #86C3EA; --c-accent-soft: rgba(88, 169, 222, 0.16); --c-accent-line: rgba(88, 169, 222, 0.5); --c-focus: #86C3EA; } /* CLUB SUIREN — ミント 8.2:1 */ :root[data-store="st-suiren"] { --c-accent: #5CBF9B; --c-accent-bright: #8AD4B8; --c-accent-soft: rgba(92, 191, 155, 0.16); --c-accent-line: rgba(92, 191, 155, 0.5); --c-focus: #8AD4B8; } /* CLUB MIRTE — ラベンダー 7.4:1 */ :root[data-store="st-mirte"] { --c-accent: #A594E0; --c-accent-bright: #C0B4EB; --c-accent-soft: rgba(165, 148, 224, 0.16); --c-accent-line: rgba(165, 148, 224, 0.5); --c-focus: #C0B4EB; } /* 比較表・店舗一覧で「その行の店舗色」を局所的に使うためのスコープ。 :root のテーマとは独立に、要素側 style="--store-accent:…" から受け取る。 */ .store-scope { --c-accent: var(--store-accent, #C9A961); --c-accent-bright: var(--store-accent-bright, #DCC28A); --c-accent-soft: var(--store-accent-soft, rgba(201, 169, 97, 0.15)); --c-accent-line: var(--store-accent-line, rgba(201, 169, 97, 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; }