/* ============================================================ tokens.css — ★このサイトの見た目の本体 採用案:「夜の菫紺 × 出口の緑」 ── 読者は深夜・早朝に、追い詰められた状態で検索してくる。 地色は青紫に寄せた静かなグレーで、責め立てない画面をつくる。 CTA と最重要の強調だけを緑で立てる。退職は「進む」ことなので、 警告色ではなく前へ出る色を置く。 見出しは和文明朝（システムフォント）にして、法令を扱う落ち着きを出す。 Webフォントは本文のゴシック1種のみ（明朝の追加読み込みはしない＝速度優先）。 規律（CLAUDE.md / site_template_design_spec.md より）: - 色・サイズ・余白は必ずこのトークン経由。マジックナンバー禁止。 - --color-accent は CTA と最重要の強調のみ。本文リンク・装飾に使わない。 - 本文は17px下限。行間は広めに取る。 - 他サイトと同じ配色・フォントにしない（同じ見た目になった時点でテンプレートは失敗）。 ※ Web フォント（Noto Sans JP）は base.njk の で preconnect + 読み込む。 ============================================================ */ :root { /* --- 色 --------------------------------------------------- */ /* 2026-08-05 改定「朝の青」。競合8社のLPを実測したところ主色の明度が41〜65%で、 旧配色（brand L33 / accent L27）は10〜30ポイント暗かった。地色を L94→L97 に上げ、 主色を菫紺から明るい藍へ寄せて軽くしている。 ただし競合のシアン #02a7d0・橙 #f39800 は避ける。広告主のLPと同じ見た目にすると 条文と数字で書いた中身が広告に見えるため。色はCTAに集中させる方針を維持する。 */ --color-canvas: #f7f9fc; /* ページ地色＝「机」。ほぼ白。わずかに青を含む */ --color-bg: #ffffff; /* 紙。カード/CTA/目次の地 */ --color-surface: #eef2f8; /* インセット枠（key-points/th/pre） */ --color-text: #1b2433; /* 藍みの墨。canvas上で約14.8:1 */ --color-text-muted: #55617a; --color-brand: #25599c; /* 藍。サイトの性格を決める主色。canvas上7.0:1 */ --color-brand-strong: #1a3f72; /* 濃藍。フッター/ヒーロー基色 */ --color-brand-tint: #e7eefa; /* 淡藍。目次現在地の背景など面用途のみ */ --color-accent: #0f7d59; /* 深緑。CTA/最重要強調のみ。白文字で約5.1:1 */ --color-accent-hover: #0b6245; --color-accent-tint: #f0f9f5; /* CTAの面。強い枠より柔らかい面でCVゾーンを作る */ --color-accent-border: #c9e5d8;/* CTAの淡い枠。太い枠は「広告」の警戒感を生む */ --color-marker: #ffeeb0; /* 本文マーカー（淡い山吹）。accentは装飾に使わない */ --color-border: #d7dfeb; --color-border-strong: #aebbcf;/* h2下線・強い区切り */ --color-warning: #a52639; /* 注意（法的な線引き・混同しやすい制度） */ --color-warning-bg: #fbf1f3; /* --- タイポグラフィ --------------------------------------- 見出しは和文明朝のシステムフォント（追加ダウンロード無しで印象を変える）。 明朝が無い環境ではゴシックへ落ちるだけで、崩れは起きない。 */ --font-display: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; --font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; --font-ui: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --text-xs: 0.875rem; /* 14px 注記。これ未満を使わない */ --text-sm: 0.9375rem; /* 15px 補助 */ --text-base: 1.0625rem;/* 17px 本文 */ --text-lg: 1.25rem; --text-xl: 1.4375rem; --text-2xl: 1.75rem; --text-3xl: 2.125rem; --text-4xl: 2.625rem; --leading-tight: 1.4; --leading-body: 1.95; /* 判断を急ぐ読者ほど、詰まった行は飛ばす */ --tracking-tight: -0.005em; --tracking-wide: 0.12em; --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: 4px; --radius: 8px; --radius-lg: 14px; --border-width: 1px; --shadow: none; /* --- 影（紙が机に浮く表現。菫みを帯びた影にする） --------- */ --shadow-sm: 0 1px 2px rgb(43 39 72 / 0.04), 0 1px 3px rgb(43 39 72 / 0.06); --shadow-md: 0 2px 6px rgb(43 39 72 / 0.05), 0 6px 18px rgb(43 39 72 / 0.09); /* --- レイアウト ------------------------------------------- */ --measure: 40rem; /* 本文の最大行長（全角40〜45文字相当） */ --container: 68rem; --header-height: 3.75rem; --progress-height: 3px; /* --- モーション ------------------------------------------- */ --transition: 160ms ease; } /* タップ領域の下限。48px は交渉不可 */ :root { --tap-min: 48px; } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }