/* ============================================================
   セゾンプラチナ・ビジネス・アメックス 紹介入会LP
   style.css
   ============================================================ */

/* CSS変数 */
:root {
 /* 主色（固定）: 罫線・番号・アクセント */
 --primary: #48a8bc;
 --primary-ink: #24707f; /* 明るい背景上の主色系テキスト（コントラスト4.5以上） */
 --primary-line: rgba(72, 168, 188, 0.42);
 --primary-glow: rgba(72, 168, 188, 0.4);

 /* 特典・CTAの金色（影・半透明面は rgba(201, 162, 79, α)） */
 --gold-light: #ecd497;
 --gold-ink: #8a6a22; /* 明るい背景上の金色系テキスト */
 --gold-metal: linear-gradient(115deg, #c0964a 0%, #e3c374 34%, #f7e8b8 50%, #e2c06d 66%, #c79f4c 100%);
 --gold-text: linear-gradient(100deg, #d6b15e 0%, #f7e6ad 46%, #e2c071 72%, #c99f4b 100%);

 /* 公式サイトで押すボタンの色（手順の目印） */
 --button-green: #1f9d55;
 --button-red: #c8161d;

 /* 基本色 */
 --ink: #0b171b;
 --ink-2: #102127;
 --ink-deep: #071114;
 --text: #14232a;
 --text-sub: #3a4a50;
 --text-muted: #56666c;
 --link: var(--primary-ink);
 --bg: #ffffff;
 --bg-soft: #f2f6f7;
 --line: #dce5e8;
 --white: #ffffff;
 --on-ink: #ffffff;
 --on-ink-sub: rgba(255, 255, 255, 0.8);
 --on-ink-muted: rgba(255, 255, 255, 0.62);

 --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
 --font-en: "Jost", "Noto Sans JP", sans-serif;

 --radius: 16px;
 --radius-lg: 24px;
 --shadow-sm: 0 1px 2px rgba(11, 23, 27, 0.05), 0 6px 16px -6px rgba(11, 23, 27, 0.08);
 --shadow-md: 0 2px 6px rgba(11, 23, 27, 0.04), 0 22px 44px -18px rgba(11, 23, 27, 0.24);
 --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

 --container: 1080px; /* 左右の余白20pxを含む（本文幅1040px） */
 --measure: 800px; /* FAQなど読み物の最大幅 */
 --gutter: 20px;
}

/* リセット */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

body {
 font-family: var(--font-ja);
 font-size: 16px;
 line-height: 1.85;
 letter-spacing: 0.02em;
 color: var(--text);
 background: var(--bg);
 line-break: strict;
 overflow-wrap: break-word;
 text-autospace: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

p,
li,
dd {
 text-wrap: pretty;
}

/* 見出し・短文は対応ブラウザで文節単位に改行（本文は通常の改行） */
h1,
h2,
h3,
h4,
.site-title,
.section-lead,
.hero__lead,
.hero__note,
.benefit-card__note,
.conditions__name,
.conditions__text,
.step__tip dd,
.faq-item__text,
.cta-final__sub,
.site-footer__disclaimer {
 word-break: auto-phrase;
}

/* 1行が長いPC幅では本文も文節改行にして行末の1〜2文字の泣き別れを防ぐ */
@media (min-width: 768px) {
 .step__desc,
 .faq-item__a p {
  word-break: auto-phrase;
 }
}

img,
svg {
 display: block;
 max-width: 100%;
 height: auto;
}

a {
 color: var(--link);
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 0.22em;
 transition: color 0.2s ease;
}

a:hover {
 color: var(--text);
}

ol,
ul {
 list-style: none;
}

:focus-visible {
 outline: 3px solid var(--primary);
 outline-offset: 3px;
}

::selection {
 background: rgba(72, 168, 188, 0.3);
 color: var(--text);
}

/* ============================================================
   レイアウト基盤・共通パーツ
   ============================================================ */

.container {
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: var(--gutter);
}

/* 欧文・数字（Jostは数字と大文字だけを読み込む） */
.num {
 font-family: var(--font-en);
 font-variant-numeric: lining-nums;
 letter-spacing: 0;
}

/* 和文見出しの改行位置を文節にそろえる */
.phrase {
 display: inline-block;
}

/* 欧文の固有名詞を途中で改行しない */
.nowrap {
 white-space: nowrap;
}

/* 公式サイトで押すボタンの色見本 */
.swatch {
 display: inline-block;
 flex: none;
 width: 0.72em;
 height: 0.72em;
 margin-right: 0.35em;
 border-radius: 50%;
 vertical-align: 0;
 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(11, 23, 27, 0.1);
}

.swatch--green {
 background: var(--button-green);
}

.swatch--red {
 background: var(--button-red);
}

.section {
 position: relative;
 padding: 64px 0 72px;
}

.section-head {
 margin-bottom: 40px;
}

.eyebrow {
 display: flex;
 align-items: center;
 font-family: var(--font-en);
 font-size: 12px;
 font-weight: 500;
 line-height: 1;
 letter-spacing: 0.26em;
 text-transform: uppercase;
 color: var(--primary-ink);
}

.eyebrow__num {
 display: inline-flex;
 align-items: center;
 font-weight: 600;
 letter-spacing: 0.1em;
}

.eyebrow__num::after {
 content: "";
 width: 36px;
 height: 1px;
 margin: 0 14px;
 background: var(--primary);
}

.section-title {
 margin-top: 18px;
 font-size: clamp(24px, 6.2vw, 34px);
 font-weight: 700;
 line-height: 1.45;
 letter-spacing: 0.03em;
 font-feature-settings: "palt";
 text-wrap: balance;
}

.section-title__sub {
 font-size: 0.6em;
 letter-spacing: 0.04em;
 color: var(--text-muted);
}

.section-lead {
 max-width: 40em;
 margin-top: 14px;
 color: var(--text-muted);
 line-height: 1.8;
}

@media (min-width: 768px) {
 .section {
  padding: 104px 0 112px;
 }

 .section-head {
  margin-bottom: 48px;
 }
}

/* スクロール進捗（対応ブラウザのみ） */
.scroll-progress {
 display: none;
}

@supports (animation-timeline: scroll()) {
 .scroll-progress {
  display: block;
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #8fd3e0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation: scroll-progress linear both;
  animation-timeline: scroll(root);
 }

 @keyframes scroll-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
 }
}

/* ============================================================
   0. サイトヘッダー
   ============================================================ */

.site-header {
 position: relative;
 z-index: 2;
 background: var(--ink);
 border-top: 3px solid var(--primary);
 border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.site-header__inner {
 display: flex;
 align-items: center;
 gap: 12px;
 max-width: var(--container);
 margin-inline: auto;
 padding: 10px var(--gutter);
}

.site-header__inner::before {
 content: "";
 flex: none;
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--primary);
 box-shadow: 0 0 0 4px rgba(72, 168, 188, 0.2);
}

.site-title {
 color: var(--on-ink-sub);
 font-size: 12px;
 font-weight: 500;
 line-height: 1.6;
 letter-spacing: 0.06em;
 font-feature-settings: "palt";
}

@media (min-width: 768px) {
 .site-header__inner {
  padding-block: 13px;
 }

 .site-title {
  font-size: 13px;
 }
}

/* ============================================================
   1. ヒーロー
   ============================================================ */

.hero {
 position: relative;
 overflow: hidden;
 isolation: isolate;
 padding: 24px 0 44px;
 color: var(--on-ink);
 background:
  radial-gradient(90% 70% at 15% 10%, rgba(72, 168, 188, 0.16) 0%, transparent 60%),
  radial-gradient(70% 60% at 100% 100%, rgba(201, 162, 79, 0.08) 0%, transparent 60%),
  linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}

/* 下端の主色ライン */
.hero::after {
 content: "";
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--primary) 25%, var(--primary) 75%, transparent);
 opacity: 0.7;
}

