@charset "UTF-8"; /* * theme.css * * コンテナ表示側テーマ変数 * * 役割： * サイトの配色・フォント・余白基準を CSS カスタムプロパティで一元管理する。 * コンテナ CMS の環境設定（m_setting / SETTING_*）から各値を流し込むことで * サイト全体の色味を管理画面から差し替え可能にすることを想定。 * * PHP 化時の差込例： * * * 設計方針： * ・カラーパレットは「ベース／面／文字／プライマリ／アクセント／ボーダー」の6系統で構成 * ・各色は light テーマを既定値とし、[data-theme="dark"] で上書き * ・フォントは和文／英欧文／見出し で 3 系統定義 * ・余白・角丸・最大幅・ヘッダー高はサイト全体で共通化 */ :root { /* ===== カラー：背景・面 ===== */ --c_bg_base: #ffffff; --c_bg_section: #f6f7f9; --c_bg_card: #ffffff; --c_bg_overlay: rgba(20, 26, 38, 0.55); /* ===== カラー：文字 ===== */ --c_text: #1f2937; --c_text_muted: #6b7280; --c_text_inverse: #ffffff; --c_text_link: #1d4ed8; --c_text_link_hover: #1e3a8a; /* ===== カラー：プライマリ（テーマ主色） ===== */ --c_primary: #1d4ed8; --c_primary_dark: #1e3a8a; --c_primary_light: #dbe7ff; /* ===== カラー：アクセント ===== */ --c_accent: #f59e0b; --c_accent_dark: #b45309; /* ===== カラー：ボーダー・区切り ===== */ --c_border: #e5e7eb; --c_border_light: #f1f3f5; /* neutral-tech 用：強めの線（カード輪郭・hairline）。--c_border より一段濃く。 */ --c_border_strong: #cbd5e1; /* グリッドのドット／格子用の極薄ライン */ --c_grid_line: #eef2f7; /* ===== カラー：ヘッダー／フッター ===== */ --c_header_bg: #ffffff; --c_header_text: #1f2937; --c_header_border: #e5e7eb; --c_footer_bg: #141a26; --c_footer_text: #d1d5db; --c_footer_text_muted: #9ca3af; /* ===== カラー：ステータス ===== */ --c_state_success: #16a34a; --c_state_warning: #f59e0b; --c_state_danger: #dc2626; /* ===== フォント ===== */ --font_base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "メイリオ", sans-serif; --font_heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "メイリオ", sans-serif; --font_en: "Lato", "Helvetica Neue", Arial, sans-serif; /* ===== レイアウト基準 ===== */ --max_content_width: 1200px; --max_text_width: 880px; --header_height_pc: 80px; --header_height_sp: 60px; /* ===== 余白 ===== */ --space_xs: 4px; --space_sm: 8px; --space_md: 16px; --space_lg: 24px; --space_xl: 40px; --space_2xl: 64px; --space_3xl: 96px; /* ===== 角丸 ===== */ --radius_sm: 4px; --radius_md: 8px; --radius_lg: 16px; --radius_pill: 999px; /* ===== シャドウ ===== */ --shadow_sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow_md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow_lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* ===== トランジション ===== */ --transition_fast: 0.15s ease; --transition_base: 0.25s ease; } /* ===== ライトテーマ（コンテナ環境設定 ADMIN_THEME=light に対応） ===== page_module.css の [data-theme="light"] と同じ緑系。 見出し・ヘッダー・ボタンを通じて統一カラー（#0a9913）で表示する。 */ [data-theme="light"] { --c_primary: #0a9913; --c_primary_dark: #086f0f; --c_primary_light: #d6f0d8; --c_text_link: #086f0f; --c_text_link_hover: #064d0a; } /* ===== ダークテーマ：[data-theme="dark"] で適用 ===== */ [data-theme="dark"] { --c_bg_base: #0f172a; --c_bg_section: #1e293b; --c_bg_card: #1e293b; --c_bg_overlay: rgba(0, 0, 0, 0.65); --c_text: #e5e7eb; --c_text_muted: #94a3b8; --c_text_inverse: #0f172a; --c_text_link: #93c5fd; --c_text_link_hover: #bfdbfe; --c_primary: #60a5fa; --c_primary_dark: #3b82f6; --c_primary_light: #1e3a8a; --c_accent: #fbbf24; --c_accent_dark: #d97706; --c_border: #334155; --c_border_light: #1f2937; --c_border_strong: #475569; --c_grid_line: #1f2937; --c_header_bg: #0f172a; --c_header_text: #e5e7eb; --c_header_border: #334155; --c_footer_bg: #020617; --c_footer_text: #cbd5e1; --c_footer_text_muted: #64748b; } /* ===== ウォーム系プリセット（テーマ設定で切替想定） ===== */ [data-theme="warm"] { --c_bg_base: #fffdf8; --c_bg_section: #faf3e7; --c_primary: #c1440e; --c_primary_dark: #8a2f08; --c_primary_light: #fde6d8; --c_accent: #2c7a7b; --c_border_strong: #d6c9b3; --c_grid_line: #f1e9d8; --c_footer_bg: #2b1d10; } /* ===== クール系プリセット ===== */ [data-theme="cool"] { --c_bg_base: #ffffff; --c_bg_section: #eef4f8; --c_primary: #0f766e; --c_primary_dark: #134e4a; --c_primary_light: #ccfbf1; --c_accent: #f97316; --c_border_strong: #b8cad7; --c_grid_line: #e3edf3; --c_footer_bg: #0f1f2a; }