/* ==========================================================================
   KUROSAKI DENTAL CLINIC - SECOND TEETH LP
   Visual-First Editorial & Responsive Design System
   Adhering to /modern-web-guidance & /ui-ux-pro-max
   ========================================================================== */

:root {
  /* Editorial Color Palette */
  --c-navy-950: #060e1a;
  --c-navy-900: #0a1728;
  --c-navy-850: #0f2038;
  --c-navy-800: #142a48;
  --c-navy-700: #1d3960;
  --c-navy-100: #eef3f9;
  --c-navy-50:  #f5f8fc;

  --c-gold-600: #8c6818;
  --c-gold-500: #ab8124;
  --c-gold-400: #c69c3a;
  --c-gold-300: #dfba5e;
  --c-gold-200: #edd48f;
  --c-gold-100: #f7ebd1;
  --c-gold-50:  #fdfaf3;

  --c-slate-900: #0f172a;
  --c-slate-800: #1e293b;
  --c-slate-700: #334155;
  --c-slate-600: #475569;
  --c-slate-500: #64748b;
  --c-slate-400: #94a3b8;
  --c-slate-300: #cbd5e1;
  --c-slate-200: #e2e8f0;
  --c-slate-100: #f1f5f9;
  --c-slate-50:  #f8fafc;

  --c-bg-paper:   #faf8f5;
  --c-bg-card:    #ffffff;
  --c-bg-subtle:  #f4f1eb;
  --c-white:      #ffffff;

  --c-accent-emerald: #10b981;
  --c-accent-red:     #dc2626;
  --c-accent-amber:   #d97706;

  /* Typography */
  --font-sans: "Plus Jakarta Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-display: "Cinzel", "Noto Serif JP", serif;

  /* Shadows */
  --shadow-subtle: 0 2px 8px rgba(10, 23, 40, 0.04);
  --shadow-card:   0 10px 30px -5px rgba(10, 23, 40, 0.06), 0 2px 8px -2px rgba(10, 23, 40, 0.03);
  --shadow-elevated: 0 20px 40px -10px rgba(10, 23, 40, 0.12);
  --shadow-gold:   0 12px 32px -6px rgba(171, 129, 36, 0.35);

  /* Radius */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Transitions */
  --tr-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --tr-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.site-body {
  font-family: var(--font-sans);
  background-color: var(--c-bg-paper);
  color: var(--c-slate-800);
  line-height: 1.8;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
  padding-bottom: 76px; /* Space for mobile sticky dock */
}

@media (min-width: 901px) {
  body.site-body { padding-bottom: 0; }
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Responsive Containers */
.container {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: 28px;
}

@media (max-width: 768px) {
  .container { padding-inline: 18px; }
}

@media (max-width: 480px) {
  .container { padding-inline: 14px; }
}

.br-sp { display: none; }
@media (max-width: 640px) {
  .br-sp { display: block; }
}

.br-pc { display: block; }
@media (max-width: 768px) {
  .br-pc { display: none; }
}

/* ==========================================================================
   Typography & Line Break Optimization (改行落ち・単語泣き別れの完全排除)
   ========================================================================== */
h1, h2, h3, h4, .section-title-large, .hero-main-title, .doctor-heading, .story-quote, .sim-title {
  text-wrap: balance;
  line-break: strict;
  word-break: auto-phrase;
}

p, li, .hero-lead-line, .section-lead-text, .sim-lead, .doctor-text p, .story-desc {
  text-wrap: pretty;
  line-break: strict;
}

/* 文節単位での折り返しを保証するインラインブロック（長文溢れ防止のmax-width付き） */
.ib {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .section-title-large {
    font-size: clamp(20px, 5.4vw, 25px) !important;
    line-height: 1.42;
  }
}

/* スマホ時のみ有効にする改行タグ */
.sp-br {
  display: none;
}
@media (max-width: 768px) {
  .sp-br {
    display: inline;
  }
}

/* 改行を絶対に許さないUIパーツ群 */
.btn-hero-web,
.btn-hero-tel,
.btn-sim-web,
.btn-final-web,
.btn-primary-reserve,
.dock-btn,
.sim-badge,
.section-kicker,
.kicker-badge,
.hero-quick-tags li,
.m-badge,
.res-tag,
.chip-step,
.chip-price,
.pain-badge,
.case-badge,
.row-title {
  white-space: nowrap;
}

/* Common Headings - Senior Optimized */
.section-kicker {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--c-gold-600);
  display: block;
  margin-bottom: 10px;
}

.section-title-large {
  font-family: var(--font-serif);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.4;
  color: var(--c-navy-950);
  margin-bottom: 16px;
  text-wrap: balance;
}

.section-lead-text {
  font-size: clamp(16px, 2.1vw, 19px);
  color: var(--c-slate-700);
  line-height: 1.8;
  max-width: 840px;
  margin-inline: auto;
  font-weight: 500;
  text-wrap: pretty;
}

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

/* ==========================================================================
   Top Announcement Bar
   ========================================================================== */
.top-announcement {
  background: var(--c-navy-950);
  border-bottom: 1px solid rgba(198, 156, 58, 0.3);
  padding: 8px 0;
  color: var(--c-white);
  font-size: 12px;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.announcement-pill {
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--c-gold-500);
  color: var(--c-white);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.announcement-text {
  flex: 1;
  text-align: center;
  font-weight: 400;
  color: var(--c-slate-200);
}

.announcement-text strong {
  color: var(--c-gold-300);
  font-weight: 700;
}

.announcement-features {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--c-slate-300);
  font-size: 12px;
  white-space: nowrap;
}

.announcement-features .sep { opacity: 0.4; }

@media (max-width: 900px) {
  .top-announcement { padding: 6px 0; }
  .announcement-features { display: none; }
  .announcement-inner { justify-content: center; font-size: 11px; gap: 8px; }
}

/* ==========================================================================
   Global Header
   ========================================================================== */
.global-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 245, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: all var(--tr-smooth);
  overflow: hidden;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 20px;
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-crest {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--c-navy-950), var(--c-navy-850));
  border: 1.5px solid var(--c-gold-400);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(10, 23, 40, 0.15);
}

.crest-symbol {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-gold-300);
}

.brand-text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  flex-shrink: 0;
}

.clinic-sub {
  font-size: 10px;
  color: var(--c-slate-500);
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.clinic-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy-950);
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: nowrap;
}

.header-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(198, 156, 58, 0.12);
  border: 1px solid rgba(198, 156, 58, 0.35);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-navy-950);
  margin-left: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.header-trust-badge .badge-dot {
  color: var(--c-gold-600);
  font-size: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.btn-tel-quick {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(10, 23, 40, 0.12);
  background: var(--c-white);
  transition: all var(--tr-smooth);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-tel-quick:hover {
  border-color: var(--c-gold-500);
  box-shadow: 0 4px 12px rgba(198, 156, 58, 0.2);
  transform: translateY(-1px);
}

.btn-tel-quick .icon {
  width: 18px;
  height: 18px;
  color: var(--c-gold-600);
  flex-shrink: 0;
}

.btn-tel-content {
  white-space: nowrap;
}

.btn-tel-content .btn-sub {
  font-size: 9.5px;
  color: var(--c-slate-500);
  display: block;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.btn-tel-content .btn-num {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--c-navy-950);
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

.btn-primary-reserve {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-gold-500), var(--c-gold-600));
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 14px rgba(171, 129, 36, 0.35);
  transition: all var(--tr-smooth);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-primary-reserve:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(171, 129, 36, 0.45);
}

.btn-primary-reserve .arrow {
  width: 15px;
  height: 15px;
  color: #ffffff;
  transition: transform var(--tr-fast);
  flex-shrink: 0;
}

.btn-primary-reserve:hover .arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  /* スマホ・タブレットではヘッダーの追従（sticky）を解除（スクロールで上へ自然に流れる） */
  .global-header {
    position: relative;
    top: auto;
    z-index: 10;
  }
  .header-trust-badge { display: none; }
  
  /* TOPにある電話・WEB予約ボタンをしっかり表示 */
  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .header-container {
    height: 60px;
    padding-inline: 12px;
    gap: 8px;
  }
  .brand-identity {
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .brand-crest { width: 32px; height: 32px; flex-shrink: 0; }
  .crest-symbol { font-size: 16px; }
  .clinic-name { font-size: 15px; white-space: nowrap; }
  .clinic-sub { font-size: 8.5px; white-space: nowrap; }
  
  /* スマホ・小型タブレット用電話ボタン：電話番号折り返しによる崩壊を防ぎ洗練された円形アイコンボタンに統一 */
  .btn-tel-quick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .btn-tel-quick .icon {
    width: 17px;
    height: 17px;
  }
  .btn-tel-content {
    display: none;
  }
  
  /* スマホ用WEB予約ボタン */
  .btn-primary-reserve {
    padding: 8px 12px;
    font-size: 12px;
    gap: 0;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    flex-shrink: 0;
  }
  .btn-primary-reserve .arrow {
    display: none;
  }
}

@media (max-width: 374px) {
  .clinic-sub {
    font-size: 7.5px;
  }
  .clinic-name {
    font-size: 14px;
  }
  .btn-primary-reserve {
    padding: 7px 10px;
    font-size: 11px;
  }
}

/* ==========================================================================
   1. HERO SECTION (3-Second Clean & Uncluttered Full-Bleed Layout)
   ========================================================================== */
.hero-section {
  position: relative;
  padding: 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.hero-bleed-container {
  display: grid;
  grid-template-columns: minmax(520px, 0.95fr) 1.05fr;
  align-items: stretch;
  min-height: min(690px, calc(100vh - 72px));
  width: 100%;
}

/* Left Copy Column */
.hero-copy-col {
  padding: 26px 48px 30px max(32px, calc((100vw - 1400px) / 2));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ffffff;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.hero-kicker-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.kicker-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: var(--c-navy-950);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(198, 156, 58, 0.35);
  box-shadow: 0 2px 6px rgba(10, 23, 40, 0.12);
}

.kicker-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-slate-600);
}

.hero-main-title {
  margin-bottom: 20px;
}

.sub-catch {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(23px, 2.3vw, 29px);
  color: var(--c-gold-600);
  font-weight: 800;
  line-height: 1.38;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  -webkit-font-smoothing: antialiased;
}

.main-catch {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--c-navy-950);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Lead Line (Single Clear Concept Line) */
.hero-lead-line {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  color: var(--c-navy-900);
  margin: 0 0 24px 0;
  padding-left: 16px;
  border-left: 5px solid var(--c-gold-500);
  line-height: 1.5;
}

.hero-lead-line .lead-strong {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 900;
  color: var(--c-navy-950);
  letter-spacing: 0.02em;
}

.hero-lead-line .lead-sub-note {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-slate-500);
}

/* Mobile Visual (Hidden on Desktop) */
.hero-mobile-visual {
  display: none;
}

/* 3 Instant Tags */
.hero-quick-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}

.hero-quick-tags li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fdfaf3;
  border: 1.5px solid rgba(198, 156, 58, 0.45);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 800;
  color: var(--c-navy-950);
  white-space: nowrap;
}

.q-check {
  color: var(--c-gold-600);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

/* Clean Direct CTA */
.hero-cta-clean {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-cta-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

.btn-hero-web {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px clamp(18px, 2.2vw, 28px);
  background: linear-gradient(135deg, var(--c-gold-500), var(--c-gold-600));
  border-radius: var(--radius-md);
  color: #ffffff;
  box-shadow: var(--shadow-gold);
  min-height: 64px;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  transition: all var(--tr-smooth);
}

.btn-hero-web:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(171, 129, 36, 0.45);
}

.btn-hero-web .btn-title {
  font-size: clamp(17px, 1.4vw, 19.5px);
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.btn-hero-web .btn-arrow {
  width: 22px;
  height: 22px;
  color: #ffffff;
  flex-shrink: 0;
  transition: transform var(--tr-fast);
}

.btn-hero-web:hover .btn-arrow { transform: translateX(4px); }

.btn-hero-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px clamp(16px, 2vw, 24px);
  background: var(--c-navy-950);
  border: 1px solid rgba(198, 156, 58, 0.35);
  border-radius: var(--radius-md);
  color: #ffffff;
  min-height: 64px;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  transition: all var(--tr-smooth);
}

.btn-hero-tel:hover {
  background: var(--c-navy-800);
  border-color: var(--c-gold-400);
  transform: translateY(-2px);
}

.btn-hero-tel .tel-icon {
  width: 24px;
  height: 24px;
  color: var(--c-gold-400);
  flex-shrink: 0;
}

.hero-tel-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}

.hero-tel-label {
  font-size: 11.5px;
  color: var(--c-gold-300);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.btn-hero-tel .btn-phone-num {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 23px);
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #ffffff;
}

.cta-clean-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-slate-600);
  margin: 0;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .cta-clean-note {
    font-size: 12.5px;
    gap: 4px;
    justify-content: center;
  }
}

.note-dot {
  color: var(--c-accent-emerald);
  font-size: 12px;
}

/* Right: Unobstructed Full-Bleed Grand Visual on Desktop */
.hero-visual-bleed {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 700px;
  background: #f1f5f9;
  overflow: hidden;
}

.visual-bleed-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-bleed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* Media Queries for Hero */
@media (max-width: 1024px) {
  .hero-bleed-container {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-copy-col {
    padding: 18px clamp(14px, 4.5vw, 20px) 32px;
  }
  .hero-kicker-strip {
    margin-bottom: 12px;
    gap: 8px;
  }
  .kicker-badge {
    font-size: 12.5px;
    padding: 4px 12px;
  }
  .kicker-text {
    font-size: 13px;
  }
  .sub-catch {
    font-size: clamp(18.5px, 5.3vw, 23.5px);
    line-height: 1.36;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    -webkit-font-smoothing: antialiased;
  }
  .main-catch {
    font-size: clamp(23px, 6.7vw, 33px);
    line-height: 1.32;
    white-space: normal;
  }
  .hero-lead-line {
    font-size: 15px;
    margin-bottom: 18px;
    line-height: 1.48;
    padding-left: 12px;
  }
  .hero-lead-line .lead-strong {
    font-size: 18.5px;
  }
  .hero-lead-line .lead-sub-note {
    font-size: 13px;
    display: block;
    margin-top: 2px;
  }
  .hero-visual-bleed {
    display: none;
  }
  .hero-mobile-visual {
    display: block;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--radius-md);
  }
  .hero-mobile-img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
  }
  .hero-quick-tags {
    gap: 8px;
    margin-bottom: 24px;
  }
  .hero-quick-tags li {
    font-size: 14.5px;
    padding: 8px 14px;
  }
  .hero-cta-group {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ==========================================================================
   2. SECTION: VISUAL EMPATHY (感情直撃：3枚の写真で伝える痛み)
   ========================================================================== */
.section-visual-empathy {
  padding: 60px 0;
  background: #ffffff;
  border-top: 1px solid var(--c-slate-200);
  border-bottom: 1px solid var(--c-slate-200);
}

.empathy-header {
  margin-bottom: 36px;
}

.pain-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.pain-visual-card {
  background: #ffffff;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--tr-smooth);
  box-shadow: var(--shadow-subtle);
}

.pain-visual-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--c-gold-400);
}

.pain-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.pain-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.pain-visual-card:hover .pain-card-img img {
  transform: scale(1.05);
}

.pain-case-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.9);
  color: var(--c-gold-300);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  backdrop-filter: blur(4px);
}

.pain-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  background: rgba(220, 38, 38, 0.9);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pain-card-body {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pain-quote-strip {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-navy-900);
  background: var(--c-gold-50);
  border-left: 3.5px solid var(--c-gold-500);
  padding: 8px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 14px;
  line-height: 1.5;
}

.pain-card-body h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--c-navy-950);
  line-height: 1.4;
  margin-bottom: 10px;
}

.pain-card-body p {
  font-size: 15px;
  color: var(--c-slate-600);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

/* Luxury Editorial Doctor Empathy Callout */
.doctor-reassurance-strip {
  background: linear-gradient(135deg, var(--c-navy-950) 0%, #0d1b2e 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  box-shadow: var(--shadow-elevated);
  position: relative;
  overflow: hidden;
}

.doctor-reassurance-strip::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.strip-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-gold-300);
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}

.strip-header-badge .badge-crest-mark {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--c-gold-400);
}

.strip-main-layout {
  display: flex;
  align-items: center;
  gap: 28px;
}

.strip-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.strip-avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--c-gold-400);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.strip-avatar-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.avatar-title-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-slate-300);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.avatar-name,
.avatar-name-tag {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-serif);
  display: block;
}

.strip-text-wrap {
  flex: 1;
}

