* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  /* セクション間の余白から透ける共通背景。サイト全体の紫トーンに馴染む
     紫グラデーションにして、境界の帯を落ち着いた濃いめの紫にする。 */
  background: linear-gradient(180deg, #b890d8 0%, #a880c8 100%);
  font-family:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
}

.page {
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.page > * {
  width: 100%;
  max-width: 500px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 50px;
  padding: 6px 14px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.92) 0%, rgb(249 241 255 / 0.86) 100%);
  backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.65) inset,
    0 6px 18px rgb(94 53 177 / 0.08);
}

.page-header__brand {
  display: inline-flex;
  align-items: center;
  width: 100px;
  max-width: 100%;
  text-decoration: none;
}

.page-header__brand img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホLPのファーストビュー本体 */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  background: #efe0ff;
}

/* 2枚目の画像を、デザインの土台として100%表示 */
.hero__base {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3枚目のLINEボタン素材を、1枚目の位置に合わせて重ねる */
.hero__cta {
  position: absolute;
  left: 6.1%;
  right: 6.1%;
  bottom: 6.95%;
  display: block;
  z-index: 2;
  filter: drop-shadow(0 8px 10px rgb(66 26 93 / 0.22));
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.hero__cta img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__cta:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 12px 14px rgb(66 26 93 / 0.28));
}

.hero__cta:active {
  transform: translateY(1px) scale(0.995);
}

.floating-cta {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(90vw, 450px);
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
  text-decoration: none;
}

.floating-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  padding: 12px 18px 12px 16px;
  border: 3px solid #ffd66d;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgb(76 216 54 / 0.18) 0%, rgb(76 216 54 / 0) 24%),
    linear-gradient(135deg, #20bb2f 0%, #0d8f26 100%);
  box-shadow:
    0 12px 24px rgb(38 20 59 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    0 0 0 3px rgb(255 255 255 / 0.82);
}

.floating-cta__inner::before {
  content: "";
  position: absolute;
  inset: 8px 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 26%, rgb(255 255 255 / 0.18) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 70%, rgb(255 255 255 / 0.12) 0 3px, transparent 4px),
    radial-gradient(circle at 20% 70%, rgb(255 241 162 / 0.22) 0 3px, transparent 4px),
    linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 58%);
  pointer-events: none;
}

.floating-cta__inner::after {
  content: "";
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: -30%;
  width: 22%;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0) 0%,
    rgb(255 255 255 / 0.16) 20%,
    rgb(255 255 255 / 0.78) 50%,
    rgb(255 255 255 / 0.16) 80%,
    rgb(255 255 255 / 0) 100%
  );
  transform: translateX(-185%) skewX(-22deg);
  animation: cta-shine 3.6s ease-in-out infinite 0.7s;
  pointer-events: none;
  z-index: 1;
}

.floating-cta__badge,
.floating-cta__arrow {
  position: relative;
  z-index: 2;
}

.floating-cta__badge {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: #1fb63a;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow:
    0 4px 10px rgb(18 95 27 / 0.2),
    inset 0 -2px 0 rgb(0 0 0 / 0.05);
}

.floating-cta__title {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: clamp(21px, 5vw, 25px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 2px 6px rgb(20 76 26 / 0.28);
}

.floating-cta__arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  border-top: 6px solid #fff;
  border-right: 6px solid #fff;
  filter: drop-shadow(0 2px 2px rgb(22 80 24 / 0.26));
}

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

.floating-cta:hover .floating-cta__inner {
  transform: translateY(-1px);
}

.floating-cta:active .floating-cta__inner {
  transform: translateY(1px) scale(0.995);
}

/* PCで見た時に大きくなりすぎないように中央寄せ */
@media (min-width: 942px) {
  .hero {
    border-radius: 18px 18px 0 0;
    box-shadow: 0 18px 50px rgb(62 24 86 / 0.18);
  }
}

