/* ============================================================
   RABBIT KYOUSEI – BOLD LP v2  (bold-style.css)
   ブランドカラー: 赤 #D82D2D / ゴールド #F2C25F / クリーム #FDF8EE
   若年層向け：クリーンモダン × ポップアクセント
   ============================================================ */

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand Colors（実LPから取得） */
  --red:        #D82D2D;
  --red-dark:   #B52424;
  --red-light:  #FFE8E8;
  --green:      #16A34A;  /* CTA用：メインカラー(赤)から浮かせCTR向上 2026.06。調整はここを変更 */
  --green-dark: #128A3E;
  --gold:       #F2C25F;
  --gold-dark:  #D4A535;
  --gold-light: #FFF5D6;
  --yellow:     #FFF9C4;
  --cream:      #FDF8EE;
  --cream-dark: #F5EDDA;

  /* UI Colors */
  --black:      #1A1A1A;
  --gray-dark:  #444444;
  --gray:       #777777;
  --gray-light: #CCCCCC;
  --white:      #FFFFFF;
  --line-green: #06C755;

  /* Semantic */
  --bg-dark:  #1A1A1A;
  --bg-mid:   #2A1A1A;  /* 赤みのあるダーク */

  /* Typography */
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;

  /* Radius */
  --r-sm:  6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Transition */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fast: cubic-bezier(0.25, 0, 0.25, 1);
}

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

body {
  font-family: var(--font-ja);
  background: #ffffff;
  color: var(--black);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  padding-bottom: 80px;
  -webkit-font-smoothing: antialiased;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
}

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }

/* ============================================================
   PC版サイドエリア（1080px以上で表示）
   左: QRコード / 右: Instagram・LINEボタン
   各サイドの空きエリア（body両脇）の中央に配置
   ============================================================ */
.pc-side { display: none; }
@media (min-width: 1080px) {
  .pc-side {
    display: block;
    position: fixed;
    top: 50%;
    z-index: 50;
    width: 280px;
    text-align: center;
  }
  /* body は max-width:480px で中央。左右の空きエリアの中心に配置 */
  .pc-side--left  {
    left: calc(25% - 120px);
    transform: translate(-50%, -50%);
  }
  .pc-side--right {
    left: calc(75% + 120px);
    transform: translate(-50%, -50%);
  }

  .pc-side-qr {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }

  .pc-side--right .pc-side-btn {
    display: block;
    margin-bottom: 14px;
    transition: opacity .2s, transform .2s;
  }
  .pc-side--right .pc-side-btn:hover {
    opacity: .88;
    transform: translateY(-2px);
  }
  .pc-side--right .pc-side-btn:last-child { margin-bottom: 0; }
  .pc-side--right .pc-side-btn img {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ============================================================
   ANIMATION
   ============================================================ */
[data-anim] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-anim][data-delay="1"] { transition-delay: .12s; }
[data-anim][data-delay="2"] { transition-delay: .22s; }
[data-anim][data-delay="3"] { transition-delay: .32s; }
[data-anim].is-in {
  opacity: 1;
  transform: translateY(0);
}
[data-anim="slide-right"] { transform: translateX(-24px); }
[data-anim="slide-left"]  { transform: translateX(24px); }
[data-anim="slide-right"].is-in,
[data-anim="slide-left"].is-in  { transform: translateX(0); }

/* ============================================================
   GLOBAL HELPERS
   ============================================================ */
.eyebrow {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.eyebrow--light { color: rgba(255,255,255,.5); }
.eyebrow--dark  { color: var(--black); }
.eyebrow--gold  { color: var(--gold-dark); }

.section-h2 {
  font-size: clamp(28px, 7.5vw, 42px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--black);
}
.section-h2 em {
  font-style: normal;
  color: var(--red);
}
.section-h2--white { color: var(--white); }
.section-h2--white em { color: var(--gold); }
.section-h2--dark  { color: var(--black); }

.section-head { margin-bottom: 24px; text-align: center; }

.text-red   { color: var(--red); }
.text-gold  { color: var(--gold); }
.text-cream { color: var(--cream); }

/* 背景デコテキスト */
.section-deco-text {
  position: absolute;
  bottom: -20px; right: -10px;
  font-family: var(--font-en);
  font-size: clamp(60px, 18vw, 110px);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.08);
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}
.section-deco-text--light {
  -webkit-text-stroke: 1.5px rgba(255,255,255,.1);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  padding: 16px 28px;
  border-radius: var(--r);
  border: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .15s;
  box-shadow: 0 4px 20px rgba(216, 45, 45, 0.35);
  width: 100%;
  max-width: 400px;
}
.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(216, 45, 45, 0.25);
}
.btn-primary--large {
  padding: 18px 32px;
  font-size: 16px;
  border-radius: var(--r-lg);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--red);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--r);
  border: 2px solid var(--red);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-secondary:active {
  background: var(--red);
  color: var(--white);
}

.btn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--line-green);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  padding: 16px 28px;
  border-radius: var(--r);
  width: 100%;
  max-width: 400px;
  transition: opacity .15s;
  box-shadow: 0 4px 16px rgba(6, 199, 85, 0.3);
}
.btn-line:active { opacity: 0.85; }

/* ============================================================
   NAV（固定トップメニュー撤去済み。CSSも削除 2026.06）
   ============================================================ */

/* ============================================================
   HERO（クリーム背景）
   ============================================================ */
.hero {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  padding: 0;
}

/* KVビジュアル（2026.04 リニューアル） */
.hero-kv {
  position: relative;
  width: 100%;
  line-height: 0;
}
.hero-kv-img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-kv-dp {
  position: absolute;
  top: 36%;
  left: 7%;
  width: 28%;
  max-width: 120px;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
}

/* 背景の有機的なブロブ形状 */
.hero-deco { position: absolute; pointer-events: none; z-index: 0; }
.hero-deco--blob1 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(242, 194, 95, 0.25) 0%, transparent 70%);
  top: -60px; right: -80px;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  animation: blobFloat 8s ease-in-out infinite alternate;
}
.hero-deco--blob2 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(216, 45, 45, 0.1) 0%, transparent 70%);
  bottom: 80px; left: -60px;
  border-radius: 40% 60% 30% 70% / 60% 40% 50% 50%;
  animation: blobFloat 10s ease-in-out infinite alternate-reverse;
}
.hero-deco--dots {
  width: 120px; height: 80px;
  background-image: radial-gradient(circle, rgba(216,45,45,.2) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  top: 120px; right: 20px;
  opacity: .6;
}
@keyframes blobFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(10px, -15px) scale(1.05); }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* KV直下のカレンダー/CTA用パディング */
.hero .avail-cal-wrap,
.hero .hero-cta-wrap {
  margin-left: 20px;
  margin-right: 20px;
}
.hero .avail-cal-wrap { margin-top: 24px; }
.hero .hero-cta-wrap { padding-bottom: 40px; }

/* 実績バッジ行 */
.hero-badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1.5px solid rgba(216,45,45,.2);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--black);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.htb-dot {
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .6; }
}

/* H1 */
.hero-title {
  font-size: clamp(42px, 11.5vw, 72px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--black);
  position: relative; z-index: 2;
}
.hero-title-location {
  display: inline-block;
  font-size: clamp(13px, 3.5vw, 18px);
  font-weight: 700;
  color: var(--red);
  background: var(--red-light);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  margin-bottom: 8px;
  letter-spacing: 0;
}
.hero-title-em {
  font-style: normal;
  color: var(--red);
  position: relative;
  display: inline-block;
}
.hero-title-em::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 8px;
  background: var(--gold);
  border-radius: 4px;
  z-index: -1;
  opacity: .7;
}

/* H1サブライン（2行目・小さめ） */
.hero-title-sub {
  display: block;
  font-size: clamp(16px, 4.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-dark);
  margin-top: 8px;
  line-height: 1.5;
}

/* 価格チップ */
.hero-price-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hpc {
  flex: 1;
  min-width: 90px;
  background: var(--white);
  border: 2px solid rgba(0,0,0,.08);
  border-radius: var(--r);
  padding: 12px 14px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.hpc--free {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.hpc--monthly {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.hpc--monthly .hpc-label {
  color: rgba(255,255,255,.6);
  font-size: 9px;
}
.hpc--monthly .hpc-price {
  color: var(--white);
  font-size: 16px;
}
.hpc--monthly .hpc-price span { font-size: 11px; }
.hpc--monthly .hpc-tax {
  color: var(--gold);
  font-weight: 700;
  font-size: 9px;
}

.hpc-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--gray);
  margin-bottom: 4px;
}
.hpc--free .hpc-label { color: rgba(255,255,255,.7); }
.hpc-price {
  display: block;
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 900;
  color: var(--black);
  letter-spacing: -0.04em;
  line-height: 1;
}
.hpc-price span { font-size: 13px; }
.hpc--free .hpc-price { color: var(--white); font-size: 20px; }
.hpc-tax {
  display: block;
  font-size: 9px;
  color: var(--gray);
  margin-top: 2px;
}

/* サブコピー */
.hero-sub {
  font-size: 14px;
  color: var(--gray-dark);
  line-height: 1.8;
}
.hero-sub strong { color: var(--black); font-weight: 700; }

/* CTA wrap */
.hero-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.hero-micro {
  font-size: 11px;
  color: var(--gray);
}

/* ヒービジュアル */
.hero-visual {
  position: relative;
  z-index: 2;
  margin: 24px -20px 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hero-img-frame {
  position: relative;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: visible;
  background: var(--cream-dark);
}
.hero-img {
  width: 100%;
  aspect-ratio: 3/4;   /* スマホFV向け縦長 */
  object-fit: cover;
  object-position: center top;  /* 顔・上半身が切れないよう上基準 */
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: block;
  min-height: 280px;
  max-height: 80svh;   /* スマホ画面高さの80%を上限に */
}

/* フローティングバッジ */
.hero-float {
  position: absolute;
  background: var(--white);
  border-radius: var(--r);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  min-width: 130px;
}
.hero-float--tl { top: -14px; left: 20px; }
.hero-float--br { bottom: 20px; right: 20px; }
.hf-icon { font-size: 22px; flex-shrink: 0; }
.hf-main {
  display: block;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.hf-sub {
  display: block;
  font-size: 10px;
  color: var(--gray);
  margin-top: 2px;
}

/* ============================================================
   CONSULT PREVIEW（無料相談の中身 – クリーム→白グラデ）
   ============================================================ */
.consult-preview {
  background: var(--white);
  padding: 50px 20px;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cp-inner {
  max-width: 640px;
  margin: 0 auto;
}
.cp-lead {
  font-size: 13px;
  color: var(--gray);
  margin-top: 8px;
  line-height: 1.7;
}

.cp-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 32px 0;
}
.cp-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.cp-step:first-child { border-top: 1px solid rgba(0,0,0,.07); }

.cp-step-num {
  font-family: var(--font-en);
  font-size: 42px;
  font-weight: 900;
  color: var(--gold);
  -webkit-text-stroke: 1.5px var(--gold-dark);
  line-height: 1;
  flex-shrink: 0;
  width: 64px;
  text-align: center;
}
.cp-step-body { flex: 1; }
.cp-step-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
}
.cp-step-body p {
  font-size: 13px;
  color: var(--gray-dark);
  line-height: 1.75;
}

.cp-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.cp-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border-radius: var(--r);
  padding: 14px 18px;
  width: 100%;
}
.cp-note-icon { font-size: 20px; flex-shrink: 0; }
.cp-note p {
  font-size: 13px;
  color: var(--gray-dark);
  line-height: 1.6;
}

/* ============================================================
   EMPATHY（赤みのあるダーク背景）
   ============================================================ */
.empathy {
  position: relative;
  background: var(--black);
  padding: 55px 20px 10px;
  overflow: hidden;
}
.empathy-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.empathy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0;
}
.empathy-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 24px 16px;
  text-align: center;
  transition: background .2s;
}
.empathy-card:active { background: rgba(255,255,255,.08); }
.ec-emoji { font-size: 32px; display: block; margin-bottom: 10px; }
.empathy-card p {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.5;
}

