/* レイアウト・装飾スタイル
   ・すべて .lp の中だけに効くように書いています（base.css の a:hover より優先させるため）
   ・「共通」は複数のセクションで使うもの、それ以降はセクション専用です
   ・メインカラーは base.css の --primary で指定します */

/* ==================================================
   ページ全体
   ================================================== */
/* 幅は画面いっぱい・高さは中身に合わせて自動
   --gutter … 各セクションの左右の余白。中身の幅を最大1136px（＝1280px − 左右72px）に保ち、
              それより広い画面では余白が広がって中央にそろう（背景は画面幅100%） */
.lp { --gutter: max(72px, calc((100% - 1136px) / 2)); background: var(--page-bg); font-family: 'BIZ UDPGothic','Hiragino Sans','Meiryo',sans-serif; color: #16213A; font-size: 18px; line-height: 1.8; }

/* ==================================================
   共通：セクションの枠
   セクションごとに上下の余白と要素の間隔が少しずつ違います
   ================================================== */
/* 特典・会員ランクの1年 */
.lp .section { padding: 96px var(--gutter) 40px; display: flex; flex-direction: column; gap: 36px; }
/* 会員ランクの決まり方 */
.lp .section-rank { padding: 112px var(--gutter) 40px; display: flex; flex-direction: column; gap: 36px; }
/* 会員登録と口座連携の方法 */
.lp .section-start { padding: 96px var(--gutter) 0; display: flex; flex-direction: column; gap: 28px; }
/* マイルの貯め方・使い方 */
.lp .section-earn { padding: 96px var(--gutter) 0; display: flex; flex-direction: column; gap: 32px; }
/* よくあるご質問 */
.lp .section-faq { padding: 96px var(--gutter) 40px; display: flex; flex-direction: column; gap: 28px; }
/* セクション見出し＋リード文のまとまり */
.lp .section-head { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
/* セクション見出し（h2） */
.lp .section-title { margin: 0; font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-size: 40px; line-height: 1.4; }
/* セクションのリード文 */
.lp .section-lead { margin: 0; font-size: 19px; }

/* ==================================================
   共通：見出し（丸ゴシック）
   名前の数字は文字サイズ(px)
   ================================================== */
.lp .title-maru-20 { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-weight: 700; font-size: 20px; }
.lp .title-maru-22 { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-weight: 700; font-size: 22px; }
.lp .title-maru-24 { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-weight: 700; font-size: 24px; }
.lp .title-maru-26 { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-weight: 700; font-size: 26px; }

/* ==================================================
   共通：文字
   名前の数字は文字サイズ(px)
   ================================================== */
/* 太字 */
.lp .text-bold { font-weight: 700; }
/* 太字 16px（スマホ画面イメージの見出し・手順名） */
.lp .title-16 { font-size: 16px; font-weight: 700; }
/* 太字 19px（お知らせの見出し・よくあるご質問のQ） */
.lp .text-19 { font-weight: 700; font-size: 19px; }
/* 太字 15px（補足の一言） */
.lp .note-bold { font-size: 15px; font-weight: 700; }
/* 本文 16px */
.lp .text-16 { font-size: 16px; line-height: 1.8; }
/* 説明文 16px・グレー */
.lp .desc-16 { font-size: 16px; color: #4A5568; }
/* 説明文 15px・グレー */
.lp .desc-15 { font-size: 15px; color: #4A5568; line-height: 1.7; }
/* 説明文 14px・グレー */
.lp .desc-14 { font-size: 14px; color: #4A5568; line-height: 1.7; }
/* グレー文字 15px */
.lp .muted-15 { font-size: 15px; color: #4A5568; }
/* グレー文字 14px */
.lp .muted-14 { font-size: 14px; color: #4A5568; }
/* 数字の後ろの単位（マイル など） */
.lp .unit { font-size: 14px; }

/* ==================================================
   共通：レイアウト
   ================================================== */
/* 縦並び（間隔10px） */
.lp .stack-10 { display: flex; flex-direction: column; gap: 10px; }
/* 3列グリッド */
.lp .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* 4列グリッド */
.lp .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* 5列グリッド */
.lp .grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
/* 白いカード（写真＋本文） */
.lp .card { background: #FFFFFF; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
/* 枠線ボタン（色は u-border-primary / u-color-primary で指定） */
.lp .btn-outline { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 26px; background: #FFFFFF; text-decoration: none; font-weight: 700; }

/* ==================================================
   共通：表（特典・条件）
   ================================================== */
/* 表の外枠 */
.lp .table-wrap { background: #FFFFFF; border-radius: 26px; padding: 12px 28px 20px; overflow-x: auto; }
/* 表のグリッド（1列目200px＋5列） */
.lp .table-grid { display: grid; grid-template-columns: 200px repeat(5, minmax(0, 1fr)); font-size: 17px; }
/* 左上の空きセル */
.lp .table-corner { padding: 20px 8px; border-bottom: 1px solid #DCE3EE; }
/* 行見出し */
.lp .table-rowhead { padding: 22px 8px; border-bottom: 1px solid #DCE3EE; display: flex; flex-direction: column; gap: 4px; }
/* 行見出し（最終行・下線なし） */
.lp .table-rowhead-last { padding: 22px 8px; display: flex; flex-direction: column; gap: 4px; }
/* 行見出しの補足 */
.lp .table-note { font-size: 14px; color: #4A5568; line-height: 1.6; }

/* ==================================================
   共通：ランクバッジ
   形・大きさ・色の3つを組み合わせて使います
   例）class="rank-badge rank-badge-sm rank-gold"
   ================================================== */
/* 形（丸・白文字・中央揃え） */
.lp .rank-badge { color: #FFFFFF; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
/* 大きさ：小 28px（特典の表） */
.lp .rank-badge-sm { width: 28px; height: 28px; font-size: 14px; flex-shrink: 0; }
/* 大きさ：大 40px（条件の表） */
.lp .rank-badge-lg { width: 40px; height: 40px; font-weight: 700; font-size: 18px; }
/* 色：ブロンズ */
.lp .rank-bronze { background: #5B4108; }
/* 色：シルバー */
.lp .rank-silver { background: #8A8A8A; }
/* 色：ゴールド */
.lp .rank-gold { background: #9B7A1E; }
/* 色：プラチナ */
.lp .rank-platinum { background: #C5D9F5; }
/* 色：ダイヤモンド */
.lp .rank-diamond { background: #000000; }

/* ==================================================
   共通：要確認メモ（公開前に削除）
   ================================================== */
/* メモ（1行） */
.lp .memo { align-self: flex-start; background: #FDE7A8; color: #6B4A00; padding: 0 8px; border-radius: 4px; font-size: 13px; }
/* メモ（文中・13px） */
.lp .memo-inline { background: #FDE7A8; color: #6B4A00; padding: 0 6px; border-radius: 4px; font-size: 13px; }
/* メモ（文中・12px） */
.lp .memo-inline-sm { background: #FDE7A8; color: #6B4A00; padding: 0 6px; border-radius: 4px; font-size: 12px; }

/* ==================================================
   Header
   ================================================== */
.lp .header { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); background: #FFFFFF; border-bottom: 1px solid #DCE3EE; }
.lp .header-brand { display: flex; align-items: center; }
/* ロゴ（マーク＋社名＋「さわかみ会員ランク」を1つにした正式データ images/logo_header_member-rank.svg）
   高さは、マークの円が直径44px になる大きさ（元データ 300×53 の 88%） */
.lp .header-brand-logo { display: block; width: auto; height: 46.6px; }
/* ナビ＋ボタン＋メニューボタンのまとまり */
.lp .header-actions { display: flex; align-items: center; gap: 28px; font-size: 16px; }
.lp .header-nav { display: flex; align-items: center; gap: 28px; }
.lp .header-nav-link { color: #16213A; text-decoration: none; }
/* メニューボタン（PCでは非表示） */
.lp .header-menu-button { display: none; }
.lp .header-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 24px; color: #FFFFFF; text-decoration: none; font-weight: 700; }

/* ==================================================
   Hero
   ================================================== */
/* 文章の枠とスマホ画面イメージを1セットにして、中央にそろえる */
.lp .hero { position: relative; overflow: hidden; background: var(--green-bg); padding: 80px var(--gutter) 130px; display: flex; justify-content: center; gap: 40px; align-items: center; }
.lp .hero-deco-circle-lg { position: absolute; right: calc(var(--gutter) - 212px); top: -160px; width: 720px; height: 720px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light-30) 0%, var(--gold) 60%, var(--gold-dark-10) 100%); }
.lp .hero-deco-circle-md { position: absolute; right: calc(var(--gutter) + 288px); bottom: 90px; width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light-40) 0%, var(--gold-light-10) 100%); }
.lp .hero-deco-circle-sm { position: absolute; left: calc(var(--gutter) + 448px); top: 60px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light-10) 0%, var(--gold-dark-10) 100%); }
/* 円はすべて 135deg のグラデーション（左上が明るい）。小さい円は「元の色より2段明るい色 → 元の色」
   追加の飾り（形は上の md / sm と同じ。大きさ・位置・色を変える）
   位置は中身の左端・右端（--gutter）を基準にしているので、広い画面でも文章・スマホ画像との位置関係が変わらない */
.lp .hero-deco-md-2 { top: 28px; right: auto; bottom: auto; left: calc(var(--gutter) - 128px); width: 84px; height: 84px; background: linear-gradient(135deg, var(--gold-light-30) 0%, var(--gold) 100%); }    /* 左上：バッジの左外側 */
.lp .hero-deco-md-3 { top: auto; right: calc(var(--gutter) - 44px); bottom: 150px; left: auto; width: 60px; height: 60px; background: linear-gradient(135deg, var(--gold-light-20) 0%, var(--gold-dark-10) 100%); }   /* 右下：スマホ画像の右外側 */
.lp .hero-deco-sm-2 { top: 34px; right: auto; bottom: auto; left: calc(var(--gutter) + 250px); width: 18px; height: 18px; background: linear-gradient(135deg, var(--gold-light-30) 0%, var(--gold-light-10) 100%); }   /* 上：バッジの上 */
.lp .hero-deco-sm-3 { top: auto; right: auto; bottom: 150px; left: calc(var(--gutter) + 546px); width: 20px; height: 20px; }  /* 下：文章とスマホ画像の間 */
.lp .hero-deco-sm-4 { top: auto; right: auto; bottom: 64px; left: calc(var(--gutter) - 40px); width: 24px; height: 24px; background: linear-gradient(135deg, var(--gold-light-20) 0%, var(--gold) 100%); }    /* 左下：波の上 */
/* 円をまとめた層（Hero と同じ大きさで重ねる）
   スクロールすると、円は文章よりゆっくり上へ流れる。大きい円ほど遅く（奥）、小さい円ほど速く（手前）して奥行きを出す
   --parallax-shift … ページを 1600px スクロールする間に、円を下へずらす量。大きいほど遅く見える
     大きい円 1120px（文章の30%の速さ）／中の円 800px（50%）／小さい円 400px（75%）
   はみ出た分は Hero の overflow: hidden で隠れる。スクロール連動アニメーションに対応していないブラウザでは、Hero と一緒に動く */
.lp .hero-deco { position: absolute; inset: 0; pointer-events: none; }
.lp .hero-deco-circle-lg { --parallax-shift: 1120px; }
.lp .hero-deco-circle-md { --parallax-shift: 800px; }
.lp .hero-deco-circle-sm { --parallax-shift: 400px; }
@supports (animation-timeline: scroll()) {
  .lp .hero-deco > * { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 1600px; }
  /* 出現アニメーション（reveal-up）の途中も、スクロールの動きを止めないように2つを重ねる */
  .lp .hero-deco > .is-revealing {
    animation: reveal-up .8s cubic-bezier(.2, .7, .3, 1) var(--reveal-delay, 0s) both, hero-parallax linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 1600px;
  }
}
@keyframes hero-parallax {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--parallax-shift, 800px)); }
}
@media (prefers-reduced-motion: reduce) {
  .lp .hero-deco > * { animation: none; }
}

/* --------------------------------------------------
   背景の円（Hero 以外の、薄い青グレーのセクション）
   大1つ・中1つ・小3つの円を、文章やカードの後ろに置く。並べ方は a / b の2種類を交互に使う
   大きい円は Hero の一番大きい円（720px）の6割ほどの大きさ。左右は画面の端から半分以上はみ出させ、
   上下はセクションの端から 48px 以上離す（端にかかると、円が横一直線に欠けて見えるため）
   色はページの背景（--page-bg）より少し明るい2色。どちらの色にするかは HTML 側でランダムに割り当てている
   （動きは付けない。スクロールで動かすと、ページの動作が重くなったため）
   -------------------------------------------------- */
/* セクション側：円をはみ出させない（clip）・円を文章の後ろに回す（isolate） */
.lp .has-bg-deco { position: relative; isolation: isolate; overflow: clip; }
.lp .bg-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; container-type: size; }   /* size … 中の円がセクションの高さ（cqh）を使えるようにする */
/* --d … 実際の直径（--size × 画面幅ごとの倍率）。ただしセクションが低いときは、上下に 48px ずつ空く大きさまで小さくする
   大きい円の位置は、この直径を基準に決める */
.lp .bg-deco > span { --d: min(calc(var(--size) * var(--bg-deco-scale, 1)), calc(100cqh - 96px)); position: absolute; display: block; width: var(--d); height: var(--d); border-radius: 50%; }
/* 色：--page-bg に白を20%／40%混ぜた色（base.css） */
.lp .bg-deco-light-20 { background: var(--page-bg-light-20); }
.lp .bg-deco-light-40 { background: var(--page-bg-light-40); }
/* 並べ方 a（左寄りの上のほうに大きい円・右寄りに中の円） */
.lp .bg-deco-a .bg-deco-1 { --size: 432px; top: clamp(48px, calc(30% - var(--d) / 2), calc(100% - var(--d) - 48px)); left: calc(var(--gutter) - var(--d) * .63); }
.lp .bg-deco-a .bg-deco-2 { --size: 22px; top: 6%; left: 40%; }
.lp .bg-deco-a .bg-deco-3 { --size: 64px; top: 56%; right: max(-20px, calc(var(--gutter) * .5 - 44px)); }
.lp .bg-deco-a .bg-deco-4 { --size: 16px; bottom: 12%; left: 14%; }
.lp .bg-deco-a .bg-deco-5 { --size: 26px; top: 28%; right: 22%; }
/* 並べ方 b（右寄りの下のほうに大きい円・左下に中の円） */
.lp .bg-deco-b .bg-deco-1 { --size: 416px; top: clamp(48px, calc(65% - var(--d) / 2), calc(100% - var(--d) - 48px)); right: calc(var(--gutter) - var(--d) * .63); }
.lp .bg-deco-b .bg-deco-2 { --size: 20px; top: 8%; right: 34%; }
.lp .bg-deco-b .bg-deco-3 { --size: 70px; bottom: 14%; left: max(-20px, calc(var(--gutter) * .5 - 48px)); }
.lp .bg-deco-b .bg-deco-4 { --size: 14px; top: 44%; left: 8%; }
.lp .bg-deco-b .bg-deco-5 { --size: 24px; bottom: 8%; right: 16%; }
/* 波：画面幅いっぱいに伸ばす */
.lp .hero-wave { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; }
/* 文章の枠：リード文の幅（540px）まで。狭い画面では縮む */
.lp .hero-body { position: relative; flex: 0 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.lp .hero-eyebrow { display: flex; gap: 10px; align-items: center; }
.lp .hero-badge { padding: 6px 16px; border-radius: 16px; color: #FFFFFF; font-size: 15px; font-weight: 700; }
.lp .hero-eyebrow-text { font-size: 16px; font-weight: 700; color: #16213A; }
.lp .hero-title { margin: 0; font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-weight: 700; font-size: 70px; line-height: 1.4; color: #16213A; }
.lp .hero-lead { margin: 0; font-size: 20px; line-height: 1.9; max-width: 540px; }
/* アプリアイコン＋「さわかみマイルは専用アプリで〜」 */
.lp .hero-app-head { display: flex; align-items: center; gap: 12px; }
.lp .hero-app-icon { display: block; width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(233,161,33,0.35); }
.lp .hero-store-buttons { display: flex; gap: 12px; align-items: center; }
.lp .hero-store-button { width: 168px; min-height: 52px; border-radius: 10px; background: #111111; color: #FFFFFF; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.lp .hero-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 36px; border-radius: 30px; color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 20px; }
/* ボタン内の右向き矢印（HTML に直接書いた SVG）：文字と同じ色になる（hover で色が変わっても追従）
   外部の SVG を mask で読み込む方法は、index.html をファイルとして直接開くとブラウザに止められて矢印が消えるため使わない */
.lp .hero-cta-arrow { display: block; width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ==================================================
   Hero：スマホ画面イメージ（共通）
   ================================================== */
/* スマホ画面イメージ：元の大きさ（540×600px）の106% */
.lp .hero-phones { position: relative; width: 540px; height: 600px; flex-shrink: 0; zoom: 1.06; }
.lp .phone-text-12 { font-size: 12px; font-weight: 700; }
.lp .phone-text-10 { font-size: 10px; font-weight: 700; }

/* ==================================================
   Hero：スマホ画面イメージ（奥・ホーム画面）
   ================================================== */
.lp .phone-back { position: absolute; left: 20px; top: 56px; width: 250px; height: 510px; border-radius: 40px; background: #16213A; padding: 11px; box-sizing: border-box; transform: rotate(-7deg); box-shadow: 0 24px 48px rgba(22,33,58,0.18); }
.lp .phone-back-screen { width: 100%; height: 100%; border-radius: 30px; background: #FFFFFF; overflow: hidden; display: flex; flex-direction: column; }
.lp .phone-back-appbar { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #E5E7EB; flex-shrink: 0; }
.lp .phone-back-mile-label { font-size: 12px; font-weight: 700; color: #E8A317; }
.lp .phone-back-content { padding: 12px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.lp .phone-back-mile-card { border-radius: 12px; background: linear-gradient(180deg, #4E9A51 0%, #7DB544 100%); padding: 12px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #FFFFFF; }
.lp .phone-back-mile-value { font-size: 22px; font-weight: 700; letter-spacing: 1px; line-height: 1.3; }
.lp .phone-back-mile-link { font-size: 9px; text-decoration: underline; }
.lp .phone-back-barcode { margin-top: 6px; width: 100%; background: #FFFFFF; border-radius: 4px; padding: 8px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lp .phone-back-barcode-number { font-size: 9px; color: #111111; letter-spacing: 2px; }
.lp .phone-back-news-label { font-size: 13px; font-weight: 700; color: var(--green); }
.lp .phone-back-news-title { font-size: 10px; font-weight: 700; margin-top: -8px; }
.lp .phone-back-banner { height: 96px; border-radius: 10px; background: linear-gradient(180deg, #7FB3E0 0%, #F4C27A 100%); display: flex; align-items: flex-end; padding: 6px 8px; box-sizing: border-box; }
.lp .phone-back-banner-label { font-size: 9px; font-weight: 700; background: #FFFFFF; padding: 2px 6px; border-radius: 4px; }
.lp .phone-back-tabbar { height: 50px; border-top: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: space-around; font-size: 8px; color: #6B7280; flex-shrink: 0; }
.lp .phone-back-tab-home { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* ==================================================
   Hero：スマホ画面イメージ（手前・会員ランク画面）
   ================================================== */
.lp .phone-front { position: absolute; right: 10px; top: 0; width: 280px; height: 570px; border-radius: 42px; background: #16213A; padding: 12px; box-sizing: border-box; transform: rotate(4deg); box-shadow: 0 28px 56px rgba(22,33,58,0.24); }
.lp .phone-front-screen { width: 100%; height: 100%; border-radius: 32px; background: var(--green-light); overflow: hidden; display: flex; flex-direction: column; }
.lp .phone-front-appbar { height: 46px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; flex-shrink: 0; }
.lp .phone-front-brand { display: flex; align-items: center; gap: 4px; }
.lp .phone-front-brand-logo { width: 18px; height: auto; display: block; }
.lp .phone-front-brand-name { font-size: 10px; font-weight: 700; color: var(--blue); }
/* ゴールドのバッジ（rank-badge / rank-gold と組み合わせ） */
.lp .phone-front-avatar { width: 20px; height: 20px; font-size: 10px; font-weight: 700; }
.lp .phone-front-content { padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.lp .phone-front-desc { font-size: 9px; line-height: 1.7; color: #374151; }
.lp .phone-front-card { background: #FFFFFF; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.lp .phone-front-rank { display: flex; align-items: center; gap: 8px; }
/* ゴールドのバッジ（rank-badge / rank-gold と組み合わせ） */
.lp .phone-front-rank-badge { width: 28px; height: 28px; font-size: 13px; font-weight: 700; }
.lp .phone-front-card-label { font-size: 10px; font-weight: 700; margin-top: 2px; }
.lp .phone-front-table { border: 1px solid #D1D5DB; border-radius: 8px; overflow: hidden; font-size: 9px; line-height: 1.5; }
.lp .phone-front-row { display: flex; border-bottom: 1px solid #D1D5DB; }
.lp .phone-front-row-last { display: flex; }
.lp .phone-front-th { width: 72px; flex-shrink: 0; background: #E8F0F8; padding: 7px 6px; }
.lp .phone-front-td { padding: 7px 6px; }
.lp .phone-front-note { font-size: 8px; line-height: 1.6; border: 1px solid var(--blue); background: #EEF3FA; border-radius: 6px; padding: 5px 6px; }
.lp .phone-front-tabs { display: flex; font-size: 9px; font-weight: 700; }
.lp .phone-front-tab-active { flex-grow: 1; text-align: center; padding: 6px 0; background: var(--green-light); color: var(--green); border-bottom: 2px solid var(--green); }
.lp .phone-front-tab { flex-grow: 1; text-align: center; padding: 6px 0; background: #F3F4F6; color: #6B7280; }

/* ==================================================
   Intro（さわかみ会員ランクとは?）
   ================================================== */
/* 文章だけの1列。セクションの幅いっぱい（左右の余白 --gutter の内側）に広げる */
.lp .intro { padding: 40px var(--gutter) 88px; }
.lp .intro-body { display: flex; flex-direction: column; gap: 22px; }
.lp .intro-text { margin: 0; font-size: 19px; line-height: 2; }
.lp .intro-buttons { display: flex; gap: 16px; }

/* ==================================================
   Link first（まずはマイル連携を）
   ================================================== */
.lp .link-first { margin: 0 var(--gutter); padding: 64px 72px; border-radius: 32px; color: #FFFFFF; display: flex; gap: 56px; }
.lp .link-first-body { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.lp .link-first-title { margin: 0; font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-size: 38px; line-height: 1.45; }
.lp .link-first-text { margin: 0; font-size: 19px; line-height: 1.9; }
.lp .link-first-deadline { background: var(--primary-dark); border-radius: 18px; padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.lp .link-first-deadline-title { font-weight: 700; font-size: 20px; }
.lp .link-first-card { width: 460px; flex-shrink: 0; background: #FFFFFF; color: #16213A; border-radius: 24px; padding: 36px 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.lp .link-first-card-title { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-weight: 700; font-size: 22px; line-height: 1.5; }
.lp .link-first-checks { display: flex; flex-direction: column; gap: 14px; }
.lp .link-first-check { display: flex; gap: 14px; align-items: flex-start; }
.lp .link-first-check-icon { flex-shrink: 0; margin-top: 2px; }
.lp .link-first-cta { display: inline-flex; justify-content: center; align-items: center; min-height: 56px; border-radius: 28px; background: #F2B33D; color: #3B2E00; text-decoration: none; font-weight: 700; font-size: 18px; }

/* ==================================================
   Benefit（ランクごとの特典）
   ================================================== */
.lp .benefit-table-rank { padding: 20px 8px; border-bottom: 1px solid #DCE3EE; display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; }
.lp .benefit-table-none { padding: 22px 8px; border-bottom: 1px solid #DCE3EE; text-align: center; color: #4A5568; }
.lp .benefit-table-miles { padding: 22px 8px; border-bottom: 1px solid #DCE3EE; text-align: center; font-size: 22px; font-weight: 700; }
.lp .benefit-table-value { padding: 22px 8px; border-bottom: 1px solid #DCE3EE; text-align: center; font-weight: 700; }
.lp .benefit-table-sale { padding: 22px 8px; text-align: center; color: var(--primary); font-weight: 700; }
/* 画像がまだ入っていない枠は、60%の灰色の地に白い文字（画像を入れた枠は下の -mile / -sale で背景を上書き） */
.lp .benefit-card-photo { height: 180px; background: #666666; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 15px; }
/* 期間限定マイル：金色の地に、白抜きのさわかみマイルロゴを中央に置く */
.lp .benefit-card-mile { background: var(--gold); }
.lp .benefit-card-mile img { display: block; width: 62%; height: auto; }
/* 会員限定セール：白地の写真を、切らずに枠の高さいっぱいに収める */
.lp .benefit-card-sale { background: #FFFFFF; padding: 12px 0 0; box-sizing: border-box; }
/* 投信セレクト詰め合わせ：写真を枠いっぱいに敷く */
.lp .benefit-card-gift img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp .benefit-card-sale img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.lp .benefit-card-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; }

/* ==================================================
   Rank（会員ランクの決まり方）
   並び：タイトル → 比較表 → 説明文 → 3つの条件 → ランクの例
   ================================================== */
/* 説明文（「次の3つの条件を…」）：上の比較表と少し間を空けて、下の条件のカードとのまとまりに見せる */
.lp .rank-lead { margin-top: 20px; }
.lp .rank-cond { background: #FFFFFF; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.lp .rank-cond-label { font-size: 15px; color: var(--primary); font-weight: 700; }
.lp .rank-table-rank { padding: 20px 8px; border-bottom: 1px solid #DCE3EE; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp .rank-table-rowhead { padding: 18px 8px; border-bottom: 1px solid #DCE3EE; font-weight: 700; }
.lp .rank-table-cell { padding: 18px 8px; border-bottom: 1px solid #DCE3EE; text-align: center; }
.lp .rank-table-cell-muted { padding: 18px 8px; border-bottom: 1px solid #DCE3EE; text-align: center; color: #4A5568; }
.lp .rank-table-cell-wide { padding: 18px 8px; border-bottom: 1px solid #DCE3EE; text-align: center; grid-column: span 3; }
.lp .rank-table-cell-wide-muted { padding: 18px 8px; border-bottom: 1px solid #DCE3EE; text-align: center; grid-column: span 3; color: #4A5568; }
.lp .rank-table-rowhead-last { padding: 18px 8px; font-weight: 700; }
.lp .rank-table-cell-last-muted { padding: 18px 8px; text-align: center; color: #4A5568; }
.lp .rank-table-cell-last { padding: 18px 8px; text-align: center; }
.lp .rank-example { display: flex; gap: 20px; align-items: center; background: #FDF0E6; border-radius: 20px; padding: 24px 32px; }
.lp .rank-example-icon { flex-shrink: 0; }
.lp .rank-example-text { font-size: 17px; }

/* ==================================================
   Year flow（会員ランクの1年）
   ================================================== */
/* 5枚を常に横1列に並べる。1枚の幅は最小180px（それより狭くなる画面では、はみ出した分を横スクロール）
   スクロールの枠・右端のぼかし・› ボタンは、表と同じ仕組み（.table-scroll / js/table-scroll.js）を使い、見た目だけ上書きする */
.lp .flow-list { display: grid; grid-template-columns: repeat(6, minmax(var(--flow-card-min, 160px), 1fr)); gap: 16px; }
.lp .table-wrap.flow-wrap { background: none; border-radius: 0; padding: 0 0 12px; }
.lp .table-scroll.flow-scroll.is-scrollable:not(.is-end) .table-scroll-fade { border-radius: 0; background: linear-gradient(90deg, rgba(224,231,243,0), var(--page-bg) 85%); }
.lp .flow-card { background: #FFFFFF; border-radius: 22px; padding: 28px 22px; display: flex; flex-direction: column; gap: 10px; }
.lp .flow-card-date { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-size: 26px; font-weight: 700; color: var(--primary); }

/* ==================================================
   App band（アプリの案内帯）
   ================================================== */
/* 画面幅いっぱいの帯。中身は左右の余白（--gutter）で、ほかのセクションと同じ幅にそろえる。
   背景は Hero の大きい円と同じ色のグラデーション（左上が明るく、右下が暗い）。
   帯は横長なので、135deg だとほぼ水平に見える。上下の差も出るよう 160deg にしている */
.lp .app-band { margin: 88px 0 0; padding: 40px var(--gutter); background: linear-gradient(160deg, var(--gold-light-30) 0%, var(--gold) 60%, var(--gold-dark-10) 100%); display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.lp .app-band-info { display: flex; align-items: center; gap: 20px; }
/* アプリアイコン（images/icon_app-mile_reverse.svg … 金色の帯の上で目立つよう、白地に金色のマーク） */
.lp .app-band-icon { display: block; width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(120,70,0,0.3); }
.lp .app-band-text { display: flex; flex-direction: column; gap: 4px; }
.lp .app-band-stores { display: flex; gap: 12px; flex-shrink: 0; }
.lp .app-band-store { width: 170px; min-height: 56px; border-radius: 12px; background: #16213A; color: #FFFFFF; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }

/* ==================================================
   Start（会員登録と口座連携：アコーディオン）
   ================================================== */
.lp .acc { background: #FFFFFF; border-radius: 24px; overflow: hidden; border: 1px solid #DCE3EE; }
.lp .acc-primary { background: #FFFFFF; border-radius: 24px; overflow: hidden; }
.lp .acc-toggle { display: flex; align-items: center; gap: 18px; padding: 26px 32px; cursor: pointer; text-decoration: none; color: #16213A; }
.lp .acc-num { width: 44px; height: 44px; border-radius: 50%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex-shrink: 0; }
.lp .acc-title-group { flex-grow: 1; display: flex; flex-direction: column; line-height: 1.5; }
.lp .acc-title { flex-grow: 1; font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-weight: 700; font-size: 24px; }
.lp .acc-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex-shrink: 0; }
.lp .acc-panel { padding: 8px 32px 32px; display: flex; flex-direction: column; gap: 20px; border-top: 1px solid #DCE3EE; }
.lp .acc-panel-lg { padding: 8px 32px 32px; display: flex; flex-direction: column; gap: 24px; border-top: 1px solid #DCE3EE; }
.lp .acc-steps-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 20px; }
.lp .acc-steps-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding-top: 20px; }
.lp .acc-capture { height: 340px; border-radius: 16px; background: #D8DEF1; display: flex; align-items: center; justify-content: center; }
/* 手順の順番を示す矢印（オレンジの丸に白い「›」）。画像と画像の間、画像の高さの中央に置く。最後の手順には付けない */
.lp .acc-steps-4 > .stack-10,
.lp .acc-steps-6 > .stack-10 { position: relative; }
.lp .acc-steps-4 > .stack-10::after,
.lp .acc-steps-6 > .stack-10::after { content: ""; position: absolute; z-index: 1; top: 157px; right: -21px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7l5 5-5 5'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 2px 6px rgba(22,33,58,0.2); pointer-events: none; }
.lp .acc-steps-4 > .stack-10:last-child::after,
.lp .acc-steps-6 > .stack-10:last-child::after { display: none; }
.lp .acc-capture-img { height: 320px; width: auto; border-radius: 10px; display: block; }
.lp .acc-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp .acc-tip { border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
/* acc-tip と組み合わせて背景をグレーに */
.lp .acc-tip-gray { background: #F2F5FA; }
.lp .acc-tip-title { font-weight: 700; font-size: 17px; }
.lp .acc-tip-text { font-size: 15px; line-height: 1.8; }
.lp .acc-also { background: #F2F5FA; border-radius: 16px; padding: 18px 24px; display: flex; align-items: center; gap: 12px; font-size: 16px; }

/* ==================================================
   Earn（マイルの貯め方）
   ================================================== */
.lp .earn-box { background: #FFFFFF; border-radius: 26px; padding: 36px 40px; display: flex; flex-direction: column; gap: 24px; }
.lp .earn-main { display: flex; gap: 32px; align-items: stretch; }
.lp .earn-rate { width: 340px; flex-shrink: 0; border-radius: 20px; background: #FDF0E4; padding: 28px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.lp .earn-rate-value { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-weight: 700; font-size: 44px; line-height: 1.3; }
.lp .earn-notice { flex: 1 1 0; border-radius: 20px; padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.lp .earn-sub-title { font-weight: 700; font-size: 19px; padding-top: 8px; }
.lp .earn-card { border-radius: 20px; background: #F2F5FA; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.lp .earn-card-title { font-weight: 700; font-size: 18px; }
.lp .earn-card-value { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-weight: 700; font-size: 28px; line-height: 1.3; }
/* 「投信での貯め方」：さわかみ投信の話題なので、テーマカラーの青（--blue #004896）でまとめる
   見出し・各カードのマイル数・アイコン（images/icon_seminar など）を青に。「付与率が変わります」の枠はメインカラー（オレンジ）のまま */
.lp .earn-box-am > .title-maru-26 { color: var(--blue); }
.lp .earn-box-am .u-color-primary { color: var(--blue); }
.lp .earn-box-am .earn-card { background: #EEF3F9; }
/* 「定期定額購入で 購入額の1%」の枠：青の地に、文字はすべて白 */
.lp .earn-box-am .earn-rate { background: var(--blue); }
.lp .earn-box-am .earn-rate,
.lp .earn-box-am .earn-rate * { color: #FFFFFF; }
.lp .earn-group { display: flex; flex-direction: column; gap: 8px; }
/* グループ各社の写真（600×380px）：枠の幅いっぱい・元の縦横比のまま */
.lp .earn-group-photo { display: block; width: 100%; height: auto; aspect-ratio: 600 / 380; object-fit: cover; border-radius: 16px; background: #E6EDF7; }
.lp .earn-group-rate { font-size: 14px; font-weight: 700; }
/* グループ各社の並び：3列（6社で3列×2段）。写真を大きく見せる */
.lp .earn-group-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ==================================================
   Use（マイルの使い方）
   ================================================== */
/* 3列。最後の段が2枚になるときは、その2枚を中央に寄せる（6分割の格子に、1枚＝2マスで置く） */
.lp .use-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.lp .use-grid > * { grid-column: span 2; }
.lp .use-grid > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
/* マイルの使い方の画像（600×380px のバナー）：カードの幅いっぱい・元の縦横比のまま（文字入りなので切り取らない） */
.lp .use-card-photo { display: block; width: 100%; height: auto; aspect-ratio: 600 / 380; object-fit: cover; background: #E6EDF7; }
.lp .use-card-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }

/* ==================================================
   FAQ（よくあるご質問）
   ================================================== */
.lp .faq-list { display: flex; flex-direction: column; gap: 14px; }
/* 1問ずつのアコーディオン（js/accordion.js）。最初はすべて閉じていて、質問（Q）だけが見える */
.lp .faq-item { background: #FFFFFF; border-radius: 20px; overflow: hidden; }
/* 質問：押すと回答が開閉する。右端の ＋／− は「会員登録と口座連携の方法」と同じ形（少し小さめ） */
.lp .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin: 0; padding: 22px 32px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lp .faq-question:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: 20px; }
.lp .faq-icon { width: 32px; height: 32px; font-size: 20px; }
/* 回答の枠：質問との間に細い線 */
.lp .faq-panel { margin: 0 32px; padding: 16px 0 24px; border-top: 1px solid #E6EDF7; }
/* 回答（「A.」から最後まで）：太字・メインカラー（#C64D00） */
.lp .faq-answer { margin: 0; font-size: 17px; font-weight: 700; color: var(--primary); }

/* ==================================================
   Contact（お問い合わせ）
   窓口ごとのカードを2枚並べる。上の線の色で窓口を見分ける（アプリ・マイル＝金色、口座・ランク＝青）
   ================================================== */
.lp .section-contact { padding: 96px var(--gutter) 0; display: flex; flex-direction: column; gap: 32px; }
.lp .contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lp .contact-card { background: #FFFFFF; border-radius: 22px; border-top: 6px solid var(--contact-color); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lp .contact-card-mile { --contact-color: var(--gold); }
.lp .contact-card-am { --contact-color: var(--blue); }
.lp .contact-card-label { font-size: 15px; font-weight: 700; color: var(--contact-color); }
.lp .contact-card-mile .contact-card-label { color: var(--gold-dark-10); }
/* 窓口名：狭い画面では「さわかみ投信　／ご縁の窓口」のように、空白の位置で改行する（単語の途中で切れないように） */
.lp .contact-card-name { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.lp .contact-card-tel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.lp .contact-card-tel-label { font-size: 14px; font-weight: 700; color: #4A5568; }
.lp .contact-card-tel-number { font-family: 'Zen Maru Gothic','BIZ UDPGothic',sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; color: #16213A; text-decoration: none; }
.lp .contact-card-hours { font-size: 14px; color: #4A5568; }
/* 電話番号のないカードでも、ボタンの位置を隣のカードとそろえる（ボタンの上は最低20px空ける） */
.lp .contact-card > :nth-last-child(2) { margin-bottom: 10px; }
.lp .contact-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 24px; border-radius: 24px; border: 2px solid var(--contact-color); color: #16213A; font-size: 15px; font-weight: 700; text-decoration: none; }
.lp .contact-card-link-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ==================================================
   Footer（さわかみファンドのリスクおよび手数料等・会社情報）
   内容とレイアウトは https://www.sawakami.co.jp/lp/ns/ のフッターと同じ。背景色だけこの LP の紺（#16213A）
   ================================================== */
.lp .footer { margin-top: 80px; padding: 0; background: #16213A; color: #E6EDF7; display: block; font-size: 14px; line-height: 1.8; }
.lp .footer-disclaimer { padding: 60px 0; }
.lp .footer-wrap { width: 90%; max-width: 1000px; margin: 0 auto; }
.lp .footer-box-title { margin: 0 0 5px; font-size: 13px; font-weight: 700; color: #FFFFFF; }
.lp .footer-box p { margin: 0; font-size: 14px; line-height: 1.8; }
/* 項目ごとの行：左に項目名（180px）、右に内容。行の上下に細い線 */
.lp .footer-line { display: flex; align-items: center; border-bottom: 1px solid rgba(230,237,247,0.3); }
.lp .footer-line-first { border-top: 1px solid rgba(230,237,247,0.3); }
.lp .footer-line > div { padding: 20px 0; }
.lp .footer-line .footer-line-head { flex-shrink: 0; box-sizing: border-box; width: 180px; padding-left: 20px; }
.lp .footer-line-head p { font-weight: 700; color: #FFFFFF; }
.lp .footer-line-body { flex: 1 1 0; min-width: 0; }
.lp .footer-box p.footer-attn { margin-top: 20px; }
/* 会社名・登録番号・加入協会：中央揃えの小さな文字。上に区切り線 */
.lp .footer-copyright { padding: 45px 0; border-top: 1px solid rgba(230,237,247,0.3); }
.lp .footer-copyright p { margin: 0; font-size: 12px; text-align: center; color: #FFFFFF; }
/* ご注意事項（会員ランク）：リスクの表の上に置く、この LP 独自の注意文 */
.lp .footer-notice { padding: 60px 0 0; }
.lp .footer-notice p { margin: 0; font-size: 14px; line-height: 1.8; }
.lp .footer-notice .footer-notice-title { margin-bottom: 5px; font-size: 16px; font-weight: 700; color: #FFFFFF; }
.lp .footer-notice + .footer-disclaimer { padding-top: 40px; }

/* ==================================================
   出現アニメーション … js/reveal.js
   ================================================== */
/* 出る前は透明にしておく（html に is-reveal-ready が付いているときだけ。JS が動かなければ最初から表示） */
.is-reveal-ready .lp .js-reveal:not(.is-revealed),
.is-reveal-ready .lp .js-reveal-group > :not(.is-revealed),
.is-reveal-ready .lp [data-hero-step]:not(.is-revealed) { opacity: 0; }
/* 下から上へ、ふわっと現れる。--reveal-delay は js が要素ごとに入れる（順番にずらすため）
   位置の移動は translate を使う（ボタンの hover やスマホ画像の傾きで使っている transform とぶつからない） */
.lp .is-revealing { animation: reveal-up .8s cubic-bezier(.2, .7, .3, 1) var(--reveal-delay, 0s) both; }
@keyframes reveal-up {
  from { opacity: 0; translate: 0 32px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ==================================================
   画像の拡大表示（モーダル）… js/image-zoom.js
   ================================================== */
/* 拡大できる画像：右下に虫めがねマーク */
.lp .acc-capture { position: relative; }
.lp .acc-capture::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C64D00' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 2px 6px rgba(22,33,58,0.2); pointer-events: none; }
.lp .js-zoom { cursor: zoom-in; }
.lp .js-zoom:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
/* 開いている間は、後ろのページをスクロールさせない */
html.is-zoom-open { overflow: hidden; }
/* ウインドウ：画面全体・背景は紺の半透明 */
.lp .zoom-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #FFFFFF; }
.lp .zoom-figure { box-sizing: border-box; height: 100%; margin: 0; padding: 64px 16px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
/* 出現／消失：背景と中身がふわっと現れて、ふわっと消える（is-visible は js が付け外し） */
.lp .zoom-dialog::backdrop { background: rgba(22,33,58,0); transition: background-color .28s ease; }
.lp .zoom-dialog.is-visible::backdrop { background: rgba(22,33,58,0.88); }
.lp .zoom-figure,
.lp .zoom-close { opacity: 0; transform: scale(0.96); transition: opacity .28s ease, transform .28s ease; }
.lp .zoom-dialog.is-visible .zoom-figure,
.lp .zoom-dialog.is-visible .zoom-close { opacity: 1; transform: none; }
.lp .zoom-image { display: block; width: auto; height: auto; max-width: min(100%, 560px); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); border-radius: 12px; background: #FFFFFF; box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.lp .zoom-caption { display: flex; align-items: center; gap: 16px; }
.lp .zoom-caption-text { min-width: 180px; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.5; }
.lp .zoom-count { font-size: 13px; font-weight: 400; opacity: 0.75; }
/* ‹ › と × のボタン */
.lp .zoom-nav,
.lp .zoom-close { flex-shrink: 0; width: 44px; height: 44px; padding: 0 0 3px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.92); color: #16213A; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.lp .zoom-close { position: fixed; top: 12px; right: 12px; z-index: 1; }

/* ==================================================
   メインカラー（--primary は base.css で定義）
   ================================================== */
.lp .u-bg-primary { background: var(--primary); }
.lp .u-border-primary { border: 2px solid var(--primary); }
.lp .u-color-primary { color: var(--primary); }
/* さわかみ投信のテーマカラー（青）の背景 */
.lp .u-bg-blue { background: var(--blue); }