/* 小さいスマホでボタンがやや大きく見える場合の微調整 */
@media (max-width: 390px) {
  .hero__cta {
    left: 5.4%;
    right: 5.4%;
    bottom: 6.8%;
  }

  .floating-cta {
    width: min(90vw, 450px);
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .floating-cta__inner {
    gap: 10px;
    min-height: 68px;
    padding: 10px 14px 10px 12px;
    border-width: 2px;
    box-shadow:
      0 10px 18px rgb(38 20 59 / 0.26),
      inset 0 1px 0 rgb(255 255 255 / 0.42),
      0 0 0 2px rgb(255 255 255 / 0.8);
  }

  .floating-cta__badge {
    left: 12px;
    width: 50px;
    font-size: 17px;
  }

  .floating-cta__arrow {
    right: 18px;
    width: 13px;
    height: 13px;
    border-top-width: 5px;
    border-right-width: 5px;
  }
}

.reasons {
  position: relative;
  width: 100%;
  /* 元画像のアスペクト比を保つ */
  aspect-ratio: 941 / 1672;
  background-image: url('../images/reasons/background.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", YuMincho, serif;
  overflow: hidden;
}
 
/* ---- 上部キャラクター（タイトル横） ---- */
.reasons__character-top {
  position: absolute;
  top: 2.5%;
  right: 0;
  width: 35%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
 
/* ---- カードグリッド ---- */
.reasons__grid {
  position: absolute;
  /* リボン下端(21.83%) + バッジ飛び出し余白(約3%) */
  top: 25%;
  left: 5%;
  right: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3% 3.2%;
  /* 吹き出し上端(80.92%)より手前で終了。下キャラの体の上端も考慮 */
  height: 50%;
}
 
/* ---- カード ---- */
.reasons__card {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(140, 100, 180, 0.12),
              0 1px 2px rgba(140, 100, 180, 0.08);
  padding: 11% 4% 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}
 
/* タイトルから上の塊 */
.reasons__card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
}
 
/* 区切り線と説明文の塊 */
.reasons__card-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
/* 番号バッジ */
.reasons__card-num {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #7e57c2 0%, #5e35b1 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 5px rgba(94, 53, 177, 0.4);
}
 
/* アイコン円背景 */
.reasons__card-icon-wrap {
  position: relative;
  width: 45%;
  aspect-ratio: 1 / 1;
  margin: 0 0 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
 
.reasons__card-icon-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(186, 152, 220, 0.22) 0%, rgba(186, 152, 220, 0.08) 60%, transparent 75%);
  border-radius: 50%;
}
 
.reasons__card-icon {
  position: relative;
  width: auto;
  height: 78%;
  max-width: 78%;
  object-fit: contain;
  z-index: 1;
}

.reasons__card-icon--line {
  height: 66%;
  max-width: 60%;
}
 
/* タイトル */
.reasons__card-title {
  font-size: clamp(12px, 4vw, 20px);
  font-weight: 900;
  color: #5b2a8a;
  line-height: 1.2;
  margin: 0 0 4%;
  letter-spacing: 0.01em;
}
 
.reasons__accent-red {
  color: #e63971;
}
 
.reasons__accent-green {
  color: #06c755;
  font-weight: 900;
}
 
/* 区切り線（点線） */
.reasons__card-divider {
  width: 75%;
  border: none;
  border-top: 1.5px dotted #d4a72c;
  margin: 0 0 4%;
}
 
/* 説明文 */
.reasons__card-desc {
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(9px, 2.5vw, 14px);
  color: #5d4a6a;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}
 
/* ---- 下部 吹き出しエリア（背景画像にテキストは焼き込み済み） ---- */
/* スクリーンリーダー用 */
.reasons__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
 
/* 下部キャラクター
   吹き出しエリア(top 80.92%〜92.40%)の右側に被せる
   キャラの頭部分は吹き出し上端から少し上に飛び出す */
.reasons__character-bottom {
  position: absolute;
  top: 78%;
  right: -3%;
  width: 28%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* ===== purchasable section（買取可能な商品） ===== */
/* 背景画像にタイトル枠・キャラクター・下部テキストを焼き込み済み。
   その上にカード画像9枚を3×3グリッドで重ねるだけ。 */
.purchasable {
  position: relative;
  width: 100%;
  /* 背景画像のアスペクト比を維持 */
  aspect-ratio: 941 / 1672;
  background-image: url('../images/purchasable/purchasable-bg.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* カードエリア（背景の白枠が並ぶ領域）にぴったり合わせて配置 */
.purchasable__grid {
  position: absolute;
  top: 30.9%;
  left: 5%;
  right: 5.2%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.9%;
  row-gap: 3px;
}

/* 「白枠 + 商品画像 + ラベル」が一体化した1枚絵 */
.purchasable__card {
  display: block;
  width: 100%;
  height: auto;
}


/* ===== flow section（ご利用の流れ：あと送りスピードプラン） ===== */
/* 背景画像にヘッダー枠・バッジ帯・キャラクター・下部吹き出しを焼き込み済み。
   その上にステップカード画像3枚を縦に重ね、カード間に矢印をCSSで配置する。 */
.flow {
  position: relative;
  width: 100%;
  /* 正規化済み背景(background-fitted.webp)のアスペクト比 */
  aspect-ratio: 941 / 1768;
  background-image: url('../images/flow/background-fitted.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* ステップカード（番号バッジ・タイトル・説明・アイコンを含む1枚絵）
   背景のカードエリアに top/left/width で位置決め。高さは画像比率で自動。
   ※imgは置換要素のため left+right では幅が広がらない。width を明示する。 */
.flow__step {
  position: absolute;
  left: 6%;
  width: 88%;
  height: auto;
}

.flow__step--1 { top: 32.5%; }
.flow__step--2 { top: 49.85%; }
.flow__step--3 { top: 67.2%; }

/* カード間のピンクの下矢印（clip-pathで作成）
   矢印=上部のシャフト(幅60.5%/高さ23%)＋下部の三角ヘッド */
.flow__arrow {
  position: absolute;
  left: 50%;
  width: 7.5%;
  aspect-ratio: 5 / 3;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f7a9c8 0%, #e85c8e 100%);
  clip-path: polygon(
    19.75% 0,
    80.25% 0,
    80.25% 23%,
    100% 23%,
    50% 100%,
    0 23%,
    19.75% 23%
  );
  z-index: 2;
}

.flow__arrow--1 { top: 48.25%; }
.flow__arrow--2 { top: 65.6%; }

/* 【一時表示用】flowセクションを見本画像 plan1.webp の1枚絵で表示する。
   コーディング版に戻す際はこのブロックは残しておいて問題なし（未使用になるだけ）。 */
.flow-preview {
  width: 100%;
}

.flow-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* 【一時表示用】plan2セクションを見本画像 plan2.webp の1枚絵で表示する。 */
.plan2-preview {
  width: 100%;
}

.plan2-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== voice section（お客様の声） ===== */
/* 背景画像3枚を縦に積む構造。上下は固定アスペクト比、中央は背景タイルを
   repeat-y で繰り返し、その中に口コミカードを必要なだけ並べる。 */
.voice {
  width: 100%;
  /* カードUIのフォントを「お客様の声」タイトルに合わせて明朝系に統一 */
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", YuMincho, serif;
}

/* 上部あしらい（タイトル・装飾を背景画像に焼き込み済み） */
.voice__top {
  width: 100%;
  aspect-ratio: 942 / 348;
  background: url('../images/voice/voice-top.webp') no-repeat top / 100% auto;
}

/* 中央：背景タイルを縦に繰り返す。高さは中身のカード件数に応じて可変。 */
.voice__middle {
  width: 100%;
  background: url('../images/voice/voice-middle-tile.webp') repeat-y top / 100% auto;
  /* 上部画像との境目のサブピクセル段差を、2px重ねて隠す */
  margin-top: -2px;
}

/* 下部あしらい（吹き出し・キャラクターを背景画像に焼き込み済み） */
.voice__bottom {
  width: 100%;
  aspect-ratio: 942 / 402;
  background: url('../images/voice/voice-bottom.webp') no-repeat top / 100% auto;
  /* 中央タイルとの境目のサブピクセル段差を、2px重ねて隠す */
  margin-top: -2px;
}

/* 口コミカードのリスト（件数は自由に増減できる） */
.voice__list {
  display: flex;
  flex-direction: column;
  /* flexの縦gapは%が効かない場面があるため、ビューポート基準で可変に */
  gap: clamp(16px, 4.5vw, 40px);
  padding: 4% 5% 6%;
}

/* 各口コミカード：左に人物画像、右にテキスト（2カラム） */
.voice__card {
  display: flex;
  align-items: center;
  gap: 5%;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(140, 100, 180, 0.16),
              0 1px 3px rgba(140, 100, 180, 0.10);
  padding: 4.5% 5%;
}

/* カード左：人物画像（円形フレーム＋帯ラベルは画像に含まれる） */
.voice__card-person {
  flex: 0 0 31%;
}

.voice__card-person img {
  display: block;
  width: 100%;
  height: auto;
}

/* カード右：テキストエリア */
.voice__card-body {
  flex: 1;
  min-width: 0;
}

/* 星（金色）＋下端の金色点線でタイトルと区切る */
.voice__card-stars {
  color: #f5b800;
  font-size: clamp(13px, 3.8vw, 20px);
  letter-spacing: 0.12em;
  line-height: 1;
  padding-bottom: 3.5%;
  margin-bottom: 4%;
  border-bottom: 1.5px dotted #d4a72c;
}

/* タイトル */
.voice__card-title {
  font-size: clamp(13px, 3.8vw, 20px);
  font-weight: 900;
  color: #3f2960;
  line-height: 1.35;
  margin: 0 0 3%;
  letter-spacing: 0.01em;
}

/* 本文 */
.voice__card-text {
  font-size: clamp(10px, 3vw, 15px);
  color: #5d4a6a;
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

/* 強調色：タイトル内は紫系、本文内は赤系（既存セクションのカラーに統一） */
.voice__card-title .voice__accent {
  color: #5b2a8a;
}

.voice__card-text .voice__accent {
  color: #e63971;
  font-weight: 700;
}

/* スマホ幅：人物画像をやや小さく、テキストエリアを広げる */
@media (max-width: 480px) {
  .voice__card {
    gap: 4%;
    padding: 5% 4.5%;
  }

  .voice__card-person {
    flex-basis: 27%;
  }
}

/* ===== faq section（よくある質問） ===== */
/* voiceセクションと同じ背景3分割方式。中央にFAQカードをアコーディオンで並べる。 */
.faq {
  width: 100%;
  /* 背景画像3枚の繋ぎ目にサブピクセルの隙間ができても、
     その奥に白っぽいページ背景が透けないよう、画像端と同じ色で塗っておく */
  background-color: #f0e0f4;
  /* タイトル枠の書体に合わせて明朝系で統一 */
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", YuMincho, serif;
}

/* 上部あしらい（タイトル枠・装飾を背景画像に焼き込み済み）
   画像と枠のアスペクト比は一致しているため 100% 100% でも歪まない。
   100% auto だと下端にサブピクセルの隙間が出て白線になるため固定する。 */
.faq__top {
  width: 100%;
  aspect-ratio: 942 / 249;
  background: url('../images/faq/faq-top.webp') no-repeat top / 100% 100%;
}

/* 中央：背景タイルを縦に繰り返す。高さはFAQ件数に応じて可変。 */
.faq__middle {
  width: 100%;
  /* 上部画像との境目のサブピクセル段差を、2px重ねて隠す */
  margin-top: -2px;
  position: relative;
}

.faq__middle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/faq/faq-middle-tile.webp') repeat-y top / 100% auto;
  z-index: 0;
  pointer-events: none;
}

/* 下部あしらい（雲・金貨装飾を背景画像に焼き込み済み） */
.faq__bottom {
  width: 100%;
  aspect-ratio: 942 / 221;
  background: url('../images/faq/faq-bottom.webp') no-repeat top / 100% 100%;
  /* 下端の余白を視覚的に詰めるため、下部画像を少し上へ重ねる */
  margin-top: -45px;
  position: relative;
  z-index: 1;
}

/* FAQ項目のリスト（件数は <li> の増減で自由に変更できる） */
.faq__list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* flexの縦gapは%が効かない場面があるため、ビューポート基準で可変に */
  gap: clamp(14px, 3.6vw, 30px);
  padding: 4% 5.5% 6%;
}

/* 各FAQカード（白の角丸ボックス） */
.faq__item {
  background: #ffffff;
  border: 1px solid rgba(150, 110, 200, 0.18);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(140, 100, 180, 0.14),
              0 1px 3px rgba(140, 100, 180, 0.10);
  /* アコーディオン展開を角丸内にクリップ */
  overflow: hidden;
}

/* 質問部分（クリックで開閉するボタン） */
.faq__question {
  display: flex;
  align-items: center;
  gap: 3.5%;
  width: 100%;
  padding: 4.2% 5%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

/* Q./A. バッジ共通（円形） */
.faq__badge {
  flex-shrink: 0;
  width: clamp(30px, 7.6vw, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(13px, 3.6vw, 18px);
  letter-spacing: 0.02em;
}

/* Q.バッジ：紫の円・白文字 */
.faq__badge--q {
  background: linear-gradient(135deg, #7e57c2 0%, #5e35b1 100%);
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(94, 53, 177, 0.35);
  /* 「Q.」はドット分だけ中心が右に寄るため、左パディングで
     かたまりを右へずらし、Q字自体を円の中央に光学調整する */
  padding-left: 0.28em;
}

/* A.（回答ラベル）：見本に合わせ円や枠で囲わずピンクのテキストのみ。
   Q.バッジと同じ幅の枠に中央寄せし、Q字とA字を縦ライン上で揃える。
   ドット分の右ずれは Q.と同じく padding-left で光学補正する。 */
.faq__badge--a {
  flex-shrink: 0;
  width: clamp(30px, 7.6vw, 42px);
  text-align: center;
  padding-left: 0.28em;
  color: #e94c87;
  font-weight: 700;
  font-size: clamp(13px, 3.6vw, 18px);
  line-height: 1;
}

/* 質問テキスト */
.faq__question-text {
  flex: 1;
  min-width: 0;
  color: #5b2a8a;
  font-weight: 700;
  font-size: clamp(13.5px, 3.9vw, 19px);
  line-height: 1.5;
}

/* +/− トグル（紫の円）。+/− は2本のバーを擬似要素で描画し、
   top/left:50% + translate(-50%,-50%) で常に中央に正確配置する。 */
.faq__toggle {
  position: relative;
  flex-shrink: 0;
  width: clamp(26px, 7vw, 38px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #7e57c2 0%, #5e35b1 100%);
  box-shadow: 0 2px 5px rgba(94, 53, 177, 0.35);
}

/* バー2本：::before=横棒（常時）／::after=縦棒（閉じている時のみ） */
.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 2.5px;
  background: #ffffff;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 縦棒（横棒と合わせて「＋」になる） */
.faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いている時：縦棒を消して「−（マイナス）」にする */
.faq__item--open .faq__toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

/* 回答エリア：grid-template-rows で高さ 0⇔auto を滑らかにアニメーション */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.faq__item--open .faq__answer {
  grid-template-rows: 1fr;
}

/* grid行を 0 に畳むため overflow:hidden / min-height:0 が必須。
   余白は内側の要素側に持たせ、この要素自体は余白ゼロにする。 */
.faq__answer-body {
  overflow: hidden;
  min-height: 0;
}

/* 金色の点線区切り（Q行とA行の間） */
.faq__divider {
  border: none;
  border-top: 1.5px dotted #d4a72c;
  margin: 0 5% 4%;
}

/* A.バッジ＋回答テキストの行 */
.faq__answer-inner {
  display: flex;
  align-items: baseline;
  gap: 3.5%;
  padding: 0 5% 4.8%;
}

/* 回答テキスト */
.faq__answer-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #3f3548;
  font-size: clamp(12.5px, 3.4vw, 16px);
  line-height: 1.7;
}

/* スマホ幅：余白を少し詰める */
@media (max-width: 480px) {
  .faq__list {
    padding: 5% 5% 7%;
  }

  .faq__question {
    padding: 5% 4.5%;
  }
}

/* セクション仕切り（壁紙画像で余白を埋める）
   現状は voice と faq の間のみで使用。画像の紫が faq-top.webp 上端と同色のため
   faq セクションの真上に継ぎ目なく繋がる。 */
.section-divider {
  width: 100%;
  height: 60px;
  background: url('../images/common/section-divider.webp') repeat-y top / 100% auto;
}

.page-footer {
  width: 100%;
}

.page-footer__image {
  display: block;
  width: 100%;
  height: auto;
}

.site-meta {
  position: relative;
  width: 100%;
  margin-top: -72px;
  padding: 0 20px 12px;
  color: #fff7ff;
  text-align: center;
}

.site-meta__links {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.site-meta__link {
  color: #fff7ff;
  text-decoration: none;
  font-size: clamp(13px, 3.2vw, 16px);
  font-weight: 700;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", YuMincho, serif;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgb(67 28 96 / 0.28);
}

.site-meta__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-meta__copy {
  position: relative;
  margin: 0;
  font-size: clamp(11px, 2.8vw, 13px);
  letter-spacing: 0.05em;
  color: rgb(255 247 255 / 0.88);
}

.reveal-up {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.58s ease,
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@keyframes cta-shine {
  0%,
  62% {
    transform: translateX(-185%) skewX(-22deg);
    opacity: 0;
  }

  68% {
    opacity: 1;
  }

  86% {
    transform: translateX(540%) skewX(-22deg);
    opacity: 1;
  }

  100% {
    transform: translateX(540%) skewX(-22deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta__inner::after {
    animation: none;
    opacity: 0;
  }

  .reveal-up,
  .reveal-up.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}