.strip-quote-heading {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.3vw, 23px);
  color: var(--c-gold-200);
  line-height: 1.45;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.strip-desc-p {
  font-size: 15.5px;
  color: #cbd5e1;
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 900px) {
  .pain-visual-grid { grid-template-columns: 1fr; gap: 18px; }
  .doctor-reassurance-strip {
    padding: 24px 18px;
  }
  .strip-header-badge {
    font-size: 11px;
    padding: 5px 12px;
    width: 100%;
    justify-content: center;
    margin-bottom: 16px;
    gap: 6px;
    text-align: center;
  }
  .strip-header-badge .badge-crest-mark {
    font-size: 11px;
  }
  .strip-main-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .strip-avatar-wrap {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  }
  .strip-avatar-img {
    width: 64px;
    height: 64px;
    border-width: 2.5px;
  }
  .strip-avatar-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .strip-avatar-meta .avatar-title-tag {
    font-size: 11px;
    background: rgba(212, 175, 55, 0.2);
    color: var(--c-gold-200);
  }
  .strip-avatar-meta .avatar-name,
  .strip-avatar-meta .avatar-name-tag {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.04em;
  }
  .strip-quote-heading {
    font-size: clamp(17px, 4.4vw, 20px);
    line-height: 1.45;
    margin-bottom: 10px;
  }
  .strip-desc-p {
    font-size: 14px;
    line-height: 1.75;
  }
}

/* ==========================================================================
   3. SECTION: VISUAL REAL COMPARISON (実物写真ビルボード & VSカード)
   ========================================================================= */
.section-visual-compare {
  padding: 60px 0;
  background: var(--c-bg-paper);
}

.real-compare-billboard {
  background: #ffffff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--c-slate-200);
  box-shadow: var(--shadow-card);
  margin-bottom: 36px;
}

.billboard-image-wrap {
  width: 100%;
  background: #f8fafc;
  display: flex;
  justify-content: center;
}

.billboard-img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
}

.billboard-caption-box {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 30px 40px;
  gap: 28px;
  background: #ffffff;
}

.caption-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-tag {
  display: inline-block;
  padding: 5px 16px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 800;
  align-self: flex-start;
  background: var(--c-slate-200);
  color: var(--c-navy-950);
}

.c-tag.gold {
  background: var(--c-gold-500);
  color: #ffffff;
}

.caption-item p {
  font-size: 17px;
  color: var(--c-slate-800);
  line-height: 1.75;
  margin: 0;
  font-weight: 500;
}

.caption-arrow {
  font-size: 28px;
  color: var(--c-gold-500);
  font-weight: 900;
}

@media (max-width: 768px) {
  .billboard-caption-box {
    grid-template-columns: 1fr;
    padding: 22px 20px;
    gap: 18px;
  }
  .caption-arrow {
    transform: rotate(90deg);
    text-align: center;
  }
}

/* Mobile-Friendly Comparison VS Cards - Large Senior Font */
/* ==========================================================================
   New Unified Matrix Comparison Table (視覚的評価バッジ付き・統一マトリクス比較表)
   ========================================================================== */
.matrix-compare-wrap {
  margin-top: 36px;
  width: 100%;
}

.table-scroll-hint {
  display: none;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-gold-600);
  background: #fdfaf3;
  border: 1px dashed rgba(198, 156, 58, 0.4);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  margin-bottom: 12px;
}

.table-scroll-hint .hint-icon {
  font-size: 14px;
  font-weight: 900;
  margin-right: 4px;
  display: inline-block;
  animation: hintSwipe 1.8s ease-in-out infinite;
}

@keyframes hintSwipe {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.matrix-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 36px rgba(10, 23, 40, 0.08);
  border: 1.5px solid var(--c-slate-200);
}

.matrix-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

/* Table Header */
.matrix-compare-table thead tr th {
  padding: 22px 18px;
  vertical-align: bottom;
  border-bottom: 2px solid var(--c-slate-200);
}

.matrix-compare-table .th-item {
  width: 22%;
  background: #f8fafc;
  color: var(--c-navy-950);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 800;
  border-top-left-radius: var(--radius-lg);
}

.matrix-compare-table .th-trad {
  width: 25%;
  background: #f1f5f9;
  text-align: center;
  color: var(--c-slate-600);
  border-right: 1px solid var(--c-slate-200);
}

.matrix-compare-table .th-imp {
  width: 25%;
  background: #e8edf5;
  text-align: center;
  color: var(--c-navy-900);
  border-right: 1px solid var(--c-slate-200);
}

.matrix-compare-table .th-second {
  width: 28%;
  background: linear-gradient(180deg, #fdf9ee 0%, #faecd0 100%);
  text-align: center;
  border-top: 3.5px solid var(--c-gold-500);
  border-left: 2px solid var(--c-gold-400);
  border-right: 2px solid var(--c-gold-400);
  border-top-right-radius: var(--radius-lg);
  position: relative;
  box-shadow: 0 -4px 16px rgba(198, 156, 58, 0.18);
}

.th-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.th-sub.gold {
  color: var(--c-gold-700);
  font-weight: 800;
  font-size: 12px;
}

.th-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.th-second .th-name {
  font-size: 21px;
  color: var(--c-navy-950);
}

.crown-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--c-gold-500), var(--c-gold-600));
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(171, 129, 36, 0.4);
}

/* Table Body */
.matrix-compare-table tbody tr td {
  padding: 20px 18px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

.matrix-compare-table tbody tr:last-child td {
  border-bottom: 2px solid var(--c-slate-200);
}

.matrix-compare-table .td-item {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

.item-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--c-navy-950);
  line-height: 1.35;
}

.item-sub {
  display: block;
  font-size: 11.5px;
  color: var(--c-slate-500);
  margin-top: 4px;
}

.matrix-compare-table .td-trad,
.matrix-compare-table .td-imp {
  text-align: center;
  border-right: 1px solid #e2e8f0;
}

.matrix-compare-table .td-second {
  background: #fffdf8;
  border-left: 2px solid var(--c-gold-400);
  border-right: 2px solid var(--c-gold-400);
  text-align: center;
}

/* Rating Badges (◎, ◯, △, ✕) */
.rating-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
}

.badge-best {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  font-size: 22px;
}

.badge-ok {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #475569;
}

.badge-warn {
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  color: #b45309;
}

.badge-bad {
  background: #fef2f2;
  border: 1.5px solid #ef4444;
  color: #dc2626;
}

.td-main {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--c-navy-950);
  line-height: 1.35;
  margin-bottom: 5px;
}

.td-main.gold {
  color: var(--c-navy-950);
  font-size: 16.5px;
  font-weight: 900;
}

.td-main.danger { color: #dc2626; }
.td-main.warn { color: #d97706; }

.td-detail {
  display: block;
  font-size: 12px;
  color: var(--c-slate-500);
  line-height: 1.5;
}

.td-second .td-detail {
  color: var(--c-slate-700);
  font-weight: 600;
}

/* Footer Summary */
.matrix-compare-table tfoot .tr-summary td {
  padding: 22px 18px;
  background: #f8fafc;
}

.matrix-compare-table tfoot .td-second {
  background: linear-gradient(180deg, #faf3e1 0%, #f7ebd0 100%);
  border-bottom: 3.5px solid var(--c-gold-500);
  border-bottom-right-radius: var(--radius-lg);
}

.summary-text {
  font-size: 13px;
  color: var(--c-slate-600);
  line-height: 1.55;
  margin: 0;
}

.summary-text.gold-strong {
  font-size: 14px;
  font-weight: 900;
  color: var(--c-navy-950);
  line-height: 1.55;
}

.summary-winner-badge {
  display: inline-block;
  background: var(--c-navy-950);
  color: var(--c-gold-300);
  font-size: 11.5px;
  font-weight: 900;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
  border: 1px solid var(--c-gold-400);
  box-shadow: 0 2px 6px rgba(10, 23, 40, 0.15);
}

/* Tablet & Mobile Responsive */
@media (max-width: 900px) {
  .table-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-navy-900);
    background: rgba(10, 23, 40, 0.05);
    border: 1px solid var(--c-slate-200);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
  }
  .matrix-compare-wrap {
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px);
  }
  .matrix-table-container {
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
  }
  .matrix-compare-table {
    min-width: 620px;
  }
  .matrix-compare-table thead tr th {
    padding: 14px 10px;
  }
  .matrix-compare-table tbody tr td {
    padding: 14px 10px;
  }
  .matrix-compare-table .th-item,
  .matrix-compare-table .td-item {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #f8fafc;
    box-shadow: 3px 0 10px rgba(10, 23, 40, 0.08);
    width: 100px;
    min-width: 100px;
  }
  .matrix-compare-table .th-second,
  .matrix-compare-table .td-second {
    min-width: 185px;
  }
  .th-second .th-name {
    font-size: 16px;
    white-space: nowrap;
  }
  .th-name {
    font-size: 15px;
    white-space: nowrap;
  }
  .td-main {
    font-size: 14px;
  }
  .td-main.gold {
    font-size: 14.5px;
  }
  .td-detail {
    font-size: 10.5px;
  }
}

@media (max-width: 640px) {
  .table-scroll-hint {
    font-size: 11.5px;
    padding: 5px 12px;
    margin-bottom: 8px;
    animation: hintSlidePulse 2.5s infinite ease-in-out;
  }
  @keyframes hintSlidePulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
  }
  .matrix-compare-wrap {
    margin-left: -14px;
    margin-right: -14px;
    width: calc(100% + 28px);
    padding: 0 4px;
  }
  .matrix-table-container {
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(10, 23, 40, 0.08);
  }
  .matrix-compare-table {
    min-width: 500px; /* 375px画面でも快適に閲覧・比較でき、かつ文字落ちしない最適幅 */
    font-size: 12px;
  }
  /* スマホでのSticky固定列：幅を最適化し、1文字落ちを防止しつつデータ列の視認性を最大化 */
  .matrix-compare-table .th-item,
  .matrix-compare-table .td-item {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #f8fafc;
    box-shadow: 3px 0 8px rgba(10, 23, 40, 0.1);
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    padding: 10px 5px;
    text-align: center;
    border-right: 1.5px solid var(--c-slate-200);
  }
  .matrix-compare-table .item-title {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    word-break: keep-all;
    display: block;
  }
  .matrix-compare-table .item-sub {
    font-size: 9.5px;
    line-height: 1.25;
    display: block;
    margin-top: 2px;
    color: var(--c-slate-500);
  }
  .matrix-compare-table thead tr th {
    padding: 10px 6px;
  }
  .matrix-compare-table thead .th-name {
    font-size: 12.5px;
  }
  .matrix-compare-table thead .th-sub {
    font-size: 9.5px;
  }
  /* セカンド・ティース（本命列） */
  .matrix-compare-table .th-second,
  .matrix-compare-table .td-second {
    min-width: 158px;
    padding: 10px 8px;
    background: #fffdf9;
  }
  .matrix-compare-table .th-second {
    background: linear-gradient(180deg, #162a45 0%, var(--c-navy-950) 100%);
  }
  .matrix-compare-table .th-second .th-name {
    font-size: 13.5px;
    color: var(--c-gold-300);
  }
  .matrix-compare-table .badge-recommend {
    font-size: 9.5px;
    padding: 2px 6px;
    margin-bottom: 3px;
  }
  /* 他データ列（総入れ歯、インプラント） */
  .matrix-compare-table th:not(.th-item):not(.th-second),
  .matrix-compare-table td:not(.td-item):not(.td-second) {
    min-width: 130px;
    padding: 10px 7px;
  }
  .matrix-compare-table tbody tr td {
    padding: 10px 7px;
  }
  .matrix-compare-table .td-main {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
  }
  .matrix-compare-table .td-main.gold {
    font-size: 12.5px;
  }
  .matrix-compare-table .td-detail {
    font-size: 9.5px;
    line-height: 1.35;
    margin-top: 3px;
  }
}

/* ==========================================================================
   4. SECTION: VISUAL PROTOCOL (写真で見る2段階方式)
   ========================================================================= */
.section-visual-protocol {
  padding: 60px 0;
  background: #ffffff;
  border-top: 1px solid var(--c-slate-200);
}

.protocol-visual-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.protocol-card {
  background: #ffffff;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: all var(--tr-smooth);
}

.protocol-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-gold-400);
}

.card-photo-header {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.card-photo-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 18px;
  background: var(--c-navy-950);
  color: var(--c-white);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.step-pill.gold {
  background: linear-gradient(135deg, var(--c-gold-500), var(--c-gold-600));
}

.protocol-card .card-content {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-tag {
  font-size: 14px;
  font-weight: 800;
  color: var(--c-navy-900);
  margin-bottom: 8px;
  display: inline-block;
  padding: 3px 10px;
  background: var(--c-slate-100);
  border-radius: 4px;
  align-self: flex-start;
}

.card-tag.gold {
  background: var(--c-gold-100);
  color: var(--c-gold-700);
}

.protocol-card h3 {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 800;
  color: var(--c-navy-950);
  line-height: 1.4;
  margin-bottom: 14px;
}

.protocol-card p {
  font-size: 15px;
  color: var(--c-slate-600);
  line-height: 1.7;
  margin-bottom: 20px;
  font-weight: 500;
}

.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--c-slate-200);
}

.check-list li {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-navy-950);
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
}

.check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--c-gold-600);
  font-weight: 900;
  font-size: 16px;
}

/* Process Connector Arrow between STEP 01 and STEP 02 */
.protocol-bridge-indicator {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  z-index: 2;
}

/* 左右のカードと繋がるゴールド破線コネクター（PC時） */
.protocol-bridge-indicator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  right: -24px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-gold-400), var(--c-gold-400) 6px, transparent 6px, transparent 12px);
  z-index: -1;
  transform: translateY(-50%);
  pointer-events: none;
}

.bridge-inner-pill {
  width: 100%;
  max-width: 236px;
  background: #ffffff;
  border: 1.5px solid rgba(198, 156, 58, 0.4);
  border-radius: var(--radius-xl);
  padding: 28px 16px;
  box-shadow: 0 10px 30px rgba(184, 151, 62, 0.16), 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  transition: all var(--tr-smooth);
}

.bridge-inner-pill:hover {
  border-color: var(--c-gold-500);
  box-shadow: 0 14px 40px rgba(184, 151, 62, 0.28), 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.bridge-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--c-gold-700);
  background: var(--c-gold-50);
  border: 1px solid var(--c-gold-200);
  padding: 3px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
  white-space: nowrap;
}

.bridge-arrow-wrap {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-gold-400) 0%, var(--c-gold-600) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(184, 151, 62, 0.42), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  border: 3.5px solid #ffffff;
  margin-bottom: 14px;
  transition: transform var(--tr-smooth), box-shadow var(--tr-smooth);
}

.bridge-arrow-wrap:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(184, 151, 62, 0.55);
}

.bridge-label {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.bridge-svg {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  animation: bridgePulseArrow 2.2s ease-in-out infinite;
}

@keyframes bridgePulseArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.bridge-sub {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-slate-600);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.bridge-highlight {
  color: var(--c-navy-950);
  font-weight: 800;
  font-size: 13.5px;
  display: inline-block;
  margin-top: 2px;
}

/* Treatment-period Reassurance Infographic Ribbon */
.protocol-reassure-infographic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}

.reassure-info-card {
  background: linear-gradient(135deg, var(--c-navy-950) 0%, #0d1e38 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: var(--shadow-card);
}

.info-metric-side {
  flex-shrink: 0;
  min-width: 130px;
  text-align: center;
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.metric-lead-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(212, 175, 55, 0.2);
  color: var(--c-gold-300);
  margin-bottom: 6px;
  white-space: nowrap;
}

.metric-num-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-num-group .m-label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 2px;
  white-space: nowrap;
}

.m-huge-zero {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  color: var(--c-gold-300);
  line-height: 1;
  white-space: nowrap;
}

.m-huge-count {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--c-gold-300);
  line-height: 1.1;
  white-space: nowrap;
}

.m-huge-zero .m-unit,
.m-huge-count .m-unit {
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 700;
  margin-left: 2px;
  color: #ffffff;
}

.info-content-side {
  flex: 1;
}

.info-content-side h4 {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
  line-height: 1.45;
}

