@charset "UTF-8";

/* ==========================================================================
   Variables & Design Tokens（共通デザイン定義）
   ========================================================================== */
:root {
  /* ── ブランドカラー ── */
  --color-primary: #fac148;        /* メインカラー（マキシムイエロー） */
  --color-accent-orange: #ff7900;  /* アクセントカラー（オレンジ） */
  --color-accent-blue: #1760ff;    /* アクセントカラー（青） */
  --color-accent-red: #ef4444;     /* アクセントカラー（赤） */
  --color-accent-green: #00b927;   /* アクセントカラー（緑） */

  /* ガチャ王国 カラー */
  --color-gacha: #e70004;
  --color-gacha-light: #ff877e;
  
  /* ASOBI-GOCORO カラー */
  --color-asobi: #00beca;          /* メインシアン */
  --color-asobi-pink: #ed0dea;     /* 見出しアクセントピンク */
  --color-asobi-bg: #333333;       /* ダーク背景色 */

  /* ── テキストカラー ── */
  --color-text-main: #333333;      /* メイン文字色（ダークグレー） */
  --color-text-sub: #666666;       /* サブ文字色（グレー） */
  --color-text-muted: #888888;     /* 補足・英語タイトル用（ライトグレー） */
  --color-text-white: #ffffff;     /* 白文字 */
  --color-text-dark: #000000;      /* 黒文字 */

  /* ── ベース・背景色・枠線色 ── */
  --color-bg-white: #ffffff;       /* 背景色（白） */
  --color-bg-gray: #f5f5f5;        /* セクション背景切り替え用（薄グレー） */
  --color-bg-dark-gray: #444444;   /* ダミー画像・プレースホルダー用グレー */
  --color-bg-light-gray: #e0e0e0;  /* 薄いグレー背景 */
  --color-border-line: #e0e0e0;    /* 境界線・区切り線 */
  --color-border-dark-line: rgba(0, 0, 0, 0.15); /* フッター透過ボーダー */

  /* ── 透過・シャドウカラー ── */
  --color-overlay-black: rgba(0, 0, 0, 0.45);  /* MV等で使用する黒透過フィルター */
  --color-shadow-black: rgba(0, 0, 0, 0.35);   /* ロゴアニメーション影 */
  --color-shadow-card: rgba(0, 0, 0, 0.15);    /* カード・バッジの影 */
  --color-shadow-header: rgba(0, 0, 0, 0.05);  /* ヘッダーの影 */

  /* ── フォントサイズ体系 ── */
  --font-size-concept: 36px;
  --font-size-concept-sp: 20px;

  --font-size-h2-en: 48px;
  --font-size-h2-en-sp: 32px;
  --font-size-h2-ja: 18px;
  --font-size-h2-ja-sp: 16px;

  --font-size-h3-en: 36px;
  --font-size-h3-en-sp: 32px;
  --font-size-h3-ja: 18px;
  --font-size-h3-ja-sp: 16px;

  --font-size-body: 16px;
  --font-size-body-sp: 15px;

  /* ── 余白・間隔 ── */
  --space-section-pv: 100px;     /* セクション上下余白（PC） */
  --space-section-pv-sp: 70px;   /* セクション上下余白（SP） */
  --space-heading-mb: 60px;      /* 見出し下の余白 */
  --space-heading-mb-sp: 40px;   /* 見出し下の余白（SP） */

  /* ── フォントファミリー ── */
  --font-family-base: "M PLUS U", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-family-en: "M PLUS U", "Arial", sans-serif;

  /* ── アニメーション・UI要素 ── */
  --transition-base: all 0.3s ease;
  --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.08);
}