@charset 'UTF-8';

/* ============================================================
   CF Theme - CSS カスタムプロパティ（変数）一元管理ファイル

   ★ 新しいコース・ページ・パーツを追加する際はここに追記 ★

   目次:
     1. ブランドカラー
     2. コースカラー       ← 新コース追加時はここ
     3. セマンティックエイリアス（後方互換）
     4. テキストカラー
     5. 背景カラー
     6. フォントサイズ
     7. 余白（スペーシング）
     8. 角丸（ボーダーラジアス）
     9. シャドウ
    10. トランジション
    11. レイアウト（コンテナ幅）
    12. コース別テーマカラー ← 新コース追加時はここにも追記
   ============================================================ */

:root {

  /* ============================================================
     1. ブランドカラー
     ============================================================ */
  --base-color:             #c8f806;   /* ライム（メインアクセント） */
  --color-lime-mid:         #BEEA0B;   /* ライム（装飾用・やや暗め） */
  --color-blue:             #0632F8;   /* ブルー（サブアクセント） */
  --color-orange:           #ef4110;   /* オレンジ（強調・CTA） */
  --color-yellow:           #f8ee06;   /* イエロー（ハイライト） */
  --color-link:             #2c8ae8;   /* リンクカラー */

  /* ============================================================
     2. コースカラー
     新しいコースを追加する際は↓に1行追記してください
     例）--color-newCourse: #xxxxxx;   /* 新コース名 */
     そして 12. コース別テーマカラー にも .is-newCourse を追記 */
  /* ============================================================ */
  --color-webStart:         #4CF9A5;   /* Webスタートコース */
  --color-design:           #f8ee06;   /* Webデザインコース */
  --color-onlineGym:        #53d6ff;   /* オンラインジム */

  /* ============================================================
     3. セマンティックエイリアス（後方互換）
        既存コードの var(--accent-orange) 等を解決します
     ============================================================ */
  --base-fontColor:         #111;
  --accent-blue:            var(--color-blue);
  --accent-orange:          var(--color-orange);
  --accent-yellow:          var(--color-yellow);

  /* ============================================================
     4. テキストカラー
     ============================================================ */
  --color-text-black:       #111;
  --color-text-dark:        #333;
  --color-text-mid:         #555;
  --color-text-light:       #777;
  --color-text-white:       #fff;

  /* ============================================================
     5. 背景カラー
     ============================================================ */
  --color-bg-white:         #fff;
  --color-bg-light:         #f9f9f9;
  --color-bg-gray:          #efefef;
  --color-bg-slate:         #3a4551;   /* スレート（ダークカード背景・使い回し用） */
  --color-bg-dark:          #444;
  --color-bg-black:         #111;

  /* ============================================================
     6. フォントサイズ
     ============================================================ */
  --fontSizeXS:             12px;
  --fontSizeS:              14px;
  --fontSizeM:              16px;
  --fontSizeXM:             24px;
  --fontSizeL:              32px;
  --fontSizeXL:             36px;

  /* ============================================================
     7. 余白（スペーシング）
     ============================================================ */
  --spacing-xs:             10px;
  --spacing-s:              20px;
  --spacing-m:              40px;
  --spacing-l:              60px;
  --spacing-xl:             100px;
  --spacing-xxl:            170px;

  /* ============================================================
     8. 角丸（ボーダーラジアス）
     ============================================================ */
  --radius-s:               6px;
  --radius-m:               10px;
  --radius-l:               20px;
  --radius-xl:              40px;
  --radius-pill:            60px;

  /* ============================================================
     9. シャドウ
     ============================================================ */
  --shadow-card:            0px 0px 36px 0px rgba(137, 172, 92, 0.15);
  --shadow-soft:            0 0 20px rgba(0, 0, 0, 0.1);
  --shadow-btn:             0 2px 8px rgba(0, 0, 0, 0.1);

  /* ============================================================
     10. トランジション
     ============================================================ */
  --transition-fast:        0.2s ease-in;
  --transition-base:        0.3s ease-in-out;
  --transition-slow:        0.4s;

  /* ============================================================
     11. レイアウト（コンテナ幅）
     ============================================================ */
  --inner-width:            90%;
  --max-width-full:         1480px;
  --max-width-wide:         1400px;
  --max-width-base:         1100px;
  --max-width-mid:          960px;
  --max-width-narrow:       880px;
  --max-width-min:          640px;
}

/* ============================================================
   12. コース別テーマカラー設定

   各コースページの <body> に付与するクラスで
   --course-color を上書きし、コース固有の色を管理します。

   新しいコースを追加する際はここに追記してください：
   .is-newCourse {
     --course-color: var(--color-newCourse);
   }
   ============================================================ */

/* デフォルト（TOPページ・コース未指定） */
:root {
  --course-color: var(--base-color);
}

/* Webスタートコース */
.is-webStart {
  --course-color: var(--color-webStart);
}

/* Webデザインコース */
.is-design {
  --course-color: var(--color-design);
}

/* オンラインジム */
.is-onlinegym {
  --course-color: var(--color-onlineGym);
}