/* ═══════════════════════════════════════
   SEC 01 — FIRST VIEW（背景画像オーバーレイ版 / 仕様書 F-1-2）
   女性画像を背景に配置し、テキスト・数字をすべてオーバーレイ
   テキストはすべてHTML化（Google広告 Quality Score対応）
═══════════════════════════════════════ */
.sec--fv {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg1);
  min-height: 92vh;               /* SP: ほぼフル画面（ヘッダー領域分を引いた高さ） */
}

/* ── 背景画像（絶対配置で全面カバー） ── */
.fv__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;    /* SP: 顔（画像上部）を中央に */
  z-index: 1;
  display: block;
}

/* ── オーバーレイ（テキスト可読性確保） ──
   SP: 下方向グラデーション（上=透明 / 下=白）
   PC: 左方向グラデーション（左=白 / 右=透明）— PC media queryで上書き */
.fv__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0)    32%,
    rgba(255,255,255,0.85) 55%,
    rgba(255,255,255,0.96) 70%,
    rgba(255,255,255,1)   100%
  );
}

/* ── マスクOKバッジ（右上に絶対配置） ── */
.fv__mask-badge {
  position: absolute;
  top: 64px;                      /* ヘッダーロゴ・ハンバーガーを避ける */
  right: 14px;
  z-index: 4;
  background: var(--bg-white);
  border: 2px solid var(--primary);
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  text-align: center;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  padding: 0;
  border-radius: 50%;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

/* ── コンテンツコンテナ（テキスト＋CTA） ── */
.fv__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;       /* SP: テキストを下寄せ（画像上部の顔を見せる） */
  min-height: 92vh;
  padding: 56px 24px 32px;
}

.fv__content {
  display: flex;
  flex-direction: column;
}

/* ── キャッチコピー ── */
.fv__kicker {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  letter-spacing: var(--ls-heading);
  margin-bottom: 10px;
  position: relative;
  padding-bottom: 10px;
}
.fv__kicker::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1.5px;
  background: var(--primary);
  border-radius: 2px;
}

.fv__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);        /* SP: 32px */
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  letter-spacing: var(--ls-snug);
  margin-bottom: 24px;
}
.fv__heading em {
  font-style: normal;
  color: var(--primary);           /* コーラル #E8A598 */
}

/* ── 数字3点ボックス（オーバーレイ上の半透明白カード） ── */
.fv__stats {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--color-deco);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  gap: 0;
  box-shadow: var(--shadow-sm);
}
.fv__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fv__stat-num {
  font-family: var(--font-num);
  font-size: var(--fs-3xl);        /* 26px */
  font-weight: var(--fw-black);
  color: var(--primary);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
}
.fv__stat-unit {
  font-size: 0.55em;
  font-weight: var(--fw-bold);
  color: var(--text-sub);
}
.fv__stat-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  letter-spacing: var(--ls-heading);
  text-align: center;
  line-height: var(--lh-snug);
}
.fv__stat-div {
  display: block;
  width: 1px;
  height: 36px;
  background: var(--color-deco);
  flex-shrink: 0;
  margin: 0 4px;
}

/* ── 信頼シグナル3点 ── */
.fv__trust-badges {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  letter-spacing: var(--ls-body);
}
.fv__trust-badges li {
  position: relative;
  padding-left: 14px;
}
.fv__trust-badges li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

/* ═══════════════════════════════════════
   PC（768px以上）：SPと同じ縦積みレイアウト（main幅440px固定）
   ── PCもmain幅がSPと同じなので、レイアウトはSP同様で問題なし
   ── 見出しサイズ・バッジサイズのみ調整
═══════════════════════════════════════ */
@media (min-width: 768px) {
  .sec--fv {
    min-height: 88vh;        /* PCはやや控えめに */
  }
  .fv__inner {
    min-height: 88vh;
  }
  .fv__heading {
    font-size: var(--fs-5xl);    /* PC: 46px（SP 32pxより大きく） */
    margin-bottom: 28px;
  }
  .fv__mask-badge {
    width: 76px;
    height: 76px;
    font-size: var(--fs-md);
    top: 18px;
    right: 18px;
  }
}


/* ═══════════════════════════════════════
   SEC 02 — COMMON MYTH（pokewaku系・温かみのある親しみデザイン）
═══════════════════════════════════════ */

/* .sec--myth (旧クラス) — 削除済み: HTMLで未使用のため死コード化していた */

/* ── 見出し：中央揃え＋黄色マーカー ── */
.myth-h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-normal);
  color: var(--text);
  text-align: center;
  margin-bottom: 16px;
}
.myth-h2 em {
  font-style: normal;
  color: var(--text);
  background: linear-gradient(transparent 60%, #FFE066 60%, #FFE066 92%, transparent 92%);
  padding: 0 4px;
}

/* ── リード：本文として左揃え ── */
.myth-lead {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-relaxed);
  margin: 0 0 22px 0;
}

/* ── 引用カード：白地＋ピーチボーダー＋オレンジリボン ── */
.myth-card {
  position: relative;
  background: #fff;
  border: 2px solid #FFD8A8;
  border-radius: 14px;
  padding: 26px 18px 18px;
  margin-bottom: 22px;
  text-align: center;
}
.myth-card__ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cta-form);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading);
  padding: 5px 16px;
  border-radius: 99px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(232,165,152,0.3);
}
.myth-card__main {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-normal);
  color: var(--text);
  margin-bottom: 8px;
}
.myth-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  letter-spacing: var(--ls-body);
}

/* ── スタッツカード：白地＋ピンクピル＋大数字＋波線 ── */
.myth-stat {
  background: #fff;
  border: 2px solid #FFE0E8;
  border-radius: 14px;
  padding: 18px 16px 16px;
  margin-bottom: 22px;
  text-align: center;
  box-shadow: 0 3px 12px rgba(232,165,152,0.08);
}
.myth-stat__tag {
  display: inline-block;
  background: rgba(232,165,152,0.12);
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading);
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 12px;
}
.myth-stat__big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  line-height: var(--lh-flat);
  margin-bottom: 4px;
}
.myth-stat__digit {
  font-size: var(--fs-num-xl);
  font-weight: var(--fw-black);
  color: var(--accent);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  font-feature-settings: 'tnum';
}
.myth-stat__unit {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
}
.myth-stat__wave {
  display: block;
  width: 70%;
  height: 6px;
  margin: 6px auto 0;
}

/* ── 結論：本文として左揃え ── */
.myth-conclusion {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.myth-conclusion strong {
  font-weight: var(--fw-black);
  background: linear-gradient(transparent 70%, rgba(232,165,152,0.25) 70%);
  padding: 0 2px;
}


/* ═══════════════════════════════════════
   SEC 03 — LoveTip® の仕組み
═══════════════════════════════════════ */
.lovetip__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 24px;
}

.lovetip__body {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  max-width: 86%;
  margin: 0 auto 40px;
}
.lovetip__body p { margin-bottom: 8px; }

.lovetip__logo {
  display: inline;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--primary);
  letter-spacing: var(--ls-default);
}
.lovetip__logo sup { font-size: var(--fs-2xs); }

.lovetip__trust {
  background: linear-gradient(135deg, rgba(232,165,152,0.08), rgba(212,136,122,0.05));
  border: 1px solid rgba(232,165,152,0.25);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-top: 24px;
}

.lovetip__trust-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--primary);
  margin-bottom: 10px;
}

.lovetip__trust p {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
}


/* ── LoveTip® ループアニメーション ──────────────────
   タイミング設計（完全同期）
   ・ボタン押下：0.6s サイクル（3回/1.8s）
   ・コイン飛行：1.8s × 3枚（0.6sずらし）→ 連続ストリーム
   ・デバイス反応：delay=1.8s → 0.6sサイクル（最初のコイン到着後に同期）
─────────────────────────────────────────────────── */
.lt-scene {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 14px 16px;
  margin: 0 0 24px;
  overflow: hidden;
}

/* 3カラム */
.lt-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lt-col--left  { width: 60px; }
.lt-col--right { width: 68px; }
.lt-col--mid   { flex: 1; min-width: 0; }

/* ── 視聴者スマホ ── */
.lt-phone {
  width: 42px;
  height: 68px;
  background: #1a1a2e;
  border-radius: 8px;
  border: 2px solid #2a2a4e;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.lt-phone__notch {
  width: 14px;
  height: 4px;
  background: #2a2a4e;
  border-radius: 0 0 3px 3px;
  margin: 0 auto 3px;
  flex-shrink: 0;
}
.lt-phone__screen {
  flex: 1;
  background: #0d1f3c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.lt-phone__viewer {
  font-size: 6px;
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.4);
  letter-spacing: var(--ls-heading);
}

@keyframes lt-btn-press {
  0%   { transform: scale(1);    background: rgba(232,165,152,0.7); box-shadow: none; }
  8%   { transform: scale(0.85); background: rgba(232,165,152,1);   box-shadow: 0 0 8px rgba(232,165,152,0.7); }
  20%  { transform: scale(1.06); }
  33%  { transform: scale(1);    background: rgba(232,165,152,0.7); box-shadow: none; }
  100% { transform: scale(1);    background: rgba(232,165,152,0.7); box-shadow: none; }
}
.lt-phone__btn {
  width: 30px;
  height: 20px;
  border-radius: 4px;
  background: rgba(232,165,152,0.7);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: var(--lh-flat);
  animation: lt-btn-press 0.6s ease-in-out infinite;
}
.lt-phone__btn span { font-size: 5px; opacity: 0.85; }

/* ── フライトレーン ── */
.lt-lane {
  position: relative;
  height: 26px;
  overflow: hidden;
  width: 100%;
}
.lt-lane-label {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  opacity: 0.6;
  letter-spacing: var(--ls-heading);
  text-align: center;
  margin: 0;
}

@keyframes lt-coin-fly {
  0%   { transform: translateX(0) scale(0.5);   opacity: 0; }
  6%   { transform: translateX(4px) scale(1);   opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: translateX(700px) scale(0.5); opacity: 0; }
}
.lt-coin {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FFD700, #FFA500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  color: #fff;
  box-shadow: 0 2px 6px rgba(255,165,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  animation: lt-coin-fly 1.8s ease-in-out infinite;
  opacity: 0;
}
.lt-coin--1 { animation-delay: 0s; }
.lt-coin--2 { animation-delay: 0.6s; }
.lt-coin--3 { animation-delay: 1.2s; }

/* ── デバイス ── */
.lt-device-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes lt-ring-expand {
  0%   { transform: scale(1);   opacity: 0.75; }
  65%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
.lt-device-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: lt-ring-expand 0.6s ease-out 1.8s infinite;
}

@keyframes lt-device-react {
  0%   { transform: scale(1) translateX(0);     box-shadow: 0 4px 12px rgba(232,165,152,0.2); }
  12%  { transform: scale(1.15) translateX(-2px); box-shadow: 0 0 0 8px rgba(232,165,152,0.18), 0 6px 20px rgba(232,165,152,0.55); }
  22%  { transform: scale(1.07) translateX(2px);  }
  33%  { transform: scale(1.03) translateX(-1px); box-shadow: 0 0 0 4px rgba(232,165,152,0.08); }
  46%  { transform: scale(1) translateX(0);     box-shadow: 0 4px 12px rgba(232,165,152,0.2); }
  100% { transform: scale(1) translateX(0);     box-shadow: 0 4px 12px rgba(232,165,152,0.2); }
}
.lt-device-body {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff6b9d, #ff8fb3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(232,165,152,0.2);
  position: relative;
  z-index: 1;
  animation: lt-device-react 0.6s ease-out 1.8s infinite;
}

@keyframes lt-bar-pulse {
  0%   { transform: scaleY(1);   opacity: 0.55; }
  15%  { transform: scaleY(1.5); opacity: 1; }
  45%  { transform: scaleY(1);   opacity: 0.55; }
  100% { transform: scaleY(1);   opacity: 0.55; }
}
.lt-device-bars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.lt-device-bars span {
  display: block;
  background: #fff;
  border-radius: 2px;
  animation: lt-bar-pulse 0.6s ease-out 1.8s infinite;
}
.lt-device-bars span:nth-child(1) { width: 3px; height: 7px; }
.lt-device-bars span:nth-child(2) { width: 3px; height: 13px; animation-delay: calc(1.8s + 0.07s); }
.lt-device-bars span:nth-child(3) { width: 3px; height: 7px;  animation-delay: calc(1.8s + 0.14s); }

.lt-device-cap {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
  text-align: center;
  letter-spacing: var(--ls-heading);
  margin: 0;
}


/* ═══════════════════════════════════════
   SEC 04 — 待機ゼロ
═══════════════════════════════════════ */
.zero__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 24px;
}

.zero__body {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  max-width: 86%;
  margin: 0 auto 40px;
}
.zero__body p { margin-bottom: 14px; }

.zero__badge {
  display: inline;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
  background: linear-gradient(transparent 52%, #FFE566 52%);
  padding: 0 4px;
  margin-bottom: 28px;
  letter-spacing: var(--ls-heading);
  box-shadow: none;
  transform: none;
  border-radius: 0;
}


/* ═══════════════════════════════════════
   ZERO-VS — リップル vs 通常チャットレディ（合成画像比較）
═══════════════════════════════════════ */
.zero-vs {
  position: relative;
  margin-top: 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}

/* 各カラム */
.zero-vs__col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* リボン */
.zero-vs__ribbon {
  width: 90%;
  margin-bottom: 2px;
  position: relative;
  z-index: 2;
}
.zero-vs__ribbon img {
  width: 100%;
  display: block;
}

/* 見出し */
.zero-vs__head {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: 0.02em;
  margin-top: 0;
  margin-bottom: -22px;
  text-align: center;
  line-height: var(--lh-flat);
  position: relative;
  z-index: 3;
}
.zero-vs__col--ripple .zero-vs__head { color: var(--accent); }
.zero-vs__col--other  .zero-vs__head { color: var(--gray-400); }

/* 合成画像 */
.zero-vs__image {
  width: 100%;
  display: block;
}

/* キャプション */
.zero-vs__caption {
  margin-top: -12px;
  padding: 0 6px;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-sub);
  position: relative;
  z-index: 5;
}
.zero-vs__col--ripple .zero-vs__caption {
  color: var(--text);
}
.zero-vs__caption u {
  text-decoration: underline;
  text-decoration-color: #FF4D7D;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: var(--fw-black);
  color: #FF4D7D;
  text-decoration-skip-ink: none;
}
.zero-vs__col--other .zero-vs__caption u {
  text-decoration-color: #BBB;
  color: var(--text-sub);
}

/* 中央矢印 */
.zero-vs__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: var(--fw-black);
  z-index: 20;
  box-shadow: 0 4px 14px rgba(232, 165, 152, 0.5);
  line-height: 1;
  padding-bottom: 4px;
}


/* ═══════════════════════════════════════
   COMPARE TABLE — 待機ゼロ比較（旧）※HTML から削除済み
═══════════════════════════════════════ */
.compare-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,0.09);
  margin-top: 28px;
  font-family: var(--font);
}

/* ── ヘッダー共通 ─────────────────── */
.compare-table thead th {
  padding: 20px 14px 18px;
  text-align: center;
  vertical-align: middle;
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
}

/* ラベル列ヘッダー */
.cmp-th-label {
  background: #f5f4f2;
  width: 22%;
}

/* 通常チャットレディ列 */
.cmp-th-other {
  background: linear-gradient(160deg, #ede8e2, #e2dbd4);
  color: var(--gray-600);
  width: 36%;
}

/* Ripple列 */
.cmp-th-ripple {
  background: linear-gradient(160deg, var(--primary), #0098b5);
  color: #fff;
  width: 42%;
}

/* ヘッダー内 絵文字 */
.cmp-th-emoji {
  display: block;
  font-size: var(--fs-2xl);
  margin-bottom: 6px;
  line-height: var(--lh-flat);
}

/* おすすめバッジ */
.cmp-rec-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  letter-spacing: var(--ls-heading);
}

/* ── 行ラベル列 ─────────────────── */
.cmp-row-label {
  background: #faf9f7;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  padding: 16px 12px;
  vertical-align: middle;
  line-height: var(--lh-normal);
  border-right: 1px solid #ece9e5;
  border-bottom: 1px solid #ece9e5;
}
.compare-table tbody tr:last-child .cmp-row-label {
  border-bottom: none;
}
.cmp-row-icon {
  display: block;
  font-size: var(--fs-xl);
  margin-bottom: 4px;
}

/* ── データセル共通 ─────────────── */
.cmp-cell {
  padding: 16px 10px;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  vertical-align: middle;
  border-bottom: 1px solid #ece9e5;
}
.compare-table tbody tr:last-child .cmp-cell {
  border-bottom: none;
}

/* 通常（NG）セル */
.cmp-cell--bad {
  background: #fff7f7;
  color: var(--danger-deep);
}

/* Ripple（OK）セル */
.cmp-cell--good {
  background: rgba(0, 188, 212, 0.06);
  color: var(--primary-darker);
  font-weight: var(--fw-bold);
}

/* ── ✕ / ✓ マーク ───────────────── */
.cmp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  margin-bottom: 6px;
}
.cmp-mark--bad {
  background: #ffd8d8;
  color: var(--danger);
}
.cmp-mark--good {
  background: var(--primary);
  color: #fff;
}



/* ═══════════════════════════════════════
   SEC 05 — 稼働スタイル
═══════════════════════════════════════ */
.style__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 24px;
}

.style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.style-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.style-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.style-card:first-child {
  grid-column: 1 / -1;  /* location card spans full width */
}
/* ── 背景なしバリアント：title のみを内包（スライダー以下はカード外に配置） ── */
.style-card--bare {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;             /* スライダーがカード外に移動したため下 padding 不要 */
  box-shadow: none;
  /* overflow は親 .style-card の hidden を継承（レイアウト崩れ防止） */
}
.style-card--bare:hover {
  box-shadow: none;
  transform: none;
}
/* タイトルだけ手動でインセット */
/* スライダーカードタイトル（手描き風かわいいデザイン）
   eyebrow (Caveat) + 花マーク + 日本語タイトル + ウェーブ + Caveat サブタイトル */
.style-card--bare > .style-card__title {
  padding: 0 20px 20px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

/* Eyebrow：Caveat 手書き英字（小） */
.style-card__title-eyebrow {
  font-family: var(--font-num);
  font-size: var(--fs-xl);             /* 18px */
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-default);
  margin-bottom: 4px;
  transform: rotate(-2deg);            /* わずかな傾きで手書き感 */
}

/* メインタイトル：日本語ボールド + 両端の花マーク */
.style-card__title-main {
  font-size: var(--fs-lg);             /* 16px */
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 両端の花飾り */
.style-card__title-deco {
  font-size: var(--fs-md);
  color: var(--accent);                /* ピンク */
  line-height: var(--lh-flat);
  display: inline-block;
}
.style-card__title-deco--left { transform: rotate(-12deg); }
.style-card__title-deco--right { transform: rotate(12deg); }

/* ウェーブ：手描き風の波線下線 */
.style-card__title-wave {
  display: block;
  width: 100px;
  height: 10px;
  margin: 6px 0 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'><path d='M0,5 Q12.5,0 25,5 T50,5 T75,5 T100,5' stroke='%23FF6B9D' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* Caveat サブタイトル（手書き風・水平配置） */
.style-card__title-sub {
  font-family: var(--font-num);
  font-size: var(--fs-2xl);            /* 22px・大きめで装飾的に */
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-default);
  margin-top: 4px;
  /* 傾きを削除して水平表示に */
}

/* スライダーラッパー：カード外（.sec__inner 直下）に配置済み。
   section padding 部分まで負マージンで拡張し、両端にピンク帯を背景として描画。
   ラッパーは .sec__inner の直接の子なので、いずれの祖先も overflow:hidden を持たず、確実に表示される。 */
.loc-slider-wrap {
  position: relative;
  margin: 16px calc(-1 * var(--section-px)) 0;     /* 上 16px・左右を section padding 分マイナス */
  padding: 0 var(--section-px);                     /* 内側を section padding 分インセットして元位置へ */
  background:
    linear-gradient(180deg, #F5C5BA 0%, var(--accent-pale) 50%, #F5C5BA 100%)
      left  top / var(--section-px) 100% no-repeat,
    linear-gradient(180deg, #F5C5BA 0%, var(--accent-pale) 50%, #F5C5BA 100%)
      right top / var(--section-px) 100% no-repeat;
}

.style-card__icon { font-size: var(--fs-3xl); margin-bottom: 10px; }
.style-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);
  margin-bottom: 10px;
}
.style-card__desc {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  margin-top: 16px;
}
/* ── セクション直下のリード文として配置するバリアント ── */
.style-card__desc--lead {
  max-width: 86%;
  margin: 32px auto 16px;     /* top 32px / bottom 16px：下にチップリストが続くため */
  text-align: left;
}

/* ── 配信場所チップリスト（ピル型タグ） ── */
.loc-chips {
  list-style: none;
  margin: 0 auto 16px;          /* 下のルール文との間隔 */
  padding: 0 14px;
  max-width: 92%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* ── 配信場所の注意書き（第三者映り込みルール・重要情報カード） ── */
.loc-rule {
  margin: 36px auto 40px;
  max-width: 86%;
  padding: 20px 22px 18px;
  background: linear-gradient(135deg, #FFF8FB 0%, #FFEFF5 100%);   /* 薄ピンクのソフトグラデ */
  border: 2px dashed #F5C5BA;                                       /* 手描き風ダッシュ枠 */
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.10);                /* ピンクトーンの影 */
  text-align: left;
  position: relative;
}

/* 小見出し（ピンク色強調 + ! バッジアイコン） */
.loc-rule__title {
  font-size: var(--fs-md);                       /* 15px */
  font-weight: var(--fw-black);
  color: var(--accent);                          /* ピンク色で重要性を強調 */
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #F5C5BA;             /* 見出し下にダッシュ区切り */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 「!」バッジアイコン */
.loc-rule__title::before {
  content: '!';
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent);                     /* ピンク背景 */
  color: #fff;
  border-radius: 50%;
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-default);
}

.loc-rule__body {
  font-size: var(--fs-base);                     /* 14px・通常本文サイズ */
  color: var(--text);                            /* ピンク背景上で読みやすいよう濃い色 */
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
}

.loc-chip {
  background: #fff;
  border: 1.5px solid var(--primary);         /* アクアブルー枠 */
  border-radius: 999px;                        /* ピル型（完全な角丸） */
  padding: 5px 14px;
  font-size: var(--fs-sm);                     /* 13px */
  font-weight: var(--fw-bold);
  color: var(--primary);                       /* アクアブルー文字 var(--primary) */
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-default);
  transition: var(--transition);
  white-space: nowrap;
}

.loc-chip:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
}

.loc-chip--more {
  border-style: dashed;
  opacity: 0.65;
}

/* ── 配信場所スライダー（2行逆方向） ── */
@keyframes loc-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes loc-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* スライダー本体：ピンク帯は外側ラッパー .loc-slider-wrap が担当 */
.loc-slider {
  margin: 0;
  position: relative;
}
.loc-slider::before,
.loc-slider::after { display: none; }

/* 2行のトラックを囲むラッパー */
.loc-slider__rows {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;       /* スライダー全幅。ピンクはラッパー .loc-slider-wrap に配置済み */
}

.loc-slider__track {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: loc-scroll-left 40s linear infinite;   /* 22s → 40s（スピードダウン） */
}
.loc-slider__track--reverse {
  animation-name: loc-scroll-right;
  animation-duration: 36s;                           /* 20s → 36s（スピードダウン） */
}

.loc-slide {
  flex-shrink: 0;
  width: 180px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.loc-slide img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  display: block;
}

.loc-slide figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 6px 5px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-align: center;
  line-height: var(--lh-flat);
}