.hero__inner {
 display: grid;
 grid-template-areas:
  "head"
  "visual"
  "body";
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: var(--gutter);
}

.hero__head {
 grid-area: head;
}

.hero__body {
 grid-area: body;
}

/* カード画像（スマートフォンではボタンが最初の画面に入る大きさ） */
.hero__visual {
 grid-area: visual;
 position: relative;
 z-index: 0;
 width: min(58%, 240px);
 margin: 22px auto 26px;
}

/* 画面の低い小型スマートフォン（iPhone SE等）ではカードをさらに縮める */
@media (max-width: 599px) and (max-height: 700px) {
 .hero__visual {
  width: min(46%, 190px);
  margin: 16px auto 18px;
 }
}

/* カードの背後の光 */
.hero__visual::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 54%;
 left: 50%;
 width: 140%;
 aspect-ratio: 1.6;
 translate: -50% -50%;
 background: radial-gradient(closest-side, var(--primary-glow), transparent);
 pointer-events: none;
}

/* --tilt-* / --glare-* はPCのポインター位置に合わせてJSで更新 */
.hero__card {
 position: relative;
 transform:
  perspective(1400px)
  rotateX(calc(10deg + var(--tilt-x, 0deg)))
  rotateY(calc(-14deg + var(--tilt-y, 0deg)))
  rotate(-6deg);
 transition: transform 0.8s var(--ease-out);
}

.hero__card img {
 width: 100%;
 filter: drop-shadow(0 30px 28px rgba(0, 0, 0, 0.5)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
}

/* ポインター位置の映り込み */
.hero__card::before {
 content: "";
 position: absolute;
 z-index: 1;
 inset: 0;
 border-radius: 3.6% / 5.8%;
 background: radial-gradient(circle at var(--glare-x, 30%) var(--glare-y, 20%), rgba(255, 255, 255, 0.65), transparent 50%);
 mix-blend-mode: overlay;
 opacity: 0;
 transition: opacity 0.5s ease;
 pointer-events: none;
}

.hero.is-pointer .hero__card::before {
 opacity: 1;
}

/* 券面を横切る光 */
.hero__card::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: 3.6% / 5.8%;
 background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%) no-repeat;
 background-size: 250% 100%;
 background-position: 160% 0;
 mix-blend-mode: overlay;
 pointer-events: none;
}

.hero__badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 6px 14px 6px 12px;
 border: 1px solid rgba(236, 212, 151, 0.5);
 border-radius: 999px;
 background: rgba(201, 162, 79, 0.14);
 color: var(--gold-light);
 font-size: 12px;
 font-weight: 700;
 line-height: 1.4;
 letter-spacing: 0.08em;
 font-feature-settings: "palt";
}

.hero__badge::before {
 content: "";
 flex: none;
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--gold-light);
 box-shadow: 0 0 0 3px rgba(236, 212, 151, 0.22);
}

.hero__catch {
 margin-top: 16px;
 font-size: clamp(25px, 6.6vw, 40px);
 font-weight: 700;
 line-height: 1.42;
 letter-spacing: 0.03em;
 font-feature-settings: "palt";
}

.hero__lead {
 font-size: 15px;
 line-height: 1.7;
 color: var(--on-ink-sub);
 font-feature-settings: "palt";
}

.hero__amount {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 column-gap: 4px;
 margin-top: 2px;
 line-height: 1.15;
 font-feature-settings: "palt";
}

.hero__amount-pre,
.hero__amount-unit {
 font-size: clamp(15px, 4vw, 18px);
 font-weight: 700;
}