.empathy-resolve {
  text-align: center;
  margin-top: 28px;
}
.er-arrow {
  font-size: 24px;
  color: var(--gold);
  margin-bottom: 12px;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.er-text {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.4;
}

/* ============================================================
   STATS（赤背景）
   ============================================================ */
.stats {
  position: relative;
  background: var(--red);
  padding: 64px 20px;
  overflow: hidden;
}
.stats-inner-v {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}
.stats-head { margin-bottom: 32px; }

.stats-nums {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  text-align: center;
  gap: 0;
}
.stat-item { padding: 8px 6px; }
.stat-num {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(30px, 8.5vw, 44px);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--white);
  line-height: 1;
}
.stat-unit {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  font-weight: 700;
}
.stat-label {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  margin-top: 6px;
}
.stat-divider {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,.2);
}
.stats-note {
  font-size: 10px;
  color: rgba(255,255,255,.45);
  text-align: center;
  line-height: 1.7;
  margin-top: 20px;
  padding: 0 8px;
}
.stat-label small {
  font-size: 9px;
  opacity: .8;
}

/* ============================================================
   HOW IT WORKS（白背景）
   ============================================================ */
.howit {
  background: var(--white);
  padding: 50px 20px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.howit-inner { max-width: 640px; margin: 0 auto; }

.howit-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 28px 0;
}
.hf-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.hf-step:first-child { border-top: 1px solid rgba(0,0,0,.07); }
.hfs-icon {
  font-size: 28px;
  width: 52px;
  height: 52px;
  background: var(--cream);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hfs-body { flex: 1; }
.hfs-num {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--red);
  margin-bottom: 4px;
}
.hfs-body h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.4;
}
.hfs-body p { font-size: 13px; color: var(--gray-dark); line-height: 1.7; }

.hf-arrow {
  font-size: 18px;
  color: var(--gray-light);
  text-align: center;
  padding: 4px 0;
}

.howit-quality {
  margin-top: 28px;
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 24px 20px;
}
.hq-badge {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.hq-points { display: flex; flex-direction: column; gap: 10px; }
.hq-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hqp-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.hq-point p { font-size: 13px; line-height: 1.6; font-weight: 500; }

/* ============================================================
   COMPARE（ダーク背景）
   ============================================================ */
.compare {
  position: relative;
  background: var(--black);
  padding: 50px 20px;
  overflow: hidden;
}
.compare-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.compare-wrap {
  margin: 28px 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.compare-table thead th {
  background: rgba(255,255,255,.05);
  color: var(--gray);
  font-size: 11px;
  font-weight: 700;
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.1);
  line-height: 1.4;
}
.th-rabbit {
  background: var(--red) !important;
  color: var(--white) !important;
}
.compare-table tbody td {
  padding: 14px 10px;
  text-align: center;
  color: rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(255,255,255,.06);
  line-height: 1.4;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody td:first-child {
  text-align: left;
  padding-left: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
}
.td-rabbit {
  background: rgba(216,45,45,.15);
}
.cmark { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); }
.cmark--bad { color: rgba(255,255,255,.35); }
.cmark--ng  { color: rgba(255,100,100,.6); }
.td-rabbit .cmark { color: var(--gold); }

.compare-note {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  text-align: center;
  line-height: 1.7;
}
.compare-note strong { color: var(--white); }

/* ============================================================
   CASES（クリーム背景）
   ============================================================ */
.cases {
  background: var(--cream);
  padding: 50px 20px;
}
.cases-inner { max-width: 640px; margin: 0 auto; }

.cases-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 20px;
  background: var(--white);
  border-radius: var(--r);
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.cases-tabs::-webkit-scrollbar { display: none; }

.ctab {
  flex: 1;
  min-width: 70px;
  background: transparent;
  border: none;
  border-radius: calc(var(--r) - 4px);
  color: var(--gray);
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ja);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ctab--on {
  background: var(--red);
  color: var(--white);
}

.cpanel { display: none; flex-direction: column; gap: 16px; }
.cpanel--on { display: flex; }

/* 症例カード ページネーション（ガタガタタブ内など複数症例切替） */
.case-pager { position: relative; }
.case-card--pg { display: none; }
.case-card--pg.is-on { display: block; }
.case-pager-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
}
.case-pager-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, opacity .2s;
  padding: 0;
}
.case-pager-btn:hover { background: var(--black); color: var(--white); }
.case-pager-btn:disabled { opacity: .3; cursor: not-allowed; }
.case-pager-btn:disabled:hover { background: var(--white); color: var(--black); }
.case-pager-counter {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  min-width: 56px;
  text-align: center;
  letter-spacing: 0.05em;
}
.case-pager-counter b { font-size: 18px; font-weight: 900; color: var(--red); }

.case-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.ba {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
}
.ba-col { flex: 1; }
.ba-lbl {
  display: block;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}
.ba-lbl--b { color: var(--gray); }
.ba-lbl--a { color: var(--red); }

.ba-box {
  border-radius: var(--r);
  aspect-ratio: 4/3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  position: relative;
}
.ba-box--b { background: #F2F2F2; }
.ba-box--a { background: #FFF0F0; }
.ba-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-arr { color: var(--gray-light); font-size: 20px; font-weight: 900; flex-shrink: 0; }

.case-period {
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
}
.case-period b {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.case-chips {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
  overflow-x: auto;
  scrollbar-width: none;
}
.case-chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  background: var(--gold-light);
  border: 1.5px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--black);
}
.chip b { font-weight: 900; }
.case-method {
  font-size: 11px;
  color: var(--gray-dark);
  padding: 0 16px 10px;
}
.case-method b { color: var(--black); font-weight: 700; }

/* ---- 案D：oh my teeth風（全カード共通） ---- */
.case-card--d .case-period { display: none; }
.case-card--d .case-chips { display: none; }
.case-card--d .case-method { display: none; }
.case-header-d {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 16px 14px;
  flex-wrap: wrap;
}
.case-badge-d {
  background: #f2f2f2;
  border: 1.5px solid #ccc;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-dark);
  flex-shrink: 0;
}
.case-badge-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--black);
  letter-spacing: -0.01em;
  line-height: 1;
  flex-shrink: 0;
  margin-right: 6px;
}
.case-sub-info {
  font-size: 10px;
  color: var(--gray);
  padding: 8px 16px 4px;
  line-height: 1.7;
}

/* ---- 案A：ヘッダー横並び型 ---- */
.case-card--a .case-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  padding: 12px 16px;
}
.case-card--a .case-period {
  display: none;
}
.case-period-badge {
  background: var(--red);
  color: #fff;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.case-period-badge b {
  font-size: 17px;
  font-weight: 900;
  margin-left: 4px;
}

/* ---- 案B：中央ヒーロー型 ---- */
.case-card--b .case-period {
  text-align: center;
  justify-content: center;
  padding: 14px 16px;
  flex-direction: column;
  gap: 2px;
}
.case-card--b .case-period span {
  font-size: 11px;
  opacity: 0.8;
  letter-spacing: 0.08em;
}
.case-card--b .case-period b {
  font-size: 36px;
}

/* ---- 案C：Afterオーバーレイ型 ---- */
.case-card--c .case-period {
  display: none;
}
.ba-period-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(216,45,45,0.82);
  color: #fff;
  text-align: center;
  padding: 5px 6px;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(2px);
}
.ba-period-overlay b {
  display: block;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.case-note {
  font-size: 10px;
  color: var(--gray);
  padding: 6px 16px 12px;
}

/* 担当医師 */
/* 旧 doctor-compact → 互換用に残す */
.doctor-compact {
  margin-top: 28px;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.dc-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.dc-cards { display: flex; flex-direction: column; gap: 12px; }
.dc-card { display: flex; align-items: center; gap: 14px; }
.dc-avatar { font-size: 32px; flex-shrink: 0; }
.dc-name { font-size: 14px; font-weight: 700; }
.dc-cred { font-size: 11px; color: var(--gray); margin-top: 2px; }

/* 新 doctor-card（詳細プロフィール版） */
.doctor-card {
  margin-top: 28px;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.dc-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.dc-avatar-lg { font-size: 52px; flex-shrink: 0; }
.dc-info { flex: 1; }
.dc-name-lg {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--black);
}
.dc-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
  margin-left: 6px;
}
.dc-info .dc-cred {
  font-size: 11px;
  color: var(--red);
  font-weight: 700;
  margin-top: 4px;
}
.dc-quals-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.dc-quals-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dc-quals-list li {
  font-size: 13px;
  color: var(--black);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.dc-quals-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--red);
}

/* ============================================================
   PRICE
   ============================================================ */
.price {
  position: relative;
  background: var(--cream);
  padding: 50px 20px 55px;
  overflow: hidden;
}
.price-deco-img {
  position: absolute;
  right: -30px;
  top: 48px;
  width: 200px;
  height: auto;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.price-inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
}
.price-lead {
  font-size: 12px;
  color: var(--gray);
  margin-top: 8px;
  line-height: 1.7;
}

/* 月額バナー */
.pmh-banner {
  background: var(--red);
  color: var(--white);
  border-radius: 12px;
  padding: 20px 24px;
  text-align: center;
  margin-bottom: 20px;
}
.pmh-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.pmh-amount {
  font-family: var(--font-en);
  font-size: 52px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.pmh-amount span { font-size: 52px; }
.pmh-unit {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-left: 4px;
}
.pmh-note {
  font-size: 10px;
  color: rgba(255,255,255,.6);
  line-height: 1.6;
}

/* 矯正費用カード */
.price-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.price-card {
  background: var(--white);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid transparent;
  gap: 12px;
}
.price-card--featured {
  border-color: var(--red);
  background: #fff6f6;
}
.price-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  margin: 0;
}
.price-card--featured .price-card-name { color: var(--red); }
.price-card-amount {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 900;
  color: var(--black);
  white-space: nowrap;
  margin: 0;
}
.price-card--featured .price-card-amount {
  font-size: 26px;
  color: var(--red);
}
.price-card-suffix {
  font-size: 13px;
  font-weight: 700;
  margin-left: 1px;
}

/* 精密検査 */
.price-exam {
  background: var(--white);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  border-left: 4px solid var(--red);
}
.price-exam-info { flex: 1; }
.price-exam-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 3px;
}
.price-exam-badge {
  background: var(--red);
  color: var(--white);
  font-size: 9px;
  font-weight: 900;
  border-radius: 3px;
  padding: 2px 6px;
}
.price-exam-sub {
  font-size: 10px;
  color: var(--gray);
}
.price-exam-amount {
  text-align: right;
  flex-shrink: 0;
}
.price-exam-amount del {
  font-size: 11px;
  color: #bbb;
  display: block;
  text-align: right;
}
.price-exam-amount strong {
  font-size: 18px;
  color: var(--red);
  font-weight: 900;
}