/* ── 3 feature cards (inspired layout) ── */
.style-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.style-fc {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 36px 18px 26px;
  text-align: center;
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
  overflow: hidden;
}
.style-fc--1 { background: #FFFBF8; }
.style-fc--2 { background: #F8FCFF; }
.style-fc--3 { background: #F8FFF9; }

/* 上部アクセントライン */
.style-fc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 22px 22px 0 0;
}
.style-fc--1::before { background: linear-gradient(90deg, var(--cta-form), #FFB07A); }
.style-fc--2::before { background: linear-gradient(90deg, var(--primary), #48CAE4); }
.style-fc--3::before { background: linear-gradient(90deg, var(--cta-line), #40D878); }

/* クラウンアイコン */
.sfc-crown {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  line-height: var(--lh-flat);
}
.sfc-crown svg { width: 26px; height: auto; display: block; }
.style-fc--1 .sfc-crown { color: var(--orange-mid); }
.style-fc--2 .sfc-crown { color: var(--primary-mid); }
.style-fc--3 .sfc-crown { color: var(--cta-line-drk); }

/* スパークル装飾 */
.sfc-sp {
  position: absolute;
  font-size: var(--fs-sm);
  opacity: 0.5;
  pointer-events: none;
}
.style-fc--1 .sfc-sp { color: var(--cta-form); }
.style-fc--2 .sfc-sp { color: var(--primary); }
.style-fc--3 .sfc-sp { color: var(--cta-line); }

.sfc-sp--a { top: 36px;    left: 14px;   font-size: var(--fs-2xs); }
.sfc-sp--b { top: 20px;    right: 18px;  font-size: var(--fs-md); }
.sfc-sp--c { bottom: 30px; left: 18px;   font-size: var(--fs-md); }
.sfc-sp--d { bottom: 18px; right: 14px;  font-size: var(--fs-2xs); }
.sfc-sp--e { top: 55%;     right: 10px;  font-size: var(--fs-xs); opacity: 0.3; }
.sfc-sp--f { top: 42%;     left:  8px;   font-size: var(--fs-2xs); opacity: 0.3; }

/* 円形ビジュアルエリア */
.sfc-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 18px;
  border: 2.5px solid;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.style-fc--1 .sfc-circle {
  background: linear-gradient(145deg, #FFF2E8, #FFE4CC);
  border-color: var(--orange-pale);
}
.style-fc--2 .sfc-circle {
  background: linear-gradient(145deg, #E8F7FF, #CCF0FF);
  border-color: var(--primary-light);
}
.style-fc--3 .sfc-circle {
  background: linear-gradient(145deg, #E8FFF0, #CCFFD8);
  border-color: var(--green-light);
}

.sfc-svg {
  width: 46px;
  height: 46px;
}
.style-fc--1 .sfc-svg { color: var(--orange-mid); }
.style-fc--2 .sfc-svg { color: var(--primary-mid); }
.style-fc--3 .sfc-svg { color: var(--cta-line-drk); }

/* タイトル・説明 */
.sfc-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--text);
  margin-bottom: 10px;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-default);
}
.sfc-title::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  margin: 6px auto 0;
}
.style-fc--1 .sfc-title::after { background: var(--cta-form); }
.style-fc--2 .sfc-title::after { background: var(--primary); }
.style-fc--3 .sfc-title::after { background: var(--cta-line); }

.sfc-desc {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
}


/* ── タブ切替型フィーチャー ── */
.style-tabs {
  margin-top: 16px;
}

/* ナビ */
.style-tabs__nav {
  display: flex;
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  margin-bottom: 14px;
}

.style-tab {
  flex: 1;
  padding: 13px 10px 11px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  font-family: var(--font);
  transition: background 0.18s, transform 0.08s ease-out, box-shadow 0.08s ease-out;
  /* 非選択タブ：底辺に影をつけて浮いたボタン感 */
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.09);
}
.style-tab:last-child { border-right: none; }
/* タップで沈み込む */
.style-tab:active {
  transform: translateY(2px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);
  transition-duration: 0.04s;
}
/* アクティブ選択中のタブは沈んだまま（影なし） */
.style-tab--active {
  background: #fff;
  box-shadow: none;
}

/* 上部カラーバー */
.style-tab::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0.45;
  transition: opacity 0.18s;
}
.style-tab--active::before { opacity: 1; }
.style-tab--1::before { background: var(--cta-form); }
.style-tab--2::before { background: var(--primary); }
.style-tab--3::before { background: var(--cta-line); }

/* アクティブ = 白 / 非アクティブ = ナビ背景そのまま + ホバーで白っぽく */
.style-tab--active { background: #fff; }
.style-tab:not(.style-tab--active):hover {
  background: rgba(255,255,255,0.55);
}

/* 非選択タブ：▼ インジケーター（反復アニメーション） */
@keyframes tab-hint-pulse {
  0%, 100% { opacity: 0.35; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 0.65; transform: translateX(-50%) translateY(2px); }
}
.style-tab:not(.style-tab--active)::after {
  content: '▼';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  color: var(--text);
  opacity: 0.35;
  line-height: var(--lh-flat);
  animation: tab-hint-pulse 2s ease-in-out infinite;
}

/* 番号 */
.style-tab__num {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-sub);
  line-height: var(--lh-flat);
  opacity: 0.6;
}
.style-tab--active .style-tab__num { opacity: 1; }
.style-tab--1.style-tab--active .style-tab__num { color: var(--cta-form); }
.style-tab--2.style-tab--active .style-tab__num { color: var(--primary); }
.style-tab--3.style-tab--active .style-tab__num { color: var(--cta-line); }

/* ラベル */
.style-tab__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  line-height: var(--lh-snug);
}
.style-tab--active .style-tab__label {
  color: var(--text);
  font-weight: var(--fw-black);
}

/* カード */
.style-tabs__body {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px 32px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px  rgba(0,0,0,0.07),
    0 8px 20px rgba(0,0,0,0.11),
    0 20px 40px rgba(0,0,0,0.05);
}
.style-tabs[data-active="1"] .style-tabs__body {
  background: rgba(232,165,152,0.06);
  border-color: rgba(232,165,152,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px  rgba(0,0,0,0.07),
    0 8px 24px rgba(232,165,152,0.18),
    0 20px 40px rgba(0,0,0,0.05);
}
.style-tabs[data-active="2"] .style-tabs__body {
  background: rgba(232,165,152,0.06);
  border-color: rgba(232,165,152,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px  rgba(0,0,0,0.07),
    0 8px 24px rgba(232,165,152,0.18),
    0 20px 40px rgba(0,0,0,0.05);
}
.style-tabs[data-active="3"] .style-tabs__body {
  background: rgba(6,199,85,0.06);
  border-color: rgba(6,199,85,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px  rgba(0,0,0,0.07),
    0 8px 24px rgba(6,199,85,0.18),
    0 20px 40px rgba(0,0,0,0.05);
}

.style-tab-panel {
  grid-area: 1 / 1;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.style-tab-panel--hidden {
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s;
}

/* ウォーターマーク数字 */
.style-tab-panel__num {
  display: block;
  font-size: var(--fs-num-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-flat);
  margin-top: -20px;
  margin-bottom: 22px;
  letter-spacing: var(--ls-tight);
  user-select: none;
  pointer-events: none;
}
[data-panel="1"] .style-tab-panel__num { color: rgba(232,165,152,0.22); }
[data-panel="2"] .style-tab-panel__num { color: rgba(232,165,152,0.22); }
[data-panel="3"] .style-tab-panel__num { color: rgba(6,199,85,0.22); }

.style-tab-panel__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-snug);
  margin-bottom: 12px;
}

.style-tab-panel__desc {
  font-size: var(--fs-md);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
}


/* ═══════════════════════════════════════
   STYLE 3 FEATURES (新デザイン：トップ色帯 + シンプルテキスト型)
   タブを廃止し、全 3 項目を常時表示。番号なし、雑誌風エディトリアル構成。
═══════════════════════════════════════ */
.style-features {
  list-style: none;
  margin: 32px 0 56px;                /* 下マージン：tail と次セクションのための余裕 */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;                          /* tail 表示分のギャップ確保 */
}

/* 吹き出し型カード（薄いクリーム + 立体感のある多重シャドウ） */
.style-feature {
  position: relative;
  background: linear-gradient(180deg, #FFFBEC 0%, #FDF6DA 100%);  /* 薄い上→やや色のついた下（光源上から想定）*/
  border: 2px solid var(--accent-pale);          /* ソフトピンク枠 */
  border-radius: 20px;
  padding: 16px 22px 18px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 3層シャドウで立体感を演出 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),    /* 内側上ハイライト（光沢感） */
    0 2px 4px rgba(190, 160, 90, 0.08),          /* 近距離の細い影 */
    0 10px 20px rgba(190, 160, 90, 0.18);        /* 遠距離の大きな影（浮上感） */
  animation: feature-float 4s ease-in-out infinite;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.style-feature:hover {
  /* hover でさらに浮上 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(190, 160, 90, 0.10),
    0 14px 28px rgba(190, 160, 90, 0.24);
}
.style-feature:hover {
  animation-play-state: paused;       /* hover で動き停止（上の :hover ルールにマージ） */
}

/* 旧色帯モディファイア（--1/--2/--3）は色情報を無効化（ピンク統一テーマへ） */
.style-feature--1,
.style-feature--2,
.style-feature--3 { border-color: var(--accent-pale); }

/* 吹き出しのしっぽ（外枠：ピンク） */
.style-feature::after {
  content: '';
  position: absolute;
  bottom: -14px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 14px 0 14px;
  border-color: var(--accent-pale) transparent transparent transparent;
}
/* 吹き出しのしっぽ（内側：カード背景下端の色と一致で連続感） */
.style-feature::before {
  content: '';
  position: absolute;
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 11px 0 11px;
  border-color: #FDF6DA transparent transparent transparent;  /* グラデ下端の色と一致 */
  z-index: 1;
}

/* しっぽの位置：カードごとに変えて会話感を演出 */
.style-feature--1::after  { left: 28px; }
.style-feature--1::before { left: 31px; }
.style-feature--2::after  { left: calc(50% - 14px); }
.style-feature--2::before { left: calc(50% - 11px); }
.style-feature--3::after  { right: 28px; }
.style-feature--3::before { right: 31px; }

/* ふんわり浮遊アニメーション（カードごとに遅延でずらす） */
@keyframes feature-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.style-feature--1 { animation-delay: 0s; }
.style-feature--2 { animation-delay: 0.7s; }
.style-feature--3 { animation-delay: 1.4s; }

/* タイトル：シンプル（波線削除、吹き出しのデコと役割分担） */
.style-feature__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  margin-bottom: 8px;
}
/* 波線下線は吹き出しデザインでは不要 */
.style-feature__title::after,
.style-feature--1 .style-feature__title::after,
.style-feature--2 .style-feature__title::after,
.style-feature--3 .style-feature__title::after { display: none; }

/* desc：短文向けにコンパクト化（line-height は --lh-relaxed 1.85 で省スペース） */
.style-feature__desc {
  font-size: var(--fs-base);
  color: var(--text-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);    /* loose 2.2 → relaxed 1.85（縦幅圧縮） */
  letter-spacing: var(--ls-body);
}


/* ═══════════════════════════════════════
   SEC 06 — 報酬について
═══════════════════════════════════════ */
.reward__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  color: var(--text);
  margin-bottom: 28px;
}

.chat-styles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 36px;
}

/* ── Card base ── */
.chat-card {
  background: #fff;
  border-radius: 16px;
  border: 2px solid var(--gray-500);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 36px 24px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.2s;
}
.chat-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.11);
}

/* ── Script title ── */
.chat-card__script {
  font-family: var(--font-num);
  font-size: var(--fs-num-md);
  font-weight: var(--fw-bold);
  color: var(--green-fresh);
  line-height: var(--lh-tight);
  margin-bottom: 12px;
}
.chat-card__script--paid {
  color: var(--accent-soft);
}

/* ── Japanese subtitle ── */
.chat-card__subtitle {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  margin-bottom: 20px;
}

/* ── Divider ── */
.chat-card__divider {
  width: 100%;
  border: none;
  border-top: 1.5px solid var(--gray-500);
  margin: 0 0 24px;
}

/* ── Badge ── */
.chat-card__badge {
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 24px;
}
.chat-card__badge--free {
  background: #d6f0c0;
  color: var(--green-deep);
}
.chat-card__badge--paid {
  background: #fde0ec;
  color: var(--accent-darker);
}

/* ── Image area ── */
.chat-card__imgwrap {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 24px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-card__imgwrap--free { background: #edf8e5; }
.chat-card__imgwrap--paid { background: #fdeef4; }

.chat-card__img-placeholder {
  font-size: var(--fs-md);
  color: var(--gray-500);
  padding: 34px 0;
}

/* ── Partner note ── */
.chat-card__partner-note {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: 20px;
  line-height: var(--lh-relaxed);
}
.chat-card__partner-note--free { color: var(--green-deep); }
.chat-card__partner-note--paid { color: var(--accent-darker); }

/* ── Description ── */
.chat-card__desc {
  font-size: var(--fs-md);
  color: var(--text-sub);
  line-height: var(--lh-loose);
  margin-bottom: 30px;
  text-align: left;
}

/* ── Formula separator ── */
.chat-card__formula-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 18px;
}
.chat-card__formula-sep::before,
.chat-card__formula-sep::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: var(--gray-500);
}
.chat-card__formula-pill {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 20px;
  flex-shrink: 0;
}
.chat-card__formula-pill--free {
  background: #d6f0c0;
  color: var(--green-darker);
}
.chat-card__formula-pill--paid {
  background: #fde0ec;
  color: var(--accent-darker);
}

/* ── Formula text ── */
.chat-card__formula-text {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: 30px;
  line-height: var(--lh-relaxed);
}
.chat-card__formula-text--free { color: var(--green-deep); }
.chat-card__formula-text--paid { color: var(--accent-darker); }

/* ── Income row ── */
.chat-card__income-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-card__income-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f5f5f5;
  border: 1.5px solid var(--gray-300);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: var(--lh-tight);
  flex-shrink: 0;
}
.chat-card__income-badge--paid {
  border-color: var(--accent-soft);
  color: var(--accent-darker);
}
.chat-card__income-num {
  font-size: var(--fs-num-md);
  font-weight: var(--fw-black);
  color: var(--orange-deep);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
}
.chat-card__income-num--paid { color: var(--orange-deep); }
.chat-card__income-unit {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--orange-deep);
}

.reward__rate-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  margin-bottom: 6px;
}

