/* ============================================================ tokens.css — ★このサイトの見た目の本体（採用デザイン） 採用案:「老緑 × 琥珀」— 静かな相談室 ── 読者は深夜・早朝に、不安な状態でこのサイトを開く。 まぶしい白面で殴らない。低彩度の老緑を主色に置き、面と余白で落ち着かせる。 見出しだけ明朝にして、法令・制度の説明が続く紙面に重さを与える。 CTAは琥珀（黄土寄りの金茶）1色のみ。赤やオレンジの警告色は使わない ——不安を煽る色で背中を押すことは、このサイトの方針としてしない。 規律（CLAUDE.md / site_template_design_spec.md より）: - 色・サイズ・余白は必ずこのトークン経由。マジックナンバー禁止。 - --color-accent は CTA と最重要の強調のみ。本文リンク・装飾に使わない。 - 本文は18px下限。 - 他サイトと同じ配色・フォントにしない （sumaisetsubi は「鉄紺 × 安全オレンジ・全ゴシック・小さい角丸」。 本サイトは「老緑 × 琥珀・見出し明朝・大きめの角丸」で重ならない）。 ※ Web フォント（Noto Sans JP / Noto Serif JP）は base.njk の で preconnect + 読み込む（描画ブロッキングを避けるため CSS @import は使わない）。 ============================================================ */ :root { /* --- 色 --------------------------------------------------- */ --color-canvas: #e8ebe6; /* ページ地色＝「机」。緑みの淡灰。紙(bg)をこの上に浮かせる */ --color-bg: #ffffff; /* 紙。カード/CTA/目次の地 */ --color-surface: #f1f4ef; /* インセット枠（key-points/th/pre） */ --color-text: #1b241f; /* 緑みの墨。白地で約15:1 */ --color-text-muted: #4c584f; /* 補助テキスト。白地で約7.5:1 */ --color-brand: #2c4f42; /* 老緑。サイトの性格を決める主色。白地で約9:1 */ --color-brand-strong: #1a3129; /* 濃老緑。フッター/ヒーロー基色 */ --color-brand-tint: #e2ebe6; /* 淡老緑。目次現在地・アイコン地など面用途のみ */ --color-accent: #9a6200; /* 琥珀。CTA/最重要強調のみ。白抜き文字で約5.1:1 */ --color-accent-hover: #7d4f00; --color-accent-tint: #fcf7ec; /* CTAの面。強い枠より柔らかい面でCVゾーンを作る */ --color-accent-border: #ecdfc4;/* CTAの淡い枠。太い枠は「広告」の警戒感を生む */ --color-marker: #fdf0bd; /* 本文マーカー（淡黄）。accentは装飾に使わない */ --color-border: #d6dcd5; --color-border-strong: #b4bdb4;/* h2下線・強い区切り */ --color-warning: #8f3a20; /* 「その行為は違法になり得る」の注意喚起 */ --color-warning-bg: #faf1ec; /* --- タイポグラフィ --------------------------------------- 見出しは明朝、本文はゴシック。同一フォント・同一ウェイトだけの 既定値状態にしない（site_template_design_spec §3.3）。 明朝は Web フォント読込前でも端末の明朝にフォールバックする。 */ --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", 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.125rem; /* 18px 本文 */ --text-lg: 1.3125rem; --text-xl: 1.5rem; --text-2xl: 1.8125rem; --text-3xl: 2.125rem; --text-4xl: 2.625rem; --leading-tight: 1.4; --leading-body: 1.95; /* 不安な状態で読むため、行間は広めに取る */ --tracking-tight: 0; --tracking-wide: 0.08em; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; --weight-heading: 600; /* 明朝の見出しは 700 だと重い。600 で落ち着かせる */ /* --- 余白（基準値の倍数で構成） -------------------------- */ --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: 4px; /* チップ・小要素 */ --radius: 8px; --radius-lg: 14px; /* カード・CTA。硬い罫線の紙面にしない */ --border-width: 1px; --shadow: none; /* --- 影（緑みの影。紙が机に浮く表現） -------------------- */ --shadow-sm: 0 1px 2px rgb(26 49 41 / 0.04), 0 1px 3px rgb(26 49 41 / 0.06); --shadow-md: 0 2px 6px rgb(26 49 41 / 0.05), 0 6px 18px rgb(26 49 41 / 0.08); /* --- レイアウト ------------------------------------------- */ --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; } }