/* =========================================================
   Design tokens
   Figma 側は Variables 未整備（生 hex のみ）だったため、出現箇所から命名している。
   ========================================================= */
:root {
  /* --- color: text --- */
  --color-text: #333333;          /* 本文・見出しの基本色 */
  --color-text-strong: #111111;   /* KV の見出し */
  --color-text-movie: #1a1110;    /* 「まずは、音をONに…」 */
  --color-text-sub: #555555;      /* 特徴カードの本文・FAQ の A バッジ */
  --color-text-muted: #666666;    /* フォームの注記 */
  --color-text-price: #5a5a52;    /* オプション料金 */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-logo: #231815;

  /* --- color: brand --- */
  --color-yellow: #f5b800;
  --color-orange: #f04e23;
  --color-magenta: #d4006a;
  --color-red: #d40004;           /* 背景グラデーションの終端（帯・薄い背景） */
  --color-coral: #ff7068;         /* KV キャッチ下のマーカー */

  /* --- color: surface / line --- */
  --color-dark: #2a2a2a;          /* AD30 カード */
  --color-movie: #2b2b2b;         /* 動画プレースホルダ */
  --color-peach: #ffdcc1;         /* AD15 / AD60 の帯 */
  --color-border: #eeeeee;        /* 活用シーンのカード枠 */
  --color-line: #efefef;          /* フォームの区切り線 */
  --color-input-border: #dddddd;
  --color-input-bg: #f8f8f8;
  --color-bg-page: #f8f8f8;        /* お問い合わせ完了画面の地 */
  --color-hover-bg: #f0f0f0;      /* ヘッダーのリンクのホバー */
  --color-required: #de0000;
  --color-error-text: #ff2e2e;   /* フォームのエラー文 */
  --color-error-bg: #fff0f0;
  --color-link: #2667be;
  --color-focus-from: rgb(56 165 182 / 0.9);  /* 入力欄フォーカス（Figma の「お名前」欄） */
  --color-focus-to: rgb(56 88 204 / 0.9);
  --color-divider: rgb(0 0 0 / 0.1);

  /* --- gradient --- */
  --grad: linear-gradient(90deg, var(--color-yellow) 0%, var(--color-orange) 50%, var(--color-magenta) 100%);
  --grad-diag: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-orange) 50%, var(--color-magenta) 100%);
  /* セクション背景の薄いグラデーション（不透明度 7%） */
  --grad-tint: linear-gradient(90deg, rgb(245 184 0 / 0.07) 0%, rgb(240 78 35 / 0.07) 50%, rgb(212 0 4 / 0.07) 100%);
  --grad-tint-light: linear-gradient(90deg, rgb(245 184 0 / 0.03) 0%, rgb(240 78 35 / 0.03) 50%, rgb(212 0 4 / 0.03) 100%);
  --grad-tint-contact: linear-gradient(90deg, rgb(245 184 0 / 0.07) 0%, rgb(240 78 35 / 0.07) 50%, rgb(212 0 106 / 0.07) 100%);

  /* --- font --- */
  --font-base: "Inter", "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-price: "IBM Plex Sans Condensed", "Inter", sans-serif;  /* Figma: DIN 2014（Web 配信なし）の代替 */

  /* --- shadow --- */
  --shadow-card: 0 8px 9px rgb(0 0 0 / 0.05);
  --shadow-cta: 0 16.91px 16px rgb(0 0 0 / 0.2);

  /* --- layout --- */
  --container: 1200px;
  --gutter: 16px;
  --section-pad: 40px;            /* SP: 上下 40 / PC: 80 */
  --section-gap: 24px;            /* SP: 24 / PC: 40 */
}

@media (min-width: 768px) {
  :root {
    --section-pad: 80px;
    --section-gap: 40px;
  }
}