.reward__rate-desc {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  margin-bottom: 4px;
}

.reward__pay {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--bg1);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
  line-height: var(--lh-normal);
}


/* ═══════════════════════════════════════
   SEC 07 — 安全性・身バレ対策
═══════════════════════════════════════ */
.safety__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 24px;
}

/* ═══════════════════════════════════════
   WAVE 05 SAFETY — C案：タブ切替型UI
═══════════════════════════════════════ */
.safety-tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── タブナビ：2つのピル型ボタン横並び ── */
.safety-tabs__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: #f5f5f7;
  padding: 6px;
  border-radius: 14px;
}
.safety-tabs__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 6px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
}
.safety-tabs__tab:hover {
  background: rgba(255, 255, 255, 0.55);
}
.safety-tabs__tab:active {
  transform: scale(0.97);
}
.safety-tabs__tab-no {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-default);
  transition: color 0.25s ease;
}
.safety-tabs__tab-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--text-sub);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  transition: color 0.25s ease;
}
/* アクティブ状態 */
.safety-tabs__tab.is-active {
  background: linear-gradient(135deg, #F5C5BA 0%, #E8A598 100%);
  box-shadow:
    0 6px 16px rgba(255, 107, 157, 0.28),
    inset 0 -2px 6px rgba(0, 0, 0, 0.08);
}
.safety-tabs__tab.is-active .safety-tabs__tab-no,
.safety-tabs__tab.is-active .safety-tabs__tab-label {
  color: #fff;
}
/* アクティブタブの下に三角形マーカー */
.safety-tabs__tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #E8A598;
}

/* ── 詳細パネル ── */
.safety-tabs__panels {
  position: relative;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  min-height: 320px;
}
.safety-tabs__panel {
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.safety-tabs__panel.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: auto;
}
.safety-tabs__panel[hidden] {
  display: none;
}
.safety-tabs__panel.is-active[hidden] {
  display: flex;
}

/* パネル内ビジュアル：固定高さでコンパクト化 */
.safety-tabs__visual {
  width: 100%;
  height: 160px;                    /* コンパクト化（旧 aspect-ratio 3:2 を廃止） */
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.safety-tabs__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.safety-tabs__photo--contain {
  max-width: 60%;
  max-height: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* DMCA パネル：明るい背景でロゴ（緑パッドロック+黒文字）の視認性を確保 */
.safety-tabs__visual--dmca {
  background: linear-gradient(135deg, #f4faf4 0%, #e8f5e9 100%);  /* 極薄グリーン */
  border-bottom-color: rgba(0, 0, 0, 0.06);
  padding: 16px;
}
.safety-tabs__visual--dmca .safety-tabs__photo--contain {
  max-width: 78%;            /* 横長比率 3.18:1 に合わせて広く */
  max-height: 60%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
}


/* パネル内テキスト */
.safety-tabs__content {
  padding: 20px 22px 24px;
  flex: 1;
}
.safety-tabs__eyebrow {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-flat);
  margin: 0 0 4px;
}
.safety-tabs__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 10px;
}
.safety-tabs__desc {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── 統一ビジュアルエリア（全カード同じ高さ） ── */
/* ── 2層構成：縦並び2カード ── */
.safety-pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.safety-pillar {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.safety-pillar__visual {
  width: 100%;
  height: 180px;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* 実写画像 */
.safety-pillar__visual--img {
  padding: 0;
}
.safety-pillar__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.safety-pillar__photo--contain {
  max-width: 78%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* DMCA パネル：明るい背景でロゴ（緑パッドロック+黒文字）を引き立てる */
.safety-pillar__visual--dmca-light {
  background: linear-gradient(135deg, #f4faf4 0%, #e8f5e9 100%);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  padding: 16px;
}
.safety-pillar__visual--dmca-light .safety-pillar__photo--contain {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
  max-width: 78%;
  max-height: 60%;
}

/* ── テキストエリア ── */
.safety-pillar__content {
  padding: 20px 22px 24px;
  flex: 1;
}

.safety-pillar__eyebrow {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-flat);
  margin: 0 0 4px;
}

.safety-pillar__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 10px;
}

.safety-pillar__desc {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── DMCA visual area ── */
.safety-pillar__visual--dmca {
  background: linear-gradient(145deg, var(--green-darker) 0%, var(--green-fresh) 100%);
  padding: 0;
}
.dmca-visual {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
}
.dmca-visual__icon { margin-bottom: 2px; }
.dmca-visual__brand {
  line-height: var(--lh-flat);
}
.dmca-visual__name {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  color: #fff;
  letter-spacing: var(--ls-tight);
}
.dmca-visual__com {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.8);
}
.dmca-visual__badge {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: #fff;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 20px;
  padding: 3px 12px;
  margin-top: 2px;
}
.dmca-visual__line {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.4);
  margin: 4px 0;
}
.dmca-visual__sub {
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,0.85);
  text-align: center;
  line-height: var(--lh-normal);
}

/* ── Store visual area ── */
.safety-pillar__visual--store {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  padding: 0;
}
.store-visual {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
}
.store-visual__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}
.store-visual__badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.store-visual__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 8px 12px;
}
.store-visual__badge--apple {
  background: #000;
  border: 1px solid #444;
}
.store-visual__badge--google {
  background: #fff;
  border: 1px solid #ddd;
}
.store-visual__badge-text {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-tight);
}
.store-visual__badge--apple .store-visual__badge-text small { font-size: var(--fs-3xs); color: var(--gray-400); }
.store-visual__badge--apple .store-visual__badge-text span  { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #fff; }
.store-visual__badge--google .store-visual__badge-text small { font-size: var(--fs-3xs); color: var(--text-sub); letter-spacing: var(--ls-heading); }
.store-visual__badge--google .store-visual__badge-text span  { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); }
.store-visual__note {
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,0.5);
  text-align: center;
}

/* ── DMCA badge ── */
.trust-badge--dmca {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid var(--green-fresh);
  border-radius: 10px;
  padding: 12px 18px 12px 12px;
}
.dmca-lock {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.dmca-label { line-height: var(--lh-flat); }
.dmca-label__main {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-tight);
}
.dmca-label__dot {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--green-fresh);
}
.dmca-label__sub {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--green-fresh);
  letter-spacing: var(--ls-eyebrow);
  margin-top: 3px;
}

/* ── Store badges ── */
.store-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.store-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-900);
  border-radius: 8px;
  padding: 9px 14px;
  border: 1.5px solid #333;
  width: 100%;
}
.store-badge__text {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-tight);
}
.store-badge__text small {
  font-size: var(--fs-3xs);
  color: var(--gray-300);
  letter-spacing: var(--ls-heading);
}
.store-badge__text span {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: #fff;
  letter-spacing: var(--ls-tight);
}


/* ═══════════════════════════════════════
   SEC 08 — サポート内容（pokewaku系・温かみ統一）
═══════════════════════════════════════ */

.sec--support {
  background-color: var(--bg-white);
  /* padding は base の --section-py（PC 56 / SP 44）を継承 */
}

/* ── 見出し：中央揃え＋黄色マーカー ── */
.sup-h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 24px;
}
.sup-h2 em {
  font-style: normal;
  color: var(--text);
  background: linear-gradient(transparent 60%, #FFE066 60%, #FFE066 92%, transparent 92%);
  padding: 0 4px;
}

/* ── リード：左揃え本文 ── */
.sup-lead {
  /* typography は responsive.css グローバルルールで一元管理 */
  max-width: 86%;
  margin: 0 auto 40px;
}

/* ── サポートカードリスト ── */
.sup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;                  /* 01〜05 カード間の縦間隔（18px → 32px に拡大） */
}

/* 各アイテム：白カード＋ピーチボーダー */
.sup-item {
  position: relative;
  background: #fff;
  border: 2px solid #FFD8A8;
  border-radius: 14px;
  padding: 0;                 /* 画像を card 内側エッジに密着させる（上・左・下を 0 に） */
  min-height: 120px;          /* 画像が見えるための最小高さ確保 */
}

/* 番号バッジ（左上に飛び出す手書き風） */
.sup-item__num {
  position: absolute;
  top: -12px;
  left: 14px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--bg1);
  box-shadow: 0 2px 8px rgba(232,165,152,0.25);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-flat);
}

/* 画像 + テキスト */
.sup-item__body {
  display: flex;
  align-items: stretch;       /* 画像を card の縦いっぱいに伸ばす */
  gap: 0;                     /* 画像と text の間隔は text 側の padding で確保 */
  margin-top: 0;
  min-height: 120px;
}
.sup-item__img-wrap {
  flex-shrink: 0;
  width: 120px;
}
.sup-item__img {
  width: 100%;
  height: 100%;               /* image-wrap の高さ（= card 高さ）に追従 */
  object-fit: cover;
  display: block;
  border-radius: 12px 0 0 12px; /* card 左角 14 − border 2 = 12 に合わせる */
}
.sup-item__txt {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;          /* 上下 12px・左右 14px — タイトルが黄色枠から十分離れる */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上揃え — 全カードのタイトル位置を統一（3行descの03基準） */
}
.sup-item__cat {
  display: inline-block;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  background: rgba(232,165,152,0.1);
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 6px;
}
.sup-item__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-snug);
  margin-bottom: 5px;
}
.sup-item__desc {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  line-height: var(--lh-normal);
}


/* ═══════════════════════════════════════
   SEC 09 — 入会特典
═══════════════════════════════════════ */

/* ── 特典① 大型バナー ───────────────────── */
.benefit-banner {
  background: linear-gradient(120deg, #D2E8FF 0%, #EBF5FF 55%, #DCF0FF 100%);
  border-radius: var(--radius-lg);
  padding: 24px 24px 24px 28px;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow:
    0 2px 0px rgba(255,255,255,0.8),       /* 上部ハイライト */
    0 8px 24px rgba(13,27,75,0.14),        /* メインシャドウ */
    0 2px 6px  rgba(13,27,75,0.08);        /* 近距離の締まり */
}
/* 光の筋 */
.benefit-banner::before {
  content: '';
  position: absolute;
  top: -30%;
  right: 30%;
  width: 80px;
  height: 160%;
  background: rgba(255,255,255,0.22);
  transform: rotate(18deg);
  pointer-events: none;
}

/* リボンラベル */
.benefit-banner__label {
  display: inline-block;
  background: var(--theme-navy);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  padding: 5px 22px 5px 14px;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  letter-spacing: var(--ls-label);
  margin-bottom: 16px;
}

.benefit-banner__heading {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--theme-navy);
  line-height: var(--lh-normal);
  margin-bottom: 10px;
  letter-spacing: var(--ls-heading);
}
.benefit-banner__big-num {
  font-size: 1.8em;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-flat);
}
.benefit-banner__em {
  font-style: normal;
  color: var(--gold);
}
.benefit-banner__desc {
  font-size: var(--fs-md);
  color: var(--theme-blue);
  line-height: var(--lh-relaxed);
  margin-bottom: 20px;
}