.info-content-side p {
  font-size: 13.5px;
  color: #cbd5e1;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .protocol-visual-duo {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .protocol-bridge-indicator {
    padding: 12px 0;
    width: 100%;
  }
  .protocol-bridge-indicator::before {
    top: -12px;
    bottom: -12px;
    left: 50%;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--c-gold-400), var(--c-gold-400) 4px, transparent 4px, transparent 8px);
    transform: translateX(-50%);
  }
  .bridge-inner-pill {
    max-width: 320px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(184, 151, 62, 0.12);
  }
  .bridge-kicker {
    font-size: 10.5px;
    padding: 2px 8px;
    margin-bottom: 10px;
  }
  .bridge-arrow-wrap {
    width: 76px;
    height: 76px;
    transform: none;
    margin-bottom: 10px;
    border: 3px solid #ffffff;
    box-shadow: 0 6px 20px rgba(184, 151, 62, 0.4);
  }
  .bridge-label {
    font-size: 13.5px;
  }
  .bridge-svg {
    width: 22px;
    height: 22px;
    transform: rotate(90deg);
    margin-top: 2px;
    animation: bridgePulseArrowDown 2.2s ease-in-out infinite;
  }
  @keyframes bridgePulseArrowDown {
    0%, 100% { transform: rotate(90deg) translateY(0); }
    50% { transform: rotate(90deg) translateY(-3px); }
  }
  .bridge-sub {
    font-size: 12.5px;
    line-height: 1.5;
  }
  .bridge-highlight {
    font-size: 13px;
  }
  .protocol-reassure-infographic {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .reassure-info-card {
    padding: 20px 18px;
    gap: 16px;
    min-width: 0;
  }
  .info-metric-side {
    min-width: 100px;
    padding-right: 14px;
  }
  .info-content-side {
    min-width: 0;
  }
  .m-huge-zero { font-size: 36px; }
  .m-huge-count { font-size: 22px; }
}

@media (max-width: 640px) {
  .reassure-info-card {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    gap: 12px;
  }
  .info-metric-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0;
    padding-bottom: 10px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 0;
  }
  .metric-lead-tag {
    margin-bottom: 0;
  }
  .metric-num-group {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .metric-num-group .m-label {
    margin-bottom: 0;
  }
  .m-huge-zero { font-size: 30px; }
  .m-huge-count { font-size: 22px; }
}

/* ==========================================================================
   5. SECTION: VISUAL STORIES (Before/After写真が主役の実例)
   ========================================================================= */
.section-visual-stories {
  padding: 60px 0;
  background: var(--c-bg-paper);
}

.story-showcase-stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* ==========================================================================
   5. SECTION: CLINICAL CASE REPORTS (日本補綴歯科学会 認定専門医による客観的臨床症例報告)
   ========================================================================== */
.section-clinical-cases,
.section-visual-stories {
  padding: 68px 0;
  background: var(--c-bg-paper);
}

.clinical-case-list,
.story-showcase-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 学術的・医療カルテ調 症例報告カード */
.clinical-case-card,
.story-showcase-item {
  background: #ffffff;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* カルテ上部のヘッダーバー（症例番号・分類・担当医） */
.case-card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 2px solid var(--c-gold-600);
}

.case-ident-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.case-num-badge {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: var(--c-gold-600);
  padding: 3px 10px;
  border-radius: 4px;
}

.case-class-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.02em;
}

.case-doctor-tag {
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

/* 2カラムレイアウト（写真・所見側 vs 臨床解説・費用側） */
.case-card-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
}

.case-col-visual,
.story-visual-side {
  padding: 28px 26px;
  background: var(--c-slate-50);
  border-right: 1px solid var(--c-slate-200);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ba-photo-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ba-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ba-col img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-slate-200);
}

.ba-label {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  align-self: flex-start;
  letter-spacing: 0.03em;
}

.ba-label.before { background: var(--c-slate-200); color: var(--c-slate-800); }
.ba-label.after { background: var(--c-accent-emerald); color: #ffffff; }

.ba-arrow {
  font-size: 24px;
  color: var(--c-gold-500);
  font-weight: 900;
}

/* 症例メタスペック（客観的臨床診断サマリー） */
.case-meta-spec {
  background: #ffffff;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}

.spec-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
  padding-bottom: 8px;
}

.spec-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.spec-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  min-width: 78px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: var(--c-navy-950);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-sizing: border-box;
}

.spec-val {
  font-weight: 700;
  color: var(--c-slate-800);
  font-size: 12.5px;
  line-height: 1.55;
  flex: 1;
  min-width: 0;
}

.case-col-clinical,
.story-text-side {
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-badge {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-gold-600);
  letter-spacing: 0.05em;
}

.story-quote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 800;
  color: var(--c-navy-950);
  line-height: 1.35;
}

.case-clinical-title {
  font-family: var(--font-sans);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 800;
  color: var(--c-navy-950);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
}

.case-clinical-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--c-slate-700);
  line-height: 1.75;
}

.case-clinical-desc p {
  margin: 0;
}

.case-clinical-desc strong {
  color: var(--c-navy-900);
  font-weight: 700;
}

.story-desc {
  font-size: 17px;
  color: var(--c-slate-700);
  line-height: 1.75;
  margin: 0;
  font-weight: 500;
}

/* 主なリスク・副作用ブロック（左カラム下部に配置して無駄な空白を完全解消） */
.case-risk-box {
  background: #ffffff;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: auto;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}

.risk-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-slate-700);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.risk-icon {
  color: var(--c-slate-500);
  flex-shrink: 0;
}

.risk-label {
  letter-spacing: 0.02em;
}

.risk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.risk-list li {
  position: relative;
  padding-left: 14px;
  font-size: 12.5px;
  color: var(--c-slate-600);
  line-height: 1.6;
}

.risk-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--c-slate-400);
}

/* 症例セクション下部の包括的限定解除注記カード */
.guideline-disclaimer-card {
  margin-top: 48px;
  background: #ffffff;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.guideline-badge-row {
  margin-bottom: 12px;
}

.guideline-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px 14px;
  background: var(--c-navy-950);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  max-width: 100%;
  box-sizing: border-box;
}

.guideline-desc {
  font-size: 14px;
  color: var(--c-slate-600);
  line-height: 1.7;
  margin: 0 0 18px;
}

.guideline-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--c-slate-200);
}

.guideline-info-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--c-slate-600);
  line-height: 1.65;
  min-width: 0;
}

.guideline-info-col strong {
  font-size: 13.5px;
  color: var(--c-navy-950);
  font-weight: 800;
}

/* Redesigned Modern OpenDesign Price Breakdown Card */
.price-chip-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-top: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  width: 100%;
}

.chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  width: 100%;
}

.chip:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

.chip-label-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.chip-step {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--c-navy-950);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.chip-step.meta {
  background: var(--c-gold-600);
}

.chip-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-slate-700);
  min-width: 0;
}

.chip-price-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-align: right;
  flex-shrink: 0;
}

.chip-price {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 900;
  color: var(--c-navy-950);
}

.chip-price.meta {
  font-size: 19px;
  color: var(--c-gold-600);
}

.chip-tax {
  font-size: 11.5px;
  color: var(--c-slate-500);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .case-card-topbar {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .case-ident-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    width: 100%;
  }
  .case-class-name {
    font-size: 13.5px;
    line-height: 1.35;
  }
  .case-class-name .ib {
    white-space: nowrap;
  }
  .case-doctor-tag {
    font-size: 11.5px;
    width: 100%;
    justify-content: flex-start;
  }
  .case-card-grid,
  .story-showcase-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .case-col-visual,
  .story-visual-side {
    border-right: none;
    border-bottom: 1px solid var(--c-slate-200);
    padding: 20px;
    min-width: 0;
  }
  .case-col-clinical,
  .story-text-side {
    padding: 24px 20px;
    min-width: 0;
  }
  .price-chip-box {
    padding: 16px;
    gap: 12px;
  }
  .chip {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 0;
  }
  .chip-label-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .chip-step {
    font-size: 11px;
    padding: 3px 8px;
  }
  .chip-name {
    font-size: 14.5px;
    font-weight: 700;
  }
  .chip-price-group {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 2px;
  }
  .chip-price {
    font-size: 22px;
  }
  .case-risk-box {
    padding: 12px 14px;
  }
  .guideline-disclaimer-card {
    padding: 20px 14px;
    margin-top: 32px;
    box-sizing: border-box;
  }
  .guideline-badge {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 8px;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }
  .guideline-info-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .ba-photo-group {
    gap: 8px;
  }
  .ba-arrow {
    font-size: 16px;
  }
  .ba-label {
    font-size: 10.5px;
    padding: 4px 6px;
    border-radius: 6px;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0;
    box-sizing: border-box;
  }
  .case-meta-spec {
    padding: 12px 12px;
    gap: 8px;
  }
  .case-col-visual,
  .case-col-clinical {
    padding: 18px 14px;
  }
  .case-clinical-title {
    font-size: clamp(17.5px, 4.6vw, 20px);
  }
  .price-chip-box {
    padding: 12px 12px;
    box-sizing: border-box;
  }
  .chip-label-group {
    gap: 8px;
  }
  .chip-name {
    font-size: 13px;
    line-height: 1.4;
  }
  .spec-row {
    gap: 8px;
    padding-bottom: 7px;
  }
  .spec-label {
    width: 72px;
    min-width: 72px;
    font-size: 10.5px;
    padding: 2px 4px;
  }
  .spec-val {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* ==========================================================================
   6. SECTION: VISUAL LINEUP (多種模型ショーケース × 4つの精密設計)
   ========================================================================= */
.section-visual-lineup {
  padding: 60px 0;
  background: #ffffff;
  border-top: 1px solid var(--c-slate-200);
}

/* Modern OpenDesign Denture Lineup Showcase Container (文字と写真を完全分離し可読性を極大化) */
.lineup-showcase-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 36px;
}

.showcase-content-header {
  padding: 36px 36px 28px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.showcase-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(184, 151, 62, 0.12);
  border: 1px solid rgba(184, 151, 62, 0.3);
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--c-gold-700);
  margin-bottom: 12px;
  max-width: 100%;
  box-sizing: border-box;
}

.showcase-badge-pill .badge-dot {
  color: var(--c-gold-600);
  font-size: 10px;
  flex-shrink: 0;
}

.showcase-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 900;
  color: var(--c-navy-950);
  line-height: 1.35;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.showcase-lead {
  font-size: 16.5px;
  color: var(--c-slate-700);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

.showcase-photo-frame {
  position: relative;
  width: 100%;
  background: #f1f5f9;
}

.showcase-photo-frame img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.photo-caption-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-slate-600);
}

.photo-caption-bar .caption-icon {
  font-size: 14px;
}

@media (max-width: 768px) {
  .showcase-content-header {
    padding: 24px 16px 20px;
  }
  .showcase-badge-pill {
    font-size: 11.5px;
    padding: 4px 10px;
    letter-spacing: 0.02em;
  }
  .showcase-title {
    font-size: 21px;
  }
  .showcase-lead {
    font-size: 15px;
  }
  .photo-caption-bar {
    padding: 10px 16px;
    font-size: 12.5px;
  }
}

.lineup-cards-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.quad-card {
  background: #ffffff;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-xl);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  transition: all var(--tr-smooth);
  box-shadow: var(--shadow-subtle);
}

.quad-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-gold-400);
  box-shadow: var(--shadow-card);
}

.q-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.q-num {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--c-gold-600);
}

.q-material {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--c-slate-500);
  letter-spacing: 0.08em;
  font-weight: 700;
  background: var(--c-slate-100);
  padding: 3px 8px;
  border-radius: 4px;
}

.quad-card h3 {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 800;
  color: var(--c-navy-950);
  margin-bottom: 12px;
}

.q-spec-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.spec-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--c-slate-100);
  color: var(--c-slate-700);
  border: 1px solid var(--c-slate-200);
}

.spec-pill.highlight {
  background: var(--c-gold-50);
  color: var(--c-gold-700);
  border-color: var(--c-gold-300);
}

.q-target {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-navy-900);
  background: var(--c-bg-paper);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3.5px solid var(--c-gold-500);
  margin-bottom: 14px;
  line-height: 1.5;
}

.quad-card p {
  font-size: 14.5px;
  color: var(--c-slate-600);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

/* Supplement Accordion */
.supplement-accordion-wrap {
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  background: var(--c-slate-50);
  overflow: hidden;
}

.supplement-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.supplement-toggle-btn:hover { background: var(--c-slate-100); }

.supplement-badge {
  display: inline-block;
  font-size: 13px;
  padding: 3px 10px;
  background: var(--c-slate-200);
  color: var(--c-slate-800);
  border-radius: var(--radius-full);
  font-weight: 700;
  margin-bottom: 6px;
}

.supplement-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
  color: var(--c-navy-950);
}

.btn-info-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--c-gold-600);
  white-space: nowrap;
}

.btn-info-right .chevron {
  width: 18px;
  height: 18px;
  transition: transform var(--tr-fast);
}

.supplement-accordion-wrap.is-open .chevron { transform: rotate(180deg); }

.supplement-details {
  display: none;
  padding: 0 26px 24px;
}

.supplement-accordion-wrap.is-open .supplement-details { display: block; }

.supplement-inner-box {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 22px 24px;
  border: 1px solid var(--c-slate-200);
}

.warning-tag {
  font-size: 14px;
  color: var(--c-accent-amber);
  font-weight: 800;
  margin-bottom: 8px;
}

.supplement-inner-box p {
  font-size: 16.5px;
  color: var(--c-slate-700);
  line-height: 1.75;
  margin: 0;
  font-weight: 500;
}

@media (max-width: 768px) {
  .lineup-cards-quad { grid-template-columns: 1fr; }
  .lineup-photo-banner img { max-height: 260px; }
  .banner-overlay-text { padding: 20px 20px 18px; }
  .supplement-toggle-btn { flex-direction: column; align-items: flex-start; gap: 12px; }
  .q-spec-pills { gap: 5px; }
  .spec-pill { font-size: 11px; padding: 3px 8px; white-space: nowrap; }
}

/* ==========================================================================
   7. SECTION: VISUAL PRICE (明瞭な費用インフォグラフィック)
   ========================================================================= */
.section-visual-price {
  padding: 60px 0;
  background: var(--c-bg-paper);
}

.price-infographic-card {
  background: #ffffff;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  margin-bottom: 32px;
}

.infographic-top {
  border-bottom: 1px solid var(--c-slate-200);
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.infographic-top h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--c-navy-950);
  margin-bottom: 8px;
}

.infographic-top p {
  font-size: 17px;
  color: var(--c-slate-600);
  font-weight: 500;
}

.infographic-steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.info-step-card {
  background: var(--c-bg-paper);
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  min-width: 0;
  box-sizing: border-box;
}

.info-step-card.highlight {
  border-color: var(--c-gold-400);
  background: var(--c-gold-50);
}

.i-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-navy-900);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
}

.i-badge.gold { background: var(--c-gold-500); }

.info-step-card h4 {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 800;
  color: var(--c-navy-950);
  margin-bottom: 12px;
}

.i-amount {
  margin-bottom: 12px;
}

.i-amount strong {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 900;
  color: var(--c-navy-950);
}

.i-amount small {
  font-size: 14px;
  color: var(--c-slate-600);
  margin-left: 8px;
  font-weight: 600;
}

.info-step-card p {
  font-size: 16.5px;
  color: var(--c-slate-700);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

.infographic-total-banner {
  background: var(--c-navy-950);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
}

.total-lead {
  min-width: 0;
  flex: 1;
}

.total-lead strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--c-gold-300);
  margin-bottom: 6px;
  font-weight: 900;
}

.total-lead p {
  font-size: 16px;
  color: var(--c-slate-200);
  margin: 0;
  font-weight: 500;
}

.total-proof span {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.finance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.finance-box {
  background: #ffffff;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}

.f-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.f-icon-circle {
  font-size: 24px;
}

.f-head h4 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--c-navy-950);
}

.finance-box p {
  font-size: 16.5px;
  color: var(--c-slate-700);
  line-height: 1.75;
  margin: 0;
  font-weight: 500;
}

@media (max-width: 768px) {
  .price-infographic-card {
    padding: 22px 16px;
    box-sizing: border-box;
  }
  .infographic-top {
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .infographic-top h3 {
    font-size: clamp(17.5px, 4.8vw, 20px);
    line-height: 1.4;
  }
  .infographic-top p {
    font-size: 14.5px;
    line-height: 1.6;
  }
  .infographic-steps-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 20px;
  }
  .info-step-card {
    padding: 20px 16px;
  }
  .info-step-card h4 {
    font-size: 18px;
  }
  .i-amount strong {
    font-size: clamp(24px, 6.5vw, 28px);
  }
  .info-step-card p {
    font-size: 14.5px;
  }
  .infographic-total-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 16px;
    gap: 14px;
  }
  .total-lead {
    width: 100%;
    min-width: 0;
  }
  .total-lead strong {
    font-size: clamp(16.5px, 4.5vw, 19px);
    line-height: 1.4;
  }
  .total-lead p {
    font-size: 14px;
    line-height: 1.6;
  }
  .finance-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .finance-box {
    padding: 20px 16px;
    min-width: 0;
    box-sizing: border-box;
  }
  .f-head h4 {
    font-size: 17.5px;
    line-height: 1.35;
  }
  .finance-box p {
    font-size: 14.5px;
  }
}

