/* ============================================= テーマカラー切り替えスタイル（各幼稚園向け） ■ 使い方 ■ 1. タグにテーマクラスをつけるだけで色が切り替わります。例： ← ピンク（デフォルト） ← オレンジ ← グリーン ← ブルー 2. 色はすべてCSS変数で管理しているので、 :root と各 .theme-xxxx で色の調整が可能です。 3. JavaScriptでbodyのclassを動的に切り替えることも簡単です。 include/config.php で切り替えられる ============================================= */ /* ========================================= ベースカラーパレット（共通色） ========================================= */ :root { --main-bg: #ffffff; --main-text: #52311b; --border-color: #8f5a2c; --disabled-bg: #dcd4c9; --white: #ffffff; --accent-color: #e58499; /* デフォルト：ピンク */ --accent-hover: #6b4a2e; } /* ========================================= テーマ定義（必要なカラーだけ上書き） ========================================= */ .theme-pink { --accent-color: #e58499; --accent-hover: #c06377; } .theme-orange { --accent-color: #f4b183; --accent-hover: #d89a5a; } .theme-green { --accent-color: #a3c3a0; --accent-hover: #7ca87a; } .theme-blue { --accent-color: #a6c7e2; --accent-hover: #76a6cd; } /* ========================================= スタイル適用（変数ベースで共通化） ========================================= */ body#front { background-color: var(--main-bg) !important; color: var(--main-text) !important; } #header, #header h1 { background-color: var(--accent-color) !important; color: var(--white) !important; } h1, h2, h3, h4 { color: var(--main-text) !important; } .schedule{ background: var(--main-bg) !important; color: var(--main-text) !important; } .schedule table tbody td { background: var(--main-bg) !important; color: var(--main-text) !important; border: 1px solid var(--border-color) !important; } .schedule table thead td { background-color: var(--accent-color) !important; color: var(--white) !important; } .yoyakuok, .yoyakuok .labels { background-color: var(--disabled-bg) !important; color: var(--main-text) !important; font-weight: bold !important; } .kubun.end { background: var(--main-text) !important; color: var(--white) !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 0.8em !important; } button.form-btn { background: var(--accent-color) !important; color: var(--white) !important; border: none !important; border-radius: 6px !important; padding: 6px 12px !important; cursor: pointer !important; box-shadow: 1px 1px 3px rgba(0,0,0,0.2) !important; transition: background 0.2s ease !important; } button.form-btn:hover { background: var(--accent-hover) !important; } a, a.tel { color: var(--main-text) !important; text-decoration: underline !important; } a:hover, a.tel:hover { color: var(--border-color) !important; } .yoyaku_form .note .noteBox h3 { color: #ffffff !important; } .schedule td.yoyakuok { background-color: var(--disabled-bg) !important; color: var(--main-text) !important; } /* ============================= ↑ここから下に新しい調整を追加してください ============================= */