/* 追加費用 */
.price-extra-sec {
  background: var(--white);
  border-radius: 12px;
  padding: 18px 18px 10px;
  margin-bottom: 16px;
}
.price-extra-heading {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.price-extra-group { margin-bottom: 14px; }
.price-extra-group:last-child { margin-bottom: 6px; }
.peg-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--white);
  background: var(--black);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.peg-label--case { background: #666; }
.peg-label--opt  { background: #999; }
.peg-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  font-size: 13px;
}
.peg-row:last-child { border-bottom: none; }
.peg-row small {
  font-size: 10px;
  color: var(--gray);
  display: block;
  margin-top: 2px;
}
.peg-row > span:last-child {
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* リテーナー金額（2行） */
.price-exam-amount--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.pea-row {
  font-size: 11px;
  color: var(--gray);
  white-space: nowrap;
}
.pea-row strong {
  font-size: 14px;
  font-weight: 900;
  color: var(--black);
  margin-left: 3px;
}

/* 調整料の仕組み */
.price-method-sec { margin-bottom: 16px; }
.price-method-heading {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.price-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.price-method-card {
  background: var(--white);
  border-radius: 10px;
  padding: 14px 12px 12px;
  border: 2px solid transparent;
}
.price-method-card--rec { border-color: var(--red); }
.pmc-badge {
  font-size: 9px;
  font-weight: 900;
  color: var(--white);
  background: var(--red);
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.pmc-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: 10px;
}
.pmc-lens {
  font-size: 11px;
  color: var(--gray);
  margin-bottom: 8px;
  line-height: 1.5;
}
.pmc-lens strong {
  color: var(--black);
  font-weight: 900;
}
.pmc-adjust {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.pmc-adjust-label {
  font-size: 10px;
  color: var(--gray);
}
.pmc-adjust-val {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.pmc-adjust-val--gray { color: var(--black); }
.pmc-adjust-unit {
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: var(--gray);
}
.pmc-desc {
  font-size: 10px;
  color: var(--gray);
  line-height: 1.6;
}
.price-method-note {
  font-size: 10px;
  color: var(--gray);
  margin-top: 8px;
  line-height: 1.6;
}

/* ============================================================
   FAQ + 最終CTA（赤背景）
   ============================================================ */
.faq-booking {
  position: relative;
  background: var(--red);
  padding: 50px 20px;
  overflow: hidden;
}
.fb-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.faq-booking .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 48px;
}
.faq-booking .faq-item {
  background: rgba(255,255,255,.08);
  border-radius: var(--r);
  margin-bottom: 8px;
  overflow: hidden;
  transition: background .2s;
}
.faq-booking .faq-item[open] { background: rgba(255,255,255,.13); }

.faq-booking .faq-q {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.5;
  user-select: none;
}
.faq-booking .faq-q::-webkit-details-marker { display: none; }
.faq-booking .faq-q::after {
  content: '+';
  flex-shrink: 0;
  font-size: 20px;
  color: var(--gold);
  font-weight: 300;
  transition: transform .2s;
}
.faq-booking .faq-item[open] .faq-q::after {
  transform: rotate(45deg);
}
.faq-booking .faq-a {
  padding: 0 20px 16px;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.75;
}

/* 最終CTA */
.final-cta {
  text-align: center;
}
.final-cta-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.final-cta-title {
  font-size: clamp(28px, 7.5vw, 42px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 12px;
}
.final-cta-sub {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-bottom: 28px;
}
.booking-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* 幾何学デコ */
.booking-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.booking-deco--tl {
  width: 200px; height: 200px;
  background: rgba(255,255,255,.06);
  top: -60px; left: -60px;
}
.booking-deco--br {
  width: 280px; height: 280px;
  background: rgba(0,0,0,.06);
  bottom: -100px; right: -80px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--white);
  padding: 40px 20px;
}
.footer-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 20px;
}
.footer-logo-deco {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
  flex-shrink: 0;
}
.footer-creds {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 20px;
}
.footer-cred {
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.footer-cred-sep {
  font-size: 10px;
  color: rgba(0,0,0,.2);
}
.footer-rule {
  border: none;
  border-top: 1px solid rgba(0,0,0,.1);
  margin: 0 0 20px;
}
.footer-info {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.8;
  margin-bottom: 14px;
}
.footer-disclaimer {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  line-height: 1.7;
  margin-bottom: 16px;
}
.footer-copy {
  font-size: 11px;
  color: rgba(0,0,0,.35);
}

/* ============================================================
   FIXED DOCK（固定フッターCTA）
   ============================================================ */
/* 旧・画像フロートバー（.dock）撤去：フロートCTAは .lp-popup に一本化 2026.06 */

/* ============================================================
   CSS TEETH PLACEHOLDERS（症例デモ用）
   ============================================================ */
.case-teeth-css {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
/* 各ケースの歯イラスト代替 */
.before-teeth::before   { content: '😬'; }
.after-teeth::before    { content: '😁'; }
.before-teeth-2::before { content: '😬'; }
.after-teeth-2::before  { content: '😊'; }
.suki-before::before    { content: '😬'; }
.suki-after::before     { content: '😄'; }
.gata-before::before    { content: '😬'; }
.gata-after::before     { content: '😁'; }
.uke-before::before     { content: '😶'; }
.uke-after::before      { content: '😊'; }

/* ============================================================
   RESPONSIVE — MINOR TWEAKS
   ============================================================ */
/* PC/SP統一レイアウトのため、ビューポート幅によるレイアウト変更は行わない
   （body自体が max-width: 480px 固定のため）
@media (min-width: 480px) {
  .hero-price-chips { flex-wrap: nowrap; }
  .empathy-grid { grid-template-columns: repeat(4, 1fr); }
  .booking-btns { flex-direction: column; align-items: center; }
  .cp-footer { flex-direction: row; align-items: center; }
}
@media (min-width: 640px) {
  .hero { padding-top: 100px; }
  .hero-inner { padding-bottom: 0; }
}
*/

/* ============================================================
   IMAGE PLACEHOLDER（画像が入る前の仮スタイル）
   ============================================================ */
.img-ph {
  background: var(--cream-dark);
  border-radius: var(--r-sm);
  display: block;
  object-fit: cover;
}
.img-ph--logo  { width: 28px; height: 28px; border-radius: 50%; }
.img-ph--icon  { width: 44px; height: 44px; border-radius: var(--r-sm); }
.img-ph--xs    { width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; }
.img-ph--md    { width: 52px; height: 52px; border-radius: var(--r); margin: 0 auto 10px; }
.img-ph--step  { width: 80px; height: 60px; border-radius: var(--r-sm); flex-shrink: 0; }
.img-ph--case  { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.img-ph--avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.img-ph--pay   { width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0; }
.img-ph--inv   { height: 30px; width: auto; max-width: 120px; border-radius: 4px; }

/* HFバッジ内 画像 */
.hf-img { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; }

/* ============================================================
   CTA ボタン（メイン＋サブテキスト構造）
   ============================================================ */
.btn-stacked {
  flex-direction: column;
  gap: 4px;
  padding: 14px 24px;
  max-width: 420px;
}
.btn-main-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.btn-sub-text {
  font-size: 11px;
  font-weight: 500;
  opacity: .85;
  letter-spacing: 0.02em;
}

/* ============================================================
   インビザライン No.1 強調（HOW IT WORKS内）
   ============================================================ */
.hq-point--featured {
  background: linear-gradient(135deg, #fff9ec 0%, #fff3d0 100%);
  border: 2px solid var(--gold);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 4px;
}
.hq-featured-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.inv-logo { flex-shrink: 0; }
.hq-featured-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.4;
}
.hq-featured-sub {
  font-size: 11px;
  color: var(--gold-dark);
  font-weight: 700;
  margin-top: 3px;
}

/* ============================================================
   支払い方法セクション（PRICE内）
   ============================================================ */
.payment-box {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.payment-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 月々払い（主役） */
.pay-item--main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  background: var(--black);
  border-radius: var(--r);
  padding: 16px;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}
.pay-main-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.pay-main-amount {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
  font-family: var(--font-en);
  letter-spacing: -0.02em;
}
.pay-main-amount small {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  font-family: var(--font-jp);
  font-weight: 500;
}

/* サブ選択肢列 */
.pay-sub {
  display: flex;
  gap: 10px;
}
.pay-item--sm {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-dark);
}

/* 社会的証明 */
.payment-guide {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.payment-guide::before {
  content: '✓';
  font-size: 11px;
}

.pay-item--highlight {
  background: var(--gold-light);
  border: 1.5px solid var(--gold);
}
.pay-item--highlight strong { color: var(--red); font-size: 13px; }
.pay-icon { margin-bottom: 2px; flex-shrink: 0; }


/* cp-step内の画像 */
.cp-step { align-items: flex-start; }
.cp-step-img { margin-left: auto; flex-shrink: 0; }

/* 共感カード画像 */
.ec-img { display: block; }

/* 医師アバター（img版） */
.doctor-card .dc-avatar-lg {
  font-size: inherit;
}

/* ============================================================
   FV 空き◎ note
   ============================================================ */
.hero-avail {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

/* ============================================================
   FLOW 横並び3カラム図解（jsv）
   ============================================================ */
.jsv-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 24px 0 8px;
}
.jsv-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border-radius: var(--r);
  padding: 14px 8px 12px;
  text-align: center;
  position: relative;
}
.jsv-step--highlight {
  background: var(--red-light);
  border: 2px solid var(--red);
}
.jsv-discount {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.jsv-icon { width: 44px; height: 44px; flex-shrink: 0; }
.jsv-num {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 900;
  color: var(--gray);
}
.jsv-num--red { color: var(--red); }
.jsv-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.4;
  margin: 0;
}
.jsv-time {
  font-size: 9px;
  color: var(--gray);
  background: var(--white);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
}
.jsv-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--red);
  background: var(--white);
  border: 1px solid var(--red);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
}
.jsv-arrow {
  font-size: 18px;
  color: var(--red);
  font-weight: 900;
  padding-top: 28px;
  flex-shrink: 0;
}
.jsv-note {
  text-align: center;
  font-size: 12px;
  color: var(--gray);
  margin: 8px 0 0;
}

/* ============================================================
   HOW 横並び圧縮フロー（hvf）
   ============================================================ */
.how-visual {
  margin: 24px 0;
}
.how-visual-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.hvf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cream);
  border-radius: var(--r);
  padding: 20px 12px;
}
.hvf-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.hvf-icon {
  width: 52px;
  height: 52px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.hvf-img { width: 30px; height: 30px; }
.hvf-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.5;
  margin: 0;
}
.hvf-arrow {
  font-size: 16px;
  color: var(--red);
  font-weight: 900;
  flex-shrink: 0;
}
.how-visual-note {
  font-size: 11px;
  color: var(--gray);
  text-align: center;
  margin-top: 12px;
  line-height: 1.6;
}


/* ============================================================
   共感パート → 営業化（RESOLVE）
   ============================================================ */
.empathy-resolve-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.erl-item {
  background: rgba(255,255,255,.08);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.erl-worry {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}
.erl-answer {
  font-size: 13px;
  color: var(--white);
  line-height: 1.6;
  padding-left: 4px;
}
.erl-answer strong { color: var(--gold); }
.empathy-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 14px;
}

/* ============================================================
   FLOW STEP2 merit（合理性テキスト）
   ============================================================ */
.jstep-merit {
  font-size: 12px;
  color: var(--red);
  font-weight: 700;
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--red);
}

/* ============================================================
   フッター LINE導線（縮小版）
   ============================================================ */
.footer-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-decoration: underline;
  margin: 12px 0;
}
.footer-line:hover { color: var(--white); }


/* ============================================================
   SYMPTOM FINDER（症例クイック選択）
   ============================================================ */