/* ==========================================================================
   8. SECTION: VISUAL DOCTOR (白衣ポートレート & 院長メッセージ)
   ========================================================================= */
/* ==========================================================================
   8. SECTION: VISUAL DOCTOR (白衣ポートレート & 院長メッセージ)
   ========================================================================= */
.section-visual-doctor {
  padding: 60px 0;
  background: #ffffff;
  border-top: 1px solid var(--c-slate-200);
}

.doctor-editorial-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: flex-start;
}

.doctor-portrait-side {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  border: 4px solid var(--c-bg-paper);
}

.doctor-img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.doctor-nameplate {
  background: var(--c-navy-950);
  color: #ffffff;
  padding: 22px 26px;
}

.doctor-nameplate strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}

.doctor-nameplate span {
  font-size: 15px;
  color: var(--c-slate-300);
  line-height: 1.5;
  display: block;
  font-weight: 600;
}

.doctor-heading {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  color: var(--c-navy-950);
  line-height: 1.4;
  margin-bottom: 22px;
}

.doctor-text p {
  font-size: 17.5px;
  color: var(--c-slate-700);
  line-height: 1.85;
  margin-bottom: 18px;
  font-weight: 500;
}

.doctor-history {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--c-slate-200);
}

.doctor-history strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-navy-950);
  display: block;
  margin-bottom: 10px;
}

.doctor-history ul {
  list-style: none;
  font-size: 15px;
  color: var(--c-slate-600);
  line-height: 1.8;
  font-weight: 600;
}

@media (max-width: 900px) {
  .doctor-editorial-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .doctor-portrait-side { max-width: 400px; margin-inline: auto; }
  .doctor-heading { font-size: clamp(20px, 5.2vw, 26px); }
}

/* ==========================================================================
   9. SECTION: VISUAL ACCESS (完全バリアフリー設備)
   ========================================================================= */
.section-visual-access {
  padding: 60px 0;
  background: var(--c-bg-paper);
  border-top: 1px solid var(--c-slate-200);
}

.access-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--c-slate-200);
}

.access-map-frame {
  min-height: 420px;
}

.access-map-frame iframe {
  width: 100%;
  height: 100%;
}

.access-details-card {
  padding: 38px 40px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.access-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--c-slate-200);
  padding-bottom: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.a-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-slate-500);
  letter-spacing: 0.08em;
}

.a-value {
  font-size: 17px;
  color: var(--c-navy-950);
  line-height: 1.6;
  font-weight: 600;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.station-lead {
  color: var(--c-gold-600);
  font-weight: 800;
  display: inline-block;
  margin-top: 4px;
  font-size: 18px;
}

.elevator-highlight {
  background: var(--c-gold-50);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--c-gold-500);
  border-bottom: none;
}

.elevator-tag {
  display: block;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
  color: var(--c-navy-950);
  margin-bottom: 6px;
}

.elevator-highlight p {
  font-size: 16px;
  color: var(--c-slate-700);
  line-height: 1.6;
  margin: 0;
  font-weight: 600;
}

.simple-hours-table-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.simple-hours-table {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
  margin-top: 6px;
  font-weight: 600;
  table-layout: fixed;
}

.simple-hours-table th:first-child,
.simple-hours-table td:first-child {
  width: 30%;
  white-space: nowrap;
}

.simple-hours-table th, .simple-hours-table td {
  padding: 8px 4px;
  border: 1px solid var(--c-slate-200);
}

.simple-hours-table th { background: var(--c-slate-100); }
.a-value small { font-size: 13px; color: var(--c-slate-500); display: block; margin-top: 4px; }

.tel-text {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 900;
  color: var(--c-navy-950);
}

.tel-sub { font-size: 13px; color: var(--c-slate-500); margin-left: 8px; font-weight: 600; }

@media (max-width: 900px) {
  .access-duo-grid { grid-template-columns: 1fr; }
  .access-map-frame { min-height: 280px; }
  .access-details-card { padding: 24px 18px; }
}

@media (max-width: 640px) {
  .access-details-card { padding: 20px 12px; }
  .elevator-highlight {
    padding: 14px 14px;
  }
  .elevator-tag {
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.4;
  }
  .elevator-highlight p {
    font-size: 14px;
  }
  .simple-hours-table {
    font-size: 11px;
    letter-spacing: -0.02em;
  }
  .simple-hours-table th, .simple-hours-table td {
    padding: 6px 1px;
  }
  .simple-hours-table th:first-child,
  .simple-hours-table td:first-child {
    width: 28%;
    font-size: 10.5px;
    padding: 6px 2px;
  }
}

/* ==========================================================================
   10. FINAL SANCTUARY CTA (光彩の聖域・白文字消失バグ根絶)
   ========================================================================== */
.section-final-cta {
  position: relative;
  padding: 72px 0;
  background-color: #060e1a !important;
  background: linear-gradient(145deg, #060e1a 0%, #0a1728 50%, #0f2038 100%) !important;
  color: #ffffff !important;
  text-align: center;
  overflow: hidden;
  border-top: 2px solid rgba(198, 156, 58, 0.4);
}

.final-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(198, 156, 58, 0.16) 0%, transparent 65%);
  pointer-events: none;
}

.final-cta-container {
  position: relative;
  z-index: 1;
}

.final-kicker {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--c-gold-300);
  display: block;
  margin-bottom: 12px;
}

.final-title {
  font-family: var(--font-serif);
  font-size: clamp(21px, 5.2vw, 44px);
  font-weight: 900;
  line-height: 1.38;
  margin-bottom: 18px;
  color: #ffffff !important;
  text-wrap: balance;
}

.final-lead {
  font-size: clamp(17px, 2.2vw, 20px);
  color: #cbd5e1 !important;
  line-height: 1.8;
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: 36px;
  font-weight: 500;
  text-wrap: pretty;
}

.final-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 28px;
}

.btn-final-web {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(16px, 2.2vw, 26px);
  background: linear-gradient(135deg, var(--c-gold-500), var(--c-gold-600));
  border-radius: var(--radius-md);
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(171, 129, 36, 0.45);
  transition: all var(--tr-smooth);
  text-align: left;
  min-height: 68px;
  box-sizing: border-box;
}

.btn-final-web:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(171, 129, 36, 0.55);
}

.btn-final-web .btn-sub {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-gold-100);
}

.btn-final-web .btn-main {
  font-size: clamp(16.5px, 1.6vw, 19px);
  font-weight: 900;
  letter-spacing: 0.03em;
}

.btn-final-web .arrow {
  width: 22px;
  height: 22px;
  color: #ffffff;
  transition: transform var(--tr-fast);
}

.btn-final-web:hover .arrow { transform: translateX(4px); }

.btn-final-tel {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  color: #ffffff;
  transition: all var(--tr-fast);
  text-align: left;
  min-height: 68px;
}

.btn-final-tel:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--c-gold-300);
  transform: translateY(-2px);
}

.btn-final-tel .icon {
  width: 26px;
  height: 26px;
  color: var(--c-gold-300);
}

.btn-final-tel .btn-sub {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}

.btn-final-tel .btn-tel {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
}

.final-trust-notes {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 15px;
  font-weight: 700;
  color: #94a3b8 !important;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .section-final-cta { padding: 60px 0; }
  .final-buttons { flex-direction: column; gap: 12px; }
  .final-trust-notes { flex-direction: column; gap: 6px; text-align: center; }
}

/* ==========================================================================
   Global Footer (Minimal & Conversion-Focused, Zero Distraction)
   ========================================================================== */
.global-footer {
  background: #040911;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 36px 0 24px;
  color: #94a3b8;
  font-size: 12.5px;
  text-align: center;
}

.footer-brand {
  margin-bottom: 18px;
}

.f-clinic {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  display: block;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.f-address {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.6;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 18px;
}

.copyright {
  font-size: 11px;
  color: #475569;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

/* ==========================================================================
   Mobile Fixed Dock (48px+ Touch Target, Safe-Area Compatible)
   ========================================================================== */
.mobile-sticky-dock {
  display: none;
}

@media (max-width: 900px) {
  .mobile-sticky-dock {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    z-index: 999;
    background: rgba(6, 14, 26, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(198, 156, 58, 0.35);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }

  .dock-inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 8px;
    max-width: 480px;
    margin-inline: auto;
  }

  .dock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 13.5px;
    transition: transform var(--tr-fast);
  }

  .dock-tel {
    background: #ffffff;
    color: var(--c-navy-950);
    gap: 6px;
    border: 1px solid var(--c-slate-200);
  }

  .dock-icon {
    width: 18px;
    height: 18px;
    color: var(--c-navy-900);
  }

  .dock-web {
    background: linear-gradient(135deg, var(--c-gold-500), var(--c-gold-600));
    color: #ffffff;
    flex-direction: column;
    line-height: 1.15;
    box-shadow: 0 4px 14px rgba(171, 129, 36, 0.4);
  }

  .dock-web-main {
    font-size: 13.5px;
    letter-spacing: 0.02em;
  }

  .dock-web-sub {
    font-size: 9.5px;
    color: var(--c-gold-100);
    font-weight: 500;
  }
}

/* ==========================================================================
   INTERACTIVE ANIMATIONS & ENGAGEMENT HOOKS
   ========================================================================== */

/* 1. Top Scroll Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #c9a84c 0%, #eab308 50%, #fef08a 100%);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.85);
  z-index: 10001;
  pointer-events: none;
  transition: width 0.08s ease-out;
}

/* 2. Hero Cinematic Loop Videos */
.hero-bleed-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.hero-mobile-visual video.hero-mobile-video {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}

/* 3. Hero Scroll Down Cue */
.hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(198, 156, 58, 0.4);
  border-radius: var(--radius-full);
  color: var(--c-navy-950);
  text-decoration: none;
  width: fit-content;
  box-shadow: 0 4px 16px rgba(10, 23, 40, 0.07);
  transition: all var(--tr-smooth);
}

.hero-scroll-cue:hover {
  background: #ffffff;
  border-color: var(--c-gold-500);
  transform: translateY(2px);
  box-shadow: 0 6px 20px rgba(198, 156, 58, 0.28);
}

.hero-scroll-cue .cue-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--c-navy-900);
}

.hero-scroll-cue .cue-mouse {
  width: 16px;
  height: 24px;
  border: 2px solid var(--c-gold-600);
  border-radius: 9px;
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 3px;
}

.hero-scroll-cue .cue-wheel {
  width: 3px;
  height: 5px;
  background: var(--c-gold-600);
  border-radius: 2px;
  animation: cueWheelDrop 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.hero-scroll-cue .cue-arrow {
  width: 16px;
  height: 16px;
  color: var(--c-gold-600);
  animation: cueArrowBounce 1.8s ease-in-out infinite;
}

@keyframes cueWheelDrop {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(8px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes cueArrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* 4. Scroll-Triggered Reveal Animations */
.reveal-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-fade.is-active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 5. CTA Button Shimmer Effect (目を引く上品な光彩走査) */
.btn-hero-web,
.btn-primary-reserve,
.btn-final-web,
.dock-web {
  position: relative;
  overflow: hidden;
}

.btn-hero-web::after,
.btn-primary-reserve::after,
.btn-final-web::after,
.dock-web::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 80%;
  height: 200%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  animation: btnShimmerSweep 4.5s ease-in-out infinite;
}

@keyframes btnShimmerSweep {
  0%, 65% {
    left: -120%;
  }
  100% {
    left: 180%;
  }
}
/* ==========================================================================
   FINANCE SIMULATOR (Dental Loan & Medical Deduction Interactive Tool)
   ========================================================================== */
.finance-simulator-card {
  margin-top: 48px;
  background: #ffffff;
  border: 1.5px solid rgba(198, 156, 58, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(10, 23, 40, 0.07);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}

.sim-header {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 32px;
}

.sim-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(198, 156, 58, 0.12);
  color: var(--c-gold-600);
  border: 1px solid rgba(198, 156, 58, 0.35);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}

.sim-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-navy-950);
  line-height: 1.35;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.sim-lead {
  font-size: 15px;
  color: var(--c-slate-600);
  line-height: 1.7;
}

.sim-lead strong {
  color: var(--c-navy-900);
}

.sim-body-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: start;
}

/* Controls Panel */
.sim-controls-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sim-control-group {
  background: #fbf9f6;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: border-color var(--tr-fast);
}

.sim-control-group:focus-within {
  border-color: var(--c-gold-500);
}

.sim-label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.label-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-step {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  background: var(--c-navy-900);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.label-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-navy-950);
}

.label-current {
  font-size: clamp(10.5px, 2.8vw, 13.5px);
  font-weight: 800;
  color: var(--c-gold-600);
  background: #ffffff;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(198, 156, 58, 0.3);
  max-width: 100%;
  box-sizing: border-box;
  display: inline-block;
  line-height: 1.35;
  white-space: nowrap;
}

.sim-chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sim-chips-grid.grid-months {
  grid-template-columns: repeat(5, 1fr);
}

.sim-chips-grid.grid-income {
  grid-template-columns: repeat(2, 1fr);
}

.sim-chip {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  transition: all var(--tr-fast);
  color: var(--c-navy-950);
}

.sim-chip:hover {
  border-color: var(--c-gold-400);
  transform: translateY(-1px);
}

.sim-chip.is-active {
  background: linear-gradient(135deg, var(--c-navy-950), #162a45);
  border-color: var(--c-navy-950);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(10, 23, 40, 0.2);
}

.chip-main {
  font-family: var(--font-display), var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.chip-sub {
  font-size: 10.5px;
  color: var(--c-slate-500);
  font-weight: 500;
  line-height: 1.1;
}

.sim-chip.is-active .chip-sub {
  color: var(--c-gold-300);
}

.sim-slider-wrap {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
}

.sim-slider-wrap input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  accent-color: var(--c-gold-500);
  cursor: pointer;
}

.slider-scales {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--c-slate-500);
  margin-top: 6px;
  font-weight: 600;
}

.sim-control-hint {
  font-size: 11.5px;
  color: var(--c-slate-500);
  line-height: 1.5;
  margin-top: 10px;
}

/* Results Panel */
.sim-results-panel {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.results-box-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding-bottom: 12px;
}

.res-tag {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-navy-950);
  letter-spacing: 0.03em;
  display: block;
}

.res-sub {
  font-size: 11px;
  color: var(--c-slate-500);
  display: block;
  margin-top: 2px;
}

.result-metric-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  border: 1.5px solid #e2e8f0;
  transition: all var(--tr-smooth);
}

.result-metric-card.highlight-gold {
  border-color: rgba(198, 156, 58, 0.4);
  background: linear-gradient(to bottom, #ffffff, #fdfbf7);
  box-shadow: 0 4px 14px rgba(198, 156, 58, 0.08);
}

.result-metric-card.highlight-emerald {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(to bottom, #ffffff, #f0fdf4);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.06);
}

.metric-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 8px;
}

.m-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.m-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-navy-950);
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.m-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(198, 156, 58, 0.12);
  color: var(--c-gold-600);
  flex-shrink: 0;
}

.m-badge.success {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.metric-val-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 4px;
}

.m-prefix {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-slate-600);
}

.m-amount {
  font-family: var(--font-display), var(--font-sans);
  font-size: 32px;
  font-weight: 900;
  color: var(--c-gold-600);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.m-amount.text-emerald {
  color: #059669;
}

.m-unit {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-slate-700);
}

.metric-footer-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
  font-size: 12px;
  color: var(--c-slate-600);
}

.metric-footer-note strong {
  color: var(--c-navy-950);
}

.metric-breakdown {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(16, 185, 129, 0.2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--c-slate-600);
}

.metric-breakdown .b-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.metric-breakdown .b-dot {
  font-size: 8px;
  color: #10b981;
}

.metric-breakdown strong {
  color: #065f46;
}

/* Net Comparison Card */
.result-net-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.net-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--c-slate-600);
  padding: 4px 0;
}

.net-row.discount {
  color: #059669;
}

.net-val {
  font-family: var(--font-display), var(--font-sans);
  font-weight: 700;
  color: var(--c-navy-950);
}

.net-val.minus {
  color: #059669;
}

.net-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
}

.net-row.total {
  padding-top: 4px;
  align-items: baseline;
}

.net-final-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-navy-950);
  display: block;
  line-height: 1.2;
}

.net-label-col small {
  font-size: 10px;
  color: var(--c-slate-500);
  white-space: nowrap;
  display: block;
}