/* スマホ画像 — 横並び・下揃え */
.benefit-banner__phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  margin-top: 40px;
}
/* スライドイン用ラッパー */
.benefit-phone-wrap {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.benefit-phone-wrap.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.benefit-phone-wrap:nth-child(1) { transition-delay: 0s; }
.benefit-phone-wrap:nth-child(2) { transition-delay: 0.22s; }
.benefit-phone-wrap:nth-child(3) { transition-delay: 0.44s; }

/* 浮遊アニメーション（ラッパーの内側なので干渉なし） */
@keyframes benefit-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.benefit-banner__phone {
  height: 200px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.14));
  animation: benefit-float 3.2s ease-in-out infinite;
  display: block;
}

/* ¥30,000+ サークルバッジ */
.benefit-banner__badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 88px;
  height: 88px;
  background: var(--theme-navy);
  border-radius: 50%;
  border: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  color: var(--gold);
  z-index: 4;
  text-align: center;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

/* ── 見出し：初期費用ゼロ ─────────────────── */
.benefit-banner__free-head {
  margin-bottom: 4px;
}
.benefit-banner__free-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--theme-navy);
  margin-bottom: 6px;
}
.benefit-banner__free-desc {
  font-size: var(--fs-xs);
  color: var(--theme-blue);
  line-height: var(--lh-normal);
}

/* 仕切り線 */
.benefit-banner__divider {
  border: none;
  border-top: 1.5px dashed rgba(13,27,75,0.18);
  margin: 16px 0;
}

/* ── 特典② グリーンバナー ───────────────── */
.benefit-banner--free {
  background: linear-gradient(120deg, #D2F0E4 0%, #EDFAF5 55%, #D8F5EA 100%);
  box-shadow: 0 4px 24px rgba(6,199,85,0.12);
  margin-top: 0;
}
.benefit-banner--free .benefit-banner__label {
  background: var(--green-darkest);
}
.benefit-banner--free .benefit-banner__heading {
  color: var(--green-darkest);
}
.benefit-banner--free .benefit-banner__desc {
  color: var(--green-darkest);
}
.benefit-banner__em--green {
  color: var(--cta-line-drk);
}
/* 光の筋 グリーン版 */
.benefit-banner--free::before {
  background: rgba(255,255,255,0.20);
}

/* ¥0 ビジュアル */
.benefit-banner__zero-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.benefit-banner__zero {
  width: 150px;
  height: 150px;
  background: var(--green-darkest);
  border-radius: 50%;
  border: 4px solid var(--cta-line);
  box-shadow: 0 6px 24px rgba(6,199,85,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  position: relative;
}
/* 外側のリング */
.benefit-banner__zero::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px dashed rgba(6,199,85,0.35);
}
.benefit-banner__zero-yen {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  align-self: flex-start;
  margin-top: 28px;
  opacity: 0.9;
}
.benefit-banner__zero-num {
  font-size: var(--fs-num-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
}
.benefit-banner__zero-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--green-darkest);
  letter-spacing: var(--ls-label);
  background: rgba(6,199,85,0.15);
  padding: 3px 14px;
  border-radius: var(--btn-r);
}

.benefit__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 24px;
}

.benefit-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.benefit-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  background: var(--bg-white);
}
.benefit-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* カラーアクセント上部ヘッダー */
.benefit-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.benefit-card--form .benefit-card__header {
  background: linear-gradient(135deg, var(--cta-form), #ffb07a);
}
.benefit-card--line .benefit-card__header {
  background: linear-gradient(135deg, var(--cta-line), #4de88a);
}

/* バッジ */
.benefit-card__num {
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: #fff;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 3px 12px;
  border-radius: var(--btn-r);
  letter-spacing: var(--ls-heading);
}

/* 大きい金額 */
.benefit-card__price {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  color: #fff;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* デバイス画像エリア */
.benefit-card__devices {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  padding: 20px 20px 0;
  background: #fafafa;
}
.benefit-card__device-img {
  width: 44%;
  height: 180px;
  display: block;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
}

/* 本文エリア */
.benefit-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-heading);
  padding: 18px 20px 8px;
}

.benefit-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  padding: 0 20px 20px;
}


/* ═══════════════════════════════════════
   SEC 10 — 口コミ・体験談
═══════════════════════════════════════ */
.sec--voices {
  background: var(--bg-white);
}

.voice__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 24px;
}

.voice__sub {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  max-width: 86%;
  margin: 0 auto 40px;
}

/* ── Horizontal scroll container ── */
.voice-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  /* hide scrollbar */
  scrollbar-width: none;
}
.voice-grid::-webkit-scrollbar { display: none; }

.voice-card {
  flex: 0 0 280px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
}

/* Photo strip */
.voice-card__photos {
  overflow: hidden;
}

.vc-overlay {
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}

.vc-photo {
  width: 100%;
  height: 110px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.vc-overlay__tag {
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px 10px;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.vc-overlay__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  white-space: nowrap;
}

/* Review header — aqua gradient full-width */
.voice-card__review-header {
  background: linear-gradient(90deg, var(--primary) 0%, #B2EBF2 100%);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: none;
}

.voice-card__review-header em {
  font-style: italic;
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flat);
}

.vc-badge {
  background: transparent;
  color: #fff;
  padding: 2px 11px;
  border-radius: 20px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-relaxed);
}

/* Date line */
.voice-card__date {
  text-align: right;
  font-size: var(--fs-2xs);
  color: var(--gray-400);
  padding: 4px 14px;
  border-bottom: 1px dotted #e8e8e8;
}

/* Table */
.voice-card__table {
  width: 100%;
  border-collapse: collapse;
}

.voice-card__table td {
  border-bottom: 1px dashed var(--gray-300);
}

.voice-card__table tr:last-child td {
  border-bottom: none;
}

.vc-label {
  padding: 7px 6px 7px 12px;
  color: var(--text);
  width: 44%;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  vertical-align: middle;
}

.vc-value {
  padding: 7px 12px 7px 6px;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  vertical-align: middle;
}

.vc-stars {
  color: var(--orange-light);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-eyebrow);
}

/* Comment box — fixed height, scrollable, sharp corners */
.voice-card__comment {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: var(--lh-relaxed);
  margin: 8px 12px 14px;
  padding: 10px;
  height: 160px;
  overflow-y: auto;
  border: 1.5px solid var(--gray-600);
  border-radius: 0;
  background: #fff;
  padding-bottom: 24px;
}

/* Scroll indicator dots */
.voice-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}

.voice-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--gray-300);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
  border: none;
  padding: 0;
}

.voice-dot--active {
  width: 24px;
  background: #b57bee;
}


/* ═══════════════════════════════════════
   SEC 11 — FAQ
═══════════════════════════════════════ */
.faq__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
  margin-bottom: 24px;
}


/* ═══════════════════════════════════════
   SEC 12 — 始めるまでのSTEP
═══════════════════════════════════════ */
.sec--steps {
  background: var(--bg-white);
}

.step__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
  margin-bottom: 24px;
  line-height: var(--lh-heading);
}

.step-flow {
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding: 0 20px;
}

/* ── Step block: left-right alternating slide-in/out ── */
.step-flow { gap: 0; }

.step-block {
  position: relative;
  opacity: 0;
  transition: opacity 1.3s cubic-bezier(0.16,1,0.3,1),
              transform 1.3s cubic-bezier(0.16,1,0.3,1);
}
.step-block--from-left  { transform: translateX(-56px); }
.step-block--from-right { transform: translateX( 56px); }
.step-block.is-revealed { opacity: 1; transform: translateX(0); }

/* ── Head: bubble + STEP tag side by side ── */
.step-block__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 28px;
  margin-bottom: 16px;
}
.step-block__head .step-block__tag {
  margin-left: auto;
}

.step-block + .step-block .step-block__head {
  margin-top: -108px;
  position: relative;
  z-index: 3;
}

@keyframes bubble-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-6px); }
}

.step-block__bubble {
  display: inline-block;
  background: #edf6ff;
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  padding: 12px 32px;
  border-radius: 100px;
  border: 2px solid var(--gray-400);
  box-shadow: 2px 4px 12px rgba(0,0,0,0.08);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  animation: bubble-float 3.2s ease-in-out infinite;
}

.step-block__bubble::before {
  content: '';
  position: absolute;
  top: calc(100% - 3px);
  left: 26px;
  width: 3px;
  height: 40px;
  background: var(--gray-400);
  border-radius: 0 0 3px 3px;
  transform: rotate(22deg);
  transform-origin: top center;
}
.step-block__bubble::after {
  content: '';
  position: absolute;
  top: calc(100% - 3px);
  left: 27px;
  width: 1.5px;
  height: 36px;
  border-radius: 0 0 2px 2px;
  background: #edf6ff;
  transform: rotate(22deg);
  transform-origin: top center;
}

.step-block:nth-child(even) .step-block__bubble {
  background: #fff0f6;
  animation-delay: 0.6s;
}
.step-block:nth-child(even) .step-block__bubble::after { background: #fff0f6; }

.step-block__body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.step-block__imgwrap {
  flex: 0 0 150px;
  width: 150px;
}
.step-block__img {
  width: 100%;
  height: auto;
  display: block;
}

.step-block__txt { flex: 1; }

.step-block__main {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-heading);
  margin-bottom: 10px;
  padding-bottom: 10px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0,0,0,0.55) 0,
    rgba(0,0,0,0.55) 5px,
    transparent 5px,
    transparent 10px
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

.step-block__note {
  font-size: var(--fs-md);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
}

.step-block__sep {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  margin-top: 100px;
  padding: 6px 0 16px;
}

.step-block__sep::before {
  display: none;
  content: '';
  position: absolute;
  left: 0;
  right: -12px;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(232,165,152,0.7) 0%,
    rgba(232,165,152,0.5) 50%,
    transparent 92%
  );
}

.step-block__tag {
  position: relative;
  z-index: 1;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--primary);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin: 0;
  opacity: 0.85;
  line-height: var(--lh-flat);
}
.step-block__tag strong {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-default);
  margin-left: 2px;
  vertical-align: middle;
}

.step-block__tag--sep {
  display: none;
  opacity: 0.65;
}

.step-block__wm {
  position: relative;
  z-index: 1;
  font-size: var(--fs-num-xl);
  font-weight: var(--fw-black);
  color: rgba(232,165,152,0.10);
  line-height: var(--lh-flat);
  margin: 0;
  letter-spacing: var(--ls-tight);
  user-select: none;
  pointer-events: none;
}


/* ═══════════════════════════════════════
   SEC 13 — 登録条件
═══════════════════════════════════════ */
.cond__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
  margin-bottom: 24px;
}

/* ① 主要条件ブロック ─────────────────── */
.cond-main {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

/* ✓ 主条件行 */
.cond-main__primary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.cond-main__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cta-line);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  margin-top: 2px;
}

.cond-main__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--text);
  margin-bottom: 5px;
  line-height: var(--lh-snug);
}

.cond-main__sub {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-normal);
}

/* 身分証グリッドエリア */
.cond-main__docs {
  padding: 16px 20px 18px;
  border-bottom: 1px solid var(--border);
  background: #FAFCFF;
}

.cond-main__docs-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  margin-bottom: 12px;
  letter-spacing: var(--ls-body);
}

.cond-docs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cond-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.cond-doc__img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid #DDE8F5;
  background: #F4F8FF;
  padding: 7px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.cond-doc__name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  text-align: center;
}

/* × NG行 */
.cond-main__ng {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #FFF4F4;
}

.cond-main__ng-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #D33;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
}

.cond-main__ng-text {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--danger-deep);
}

/* ② 身分証が必要な理由 ─────────────── */
.cond-reasons {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.cond-reasons__header {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg1);
  letter-spacing: var(--ls-body);
}

.cond-reason {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cond-reason:last-of-type { border-bottom: none; }

.cond-reason__num {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  color: var(--primary);
  opacity: 0.45;
  line-height: var(--lh-flat);
  flex-shrink: 0;
  width: 40px;
  letter-spacing: var(--ls-tight);
  margin-top: 1px;
}

.cond-reason__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  margin-bottom: 5px;
}

.cond-reason__desc {
  font-size: var(--fs-md);
  color: var(--text-sub);
  line-height: var(--lh-normal);
}

.cond-reasons__note {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-normal);
  padding: 14px 20px;
  background: var(--bg1);
  border-top: 1px solid var(--border);
}

