/* ============================================================ tokens.css ------------------------------------------------------------ サイト全体で使う「色・文字・余白・影・動き」の定義。 他のCSSはここで決めた変数(var(--xxx))ごしにだけ値を使う。 配色の方針: アプリ本体（app/css/theme.css）と同じ考え方で、 「明るい無彩色」＋「#1a4661（深い青緑）」の2色だけで構成する。 無彩色はほんのわずかに青へ寄せてあり、ブランド色と並べたときに 濁って見えないようにしている。 ============================================================ */ :root { /* ============================================================ 1) ブランド色 ― #1a4661 を基準にした明度違い ------------------------------------------------------------ 基準色 #1a4661 は HSL(203, 58%, 24%)。 色相203度を固定したまま明度だけを振ることで、 どの濃さで並べても同じ色として見える。 ============================================================ */ --brand-950: #08161e; --brand-900: #0d2434; --brand-800: #123246; --brand-700: #143b52; --brand-600: #1a4661; /* ★基準色 */ --brand-500: #275f81; --brand-400: #3f7fa3; --brand-300: #7ba8c2; --brand-200: #b5d0e0; --brand-100: #dbeaf3; --brand-050: #f0f7fb; /* ============================================================ 2) 無彩色 ― 明るい側に重心を置いたグレー ------------------------------------------------------------ 完全な無彩色ではなく、色相203度をごく薄く(2〜4%)混ぜている。 ブランド色の隣に置いたときにグレーが黄ばんで見えないため。 ============================================================ */ --ink-950: #0b0e10; --ink-900: #14181b; --ink-800: #1e2327; --ink-700: #2f363b; --ink-600: #4b545b; --ink-500: #6c757d; --ink-400: #98a1a8; --ink-300: #c5cbd0; --ink-200: #e0e5e9; --ink-100: #eef1f4; --ink-050: #f7f9fa; --white: #ffffff; /* ============================================================ 3) 役割ごとの色（画面を組むときはこちらを使う） ============================================================ */ --c-bg: var(--white); /* ページの地色 */ --c-bg-soft: var(--ink-050); /* 一段沈んだ帯 */ --c-bg-muted: var(--ink-100); /* さらに沈んだ面 */ --c-surface: var(--white); /* カード・パネルの面 */ --c-line: var(--ink-200); /* 罫線・枠線 */ --c-line-soft: var(--ink-100); /* ごく薄い区切り */ --c-text: var(--ink-900); /* 本文 */ --c-text-2: var(--ink-600); /* 補足・説明文 */ --c-text-3: var(--ink-500); /* ラベル・注釈 */ --c-text-faint: var(--ink-400); /* いちばん目立たせない文字 */ --c-accent: var(--brand-600); --c-accent-hover: var(--brand-700); --c-accent-soft: var(--brand-050); --c-on-accent: var(--white); /* 反転（濃紺）セクション用 */ --c-dark-bg: var(--brand-950); --c-dark-surface: #0f2937; --c-dark-line: rgba(255, 255, 255, 0.1); --c-dark-text: #eaf1f5; --c-dark-text-2: #a6bcc9; --c-dark-text-3: #7794a5; --c-focus: rgba(26, 70, 97, 0.35); --c-danger: #b3382b; --c-warn: #8a6100; --c-warn-bg: #fff8e6; --c-warn-line: #f0dfb0; /* ============================================================ 4) 書体 ------------------------------------------------------------ --font-display … 見出し・キャッチコピー（源雲明朝／自前配信） --font-ui … 本文・UI（OS標準の和文ゴシック） --font-mincho … アプリ再現エリアの原稿本文（アプリと同じ並び） --font-mono … バージョン番号・ファイル名など ============================================================ */ --font-display: "GenWanMin2JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif; --font-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", "MS Mincho", "Noto Serif JP", "Source Han Serif JP", serif; --font-gothic: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Noto Sans JP", sans-serif; --font-mono: "SFMono-Regular", "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace; /* ---- 文字サイズ（画面幅に応じて伸縮する） ---- */ --fs-display: clamp(2.5rem, 1.2rem + 6.2vw, 6.5rem); --fs-h1: clamp(2rem, 1.2rem + 3.4vw, 3.5rem); --fs-h2: clamp(1.6rem, 1.05rem + 2.3vw, 2.6rem); --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); --fs-lead: clamp(1rem, 0.94rem + 0.3vw, 1.15rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.78125rem; /* 和文は行間を広めにとらないと詰まって見える */ --lh-tight: 1.35; --lh-heading: 1.5; --lh-body: 1.9; --ls-display: 0.06em; /* 明朝の大見出しは字間を開けたほうが締まる */ --ls-label: 0.14em; /* 英字の小さいラベル */ /* ============================================================ 5) 余白 ― 4pxを1単位にした段階 ============================================================ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* セクション上下の余白（画面幅で伸縮） */ --sp-section: clamp(4.5rem, 3rem + 7vw, 9rem); /* ---- 版面 ---- */ --container: 1180px; --container-wide: 1400px; --container-narrow: 760px; --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem); /* ============================================================ 6) 角丸・影・枠 ============================================================ */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* 影は「拡散の違う2枚重ね」にすると紙が浮いて見える */ --sh-xs: 0 1px 2px rgba(11, 23, 31, 0.06); --sh-sm: 0 1px 2px rgba(11, 23, 31, 0.05), 0 2px 6px rgba(11, 23, 31, 0.05); --sh-md: 0 2px 4px rgba(11, 23, 31, 0.04), 0 8px 20px rgba(11, 23, 31, 0.07); --sh-lg: 0 4px 8px rgba(11, 23, 31, 0.04), 0 18px 40px rgba(11, 23, 31, 0.09); --sh-xl: 0 8px 16px rgba(11, 23, 31, 0.05), 0 32px 70px rgba(11, 23, 31, 0.13); --sh-brand: 0 6px 16px rgba(26, 70, 97, 0.22), 0 2px 4px rgba(26, 70, 97, 0.16); /* ============================================================ 7) 動き ------------------------------------------------------------ すべて transform / opacity だけを動かす（再描画を起こさないため）。 ============================================================ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 入ってくる動き */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* スイッチのつまみ用 */ --t-fast: 140ms; --t-base: 220ms; --t-slow: 420ms; /* ============================================================ 8) 重なり順（z-index） ------------------------------------------------------------ 数字を直接書かず、必ずこの5段階から選ぶ。 ============================================================ */ --z-base: 1; --z-sticky: 10; --z-header: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --header-h: 68px; } @media (max-width: 640px) { :root { --header-h: 58px; } }