.net-final-val {
  font-family: var(--font-display), var(--font-sans);
  font-size: 22px;
  font-weight: 900;
  color: var(--c-navy-950);
}

/* CTA inside Simulator */
.sim-cta-box {
  background: linear-gradient(135deg, var(--c-navy-950), #162a45);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  color: #ffffff;
  text-align: center;
}

.sim-cta-text {
  font-size: 12.5px;
  color: var(--c-slate-200);
  line-height: 1.5;
  margin-bottom: 12px;
}

.sim-cta-text strong {
  color: var(--c-gold-300);
}

.btn-sim-web {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px clamp(12px, 3vw, 18px);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-gold-500), var(--c-gold-600));
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(13px, 3.4vw, 14.5px);
  box-shadow: 0 4px 14px rgba(171, 129, 36, 0.4);
  transition: all var(--tr-smooth);
  box-sizing: border-box;
  text-align: center;
}

.btn-sim-web:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(171, 129, 36, 0.5);
}

.btn-sim-web .arrow {
  width: 15px;
  height: 15px;
  transition: transform var(--tr-fast);
}

.btn-sim-web:hover .arrow {
  transform: translateX(3px);
}

.sim-disclaimer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 11.5px;
  color: var(--c-slate-500);
  line-height: 1.6;
}

/* Simulator Responsive */
@media (max-width: 900px) {
  .finance-simulator-card {
    padding: 24px 18px;
    margin-top: 36px;
  }

  .sim-title {
    font-size: 22px;
  }

  .sim-body-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .sim-controls-panel,
  .sim-results-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .sim-control-group {
    padding: 16px 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .sim-chips-grid.grid-months {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .sim-chips-grid.grid-months .chip-main {
    font-size: 14px;
  }

  .sim-chips-grid.grid-months .chip-sub {
    font-size: 10px;
  }

  .sim-chips-grid.grid-income {
    grid-template-columns: 1fr;
  }

  .sim-results-panel {
    padding: 18px 14px;
  }

  .result-metric-card {
    padding: 14px 14px;
    box-sizing: border-box;
  }

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

  .m-badge {
    font-size: 10.5px;
    padding: 2px 7px;
  }

  .m-amount {
    font-size: clamp(22px, 6vw, 26px);
  }
  .m-unit {
    font-size: 13.5px;
    white-space: nowrap;
  }
  .result-net-card {
    padding: 14px 12px;
    box-sizing: border-box;
  }

  .net-row.total {
    gap: 6px;
    flex-wrap: wrap;
  }

  .net-label-col small {
    font-size: 9.5px;
    letter-spacing: -0.02em;
  }

  .net-final-val {
    white-space: nowrap;
    font-size: clamp(17.5px, 4.8vw, 20px);
    margin-left: auto;
  }
}

/* ==========================================================================
   Print Stylesheet (印刷用・単一ページPDF/長尺エクスポート最適化)
   ========================================================================== */
@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  body {
    background: #ffffff !important;
    color: #0f172a !important;
  }

  /* 非表示にする要素（プログレスバー、追従固定ドックなど） */
  .scroll-progress-bar,
  .mobile-sticky-dock,
  .fixed-scroll-top,
  .hero-scroll-cue {
    display: none !important;
  }

  /* アニメーション要素を即座に100%表示 */
  .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* セクションやカードの途切れを防止 */
  .hero-section,
  .section-visual-empathy,
  .section-visual-matrix-compare,
  .section-visual-protocol,
  .section-visual-stories,
  .section-visual-doctor,
  .section-visual-price,
  .section-visual-access,
  .final-cta-section,
  .protocol-card,
  .story-card,
  .matrix-compare-wrap,
  .doctor-editorial-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ヘッダー位置の固定解除 */
  .global-header {
    position: static !important;
    box-shadow: none !important;
  }
}



/* ==========================================================================
   CV RESTRUCTURE 2026-10-23
   Self check / Mid CTA / Protocol reassurance / Consult flow / Family / FAQ
   ========================================================================== */

/* ---- Self check (Interactive Diagnostic Console) ---- */
.section-selfcheck {
  padding: 12px 0 68px;
  background: var(--c-bg-paper);
}

.selfcheck-card {
  max-width: 920px;
  margin-inline: auto;
  background: #ffffff;
  border: 1.5px solid var(--c-gold-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 4.5vw, 48px);
  position: relative;
  overflow: hidden;
}

.selfcheck-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-gold-300), var(--c-gold-500), var(--c-gold-300));
}

.selfcheck-head {
  text-align: center;
  margin-bottom: 26px;
}

.selfcheck-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 900;
  color: var(--c-navy-950);
  line-height: 1.35;
}

.selfcheck-lead {
  color: var(--c-slate-600);
  font-size: 15px;
  margin-top: 8px;
  font-weight: 500;
}

.selfcheck-list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.selfcheck-list li {
  min-width: 0;
}

.selfcheck-list label {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 12px 18px;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-md);
  background: var(--c-slate-50);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-slate-800);
  transition: all var(--tr-fast);
  user-select: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.selfcheck-list input {
  appearance: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid var(--c-slate-400);
  border-radius: 6px;
  background: #ffffff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all var(--tr-fast);
}

.selfcheck-list input::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity var(--tr-fast);
}

.selfcheck-list input:checked {
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
}

.selfcheck-list input:checked::after {
  opacity: 1;
}

.selfcheck-list input:focus-visible {
  outline: 3px solid var(--c-gold-300);
  outline-offset: 2px;
}

.check-seq {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--c-gold-600);
  background: rgba(184, 151, 62, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}

.check-text {
  flex: 1;
  min-width: 0;
}

.selfcheck-list label:hover {
  border-color: var(--c-gold-300);
  background: #ffffff;
  transform: translateY(-1px);
}

.selfcheck-list label:has(input:checked) {
  border-color: var(--c-gold-400);
  background: linear-gradient(135deg, rgba(254, 252, 243, 0.95), rgba(254, 249, 231, 0.95));
  box-shadow: 0 2px 8px rgba(184, 151, 62, 0.15);
}

.selfcheck-list label:has(input:checked) .check-seq {
  background: var(--c-gold-500);
  color: #ffffff;
}

.selfcheck-result {
  margin-top: 26px;
  border-radius: var(--radius-lg);
  background: var(--c-navy-50);
  padding: 22px 24px;
  text-align: center;
  border: 1px dashed var(--c-slate-300);
  transition: all var(--tr-smooth);
}

.result-empty {
  color: var(--c-slate-500);
  font-size: 14.5px;
  margin: 0;
  display: block;
  text-align: center;
  line-height: 1.6;
}

.pulse-dot {
  color: var(--c-gold-500);
  display: inline-block;
  margin-right: 4px;
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

.result-filled {
  display: none;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.selfcheck-card:has(input:checked) .result-empty {
  display: none;
}

.selfcheck-card:has(input:checked) .result-filled {
  display: block;
}

.selfcheck-card:has(input:checked) .selfcheck-result {
  background: linear-gradient(135deg, var(--c-navy-950) 0%, #0d1e38 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  box-shadow: var(--shadow-card);
  color: #ffffff;
  padding: 28px;
}

.result-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-gold-300);
  margin-bottom: 12px;
}

.result-status-badge .badge-icon {
  font-weight: 900;
  color: var(--c-gold-400);
}

.result-main-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.5vw, 24px);
  color: #ffffff;
  margin-bottom: 10px;
  font-weight: 800;
  line-height: 1.4;
}

.result-body-text {
  font-size: 15px;
  color: #dbe3ee;
  max-width: 680px;
  margin: 0 auto 20px;
  line-height: 1.75;
}

.result-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.selfcheck-cta,
.mid-cta-web {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 34px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-gold-400), var(--c-gold-600));
  color: #ffffff;
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-gold);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}

.selfcheck-cta svg,
.mid-cta-web svg {
  width: 18px;
  height: 18px;
}

.selfcheck-cta:hover,
.mid-cta-web:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(184, 151, 62, 0.45);
}

.result-micro-note {
  font-size: 12.5px;
  color: #94a3b8;
  font-weight: 500;
}

@media (max-width: 720px) {
  .selfcheck-card {
    padding: 22px 14px;
    border-radius: var(--radius-lg);
  }
  .selfcheck-list { grid-template-columns: minmax(0, 1fr); }
  .selfcheck-list label {
    padding: 11px 12px;
    gap: 10px;
    font-size: 14px;
  }
  .selfcheck-result {
    padding: 16px 12px;
    box-sizing: border-box;
  }
  .result-empty {
    font-size: 13px;
  }
  .selfcheck-card:has(input:checked) .selfcheck-result {
    padding: 20px 12px;
    border-radius: var(--radius-md);
  }
  .result-status-badge {
    max-width: 100%;
    padding: 5px 10px;
    font-size: 11.5px;
    line-height: 1.4;
    white-space: normal;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
  }
  .result-status-badge .ib {
    white-space: nowrap;
  }
  .result-main-title {
    font-size: clamp(16.5px, 4.4vw, 19px);
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .result-body-text {
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .selfcheck-cta {
    width: 100%;
    max-width: 295px;
    margin: 0 auto;
    min-height: 48px;
    padding: 11px 12px;
    font-size: 14px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 6px 18px rgba(184, 151, 62, 0.35);
  }
  .selfcheck-cta svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .selfcheck-cta span {
    white-space: nowrap;
    font-size: 14px;
  }
}

/* ---- Compare footnote ---- */
.matrix-footnote {
  font-size: 12.5px;
  color: var(--c-slate-500);
  margin-top: 12px;
  text-align: right;
}

@media (max-width: 640px) {
  .matrix-footnote {
    padding-inline: 14px;
    text-align: left;
    font-size: 11.5px;
    line-height: 1.5;
  }
}

/* ---- Mid-page CTA band ---- */
.mid-cta-band {
  background: linear-gradient(135deg, var(--c-navy-950) 0%, #0d1e38 100%);
  padding: 40px 0;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.mid-cta-inner {
  text-align: center;
}

.mid-cta-lead {
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 800;
  margin-bottom: 20px;
  text-wrap: balance;
  line-height: 1.45;
}

.mid-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.mid-cta-tel {
  color: var(--c-gold-300);
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--tr-fast);
}

.mid-cta-tel:hover {
  color: var(--c-gold-200);
}

.mid-cta-note {
  color: #94a3b8;
  font-size: 13px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .mid-cta-web { width: 100%; }
}

/* ==========================================================================
   CONSULTATION FLOW (安心の4大お約束 × タイムライン × パッキングリスト × ファクト)
   ========================================================================== */
.section-consult-flow {
  padding: 68px 0;
  background: var(--c-bg-paper);
  border-top: 1px solid var(--c-slate-200);
}

/* 4 Pledges Grid (安心の4大お約束・ラグジュアリーカード) */
.consult-pledge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 36px;
  margin-bottom: 44px;
}

.pledge-card {
  background: #ffffff;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  transition: all var(--tr-smooth);
  position: relative;
  overflow: hidden;
}

.pledge-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background: linear-gradient(90deg, var(--c-gold-300), var(--c-gold-500));
}

.pledge-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-gold-400);
  box-shadow: var(--shadow-card);
}

.pledge-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.pledge-num {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 900;
  color: var(--c-gold-500);
  line-height: 1;
}

.pledge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-gold-50);
  border: 1px solid var(--c-gold-200);
  display: grid;
  place-content: center;
  color: var(--c-gold-600);
}

.pledge-icon svg {
  width: 22px;
  height: 22px;
}

.pledge-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 18.5px;
  font-weight: 800;
  color: var(--c-navy-950);
  line-height: 1.4;
  margin-bottom: 8px;
}

.pledge-highlight-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--c-navy-50);
  color: var(--c-navy-800);
  margin-bottom: 10px;
}

.pledge-body p {
  font-size: 14.5px;
  color: var(--c-slate-600);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 768px) {
  .consult-pledge-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pledge-card {
    padding: 22px 18px;
  }
}

/* 4-Step Consultation Flow (Visual Process Timeline) */
.consult-timeline-wrapper {
  background: #ffffff;
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 40px);
  margin-bottom: 36px;
  box-shadow: var(--shadow-card);
}

.timeline-header {
  text-align: center;
  margin-bottom: 32px;
}

.timeline-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-gold-600);
  display: block;
  margin-bottom: 4px;
}

.timeline-heading {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 800;
  color: var(--c-navy-950);
}

.consult-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
}

.consult-step {
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--tr-fast);
}

.consult-step:hover {
  background: #ffffff;
  border-color: var(--c-gold-300);
  box-shadow: var(--shadow-subtle);
}

.consult-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  right: -13px;
  width: 8px;
  height: 8px;
  border-top: 2.5px solid var(--c-gold-400);
  border-right: 2.5px solid var(--c-gold-400);
  transform: rotate(45deg);
  z-index: 2;
}

.cs-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cs-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--c-gold-600);
}

.cs-duration-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--c-navy-900);
  color: #ffffff;
}

.cs-body strong {
  display: block;
  font-size: 16px;
  color: var(--c-navy-950);
  line-height: 1.45;
  margin-bottom: 8px;
}

.cs-body p {
  font-size: 13.5px;
  color: var(--c-slate-600);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .consult-steps {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .consult-step::after { display: none; }
}

@media (max-width: 560px) {
  .consult-steps { grid-template-columns: 1fr; }
}

/* What to Bring (当日の持ち物・スマートパッキングリスト) */
.consult-belongings-box {
  background: linear-gradient(180deg, var(--c-gold-50) 0%, #ffffff 100%);
  border: 1.5px solid var(--c-gold-200);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 4vw, 36px);
  margin-bottom: 32px;
  box-shadow: var(--shadow-card);
}

.belongings-header {
  text-align: center;
  margin-bottom: 24px;
}

.belongings-tag {
  display: inline-block;
  background: var(--c-navy-900);
  color: var(--c-gold-200);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.belongings-title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 900;
  color: var(--c-navy-950);
  line-height: 1.4;
}

.belongings-note {
  font-size: 13.5px;
  color: var(--c-slate-600);
  margin-top: 6px;
}

.belongings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.belonging-item {
  background: #ffffff;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  transition: all var(--tr-fast);
  box-shadow: var(--shadow-subtle);
}

.belonging-item:hover {
  border-color: var(--c-gold-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.belonging-item.optional {
  background: #f8fafc;
  border-style: dashed;
}

.b-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.b-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--c-gold-100);
  color: var(--c-gold-700);
}

.b-badge.optional {
  background: var(--c-slate-200);
  color: var(--c-slate-700);
}

.b-status-icon {
  font-size: 18px;
}

.b-name {
  font-size: 16px;
  color: var(--c-navy-950);
  line-height: 1.4;
  margin-bottom: 8px;
}

.b-desc {
  font-size: 13px;
  color: var(--c-slate-600);
  line-height: 1.65;
  margin: 0;
  margin-top: auto;
}

@media (max-width: 900px) {
  .belongings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .belongings-grid {
    grid-template-columns: 1fr;
  }
}

/* 4 Key Facts Strip (メダル風ステータスバー) */
.consult-facts-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.cf-medal {
  background: linear-gradient(135deg, var(--c-navy-950) 0%, #0d1e38 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-subtle);
}

.cf-icon-wrap {
  font-size: 24px;
  flex-shrink: 0;
}

.cf-text-wrap {
  flex: 1;
}

.cf-label {
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 2px;
}

.cf-val {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--c-gold-300);
  line-height: 1.3;
}

@media (max-width: 900px) {
  .consult-facts-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .consult-facts-strip {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FOR FAMILIES (親御様の入れ歯を心配するご家族へ・マガジンレイアウト)
   ========================================================================== */
.section-family {
  padding: 0 0 68px;
  background: var(--c-bg-paper);
}

.family-editorial-card {
  max-width: 1040px;
  margin-inline: auto;
  background: #ffffff;
  border: 1.5px solid var(--c-gold-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.family-editorial-left {
  padding: clamp(32px, 4.5vw, 48px);
  background: linear-gradient(180deg, #fdfbf7 0%, #ffffff 100%);
  border-right: 1px solid var(--c-gold-200);
  display: flex;
  flex-direction: column;
}

.family-crest-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-gold-700);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.family-crest-badge .f-crest {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-gold-500);
  color: #ffffff;
  display: grid;
  place-content: center;
  font-size: 11px;
}

.family-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 900;
  color: var(--c-navy-950);
  line-height: 1.4;
  margin-bottom: 14px;
}

.family-lead-p {
  font-size: 15px;
  color: var(--c-slate-600);
  line-height: 1.75;
  margin-bottom: 24px;
}

.family-facility-pill {
  margin-top: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--c-navy-50);
  border: 1px solid var(--c-navy-100);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.facility-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.facility-text strong {
  display: block;
  font-size: 13.5px;
  color: var(--c-navy-900);
  margin-bottom: 3px;
}

.facility-text span {
  font-size: 12px;
  color: var(--c-slate-600);
  line-height: 1.5;
}

.family-editorial-right {
  padding: clamp(32px, 4.5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.points-board-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
  color: var(--c-navy-950);
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-gold-400);
}

.family-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.family-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.family-points .p-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-gold-100);
  color: var(--c-gold-600);
  display: grid;
  place-content: center;
  font-size: 12px;
  font-weight: 900;
  margin-top: 2px;
}

.family-points strong {
  display: block;
  font-size: 15.5px;
  color: var(--c-navy-950);
  margin-bottom: 3px;
  line-height: 1.45;
}

.family-points p {
  font-size: 13.5px;
  color: var(--c-slate-600);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 860px) {
  .family-editorial-card {
    grid-template-columns: 1fr;
  }
  .family-editorial-left {
    border-right: none;
    border-bottom: 1px solid var(--c-gold-200);
  }
}

/* ==========================================================================
   FAQ (よくあるご質問・カテゴリタグ付き)
   ========================================================================== */
.section-faq {
  padding: 68px 0;
  background: #ffffff;
  border-top: 1px solid var(--c-slate-200);
}

.faq-list {
  max-width: 900px;
  margin: 32px auto 0;
  display: grid;
  gap: 14px;
}

.faq-item {
  border: 1.5px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  background: var(--c-slate-50);
  overflow: hidden;
  transition: all var(--tr-fast);
}

.faq-item:hover {
  border-color: var(--c-gold-300);
}

.faq-item[open] {
  background: #ffffff;
  border-color: var(--c-gold-400);
  box-shadow: var(--shadow-subtle);
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  min-height: 60px;
  user-select: none;
}

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

/* Category Tags */
.faq-cat-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.faq-cat-tag.cat-consult {
  background: rgba(15, 23, 42, 0.08);
  color: var(--c-navy-900);
}

.faq-cat-tag.cat-care {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.faq-cat-tag.cat-cost {
  background: rgba(184, 151, 62, 0.15);
  color: var(--c-gold-700);
}

.faq-cat-tag.cat-treatment {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.faq-q,
.faq-a-mark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}

.faq-q {
  background: var(--c-navy-950);
  color: #ffffff;
}

.faq-a-mark {
  background: var(--c-gold-100);
  color: var(--c-gold-600);
}

.faq-q-text {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-navy-950);
  line-height: 1.5;
}

.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--c-gold-500);
  transition: transform var(--tr-fast);
}