.symptom-finder {
  background: var(--white);
  padding: 56px 20px 48px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.sf-inner { max-width: 500px; margin: 0 auto; }
.sf-header { text-align: center; margin-bottom: 28px; }
.sf-title {
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 900;
  line-height: 1.4;
  color: var(--black);
}

/* 選択ボタン列 */
.sf-choices {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.sf-btn {
  flex: 0 0 calc(20% - 8px);
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border: 2px solid rgba(0,0,0,.1);
  border-radius: var(--r);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  font-size: 11px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.4;
  text-align: center;
}
.sf-btn:hover { border-color: var(--red); background: var(--red-light); }
.sf-btn--on {
  border-color: var(--red);
  background: var(--red-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(216,45,45,.15);
}
.sf-btn-img { width: 40px; height: 40px; border-radius: 8px; }
.img-ph--sym { width: 40px; height: 40px; }
.sf-btn-sub {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--red);
  margin-top: 3px;
  white-space: nowrap;
  letter-spacing: 0;
}
.sf-btn--on .sf-btn-sub { color: var(--red); }

/* リードコピー */
.sf-lead {
  font-size: 13px;
  color: var(--gray);
  font-weight: 500;
  margin-top: 8px;
  text-align: center;
}


/* 結果エリア */
.sf-result {
  display: none;
  animation: sfFadeIn .35s ease;
}
.sf-result--on { display: block; }
@keyframes sfFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 各パネル */
.sf-panel { display: none; }
.sf-panel--on { display: block; }

.sf-panel-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

/* Before/After */
.sf-ba {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sf-ba-col { flex: 1; }
.sf-ba-box {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: var(--r);
  overflow: hidden;
}
.sf-ba-box--b { background: #f5f5f5; }
.sf-ba-box--a { background: #e8f5e9; }
.sf-ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sf-ba-arr {
  font-size: 20px;
  color: var(--red);
  font-weight: 900;
  flex-shrink: 0;
}

/* メタ情報（チップ） */
.sf-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* 医師コメント */
.sf-comment {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.sf-comment-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.sf-comment p:last-child {
  font-size: 13px;
  line-height: 1.7;
  color: var(--black);
}

/* CTA */
.sf-cta {
  width: 100%;
  text-align: center;
  font-size: 14px;
  justify-content: center;
}
.sf-cta-note {
  text-align: center;
  font-size: 10px;
  color: var(--gray);
  margin-top: 8px;
}

/* ============================================================
   FV 割引note
   ============================================================ */
.hero-discount-note {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

/* ============================================================
   JOURNEY（3ステップ来院フロー）
   ============================================================ */
.journey {
  background: var(--white);
  padding: 64px 20px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.journey-inner { max-width: 500px; margin: 0 auto; }
.journey-lead {
  font-size: 13px;
  color: var(--gray);
  margin-top: 8px;
  font-weight: 500;
}
.journey-steps { display: flex; flex-direction: column; gap: 0; margin-top: 28px; }

/* 各ステップ */
.jstep {
  background: var(--cream);
  border-radius: var(--r);
  padding: 18px;
  position: relative;
}
.jstep--highlight {
  background: var(--red-light);
  border: 2px solid var(--red);
}
.jstep-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.jstep-num {
  width: 36px; height: 36px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jstep-num--red {
  background: var(--red);
}
.jstep-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.jstep-time {
  font-size: 10px;
  font-weight: 500;
  color: var(--gray);
  background: var(--white);
  border-radius: 99px;
  padding: 2px 10px;
  white-space: nowrap;
}
.jstep-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  background: var(--white);
  border: 1px solid var(--red);
  border-radius: 99px;
  padding: 2px 10px;
  white-space: nowrap;
}
.jstep-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-dark);
  margin-bottom: 12px;
}
.jstep-img { margin-top: 4px; }

/* 割引表示 */
.jstep-discount {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-top: 4px;
}
.jd-del {
  font-size: 11px;
  color: var(--gray);
  text-decoration: line-through;
}
.jd-arrow { font-size: 12px; color: var(--red); }
.jd-now {
  font-size: 17px;
  font-weight: 900;
  color: var(--red);
  font-family: var(--font-en);
}
.jd-now small {
  font-size: 10px;
  font-weight: 500;
  color: var(--gray);
  font-family: var(--font-jp);
}

/* 矢印 */
.jstep-arrow {
  text-align: center;
  font-size: 20px;
  color: var(--red);
  font-weight: 900;
  padding: 6px 0;
}

/* フッター */
.journey-footer {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.journey-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--gray-dark);
  line-height: 1.5;
}


/* ============================================================
   ⑦ 余白拡張（高級感UP） - 1.25〜1.5倍
   ============================================================ */
.symptom-finder { padding-top: 80px; padding-bottom: 80px; }
.journey { padding-top: 80px; padding-bottom: 80px; }
.empathy { padding-top: 80px; padding-bottom: 10px; }
.empathy .section-h2 { font-size: 24px; }
.stats { padding-top: 64px; padding-bottom: 64px; }
.howit { padding-top: 80px; padding-bottom: 80px; }
.compare { padding-top: 72px; padding-bottom: 72px; }
.cases { padding-top: 72px; padding-bottom: 72px; }
.price { padding-top: 80px; padding-bottom: 80px; }

/* セクション見出し下余白 */
.section-head { margin-bottom: 24px; text-align: center; }

/* 各カード・ブロックの内余白 */
.journey-inner, .howit-inner { gap: 24px; }
.jsv-flow { margin-top: 32px; margin-bottom: 14px; }
.how-visual { margin-top: 32px; margin-bottom: 8px; }
.empathy-resolve-list { gap: 14px; margin-bottom: 28px; }

/* final CTA */
.final-cta { padding: 40px 24px; }

/* ============================================================
   NAV EXTRAS
   ============================================================ */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-tel {
  font-size: 11px;
  color: var(--gray);
  font-weight: 600;
  padding: 4px 8px;
}

/* ============================================================
   HERO DISCLAIMER
   ============================================================ */
.hero-disclaimer {
  font-size: 10px;
  color: var(--gray);
  line-height: 1.6;
  margin-top: 4px;
  text-align: center;
}

/* ============================================================
   ABOUT（白背景）
   ============================================================ */
.about {
  background: var(--white);
  padding: 40px 0 32px;
}
.about .about-inner { padding: 0 20px; }
.about-img-full {
  width: 100%;
  line-height: 0;
}
.about-img-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* About 3項目 新レイアウト */
.about-items {
  padding: 8px 0 40px;
  overflow: hidden;
}
.about-new-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  position: relative;
}
.about-new-left-circle {
  position: absolute;
  left: -2px;
  top: 35%;
  transform: translateY(-50%);
  width: 100px;
  z-index: 0;
  pointer-events: none;
}
.about-new-left-circle img {
  width: 100%;
  height: auto;
  display: block;
}
.about-new-body {
  flex: 1;
  padding-left: 16px;
  position: relative;
  z-index: 1;
}
.about-new-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--red);
  line-height: 1.4;
  margin-bottom: 10px;
  display: inline-block;
  font-style: italic;
  transform: rotate(-6deg);
  transform-origin: left center;
}
.about-new-title span {
  font-size: 28px;
}
.about-new-desc {
  font-size: 11px;
  color: var(--gray-dark);
  line-height: 1.7;
  padding-right: 165px;
}
.about-new-photo {
  position: absolute;
  right: 20px;
  top: 35px;
  width: 150px;
  height: 150px;
  z-index: 0;
}
.about-photo-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.about-dotted {
  display: block;
  width: 25%;
  height: auto;
  margin: 25px auto;
}
.about-inner { max-width: 600px; margin: 0 auto; }

.about-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--black);
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--white);
}
.about-img-wrap {
  flex-shrink: 0;
  width: 120px;
  border-radius: var(--r);
  overflow: hidden;
}
.about-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  margin-top: 2px;
}
.about-item strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
  color: var(--black);
}
.about-item p {
  font-size: 12px;
  color: #555;
  line-height: 1.7;
}

/* ============================================================
   PRICE NOTES
   ============================================================ */
.price-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.price-note-item {
  font-size: 11px;
  color: #555;
  padding-left: 16px;
  position: relative;
  line-height: 1.6;
}
.price-note-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 900;
}

/* ============================================================
   CASE EXTRAS（症例の追加情報）
   ============================================================ */
.case-risk {
  padding: 10px 14px;
  font-size: 10px;
  color: var(--gray);
  line-height: 1.65;
}

/* ============================================================
   OPTION SEC（PBMオプション・白背景）
   ============================================================ */
.option-sec {
  background: var(--white);
  padding: 55px 20px;
  border-bottom: 3px solid var(--black);
}
.option-inner { max-width: 600px; margin: 0 auto; }

.option-lead {
  font-size: 13px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}
.option-card {
  border: 3px solid var(--black);
  border-radius: var(--r-lg);
  padding: 22px 18px;
  background: var(--off-white);
}
.option-badge {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.option-name {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--black);
}
.option-desc {
  font-size: 13px;
  color: #444;
  line-height: 1.8;
}
.option-desc small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gray);
}

/* ============================================================
   FLOW NOTE
   ============================================================ */
.flow-note {
  text-align: center;
  font-size: 12px;
  color: rgba(0,0,0,.5);
  margin-top: 20px;
  padding: 12px 16px;
  border: 1.5px solid rgba(0,0,0,.15);
  border-radius: var(--r);
}
#flow-intro {
  padding-bottom: 0;
}

/* ============================================================
   BOOKING FINE PRINT
   ============================================================ */
.booking-fine {
  font-size: 11px;
  color: var(--gray);
  margin-top: 16px;
  text-align: center;
  padding: 0 20px;
}

/* ============================================================
   DELAY 4（アニメーション追加）
   ============================================================ */
[data-delay="4"] { transition-delay: .32s; }

/* ============================================================
   EMPATHY ITEM（新版・黒背景共感セクション）
   ============================================================ */
.empathy-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.empathy-item {
  display: flex !important;
  align-items: center;
  gap: 14px;
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,.04);
}
.empathy-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}
.empathy-item p {
  font-size: 14px;
  color: rgba(255,255,255,.85) !important;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}
.empathy-anchor { text-align: center; margin-top: 16px; margin-bottom: 0; }
.empathy-anchor .empathy-arrow { margin-bottom: 0; }

/* foryou画像：wrapperに背景を設定 */
.foryou-wrap {
  line-height: 0;
  background: linear-gradient(to bottom, #1A1A1A 50%, #ffffff 50%);
}
.empathy-foryou {
  width: 100%;
  height: auto;
  display: block;
}
.manifesto-deco { display: none; }
.empathy-arrow {
  font-size: 28px;
  color: var(--red);
  margin-bottom: 10px;
  animation: bounceY 1.5s ease-in-out infinite;
}
@keyframes bounceY {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
.empathy-answer {
  font-size: 17px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.02em;
}
.text-yellow { color: var(--yellow) !important; }

/* ============================================================
   FLOW SECTION（黒背景）
   ============================================================ */
.flow {
  background: var(--cream);
  padding: 0 20px;
}
#flow {
  background: var(--white);
}
.flow-inner {
  max-width: 600px;
  margin: 0 auto;
}
/* FLOWタイトル部分をクリーム色の帯に */
.flow .section-head {
  background: var(--cream);
  padding: 56px 24px 40px;
  margin: 0 -20px 32px;
}
.flow-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}
.flow-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 0;
  padding: 18px 20px;
  background: var(--red);
  color: var(--white);
  position: relative;
}
.flow-num {
  flex-shrink: 0;
  width: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 2px;
}
.flow-num img {
  width: 100%;
  height: auto;
  display: block;
}
.flow-body { flex: 1; }
.flow-photo {
  display: block;
  width: 100%;
  height: auto;
  min-height: 160px;
  border-radius: 6px;
  margin-top: 10px;
  background: rgba(0,0,0,.04);
}
.flow-body h3 {
  font-size: 20px;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.flow-body p {
  font-size: 12px;
  color: rgba(255,255,255,.92);
  line-height: 1.7;
}

/* カード間のコネクター（赤の短い縦線、番号エリア直下） */
.flow-connector {
  width: 3px;
  height: 12px;
  background: var(--red);
  margin-left: 32px;
}

/* 写真を内包するステップ */
.flow-item--photo {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px 20px 20px;
}
.flow-item--photo .flow-item-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* 当日予約特典を内包する Step 02 */
.flow-item--deal {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px 20px 20px;
}
.flow-item--deal .flow-item-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* 末尾バナー（LINEサポート画像） */
.flow-banner {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  margin: 28px auto 0;
}

/* ============================================================
   FAQ（黄背景）
   ============================================================ */
.faq {
  position: relative;
  background: var(--cream);
  padding: 55px 20px;
  overflow: hidden;
}
.faq-deco-img {
  position: absolute;
  right: -20px;
  top: 48px;
  width: 200px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.faq-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}
.faq-list {
  border: 2.5px solid var(--black);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--black);
}
.faq-item {
  border-bottom: 1.5px solid rgba(0,0,0,.1);
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::before {
  content: 'Q';
  flex: 0 0 30px;
  height: 30px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-q > span {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.55;
}
.faq-q::after {
  content: '';
  flex: 0 0 10px;
  height: 10px;
  border-right: 2.5px solid #999;
  border-bottom: 2.5px solid #999;
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
  margin-bottom: 4px;
}
.faq-item[open] .faq-q::after {
  transform: rotate(-135deg);
  margin-bottom: -4px;
}
.faq-item[open] .faq-q { background: #FFFDE7; }
.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 13px;
  color: #555;
  line-height: 1.8;
}
.faq-a::before {
  content: 'A';
  flex: 0 0 30px;
  height: 30px;
  background: var(--black);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* ============================================================
   BOOKING（赤背景・最終CTA）
   ============================================================ */
.booking {
  position: relative;
  background: var(--red);
  overflow: hidden;
}
.booking-transition {
  position: relative;
  line-height: 0;
  font-size: 0;
  background: #FFE8E8;
}
.booking-transition::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5%;
  background: linear-gradient(to bottom, transparent, #D82D2D);
  z-index: 1;
  pointer-events: none;
}
.booking-visual {
  width: 100%;
  height: auto;
  display: block;
  margin: 0; padding: 0;
  vertical-align: top;
}
.booking-inner {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 60px;
}
.booking-sub-img {
  width: 100%;
  height: auto;
  display: block;
  padding: 0 60px;
  box-sizing: border-box;
  margin-bottom: 4px;
}
.booking-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  margin: 16px 0;
}
.booking-cta-img {
  display: block;
  width: 100%;
  max-width: 480px;
  transition: opacity .15s;
}
.booking-cta-img img {
  width: 100%;
  height: auto;
  display: block;
  animation: double_click_effect 1.2s infinite;
}
.booking-cta-img:active img { animation-play-state: paused; }
.booking-cta-img:active { opacity: 0.8; }
.booking-fine-img {
  width: 100%;
  height: auto;
  display: block;
  padding: 0 20px;
  box-sizing: border-box;
}
.booking-sakura {
  position: absolute;
  right: -47px;
  top: 0px;
  width: 67px;
  height: auto;
  transform: rotate(-53deg);
  transform-origin: bottom right;
  pointer-events: none;
}

/* ============================================================
   EMPATHY NUM（数字バッジ版）
   ============================================================ */
.empathy-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-size: 11px; font-weight: 900;
  letter-spacing: 0.05em;
}

/* ============================================================
   ANXIETY Q LABEL（Qバッジ）
   ============================================================ */
.aq-label {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-size: 13px; font-weight: 900;
}
.aq-icon { display: none; } /* 旧版互換で非表示に */

/* ============================================================
   IMAGE PLACEHOLDER（症例写真エリア）
   ============================================================ */
.img-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #F0F0F0;
  color: #999;
  font-size: 11px; font-weight: 600;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.5;
  border: 2px dashed #CCC;
}