.hero__amount-num {
 padding-right: 0.04em;
 font-size: clamp(48px, 13vw, 72px);
 font-weight: 600;
 letter-spacing: -0.01em;
 color: var(--gold-light);
 background: var(--gold-text);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

/* 特典の内訳（スマートフォンは一覧、600px以上は3枠） */
.hero__breakdown {
 display: grid;
 margin-top: 18px;
 padding: 2px 16px;
 border: 1px solid rgba(255, 255, 255, 0.14);
 border-radius: 14px;
 background: rgba(255, 255, 255, 0.04);
}

.hero__breakdown li {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 12px;
 padding: 8px 0;
}

.hero__breakdown li + li {
 border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.hero__breakdown-label {
 font-size: 12px;
 line-height: 1.35;
 color: var(--on-ink-sub);
 font-feature-settings: "palt";
}

.hero__breakdown-value {
 font-size: 15px;
 font-weight: 700;
 line-height: 1.3;
 white-space: nowrap;
 font-feature-settings: "palt";
}

@media (min-width: 600px) {
 .hero__breakdown {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
 }

 .hero__breakdown li {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  padding: 10px 12px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
 }

 .hero__breakdown li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
 }
}

.hero__breakdown-value .num {
 margin-right: 1px;
 font-size: 1.12em;
 font-weight: 600;
 color: var(--gold-light);
}

.hero__cta {
 margin-top: 22px;
}

.hero__note {
 max-width: 460px;
 margin: 12px auto 0;
 font-size: 12px;
 line-height: 1.6;
 letter-spacing: 0.04em;
 color: var(--on-ink-muted);
 text-align: center;
}

/* タブレット: 1列のまま中央揃え */
@media (min-width: 600px) and (max-width: 899px) {
 .hero__inner {
  text-align: center;
 }

 .hero__amount {
  justify-content: center;
 }

 .hero__breakdown {
  max-width: 520px;
  margin-inline: auto;
 }

 .hero__breakdown li {
  align-items: center;
 }
}

@media (min-width: 900px) {
 .hero {
  padding: 76px 0 88px;
 }

 .hero__inner {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas:
   "visual head"
   "visual body";
  column-gap: 56px;
  align-items: center;
 }

 .hero__head {
  align-self: end;
 }

 .hero__body {
  align-self: start;
  margin-top: 20px;
 }

 .hero__visual {
  width: 100%;
  max-width: 460px;
  margin: 0;
  justify-self: center;
 }

 .hero__breakdown {
  gap: 10px;
  max-width: 520px;
 }

 .hero__breakdown li {
  padding: 11px 14px 12px;
 }

 .hero__breakdown-label {
  font-size: 12px;
 }

 .hero__breakdown-value {
  font-size: 17px;
 }

 .hero__body .hero__cta,
 .hero__note {
  margin-inline: 0;
 }
}

/* CTAボタン */
.cta-btn {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 max-width: 460px;
 min-height: 74px;
 margin-inline: auto;
 padding: 14px 60px 14px 22px;
 border-radius: 999px;
 background: var(--gold-metal);
 background-size: 220% 100%;
 background-position: 0% 50%;
 color: var(--text);
 text-align: center;
 text-decoration: none;
 font-feature-settings: "palt";
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.7),
  inset 0 -2px 0 rgba(122, 88, 20, 0.16),
  0 16px 32px -14px rgba(201, 162, 79, 0.75);
 transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background-position 0.8s var(--ease-out);
}

.cta-btn__label {
 font-size: clamp(15px, 4.1vw, 18px);
 font-weight: 700;
 line-height: 1.4;
 letter-spacing: 0.02em;
}

.cta-btn__note {
 margin-top: 2px;
 font-size: 12px;
 font-weight: 500;
 line-height: 1.4;
 color: rgba(20, 35, 42, 0.86);
}

.cta-btn__icon {
 position: absolute;
 top: 50%;
 right: 12px;
 display: grid;
 place-items: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: var(--ink);
 color: var(--gold-light);
 translate: 0 -50%;
 transition: translate 0.4s var(--ease-out);
}

.cta-btn__icon svg {
 width: 18px;
 height: 18px;
}

/* 定期的に横切る光 */
.cta-btn::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 bottom: 0;
 left: -45%;
 width: 35%;
 background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
 transform: skewX(-20deg);
 pointer-events: none;
}

.cta-btn:focus-visible {
 outline-offset: 4px;
}

@media (hover: hover) {
 .cta-btn:hover {
  color: var(--text);
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow:
   inset 0 1px 0 rgba(255, 255, 255, 0.7),
   inset 0 -2px 0 rgba(122, 88, 20, 0.16),
   0 22px 40px -14px rgba(201, 162, 79, 0.9);
 }

 .cta-btn:hover .cta-btn__icon {
  translate: 4px -50%;
 }
}

/* 押下時（ホバー指定より後に置く） */
.cta-btn:active {
 transform: translateY(0) scale(0.985);
}

@media (min-width: 768px) {
 .cta-btn {
  min-height: 80px;
  padding: 16px 72px 16px 40px;
 }

 .cta-btn__label {
  letter-spacing: 0.06em;
 }

 .cta-btn__icon {
  right: 16px;
  width: 46px;
  height: 46px;
 }
}

/* ============================================================
   2. 申し込みまでの流れ（要約）
   ============================================================ */

.route {
 padding: 32px 0 36px;
 background: var(--bg-soft);
 border-bottom: 1px solid var(--line);
}

.route__head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 16px;
}

.route__title {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 18px;
 font-weight: 700;
 line-height: 1.4;
 font-feature-settings: "palt";
}

.route__title::before {
 content: "";
 flex: none;
 width: 4px;
 height: 1.1em;
 border-radius: 2px;
 background: var(--primary);
}

.route__more {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 flex: none;
 font-size: 14px;
 font-weight: 500;
 white-space: nowrap;
}

/* 下向きの矢印 */
.route__more::after {
 content: "";
 width: 7px;
 height: 7px;
 margin-top: -3px;
 border-right: 1.5px solid currentColor;
 border-bottom: 1.5px solid currentColor;
 rotate: 45deg;
}

.route__list {
 display: grid;
 gap: 10px;
}

.route__item {
 position: relative;
}

.route__item a {
 position: relative;
 display: flex;
 align-items: center;
 gap: 14px;
 height: 100%;
 padding: 11px 16px;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: var(--white);
 color: var(--text);
 text-decoration: none;
 transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 項目どうしをつなぐ点線（スマートフォン） */
.route__item + .route__item a::before {
 content: "";
 position: absolute;
 top: -11px;
 left: 33px;
 width: 2px;
 height: 10px;
 background: repeating-linear-gradient(to bottom, var(--primary) 0 3px, transparent 3px 6px);
}

@media (hover: hover) {
 .route__item a:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
 }
}

.route__num {
 flex: none;
 display: grid;
 place-items: center;
 width: 36px;
 height: 36px;
 border: 2px solid var(--primary);
 border-radius: 50%;
 background: var(--white);
 color: var(--primary-ink);
 font-size: 14px;
 font-weight: 600;
 line-height: 1;
}

.route__text {
 display: flex;
 flex-direction: column;
 min-width: 0;
}

.route__place {
 font-size: 12px;
 line-height: 1.5;
 color: var(--text-muted);
}

.route__action {
 font-size: 15px;
 font-weight: 700;
 line-height: 1.5;
 font-feature-settings: "palt";
}

/* タブレット: 2列×2段（番号で順序を示す） */
@media (min-width: 600px) {
 .route {
  padding: 36px 0 40px;
 }

 .route__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
 }

 .route__item + .route__item a::before {
  content: none;
 }

 .route__item a {
  padding: 14px 18px;
 }
}

/* PC: 1行4列と矢印（各項目の文言が1行に収まる幅から） */
@media (min-width: 1080px) {
 .route__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
 }

 .route__item + .route__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -18px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
  translate: 0 -50%;
  rotate: 45deg;
 }

 .route__item a {
  padding: 16px 18px;
 }
}

/* ============================================================
   3. 入会キャンペーンと受け取り条件
   ============================================================ */

.campaign {
 background: var(--bg);
}

.benefits {
 --gap: 34px;
 display: grid;
 gap: var(--gap);
}

.benefit-card {
 position: relative;
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 grid-template-areas:
  "index index"
  "title amount"
  "note note";
 align-items: center;
 column-gap: 12px;
 padding: 20px 20px 18px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow-sm);
}

/* 上辺の金色タブ */
.benefit-card::before {
 content: "";
 position: absolute;
 top: -1px;
 left: 20px;
 width: 56px;
 height: 3px;
 border-radius: 0 0 3px 3px;
 background: var(--gold-metal);
}

/* カード間の「＋」 */
.benefit-card + .benefit-card::after {
 content: "";
 position: absolute;
 top: calc(var(--gap) / -2 - 1px);
 left: 50%;
 width: 28px;
 height: 28px;
 translate: -50% -50%;
 border: 1px solid var(--primary);
 border-radius: 50%;
 background:
  linear-gradient(var(--primary-ink), var(--primary-ink)) center / 10px 2px no-repeat,
  linear-gradient(var(--primary-ink), var(--primary-ink)) center / 2px 10px no-repeat,
  var(--white);
}

.benefit-card__index {
 grid-area: index;
 margin-bottom: 10px;
 font-size: 12px;
 font-weight: 600;
 line-height: 1;
 letter-spacing: 0.18em;
 color: var(--gold-ink);
}

.benefit-card__title {
 grid-area: title;
 font-size: 15px;
 font-weight: 700;
 line-height: 1.5;
 font-feature-settings: "palt";
}

.benefit-card__amount {
 grid-area: amount;
 line-height: 1;
 text-align: right;
 white-space: nowrap;
}

.benefit-card__amount .num {
 font-size: 32px;
 font-weight: 600;
 letter-spacing: -0.01em;
}

.benefit-card__unit {
 margin-left: 3px;
 font-size: 13px;
 font-weight: 700;
}

.benefit-card__note {
 grid-area: note;
 margin-top: 14px;
 padding-top: 12px;
 border-top: 1px dashed var(--line);
 font-size: 13px;
 line-height: 1.6;
 color: var(--text-muted);
}

@media (min-width: 720px) {
 /* 3枚の各行（番号・見出し・金額・条件）を subgrid で横にそろえる */
 .benefits {
  --gap: 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  row-gap: 0;
 }

 .benefit-card {
  grid-row: span 4;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-template-areas:
   "index"
   "title"
   "amount"
   "note";
  align-items: start;
  padding: 28px 24px 22px;
 }

 .benefit-card + .benefit-card::after {
  top: 50%;
  left: calc(var(--gap) / -2 - 1px);
 }

 .benefit-card__title {
  font-size: 16px;
 }

 .benefit-card__amount {
  margin-top: 22px;
  text-align: left;
 }

 .benefit-card__amount .num {
  font-size: 42px;
 }
}

/* 合計 */
.benefits-total {
 --gap: 34px;
 position: relative;
 isolation: isolate;
 margin-top: var(--gap);
 padding: 30px 20px 32px;
 border-radius: var(--radius-lg);
 background:
  radial-gradient(80% 120% at 50% 0%, rgba(72, 168, 188, 0.24), transparent 62%),
  var(--ink);
 color: var(--on-ink);
 text-align: center;
 box-shadow: var(--shadow-md);
}

/* 合計の「＝」 */
.benefits-total::before {
 content: "";
 position: absolute;
 top: calc(var(--gap) / -2);
 left: 50%;
 width: 28px;
 height: 28px;
 translate: -50% -50%;
 border: 1px solid var(--primary);
 border-radius: 50%;
 background:
  linear-gradient(var(--primary-ink), var(--primary-ink)) center calc(50% - 3px) / 10px 2px no-repeat,
  linear-gradient(var(--primary-ink), var(--primary-ink)) center calc(50% + 3px) / 10px 2px no-repeat,
  var(--white);
}