/* ③ 法的届出 ─────────────────────────── */
.cond-legal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.cond-legal__badge {
  flex-shrink: 0;
  display: inline-block;
  background: #1E2E5A;
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  padding: 4px 9px;
  border-radius: 4px;
  letter-spacing: var(--ls-label);
  margin-top: 2px;
  white-space: nowrap;
}

.cond-legal__text {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
}
.cond-legal__text strong {
  color: var(--text);
  font-weight: var(--fw-bold);
}


/* ═══════════════════════════════════════
   SEC 14 — クロージングCTA
═══════════════════════════════════════ */
.sec--final {
  background: linear-gradient(160deg, #0a1628 0%, #0d1f3c 50%, #1a0e2e 100%);
  position: relative;
  overflow: hidden;
}

.sec--final::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(232,165,152,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 10% 70%, rgba(232,165,152,0.12) 0%, transparent 55%);
  pointer-events: none;
}

.sec--final .sec__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.final__h2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: #fff;
  margin-bottom: 20px;
}

.final__body {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.78);
  line-height: var(--lh-relaxed);
  margin-bottom: 36px;
}

.final__trust {
  margin-top: 20px;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.45);
  letter-spacing: var(--ls-heading);
}


/* ═══════════════════════════════════════
   SEC 06 — REWARD PLANS (rw-*)
═══════════════════════════════════════ */
.rw-plan {
  padding: 32px 0 40px;
  border-bottom: 1px solid #eee;
}
.rw-plan--free {
  border-top: 3px solid var(--primary-deep);
}
.rw-plan--paid {
  border-top: 3px solid var(--accent-deep);
}

/* ── Full-width band layout ────────────────── */
.sec--reward {
  padding-left: 0;
  padding-right: 0;
}
.sec--reward .sec__inner {
  padding-left: var(--section-px);
  padding-right: var(--section-px);
}
.rw-band--free {
  background-color: var(--bg-pale-blue);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(0, 153, 184, 0.04) 8px,
    rgba(0, 153, 184, 0.04) 16px
  );
}
.rw-band--paid {
  background-color: var(--bg-pale-pink);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(214, 51, 132, 0.04) 8px,
    rgba(214, 51, 132, 0.04) 16px
  );
}

.rw-plan__label {
  font-family: var(--font-num);
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rw-plan--free .rw-plan__label { color: var(--primary-deep); }
.rw-plan--paid .rw-plan__label { color: var(--accent-deep); }

.rw-plan__recommend {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  color: var(--accent-deep); border: 1.5px solid var(--accent-deep);
  border-radius: 3px; padding: 2px 8px; line-height: var(--lh-snug);
  font-family: var(--font);
}

.rw-plan__title {
  font-size: var(--fs-3xl); font-weight: var(--fw-black);
  color: var(--text); margin-bottom: 8px;
  text-align: center;
}

.rw-plan__subtitle {
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--text-sub); margin-bottom: 20px;
  text-align: center;
}

/* ── スマホ スライドイン（スクロール連動） ── */
.rw-slide-from-left {
  opacity: 0;
  transform: translateX(-72px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.rw-slide-from-right {
  opacity: 0;
  transform: translateX(72px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.rw-slide-from-left.is-slide-visible,
.rw-slide-from-right.is-slide-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── スマホふわふわアニメーション ─────────── */
@keyframes rw-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

.rw-host-section {
  padding: 20px 12px 24px;
  display: flex;
  justify-content: center;
}
.rw-host-iphone {
  width: 100%;
  max-width: 290px;
  display: block;
  position: relative;
  z-index: 1;
  animation: rw-float 3.6s ease-in-out infinite;
}

.rw-flow-arrow {
  position: relative;
  height: 80px;        /* 固定高さ → スマホ間隔が変わらない */
  width: 100%;
}
.rw-flow-arrow::after {
  content: '▼';
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);  /* 中心より少し上 */
  font-size: var(--fs-4xl);
  color: var(--primary);
  line-height: var(--lh-flat);
}

.rw-viewers-section {
  margin-bottom: 48px;
}
.rw-viewers-wrap {
  position: relative;
  max-width: 72%;
  margin: 0 auto;
  animation: rw-float 3.2s ease-in-out infinite;
}
.rw-viewers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  align-items: end;
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.rw-viewers-phone {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  filter: brightness(0.6);
}
.rw-viewers-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  color: var(--text);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

.rw-reward-block {
  background: transparent;          /* グレー背景を削除 */
  border-radius: 10px;
  padding: 20px 18px 22px;
}
.rw-reward-block__title {
  font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--text-sub);
  letter-spacing: var(--ls-heading); margin-bottom: 12px;
  text-align: center;
}
.rw-reward-block__formula {
  font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-sub);
  line-height: var(--lh-relaxed); margin-bottom: 16px;
  padding: 10px 14px;
  background: #fff;
  border-left: 3px solid var(--gray-300);
  border-radius: 0 6px 6px 0;
}
.rw-plan--free .rw-reward-block__formula { border-left-color: var(--primary-deep); }
.rw-plan--paid .rw-reward-block__formula { border-left-color: var(--accent-deep); }
.rw-reward-block__formula p + p { margin-top: 4px; }

.rw-reward-block__arrow {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--gray-400);
  text-align: center; margin-bottom: 10px;
}
.rw-reward-block__income {
  display: flex; align-items: flex-end; gap: 4px;
  justify-content: center;
}
.rw-income-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  line-height: var(--lh-flat);
  margin-bottom: 8px;
}
.rw-income-num {
  font-size: var(--fs-num-md); font-weight: var(--fw-black);
  line-height: var(--lh-flat); letter-spacing: var(--ls-tight);
}
.rw-income-num--free { color: var(--primary-deep); }
.rw-income-num--paid { font-size: var(--fs-num-md); color: var(--accent-deep); }
.rw-income-unit { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.rw-income-unit--free { color: var(--primary-deep); }
.rw-income-unit--paid { font-size: var(--fs-2xl); color: var(--accent-deep); }


/* ═══════════════════════════════════════
   SEC 12 — HOW TO START (Pattern B)
═══════════════════════════════════════ */
.howto-step {
  margin-bottom: 76px;
  position: relative;
}
.howto-step:last-child { margin-bottom: 0; }

.howto-step__header {
  display: block;             /* inline-block → block でラベル幅から解放、ラインがセクション右端まで伸びる */
  padding: 0;
  margin-bottom: 28px;
}
.howto-step__header-label {
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--accent-deep);
  line-height: var(--lh-flat);
  margin-bottom: 8px;
  white-space: nowrap;
}
.howto-step__header-line {
  height: 2.5px;
  background: #E8A598;     /* 旧: #FF6B9D ピンク → コーラル統一 */
  border-radius: 2px;
}

.howto-step__row {
  display: grid;
  grid-template-columns: 33% minmax(0, 1fr);  /* minmax(0, 1fr) で txt 列を 1fr に固定 */
  gap: 18px;
  align-items: start;
  min-height: 220px;                          /* PC/SP 共通：STEP 01（最長）に合わせて 4 ステップ全行を統一 */
}

.howto-step__photo {
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
}
.howto-step__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.howto-step__photo--contain {
  background: #fff;
}
.howto-step__photo--contain img {
  object-fit: contain;
}

.howto-step__txt {
  padding-top: 6px;
  padding-right: 32px;
}
.howto-step__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 12px;
  white-space: nowrap;  /* タイトルは <br> で改行制御（行内は折り返さない） */
}
.howto-step__divider {
  border: none;
  border-top: 1px dashed #c8c8c8;
  margin: 0 0 14px;
}
.howto-step__note {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
}


/* ═══════════════════════════════════════
   SEC 13 — REQUIREMENTS (Pattern H)
═══════════════════════════════════════ */
.sec--req-h {
  background: var(--bg-white);
}

.sec--req-h .req-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: var(--ls-default);
  text-align: left;
}

.req-block { margin-bottom: 56px; }
.req-block__label {
  font-family: var(--font-num);
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--accent-deep);
  margin-bottom: 4px; line-height: var(--lh-flat);
}
.req-block__title {
  font-size: var(--fs-xl); font-weight: var(--fw-black);
  color: var(--text); line-height: var(--lh-snug);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-900);
  margin-bottom: 16px;
}

/* 適格性 */
.req-eligibility {
  padding: 4px 0 4px 14px;
  border-left: 3px solid var(--accent-deep);
  margin-bottom: 14px;
}
.req-eligibility__title {
  font-size: var(--fs-xl); font-weight: var(--fw-black);
  color: var(--text); margin-bottom: 4px; line-height: var(--lh-snug);
}
.req-eligibility__sub {
  font-size: var(--fs-xs); color: var(--text-sub); line-height: var(--lh-normal);
}

/* NG note */
.req-ng-note {
  font-size: var(--fs-xs); color: var(--gray-500); line-height: var(--lh-normal);
  padding: 8px 0 0;
}
.req-ng-note strong {
  color: var(--danger-deep); font-weight: var(--fw-bold);
}

/* ID grid — 横2列×縦2列に変更（4列 → 2列）。画像サイズもアップ */
.req-ids-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.req-id { text-align: center; }
.req-id__img {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
}
.req-id__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.req-id__label {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-sub);
  margin-bottom: 10px;        /* ラベルを画像の上に配置するため、下に余白を確保 */
}
.req-ids-note {
  font-size: var(--fs-2xs); color: var(--gray-500);
  margin-top: 10px; line-height: var(--lh-normal);
}

/* 3つの理由 — 3カラム / 番号は枠外 */
.req-reasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.req-reason {
  display: flex;
  flex-direction: column;
}
.req-reason__num {
  font-family: var(--font-num);
  font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  color: var(--accent-deep); line-height: var(--lh-flat);
  margin-bottom: 8px;
  padding-left: 2px;
}
.req-reason__card {
  background: #fff;
  border: 1px solid #e8e0e6;
  border-left: 3px solid var(--accent-deep);
  padding: 14px;
  flex: 1;
  min-height: 120px;            /* 3 理由カード全ての縦幅を統一（最長 note "18歳未満..." を完全収容） */
}
.req-reason-title {
  font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--text);
  margin-bottom: 6px;
  line-height: var(--lh-snug);
  padding-bottom: 8px;
  border-bottom: 1px dashed #d8d0d4;
}
.req-reason-note {
  font-size: var(--fs-base); color: var(--text-sub); line-height: var(--lh-relaxed);
  min-height: 3.7em;  /* 2行分の高さ確保（最長カード基準） */
}

/* フッター：身分証取扱いの告知カード（ニュートラルベージュ × ピンクアクセント） */
.req-footer {
  margin-top: 4px;
}
.req-footer__safe {
  margin: 0;
  padding: 18px 20px 16px;
  background: #faf7f2;                       /* 薄いウォームベージュ */
  border: 1px solid #e8e0d4;                 /* 控えめなニュートラル枠 */
  border-radius: 8px;
}
.req-footer__safe-body {
  min-width: 0;
}
.req-footer__safe-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #d9d1c4;          /* 区切り線で本文と分離 */
}
.req-footer__safe-text {
  font-size: var(--fs-sm);                   /* 13px：可読性UP */
  color: var(--text);
  line-height: var(--lh-normal);
  margin: 0;
}
.req-footer__safe-text strong {
  color: inherit;                             /* 本文と同じ色 */
  font-weight: inherit;                       /* 本文と同じウェイト（強調なし） */
}

/* 認証カード */
.req-cert {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-top: 3px solid var(--theme-navy-light);
  border-radius: 2px;
  padding: 22px 22px 20px;
  position: relative;
}
.req-cert__top {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #d0d0d0;
}
.req-cert__overline {
  font-family: var(--font-num);
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--theme-navy-light); line-height: var(--lh-flat);
}
.req-cert__title {
  font-size: var(--fs-md); font-weight: var(--fw-black);
  color: var(--theme-navy-light); line-height: var(--lh-heading);
  margin-bottom: 6px;
}
.req-cert__title strong {
  font-weight: var(--fw-black);
}
.req-cert__sub {
  font-size: var(--fs-2xs); color: var(--text-sub); line-height: var(--lh-normal);
}


/* ═══════════════════════════════════════
   SEC 02 — COMMON MYTH (Pattern AD)
═══════════════════════════════════════ */
.sec--myth-ad {
  background-color: #fff;
  /* padding は base の --section-py を継承（他セクションと統一） */
}