/* ============================================================
   NAV LOGO MARK
   ============================================================ */
.nav-logo-mark {
  display: inline-flex;
  width: 26px; height: 26px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-size: 13px; font-weight: 900;
  flex-shrink: 0;
}

/* ============================================================
   CASES セクション（背景白・黒ボーダー）
   ============================================================ */
.cases {
  background: var(--white);
  border-bottom: 3px solid var(--black);
}

/* ============================================================
   TRUST SEC（選ばれる4つの理由・黄背景）
   ============================================================ */
.trust-sec {
  position: relative;
  background: var(--white);
  padding: 55px 20px;
  overflow: hidden;
}

/* === 新デザイン：features カード（番号入り斜め背景画像 + タイトル+説明） === */
.trust-sec .trust-cards { margin: 0 -20px; }
.feat-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1560 / 900;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom: 4px;
}
.feat-body {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 6%;
  transform: translateY(-20%);
}
.feat-body h3 {
  font-size: 20px;
  font-weight: 900;
  color: var(--black);
  line-height: 1.5;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.feat-body p {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}
.feat-dp-logo {
  position: absolute;
  top: -5%;
  right: 5%;
  width: 24%;
  max-width: 120px;
  height: auto;
  z-index: 2;
}
.feat-graph {
  position: absolute;
  top: -10%;
  right: 3%;
  width: 45%;
  max-width: 220px;
  height: auto;
  z-index: 2;
}
.feat-badge {
  position: absolute;
  top: -8%;
  right: 4%;
  width: 20%;
  max-width: 100px;
  aspect-ratio: 1;
  background: var(--red);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #fff;
  text-align: center;
  border: 2px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.feat-badge-num {
  font-size: clamp(11px, 3.5vw, 18px);
  font-weight: 900;
  line-height: 1.1;
  font-family: var(--font-en);
  letter-spacing: -0.02em;
}
.feat-badge-num small { font-size: .7em; }
.feat-badge-label {
  font-size: clamp(7px, 2vw, 10px);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.feat-circle-img {
  position: absolute;
  top: -5%;
  right: 5%;
  width: 24%;
  max-width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.feat-icon-wrap {
  position: absolute;
  top: -8%;
  right: 4%;
  width: 20%;
  max-width: 100px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  border: 2px solid var(--red-light);
}
.feat-icon-wrap svg {
  width: 50%;
  height: 50%;
  color: var(--red);
}
.trust-inner {
  position: relative; z-index: 2;
  max-width: 600px; margin: 0 auto;
}
.trust-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feat-notes {
  margin-top: 28px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feat-notes p {
  font-size: 10px;
  color: rgba(0,0,0,.45);
  line-height: 1.7;
}
.trust-card {
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 12px;
  padding: 22px 18px;
}
.trust-card-num {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--red);
  display: block;
  margin-bottom: 8px;
}
.trust-card h3 {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--black);
}
.trust-card p {
  font-size: 13px;
  color: #555;
  line-height: 1.75;
}

/* ============================================================
   ANXIETY（不安解消Q&A・白背景）
   ============================================================ */
.anxiety {
  background: var(--white);
  padding: 55px 20px;
  border-bottom: 3px solid var(--black);
}
.anxiety-inner {
  max-width: 600px;
  margin: 0 auto;
}
.anxiety-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.anxiety-row {
  border: 3px solid var(--black);
  border-radius: 12px;
  overflow: hidden;
}
.anxiety-q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #F5F5F5;
  border-bottom: 2px solid var(--black);
}
.aq-label {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
}
.anxiety-q p {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
  margin: 0;
}
.anxiety-a {
  padding: 14px 18px;
  background: var(--white);
}
.aa-tag {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.anxiety-a p {
  font-size: 13px;
  color: #444;
  line-height: 1.75;
  margin: 0;
}

/* ============================================================
   EMPATHY CARDS（3項目圧縮版）
   ============================================================ */
.empathy-cards {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 28px;
}
.ecard {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.ecard-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--red);
}
.ecard-num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-size: 11px; font-weight: 900;
}
.ecard p {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* ============================================================
   LINE SEC（黒背景）
   ============================================================ */
.line-sec {
  background: var(--black);
  padding: 50px 20px;
  border-top: 3px solid var(--yellow);
  border-bottom: 3px solid var(--yellow);
}
.line-inner {
  max-width: 600px;
  margin: 0 auto;
}
.line-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.line-card {
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.line-card-label {
  flex-shrink: 0;
  background: var(--yellow);
  color: var(--black);
  font-size: 10px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.line-card p {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}
.line-cta {
  text-align: center;
}
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--yellow);
  color: var(--black);
  font-size: 14px;
  font-weight: 900;
  padding: 16px 24px;
  border-radius: var(--r);
  border: 3px solid var(--black);
  width: 100%;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.btn-line:active { transform: scale(0.98); }
.line-note {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 10px;
  text-align: center;
}

/* ============================================================
   CASES SELECT INTRO（選ぶ体験）
   ============================================================ */
.cases-select-intro {
  text-align: center;
  margin-bottom: 16px;
}
.cases-select-img {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  height: auto;
  display: block;
}

/* (PRICE MONTHLY HERO は PRICE ブロックに統合済み) */

/* ============================================================
   FLOW KEY STEP（行動促進ステップ）
   ============================================================ */
.flow-item--key {
  border-color: var(--red) !important;
  background: rgba(220,50,50,.12) !important;
}
.flow-item--key .flow-num {
  color: var(--yellow);
}

/* ============================================================
   DIAMOND PROVIDER バッジ（FV）
   ============================================================ */
.dp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #C9A84C;
  border-radius: 6px;
  padding: 8px 16px;
  margin-bottom: 16px;
}
.dp-diamond {
  color: #C9A84C;
  font-size: 16px;
  flex-shrink: 0;
}
.dp-text {
  font-size: 12px;
  color: rgba(255,255,255,.9);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.dp-text strong {
  color: #C9A84C;
  font-weight: 900;
}

/* ============================================================
   DIAMOND PROVIDER 説明ボックス（ABOUT内）
   ============================================================ */
.dp-explain {
  border: 2.5px solid #C9A84C;
  border-radius: 10px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fdf8ee 0%, #fff 100%);
  margin-bottom: 20px;
}
.dp-explain-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dp-diamond--dark {
  color: #C9A84C;
  font-size: 14px;
}
.dp-explain-head strong {
  font-size: 13px;
  font-weight: 900;
  color: #333;
}
.dp-explain p {
  font-size: 12px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   TRUST CARD FEATURED（Diamond Provider強調カード）
   ============================================================ */
.trust-card--featured {
  border: 3px solid #C9A84C !important;
  background: linear-gradient(135deg, #fdf8ee 0%, #fff 100%) !important;
}
.trust-dp-label {
  display: inline-block;
  background: #C9A84C;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
}

/* ============================================================
   空き枠表示バー
   ============================================================ */
.hero-avail-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--cream-dark);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--black);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.avail-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pulse-green 1.5s infinite;
}
@keyframes pulse-green {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.avail-label { font-weight: 700; color: var(--black); }
.avail-slots { color: #22c55e; font-weight: 700; }
.avail-slots--warn { color: #f59e0b; font-weight: 700; }

/* ============================================================
   格安マウスピース矯正との違い (compare)
   ============================================================ */
.compare {
  background: var(--white);
  padding: 55px 20px;
  position: relative;
  overflow: hidden;
}
.compare::before {
  content: 'VS';
  position: absolute;
  right: -20px; top: 50%;
  transform: translateY(-50%);
  font-size: 140px;
  font-weight: 900;
  color: rgba(216,45,45,0.04);
  pointer-events: none;
}
.compare-inner { max-width: 560px; margin: 0 auto; }
.compare-lead {
  font-size: 14px;
  color: var(--gray);
  margin-top: 8px;
  line-height: 1.7;
}
.compare-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  table-layout: fixed;
}
.compare-table thead th {
  padding: 12px 6px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.compare-table thead th:first-child {
  width: 24%;
  background: #f5f5f5;
  color: var(--gray);
  text-align: left;
  padding-left: 12px;
}
.compare-table thead th.th-rabbit {
  width: 38%;
  background: var(--red);
  color: #fff;
}
.compare-table thead th.th-cheap {
  width: 38%;
  background: #e8e8e8;
  color: #888;
}
.compare-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
}
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-table tbody td {
  padding: 11px 6px;
  font-size: 11px;
  text-align: center;
  vertical-align: middle;
}
.compare-table tbody td:first-child {
  text-align: left;
  padding-left: 12px;
  font-weight: 600;
  color: var(--black);
  background: #fafafa;
}
.compare-table tbody td.td-rabbit {
  background: #fff8f8;
  color: var(--red);
  font-weight: 700;
}
.compare-table tbody td.td-cheap {
  color: #aaa;
}
.compare-note {
  font-size: 11px;
  color: var(--gray);
  line-height: 1.6;
  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
  margin-top: 6px;
}
.compare-note:first-of-type { margin-top: 14px; }

/* ============================================================
   矯正医の紹介 (doctor)
   ============================================================ */
.doctor-sec {
  background: var(--cream);
  padding: 55px 20px;
}
.doctor-inner { max-width: 540px; margin: 0 auto; }
.doctor-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  margin-top: 32px;
}
.doctor-card-top {
  background: #fff;
  padding: 20px 5px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-align: left;
  border-bottom: 1px solid var(--cream-dark);
  gap: 16px;
}
.doctor-photo {
  width: 110px;
  min-height: 140px;
  border-radius: 12px;
  background: var(--cream-dark);
  flex-shrink: 0;
  overflow: hidden;
}
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doctor-name {
  font-size: 25px;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 0;
}
.doctor-name ruby rt { font-size: 11px; font-weight: 400; }
.doctor-card-body {
  padding: 24px 24px;
}
.doctor-creds-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gray);
  margin-bottom: 8px;
}
.doctor-creds {
  list-style: none;
  margin: 0;
}
.doctor-creds li.no-wrap { white-space: nowrap; }
.doctor-creds li {
  font-size: 15px;
  color: var(--gray-dark);
  padding: 7px 0;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.doctor-creds li::before {
  content: '▸';
  color: var(--red);
  flex-shrink: 0;
  font-size: 11px;
  margin-top: 2px;
}
.doctor-message {
  background: var(--cream);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--gray-dark);
  line-height: 1.7;
}

/* ============================================================
   院内ギャラリー (gallery)
   ============================================================ */
.gallery-sec {
  background: var(--white);
  padding: 55px 0;
  overflow: hidden;
}
.gallery-head {
  padding: 0 20px;
  margin-bottom: 28px;
  text-align: center;
}
.gallery-track-wrap { overflow: hidden; }
.gallery-track {
  display: flex;
  gap: 12px;
  padding: 0 20px;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-slide {
  flex-shrink: 0;
  width: 75vw;
  max-width: 280px;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  background: #2a2a2a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #666;
  text-align: center;
  gap: 6px;
}
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.gallery-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background 0.3s;
}
.gallery-dot.active { background: var(--red); }

/* ============================================================
   アクセス・医院情報 (access)
   ============================================================ */
.access-sec {
  position: relative;
  background: var(--white);
  padding: 55px 20px;
  overflow: hidden;
}
.access-deco-img {
  position: absolute;
  right: -20px;
  top: 40px;
  width: 160px;
  height: auto;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.access-inner {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0 auto;
}
.access-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  margin-top: 28px;
}
.access-map {
  width: 100%;
  height: 200px;
  background: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 13px;
}
.access-map iframe { width: 100%; height: 200px; border: none; }
.access-info {
  padding: 20px 20px;
}
.access-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 12px;
}
.access-rows {}
.access-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
}
.access-row:last-child { border-bottom: none; }
.access-row-icon {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  display: flex;
}
.access-row-body { color: var(--gray-dark); line-height: 1.5; }
.access-hours-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 12px;
  color: var(--gray-dark);
  margin-top: 4px;
}
.access-hours-day { font-weight: 700; color: var(--black); }
.access-hours-day--off { color: var(--gray); }
.access-hours-off { color: var(--gray); }
.access-tag {
  display: inline-block;
  font-size: 10px;
  background: var(--red-light);
  color: var(--red);
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 700;
}


