/* ============================================================ SOPHIA淡路島 デザイントークン 「赤ワインとシャンパンゴールド」── 優美で品のある華やかさ ------------------------------------------------------------ 2026年8月31日 Kaori 決定 ------------------------------------------------------------ ★このファイルは淡路島専用に新規で書き起こしたものです。 大阪サイトの tokens.css をコピーしていません。 骨格（幅・余白・書体）の数値は、大阪で有効だった同じ基準を 採用していますが、色は完全に別のものです。 【色の規則】 ・使う色は4系統（地／文字／赤ワイン／藍）＋金の細い装飾 ・★① ファーストビューは「赤ワインを地に使う」セクションです 背景 #5E1420 → #7A1B27 → #9E2434（2026年8月31日 Kaori 決定） 装飾（eyebrow・40pxの線・ハンバーガー・ロゴの区切り線）は シャンパンゴールド #D3B583 CTA は 生成り塗り ＋ 赤ワイン文字 ＋ 赤ワイン1px枠 ・明るい地（生成り・霞）の上 → 赤ワイン #9E2434 ・暗い地（藍・最深部）の上 → シャンパンゴールド #D3B583 ・★金を明るい地に使わない（#D3B583 / 生成り = 1.74 で読めません） ・★赤ワインを暗い地の文字・線に使わない（#9E2434 / 藍 = 1.93 で沈みます） ・★金を大面積に塗らない。罫線・小さな装飾・CTAの枠のみ ・★赤ワインを暗く沈ませない（明度38%より暗い赤に置き換えない） ・例外はCTAだけ。暗い地に赤ワインの塗りを置き、金の枠で輪郭を確保する ・Webフォントは読み込まない（外部通信を発生させない） ============================================================ */ :root { /* --- 藍（暗い地）--------------------------------------- */ --c-ai: #1F2450; /* HSL 234/44/22 主色・暗いセクションの地 */ --c-ai-deep: #161334; /* HSL 245/46/14 最深部（①上端・⑭フッター） */ --c-ai-soft: #39406E; /* HSL 232/32/33 写真プレースホルダーの地 */ --c-yoi: #3A2A4E; /* HSL 267/30/24 宵。★2026年8月31日、①を赤ワインの地へ 見直したため、現在どこからも参照していません。 将来使う可能性を残すため、定義は残しています （2026年8月31日 Kaori 決定） */ /* --- 生成り・淡い中間色（明るい地）---------------------- */ --c-kinari: #F6F1E7; /* HSL 40/45/94 ベースの地 */ --c-kinari-lt: #FBF8F1; /* HSL 42/56/96 最明色・CTAの文字 */ --c-kasumi: #EADFCF; /* HSL 36/39/86 霞。第3の地（⑤の帯・⑩） */ --c-kinari-line: #E3D9C6; /* HSL 39/34/83 明るい地の上の細い罫線 */ /* --- 赤ワイン・シャンパンゴールド ----------------------- */ /* ★正式色。2026年8月31日 Kaori 決定。値を変更しません */ --c-wine: #9E2434; /* HSL 352/63/38 ★主役。①の地の到達色／明るい地の文字・線・番号 */ --c-champagne: #D3B583; /* HSL 38/48/67 ★細い装飾・枠のみ。塗り面を作らない */ /* ★①の背景をつなぐための、#9E2434 と同系統の濃淡（2026年8月31日 追加） */ --c-wine-deep: #7A1B27; /* HSL 352/64/29 ①グラデーションの中間（50%） */ --c-wine-deepest: #5E1420; /* HSL 350/65/22 ①グラデーションの上端（0%） */ --c-wine-line: rgba(158, 36, 52, 0.45); /* 明るい地の上の細線 */ --c-champagne-line: rgba(211, 181, 131, 0.50); /* 暗い地の上の細線 */ /* --- 文字 ---------------------------------------------- */ --c-ink: #221F1C; /* HSL 30/10/12 本文（純黒にしない・温かい墨） */ --c-ink-mute: #63594F; /* HSL 30/11/35 補助の文字 */ --c-on-ai: #F3EDE1; /* HSL 40/43/92 暗い地の上の文字 */ --c-on-ai-mute: rgba(243, 237, 225, 0.72); /* 暗い地の上の補助文字 */ --c-on-ai-lead: rgba(243, 237, 225, 0.78); /* ★①のリード文専用。 2026年8月31日、読みやすさを上げるため 0.72 → 0.78 に変更（Kaori 指示）。 他の要素に影響させないため専用にしています */ /* --- 書体（すべて端末のローカルフォント）---------------- */ --f-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", serif; --f-gothic: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", system-ui, sans-serif; --f-latin: "Times New Roman", "Georgia", serif; /* --- 骨格 ---------------------------------------------- */ --w-content: 1120px; /* コンテンツ最大幅 */ --w-text: 720px; /* 本文の最大幅（1行 40〜45文字） */ --gutter: 24px; /* --- 余白 ---------------------------------------------- */ --sp-section: 120px; /* セクション間の垂直余白 */ --sp-head: 32px; /* 見出し → 本文 */ --sp-cta: 44px; /* 本文 → CTA */ --sp-edge-sp: 20px; /* スマホの左右余白 */ /* --- 高さ ---------------------------------------------- */ --h-header: 88px; /* ヘッダー */ --h-header-sp: 56px; /* スマホヘッダー */ --h-fv: 78vh; /* PCファーストビュー（100vhにしない） */ --h-fv-sp: 72vh; /* スマホファーストビュー */ /* --- その他 -------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ============================================================ ★① 赤ワインの地における実測コントラスト （2026年8月31日 計算。要素が実際に乗る位置の地の色から算出） ------------------------------------------------------------ 背景 #5E1420 (0%) → #7A1B27 (50%) → #9E2434 (100%) ロゴ・ハンバーガー 金 / 地 #611521 ( 6%) .... 6.54 AA eyebrow 金 / 地 #6D1824 ( 27%) .... 5.93 AA 40pxの線 金 / 地 #6F1824 ( 31%) .... 5.84 AA h1 1行目 #F3EDE1 / 地 #741A26 ( 40%) .... 9.39 AAA h1 2行目 #F3EDE1 / 地 #7A1B27 ( 50%) .... 8.95 AAA リード文 (78%) / 地 #851E2B ( 65%) .... 5.48 AA CTA塗り #FBF8F1 / 地 #8C202E ( 75%) .... 8.39 AAA CTA文字 #9E2434 / 塗り #FBF8F1 ......... 7.18 AAA CTA枠 #9E2434 / 塗り #FBF8F1 ......... 7.18 AAA ★CTAの枠に金を使いません（金 / 生成り塗り = 1.85 で見えないため） ★eyebrow を #9E2434 の上に置きません（3.89 で不足するため） 上部を #5E1420〜#7A1B27 と濃くしているのは、金を成立させるためです ------------------------------------------------------------ その他の実測コントラスト ------------------------------------------------------------ 明地 赤ワイン #9E2434 / 生成り ............. 6.77 AA 明地 赤ワイン / 霞 ......................... 5.79 AA 明地 墨 #221F1C / 生成り（本文）............ 14.57 AAA 明地 補助 #63594F / 生成り ................. 6.07 AA 明地 見出しの藍 #1F2450 / 生成り ........... 13.08 AAA 暗地 金 #D3B583 / 藍 ....................... 7.51 AAA 暗地 金 / 最深部 ........................... 9.10 AAA 暗地 金 / 宵 ............................... 6.60 AA 暗地 金 / 淡い藍 ........................... 5.02 AA 暗地 文字 #F3EDE1 / 藍 ..................... 12.63 AAA 暗地 文字 / 最深部 ......................... 15.31 AAA 暗地 補助文字(72%) / 藍 .................... 7.25 AAA ★禁止の確認 金 #D3B583 / 生成り ........................ 1.74 不足（明るい地に金を使わない） 赤ワイン #9E2434 / 藍 ...................... 1.93 不足（暗い地に赤を使わない） ============================================================ */