.myth-ad-top {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #e0e8ed;
  margin-bottom: 28px;
  margin-top: 24px;
}
.myth-ad-headline {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin-bottom: 24px;
  text-align: center;
}
.myth-ad-tags {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.myth-ad-tag {
  display: inline-block;
  background: #c8e8f3;
  color: var(--primary-darker);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  padding: 6px 14px;
  border-radius: 4px;
  letter-spacing: var(--ls-heading);
}
.myth-ad-quote__label {
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--accent-deep);
  margin-bottom: 6px;
  line-height: var(--lh-flat);
  text-align: center;
}
.myth-ad-quote__main {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-normal);
  margin-bottom: 6px;
  text-align: center;
}
.myth-ad-quote__sub {
  font-size: var(--fs-xs);
  color: var(--gray-500);
  margin-bottom: 24px;
  text-align: center;
}
.myth-ad-stat {
  margin-top: 12px;
  text-align: center;
}
.myth-ad-stat__big {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.myth-ad-stat__num {
  font-size: var(--fs-num-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-flat);
}
.myth-ad-stat__unit {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--text);
}
.myth-ad-stat__caption {
  font-size: var(--fs-2xs);
  color: var(--gray-500);
  letter-spacing: var(--ls-heading);
}
.myth-ad-body {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  text-align: left;
  max-width: 86%;
  margin: 0 auto 40px;
}
.myth-ad-body p {
  margin: 0;
}
.myth-ad-body strong {
  background: linear-gradient(transparent 60%, #ffd6e8 60%);
  font-weight: var(--fw-black);
  color: var(--text);
  padding: 0 2px;
}


/* ═══════════════════════════════════════
   SEC 03 — THE MECHANISM (Pattern AF)
═══════════════════════════════════════ */
.sec--mech {
  background: var(--bg-white);
  /* padding は base の --section-py（PC 56 / SP 44）を継承 */
}
.mech-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  margin: 24px 0 32px;
  letter-spacing: var(--ls-default);
}

/* 演出ステージ */
.mech-stage {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f0e0ea;
  padding: 28px 18px;
}
.mech-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
.mech-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mech-col__elem {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mech-col__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--gray-500);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  letter-spacing: var(--ls-body);
}

/* iPhone（視聴者） */
.mech-phone {
  flex-shrink: 0;
  width: 64px;
  position: relative;
}
.mech-phone__img {
  display: block;
  width: 100%;
  height: auto;
}
.mech-phone__btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent-deep);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  padding: 5px 9px;
  border-radius: 5px;
  text-align: center;
  line-height: var(--lh-tight);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(214,51,132,0.30);
}

/* コイン軌跡 */
.mech-track {
  flex: 0 0 auto;
  width: 110px;
  position: relative;
  height: 32px;
  overflow: hidden;
}
.mech-coin {
  position: absolute;
  top: 50%; left: -14px;
  width: 22px; height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD166, #FF8F3F);
  color: #fff;
  font-size: var(--fs-2xs); font-weight: var(--fw-black);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(255,143,63,0.4);
  animation: mechFly 1.8s linear infinite;
}
.mech-coin:nth-child(2) { animation-delay: 0.6s; }
.mech-coin:nth-child(3) { animation-delay: 1.2s; }
@keyframes mechFly {
  0%   { transform: translateX(0) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(140px) scale(1.0); opacity: 0; }
}

/* デバイス（卵型・Bluetooth） */
.mech-device-wrap {
  flex-shrink: 0;
  position: relative;
  width: 38px;
  height: 54px;
}
.mech-device-wrap::before,
.mech-device-wrap::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1.5px solid rgba(0,130,252,0.55);
  border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%;
  opacity: 0;
  pointer-events: none;
  animation: mechShakeWave 1.2s ease-out infinite;
}
.mech-device-wrap::after { animation-delay: 0.6s; }
@keyframes mechShakeWave {
  0%   { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}
.mech-device {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%;
  background: linear-gradient(135deg, #1a9cff, #0066cc);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,130,252,0.35);
  animation: mechVibrate 0.08s linear infinite;
}
@keyframes mechVibrate {
  0%   { transform: translate(0.4px, -0.3px); }
  20%  { transform: translate(-0.4px, 0.3px); }
  40%  { transform: translate(-0.3px, -0.4px); }
  60%  { transform: translate(0.3px, 0.4px); }
  80%  { transform: translate(0.4px, 0.2px); }
  100% { transform: translate(-0.4px, -0.2px); }
}
.mech-device__icon {
  width: 16px;
  height: 22px;
  display: block;
}

/* 本文 */
.mech-body {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  text-align: left;
  max-width: 86%;
  margin: 0 auto 40px;
}
.mech-body strong {
  font-weight: var(--fw-black);
  color: var(--accent-deep);
}

/* 統合カード（mech-unified）— 仕組み図 + フッター認証の一体型（C案） */
.mech-unified {
  background: #fff;
  border: 1px solid #f0e0ea;
  border-radius: 16px;
  padding: 24px 18px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.mech-unified .mech-row { padding: 0; }

/* フッター認証部分 */
.mech-unified__footer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed #d8d8d8;
}
.mech-unified__footer-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--text);
  text-align: center;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin: 0 0 12px;
}
.mech-unified__badges {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mech-unified__badge-item {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mech-unified__logo-wrap {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mech-unified__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.mech-unified__badge-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-flat);
  margin: 0;
}
.mech-unified__txt {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  line-height: var(--lh-normal);
  text-align: justify;          /* 両端揃え */
  text-justify: inter-character;
  max-width: 287px;             /* スマホ表示幅に統一（PC でも横に広がりすぎない） */
  margin: 0 auto;
}


/* 信頼ブロック（trust）— 旧構造・現在は未使用（HTML から削除済み） */
.mech-trust {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 4px;
  box-shadow: none;
  text-align: center;
  margin-bottom: 28px;
}
.mech-trust__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin: 0 0 14px;
}
.mech-trust__divider {
  display: block;
  width: 60px;
  height: 2px;
  margin: 0 auto 18px;
  background: var(--text-sub);
  opacity: 0.25;
  border-radius: 1px;
}
.mech-trust__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mech-trust__item {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mech-trust__logo-wrap {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mech-trust__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.mech-trust__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-flat);
  margin: 0;
}
.mech-trust__txt {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  line-height: var(--lh-normal);
  margin: 0;
}

/* App Store / Google Play バッジ（旧構造・現在は未使用） */
.mech-badges {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mech-badges__img {
  height: 38px;
  width: auto;
  display: block;
}


/* ═══════════════════════════════════════
   SEC — REWARD RATE (Pattern K)
═══════════════════════════════════════ */
.sec--rate-pk {
  background: linear-gradient(180deg, #FFFAEC 0%, #FFF1D6 100%);  /* クリーム色：ピンク系の有料パーティーチャットと明確に区別 */
  padding-top: 88px;                                              /* 上余白で境界を強化 */
  padding-bottom: 64px;
  position: relative;
  border-top: 2px solid #FFE4B0;                                  /* クリーム色の濃淡境界線で更に視覚分離 */
}

/* 上部の視覚的セパレーター（ピンクのグラデーション帯） */
.sec--rate-pk::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, #F5C5BA 0%, var(--accent-deep) 50%, #F5C5BA 100%);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(214, 51, 132, 0.20);
}

/* バッジ風 eyebrow：濃ピンクの帯で「ここから新ブロック」と明示 */
.rwk-eyebrow {
  display: block;
  width: fit-content;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  color: #fff;
  background: linear-gradient(135deg, #ff6b9d 0%, var(--accent-deep) 100%);
  padding: 9px 22px;
  border-radius: 999px;
  margin: 0 auto 20px;
  box-shadow: 0 6px 16px rgba(214, 51, 132, 0.28);
}
.rwk-title {
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-normal);
  color: var(--text);
  margin-bottom: 14px;
}
.rwk-rate {
  text-align: center;
  margin-bottom: 12px;
}
.rwk-rate__num {
  font-size: var(--fs-num-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  text-shadow: 0 4px 0 rgba(214,51,132,0.10);
}
.rwk-rate__num em {
  font-style: normal;
  color: var(--accent-deep);
}
.rwk-note {
  font-size: var(--fs-2xs);
  color: var(--gray-500);
  text-align: center;
  margin-bottom: 30px;
}

/* シミュレーター（左ピンクボーダー） */
.rwk-sim {
  background: #fafafa;
  padding: 22px 18px 18px;
  border-left: 4px solid var(--accent-deep);
}
.rwk-sim__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--text);
  margin-bottom: 18px;
  letter-spacing: var(--ls-heading);
}
.rwk-field {
  margin-bottom: 14px;
}
.rwk-field__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  color: var(--text-sub);
  margin-bottom: 6px;
  display: block;
}
.rwk-sim select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-500) 50%), linear-gradient(-45deg, transparent 50%, var(--gray-500) 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  padding: 10px 30px 10px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
  color: var(--text);
}
.rwk-result {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #c0c0c0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rwk-result__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--text);
}
.rwk-result__num {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  color: var(--accent-deep);
  line-height: var(--lh-flat);
}
.rwk-result__unit {
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  color: var(--text);
}
.rwk-footer {
  margin-top: 22px;
  font-size: var(--fs-2xs);
  color: var(--gray-500);
  line-height: var(--lh-relaxed);
}
.rwk-footer p { margin: 0; }
.rwk-footer p + p { margin-top: 4px; }


/* ════════════════════════════════════════
   認証セクション（映像送信型特殊営業届出済み）
   ※ WAVE 系ではない独立項目 / メイン+補足展開型 / リップル風（ピンク）
═══════════════════════════════════════ */
.cert-section {
  background: linear-gradient(180deg, #fff 0%, #fff5fa 100%);
  padding: var(--section-py) var(--section-px);
}
.cert-section__overline {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent-deep);
  text-align: center;
  margin: 0 0 8px;
}
.cert-section__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  text-align: center;
  color: var(--text);
  line-height: var(--lh-heading);
  margin: 0 auto 18px;
  letter-spacing: var(--ls-snug);
}
.cert-section__lead {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  max-width: 86%;
  margin: 0 auto 20px;
  text-align: left;
}
.cert-section__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  margin: 0 0 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* 補足展開（罫線のみ・ミニマル / AI感排除） */
.cert-supplement {
  background: transparent;
  border: none;          /* 上下の横線を削除 */
  border-radius: 0;
  box-shadow: none;
}
.cert-supplement__summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* 右端に寄せる */
  gap: 10px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);            /* 細めに */
  color: var(--text);          /* 黒文字 */
  letter-spacing: var(--ls-heading);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cert-supplement__summary::-webkit-details-marker { display: none; }
.cert-supplement__summary::before { content: none; }   /* 旧 + 円アイコン廃止 */
.cert-supplement__label {
  flex: 0 0 auto;
}
.cert-supplement__label::after {
  content: ' を読む';
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);            /* さらに細く */
  letter-spacing: var(--ls-heading);
  color: var(--text);          /* 黒文字 */
}
.cert-supplement[open] .cert-supplement__label::after {
  content: ' を閉じる';
}
.cert-supplement__chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #e57aa3;     /* 薄い赤に合わせる */
  border-bottom: 1.5px solid #e57aa3;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.cert-supplement[open] .cert-supplement__chevron {
  transform: rotate(-135deg) translateY(2px);
}
.cert-supplement__body {
  padding: 4px 4px 24px;
  border-top: 1px solid rgba(0,0,0,0.10);
  margin-top: 0;
}
.cert-supplement__block {
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
.cert-supplement__block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.cert-supplement__h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);     /* 黒文字 */
  margin: 0 0 10px;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-body);
}
.cert-supplement__p {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  margin: 0;
}


/* ═══════════════════════════════════════
   SEC FINAL — お問い合わせ・応募フォーム（Contact Form 7）
═══════════════════════════════════════ */
.sec--contact {
  background: var(--bg1);
  padding: 64px 24px 56px;
}

/* ── 見出し部 ── */
.contact__header {
  text-align: center;
  margin-bottom: 32px;
}
.contact__eyebrow {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
  padding: 0 36px;
}
.contact__eyebrow::before,
.contact__eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.contact__eyebrow::before { left: 0; }
.contact__eyebrow::after  { right: 0; }

.contact__h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--text);
  letter-spacing: var(--ls-snug);
  margin-bottom: 14px;
}