.faq-toggle::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-toggle::after {
  transform: rotate(0deg);
}

.faq-a {
  display: flex;
  gap: 14px;
  padding: 0 22px 22px;
  border-top: 1px solid var(--c-slate-100);
  margin-top: 4px;
  padding-top: 16px;
}

.faq-a p {
  font-size: 15px;
  color: var(--c-slate-700);
  line-height: 1.85;
  margin: 0;
  padding-top: 3px;
}

@media (max-width: 640px) {
  .faq-item summary {
    display: grid;
    grid-template-columns: 28px 1fr 18px;
    grid-template-areas:
      "q cat toggle"
      "q text toggle";
    align-items: start;
    gap: 6px 10px;
    padding: 14px 14px;
  }
  .faq-item summary .faq-q {
    grid-area: q;
    width: 28px;
    height: 28px;
    font-size: 13.5px;
    margin-top: 2px;
  }
  .faq-item summary .faq-cat-tag {
    grid-area: cat;
    justify-self: start;
    font-size: 11px;
    padding: 2px 8px;
  }
  .faq-item summary .faq-q-text {
    grid-area: text;
    font-size: 14.5px;
    line-height: 1.48;
  }
  .faq-item summary .faq-toggle {
    grid-area: toggle;
    margin-top: 6px;
  }
  .faq-a {
    padding: 12px 14px 16px;
    gap: 10px;
  }
  .faq-a-mark {
    width: 28px;
    height: 28px;
    font-size: 13.5px;
  }
  .faq-a p {
    font-size: 14px;
    line-height: 1.75;
  }
}

/* Micro-guide in Hero */
.cta-sub-guide {
  font-size: 13px;
  color: var(--c-slate-500);
  margin-top: 8px;
  text-align: center;
  font-weight: 500;
}

@media (min-width: 901px) {
  .cta-sub-guide {
    text-align: left;
  }
}

/* Final Trust Notes */
.final-trust-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 700px;
  margin: 28px auto 0;
  text-align: left;
}

.final-trust-notes span {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  padding-left: 2px;
}

@media print {
  .selfcheck-result { display: none !important; }
  .mid-cta-band { break-inside: avoid; }
  .faq-item, .consult-step, .family-editorial-card, .selfcheck-card, .pledge-card, .consult-belongings-box { break-inside: avoid; }
}

section[id] {
  scroll-margin-top: 84px;
}


/* ==========================================================================
   LP v2 EXCLUSIVE STYLES: スリム化エディトリアル ＆ 動的パーソナライズ診断UI
   ========================================================================== */

/* 1. セクション2（共感カード）：長文段落の代替となる「1行解決ピル」 */
.pain-solution-pill {
  margin-top: auto;
  position: relative;
  display: block;
  background: linear-gradient(135deg, #fdfbf7 0%, #f7f1e1 100%);
  border: 1px solid rgba(198, 156, 58, 0.42);
  border-radius: 10px;
  padding: 10px 14px 10px 40px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--c-navy-950);
  line-height: 1.48;
  box-shadow: 0 2px 8px rgba(198, 156, 58, 0.1);
  box-sizing: border-box;
  max-width: 100%;
}

.pain-solution-pill .p-arrow {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-gold-500);
  color: #ffffff;
  font-size: 12px;
  flex-shrink: 0;
}

/* 2. セクション2.5：インタラクティブ30秒お悩み診断コンソール */
.result-empty[hidden],
.result-filled[hidden],
.btn-tool-action[hidden] {
  display: none !important;
}

.selfcheck-lead .lead-accent {
  color: var(--c-gold-700);
  font-weight: 800;
}

.selfcheck-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 780px;
  margin: 16px auto 0;
  padding: 10px 16px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: 999px;
}

.toolbar-counter {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-slate-600);
  padding: 4px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--c-slate-200);
  transition: all 0.25s ease;
}

.toolbar-counter strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: var(--c-navy-900);
  margin: 0 2px;
}

.toolbar-counter.has-selection {
  background: var(--c-navy-950);
  color: #ffffff;
  border-color: var(--c-gold-500);
}

.toolbar-counter.has-selection strong {
  color: var(--c-gold-300);
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-tool-action {
  appearance: none;
  border: 1px solid var(--c-gold-500);
  background: #fffdf7;
  color: var(--c-gold-700);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tool-action:hover {
  background: var(--c-gold-500);
  color: #ffffff;
}

.btn-tool-action.reset {
  border-color: var(--c-slate-300);
  background: #ffffff;
  color: var(--c-slate-600);
}

.btn-tool-action.reset:hover {
  background: var(--c-slate-200);
  color: var(--c-navy-950);
}

/* 選択肢内のカテゴリヒントバッジ（全画面幅で文字被りゼロの2段グリッド構造） */
.selfcheck-list label {
  position: relative;
  display: grid !important;
  grid-template-columns: 24px 1fr auto;
  grid-template-areas:
    "cb seq hint"
    "cb text text";
  align-items: center;
  gap: 6px 10px;
  padding: 14px 16px;
}

.selfcheck-list input[type="checkbox"] {
  grid-area: cb;
  align-self: center;
  margin: 0;
}

.selfcheck-list .check-seq {
  grid-area: seq;
  justify-self: start;
}

.selfcheck-list .check-text {
  grid-area: text;
  width: 100%;
  min-width: 0;
  line-height: 1.5;
}

.check-cat-hint {
  grid-area: hint;
  justify-self: end;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-slate-100);
  color: var(--c-slate-600);
  border: 1px solid var(--c-slate-200);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.selfcheck-list label:has(input:checked) .check-cat-hint {
  background: var(--c-gold-500);
  color: #ffffff;
  border-color: var(--c-gold-600);
}

/* 未選択時のガイドプレビュー */
.empty-prompt-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.pulse-dot {
  color: var(--c-gold-500);
  font-size: 14px;
  animation: diagPulse 1.6s infinite ease-in-out;
}

@keyframes diagPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-navy-950);
  line-height: 1.5;
}

.empty-preview-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.empty-preview-pills span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-slate-600);
  background: #ffffff;
  border: 1px dashed var(--c-slate-300);
  padding: 5px 12px;
  border-radius: 999px;
}

/* 選択時：リアルタイム動的診断コンソール */
#interactiveSelfCheck:has(input:checked) .selfcheck-result {
  background: linear-gradient(155deg, #091526 0%, #10233f 100%);
  border: 2px solid var(--c-gold-500);
  color: #ffffff;
  padding: 28px 26px;
  text-align: left;
  box-shadow: 0 20px 44px rgba(9, 21, 38, 0.26);
}

.diag-top-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: 18px;
  margin-bottom: 16px;
}

.diag-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.diag-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: var(--c-gold-500);
  color: #ffffff;
}

.diag-level-badge[data-tone="high"] {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}

.diag-match-rate {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-gold-200);
}

.diag-match-rate strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: #fbbf24;
  margin-left: 4px;
}

.diag-meter-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}

.diag-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #c69c3a 0%, #fbbf24 100%);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.diag-dynamic-headline {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.3vw, 23px);
  font-weight: 900;
  color: #ffffff !important;
  line-height: 1.5;
  margin: 0 0 8px;
}

.diag-dynamic-headline .gold-underline {
  color: #fde68a;
  text-decoration: underline;
  text-decoration-color: rgba(251, 191, 36, 0.6);
  text-underline-offset: 4px;
}

.diag-dynamic-lead {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.65;
  margin: 0;
}

/* 選択中のお悩みタグ一覧 */
.diag-selected-tags-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.tags-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--c-gold-300);
}

.diag-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.diag-tag-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diag-tag-pill:hover {
  background: rgba(239, 68, 68, 0.28);
  border-color: rgba(248, 113, 113, 0.7);
}

.diag-tag-pill .t-num {
  font-family: var(--font-display);
  font-weight: 900;
  color: #fbbf24;
}

.diag-tag-pill .t-close {
  font-size: 14px;
  opacity: 0.75;
}

/* 推奨設計カード（処方箋グリッド） */
.diag-prescription-section {
  margin-bottom: 22px;
}

.prescription-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.prescription-header .p-kicker {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--c-gold-300);
}

.prescription-header h4 {
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
}

.prescription-header h4 strong {
  color: #fbbf24;
  font-size: 19px;
}

.diag-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.diag-rx-card {
  background: #ffffff;
  color: var(--c-navy-950);
  border-radius: 14px;
  padding: 18px 18px 16px;
  border: 2px solid rgba(198, 156, 58, 0.45);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: rxCardPop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rxCardPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.rx-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.rx-cat-badge {
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--c-navy-950);
  color: var(--c-gold-300);
}

.rx-priority-tag {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--c-slate-600);
  background: var(--c-slate-100);
  padding: 2px 8px;
  border-radius: 999px;
}

.rx-priority-tag.is-star {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #f59e0b;
}

.rx-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 900;
  color: var(--c-navy-950);
  line-height: 1.4;
  margin: 2px 0;
}

.rx-matched-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rx-match-chip {
  font-size: 11.5px;
  font-weight: 800;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 6px;
}

.rx-point {
  font-size: 13.8px;
  color: var(--c-slate-700) !important;
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.rx-jump-link {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fdfaf2;
  border: 1px solid rgba(198, 156, 58, 0.45);
  color: var(--c-navy-950);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
}

.rx-jump-link:hover {
  background: var(--c-gold-500);
  color: #ffffff;
}

.rx-jump-link .rx-arrow {
  font-weight: 900;
  flex-shrink: 0;
}

/* 診断コンソール下部CTA */
.result-cta-wrap {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 18px;
}

.cta-custom-msg {
  font-size: 14.5px;
  color: #fef3c7 !important;
  margin: 0 0 12px !important;
  line-height: 1.6;
}

/* 診断カードからジャンプした先のハイライト演出 */
.diag-jump-highlight {
  animation: targetGlowPulse 2.2s ease-out;
}

@keyframes targetGlowPulse {
  0% { box-shadow: 0 0 0 0 rgba(198, 156, 58, 0.85); }
  40% { box-shadow: 0 0 0 10px rgba(198, 156, 58, 0.28); }
  100% { box-shadow: 0 0 0 0 rgba(198, 156, 58, 0); }
}

/* 3. セクション4（2段階治療）：段落削減後の箇条書き上余白 */
.check-list.compact-top {
  margin-top: 10px;
}

/* 4. セクション5（臨床症例）：3行ステップ要約 ＆ 詳細アコーディオン */
.case-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.c-q-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--c-slate-100);
  color: var(--c-navy-900);
  border: 1px solid var(--c-slate-200);
}

.case-3step-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.c-step-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: 10px;
}

.c-step-badge {
  display: inline-block;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fee2e2;
  color: #991b1b;
}

.c-step-badge.gold {
  background: #fef3c7;
  color: #92400e;
}

.c-step-badge.navy {
  background: #dcfce7;
  color: #065f46;
}

.c-step-item p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-navy-950);
  line-height: 1.55;
}

.case-detail-accordion {
  margin-top: 12px;
  border: 1px solid var(--c-slate-200);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.case-detail-accordion summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--c-slate-700);
  cursor: pointer;
  background: var(--c-slate-50);
}

.case-detail-accordion summary::-webkit-details-marker {
  display: none;
}

.case-detail-accordion .acc-icon {
  font-weight: 900;
  color: var(--c-gold-600);
  flex-shrink: 0;
}

.case-detail-accordion[open] .acc-icon {
  transform: rotate(45deg);
}

.case-acc-body {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--c-slate-600);
  line-height: 1.65;
  border-top: 1px solid var(--c-slate-200);
}

.case-acc-body p {
  margin: 0 0 6px;
}

.case-acc-body p:last-child {
  margin-bottom: 0;
}

/* 5. セクション8.5（持ち物）：サブテキスト調整 */
.b-title-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-slate-600);
  margin-left: 6px;
}

/* 6. SPモード（スマホ画面）でのv2コンポーネント最適化 */
@media (max-width: 640px) {
  .pain-solution-pill {
    font-size: 13.5px;
    padding: 9px 12px 9px 36px;
  }

  .pain-solution-pill .ib,
  .empty-title .ib,
  .supplement-title .ib,
  .family-points .ib,
  .faq-q-text .ib {
    white-space: normal;
  }

  .empty-prompt-row {
    flex-wrap: wrap;
    text-align: center;
  }

  .empty-title {
    font-size: 14.5px;
    max-width: 100%;
  }

  .btn-info-left,
  .supplement-title {
    min-width: 0;
    max-width: 100%;
  }

  .sim-badge {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    box-sizing: border-box;
    line-height: 1.45;
  }

  .family-editorial-left,
  .family-editorial-right {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .selfcheck-toolbar {
    border-radius: 12px;
    padding: 10px 12px;
    justify-content: center;
  }

  .selfcheck-list label {
    padding: 12px 12px;
    gap: 5px 8px;
  }

  .selfcheck-list .check-text .ib {
    white-space: normal;
  }

  .check-cat-hint {
    font-size: 11px;
  }

  #interactiveSelfCheck:has(input:checked) .selfcheck-result {
    padding: 20px 14px;
  }

  .diag-cards-grid {
    grid-template-columns: 1fr;
  }

  .diag-rx-card {
    padding: 14px 14px;
  }

  .rx-title {
    font-size: 16px;
  }

  .c-step-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 12px;
  }

  .c-step-badge {
    justify-self: start;
  }

  .b-title-sub {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}


/* ==========================================================================
   SENIOR-FRIENDLY UX/UI UPGRADE (高齢者・ご家族が快適に読み進められる視認性＆CTA強化)
   ========================================================================== */

/* 0. 全画面共通：文節ブロック (.ib) の1文字落ち防止 ＆ 自然な日本語改行 */
.ib {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
}

p, h1, h2, h3, h4, h5, li, blockquote {
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.pc-br {
  display: inline;
}

@media (max-width: 640px) {
  .pc-br {
    display: none;
  }
}

/* 1. 共感セクション直下：黒崎院長の大型ポートレート ＆ 力強い安心コールアウト */
.doctor-reassurance-strip {
  padding: 28px 32px !important;
  border-radius: 22px !important;
  border: 2px solid rgba(198, 156, 58, 0.55) !important;
  box-shadow: 0 20px 44px rgba(6, 14, 26, 0.24) !important;
}

.doctor-reassurance-strip .strip-main-layout {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

.doctor-reassurance-strip .strip-avatar-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 20px !important;
  flex-shrink: 0;
  padding-right: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.strip-avatar-frame {
  width: 154px;
  height: 170px;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid var(--c-gold-400, #dfba5e);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
  flex-shrink: 0;
  background: #e2e8f0;
  position: relative;
}

.strip-avatar-frame .strip-avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  object-fit: cover !important;
  object-position: 62% 16% !important;
  transform: scale(1.36);
  transform-origin: 62% 20%;
  display: block;
}

.doctor-reassurance-strip .strip-avatar-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 6px;
}

.doctor-reassurance-strip .avatar-title-tag {
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  color: #fef3c7 !important;
  background: rgba(198, 156, 58, 0.25) !important;
  border: 1px solid rgba(223, 186, 94, 0.5) !important;
  border-radius: 8px !important;
  align-self: flex-start;
  line-height: 1.4 !important;
}

.doctor-reassurance-strip .avatar-name-tag {
  font-family: var(--font-serif);
  font-size: 25px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em;
  line-height: 1.3 !important;
}

.doctor-reassurance-strip .avatar-clinic-sub {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: 0.03em;
  opacity: 1 !important;
}

.doctor-reassurance-strip .strip-quote-heading {
  font-size: clamp(18.5px, 2vw, 22px) !important;
  line-height: 1.75 !important;
  color: #fef3c7 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .doctor-reassurance-strip {
    padding: 22px 18px !important;
  }

  .doctor-reassurance-strip .strip-main-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  .doctor-reassurance-strip .strip-avatar-wrap {
    padding-right: 0 !important;
    padding-bottom: 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    gap: 16px !important;
  }

  .strip-avatar-frame {
    width: 114px;
    height: 128px;
    border-radius: 16px;
  }

  .doctor-reassurance-strip .strip-avatar-meta {
    min-width: 0;
    flex: 1;
  }

  .doctor-reassurance-strip .avatar-title-tag {
    font-size: 11.5px !important;
    padding: 4px 8px !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .doctor-reassurance-strip .avatar-name-tag {
    font-size: 22px !important;
  }

  .doctor-reassurance-strip .avatar-clinic-sub {
    font-size: 12.5px !important;
    color: #f8fafc !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }

  .doctor-reassurance-strip .strip-quote-heading {
    font-size: 17.5px !important;
    line-height: 1.72 !important;
  }
}

/* 2. セクション8（院長メッセージ）：ポートレート写真拡大＆文字サイズ引き上げ */
@media (min-width: 901px) {
  .doctor-editorial-wrap {
    grid-template-columns: 43% 1fr !important;
  }
}

.doctor-portrait-side .doctor-img {
  object-position: 58% 15% !important;
}

.doctor-nameplate strong {
  font-size: clamp(21px, 2.4vw, 26px) !important;
  display: block;
  margin-bottom: 4px;
}

.doctor-nameplate span {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}

.doctor-text p {
  font-size: clamp(16.5px, 1.8vw, 18.5px) !important;
  line-height: 1.9 !important;
}

.doctor-history strong {
  font-size: 16px !important;
}

.doctor-history li {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}

/* 3. 高齢者にも見やすい全体タイポグラフィ底上げ（小さすぎる文字の一掃） */

/* ヘッダー */
.clinic-sub {
  font-size: 11.5px !important;
}

.header-trust-badge {
  font-size: 13.5px !important;
}

.btn-tel-content .btn-sub {
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

.btn-primary-reserve {
  font-size: 15px !important;
  padding: 12px 20px !important;
}

/* ファーストビュー */
.kicker-badge {
  font-size: 14.5px !important;
}

.kicker-text {
  font-size: 15.5px !important;
  font-weight: 700 !important;
}

.hero-lead-line {
  font-size: clamp(16.5px, 2vw, 20px) !important;
}

.lead-sub-note {
  font-size: clamp(15px, 1.6vw, 17px) !important;
  color: var(--c-slate-700) !important;
}

.hero-trust-pills span {
  font-size: clamp(15px, 1.6vw, 17px) !important;
  padding: 8px 14px !important;
}

.hero-tel-label {
  font-size: 13.5px !important;
}

.cta-clean-note,
.cta-clean-note .ib {
  font-size: 15.5px !important;
  color: var(--c-navy-900) !important;
  font-weight: 800 !important;
}

.cta-sub-guide {
  font-size: 14.5px !important;
  color: var(--c-slate-700) !important;
  font-weight: 700 !important;
}

.hero-scroll-cue {
  padding: 10px 22px !important;
}

.hero-scroll-cue .cue-label {
  font-size: 15.5px !important;
  font-weight: 800 !important;
}

/* 共感カード */
.pain-case-tag,
.pain-badge {
  font-size: 13.5px !important;
  padding: 5px 12px !important;
}

.pain-quote-strip {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.pain-card-body h3 {
  font-size: clamp(19.5px, 2.2vw, 22px) !important;
}

.pain-solution-pill {
  font-size: 15.5px !important;
  padding: 12px 14px 12px 42px !important;
}

/* 30秒お悩み診断 */
.selfcheck-lead {
  font-size: clamp(16px, 1.8vw, 18px) !important;
}

.toolbar-counter {
  font-size: 15px !important;
  padding: 6px 14px !important;
}

.btn-tool-action {
  font-size: 14.5px !important;
  padding: 9px 18px !important;
  min-height: 42px;
}

.selfcheck-list input[type="checkbox"] {
  width: 26px !important;
  height: 26px !important;
}

.selfcheck-list .check-seq {
  font-size: 14.5px !important;
  padding: 4px 10px !important;
}

.selfcheck-list .check-cat-hint {
  font-size: 13px !important;
  padding: 4px 11px !important;
}

.selfcheck-list .check-text,
.selfcheck-list .check-text .ib {
  font-size: clamp(16.5px, 1.8vw, 18px) !important;
  font-weight: 800 !important;
}

.empty-title {
  font-size: clamp(16px, 1.8vw, 18px) !important;
}

.empty-preview-pills span {
  font-size: 14px !important;
  padding: 6px 14px !important;
}

.diag-level-badge {
  font-size: 14px !important;
  padding: 6px 16px !important;
}

.diag-match-rate {
  font-size: 15.5px !important;
}

.diag-match-rate strong {
  font-size: 26px !important;
}

.diag-dynamic-lead {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.tags-label {
  font-size: 14px !important;
}

.diag-tag-pill {
  font-size: 14px !important;
  padding: 6px 12px !important;
  min-height: 36px;
}

.prescription-header h4 {
  font-size: 18px !important;
}

.rx-cat-badge,
.rx-priority-tag,
.rx-match-chip {
  font-size: 13px !important;
  padding: 4px 10px !important;
}

.rx-title {
  font-size: clamp(18px, 2vw, 20px) !important;
}

.rx-point {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}

.rx-jump-link {
  font-size: 14.5px !important;
  padding: 12px 14px !important;
  min-height: 48px;
  background: linear-gradient(135deg, #fffdf7 0%, #f9f1dc 100%) !important;
  border: 1.5px solid var(--c-gold-500) !important;
  box-shadow: 0 3px 10px rgba(198, 156, 58, 0.14);
}

.cta-custom-msg,
.cta-custom-msg strong {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* 診断コンソール内のWEB＋電話デュアルCTA */
.diag-cta-duo {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  max-width: 780px;
  margin: 0 auto 12px;
  flex-wrap: wrap;
}

.diag-cta-duo .selfcheck-cta {
  flex: 1.4;
  min-width: 280px;
  min-height: 64px;
  font-size: clamp(16px, 1.8vw, 18.5px) !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  box-shadow: 0 10px 28px rgba(198, 156, 58, 0.45) !important;
}

.selfcheck-tel-cta {
  flex: 1;
  min-width: 240px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(251, 191, 36, 0.6);
  color: #ffffff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.selfcheck-tel-cta:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.selfcheck-tel-cta .tel-cta-sub {
  font-size: 12.5px;
  font-weight: 700;
  color: #fde68a;
}

.selfcheck-tel-cta .tel-cta-num {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.03em;
}

.result-micro-note,
.result-micro-note .ib {
  font-size: 14px !important;
  color: #e2e8f0 !important;
}

/* 比較表セクション */
.caption-item .c-tag {
  font-size: 15.5px !important;
}

.caption-item p {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.table-scroll-hint {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--c-navy-950) !important;
  background: #fef9eb;
  border: 1px solid rgba(198, 156, 58, 0.45);
  border-radius: 999px;
  padding: 6px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.matrix-compare-table .th-sub {
  font-size: 13.5px !important;
}

.matrix-compare-table .th-name {
  font-size: clamp(16px, 2vw, 20px) !important;
}

.matrix-compare-table .crown-badge {
  font-size: 13px !important;
  padding: 4px 12px !important;
}

.matrix-compare-table .item-title,
.matrix-compare-table .item-title .ib {
  font-size: clamp(14.5px, 1.7vw, 17px) !important;
}

.matrix-compare-table .td-main,
.matrix-compare-table .td-main .ib {
  font-size: clamp(15px, 1.8vw, 18px) !important;
}

.matrix-compare-table .td-detail,
.matrix-compare-table .td-detail .ib {
  font-size: clamp(13.5px, 1.5vw, 15px) !important;
  color: var(--c-slate-700) !important;
  font-weight: 600 !important;
}

.matrix-footnote {
  font-size: 14px !important;
  color: var(--c-slate-700) !important;
}

/* 2段階治療セクション */
.protocol-card .card-tag {
  font-size: 15px !important;
}

.protocol-card .check-list li {
  font-size: clamp(16px, 1.8vw, 17.5px) !important;
  line-height: 1.65 !important;
}

.bridge-kicker {
  font-size: 13px !important;
}

.bridge-label {
  font-size: 16px !important;
}

.bridge-sub,
.bridge-highlight .ib {
  font-size: 15px !important;
}

.reassure-info-card .metric-lead-tag,
.reassure-info-card .m-label {
  font-size: 13.5px !important;
}

.reassure-info-card .info-content-side h4 {
  font-size: clamp(17.5px, 2vw, 20px) !important;
}

.reassure-info-card .info-content-side p {
  font-size: 15.5px !important;
  color: #e2e8f0 !important;
}

/* 臨床症例セクション */
.case-num-badge {
  font-size: 14px !important;
}

.case-class-name {
  font-size: clamp(16px, 1.9vw, 19px) !important;
}

.case-doctor-tag {
  font-size: 13.5px !important;
}

.ba-label {
  font-size: 13.5px !important;
  padding: 5px 12px !important;
}

.c-q-pill {
  font-size: 13.5px !important;
  padding: 5px 12px !important;
}

.c-step-badge {
  font-size: 13.5px !important;
  padding: 4px 10px !important;
}

.c-step-item p {
  font-size: clamp(15.5px, 1.7vw, 17px) !important;
  line-height: 1.65 !important;
}

.chip-step {
  font-size: 13px !important;
}

.chip-name {
  font-size: 15.5px !important;
  font-weight: 700 !important;
}

.chip-tax {
  font-size: 13px !important;
}

.case-detail-accordion summary {
  font-size: 14.5px !important;
  padding: 13px 16px !important;
}

.case-acc-body,
.case-acc-body p,
.case-acc-body strong {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
}

.guideline-info-col strong,
.guideline-info-col span,
.guideline-info-col .ib {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

/* 4つの精密設計ラインナップ ＆ 新設・中間CTAバナー */
.spec-pill {
  font-size: 13.5px !important;
  padding: 4px 10px !important;
}

.q-target,
.q-target .ib {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}

.quad-card p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.supplement-badge {
  font-size: 14px !important;
}

.supplement-title {
  font-size: clamp(16px, 1.8vw, 18.5px) !important;
}

/* 中間CTAバナー（新規） */
.mid-cta-banner {
  margin-top: 36px;
  background: linear-gradient(145deg, #071224 0%, #0e2240 100%);
  border: 2px solid var(--c-gold-500);
  border-radius: 22px;
  padding: 34px 32px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 20px 44px rgba(6, 14, 26, 0.22);
}

.mid-cta-pill {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(198, 156, 58, 0.25);
  border: 1px solid var(--c-gold-400, #dfba5e);
  color: #fde68a;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
}

.mid-cta-title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 900;
  color: #ffffff !important;
  line-height: 1.48;
  margin: 0 0 12px;
}

.mid-cta-desc {
  font-size: clamp(15.5px, 1.7vw, 17px);
  color: #e2e8f0 !important;
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto 24px;
}

.mid-cta-desc strong {
  color: #fbbf24;
  font-weight: 900;
}

.mid-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.btn-mid-web {
  flex: 1.3;
  min-width: 280px;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-gold-500), var(--c-gold-600));
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(171, 129, 36, 0.42);
  transition: all 0.22s ease;
  text-align: left;
  box-sizing: border-box;
}

.btn-mid-web:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(171, 129, 36, 0.55);
}

.btn-mid-web .b-sub {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #fef3c7;
  margin-bottom: 2px;
}

.btn-mid-web .b-main {
  display: block;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 900;
  color: #ffffff;
}

.btn-mid-web .b-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.btn-mid-tel {
  flex: 1;
  min-width: 250px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  text-decoration: none;
  transition: all 0.22s ease;
  box-sizing: border-box;
}

.btn-mid-tel:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fbbf24;
  transform: translateY(-2px);
}

.btn-mid-tel .b-sub {
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
}

.btn-mid-tel .b-tel-num {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1.25;
}

.btn-mid-tel .b-hours {
  font-size: 12px;
  color: #cbd5e1;
}

/* 費用＆シミュレーターセクション */
.info-step-card p,
.total-lead p {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.sim-badge {
  font-size: 14px !important;
  padding: 6px 16px !important;
}

.sim-lead {
  font-size: clamp(16px, 1.8vw, 18px) !important;
}

.sim-label-wrap .label-step {
  font-size: 13px !important;
}

.sim-label-wrap .label-title {
  font-size: 16.5px !important;
}

.sim-label-wrap .label-current {
  font-size: 14.5px !important;
}

.sim-chip {
  min-height: 62px !important;
  padding: 10px 8px !important;
}

.sim-chip .chip-main {
  font-size: 17px !important;
}

.sim-chip .chip-sub {
  font-size: 12.5px !important;
  margin-top: 3px !important;
}

.slider-scales span {
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

.results-box-header .res-tag {
  font-size: 15px !important;
}

.results-box-header .res-sub {
  font-size: 13.5px !important;
}

.result-metric-card .m-title {
  font-size: 16.5px !important;
}

.result-metric-card .m-badge {
  font-size: 13px !important;
}

.metric-footer-note span,
.metric-footer-note strong {
  font-size: 14px !important;
}

.metric-breakdown .b-item {
  font-size: 14.5px !important;
}

.net-row .net-label,
.net-row .net-val {
  font-size: 16px !important;
}

.net-row.total .net-final-label {
  font-size: 17.5px !important;
}

.net-row.total small {
  font-size: 13px !important;
}

.sim-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-sim-web {
  min-height: 62px !important;
  font-size: clamp(16px, 1.8vw, 18px) !important;
  padding: 16px 22px !important;
  box-shadow: 0 10px 24px rgba(171, 129, 36, 0.35) !important;
}

.btn-sim-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-sim-tel strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: #fbbf24;
  margin-left: 4px;
}

.sim-disclaimer p {
  font-size: 13.5px !important;
  color: var(--c-slate-600) !important;
}

/* 無料カウンセリングの流れ・持ち物・ご家族へ・FAQ・アクセス */
.pledge-title {
  font-size: 18.5px !important;
}

.pledge-body p,
.cs-body p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.cs-body strong {
  font-size: 18px !important;
}

.cs-duration-pill,
.b-badge {
  font-size: 13px !important;
  padding: 4px 10px !important;
}

.b-name {
  font-size: 17.5px !important;
}

.b-desc {
  font-size: 15.5px !important;
  line-height: 1.65 !important;
}

.family-lead-p {
  font-size: 17px !important;
  line-height: 1.8 !important;
}

.facility-text strong {
  font-size: 17px !important;
}

.facility-text span {
  font-size: 15.5px !important;
}

.family-points li strong {
  font-size: 17.5px !important;
}

.family-points li p {
  font-size: 15.5px !important;
}

.faq-cat-tag {
  font-size: 13px !important;
  padding: 4px 10px !important;
}

.faq-q-text {
  font-size: clamp(16.5px, 1.9vw, 18.5px) !important;
}

.faq-a p {
  font-size: clamp(16px, 1.7vw, 17px) !important;
  line-height: 1.85 !important;
}

.access-row .a-label {
  font-size: 15px !important;
  font-weight: 800 !important;
}

.access-row .a-value {
  font-size: 16.5px !important;
}

.elevator-highlight p {
  font-size: 15.5px !important;
}

.simple-hours-table {
  font-size: 15px !important;
}

.a-value small,
.tel-sub {
  font-size: 14px !important;
  color: var(--c-slate-600) !important;
}

.final-cta-container .btn-sub {
  font-size: 13.5px !important;
}

.final-trust-notes span {
  font-size: 15.5px !important;
}

.global-footer .f-address {
  font-size: 14px !important;
  color: #cbd5e1 !important;
}

.global-footer .copyright {
  font-size: 12.5px !important;
  color: #94a3b8 !important;
}

/* SPモード（スマホ）での高齢者向け視認性＆固定ドックCTA強化 */
@media (max-width: 640px) {
  .clinic-sub {
    font-size: 9.5px !important;
  }

  .btn-primary-reserve {
    font-size: 12.5px !important;
    padding: 9px 12px !important;
  }

  .btn-sim-web {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    font-size: 15px !important;
    padding: 14px 14px !important;
  }

  .mid-cta-banner {
    padding: 24px 16px;
    border-radius: 18px;
  }

  .btn-mid-web,
  .btn-mid-tel {
    min-width: 100%;
    padding: 14px 18px;
  }

  .diag-cta-duo .selfcheck-cta,
  .selfcheck-tel-cta {
    min-width: 100%;
  }

  .simple-hours-table {
    font-size: 13px !important;
  }

  .simple-hours-table th:first-child,
  .simple-hours-table td:first-child {
    font-size: 12px !important;
    width: 30% !important;
  }

  /* スマホ下部追従ドックCTAの大型化・文字拡大 */
  .mobile-sticky-dock {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-sticky-dock .dock-inner {
    gap: 8px !important;
  }

  .mobile-sticky-dock .dock-btn {
    min-height: 56px !important;
    border-radius: 12px !important;
  }

  .mobile-sticky-dock .dock-tel span {
    font-size: 15.5px !important;
    font-weight: 900 !important;
  }

  .mobile-sticky-dock .dock-web-main {
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  .mobile-sticky-dock .dock-web-sub {
    font-size: 11.5px !important;
    font-weight: 800 !important;
  }
}

/* ==========================================================================
   UI/UX PRO MAX REFINEMENT (2026-11-08 v5)
   1. 不要な矢印・絵文字・意味のない記号を完全排除したクリーン設計
   2. 30秒お悩み診断CTAボタンの100%枠内収まり保証（PC / SP両対応）
   3. セクション4「精密転写」プロセスのラグジュアリー・ブリッジUI刷新
   4. コントラスト比強化 ＆ SVGサイズ暴走防止フェイルセーフ
   ========================================================================== */

/* Global SVG Fail-safe: prevent any SVG from rendering oversized */
svg {
  max-width: 100%;
  flex-shrink: 0;
}

/* 1. ヒーロータグ（✔記号撤去後の洗練されたピルデザイン） */
.hero-quick-tags li {
  padding: 7px 16px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8f5ee 100%) !important;
  border: 1.5px solid rgba(198, 156, 58, 0.45) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  color: var(--c-navy-950) !important;
}

/* 2. 共感カード：解決策ピル（➔記号を廃止し「解決策」バッジ＋テキストの整然とした構成） */
.pain-solution-pill {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: linear-gradient(135deg, #fdfbf7 0%, #f6eedc 100%) !important;
  border: 1.5px solid rgba(198, 156, 58, 0.48) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.pain-solution-pill .p-sol-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--c-navy-950);
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}

.pain-solution-pill .p-sol-txt {
  flex: 1;
  min-width: 0;
  display: block;
}

/* 2段階治療の箇条書き（✔記号を廃止し上品なゴールドドットに変更） */
.check-list li::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--c-gold-500) !important;
  top: 10px !important;
  left: 2px !important;
}

/* 3. 30秒お悩み診断：CTAボタン（枠内に100%美しく収まる2段構造） */
.result-cta-wrap .cta-custom-msg {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-break: auto-phrase !important;
}

@media (max-width: 640px) {
  .result-cta-wrap .cta-custom-msg .ib {
    white-space: normal !important;
  }
}
.diag-cta-duo {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto 14px !important;
  align-items: stretch !important;
}

.diag-cta-duo .selfcheck-cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 74px !important;
  padding: 14px 20px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #d4a742 0%, #a87b1e 100%) !important;
  border: 1.5px solid rgba(254, 243, 199, 0.55) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(171, 129, 36, 0.42) !important;
  white-space: normal !important;
  box-sizing: border-box !important;
  text-align: center !important;
  margin: 0 !important;
}

.diag-cta-duo .selfcheck-cta .cta-sub-txt {
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fef3c7 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

.diag-cta-duo .selfcheck-cta .cta-main-txt {
  display: block !important;
  font-size: clamp(16.5px, 2vw, 19.5px) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

.diag-cta-duo .selfcheck-tel-cta {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 74px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.55) !important;
  box-sizing: border-box !important;
}

@media (max-width: 720px) {
  .diag-cta-duo {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .diag-cta-duo .selfcheck-cta {
    max-width: 100% !important;
    width: 100% !important;
    padding: 14px 16px !important;
    min-height: 68px !important;
  }

  .diag-cta-duo .selfcheck-cta .cta-main-txt {
    font-size: clamp(15.5px, 4.5vw, 18px) !important;
  }
}

/* 4. 比較ビルボード（➔撤去後の2カラム整列） */
.billboard-caption-box {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: stretch !important;
}

@media (max-width: 720px) {
  .billboard-caption-box {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* 5. セクション4（2段階治療）：「精密転写」ラグジュアリー・プロセスブリッジ */
.protocol-visual-duo {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 256px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 20px !important;
}

.protocol-bridge-indicator {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 2 !important;
}

/* PC時の左右連結ゴールドライン */
.protocol-bridge-indicator::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: -24px !important;
  right: -24px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #b89130 0%, #f3d27a 50%, #b89130 100%) !important;
  z-index: -1 !important;
  transform: translateY(-50%) !important;
}

.protocol-bridge-indicator .bridge-inner-pill {
  width: 100% !important;
  max-width: 256px !important;
  background: linear-gradient(155deg, #081528 0%, #102544 100%) !important;
  border: 2px solid #cfa542 !important;
  border-radius: 20px !important;
  padding: 22px 18px !important;
  box-shadow: 0 18px 40px rgba(8, 21, 40, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.protocol-bridge-indicator .bridge-top-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.protocol-bridge-indicator .bridge-en-kicker {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fbbf24;
}

.protocol-bridge-indicator .bridge-kicker {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #081528 !important;
  background: linear-gradient(135deg, #fde68a 0%, #d4a742 100%) !important;
  border: none !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  margin: 0 !important;
}

.protocol-bridge-indicator .bridge-main-box {
  width: 100%;
  padding: 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.protocol-bridge-indicator .bridge-rate-badge {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fde68a;
}

.protocol-bridge-indicator .bridge-label {
  font-family: var(--font-serif);
  font-size: 23px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
}

.protocol-bridge-indicator .bridge-sub {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  line-height: 1.55 !important;
  display: block !important;
}

.protocol-bridge-indicator .bridge-highlight {
  display: block !important;
  margin-top: 4px !important;
  color: #fde68a !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
}

@media (max-width: 900px) {
  .protocol-visual-duo {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .protocol-bridge-indicator {
    padding: 10px 0 !important;
    width: 100% !important;
  }

  .protocol-bridge-indicator::before {
    top: -18px !important;
    bottom: -18px !important;
    left: 50% !important;
    right: auto !important;
    width: 3px !important;
    height: auto !important;
    background: linear-gradient(180deg, #b89130 0%, #f3d27a 50%, #b89130 100%) !important;
    transform: translateX(-50%) !important;
  }

  .protocol-bridge-indicator .bridge-inner-pill {
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }

  .protocol-bridge-indicator .bridge-label {
    font-size: 22px !important;
  }
}

/* 6. 臨床症例：術前・術後写真（➔撤去後の2カラム均等拡大）＆詳細ボタン */
.ba-photo-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}

.case-detail-accordion .acc-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-navy-950);
  color: #fde68a;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.case-detail-accordion[open] .acc-btn-label {
  background: var(--c-slate-200);
  color: var(--c-navy-950);
}

/* 7. 中間CTAバナー（不要な矢印撤去後のセンタリング最適化） */
.btn-mid-web {
  justify-content: center !important;
  text-align: center !important;
}

.btn-mid-web .btn-mid-text {
  text-align: center !important;
  width: 100%;
}

/* 8. ご家族セクションの番号バッジ */
.family-points .p-check {
  font-family: var(--font-display);
  font-size: 13px !important;
  font-weight: 900 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: var(--c-navy-950) !important;
  color: #fde68a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

/* ==========================================================================
   MODERN WEB GUIDANCE BRUSHUP (2026-11-09 v6)
   1. 難読漢字へのふりがな（<ruby><rt>）タイポグラフィ＆行間バランス保護
   2. アクセシビリティ強化（.visually-hidden / table <th scope="row"> 補完）
   3. text-wrap: balance（見出し） / text-wrap: pretty（本文段落）の適用
   4. 全画面幅（320pxスマホ拡大表示〜920px小型PC〜大画面）での文字はみ出しゼロ保証
   ========================================================================== */

/* 1. スクリーンリーダー専用ユーティリティ（modern-web-guidance: accessibility 準拠） */
.visually-hidden:where(:not(:focus-within, :active)) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* 2. ふりがな（<ruby> / <rt>）の視認性と行間リズム最適化 */
ruby {
  ruby-align: center;
  ruby-position: over;
}

rt {
  font-family: var(--font-sans);
  font-size: 0.56em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: inherit;
  opacity: 0.92;
  user-select: none;
}

/* タイトルや見出し内のルビが大きくなりすぎないよう微調整 */
h1 rt,
h2 rt,
h3 rt,
.doctor-heading rt {
  font-size: 0.48em;
  font-weight: 700;
}

/* 3. テーブルの <th scope="row"> セマンティクス化に伴うセルスタイル補完 */
.matrix-compare-table tbody tr th.td-item {
  padding: 20px 18px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
  text-align: left;
  font-weight: 800;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

.matrix-compare-table tbody tr:last-child th.td-item {
  border-bottom: 2px solid var(--c-slate-200);
}

@media (max-width: 900px) {
  .matrix-compare-table tbody tr th.td-item {
    padding: 14px 10px;
  }
}

@media (max-width: 640px) {
  .matrix-compare-table tbody tr th.td-item {
    padding: 10px 5px;
    text-align: center;
  }
}

.simple-hours-table tbody tr th {
  background: #ffffff;
  font-weight: 700;
  color: var(--c-navy-950);
}

/* 4. Modern Web Guidance タイポグラフィ（text-wrap: balance & pretty） */
.hero-main-title,
.section-title-large,
.selfcheck-title,
.mid-cta-title,
.sim-title,
.doctor-heading,
.family-title,
.final-title,
.timeline-heading {
  text-wrap: balance;
}

p,
blockquote,
.check-list li,
.faq-a p,
.doctor-prose p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* 5. マルチビューポート（920px小型PC ＆ 320pxスマホ拡大表示モード）はみ出し完全防止 */
.lineup-cards-quad {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quad-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 920px前後の小型PC・タブレット横向きで4ステップや3カラムが窮屈にならないよう最適化 */
@media (max-width: 1080px) {
  .consult-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .consult-step::after {
    display: none !important;
  }

  .protocol-visual-duo {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .protocol-bridge-indicator {
    padding: 10px 0 !important;
    width: 100% !important;
  }

  .protocol-bridge-indicator::before {
    top: -18px !important;
    bottom: -18px !important;
    left: 50% !important;
    right: auto !important;
    width: 3px !important;
    height: auto !important;
    background: linear-gradient(180deg, #b89130 0%, #f3d27a 50%, #b89130 100%) !important;
    transform: translateX(-50%) !important;
  }

  .protocol-bridge-indicator .bridge-inner-pill {
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }

  .sim-body-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .sim-controls-panel,
  .sim-results-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 640px) {
  .consult-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .lineup-cards-quad {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* スマホおよび拡大表示時に長いインラインブロックが親枠を突き抜けないよう折り返しを許可 */
  .ib:not(.matrix-compare-table .ib),
  .label-current {
    white-space: normal !important;
    max-width: 100% !important;
  }

  .diag-cards-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .diag-rx-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   v7: 左寄り・右側の空白解消 ＆ コントラスト修正 (2026-11-09)
   ========================================================================== */

/* 比較表ヘッダー（SPではネイビー背景）上のゴールド小見出しのコントラスト確保 */
@media (max-width: 900px) {
  .matrix-compare-table .th-second .th-sub.gold {
    color: #fde68a !important;
    font-weight: 800 !important;
  }
  .matrix-compare-table .th-second .th-sub.gold rt {
    color: #fef3c7 !important;
    opacity: 1 !important;
  }
}

/*
  左揃えテキストの「文節ごとの強制改行（inline-block）」が、
  1カラム化した幅広カード内で右側に大きな空白を作っていたため、
  421px〜1080pxでは自然に横幅いっぱいまで流し込む。
  （日本語の禁則処理＋文節単位改行＋text-wrap: prettyで孤立文字を防止）
*/
@media (min-width: 421px) and (max-width: 1080px) {
  .protocol-card .card-content h3,
  .protocol-card .check-list li,
  .info-content-side h4,
  .case-clinical-title,
  .quad-card h3,
  .quad-card .q-target,
  .quad-card p,
  .info-step-card h4,
  .family-title,
  .caption-item p,
  .pain-card-body h3 {
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: pretty;
  }

  .protocol-card .card-content h3 .ib,
  .protocol-card .check-list li .ib,
  .info-content-side h4 .ib,
  .case-clinical-title .ib,
  .quad-card h3 .ib,
  .quad-card .q-target .ib,
  .quad-card p .ib,
  .info-step-card h4 .ib,
  .family-title .ib,
  .caption-item p .ib,
  .pain-card-body h3 .ib {
    display: inline !important;
    white-space: normal !important;
  }

  .protocol-card .card-content h3 br.sp-br,
  .case-clinical-title br.sp-br,
  .family-title br.sp-br {
    display: none !important;
  }
}

/* タブレット幅（641px〜1080px）：2段階治療カードを「写真左・本文右」の横並びにして余白を有効活用 */
@media (min-width: 641px) and (max-width: 1080px) {
  .protocol-visual-duo .protocol-card {
    display: grid !important;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: stretch;
  }

  .protocol-visual-duo .protocol-card .card-photo-header {
    aspect-ratio: auto;
    height: 100%;
    min-height: 260px;
  }

  .protocol-visual-duo .protocol-card .card-content {
    padding: 28px 28px;
  }
}

/* SP：高齢者向けに日本語の小さな補足テキストを底上げ（英字装飾キッカーは除外） */
@media (max-width: 640px) {
  .avatar-title-tag,
  .avatar-title-tag .ib {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .avatar-clinic-sub {
    font-size: 13.5px !important;
  }

  .guideline-badge,
  .guideline-badge .ib {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  .photo-caption-bar,
  .photo-caption-bar .ib {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  .btn-mid-tel .b-hours,
  .belongings-tag {
    font-size: 13px !important;
  }

  .bridge-kicker {
    font-size: 12.5px !important;
  }

  .simple-hours-table thead th,
  .simple-hours-table th:first-child,
  .simple-hours-table td:first-child {
    font-size: 13px !important;
  }
}

/* 高齢者のスマホ「画面拡大表示モード（320px〜360px幅）」専用の安全設計 */
@media (max-width: 370px) {
  .header-container {
    padding-inline: 10px !important;
    gap: 6px !important;
  }

  .brand-identity .clinic-sub {
    font-size: 8.5px !important;
  }

  .brand-identity .clinic-name {
    font-size: 16px !important;
  }

  .btn-primary-reserve {
    font-size: 11px !important;
    padding: 8px 9px !important;
    white-space: nowrap !important;
  }

  .doctor-reassurance-strip {
    padding: 18px 12px !important;
  }

  .doctor-reassurance-strip .strip-avatar-frame {
    width: 82px !important;
    min-width: 82px !important;
  }

  .doctor-reassurance-strip .avatar-name-tag {
    font-size: 10px !important;
    padding: 3px 4px !important;
    white-space: normal !important;
  }

  .quad-card {
    padding: 20px 14px !important;
  }
}