@charset "UTF-8";
/* CSS Document */
/* ==========================================================================
   ★★★ 編集・使用する際の運用ルール ★★★
   ==========================================================================
   1. 実装時は「2. Semantic Colors」を優先して使う
      - 実際に色を指定する際は `color: var(--clr-primary);` ではなく
        `color: var(--text-main);` のように「役割」の名前を使う。
      - これにより、色名が変わっても修正箇所をゼロにできる。

   2. パレットに「色名」を入れない
      - 「--clr-navy」ではなく「--clr-primary」と呼ぶ。
      - 「ゴールドをシルバーに変えたい」と言われた時に、変数名を変えずに
        値（#BAAD75 → #C0C0C0）だけ変えれば済むようにするため。

   3. 新しい色を追加する時のフロー
      ① まず「その色は既存のパレットで代用できないか？」を検討する。
      ② できない場合のみ「1. Color Palette」に新しい役割名で追加する。
      ③ その後、新しい色を使った「2. Semantic Colors」を定義する。
   ========================================================================== */
:root {
  /* ==========================================================================
      1. パレット（1. Color Palette）
      使用するカラーをここで一括管理。色名を使わず「プロジェクト内の役割」で命名。
      新たにカラーを追加する場合はここに記載する
     ========================================================================== */
  /* メイン系統（メイン：ネイビー） */
  --clr-primary: #1F2536;
  /* アクセント系統（強調・リンク：ゴールド） */
  --clr-accent: #BAAD75;
  /* ★基本のゴールド */
  --clr-accent-light: #DED5B9;
  /* ★明るめのゴールド */
  /* サブ系統（情報・補足：ブルー） */
  --clr-info: #0970C7;
  /* ニュートラル系統（白・グレー） */
  --clr-white: #ffffff;
  --clr-gray-light: #EFF1F5;
  /* 背景用 */
  --clr-gray-medium: #E0E0E0;
  /* 線用 */
  --clr-gray-dark: #666666;
  /* 補足文字用 */
  --clr-gray-dim: #D3DBE4;
  /* グラデーション補助用 */
  /* グラデーション透過系統（オーバーレイ・補助用） ★追加箇所 */
  --clr-bg-overlay-light: rgba(211, 219, 228, 0.4);
  --clr-bg-overlay-dark: rgba(31, 37, 54, 0.5);
  /* ==========================================================================
     2. 役割（2. Semantic Colors）
	 役割：実装では必ずこちらを使用する。カラーの変更はパレットで指定。
	　新たに装飾を追加する場合は、色は使わず役割で指定。
     ========================================================================== */
  /* 背景 (Background) */
  --bg-primary: var(--clr-white);
  --bg-secondary: var(--clr-gray-light);
  --bg-dark: var(--clr-primary);
  /* 文字 (Text) */
  --text-main: var(--clr-primary);
  --text-sub: var(--clr-gray-dark);
  --text-inverse: var(--clr-white);
  --text-link: var(--clr-accent);
  --text-action-accent: var(--clr-accent);
  --text-action-sub: var(--clr-info);
  /* 装飾・アクセント (Action / Accent) */
  --action-primary: var(--clr-primary);
  --action-accent: var(--clr-accent);
  --action-sub: var(--clr-info);
  --action-light: var(--clr-accent-light);
  /* 境界線 (Border) */
  --border-dark: var(--clr-primary);
  --border-light: var(--clr-gray-medium);
  --border-accent: var(--clr-accent);
  --border-action-sub: var(--clr-info);
  /* グラデーション (Gradient) */
  --grad-surface: linear-gradient(90deg, var(--clr-bg-overlay-light) 0%, var(--clr-bg-overlay-dark) 90%);
  --grad-base-to-right: linear-gradient(to right, #EDF0F5 0%, #F4F6F9 100%);
  --grad-dark-to-right: linear-gradient(to right, var(--clr-primary) 0%, #2C344B 100%); }