/* ============================================================
   ギャラリー無限ループ（marquee style）
   ============================================================ */
.gallery-loop-wrap {
  overflow: hidden;
  position: relative;
}
.gallery-loop-track {
  display: flex;
  gap: 12px;
  will-change: transform;
  width: max-content;
}
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.88);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  line-height: 1;
}
.gallery-btn--prev { left: 8px; }
.gallery-btn--next { right: 8px; }

/* ============================================================
   フロー 3ステップ（横並び・1画面）
   ============================================================ */
.flow-3step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  position: relative;
}
.flow-3step::before {
  display: none;
}
.f3-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding: 20px 16px;
  background: rgba(255,255,255,0.55);
  border-radius: 12px;
  overflow: hidden;
}
.f3-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.f3-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}
.f3-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.f3-num {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid rgba(255,255,255,0.6);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.f3-step--accent .f3-num {
  background: var(--gold);
  color: var(--black);
}
.f3-label {
  font-size: 25px;
  font-weight: 800;
  color: var(--black);
  line-height: 1.4;
  text-align: center;
}
.f3-sub {
  font-size: 12px;
  color: rgba(0,0,0,0.7);
  line-height: 1.5;
  text-align: center;
}
/* Step01 詳細リスト */
.f3-detail-grid {
  display: flex;
  gap: 10px;
}
.f3-detail-col {
  flex: 1;
  background: rgba(255,255,255,0.75);
  border-radius: 8px;
  padding: 10px 12px;
}
.f3-detail-head {
  font-size: 11px;
  font-weight: 800;
  color: var(--red);
  line-height: 1.4;
  margin-bottom: 6px;
  text-align: center;
}
.f3-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  color: var(--black);
  line-height: 1.7;
}
.f3-detail-list li {
  padding-left: 1em;
  position: relative;
}
.f3-detail-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.f3-badge {
  grid-column: 2;
  grid-row: 2;
  display: inline-block;
  font-size: 10px;
  background: rgba(216,45,45,0.12);
  color: var(--red);
  border: 1px solid rgba(216,45,45,0.5);
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 700;
  align-self: center;
  justify-self: start;
}

/* ============================================================
   支払い方法セクション
   ============================================================ */
.payment-sec {
  position: relative;
  background: var(--white);
  padding: 64px 20px;
  overflow: hidden;
}
.payment-deco-img {
  position: absolute;
  right: -20px;
  top: 40px;
  width: 200px;
  height: auto;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.payment-inner {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0 auto;
}
.payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
.payment-card {
  background: var(--cream);
  border-radius: 14px;
  padding: 18px 16px;
  border: 1px solid rgba(0,0,0,0.06);
}
.payment-card--wide {
  grid-column: 1 / -1;
}
.payment-card-icon {
  margin-bottom: 12px;
}
.payment-card-icon img {
  width: 44px;
  height: auto;
  display: block;
}
.payment-card-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 4px;
}
.payment-card-desc {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.6;
}
.payment-card-badge {
  display: inline-block;
  font-size: 10px;
  background: var(--red-light);
  color: var(--red);
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 700;
  margin-bottom: 6px;
}
.payment-note {
  font-size: 11px;
  color: var(--gray);
  margin-top: 14px;
  line-height: 1.7;
  text-align: center;
}

/* ============================================================
   PAYMENT 支払い方法
   ============================================================ */
.pay-opt-a { display: flex; flex-direction: column; gap: 12px; }

/* デンタルローン（主役カード） */
.poa-loan {
  background: var(--red);
  border-radius: 16px;
  padding: 22px 20px;
  color: var(--white);
}
.poa-loan-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.poa-loan-icon {
  width: 48px;
  height: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  margin-top: 2px;
}
.poa-loan-name {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  margin-bottom: 8px;
}
.poa-loan-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}
.poa-loan-from {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
}
.poa-loan-price {
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.poa-loan-price strong {
  font-size: 44px;
  letter-spacing: -0.04em;
}
.poa-loan-suffix { font-size: 20px; font-weight: 700; margin-left: 2px; }
.poa-loan-desc {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.8);
  margin-bottom: 4px;
}
.poa-loan-note {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.5);
  line-height: 1.4;
}

/* タグ（共通） */
.poa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.poa-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
  background: rgba(255,255,255,.2);
  color: var(--white);
}
.poa-tag--warn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.4);
}
.poa-tags--light .poa-tag { background: var(--white); color: var(--black); }
.poa-tag--ok {
  background: #dcfce7;
  color: #166534;
}

/* サブカード（クレカ・銀行） */
.poa-sub-grid { display: flex; flex-direction: column; gap: 10px; }
.poa-sub-card {
  background: var(--cream);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1.5px solid #e0d8cf;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.poa-sub-card-icon { flex-shrink: 0; width: 44px; }
.poa-sub-card-icon img { width: 44px; height: auto; display: block; }
.poa-sub-card-body { flex: 1; min-width: 0; }
.poa-sub-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 6px;
}
.poa-sub-desc {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.6;
  margin: 6px 0 0;
}

/* クレジットカードロゴ */
.credit-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: var(--gray-dark);
  background: #ede8e1;
  border: 1px solid #d0c8be;
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
  margin-top: 10px;
  margin-bottom: 6px;
}
.credit-logos {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
}

/* ============================================================
   空き枠カレンダーUI
   ============================================================ */
.avail-cal-wrap {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  margin-bottom: 14px;
}
.avail-cal-header {
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.avail-cal-header::before { content: '📅'; font-size: 14px; }
.avail-cal-body {
  padding: 14px 12px 10px;
}
.avail-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.avail-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.avail-day-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--black);
}
.avail-day-date.sun { color: #e33; }
.avail-day-date.sat { color: #3372c4; }
.avail-day-dow {
  font-size: 10px;
  color: var(--gray);
}
.avail-day-dow.sun { color: #e33; }
.avail-day-dow.sat { color: #3372c4; }
.avail-day-cell {
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1.5px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  background: #fafafa;
  color: var(--gray-light);
}
.avail-day-cell.ok {
  border-color: #e0478c;
  color: #e0478c;
  background: #fff;
  font-size: 20px;
}
.avail-day-cell.warn {
  border-color: #f59e0b;
  color: #f59e0b;
  background: #fffdf7;
  font-size: 14px;
}
.avail-cal-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 10px;
  color: var(--gray);
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
  margin-top: 4px;
}
.avail-leg-item { display: flex; align-items: center; gap: 3px; }
.avail-cal-link {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #e0478c;
  text-decoration: none;
  margin-left: auto;
}
.avail-cal-link:hover { text-decoration: underline; }

/* ============================================================
   FV直下フック症例
   ============================================================ */
.hook-cases {
  background: var(--white);
  padding: 48px 0 44px;
}
.hook-cases-inner { max-width: 540px; margin: 0 auto; text-align: center; padding: 0 20px; }
.hook-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hook-label::before { display: none; }
.hook-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: 20px;
}
.hook-title-em { color: var(--red); }
.hook-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 -20px;
}
.hook-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.hook-case-img {
  width: 100%;
  display: block;
  margin-top: 12px;
}

/* KV下症例：画像1枚→before/after縦並び＋期間/通院バッジ（CSS化）2026.06 */
.hook-card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 16px 16px 0;
}
.hook-stat-chip {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border-radius: 6px;
  padding: 3px 9px;
  letter-spacing: 0.04em;
}
.hook-stat-big {
  font-size: 23px;
  font-weight: 900;
  color: var(--black);
  font-family: var(--font-en);
  line-height: 1;
  margin-right: 4px;
}
.hook-stat-big small { font-size: 13px; font-family: var(--font-ja); font-weight: 700; margin-left: 1px; }

.hook-ba-v {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 0;
}
.hook-ba-item { width: 100%; }
/* Before/After ラベルは写真の左上にオーバーレイ */
.hook-ba-lbl {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 3px 10px;
  border-radius: 6px;
}
.hook-ba-lbl--b { background: rgba(50,50,50,0.85); }
.hook-ba-lbl--a { background: var(--red); }
.hook-ba-box {
  position: relative;
  width: 100%;
  max-width: 340px;        /* FLOWの写真幅に合わせて少し絞る */
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #f2f2f2;
}
.hook-ba-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hook-ba-sep { color: var(--red); font-size: 18px; line-height: 1; }

