/* ============================================================ YUINOMA — デザイントークン 2026-08-25 配色を、いただいたデザイン画像の深緑に合わせました（要件 WEB-001） サービス名は YUINOMA（yuinoma.com）。以前の明るい緑は yuinoma-bright に残しています ここが唯一の色の定義元。ページ側で色を直接書かないこと。 ※ 深緑案は [data-brand="pro"] として参考に残してあります（通常は使いません） ============================================================ */ :root { /* --- 形（両ブランド共通・ここからブレさせない） --- */ --radius-lg: 16px; --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(20,30,25,.06); --shadow: 0 4px 20px rgba(20,30,25,.07); --shadow-lg: 0 12px 40px rgba(20,30,25,.10); --ease: .25s cubic-bezier(.4,0,.2,1); --container: 1160px; --gutter: 40px; --sec-y: 88px; /* セクション上下 */ --card-p: 28px; --gap: 24px; --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --font-en: "Outfit", var(--font-sans); } /* ============ 参考：深緑案（通常は使いません） ============ */ [data-brand="pro"] { --brand-name: "ライフプロナビ"; --brand: #125436; /* 実測: ヘッダーCTA */ --brand-rgb: 18, 84, 54; --brand-2: #1A7350; --brand-ink: #0E3F29; --brand-soft: #E8F0EB; --brand-tint: #F2F7F4; --gold: #A9801F; /* 実測: 事例の番号 */ --gold-2: #C09A45; --gold-soft: #F4EEDD; --ink: #23282B; --ink-strong: #16211B; --sub: #6B7280; --muted: #9AA1A6; --bg: #F6F6F3; --card: #FFFFFF; --cream: #FDFBF7; /* 実測: ヒーローCTAボックス */ --mint: #EFF4F5; /* 実測: 事例の概要ボックス */ --line: #E4E4DE; --line-strong: #D4D4CC; --danger: #C0483C; --danger-soft: #FBF1F0; --danger-line: #F0D9D6; --display-font: var(--font-serif); --hero-serif: 1; } /* ============================================================ 本採用：YUINOMA（深緑） 2026-08-25 Kanaさんの指示により、いただいたデザイン画像の配色に 合わせました。色は画像から測った値です。 要件 WEB-001「デザイン画像を画面正本として実装する」に対応します。 ★以前の明るい緑（#009066）について★ 消していません。下の [data-brand="yuinoma-bright"] に残してあります。 と書けば、その場で戻ります。 ============================================================ */ :root, [data-brand="yuinoma"] { --brand-name: "YUINOMA"; --brand: #125436; /* 実測: ヘッダーCTA・フッター地・見出しの緑 */ --brand-rgb: 18, 84, 54; /* 上と同じ色。うすい枠線を作るのに使います 例）border: 1px solid rgba(var(--brand-rgb), .25) */ --brand-2: #1A7350; /* 実測: リンクのホバー・図の線 */ --brand-ink: #0E3F29; /* 実測: 文字にのせる濃い緑 */ --brand-soft: #E4EEE8; --brand-tint: #F2F7F4; --gold: #A9801F; /* 実測: 事例の番号・見出しの飾り（大きい文字・飾りに使う） */ --gold-2: #C09A45; --gold-soft: #F5EFDF; /* ★小さい文字に金を使うとき用★ #A9801F は大きい数字なら読めますが、11〜13pxの見出しラベルだと 地との差が3.4倍しかなく、読みにくくなります。 小さい文字にはこちらを使います（5.2倍）。 */ --gold-text: #856318; /* ============================================================ 文字の3段階 ★2026-08-25 に濃くしました★ 点検の道具を作って全ページを測ったところ、 --muted（#96A0A6）が地との差 2.5倍しかありませんでした。 必要なのは4.5倍です。パンくず・注記・小さい説明が、 ほとんど読めない濃さのまま出ていました。 目で見て気づけるものではありません。 「なんとなく薄いかな」で済ませていた部分です。 測ってはじめて分かりました。 ============================================================ */ --ink: #23282B; /* 本文。13.9倍 */ --ink-strong: #16211B; /* 見出し。16.4倍 */ --sub: #4C5A63; /* 補足。6.6倍 */ --muted: #626D74; /* 注記・パンくず。4.9倍 */ --bg: #F7F7F4; /* 実測: セクションの地 */ --card: #FFFFFF; --cream: #FDFBF7; /* 実測: CTAボックスの地 */ --mint: #E9F2ED; /* 実測: 事例の概要ボックス・アイコン地 */ --line: #E3E5DF; --line-strong: #CFD4CC; --danger: #B0503F; /* 実測: 「対応していないこと」の枠 */ --danger-soft: #FBF2EF; --danger-line: #EFD9D2; --display-font: var(--font-serif); --hero-serif: 1; } /* ============ 参考：明るい緑（2026-08-19〜08-25 まで使っていた案） ============ */ [data-brand="yuinoma-bright"] { --brand-name: "YUINOMA"; --brand: #009066; --brand-rgb: 0, 144, 102; --brand-2: #00A878; --brand-ink: #007A56; --brand-soft: #E6F4EE; --brand-tint: #F1F9F5; --gold: #B08A3C; --gold-2: #C9A659; --gold-soft: #F6F1E4; --gold-text: #8A6A26; --ink: #0C2A48; --ink-strong: #08203A; --sub: #4E5E6C; --muted: #5F6E7B; --bg: #FFFFFF; --card: #FFFFFF; --cream: #FBFCF9; --mint: #EAF5F0; --line: #E3EAE7; --line-strong: #CFDBD5; --danger: #C0483C; --danger-soft: #FBF1F0; --danger-line: #F0D9D6; --display-font: var(--font-serif); --hero-serif: 1; } @media (max-width: 900px) { :root { --sec-y: 64px; --gutter: 20px; --card-p: 20px; --gap: 16px; } } /* ============================================================ 人ごとの差し色（サブアクセント） ブランドの緑（--brand）は全員共通で固定。 番号・見出しの飾り・引用まわりに使う --gold だけを差し替えます。 のように指定します。 ============================================================ */ [data-accent="gold"] { --gold:#B08A3C; --gold-2:#C9A659; --gold-soft:#F6F1E4; } [data-accent="brown"] { --gold:#96684A; --gold-2:#B08262; --gold-soft:#F4ECE6; } [data-accent="blue"] { --gold:#37698F; --gold-2:#5A88A9; --gold-soft:#E9F0F5; } [data-accent="terracotta"] { --gold:#B0604A; --gold-2:#C77E68; --gold-soft:#F8EBE6; } [data-accent="slate"] { --gold:#5A6B78; --gold-2:#7B8B96; --gold-soft:#EDF1F3; } [data-accent="teal"] { --gold:#2F7D74; --gold-2:#54988F; --gold-soft:#E6F1EF; } /* ============================================================ ロゴに合わせた配色案：紺＋金 2026-08-24 ロゴが確定（紺の無限マーク＋金のグラデーション）。 いまの緑を主役にしたままだと、ロゴを置いた瞬間に色が2系統になります。 見比べるための案です。 で切り替わります。 決まったら、こちらを :root の本採用にします。 ============================================================ */ [data-brand="yuinoma-navy"] { --brand-name: "YUINOMA"; /* 主役：ロゴの紺 */ --brand: #1B3A6B; --brand-rgb: 27, 58, 107; --brand-2: #2A5290; --brand-ink: #142C51; --brand-soft: #E8EDF5; --brand-tint: #F4F7FB; /* 差し色：ロゴの金 */ --gold: #C09341; --gold-2: #E0BC70; --gold-soft: #FAF4E8; --ink: #14284A; --ink-strong: #0C1D38; --sub: #5A6880; --muted: #909BAE; --bg: #FFFFFF; --card: #FFFFFF; --cream: #FCFBF8; --mint: #EDF1F7; /* 淡い紺。緑の代わり */ --line: #E2E7EF; --line-strong: #CBD4E0; --danger: #B4544A; --danger-soft: #FBF2F0; --danger-line: #F0DCD8; --display-font: var(--font-serif); --hero-serif: 1; }