.benefits-total::after {
 content: "";
 position: absolute;
 z-index: -1;
 inset: 0;
 border-radius: inherit;
 background: repeating-radial-gradient(circle at 50% 130%, rgba(72, 168, 188, 0.18) 0 1px, transparent 1.5px 18px);
 -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 90%);
 mask-image: linear-gradient(to bottom, transparent 10%, #000 90%);
 pointer-events: none;
}

.benefits-total__label {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.12em;
 color: var(--on-ink-sub);
}

.benefits-total__label::before,
.benefits-total__label::after {
 content: "";
 width: 24px;
 height: 1px;
 background: var(--primary);
}

.benefits-total__amount {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: baseline;
 column-gap: 6px;
 margin-top: 6px;
 line-height: 1.1;
 font-feature-settings: "palt";
}

.benefits-total__amount small {
 font-size: 16px;
 font-weight: 700;
}

.benefits-total__amount .num {
 padding-right: 0.04em;
 font-size: clamp(46px, 13vw, 80px);
 font-weight: 600;
 font-variant-numeric: lining-nums tabular-nums;
 letter-spacing: -0.01em;
 color: var(--gold-light);
 background: var(--gold-text);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

@media (min-width: 720px) {
 .benefits-total {
  --gap: 40px;
  padding: 34px 32px 38px;
 }

 .benefits-total__amount small {
  font-size: 18px;
 }
}

/* 特典を受け取るための条件 */
.conditions {
 margin-top: 28px;
 padding: 24px 20px 8px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-sm);
}

.conditions__title {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 18px;
 font-weight: 700;
 line-height: 1.5;
 font-feature-settings: "palt";
}

.conditions__title::before {
 content: "";
 flex: none;
 width: 4px;
 height: 1.1em;
 border-radius: 2px;
 background: var(--primary);
}

.conditions__list {
 margin-top: 6px;
}

.conditions__item {
 position: relative;
 padding: 16px 0 18px 38px;
 border-top: 1px dashed var(--line);
}

.conditions__item:first-child {
 border-top: 0;
}

/* チェックの印 */
.conditions__item::before {
 content: "";
 position: absolute;
 top: 19px;
 left: 0;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%230b171b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.conditions__name {
 font-weight: 700;
 line-height: 1.6;
 font-feature-settings: "palt";
}

.conditions__text {
 margin-top: 4px;
 font-size: 15px;
 line-height: 1.75;
 color: var(--text-sub);
}

/* 期限の例 */
.timeline {
 max-width: 460px;
 margin-top: 14px;
 padding: 12px 14px 14px;
 border-radius: 14px;
 background: var(--bg-soft);
}

.timeline__caption {
 font-size: 12px;
 line-height: 1.5;
 color: var(--text-muted);
}

.timeline__list {
 position: relative;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 margin-top: 10px;
}

/* 3つの点をつなぐ線 */
.timeline__list::before {
 content: "";
 position: absolute;
 top: 7px;
 right: calc(100% / 6);
 left: calc(100% / 6);
 height: 2px;
 background: var(--primary);
}

.timeline__item {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding-top: 22px;
 text-align: center;
}

.timeline__item::before {
 content: "";
 position: absolute;
 top: 1px;
 left: 50%;
 width: 14px;
 height: 14px;
 translate: -50% 0;
 border: 2px solid var(--primary);
 border-radius: 50%;
 background: var(--white);
}

.timeline__item--goal::before {
 border-color: transparent;
 background: var(--gold-metal);
 box-shadow: 0 0 0 4px rgba(201, 162, 79, 0.25);
}

.timeline__month {
 font-size: 15px;
 font-weight: 700;
 line-height: 1.4;
}

.timeline__label {
 font-size: 12px;
 line-height: 1.45;
 color: var(--text-muted);
 word-break: auto-phrase;
}

.timeline__item--goal .timeline__label {
 font-weight: 700;
 color: var(--text);
}

.campaign__cta {
 margin-top: 32px;
}

/* スマートフォンでは字下げを外して3列の幅を確保する */
@media (max-width: 767px) {
 .timeline {
  margin-left: -38px;
 }
}

@media (min-width: 768px) {
 .conditions {
  margin-top: 36px;
  padding: 30px 32px 12px;
 }

 .conditions__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: 32px;
  padding: 20px 0 22px 40px;
 }

 .conditions__item::before {
  top: 22px;
 }

 .conditions__text {
  margin-top: 0;
 }

 .conditions__text,
 .timeline {
  grid-column: 2;
 }

 .campaign__cta {
  margin-top: 40px;
 }
}

/* ============================================================
   4. 申し込み手順
   ============================================================ */

.flow {
 background: var(--bg-soft);
}

.flow-group + .flow-group {
 margin-top: 56px;
}

.flow-group__title {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 20px;
 font-size: 18px;
 font-weight: 700;
 line-height: 1.4;
 font-feature-settings: "palt";
}

.flow-group__range {
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.08em;
 color: var(--primary-ink);
}

.flow-group__title::after {
 content: "";
 flex: 1;
 height: 1px;
 background: var(--primary-line);
}

.steps-list {
 --gap: 36px;
 display: grid;
 gap: var(--gap);
}

.step {
 position: relative;
 scroll-margin-top: 24px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-sm);
}

/* 手順をつなぐ点線 */
.step:not(:last-child)::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 41px;
 width: 2px;
 height: calc(var(--gap) + 2px);
 background: repeating-linear-gradient(to bottom, var(--primary) 0 5px, transparent 5px 10px);
}

.step__body {
 padding: 22px 20px 0;
}

.step__head {
 display: flex;
 align-items: flex-start;
 gap: 14px;
}

