/* ============================================================ Yojo+ — Design tokens すべての色・寸法・タイポはここで定義。各CSSはこの変数のみを参照します。 ブランドカラーはパンフレット実データから抽出した値です。 ============================================================ */ :root { /* ---- Color : ink (black field) ---- */ --c-ink-900: #000000; --c-ink-850: #050505; --c-ink-800: #0A0908; --c-ink-700: #12100D; --c-ink-600: #1A1713; --c-ink-500: #241F19; --c-ink-400: #322B22; /* ---- Color : gold (extracted from the brochure foil) ---- */ --c-gold-100: #F2E3BE; --c-gold-200: #E3C88A; --c-gold-300: #D3B173; --c-gold-400: #C6A15B; /* primary gold */ --c-gold-450: #B8934D; /* 400 と 500 の中間。箔の濃淡を浅くするために追加 */ --c-gold-500: #A9853F; --c-gold-600: #7E6029; /* ---- Color : paper / type ---- */ --c-paper: #F4F1EA; --c-paper-dim: #CFC9BC; --c-paper-mute: #8F8878; --c-paper-faint:#5A5548; /* ---- Semantic ---- */ --bg: var(--c-ink-900); /* ★ --raised は従来 #0A0908 で、真っ黒との差がほぼ無く段差として機能して いませんでした。金味を足して「一段明るい面」だと分かる値にしています。 */ --bg-raised: #0D0B07; --bg-panel: var(--c-ink-700); --fg: var(--c-paper); --fg-dim: var(--c-paper-dim); --fg-mute: var(--c-paper-mute); --accent: var(--c-gold-400); --accent-bright: var(--c-gold-200); --line: rgba(198,161,91,.22); --line-soft: rgba(244,241,234,.10); --line-hard: rgba(198,161,91,.45); --focus-ring: 2px solid var(--c-gold-200); /* ---- 箔（foil）: 面としてのゴールド ---------------------------------- 製品のロゴは箔押しです。箔は単色ではなく、光の向きに沿って濃淡が出ます。 ベタ塗りの金は安く見えるため、面に使う金はすべてこのグラデーションを通します。 角度は 100deg（やや右下がり）。チューブの箔の光り方に合わせています。 */ /* ★ 明暗差は控えめに。かつて最明部に gold-100（#F2E3BE）を置いていましたが、 帯の中で光りすぎて安く見えました。最明部は gold-300 までに留めます。 */ --foil: linear-gradient(100deg, var(--c-gold-500) 0%, var(--c-gold-400) 18%, var(--c-gold-300) 46%, var(--c-gold-400) 74%, var(--c-gold-500) 100%); /* 広い面に敷く箔。★ 下限を gold-500 までに留めてあります。 gold-600（#7E6029）まで落とすと、その上の黒文字でも 3.6:1 しか取れず 小さい文字が WCAG AA（4.5:1）を割ります。暗い側を切り上げて、 面のどこに文字が来ても読める箔にしています。 */ --foil-deep: linear-gradient(100deg, var(--c-gold-500) 0%, var(--c-gold-450) 22%, var(--c-gold-400) 50%, var(--c-gold-450) 78%, var(--c-gold-500) 100%); /* 箔の上に載せる文字色。金地には墨が最も読みやすい。 不透明度は「箔の最暗部（#A9853F）でも 4.5:1 以上」を基準に決めています。 .58 では 3.16:1 しか出ず不足でした。 */ --on-gold: var(--c-ink-900); /* 5.93:1 */ --on-gold-dim: rgba(5, 5, 5, .86); /* 5.19:1 */ --on-gold-mute: rgba(5, 5, 5, .78); /* 4.63:1 — ここが下限 */ --on-gold-line: rgba(5, 5, 5, .26); /* ---- 暖色の黒（差し色の「淡」側）-------------------------------------- 真っ黒のままだと全体が沈むので、金を落とした黒を段階で持ちます。 数値は --c-ink 系に金味を足したもので、並べても色ムラに見えない範囲です。 */ --bg-warm: #16120A; --bg-warm-lift: #1D170D; /* 面の奥から金が滲む効果。section--warm の上に重ねます */ --glow-gold: radial-gradient(130% 90% at 50% 0%, rgba(198,161,91,.22) 0%, rgba(198,161,91,.07) 46%, transparent 76%); /* ---- Type families ---- */ --font-display-en: "EB Garamond", "Times New Roman", serif; --font-display-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; --font-ui: "Jost", "Helvetica Neue", "Noto Sans JP", system-ui, sans-serif; --font-body-ja: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif; /* 簡体字：見出しは宋体（セリフ）、本文は黑体（サンセリフ）。 自己ホストのサブセットが無い環境でも OS 標準に落ちるようスタックを厚くしています。 ★ 中国本土から Google Fonts CDN には到達できないため、自己ホスト必須です。 */ --font-display-sc: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif; --font-body-sc: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; /* アラビア語：本文はナスフ体、見出しもナスフ系で統一。 ラテン部分（Yojo+ / NMN など）は EB Garamond / Jost に落とします。 */ --font-display-ar: "EB Garamond", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif; --font-body-ar: "Jost", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif; /* html[lang] で切り替わる合成フォント（layout側で使用） */ --font-display: var(--font-display-en); --font-body: var(--font-ui); /* ---- Type scale (fluid) ---- */ /* ★ 文字が小さすぎたため全体を一段引き上げました（2026-08-10）。 方針: 文字として読ませるものは 13px を下回らせない。 日本語は同じ px でも欧文より小さく見えるため、欧文基準の 11〜12px では ラベルが読めません。数字だけのバッジのみ 12px を許容します。 */ --fs-4xs: 0.8125rem; /* 13px バッジの数字のみ。文字には使わない */ --fs-3xs: 0.875rem; /* 14px eyebrow・キャップス。★ 文字の下限 */ --fs-2xs: 0.9375rem; /* 15px 注記・小ラベル */ --fs-xs: 1rem; /* 16px */ --fs-sm: 1.0625rem; /* 17px 本文小 */ --fs-md: 1.1875rem; /* 19px 本文（body の既定） */ --fs-lg: clamp(1.125rem, 0.9rem + 0.7vw, 1.375rem); --fs-xl: clamp(1.375rem, 1rem + 1.4vw, 2rem); --fs-2xl: clamp(1.75rem, 1.1rem + 2.4vw, 2.875rem); --fs-3xl: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem); --fs-4xl: clamp(2.75rem, 1.1rem + 6.4vw, 6rem); /* ---- Weight ---- ★ 従来 body は 300（Light）で、和文が細く弱く見えていました。 自己ホストしているのは JP / SC / Arabic が 300・400、 Jost / 明朝 / EB Garamond が 400・500 です。 和文に 500 を要求しても存在しないため、CSS のフォントマッチングにより 400 が選ばれます（偽ボールドは発生しません）。 欧文の小ラベルだけ 500 になり、小さい字の視認性が上がります。 */ --fw-body: 400; /* 本文。300 は細すぎた */ --fw-label: 500; /* キャップスの小ラベル。欧文は Jost 500、和文は 400 に落ちる */ --fw-head: 400; /* 見出し（明朝・Garamond） */ --lh-tight: 1.12; --lh-snug: 1.28; --lh-body: 1.85; --ls-eyebrow: 0.34em; --ls-caps: 0.18em; --ls-display: 0.005em; /* ---- Space ---- */ --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: 96px; --sp-10: 128px; --sp-11: 176px; --section-y: clamp(72px, 9vw, 168px); --gutter: clamp(20px, 4.5vw, 64px); /* ★ 1320px は広すぎて、文字が画面の左端に張り付いて見えていました。 */ --maxw: 1240px; --maxw-text: 68ch; --maxw-narrow: 46ch; /* ---- Radius / shadow / motion ---- */ --r-sm: 2px; --r-md: 4px; --r-lg: 10px; --r-pill: 999px; --shadow-panel: 0 24px 80px rgba(0,0,0,.65); --shadow-lift: 0 8px 32px rgba(0,0,0,.5); --ease: cubic-bezier(.22,.61,.36,1); --ease-out-soft: cubic-bezier(.16,1,.3,1); --dur-fast: 160ms; --dur: 320ms; --dur-slow: 720ms; --header-h: 68px; --announce-h: 34px; --z-header: 60; --z-drawer: 80; --z-modal: 90; --z-toast: 100; } /* 日本語表示時はディスプレイ書体を明朝に、本文をゴシックに切替 */ /* 日本語表示：欧文は EB Garamond、和文は明朝（Shippori Mincho）に落とす合成スタック */ html[lang="ja"] { --font-display: "EB Garamond", var(--font-display-ja); --font-body: var(--font-body-ja); --ls-display: 0.03em; --lh-body: 1.95; } /* 簡体字：欧文は EB Garamond、漢字は宋体に落とす合成スタック（日本語と同じ考え方） */ html[lang="zh-Hans"] { --font-display: "EB Garamond", var(--font-display-sc); --font-body: var(--font-body-sc); --ls-display: 0.02em; --lh-body: 1.9; } /* アラビア語：字間は rtl.css で 0 に落としています（連結書体のため）。 ここでは書体と行間だけを扱います。 */ html[lang="ar"] { --font-display: var(--font-display-ar); --font-body: var(--font-body-ar); } /* フランス語は既定（ラテン）のまま。ただし英語より 15〜20% 長くなるため、 ボタン・ナビのラベルが詰まらないよう字間をわずかに詰めます。 */ html[lang="fr"] { --ls-caps: 0.14em; --ls-eyebrow: 0.28em; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }