/* kk-site — トークン層 ------------------------------------------------------------------ 色は生成物。手で書き換えない（正本は python3 SOP/HP/site_tokens.py --site kk）。 2026-08-16 に DADS のプリミティブを直接当てた試作をそのまま本番へ入れていたが、 2026-09-02 に12段のスケールへ載せ替えた。経緯と段の設計はスクリプトの docstring。 書体・級数・余白・角丸は生成しない（ここが正本）。 コントラストは全ペアを実測して WCAG AA（文字4.5:1・非文字3:1）を通してある。 ------------------------------------------------------------------ */ :root { /* >>> 色：生成物。手で書き換えない。 正本は python3 SOP/HP/site_tokens.py --site lenker-kk --gen 2026-09-03 に深緑へ切替。段は行政書士区画と同一で、用途割当だけ kk の名前。 */ /* --- ブランド原色（生の16進を書いてよいのはここだけ） --- */ --navy: #12211D; --navy-soft: #3D6B5E; --gold: #A97F3D; /* --- 紺12段（Radix indigo の段間隔／段12に --navy を固定） --- */ --navy-1: #FDFDFD; /* 白地 1.09:1 地 */ --navy-2: #F7F9F9; /* 白地 1.05:1 淡い地 */ --navy-3: #EEF2F0; /* 白地 1.02:1 面 */ --navy-4: #E2E9E7; /* 白地 1.11:1 面（強） */ --navy-5: #D3DEDB; /* 白地 1.24:1 面（最強） */ --navy-6: #C1D0CC; /* 白地 1.44:1 細い罫線 */ --navy-7: #AABEB9; /* 白地 1.76:1 罫線 */ --navy-8: #8CA59E; /* 白地 2.37:1 太い罫線・境界 */ --navy-9: #426A5E; /* 白地 5.48:1 ソリッド */ --navy-10: #376054; /* 白地 6.39:1 ソリッド（強） */ --navy-11: #3B5E54; /* 白地 6.49:1 可読テキスト */ --navy-12: #12211D; /* 白地 15.01:1 高コントラストテキスト */ /* --- 金12段（Radix tomato の段間隔／段9に --gold を固定） --- */ --gold-1: #FEFDFC; /* 白地 1.09:1 地 */ --gold-2: #FBF9F7; /* 白地 1.06:1 淡い地 */ --gold-3: #F4EFE8; /* 白地 1.03:1 面 */ --gold-4: #EDE3D6; /* 白地 1.14:1 面（強） */ --gold-5: #E6D8C5; /* 白地 1.26:1 面（最強） */ --gold-6: #DECCB3; /* 白地 1.41:1 細い罫線 */ --gold-7: #D0BA9C; /* 白地 1.69:1 罫線 */ --gold-8: #C1A680; /* 白地 2.10:1 太い罫線・境界 */ --gold-9: #A97F3D; /* 白地 3.27:1 ソリッド */ --gold-10: #A27835; /* 白地 3.59:1 ソリッド（強） */ --gold-11: #976D27; /* 白地 4.18:1 可読テキスト */ --gold-12: #463621; /* 白地 10.46:1 高コントラストテキスト */ /* --- ニュートラル12段（Radix sand の明度profile／色相は紺・彩度×4） --- */ --n-1: #FAFEFD; /* 白地 1.09:1 地 */ --n-2: #F6FAF9; /* 白地 1.05:1 淡い地 */ --n-3: #ECF2F0; /* 白地 1.02:1 面 */ --n-4: #E1EBE8; /* 白地 1.10:1 面（強） */ --n-5: #D6E5E1; /* 白地 1.17:1 面（最強） */ --n-6: #CEDDD9; /* 白地 1.26:1 細い罫線 */ --n-7: #C0D3CD; /* 白地 1.41:1 罫線 */ --n-8: #A5C2BA; /* 白地 1.72:1 太い罫線・境界 */ --n-9: #73958B; /* 白地 2.96:1 ソリッド */ --n-10: #6C8981; /* 白地 3.42:1 ソリッド（強） */ --n-11: #506962; /* 白地 5.35:1 可読テキスト */ --n-12: #0F251F; /* 白地 14.51:1 高コントラストテキスト */ /* --- 赤12段（意味の色。段9に既存の #B03A3A を固定） --- */ --red-1: #FEFCFC; /* 白地 1.09:1 地 */ --red-2: #FDF7F7; /* 白地 1.05:1 淡い地 */ --red-3: #F7E8E7; /* 白地 1.07:1 面 */ --red-4: #F3D6D3; /* 白地 1.23:1 面（強） */ --red-5: #EEC5C2; /* 白地 1.41:1 面（最強） */ --red-6: #E7B3AF; /* 白地 1.65:1 細い罫線 */ --red-7: #D89A96; /* 白地 2.11:1 罫線 */ --red-8: #C87D79; /* 白地 2.84:1 太い罫線・境界 */ --red-9: #B03A3A; /* 白地 5.39:1 ソリッド */ --red-10: #AB3536; /* 白地 5.75:1 ソリッド（強） */ --red-11: #A42B30; /* 白地 6.38:1 可読テキスト */ --red-12: #562B2B; /* 白地 10.66:1 高コントラストテキスト */ /* --- 緑12段（意味の色。段4に既存の #D8F3DA を固定） --- */ --green-1: #FCFDFB; /* 白地 1.09:1 地 */ --green-2: #F8FCF7; /* 白地 1.07:1 淡い地 */ --green-3: #EAF7E9; /* 白地 1.00:1 面 */ --green-4: #D8F3DA; /* 白地 1.07:1 面（強） */ --green-5: #C6EBC6; /* 白地 1.18:1 面（最強） */ --green-6: #B2E2B3; /* 白地 1.31:1 細い罫線 */ --green-7: #99D49A; /* 白地 1.55:1 罫線 */ --green-8: #79C47B; /* 白地 1.89:1 太い罫線・境界 */ --green-9: #00A92B; /* 白地 2.82:1 ソリッド */ --green-10: #00A11F; /* 白地 3.09:1 ソリッド（強） */ --green-11: #009500; /* 白地 3.57:1 可読テキスト */ --green-12: #1A4419; /* 白地 10.04:1 高コントラストテキスト */ /* --- 文字に使ってよい金（原色の金は 3.09:1 で文字に使えない） --- */ --gold-text: #906823; /* 白地 4.52:1。白文字を載せる面としても同じ比 */ --gold-on-dark: #FEFDFC; /* 紺グラデの明るい端 #3D6B5E の上で 5.97:1 */ --gold-deep: var(--gold-text); /* 旧名。参照が残っているので別名で残す */ /* --- 用途割当（コンポーネント側はこちらを参照する） --- */ --ink: var(--n-12); /* 本文 */ --muted: var(--n-11); /* 注記・メタ */ --line: var(--n-4); /* 装飾の区切り線 */ --rule-meaning: var(--n-10); /* 意味を持つ境界。地の上で非文字 3:1 を満たす段 */ --bg: #ffffff; --bg-alt: var(--n-2); /* 淡い地 */ --face: var(--navy-2); /* 面（淡い紺）。関連する情報を1つにまとめる */ --face-strong: var(--navy-3);/* 面の内側にもう1階層要るとき */ --ink-on-dark: var(--n-4); /* 濃色面（紺）の上の本文 */ --muted-on-dark: var(--n-8); /* 濃色面の上の注記・フッター */ --max: 1080px; --radius: 10px; /* --- 用途割当（kk の名前のまま。構造CSSはここしか見ていない） --- */ --color-bg: #FFFFFF; --color-bg-invert: var(--navy-12); /* 濃色面。ヒーローの地 */ --color-surface: var(--n-3); --color-ink: var(--n-12); --color-ink-muted: var(--n-11); --color-ink-invert: #FFFFFF; --color-rule: var(--n-7); /* 装飾の区切り罫。比を要求しない */ --color-border: var(--n-10); /* 意味を持つ境界。非文字 3:1 */ --color-rule-invert: var(--n-9); /* アクセントは赤(#CE0000)をやめ、行政書士側と同じ金にする。原色の金は白地 3.09:1 で 文字に使えないので、面にも文字にも 4.5:1 を満たす --gold-text を当てる。 */ --color-accent: var(--gold-text); --color-accent-hover: color-mix(in srgb, var(--color-accent) 76%, var(--n-12)); --color-on-accent: #FFFFFF; --color-error: var(--red-11); --color-accent-on-dark: var(--gold-on-dark); --color-eyebrow: var(--color-accent); --color-num: var(--color-accent); --color-field-line: var(--color-ink); --color-header-bg: color-mix(in srgb, var(--color-bg) 90%, transparent); /* <<< 色ここまで */ /* ===== 書体：見出しは明朝、本文は Noto Sans JP。太さは 400 / 500 / 700 ===== 日本語で専門性と格を出す最短の手が明朝。ゴシック1書体・2ウェイトだと 級数以外に差をつける手段が無くなる（2026-09-02）。 */ --font-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif; --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif; --font-num: var(--font-body); --font-wordmark: var(--font-body); --weight-display: 600; /* 明朝は 600 で締まる。700 だと潰れる */ --weight-wordmark: 700; /* ===== 文字サイズ：DADS のスケール（14/16/17/18/20/22/26/32/36/45/48）から採る ===== */ --text-display: clamp(2rem, 5vw, 3rem); /* 32 → 48（Dsp-48） */ --text-h2: clamp(1.625rem, 2.6vw, 2.25rem); /* 26 → 36（Std-36B-140） */ --text-h3: clamp(1.125rem, 1.4vw, 1.375rem); /* 18 → 22 */ --text-h4: 1.0625rem; /* 17 */ --text-lede: 1.125rem; /* 18 */ --text-body: clamp(1rem, 1vw, 1.0625rem); /* 16 → 17。DADS の下限16pxを守る */ /* 元の 13px は DADS の「本文は16px以上」「最小トークンは14px」に反するため 14px へ上げた */ --text-small: 0.875rem; /* 14 */ --text-num: var(--text-small); --text-metric: clamp(2rem, 3.2vw, 3rem); /* 32 → 48 */ --text-wordmark: 1.25rem; /* 20 */ /* ===== 字送り・行間：DADS の指定に合わせる ===== */ --tracking-display: -0.02em; /* 和文の大見出しはベタ組みだと緩む。わずかに詰める */ --tracking-eyebrow: 0.08em; /* 元 0.24em は DADS のスケール外。詰める */ --tracking-wordmark: -0.02em; --tracking-num: 0.02em; --tracking-ui: 0.02em; /* DADS のボタン・UI と同値 */ --leading-body: 1.7; /* DADS: line-height-170 */ --leading-heading: 1.4; /* DADS: 見出しは 140% */ /* ===== 余白：4px 基準。元のまま（DADS も4の倍数） ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 200px; --section-y: var(--space-10); /* ===== 寸法：元のまま。--tap-min 48px は DADS ボタン md と同値 ===== */ --width-page: 1280px; --width-narrow: 680px; --measure: 32em; --tap-min: 48px; /* ヘッダーの実高。.site-header の padding-block(--space-4)×2 ＋ 中身(--tap-min) ＋ 罫線1px。 ヒーローの 100svh から差し引くのに使う（引かないと sticky ヘッダーのぶん下端が 折り返し線を割り、下端寄せの本文と SCROLL が画面外に出る）。 ヘッダーの中身を変えたら _tmp/_head_geom.py で測り直す。 */ --header-h: calc(var(--space-4) * 2 + var(--tap-min) + 1px); /* ===== 角丸 ===== ピル型（999px）は SaaS・消費者向けの記号で、M&A と士業の文脈では軽く見える。 gyosei は 4px。kk はカードの角丸と釣り合う 6px にする（2026-09-02）。 */ --radius-sm: 8px; --radius-md: 16px; --radius-btn: 6px; --radius-tag: 8px; --rule: 1px solid var(--color-rule); /* 元は 2px solid ink の太い上罫線。DADS のカードは1px枠＋角丸なので合わせる */ --card-rule: 1px solid var(--color-rule); /* ===== モーション・重なり：元のまま ===== */ --ease: cubic-bezier(.16,1,.3,1); --dur-fast: 120ms; --dur: 200ms; --z-header: 10; --z-overlay: 50; }