.step__num {
 flex: none;
 display: grid;
 place-items: center;
 width: 44px;
 height: 44px;
 border: 2px solid var(--primary);
 border-radius: 50%;
 background: var(--white);
 color: var(--primary-ink);
 font-size: 16px;
 font-weight: 600;
 line-height: 1;
 letter-spacing: 0.02em;
}

.step__heading {
 flex: 1;
 min-width: 0;
}

.step__place {
 font-size: 12px;
 font-weight: 500;
 line-height: 1.5;
 letter-spacing: 0.04em;
 color: var(--primary-ink);
}

.step__title {
 margin-top: 2px;
 font-size: 17px;
 font-weight: 700;
 line-height: 1.55;
 font-feature-settings: "palt";
}

.step__desc {
 margin-top: 14px;
 color: var(--text-sub);
}

/* 押すボタン・確認点などの補足（画像内の案内を本文化） */
.step__tips {
 display: grid;
 gap: 8px;
 margin-top: 14px;
}

.step__tip {
 padding: 11px 14px 12px;
 border-left: 3px solid var(--primary);
 border-radius: 4px 12px 12px 4px;
 background: var(--bg-soft);
}

.step__tip dt {
 font-size: 12px;
 font-weight: 700;
 line-height: 1.5;
 letter-spacing: 0.04em;
 color: var(--primary-ink);
}

.step__tip dd {
 margin-top: 2px;
 font-size: 15px;
 line-height: 1.7;
}

.step__media {
 margin-top: 20px;
 overflow: hidden;
 border-top: 1px solid var(--line);
 border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
 background: var(--white);
}

.step__media img {
 width: 100%;
}

/* 手順1は画像の代わりに実際のボタンを置く */
.step__media--cta {
 position: relative;
 isolation: isolate;
 padding: 24px 12px 18px;
 border-top: 0;
 background:
  radial-gradient(80% 90% at 50% 0%, rgba(72, 168, 188, 0.26), transparent 70%),
  var(--ink);
 text-align: center;
}

.step__media--cta::before {
 content: "";
 position: absolute;
 z-index: -1;
 inset: 0;
 background: repeating-radial-gradient(circle at 50% 120%, rgba(72, 168, 188, 0.16) 0 1px, transparent 1.5px 18px);
 pointer-events: none;
}

.step__cta-note {
 margin-top: 12px;
 font-size: 12px;
 line-height: 1.6;
 letter-spacing: 0.02em;
 color: var(--on-ink-muted);
}

/* カード内の狭い幅でもボタン名を1行に収める */
@media (max-width: 767px) {
 .step__media--cta .cta-btn {
  padding-inline: 16px 54px;
 }

 .step__media--cta .cta-btn__label {
  font-size: 15px;
  letter-spacing: 0;
 }

 .step__media--cta .cta-btn__icon {
  right: 10px;
  width: 36px;
  height: 36px;
 }
}

/* 最後の手順（特典付与）は金色 */
.step--goal {
 border-color: rgba(201, 162, 79, 0.5);
}

.step--goal .step__num {
 border-color: transparent;
 background: var(--gold-metal);
 color: var(--text);
 box-shadow: 0 8px 18px -8px rgba(201, 162, 79, 0.9);
}

@media (min-width: 768px) {
 .flow-group + .flow-group {
  margin-top: 72px;
 }

 .flow-group__title {
  margin-bottom: 24px;
  font-size: 20px;
 }

 .steps-list {
  --gap: 40px;
 }

 .step:not(:last-child)::after {
  left: 55px;
 }

 .step__body {
  padding: 28px 32px 0;
 }

 .step__head {
  gap: 18px;
 }

 .step__num {
  width: 48px;
  height: 48px;
  font-size: 17px;
 }

 .step__title {
  font-size: 19px;
 }

 .step__desc,
 .step__tips {
  margin-left: 66px;
 }

 .step__media {
  margin-top: 26px;
 }

 .step__media--cta {
  padding: 36px 32px 28px;
 }
}

/* PC: 説明（左）と画面例（右）の2列 */
@media (min-width: 960px) {
 .step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
 }

 .step__body {
  padding: 30px 32px 32px;
 }

 .step__media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  border-top: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0;
 }

 .step__media--cta {
  border-left: 0;
  padding: 32px 36px;
 }
}

/* ============================================================
   5. よくある質問（details/summary）
   ============================================================ */

.faq {
 background: var(--bg);
}

.faq-list {
 display: grid;
 gap: 14px;
 max-width: var(--measure);
}

.faq-item {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover,
.faq-item[open] {
 border-color: var(--primary-line);
}

.faq-item[open] {
 box-shadow: var(--shadow-sm);
}

.faq-item__q {
 display: flex;
 align-items: flex-start;
 gap: 14px;
 padding: 18px;
 border-radius: inherit;
 list-style: none;
 cursor: pointer;
 font-weight: 700;
 line-height: 1.6;
 font-feature-settings: "palt";
}

.faq-item__q::-webkit-details-marker {
 display: none;
}

.faq-mark {
 flex: none;
 display: grid;
 place-items: center;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: var(--primary);
 color: var(--ink);
 font-size: 15px;
 font-weight: 600;
 line-height: 1;
}

.faq-mark--a {
 background: var(--ink);
 color: var(--gold-light);
}

.faq-item__text {
 flex: 1;
 min-width: 0;
 padding-top: 2px;
}

/* 開閉アイコン（＋ → －） */
.faq-item__icon {
 flex: none;
 position: relative;
 width: 30px;
 height: 30px;
 border: 1px solid var(--line);
 border-radius: 50%;
 transition: background-color 0.3s ease, border-color 0.3s ease;
}

.faq-item__icon::before,
.faq-item__icon::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 10px;
 height: 2px;
 border-radius: 1px;
 background: var(--text);
 translate: -50% -50%;
 transition: rotate 0.4s var(--ease-out);
}

.faq-item__icon::after {
 rotate: 90deg;
}

@media (hover: hover) {
 .faq-item__q:hover .faq-item__icon {
  border-color: var(--primary);
 }
}

.faq-item[open] .faq-item__icon {
 background: var(--primary);
 border-color: var(--primary);
}

.faq-item[open] .faq-item__icon::after {
 rotate: 0deg;
}

.faq-item__a {
 display: flex;
 gap: 14px;
 margin: 0 18px;
 padding: 18px 0 22px;
 border-top: 1px dashed var(--line);
}

.faq-item__a p {
 flex: 1;
 min-width: 0;
 padding-top: 2px;
 color: var(--text-sub);
}

.faq-item__body {
 flex: 1;
 min-width: 0;
}

.faq-item__body p + p {
 margin-top: 8px;
}

.faq-item__note {
 font-size: 13px;
 line-height: 1.7;
}

.faq-item__a strong {
 color: var(--text);
 background: linear-gradient(transparent 62%, rgba(72, 168, 188, 0.24) 62%);
}

.faq-item[open] .faq-item__a {
 animation: faq-open 0.45s var(--ease-out);
}

@keyframes faq-open {
 from { opacity: 0; translate: 0 -6px; }
}

/* 高さのアニメーション（対応ブラウザのみ） */
@supports (interpolate-size: allow-keywords) {
 .faq-item {
  interpolate-size: allow-keywords;
 }

 .faq-item::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.45s var(--ease-out), content-visibility 0.45s allow-discrete;
 }

 .faq-item[open]::details-content {
  height: auto;
 }
}

@media (min-width: 768px) {
 .faq-item__q {
  padding: 20px 22px;
 }

 .faq-item__a {
  margin: 0 22px;
  padding-bottom: 24px;
 }
}

/* PC: 見出し（左・追従）と質問（右）の2列 */
@media (min-width: 960px) {
 .faq .container {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  column-gap: 56px;
  align-items: start;
 }

 .faq .section-head {
  position: sticky;
  top: 40px;
  margin-bottom: 0;
 }

 .faq-list {
  max-width: none;
 }
}

/* ============================================================
   6. 最終CTA
   ============================================================ */

.cta-final {
 position: relative;
 overflow: hidden;
 isolation: isolate;
 padding: 64px 0 76px;
 color: var(--on-ink);
 text-align: center;
 background:
  radial-gradient(80% 60% at 50% 0%, rgba(72, 168, 188, 0.2), transparent 70%),
  linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}

/* 上端の主色ライン */
.cta-final::after {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--primary) 25%, var(--primary) 75%, transparent);
 opacity: 0.7;
}

.cta-final__card {
 width: min(48%, 190px);
 margin: 0 auto 28px;
}

.cta-final__card img {
 transform: perspective(1200px) rotateX(14deg) rotate(-5deg);
 filter: drop-shadow(0 26px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}

.cta-final__badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 6px 16px 6px 14px;
 border-radius: 999px;
 background: var(--primary);
 color: var(--ink);
 font-size: 12px;
 font-weight: 700;
 line-height: 1.4;
 letter-spacing: 0.1em;
 font-feature-settings: "palt";
}

.cta-final__badge::before {
 content: "";
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--ink);
}

.cta-final__catch {
 max-width: 18em; /* PCでも2行に分ける */
 margin: 18px auto 0;
 font-size: clamp(20px, 5.4vw, 36px);
 font-weight: 700;
 line-height: 1.5;
 letter-spacing: 0.03em;
 font-feature-settings: "palt";
}

.cta-final__sub {
 margin-top: 16px;
 font-size: 15px;
 line-height: 1.8;
 color: var(--on-ink-sub);
}

.cta-final__sub strong {
 display: inline-block;
 margin-top: 2px;
 font-size: 1.12em;
 color: var(--gold-light);
}

.cta-final .cta-btn {
 margin-top: 32px;
}

/* 公式サイトで押すボタンの順番 */
.cta-final__route {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 2px 8px;
 margin-top: 18px;
 font-size: 13px;
 line-height: 1.6;
 color: var(--on-ink-muted);
}

.cta-final__route-step {
 display: inline-flex;
 align-items: center;
 font-weight: 700;
 color: var(--on-ink);
}

@media (min-width: 768px) {
 .cta-final {
  padding: 104px 0 116px;
 }

 .cta-final__card {
  width: 260px;
  margin-bottom: 36px;
 }

 .cta-final__sub {
  font-size: 16px;
 }
}

/* ============================================================
   フッター
   ============================================================ */

.site-footer {
 padding: 44px 0 56px;
 background: var(--ink-deep);
 border-top: 1px solid rgba(255, 255, 255, 0.06);
 color: var(--on-ink-muted);
}

.site-footer__inner {
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: var(--gutter);
}

.site-footer__brand {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
 font-size: 13px;
 font-weight: 500;
 letter-spacing: 0.06em;
 color: var(--on-ink-sub);
 text-align: center;
 font-feature-settings: "palt";
}

.site-footer__logo {
 font-size: 15px;
 font-weight: 700;
 letter-spacing: 0.08em;
 color: var(--on-ink);
}

.site-footer__sep {
 display: none;
}

@media (min-width: 768px) {
 .site-footer__brand {
  flex-direction: row;
  justify-content: center;
  gap: 0;
 }

 .site-footer__logo {
  font-size: 13px;
 }

 .site-footer__sep {
  display: inline;
  margin-inline: 0.6em;
  color: var(--primary);
 }
}

.site-footer__disclaimer {
 display: grid;
 gap: 6px;
 max-width: var(--measure);
 margin: 20px auto 0;
 padding-top: 20px;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 font-size: 12px;
 line-height: 1.75;
}

.site-footer__disclaimer p {
 padding-left: 1em;
 text-indent: -1em;
}

/* ============================================================
   追従CTA（特典額＋申し込みボタンのバー）
   ============================================================ */

.float-cta {
 position: fixed;
 z-index: 40;
 right: 10px;
 bottom: calc(10px + env(safe-area-inset-bottom, 0px));
 left: 10px;
 visibility: hidden;
 opacity: 0;
 translate: 0 140%;
 transition: translate 0.55s var(--ease-out), opacity 0.35s ease, visibility 0s linear 0.55s;
 pointer-events: none;
}

.float-cta.is-visible {
 visibility: visible;
 opacity: 1;
 translate: 0 0;
 transition: translate 0.55s var(--ease-out), opacity 0.35s ease, visibility 0s linear 0s;
 pointer-events: auto;
}

.float-cta__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 max-width: 520px;
 margin-inline: auto;
 padding: 8px 8px 8px 16px;
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 20px;
 background: rgba(11, 23, 27, 0.92);
 box-shadow: 0 18px 40px -12px rgba(11, 23, 27, 0.6);
 -webkit-backdrop-filter: blur(12px);
 backdrop-filter: blur(12px);
}

.float-cta__value {
 display: flex;
 flex-direction: column;
 min-width: 0;
 line-height: 1.25;
}

.float-cta__label {
 font-size: 11px;
 letter-spacing: 0.06em;
 color: var(--on-ink-muted);
}

.float-cta__amount {
 font-size: 14px;
 font-weight: 700;
 color: var(--on-ink);
 white-space: nowrap;
 font-feature-settings: "palt";
}

.float-cta__amount .num {
 margin: 0 1px;
 font-size: 1.25em;
 font-weight: 600;
 color: var(--gold-light);
}

.float-cta__btn {
 display: flex;
 flex: none;
 align-items: center;
 gap: 8px;
 min-height: 48px;
 padding: 6px 6px 6px 18px;
 border-radius: 999px;
 background: var(--gold-metal);
 color: var(--text);
 font-size: 14px;
 font-weight: 700;
 letter-spacing: 0.02em;
 white-space: nowrap;
 text-decoration: none;
 font-feature-settings: "palt";
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 16px -8px rgba(201, 162, 79, 0.9);
}

.float-cta__btn:hover {
 color: var(--text);
}

.float-cta__icon {
 flex: none;
 display: grid;
 place-items: center;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: var(--ink);
 color: var(--gold-light);
}

.float-cta__icon svg {
 width: 16px;
 height: 16px;
}

/* 幅の狭い端末では矢印を省いてボタン名を優先 */
@media (max-width: 374px) {
 .float-cta__btn {
  padding-right: 18px;
 }

 .float-cta__icon {
  display: none;
 }
}

@media (min-width: 900px) {
 .float-cta {
  right: 24px;
  bottom: 24px;
  left: auto;
 }

 .float-cta__inner {
  gap: 20px;
  padding: 10px 10px 10px 22px;
 }

 .float-cta__amount {
  font-size: 15px;
 }
}

/* ============================================================
   アニメーション
   ============================================================ */

/* スクロール表示（JS有効時のみ隠す） */
.js .reveal {
 opacity: 0;
 translate: 0 26px;
 transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
 transition-delay: calc(var(--i, 0) * 90ms);
}

.js .reveal.is-visible {
 opacity: 1;
 translate: 0 0;
}

/* FAQは表示時のフェードと、ホバー・開閉時の枠線・影の変化を両立する */
.js .faq-item.reveal {
 transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
 transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s;
}

/* 主色の線を表示に合わせて描く（見出しの線・手順の点線・特典の＋＝） */
.js .reveal .eyebrow__num::after {
 scale: 0 1;
 transform-origin: left center;
 transition: scale 1s var(--ease-out) 0.3s;
}

.js .reveal.is-visible .eyebrow__num::after {
 scale: 1 1;
}

.js .step::after {
 scale: 1 0;
 transform-origin: center top;
 transition: scale 0.9s var(--ease-out) 0.4s;
}

.js .step.is-visible::after {
 scale: 1 1;
}

.js .benefit-card::after,
.js .benefits-total::before {
 opacity: 0;
 scale: 0.4;
 transition: opacity 0.4s ease 0.45s, scale 0.6s var(--ease-out) 0.45s;
}

.js .benefit-card.is-visible::after,
.js .benefits-total.is-visible::before {
 opacity: 1;
 scale: 1;
}

@media (prefers-reduced-motion: no-preference) {
 .hero__head {
  animation: rise 1s var(--ease-out) 0.1s both;
 }

 .hero__body {
  animation: rise 1s var(--ease-out) 0.25s both;
 }

 .hero__visual {
  animation: card-in 1.3s var(--ease-out) both;
 }

 .hero__card {
  animation: card-float 8s ease-in-out 1.3s infinite;
 }

 .hero__card::after {
  animation: card-sheen 7s var(--ease-out) 1.4s infinite;
 }

 .cta-btn::after {
  animation: cta-shine 5s var(--ease-out) 2s infinite;
 }
}

@keyframes rise {
 from { opacity: 0; translate: 0 20px; }
}

@keyframes card-in {
 from { opacity: 0; translate: 0 36px; scale: 0.94; }
}

@keyframes card-float {
 50% { translate: 0 -10px; }
}

@keyframes card-sheen {
 0% { background-position: 160% 0; }
 35%,
 100% { background-position: -60% 0; }
}

@keyframes cta-shine {
 0% { left: -45%; }
 30%,
 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
 html {
  scroll-behavior: auto;
 }

 *,
 *::before,
 *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
 }

 .js .reveal {
  opacity: 1;
  translate: none;
 }

 .js .reveal .eyebrow__num::after,
 .js .step::after,
 .js .benefit-card::after,
 .js .benefits-total::before {
  opacity: 1;
  scale: 1;
 }

 .scroll-progress {
  display: none;
 }
}