/* 上部：info左 + Before右 */
.hook-card-top {
  display: flex;
  align-items: stretch;
  padding: 14px 14px 12px;
}
.hook-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-right: 12px;
}
.hook-stat-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hook-stat-lbl {
  font-size: 15px;
  color: var(--black);
  width: 35px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.hook-stat-val {
  font-size: 35px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  letter-spacing: 1px;
}
.hook-stat-unit {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0;
}
.hook-before-wrap {
  width: 50%;
  flex-shrink: 0;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  align-self: stretch;
}
.hook-before-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 下部：After大きく（左右paddingでBeforeの端に揃える） */
.hook-after-wrap {
  padding: 10px 16px 0;
  box-sizing: border-box;
}
.hook-after-inner {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.hook-after-inner img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* Before / After ラベル */
.hook-img-lbl {
  position: absolute;
  bottom: 7px;
  right: 9px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
}
.hook-img-lbl--b {
  background: rgba(0,0,0,0.45);
  color: #fff;
}
.hook-img-lbl--a {
  background: var(--red);
  color: #fff;
}

.hook-card-tag {
  display: inline-block;
  margin: 0 0 10px 0;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 4px;
  padding: 3px 10px;
}
.hook-disclaimer {
  font-size: 8px;
  color: rgba(0,0,0,0.4);
  padding: 20px 40px 12px;
  line-height: 1.6;
  text-align: left;
}
.hook-ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 16px;
}
.hook-ba-col { display: flex; flex-direction: column; gap: 6px; }
/* 旧 .hook-ba-lbl の色指定は撤去（未使用グリッド設計の名残。現行は写真左上の白オーバーレイラベルを使用） */
.hook-ba-img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 10px;
  background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #aaa; text-align: center;
  overflow: hidden;
}
.hook-ba-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hook-ba-img.before-img { background: #e8e8e8; }
.hook-ba-img.after-img  { background: #F5EDDA; }
.hook-ba-arr {
  font-size: 22px;
  color: var(--red);
  font-weight: 900;
  flex-shrink: 0;
}
.hook-card-foot {
  padding: 8px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hook-main-stats {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.hook-duration {
  display: flex;
  align-items: baseline;
  gap: 1px;
  line-height: 1;
}
.hook-dur-num {
  font-size: 52px;
  font-weight: 900;
  color: var(--red);
  letter-spacing: -0.03em;
  line-height: 1;
}
.hook-dur-unit {
  font-size: 20px;
  font-weight: 900;
  color: var(--red);
}
.hook-dur-after {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  margin-left: 5px;
}
.hook-visits {
  display: flex;
  align-items: baseline;
  gap: 1px;
  line-height: 1;
}
.hook-visit-num {
  font-size: 40px;
  font-weight: 900;
  color: var(--black);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hook-visit-unit {
  font-size: 16px;
  font-weight: 900;
  color: var(--black);
}
.hook-visit-after {
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,0.4);
  margin-left: 4px;
}
.hook-cost {
  font-size: 15px;
  color: var(--black);
  text-align: right;
  padding: 8px 16px 14px;
  display: block;
}
.hook-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hook-chip {
  font-size: 10px;
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: 20px;
  padding: 2px 9px;
  color: var(--gray-dark);
}
.hook-chip b { color: var(--red); }
.hook-note {
  font-size: 10px;
  color: var(--gray-light);
  margin-top: 12px;
  text-align: center;
}
.hook-cta {
  display: block;
  text-align: center;
  margin-top: 20px;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.hook-cta::after { content: ' →'; }

/* 料金テーブル 補足テキスト */
.pt-sub {
  display: block;
  font-size: 10px;
  color: var(--gray);
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.5;
}

/* ============================================================
   フロー内 当日割クーポンカード
   ============================================================ */
/* 当日同時予約特典 白抜きパネル（Step 02内に配置） */
.flow-deal-img {
  width: 100%;
  display: block;
}
.flow-deal-panel {
  background: var(--white);
  color: var(--black);
  padding: 16px 16px 14px;
}
.flow-deal-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 8px;
}
.flow-deal-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 8px;
  line-height: 1.45;
}
.flow-deal-prices {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.flow-deal-before {
  font-size: 11px;
  color: #aaa;
  text-decoration: line-through;
  font-weight: 500;
}
.flow-deal-arrow { font-size: 14px; color: var(--red); }
.flow-deal-after {
  font-size: 22px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.flow-deal-after small {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-dark);
}
.flow-deal-save {
  background: var(--gold);
  color: var(--black);
  font-size: 11px;
  font-weight: 900;
  border-radius: 20px;
  padding: 2px 10px;
}
.flow-deal-note {
  font-size: 10px;
  color: var(--gray);
  margin-top: 8px;
  line-height: 1.5;
}

/* ============================================================
   医療費控除アコーディオン
   ============================================================ */
.tax-deduction {
  margin-top: 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid #e0e0e0;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.tax-deduction summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--black);
}
.tax-deduction summary::-webkit-details-marker { display: none; }
.tax-deduction-icon {
  width: 32px; height: 32px;
  background: var(--cream);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.tax-deduction-icon--yen {
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
}
.tax-deduction-icon--yen::before {
  content: '¥';
}
.tax-deduction-label { flex: 1; }
.tax-deduction-label small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--gray);
  margin-top: 1px;
}
.tax-deduction-chevron {
  font-size: 12px;
  color: var(--gray);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.tax-deduction[open] .tax-deduction-chevron {
  transform: rotate(180deg);
}
.tax-deduction-body {
  padding: 0 16px 16px;
  border-top: 1px solid #f0f0f0;
}
.tax-deduction-body p {
  font-size: 13px;
  color: var(--gray-dark);
  line-height: 1.8;
  margin-top: 12px;
}
.tax-deduction-eg {
  background: var(--cream);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--gray-dark);
  line-height: 1.8;
}
.tax-deduction-eg strong { color: var(--red); }
.tax-deduction-note {
  font-size: 10px;
  color: var(--gray);
  margin-top: 8px;
  line-height: 1.6;
}
.tax-deduction-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Hero CTA 画像ボタン（button_counseling01.png 使用）
   ============================================================ */
.hero-cta-img {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  transition: opacity .2s, transform .2s;
}
.hero-cta-img:hover { opacity: .92; transform: translateY(-2px); }
.hero-cta-img img {
  width: 100%;
  height: auto;
  display: block;
  animation: double_click_effect 1.2s infinite;
}
.hero-cta-img:active img { animation-play-state: paused; }

/* ============================================================
   CTAボタン 新構成（バッジ＋ボタン）
   ============================================================ */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold);
  color: var(--black);
  font-size: 11px;
  font-weight: 900;
  border-radius: 20px 20px 0 0;
  padding: 4px 16px;
  letter-spacing: 0.04em;
}
.cta-badge::before { content: '✦'; font-size: 9px; }
.btn-red-lg, .btn-white-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  padding: 18px 24px;
  border-radius: 0 0 14px 14px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1.2;
}
.btn-red-lg {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 24px rgba(216,45,45,0.35);
}
.btn-white-lg {
  background: #fff;
  color: var(--red);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
.btn-red-lg:active, .btn-white-lg:active {
  opacity: 0.85;
  transform: translateY(1px);
}
/* 緑CTA（画像ボタンをHTML化。2026.06）— .btn-red-lg と同形・色だけ緑 */
.btn-green-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  padding: 18px 24px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1.2;
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 24px rgba(22,163,74,0.35);
  animation: double_click_effect 1.2s infinite;
}
.btn-green-lg:active { opacity: 0.85; transform: translateY(1px); animation-play-state: paused; }
.btn-green-lg .cta-arrow { font-size: 14px; }
/* CTAブロックを全幅・中央寄せに（親が左寄せでも崩れないように） */
.hero-cta-wrap .cta-block,
.mid-cta .cta-block,
.booking-btns .cta-block { width: 100%; }