.contact__lead {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
}

/* ── CF7 フォーム本体 ── */
.contact__form-wrap {
  background: var(--bg-white);
  border: 1.5px solid var(--color-deco);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}

/* CF7 デフォルト要素のリセット＆スタイル統一 */
.contact__form-wrap .wpcf7 { margin: 0; }
.contact__form-wrap .wpcf7-form p { margin-bottom: 18px; }
.contact__form-wrap .wpcf7-form p:last-child { margin-bottom: 0; }

.contact__form-wrap label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: var(--ls-body);
  margin-bottom: 6px;
}
.contact__form-wrap label .required,
.contact__form-wrap .required {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  border-radius: 4px;
  vertical-align: middle;
}

/* 入力フィールド共通 */
.contact__form-wrap input[type="text"],
.contact__form-wrap input[type="email"],
.contact__form-wrap input[type="tel"],
.contact__form-wrap input[type="number"],
.contact__form-wrap input[type="url"],
.contact__form-wrap select,
.contact__form-wrap textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg-white);
  border: 1.5px solid var(--color-deco);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.contact__form-wrap input:focus,
.contact__form-wrap select:focus,
.contact__form-wrap textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232,165,152,0.15);
}
.contact__form-wrap textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--lh-relaxed);
}
.contact__form-wrap select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238F8F8F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* CF7 placeholder text */
.contact__form-wrap ::placeholder { color: var(--text-sub); opacity: 0.6; }

/* 送信ボタン */
.contact__form-wrap input[type="submit"],
.contact__form-wrap .wpcf7-submit {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 16px 28px;
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--cta-form);
  border: none;
  border-radius: var(--btn-r);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(232,165,152,0.32);
  letter-spacing: var(--ls-heading);
}
.contact__form-wrap input[type="submit"]:hover,
.contact__form-wrap .wpcf7-submit:hover {
  background: var(--cta-form-drk);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(232,165,152,0.42);
}
.contact__form-wrap input[type="submit"]:active,
.contact__form-wrap .wpcf7-submit:active {
  transform: scale(0.98);
}

/* CF7 spinner */
.contact__form-wrap .wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
}

/* CF7 バリデーションメッセージ */
.contact__form-wrap .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--danger-deep);
}
.contact__form-wrap .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  border-width: 1.5px;
}
.contact__form-wrap .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--green-fresh);
  background: rgba(58,181,74,0.08);
  color: var(--green-darker);
}
.contact__form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.contact__form-wrap .wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: var(--danger-deep);
  background: rgba(185,64,64,0.06);
  color: var(--danger-deep);
}

/* CF7 未インストール時のプレースホルダ */
.contact__placeholder {
  padding: 24px;
  background: var(--bg2);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
}
.contact__placeholder p + p { margin-top: 10px; }
.contact__placeholder code {
  font-family: 'Courier New', monospace;
  background: var(--bg-white);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
  color: var(--primary-drk);
}

/* ── 代替: LINE 応募 ── */
.contact__alt {
  text-align: center;
  margin-bottom: 24px;
}
.contact__alt-label {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  letter-spacing: var(--ls-heading);
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: var(--bg1);
}
.contact__alt-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin-bottom: 14px;
}

/* ── 安心ポイント ── */
.contact__trust {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  letter-spacing: var(--ls-body);
}
.contact__trust li {
  position: relative;
  padding-left: 14px;
}
.contact__trust li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}


/* ════════════════════════════════════════
   WAVE セクション共通リード文（H2直下の本文）
   ※ WAVE 01の myth-ad-body と同等仕様で全 WAVE 共通化
═══════════════════════════════════════ */
.wave-lead {
  /* typography は responsive.css グローバルルールで一元管理 */
  max-width: 86%;
  margin: 0 auto 40px;
}

/* ════════════════════════════════════════
   見出しの改行バランス（<br>撤廃に伴う品質保証）
   ※ 旧版未対応ブラウザでは pretty/balance を無視するだけで通常折返し
═══════════════════════════════════════ */
.fv__h1,
.myth-ad-headline,
.mech-title,
.lovetip__h2,
.zero__h2,
.reward__h2,
.voice__h2,
.safety__h2,
.style__h2,
.sup-h2,
.benefit__h2,
.faq__h2,
.step__h2,
.req-title {
  text-wrap: balance;
}

/* ════════════════════════════════════════
   WAVE H2 の左端を本文（max-width: 86%）と揃える
   ※ FV の H1 はセクション全幅で表示するため除外
═══════════════════════════════════════ */
.myth-ad-headline,
.mech-title,
.lovetip__h2,
.zero__h2,
.reward__h2,
.voice__h2,
.safety__h2,
.style__h2,
.sup-h2,
.benefit__h2,
.faq__h2,
.step__h2,
.req-title {
  max-width: 86%;
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════
   FOOTER — Pattern A (Minimal)
═══════════════════════════════════════ */
.footer-min {
  background: #fff;
  padding: 32px 24px;
  border-top: 1px solid #e0e0e0;
}
.footer-min__inner { max-width: 720px; margin: 0 auto; }
.footer-min__logo {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--gray-900);
  letter-spacing: var(--ls-body);
  margin-bottom: 18px;
}
.footer-min__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: var(--fs-xs);
  margin-bottom: 16px;
}
.footer-min__links a {
  color: var(--gray-700);
  text-decoration: none;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.footer-min__copy {
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--gray-500);
  letter-spacing: var(--ls-heading);
}


/* ═══════════════════════════════════════
   FINAL CTA — Pattern K (Menu Only)
═══════════════════════════════════════ */
.sec--final-menu {
  background: var(--bg-white);
  /* padding は .sec の --section-py / --section-px を継承 */
  text-align: center;
}

/* MENU セクション見出し（WAVEスタイルとは別仕様） */
.menu-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text);
  margin: 0 0 28px;
  line-height: var(--lh-flat);
}
.menu-heading__deco {
  color: var(--accent);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
}

/* フッター MENU — カテゴリアコーディオン式（pokewaku.jp/office 参考） */
.final-menu {
  display: block;
  margin: 0 auto;
  border-top: 1px solid #e8e0e6;
}
.final-menu__top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  text-align: center;
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-black);
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
  background: var(--accent-pale);
  border-bottom: 1px solid #e8e0e6;
}

.final-menu__accordion {
  list-style: none;
  padding: 0;
  margin: 0;
}
.final-menu__cat {
  border-bottom: 1px solid #e8e0e6;
}

/* カテゴリヘッダー（タップ可能ボタン） */
.final-menu__cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 26px 18px;          /* 18→26px に拡大、上下の間隔を広げる */
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  text-align: left;
  letter-spacing: var(--ls-default);
  line-height: var(--lh-snug);
  transition: background var(--transition);
}
.final-menu__cat-head:active { background: rgba(0,0,0,0.04); }

.final-menu__cat-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  color: var(--text-sub);
}
.final-menu__cat-icon svg { width: 100%; height: 100%; }
.final-menu__cat-title { flex: 1; }

/* 下向き chevron（折りたたみ時）→ 上向き（展開時） */
.final-menu__cat-chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.28s ease, margin 0.28s ease;
}
.final-menu__cat-head[aria-expanded="true"] .final-menu__cat-chevron {
  transform: rotate(-135deg);
  margin-top: 0;
  margin-bottom: -4px;
}

/* カテゴリ内サブリスト（折りたたみ可能・テキスト位置をカテゴリタイトルに揃える） */
.final-menu__cat-body {
  list-style: none;
  padding: 0 18px;                /* head と同じ左右パディング */
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease-out, padding 0.32s ease-out;
}
.final-menu__cat-head[aria-expanded="true"] + .final-menu__cat-body {
  max-height: 500px;
  padding-bottom: 14px;
}
.final-menu__cat-body li {
  position: relative;
  padding: 8px 0 8px 30px;        /* 18px(icon area) + 12px(gap) = 30px → text が title と揃う */
  text-align: left;               /* .sec--final-menu の text-align:center を上書き */
}
.final-menu__cat-body li::before {
  content: '';
  position: absolute;
  left: 6px;                       /* icon 領域中央付近に bullet 配置 */
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-sub);
}
.final-menu__cat-body a {
  display: block;                  /* 親 li の幅全体をクリック領域に */
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text);
  text-decoration: none;
  line-height: var(--lh-snug);
  text-align: left;                /* 念のため明示的に左揃え */
}
.final-menu__cat-body a:active { color: var(--accent); }


/* ════════════════════════════════════════
   SEC GUARANTEE — 在宅時給保証（Pattern W）
   3項目（適用条件 / 対象者 / 保証金額）を淡ピンク背景ブロックで表示
═══════════════════════════════════════ */
.sec--guarantee {
  background: #fff;
}
/* .sec--guarantee .sec__inner の独自 padding は削除。
   .sec 基底（layout.css line 248）の padding: var(--section-py) var(--section-px) に統一。
   これで他 15 詳細ページと同じ左右余白に揃う。 */
/* 他詳細ページ（reward / safety / no-undress 等）と統一した FV 規格 */
.guarW-hero {
  text-align: center;
  padding: 16px 0 24px;
}
.guarW-eyebrow {
  display: inline-block;
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  margin-bottom: 6px;
}
.guarW-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text);
  margin: 0 0 12px;
}
.guarW-lead {
  /* typography は responsive.css グローバルルールで一元管理 */
  margin: 0 0 28px;
}

/* ═══════════════════════════════════════
   LP 内：在宅時給保証 コンパクト訴求カード
   （競合参考デザイン：「」見出し + カラー強調 + 2ボタン）
═══════════════════════════════════════ */
.guarantee-promo {
  background: var(--bg-white);
  padding: 8px 4px 0;
  text-align: center;
}
.guarantee-promo__headline {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  margin: 0 0 10px;
}
.guarantee-promo__hl {
  color: var(--accent);                       /* ピンク強調 */
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
}
.guarantee-promo__hl-amp {
  color: var(--accent);                       /* "&" もピンク */
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin: 0 2px;
}
.guarantee-promo__sub {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: var(--lh-normal);
  margin: 0 0 18px;
}

/* 2ボタン横並び：左=フォーム(オレンジ) / 右=LINE(緑) */
.guarantee-promo__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.guarantee-promo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading);
  font-size: var(--fs-base);
  line-height: var(--lh-flat);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  transition: opacity 0.2s, transform 0.1s;
}
.guarantee-promo__btn:hover { opacity: 0.92; }
.guarantee-promo__btn:active { transform: translateY(1px); }
.guarantee-promo__btn--form { background: var(--cta-form); }
.guarantee-promo__btn--line { background: var(--cta-line); }
.guarantee-promo__btn-arrow {
  font-size: var(--fs-sm);
  line-height: var(--lh-flat);
}

/* 詳細ページへの小さなリンク */
.guarantee-promo__detail {
  display: inline-block;
  color: var(--text-sub);
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.guarantee-promo__detail:hover { color: var(--accent); }

.guarW-figure {
  margin: 0 0 24px;
  border-radius: 4px;
  overflow: hidden;
}
.guarW-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.guarW-block {
  background: #fdf2f6;
  padding: 26px 22px 22px;
  border-radius: 4px;
  margin-bottom: 22px;
}
.guarW-block__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent-deep);
  text-align: center;
  padding-bottom: 14px;
  margin: 0 0 18px;
  border-bottom: 1px solid #f4d3df;
}
.guarW-item {
  margin-bottom: 18px;
}
.guarW-item:last-child { margin-bottom: 0; }
.guarW-item__lbl {
  font-size: var(--fs-lg);            /* 11px → 16px：style-feature__title と同サイズに統一 */
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent-deep);
  margin: 0 0 6px;
}
.guarW-item__txt {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-normal);
  margin: 0;
}
.guarW-notes {
  font-size: var(--fs-2xs);
  color: var(--gray-500);
  line-height: var(--lh-relaxed);
  margin: 0;
}


/* ═══════════════════════════════════════
   SEC 09 — 変な客対策・ハラスメント防止
═══════════════════════════════════════ */
.harass__h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text);
  text-align: center;
  margin: 0 0 16px;
}
.harass-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.harass-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg-white);
  border-radius: 12px;
  padding: 20px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.harass-item__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  font-family: var(--font-num);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.harass-item__body {
  flex: 1;
}
.harass-item__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: var(--lh-snug);
  margin: 0 0 6px;
}
.harass-item__desc {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  margin: 0;
}