@charset "UTF-8"; /* ========================================================================== ライトプラン テンプレート ─ カラーテーマ定義（全10色） 使い方: のように指定するだけで全ページの配色が変わる ========================================================================== */ :root { /* ---- 中立色（全テーマ共通） ---- */ --c-text: #1c1f23; --c-text-muted: #5f676f; --c-text-light: #8b939b; --c-line: #e4e7ea; --c-line-soft: #eff1f3; --c-bg: #ffffff; --c-bg-alt: #f7f8f9; --c-white: #ffffff; /* ---- タイポグラフィ ---- */ --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; --font-en: "Jost", "Noto Sans JP", sans-serif; /* ---- レイアウト ---- */ --wrap: 1120px; --wrap-narrow: 760px; --radius: 4px; --radius-lg: 10px; --shadow-sm: 0 1px 3px rgba(20, 26, 34, .06), 0 6px 16px rgba(20, 26, 34, .04); --shadow-md: 0 2px 6px rgba(20, 26, 34, .07), 0 14px 40px rgba(20, 26, 34, .08); --ease: cubic-bezier(.22, .61, .36, 1); /* ---- 既定テーマ（navy）のフォールバック ---- */ --brand: #1f3a63; --brand-deep: #14273f; --brand-soft: #6b86ad; --brand-tint: #f2f5f9; --accent: #c8a24a; --on-brand: #ffffff; } /* ========================================================================== 10 COLOR THEMES --brand : 主役色（見出し・ボタン・帯） --brand-deep : ホバー / 濃色背景 --brand-soft : 補助線・アイコン・淡い文字 --brand-tint : セクション背景に敷く極薄トーン --accent : 差し色（罫線・強調・小面積のみ） --on-brand : 主役色の上に乗せる文字色 ========================================================================== */ /* 01. NAVY ─ 信頼・堅実 / 士業・製造・BtoB */ [data-theme="navy"] { --brand: #1f3a63; --brand-deep: #14273f; --brand-soft: #6b86ad; --brand-tint: #f2f5f9; --accent: #c8a24a; --on-brand: #fff; } /* 02. BLUE ─ 清潔・誠実 / IT・医療・コンサル */ [data-theme="blue"] { --brand: #1a6fc4; --brand-deep: #12518f; --brand-soft: #74aade; --brand-tint: #f1f7fc; --accent: #16b1c9; --on-brand: #fff; } /* 03. TEAL ─ 知性・先進 / テック・環境・クリニック */ [data-theme="teal"] { --brand: #10797d; --brand-deep: #0a5558; --brand-soft: #6cb2b4; --brand-tint: #f0f7f7; --accent: #d8873f; --on-brand: #fff; } /* 04. GREEN ─ 安心・自然 / 食品・農業・福祉 */ [data-theme="green"] { --brand: #3a7d44; --brand-deep: #2a5c32; --brand-soft: #8bb694; --brand-tint: #f2f7f3; --accent: #cf9b34; --on-brand: #fff; } /* 05. ORANGE ─ 快活・親近 / 飲食・教育・住宅 */ [data-theme="orange"] { --brand: #d9762a; --brand-deep: #a9541a; --brand-soft: #e8ab77; --brand-tint: #fdf6f0; --accent: #2f6f8f; --on-brand: #fff; } /* 06. RED ─ 情熱・力強さ / 飲食・スポーツ・小売 */ [data-theme="red"] { --brand: #b8353a; --brand-deep: #8b262a; --brand-soft: #d98a8d; --brand-tint: #fdf3f3; --accent: #35566d; --on-brand: #fff; } /* 07. PINK ─ 柔和・華やか / 美容・サロン・アパレル */ [data-theme="pink"] { --brand: #c2557e; --brand-deep: #963d60; --brand-soft: #e2a2bc; --brand-tint: #fdf4f7; --accent: #a58a5c; --on-brand: #fff; } /* 08. PURPLE ─ 上質・創造 / 士業・デザイン・教育 */ [data-theme="purple"] { --brand: #6b4f9e; --brand-deep: #4e397a; --brand-soft: #a894cb; --brand-tint: #f6f4fb; --accent: #c9a24d; --on-brand: #fff; } /* 09. BROWN ─ 温もり・伝統 / 工房・カフェ・和 */ [data-theme="brown"] { --brand: #7a5a42; --brand-deep: #58402e; --brand-soft: #b39880; --brand-tint: #f9f6f2; --accent: #8a9a5b; --on-brand: #fff; } /* 10. MONO ─ 洗練・中立 / ギャラリー・建築・ブランド */ [data-theme="mono"] { --brand: #26292d; --brand-deep: #121417; --brand-soft: #9aa0a6; --brand-tint: #f5f6f7; --accent: #b08d57; --on-brand: #fff; }