/* =========================================================
   Design tokens（Figma の変数）
   ---------------------------------------------------------
   ブレイクポイント一覧（CSS 変数はメディアクエリに使えないため、ここに記録）
     1280px … PCレイアウトのまま左右余白を縮小
     1180px … 料金プランを折り返し
     1140px … フッター最下段を縦積み
     1100px … お悩みセクションを2段組に
      980px … ヘッダーをドロワー化・FVを縦積み（スマホ／タブレット）
      768px … お客様の声を1カラム・フッター縦積み
      560px … スマホ向けにボタン等を縮小
   ========================================================= */
:root {
  --main: #1951a5;          /* メイン */
  --main-3: #458bf5;        /* メイン3 */
  --accent: #ee973a;        /* アクセント */
  --bg: #ffffff;            /* 背景 */
  --bg-2: #ecf3fe;          /* 背景2 */
  --text: #444648;          /* 文字 */
  --yellow: #e4d550;

  --container: 1140px;
  --gutter: clamp(20px, 10.4vw, 150px);
  --section-pt: clamp(56px, 6.95vw, 100px);

  --shadow-btn: 0 4px 2px rgba(0, 0, 0, .25);
  --header-h: 81px;
}

@media (max-width: 1280px) {
  :root { --gutter: clamp(24px, 5.5vw, 80px); }
}