/* ============================================================ tokens.css — ★このサイトの見た目の本体 採用案:「墨緑 × 弁柄」 ── 敷地・図面・土地の語彙から引いた路線。読者は実家や空き家の解体を 検討している40〜60代で、判断が重い。派手さより「落ち着いて読める紙面」を作る。 面は白基調、構造は罫線で作り、影は使わない。角丸は小さく取る。 強調は主色（墨緑）、CTAだけ弁柄（濃い朱）で立てる。 ※ 同一運営者の他サイトと同じ見た目にしない（量産サイトに見えた時点で失敗）。 sumaisetsubi.com は「鉄紺 × 安全オレンジ／Noto Sans JP／影あり・角丸6px」。 本サイトは色相・書体・影・角丸のすべてを別に取っている。 規律（CLAUDE.md / site_template_design_spec.md より）: - 色・サイズ・余白は必ずこのトークン経由。マジックナンバー禁止。 - --color-accent は CTA と最重要の強調のみ。本文リンク・装飾に使わない。 - 本文は18px下限（中高年層が中心のため。交渉不可）。 ※ Web フォント（Zen Kaku Gothic New）は base.njk の で preconnect + 読み込む（描画ブロッキングを避けるため CSS @import は使わない）。 ============================================================ */ :root { /* --- 色 --------------------------------------------------- コントラスト比（対 白 #fff）は本文 15.8:1 / 補助 7.3:1 / 主色 9.8:1 / CTA 7.0:1。仕様の「本文7:1以上」を全項目で満たす。 */ --color-canvas: #f1f0ec; /* ページ地色。温かみのある淡灰（図面紙） */ --color-bg: #ffffff; /* 紙。カード/CTA/目次の地 */ --color-surface: #f3f5f1; /* インセット枠（key-points/th/pre）。緑を微量含む */ --color-text: #232821; /* 墨緑寄りの黒 */ --color-text-muted: #4e554d; --color-brand: #2f5041; /* 墨緑。サイトの性格を決める主色 */ --color-brand-strong: #1e3529; /* 濃墨緑。フッター/ヒーロー基色 */ --color-brand-tint: #e4ebe5; /* 淡墨緑。目次の現在地など面用途のみ */ --color-accent: #98301a; /* 弁柄。CTA/最重要強調のみ */ --color-accent-hover: #7c2614; --color-accent-tint: #fbf2ee; /* CTAの面。強い枠より柔らかい面でCVゾーンを作る */ --color-accent-border: #ebd8d0;/* CTAの淡い枠。太い枠は「広告」の警戒感を生む */ --color-accent-tint-strong: #f2e1d9; /* CTAの面より一段濃い淡色（イラストの地） */ --color-marker: #e8f0c9; /* 本文マーカー（淡い黄緑）。accentは装飾に使わない */ /* 濃墨緑の面（ヒーロー・フッター）に乗せる文字色。対 --color-brand-strong で 9.4:1 / 7.0:1 */ --color-on-brand: #ffffff; --color-on-brand-muted: #d3ddd6; --color-on-brand-subtle: #aec2b4; --color-border: #dcddd6; --color-border-strong: #c2c6bc;/* h2下線・強い区切り */ --color-warning: #8a5300; /* 注意喚起（琥珀）。CTAの弁柄と混同させない */ --color-warning-bg: #fbf3e3; /* シグネチャー要素「費用の積み上げ帯」の段階色。 同一色相の明度4段。内訳の順序（大きい費目から）を明度で表す。 ★色だけで区別させない: 隣接段の明度差を広く取ったうえで、 帯・凡例の両方に通し番号を出し、段ごとに地紋（斜線・ドット）を変える。 色覚特性にかかわらず、番号と地紋だけで対応が取れる状態を保つこと。 */ --stack-1: #1f3b2c; /* 白文字で 12.4:1 */ --stack-2: #446453; /* 白文字で 7.1:1 */ --stack-3: #8aa697; /* 濃文字で 6.6:1 */ --stack-4: #cdd8d0; /* 濃文字で 12.0:1 */ /* --- タイポグラフィ（Zen Kaku Gothic New。字面が広く、可読性が高い） --- */ --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-ui: "Zen Kaku Gothic New", 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.1875rem; --text-4xl: 2.625rem; --leading-tight: 1.4; --leading-body: 1.95; /* 日本語は欧文より広めが読みやすい */ --tracking-tight: 0.005em; /* Zen Kaku は字面が広いので詰めない */ --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: 2px; --radius: 4px; --radius-lg: 6px; --border-width: 1px; --shadow: none; /* --- 影（このサイトでは面の浮きを使わない。骨格CSSが参照するので定義は残す） --- */ --shadow-sm: none; --shadow-md: none; /* 例外: CTAだけは淡い暖色の光を残す。紙面が平坦なぶん、この1箇所で確実に浮かせる （CTAの視認性を下げる変更はしない ＝ 直接収益に効くため） */ --shadow-cta: 0 6px 20px rgb(152 48 26 / 8%); /* --- レイアウト ------------------------------------------- */ --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; } }