/* ベーススタイル */

/* 配色（色を変えるときはここだけ直す）
   --primary       … メインカラー（オレンジ）：ボタン・バッジ・アコーディオン番号など「行動してほしい所」
   --primary-dark  … メインカラーの濃い色：オレンジ地の上の囲み・リンクの hover
   --green         … 濃い緑：マイル（もらえる・たまる）に関わる数字・アイコン
   --green-light   … 薄い緑：Hero のスマホ画面イメージ（アプリ画面）の背景など
   --green-bg      … 緑のセクション背景（Hero の背景）。--green-light より5%濃い
   --blue          … 青（さわかみ投信のメインカラー）：「投信での貯め方」など、さわかみ投信の話題
   --blue-light    … 薄い青：青に関わる背景
   --page-bg       … ページ全体の背景（薄い青グレー）。元の #F2F5FA より5%濃い
   --gold 系       … Hero の背景の円（大・中・小）。#E9A121 を基準に明るさだけを変えたバリエーション */
:root {
  --primary: #C64D00;
  --primary-dark: #9A3C00;
  --green: #18955F;
  --green-light: #EDF8F4;
  --green-bg: #DBF1E9;
  --blue: #004896;
  --blue-light: #E8F0F8;
  --page-bg: #E0E7F3;
  --page-bg-light-20: #E6ECF5;   /* --page-bg に白を20%混ぜた色（背景の円） */
  --page-bg-light-40: #ECF1F8;   /* --page-bg に白を40%混ぜた色（背景の円） */
  --gold: #E9A121;          /* ① 基準 */
  --gold-light-10: #EEB54F; /* ② 10%明るい */
  --gold-dark-10: #C38414;  /* ③ 10%暗い */
  --gold-light-20: #F2C87E; /* ④ 20%明るい */
  --gold-light-30: #F7DCAC; /* ⑤ 30%明るい */
  --gold-light-40: #FBF0DB; /* ⑥ 40%明るい */
}

/* hidden 属性の要素は必ず非表示（アコーディオンの閉じた状態） */
.lp [hidden] { display: none !important; }

/* ページ内リンク（#benefit など）で移動するとき、なめらかにスクロールする */
html { scroll-behavior: smooth; }

/* 動きを減らす設定の端末では、スクロール・開閉の動きをすべて止める */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp *,
  .lp *::before,
  .lp *::after,
  .lp .zoom-dialog::backdrop { transition-duration: 0s !important; animation-duration: 0s !important; }
}

body{margin:0;background:var(--page-bg);color:#16213A;font-family:'BIZ UDPGothic','Hiragino Sans','Meiryo',sans-serif}

a{color:var(--primary)}
a:hover{color:var(--primary-dark)}