/* 「＼来院当日3Dシミュレーション体験付き／」CTA上のキャッチ 2026.06 */
.cta-catch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 900;
  color: var(--black);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.cta-catch-bar {
  color: var(--green);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.cta-catch-em { color: var(--green); }

/* 最下部CTA（booking）は赤背景。緑ボタンが埋もれるため白ボタン＋緑文字で視認性確保 2026.06 */
.booking-btns .btn-green-lg {
  background: #fff;
  color: var(--green);
  box-shadow: 0 8px 26px rgba(0,0,0,0.30);
}
.booking-btns .btn-green-lg:active { background: #f2f2f2; }
.booking-btns .cta-catch { color: #fff; }
.booking-btns .cta-catch-bar,
.booking-btns .cta-catch-em { color: var(--gold); }
/* バッジ無しで単独配置する場合（booking等）は四隅を丸める */
.cta-badge--green { background: var(--green); color: #fff; }
.cta-badge--green::before { content: '✦'; }
@keyframes double_click_effect {
  0%   { transform: scale(1); }
  5%   { transform: scale(0.96); }
  10%  { transform: scale(1); }
  16%  { transform: scale(0.96); }
  22%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ============================================================
   FV直下：価格・期間・通院回数の要点 ＋ 16,500円OFFクーポン（2026.06）
   ※数値は既存データ（料金表・症例01）から仮置き。要確認
   ============================================================ */
.fv-band { background: var(--cream); padding: 18px 20px 24px; }

.fv-coupon { text-align: center; }

/* 見出しリボン「このページからご予約の方全員に」（両端を山形にカット） */
.fv-coupon-ribbon-head {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 26px;
  margin-bottom: 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%, 11px 50%);
}
.fv-coupon-ribbon-head strong { font-size: 16px; color: var(--gold); margin: 0 2px; }

/* クーポンカード（左上に斜め「特典！」リボン／下線付き見出し／大きな割引額）2026.06 */
.fv-coupon-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 14px;
  padding: 22px 16px 20px;
  box-shadow: 0 6px 18px rgba(22,163,74,0.18);
}
.fv-coupon-corner {
  position: absolute;
  top: 16px;
  left: -38px;
  width: 150px;
  transform: rotate(-45deg);
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  padding: 5px 0;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.fv-coupon-cond {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  border-bottom: 2px solid var(--green);
  padding-bottom: 3px;
  margin-bottom: 10px;
}
.fv-coupon-amount {
  font-size: 46px;
  font-weight: 900;
  color: var(--green);
  font-family: var(--font-en);
  line-height: 1;
}
.fv-coupon-yen { font-size: 24px; font-family: var(--font-ja); margin-left: 2px; }
.fv-coupon-off { font-size: 22px; font-weight: 900; font-family: var(--font-ja); margin-left: 4px; }

.fv-coupon-note { font-size: 10px; color: var(--gray); margin-top: 10px; line-height: 1.5; text-align: left; }
/* クーポン直下に置くCTA（KV→クーポン→CTA） */
.fv-cta { margin-top: 18px; align-items: center; }

/* ============================================================
   ベネフィット（間接的＝歯並びが整った先の未来）「思い切り笑える毎日へ。」2026.06
   ============================================================ */
.benefit { background: var(--cream); padding: 52px 20px 56px; }
.benefit-inner { max-width: 480px; margin: 0 auto; }
.benefit-lead {
  font-size: 14px; color: var(--gray-dark); line-height: 1.7; margin-top: 10px;
}
.benefit-list {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.benefit-item {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.benefit-icon {
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: #E9F7EF;
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
}
.benefit-icon svg { width: 26px; height: 26px; display: block; }
.benefit-body { flex: 1; }
.benefit-title { font-size: 16px; font-weight: 900; color: var(--black); }
.benefit-text { font-size: 13px; color: var(--gray-dark); line-height: 1.6; margin-top: 3px; }
.mid-cta {
  background: var(--white);
  padding: 32px 24px;
  text-align: center;
}
.mid-cta .cta-sub {
  text-align: center;
}
.cta-sub {
  font-size: 11px;
  color: var(--gray);
  margin-top: 8px;
  letter-spacing: 0.04em;
  text-align: center;
}
.cta-sub--dark {
  color: var(--gray);
}

/* ============================================================
   固定ボトムナビ（dock再設計）
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 58px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.bottom-nav-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
  text-decoration: none;
}
.bottom-nav-logo-sub {
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  font-weight: 400;
}
.bottom-nav-logo-main {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
}
.bottom-nav-cta {
  flex: 1;
  display: flex;
  justify-content: center;
}
.bottom-nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  border-radius: 20px;
  padding: 8px 16px;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(216,45,45,0.45);
  transition: opacity 0.2s;
}
.bottom-nav-cta-btn:active { opacity: 0.8; }
.bottom-nav-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
}
.bottom-nav-menu-btn span {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
  transform-origin: center;
}
.bottom-nav-menu-btn.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.bottom-nav-menu-btn.open span:nth-child(2) { opacity: 0; }
.bottom-nav-menu-btn.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.bottom-nav-menu-label {
  font-size: 9px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}

/* MENUドロワー／オーバーレイ 撤去済み（固定ヘッダーごと削除 2026.06） */

/* ============================================================
   BRAND SECTION（さくらちゃん・ラッピングカー・Instagram）
   ============================================================ */
.brand-sec {
  background: var(--red-light);
  padding: 60px 20px 20px;
  position: relative;
}
.brand-sec::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0; right: 0;
  height: 6px;
  background: var(--red-light);
  z-index: 2;
}
.brand-inner {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* さくらちゃん */
.brand-chara {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.brand-chara-img { flex-shrink: 0; }
.brand-chara-full {
  width: 100px;
  height: auto;
  display: block;
}
.brand-chara-name {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.4;
}
.brand-chara-name strong {
  font-size: 18px;
  color: var(--black);
  display: block;
  margin-top: 2px;
}
.brand-chara-desc {
  font-size: 12px;
  color: var(--gray);
  margin-top: 6px;
  line-height: 1.6;
}

/* ラッピングカー */
.brand-car { text-align: center; }
.brand-car-img { margin-bottom: 12px; }
.brand-car-caption {
  font-size: 13px;
  color: var(--gray-dark);
  line-height: 1.6;
}

/* Instagram */
.brand-insta-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--black);
}
.brand-insta-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-insta-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
  line-height: 1.2;
}
.brand-insta-desc {
  font-size: 13px;
  color: var(--gray-dark);
  line-height: 1.7;
  text-align: center;
  margin-bottom: 14px;
}
.brand-insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.brand-insta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  background: var(--red);
  padding: 14px 20px;
  border-radius: var(--r);
  transition: background .15s;
  text-decoration: none;
}
.brand-insta-link:active {
  background: var(--red-dark);
}

/* body padding 調整 */
body { padding-bottom: 58px; }

/* ============================================================
   固定ヘッダーナビ／MENUドロワー 撤去済み（2026.06）
   ============================================================ */

/* ============================================================
   セクションナビ（未使用・撤去済み）
   ============================================================ */
/* .sec-nav は未使用のため撤去（2026.06） */

/* ============================================================
   TOPへ戻るボタン 撤去済み（広告LPのため。2026.06）
   ============================================================ */

/* body余白：固定ヘッダー撤去で上余白0。下部フロートCTAは#booking手前で隠れるため下余白も0 2026.06 */
body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   比較案ラベル（費用セクション3案共通）
   ============================================================ */
.compare-label {
  background: #222;
  color: rgba(255,255,255,.88);
  font-size: 11px;
  font-weight: 700;
  padding: 10px 20px;
  text-align: center;
  letter-spacing: .06em;
}

/* ============================================================
   案A / 案B 共通：シミュレーター UI
   ============================================================ */
.sim-wrap {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  margin-top: 14px;
}
.sim-step {
  padding: 18px 20px;
  border-bottom: 1px solid #f0ede7;
}
.sim-step-ttl {
  font-size: 12px;
  font-weight: 800;
  color: var(--gray-dark);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sim-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* 矯正タイプ カード */
.sim-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.sim-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.sim-card input { display: none; }
.sim-card.is-on { border-color: var(--red); background: #fff3f3; }
.sim-card-name { font-size: 11px; font-weight: 700; color: var(--black); line-height: 1.4; }
.sim-card-name small { font-size: 10px; font-weight: 400; color: var(--gray); }
.sim-card-price { font-size: 10px; font-weight: 800; color: var(--red); }

/* 来院・調整方法 トグル */
.sim-toggles { display: flex; flex-direction: column; gap: 8px; }
.sim-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sim-toggle input { display: none; }
.sim-toggle.is-on { border-color: var(--red); background: #fff3f3; }
.sim-toggle::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--gray-light);
  background: #fff;
  flex-shrink: 0;
  transition: all .15s;
}
.sim-toggle.is-on::before {
  border-color: var(--red);
  background: var(--red);
  box-shadow: inset 0 0 0 3px #fff;
}
.sim-toggle-name { font-size: 13px; font-weight: 800; color: var(--black); margin-bottom: 2px; }
.sim-toggle-badge {
  font-size: 9px; font-weight: 800;
  background: var(--red); color: #fff;
  border-radius: 4px; padding: 1px 5px;
  margin-left: 4px; vertical-align: middle;
}
.sim-toggle-sub { font-size: 11px; color: var(--gray); }

/* 抜歯 ピル選択 */
.sim-ext-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sim-ext {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s, background .15s, color .15s;
}
.sim-ext input { display: none; }
.sim-ext.is-on { border-color: var(--red); background: #fff3f3; color: var(--red); }
.sim-ext-note { font-size: 10px; color: var(--gray); margin-top: 8px; }

/* 結果エリア（赤背景） */
.sim-result { background: var(--red); padding: 20px; }
.sim-result-header {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.6);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 10px;
}
.sim-rrow {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sim-rrow small { font-size: 10px; color: rgba(255,255,255,.45); margin-left: 3px; }
.sim-rrow span:last-child { font-weight: 700; color: var(--white); }
.sim-result-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.sim-result-total span:first-child { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); }
.sim-result-total span:last-child {
  font-size: 24px; font-weight: 900;
  color: var(--white); font-family: var(--font-en);
}
.sim-result-monthly { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.sim-monthly-from { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); }
.sim-monthly-amount {
  font-size: 40px; font-weight: 900;
  color: var(--white); font-family: var(--font-en); line-height: 1;
}
.sim-result-monthly small { font-size: 10px; color: rgba(255,255,255,.5); }
.sim-result-note {
  display: block;
  font-size: 10px; color: rgba(255,255,255,.4);
  margin-top: 10px; line-height: 1.4;
}
/* シミュレーター結果：セクション見出し */
.sim-result-sublabel {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--red);
  background: rgba(255,255,255,.92);
  border-radius: 4px;
  padding: 4px 10px;
  margin: 16px 0 8px;
}
.sim-result-sublabel:first-of-type { margin-top: 0; }
/* 割引行 */
.sim-rrow--discount span:last-child { color: #6ec97a !important; }
/* ローン申請金額行 */
.sim-rrow--loan-total {
  border-top: 1px solid rgba(255,255,255,.2);
  margin-top: 4px; padding-top: 6px;
  font-weight: 800;
}
.sim-rrow--loan-total span:last-child { font-size: 14px; }
/* レンズ節約ノート：白カード＋暗色文字 */
.sim-lens-note {
  background: rgba(255,255,255,.95);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px; color: var(--black);
  line-height: 1.7; margin-top: 10px;
}
/* レンズノート内 注記 */
.sim-lens-note-sub {
  display: block;
  font-size: 10px;
  color: var(--gray-dark);
  margin-top: 8px;
  line-height: 1.6;
}
/* レンズトグル内 節約テキスト */
.sim-toggle-saving {
  font-size: 10px; color: #6ec97a; margin-top: 3px; font-weight: 700;
}
/* PBM ステップ補足 */
.sim-step-opt {
  font-size: 10px; font-weight: 400;
  background: rgba(216,45,45,.15); color: var(--red);
  border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
.sim-step-desc {
  font-size: 11px; color: var(--gray-dark); line-height: 1.6; margin-bottom: 8px;
}

/* ============================================================
   案B：費用サマリー + シミュレーターボタン
   ============================================================ */
.pb-price-list {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e8e0d8;
  margin-top: 14px;
}
.pb-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #f0ede7;
  gap: 8px;
}
.pb-price-row:last-child { border-bottom: none; }
.pb-price-row--featured { background: #fff5f5; }
.pb-price-row--sub { background: #fafaf8; }
.pb-price-row--opt {
  background: #f5f8ff;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.pb-price-row--opt .pb-price-opt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pb-price-opt-text {
  font-size: 11px;
  color: var(--gray-dark);
  line-height: 1.6;
}
.pb-price-opt-note {
  font-size: 10px;
  color: var(--gray);
  line-height: 1.5;
}
.pb-price-section {
  padding: 5px 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray);
  background: #f0ede7;
  border-bottom: 1px solid #e8e0d8;
}
.pb-price-name { font-size: 13px; font-weight: 700; color: var(--black); }
.pb-price-name small { display: block; font-size: 10px; font-weight: 400; color: var(--gray); margin-top: 2px; }
.pb-price-row--sub .pb-price-name { font-size: 12px; color: var(--gray-dark); }
.pb-price-amount {
  font-size: 15px; font-weight: 800; color: var(--red);
  font-family: var(--font-en); white-space: nowrap; flex-shrink: 0;
}
.pb-price-row--sub .pb-price-amount { font-size: 13px; }
.pb-price-amount del { display: block; font-size: 10px; font-weight: 400; color: var(--gray); text-decoration: line-through; }

/* 月額主軸表示（③費用表記改善） */
.pb-price-monthly-wrap { text-align: right; flex-shrink: 0; }
.pb-price-monthly {
  font-size: 20px; font-weight: 900; color: var(--red);
  font-family: var(--font-en); line-height: 1.2;
}
.pb-price-monthly small { font-size: 13px; }
.pb-monthly-label {
  font-size: 11px; font-weight: 700;
  font-family: var(--font-ja); letter-spacing: 0.05em;
}
/* §2: 総額をさらに控えめに（月々を主役に） 2026.06 */
.pb-price-total { font-size: 9px; color: var(--gray-light); margin-top: 2px; }
.pb-price-total small { font-size: 8px; }
.price-monthly-note {
  font-size: 10px; color: var(--gray); margin-top: 8px;
  padding: 0 4px; line-height: 1.6;
}

.pb-sim-btn {
  width: 100%; padding: 16px; margin-top: 14px;
  background: var(--red); color: #fff;
  font-size: 14px; font-weight: 800;
  border: none; border-radius: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity .2s;
}
.pb-sim-btn:active { opacity: .85; }
.poa-loan .pb-sim-btn { background: #fff; color: var(--red); }
.poa-loan .pb-sim-btn:active { opacity: .9; }
.poa-loan .sim-ext { color: var(--black); }
.poa-loan .sim-ext.is-on { color: var(--red); }
.poa-loan .sim-result { background: #fce8e8; }
.poa-loan .sim-result-header { color: rgba(0,0,0,.4); }
.poa-loan .sim-rrow { color: var(--gray-dark); border-bottom-color: rgba(0,0,0,.07); }
.poa-loan .sim-rrow small { color: var(--gray); }
.poa-loan .sim-rrow span:last-child { color: var(--black); }
.poa-loan .sim-result-total { border-bottom-color: rgba(0,0,0,.1); }
.poa-loan .sim-result-total span:first-child { color: var(--gray-dark); }
.poa-loan .sim-result-total span:last-child { color: var(--black); }
.poa-loan .sim-monthly-from { color: var(--gray-dark); }
.poa-loan .sim-monthly-amount { color: var(--red); }
.poa-loan .sim-result-monthly small { color: var(--gray); }
.poa-loan .sim-rrow--sub span { color: var(--gray-dark); }
.poa-loan .sim-rrow--total span:last-child { color: var(--black) !important; }
.poa-loan .sim-result-note { color: rgba(0,0,0,.4); }
.pb-sim-area { display: none; }
.pb-sim-area.is-open { display: block; }

/* ============================================================
   案C：コンパクト整理 費用テーブル
   ============================================================ */
.pc-fee-table {
  margin-top: 14px;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e8e0d8;
}
.pc-fee-sec-head {
  background: var(--cream-dark);
  padding: 7px 16px;
  font-size: 10px; font-weight: 700;
  color: var(--gray-dark); letter-spacing: .04em;
}
.pc-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid #f0ede7;
  gap: 8px;
}
.pc-fee-row:last-child { border-bottom: none; }
.pc-fee-name { font-size: 13px; font-weight: 700; color: var(--black); }
.pc-fee-name small { display: block; font-size: 10px; font-weight: 400; color: var(--gray); margin-top: 2px; }
.pc-fee-amount {
  font-size: 14px; font-weight: 800; color: var(--red);
  font-family: var(--font-en); white-space: nowrap; flex-shrink: 0; text-align: right;
}
.pc-fee-amount del { display: block; font-size: 10px; font-weight: 400; color: var(--gray); text-decoration: line-through; }
.pc-fee-row--optional .pc-fee-name { color: var(--gray-dark); font-size: 12px; }
.pc-fee-row--optional .pc-fee-amount { color: var(--gray-dark); font-size: 12px; }

/* ============================================================
   シミュレーター追加UI（支払い回数・スライダー・小計行）
   ============================================================ */

/* 支払い回数ボタン */
.sim-term-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sim-term-btn {
  padding: 7px 12px;
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-dark);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  font-family: var(--font-ja);
}
.sim-term-btn.is-on {
  border-color: var(--red);
  background: #fff3f3;
  color: var(--red);
}

/* 通院回数スライダー */
.sim-visit-wrap {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--cream);
  border-radius: 12px;
}
.sim-visit-lbl {
  font-size: 11px;
  color: var(--gray-dark);
  margin-bottom: 8px;
}
.sim-visit-lbl strong { color: var(--red); }
.sim-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 3px;
  background: #e0d8cf;
  border-radius: 2px;
  outline: none;
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(216,45,45,.35);
}
.sim-slider-minmax {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--gray);
  margin-top: 4px;
}

/* 結果内 小計行（金利・総額） */
.sim-rrow--sub {
  border-bottom: none;
  padding: 4px 0;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}
.sim-rrow--sub span:last-child { font-weight: 600; color: rgba(255,255,255,.75); }
.sim-rrow--total {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.8) !important;
}
.sim-rrow--total span:last-child { color: var(--white) !important; font-size: 13px; }
.sim-rrow--grand-total {
  margin-top: 10px;
  font-weight: 800;
}
.sim-rrow--grand-total span:last-child { font-size: 15px; color: #fff; }

/* ============================================================
   PC版フォントサイズ固定
   body が max-width:480px 固定のため、vw基準の font-size が
   PC広幅画面で過大になる問題を解消。SP（390px）相当値に固定。
   ============================================================ */
@media (min-width: 481px) {
  .section-h2        { font-size: 30px; }
  .section-deco-text { font-size: 70px; }
  .hero-title        { font-size: 45px; }
  .hero-title-location { font-size: 14px; }
  .hero-title-sub    { font-size: 18px; }
  .er-text           { font-size: 20px; }
  .stat-num          { font-size: 33px; }
  .final-cta-title   { font-size: 30px; }
  .sf-title          { font-size: 22px; }
  .feat-badge-num    { font-size: 14px; }
  .feat-badge-label  { font-size: 8px; }
}

/* ============================================================
   LP POPUP（1分後表示）
   ============================================================ */
/* ============================================================
   フロートCTA（常設スリムバー）
   旧 .lp-popup（60秒モーダル）を画面下固定の後出しCTAへ転用。2026.06
   表示制御は bold-script.js の tick()（.is-on の付与）に統合。
   ============================================================ */
.lp-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 90;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.lp-popup.is-on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 769px) {
  .lp-popup {
    left: 50%;
    right: auto;
    width: 480px;
    transform: translateX(-50%) translateY(100%);
  }
  .lp-popup.is-on {
    transform: translateX(-50%) translateY(0);
  }
}
.lp-popup-card {
  background: var(--white);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  padding: 8px 14px 10px;
  text-align: center;
}
.lp-popup-lead {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--black);
  margin: 0 0 6px;
}
.lp-popup-lead strong {
  color: var(--red);
}
.lp-popup-btn {
  display: block;
  background: var(--green);
  color: var(--white);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: var(--r);
  letter-spacing: 0.02em;
}
.lp-popup-btn:active { opacity: 0.85; }