@charset "utf-8";
/* ==========================================================================
   Color Tokens（カラートークン）
   色の変更はここを修正すれば全体に反映されます
   ※このファイルは PC/SP 共通で全ページの最初に読み込むこと

   【目次】
   1. 基本色（文字色など）
   2. 境界線・背景
   3. ブランド・アクセント（ボタン・タブなどの色）
   4. 施設テーマ色（予約カード用：Blue Ocean／GREEN SPRINGS）
   5. 年度アコーディオンの開閉ボタン
   6. 予約詳細ページのボタン類（reservation.html）
   7. 予約詳細ページ：GREEN SPRINGS 用
   8. グラデーション用（MenuArea）
   9. 影（黒の透過色）
   ========================================================================== */
:root {
	/* ---------- 1. 基本色（文字色など） ---------- */
	--color-white: #fff;
	--color-text: #333;          /* 基本の文字色 */
	--color-text-dark: #444;
	--color-text-sub: #666;      /* 補足の文字色 */
	--color-gray: #999;

	/* ---------- 2. 境界線・背景 ---------- */
	--color-border: #ccc;
	--color-border-gray: #cbcbcb;
	--color-border-light: #ddd;
	--color-bg-gray: #f5f5f5;
	--color-bg-blue-light: #edf0fb;  /* 表ヘッダーなどの薄い青 */
	--color-bg-pink-light: #fbedf1;  /* 表ヘッダーなどの薄いピンク */

	/* ---------- 3. ブランド・アクセント（ボタン・タブなどの色） ---------- */
	--color-primary: #3984be;    /* メインの青(ボタン・メニュー) */
	--color-accent: #e72431;     /* タブなどの赤 */
	--color-danger: #e60012;     /* 強調・注意の赤 */
	--color-error: #f00;         /* エラー表示の赤 */
	--color-logo-red: #e60012;   /* TGGロゴの赤(ヘッダーロゴ画像から取得) ※棟名 E1-4F の色などに使用 */
	--color-logo-blue: #0091db;  /* TGGロゴの青(ヘッダーロゴ画像から取得) ※棟名 W2-3F の色などに使用 */
	--color-flow: #6c8bfb;       /* フローガイドの青紫 */
	--color-flow-sub: #6f8cfb;   /* フロー・メニューの青紫(ボタン系) */
	--color-flow-green: #4CAF50;     /* フローガイド：GREEN SPRINGS 用の少し薄い緑(予約一覧の #008000 に対して、青版の #1263CF→#6c8bfb と同じ関係) ※.flowGuide に .-greensprings を付けると切り替わる */
	--color-flow-sub-green: #4CAF50; /* フローガイド：GREEN SPRINGS 用の少し薄い緑(ボタン系) */
	--color-flow-bg-green: #ECFBEC;  /* フローガイド：GREEN SPRINGS 用の薄い緑(注意ボックスの背景など) */
	--color-submit: #668ad8;     /* 送信ボタンの青 */
	--color-reserve: var(--color-blueocean);  /* 予約関連の基本色(年度アコーディオンなど) */

	/* ---------- 4. 施設テーマ色（予約カード用） ----------
	   カードに .-greensprings クラスを付けると緑系に切り替わります */
	--color-blueocean: #1263CF;       /* Blue Ocean:アイコン・文字の青(予約詳細ページのボタンと同じ濃い青) */
	--color-blueocean-bg: #1263CF;    /* Blue Ocean:カード背景の青(予約詳細ページのボタンと同じ濃い青) */
	--color-greensprings: #008000;    /* GREEN SPRINGS:アイコン・文字の緑(新緑イメージ) */
	--color-greensprings-bg: #008000; /* GREEN SPRINGS:カード背景の緑(新緑イメージ) */
	--color-past: #727272;            /* 過去の予約カード:アイコン・文字のグレー */
	--color-past-bg: #727272;         /* 過去の予約カード:カード背景のグレー(ログアウトボタンと同系) */

	/* ---------- 5. 年度アコーディオンの開閉ボタン（「2025年度」など） ----------
	   .-greensprings クラスを付けると緑系に切り替わります */
	--accordion-color: var(--color-reserve);  /* 枠線・文字・開閉アイコンの色 */
	--accordion-bg: var(--color-white);       /* 背景色 */
	--accordion-bg-hover: #f5fbff;            /* マウスオーバー時の背景(薄い水色) */
	--accordion-bg-hover-green: #ECFBEC;      /* GREEN SPRINGS:マウスオーバー時の背景(薄い緑) */

	/* ---------- 6. 予約詳細ページのボタン類（reservation.html） ----------
	   .reserveAction に .-greensprings クラスを付けると緑系に切り替わります */
	--action-primary: #1263cf;        /* 青塗りボタンの背景/白抜きボタンの枠線・文字 */
	--action-primary-dark: #0462d6;   /* 白抜きボタン下端の影 */
	--action-divider-text: #1b3457;   /* 「書類ダウンロード」見出しの文字 */
	--action-divider-line: #6090cb;   /* 見出し左右のライン */
	--action-dl-border: #80a8d2;      /* ダウンロードボタンの枠線・下影 */
	--action-dl-bg: #f1f8fd;          /* ダウンロードボタンの背景 */
	--action-dl-icon-bg: #d8e8fb;     /* ダウンロードアイコンの丸背景 */

	/* ---------- 7. 予約詳細ページ：GREEN SPRINGS 用 ---------- */
	--action-primary-green: #008000;
	--action-primary-dark-green: #008000;
	--action-divider-text-green: #124812;
	--action-divider-line-green: #52C052;
	--action-dl-border-green: #9BD89B;
	--action-dl-bg-green: #ECFBEC;
	--action-dl-icon-bg-green: #CEF4CE;

	/* ---------- 8. グラデーション用（MenuArea） ---------- */
	--color-grad-purple: #4f003b;
	--color-grad-indigo: #1b1d8e;
	--color-grad-navy: #002858;
	--color-grad-green: #007958;

	/* ---------- 9. 影（黒の透過色） ----------
	   数字は濃さ(不透明度)を表す。例:--shadow-15 = 15% の黒 */
	--shadow-10: rgba(0, 0, 0, 0.1);
	--shadow-15: rgba(0, 0, 0, 0.15);
	--shadow-20: rgba(0, 0, 0, 0.2);
	--shadow-25: rgba(0, 0, 0, 0.25);
	--shadow-50: rgba(0, 0, 0, 0.5);
}