/* ============================================================ tokens.css — ★このサイトの見た目の本体（muryo-soudan.jp） 採用案:「常磐緑 × 琥珀」 ── 士業事務所の佇まい。硬質で誠実、彩度を落とし、装飾を削る。 低彩度の深緑（常磐）を主色に、見出しは明朝（Noto Serif JP）で 信頼・落ち着きの方向へ振る。CTA/最重要の強調だけ琥珀で立てる。 読者は経済的・精神的に追い詰められた状態で来る。 煽らない・驚かせない・急がせない配色にする。 規律（CLAUDE.md / docs/site_template_design_spec.md より）: - 色・サイズ・余白は必ずこのトークン経由。マジックナンバー禁止。 - --color-accent は CTA と最重要の強調のみ。本文リンク・装飾に使わない。 - 本文は17px以上・コントラスト7:1目標（YMYL読者層。交渉不可）。 - 5サイトを同じ配色・フォントにしない（sumaisetsubi=鉄紺×安全オレンジとは別物）。 ※ Web フォント（Noto Serif JP 見出し / Noto Sans JP 本文）は base.njk の で preconnect + 読み込む（CSS @import は使わない）。 ============================================================ */ :root { /* --- 色 --------------------------------------------------- */ --color-canvas: #eef0ed; /* ページ地色＝「机」。わずかに緑がかった無彩色 */ --color-bg: #ffffff; /* 紙。カード/CTA/目次の地 */ --color-surface: #f3f5f2; /* インセット枠（key-points/th/pre） */ --color-text: #1d2723; /* 緑がかった墨。canvas上で約13:1 */ --color-text-muted: #55635c; --color-brand: #1e4737; /* 常磐緑。サイトの性格を決める主色 */ --color-brand-strong: #132e24; /* 濃常磐。フッター/ヒーロー基色 */ --color-brand-tint: #e6eee9; /* 淡緑。目次現在地の背景など面用途のみ */ --color-accent: #8a5a00; /* 琥珀。CTA/最重要強調のみ。白文字で約6:1 */ --color-accent-hover: #6f4800; --color-accent-tint: #faf6ec; /* CTAの面。強い枠より柔らかい面でCVゾーンを作る */ --color-accent-border: #e7dabc;/* CTAの淡い枠。太い枠は「広告」の警戒感を生む */ --color-marker: #f6edb3; /* 本文マーカー（淡い黄）。accentは装飾に使わない */ --color-border: #d6dcd6; --color-border-strong: #b8c2ba;/* h2下線・強い区切り */ --color-warning: #a13420; /* 緊急時の注意（違法な取り立て・脅迫等の警告枠） */ --color-warning-bg: #faf1ee; /* --- タイポグラフィ（見出し=明朝 / 本文=ゴシック） --------- */ --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-ui: "Noto Sans JP", system-ui, -apple-system, sans-serif; --text-xs: 0.875rem; /* 14px 注記。これ未満を使わない */ --text-sm: 0.9375rem; /* 15px 補助 */ --text-base: 1.0625rem;/* 17px 本文（設計仕様の下限） */ --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.75rem; --text-3xl: 2.125rem; --text-4xl: 2.625rem; --leading-tight: 1.4; /* 明朝見出しは少し余裕を持たせる */ --leading-body: 1.9; /* 日本語は欧文より広めが読みやすい */ --tracking-tight: 0; /* 明朝を詰めない */ --tracking-wide: 0.1em; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* --- 余白（基準値の倍数で構成） -------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* --- 形状（硬質・誠実。角をほとんど落とさない） ----------- */ --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --border-width: 1px; --shadow: none; /* --- 影（装飾を削る方針。ごく浅い elevation のみ） -------- */ --shadow-sm: 0 1px 2px rgb(19 46 36 / 0.05); --shadow-md: 0 2px 5px rgb(19 46 36 / 0.05), 0 5px 14px rgb(19 46 36 / 0.07); /* --- レイアウト ------------------------------------------- */ --measure: 42rem; /* 本文の最大行長（全角40〜45文字相当） */ --container: 68rem; --header-height: 3.75rem; --sidebar-width: 15rem; /* PC 追従目次カラム幅（240px） */ --col-gap: var(--space-8); --progress-height: 3px; /* --- モーション ------------------------------------------- */ --transition: 160ms ease; } /* タップ領域の下限。特に電話CTA。48px は交渉不可 */ :root { --tap-min: 48px; } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }