/* ==========================================================================
   楽器の買取屋さん 診断LP
   世界観: 工房の作業台 / 木の温かみ。warm gray 単一系統 + テラコッタ1色 + CTAのみ緑
   ========================================================================== */

:root {
  color-scheme: light;

  /* surface */
  --page: #241d19;
  --stage: #fbf7f1;
  --surface: #ffffff;
  --surface-tint: #f7efe3;
  --surface-warm: #fdf6ec;

  /* ink（warm gray 単一系統・純黒不使用） */
  --text: #4a423b;
  --text-strong: #2a231e;
  --muted: #7a6e63;

  /* line */
  --line: #e6dbc9;
  --line-soft: #f0e7d8;

  /* accent: 1色のみ（テラコッタ / 木） */
  --accent: #b4552f;
  --accent-deep: #8c3d1c;
  --accent-soft: #f8e5d6;
  --marker: rgba(180, 85, 47, 0.16);

  /* CTA: ブランド色（テラコッタ）と別系統の緑。
     茶系の紙面に沈まないよう明度・彩度を上げているが、彩度は80%を超えない */
  --cta-top: #8df0c9;
  --cta-mid: #2fd39b;
  --cta-bottom: #17b07d;
  --cta-shade: #12764f;
  --cta-ink: #0b3d2b;

  --focus: #1f6feb;

  --radius-card: 18px;
  --radius-control: 14px;
  --spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", -apple-system, sans-serif;
  font-feature-settings: "palt" 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background-color: var(--page);
  background-image:
    radial-gradient(120% 60% at 50% 0%, #3b2f27 0%, rgba(59, 47, 39, 0) 60%),
    radial-gradient(90% 50% at 50% 100%, #1c1613 0%, rgba(28, 22, 19, 0) 70%);
  letter-spacing: 0.005em;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   ステージ（SP幅を主戦場にした1カラム）
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  width: min(100%, 640px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--stage);
  box-shadow: 0 0 0 1px rgba(42, 35, 30, 0.16), 0 30px 70px -28px rgba(24, 18, 15, 0.72);
}

.pr-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f3e9dc;
  background: linear-gradient(180deg, #3a2e26 0%, #2f2620 100%);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.pr-bar__mark {
  padding: 2px 7px;
  border-radius: 4px;
  color: #2f2620;
  background: #e4d3bd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.site-shell {
  padding: 0 0 96px;
}

.screen {
  display: none;
}

.screen.is-active {
  display: block;
}

/* --------------------------------------------------------------------------
   タイポグラフィ
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.55;
  letter-spacing: 0.005em;
}

h1 {
  font-size: clamp(25px, 6.6vw, 33px);
  font-weight: 800;
}

h2 {
  font-size: clamp(20px, 5.4vw, 26px);
  font-weight: 800;
}

h3 {
  font-size: clamp(19px, 5vw, 23px);
  font-weight: 800;
}

p {
  margin: 0;
  line-height: 1.85;
}

.budoux {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   FV
   -------------------------------------------------------------------------- */

.hero {
  padding-bottom: 26px;
  background: var(--stage);
}

.hero-media {
  position: relative;
  /* aspect-ratio と max-height を併用すると、高さの上限に合わせて
     幅まで比率で縮む（右に空白ができる）。width を明示して止める */
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 2;
  /* FVのCTAを高さ844pxのfold内に収めるための上限 */
  max-height: clamp(184px, 25dvh, 300px);
  overflow: hidden;
  /* 人物写真が未配置・読み込み失敗のときに出る下敷き（枠が空にならないように） */
  background-color: var(--surface-tint);
  background-image: url("assets/hero-closet-case.png");
  background-position: 58% 62%;
  background-size: cover;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* app.js が読み込み失敗時に付ける。背景の下敷きをそのまま見せる */
.hero-media img.is-missing {
  display: none;
}

/* 画像の下端をキャプション帯で受ける（写真が何の写真かを0.5秒で言い切る）。
   帯の暗いグラデが画像→紙面のつなぎも兼ねるため、旧・クリーム色のフェードは置き換えた */
.hero-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin: 0;
  padding: 32px 16px 12px;
  background: linear-gradient(
    180deg,
    rgba(36, 29, 25, 0) 0%,
    rgba(36, 29, 25, 0.42) 38%,
    rgba(36, 29, 25, 0.74) 68%,
    rgba(36, 29, 25, 0.9) 100%
  );
  pointer-events: none;
}

.hero-caption__label {
  display: inline-block;
  max-width: 100%;
  padding: 4px 11px;
  border-left: 3px solid var(--accent-soft);
  /* hero画像の明るい部分でも読めるよう、帯自体に不透明度と影を持たせる（純黒は使わない） */
  color: #fdf8f0;
  background: rgba(38, 30, 26, 0.62);
  text-shadow: 0 1px 2px rgba(30, 24, 20, 0.8);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.03em;
}

.hero-body {
  padding: 4px 18px 0;
}

/* 呼びかけ（誰に向けた診断かの絞り込み）。1行に収まらない長さなので
   ピル型ではなく、左マーカー付きの帯にしている */
.eyebrow {
  position: relative;
  display: block;
  margin: 0 0 13px;
  padding: 8px 12px 8px 29px;
  border-radius: 12px;
  color: var(--accent-deep);
  background: var(--accent-soft);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.eyebrow::before {
  position: absolute;
  top: 15px;
  left: 12px;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}

.hero-title {
  margin-bottom: 18px;
}

#intro-title {
  display: inline;
  padding: 0 2px;
  background-image: linear-gradient(transparent 72%, var(--marker) 72%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lead {
  font-size: 16px;
  color: var(--text);
}

.lead strong {
  padding: 0 2px;
  background-image: linear-gradient(transparent 68%, rgba(180, 85, 47, 0.24) 68%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--text-strong);
  font-weight: 700;
}

/* CTA上のマイクロコピー（既存の安心3行をそのまま使用・文言は維持したまま余白だけ圧縮） */
.safe-list {
  margin: 14px 0 12px;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--surface-warm);
  list-style: none;
}

.safe-list li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 14px;
  line-height: 1.6;
}

.safe-list li + li {
  border-top: 1px dashed var(--line);
}

.safe-list li::before {
  position: absolute;
  top: 12px;
  left: 3px;
  width: 16px;
  height: 9px;
  content: "";
  border-bottom: 2.5px solid var(--accent);
  border-left: 2.5px solid var(--accent);
  border-radius: 1px;
  transform: rotate(-45deg);
}

.notice {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   CTA（緑・立体ボタン）
   -------------------------------------------------------------------------- */

.primary-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  padding: 12px 20px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: var(--cta-ink);
  background-image: linear-gradient(180deg, var(--cta-top) 0%, var(--cta-mid) 48%, var(--cta-bottom) 100%);
  box-shadow:
    0 6px 0 var(--cta-shade),
    0 14px 22px -10px rgba(20, 113, 80, 0.55);
  text-align: center;
  text-decoration: none;
  font-size: clamp(15px, 4vw, 17px);
  font-weight: 800;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
  animation: cta-attention 2200ms var(--spring) infinite;
}

.primary-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--cta-shade);
  animation: none;
}

/* 2200msに1回だけ小さく脈打つ（transform のみ・止まっている時間のほうが長い） */
@keyframes cta-attention {
  0%,
  70%,
  100% {
    transform: translateY(0) scale(1);
  }

  79% {
    transform: translateY(-2px) scale(1.022);
  }

  88% {
    transform: translateY(0) scale(1);
  }
}

/* FVのCTAが画面外に出たときだけ現れる追従CTA（開始前の押下導線） */
.intro-sticky {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 30;
  width: min(100%, 640px);
  padding: 9px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(251, 247, 241, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 -10px 26px -18px rgba(42, 35, 30, 0.8);
  opacity: 0;
  transform: translateX(-50%) translateY(100%);
  transition: transform 300ms var(--spring), opacity 200ms ease;
  pointer-events: none;
}

.intro-sticky.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.intro-sticky .primary-button {
  min-height: 58px;
}

/* 次へ（前進のボタンなので、CTAと同じ緑・同じ立体感で揃える）。
   選択直後に hidden が外れるたび、ばね系のパルスが3回だけ走る */
.next-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  margin-top: 18px;
  padding: 12px 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: var(--cta-ink);
  background-image: linear-gradient(180deg, var(--cta-top) 0%, var(--cta-mid) 48%, var(--cta-bottom) 100%);
  box-shadow:
    0 5px 0 var(--cta-shade),
    0 12px 20px -10px rgba(18, 118, 79, 0.55);
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  animation: next-attention 620ms var(--spring) 3 both;
  transition: transform 140ms var(--spring), box-shadow 140ms ease;
}

@keyframes next-attention {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  30% {
    transform: translateY(-3px) scale(1.03);
  }

  60% {
    transform: translateY(0) scale(1);
  }
}

.next-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--cta-shade);
  animation: none;
}

.primary-button:focus-visible,
.next-button:focus-visible,
.choice-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   診断
   -------------------------------------------------------------------------- */

.quiz-card {
  margin: 16px 12px 0;
  padding: 18px 16px 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 10px 26px -20px rgba(42, 35, 30, 0.7);
}

/* 設問の写真（カード上端まで全幅で抜く。aspect と max-height 併用時に
   幅が縮まないよう width を明示する） */
.question-media {
  position: relative;
  /* width: auto のままだと max-height に合わせて幅まで比率で縮む（右に空白が出る）。
     カードのパディングぶんを足した実寸で固定する */
  width: calc(100% + 32px);
  margin: -18px -16px 16px;
  aspect-ratio: 3 / 2;
  max-height: clamp(148px, 22dvh, 240px);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-tint);
}

.question-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.progress-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

#progress-text {
  color: var(--accent-deep);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.progress-remain {
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--accent-deep);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 700;
}

.step-dots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-tint);
  font-size: 13px;
  font-weight: 700;
  transition: transform 220ms var(--spring), background-color 220ms ease, color 220ms ease;
}

.step-dot.is-done {
  border-color: var(--accent-soft);
  color: #ffffff;
  background: var(--accent);
}

.step-dot.is-active {
  border-color: var(--accent-deep);
  color: var(--accent-deep);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transform: scale(1.08);
}

.progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-tint);
}

.progress-bar {
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
}

.progress-hint {
  margin: 8px 0 20px;
  color: var(--muted);
  font-size: 12px;
}

#question-title {
  padding-left: 12px;
  border-left: 4px solid var(--accent);
}

.choices {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.choice-button {
  position: relative;
  width: 100%;
  min-height: 62px;
  padding: 14px 38px 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text-strong);
  background: var(--surface);
  box-shadow: 0 3px 0 rgba(140, 61, 28, 0.13);
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition:
    transform 140ms var(--spring),
    box-shadow 140ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    opacity 200ms ease;
}

/* 押し込みフィードバック */
.choice-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(140, 61, 28, 0.13);
}

/* 右端のシェブロン */
.choice-button::after {
  position: absolute;
  top: 50%;
  right: 17px;
  width: 8px;
  height: 8px;
  content: "";
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 160ms var(--spring);
}

.choice-button.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 3px 0 rgba(140, 61, 28, 0.26);
  font-weight: 700;
}

/* 選択後はチェックに変わる */
.choice-button.is-selected::after {
  right: 16px;
  width: 14px;
  height: 8px;
  border-top: 0;
  border-right: 0;
  border-bottom: 2.5px solid var(--accent-deep);
  border-left: 2.5px solid var(--accent-deep);
  transform: translateY(-70%) rotate(-45deg);
}

/* 選択したら他を減光（選んだものを目立たせつつ、他も読める濃さを残す） */
.choices:has(.is-selected) .choice-button:not(.is-selected) {
  opacity: 0.72;
}

/* 選択肢アイコン（Q2 楽器種別 / Q3 状態） */
.choice-button[data-choice="acoustic"],
.choice-button[data-choice="electric"],
.choice-button[data-choice="wind"],
.choice-button[data-choice="strings"],
.choice-button[data-choice="drums"],
.choice-button[data-choice="multiple"],
.choice-button[data-choice="clean"],
.choice-button[data-choice="dust"],
.choice-button[data-choice="broken"],
.choice-button[data-choice="unknown_state"],
.choice-button[data-choice="unknown_model"] {
  min-height: 70px;
  padding-left: 66px;
}

.choice-button[data-choice="acoustic"]::before,
.choice-button[data-choice="electric"]::before,
.choice-button[data-choice="wind"]::before,
.choice-button[data-choice="strings"]::before,
.choice-button[data-choice="drums"]::before,
.choice-button[data-choice="multiple"]::before,
.choice-button[data-choice="clean"]::before,
.choice-button[data-choice="dust"]::before,
.choice-button[data-choice="broken"]::before,
.choice-button[data-choice="unknown_state"]::before,
.choice-button[data-choice="unknown_model"]::before {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 44px;
  height: 44px;
  content: "";
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background-color: var(--surface-tint);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 148%;
  transform: translateY(-50%);
}

.choice-button[data-choice="acoustic"]::before {
  background-image: url("assets/icon-acoustic.webp");
}

.choice-button[data-choice="electric"]::before {
  background-image: url("assets/icon-guitar.webp");
}

.choice-button[data-choice="wind"]::before {
  background-image: url("assets/icon-wind.webp");
}

.choice-button[data-choice="strings"]::before {
  background-image: url("assets/icon-strings.webp");
}

.choice-button[data-choice="drums"]::before {
  background-image: url("assets/icon-drum.webp");
}

.choice-button[data-choice="multiple"]::before {
  background-image: url("assets/icon-other.webp");
}

.choice-button[data-choice="clean"]::before {
  background-image: url("assets/state-mint.webp");
  background-size: cover;
}

.choice-button[data-choice="dust"]::before {
  background-image: url("assets/state-fair.webp");
  background-size: cover;
}

.choice-button[data-choice="broken"]::before {
  background-image: url("assets/state-broken.webp");
  background-size: cover;
}

.choice-button[data-choice="unknown_state"]::before {
  background-image: url("assets/state-good.webp");
  background-size: cover;
}

.choice-button[data-choice="unknown_model"]::before {
  background-image: url("assets/hero-unknown-model.png");
  background-size: cover;
}

/* 回答後の反応カード */
.reaction-card {
  position: relative;
  margin-top: 20px;
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-control);
  background: linear-gradient(180deg, var(--surface-warm) 0%, #ffffff 100%);
  animation: reaction-in 320ms var(--spring) both;
}

@keyframes reaction-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 選んだ選択肢の写真をそのまま返す（Q2の楽器種別・Q3の状態） */
.reaction-card[data-has-media]::before {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 58px;
  height: 58px;
  content: "";
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background-image: var(--reaction-media);
  background-position: center;
  background-size: cover;
  animation: thumb-in 320ms var(--spring) both;
}

@keyframes thumb-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reaction-card[data-has-media] .reaction-body,
.reaction-card[data-has-media] .reaction-note {
  padding-left: 72px;
}

.reaction-body {
  color: var(--text-strong);
  font-size: 15.5px;
  font-weight: 700;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.reaction-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 14px;
}

.amount-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   結果
   -------------------------------------------------------------------------- */

.result-screen {
  /* 下は .site-shell の余白と合わせて固定CTAぶんだけ空ける */
  padding: 16px 12px 44px;
}

.result-hero,
.lp-block {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 10px 26px -20px rgba(42, 35, 30, 0.7);
}

.result-hero {
  padding: 20px 16px 22px;
}

.lp-block {
  margin-top: 14px;
  padding: 20px 16px 22px;
}

/* 全幅メディア（カードのパディングを打ち消す） */
.block-media {
  /* aspect-ratio に max-height を足したとき幅が縮まないように明示する */
  width: auto;
  margin: -20px -16px 18px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-tint);
}

.block-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 結果1枚目のCTAをfold内に上げるため、結果ヒーローは横長にして高さを削る。
   max-height ではなく比率で詰める（max-height を足すと幅まで縮むため） */
.block-media--hero {
  aspect-ratio: 2 / 1;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--accent-deep);
  background: var(--accent-soft);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.type-frame {
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-tint);
  font-size: 11.5px;
  line-height: 1.65;
}

.result-title {
  margin-bottom: 14px;
  padding-left: 12px;
  border-left: 5px solid var(--accent);
  font-size: clamp(24px, 6.4vw, 30px);
}

.result-reason {
  font-size: 15.5px;
}

.lp-block p {
  margin-top: 12px;
  font-size: 15.5px;
}

.lp-block h3 + p {
  margin-top: 14px;
}

/* 買取フロー */
.step-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  counter-reset: flowstep;
  list-style: none;
}

.step-strip li {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.step-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

.step-strip li::after {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  counter-increment: flowstep;
  content: counter(flowstep);
  border-radius: 999px;
  color: #ffffff;
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

/* 実例の写真（横スクロールをやめ、カード内に収まるグリッドにした。
   1枚目をワイド・下段を2枚の非対称組みにして、右端の画像が画面外で
   切れる非対称バグを解消する） */
.voice-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.voice-strip li:first-child {
  grid-column: 1 / -1;
}

.voice-strip li:first-child img {
  aspect-ratio: 16 / 9;
}

.voice-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

/* 結果内のCTAブロック。
   DOM順は app.js のまま、表示順だけ「問いかけ → ボタン → クリックトリガー → 電話」に
   並べ替える（クリックトリガーはボタン直下が全体標準） */
.cta-wrap {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  padding: 16px 14px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface-warm);
}

/* fold内（結果ヒーロー）のCTAだけ、ボタン直上に安心帯を置く。
   数値を含まない安心材料なので、レギュ上の追記表示を増やさずに済む */
.result-hero .cta-wrap::before {
  order: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  content: "無料・登録不要｜金額を見てからでOK";
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: center;
}

.cta-wrap .recap-line {
  order: 1;
}

.cta-wrap .primary-button {
  order: 2;
}

.cta-wrap .trigger-list {
  order: 3;
  margin: 12px 0 0;
}

.cta-wrap .phone-note {
  order: 4;
}

.recap-line {
  margin: 0 0 12px;
  color: var(--text-strong);
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
}

.trigger-list {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  list-style: none;
}

.trigger-list li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: 13.5px;
  line-height: 1.65;
}

.trigger-list li + li {
  border-top: 1px dashed var(--line);
}

.trigger-list li::before {
  position: absolute;
  top: 12px;
  left: 2px;
  width: 14px;
  height: 8px;
  content: "";
  border-bottom: 2.5px solid var(--accent);
  border-left: 2.5px solid var(--accent);
  border-radius: 1px;
  transform: rotate(-45deg);
}

.phone-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   38,000円の証拠ブロック（実績写真 → 金額 の順で視覚的に積む）
   -------------------------------------------------------------------------- */

.amount-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--accent-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-warm) 0%, #ffffff 100%);
}

.block-media--amount {
  margin: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
}

.amount-row h3 {
  font-size: clamp(16px, 4.3vw, 19px);
  line-height: 1.5;
}

.amount-figure {
  color: var(--accent-deep);
  font-size: 1.5em;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(transparent 68%, var(--marker) 68%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lp-block--proof .amount-note {
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   固定CTA（結果画面のみ・app.jsが hidden を制御）
   -------------------------------------------------------------------------- */

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 30;
  width: min(100%, 640px);
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(251, 247, 241, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 -10px 26px -18px rgba(42, 35, 30, 0.8);
  transform: translateX(-50%);
  transition: transform 220ms ease, opacity 180ms ease;
}

/* 本文のCTAが視界にある間は引っ込める（同じ文言の緑ボタンを同一画面に2つ見せない）。
   app.js の IntersectionObserver が is-suppressed を付け外しする */
.fixed-footer.is-suppressed {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(105%);
}

/* 上下2行を足したぶん、固定CTAが画面を食いすぎないようにボタン側を詰める */
.fixed-footer .primary-button {
  min-height: 58px;
}

/* 固定CTAはボタンの上下1行ずつで挟む（上=断れる安心／下=手間の小ささ）。
   どちらも承認済みコピーの流用で、数値・実績・限定表現は使わない */
.footer-note {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11.5px;
  text-align: center;
}

.footer-subnote {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.02em;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   ワイド
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .stage {
    margin-block: 24px;
    border-radius: 20px;
    overflow: hidden;
  }

  .hero-body {
    padding-inline: 32px;
  }

  .quiz-card {
    margin-inline: 24px;
    padding: 26px 28px 30px;
  }

  .question-media {
    width: calc(100% + 56px);
    margin: -26px -28px 20px;
  }

  .result-screen {
    padding-inline: 24px;
  }

  .result-hero,
  .lp-block {
    padding: 28px 28px 30px;
  }

  .block-media {
    margin: -28px -28px 22px;
  }

  .voice-strip {
    margin-inline: -28px;
    padding-inline: 28px;
  }

  .step-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  .voice-strip li {
    flex-basis: 40%;
  }
}

/* --------------------------------------------------------------------------
   モーション配慮
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   低い画面（iPhone SE 等）: 結果1枚目のCTAを固定CTAより上に収める
   -------------------------------------------------------------------------- */

@media (max-height: 740px) {
  .block-media--hero {
    aspect-ratio: 5 / 2;
  }

  .result-hero .type-frame {
    margin-bottom: 10px;
    padding: 7px 10px;
  }

  .result-reason {
    line-height: 1.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}