/* ==============================================
   SMC Hair Transplant LP — Medical Blue + Teal
   参考: 親和クリニック (shinwa-clinic.jp)
   ============================================== */

/* ----- CSS Variables (Design Tokens) ----- */
:root {
  --navy:       #0a2240;    /* Dark Navy — hero-bg.png トーン合わせ */
  --navy-dark:  #061529;    /* Deeper Navy */
  --gold:       #00a3c2;    /* Teal accent（命名はgoldだが実態はteal、変更禁止） */
  --gold-light: #29bdd9;    /* Teal light */
  --amber:      #c9a227;    /* Warm Gold — キャンペーン・バッジ用本物のゴールド */
  --amber-light:#e2b94f;    /* Warm Gold light */
  --base:       #f5f5f5;    /* ホワイトグレー（依頼者要望） */
  --cream:      #eef2f7;    /* セクション背景ライトグレー */
  --cream-alt:  #e8eef5;
  --gray-light: #e8eef5;    /* Light gray section */
  --white:      #ffffff;    /* カード・要素の純白 */
  --text:       #1a1a1a;
  --text-light: #555555;
  --text-white: #ffffff;
  --red:        #e53e3e;
  --border:     #d6e9f5;
  --shadow:     0 2px 12px rgba(0,0,0,0.06);
  --shadow-lg:  0 4px 24px rgba(0,0,0,0.10);
  --radius:     8px;
  --radius-lg:  12px;
  --font:       'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --max-w:      960px;
  --header-h:   64px;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font);
  color: var(--text);
  line-height: 1.8;
  background: var(--base);   /* ベースカラー #fafafa */
  -webkit-font-smoothing: antialiased;
}

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

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

/* ----- Utility ----- */
.container   { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.section-pad { padding: 64px 0; }
.bg-navy     { background: var(--navy); color: var(--text-white); }
.bg-light    { background: var(--gray-light); color: var(--text); }
.bg-cream    { background: var(--cream); }
.bg-white    { background: var(--base); }   /* ベースカラー #fafafa */
.text-white  { color: var(--text-white); }
.text-center { text-align: center; }
.text-red    { color: var(--red); font-weight: 900; }
.mt-2        { margin-top: 32px; }

/* ----- Fade-in Animation ----- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Buttons ----- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 700;
  text-align: center;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1.4;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-gold {
  background: var(--gold);
  color: var(--white);
  font-size: 1rem;
  padding: 14px 32px;
}
.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
  font-size: 1rem;
  padding: 12px 32px;
}
.btn-lg  { font-size: 1.1rem; padding: 16px 40px; }
.btn-xl  { font-size: 1.25rem; padding: 20px 48px; }

/* ----- Post-Hero CTA ----- */
.post-hero-cta { padding: 40px 0; }
.post-hero-cta .btn { box-shadow: 0 4px 16px rgba(0, 163, 194, 0.35); font-size: 1.15rem; padding: 18px 48px; }
@media (max-width: 600px) {
  .post-hero-cta .btn { font-size: 1rem; padding: 16px 24px; width: 100%; max-width: 360px; }
}

/* ----- Section Title ----- */
.section-title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 40px;
  line-height: 1.5;
}

/* =============================================
   HEADER
   ============================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(13, 92, 138, 0.95);
  backdrop-filter: blur(8px);
  height: var(--header-h);
  transition: box-shadow 0.3s;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.3); }
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
}
.logo-img { height: 32px; width: auto; }
.logo-text { font-size: 0.85rem; font-weight: 700; }
.btn-header { font-size: 0.85rem; padding: 8px 20px; }

/* =============================================
   HERO SECTION
   ============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--header-h) + 40px) 20px 56px;
  overflow: hidden;
  background: var(--navy);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,34,64,0.76) 0%,
    rgba(10,34,64,0.70) 50%,
    rgba(10,34,64,0.84) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 851px;
  text-align: center;
  color: var(--white);
}

/* サブ見出し（gold テキスト） */
.hero-eyebrow {
  font-size: 1.08rem;        /* Figma: 17.32px */
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;       /* ① 修正: 16px→12px */
  line-height: 1.5;
}

/* H1 */
.hero-title {
  font-size: clamp(1.7rem, 4.5vw, 2.7rem); /* max≈43.2px, Figma:43.3px */
  font-weight: 900;
  line-height: 1.25;         /* ① 修正: 1.45→1.25 (Figma:54.125/43.3) */
  margin-bottom: 16px;       /* ② 修正: 20px→16px */
  color: var(--white);
}
.hero-title .text-gold { color: var(--gold); }

/* サブテキスト */
.hero-sub {
  font-size: 1.125rem;       /* Figma: 18px */
  font-weight: 700;
  line-height: 1.5;          /* ④ 修正: 1.8→1.5 (Figma:27/18) */
  color: rgba(255,255,255,0.9);
  margin-bottom: 28px;       /* ⑤ 修正: 36px→28px */
}

/* ---- 医師写真 × 特徴カード 2カラムレイアウト ---- */
.hero-middle {
  display: grid;
  grid-template-columns: 291px 1fr;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
  text-align: left;
}

/* 医師写真 */
.hero-doctor {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-doctor-photo-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(0,163,194,0.5);
  box-shadow: 0 12px 40px rgba(0,163,194,0.2);
  width: 100%;
  aspect-ratio: 291/309;
}
.hero-doctor-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-doctor-caption {
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  text-align: center;
}

/* ---- 右カラムコンテナ（特徴カード＋キャンペーン） ---- */
.hero-right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 特徴カード3枚：横並び（⑥ 修正: column→row） */
.hero-feat-cards {
  display: flex;
  flex-direction: row;       /* ⑥ 修正 */
  gap: 8px;                  /* Figma カード間 ~6-8px */
  align-items: stretch;
}
/* カード共通 */
.hero-feat-card {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 22px 18px;        /* Figma: 内部余白 ~25px */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;              /* flex縮小許可 */
}
/* 中央ハイライトカード（定着率） */
.hero-feat-card--highlight {
  background: rgba(0,163,194,0.2);
  border: 2px solid var(--gold);
  box-shadow: 0 10px 15px rgba(0,163,194,0.2), 0 4px 6px rgba(0,163,194,0.1);
}
.hero-feat-card__title {
  font-size: 1rem;           /* Figma: 18px / cards are narrower so slightly smaller OK */
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
}
.hero-feat-card--highlight .hero-feat-card__title {
  color: var(--gold);
}
.hero-feat-card__desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
}
.hero-feat-card--highlight .hero-feat-card__desc {
  color: rgba(255,255,255,0.9);
  font-weight: 700;
}

/* ---- キャンペーンバナー（右カラム内、特徴カードの直下） ---- */
.hero-campaign {
  background: rgba(0,163,194,0.2);
  border: 2px solid rgba(0,163,194,0.5);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
}
.campaign-label {
  font-size: 1.6rem;         /* ⑧ 修正: 1.25rem→1.6rem（Figma:32px≈2rem） */
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 0;
  display: block;
  line-height: 1.3;
}
.campaign-text {
  font-size: 1.6rem;         /* ⑨ 修正: 1.5rem→1.6rem */
  font-weight: 900;
  color: var(--gold);
  line-height: 1.3;
}

/* ---- チェックバッジ ---- */
.hero-checks {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.check-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 9px 16px;         /* ⑪ 修正: Figma 高さ37.5px に合わせる */
  min-height: 37.5px;        /* ⑪ 明示 */
  font-size: 0.8125rem;      /* Figma: 13px */
  font-weight: 700;
  color: var(--white);
}
.check-mark {
  color: var(--gold);
  font-weight: 900;
}

/* ---- Hero CTA ---- */
.hero-cta-wrap {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
/* 主ボタン：gold 背景 / 角丸10px */
.btn-hero-primary {
  background: var(--gold);
  color: var(--white);
  font-size: 1.125rem;       /* Figma: 18px */
  font-weight: 700;
  padding: 0 40px;
  min-height: 71px;          /* ⑩ 修正: Figma ボタン高71px */
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 71px;         /* 垂直中央揃え */
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}
.btn-hero-primary:hover { opacity: 0.88; transform: translateY(-1px); }
/* 副ボタン：ガラス効果 / 角丸10px */
.btn-hero-sub {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  font-size: 1.125rem;       /* Figma: 18px */
  font-weight: 700;
  padding: 0 36px;
  min-height: 71px;          /* ⑩ 修正 */
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.3);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 71px;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}
.btn-hero-sub:hover { opacity: 0.88; transform: translateY(-1px); }

/* ---- 免責テキスト ---- */
.hero-disclaimer {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-bottom: 16px;
}

/* ---- スクロールボタン ---- */
.hero-scroll-btn {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  animation: heroScrollBounce 1.8s ease-in-out infinite;
  cursor: default;
  line-height: 1;
}
@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0);   opacity: 0.5; }
  50%       { transform: translateY(6px); opacity: 1;   }
}

/* =============================================
   PROBLEM SECTION
   ============================================= */
.problem-list {
  list-style: none;
  max-width: 100%;
  margin: 0 auto 32px;
}
.problem-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
.check-icon {
  color: var(--gold);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.problem-cta-box {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);  /* ② 黒→ゴールドに */
  color: var(--white);
  text-align: center;
  padding: 24px 32px;
  border-radius: var(--radius-lg);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0,163,194,0.35);
}

/* =============================================
   SOLUTION SECTION
   ============================================= */
.solution-intro {
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
  line-height: 1.8;
  margin-bottom: 32px;
}
.solution-intro p { margin: 0; }

.solution-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}
.solution-image-wrap {
  position: relative;
}
.solution-img {
  border-radius: var(--radius-lg);
  width: 100%;
}
.solution-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--gold);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 900;
  padding: 8px 16px;
  border-radius: 50px;
}
.solution-text {
  font-size: 0.95rem;
  line-height: 1.9;
}
.solution-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 20px;
}
.area-label {
  font-weight: 700;
  font-size: 0.85rem;
}
.area-tag {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 50px;
}

/* Solution Cards */
.solution-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.solution-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}
.solution-card--highlight {
  background: rgba(0,163,194,0.15);
  border-color: var(--gold);
}
.card-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 8px; }
.card-rate  { font-size: 1.5rem; font-weight: 900; }
.card-rate--gold { color: var(--gold); }

/* =============================================
   COMPARISON TABLES
   ============================================= */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.compare-table thead th {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
}
.compare-table .col-us {
  background: rgba(0,163,194,0.08);
  font-weight: 700;
  color: var(--navy);
}
.compare-table thead .col-us {
  background: var(--gold);
  color: var(--white);
}
.row-label {
  text-align: left;
  font-weight: 700;
}

/* =============================================
   REASONS SECTION
   ============================================= */
.reason-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px;
  margin-bottom: 24px;
  align-items: start;
}
.reason-number {
  display: flex;
  align-items: center;
  justify-content: center;
}
.reason-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--navy);
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 900;
  border-radius: 50%;
}
.reason-title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 8px;
  line-height: 1.5;
  color: var(--navy);
}
.reason-points {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.reason-point {
  background: var(--cream);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
}
.reason-body {
  grid-column: 2;
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.8;
}

/* =============================================
   PRICING SECTION
   ============================================= */
.pricing-intro {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 28px;
}
.pricing-intro p { margin: 0; }
.pricing-intro small { font-size: 0.8125rem; color: var(--text-light); }

.pricing-campaign {
  text-align: center;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 40px;
}
.campaign-badge {
  display: inline-block;
  background: var(--white);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 8px;
}
.campaign-main {
  font-size: 1.2rem;
  font-weight: 900;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.pricing-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  position: relative;
}
.pricing-card--popular {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}
.pricing-label {
  display: inline-block;
  background: var(--gold);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 16px;
  border-radius: 50px;
  margin-bottom: 12px;
}
.pricing-card-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 16px;
}
.pricing-detail p { margin-bottom: 8px; font-size: 0.9rem; }
.pricing-base { text-decoration: line-through; color: var(--text-light); }
.pricing-campaign-price { font-size: 1rem; font-weight: 700; }
.price-zero { color: var(--red); font-size: 1.5rem; font-weight: 900; }
.pricing-monitor { font-weight: 500; }
.pricing-monthly { color: var(--navy); font-weight: 700; }
.pricing-regular { color: var(--text-light); }
.pricing-notes {
  text-align: center;
  margin-bottom: 24px;
}
.pricing-notes p { font-size: 0.8rem; color: var(--text-light); margin-bottom: 4px; }

/* =============================================
   DOCTOR SECTION
   ============================================= */
.doctor-clinic-info {
  margin-bottom: 40px;
}
.clinic-info-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.clinic-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clinic-info-text {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.clinic-info-text h3 {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 8px;
}
.clinic-info-text p {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 4px;
}

.doctor-profile {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}
.doctor-photo-wrap { border-radius: var(--radius-lg); overflow: hidden; }
.doctor-photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.doctor-name {
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--gold);
}
.doctor-credentials {
  list-style: none;
  margin-bottom: 20px;
}
.doctor-credentials li {
  font-size: 0.85rem;
  padding: 4px 0;
  opacity: 0.85;
}
.doctor-credentials li::before {
  content: '・';
  margin-right: 4px;
}
.doctor-message p {
  font-size: 0.9rem;
  line-height: 2;
  opacity: 0.9;
}

/* =============================================
   FLOW SECTION
   ============================================= */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.flow-step {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
}
.step-number {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 12px;
}
.step-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.step-title { font-size: 0.95rem; font-weight: 900; color: var(--navy); margin-bottom: 4px; }
.step-time  { font-size: 0.8rem; color: var(--text-light); display: block; margin-bottom: 8px; }
.step-desc  { font-size: 0.8rem; color: var(--text-light); line-height: 1.6; }

.flow-procedures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.procedure-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--gold);
}
.procedure-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
}
.procedure-card p { font-size: 0.85rem; color: var(--text-light); line-height: 1.7; }

/* =============================================
   CASE STUDY SECTION
   ============================================= */
.cases-placeholder {
  text-align: center;
  padding: 48px 20px;
  background: var(--cream);
  border-radius: var(--radius-lg);
  color: var(--text-light);
}

/* =============================================
   FAQ SECTION
   ============================================= */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  text-align: left;
}
.faq-q-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--navy);
  color: var(--gold);
  font-weight: 900;
  font-size: 0.85rem;
  border-radius: 50%;
}
.faq-q-text { flex: 1; }
.faq-toggle {
  flex-shrink: 0;
  font-size: 1.3rem;
  color: var(--gold);
  font-weight: 700;
  width: 28px;
  text-align: center;
}
.faq-answer {
  display: flex;
  gap: 12px;
  padding: 0 0 20px 0;
}
.faq-a-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--gold);
  color: var(--white);
  font-weight: 900;
  font-size: 0.85rem;
  border-radius: 50%;
}
.faq-answer p { font-size: 0.9rem; color: var(--text-light); line-height: 1.8; }

/* =============================================
   CTA SECTION
   ============================================= */
.cta-section {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 92, 138, 0.88);
}
.cta-content {
  position: relative;
  z-index: 1;
}
.cta-heading {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.6;
  margin-bottom: 28px;
}
.cta-features {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.cta-feature {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius);
}

/* =============================================
   CLINIC INFO / ACCESS SECTION
   ============================================= */
.clinic-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.clinic-phone { margin-bottom: 20px; }
.clinic-phone a {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--navy);
}
.clinic-hours-note {
  display: block;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 4px;
}

.schedule-table-wrap { margin-bottom: 20px; overflow-x: auto; }
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.schedule-table th,
.schedule-table td {
  padding: 10px 12px;
  text-align: center;
  border: 1px solid var(--border);
}
.schedule-table th {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
}
.schedule-table td {
  background: var(--white);
  font-weight: 700;
}

.clinic-address { margin-bottom: 16px; }
.address-text { font-size: 0.9rem; line-height: 1.7; margin-bottom: 12px; }
.access-list {
  list-style: none;
  margin-bottom: 8px;
}
.access-list li {
  font-size: 0.9rem;
  padding: 4px 0;
}
.access-list li::before {
  content: '🚶';
  margin-right: 8px;
}
.parking { font-size: 0.85rem; color: var(--text-light); }

.clinic-map iframe {
  border-radius: var(--radius-lg);
  width: 100%;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: var(--navy-dark);
  color: var(--text-white);
  padding: 48px 0 24px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
}
.footer-logo .logo-img { height: 28px; }
.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: 0.8rem;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.footer-nav a:hover { opacity: 1; }
.footer-cta {
  text-align: center;
  margin-bottom: 24px;
}
.footer-links {
  text-align: center;
  margin-bottom: 16px;
}
.footer-links a {
  font-size: 0.75rem;
  opacity: 0.6;
  margin: 0 12px;
}
.footer-links a:hover { opacity: 1; }
.footer-copy {
  text-align: center;
  font-size: 0.7rem;
  opacity: 0.5;
}

/* =============================================
   SHARED: EYEBROW & SECTION SUB
   ============================================= */
/* 標準 eyebrow: テキスト下に短い gold ライン */
.section-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.section-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  margin: 6px auto 0;
}

/* TREATMENT FLOW 用: 両脇に固定幅ライン */
.section-eyebrow--flanked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.section-eyebrow--flanked::before,
.section-eyebrow--flanked::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  margin: 0 14px;
}

/* CASE STUDY 用: 全幅ライン */
.section-eyebrow--wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.section-eyebrow--wide::before,
.section-eyebrow--wide::after {
  content: '';
  display: block;
  flex: 1;
  height: 1px;
  background: var(--gold);
  margin: 0 16px;
}
.section-sub {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.8;
  opacity: 0.75;
  margin-top: -24px;
  margin-bottom: 32px;
}
.text-gold { color: var(--gold); }

/* =============================================
   PROBLEM SECTION — new elements
   ============================================= */
.problem-check {
  color: var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 900;
}
.problem-cta-main {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.6;
  margin-bottom: 8px;
}
.problem-cta-sub {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.85;
}
.problem-cta-sub .text-gold { color: var(--gold); opacity: 1; }

/* =============================================
   SOLUTION SECTION — updated layout
   ============================================= */
/* Full-width image block (no longer side-by-side grid) */
.solution-image-wrap {
  position: relative;
  margin-bottom: 32px;
}
/* synergy highlight block */
.solution-synergy {
  background: rgba(0,163,194,0.12);
  border: 1px solid rgba(0,163,194,0.4);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 32px;
  text-align: center;
}
.solution-synergy-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 6px;
}
.solution-synergy-desc {
  font-size: 0.88rem;
  opacity: 0.85;
  line-height: 1.7;
}
/* card label / desc */
.solution-card-check {
  color: var(--gold);
  font-size: 1rem;
  font-weight: 900;
  margin-right: 4px;
}
.card-label {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.75;
  margin-bottom: 2px;
}
.card-desc {
  font-size: 0.8rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-top: 6px;
}

/* =============================================
   COMPARISON TABLES — symbol cells
   ============================================= */
.compare-mark {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--gold);
}
.compare-mark--gray { color: var(--text-light); }
.compare-circle  { color: var(--gold); font-size: 1.4rem; font-weight: 900; }
.compare-triangle { color: #e07b30; font-size: 1.2rem; font-weight: 900; }
.compare-cross   { color: #aaa; font-size: 1.2rem; font-weight: 700; }
.compare-note {
  font-size: 0.78rem;
  color: var(--text-light);
  text-align: center;
  margin-top: 12px;
  line-height: 1.7;
}

/* =============================================
   REASONS SECTION — 2-column card layout
   ============================================= */
/* Override old 2-col (icon + body) to left/right split */
.reason-card {
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.reason-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reason-right {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.85;
  overflow: hidden;           /* 画像の角丸を親に合わせる */
  display: flex;
  flex-direction: column;
}
.reason-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}
.reason-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.reason-card:hover .reason-img {
  transform: scale(1.04);
}
.reason-desc {
  padding: 20px 24px;
  flex: 1;
}
/* Large gold number (01 02 03) */
.reason-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  display: block;
}

/* =============================================
   PRICING SECTION — new elements
   ============================================= */
.pricing-campaign-label {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 16px;
  border-radius: 50px;
  margin-bottom: 8px;
}
.pricing-campaign-text {
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 8px;
  line-height: 1.4;
}
.pricing-campaign-body {
  font-size: 0.88rem;
  opacity: 0.9;
  line-height: 1.7;
  margin-bottom: 8px;
}
.pricing-campaign-guarantee {
  font-size: 0.82rem;
  opacity: 0.8;
  line-height: 1.6;
}
.pricing-card--dark {
  background: var(--gray-light);  /* ② 黒→ライトグレーに */
  color: var(--text);
  border-color: var(--navy);
  border-width: 2px;
}
.pricing-card--dark .pricing-card-title { color: var(--navy); }
.pricing-monitor-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 6px;
}
.pricing-features {
  list-style: none;
  text-align: left;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.pricing-card--dark .pricing-features { border-color: rgba(255,255,255,0.15); }
.pricing-features li {
  font-size: 0.82rem;
  padding: 4px 0;
  color: var(--text-light);
}
.pricing-features li::before { content: '✓ '; color: var(--gold); font-weight: 900; }
.pricing-card--dark .pricing-features li { color: rgba(255,255,255,0.75); }
.pricing-note--note {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 4px;
}
.pricing-note--check {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 4px;
}
.pricing-note--check::before { content: '✓ '; color: var(--gold); font-weight: 900; }
.pricing-disclaimer {
  font-size: 0.78rem;
  color: var(--text-light);
  text-align: center;
  margin-top: 16px;
  line-height: 1.7;
}

/* =============================================
   DOCTOR SECTION — new elements
   ============================================= */
.doctor-clinic-photo-wrap {
  margin-bottom: 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.doctor-clinic-photo {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
.doctor-info-rows {
  margin-bottom: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.doctor-info-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 0.9rem;
}
.info-label {
  flex-shrink: 0;
  width: 100px;
  font-weight: 700;
  color: var(--gold);
  font-size: 0.82rem;
}
.info-value {
  flex: 1;
  opacity: 0.85;
  line-height: 1.7;
}
.service-tag {
  display: inline-block;
  background: rgba(0,163,194,0.2);
  border: 1px solid rgba(0,163,194,0.4);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 50px;
  margin: 2px 4px 2px 0;
}
/* Updated doctor profile structure */
.doctor-title-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 4px;
}
.doctor-name-label {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.3;
}
.credentials-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0,163,194,0.3);
  padding-bottom: 6px;
}
.doctor-message-wrap {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 40px;
}
.doctor-message-heading {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 16px;
}
.doctor-quote {
  border-left: 3px solid var(--gold);
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 2;
  opacity: 0.9;
  font-style: italic;
}

/* =============================================
   FLOW SECTION — updated step cards & procedures
   ============================================= */
/* 2×2 grid for steps */
.flow-steps {
  grid-template-columns: repeat(2, 1fr);
}
.step-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 10px;
}
.step-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: var(--cream);
}
.step-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Procedures — light card（② 黒→ライトグレーに変更） */
.flow-procedures-card {
  background: var(--gray-light);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--border);
}
.flow-procedures-heading {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 24px;
  text-align: center;
}
.procedure-num {
  display: inline-block;
  background: var(--gold);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 900;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}
.procedure-arrow {
  text-align: center;
  color: var(--gold);
  font-size: 1.2rem;
  padding: 8px 0;
}
.procedure-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--cream);
}
.procedure-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.procedure-desc {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.7;
}
.procedure-card {
  display: flex;
  flex-direction: column;
}
.procedure-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* =============================================
   CASE STUDY SECTION — real cards
   ============================================= */
.case-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.case-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--cream);   /* ② 黒→クリームに */
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.case-count {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.75;
}
.case-count-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold);
  margin-right: 4px;
}
.case-patient {
  font-size: 0.85rem;
  opacity: 0.85;
}
.case-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.case-photo-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream);
}
.case-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.case-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10,34,64,0.75);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 12px;
  border-radius: 50px;
}
.case-label--after {
  background: var(--gold);
  color: var(--white);
}
.case-footer {
  padding: 16px 24px;
}
.case-monthly {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 4px;
}
.case-note {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-bottom: 8px;
}
.case-desc {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.7;
  padding: 0 24px 20px;
}

/* =============================================
   FAQ SECTION — footer & note
   ============================================= */
.faq-footer {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.faq-note {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* =============================================
   CTA SECTION — updated structure
   ============================================= */
.cta-sub {
  font-size: 0.95rem;
  opacity: 0.85;
  line-height: 1.8;
  margin-bottom: 32px;
  margin-top: -16px;
}
/* Override old flex to 2×2 grid */
.cta-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 32px;
}
.cta-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
}
.cta-feature-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.3;
}
.cta-feature-sub {
  font-size: 0.78rem;
  opacity: 0.75;
  line-height: 1.5;
}
.cta-disclaimer {
  font-size: 0.78rem;
  opacity: 0.6;
  margin-top: 16px;
  line-height: 1.7;
}

/* =============================================
   CLINIC INFO — updated grid & elements
   ============================================= */
.clinic-phone-box {
  margin-bottom: 20px;
}
.clinic-phone-link {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--navy);
  text-decoration: none;
  display: block;
  line-height: 1.2;
}
.schedule-time {
  font-size: 0.82rem;
  color: var(--text-light);
}
.schedule-reserved {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}
.schedule-note {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.6;
}
.clinic-address-box {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.address-note {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 6px;
}
.clinic-access-col { }
.access-heading {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 12px;
}
.access-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.access-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.85rem;
  line-height: 1.6;
}
.access-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background: var(--gold);
  border-radius: 50%;
  margin-top: 6px;
}
.clinic-parking-section {
  margin-top: 8px;
}
.parking-heading {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 6px;
}

/* =============================================
   RESPONSIVE (Mobile First Breakpoints)
   ============================================= */
@media (max-width: 768px) {
  .section-pad { padding: 48px 0; }
  .section-title { font-size: 1.3rem; margin-bottom: 28px; }

  /* Hero — 768px 以下 */
  .hero { min-height: auto; padding: calc(var(--header-h) + 24px) 16px 40px; }
  .hero-content { max-width: 100%; }
  .hero-eyebrow { font-size: 0.9rem; }
  .hero-title { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .hero-sub { font-size: 0.9rem; margin-bottom: 24px; }

  /* 医師写真 × 特徴カード：縦積みに変更 */
  .hero-middle {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-doctor-photo-wrap {
    max-width: 200px;
    margin: 0 auto;
    aspect-ratio: 291/309;
  }
  /* 右カラム */
  .hero-right-col { gap: 10px; }

  /* 特徴カード：2列折り返し */
  .hero-feat-cards {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-feat-card {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
    padding: 14px 12px;
  }
  .hero-feat-card__title { font-size: 0.88rem; }
  .hero-feat-card__desc  { font-size: 0.75rem; }

  /* キャンペーンバナー */
  .campaign-label { font-size: 1.15rem; }
  .campaign-text  { font-size: 1.15rem; }

  /* チェックバッジ */
  .hero-checks { gap: 8px; }
  .check-badge { font-size: 0.75rem; padding: 7px 10px; min-height: 34px; }

  /* CTA ボタン：縦積み・全幅 */
  .hero-cta-wrap { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-hero-primary,
  .btn-hero-sub {
    width: 100%;
    line-height: 1.4;
    padding: 18px 24px;
    min-height: 56px;
    font-size: 1rem;
  }

  /* Solution */
  .solution-content { grid-template-columns: 1fr; }
  .solution-cards { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-cards { grid-template-columns: 1fr; }

  /* Doctor */
  .clinic-info-card { grid-template-columns: 1fr; }
  .doctor-profile { grid-template-columns: 1fr; }
  .doctor-photo-wrap { max-width: 280px; margin: 0 auto; }

  /* Flow */
  .flow-steps { grid-template-columns: repeat(2, 1fr); }
  .flow-procedures { grid-template-columns: 1fr; }

  /* Clinic Info */
  .clinic-info-grid { grid-template-columns: 1fr; }

  /* Reasons */
  .reason-card { grid-template-columns: 1fr; text-align: center; }
  .reason-number { justify-content: center; }
  .reason-body { grid-column: 1; }
  .reason-points { justify-content: center; }

  /* Footer */
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-nav { justify-content: center; }

  /* CTA */
  .cta-heading { font-size: 1.3rem; }
  .cta-features { grid-template-columns: 1fr; max-width: 320px; }

  /* Section shared */
  .section-sub { margin-top: -16px; }

  /* Solution */
  .solution-synergy { padding: 16px; }

  /* Reasons — stack to single column */
  .reason-card { grid-template-columns: 1fr; gap: 16px; }
  .reason-number { font-size: 2rem; }

  /* Pricing */
  .pricing-features { text-align: center; }

  /* Doctor */
  .doctor-clinic-photo { height: 200px; }
  .doctor-info-row { flex-direction: column; gap: 4px; }
  .info-label { width: auto; }
  .doctor-message-wrap { padding: 20px; }

  /* Flow — 1 column procedures */
  .flow-procedures { grid-template-columns: 1fr; }
  .flow-procedures-card { padding: 20px; }

  /* Case study */
  .case-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Clinic Info */
  .clinic-phone-link { font-size: 1.3rem; }
  .clinic-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(1.2rem, 7vw, 1.5rem); }
  .hero-sub { font-size: 0.82rem; }
  .campaign-label { font-size: 0.9rem; }
  .campaign-text { font-size: 1.05rem; }

  /* 特徴カード：480px 以下は1カラム縦積み */
  .hero-feat-card { flex: 1 1 100%; }
  /* CTA ボタン min-height をさらに縮小 */
  .btn-hero-primary, .btn-hero-sub { min-height: 52px; }
  .flow-steps { grid-template-columns: 1fr; }
  .compare-table { font-size: 0.8rem; }
  .compare-table th, .compare-table td { padding: 10px 8px; }

  /* New elements 480px */
  .cta-features { max-width: 100%; }
  .reason-number { font-size: 1.8rem; }
  .case-photos { grid-template-columns: 1fr; }
  .doctor-profile { grid-template-columns: 1fr; }
  .doctor-photo-wrap { max-width: 240px; margin: 0 auto; }

  /* Flow step: 480px 以下は縦積みに戻す */
  .flow-step {
    grid-template-columns: 1fr;
    grid-template-areas:
      "badge"
      "img"
      "title"
      "desc"
      "time";
  }
  .step-img-wrap {
    aspect-ratio: 4/3;
    height: auto;
    min-height: 0;
  }
}

/* =============================================
   FIGMA DIFF PATCH
   ============================================= */

/* 1. Solution Badge — 右下・暗色背景に変更（Figma: bottom-right, dark overlay） */
.solution-badge {
  top: auto;
  left: auto;
  bottom: 16px;
  right: 16px;
  background: rgba(13, 92, 138, 0.82);
  color: var(--white);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 10px 14px;
  line-height: 1.5;
  text-align: center;
}

/* 2. Pricing Campaign Banner — navy背景（Figma: dark navy, not gold） */
.pricing-campaign {
  background: var(--navy);
  color: var(--white);
}

/* 3. Flow Step Cards — 横並び（左:テキスト, 右:画像）Figma layout */
.flow-step {
  display: grid;
  grid-template-columns: 1fr 140px;
  grid-template-areas:
    "badge img"
    "title img"
    "desc  img"
    "time  img";
  column-gap: 16px;
  row-gap: 6px;
  text-align: left;
  align-items: start;
}
.step-badge    { grid-area: badge; }
.step-img-wrap {
  grid-area: img;
  aspect-ratio: unset;
  height: 100%;
  min-height: 160px;
  align-self: stretch;
}
.step-title { grid-area: title; }
.step-desc  { grid-area: desc; }
.step-time  { grid-area: time; align-self: end; }

/* 4. Pricing CTA Button — 幅を広げる（Figma: 横幅広めのセンタリング） */
.pricing .text-center .btn { min-width: 300px; }

/* 5. Clinic Phone Box — 枠付きボックス（Figma: bordered box） */
.clinic-phone-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-align: center;
  background: var(--white);
}

/* 6. FAQ Answer — [hidden] が CSS display: flex に負けないよう強制 */
.faq-answer[hidden] { display: none !important; }

/* 7. Reason Cards — Figma: navy bg、左240px列、シンプル白bullet */
.reason-card {
  background: var(--navy);
  color: var(--white);
  grid-template-columns: 240px 1fr;
  gap: 0;
  padding: 0;
}
.reason-left {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reason-right {
  background: var(--white);
  color: var(--text);
  padding: 32px;
}
.reason-right p {
  color: var(--text-light);
  line-height: 1.9;
  margin-bottom: 16px;
}
.reason-right p:last-child { margin-bottom: 0; }
.reason-title { color: var(--white); font-size: 1.05rem; }
/* reason-number: display:flex の旧スタイルを block で完全上書き */
.reason-number {
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: 3rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
/* Points: cream pill を廃止、シンプル白 bullet リスト */
.reason-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reason-point {
  background: none !important;
  border-radius: 0 !important;
  padding: 0 0 0 14px !important;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  font-weight: 500;
  position: relative;
}
.reason-point::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 900;
}

/* 8. Case Study Header — Figma: cream-gold tint、株数を大きく */
.case-header {
  background: rgba(0, 163, 194, 0.1);
  border-bottom: 2px solid rgba(0, 163, 194, 0.3);
  color: var(--navy);
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
}
.case-count {
  font-size: 1rem;
  color: var(--navy);
  opacity: 1;
}
.case-count-num {
  font-size: 2.8rem;
  color: var(--gold);
  line-height: 1;
}
.case-patient { color: var(--navy); font-size: 0.9rem; }

/* Reason mobile — 768px 以下は縦積み */
@media (max-width: 768px) {
  .reason-card {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .reason-img-wrap { aspect-ratio: 16 / 7; }  /* モバイルは少し低めに */
  .reason-left {
    padding: 24px 20px;
    text-align: center;
  }
  .reason-right { padding: 24px 20px; }
  .reason-points { align-items: center; }
  .reason-number { text-align: center; }
}

/* =============================================
   ① ② LIGHT SECTION OVERRIDES
   bg-navy → bg-light に変更されたセクション用
   (solution, doctor)
   ============================================= */

/* --- SOLUTION section on bg-light --- */
.solution.bg-light .solution-text { color: var(--text); }

.solution.bg-light .area-tag {
  background: var(--cream);
  border-color: var(--gold);
  color: var(--navy);
}

.solution.bg-light .solution-card {
  background: var(--white);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.solution.bg-light .solution-card--highlight {
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(0,163,194,0.2);
}

.solution.bg-light .card-label { color: var(--text-light); opacity: 1; }
.solution.bg-light .card-desc  { color: var(--text-light); opacity: 1; }
.solution.bg-light .card-title { color: var(--text); }
.solution.bg-light .card-rate  { color: var(--navy); }

.solution.bg-light .solution-synergy {
  background: rgba(0,163,194,0.08);
  border-color: rgba(0,163,194,0.35);
}
.solution.bg-light .solution-synergy-desc { color: var(--text-light); opacity: 1; }

/* --- DOCTOR section on bg-light --- */
.doctor.bg-light .section-title { color: var(--text); }

.doctor.bg-light .doctor-info-rows {
  border-top-color: var(--border);
}
.doctor.bg-light .doctor-info-row {
  border-bottom-color: var(--border);
  color: var(--text);
}
.doctor.bg-light .info-value { opacity: 1; color: var(--text); }

.doctor.bg-light .doctor-name-label { color: var(--navy); }
.doctor.bg-light .doctor-title-label { opacity: 1; }

.doctor.bg-light .doctor-credentials li { opacity: 1; color: var(--text-light); }

.doctor.bg-light .doctor-message-wrap {
  background: var(--white);
  border-color: var(--border);
}
.doctor.bg-light .doctor-quote { color: var(--text); opacity: 1; }
.doctor.bg-light .doctor-message p { color: var(--text-light); opacity: 1; }

.doctor.bg-light .clinic-info-card {
  background: var(--white);
  border-color: var(--border);
}

/* pricing-card--dark の追加調整 */
.pricing-card--dark .pricing-features { border-color: var(--border); }
.pricing-card--dark .pricing-features li { color: var(--text-light); }

/* ==========================================================================
   ⑤⑥ DESIGN OVERHAUL — テンプレ感排除 + 長文読みやすさ
   ========================================================================== */

/* ---------- Section Title: マーカー風装飾 ---------- */
.section-title {
  position: relative;
  padding-bottom: 20px;
}
.pricing-card--dark .pricing-features li { color: var(--text-light); }

/* ==========================================================================
   ⑤⑥ DESIGN OVERHAUL — テンプレ感排除 + 長文読みやすさ
   ========================================================================== */

/* ---------- Section Title: マーカー風下線 ---------- */
.section-title {
  position: relative;
  padding-bottom: 20px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
}

/* ---------- Section Eyebrow ---------- */
.section-eyebrow {
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  color: var(--gold);
  opacity: 0.7;
}
.section-eyebrow::after { display: none; }

/* ===========================================
   BACKGROUND DECORATION — セクション背景の差別化
   =========================================== */

/* 浮遊ドットパターン（cream背景セクション） */
.problem,
.reasons,
.flow {
  position: relative;
}
.problem::before,
.reasons::before,
.flow::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle, rgba(0,163,194,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.problem > .container,
.reasons > .container,
.flow > .container {
  position: relative;
  z-index: 1;
}

/* ウェーブ区切り（セクション上部） */
.solution::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0; right: 0;
  height: 48px;
  background: var(--gray-light);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 1;
}
.solution { position: relative; }

.transplant-compare::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0; right: 0;
  height: 40px;
  background: var(--base);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 1;
}
.transplant-compare { position: relative; }

/* 装飾的なフローティングサークル */
.pricing::before {
  content: '';
  position: absolute;
  top: 60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0,163,194,0.06) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.pricing::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(0,163,194,0.04) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.pricing { position: relative; overflow: hidden; }
.pricing > .container { position: relative; z-index: 1; }

/* 斜めセクション（CTA前） */
.cta-section::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 0; right: 0;
  height: 60px;
  background: var(--navy);
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}

/* ===========================================
   HERO — キャンペーンバナー光彩
   =========================================== */
.hero-campaign {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(0,163,194,0.6);
  background: linear-gradient(135deg, rgba(0,163,194,0.25) 0%, rgba(0,163,194,0.1) 100%);
}
.campaign-shimmer {
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}
.hero-feat-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-feat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ===========================================
   PROBLEM — お悩みセクション
   =========================================== */
.problem-item {
  border-bottom: none;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  margin-bottom: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.problem-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.problem-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 1px;
}
.problem-check { display: none; }

/* ∨∨ アロー */
.problem-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 16px auto 8px;
  line-height: 0.75;
}
.problem-arrow span {
  display: block;
  font-size: 1.6rem;
  color: var(--gold);
  font-weight: 900;
  opacity: 0.8;
}

/* CTA Box — ゴールドボーダー枠線スタイル */
.problem-cta-box {
  position: relative;
  overflow: hidden;
  padding: 32px 28px;
  border-radius: 16px;
  max-width: 560px;
  background: rgba(0,163,194,0.05);
  border: 2px solid var(--gold);
  color: var(--navy);
}
.problem-cta-deco {
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: rgba(0,163,194,0.06);
  border-radius: 50%;
}
.problem-cta-deco::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 100px; height: 100px;
  background: rgba(0,163,194,0.04);
  border-radius: 50%;
}
.problem-cta-main {
  position: relative;
  z-index: 1;
  color: var(--navy);
  text-shadow: none;
}
.btn-white {
  display: inline-block;
  background: var(--white);
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 900;
  padding: 16px 40px;
  border-radius: 50px;
  margin-top: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
  letter-spacing: 0.04em;
}
.btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.btn-pulse { animation: ctaPulse 2.5s ease-in-out infinite; }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
  50%      { box-shadow: 0 4px 28px rgba(0,163,194,0.5); }
}

/* ===========================================
   SOLUTION — 毛根再生注射とは
   =========================================== */
.solution-image-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}
.solution-img { transition: transform 0.5s ease; }
.solution-image-wrap:hover .solution-img { transform: scale(1.03); }
.solution-badge {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.04em;
}

/* ⑥ Solution Text Block — 長文をカード化 */
.solution-text-block {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  margin-bottom: 32px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.solution-text-inner {
  display: flex;
  gap: 20px;
  padding: 32px 28px 24px;
  align-items: flex-start;
}
.solution-text-icon { flex-shrink: 0; margin-top: 4px; }
.solution-text-body {
  font-size: 0.95rem;
  line-height: 2.1;
  color: var(--text);
}
.solution-text-body p { margin: 0; }
.solution-highlight-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(0,163,194,0.06) 0%, rgba(0,163,194,0.12) 100%);
  border-top: 2px solid rgba(0,163,194,0.2);
  padding: 16px 28px;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 0.03em;
}
.highlight-bar-icon { flex-shrink: 0; display: flex; }

/* Solution cards — ホバー + 装飾 */
.solution.bg-light .solution-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 16px;
}
.solution.bg-light .solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.solution.bg-light .solution-card--highlight {
  border-width: 2px;
  position: relative;
}
.solution.bg-light .solution-card--highlight::after {
  content: 'BEST';
  position: absolute;
  top: 12px; right: 12px;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  background: var(--gold);
  color: var(--white);
  padding: 2px 10px;
  border-radius: 50px;
}
.solution.bg-light .solution-card--highlight:hover {
  box-shadow: 0 12px 40px rgba(0,163,194,0.3);
}

/* ===========================================
   COMPARISON TABLE — 定着率テーブル
   =========================================== */
/* ⑥ イントロカード */
.compare-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border-radius: 16px;
  padding: 24px 28px;
  margin: -16px auto 36px;
  max-width: 700px;
  border-left: 5px solid var(--gold);
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.compare-intro-icon { flex-shrink: 0; margin-top: 2px; }
.compare-intro p {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--text);
  margin: 0;
}

/* テーブル装飾 */
.compare-table {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,0.07);
  border: 1px solid var(--border);
}
.compare-table thead th {
  font-size: 0.82rem;
  padding: 20px 16px;
  letter-spacing: 0.02em;
}
.compare-table thead .col-us {
  position: relative;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}
.col-us-badge {
  display: block;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.25);
  padding: 3px 12px;
  border-radius: 50px;
  margin: 0 auto 8px;
  width: fit-content;
}
.compare-table tbody tr {
  transition: background 0.2s ease;
}
.compare-table tbody tr:hover {
  background: rgba(0,163,194,0.05);
}
.compare-table .col-us {
  background: rgba(0,163,194,0.04);
  border-left: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
}
.compare-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.015);
}
.compare-table tbody tr:nth-child(even) .col-us {
  background: rgba(0,163,194,0.06);
}
.compare-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,163,194,0.15) 0%, rgba(0,163,194,0.08) 100%);
  margin-bottom: 4px;
  font-size: 1.3rem;
}
.compare-mark--gray {
  background: rgba(0,0,0,0.04);
  color: #bbb;
}
.compare-table td { font-size: 0.85rem; vertical-align: middle; }
.compare-table .col-us span { font-weight: 700; }

/* ===========================================
   REASONS — 選ばれる３つの理由（画像トップ型）
   =========================================== */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .reasons-grid { grid-template-columns: 1fr; gap: 20px; }
}
.reason-card {
  overflow: hidden;
  background: var(--white);
  color: var(--text);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: 0;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.reason-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.14);
}
/* 画像エリア（カード上部） */
.reason-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  flex-shrink: 0;
}
.reason-card-img .reason-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.reason-card:hover .reason-card-img .reason-img {
  transform: scale(1.04);
}
/* REASON + 番号バッジ（画像左上オーバーレイ） */
.reason-num-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(10,34,64,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 6px 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.reason-number-label {
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.5);
  line-height: 1;
}
.reason-num-badge .reason-number {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(0,163,194,0.5) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* ボディエリア */
.reason-card-body {
  padding: 24px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* タイトル */
.reason-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--navy) !important;
  line-height: 1.5;
  margin-bottom: 0;
  padding-left: 0 !important;
}
.reason-title::before { display: none; }
/* タイトル下の区切り線 */
.reason-sep {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 3px;
  margin: 12px 0 16px;
}
/* ポイントリスト */
.reason-points {
  list-style: none;
  padding: 0; margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reason-point {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text) !important;
  line-height: 1.5;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  position: static !important;
}
/* 旧 ::before bullet を無効化 */
.reason-card .reason-point::before { content: none; display: none; }
/* 説明文 */
.reason-desc {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.reason-desc p {
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--text-light) !important;
  margin: 0;
}

/* ===========================================
   PRICING — 料金案内
   =========================================== */
.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.12);
}
/* 上部アクセントライン */
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--border);
}
.pricing-card--popular::before {
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  height: 5px;
}
.pricing-card--dark::before { background: var(--navy); }

/* リボンバッジ */
.pricing-ribbon {
  position: absolute;
  top: 18px; right: -30px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 5px 40px;
  transform: rotate(45deg);
  letter-spacing: 0.1em;
  box-shadow: 0 2px 12px rgba(0,163,194,0.4);
  z-index: 1;
}
.pricing-card--popular {
  border-width: 2px;
  background: linear-gradient(180deg, rgba(0,163,194,0.04) 0%, var(--white) 30%);
}

/* キャンペーンバナー */
.pricing-campaign {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 28px 24px;
}
.pricing-campaign::before {
  content: '';
  position: absolute;
  top: -60%; right: -15%;
  width: 240px; height: 240px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.pricing-campaign::after {
  content: '';
  position: absolute;
  bottom: -50%; left: -10%;
  width: 180px; height: 180px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}
/* ⑥ キャンペーン構造化 */
.pricing-campaign-head { position: relative; z-index: 1; }
.pricing-campaign-divider {
  width: 60px; height: 1px;
  background: rgba(255,255,255,0.3);
  margin: 18px auto;
  position: relative; z-index: 1;
}
.pricing-campaign-foot { position: relative; z-index: 1; }
.pricing-campaign-body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  opacity: 0.95;
  line-height: 1.7;
  margin-bottom: 12px;
}
.pricing-campaign-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1.6;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 10px 24px;
  margin: 0 auto;
  width: fit-content;
  backdrop-filter: blur(4px);
}
.pricing-monitor {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
}
.pricing-monitor-label {
  display: inline-block;
  background: linear-gradient(135deg, rgba(0,163,194,0.12), rgba(0,163,194,0.06));
  border: 1px solid rgba(0,163,194,0.2);
  padding: 4px 16px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 10px;
  letter-spacing: 0.06em;
}

/* Features SVG */
.feat-check-svg {
  flex-shrink: 0;
  vertical-align: -2px;
  margin-right: 4px;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.pricing-features li::before { display: none; }

/* ===========================================
   FLOW — ステップ
   =========================================== */
.flow-step {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 16px;
}
.flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.step-badge { letter-spacing: 0.12em; }

/* ===========================================
   FAQ — アコーディオン
   =========================================== */
.faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.2s ease;
}
.faq-item:hover {
  background: rgba(0,163,194,0.03);
  border-radius: var(--radius);
}
.faq-q-icon { box-shadow: 0 2px 8px rgba(10,34,64,0.15); }

/* ===========================================
   CTA SECTION — 最終CTA
   =========================================== */
.cta-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 60%, #0a1628 100%);
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(0,163,194,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,163,194,0.08) 0%, transparent 50%);
  z-index: 0;
}
.cta-feature {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  transition: transform 0.3s ease;
}
.cta-feature:hover { transform: translateY(-2px); }

/* ===========================================
   POST-HERO CTA
   =========================================== */
.post-hero-cta {
  background: linear-gradient(180deg, var(--navy-dark) 0%, var(--base) 100%);
  padding: 48px 0;
}
.post-hero-cta .btn {
  font-size: 1.15rem;
  padding: 20px 56px;
  border-radius: 60px;
  box-shadow: 0 6px 24px rgba(0,163,194,0.4);
  animation: ctaPulse 2.5s ease-in-out infinite;
}

/* ===========================================
   GLOBAL — カード共通
   =========================================== */
.case-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}

/* ===========================================
   RESPONSIVE — ⑤⑥ 対応
   =========================================== */
@media (max-width: 768px) {
  .pricing-ribbon { top: 12px; right: -36px; font-size: 0.58rem; padding: 3px 38px; }
  .problem-cta-box { padding: 24px 20px; }
  .btn-white { font-size: 0.88rem; padding: 14px 28px; }
  .post-hero-cta .btn { padding: 16px 32px; font-size: 1rem; }
  .compare-mark { width: 28px; height: 28px; font-size: 1.1rem; }
  .solution-text-inner { flex-direction: column; padding: 20px; gap: 12px; }
  .solution-text-icon { display: none; }
  .solution-highlight-bar { padding: 12px 20px; font-size: 0.85rem; }
  .compare-intro { flex-direction: column; gap: 10px; padding: 16px 20px; }
  .compare-intro-icon { display: none; }
  .pricing-campaign-guarantee { font-size: 0.78rem; padding: 8px 16px; }
  .reason-card { border-radius: 16px; margin-bottom: 20px; }
  .reason-card-body { padding: 20px; }
  .reason-num-badge .reason-number { font-size: 1.8rem; }
  .pricing-card { border-radius: 16px; }
}
@media (max-width: 480px) {
  .pricing-ribbon { top: 10px; right: -38px; }
  .post-hero-cta .btn { width: 100%; max-width: 340px; }
  .solution-highlight-bar { flex-direction: column; gap: 6px; text-align: center; }
  .reason-card-body { padding: 16px; }
}

/* =====================================================
   ⑤⑥ SHINWA STYLE REDESIGN — Medical Blue + Teal
   ===================================================== */

/* ===========================================
   SECTION EYEBROW — teal統一
   =========================================== */
.section-eyebrow {
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
}

/* ===========================================
   SECTION TITLE — アンダーライン装飾
   =========================================== */
.section-title {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 36px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 3px;
}
/* navy背景セクションでは::afterをteal薄めに */
.bg-navy .section-title::after {
  background: linear-gradient(90deg, rgba(0,163,194,0.6), rgba(41,189,217,0.3));
}

/* ===========================================
   HERO — ファーストビュー強化
   =========================================== */
.hero-eyebrow {
  display: inline-block;
  color: var(--gold-light);
  font-weight: 900;
  letter-spacing: 0.08em;
}
.hero-title .text-gold {
  color: var(--gold-light);
  text-shadow: 0 0 24px rgba(0,163,194,0.4);
}
.hero-campaign {
  border: 2px solid rgba(0,163,194,0.6);
  box-shadow: 0 0 24px rgba(0,163,194,0.2);
}
.hero-feat-card--highlight {
  border-color: var(--gold);
  background: rgba(0,163,194,0.15);
}
.post-hero-cta {
  background: linear-gradient(180deg, var(--navy-dark) 0%, var(--navy) 100%);
}

/* ===========================================
   PROBLEM — お悩みリスト & CTA
   =========================================== */
.problem-item {
  border-left: 3px solid transparent;
  background: var(--white);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.problem-item:hover {
  border-left-color: var(--gold);
}
.problem-cta-box {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(0,163,194,0.03) 10px,
      rgba(0,163,194,0.03) 20px
    ),
    linear-gradient(135deg, rgba(0,163,194,0.06) 0%, rgba(0,163,194,0.12) 100%);
  border: 2px solid var(--gold);
  color: var(--navy);
}
.problem-cta-main {
  font-size: 1.25rem !important;
  line-height: 1.6;
  color: var(--navy) !important;
}
.problem-arrow span { color: var(--gold); }

/* ===========================================
   SOLUTION — 毛根再生注射 段落 + 数値
   =========================================== */
.solution-text-body p {
  margin: 0 0 1.4em;
  line-height: 2.0;
}
.solution-text-body p:last-child { margin-bottom: 0; }

/* 数値コールアウト */
.solution-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius: 0 0 16px 16px;
}
.solution-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.solution-stat-num {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text-white);
  letter-spacing: -0.02em;
}
.solution-stat-num small {
  font-size: 1.2rem;
  font-weight: 700;
  vertical-align: 0.2em;
}
.solution-stat--highlight .solution-stat-num {
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(0,163,194,0.5);
}
.solution-stat-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  text-align: center;
  line-height: 1.4;
  max-width: 140px;
}
.solution-stat--highlight .solution-stat-label { color: rgba(255,255,255,0.9); }
.solution-stat-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ===========================================
   TRANSPLANT COMPARE — 定着率
   =========================================== */
.compare-intro {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-alt) 100%);
  border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin-bottom: 32px;
}
.compare-intro p { font-size: 0.95rem; line-height: 1.9; color: var(--text); }

/* ===========================================
   PRICING — キャンペーン強化
   =========================================== */
.pricing-campaign {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 36px;
}
.pricing-campaign-head {
  padding: 24px 28px 16px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--white);
  position: relative;
}
.pricing-campaign-head::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 90% 20%, rgba(0,163,194,0.2) 0%, transparent 50%);
  pointer-events: none;
}
.pricing-campaign-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,163,194,0.25);
  border: 1px solid rgba(0,163,194,0.5);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 14px;
  border-radius: 50px;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.pricing-campaign-text {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.4;
  color: var(--white);
}
.pricing-campaign-divider {
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, transparent 100%);
}
.pricing-campaign-foot {
  padding: 16px 28px 20px;
  background: rgba(10,34,64,0.04);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 16px 16px;
}
.pricing-campaign-body {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.pricing-campaign-guarantee {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.6;
  padding: 0;
  background: none;
  border: none;
}
.pricing-campaign-guarantee::before {
  content: '★';
  color: var(--gold);
  flex-shrink: 0;
  font-size: 0.85rem;
  margin-top: 2px;
}

/* ===========================================
   RESPONSIVE — shinwa style additions
   =========================================== */
@media (max-width: 768px) {
  .solution-stats { flex-direction: column; gap: 12px; padding: 20px; }
  .solution-stat-arrow { transform: rotate(90deg); }
  .solution-stat-num { font-size: 2.2rem; }
  .pricing-campaign-head { padding: 20px 20px 14px; }
  .pricing-campaign-foot { padding: 14px 20px 16px; }
  .pricing-campaign-text { font-size: 1.15rem; }
  .compare-intro { padding: 16px 18px; }
  .section-title { padding-bottom: 16px; margin-bottom: 28px; }
}
@media (max-width: 480px) {
  .solution-stat-num { font-size: 1.9rem; }
  .solution-stats { gap: 8px; padding: 16px; }
}


/* =====================================================
   ORIGINAL DESIGN v2 — Problem/Solution/Reasons/Pricing
   ===================================================== */

/* ===========================================
   PROBLEM — 番号バッジ + ドラマティック CTA
   =========================================== */
.problem-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.problem-item:hover {
  transform: translateX(6px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  border-color: rgba(0,163,194,0.35);
}
.problem-num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--white);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,163,194,0.35);
}
.problem-item-text {
  flex: 1;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}
.problem-item-arrow {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
}
.problem-item:hover .problem-item-arrow { opacity: 1; }

/* ドラマティック CTA ゾーン */
.problem-cta-zone {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius: 20px;
  padding: 40px 36px;
  margin-top: 20px;
  text-align: center;
}
.problem-cta-zone::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(0,163,194,0.25) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.problem-cta-zone::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,163,194,0.15) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.problem-cta-zone-deco {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 20px,
    rgba(255,255,255,0.015) 20px, rgba(255,255,255,0.015) 40px
  );
  pointer-events: none;
}
.problem-cta-zone-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.problem-cta-icon {
  flex-shrink: 0;
  animation: ctaGlow 3s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(0,163,194,0.3)); }
  50%       { filter: drop-shadow(0 0 14px rgba(0,163,194,0.8)); }
}
.problem-cta-text { text-align: left; }
.problem-cta-main {
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  color: var(--white) !important;
  text-shadow: none !important;
  line-height: 1.6;
  position: relative;
}
.problem-cta-main::after {
  content: '';
  display: block;
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 3px;
  margin-top: 12px;
}
/* 旧スタイルを非表示 */
.problem-arrow { display: none; }
.problem-cta-box { display: none !important; }

/* ===========================================
   SOLUTION — POINT ブロック + グロー数値
   =========================================== */
.solution-text-block {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  margin-bottom: 32px;
}
.solution-point-block {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
}
.solution-point-block:last-of-type { border-bottom: none; }
.solution-point-label-wrap { margin-bottom: 10px; }
.solution-point-label {
  display: inline-block;
  background: var(--navy);
  color: var(--gold-light);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  padding: 4px 14px;
  border-radius: 50px;
}
.solution-point-text {
  font-size: 0.95rem;
  line-height: 2.05;
  color: var(--text);
  margin: 0;
}

/* 数値コールアウト */
.solution-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.solution-stats::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,163,194,0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(0,163,194,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.solution-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  padding: 8px 16px;
}
.solution-stat + .solution-stat {
  border-left: 1px solid rgba(255,255,255,0.1);
}
.solution-stat-num {
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,0.65);
  letter-spacing: -0.02em;
}
.solution-stat-num small { font-size: 1.3rem; font-weight: 700; vertical-align: 0.15em; }
.solution-stat--highlight .solution-stat-num {
  color: var(--gold-light);
  text-shadow: 0 0 24px rgba(0,163,194,0.6), 0 0 48px rgba(0,163,194,0.3);
}
.solution-stat-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
  line-height: 1.4;
  max-width: 130px;
}
.solution-stat--highlight .solution-stat-label { color: rgba(255,255,255,0.85); }
.solution-stat-arrow { flex-shrink: 0; display: flex; align-items: center; z-index: 1; }

/* ===========================================
   REASONS — 画像オーバーレイ + teal hover
   =========================================== */
.reason-card-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(0deg, rgba(8,64,95,0.75) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.reason-num-badge { z-index: 2; }
.reason-card {
  border: 1px solid var(--border);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.reason-card:hover {
  border-color: var(--gold);
  box-shadow: 0 16px 56px rgba(0,163,194,0.18);
}
.reason-sep {
  background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
  width: 100%;
  max-width: 80px;
}

/* ===========================================
   TRANSPLANT COMPARE — デザイン強化
   =========================================== */
.compare-intro {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-alt) 100%);
  border-left: 4px solid var(--gold);
  border-radius: 0 14px 14px 0;
  padding: 22px 24px;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.compare-intro p { font-size: 0.95rem; line-height: 1.9; color: var(--text); font-weight: 500; }
.compare-table th.col-us {
  background: var(--navy);
  color: var(--white);
  border-bottom: 3px solid var(--gold);
}
.compare-table td.col-us {
  background: rgba(0,163,194,0.04);
  border-left: 2px solid rgba(0,163,194,0.3);
}

/* ===========================================
   PRICING — キャンペーンバナー v2
   =========================================== */
.pricing-campaign {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 8px 40px rgba(10,34,64,0.15);
}
.pricing-campaign-head {
  position: relative;
  overflow: hidden;
  padding: 32px 32px 24px;
  background: linear-gradient(135deg, var(--navy) 0%, #0a4a72 50%, var(--navy-dark) 100%);
  color: var(--white);
}
.pricing-campaign-head::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 18px,
    rgba(255,255,255,0.02) 18px, rgba(255,255,255,0.02) 36px
  );
  pointer-events: none;
}
.pricing-campaign-head::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(0,163,194,0.3) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.pricing-campaign-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,163,194,0.2);
  border: 1px solid rgba(0,163,194,0.5);
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 900;
  padding: 4px 16px;
  border-radius: 50px;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.pricing-campaign-label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
.pricing-campaign-text {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.35;
  color: var(--white);
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
}
.pricing-campaign-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 40%, rgba(0,163,194,0.2) 100%);
}
.pricing-campaign-foot {
  padding: 20px 32px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 16px 16px;
}
.pricing-campaign-body {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--text);
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.pricing-campaign-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
  background: rgba(0,163,194,0.04);
  border: 1px solid rgba(0,163,194,0.2);
  border-radius: 10px;
  padding: 12px 16px;
}
.pricing-campaign-guarantee::before {
  content: '\2605';
  color: var(--gold);
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 1px;
}
.pricing-card--popular { border: 2px solid rgba(0,163,194,0.4) !important; }

/* ===========================================
   RESPONSIVE — v2
   =========================================== */
@media (max-width: 768px) {
  .problem-cta-zone { padding: 28px 20px; }
  .problem-cta-zone-inner { flex-direction: column; gap: 16px; text-align: center; }
  .problem-cta-text { text-align: center; }
  .problem-cta-main::after { margin: 12px auto 0; }
  .problem-cta-icon { display: none; }
  .solution-point-block { padding: 18px 20px; }
  .solution-stats { padding: 20px 16px; }
  .solution-stat-num { font-size: 2.4rem; }
  .pricing-campaign-head { padding: 24px 20px 18px; }
  .pricing-campaign-foot { padding: 16px 20px 20px; }
  .pricing-campaign-text { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .problem-item { padding: 12px 14px; gap: 12px; }
  .problem-num { min-width: 30px; height: 30px; font-size: 0.6rem; }
  .solution-stat-num { font-size: 2rem; }
}


/* =====================================================
   DESIGN v3 — オリジナル感・デザイン感の強化
   Problem / Solution / Reasons / Pricing / Compare
   ===================================================== */

/* ===========================================
   BUG FIX — pricing-campaign-guarantee 二重アイコン
   =========================================== */
.pricing-campaign-guarantee::before {
  content: none !important;
}

/* ===========================================
   PROBLEM SECTION — お悩みリスト強化
   =========================================== */

/* アイテムの左端をtealに強調 */
.problem-item {
  border-left: 4px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(90deg, rgba(0,163,194,0.3), transparent) border-box;
  border-left: 4px solid transparent;
}
.problem-item:hover {
  border-left-color: var(--gold);
  background: linear-gradient(rgba(0,163,194,0.03), rgba(0,163,194,0.03)) padding-box,
              linear-gradient(90deg, var(--gold), transparent) border-box;
  border-left: 4px solid var(--gold);
}

/* セクション全体に薄いドットパターン */
#problem.section-pad {
  background-image:
    radial-gradient(circle, rgba(0,163,194,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  position: relative;
}
#problem.section-pad::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--gold), var(--navy-dark));
}

/* problem-cta-main テキスト強化 */
.problem-cta-main {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: var(--white) !important;
  line-height: 1.55 !important;
}

/* CTA zone内の強調テキスト部分 */
.problem-cta-main .text-gold,
.problem-cta-main em {
  color: var(--gold-light) !important;
  font-style: normal;
}

/* ===========================================
   SOLUTION SECTION — 毛根再生注射
   =========================================== */

/* セクションタイトル横のtealライン装飾 */
#solution .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#solution .section-eyebrow::before,
#solution .section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

/* ソリューション画像バッジを強調 */
.solution-badge {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 20px rgba(0,163,194,0.4), 0 0 40px rgba(0,163,194,0.15);
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* solution-point-label をより目立たせる */
.solution-point-label {
  background: linear-gradient(90deg, var(--navy), var(--navy-dark));
  color: var(--gold-light);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  padding: 5px 16px;
  border-radius: 50px;
  position: relative;
}
.solution-point-label::after {
  content: '';
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%);
  border-left: 10px solid var(--navy-dark);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* Stats section — 数値をさらにインパクトに */
.solution-stats {
  position: relative;
  overflow: hidden;
}
.solution-stats::after {
  content: 'VS';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  pointer-events: none;
  letter-spacing: -0.04em;
  z-index: 0;
}
.solution-stat {
  position: relative;
  z-index: 1;
}
.solution-stat-num {
  font-size: 3.4rem;
}
.solution-stat--highlight .solution-stat-num {
  font-size: 3.8rem;
  background: linear-gradient(180deg, #fff 0%, var(--gold-light) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(0,163,194,0.5));
}

/* Solution cards — カード3種をより視覚的に */
.solution-card {
  position: relative;
  overflow: hidden;
}
.solution-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border);
  border-radius: 16px 16px 0 0;
}
.solution-card--highlight::before {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  height: 4px;
}
/* card-rate グラデーションテキスト */
.card-rate--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  display: block !important;
}

/* ===========================================
   REASONS SECTION — 選ばれる3つの理由
   =========================================== */

/* reasons セクション — 薄い斜線パターン */
#reasons.section-pad {
  background-image:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 40px,
      rgba(0,163,194,0.025) 40px,
      rgba(0,163,194,0.025) 80px
    );
}

/* 理由カードのボディに大きな透過番号を背景に */
.reason-card-body {
  position: relative;
  overflow: hidden;
}
.reason-card-body::after {
  content: attr(data-bg-num);
  position: absolute;
  bottom: -16px;
  right: -8px;
  font-size: 7.5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(0,163,194,0.05);
  pointer-events: none;
  letter-spacing: -0.04em;
  z-index: 0;
  user-select: none;
}
.reason-card-body > * { position: relative; z-index: 1; }

/* タイトルに細いteal下線 */
.reason-title {
  position: relative;
  padding-bottom: 14px !important;
  margin-bottom: 0 !important;
  border-bottom: 2px solid var(--border);
}
.reason-title::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
/* reason-sepは非表示にしてtitleのborderに一本化 */
.reason-sep { display: none; }

/* reason-desc を引用ブロック風に */
.reason-desc {
  background: linear-gradient(135deg, rgba(0,163,194,0.03), rgba(0,163,194,0.06));
  border-left: 3px solid rgba(0,163,194,0.4);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px !important;
  border-top: none !important;
  margin-top: 12px;
}
.reason-desc p {
  font-size: 0.87rem !important;
  line-height: 1.85 !important;
}

/* reason-points — 矢印アイコンにtealアクセント */
.reason-point {
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(0,163,194,0.08);
}
.reason-point:last-child {
  border-bottom: none;
}
.reason-point svg path { stroke: var(--gold); }

/* バッジの枠線をtealに */
.reason-num-badge {
  border: 1px solid rgba(0,163,194,0.45) !important;
}

/* ===========================================
   TRANSPLANT COMPARE — 定着率比較テーブル
   =========================================== */

/* セクション上部に視覚的アクセントバー */
#transplant-compare.section-pad {
  position: relative;
}
#transplant-compare .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#transplant-compare .section-eyebrow::before,
#transplant-compare .section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

/* compare-intro をより視覚的な情報ブロックに */
.compare-intro {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-alt) 100%);
  border-left: 5px solid var(--gold);
  border-radius: 0 14px 14px 0;
  padding: 20px 24px;
  margin-bottom: 32px;
  box-shadow: 4px 0 0 rgba(0,163,194,0.1), 0 4px 20px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
.compare-intro::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(0,163,194,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* テーブルヘッダー当院列 — tealグラデーション */
.compare-table thead .col-us {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--white);
}

/* tbody当院列 — 縦のtealライン強調 */
.compare-table .col-us {
  position: relative;
}

/* ===========================================
   PRICING SECTION — 料金案内
   =========================================== */

/* pricing-campaign-head — さらにリッチに */
.pricing-campaign-head {
  position: relative;
  overflow: hidden;
}
.pricing-campaign-head::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -10%;
  width: 120%;
  height: 60px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
  pointer-events: none;
}

/* campaign label - パルスアニメーション付き */
.pricing-campaign-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold-light);
  border-radius: 50%;
  animation: campaignPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes campaignPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(41,189,217,0.4); }
  50% { opacity: 0.6; transform: scale(0.8); box-shadow: 0 0 0 4px rgba(41,189,217,0); }
}

/* pricing-campaign-foot — 保証ブロックを視覚的に */
.pricing-campaign-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-campaign-guarantee {
  background: rgba(0,163,194,0.05) !important;
  border: 1px solid rgba(0,163,194,0.2) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--navy);
}

/* pricing-monitor — グラデーションテキスト */
.pricing-card--popular .pricing-monitor {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2.2rem;
  line-height: 1;
}

/* pricing-card -- 左アクセントライン (サイドバー) */
.pricing-card--popular {
  position: relative;
}
.pricing-card--popular::after {
  content: 'NO.1';
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 4rem;
  font-weight: 900;
  color: rgba(0,163,194,0.04);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 0;
}
.pricing-card--popular > * { position: relative; z-index: 1; }

/* pricing-card-title アンダーライン装飾 */
.pricing-card-title {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.pricing-card-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 32px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}

/* pricing-base価格 — 打ち消し線を強調 */
.pricing-base del,
.pricing-base s {
  color: var(--text-light);
  opacity: 0.7;
  position: relative;
}

/* features list icon */
.pricing-features li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,163,194,0.06);
  font-size: 0.88rem;
}
.pricing-features li:last-child { border-bottom: none; }

/* ===========================================
   RESPONSIVE — v3
   =========================================== */
@media (max-width: 768px) {
  #problem.section-pad::before { display: none; }
  .solution-stats::after { display: none; }
  .solution-stat--highlight .solution-stat-num { font-size: 2.8rem; }
  .reason-card-body::after { font-size: 5rem; }
  .pricing-card--popular::after { font-size: 3rem; }
  .compare-intro::before { display: none; }
}
@media (max-width: 480px) {
  .solution-stat--highlight .solution-stat-num { font-size: 2.4rem; }
  .solution-stat-num { font-size: 2rem; }
  .reason-card-body::after { font-size: 4rem; }
}


/* =====================================================
   DESIGN v3b — SVGアイコン修正 + 最終ポリッシュ
   ===================================================== */

/* pricing-campaign-foot SVGアイコン — 白→teal/navy修正 */
.pricing-campaign-foot .pricing-campaign-body svg circle {
  stroke: var(--gold);
}
.pricing-campaign-foot .pricing-campaign-body svg path {
  stroke: var(--gold);
}
.pricing-campaign-foot .pricing-campaign-guarantee svg path {
  fill: var(--gold);
  opacity: 1;
}

/* pricing-campaign-body のdisplay調整 */
.pricing-campaign-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: flex-start;
}
.pricing-campaign-body svg { flex-shrink: 0; margin-top: 2px; }

/* pricing-campaign-guarantee のdisplay */
.pricing-campaign-guarantee {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}
.pricing-campaign-guarantee svg { flex-shrink: 0; margin-top: 2px; }

/* ===========================================
   HERO — ファーストビュー追加装飾
   =========================================== */

/* hero-feat-card border強調 */
.hero-feat-card {
  border-left: 3px solid rgba(0,163,194,0.2);
  transition: border-color 0.3s ease;
}
.hero-feat-card:hover {
  border-left-color: var(--gold);
}
.hero-feat-card--highlight {
  border-left-color: var(--gold) !important;
}

/* hero-check items */
.hero-check {
  position: relative;
}

/* ===========================================
   SOLUTION — カード装飾の追加
   =========================================== */

/* solution-card label バッジ */
.card-label {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: rgba(0,163,194,0.08);
  border: 1px solid rgba(0,163,194,0.2);
  color: var(--navy);
  padding: 3px 12px;
  border-radius: 50px;
  margin-bottom: 8px;
}
.solution-card--highlight .card-label {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  color: var(--gold-light);
}

/* ===========================================
   COMPARE — テーブル内マーク
   =========================================== */

/* 当院の○印 — tealサークル */
.compare-table .col-us .compare-mark {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--white);
  font-size: 1.1rem;
}

/* ===========================================
   GLOBAL — セクション上部アクセントバー
   =========================================== */

/* すべてのcream背景セクションにTop Gradient */
.bg-cream.section-pad {
  position: relative;
}

/* flow section - stepタイトルにteal装飾 */
.step-title {
  position: relative;
  display: inline-block;
}

/* flow arrow decoration */
.flow-step-arrow svg path {
  stroke: var(--gold);
}

/* ===========================================
   CTA SECTION — 最終CTA強化
   =========================================== */

/* CTA section の位置装飾 */
.cta-section {
  position: relative;
  overflow: hidden;
}
.cta-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), transparent);
}

/* btn-goldのシャドウ強化 */
.btn-gold,
.btn.btn-gold {
  box-shadow: 0 4px 20px rgba(0,163,194,0.35);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-gold:hover,
.btn.btn-gold:hover {
  box-shadow: 0 8px 32px rgba(0,163,194,0.5);
}

/* ===========================================
   RESPONSIVE — v3b
   =========================================== */
@media (max-width: 768px) {
  .hero-feat-card { border-left-width: 2px; }
  .pricing-campaign-body { font-size: 0.85rem; }
  .pricing-campaign-guarantee { font-size: 0.82rem !important; }
}


/* =====================================================
   HERO SIMPLE — FV 1枚画像 + CTAボタン
   ===================================================== */
.hero--simple {
  background: none;
  min-height: unset;
  padding: 0;
  display: block;
}

/* 画像ラップ — 中央寄せ・両サイド削減 */
.hero-fv-img-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  line-height: 0;
  display: block;
  overflow: hidden;
}
.hero-fv-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* CTA エリア — 画像直下 */
.hero-fv-cta {
  background: var(--white);
  text-align: center;
  padding: 36px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
}
.hero-fv-cta .btn-hero-primary {
  min-width: 280px;
  font-size: 1.05rem;
  padding: 18px 40px;
  border-radius: 60px;
  box-shadow: 0 6px 24px rgba(0,163,194,0.35);
  animation: ctaPulse 2.5s ease-in-out infinite;
}
.hero-fv-cta .btn-hero-sub {
  font-size: 0.88rem;
  padding: 10px 28px;
  border-radius: 60px;
}
.hero-fv-cta .hero-disclaimer {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-light);
}

@media (max-width: 480px) {
  .hero-fv-cta .btn-hero-primary { min-width: unset; width: 100%; max-width: 340px; }
  .hero-fv-cta { padding: 28px 16px 24px; gap: 12px; }
}


/* =====================================================
   DESIGN v4 — 参考デザイン準拠修正
   ===================================================== */

/* ===========================================
   REASONS — 横並びレイアウト（テキスト左・画像右）
   =========================================== */
.reasons-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  grid-template-columns: unset !important;
}
.reason-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  min-height: 280px;
}
/* テキスト側（左） */
.reason-card-body {
  flex: 1 !important;
  min-width: 0;
  padding: 32px 36px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 画像側（右）*/
.reason-card-img {
  width: 40% !important;
  max-width: 360px !important;
  flex-shrink: 0 !important;
  aspect-ratio: unset !important;
  min-height: 280px !important;
  order: 2;
}
.reason-card-img .reason-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* REASON バッジ：インライン（画像オーバーレイから本文内へ移動） */
.reason-num-badge--inline {
  position: static !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 12px;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
}
.reason-num-badge--inline .reason-number-label {
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
  color: var(--gold) !important;
  opacity: 1 !important;
}
.reason-num-badge--inline .reason-number {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
/* タイトル：アンダーラインを段落として使う */
.reason-title {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  margin-bottom: 16px !important;
}

/* スマホ：縦積みに戻す */
@media (max-width: 768px) {
  .reason-card {
    flex-direction: column !important;
    min-height: unset;
  }
  .reason-card-img {
    width: 100% !important;
    max-width: none !important;
    min-height: 200px !important;
    aspect-ratio: 16 / 7 !important;
    order: 0;
  }
  .reason-card-body {
    padding: 24px 20px !important;
  }
  .reason-card-body::after { display: none; }
}

/* ===========================================
   PROBLEM — 下向き≫セパレーター
   =========================================== */
.problem-cta-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 20px auto 0;
  line-height: 0.6;
}
.problem-cta-chevron {
  display: block;
  font-size: 2rem;
  line-height: 0.8;
  color: var(--gold);
  opacity: 0.7;
  transform: rotate(90deg);
  font-family: serif;
}

/* ===========================================
   SOLUTION — 毛根再生注射テキストブロック ダーク化
   =========================================== */
.solution-text-block {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 8px 40px rgba(10,34,64,0.3) !important;
}
.solution-point-block {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 24px 28px;
}
.solution-point-block:last-of-type {
  border-bottom: none;
}
.solution-point-label {
  background: rgba(0,163,194,0.2) !important;
  color: var(--gold-light) !important;
  border: 1px solid rgba(0,163,194,0.4) !important;
}
.solution-point-label::after { display: none; }
.solution-point-text {
  color: rgba(255,255,255,0.88) !important;
  font-size: 0.92rem !important;
  line-height: 2.0 !important;
  margin-top: 12px;
}

/* ===========================================
   TRANSPLANT COMPARE — Point スタイル追加
   =========================================== */
/* セクション見出し下にクォートスタイルのサブ見出し */
.compare-intro {
  border-left: 5px solid var(--gold) !important;
  border-radius: 0 12px 12px 0 !important;
}
/* 比較テーブルの前にPoint説明ラベルを追加 */
.table-responsive {
  position: relative;
}
.table-responsive::before {
  content: POINT;
  display: block;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 8px;
  text-align: center;
}
.compare-table thead th {
  font-size: 0.82rem;
}

@media (max-width: 768px) {
  .solution-point-block { padding: 18px 20px; }
}

/* =============================================
   V2 DESIGN — Hero Below-FV
   ============================================= */
.hero-below-fv { background: #fff; }

/* キャンペーンバナー */
.hero-campaign-bar {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.hero-campaign-bar-stripe {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-55deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 12px);
  pointer-events: none;
}
.hero-campaign-bar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.hero-campaign-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-campaign-badge {
  background: #c8961a;
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .15em;
  padding: 6px 14px;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-campaign-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hero-campaign-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}
.hero-campaign-strike {
  color: rgba(255,255,255,.45);
  font-size: 1.05rem;
  margin: 0 6px;
  text-decoration: line-through;
}
.hero-campaign-free {
  color: #f5c842;
  font-size: 1.8rem;
  border-bottom: 2px solid #f5c842;
  padding-bottom: 1px;
}
.hero-campaign-cta-btn {
  background: #f5c842;
  color: var(--navy);
  font-size: .92rem;
  font-weight: 900;
  padding: 13px 28px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .2s;
}
.hero-campaign-cta-btn:hover { opacity: .9; }

/* 3つの強みグリッド */
.hero-strengths-outer {
  background: #fff;
  border-bottom: 1px solid #e8ecf2;
}
.hero-strengths-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 960px;
  margin: 0 auto;
}
.hero-strength-item {
  padding: 32px 28px;
  border-right: 1px solid #e8ecf2;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.hero-strength-item:last-child { border-right: none; }
.hero-strength-item--featured {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.15);
}
.hero-strength-item--featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c8961a, #f5c842, #c8961a);
}
.hero-strength-num {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(26,56,120,.12);
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.hero-strength-item--featured .hero-strength-num {
  color: rgba(245,200,66,.15);
}
.hero-strength-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hero-strength-item--featured .hero-strength-label { color: #f5c842; }
.hero-strength-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 10px;
}
.hero-strength-item--featured .hero-strength-title { color: #fff; }
.hero-strength-bar {
  width: 28px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 10px;
}
.hero-strength-bar--blue { background: var(--gold); }
.hero-strength-item--featured .hero-strength-bar { background: #f5c842; }
.hero-strength-desc {
  font-size: .8rem;
  color: #555;
  line-height: 1.8;
}
.hero-strength-item--featured .hero-strength-desc { color: rgba(255,255,255,.7); }
.hero-strength-item--featured .hero-strength-desc strong { color: #f5c842; }

/* Hero CTA Block */
.hero-cta-block {
  padding: 48px 20px;
  text-align: center;
  background: #f4f5f7;
  position: relative;
  overflow: hidden;
}
.hero-cta-block-stripe {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(26,56,120,.025) 0, rgba(26,56,120,.025) 1px, transparent 1px, transparent 20px);
  pointer-events: none;
}
.hero-cta-block-inner { position: relative; z-index: 1; }
.hero-cta-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hero-cta-lead {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 24px;
}
.btn-hero-cta-main {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  padding: 20px 56px;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(26,56,120,.35);
  text-decoration: none;
  letter-spacing: .05em;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.btn-hero-cta-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(26,56,120,.45);
}
.btn-hero-cta-beam {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}
.hero-cta-trust {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.hero-cta-trust-item {
  font-size: .78rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.hero-cta-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* =============================================
   V2 DESIGN — Problem Section (superseded by end block)
   ============================================= */
.problem-list {
  max-width: 100% !important;
}
.problem-icon-wrap {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0,163,194,.1);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.problem-num-v2 {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
}

/* Problem CTA Zone v2 */
.problem-cta-zone {
  background: var(--navy-dark, #132b5e) !important;
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
  padding: 72px 40px 80px !important;
  margin: 0 -20px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center;
}
.problem-cta-zone-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 10rem;
  font-weight: 700;
  color: rgba(255,255,255,.03);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .1em;
  z-index: 0;
}
.problem-cta-deco-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,163,194,.3), transparent);
  z-index: 0;
}
.problem-cta-eyebrow {
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--gold-light);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}
.problem-cta-pulse {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
}
.problem-cta-pulse::before,
.problem-cta-pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0,163,194,.4);
  animation: pulse-ring-v2 2.4s ease-out infinite;
}
.problem-cta-pulse::after { animation-delay: 1.2s; }
@keyframes pulse-ring-v2 {
  0%  { width: 48px; height: 48px; opacity: .8; }
  100%{ width: 120px; height: 120px; opacity: 0; }
}
.problem-cta-main {
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.5 !important;
  position: relative;
  z-index: 1;
  margin-bottom: 16px !important;
}
.problem-cta-main em {
  font-style: normal;
  color: var(--gold-light);
  border-bottom: 2px solid var(--gold);
}
.problem-cta-sub {
  color: rgba(255,255,255,.65);
  font-size: .88rem;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.problem-cta-btn {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  padding: 16px 36px;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0,163,194,.35);
  position: relative;
  z-index: 1;
  text-decoration: none;
  transition: transform .2s;
}
.problem-cta-btn:hover { transform: translateY(-2px); }

/* =============================================
   V2 DESIGN — Solution Section
   ============================================= */
.solution-lead-box {
  background: linear-gradient(160deg, #0a2d46 0%, var(--navy-dark, #132b5e) 100%);
  border-radius: 16px;
  border-left: 4px solid var(--gold);
  padding: 40px;
  margin-bottom: 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.solution-lead-box::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 120px;
  font-weight: 900;
  color: rgba(0,163,194,.12);
  line-height: 1;
  font-family: serif;
  pointer-events: none;
}
.solution-lead-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at bottom right, rgba(0,163,194,.12), transparent 70%);
  pointer-events: none;
}
.solution-point-block-v2 {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}
.solution-point-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: 20px 0;
}
.solution-point-badge {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(0,163,194,.2);
  border: 1px solid rgba(0,163,194,.5);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: .05em;
  line-height: 1.2;
  text-align: center;
}
.solution-point-badge span {
  font-size: 1.1rem;
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
}
.solution-point-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--gold-light);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.solution-point-text-v2 {
  font-size: .93rem;
  color: rgba(255,255,255,.88);
  line-height: 1.8;
}
.solution-point-text-v2 strong { color: var(--gold-light); }

/* Gauge bars */
.stat-gauge-wrap {
  background: var(--navy-dark, #132b5e);
  border-radius: 16px;
  padding: 36px 32px;
  margin: 0 0 32px;
}
.stat-gauge-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold-light);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.stat-gauge-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.stat-gauge-row:last-of-type { margin-bottom: 0; }
.gauge-label {
  font-size: .8rem;
  color: rgba(255,255,255,.7);
  min-width: 140px;
  flex-shrink: 0;
  line-height: 1.4;
}
.gauge-label span { font-size: .68rem; opacity: .7; }
.gauge-label--highlight { color: var(--gold-light); font-weight: 700; }
.gauge-label--highlight span { opacity: .8; }
.gauge-bar-wrap {
  flex: 1;
  background: rgba(255,255,255,.08);
  border-radius: 50px;
  height: 28px;
  overflow: hidden;
  position: relative;
}
.gauge-bar {
  height: 100%;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  transition: width 1s ease;
}
.gauge-bar-default { background: rgba(255,255,255,.2); }
.gauge-bar-highlight {
  background: linear-gradient(90deg, var(--navy), var(--gold));
  box-shadow: 0 0 12px rgba(0,163,194,.4);
}
.gauge-bar-num {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
}
.stat-gauge-note {
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  margin-top: 14px;
  text-align: right;
}

/* =============================================
   V2 DESIGN — Transplant Compare Metric Visual
   ============================================= */
.metric-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
.metric-vis-card {
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.metric-vis-card--a {
  background: #fff;
  border: 2px solid #e0eef8;
}
.metric-vis-card--b {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark, #132b5e) 100%);
  border: 2px solid #c8961a;
}
.metric-vis-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: #aaa;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.metric-vis-eyebrow--teal { color: var(--gold-light); }
.metric-vis-num {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}
.metric-vis-num--gray { color: rgba(10,34,64,.25); }
.metric-vis-num--teal { color: var(--gold-light); }
.metric-vis-label { font-size: .82rem; font-weight: 700; }
.metric-vis-label--dark { color: #444; }
.metric-vis-label--white { color: rgba(255,255,255,.9); }
.metric-vis-sub { font-size: .72rem; margin-top: 6px; line-height: 1.5; }
.metric-vis-sub--gray { color: #888; }
.metric-vis-sub--teal { color: rgba(255,255,255,.6); }
.metric-vis-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #c8961a;
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: .05em;
}

/* =============================================
   V2 DESIGN — Reasons Section
   ============================================= */
.reason-card-v2 {
  display: grid;
  grid-template-columns: 364px 1fr;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(10,34,64,.12);
  transition: transform .3s, box-shadow .3s;
}
.reason-card-v2:nth-child(even) {
  grid-template-columns: 1fr 364px;
}
.reason-card-v2:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(10,34,64,.18);
}
.reason-img-col {
  position: relative;
  overflow: hidden;
}
.reason-img-v2 {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.reason-card-v2:hover .reason-img-v2 { transform: scale(1.04); }
.reason-accent-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  z-index: 1;
}
.reason-accent-bar--01 { background: linear-gradient(180deg, var(--gold), var(--gold-light)); }
.reason-accent-bar--02 { background: linear-gradient(180deg, #3b82f6, #60a5fa); }
.reason-accent-bar--03 { background: linear-gradient(180deg, #c8961a, #f5c842); }
.reason-body-col {
  padding: 36px 32px 32px;
  position: relative;
  overflow: hidden;
  border-top: 3px solid transparent;
}
/* カラー別 上部ボーダー */
.reason-card-v2:nth-child(1) .reason-body-col { border-top-color: var(--gold); }
.reason-card-v2:nth-child(2) .reason-body-col { border-top-color: #3b82f6; }
.reason-card-v2:nth-child(3) .reason-body-col { border-top-color: #c8961a; }
.reason-body-col::before {
  content: attr(data-num);
  position: absolute;
  bottom: -30px; right: -16px;
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 11rem;
  font-weight: 700;
  color: rgba(10,34,64,.055);
  line-height: 1;
  pointer-events: none;
}
/* REASON バッジ — 大きな数字スタイル */
.reason-badge-v2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.reason-badge-label {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .3em;
  color: var(--navy);
  opacity: .45;
  text-transform: uppercase;
  line-height: 1;
  padding-bottom: 2px;
}
.reason-badge-num {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: .85;
  color: var(--gold);
  letter-spacing: .02em;
}
.reason-title-v2 {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 20px;
  color: var(--navy);
  position: relative; z-index: 1;
}
.reason-points-v2 {
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
.reason-point-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f6fc;
}
.reason-point-v2:last-child { border-bottom: none; }
.reason-point-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.reason-desc-v2 {
  font-size: .87rem;
  color: #555;
  line-height: 1.9;
  border-top: 1px solid #eef5fb;
  padding-top: 16px;
  position: relative; z-index: 1;
}

/* =============================================
   V2 DESIGN — Pricing Section
   ============================================= */
.pricing-campaign-v2 {
  background: linear-gradient(135deg, var(--navy-dark, #132b5e) 0%, #0c1e46 100%);
  border-radius: 16px;
  padding: 36px 32px;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.pricing-campaign-v2::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,163,194,.2) 0%, transparent 70%);
  pointer-events: none;
}
.pricing-campaign-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold-light);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pricing-campaign-title-v2 {
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
}
.pricing-campaign-sub {
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 0;
}
.pricing-campaign-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.pricing-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,163,194,.15);
  border: 1px solid rgba(0,163,194,.3);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 24px;
}
.chip-num {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 1.05rem;
  color: var(--gold-light);
}
.chip-highlight { color: var(--gold-light); }
.pricing-campaign-guarantee-v2 {
  margin-top: 20px;
  padding: 14px 20px;
  background: rgba(232,184,75,.12);
  border: 1px solid rgba(232,184,75,.3);
  border-radius: 8px;
  color: #e8b84b;
  font-size: .82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

/* Pricing cards v2 */
.pricing-cards-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.pricing-card-v2 {
  border-radius: 14px;
  background: #fff;
  border: 2px solid #e0eef8;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.pricing-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(10,34,64,.12);
}
.pricing-card-v2--featured {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark, #132b5e) 100%);
  border-color: var(--gold);
  box-shadow: 0 8px 40px rgba(0,163,194,.2);
  transform: scale(1.02);
}
.pricing-card-v2--featured:hover {
  transform: scale(1.02) translateY(-4px);
}
.pricing-featured-beam {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f5c842, transparent);
}
.pricing-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.pricing-tag--default { color: var(--gold); background: rgba(0,163,194,.1); }
.pricing-tag--featured { color: #fff; background: var(--gold); }
.pricing-tag--plain { color: #666; background: #f0f0f0; }
.pricing-name-v2 {
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 16px;
}
.pricing-name-v2--white { color: #fff; }
.pricing-name-v2--dark { color: var(--navy); }
.pricing-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 16px 0;
}
.pricing-divider--light { border-top-color: #eef5fb; }
.pricing-base-v2 { font-size: .8rem; color: rgba(255,255,255,.6); margin-bottom: 4px; }
.pricing-base-v2--dark { color: #888; }
.pricing-monitor-tag {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-light);
  background: rgba(0,163,194,.12);
  border: 1px solid rgba(0,163,194,.2);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 6px;
}
.pricing-amount {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
}
.pricing-amount--teal { color: var(--gold-light); }
.pricing-amount--navy { color: var(--navy); }
.pricing-unit { font-size: 1rem; font-weight: 400; opacity: .8; }
.pricing-per { font-size: 1rem; font-weight: 400; opacity: .7; }
.pricing-regular-v2 { font-size: .75rem; margin-top: 4px; }
.pricing-regular-v2--muted { color: rgba(255,255,255,.4); text-decoration: line-through; }
.pricing-regular-v2--dark { color: #aaa; text-decoration: line-through; }
.pricing-monthly-v2 {
  margin-top: 10px;
  font-size: .82rem;
  padding: 8px 12px;
  border-radius: 8px;
}
.pricing-monthly-v2--dark { background: rgba(0,163,194,.08); color: var(--navy); }
.pricing-monthly-v2--light { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.pricing-feat-list { margin-top: 16px; }
.pricing-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .82rem;
  margin-bottom: 8px;
}
.pricing-feat-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,163,194,.15);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.pricing-feat-dot--white {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
}
.pricing-feat-text { color: #444; }
.pricing-feat-text--white { color: rgba(255,255,255,.85); }

/* Pricing notes v2 */
.pricing-notes-v2 {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #d6e9f5;
  margin: 28px 0;
}
.note-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f8ff;
  font-size: .82rem;
  color: #555;
}
.note-row:last-child { border-bottom: none; }
.note-row--check { color: var(--navy); }
.note-icon { flex-shrink: 0; }

/* =============================================
   V2 DESIGN — Responsive
   ============================================= */
@media (max-width: 768px) {
  /* Hero strengths */
  .hero-strengths-wrap { grid-template-columns: 1fr; }
  .hero-strength-item { border-right: none; border-bottom: 1px solid #e8ecf2; }
  .hero-strength-item--featured { border-right: none; }

  /* Problem */
  .problem-list { grid-template-columns: 1fr !important; }
  .problem-cta-zone { clip-path: none !important; padding: 48px 24px 56px !important; margin: 0 !important; }
  .problem-cta-zone-bg-text { font-size: 5rem; }
  .problem-cta-main { font-size: 1.25rem !important; }

  /* Solution */
  .solution-lead-box { padding: 28px 20px; }
  .solution-point-block-v2 { flex-direction: column; gap: 12px; }
  .stat-gauge-wrap { padding: 24px 16px; }
  .stat-gauge-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gauge-label { min-width: unset; }

  /* Metric visual */
  .metric-visual { grid-template-columns: 1fr; }

  /* Reasons */
  .reason-card-v2,
  .reason-card-v2:nth-child(even) { grid-template-columns: 1fr !important; }
  .reason-img-v2 { min-height: 180px; height: 220px; }

  /* Pricing */
  .pricing-cards-v2 { grid-template-columns: 1fr; }
  .pricing-card-v2--featured { transform: none; }
  .hero-cta-trust { gap: 16px; }
  .btn-hero-cta-main { padding: 16px 36px; font-size: 1rem; }
}

/* =============================================
   V2 DESIGN POLISH — Flow Section
   ============================================= */
.flow { background: var(--cream); position: relative; overflow: hidden; }
.flow::before {
  content: 'FLOW';
  position: absolute;
  top: -10px; right: -20px;
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 10rem; font-weight: 700;
  color: rgba(10,34,64,.04);
  letter-spacing: .05em;
  pointer-events: none; z-index: 0;
}

/* Step cards grid */
.flow-steps-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
  position: relative; z-index: 1;
}
.flow-step-v2 {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10,34,64,.08);
  transition: transform .25s, box-shadow .25s;
}
.flow-step-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(10,34,64,.13);
}
.flow-step-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--gold));
}
.flow-step-ghost-num {
  position: absolute;
  bottom: -16px; right: -8px;
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 7rem; font-weight: 700;
  color: rgba(10,34,64,.04);
  line-height: 1; pointer-events: none;
}
.flow-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.flow-step-badge-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flow-step-badge {
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .2em;
  color: #fff;
  background: var(--navy);
  padding: 3px 8px;
  border-radius: 3px;
}
.flow-step-num {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.flow-step-time {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(0,163,194,.1);
  border: 1px solid rgba(0,163,194,.2);
  padding: 3px 10px;
  border-radius: 20px;
}
.flow-step-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 16px;
  background: var(--cream);
}
.flow-step-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.flow-step-v2:hover .flow-step-img-wrap img { transform: scale(1.04); }
.flow-step-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
  position: relative; z-index: 1;
}
.flow-step-desc {
  font-size: .82rem;
  color: #555;
  line-height: 1.75;
  position: relative; z-index: 1;
}
.flow-step-row-arrow {
  display: none;
}

/* Procedures v2 */
.flow-procedures-v2 {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark, #132b5e) 100%);
  border-radius: 16px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.flow-procedures-v2::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,163,194,.15) 0%, transparent 70%);
  pointer-events: none;
}
.flow-procedures-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.flow-procedures-icon {
  width: 36px; height: 36px;
  background: rgba(0,163,194,.15);
  border: 1px solid rgba(0,163,194,.3);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.flow-procedures-heading {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
}
.flow-procedures-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0;
  position: relative; z-index: 1;
}
.procedure-card-v2 {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 20px;
}
.procedure-card-num {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 2rem; font-weight: 700;
  color: rgba(255,255,255,.12);
  line-height: 1;
  margin-bottom: 10px;
}
.procedure-card-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.08);
}
.procedure-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.procedure-card-title {
  font-size: .88rem;
  font-weight: 900;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.procedure-card-desc {
  font-size: .78rem;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
}
.procedure-arrow-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  padding-top: 80px;
}

/* =============================================
   V2 DESIGN POLISH — Doctor Section
   ============================================= */
.doctor-quote {
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.6 !important;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark, #132b5e) 100%) !important;
  border-left: 5px solid var(--gold) !important;
  padding: 28px 32px !important;
  border-radius: 0 12px 12px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
}
.doctor-quote::before {
  content: '"';
  position: absolute;
  top: -20px; left: 16px;
  font-size: 100px;
  font-weight: 900;
  color: rgba(0,163,194,.15);
  line-height: 1;
  font-family: serif;
  pointer-events: none;
}
.doctor-message-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(10,34,64,.07);
  border-top: 3px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.doctor-message-wrap::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,163,194,.06) 0%, transparent 70%);
  pointer-events: none;
}
.doctor-message-heading {
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .2em !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}
.doctor-message p {
  font-size: .9rem;
  color: #444;
  line-height: 2;
}
.doctor-message p + p { margin-top: 16px; }

/* =============================================
   V2 DESIGN POLISH — FAQ Section
   ============================================= */
.faq { position: relative; overflow: hidden; }
.faq::before {
  content: 'FAQ';
  position: absolute;
  top: -10px; right: -20px;
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 10rem; font-weight: 700;
  color: rgba(10,34,64,.04);
  pointer-events: none;
}
.faq-item {
  background: #fff;
  border-radius: 12px !important;
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(10,34,64,.06);
  overflow: hidden;
  transition: box-shadow .2s;
}
.faq-item:hover { box-shadow: 0 4px 20px rgba(10,34,64,.1); }
.faq-question {
  padding: 18px 20px !important;
  gap: 14px !important;
}
.faq-q-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--gold));
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: .05em;
}
.faq-answer {
  padding: 0 20px 20px 66px !important;
  font-size: .88rem !important;
  color: #555 !important;
  line-height: 1.85 !important;
  border-top: 1px solid #eef5fb;
  padding-top: 14px !important;
}

/* =============================================
   V2 DESIGN POLISH — Section title & eyebrow
   ============================================= */
.section-eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.section-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 2px;
  background: var(--gold);
}

/* CTA bottom section */
.cta-bottom {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark, #132b5e) 100%) !important;
  position: relative; overflow: hidden;
}
.cta-bottom::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-55deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 14px);
  pointer-events: none;
}
.cta-bottom::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,163,194,.2) 0%, transparent 70%);
  pointer-events: none;
}
.btn-gold {
  position: relative;
  overflow: hidden;
}
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
}

/* =============================================
   V2 DESIGN POLISH — Flow Responsive
   ============================================= */
@media (max-width: 768px) {
  .flow-steps-v2 { grid-template-columns: 1fr; gap: 16px; }
  .flow-procedures-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .procedure-arrow-v2 { padding: 0; transform: rotate(90deg); justify-content: flex-start; }
  .faq-answer { padding-left: 20px !important; }
}

/* =============================================
   V2 DESIGN POLISH — Global Emphasis & Impact
   ============================================= */

/* セクションタイトル — より大きく・力強く */
.section-title {
  font-size: 2rem !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
}
.section-eyebrow {
  font-size: .72rem !important;
  letter-spacing: .35em !important;
  font-weight: 900 !important;
}

/* Reasons スマホ対応 */
@media (max-width: 768px) {
  .reason-badge-num { font-size: 2.8rem; }
  .reason-title-v2 { font-size: 1.25rem !important; }
  .reason-body-col::before { font-size: 8rem; }
}

/* 問題リスト — 番号をより目立たせる */
.problem-num-v2 {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.problem-item-title {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
}

/* ソリューション — バッジ数字強化 */
.solution-point-badge span {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
}
.solution-point-title {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
}

/* 比較表 — 見出し強化 */
.compare-table th,
.compare-table .table-head-cell {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
}

/* プライシング — 金額さらに大きく */
.pricing-amount {
  font-size: 3.8rem !important;
}

/* Hero CTAボタン — 影を強化 */
.btn-hero-cta-main {
  box-shadow: 0 8px 32px rgba(0,163,194,.4), 0 2px 8px rgba(0,0,0,.15) !important;
}
.btn-hero-cta-main:hover {
  box-shadow: 0 12px 48px rgba(0,163,194,.55), 0 4px 12px rgba(0,0,0,.2) !important;
}

/* Flow ステップ数字 — Oswald大きく */
.flow-step-num {
  font-size: 2.2rem !important;
}

/* =============================================
   PROBLEM SECTION — 画像カードスタイル（見本準拠）
   ============================================= */

/* 3列グリッド / max-width完全無効化 */
.problem-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 36px 0 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* カード本体: 16:9横長、相対位置の起点 */
.problem-item {
  position: relative !important;
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(10,34,64,.14) !important;
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  background: #0d3464 !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  cursor: pointer;
}
.problem-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(10,34,64,.22) !important;
}

/* 画像: カード全体を覆う（::afterを使わない） */
.problem-item-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .5s ease !important;
  /* 下部30%はテキスト帯で隠れるので画像は上70%に集中して見える */
}
.problem-item:hover .problem-item-img {
  transform: scale(1.05) !important;
}

/* 番号バッジ: 画像左上（小さめ） */
.problem-item-num {
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
  font-family: 'Oswald', 'Helvetica Neue', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.6) !important;
  z-index: 3 !important;
}

/* テキスト帯: カード下部30%をソリッドなネイビーで覆う（見本準拠） */
.problem-item-caption {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 32% !important;          /* カードの下30%を占有 */
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  background: rgba(10, 35, 80, 0.93) !important;  /* ほぼ不透明なネイビー */
  backdrop-filter: none !important;
  z-index: 2 !important;
}

.problem-item-text {
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.45 !important;
  display: block !important;
}

/* スマホ: 900px以下→2列、560px以下→1列 */
@media (max-width: 900px) {
  .problem-list { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .problem-list { grid-template-columns: 1fr !important; gap: 10px !important; }
  .problem-item-text { font-size: .78rem !important; }
}

/* =============================================
   RETENTION SECTION — 定着率セクション
   ============================================= */
.retention {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.retention::before {
  content: 'RETENTION';
  position: absolute;
  top: -10px; right: -20px;
  font-family: 'Oswald', sans-serif;
  font-size: 8rem; font-weight: 700;
  color: rgba(10,34,64,.04);
  pointer-events: none;
  letter-spacing: .05em;
}

/* 見出しエリア */
.retention-header {
  text-align: center;
  margin-bottom: 48px;
}
.retention-keyword-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  background: var(--navy);
  border-radius: 100px;
  padding: 10px 28px;
}
.retention-keyword-label {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .25em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.retention-keyword-text {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-light, #f5c842);
  line-height: 1;
  letter-spacing: .05em;
}

/* 本文カード */
.retention-body-wrap {
  background: #f4f8fc;
  border-radius: 20px;
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
  border-left: 5px solid var(--navy);
  box-shadow: 0 4px 24px rgba(10,34,64,.08);
}
.retention-body-wrap::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,163,194,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* 本文段落 */
.retention-text-block {
  margin-bottom: 36px;
}
.retention-p {
  font-size: .95rem;
  color: #444;
  line-height: 2;
  margin-bottom: 16px;
}
.retention-p:last-child { margin-bottom: 0; }
.retention-p--highlight {
  font-size: 1rem;
  color: var(--navy);
  font-weight: 600;
  background: rgba(10,34,64,.06);
  border-left: 3px solid var(--gold);
  padding: 10px 16px;
  border-radius: 0 8px 8px 0;
}
.retention-p strong {
  color: var(--navy);
  font-weight: 900;
}

/* 数値バー */
.retention-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}
.retention-stat {
  display: grid;
  grid-template-columns: 160px 1fr 120px;
  align-items: center;
  gap: 16px;
}
.retention-stat-label {
  font-size: .78rem;
  font-weight: 700;
  color: #666;
  white-space: nowrap;
}
.retention-stat-bar-wrap {
  height: 10px;
  background: rgba(10,34,64,.1);
  border-radius: 10px;
  overflow: hidden;
}
.retention-stat-bar {
  height: 100%;
  border-radius: 10px;
  transition: width .8s ease;
}
.retention-stat-bar--general {
  background: linear-gradient(90deg, #7fb3d0, #a8cfe0);
}
.retention-stat-bar--clinic {
  background: linear-gradient(90deg, var(--gold), var(--gold-light, #f5c842));
}
.retention-stat-value {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #888;
  line-height: 1;
  text-align: right;
}
.retention-stat-value--clinic {
  color: var(--gold);
}
.retention-stat-suffix {
  font-size: .75rem;
  font-weight: 700;
  margin-left: 2px;
  vertical-align: middle;
}

/* 矢印CTAブロック */
.retention-cta-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, var(--navy) 0%, #132b5e 100%);
  border-radius: 14px;
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
}
.retention-cta-block::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-55deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 14px);
  pointer-events: none;
}
.retention-cta-arrow {
  font-size: 2rem;
  color: var(--gold-light, #f5c842);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 4px;
}
.retention-cta-inner {
  flex: 1;
}
.retention-cta-label {
  display: inline-block;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .25em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.retention-cta-body {
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.85;
}
.retention-cta-body strong {
  color: var(--gold-light, #f5c842);
  font-weight: 900;
  font-size: 1.05rem;
}

/* スマホ */
@media (max-width: 768px) {
  .retention-body-wrap { padding: 28px 20px; border-left-width: 4px; }
  .retention-stat { grid-template-columns: 1fr; gap: 6px; }
  .retention-stat-label { font-size: .75rem; }
  .retention-stat-value { text-align: left; font-size: 1.3rem; }
  .retention-cta-block { flex-direction: column; gap: 12px; }
  .retention-keyword-badge { padding: 8px 20px; }
  .retention-keyword-text { font-size: 1.6rem; }
  .retention::before { font-size: 5rem; }
}

/* =============================================
   PRICING — ラグジュアリーカード（現行トーン）
   ============================================= */

.pricing-cards-lux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0 28px;
}

/* カード本体 */
.pricing-card-lux {
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10,34,64,.1);
  transition: transform .25s, box-shadow .25s;
}
.pricing-card-lux:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(10,34,64,.16);
}
/* おすすめカード: ネイビー背景 */
.pricing-card-lux--featured {
  background: var(--navy);
  border-color: var(--gold);
}

/* ラベルタグ */
.pricing-lux-tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gold);
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 18px;
}
.pricing-lux-tag--sub {
  background: rgba(10,34,64,.12);
  color: var(--navy);
}

/* タイトル行（両サイドに罫線） */
.pricing-lux-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 24px;
  white-space: nowrap;
}
.pricing-card-lux--featured .pricing-lux-title { color: #fff; }
.pricing-lux-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--navy));
  display: block;
}
.pricing-lux-line--rev {
  background: linear-gradient(90deg, var(--navy), transparent);
}
.pricing-card-lux--featured .pricing-lux-line {
  background: linear-gradient(90deg, transparent, var(--gold));
}
.pricing-card-lux--featured .pricing-lux-line--rev {
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* データ行 */
.pricing-lux-rows { margin-bottom: 0; }
.pricing-lux-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(10,34,64,.1);
}
.pricing-lux-row:last-child { border-bottom: none; }
.pricing-card-lux--featured .pricing-lux-row {
  border-bottom-color: rgba(255,255,255,.12);
}
.pricing-lux-row-label {
  font-size: .82rem;
  color: #666;
  white-space: nowrap;
}
.pricing-card-lux--featured .pricing-lux-row-label { color: rgba(255,255,255,.65); }
.pricing-lux-row-value {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.pricing-card-lux--featured .pricing-lux-row-value { color: var(--gold-light, #f5c842); }
.pricing-lux-unit {
  font-size: .72rem;
  font-weight: 400;
  margin-left: 1px;
}
.pricing-lux-small {
  font-family: sans-serif;
  font-size: .68rem;
  font-weight: 400;
  color: #999;
  margin-left: 4px;
}
.pricing-card-lux--featured .pricing-lux-small { color: rgba(255,255,255,.5); }
.pricing-lux-row-value--crossed span {
  text-decoration: line-through;
  opacity: .5;
}

/* 区切り線 */
.pricing-lux-divider {
  height: 1px;
  background: rgba(10,34,64,.15);
  margin: 16px 0;
}
.pricing-card-lux--featured .pricing-lux-divider {
  background: rgba(255,255,255,.2);
}

/* 月々 */
.pricing-lux-monthly {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.pricing-lux-monthly-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
}
.pricing-card-lux--featured .pricing-lux-monthly-label { color: rgba(255,255,255,.85); }
.pricing-lux-monthly-value {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.pricing-card-lux--featured .pricing-lux-monthly-value { color: var(--gold-light, #f5c842); }
.pricing-lux-monthly-value small {
  font-size: .75rem;
  font-weight: 400;
  color: inherit;
  opacity: .7;
}

/* 注記 */
.pricing-lux-note {
  font-size: .7rem;
  color: #aaa;
  text-align: right;
  margin-bottom: 16px;
}
.pricing-card-lux--featured .pricing-lux-note { color: rgba(255,255,255,.35); }

/* 特徴リスト */
.pricing-lux-feats {
  border-top: 1px solid rgba(10,34,64,.1);
  padding-top: 14px;
}
.pricing-card-lux--featured .pricing-lux-feats {
  border-top-color: rgba(255,255,255,.15);
}
.pricing-lux-feat {
  font-size: .8rem;
  color: #555;
  line-height: 1.7;
  padding: 3px 0;
}
.pricing-card-lux--featured .pricing-lux-feat { color: rgba(255,255,255,.75); }

/* スマホ: 1列 */
@media (max-width: 768px) {
  .pricing-cards-lux { grid-template-columns: 1fr; gap: 16px; }
  .pricing-card-lux--featured { transform: none; }
  .pricing-lux-title { font-size: .88rem; }
}

/* =============================================
   GLOBAL — 全体文字サイズ底上げ
   ============================================= */

/* ベースフォント拡大（全体底上げ） */
html { font-size: 18px !important; }
body { font-size: 18px !important; }

/* eyebrow・ラベル等のラテン文字はInterを使用 */
.section-eyebrow,
.pricing-campaign-eyebrow,
.flow-step-badge,
.col-us-clinic-name {
  font-family: 'Inter', 'Noto Serif JP', sans-serif !important;
}

/* 本文・説明テキスト */
p, li, span, td, th { font-size: inherit; }

/* セクション本文テキスト全般 */
.solution-desc,
.reason-desc-v2,
.flow-step-desc,
.doctor-message p,
.faq-answer,
.retention-p,
.pricing-lux-feat,
.pricing-notes-v2 .note-row {
  font-size: 1.05rem !important;
  line-height: 2 !important;
}

/* ソリューション ダークカード本文 */
.solution-point-text-v2 { font-size: 1.05rem !important; line-height: 2 !important; color: rgba(255,255,255,.92) !important; }

/* ヒーロー CTAブロック */
.hero-cta-lead      { font-size: 1.15rem !important; }
.hero-cta-trust-item { font-size: 0.95rem !important; color: #555 !important; }

/* 定着率セクション 本文 */
.retention-p { font-size: 1.05rem !important; }

/* 比較表セル本文 */
.compare-table td   { font-size: 1rem !important; }

/* 理由ポイント */
.reason-point-v2 { font-size: 1rem !important; }

/* 問題リスト */
.problem-item-text { font-size: 1rem !important; }

/* 比較表テキスト */
.compare-table td,
.transplant-row-label,
.transplant-cell { font-size: .95rem !important; }

/* 料金カード */
.pricing-lux-row-label { font-size: .95rem !important; }
.pricing-lux-row-value { font-size: 2rem !important; }
.pricing-lux-monthly-value { font-size: 2.6rem !important; }
.pricing-lux-monthly-label { font-size: 1rem !important; }
.pricing-lux-tag { font-size: .72rem !important; }
.pricing-lux-note { font-size: .78rem !important; }

/* キャンペーン本文 */
.pricing-campaign-sub { font-size: 1rem !important; line-height: 1.85 !important; }

/* フロー — STEP バッジ・番号拡大（0426_c 9_指摘） */
.flow-step-badge {
  font-size: .85rem !important;
  padding: 4px 12px !important;
  letter-spacing: .2em !important;
}
.flow-step-num {
  font-size: 3rem !important;
}
.flow-step-desc { font-size: .95rem !important; }
.flow-step-title { font-size: 1.3rem !important; }

/* 注意書き */
.note-row { font-size: .9rem !important; }

/* FAQ */
.faq-answer { font-size: .95rem !important; }

/* problem-cta-zone — 背景画像（高透明度）（0426_c 15_指摘） */
.problem-cta-zone {
  background:
    linear-gradient(135deg, rgba(10,34,64,0.93) 0%, rgba(6,21,41,0.96) 100%),
    var(--pcta-img, none) center / cover no-repeat !important;
}

/* 施術の流れ — 文字サイズ・番号視認性強化（0426_c 12_指摘） */
.flow-procedures-heading { font-size: 1.2rem !important; }
.procedure-card-num      { color: var(--amber) !important; opacity: 0.75 !important; }
.procedure-card-title    { font-size: 1.05rem !important; }
.procedure-card-desc     { font-size: .95rem !important; line-height: 1.85 !important; color: rgba(255,255,255,.85) !important; }

/* ヒーローテキスト — フォントサイズ強化（0426_c 11_指摘） */
.hero-strength-label { font-size: 1rem !important; }
.hero-strength-title { font-size: 1.3rem !important; }
.hero-strength-desc  { font-size: .95rem !important; line-height: 1.9 !important; }
.hero-check-item { font-size: .95rem !important; }

/* ============================================================
   TONE MANNER FIX — hero-bg.png に合わせたウォームゴールド適用
   ============================================================ */

/* キャンペーンセクション背景 → amber（ウォームゴールド） */
.pricing-campaign {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-light) 100%) !important;
}

/* 価格カードのフィーチャータグ（★ 人気No.1）→ amber */
.pricing-lux-tag:not(.pricing-lux-tag--sub) {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-light) 100%) !important;
  color: #fff !important;
}

/* sub タグのnav tint → 新dark navy に更新 */
.pricing-lux-tag--sub {
  background: rgba(10,34,64,.12) !important;
}

/* section-eyebrow の下ライン → amber（温感アクセント） */
.section-eyebrow::after {
  background: var(--amber) !important;
}

/* ページ全体のベース背景 → ホワイトグレー確実化 */
body,
.bg-white,
.transplant-compare.bg-white {
  background-color: var(--base) !important;  /* #f5f5f5 */
}

/* ============================================================
   SECTION EYEBROW — 完全リセット＋中央寄せ強化（10/12_指摘 対応）
   ============================================================ */

/* BASE: ブロック要素として完全に中央寄せ */
.section-eyebrow {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.28em !important;
  color: var(--gold) !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
}
/* ::before を完全に消す（残存スタイルのリセット） */
.section-eyebrow::before {
  content: none !important;
  display: none !important;
}
/* ::after: テキスト直下中央のアンバーライン */
.section-eyebrow::after {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 2px !important;
  background: var(--amber) !important;
  margin: 8px auto 0 !important;
  flex: none !important;
}

/* WIDE variant（CASE STUDY のみ使用）: 両脇に伸びるライン */
.section-eyebrow--wide {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}
.section-eyebrow--wide::before {
  content: '' !important;
  display: block !important;
  flex: 1 !important;
  height: 2px !important;
  background: var(--gold) !important;
  margin: 0 16px !important;
}
.section-eyebrow--wide::after {
  content: '' !important;
  display: block !important;
  flex: 1 !important;
  height: 2px !important;
  background: var(--gold) !important;
  margin: 0 16px !important;
}

/* ============================================================
   FLOATING CTA BUTTON（9_指摘 対応）
   ============================================================ */
@keyframes floatUp {
  0%   { transform: translateY(100px); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,39,.5); }
  50%       { box-shadow: 0 0 0 14px rgba(201,162,39,0); }
}
@keyframes ctaShimmer {
  0%   { left: -80%; }
  100% { left: 130%; }
}

.floating-cta {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 9999;
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.floating-cta.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
  animation: floatUp .5s ease forwards;
}
.floating-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-light) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 16px 32px;
  border-radius: 100px;
  box-shadow: 0 6px 32px rgba(201,162,39,.45), 0 2px 8px rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
  animation: ctaPulse 2.4s ease-in-out infinite;
  white-space: nowrap;
  text-decoration: none;
}
.floating-cta-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: ctaShimmer 2.8s ease-in-out infinite;
}
.floating-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(201,162,39,.55), 0 4px 12px rgba(0,0,0,.22);
}
.floating-cta-arrow { flex-shrink: 0; }
.floating-cta-pulse { display: none; }

@media (max-width: 640px) {
  .floating-cta { bottom: 16px; width: calc(100% - 32px); }
  .floating-cta-btn { width: 100%; justify-content: center; font-size: .95rem; padding: 15px 20px; }
}

/* ============================================================
   SOLUTION SECTION — 画像＋テキスト 横並びレイアウト（16_指摘 対応）
   ============================================================ */
.solution-layout {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 32px;
}
.solution-layout .solution-image-wrap {
  position: sticky;
  top: 84px;
  margin-bottom: 0 !important;
  border-radius: 14px;
  overflow: hidden;
}
.solution-layout .solution-img {
  width: 100% !important;
  height: 480px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}
.solution-layout .solution-lead-box {
  margin-top: 0;
}
@media (max-width: 768px) {
  .solution-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .solution-layout .solution-image-wrap {
    position: relative;
    top: auto;
  }
  .solution-layout .solution-img {
    height: 240px !important;
  }
}

/* ============================================================
   RETENTION SECTION — 「定着率」バッジ デザイン強化（15_指摘 対応）
   ============================================================ */

/* 「重要観点」ラベル非表示 */
.retention-keyword-label { display: none !important; }

/* バッジ本体を凝ったデザインに */
.retention-keyword-badge {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 52px !important;
  border: 2px solid var(--amber) !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
  box-shadow:
    0 0 0 6px rgba(201,162,39,.12),
    0 8px 36px rgba(10,34,64,.35) !important;
  overflow: visible !important;
}

/* 四隅に小さなアンバーコーナー装飾 */
.retention-keyword-badge::before,
.retention-keyword-badge::after {
  content: '' !important;
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  border-color: var(--amber) !important;
  border-style: solid !important;
}
.retention-keyword-badge::before {
  top: -4px !important;
  left: -4px !important;
  border-width: 2px 0 0 2px !important;
  border-radius: 2px 0 0 0 !important;
  display: block !important;
  margin: 0 !important;
  background: none !important;
  flex: none !important;
}
.retention-keyword-badge::after {
  bottom: -4px !important;
  right: -4px !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 0 2px 2px !important;
  display: block !important;
  margin: 0 !important;
  background: none !important;
  flex: none !important;
}

/* 「定着率」テキスト強化 */
.retention-keyword-text {
  font-family: 'Oswald', sans-serif !important;
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: var(--amber) !important;
  text-shadow: 0 2px 16px rgba(201,162,39,.4) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   RETENTION SECTION — 定着率ラベル・当院ではサイズ強化（14_指摘 対応）
   ============================================================ */

/* 定着率ラベル（一般的な定着率 / 当院が目指す定着率） */
.retention-stat-label {
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

/* 定着率の数値 */
.retention-stat-value {
  font-size: 2rem !important;
}

/* 「当院では」ラベル — 装飾強化（0426_c 14_指摘） */
.retention-cta-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  color: var(--amber) !important;
  padding: 4px 0 !important;
  margin-bottom: 14px !important;
  text-transform: none !important;
  text-shadow: 0 0 18px rgba(201,162,39,.45) !important;
}
.retention-cta-label::before,
.retention-cta-label::after {
  content: '' !important;
  flex: 0 0 28px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--amber)) !important;
  border-radius: 1px !important;
}
.retention-cta-label::after {
  background: linear-gradient(90deg, var(--amber), transparent) !important;
}

/* 矢印CTAブロック本文 */
.retention-cta-body {
  font-size: 1.05rem !important;
  line-height: 1.9 !important;
}

/* 「100%を超える定着率」強調 */
.retention-cta-body strong {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: var(--amber-light) !important;
}

/* ============================================================
   DOCTOR SECTION — 文字サイズ・存在感強化（11_指摘 対応）
   ============================================================ */

/* クリニック情報行 */
.doctor-info-row          { font-size: 1.05rem !important; }
.info-label               { font-size: 1rem !important; font-weight: 700 !important; opacity: 1 !important; width: 7em !important; }
.info-value               { font-size: 1.05rem !important; opacity: 1 !important; }

/* 診療内容タグ */
.service-tag              { font-size: 0.92rem !important; padding: 5px 14px !important; }

/* 医師名・肩書き */
.doctor-title-label       { font-size: 1rem !important; font-weight: 700 !important; opacity: 1 !important; }
.doctor-name-label        { font-size: 1.85rem !important; line-height: 1.5 !important; }
.doctor-name-nowrap       { white-space: nowrap; display: block; }

/* 経歴・所属見出し */
.credentials-heading      { font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: .05em !important; }

/* 経歴リスト */
.doctor-credentials li    { font-size: 0.98rem !important; opacity: 1 !important; line-height: 1.75 !important; }

/* 理事長メッセージ */
.doctor-message-heading   { font-size: 1.2rem !important; }
.doctor-quote             { font-size: 1.55rem !important; line-height: 1.85 !important; padding: 32px 32px 32px 36px !important; }
.doctor-message p         { font-size: 1.05rem !important; }

/* ============================================================
   比較表 — 当院列強調＋右列境界線（0426_c 26_指摘）
   ============================================================ */

/* 当院ヘッダー — teal→navyグラデーション */
.compare-table thead .col-us {
  background: linear-gradient(160deg, #00c4de 0%, #007faa 45%, #003f6e 100%) !important;
  border-bottom: 4px solid var(--gold) !important;
  box-shadow: 4px 0 20px rgba(0,163,194,0.35), -4px 0 20px rgba(0,163,194,0.35) !important;
}

/* 「当院」テキスト — ゴールドグラデーション */
.col-us-clinic-name {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 0.3rem;
  background: linear-gradient(135deg, #ffe082 0%, #ffb300 60%, #ff8f00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(255,180,0,0.5));
}

/* 当院tbody列 — 左右にtealライン */
.compare-table tbody td.col-us {
  border-left: 3px solid rgba(0,163,194,0.55) !important;
  border-right: 3px solid rgba(0,163,194,0.55) !important;
}

/* 右2列の境界 — thead（4列目の左） */
.compare-table thead th:nth-child(4) {
  border-left: 2px solid rgba(255,255,255,0.2) !important;
  background: rgba(0,0,0,0.12) !important;
}

/* 右2列の境界 — tbody（4列目の左） */
.compare-table tbody td:nth-child(4) {
  border-left: 1px solid rgba(0,0,0,0.1) !important;
  background: rgba(0,0,0,0.03) !important;
}
.compare-table tbody tr:nth-child(even) td:nth-child(4) {
  background: rgba(0,0,0,0.045) !important;
}

/* ============================================================
   CTA SECTION — 背景画像（デザインに溶け込む）（0426_c 10_指摘）
   ============================================================ */
.cta-bg-img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 55%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.18;
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 35%, black 70%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 35%, black 70%);
  pointer-events: none;
}
@media (max-width: 768px) {
  .cta-bg-img {
    width: 100%;
    opacity: 0.1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 40%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 40%, black 100%);
  }
}

/* ◎ マーク — ゴールドバリアント（当院と同格の評価セル） */
.compare-mark--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
  color: var(--white) !important;
}

/* ============================================================
   SECTION TITLE — キーワードアクセントカラー（0426_c 2_指摘）
   ============================================================ */
.section-title .txt-accent {
  background: linear-gradient(90deg, #f5c842 0%, #c9a227 50%, #e2b94f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: normal;
}

/* 定着率セクション — 「定着率」グラデーション+下線 / 「82.5%以上」下線（0426_c 14_指摘） */
.retention-p--highlight strong {
  background: linear-gradient(90deg, #f5c842 0%, #c9a227 50%, #e2b94f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  border-bottom: 2px solid var(--amber) !important;
  padding-bottom: 1px !important;
}

/* 「82.5%以上」下線 */
.retention-p:not(.retention-p--highlight) strong {
  text-decoration: none !important;
  border-bottom: 2px solid currentColor !important;
  padding-bottom: 1px !important;
}

/* ============================================================
   SOLUTION SECTION — eyebrow大型化 + ダークカード背景画像（0426_c 1_指摘）
   ============================================================ */

/* バッジの数字の上のラベルを削除したため、バッジを数字だけのコンパクト表示に */
.solution-point-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* eyebrow を本文より大きく */
.solution-point-eyebrow {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  margin-bottom: 8px !important;
}

/* ============================================================
   SOLUTION — エディトリアルリデザイン（0427_a 2_指摘）
   セクション全体をダーク化、lead-boxカードを除去
   ============================================================ */

/* セクション背景をダーク */
section.solution {
  background: linear-gradient(160deg, #061428 0%, #0a2240 50%, #061830 100%) !important;
  position: relative !important;
}

/* 見出しをwhite/goldに */
section.solution .section-eyebrow {
  color: var(--gold) !important;
  opacity: 1 !important;
}
section.solution .section-title {
  color: #fff !important;
}

/* ============================================================
   SOLUTION — 白カード化（見本フレームワーク、12_指摘対応）
   --sln-img は同要素のインラインスタイルで設定済みのため参照可能
   ============================================================ */

/* lead-box: ダーク背景の中に浮かぶ白カード */
.solution-lead-box {
  background:
    linear-gradient(rgba(248,250,253,0.93), rgba(248,250,253,0.93)),
    var(--sln-img, none) center / cover no-repeat !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 44px 48px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}
.solution-lead-box::before,
.solution-lead-box::after { display: none !important; }

/* 各アイテム行 */
.solution-point-block-v2 {
  padding: 28px 0 !important;
  gap: 28px !important;
}

/* 区切り線: 薄いダーク */
.solution-point-divider {
  border-top: 1px solid rgba(10,34,64,.1) !important;
  margin: 0 !important;
}

/* バッジ: navy枠の円形 */
.solution-point-badge {
  background: rgba(10,34,64,.06) !important;
  border: 2px solid rgba(0,163,194,.6) !important;
  border-radius: 50% !important;
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0 !important;
}
.solution-point-badge span {
  font-size: 1.3rem !important;
  font-family: 'Oswald', sans-serif !important;
  color: #00a3c2 !important;
  font-weight: 700 !important;
}

/* 本文テキスト: 白背景なので濃紺 */
.solution-point-text-v2 {
  font-size: 1.02rem !important;
  color: var(--navy) !important;
  line-height: 2 !important;
}

/* スマホ */
@media (max-width: 768px) {
  .solution-lead-box { padding: 28px 20px !important; border-radius: 12px !important; }
  .solution-point-block-v2 { padding: 20px 0 !important; gap: 16px !important; }
  .solution-point-badge { width: 44px !important; height: 44px !important; }
  .solution-point-badge span { font-size: 1.1rem !important; }
}

/* ============================================================
   RETENTION — エディトリアルリデザイン（0427_a 1_指摘）
   ============================================================ */

/* 本文ラッパー: 青いカード → フラット */
.retention-body-wrap {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: 740px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.retention-body-wrap::before,
.retention-body-wrap::after { display: none !important; }

/* 定着率バッジ: コーナー装飾 → 横ルール（─── 定着率 ───）型 */
.retention-keyword-badge {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 12px auto 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
}
.retention-keyword-badge::before,
.retention-keyword-badge::after {
  content: '' !important;
  position: static !important;
  flex: 1 !important;
  height: 2px !important;
  width: auto !important;
  border: none !important;
  border-color: transparent !important;
  border-style: none !important;
  border-width: 0 !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  display: block !important;
}
.retention-keyword-badge::before {
  background: linear-gradient(90deg, transparent, var(--amber)) !important;
}
.retention-keyword-badge::after {
  background: linear-gradient(90deg, var(--amber), transparent) !important;
}

/* ハイライト段落: navy背景カード → amber左ライン＋薄いtint */
.retention-p--highlight {
  background: rgba(201,162,39,.06) !important;
  border-left: 4px solid var(--amber) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 14px 18px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 20px 0 !important;
}

/* 数値バー上下に仕切り線 */
.retention-stats {
  border-top: 1px solid rgba(10,34,64,.12) !important;
  border-bottom: 1px solid rgba(10,34,64,.12) !important;
  padding: 28px 0 !important;
  margin-bottom: 32px !important;
}

/* 矢印CTAブロック: 濃紺box → 左amberライン＋薄グレー */
.retention-cta-block {
  background: rgba(10,34,64,.04) !important;
  border: none !important;
  border-left: 5px solid var(--amber) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 24px 28px !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: visible !important;
}
.retention-cta-block::before { display: none !important; }
.retention-cta-arrow { display: none !important; }
.retention-cta-inner { width: 100% !important; }

/* 「当院では」ラベル: 明背景になったためnavyに */
.retention-cta-label {
  color: var(--navy) !important;
  text-shadow: none !important;
}
.retention-cta-label::before {
  background: linear-gradient(90deg, transparent, var(--navy)) !important;
}
.retention-cta-label::after {
  background: linear-gradient(90deg, var(--navy), transparent) !important;
}

/* 「当院では」本文: 白文字 → 濃紺 */
.retention-cta-body {
  color: var(--navy) !important;
}
.retention-cta-body strong {
  color: var(--amber) !important;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .retention-stats {
    padding: 20px 0 !important;
  }
  .retention-cta-block {
    padding: 18px 20px !important;
  }
}

/* ============================================================
   RETENTION HEADER — タイトル1行化・装飾ライン・定着率大型化（0427_a 5_指摘）
   ============================================================ */

/* タイトルを1行で収める */
.retention .section-title {
  white-space: nowrap !important;
  font-size: clamp(1.1rem, 2.4vw, 1.75rem) !important;
  margin-bottom: 12px !important;
}

/* タイトル直下に短い装飾ライン */
.retention .section-title::after {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  background: var(--teal, #00a3c2) !important;
  margin: 12px auto 0 !important;
  border-radius: 2px !important;
}

/* 定着率テキストをさらに大型に */
.retention-keyword-text {
  font-size: 3.6rem !important;
  letter-spacing: 0.2em !important;
}

/* バッジ全体のpaddingも調整 */
.retention-keyword-badge {
  padding: 16px 0 !important;
}

/* スマホ: タイトルは折り返しを許可 */
@media (max-width: 768px) {
  .retention .section-title {
    white-space: normal !important;
    font-size: clamp(1rem, 4.5vw, 1.4rem) !important;
  }
  .retention-keyword-text {
    font-size: 2.6rem !important;
  }
}

/* ============================================================
   Retention keyword badge — navy背景ボックス + 黄色 glow blur（20）
   ============================================================ */

/* navy背景ボックスに戻す */
.retention-keyword-badge {
  background: linear-gradient(135deg, var(--navy) 0%, #071628 100%) !important;
  border: 1.5px solid rgba(201, 162, 39, 0.55) !important;
  border-radius: 6px !important;
  padding: 22px 48px !important;
  box-shadow:
    0 0 0 5px rgba(201, 162, 39, 0.08),
    0 10px 40px rgba(5, 20, 50, 0.55) !important;
}

/* 横ルール（::before / ::after）は維持: navy上では薄く見えるため透明度調整 */
.retention-keyword-badge::before {
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.5)) !important;
}
.retention-keyword-badge::after {
  background: linear-gradient(90deg, rgba(201,162,39,.5), transparent) !important;
}

/* 「定着率」テキスト: 最小限のぼかし（34） */
.retention-keyword-text {
  color: #f5c842 !important;
  text-shadow:
    0 0 6px rgba(245, 200, 30, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 768px) {
  .retention-keyword-badge { padding: 16px 28px !important; }
}

/* ============================================================
   RETENTION — 当院が目指す定着率 行を大きく・tealで強調（0427_a 6_指摘）
   ============================================================ */

/* 当院行のラベル */
.retention-stat--clinic .retention-stat-label {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #00a3c2 !important;
  letter-spacing: .04em !important;
}

/* 当院行のバー — tealに統一 */
.retention-stat-bar--clinic {
  background: linear-gradient(90deg, #009ab8, #00c4de) !important;
}

/* 当院行の数値「100%超」 */
.retention-stat--clinic .retention-stat-value {
  font-size: 2.8rem !important;
  color: #00a3c2 !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 12px rgba(0,163,194,.3) !important;
}

/* スマホ */
@media (max-width: 768px) {
  .retention-stat--clinic .retention-stat-label { font-size: 1rem !important; }
  .retention-stat--clinic .retention-stat-value { font-size: 2rem !important; }
}

/* ============================================================
   RETENTION CTA — 「当院では」中央配置・大型強調（0427_a 7_指摘）
   ============================================================ */

/* ブロック全体: 左ボーダーカード → フラット中央揃え */
.retention-cta-block {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-top: 1px solid rgba(10,34,64,.12) !important;
  border-radius: 0 !important;
  padding: 36px 0 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0 !important;
}
.retention-cta-block::before { display: none !important; }
.retention-cta-inner { width: 100% !important; }

/* 「当院では」ラベル: 二重線ボックス（35） */
.retention-cta-label {
  display: inline-block !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  color: var(--navy) !important;
  text-shadow: none !important;
  text-align: center !important;
  padding: 14px 48px !important;
  border: 2px solid rgba(14, 37, 64, 0.65) !important;
  outline: 1.5px solid rgba(14, 37, 64, 0.32) !important;
  outline-offset: 6px !important;
  margin-bottom: 36px !important;
  text-transform: none !important;
}

/* 横ラインは不要 */
.retention-cta-label::before,
.retention-cta-label::after {
  display: none !important;
}

/* 本文: 他の本文に合わせてサイズアップ（35） */
.retention-cta-body {
  text-align: center !important;
  font-size: 1.15rem !important;
  line-height: 1.95 !important;
  color: var(--navy) !important;
  max-width: 620px !important;
  margin: 0 auto !important;
}

/* 「100%を超える定着率」— ゴールドグラデーション・下線・1.3倍（35） */
.retention-cta-body strong {
  font-size: 1.3em !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #ffe066 0%, #c87800 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  border-bottom: 2px solid #d48a00 !important;
  padding-bottom: 2px !important;
  display: inline !important;
}

/* スマホ */
@media (max-width: 768px) {
  .retention-cta-label  { font-size: 1.5rem !important; padding: 12px 28px !important; }
  .retention-cta-block  { padding: 28px 0 0 !important; }
  .retention-cta-body   { font-size: 1.05rem !important; }
}

/* ============================================================
   RETENTION — ハイライト段落リデザイン（0427_a 8_指摘）
   ============================================================ */

/* 背景カード・左ボーダーを除去してフラットに */
.retention-p--highlight {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 24px 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 2 !important;
}

/* 「定着率」strong: teal + 下線（グラデーション文字を解除） */
.retention-p--highlight strong {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: #00a3c2 !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  border-bottom: 2.5px solid #00a3c2 !important;
  padding-bottom: 2px !important;
  text-decoration: none !important;
}

/* スマホ */
@media (max-width: 768px) {
  .retention-p--highlight { font-size: 1.1rem !important; }
  .retention-p--highlight strong { font-size: 1.2rem !important; }
}

/* ============================================================
   医師名ラベル再設計（14_見本: 法人名小・理事長小・名前のみ大）
   ============================================================ */
.doctor-name-label {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}
.doctor-corp-name {
  font-size: 0.88rem !important;
  white-space: nowrap !important;
  display: block !important;
  opacity: 0.85;
}
.doctor-title-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5em !important;
  white-space: nowrap !important;
}
.doctor-title-text {
  font-size: 1rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.doctor-name-nowrap {
  font-size: 1.85rem !important;
  white-space: nowrap !important;
  display: inline !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* ============================================================
   Problem heading — 1行 + グラデーション二重下線（15_見本）
   ============================================================ */
.problem .section-title {
  display: table !important;       /* 文字幅にフィット */
  margin-left: auto !important;
  margin-right: auto !important;
  white-space: nowrap !important;
  font-size: clamp(1.3rem, 2.8vw, 2rem) !important;
  padding-bottom: 20px !important;
  text-align: center !important;
}
.problem .section-title::after {
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 10px !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, #1a3c6e 0%, #0e92bf 50%, rgba(0, 163, 194, 0) 100%) 0 0 / 100% 3px no-repeat,
    linear-gradient(90deg, #1a3c6e 0%, #0e92bf 50%, rgba(0, 163, 194, 0) 100%) 0 100% / 100% 3px no-repeat !important;
}

/* スマホは折り返しを許容 */
@media (max-width: 768px) {
  .problem .section-title {
    white-space: normal !important;
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
  }
}

/* ============================================================
   Problem section — 箇条書きリスト redesign（16_見本）
   ============================================================ */

/* ghosted 背景画像 */
section.problem {
  position: relative !important;
  overflow: hidden !important;
}
section.problem::after {
  content: '';
  position: absolute;
  top: 0; right: -5%;
  width: 60%;
  height: 100%;
  background: var(--prb-bg, none) center / cover no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
section.problem .container {
  position: relative;
  z-index: 1;
}

/* リストをgridからblockへ */
.problem .problem-list {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 800px !important;
  margin: 40px auto 0 !important;
  padding: 0 !important;
  width: 100% !important;
  gap: 0 !important;
}

/* 各アイテム: カード→フラット行（37: パディング詰め） */
.problem .problem-item {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 4px 4px !important;
  border: none !important;
  border-bottom: none !important;
  cursor: default !important;
  transition: none !important;
}
.problem .problem-item:hover {
  transform: none !important;
  box-shadow: none !important;
}
.problem .problem-item:last-child {
  border-bottom: none !important;
}

/* 画像・番号バッジを非表示 */
.problem .problem-item-img { display: none !important; }
.problem .problem-item-num { display: none !important; }

/* テキスト帯をフラットに */
.problem .problem-item-caption {
  position: static !important;
  height: auto !important;
  width: 100% !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.3em !important;
}
.problem .problem-item-caption::before {
  content: '・';
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  flex-shrink: 0;
  line-height: 1.3;
  margin-top: 0.05em;
}

/* テキスト本体 — 奇数行: navy（37: 文字拡大） */
.problem .problem-item-text {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--navy, #0a2240) !important;
  line-height: 1.65 !important;
  display: block !important;
}

/* 偶数行（2,4,6）: teal アクセント */
.problem .problem-list > li:nth-child(even) .problem-item-caption::before {
  color: #0e7da3 !important;
}
.problem .problem-list > li:nth-child(even) .problem-item-text {
  color: #0e7da3 !important;
}

/* スマホ */
@media (max-width: 768px) {
  .problem .problem-item { padding: 3px 4px !important; }
  .problem .problem-item-text { font-size: 1.1rem !important; }
  section.problem::after { width: 80%; opacity: 0.05; }
}

/* ============================================================
   Problem → CTA 境界 ダブルシェブロン（17_見本）
   ============================================================ */
.problem-scroll-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  padding: 36px 0 8px;
}
.problem-scroll-chevron {
  display: block;
  width: 28px;
  height: 28px;
  border-right: 6px solid #0e7da3;
  border-bottom: 6px solid #0e7da3;
  transform: rotate(45deg);
  opacity: 0.85;
}

/* ============================================================
   Problem CTA — 「当院の植毛」強調 + サブコピー強化（18）
   ============================================================ */

/* 「当院の植毛」: 1.3×・グラデーション文字・二重下線 */
.problem-cta-main em {
  font-style: normal !important;
  font-size: 1.3em !important;           /* 1.3 × 1.55rem ≈ 2rem */
  font-weight: 900 !important;
  position: relative !important;
  display: inline !important;
  padding-bottom: 10px !important;
  /* グラデーションテキスト */
  background: linear-gradient(90deg, #00c2e0 0%, #f0c840 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  border-bottom: none !important;        /* 旧 2px gold 下線を解除 */
}

/* 二重グラデーション下線（上線・下線それぞれ 3px） */
.problem-cta-main em::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 9px;
  background:
    linear-gradient(90deg, #00c2e0 0%, #f0c840 100%) 0 0 / 100% 3px no-repeat,
    linear-gradient(90deg, #00c2e0 0%, #f0c840 100%) 0 100% / 100% 3px no-repeat;
  pointer-events: none;
}

/* サブコピー: 白・大きく */
.problem-cta-sub {
  color: #fff !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
  opacity: 1 !important;
}

/* ============================================================
   Problem CTA — CTA以外の文字全体を拡大（17）
   ============================================================ */

/* メイン見出し全体: 1.55rem → 1.95rem */
.problem-cta-main {
  font-size: 1.95rem !important;
}

/* eyebrow "SOLUTION" も拡大 */
.problem-cta-eyebrow {
  font-size: 0.92rem !important;
  letter-spacing: .28em !important;
}

/* サブコピー: メイン1.95remより少し小さく再調整 */
.problem-cta-sub {
  font-size: 1.4rem !important;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .problem-cta-main  { font-size: 1.5rem !important; }
  .problem-cta-sub   { font-size: 1.15rem !important; }
}

/* ============================================================
   Solution heading 強化（19）
   ============================================================ */

/* 「毛根再生注射とは」行: ページ内で最大・上に余白 */
.solution .section-title .sln-title-line2 {
  display: block !important;
  font-size: 1.5em !important;
  margin-top: 0.35em !important;
  line-height: 1.25 !important;
}

/* 「毛根再生注射」: 縦・黄色系グラデーション（キャンペーンタイトルと同色）+ 二重下線（46/49） */
.solution .section-title .txt-accent {
  position: relative !important;
  display: inline !important;
  padding-bottom: 5px !important;
  font-style: normal !important;
  background: linear-gradient(180deg, #ffe066 0%, #f5c842 45%, #ffa000 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* 二重下線: 黄色系 */
.solution .section-title .txt-accent::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 7px;
  background:
    linear-gradient(90deg, #ffa000 0%, #ffe066 50%, #ffa000 100%) 0 0   / 100% 2.5px no-repeat,
    linear-gradient(90deg, #ffa000 0%, #ffe066 50%, #ffa000 100%) 0 100% / 100% 2.5px no-repeat;
  pointer-events: none;
}
/* タイトル直下の青い装飾バーを非表示 */
.solution .section-title::after {
  display: none !important;
}

/* 「定着率100%以上」: 少し大きく + 光彩 */
.solution .section-title .sln-stat {
  font-size: 1.15em !important;
  font-weight: 900 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 0 28px rgba(0, 200, 230, 0.9),
    0 0 10px rgba(0, 200, 230, 0.6),
    0 3px 12px rgba(0, 0, 0, 0.7) !important;
}

/* スマホ */
@media (max-width: 768px) {
  .solution .section-title .sln-title-line2 { font-size: 1.3em !important; }
}

/* ============================================================
   Retention section — 幅・文字サイズ強化（21）
   ============================================================ */

/* コンテナ幅を拡大・バー数値の切れを防止 */
.retention-body-wrap {
  max-width: none !important;
  overflow: visible !important;
}

/* 本文テキスト: 1.05rem → 1.2rem */
.retention-p {
  font-size: 1.2rem !important;
  line-height: 2 !important;
}

/* 強調段落: 1.25rem → 1.45rem */
.retention-p--highlight {
  font-size: 1.45rem !important;
  line-height: 1.9 !important;
}

/* 「定着率」（strong）: 強調段落の 1.3× */
.retention-p--highlight strong {
  font-size: 1.3em !important;   /* 1.3 × 1.45rem ≈ 1.89rem */
  font-weight: 900 !important;
}

/* 数値バー: グリッド幅・「超」を同一行に収める（36） */
.retention-stat {
  grid-template-columns: 168px 1fr 162px !important;
}
.retention-stat-value {
  font-size: 1.9rem !important;
  white-space: nowrap !important;
}

/* 「当院が目指す定着率」ラベル: 2行・中央揃え・縦センター（36/44） */
.retention-stat--clinic .retention-stat-label {
  color: #b86a00 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

/* バーグラデーション: 濃淡を極端に（36） */
.retention-stat-bar--general {
  background: linear-gradient(90deg, #1a527e 0%, #bfe0f0 100%) !important;
}
.retention-stat-bar--clinic {
  background: linear-gradient(90deg, #a05600 0%, #ffe566 100%) !important;
}

/* スマホ */
@media (max-width: 768px) {
  .retention-p            { font-size: 1.1rem !important; }
  .retention-p--highlight { font-size: 1.2rem !important; }
  .retention-stat         { grid-template-columns: 120px 1fr 100px !important; }
  .retention-stat-value   { font-size: 1.5rem !important; }
}

/* ============================================================
   Solution point — キーフレーズ強調（24/38）
   ============================================================ */

/* 第1フレーズ: 周囲と同色・同サイズ（強調なし）*/
.solution-point-text-v2 .sln-em--plain {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* 第2フレーズ: アンバー＋下線（38）*/
.solution-point-text-v2 .sln-em--accent {
  color: #d4820a !important;
  font-size: 1.15em !important;
  font-weight: 900 !important;
  line-height: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: #d4820a !important;
  text-underline-offset: 3px !important;
}

/* ============================================================
   Compare table — col3・col4 ヘッダー・ボディ デザイン強化（25）
   当院(vivid teal) > col3(steel blue) > col4(matte slate)
   ============================================================ */

/* ── col3 ヘッダー: スチールブルー（中位ティア） */
.compare-table thead th:nth-child(3) {
  background: linear-gradient(160deg, #2e5070 0%, #1e3a52 100%) !important;
  color: #fff !important;
  border-top: 3px solid #5b99be !important;
  border-left: none !important;
}

/* ── col4 ヘッダー: マットスレート（下位ティア） */
.compare-table thead th:nth-child(4) {
  background: linear-gradient(160deg, #2a3a4c 0%, #1c2a3a 100%) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border-top: 3px solid #3d5a72 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ── col3 ボディ: 極薄スチールブルー tint */
.compare-table tbody td:nth-child(3) {
  background: rgba(46, 80, 112, 0.06) !important;
  color: #1e3a52 !important;
}
.compare-table tbody tr:nth-child(even) td:nth-child(3) {
  background: rgba(46, 80, 112, 0.11) !important;
}

/* ── col4 ボディ: 極薄スレート tint（以前の 0.03 より濃く） */
.compare-table tbody td:nth-child(4) {
  background: rgba(42, 58, 76, 0.09) !important;
  color: #2a3a4a !important;
  border-left: 1px solid rgba(60, 88, 110, 0.18) !important;
}
.compare-table tbody tr:nth-child(even) td:nth-child(4) {
  background: rgba(42, 58, 76, 0.15) !important;
}

/* 比較項目ラベル列（col1）: 他列と同等サイズに（33） */
.compare-table thead th:nth-child(1) {
  background: #0e2540 !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.04em !important;
}

/* ============================================================
   Doctor photo wrap — ラベルを画像センターに揃える（26）
   ============================================================ */
.doctor-photo-wrap {
  text-align: center !important;
}
.doctor-name-label {
  text-align: center !important;
}
.doctor-title-row {
  justify-content: center !important;
}

/* ============================================================
   CTA features — テンプレ感解消・各カード個性化（27）
   ============================================================ */

/* ベースリセット: 汎用枠・backdrop-filter・同色を解除 */
.cta-feature {
  background: rgba(255, 255, 255, 0.035) !important;
  border: none !important;
  border-left: 4px solid transparent !important;
  border-radius: 0 8px 8px 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 16px 20px !important;
  transition: background 0.2s ease !important;
}
.cta-feature:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  transform: none !important;
}

/* sub テキストを白くして読みやすく */
.cta-feature-sub {
  color: rgba(255, 255, 255, 0.72) !important;
  opacity: 1 !important;
  font-size: 0.82rem !important;
}

/* カード1: bright teal — カウンセリング完全無料 */
.cta-features > .cta-feature:nth-child(1) {
  border-left-color: #00c4de !important;
}
.cta-features > .cta-feature:nth-child(1) .cta-feature-title {
  color: #00c4de !important;
}

/* カード2: gold — 国内最安値水準 */
.cta-features > .cta-feature:nth-child(2) {
  border-left-color: #f5c842 !important;
}
.cta-features > .cta-feature:nth-child(2) .cta-feature-title {
  color: #f5c842 !important;
}

/* カード3: green-teal — 当日施術・日帰りOK */
.cta-features > .cta-feature:nth-child(3) {
  border-left-color: #26d0a8 !important;
}
.cta-features > .cta-feature:nth-child(3) .cta-feature-title {
  color: #26d0a8 !important;
}

/* カード4: amber-orange — アフターサポート永久無料 */
.cta-features > .cta-feature:nth-child(4) {
  border-left-color: #ff9f43 !important;
}
.cta-features > .cta-feature:nth-child(4) .cta-feature-title {
  color: #ff9f43 !important;
}

/* ============================================================
   Flow step — タイトル・バッジを画像上に浮かせる（28）
   ============================================================ */

/* カード全体: トップパディングを削除して画像を上端まで広げる */
.flow-step-v2 {
  padding: 0 0 20px !important;
}

/* img-wrap: 重ね合わせコンテキスト・角丸なし（カード側でクリップ） */
.flow-step-img-wrap {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  aspect-ratio: 3/2 !important;
}

/* アクセントバーの z-index を上げて画像上に出す */
.flow-step-v2 .flow-step-accent {
  z-index: 3 !important;
}

/* ゴーストナンバー: 画像下部に重なるよう調整 */
.flow-step-v2 .flow-step-ghost-num {
  z-index: 2 !important;
  bottom: 60px !important;
}

/* 浮かせる白い長方形オーバーレイ — 立体感あり（28/31） */
.flow-step-img-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  padding: 14px 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 2 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
  border-bottom: 3px solid var(--gold) !important;
}

/* バッジ行（STEP + 数字）*/
.flow-step-img-overlay .flow-step-badge-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.flow-step-img-overlay .flow-step-badge {
  background: var(--navy) !important;
  color: #fff !important;
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
  padding: 2px 8px !important;
  border-radius: 2px !important;
}

.flow-step-img-overlay .flow-step-num {
  font-family: 'Oswald', 'Helvetica Neue', sans-serif !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
}

.flow-step-img-overlay .flow-step-time {
  font-size: 0.72rem !important;
  color: #0e7da3 !important;
  background: rgba(0, 163, 194, 0.1) !important;
  border: 1px solid rgba(0, 163, 194, 0.22) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  align-self: flex-start !important;
}

/* タイトルテキスト — 大きく・見やすく（31） */
.flow-step-img-overlay .flow-step-title {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: var(--navy) !important;
  line-height: 1.4 !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  position: static !important;
  z-index: auto !important;
  letter-spacing: 0.02em !important;
}

/* 旧 flow-step-top は非表示 */
.flow-step-v2 .flow-step-top {
  display: none !important;
}

/* 説明テキストにパディングを追加 */
.flow-step-v2 .flow-step-desc {
  padding: 14px 20px 0 !important;
  font-size: 0.88rem !important;
}

/* ============================================================
   Hero CTA block — 派手化・グラデーションボタン＋アニメーション（29）
   ============================================================ */

@keyframes cta-btn-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes cta-btn-glow-pulse {
  0%, 100% {
    box-shadow: 0 8px 48px rgba(0, 200, 230, 0.55),
                0 2px 12px rgba(0, 0, 0, 0.2),
                0 0 0 0 rgba(0, 200, 230, 0.4);
  }
  50% {
    box-shadow: 0 12px 60px rgba(0, 200, 230, 0.75),
                0 4px 16px rgba(0, 0, 0, 0.25),
                0 0 0 10px rgba(0, 200, 230, 0.0);
  }
}

@keyframes beam-sweep {
  0%   { left: -100%; }
  45%  { left: 150%; }
  100% { left: 150%; }
}

/* セクション背景: ネイビーグラデーション */
.hero-cta-block {
  background: linear-gradient(140deg, #071c36 0%, #0a2a50 55%, #0d3468 100%) !important;
  padding: 64px 20px !important;
}

.hero-cta-block-stripe {
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.035) 0,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 20px
  ) !important;
}

/* EYEBROW: 輝くゴールド */
.hero-cta-eyebrow {
  color: #f5c842 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.35em !important;
  text-shadow: 0 0 14px rgba(245, 200, 40, 0.7) !important;
  margin-bottom: 14px !important;
}

/* リードテキスト: 大きく白で */
.hero-cta-lead {
  font-size: 1.55rem !important;
  color: #fff !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  margin-bottom: 36px !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45) !important;
}

/* ボタン本体: グラデーション＋シマー */
.btn-hero-cta-main {
  background: linear-gradient(
    90deg,
    #0e92bf 0%,
    #00e0ff 25%,
    #f5c842 55%,
    #ff9800 75%,
    #0e92bf 100%
  ) !important;
  background-size: 300% auto !important;
  color: #fff !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  padding: 22px 60px !important;
  border-radius: 50px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
  animation: cta-btn-shimmer 3.5s linear infinite,
             cta-btn-glow-pulse 2.2s ease-in-out infinite !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-block !important;
}

.btn-hero-cta-main:hover {
  transform: translateY(-3px) scale(1.025) !important;
  animation-play-state: paused !important;
}

/* ビームスウィープエフェクト */
.btn-hero-cta-beam {
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  ) !important;
  transform: skewX(-20deg) !important;
  animation: beam-sweep 3.5s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* トラストバッジ */
.hero-cta-trust {
  margin-top: 28px !important;
  gap: 28px !important;
}

.hero-cta-trust-item {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

.hero-cta-dot {
  background: #f5c842 !important;
  box-shadow: 0 0 7px rgba(245, 200, 40, 0.85) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 5px !important;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .hero-cta-lead          { font-size: 1.2rem !important; }
  .btn-hero-cta-main      { font-size: 1.05rem !important; padding: 18px 36px !important; }
  .hero-cta-trust         { gap: 14px !important; flex-direction: column !important; align-items: center !important; }
  .flow-step-img-overlay .flow-step-title { font-size: 0.95rem !important; }
  .flow-step-img-wrap { aspect-ratio: 4/3 !important; }
}

/* ============================================================
   Doctor — 「理事長からのメッセージ」見出し強化＋格言ブロック品格化（30）
   ============================================================ */

/* 見出し: 大きく・serif・二重グラデーション下線 */
.doctor-message-heading {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: var(--navy) !important;
  letter-spacing: 0.1em !important;
  text-transform: none !important;
  margin-bottom: 32px !important;
  display: inline-block !important;
  padding-bottom: 13px !important;
  position: relative !important;
}

.doctor-message-heading::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 9px !important;
  background:
    linear-gradient(90deg, #1a3c6e 0%, #0e92bf 55%, rgba(14, 146, 191, 0) 100%) 0 0 / 100% 2.5px no-repeat,
    linear-gradient(90deg, #1a3c6e 0%, #0e92bf 55%, rgba(14, 146, 191, 0) 100%) 0 100% / 100% 2.5px no-repeat !important;
}

/* 格言ブロック — 深みのある品格デザイン */
.doctor-quote {
  background: linear-gradient(155deg, #0b1c30 0%, #152740 55%, #192f4d 100%) !important;
  border-left: none !important;
  border-top: 2px solid rgba(201, 162, 39, 0.72) !important;
  border-bottom: 2px solid rgba(201, 162, 39, 0.72) !important;
  border-radius: 0 !important;
  padding: 48px 52px 44px !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
  text-align: center !important;
  color: #eef2f8 !important;
  font-size: 1.45rem !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 700 !important;
  line-height: 2.1 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 12px 52px rgba(0, 0, 0, 0.4) !important;
}

/* 装飾的な開き引用符（左上ウォーターマーク）*/
.doctor-quote::before {
  content: '\201C' !important;
  position: absolute !important;
  top: -22px !important;
  left: 18px !important;
  font-size: 130px !important;
  font-weight: 900 !important;
  font-family: 'Georgia', 'Times New Roman', serif !important;
  color: rgba(201, 162, 39, 0.1) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* 装飾的な閉じ引用符（右下ウォーターマーク）*/
.doctor-quote::after {
  content: '\201D' !important;
  position: absolute !important;
  bottom: -50px !important;
  right: 16px !important;
  font-size: 130px !important;
  font-weight: 900 !important;
  font-family: 'Georgia', 'Times New Roman', serif !important;
  color: rgba(201, 162, 39, 0.09) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* アウターラップ — 上部ゴールドボーダーを除去してすっきり */
.doctor-message-wrap {
  border-top: none !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 6px 32px rgba(10, 34, 64, 0.1) !important;
}

/* スマホ */
@media (max-width: 768px) {
  .doctor-message-heading { font-size: 1.2rem !important; }
  .doctor-quote { padding: 32px 24px 28px !important; font-size: 1.15rem !important; }
}

/* ============================================================
   手術フロー — タイトル強調・星アイコン削除・矢印大型化（32）
   ============================================================ */

/* 星アイコン非表示 */
.flow-procedures-icon {
  display: none !important;
}

/* セクション見出し — serif・大きく・二重下線 */
.flow-procedures-heading {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: 0.08em !important;
  display: inline-block !important;
  padding-bottom: 12px !important;
  position: relative !important;
  margin-bottom: 0 !important;
}

.flow-procedures-heading::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 9px !important;
  background:
    linear-gradient(90deg, var(--gold) 0%, rgba(201, 162, 39, 0) 100%) 0 0 / 100% 2.5px no-repeat,
    linear-gradient(90deg, var(--gold) 0%, rgba(201, 162, 39, 0) 100%) 0 100% / 100% 2.5px no-repeat !important;
}

/* カードタイトル — 大きく・白・ゴールドセパレーター */
.procedure-card-title {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
  padding-bottom: 9px !important;
  border-bottom: 1px solid rgba(201, 162, 39, 0.45) !important;
  letter-spacing: 0.03em !important;
}

/* 矢印コンテナ — 大型SVGに合わせてセンタリング */
.procedure-arrow-v2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  padding-top: 60px !important;
}

/* スマホ: 矢印を回転（縦並び時は下向きに）*/
@media (max-width: 768px) {
  .flow-procedures-heading { font-size: 1.2rem !important; }
  .procedure-card-title    { font-size: 1.1rem !important; }
  .procedure-arrow-v2      { padding-top: 0 !important; transform: rotate(90deg) !important; }
}

/* ============================================================
   Campaign section — テンプレ感解消・キャンペーン訴求デザイン（39）
   ============================================================ */

/* コンテナ: ゴールドストライプ + コーナー金ライン装飾 */
.pricing-campaign-v2 {
  background:
    repeating-linear-gradient(
      -55deg,
      rgba(245, 200, 66, 0.04) 0,
      rgba(245, 200, 66, 0.04) 1px,
      transparent 1px,
      transparent 28px
    ),
    linear-gradient(135deg, #0f2347 0%, #0c1d46 60%, #0a1a3e 100%) !important;
  border: 1.5px solid rgba(201, 162, 39, 0.5) !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 左上コーナー装飾 */
.pricing-campaign-v2::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 56px !important;
  height: 56px !important;
  border-top: 3px solid rgba(245, 200, 66, 0.75) !important;
  border-left: 3px solid rgba(245, 200, 66, 0.75) !important;
  border-radius: 12px 0 0 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* 右下コーナー装飾 */
.pricing-campaign-v2::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 56px !important;
  height: 56px !important;
  border-bottom: 3px solid rgba(245, 200, 66, 0.75) !important;
  border-right: 3px solid rgba(245, 200, 66, 0.75) !important;
  border-radius: 0 0 12px 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* eyebrow "CAMPAIGN" — 輝くゴールド・大きめ追従型 */
.pricing-campaign-eyebrow {
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.45em !important;
  color: #f5c842 !important;
  text-shadow: 0 0 18px rgba(245, 200, 40, 0.8) !important;
  margin-bottom: 18px !important;
  text-align: center !important;
  display: block !important;
}

/* タイトル — ゴールドグラデーション文字 + 二重下線 */
.pricing-campaign-title-v2 {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.5 !important;
  text-align: center !important;
  display: table !important;
  margin: 0 auto 28px !important;
  padding-bottom: 16px !important;
  position: relative !important;
  background: linear-gradient(90deg, #ffe066 0%, #f5c842 45%, #ffa000 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 二重グラデーション下線 */
.pricing-campaign-title-v2::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 9px !important;
  background:
    linear-gradient(90deg, transparent 0%, #f5c842 20%, #ffa000 80%, transparent 100%) 0 0 / 100% 2.5px no-repeat,
    linear-gradient(90deg, transparent 0%, #f5c842 20%, #ffa000 80%, transparent 100%) 0 100% / 100% 2.5px no-repeat !important;
  pointer-events: none !important;
}

/* 本文 — 大きく・白・読みやすく */
.pricing-campaign-sub {
  font-size: 1.15rem !important;
  line-height: 1.95 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin-bottom: 24px !important;
}

/* 保証テキスト — ゴールド・大きく・目立つ（47） */
.pricing-campaign-guarantee-v2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #f5c842 !important;
  background: rgba(245, 200, 66, 0.07) !important;
  border: 1px solid rgba(245, 200, 66, 0.25) !important;
  border-radius: 6px !important;
  padding: 14px 20px !important;
  margin-top: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.6 !important;
}
.guarantee-icon {
  flex-shrink: 0 !important;
}

/* スマホ */
@media (max-width: 768px) {
  .pricing-campaign-title-v2    { font-size: 1.35rem !important; }
  .pricing-campaign-sub         { font-size: 1.05rem !important; }
  .pricing-campaign-guarantee-v2 { font-size: 0.94rem !important; }
}

/* ============================================================
   Hero FV — 全面ファーストビュー（横余白なし）（40）
   ============================================================ */

/* ラッパー: max-width解除・全幅・高さは画像に追従 */
.hero-fv-img-wrap {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  height: auto !important;
}

/* 画像: 横幅100%・高さ自動（アスペクト比維持・クロップなし）*/
/* max-height で大きくなりすぎを抑制、object-fit:contain でアスペクト比を守る */
.hero-fv-img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: 80vh !important;
  object-fit: contain !important;
  object-position: top center !important;
  display: block !important;
}

@media (max-width: 768px) {
  .hero-fv-img { max-height: none !important; }
}

/* ============================================================
   Problem → Solution 間隔拡張（41）
   ============================================================ */
.problem-scroll-arrow {
  padding-bottom: 48px !important;
}

/* ============================================================
   Retention CTA body — 文字拡大（45）
   ============================================================ */
.retention-cta-body {
  font-size: 1.35rem !important;
}
@media (max-width: 768px) {
  .retention-cta-body { font-size: 1.15rem !important; }
}

/* ============================================================
   Problem CTA — 「当院の植毛」グラデーション修正・背景SOLUTION削除（42）
   ============================================================ */

/* 背景「SOLUTION」ウォーターマーク非表示 */
.problem-cta-zone-bg-text {
  display: none !important;
}

/* 「当院の植毛」: 塗りつぶし廃止・ソリッドteal（48） */
.problem-cta-main em {
  padding-bottom: 4px !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #4dd8f0 !important;
  color: #4dd8f0 !important;
}

/* 二重下線: teal ソリッド */
.problem-cta-main em::after {
  height: 7px !important;
  background:
    rgba(77, 216, 240, 0.9) 0 0   / 100% 2.5px no-repeat,
    rgba(77, 216, 240, 0.9) 0 100% / 100% 2.5px no-repeat !important;
}

/* ============================================================
   PHASE A — Editorial Section Header Redesign
   全セクション共通の見出しを左寄せ・編集記事風に刷新
   - ゴーストアウトライン番号 (01..) を左上に絶対配置
   - eyebrow を縦バー型のラベルに
   - title を Noto Serif JP 大型・左寄せ
   - 中央寄せの細い下線 → 左下の太いアクセントバー
   - 既に独自装飾を持つ .problem は対象外
   - ダーク背景 (.solution) はカラー反転で対応
   ============================================================ */

/* ---------- CSS Counter: .section-title を持つ section のみ採番 ---------- */
body { counter-reset: smc-sec; }
section.section-pad:has(.section-title) { counter-increment: smc-sec; }

/* ---------- container 内の位置基準を作る ---------- */
section.section-pad:not(.problem) > .container {
  position: relative !important;
}

/* ---------- Section Eyebrow: 縦バー型エディトリアルラベル ---------- */
section.section-pad:not(.problem) .section-eyebrow,
section.section-pad:not(.problem) .section-eyebrow--wide {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
  text-align: left !important;
  font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: var(--amber) !important;
  margin: 0 0 14px !important;
  padding: 6px 0 6px 18px !important;
  position: relative !important;
}

/* 縦バー: グラデーション */
section.section-pad:not(.problem) .section-eyebrow::before,
section.section-pad:not(.problem) .section-eyebrow--wide::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 1.4em !important;
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-light) 100%) !important;
  flex: none !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 1px !important;
}

/* 既存の中央寄せ下線アクセントを完全に削除 */
section.section-pad:not(.problem) .section-eyebrow::after,
section.section-pad:not(.problem) .section-eyebrow--wide::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ---------- Section Title: 左寄せ・大型・明朝体 ---------- */
section.section-pad:not(.problem) .section-title {
  text-align: left !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: -.005em !important;
  margin: 0 0 36px !important;
  padding: 0 0 18px !important;
  position: relative !important;
}

/* ゴーストアウトライン番号 (01, 02...) — タイトル左上に絶対配置 */
section.section-pad:not(.problem) .section-title::before {
  content: counter(smc-sec, decimal-leading-zero);
  position: absolute;
  top: -0.55em;
  left: -0.18em;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(201, 162, 39, 0.30);
  pointer-events: none;
  z-index: 0;
}

/* タイトル本文を番号より前面に */
section.section-pad:not(.problem) .section-title > * {
  position: relative;
  z-index: 1;
}

/* タイトル下のアクセント: 左寄せ短いバー (元の中央下線を上書き) */
section.section-pad:not(.problem) .section-title::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 56px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber) 60%, transparent 100%) !important;
  transform: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ---------- retention-header: 中央寄せ強制を解除 ---------- */
.retention-header {
  text-align: left !important;
}

/* ---------- ダーク背景 (solution) のカラー反転 ---------- */
section.solution.section-pad .section-title {
  color: #fff !important;
}
section.solution.section-pad .section-title::before {
  -webkit-text-stroke-color: rgba(245, 200, 66, 0.22) !important;
}
section.solution.section-pad .section-eyebrow {
  color: var(--gold-light) !important;
}
section.solution.section-pad .section-eyebrow::before {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%) !important;
}
section.solution.section-pad .section-title::after {
  background: linear-gradient(90deg, var(--gold-light) 0%, var(--gold) 60%, transparent 100%) !important;
}

/* ---------- pricing-campaign-title (キャンペーンバナー内) は対象外 ---------- */
.pricing-campaign-title-v2,
.pricing-campaign-eyebrow {
  /* これは料金セクション内の独立要素のため Phase A 対象外として既存維持 */
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {
  section.section-pad:not(.problem) .section-title {
    font-size: 1.5rem !important;
    margin-bottom: 28px !important;
    padding-bottom: 14px !important;
  }
  section.section-pad:not(.problem) .section-title::before {
    font-size: 3.2rem;
    top: -0.45em;
    left: -0.1em;
    -webkit-text-stroke-width: 1.2px;
  }
  section.section-pad:not(.problem) .section-eyebrow,
  section.section-pad:not(.problem) .section-eyebrow--wide {
    font-size: 0.7rem !important;
    letter-spacing: 0.28em !important;
    padding-left: 14px !important;
  }
  section.section-pad:not(.problem) .section-title::after {
    width: 44px !important;
    height: 2px !important;
  }
}

/* ============================================================
   PHASE B-1 — Flow セクション 非対称タイムライン刷新
   - .flow-steps-v2: 2x2グリッド → 縦ジグザグタイムライン
   - .flow-procedures-v2: 5カラム対称 → 階段状＋巨大ナンバー
   ============================================================ */

/* ---------- セクション全体: 中央タイムラインの基準 ---------- */
section.flow.section-pad .container {
  max-width: 1080px !important;
}

.flow-steps-v2 {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 36px !important;
  position: relative !important;
  max-width: 880px !important;
  margin: 8px auto 64px !important;
  padding: 32px 0 !important;
}

/* 中央縦タイムライン: 点線 */
.flow-steps-v2::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  border-left: 2px dashed rgba(201, 162, 39, 0.45) !important;
  transform: translateX(-50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* タイムライン上下端にドット装飾 */
.flow-steps-v2::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -4px !important;
  transform: translateX(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--amber) !important;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18) !important;
  z-index: 1 !important;
}

/* 旧 flow-step-row-arrow を非表示 (タイムラインに置き換え) */
.flow-step-row-arrow {
  display: none !important;
}

/* ---------- 各ステップカード: 左右交互配置 ---------- */
.flow-step-v2 {
  width: calc(50% + 24px) !important;
  position: relative !important;
  z-index: 1 !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(10, 34, 64, 0.12) !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.flow-step-v2:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 44px rgba(10, 34, 64, 0.18) !important;
}

/* 奇数番 (1,3): 左寄せ */
.flow-step-v2:nth-child(2n-1) {
  align-self: flex-start !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* 偶数番 (2,4): 右寄せ + 上方向にずらして重ねる */
.flow-step-v2:nth-child(2n) {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: -52px !important;
}

/* タイムラインから各カードへ伸びる横コネクタ */
.flow-step-v2::before {
  content: '' !important;
  position: absolute !important;
  top: 48px !important;
  width: 32px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.7) 0%, rgba(201, 162, 39, 0.2) 100%) !important;
  z-index: 4 !important;
}

.flow-step-v2:nth-child(2n-1)::before {
  right: -24px !important;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.2) 0%, rgba(201, 162, 39, 0.8) 100%) !important;
}

.flow-step-v2:nth-child(2n)::before {
  left: -24px !important;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.8) 0%, rgba(201, 162, 39, 0.2) 100%) !important;
}

/* タイムライン上に座るドット */
.flow-step-v2::after {
  content: '' !important;
  position: absolute !important;
  top: 41px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--amber) !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 2px var(--amber), 0 4px 10px rgba(201, 162, 39, 0.4) !important;
  z-index: 5 !important;
}

.flow-step-v2:nth-child(2n-1)::after {
  right: -33px !important;
}

.flow-step-v2:nth-child(2n)::after {
  left: -33px !important;
}

/* オーバーレイ装飾を整理: アクセントバーを左寄せに */
.flow-step-v2 .flow-step-accent {
  background: linear-gradient(90deg, var(--amber), var(--amber-light)) !important;
}

/* ゴーストナンバー: より大きく・ブランドカラーに */
.flow-step-v2 .flow-step-ghost-num {
  font-size: 9rem !important;
  color: rgba(201, 162, 39, 0.07) !important;
  bottom: -20px !important;
  right: -8px !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

/* ---------- mobile: タイムライン解除 → シンプル縦並び ---------- */
@media (max-width: 768px) {
  section.flow.section-pad .container {
    max-width: 100% !important;
  }
  .flow-steps-v2 {
    gap: 20px !important;
    padding: 16px 0 !important;
    margin-bottom: 40px !important;
  }
  .flow-steps-v2::before,
  .flow-steps-v2::after {
    display: none !important;
  }
  .flow-step-v2,
  .flow-step-v2:nth-child(2n-1),
  .flow-step-v2:nth-child(2n) {
    width: 100% !important;
    align-self: stretch !important;
    margin: 0 !important;
  }
  .flow-step-v2::before,
  .flow-step-v2::after {
    display: none !important;
  }
}

/* ============================================================
   PHASE B-1 — Flow Procedures (手術5ステップ) 階段配置
   ============================================================ */

/* グリッドはそのままだが、カードに階段オフセット */
.flow-procedures-grid {
  align-items: stretch !important;
  padding: 8px 0 !important;
}

/* 各カードを少しずつずらして階段状に */
.procedure-card-v2 {
  position: relative !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(201, 162, 39, 0.25) !important;
  border-radius: 10px !important;
  padding: 22px 18px 20px !important;
  overflow: hidden !important;
}

/* 1, 3, 5番目: 通常位置 / 2, 4番目: 下方向にずらして階段感 */
.flow-procedures-grid > .procedure-card-v2:nth-of-type(1) {
  transform: translateY(0) !important;
}
.flow-procedures-grid > .procedure-card-v2:nth-of-type(2) {
  transform: translateY(20px) !important;
}
.flow-procedures-grid > .procedure-card-v2:nth-of-type(3) {
  transform: translateY(0) !important;
}
.flow-procedures-grid > .procedure-card-v2:nth-of-type(4) {
  transform: translateY(20px) !important;
}
.flow-procedures-grid > .procedure-card-v2:nth-of-type(5) {
  transform: translateY(0) !important;
}

/* 番号を巨大化してカード背面に */
.procedure-card-v2 .procedure-card-num {
  position: absolute !important;
  top: -18px !important;
  right: -8px !important;
  font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
  font-size: 5.5rem !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(245, 200, 66, 0.35) !important;
  opacity: 1 !important;
  margin: 0 !important;
  line-height: 1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.procedure-card-v2 > *:not(.procedure-card-num) {
  position: relative !important;
  z-index: 1 !important;
}

/* 矢印: 階段上下のずれに合わせて中央へ */
.procedure-arrow-v2 {
  align-self: center !important;
  padding: 0 4px !important;
  padding-top: 0 !important;
  transform: translateY(10px) !important;
}

.procedure-arrow-v2 svg {
  width: 42px !important;
  height: 42px !important;
}

/* 矢印の色をブランドカラーに統一 */
.procedure-arrow-v2 svg polyline {
  stroke: rgba(245, 200, 66, 0.85) !important;
}

/* mobile: 階段解除 */
@media (max-width: 768px) {
  .flow-procedures-grid > .procedure-card-v2:nth-of-type(n) {
    transform: none !important;
  }
  .procedure-card-v2 .procedure-card-num {
    font-size: 4.2rem !important;
    top: -12px !important;
    right: -4px !important;
  }
  .procedure-arrow-v2 {
    transform: rotate(90deg) !important;
    padding: 4px 0 !important;
  }
}

/* ============================================================
   PHASE B-2 — Reasons セクション 重ね合わせ非対称化
   - カードの「箱」感を排除し、画像とテキストブロックをずらして重ねる
   - ゴーストナンバーを外側にはみ出させて雑誌風に
   ============================================================ */

.reasons-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 88px !important;
  grid-template-columns: none !important;
  max-width: 1080px !important;
  margin: 8px auto 0 !important;
  padding: 32px 0 16px !important;
  position: relative !important;
}

/* 各 reason カード: ボックス装飾を排除し重ね合わせ式に */
.reason-card-v2 {
  display: grid !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  position: relative !important;
  align-items: stretch !important;
  transition: none !important;
}

.reason-card-v2:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* 奇数番 (1, 3): 画像左・テキスト右 (右側にテキストを重ねる) */
.reason-card-v2:nth-child(odd) {
  grid-template-columns: 1.05fr 0.95fr !important;
}

.reason-card-v2:nth-child(odd) .reason-img-col {
  order: 0 !important;
  margin-top: 0 !important;
  z-index: 1 !important;
}

.reason-card-v2:nth-child(odd) .reason-body-col {
  order: 1 !important;
  margin-left: -64px !important;
  margin-top: 56px !important;
  margin-bottom: -24px !important;
  padding: 38px 32px 36px 80px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(10, 34, 64, 0.14) !important;
  z-index: 2 !important;
  border-top: none !important;
  border-radius: 0 !important;
}

/* 偶数番 (2): 画像右・テキスト左 (左側にテキストを重ねる) */
.reason-card-v2:nth-child(even) {
  grid-template-columns: 0.95fr 1.05fr !important;
}

.reason-card-v2:nth-child(even) .reason-img-col {
  order: 1 !important;
  margin-top: 0 !important;
  z-index: 1 !important;
}

.reason-card-v2:nth-child(even) .reason-body-col {
  order: 0 !important;
  margin-right: -64px !important;
  margin-top: 56px !important;
  margin-bottom: -24px !important;
  padding: 38px 80px 36px 32px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(10, 34, 64, 0.14) !important;
  z-index: 2 !important;
  border-top: none !important;
  border-radius: 0 !important;
}

/* 画像コラム: 影を強めて主役感、上端をフラットに */
.reason-img-col {
  overflow: hidden !important;
  background: var(--cream) !important;
  box-shadow: 0 16px 40px rgba(10, 34, 64, 0.18) !important;
  min-height: 320px !important;
}

.reason-img-v2 {
  min-height: 320px !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

/* hover: 画像のみズーム */
.reason-card-v2:hover .reason-img-v2 {
  transform: scale(1.03) !important;
}

/* アクセントバー: カラフル縦バーを画像コラムの内側端に */
.reason-accent-bar {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 6px !important;
  z-index: 3 !important;
}

.reason-card-v2:nth-child(odd) .reason-accent-bar {
  right: 0 !important;
  left: auto !important;
}

.reason-card-v2:nth-child(even) .reason-accent-bar {
  left: 0 !important;
  right: auto !important;
}

/* ゴーストナンバー: カード外側にはみ出すサイズに拡大 */
.reason-body-col::before {
  content: attr(data-num) !important;
  position: absolute !important;
  font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
  font-size: 13rem !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
  line-height: 0.85 !important;
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(10, 34, 64, 0.08) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 奇数番: ナンバーを右上外側へ */
.reason-card-v2:nth-child(odd) .reason-body-col::before {
  top: -64px !important;
  right: -16px !important;
  bottom: auto !important;
  left: auto !important;
}

/* 偶数番: ナンバーを左上外側へ */
.reason-card-v2:nth-child(even) .reason-body-col::before {
  top: -64px !important;
  left: -16px !important;
  right: auto !important;
  bottom: auto !important;
}

/* REASON バッジ周り: ナンバーを少し控えめに (重なり対策) */
.reason-badge-num {
  font-size: 3rem !important;
}

/* タイトルとポイントをナンバーより前面に */
.reason-badge-v2,
.reason-title-v2,
.reason-points-v2,
.reason-desc-v2 {
  position: relative !important;
  z-index: 1 !important;
}

/* 旧 nth-child 上部ボーダー削除 (ボックス感排除) */
.reason-card-v2:nth-child(1) .reason-body-col,
.reason-card-v2:nth-child(2) .reason-body-col,
.reason-card-v2:nth-child(3) .reason-body-col {
  border-top: none !important;
}

/* mobile: 重ね合わせ解除 → シンプル縦並び */
@media (max-width: 768px) {
  .reasons-grid {
    gap: 48px !important;
    padding: 16px 0 !important;
  }
  .reason-card-v2,
  .reason-card-v2:nth-child(odd),
  .reason-card-v2:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .reason-card-v2:nth-child(odd) .reason-img-col,
  .reason-card-v2:nth-child(odd) .reason-body-col,
  .reason-card-v2:nth-child(even) .reason-img-col,
  .reason-card-v2:nth-child(even) .reason-body-col {
    margin: 0 !important;
    order: unset !important;
  }
  .reason-card-v2:nth-child(odd) .reason-body-col,
  .reason-card-v2:nth-child(even) .reason-body-col {
    padding: 28px 22px 24px !important;
  }
  .reason-img-col,
  .reason-img-v2 {
    min-height: 220px !important;
  }
  .reason-card-v2:nth-child(odd) .reason-body-col::before,
  .reason-card-v2:nth-child(even) .reason-body-col::before {
    font-size: 7rem !important;
    top: auto !important;
    bottom: -28px !important;
    right: -8px !important;
    left: auto !important;
  }
}

/* ============================================================
   PHASE B-3 — Cases セクション 雑誌風レイアウト
   - Before/After を均等2列 → After 強調の非対称比率に
   - 巨大「CASE 01」スタンプを左に
   - カード化を解除しフラットに
   ============================================================ */

/* CASE カウンター */
section.cases.section-pad { counter-reset: smc-case; }
section.cases.section-pad .case-card { counter-increment: smc-case; }

/* container 拡張 */
section.cases.section-pad .container {
  max-width: 1080px !important;
}

.case-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 72px !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-bottom: 1px solid rgba(10, 34, 64, 0.08) !important;
  padding-bottom: 56px !important;
  transition: none !important;
}

.case-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.case-card:last-child {
  border-bottom: none !important;
}

/* 巨大 CASE 番号 — カード上端にはみ出させる */
.case-card::before {
  content: 'CASE ' counter(smc-case, decimal-leading-zero) !important;
  position: absolute !important;
  top: -22px !important;
  left: -8px !important;
  font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
  font-size: 4.2rem !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(201, 162, 39, 0.32) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ヘッダー: cream 帯を消してフラットに */
.case-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 0 18px !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 1 !important;
  padding-left: 92px !important; /* CASEスタンプ分の余白 */
}

.case-count {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--text-light) !important;
  opacity: 1 !important;
  letter-spacing: 0.04em !important;
}

.case-count-num {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: var(--amber) !important;
  margin-right: 4px !important;
}

.case-patient {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  opacity: 1 !important;
  padding: 4px 14px !important;
  background: rgba(10, 34, 64, 0.05) !important;
  border-radius: 4px !important;
}

/* 写真: Before 1 : After 1.4 の非対称比率 */
.case-photos {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.case-photo-wrap {
  position: relative !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  background: var(--cream) !important;
  border-radius: 0 !important;
}

/* Before/After ラベル: フラット・大文字・正方形寄り */
.case-label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background: rgba(10, 34, 64, 0.92) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.32em !important;
  padding: 6px 14px !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
}

.case-label--after {
  background: var(--amber) !important;
  color: #fff !important;
}

/* フッター: 月額情報を After 写真直下のオーバーレイ風に */
.case-footer {
  padding: 18px 0 8px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid rgba(10, 34, 64, 0.06) !important;
  margin-top: 16px !important;
  padding-left: 0 !important;
}

.case-monthly {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: var(--navy) !important;
  margin: 0 !important;
  letter-spacing: 0.01em !important;
}

.case-note {
  font-size: 0.8rem !important;
  color: var(--text-light) !important;
  margin: 0 !important;
}

.case-desc {
  font-size: 0.95rem !important;
  color: var(--text) !important;
  line-height: 1.85 !important;
  padding: 14px 0 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* mobile: 非対称解除 */
@media (max-width: 768px) {
  .case-card {
    margin-bottom: 48px !important;
    padding-bottom: 40px !important;
  }
  .case-card::before {
    font-size: 2.8rem !important;
    top: -12px !important;
  }
  .case-header {
    padding-left: 0 !important;
    padding-top: 28px !important;
    gap: 12px !important;
  }
  .case-photos {
    grid-template-columns: 1fr 1fr !important;
  }
  .case-monthly {
    font-size: 1.2rem !important;
  }
}

/* ============================================================
   PHASE C-1 — Compare Table 当院列強調・テンプレ感解消
   - 角丸 → 直線的なエッジに
   - zebra ストライプ削除 → 罫線のみ
   - 当院列を上方向にはみ出させて主役化
   - ◎マークを大型化＋ゴールドグラデーション
   ============================================================ */

/* テーブル外枠: 角丸を解除しフラットに */
.transplant-compare .table-responsive {
  position: relative !important;
  padding-top: 28px !important;
}

.compare-table {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

/* zebra ストライプを完全に削除 */
.compare-table tbody tr:nth-child(even) {
  background: transparent !important;
}
.compare-table tbody tr:nth-child(even) .col-us,
.compare-table tbody tr:nth-child(even) td:nth-child(3),
.compare-table tbody tr:nth-child(even) td:nth-child(4) {
  background: inherit !important;
}

/* 行間: 細い罫線のみ */
.compare-table tbody tr {
  background: transparent !important;
}
.compare-table tbody td {
  border-bottom: 1px solid rgba(10, 34, 64, 0.08) !important;
  background: transparent !important;
  padding: 18px 14px !important;
}
.compare-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* 1列目 (比較項目ラベル): 左寄せ・トーン落とし */
.compare-table thead th:nth-child(1) {
  background: transparent !important;
  color: var(--text-light) !important;
  border-top: none !important;
  text-align: left !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
  padding: 14px 14px !important;
}
.compare-table tbody td.row-label {
  text-align: left !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  background: transparent !important;
}

/* 当院列ヘッダー: 上方向にはみ出させて主役化 */
.compare-table thead .col-us {
  background: linear-gradient(160deg, #00c4de 0%, #007faa 50%, #003f6e 100%) !important;
  border-bottom: 4px solid var(--amber) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  position: relative !important;
  padding: 28px 14px 22px !important;
  box-shadow:
    0 12px 32px rgba(0, 80, 110, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-12px) !important;
  z-index: 2 !important;
}

/* 当院ヘッダー上端にゴールドリボン */
.compare-table thead .col-us::before {
  content: 'BEST CHOICE' !important;
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--amber) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.28em !important;
  padding: 4px 14px !important;
  white-space: nowrap !important;
  z-index: 3 !important;
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.45) !important;
}

/* 当院 tbody 列: 縦縞背景 + サイドライン */
.compare-table tbody td.col-us {
  background: linear-gradient(180deg, rgba(0, 196, 222, 0.04) 0%, rgba(0, 127, 170, 0.06) 100%) !important;
  border-left: 3px solid rgba(0, 163, 194, 0.65) !important;
  border-right: 3px solid rgba(0, 163, 194, 0.65) !important;
  border-bottom: 1px solid rgba(0, 163, 194, 0.18) !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
}

/* 当院列最終行: 下端にラインを */
.compare-table tbody tr:last-child td.col-us {
  border-bottom: 4px solid var(--amber) !important;
}

/* 3列目・4列目ヘッダー: トーンを完全に控えめにする (当院との階層差) */
.compare-table thead th:nth-child(3),
.compare-table thead th:nth-child(4) {
  background: rgba(10, 34, 64, 0.04) !important;
  color: var(--navy) !important;
  border-top: none !important;
  border-bottom: 2px solid rgba(10, 34, 64, 0.12) !important;
  border-left: none !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 14px 12px !important;
  opacity: 0.8 !important;
}

/* 3列目・4列目 tbody: 透明背景 (zebraやtint一切なし) */
.compare-table tbody td:nth-child(3),
.compare-table tbody td:nth-child(4) {
  background: transparent !important;
  color: var(--text-light) !important;
  border-left: none !important;
  border-right: none !important;
}

/* 比較マーク基本: 角丸排除 */
.compare-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 6px !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  line-height: 1 !important;
}

/* 当院◎: 巨大スタンプ風ゴールドグラデ */
.compare-table .col-us .compare-mark,
.compare-mark--gold {
  font-size: 2.2rem !important;
  background: linear-gradient(135deg, #ffe066 0%, #f5c842 50%, #c9a227 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(201, 162, 39, 0.32)) !important;
  color: transparent !important;
}

/* 他列のマークは控えめなグレー */
.compare-mark--gray {
  background: transparent !important;
  color: rgba(10, 34, 64, 0.32) !important;
  font-size: 1.4rem !important;
  filter: none !important;
}

/* 「当院」ヘッダー文字 — 既存ゴールドグラデを継続 */
.col-us-clinic-name {
  filter: drop-shadow(0 2px 6px rgba(255, 180, 0, 0.4)) !important;
}

/* mobile: テーブル横スクロール時の調整 */
@media (max-width: 768px) {
  .transplant-compare .table-responsive {
    padding-top: 22px !important;
  }
  .compare-table thead .col-us {
    transform: translateY(-8px) !important;
    padding: 22px 8px 16px !important;
  }
  .compare-table thead .col-us::before {
    font-size: 0.55rem !important;
    padding: 3px 10px !important;
    letter-spacing: 0.22em !important;
  }
  .compare-table .col-us .compare-mark,
  .compare-mark--gold {
    font-size: 1.6rem !important;
  }
}

/* ============================================================
   PHASE C-2 — FAQ セクション 縦バー型エディトリアル
   - カード化 (角丸+影) → 左に4pxアクセントバー + 罫線のみ
   - Q アイコンを大型角形ナンバー風に
   - 開いた時のアクセント背景
   ============================================================ */

.faq-list {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.faq-item {
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(10, 34, 64, 0.08) !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  transition: background 0.2s ease !important;
}

.faq-item:hover {
  background: rgba(245, 200, 66, 0.03) !important;
  box-shadow: none !important;
}

/* 開いている時の左アクセントバー */
.faq-item:has(.faq-question[aria-expanded="true"]) {
  background: rgba(245, 200, 66, 0.05) !important;
  box-shadow: inset 4px 0 0 var(--amber) !important;
}

.faq-question {
  padding: 22px 24px 22px 18px !important;
  gap: 18px !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  line-height: 1.55 !important;
  position: relative !important;
}

/* Q アイコン: 円→角形大型ナンバー */
.faq-q-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 2px solid var(--navy) !important;
  color: var(--navy) !important;
  font-family: 'Inter', 'Noto Serif JP', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  transition: all 0.25s ease !important;
}

/* 開いた時: Q を amber 背景反転 */
.faq-question[aria-expanded="true"] .faq-q-icon {
  background: var(--amber) !important;
  color: #fff !important;
  border-color: var(--amber) !important;
}

.faq-q-text {
  flex: 1 !important;
  font-family: 'Noto Serif JP', serif !important;
}

/* トグル: 大型 + / × アニメーション */
.faq-toggle {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;
  position: relative !important;
  color: transparent !important;
  background: transparent !important;
  transition: transform 0.3s ease !important;
}

.faq-toggle::before,
.faq-toggle::after {
  content: '' !important;
  position: absolute !important;
  background: var(--amber) !important;
  top: 50% !important;
  left: 50% !important;
  transition: transform 0.3s ease !important;
}

.faq-toggle::before {
  width: 16px !important;
  height: 2px !important;
  transform: translate(-50%, -50%) !important;
}

.faq-toggle::after {
  width: 2px !important;
  height: 16px !important;
  transform: translate(-50%, -50%) !important;
}

.faq-question[aria-expanded="true"] .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg) !important;
  opacity: 0 !important;
}

/* Answer: 左パディングを Q アイコン位置に揃え */
.faq-answer {
  padding: 0 24px 22px 74px !important;
  border-top: none !important;
  background: transparent !important;
}

.faq-answer p {
  font-size: 0.95rem !important;
  color: var(--text) !important;
  line-height: 1.95 !important;
  position: relative !important;
}

/* 回答テキストの先頭に A: プレフィックス */
.faq-answer p::before {
  content: 'A. ' !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  color: var(--amber) !important;
  letter-spacing: 0.04em !important;
  margin-right: 4px !important;
}

/* mobile */
@media (max-width: 768px) {
  .faq-question {
    padding: 18px 14px 18px 12px !important;
    gap: 12px !important;
    font-size: 0.95rem !important;
  }
  .faq-q-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }
  .faq-answer {
    padding: 0 14px 20px 56px !important;
  }
}

/* ============================================================
   PHASE C-3 — Pricing カード 非対称・主役強調
   - 3カラム均等 → 1.18fr / 1fr / 1fr の比率変更
   - featured カードを上下に拡張して立体感
   - タイトル罫線を片側のみに変更
   - 月額値にゴールドアクセント
   ============================================================ */

.pricing-cards-lux {
  display: grid !important;
  grid-template-columns: 1.18fr 1fr 1fr !important;
  align-items: stretch !important;
  gap: 16px !important;
  margin: 40px 0 32px !important;
  position: relative !important;
}

/* 全カード共通: 角丸・影・パディングを再調整 */
.pricing-card-lux {
  background: #fff !important;
  border: 1px solid rgba(10, 34, 64, 0.12) !important;
  border-radius: 4px !important;
  padding: 28px 22px 26px !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 0 4px 20px rgba(10, 34, 64, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.pricing-card-lux:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(10, 34, 64, 0.12) !important;
}

/* Featured カード: 上下にはみ出すサイズで主役化 */
.pricing-card-lux--featured {
  background: linear-gradient(165deg, #0f2347 0%, #0a1a3e 100%) !important;
  border: 2px solid var(--amber) !important;
  margin-top: -16px !important;
  margin-bottom: -16px !important;
  padding: 38px 26px 36px !important;
  box-shadow:
    0 18px 48px rgba(10, 34, 64, 0.28),
    0 0 0 1px rgba(201, 162, 39, 0.4) !important;
  z-index: 2 !important;
  position: relative !important;
}

.pricing-card-lux--featured::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber-light) 50%, var(--amber) 100%) !important;
  pointer-events: none !important;
}

.pricing-card-lux--featured:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 28px 64px rgba(10, 34, 64, 0.36),
    0 0 0 1px rgba(201, 162, 39, 0.6) !important;
}

/* タグ: ピル型 → 直線エッジのスタンプ風 */
.pricing-lux-tag {
  display: inline-block !important;
  border-radius: 0 !important;
  padding: 5px 12px !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.28em !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  margin-bottom: 18px !important;
  position: relative !important;
}

.pricing-lux-tag:not(.pricing-lux-tag--sub) {
  background: var(--amber) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.35) !important;
}

.pricing-lux-tag--sub {
  background: transparent !important;
  color: var(--navy) !important;
  border: 1px solid rgba(10, 34, 64, 0.2) !important;
}

/* タイトル: 両側罫線 → 左側のみ + Noto Serif JP */
.pricing-lux-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: var(--navy) !important;
  margin-bottom: 22px !important;
  white-space: nowrap !important;
}

.pricing-card-lux--featured .pricing-lux-title {
  color: #fff !important;
}

.pricing-lux-line {
  display: none !important;
}

.pricing-lux-line--rev {
  flex: 1 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--amber) 0%, transparent 100%) !important;
  display: block !important;
  border-radius: 0 !important;
}

.pricing-card-lux--featured .pricing-lux-line--rev {
  background: linear-gradient(90deg, var(--amber) 0%, transparent 100%) !important;
}

/* 月額値: ゴールドアクセント追加 */
.pricing-lux-monthly {
  align-items: center !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
  position: relative !important;
}

.pricing-lux-monthly-value {
  position: relative !important;
  font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
  letter-spacing: -0.01em !important;
}

.pricing-card-lux--featured .pricing-lux-monthly-value {
  background: linear-gradient(135deg, #ffe066 0%, #f5c842 50%, #ffa000 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 2px 6px rgba(245, 200, 66, 0.35)) !important;
}

.pricing-lux-monthly-label {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.08em !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: var(--text-light) !important;
  text-transform: uppercase !important;
}

.pricing-card-lux--featured .pricing-lux-monthly-label {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* 行ラベル: より控えめに */
.pricing-lux-row {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(10, 34, 64, 0.06) !important;
}

.pricing-card-lux--featured .pricing-lux-row {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* divider: 太めで浮き感 */
.pricing-lux-divider {
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(10, 34, 64, 0.2) 50%, transparent 100%) !important;
  margin: 18px 0 !important;
}

.pricing-card-lux--featured .pricing-lux-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(201, 162, 39, 0.5) 50%, transparent 100%) !important;
}

/* mobile: 非対称解除して縦並び */
@media (max-width: 768px) {
  .pricing-cards-lux {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pricing-card-lux--featured {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 30px 22px 28px !important;
  }
}

/* ============================================================
   FINAL REQUEST PASS 0501
   Visual variety for requested LP sections.
   ============================================================ */

.problem,
.retention,
.solution,
.reasons,
.pricing {
  isolation: isolate !important;
}

.problem .section-title,
.retention .section-title,
.solution .section-title,
.reasons .section-title,
.pricing .section-title {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 24px 22px !important;
  background:
    linear-gradient(transparent 58%, rgba(41, 189, 217, 0.18) 58%),
    linear-gradient(90deg, transparent 0, rgba(201, 162, 39, 0.18) 10%, rgba(201, 162, 39, 0.18) 90%, transparent 100%) !important;
}

.problem .section-title::before,
.retention .section-title::before,
.solution .section-title::before,
.reasons .section-title::before,
.pricing .section-title::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 4px !important;
  width: 104px !important;
  height: 8px !important;
  transform: translateX(-50%) skewX(-24deg) !important;
  background: repeating-linear-gradient(90deg, var(--amber) 0 16px, var(--gold) 16px 28px) !important;
  border-radius: 0 !important;
}

/* Problem: image-backed compact cards and a richer conversion panel. */
.problem .problem-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 auto 36px !important;
}

.problem .problem-item {
  display: grid !important;
  position: relative !important;
  grid-template-columns: 92px 1fr !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: 112px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(10, 34, 64, 0.1) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 28px rgba(10, 34, 64, 0.08) !important;
}

.problem .problem-item-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.92) contrast(1.02) !important;
}

.problem .problem-item-num {
  display: flex !important;
  position: absolute !important;
  left: 76px !important;
  top: 10px !important;
  width: 34px !important;
  height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--navy) !important;
  color: var(--amber-light) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 16px rgba(10, 34, 64, 0.22) !important;
  z-index: 2 !important;
}

.problem .problem-item-caption {
  position: relative !important;
  min-height: 100% !important;
  padding: 18px 16px 16px 24px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 242, 247, 0.92)),
    repeating-linear-gradient(-45deg, transparent 0 8px, rgba(0, 163, 194, 0.05) 8px 10px) !important;
}

.problem .problem-item-caption::before {
  content: '' !important;
  width: 9px !important;
  height: 9px !important;
  left: 10px !important;
  top: 22px !important;
  border: 2px solid var(--gold) !important;
  background: transparent !important;
  border-radius: 50% !important;
}

.problem .problem-item-text {
  display: block !important;
  font-size: 0.88rem !important;
  line-height: 1.75 !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
}

.problem .problem-cta-zone {
  display: grid !important;
  position: relative !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(220px, 0.64fr) !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 48px !important;
  margin-top: 10px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(0, 163, 194, 0.32) !important;
  background:
    linear-gradient(135deg, #061529 0%, #0a2240 54%, #0e4f74 100%) !important;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%) !important;
  box-shadow: 0 24px 60px rgba(10, 34, 64, 0.22) !important;
}

.problem .problem-cta-zone::before {
  content: '' !important;
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 / span 7 !important;
  display: block !important;
  width: 100% !important;
  min-height: 280px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(10, 34, 64, 0.02), rgba(10, 34, 64, 0.24)),
    var(--pcta-img) center / cover no-repeat !important;
  box-shadow: 18px 18px 0 rgba(201, 162, 39, 0.22) !important;
  z-index: 1 !important;
}

.problem .problem-cta-zone::after {
  content: '' !important;
  position: absolute !important;
  inset: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  pointer-events: none !important;
}

.problem .problem-cta-zone > * {
  grid-column: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

.problem .problem-cta-zone-bg-text {
  top: 16px !important;
  left: 24px !important;
  font-size: clamp(3.8rem, 9vw, 7.8rem) !important;
  color: rgba(255, 255, 255, 0.045) !important;
}

.problem .problem-cta-eyebrow {
  width: fit-content !important;
  padding: 5px 12px !important;
  margin: 0 0 10px !important;
  background: var(--amber) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}

.problem .problem-cta-pulse {
  margin: 4px 0 12px !important;
}

.problem .problem-cta-main {
  text-align: left !important;
  color: #fff !important;
  font-size: clamp(1.55rem, 3.5vw, 2.4rem) !important;
  line-height: 1.38 !important;
  margin: 0 !important;
}

.problem .problem-cta-main em {
  color: var(--amber-light) !important;
  font-style: normal !important;
}

.problem .problem-cta-sub {
  max-width: 560px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  text-align: left !important;
  font-size: 0.98rem !important;
  line-height: 2 !important;
  padding-left: 18px !important;
  border-left: 3px solid var(--gold) !important;
}

.problem .problem-cta-btn {
  width: fit-content !important;
  min-width: 300px !important;
  border-radius: 2px !important;
  background: linear-gradient(135deg, var(--amber-light), var(--amber)) !important;
  color: #061529 !important;
  box-shadow: 0 14px 34px rgba(201, 162, 39, 0.28) !important;
}

/* Retention: long body split into readable editorial blocks. */
.retention .retention-body-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr) !important;
  gap: 28px !important;
  padding: 34px !important;
  border: 1px solid rgba(10, 34, 64, 0.12) !important;
  border-left: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 163, 194, 0.1) 0 8px, transparent 8px),
    #fff !important;
  box-shadow: 0 22px 64px rgba(10, 34, 64, 0.08) !important;
}

.retention .retention-text-block {
  display: grid !important;
  gap: 14px !important;
}

.retention .retention-p {
  position: relative !important;
  margin: 0 !important;
  padding: 18px 20px 18px 62px !important;
  background: #f8fbfd !important;
  border: 1px solid rgba(10, 34, 64, 0.08) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
  line-height: 2 !important;
}

.retention .retention-p::before {
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--navy) !important;
  color: var(--amber-light) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.76rem !important;
}

.retention .retention-p:nth-child(1)::before { content: '01' !important; }
.retention .retention-p:nth-child(2)::before { content: '02' !important; }
.retention .retention-p:nth-child(3)::before { content: '03' !important; }

.retention .retention-p--highlight {
  background:
    linear-gradient(135deg, rgba(0, 163, 194, 0.12), rgba(201, 162, 39, 0.08)),
    #fff !important;
  border-color: rgba(0, 163, 194, 0.26) !important;
}

.retention .retention-stats {
  align-self: stretch !important;
  margin: 0 !important;
  padding: 26px !important;
  border-radius: 4px !important;
  background:
    radial-gradient(circle at 80% 12%, rgba(41, 189, 217, 0.28), transparent 34%),
    linear-gradient(160deg, #061529 0%, #0a2240 100%) !important;
  border: 1px solid rgba(201, 162, 39, 0.28) !important;
}

.retention .retention-stat {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 3px !important;
  padding: 18px !important;
}

.retention .retention-stat + .retention-stat {
  margin-top: 16px !important;
}

.retention .retention-stat-label,
.retention .retention-stat-value {
  color: #fff !important;
}

.retention .retention-stat-value--clinic {
  color: var(--amber-light) !important;
  text-shadow: 0 0 18px rgba(201, 162, 39, 0.35) !important;
}

.retention .retention-cta-block {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 82px 1fr !important;
  gap: 20px !important;
  align-items: center !important;
  margin-top: 2px !important;
  padding: 20px 24px !important;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.14), rgba(0, 163, 194, 0.08)) !important;
  border: 1px solid rgba(201, 162, 39, 0.28) !important;
  border-radius: 4px !important;
}

.retention .retention-cta-arrow {
  width: 82px !important;
  height: 54px !important;
  border-radius: 0 !important;
  background: var(--amber) !important;
  color: #fff !important;
  font-size: 1.8rem !important;
  clip-path: polygon(0 0, 74% 0, 100% 50%, 74% 100%, 0 100%, 18% 50%) !important;
}

/* Solution: photo-and-process look without changing content. */
.solution .solution-lead-box {
  display: grid !important;
  position: relative !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: 1px solid rgba(10, 34, 64, 0.14) !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(10, 34, 64, 0.12) !important;
}

.solution .solution-lead-box::before {
  content: '' !important;
  display: block !important;
  position: relative !important;
  inset: auto !important;
  height: clamp(220px, 36vw, 360px) !important;
  background:
    linear-gradient(90deg, rgba(6, 21, 41, 0.78), rgba(6, 21, 41, 0.08)),
    var(--sln-img) center / cover no-repeat !important;
}

.solution .solution-lead-box::after {
  content: 'ROOT REGENERATION' !important;
  position: absolute !important;
  top: 28px !important;
  left: 28px !important;
  z-index: 2 !important;
  padding: 7px 14px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
}

.solution .solution-point-block-v2 {
  display: grid !important;
  grid-template-columns: 76px 1fr !important;
  gap: 20px !important;
  align-items: flex-start !important;
  padding: 26px 34px !important;
  background:
    linear-gradient(90deg, rgba(0, 163, 194, 0.05), transparent 32%),
    #fff !important;
}

.solution .solution-point-divider {
  height: 1px !important;
  margin: 0 34px !important;
  background: linear-gradient(90deg, transparent, rgba(10, 34, 64, 0.16), transparent) !important;
}

.solution .solution-point-badge {
  width: 62px !important;
  height: 62px !important;
  border-radius: 0 !important;
  background: var(--navy) !important;
  color: var(--amber-light) !important;
  box-shadow: 8px 8px 0 rgba(0, 163, 194, 0.16) !important;
}

.solution .solution-point-text-v2 {
  color: var(--text) !important;
  font-size: 1rem !important;
  line-height: 2.05 !important;
}

.solution .solution-point-text-v2 .sln-em {
  padding: 1px 4px !important;
  background: linear-gradient(transparent 60%, rgba(201, 162, 39, 0.22) 60%) !important;
}

.solution .solution-point-text-v2 .sln-em--accent {
  color: var(--navy) !important;
  font-weight: 900 !important;
}

/* Reasons: more editorial and image-led. */
.reasons .reasons-grid {
  display: grid !important;
  gap: 36px !important;
}

.reasons .reason-card-v2,
.reasons .reason-card-v2:nth-child(odd),
.reasons .reason-card-v2:nth-child(even) {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: 390px !important;
  overflow: hidden !important;
  border: 1px solid rgba(10, 34, 64, 0.12) !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(10, 34, 64, 0.1) !important;
}

.reasons .reason-card-v2:nth-child(even) {
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr) !important;
}

.reasons .reason-img-col,
.reasons .reason-card-v2:nth-child(odd) .reason-img-col,
.reasons .reason-card-v2:nth-child(even) .reason-img-col {
  position: relative !important;
  display: block !important;
  min-height: 100% !important;
  order: initial !important;
}

.reasons .reason-img-v2 {
  width: 100% !important;
  height: 100% !important;
  min-height: 390px !important;
  object-fit: cover !important;
}

.reasons .reason-img-col::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, transparent 40%, rgba(6, 21, 41, 0.52)),
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, 0.08) 14px 16px) !important;
  pointer-events: none !important;
}

.reasons .reason-accent-bar {
  width: 76px !important;
  height: 6px !important;
  left: 24px !important;
  top: 24px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  background: var(--amber) !important;
}

.reasons .reason-body-col,
.reasons .reason-card-v2:nth-child(odd) .reason-body-col,
.reasons .reason-card-v2:nth-child(even) .reason-body-col {
  order: initial !important;
  padding: 36px !important;
  border-top: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 163, 194, 0.08), transparent 38%),
    #fff !important;
}

.reasons .reason-body-col::before {
  top: 16px !important;
  right: 22px !important;
  color: rgba(10, 34, 64, 0.045) !important;
  font-size: 9.5rem !important;
}

.reasons .reason-badge-v2 {
  width: fit-content !important;
  margin-bottom: 16px !important;
  padding: 6px 12px !important;
  background: var(--navy) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.reasons .reason-badge-label,
.reasons .reason-badge-num {
  color: #fff !important;
}

.reasons .reason-title-v2 {
  color: var(--navy) !important;
  font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
  line-height: 1.55 !important;
  margin-bottom: 18px !important;
}

.reasons .reason-points-v2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

.reasons .reason-point-v2 {
  justify-content: flex-start !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(0, 163, 194, 0.18) !important;
  background: #f8fbfd !important;
  color: var(--navy) !important;
  border-radius: 2px !important;
  font-size: 0.8rem !important;
}

.reasons .reason-desc-v2 {
  padding-top: 18px !important;
  border-top: 1px solid rgba(10, 34, 64, 0.1) !important;
  color: var(--text) !important;
  font-size: 0.94rem !important;
  line-height: 2.05 !important;
}

/* Pricing: split long campaign into text + image, then keep cards premium. */
.pricing .pricing-campaign-v2 {
  display: grid !important;
  position: relative !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.76fr) !important;
  gap: 30px !important;
  align-items: stretch !important;
  padding: 0 !important;
  min-height: 360px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: 1px solid rgba(201, 162, 39, 0.3) !important;
  background:
    linear-gradient(135deg, #07172d 0%, #0a2240 58%, #11385d 100%) !important;
  box-shadow: 0 24px 70px rgba(10, 34, 64, 0.18) !important;
}

.pricing .pricing-campaign-v2 > div {
  padding: 42px 44px !important;
}

.pricing .pricing-campaign-v2::before {
  content: '' !important;
  position: relative !important;
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 100% !important;
  background:
    linear-gradient(180deg, rgba(6, 21, 41, 0.02), rgba(6, 21, 41, 0.34)),
    var(--price-campaign-img) center / cover no-repeat !important;
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.pricing .pricing-campaign-v2::after {
  content: 'LIMITED CAMPAIGN' !important;
  right: auto !important;
  left: 42px !important;
  bottom: 22px !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.06) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(2.2rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  transform: none !important;
}

.pricing .pricing-campaign-eyebrow {
  width: fit-content !important;
  margin-bottom: 16px !important;
  padding: 6px 12px !important;
  background: var(--amber) !important;
  color: #061529 !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}

.pricing .pricing-campaign-title-v2 {
  color: #fff !important;
  font-size: clamp(1.5rem, 3.3vw, 2.35rem) !important;
  line-height: 1.45 !important;
  text-align: left !important;
  margin-bottom: 18px !important;
}

.pricing .pricing-campaign-sub {
  max-width: 620px !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border-left: 4px solid var(--gold) !important;
  text-align: left !important;
  font-size: 0.95rem !important;
  line-height: 2.05 !important;
}

.pricing .pricing-campaign-guarantee-v2 {
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 18px !important;
  padding: 12px 16px !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: var(--navy) !important;
  box-shadow: 8px 8px 0 rgba(201, 162, 39, 0.22) !important;
}

.pricing .pricing-card-lux {
  border-radius: 0 !important;
}

.pricing .pricing-card-lux::after {
  content: '' !important;
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  width: 42px !important;
  height: 42px !important;
  border-right: 2px solid rgba(0, 163, 194, 0.22) !important;
  border-bottom: 2px solid rgba(0, 163, 194, 0.22) !important;
  pointer-events: none !important;
}

.pricing .pricing-card-lux--featured::after {
  border-color: rgba(201, 162, 39, 0.42) !important;
}

.pricing .pricing-notes-v2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 32px !important;
}

.pricing .pricing-notes-v2 .note-row {
  align-items: flex-start !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 1px solid rgba(10, 34, 64, 0.1) !important;
  border-radius: 2px !important;
  color: var(--text) !important;
  line-height: 1.85 !important;
}

@media (max-width: 900px) {
  .problem .problem-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .problem .problem-cta-zone,
  .retention .retention-body-wrap,
  .pricing .pricing-campaign-v2 {
    grid-template-columns: 1fr !important;
  }

  .problem .problem-cta-zone::before,
  .pricing .pricing-campaign-v2::before {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }

  .retention .retention-cta-block {
    grid-template-columns: 1fr !important;
  }

  .reasons .reason-card-v2,
  .reasons .reason-card-v2:nth-child(odd),
  .reasons .reason-card-v2:nth-child(even) {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .reasons .reason-img-v2 {
    min-height: 260px !important;
  }
}

@media (max-width: 640px) {
  .problem .section-title,
  .retention .section-title,
  .solution .section-title,
  .reasons .section-title,
  .pricing .section-title {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .problem .problem-list {
    grid-template-columns: 1fr !important;
  }

  .problem .problem-item {
    grid-template-columns: 84px 1fr !important;
    min-height: 104px !important;
  }

  .problem .problem-item-num {
    left: 68px !important;
  }

  .problem .problem-cta-zone {
    padding: 32px 22px !important;
    clip-path: none !important;
  }

  .problem .problem-cta-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .retention .retention-body-wrap,
  .solution .solution-point-block-v2,
  .reasons .reason-body-col,
  .pricing .pricing-campaign-v2 > div {
    padding: 24px 20px !important;
  }

  .retention .retention-p {
    padding: 58px 16px 18px !important;
  }

  .solution .solution-point-block-v2 {
    grid-template-columns: 1fr !important;
  }

  .solution .solution-point-divider {
    margin: 0 20px !important;
  }

  .reasons .reason-points-v2,
  .pricing .pricing-notes-v2 {
    grid-template-columns: 1fr !important;
  }

  .pricing .pricing-campaign-v2 {
    min-height: 0 !important;
  }
}

/* ============================================================
   CLIENT ALIGNMENT POLISH 0501-B
   Stronger anti-template details for the requested sections.
   ============================================================ */

.problem .section-eyebrow,
.retention .section-eyebrow,
.solution .section-eyebrow,
.reasons .section-eyebrow,
.pricing .section-eyebrow {
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 6px 12px !important;
  background: #fff !important;
  border: 1px solid rgba(10, 34, 64, 0.12) !important;
  box-shadow: 6px 6px 0 rgba(0, 163, 194, 0.12) !important;
  color: var(--navy) !important;
  opacity: 1 !important;
}

.problem .problem-item::after {
  content: '' !important;
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  width: 26px !important;
  height: 10px !important;
  background:
    linear-gradient(90deg, var(--gold) 0 18px, transparent 18px),
    linear-gradient(45deg, transparent 0 8px, var(--gold) 8px 10px, transparent 10px) !important;
  opacity: 0.45 !important;
}

.problem .problem-list > li:nth-child(2n) .problem-item-caption {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 239, 218, 0.92)),
    repeating-linear-gradient(-45deg, transparent 0 8px, rgba(201, 162, 39, 0.08) 8px 10px) !important;
}

.problem .problem-list > li:nth-child(3n) .problem-item-caption::before {
  border-radius: 0 !important;
  transform: rotate(45deg) !important;
  border-color: var(--amber) !important;
}

.problem .problem-scroll-arrow {
  width: 120px !important;
  height: 44px !important;
  margin: 10px auto 24px !important;
  background: var(--navy) !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

.problem .problem-scroll-chevron {
  border-color: var(--amber-light) !important;
}

.retention .retention-keyword-badge {
  position: relative !important;
  border-radius: 0 !important;
  background: var(--navy) !important;
  color: #fff !important;
  box-shadow: 10px 10px 0 rgba(201, 162, 39, 0.18) !important;
}

.retention .retention-keyword-badge::before,
.retention .retention-keyword-badge::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  width: 34px !important;
  height: 1px !important;
  background: var(--amber) !important;
}

.retention .retention-keyword-badge::before {
  right: calc(100% + 12px) !important;
}

.retention .retention-keyword-badge::after {
  left: calc(100% + 12px) !important;
}

.retention .retention-stats::before {
  content: '82.5%  ->  100%+' !important;
  display: block !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: var(--amber-light) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1.45rem, 3vw, 2.25rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

.retention .retention-p strong,
.retention .retention-cta-body strong {
  color: var(--navy) !important;
  background: linear-gradient(transparent 60%, rgba(201, 162, 39, 0.28) 60%) !important;
}

.solution .solution-point-block-v2 {
  position: relative !important;
}

.solution .solution-point-block-v2::before {
  content: '' !important;
  position: absolute !important;
  left: 64px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(0, 163, 194, 0.34), transparent) !important;
}

.solution .solution-point-block-v2:nth-of-type(4n + 1) {
  background:
    linear-gradient(90deg, rgba(201, 162, 39, 0.1), transparent 34%),
    #fff !important;
}

.solution .solution-point-badge::after {
  content: '' !important;
  position: absolute !important;
  inset: -7px !important;
  border: 1px solid rgba(201, 162, 39, 0.45) !important;
  transform: rotate(6deg) !important;
}

.solution .solution-point-badge {
  position: relative !important;
}

.reasons .reason-card-v2:nth-child(1) .reason-img-col {
  clip-path: polygon(0 0, 96% 0, 86% 100%, 0 100%) !important;
}

.reasons .reason-card-v2:nth-child(2) .reason-img-col {
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%) !important;
}

.reasons .reason-card-v2:nth-child(3) .reason-img-col {
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%) !important;
}

.reasons .reason-point-v2::before {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin-right: 7px !important;
  background:
    linear-gradient(135deg, var(--gold) 0 48%, transparent 48%),
    linear-gradient(315deg, var(--amber) 0 48%, transparent 48%) !important;
  border-radius: 50% !important;
}

.reasons .reason-point-v2 {
  display: flex !important;
  align-items: center !important;
}

.pricing .pricing-campaign-sub br {
  display: block !important;
  content: '' !important;
  margin-top: 12px !important;
}

.pricing .pricing-campaign-v2::before {
  box-shadow: inset 12px 0 0 rgba(201, 162, 39, 0.28) !important;
}

.pricing .pricing-card-lux:nth-child(2) {
  transform: translateY(10px) !important;
}

.pricing .pricing-card-lux:nth-child(3) {
  transform: translateY(22px) !important;
}

.pricing .pricing-card-lux:nth-child(2):hover,
.pricing .pricing-card-lux:nth-child(3):hover {
  transform: translateY(4px) !important;
}

.pricing .pricing-lux-row-value {
  padding: 2px 7px !important;
  background: rgba(0, 163, 194, 0.08) !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-row-value {
  background: rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 900px) {
  .reasons .reason-card-v2:nth-child(1) .reason-img-col,
  .reasons .reason-card-v2:nth-child(2) .reason-img-col,
  .reasons .reason-card-v2:nth-child(3) .reason-img-col {
    clip-path: none !important;
  }

  .pricing .pricing-card-lux:nth-child(2),
  .pricing .pricing-card-lux:nth-child(3),
  .pricing .pricing-card-lux:nth-child(2):hover,
  .pricing .pricing-card-lux:nth-child(3):hover {
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .retention .retention-keyword-badge::before,
  .retention .retention-keyword-badge::after,
  .solution .solution-point-block-v2::before {
    display: none !important;
  }
}

/* ============================================================
   PROBLEM SECTION ROLLBACK 0501-C
   Keep the concern list close to the previous text-list design.
   ============================================================ */

.problem .problem-list {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 820px !important;
  width: 100% !important;
  margin: 40px auto 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.problem .problem-item {
  display: flex !important;
  align-items: flex-start !important;
  min-height: 0 !important;
  padding: 5px 4px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}

.problem .problem-item:hover {
  transform: none !important;
  box-shadow: none !important;
}

.problem .problem-item::after {
  display: none !important;
}

.problem .problem-item-img,
.problem .problem-item-num {
  display: none !important;
}

.problem .problem-item-caption,
.problem .problem-list > li:nth-child(2n) .problem-item-caption {
  position: static !important;
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  gap: 0.36em !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.problem .problem-item-caption::before,
.problem .problem-list > li:nth-child(3n) .problem-item-caption::before {
  content: '・' !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0.03em 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
  color: var(--navy) !important;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem) !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  flex: 0 0 auto !important;
}

.problem .problem-list > li:nth-child(even) .problem-item-caption::before {
  color: #0e7da3 !important;
}

.problem .problem-item-text,
.problem .problem-list > li:nth-child(even) .problem-item-text {
  display: block !important;
  max-width: 100% !important;
  color: var(--navy) !important;
  font-size: clamp(1.06rem, 2.6vw, 1.3rem) !important;
  font-weight: 800 !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.problem .problem-list > li:nth-child(even) .problem-item-text {
  color: #0e7da3 !important;
}

.problem .problem-scroll-arrow {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 8px auto 24px !important;
  padding: 34px 0 8px !important;
  background: transparent !important;
  clip-path: none !important;
}

.problem .problem-scroll-chevron {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  border-right: 6px solid #0e7da3 !important;
  border-bottom: 6px solid #0e7da3 !important;
  transform: rotate(45deg) !important;
  opacity: 0.85 !important;
}

.problem .problem-cta-zone {
  display: block !important;
  position: relative !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: clamp(30px, 6vw, 52px) clamp(20px, 5vw, 48px) !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: 1px solid rgba(0, 163, 194, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(6, 21, 41, 0.94), rgba(10, 34, 64, 0.9)),
    var(--pcta-img) center / cover no-repeat !important;
  clip-path: none !important;
  box-shadow: 0 18px 48px rgba(10, 34, 64, 0.18) !important;
  text-align: center !important;
}

.problem .problem-cta-zone::before {
  content: '' !important;
  position: absolute !important;
  inset: 12px !important;
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.problem .problem-cta-zone::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: linear-gradient(90deg, var(--amber) 0 8px, transparent 8px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.problem .problem-cta-zone > * {
  position: relative !important;
  z-index: 2 !important;
}

.problem .problem-cta-zone-bg-text {
  left: 50% !important;
  top: 18px !important;
  transform: translateX(-50%) !important;
  font-size: clamp(3.2rem, 10vw, 7rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, 0.055) !important;
  pointer-events: none !important;
}

.problem .problem-cta-eyebrow {
  margin: 0 auto 16px !important;
}

.problem .problem-cta-pulse {
  margin: 0 auto 18px !important;
}

.problem .problem-cta-main {
  margin: 0 auto 16px !important;
  max-width: 720px !important;
  text-align: center !important;
  color: #fff !important;
  font-size: clamp(1.45rem, 5vw, 2.25rem) !important;
  line-height: 1.42 !important;
  overflow-wrap: anywhere !important;
}

.problem .problem-cta-sub {
  max-width: 720px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  border-left: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-align: center !important;
  font-size: clamp(0.9rem, 2.8vw, 1rem) !important;
  line-height: 1.9 !important;
  overflow-wrap: anywhere !important;
}

.problem .problem-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  min-width: min(300px, 100%) !important;
  white-space: normal !important;
  line-height: 1.55 !important;
}

@media (max-width: 640px) {
  .problem .problem-list {
    margin-top: 28px !important;
  }

  .problem .problem-item {
    padding: 5px 0 !important;
  }

  .problem .problem-cta-zone {
    padding: 32px 18px !important;
  }

  .problem .problem-cta-btn {
    width: 100% !important;
  }
}

/* ============================================================
   FLOW SECTION REBUILD 0501-D
   Stable, image-led process board. Avoid nth-child overlap.
   ============================================================ */

section.flow.section-pad {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(232, 238, 245, 0.92)),
    radial-gradient(circle at 8% 18%, rgba(0, 163, 194, 0.12), transparent 32%),
    var(--cream) !important;
}

section.flow.section-pad::before {
  content: 'TREATMENT FLOW' !important;
  position: absolute !important;
  top: 42px !important;
  right: -18px !important;
  color: rgba(10, 34, 64, 0.045) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(3.6rem, 10vw, 8.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.flow .flow-steps-v2 {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 34px 28px !important;
  max-width: 1100px !important;
  margin: 18px auto 70px !important;
  padding: 26px 0 0 !important;
  position: relative !important;
}

.flow .flow-steps-v2::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  border: 0 !important;
  background: linear-gradient(180deg, transparent, rgba(10, 34, 64, 0.18), transparent) !important;
  transform: translateX(-50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.flow .flow-steps-v2::after,
.flow .flow-step-row-arrow {
  display: none !important;
}

.flow .flow-step-v2,
.flow .flow-step-v2:nth-child(2n-1),
.flow .flow-step-v2:nth-child(2n) {
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(10, 34, 64, 0.1) !important;
  box-shadow: 0 20px 52px rgba(10, 34, 64, 0.11) !important;
  transform: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  z-index: 1 !important;
}

.flow .flow-step-v2:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 30px 72px rgba(10, 34, 64, 0.16) !important;
}

.flow .flow-step-v2--01,
.flow .flow-step-v2--03 {
  grid-column: 1 / span 6 !important;
}

.flow .flow-step-v2--02,
.flow .flow-step-v2--04 {
  grid-column: 7 / span 6 !important;
}

.flow .flow-step-v2--02,
.flow .flow-step-v2--03 {
  margin-top: 22px !important;
}

.flow .flow-step-v2::before,
.flow .flow-step-v2::after {
  display: none !important;
}

.flow .flow-step-accent {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 8px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--gold), var(--amber)) !important;
  z-index: 4 !important;
}

.flow .flow-step-v2--02 .flow-step-accent,
.flow .flow-step-v2--04 .flow-step-accent {
  left: auto !important;
  right: 0 !important;
}

.flow .flow-step-ghost-num {
  top: -30px !important;
  right: 18px !important;
  bottom: auto !important;
  color: transparent !important;
  -webkit-text-stroke: 1.4px rgba(201, 162, 39, 0.32) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(5.2rem, 10vw, 8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.08em !important;
  z-index: 3 !important;
}

.flow .flow-step-img-wrap {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: var(--cream) !important;
  aspect-ratio: auto !important;
  clip-path: none !important;
}

.flow .flow-step-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  display: block !important;
  transform: none !important;
  clip-path: polygon(0 0, 100% 0, 100% 91%, 0 100%) !important;
}

.flow .flow-step-v2--02 .flow-step-img-wrap img,
.flow .flow-step-v2--04 .flow-step-img-wrap img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 91%) !important;
}

.flow .flow-step-img-overlay {
  position: static !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 14px !important;
  row-gap: 8px !important;
  align-items: center !important;
  padding: 20px 24px 18px 28px !important;
  background:
    linear-gradient(90deg, rgba(0, 163, 194, 0.06), transparent 52%),
    #fff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(10, 34, 64, 0.08) !important;
  box-shadow: none !important;
  z-index: 2 !important;
}

.flow .flow-step-badge-wrap {
  grid-row: 1 / span 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 76px !important;
  height: 76px !important;
  gap: 2px !important;
  background: var(--navy) !important;
  color: #fff !important;
  box-shadow: 8px 8px 0 rgba(0, 163, 194, 0.14) !important;
}

.flow .flow-step-badge {
  padding: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
}

.flow .flow-step-num {
  color: var(--amber-light) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.flow .flow-step-time {
  justify-self: start !important;
  align-self: end !important;
  max-width: 100% !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(0, 163, 194, 0.26) !important;
  border-radius: 0 !important;
  background: rgba(0, 163, 194, 0.08) !important;
  color: #0e7da3 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}

.flow .flow-step-title {
  grid-column: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--navy) !important;
  font-size: clamp(1.08rem, 2.2vw, 1.42rem) !important;
  font-weight: 900 !important;
  line-height: 1.52 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

.flow .flow-step-desc {
  margin: 0 !important;
  padding: 18px 28px 26px !important;
  color: var(--text) !important;
  font-size: 0.94rem !important;
  line-height: 1.95 !important;
  overflow-wrap: anywhere !important;
}

.flow .flow-procedures-v2 {
  border-radius: 0 !important;
  border: 1px solid rgba(201, 162, 39, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(6, 21, 41, 0.96), rgba(10, 34, 64, 0.94)),
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, 0.04) 14px 16px) !important;
}

.flow .flow-procedures-grid {
  gap: 16px !important;
}

.flow .procedure-card-v2 {
  border-radius: 0 !important;
}

.flow .procedure-card-img-wrap {
  aspect-ratio: 16 / 11 !important;
}

@media (max-width: 900px) {
  .flow .flow-steps-v2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 48px !important;
  }

  .flow .flow-steps-v2::before {
    left: 18px !important;
    transform: none !important;
  }

  .flow .flow-step-v2--01,
  .flow .flow-step-v2--02,
  .flow .flow-step-v2--03,
  .flow .flow-step-v2--04 {
    grid-column: 1 !important;
    margin-top: 0 !important;
  }

  .flow .flow-step-img-wrap img,
  .flow .flow-step-v2--02 .flow-step-img-wrap img,
  .flow .flow-step-v2--04 .flow-step-img-wrap img {
    clip-path: none !important;
  }

  .flow .flow-step-img-wrap img {
    min-height: 220px !important;
  }
}

@media (max-width: 560px) {
  .flow .flow-step-img-overlay {
    grid-template-columns: 1fr !important;
    padding: 18px 18px 16px !important;
  }

  .flow .flow-step-badge-wrap {
    width: 68px !important;
    height: 68px !important;
  }

  .flow .flow-step-title {
    grid-column: 1 !important;
  }

  .flow .flow-step-desc {
    padding: 16px 18px 22px !important;
  }

  .flow .flow-step-img-wrap img {
    min-height: 190px !important;
  }
}

/* ============================================================
   LAYOUT CORRECTION 0501-E
   Fix overflow, unwanted left alignment, and text overlap.
   ============================================================ */

/* Retention: readable centered flow, no overflowing comparison headline. */
.retention .retention-body-wrap {
  display: block !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 4vw, 40px) !important;
  background: #fff !important;
  border: 1px solid rgba(10, 34, 64, 0.1) !important;
  border-left: 8px solid var(--gold) !important;
  box-shadow: 0 18px 48px rgba(10, 34, 64, 0.08) !important;
  overflow: hidden !important;
}

.retention .retention-text-block {
  max-width: 780px !important;
  margin: 0 auto 28px !important;
  display: grid !important;
  gap: 14px !important;
}

.retention .retention-p {
  margin: 0 !important;
  padding: 18px 20px 18px 58px !important;
  line-height: 2 !important;
  font-size: clamp(0.92rem, 2vw, 1rem) !important;
  color: var(--text) !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

.retention .retention-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 780px !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.retention .retention-stats::before {
  display: none !important;
}

.retention .retention-stat,
.retention .retention-stat + .retention-stat {
  margin: 0 !important;
  padding: 20px !important;
  min-width: 0 !important;
  background:
    linear-gradient(180deg, rgba(0, 163, 194, 0.06), rgba(255, 255, 255, 0)),
    #f8fbfd !important;
  border: 1px solid rgba(10, 34, 64, 0.1) !important;
  border-radius: 0 !important;
}

.retention .retention-stat--clinic {
  background:
    linear-gradient(180deg, rgba(201, 162, 39, 0.14), rgba(255, 255, 255, 0)),
    #fff !important;
  border-color: rgba(201, 162, 39, 0.34) !important;
}

.retention .retention-stat-label {
  color: var(--navy) !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.retention .retention-stat-value,
.retention .retention-stat-value--clinic {
  color: var(--navy) !important;
  font-size: clamp(2.2rem, 6vw, 3.4rem) !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
  text-shadow: none !important;
}

.retention .retention-stat-value--clinic {
  color: var(--amber) !important;
}

.retention .retention-stat-suffix {
  font-size: 0.38em !important;
  white-space: nowrap !important;
}

.retention .retention-cta-block {
  display: block !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 24px 26px !important;
  text-align: center !important;
  background:
    linear-gradient(135deg, rgba(201, 162, 39, 0.12), rgba(0, 163, 194, 0.08)),
    #fff !important;
  border: 1px solid rgba(201, 162, 39, 0.28) !important;
  border-radius: 0 !important;
}

.retention .retention-cta-arrow {
  display: none !important;
}

.retention .retention-cta-label {
  display: inline-block !important;
  margin: 0 auto 12px !important;
  text-align: center !important;
}

.retention .retention-cta-body {
  margin: 0 auto !important;
  max-width: 680px !important;
  text-align: center !important;
  line-height: 1.95 !important;
  overflow-wrap: anywhere !important;
}

/* Section headings such as Solution should remain centered. */
.solution .section-title,
.retention .section-title,
.pricing .section-title,
.flow .section-title,
.cases .section-title {
  display: block !important;
  width: auto !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.solution .section-title .sln-stat,
.solution .section-title .sln-title-line2,
.solution .section-title .txt-accent {
  display: inline !important;
  text-align: center !important;
}

/* Pricing notes: one note block, not four independent cards. */
.pricing .pricing-notes-v2 {
  display: block !important;
  max-width: 860px !important;
  margin: 28px auto 0 !important;
  padding: 14px 18px !important;
  background: #f8fbfd !important;
  border: 1px solid rgba(10, 34, 64, 0.1) !important;
  border-left: 5px solid var(--gold) !important;
  border-radius: 0 !important;
}

.pricing .pricing-notes-v2 .note-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 9px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(10, 34, 64, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-light) !important;
  font-size: 0.86rem !important;
  line-height: 1.85 !important;
}

.pricing .pricing-notes-v2 .note-row:last-child {
  border-bottom: 0 !important;
}

.pricing .pricing-notes-v2 .note-icon {
  flex: 0 0 auto !important;
  margin-top: 0.28em !important;
}

/* Flow: separate image, meta, and body. No overlay or ghost number collisions. */
.flow .flow-step-v2,
.flow .flow-step-v2:nth-child(2n-1),
.flow .flow-step-v2:nth-child(2n) {
  overflow: hidden !important;
}

.flow .flow-step-ghost-num {
  display: none !important;
}

.flow .flow-step-img-wrap {
  display: block !important;
  overflow: hidden !important;
}

.flow .flow-step-img-wrap img,
.flow .flow-step-v2--02 .flow-step-img-wrap img,
.flow .flow-step-v2--04 .flow-step-img-wrap img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  clip-path: none !important;
}

.flow .flow-step-img-overlay {
  position: relative !important;
  display: block !important;
  padding: 20px 24px 18px !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(10, 34, 64, 0.08) !important;
  box-shadow: none !important;
}

.flow .flow-step-badge-wrap {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  padding: 6px 10px !important;
  background: var(--navy) !important;
  box-shadow: none !important;
}

.flow .flow-step-time {
  display: inline-block !important;
  margin: 0 0 10px 8px !important;
  max-width: calc(100% - 8px) !important;
  vertical-align: middle !important;
}

.flow .flow-step-title {
  display: block !important;
  grid-column: auto !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--navy) !important;
  font-size: clamp(1.08rem, 2.2vw, 1.36rem) !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
}

.flow .flow-step-desc {
  padding: 18px 24px 24px !important;
  line-height: 1.9 !important;
  overflow-wrap: anywhere !important;
}

/* Case study: center the section and remove forced left offset. */
.cases .section-eyebrow--wide,
.cases .section-title {
  text-align: center !important;
}

.cases .case-card {
  max-width: 900px !important;
  margin: 36px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.cases .case-card::before {
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}

.cases .case-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 44px 24px 20px !important;
  text-align: center !important;
}

.cases .case-count,
.cases .case-patient,
.cases .case-footer,
.cases .case-desc {
  text-align: center !important;
}

.cases .case-footer {
  justify-content: center !important;
  padding: 18px 24px 8px !important;
}

.cases .case-desc {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 14px 24px 26px !important;
}

@media (max-width: 760px) {
  .retention .retention-body-wrap {
    border-left-width: 5px !important;
    padding: 22px 16px !important;
  }

  .retention .retention-p {
    padding: 56px 16px 18px !important;
  }

  .retention .retention-stats {
    grid-template-columns: 1fr !important;
  }

  .flow .flow-step-img-overlay {
    padding: 18px 18px 16px !important;
  }

  .flow .flow-step-time {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
  }

  .cases .case-card::before {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    transform: none !important;
    margin-bottom: 8px !important;
  }

  .cases .case-header {
    padding-top: 20px !important;
  }
}

/* ============================================================
   RETENTION SECTION FINAL 0501-F
   Centered title, non-overflow comparison, visible CTA text.
   ============================================================ */

section.retention.section-pad {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%) !important;
}

section.retention.section-pad::before {
  content: 'RETENTION RATE' !important;
  position: absolute !important;
  left: 50% !important;
  top: 36px !important;
  transform: translateX(-50%) !important;
  color: rgba(10, 34, 64, 0.035) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(3rem, 10vw, 8rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.retention .retention-header {
  max-width: 920px !important;
  margin: 0 auto 34px !important;
  text-align: center !important;
}

.retention .section-eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.retention .section-title {
  display: block !important;
  width: auto !important;
  max-width: 920px !important;
  margin: 0 auto 18px !important;
  padding: 0 16px 22px !important;
  text-align: center !important;
  color: var(--navy) !important;
  line-height: 1.55 !important;
}

.retention .section-title::before {
  left: 50% !important;
  right: auto !important;
}

.retention .section-title::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.retention .retention-keyword-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 10px 28px !important;
  border-radius: 0 !important;
  background: var(--navy) !important;
  color: #fff !important;
  box-shadow: 8px 8px 0 rgba(0, 163, 194, 0.12) !important;
  overflow: visible !important;
}

.retention .retention-keyword-badge::before,
.retention .retention-keyword-badge::after {
  display: none !important;
}

.retention .retention-keyword-text {
  color: #fff !important;
  font-size: clamp(1.35rem, 4vw, 2.1rem) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
}

.retention .retention-body-wrap {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: clamp(26px, 4vw, 42px) !important;
  background:
    linear-gradient(90deg, rgba(0, 163, 194, 0.06), transparent 34%),
    #fff !important;
  border: 1px solid rgba(10, 34, 64, 0.1) !important;
  border-top: 5px solid var(--gold) !important;
  border-left: 1px solid rgba(10, 34, 64, 0.1) !important;
  box-shadow: 0 18px 52px rgba(10, 34, 64, 0.09) !important;
  overflow: visible !important;
}

.retention .retention-text-block {
  max-width: 820px !important;
  margin: 0 auto 30px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.retention .retention-p {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 18px 20px 18px 58px !important;
  min-height: 0 !important;
  background: #f8fbfd !important;
  border: 1px solid rgba(10, 34, 64, 0.08) !important;
  color: var(--text) !important;
  font-size: clamp(0.94rem, 2vw, 1rem) !important;
  line-height: 2 !important;
  text-align: left !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
}

.retention .retention-p::before {
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--navy) !important;
  color: var(--gold-light) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
}

.retention .retention-p--highlight {
  background: #fff !important;
  border-color: rgba(0, 163, 194, 0.22) !important;
  box-shadow: inset 5px 0 0 rgba(0, 163, 194, 0.18) !important;
}

.retention .retention-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  max-width: 820px !important;
  margin: 0 auto 28px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

.retention .retention-stat,
.retention .retention-stat + .retention-stat {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(18px, 3vw, 26px) !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #f8fbfd !important;
  border: 1px solid rgba(10, 34, 64, 0.1) !important;
  box-shadow: none !important;
}

.retention .retention-stat--clinic {
  background:
    linear-gradient(180deg, rgba(201, 162, 39, 0.14), transparent),
    #fff !important;
  border-color: rgba(201, 162, 39, 0.38) !important;
}

.retention .retention-stat-label {
  display: block !important;
  min-width: 0 !important;
  margin: 0 0 14px !important;
  color: var(--navy) !important;
  font-size: clamp(0.82rem, 2vw, 0.96rem) !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.retention .retention-stat-bar-wrap {
  width: 100% !important;
  min-width: 0 !important;
  height: 9px !important;
  margin: 0 0 16px !important;
  overflow: hidden !important;
  background: rgba(10, 34, 64, 0.08) !important;
  border-radius: 999px !important;
}

.retention .retention-stat-bar {
  height: 100% !important;
  border-radius: 999px !important;
}

.retention .retention-stat-value,
.retention .retention-stat-value--clinic {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  color: var(--navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(2rem, 7vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  text-align: center !important;
  white-space: nowrap !important;
  letter-spacing: -0.04em !important;
  text-shadow: none !important;
  overflow: visible !important;
}

.retention .retention-stat-value--clinic {
  color: var(--gold) !important;
}

.retention .retention-stat-suffix {
  display: inline-block !important;
  margin-left: 2px !important;
  font-size: 0.36em !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
}

.retention .retention-cta-block {
  display: block !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: clamp(22px, 4vw, 34px) !important;
  background:
    linear-gradient(135deg, rgba(10, 34, 64, 0.96), rgba(10, 34, 64, 0.9)) !important;
  border: 1px solid rgba(201, 162, 39, 0.32) !important;
  box-shadow: 10px 10px 0 rgba(201, 162, 39, 0.14) !important;
  color: #fff !important;
  overflow: visible !important;
  text-align: center !important;
}

.retention .retention-cta-block::before,
.retention .retention-cta-arrow {
  display: none !important;
}

.retention .retention-cta-inner {
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  color: #fff !important;
  overflow: visible !important;
}

.retention .retention-cta-label {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto 14px !important;
  padding: 5px 14px !important;
  background: var(--gold) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: clamp(1rem, 2.8vw, 1.35rem) !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
}

.retention .retention-cta-label::before,
.retention .retention-cta-label::after {
  display: none !important;
}

.retention .retention-cta-body {
  display: block !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(0.96rem, 2.4vw, 1.08rem) !important;
  line-height: 1.95 !important;
  text-align: center !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
}

.retention .retention-cta-body strong {
  color: var(--gold-light) !important;
  background: none !important;
}

@media (max-width: 760px) {
  .retention .section-title {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .retention .retention-body-wrap {
    padding: 22px 16px !important;
  }

  .retention .retention-p {
    padding: 56px 16px 18px !important;
  }

  .retention .retention-p::before {
    left: 16px !important;
    top: 18px !important;
  }

  .retention .retention-stats {
    grid-template-columns: 1fr !important;
  }

  .retention .retention-stat-value,
  .retention .retention-stat-value--clinic {
    font-size: clamp(2.2rem, 13vw, 3.2rem) !important;
  }

  .retention .retention-cta-block {
    box-shadow: none !important;
  }
}

/* ============================================================
   RETENTION SECTION FINAL POLISH 0501-G
   Stronger "retention rate" emphasis, clearer VS comparison,
   and double-frame CTA with guaranteed visible strong text.
   ============================================================ */

.retention .retention-keyword-badge {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: min(360px, 92vw) !important;
  min-height: 96px !important;
  margin: 0 auto !important;
  padding: 18px 24px !important;
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(0, 163, 194, 0.1) 18px 20px, transparent 20px),
    #fff !important;
  border: 1px solid rgba(10, 34, 64, 0.16) !important;
  box-shadow: 12px 12px 0 rgba(10, 34, 64, 0.08) !important;
  color: var(--navy) !important;
}

.retention .retention-keyword-badge::before,
.retention .retention-keyword-badge::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
}

.retention .retention-keyword-badge::before {
  top: 12px !important;
}

.retention .retention-keyword-badge::after {
  bottom: 12px !important;
}

.retention .retention-keyword-text {
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
  font-size: clamp(2.2rem, 8vw, 4rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  text-shadow: 3px 3px 0 rgba(0, 163, 194, 0.12) !important;
}

.retention .retention-stats {
  position: relative !important;
  gap: clamp(46px, 7vw, 72px) !important;
  max-width: 900px !important;
  margin-top: 8px !important;
}

.retention .retention-stats::before {
  content: 'VS' !important;
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 5 !important;
  width: 58px !important;
  height: 58px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: var(--navy) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  box-shadow: 0 0 0 6px #fff, 0 10px 24px rgba(10, 34, 64, 0.18) !important;
}

.retention .retention-stat {
  position: relative !important;
  min-height: 210px !important;
  padding: 26px 24px 24px !important;
  overflow: visible !important;
  background: #f3f6f8 !important;
  border: 1px solid rgba(10, 34, 64, 0.12) !important;
}

.retention .retention-stat--general::before,
.retention .retention-stat--clinic::before {
  display: block !important;
  margin: 0 auto 12px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px 11px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}

.retention .retention-stat--general::before {
  content: 'GENERAL' !important;
  background: rgba(10, 34, 64, 0.08) !important;
  color: var(--navy) !important;
}

.retention .retention-stat--clinic::before {
  content: 'OUR TARGET' !important;
  background: var(--gold) !important;
  color: #fff !important;
}

.retention .retention-stat--clinic {
  background:
    linear-gradient(135deg, rgba(201, 162, 39, 0.16), rgba(0, 163, 194, 0.06)),
    #fff !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 16px 36px rgba(201, 162, 39, 0.12) !important;
}

.retention .retention-stat-label {
  min-height: 3.1em !important;
  margin-bottom: 12px !important;
  font-size: clamp(0.9rem, 2vw, 1.04rem) !important;
}

.retention .retention-stat-value,
.retention .retention-stat-value--clinic {
  font-size: clamp(2.2rem, 6vw, 3.35rem) !important;
  letter-spacing: -0.05em !important;
  white-space: nowrap !important;
  transform: scale(0.96) !important;
  transform-origin: center !important;
}

.retention .retention-stat--clinic .retention-stat-value {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
}

.retention .retention-cta-block {
  position: relative !important;
  max-width: 860px !important;
  padding: clamp(28px, 5vw, 42px) clamp(20px, 5vw, 42px) !important;
  background: #fff !important;
  color: var(--navy) !important;
  border: 2px solid var(--navy) !important;
  box-shadow: 10px 10px 0 rgba(0, 163, 194, 0.12) !important;
}

.retention .retention-cta-block::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 10px !important;
  border: 1px solid rgba(201, 162, 39, 0.72) !important;
  pointer-events: none !important;
}

.retention .retention-cta-inner {
  position: relative !important;
  z-index: 1 !important;
  color: var(--navy) !important;
}

.retention .retention-cta-label {
  background: var(--navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.retention .retention-cta-body {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

.retention .retention-cta-body strong {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  background: linear-gradient(transparent 58%, rgba(229, 62, 62, 0.18) 58%) !important;
  font-weight: 900 !important;
}

/* Case section hard-center pass. */
section.cases.section-pad .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

section.cases.section-pad .case-card {
  width: min(100%, 900px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

section.cases.section-pad .case-card::before {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 12px !important;
  transform: none !important;
}

section.cases.section-pad .case-header {
  width: 100% !important;
  padding: 20px 24px !important;
}

@media (max-width: 760px) {
  .retention .retention-keyword-badge {
    min-height: 82px !important;
    box-shadow: none !important;
  }

  .retention .retention-stats {
    gap: 18px !important;
  }

  .retention .retention-stats::before {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-row: 2 !important;
    margin: -2px auto !important;
    transform: none !important;
  }

  .retention .retention-stat {
    min-height: 0 !important;
  }

  .retention .retention-stat-value,
  .retention .retention-stat-value--clinic {
    transform: none !important;
    font-size: clamp(2.25rem, 12vw, 3.1rem) !important;
  }
}

/* ============================================================
   TITLE STRIPE REMOVAL 0502-A
   Remove striped title rules that overlap double-line headings.
   ============================================================ */

section.section-pad .section-title::before,
.problem .section-title::before,
.retention .section-title::before,
.solution .section-title::before,
.reasons .section-title::before,
.pricing .section-title::before,
.flow .section-title::before,
.cases .section-title::before,
.doctor .section-title::before,
.faq .section-title::before,
.clinic-info .section-title::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

section.section-pad .section-title,
.problem .section-title,
.retention .section-title,
.solution .section-title,
.reasons .section-title,
.pricing .section-title,
.flow .section-title,
.cases .section-title,
.doctor .section-title,
.faq .section-title,
.clinic-info .section-title {
  background-image: none !important;
}

/* ============================================================
   RETENTION COMPARISON READABILITY 0502-B
   Horizontal comparison cards; no vertical text or bar overlap.
   ============================================================ */

.retention .retention-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(44px, 6vw, 72px) !important;
  max-width: 940px !important;
  margin: 0 auto 30px !important;
  align-items: stretch !important;
}

.retention .retention-stats::before {
  width: 56px !important;
  height: 56px !important;
  top: 50% !important;
}

.retention .retention-stat,
.retention .retention-stat + .retention-stat {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 260px !important;
  padding: clamp(24px, 4vw, 36px) !important;
  text-align: center !important;
  overflow: hidden !important;
}

.retention .retention-stat--general {
  background: #f3f7fa !important;
}

.retention .retention-stat--clinic {
  background:
    linear-gradient(180deg, rgba(0, 163, 194, 0.08), rgba(201, 162, 39, 0.08)),
    #fff !important;
}

.retention .retention-stat--general::before,
.retention .retention-stat--clinic::before {
  order: 1 !important;
  margin: 0 auto 14px !important;
}

.retention .retention-stat-label {
  order: 2 !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  color: var(--navy) !important;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.retention .retention-stat-value,
.retention .retention-stat-value--clinic {
  order: 3 !important;
  margin: 0 auto 18px !important;
  color: var(--navy) !important;
  font-size: clamp(2.8rem, 7vw, 4.2rem) !important;
  line-height: 1 !important;
  text-align: center !important;
  letter-spacing: -0.05em !important;
  white-space: nowrap !important;
  transform: none !important;
}

.retention .retention-stat--clinic .retention-stat-value,
.retention .retention-stat-value--clinic {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
}

.retention .retention-stat-suffix {
  font-size: 0.34em !important;
  margin-left: 4px !important;
  letter-spacing: 0 !important;
}

.retention .retention-stat-bar-wrap {
  order: 4 !important;
  width: 100% !important;
  max-width: 280px !important;
  height: 10px !important;
  margin: 0 auto !important;
  position: static !important;
}

.retention .retention-stat-bar {
  display: block !important;
}

@media (max-width: 760px) {
  .retention .retention-stats {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .retention .retention-stats::before {
    width: 48px !important;
    height: 48px !important;
    margin: -2px auto !important;
  }

  .retention .retention-stat,
  .retention .retention-stat + .retention-stat {
    min-height: 0 !important;
    padding: 24px 18px !important;
  }

  .retention .retention-stat-value,
  .retention .retention-stat-value--clinic {
    font-size: clamp(2.5rem, 13vw, 3.5rem) !important;
  }
}

/* ============================================================
   RETENTION HEADER ORIGINALITY 0502-C
   Replace template-like stripe/title box with a custom metric header.
   ============================================================ */

.retention .retention-header {
  position: relative !important;
  max-width: 980px !important;
  margin: 0 auto 44px !important;
  padding: clamp(26px, 5vw, 46px) clamp(18px, 5vw, 52px) !important;
  text-align: center !important;
  background:
    linear-gradient(135deg, rgba(10, 34, 64, 0.96), rgba(10, 34, 64, 0.88)),
    radial-gradient(circle at 15% 20%, rgba(0, 163, 194, 0.24), transparent 34%) !important;
  border: 1px solid rgba(201, 162, 39, 0.28) !important;
  box-shadow: 0 24px 60px rgba(10, 34, 64, 0.16) !important;
  overflow: hidden !important;
}

.retention .retention-header::before {
  content: 'RETENTION' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: rgba(255, 255, 255, 0.055) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(3.4rem, 12vw, 9rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.retention .retention-header::after {
  content: '' !important;
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 18px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.75), transparent) !important;
}

.retention .retention-header > * {
  position: relative !important;
  z-index: 1 !important;
}

.retention .section-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
  padding: 6px 14px !important;
  background: var(--gold) !important;
  border: 0 !important;
  box-shadow: 7px 7px 0 rgba(0, 163, 194, 0.22) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
}

.retention .section-title {
  max-width: 900px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  background: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(1.55rem, 4.4vw, 2.65rem) !important;
  line-height: 1.45 !important;
  text-align: center !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22) !important;
}

.retention .section-title::before,
.retention .section-title::after {
  display: none !important;
  content: none !important;
}

.retention .retention-keyword-badge {
  width: fit-content !important;
  min-width: min(320px, 86vw) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 14px 32px 16px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.98), rgba(238, 250, 252, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  box-shadow: 12px 12px 0 rgba(201, 162, 39, 0.22) !important;
}

.retention .retention-keyword-badge::before {
  content: 'KEY METRIC' !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 6px !important;
  background: none !important;
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.28em !important;
  line-height: 1.2 !important;
}

.retention .retention-keyword-badge::after {
  display: none !important;
  content: none !important;
}

.retention .retention-keyword-text {
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
  font-size: clamp(2.4rem, 7vw, 4.35rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 4px 4px 0 rgba(0, 163, 194, 0.14) !important;
}

@media (max-width: 760px) {
  .retention .retention-header {
    padding: 28px 18px 34px !important;
    margin-bottom: 34px !important;
  }

  .retention .retention-header::before {
    font-size: 4.2rem !important;
  }

  .retention .retention-keyword-badge {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 360px !important;
  }
}

/* ============================================================
   SECTION HEADING CENTER ALIGN 0502-D
   Override editorial left-aligned heading phase across sections.
   ============================================================ */

section.section-pad .section-eyebrow,
section.section-pad .section-eyebrow--wide,
section.section-pad:not(.problem) .section-eyebrow,
section.section-pad:not(.problem) .section-eyebrow--wide {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 14px !important;
  padding: 6px 16px !important;
  text-align: center !important;
}

section.section-pad .section-eyebrow::before,
section.section-pad .section-eyebrow--wide::before,
section.section-pad:not(.problem) .section-eyebrow::before,
section.section-pad:not(.problem) .section-eyebrow--wide::before {
  display: none !important;
  content: none !important;
}

section.section-pad .section-eyebrow::after,
section.section-pad .section-eyebrow--wide::after,
section.section-pad:not(.problem) .section-eyebrow::after,
section.section-pad:not(.problem) .section-eyebrow--wide::after {
  display: none !important;
  content: none !important;
}

section.section-pad .section-title,
section.section-pad:not(.problem) .section-title,
.problem .section-title,
.retention .section-title,
.solution .section-title,
.transplant-compare .section-title,
.reasons .section-title,
.pricing .section-title,
.doctor .section-title,
.flow .section-title,
.cases .section-title,
.faq .section-title,
.clinic-info .section-title {
  display: block !important;
  width: fit-content !important;
  max-width: min(960px, 100%) !important;
  margin: 0 auto 36px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

section.section-pad:not(.problem) .section-title::before,
section.section-pad .section-title::before,
.transplant-compare .section-title::before,
.doctor .section-title::before,
.flow .section-title::before,
.faq .section-title::before,
.clinic-info .section-title::before {
  display: none !important;
  content: none !important;
}

section.section-pad .section-title::after,
section.section-pad:not(.problem) .section-title::after,
.problem .section-title::after,
.retention .section-title::after,
.solution .section-title::after,
.transplant-compare .section-title::after,
.reasons .section-title::after,
.pricing .section-title::after,
.doctor .section-title::after,
.flow .section-title::after,
.cases .section-title::after,
.faq .section-title::after,
.clinic-info .section-title::after {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

section.solution.section-pad .section-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

@media (max-width: 768px) {
  section.section-pad .section-title,
  section.section-pad:not(.problem) .section-title {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   RETENTION HEADER ART DIRECTION 0502-E
   Turn the retention heading into a custom metric panel.
   ============================================================ */

.retention .retention-header {
  position: relative !important;
  isolation: isolate !important;
  max-width: 1040px !important;
  margin: 0 auto 48px !important;
  padding: clamp(42px, 6vw, 70px) clamp(22px, 5vw, 64px) clamp(44px, 6vw, 68px) !important;
  text-align: center !important;
  background:
    linear-gradient(135deg, rgba(6, 24, 46, 0.98) 0%, rgba(10, 34, 64, 0.96) 54%, rgba(7, 54, 78, 0.94) 100%) !important;
  border: 1px solid rgba(0, 163, 194, 0.28) !important;
  box-shadow: 0 28px 64px rgba(10, 34, 64, 0.18) !important;
  overflow: hidden !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 54px) 100%, 0 100%) !important;
}

.retention .retention-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 18px 20px !important;
  z-index: -1 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-bottom: 1px solid rgba(201, 162, 39, 0.38) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 8%, rgba(0, 163, 194, 0.2) 8% 8.4%, transparent 8.4% 91.6%, rgba(201, 162, 39, 0.34) 91.6% 92%, transparent 92%) !important;
  background-size: 48px 48px, 48px 48px, 100% 100% !important;
  pointer-events: none !important;
}

.retention .retention-header::after {
  content: 'RETENTION RATE' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(14px, 3vw, 24px) !important;
  z-index: -1 !important;
  transform: translateX(-50%) !important;
  color: rgba(255, 255, 255, 0.055) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(3.8rem, 12vw, 9.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 0.82 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.retention .retention-header > * {
  position: relative !important;
  z-index: 1 !important;
}

.retention .section-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 auto 24px !important;
  padding: 8px 18px 8px 22px !important;
  background: linear-gradient(90deg, var(--gold) 0 5px, rgba(255, 255, 255, 0.96) 5px 100%) !important;
  border: 0 !important;
  box-shadow: 8px 8px 0 rgba(0, 163, 194, 0.18) !important;
  color: #00a3c2 !important;
  -webkit-text-fill-color: #00a3c2 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.24em !important;
}

.retention .section-eyebrow::before,
.retention .section-eyebrow::after {
  display: none !important;
  content: none !important;
}

.retention .section-title {
  display: block !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;
  background: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(1.75rem, 4.5vw, 2.9rem) !important;
  line-height: 1.48 !important;
  text-align: center !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.24) !important;
}

.retention .section-title::before,
.retention .section-title::after {
  display: none !important;
  content: none !important;
}

.retention .retention-keyword-badge {
  display: inline-grid !important;
  place-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 28px 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.retention .retention-keyword-badge::before {
  content: 'KEY METRIC' !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  background: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.3em !important;
  line-height: 1.2 !important;
}

.retention .retention-keyword-badge::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: min(360px, 76vw) !important;
  height: 10px !important;
  transform: translateX(-50%) skewX(-18deg) !important;
  background: linear-gradient(90deg, var(--gold), #00a3c2) !important;
  box-shadow: 0 10px 24px rgba(0, 163, 194, 0.18) !important;
}

.retention .retention-keyword-text {
  display: block !important;
  position: relative !important;
  color: #ffd35a !important;
  -webkit-text-fill-color: #ffd35a !important;
  font-size: clamp(3rem, 8vw, 5.6rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  text-shadow:
    3px 3px 0 rgba(0, 163, 194, 0.26),
    0 16px 36px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 760px) {
  .retention .retention-header {
    margin-bottom: 36px !important;
    padding: 34px 18px 44px !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 34px) 100%, 0 100%) !important;
  }

  .retention .retention-header::before {
    inset: 12px !important;
    background-size: 34px 34px, 34px 34px, 100% 100% !important;
  }

  .retention .section-eyebrow {
    margin-bottom: 18px !important;
    font-size: 0.68rem !important;
  }

  .retention .section-title {
    margin-bottom: 22px !important;
    font-size: clamp(1.45rem, 7.3vw, 2.05rem) !important;
  }

  .retention .retention-keyword-badge {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ============================================================
   WHITE GRAY BASE TONE 0502-F
   Reduce navy surfaces; keep navy only as a small accent.
   ============================================================ */

body {
  background: #f5f7fa !important;
}

.bg-white,
.bg-light,
.bg-cream,
.problem,
.retention,
.solution,
.reasons,
.pricing,
.transplant-compare,
.doctor,
.flow,
.cases,
.faq,
.clinic-info {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%) !important;
  color: var(--text) !important;
}

.bg-navy {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%) !important;
  color: var(--text) !important;
}

section.solution.section-pad .section-title,
.bg-navy .section-title {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

section.solution.section-pad .section-title .sln-stat {
  color: #0a9fbd !important;
  -webkit-text-fill-color: #0a9fbd !important;
  text-shadow: none !important;
}

section.solution.section-pad .section-title .txt-accent {
  background: linear-gradient(90deg, #c9a227 0%, #00a3c2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.retention .retention-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 250, 0.96)),
    repeating-linear-gradient(-45deg, rgba(0, 163, 194, 0.055) 0 1px, transparent 1px 16px) !important;
  border: 1px solid rgba(0, 163, 194, 0.22) !important;
  box-shadow: 0 22px 54px rgba(33, 51, 68, 0.1) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 44px) 100%, 0 100%) !important;
}

.retention .retention-header::before {
  border-top: 1px solid rgba(0, 163, 194, 0.16) !important;
  border-bottom: 1px solid rgba(201, 162, 39, 0.28) !important;
  background:
    linear-gradient(90deg, rgba(10, 34, 64, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(10, 34, 64, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 8%, rgba(0, 163, 194, 0.22) 8% 8.4%, transparent 8.4% 91.6%, rgba(201, 162, 39, 0.28) 91.6% 92%, transparent 92%) !important;
}

.retention .retention-header::after {
  color: rgba(10, 34, 64, 0.04) !important;
}

.retention .section-title {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  text-shadow: none !important;
}

.retention .retention-keyword-badge::before {
  color: #00a3c2 !important;
  -webkit-text-fill-color: #00a3c2 !important;
}

.retention .retention-keyword-text {
  color: #c9a227 !important;
  -webkit-text-fill-color: #c9a227 !important;
  text-shadow: 3px 3px 0 rgba(0, 163, 194, 0.14) !important;
}

.solution .solution-lead-box {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 252, 0.98)) !important;
  border: 1px solid rgba(0, 163, 194, 0.16) !important;
  box-shadow: 0 22px 54px rgba(33, 51, 68, 0.1) !important;
}

.solution .solution-lead-box::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.1)),
    var(--sln-img) center / cover no-repeat !important;
}

.solution .solution-lead-box::after {
  color: #00a3c2 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-left: 4px solid #c9a227 !important;
}

.solution .solution-point-badge {
  background: #ffffff !important;
  color: #00a3c2 !important;
  border: 1px solid rgba(0, 163, 194, 0.28) !important;
  box-shadow: 7px 7px 0 rgba(201, 162, 39, 0.18) !important;
}

.solution .solution-point-badge span {
  color: #00a3c2 !important;
  -webkit-text-fill-color: #00a3c2 !important;
}

.solution .solution-point-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 163, 194, 0.2), transparent) !important;
}

.solution .solution-point-text-v2 .sln-em--accent {
  color: #00a3c2 !important;
}

.problem .problem-cta-zone {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 243, 247, 0.96)) !important;
  border: 1px solid rgba(0, 163, 194, 0.24) !important;
  box-shadow: 0 22px 54px rgba(33, 51, 68, 0.1) !important;
}

.problem .problem-cta-zone::before {
  border: 1px solid rgba(0, 163, 194, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.2)),
    var(--pcta-img) center / cover no-repeat !important;
  box-shadow: 16px 16px 0 rgba(201, 162, 39, 0.16) !important;
}

.problem .problem-cta-zone::after {
  border: 1px solid rgba(0, 163, 194, 0.14) !important;
}

.problem .problem-cta-main,
.problem .problem-cta-sub {
  color: var(--text) !important;
}

.problem .problem-cta-eyebrow {
  color: #00a3c2 !important;
  -webkit-text-fill-color: #00a3c2 !important;
}

.problem .problem-item-num,
.retention .retention-p::before {
  background: #00a3c2 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 163, 194, 0.18) !important;
}

@media (max-width: 760px) {
  .retention .retention-header {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 30px) 100%, 0 100%) !important;
  }
}

/* ============================================================
   LIGHT CTA READABILITY FIX 0502-G
   Restore readable text after switching the CTA to a light base.
   ============================================================ */

.cta-section {
  background:
    radial-gradient(circle at 82% 12%, rgba(0, 163, 194, 0.1), transparent 30%),
    linear-gradient(180deg, #f8fbfd 0%, #eaf4f7 100%) !important;
  color: var(--text) !important;
}

.cta-section .cta-heading,
.cta-section .cta-sub,
.cta-section .cta-disclaimer {
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.cta-section .text-gold {
  color: #00a3c2 !important;
  -webkit-text-fill-color: #00a3c2 !important;
}

.cta-section .cta-sub {
  opacity: 0.82 !important;
}

.cta-section .cta-features {
  gap: 14px !important;
}

.cta-section .cta-feature {
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(0, 163, 194, 0.12) !important;
  border-left-width: 4px !important;
  box-shadow: 0 10px 28px rgba(33, 51, 68, 0.08) !important;
}

.cta-section .cta-feature-sub {
  color: #4f5b66 !important;
  -webkit-text-fill-color: #4f5b66 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

.cta-section .cta-disclaimer {
  opacity: 0.68 !important;
}

/* ============================================================
   SOLUTION LIGHT READABILITY FIX 0502-H
   Force the new-technology section back to the white-gray tone.
   ============================================================ */

section#solution.solution.section-pad,
section#solution.solution.section-pad.bg-light {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%) !important;
  color: var(--text) !important;
}

section#solution.solution.section-pad::before,
section#solution.solution.section-pad::after {
  display: none !important;
  content: none !important;
}

section#solution.solution.section-pad .section-title,
section#solution.solution.section-pad .section-title .sln-title-line2 {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  text-shadow: none !important;
}

section#solution.solution.section-pad .section-title .sln-stat {
  color: #00a3c2 !important;
  -webkit-text-fill-color: #00a3c2 !important;
  text-shadow: none !important;
}

section#solution.solution.section-pad .section-title .txt-accent {
  background: linear-gradient(90deg, #c9a227 0%, #00a3c2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

section#solution.solution.section-pad .section-eyebrow {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #00a3c2 !important;
  -webkit-text-fill-color: #00a3c2 !important;
  box-shadow: 7px 7px 0 rgba(0, 163, 194, 0.12) !important;
}

/* ============================================================
   RETENTION METRIC PANEL LIGHT 0502-I
   Remove "KEY METRIC" and make the metric header less template-like.
   ============================================================ */

.retention .retention-header {
  position: relative !important;
  isolation: isolate !important;
  max-width: 1040px !important;
  margin: 0 auto 48px !important;
  padding: clamp(42px, 6vw, 66px) clamp(22px, 5vw, 64px) clamp(46px, 6vw, 72px) !important;
  overflow: hidden !important;
  text-align: center !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 250, 0.98)) !important;
  border: 1px solid rgba(0, 163, 194, 0.18) !important;
  box-shadow: 0 24px 60px rgba(33, 51, 68, 0.1) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 44px) 100%, 0 100%) !important;
}

.retention .retention-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border: 0 !important;
  background:
    linear-gradient(118deg, rgba(201, 162, 39, 0.14) 0 29%, transparent 29.2%),
    linear-gradient(118deg, transparent 0 56%, rgba(0, 163, 194, 0.1) 56.2% 72%, transparent 72.2%),
    repeating-linear-gradient(90deg, rgba(10, 34, 64, 0.035) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(10, 34, 64, 0.028) 0 1px, transparent 1px 44px) !important;
  pointer-events: none !important;
}

.retention .retention-header::after {
  content: '' !important;
  position: absolute !important;
  left: clamp(22px, 6vw, 78px) !important;
  right: clamp(22px, 6vw, 78px) !important;
  top: 52% !important;
  bottom: auto !important;
  height: 1px !important;
  transform: none !important;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.62), rgba(0, 163, 194, 0.52), transparent) !important;
  color: transparent !important;
  pointer-events: none !important;
}

.retention .retention-header > * {
  position: relative !important;
  z-index: 1 !important;
}

.retention .section-eyebrow {
  margin: 0 auto 24px !important;
  background:
    linear-gradient(90deg, #00a3c2 0 5px, rgba(255, 255, 255, 0.96) 5px 100%) !important;
  border: 1px solid rgba(0, 163, 194, 0.12) !important;
  color: #00a3c2 !important;
  -webkit-text-fill-color: #00a3c2 !important;
  box-shadow: 8px 8px 0 rgba(0, 163, 194, 0.12) !important;
}

.retention .section-title {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto clamp(34px, 5vw, 48px) !important;
  padding: 0 !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  text-shadow: none !important;
}

.retention .retention-keyword-badge {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: min(560px, 100%) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 22px clamp(16px, 5vw, 48px) 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.retention .retention-keyword-badge::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 8px clamp(18px, 6vw, 58px) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 163, 194, 0.92), rgba(0, 163, 194, 0.92)) center / 100% 8px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(201, 162, 39, 0.26) 8% 24%, transparent 24% 76%, rgba(201, 162, 39, 0.26) 76% 92%, transparent 92%) !important;
  transform: skewX(-14deg) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.retention .retention-keyword-badge::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 6px !important;
  width: min(420px, 78vw) !important;
  height: 11px !important;
  transform: translateX(-50%) skewX(-18deg) !important;
  background: linear-gradient(90deg, #c9a227, #00a3c2 72%, transparent 72%) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.retention .retention-keyword-text {
  display: block !important;
  position: relative !important;
  color: #c9a227 !important;
  -webkit-text-fill-color: #c9a227 !important;
  font-size: clamp(3rem, 8vw, 5.8rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 4px 4px 0 rgba(0, 163, 194, 0.15) !important;
}

@media (max-width: 760px) {
  .retention .retention-header {
    padding: 34px 16px 48px !important;
  }

  .retention .retention-keyword-badge {
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

.retention .retention-keyword-badge::before {
    inset: 8px 12px !important;
  }
}

/* ============================================================
   PROBLEM CTA IMAGE TREATMENT 0502-J
   Make the image a subtle transparent background layer.
   ============================================================ */

.problem .problem-cta-zone {
  position: relative !important;
  display: block !important;
  max-width: 940px !important;
  min-height: 500px !important;
  margin: 0 auto !important;
  padding: clamp(42px, 7vw, 72px) clamp(22px, 6vw, 72px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 163, 194, 0.22) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(239, 247, 250, 0.92)) !important;
  box-shadow: 0 24px 64px rgba(33, 51, 68, 0.1) !important;
  clip-path: none !important;
  text-align: center !important;
}

.problem .problem-cta-zone::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.58) 42%, rgba(255, 255, 255, 0.2) 100%),
    var(--pcta-img) 76% center / cover no-repeat !important;
  box-shadow: none !important;
  opacity: 0.34 !important;
  filter: saturate(0.86) contrast(0.94) brightness(1.08) !important;
  mix-blend-mode: multiply !important;
  clip-path: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.28) 22%, rgba(0, 0, 0, 0.9) 58%, rgba(0, 0, 0, 0.45) 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.28) 22%, rgba(0, 0, 0, 0.9) 58%, rgba(0, 0, 0, 0.45) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.problem .problem-cta-zone::after {
  content: '' !important;
  position: absolute !important;
  inset: 18px !important;
  border: 1px solid rgba(0, 163, 194, 0.12) !important;
  background:
    linear-gradient(120deg, transparent 0 18%, rgba(201, 162, 39, 0.18) 18.2% 18.8%, transparent 19% 100%),
    linear-gradient(120deg, transparent 0 66%, rgba(0, 163, 194, 0.16) 66.2% 66.8%, transparent 67% 100%) !important;
  box-shadow: inset 8px 0 0 rgba(201, 162, 39, 0.7) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.problem .problem-cta-zone > * {
  position: relative !important;
  z-index: 2 !important;
}

.problem .problem-cta-zone-bg-text {
  display: none !important;
}

.problem .problem-cta-pulse {
  opacity: 0.65 !important;
}

.problem .problem-cta-main,
.problem .problem-cta-sub {
  color: var(--text) !important;
  text-shadow: none !important;
}

.problem .problem-cta-main {
  max-width: 680px !important;
}

.problem .problem-cta-sub {
  max-width: 720px !important;
}

@media (max-width: 760px) {
  .problem .problem-cta-zone {
    min-height: 0 !important;
    padding: 38px 18px 44px !important;
  }

  .problem .problem-cta-zone::before {
    opacity: 0.22 !important;
    background-position: center top !important;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 78%) !important;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 78%) !important;
  }

  .problem .problem-cta-zone::after {
    inset: 12px !important;
  }
}

/* ============================================================
   RETENTION METRIC READABILITY 0502-K
   Keep originality, but stop decorative lines from crossing text.
   ============================================================ */

.retention .retention-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 251, 0.98)) !important;
  border: 1px solid rgba(0, 163, 194, 0.18) !important;
  box-shadow: 0 22px 54px rgba(33, 51, 68, 0.09) !important;
}

.retention .retention-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    linear-gradient(118deg, rgba(0, 163, 194, 0.08) 0 16%, transparent 16.2%),
    repeating-linear-gradient(90deg, rgba(10, 34, 64, 0.026) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(10, 34, 64, 0.022) 0 1px, transparent 1px 44px) !important;
  pointer-events: none !important;
}

.retention .retention-header::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 26px !important;
  width: min(420px, 68vw) !important;
  height: 3px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(90deg, transparent, rgba(0, 163, 194, 0.62), rgba(201, 162, 39, 0.6), transparent) !important;
  pointer-events: none !important;
}

.retention .section-title {
  margin-bottom: clamp(28px, 4vw, 38px) !important;
}

.retention .retention-keyword-badge {
  width: min(520px, 100%) !important;
  padding: clamp(18px, 4vw, 30px) clamp(18px, 5vw, 44px) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(0, 163, 194, 0.16) !important;
  box-shadow:
    10px 10px 0 rgba(0, 163, 194, 0.09),
    -10px -10px 0 rgba(201, 162, 39, 0.08) !important;
}

.retention .retention-keyword-badge::before {
  content: '' !important;
  position: absolute !important;
  left: clamp(12px, 4vw, 28px) !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 7px !important;
  height: 64% !important;
  transform: translateY(-50%) skewY(-12deg) !important;
  background: linear-gradient(180deg, #00a3c2, #c9a227) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.retention .retention-keyword-badge::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 13px !important;
  width: min(260px, 58vw) !important;
  height: 6px !important;
  transform: translateX(-50%) skewX(-18deg) !important;
  background: rgba(201, 162, 39, 0.32) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.retention .retention-keyword-text {
  position: relative !important;
  z-index: 1 !important;
  color: #0c9fbd !important;
  -webkit-text-fill-color: #0c9fbd !important;
  font-size: clamp(3rem, 7.4vw, 5.25rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.04em !important;
  text-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.92),
    4px 4px 0 rgba(201, 162, 39, 0.18) !important;
}

@media (max-width: 760px) {
  .retention .retention-header::after {
    bottom: 18px !important;
  }

  .retention .retention-keyword-badge {
    width: 100% !important;
    padding: 18px 16px 22px !important;
  }

  .retention .retention-keyword-badge::before {
    left: 10px !important;
    width: 5px !important;
  }
}

/* ============================================================
   CASE LABEL REMOVAL 0502-L
   Remove large decorative CASE number above case cards.
   ============================================================ */

section.cases.section-pad .case-card::before,
.cases .case-card::before {
  display: none !important;
  content: none !important;
}

section.cases.section-pad .case-header,
.cases .case-header {
  padding-left: 24px !important;
}

@media (max-width: 760px) {
section.cases.section-pad .case-header,
  .cases .case-header {
    padding-left: 18px !important;
  }
}

/* ============================================================
   HERO TOP OFFSET FIX 0502-M
   Prevent the fixed header from covering the first-view image.
   ============================================================ */

.site-header {
  height: var(--header-h) !important;
}

.site-header .header-inner {
  min-height: var(--header-h) !important;
}

.hero.hero--simple {
  padding-top: var(--header-h) !important;
}

.hero.hero--simple .hero-fv-img-wrap {
  margin-top: 0 !important;
}

.admin-bar .site-header {
  top: 32px !important;
}

.admin-bar .hero.hero--simple {
  padding-top: calc(var(--header-h) + 32px) !important;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px !important;
  }

  .admin-bar .hero.hero--simple {
    padding-top: calc(var(--header-h) + 46px) !important;
  }
}

/* ============================================================
   COMPARE MARK CROP FIX 0502-N
   Prevent the gold circle marks from being clipped at the bottom.
   ============================================================ */

.compare-table .compare-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 46px !important;
  height: 52px !important;
  padding: 4px 6px 8px !important;
  margin: 0 8px 0 0 !important;
  line-height: 1.25 !important;
  overflow: visible !important;
  vertical-align: middle !important;
}

.compare-table .col-us .compare-mark,
.compare-table .compare-mark--gold {
  min-width: 58px !important;
  height: 58px !important;
  padding: 4px 6px 10px !important;
  line-height: 1.22 !important;
  overflow: visible !important;
  transform: translateY(1px) !important;
}

.compare-table tbody td {
  overflow: visible !important;
}

/* ============================================================
   SECTION EYEBROW CENTER FIX 0502-O
   Center English labels above section titles only.
   ============================================================ */

section.section-pad .section-eyebrow,
section.section-pad .section-eyebrow--wide,
section.section-pad:not(.problem) .section-eyebrow,
section.section-pad:not(.problem) .section-eyebrow--wide,
.retention .section-eyebrow,
.solution .section-eyebrow,
.transplant-compare .section-eyebrow,
.reasons .section-eyebrow,
.pricing .section-eyebrow,
.doctor .section-eyebrow,
.flow .section-eyebrow,
.cases .section-eyebrow--wide,
.faq .section-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 14px !important;
  text-align: center !important;
}

section.section-pad > .container > .section-eyebrow,
section.section-pad > .container > .section-eyebrow--wide {
  position: relative !important;
  left: auto !important;
  transform: none !important;
}

section.section-pad > .container > .section-eyebrow::before,
section.section-pad > .container > .section-eyebrow--wide::before {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin-right: 10px !important;
  flex: 0 0 auto !important;
}

@media (max-width: 768px) {
  section.section-pad .section-eyebrow,
  section.section-pad .section-eyebrow--wide,
  section.section-pad:not(.problem) .section-eyebrow,
  section.section-pad:not(.problem) .section-eyebrow--wide {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   HEADER REMOVAL + FULL BLEED FV 0502-P
   Remove the fixed header and let the first-view image reach both edges.
   ============================================================ */

.site-header {
  display: none !important;
}

.hero.hero--simple,
.admin-bar .hero.hero--simple {
  padding-top: 0 !important;
}

.hero.hero--simple .hero-fv-img-wrap {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}

.hero.hero--simple .hero-fv-img-wrap picture {
  display: block !important;
  width: 100% !important;
  line-height: 0 !important;
}

.hero.hero--simple .hero-fv-img {
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: top center !important;
}

/* ============================================================
   PRICING FREE NOTE 0506-A
   Add small "now free" note beside the base treatment fee label.
   ============================================================ */

.pricing-lux-free-note {
  display: block !important;
  width: fit-content !important;
  margin-top: 4px !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(0, 163, 194, 0.28) !important;
  background: rgba(0, 163, 194, 0.1) !important;
  color: #00a3c2 !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.03em !important;
}

.pricing-card-lux--featured .pricing-lux-free-note {
  border-color: rgba(255, 224, 102, 0.38) !important;
  background: rgba(255, 224, 102, 0.12) !important;
  color: #ffe066 !important;
}

/* ============================================================
   PRICING FREE NOTE RIGHT ALIGN 0507-B
   Place the "now free" note on the price side.
   ============================================================ */

.pricing-lux-row-value--base {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important;
}

.pricing-lux-row-value--base .pricing-lux-price-num {
  display: block !important;
  line-height: 1 !important;
}

.pricing-lux-row-value--base .pricing-lux-free-note {
  align-self: flex-end !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  text-align: center !important;
}

/* ============================================================
   SP REQUEST PASS 0506-B
   Mobile floating buttons, larger FV, and smaller plain text.
   ============================================================ */

.floating-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.floating-cta-btn--line {
  display: none !important;
  background: linear-gradient(135deg, #06c755 0%, #05a946 100%) !important;
  box-shadow: 0 6px 28px rgba(6, 199, 85, 0.34), 0 2px 8px rgba(0, 0, 0, 0.16) !important;
}

@keyframes floatUp {
  0%   { transform: translateX(-50%) translateY(100px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  .hero.hero--simple .hero-fv-img-wrap {
    height: 70svh !important;
    min-height: 520px !important;
    max-height: 760px !important;
  }

  .hero.hero--simple .hero-fv-img-wrap picture {
    height: 100% !important;
  }

  .hero.hero--simple .hero-fv-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .floating-cta {
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(560px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    transform: translateX(-50%) translateY(100px) !important;
    gap: 8px !important;
  }

  .floating-cta.is-visible {
    transform: translateX(-50%) translateY(0) !important;
  }

  .floating-cta-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .floating-cta-btn--line {
    display: inline-flex !important;
  }

  .floating-cta-arrow {
    display: none !important;
  }

  .floating-cta-btn-text {
    display: block !important;
    min-width: 0 !important;
  }

  section.section-pad {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  section.section-pad p,
  section.section-pad li,
  section.section-pad td,
  section.section-pad dd,
  section.section-pad .retention-p,
  section.section-pad .solution-point-text-v2,
  section.section-pad .reason-desc,
  section.section-pad .doctor-message,
  section.section-pad .case-desc,
  section.section-pad .faq-answer p,
  section.section-pad .cta-sub,
  section.section-pad .clinic-info {
    font-size: 12px !important;
    line-height: 19px !important;
  }
}

@media (max-width: 390px) {
  .hero.hero--simple .hero-fv-img-wrap {
    min-height: 500px !important;
  }

  .floating-cta {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    gap: 6px !important;
  }

  .floating-cta-btn {
    padding: 11px 6px !important;
    font-size: 0.72rem !important;
  }
}

/* ============================================================
   SP REASONS IMAGE CROP 0506-C
   Show the first two reason images from the bottom while keeping faces visible.
   ============================================================ */

@media (max-width: 768px) {
  .reasons .reason-card-v2 .reason-img-col,
  .reasons .reason-card-v2:nth-child(odd) .reason-img-col,
  .reasons .reason-card-v2:nth-child(even) .reason-img-col {
    order: 1 !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
  }

  .reasons .reason-card-v2 .reason-body-col,
  .reasons .reason-card-v2:nth-child(odd) .reason-body-col,
  .reasons .reason-card-v2:nth-child(even) .reason-body-col {
    order: 2 !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
  }

  .reasons .reason-card-v2:nth-child(1) .reason-img-col,
  .reasons .reason-card-v2:nth-child(2) .reason-img-col {
    height: clamp(340px, 108vw, 460px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .reasons .reason-card-v2:nth-child(1) .reason-img-v2,
  .reasons .reason-card-v2:nth-child(2) .reason-img-v2 {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  .reasons .reason-card-v2:nth-child(1) .reason-img-v2 {
    object-position: center bottom !important;
  }

  .reasons .reason-card-v2:nth-child(2) .reason-img-v2 {
    object-position: center bottom !important;
  }
}

/* ============================================================
   PROBLEM BG VISIBILITY 0507-A
   Make the replaced doctor_hero.png visible in the problem section.
   ============================================================ */

section.problem::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: min(58%, 620px) !important;
  height: 100% !important;
  background: var(--prb-bg, none) center top / cover no-repeat !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

section.problem > .container {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  section.problem::after {
    width: 100% !important;
    right: 0 !important;
    background-position: center top !important;
    opacity: 0.1 !important;
  }
}

/* ============================================================
   SP HERO FULL IMAGE 0507-C
   Show the full smartphone FV image without cropping the bottom.
   ============================================================ */

@media (max-width: 768px) {
  .hero.hero--simple .hero-fv-img-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .hero.hero--simple .hero-fv-img-wrap picture {
    height: auto !important;
  }

  .hero.hero--simple .hero-fv-img {
    width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* ============================================================
   PC FLOATING CTA RIGHT 0507-D
   Keep the desktop floating CTA on the right without clipping.
   ============================================================ */

@media (min-width: 769px) {
  .floating-cta {
    left: auto !important;
    right: clamp(20px, 3vw, 48px) !important;
    bottom: 28px !important;
    width: auto !important;
    max-width: calc(100vw - 40px) !important;
    justify-content: flex-end !important;
    transform: translateY(100px) !important;
  }

  .floating-cta.is-visible {
    transform: translateY(0) !important;
    animation: none !important;
  }

  .floating-cta-btn {
    max-width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  .floating-cta-btn--line {
    display: none !important;
  }
}

/* ============================================================
   SHINWA BLUE TONE + GOTHIC TYPE 0511-A
   Shift the LP to a clinic-like blue/white tone inspired by Shinwa Clinic.
   ============================================================ */

:root {
  --shinwa-deep: #00327f;
  --shinwa-blue: #005bbb;
  --shinwa-mid: #0072ce;
  --shinwa-sky: #54b9e8;
  --shinwa-pale: #eaf6ff;
  --shinwa-pale-2: #f5fbff;
  --shinwa-line: #b9def3;
  --shinwa-text: #1c2e45;
  --navy: #00449d;
  --navy-dark: #002d73;
  --gold: #005bbb;
  --gold-light: #54b9e8;
  --amber: #0072ce;
  --amber-light: #8fd3f4;
  --base: #f5fbff;
  --cream: #eaf6ff;
  --cream-alt: #dff1fb;
  --gray-light: #eef8ff;
  --text: #1c2e45;
  --text-light: #52677f;
  --red: #0072ce;
  --border: #b9def3;
  --shadow: 0 6px 22px rgba(0, 91, 187, 0.08);
  --shadow-lg: 0 16px 44px rgba(0, 91, 187, 0.14);
  --font: 'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

body,
button,
input,
textarea,
select,
.btn,
.section-title,
.section-eyebrow,
.reason-title-v2,
.reason-badge-v2,
.reason-badge-label,
.reason-badge-num,
.retention-keyword-text,
.pricing-lux-title,
.pricing-lux-row-value,
.pricing-lux-monthly-value,
.case-heading,
.doctor-message-heading,
.flow-step-title,
.faq-question,
.floating-cta-btn {
  font-family: var(--font) !important;
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(84, 185, 232, 0.14), transparent 32%),
    var(--base) !important;
  color: var(--text) !important;
}

.bg-navy,
.cta-section,
.cta-bottom,
.solution-lead-box,
.pricing-card-lux--featured,
.doctor-quote {
  background: linear-gradient(135deg, var(--shinwa-deep) 0%, var(--shinwa-blue) 62%, var(--shinwa-mid) 100%) !important;
  color: #fff !important;
}

.bg-cream,
.bg-light,
.bg-white,
section.problem,
section.reasons,
section.flow,
section.faq,
section.access {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(234, 246, 255, 0.94)),
    var(--shinwa-pale) !important;
}

.section-title,
.reason-title-v2,
.retention .section-title,
.solution .section-title,
.pricing .section-title,
.doctor .section-title,
.faq .section-title {
  color: var(--shinwa-text) !important;
  -webkit-text-fill-color: var(--shinwa-text) !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
}

.section-eyebrow,
.problem .problem-cta-eyebrow,
.retention .section-eyebrow,
.solution .section-eyebrow,
.reasons .section-eyebrow,
.pricing .section-eyebrow {
  background: #fff !important;
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
  border: 1px solid var(--shinwa-line) !important;
  box-shadow: 8px 8px 0 rgba(84, 185, 232, 0.18) !important;
}

.section-title::after,
.reason-accent-bar,
.pricing-lux-line,
.flow-step-line,
.doctor-message-heading::after {
  background: linear-gradient(90deg, var(--shinwa-blue), var(--shinwa-sky)) !important;
}

.txt-accent,
.text-red,
.text-gold,
.sln-stat,
.sln-em--accent,
.retention-p strong,
.solution .solution-point-text-v2 .sln-em--accent,
section#solution.solution.section-pad .section-title .txt-accent,
section#solution.solution.section-pad .section-title .sln-stat {
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
  background: none !important;
  text-shadow: none !important;
}

.btn-gold,
.btn.btn-gold,
.btn-hero-cta-main,
.problem .problem-cta-btn,
.floating-cta-btn--reserve,
.pricing-cta,
.case-footer .btn {
  background: linear-gradient(135deg, var(--shinwa-blue) 0%, var(--shinwa-mid) 56%, var(--shinwa-sky) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 30px rgba(0, 91, 187, 0.24) !important;
  text-shadow: none !important;
}

.btn-gold:hover,
.btn.btn-gold:hover,
.btn-hero-cta-main:hover,
.problem .problem-cta-btn:hover,
.floating-cta-btn--reserve:hover {
  box-shadow: 0 16px 42px rgba(0, 91, 187, 0.32) !important;
}

.problem-item,
.retention-p,
.retention .retention-body-wrap,
.retention .retention-header,
.solution-point-block-v2,
.reason-card-v2,
.pricing-card-lux,
.pricing-campaign-v2,
.case-card,
.doctor-message-wrap,
.faq-item,
.access-info-card,
.clinic-info-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--shinwa-line) !important;
  box-shadow: 0 16px 42px rgba(0, 91, 187, 0.09) !important;
}

.problem-item-num,
.reason-badge-v2,
.pricing-lux-tag,
.case-label,
.faq-q-icon,
.flow-step-num,
.compare-mark--gold {
  background: var(--shinwa-blue) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: var(--shinwa-blue) !important;
}

.reason-point-v2,
.pricing-lux-row,
.pricing-lux-free-note,
.compare-table th,
.compare-table .table-head-cell {
  background: var(--shinwa-pale-2) !important;
  border-color: var(--shinwa-line) !important;
  color: var(--shinwa-text) !important;
}

.reason-point-dot,
.hero-cta-dot,
.problem-check-icon,
.pricing-note--check::before,
.pricing-features li::before {
  background: var(--shinwa-sky) !important;
  color: var(--shinwa-blue) !important;
  box-shadow: 0 0 10px rgba(84, 185, 232, 0.42) !important;
}

.pricing-lux-row-value,
.pricing-lux-monthly-value,
.retention-rate-value,
.retention-keyword-text,
.compare-mark,
.case-stats strong {
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
  text-shadow: none !important;
}

.pricing-card-lux--featured .pricing-lux-row-value,
.pricing-card-lux--featured .pricing-lux-title,
.pricing-card-lux--featured .pricing-lux-free-note {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.pricing-card-lux--featured .pricing-lux-row,
.pricing-card-lux--featured .pricing-lux-free-note {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}

.floating-cta-btn--line {
  background: linear-gradient(135deg, #06c755 0%, #05a946 100%) !important;
}

/* ============================================================
   JAPANESE LINE BREAK CONTROL 0511-B
   Keep CTA text from splitting in unnatural places on mobile.
   ============================================================ */

.hero-cta-lead,
.btn-hero-cta-main,
.problem .problem-cta-btn,
.floating-cta-btn,
.btn-gold,
.btn.btn-gold {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
}

.hero-cta-lead {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  column-gap: 0.15em !important;
  row-gap: 0.16em !important;
  text-wrap: balance !important;
}

.hero-cta-lead-phrase,
.btn-hero-cta-text > span {
  display: inline-block !important;
  white-space: nowrap !important;
}

.btn-hero-cta-main {
  max-width: min(100%, calc(100vw - 36px)) !important;
}

.btn-hero-cta-text {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 0.08em !important;
  row-gap: 0.08em !important;
  max-width: 100% !important;
}

@media (max-width: 390px) {
  .btn-hero-cta-main {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ============================================================
   MEDICAL BLUE NO-NAVY PASS 0512-A
   Remove remaining dark navy surfaces and keep the site blue/white/pale-cyan.
   ============================================================ */

:root {
  --shinwa-deep: #0067b1;
  --shinwa-blue: #0074c8;
  --shinwa-mid: #1594d2;
  --shinwa-sky: #72c9ee;
  --shinwa-pale: #edf8ff;
  --shinwa-pale-2: #f7fbfd;
  --shinwa-line: #b8e0f4;
  --shinwa-text: #173650;
  --navy: #0074c8;
  --navy-dark: #0067b1;
  --gold: #0074c8;
  --gold-light: #72c9ee;
  --amber: #1594d2;
  --amber-light: #a7def5;
  --base: #f7fbfd;
  --cream: #edf8ff;
  --cream-alt: #e2f4fc;
  --gray-light: #f2f8fb;
  --text: #173650;
  --text-light: #557086;
  --border: #b8e0f4;
}

.hero-cta-block,
.bg-navy,
.cta-section,
.cta-bottom,
section.bg-navy {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(237, 248, 255, 0.96)),
    repeating-linear-gradient(-45deg, rgba(0, 116, 200, 0.045) 0 1px, transparent 1px 18px) !important;
  color: var(--shinwa-text) !important;
  border-top: 1px solid var(--shinwa-line) !important;
  border-bottom: 1px solid var(--shinwa-line) !important;
}

.hero-cta-block-stripe,
.cta-bottom::before {
  background:
    repeating-linear-gradient(-45deg, rgba(0, 116, 200, 0.05) 0 1px, transparent 1px 20px) !important;
}

.hero-cta-eyebrow,
.hero-cta-lead,
.hero-cta-trust-item,
.bg-navy .section-title,
.cta-section .cta-heading,
.cta-section .cta-sub {
  color: var(--shinwa-text) !important;
  -webkit-text-fill-color: var(--shinwa-text) !important;
  text-shadow: none !important;
}

.hero-cta-eyebrow {
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
}

.btn-hero-cta-main,
.problem .problem-cta-btn,
.btn-gold,
.btn.btn-gold,
.floating-cta-btn--reserve {
  background: linear-gradient(135deg, #008ad3 0%, #20b4e4 55%, #72d6f4 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(0, 116, 200, 0.22) !important;
}

.pricing .pricing-campaign-v2 {
  border: 1px solid var(--shinwa-line) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 248, 255, 0.98) 100%) !important;
  box-shadow: 0 22px 56px rgba(0, 116, 200, 0.12) !important;
}

.pricing .pricing-campaign-v2::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 116, 200, 0.12)),
    var(--price-campaign-img) center / cover no-repeat !important;
  border-left: 1px solid var(--shinwa-line) !important;
}

.pricing .pricing-campaign-v2::after {
  color: rgba(0, 116, 200, 0.08) !important;
}

.pricing .pricing-campaign-eyebrow {
  background: var(--shinwa-blue) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.pricing .pricing-campaign-title-v2 {
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
  text-shadow: none !important;
}

.pricing .pricing-campaign-sub {
  color: var(--shinwa-text) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border-left: 4px solid var(--shinwa-sky) !important;
}

.pricing .pricing-campaign-guarantee-v2 {
  background: #fff !important;
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
  box-shadow: 8px 8px 0 rgba(114, 201, 238, 0.22) !important;
}

.flow .flow-procedures-v2 {
  border: 1px solid var(--shinwa-line) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 248, 255, 0.98)),
    repeating-linear-gradient(-45deg, rgba(0, 116, 200, 0.04) 0 1px, transparent 1px 16px) !important;
  box-shadow: 0 22px 56px rgba(0, 116, 200, 0.12) !important;
}

.flow .flow-procedures-heading,
.flow-procedures-heading {
  color: var(--shinwa-text) !important;
  -webkit-text-fill-color: var(--shinwa-text) !important;
  text-shadow: none !important;
}

.flow .flow-procedures-icon {
  background: rgba(114, 201, 238, 0.18) !important;
  border-color: var(--shinwa-line) !important;
  color: var(--shinwa-blue) !important;
}

.flow .procedure-card-v2 {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--shinwa-line) !important;
  box-shadow: 0 14px 34px rgba(0, 116, 200, 0.1) !important;
}

.flow .procedure-card-num {
  color: rgba(0, 116, 200, 0.15) !important;
  -webkit-text-fill-color: rgba(0, 116, 200, 0.15) !important;
}

.flow .procedure-card-title {
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
}

.flow .procedure-card-desc {
  color: var(--shinwa-text) !important;
}

.flow .procedure-arrow-v2 svg path,
.flow-step-arrow svg path {
  stroke: var(--shinwa-blue) !important;
}

.pricing-card-lux--featured,
.doctor-quote,
.solution-lead-box {
  background: linear-gradient(135deg, #0074c8 0%, #1594d2 60%, #72c9ee 100%) !important;
}

/* ============================================================
   GOTHIC TYPE ENFORCEMENT 0512-B
   Override older serif-specific rules and keep the LP basically gothic.
   ============================================================ */

html body,
html body *:not(svg):not(path),
html body [class][class][class],
html body [class][class][class]::before,
html body [class][class][class]::after,
html body [class][class][class][class],
html body [class][class][class][class]::before,
html body [class][class][class][class]::after {
  font-family: var(--font) !important;
}

.section-title,
.section-eyebrow,
.hero-cta-lead,
.problem-cta-main,
.retention-keyword-text,
.retention-p,
.solution .section-title,
.solution-point-text-v2,
.reason-title-v2,
.reason-desc-v2,
.pricing-campaign-title-v2,
.pricing-campaign-sub,
.pricing-lux-title,
.pricing-lux-row-label,
.pricing-lux-row-value,
.pricing-lux-monthly-value,
.case-heading,
.case-label,
.doctor-quote,
.doctor-quote::before,
.doctor-message-heading,
.doctor-message,
.flow-step-title,
.flow-step-desc,
.flow-procedures-heading,
.procedure-card-title,
.procedure-card-desc,
.faq-question,
.faq-answer,
.access-info,
.clinic-info {
  font-family: var(--font) !important;
}

/* ============================================================
   FLOW SOFT BLUE TONE 0512-C
   Soften step-card blues to match a lighter clinic color tone.
   ============================================================ */

.flow .flow-step-v2,
.flow .flow-step-v2:nth-child(2n-1),
.flow .flow-step-v2:nth-child(2n) {
  border-color: var(--shinwa-line) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 14px 34px rgba(0, 116, 200, 0.08) !important;
}

.flow .flow-step-accent,
.flow .flow-step-v2--02 .flow-step-accent,
.flow .flow-step-v2--04 .flow-step-accent {
  width: 6px !important;
  background: linear-gradient(180deg, #7bcdf1, #c9edf9) !important;
  opacity: 0.86 !important;
}

.flow .flow-step-img-overlay {
  background:
    linear-gradient(90deg, rgba(237, 248, 255, 0.92), rgba(255, 255, 255, 0.98)) !important;
  border-bottom: 1px solid rgba(184, 224, 244, 0.86) !important;
}

.flow .flow-step-badge-wrap,
.flow-step-img-overlay .flow-step-badge-wrap {
  background: #eaf6ff !important;
  border: 1px solid #9ed7f2 !important;
  color: var(--shinwa-blue) !important;
  box-shadow: none !important;
}

.flow .flow-step-badge,
.flow-step-img-overlay .flow-step-badge {
  color: #4d93bd !important;
  -webkit-text-fill-color: #4d93bd !important;
  letter-spacing: 0.16em !important;
}

.flow .flow-step-num,
.flow-step-img-overlay .flow-step-num {
  display: inline-block !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #0074c8 !important;
  -webkit-text-fill-color: #0074c8 !important;
  text-shadow: none !important;
}

.flow .flow-step-time,
.flow-step-img-overlay .flow-step-time {
  background: #f4fbff !important;
  border-color: #a8dff4 !important;
  color: #277fae !important;
  -webkit-text-fill-color: #277fae !important;
}

.flow .flow-step-title,
.flow-step-img-overlay .flow-step-title {
  color: #176b9d !important;
  -webkit-text-fill-color: #176b9d !important;
  text-shadow: none !important;
}

.flow .flow-step-desc {
  color: #2e465d !important;
}

/* ============================================================
   PRICING CARD CONTRAST FIX 0512-D
   Keep all pricing text readable on the lighter medical-blue theme.
   ============================================================ */

.pricing .pricing-card-lux,
.pricing .pricing-card-lux--featured {
  background: rgba(255, 255, 255, 0.98) !important;
  color: var(--shinwa-text) !important;
  border: 1px solid var(--shinwa-line) !important;
}

.pricing .pricing-card-lux--featured {
  border-top: 4px solid var(--shinwa-blue) !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-title,
.pricing .pricing-card-lux .pricing-lux-title {
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
  text-shadow: none !important;
}

.pricing .pricing-card-lux .pricing-lux-row,
.pricing .pricing-card-lux--featured .pricing-lux-row {
  background: #f4fbff !important;
  border-color: #c9e9f7 !important;
}

.pricing .pricing-card-lux .pricing-lux-row-label,
.pricing .pricing-card-lux--featured .pricing-lux-row-label,
.pricing .pricing-card-lux .pricing-lux-monthly-label,
.pricing .pricing-card-lux--featured .pricing-lux-monthly-label,
.pricing .pricing-card-lux .pricing-lux-note,
.pricing .pricing-card-lux--featured .pricing-lux-note {
  color: #52677f !important;
  -webkit-text-fill-color: #52677f !important;
}

.pricing .pricing-card-lux .pricing-lux-row-value,
.pricing .pricing-card-lux--featured .pricing-lux-row-value,
.pricing .pricing-card-lux .pricing-lux-monthly-value,
.pricing .pricing-card-lux--featured .pricing-lux-monthly-value {
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
  text-shadow: none !important;
}

.pricing .pricing-card-lux .pricing-lux-free-note,
.pricing .pricing-card-lux--featured .pricing-lux-free-note {
  background: #eaf6ff !important;
  border-color: #a8dff4 !important;
  color: var(--shinwa-blue) !important;
  -webkit-text-fill-color: var(--shinwa-blue) !important;
}

.pricing .pricing-lux-row-value--crossed span,
.pricing .pricing-card-lux--featured .pricing-lux-row-value--crossed span {
  color: #7aaed6 !important;
  -webkit-text-fill-color: #7aaed6 !important;
  opacity: 1 !important;
}

.pricing .pricing-lux-row-value--crossed span::after {
  background: #7aaed6 !important;
}

.pricing .pricing-lux-divider,
.pricing .pricing-card-lux--featured .pricing-lux-divider {
  background: linear-gradient(90deg, transparent, #c9e9f7, transparent) !important;
}

/* ============================================================
   REASON SOFT BLUE TONE 0512-E
   Reduce the heavy blue blocks in reason cards.
   ============================================================ */

.reasons .reason-card-v2,
.reasons .reason-card-v2:nth-child(odd),
.reasons .reason-card-v2:nth-child(even) {
  border-color: var(--shinwa-line) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 14px 36px rgba(0, 116, 200, 0.08) !important;
}

.reasons .reason-body-col,
.reasons .reason-card-v2:nth-child(odd) .reason-body-col,
.reasons .reason-card-v2:nth-child(even) .reason-body-col {
  background:
    linear-gradient(90deg, rgba(237, 248, 255, 0.86), rgba(255, 255, 255, 0.98) 42%) !important;
}

.reasons .reason-badge-v2 {
  background: #eaf6ff !important;
  border: 1px solid #9ed7f2 !important;
  color: var(--shinwa-blue) !important;
  box-shadow: none !important;
}

.reasons .reason-badge-label {
  color: #4d93bd !important;
  -webkit-text-fill-color: #4d93bd !important;
}

.reasons .reason-badge-num {
  color: #0074c8 !important;
  -webkit-text-fill-color: #0074c8 !important;
  text-shadow: none !important;
}

.reasons .reason-title-v2 {
  color: #173650 !important;
  -webkit-text-fill-color: #173650 !important;
  text-shadow: none !important;
}

.reasons .reason-point-v2 {
  background: #f7fbfd !important;
  border-color: #b8e0f4 !important;
  color: #176b9d !important;
  -webkit-text-fill-color: #176b9d !important;
  box-shadow: none !important;
}

.reasons .reason-point-v2::before {
  background: #eaf6ff !important;
  border-color: #9ed7f2 !important;
}

.reasons .reason-point-dot {
  background: #72c9ee !important;
  box-shadow: 0 0 8px rgba(114, 201, 238, 0.42) !important;
}

.reasons .reason-desc-v2 {
  color: #2e465d !important;
  border-top-color: #d9eef8 !important;
}

.reasons .reason-body-col::before {
  color: rgba(0, 116, 200, 0.055) !important;
  -webkit-text-stroke-color: rgba(0, 116, 200, 0.08) !important;
}

/* ============================================================
   COMPARE TABLE VISIBILITY FIX 0512-F
   Keep marks and best-choice header visible in the light blue theme.
   ============================================================ */

.transplant-compare .compare-table thead .col-us {
  background:
    linear-gradient(180deg, #eaf6ff 0%, #dff3fc 100%) !important;
  color: var(--shinwa-text) !important;
  -webkit-text-fill-color: var(--shinwa-text) !important;
  border: 1px solid #9ed7f2 !important;
  border-bottom: 3px solid #72c9ee !important;
  box-shadow: 0 12px 28px rgba(0, 116, 200, 0.1) !important;
}

.transplant-compare .compare-table thead .col-us::before {
  background: #0074c8 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 116, 200, 0.2) !important;
}

.transplant-compare .col-us-clinic-name {
  color: #0074c8 !important;
  -webkit-text-fill-color: #0074c8 !important;
  filter: none !important;
  text-shadow: none !important;
}

.transplant-compare .compare-table tbody td.col-us {
  background: linear-gradient(180deg, rgba(234, 246, 255, 0.72), rgba(247, 251, 253, 0.9)) !important;
  border-left: 2px solid #72c9ee !important;
  border-right: 2px solid #72c9ee !important;
  color: #176b9d !important;
  -webkit-text-fill-color: #176b9d !important;
}

.transplant-compare .compare-table tbody tr:last-child td.col-us {
  border-bottom: 3px solid #72c9ee !important;
}

.transplant-compare .compare-table .compare-mark,
.transplant-compare .compare-table .col-us .compare-mark,
.transplant-compare .compare-table .compare-mark--gold,
.transplant-compare .compare-table .compare-mark--gray {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 2.2em !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 10px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  color: #0074c8 !important;
  -webkit-text-fill-color: #0074c8 !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  transform: none !important;
}

.transplant-compare .compare-table .col-us .compare-mark,
.transplant-compare .compare-table .compare-mark--gold {
  color: #f3bd22 !important;
  -webkit-text-fill-color: #f3bd22 !important;
  font-size: 1.85rem !important;
}

.transplant-compare .compare-table .compare-mark--gray {
  color: #0074c8 !important;
  -webkit-text-fill-color: #0074c8 !important;
  opacity: 0.88 !important;
}

/* ============================================================
   MEDICAL BLUE REBALANCE 0512-G
   Bring back enough medical blue without returning to dark navy.
   ============================================================ */

.hero-cta-block {
  background:
    linear-gradient(90deg, #0074c8 0 18%, #1594d2 18% 42%, #72c9ee 42% 66%, transparent 66%) left bottom / 100% 7px no-repeat,
    linear-gradient(135deg, rgba(232, 247, 255, 0.96) 0%, rgba(247, 251, 253, 0.98) 58%, rgba(213, 240, 252, 0.94) 100%) !important;
  border-top: 1px solid #9ed7f2 !important;
  border-bottom: 1px solid #72c9ee !important;
}

.hero-cta-block-stripe {
  background:
    repeating-linear-gradient(-45deg, rgba(0, 116, 200, 0.075) 0 1px, transparent 1px 20px) !important;
}

.hero-cta-eyebrow {
  color: #0074c8 !important;
  -webkit-text-fill-color: #0074c8 !important;
}

.hero-cta-lead,
.hero-cta-trust-item {
  color: #173650 !important;
  -webkit-text-fill-color: #173650 !important;
}

.btn-hero-cta-main,
.problem .problem-cta-btn,
.btn-gold,
.btn.btn-gold,
.floating-cta-btn--reserve {
  background: linear-gradient(135deg, #0067b1 0%, #0074c8 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}

.reasons .reason-body-col,
.reasons .reason-card-v2:nth-child(odd) .reason-body-col,
.reasons .reason-card-v2:nth-child(even) .reason-body-col {
  background:
    linear-gradient(90deg, #0074c8 0 7px, rgba(232, 247, 255, 0.88) 7px 28%, rgba(255, 255, 255, 0.98) 52%) !important;
}

.reasons .reason-badge-v2 {
  background: linear-gradient(135deg, #0074c8 0%, #1594d2 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 116, 200, 0.18) !important;
}

.reasons .reason-badge-label,
.reasons .reason-badge-num {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}

.reasons .reason-title-v2 {
  color: #173650 !important;
  -webkit-text-fill-color: #173650 !important;
}

.reasons .reason-point-v2 {
  background: #eef8ff !important;
  border-color: #8fd3f4 !important;
  color: #0067b1 !important;
  -webkit-text-fill-color: #0067b1 !important;
}

.reasons .reason-point-v2::before {
  background: #0074c8 !important;
  border-color: #0074c8 !important;
}

.reasons .reason-point-dot {
  background: #1594d2 !important;
  box-shadow: 0 0 8px rgba(21, 148, 210, 0.36) !important;
}

.reasons .reason-desc-v2 {
  color: #2e465d !important;
}

/* ============================================================
   COMPARE HEADER CONTRAST FIX 0513-A
   Use white text on the medical-blue clinic header.
   ============================================================ */

.transplant-compare .compare-table thead .col-us {
  background: linear-gradient(180deg, #0074c8 0%, #0067b1 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #72c9ee !important;
  border-bottom-color: #72c9ee !important;
  text-shadow: none !important;
}

.transplant-compare .compare-table thead .col-us,
.transplant-compare .compare-table thead .col-us * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.transplant-compare .col-us-clinic-name {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  filter: none !important;
  text-shadow: none !important;
}

.transplant-compare .compare-table thead .col-us::before {
  background: #173650 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ============================================================
   FLOW STEP NUMBER VISIBILITY FIX 0513-B
   Keep STEP numbers readable on the medical-blue badge.
   ============================================================ */

.flow .flow-step-badge-wrap,
.flow .flow-step-img-overlay .flow-step-badge-wrap,
.flow-step-img-overlay .flow-step-badge-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 6px 10px !important;
  background: #eaf6ff !important;
  border: 1px solid #8fd3f4 !important;
  color: #0067b1 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.flow .flow-step-badge-wrap .flow-step-badge,
.flow .flow-step-img-overlay .flow-step-badge,
.flow-step-img-overlay .flow-step-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  color: #277fae !important;
  -webkit-text-fill-color: #277fae !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.flow .flow-step-badge-wrap .flow-step-num,
.flow .flow-step-img-overlay .flow-step-num,
.flow-step-img-overlay .flow-step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.1em !important;
  height: 2.1em !important;
  padding: 0 0.34em !important;
  border: 1px solid #0067b1 !important;
  border-radius: 2px !important;
  background: #0067b1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif !important;
  font-size: 1.24rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  opacity: 1 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 10px rgba(0, 103, 177, 0.16) !important;
  overflow: visible !important;
}

.flow .flow-step-badge-wrap .flow-step-num::before,
.flow .flow-step-badge-wrap .flow-step-num::after,
.flow .flow-step-img-overlay .flow-step-num::before,
.flow .flow-step-img-overlay .flow-step-num::after,
.flow-step-img-overlay .flow-step-num::before,
.flow-step-img-overlay .flow-step-num::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   COMPARE MARK SYMBOL VISIBILITY FIX 0513-C
   Show comparison marks as readable symbols, not filled blocks.
   ============================================================ */

.transplant-compare .compare-table tbody .compare-mark,
.transplant-compare .compare-table tbody .col-us .compare-mark,
.transplant-compare .compare-table tbody .compare-mark--gold,
.transplant-compare .compare-table tbody .compare-mark--gray {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 2.2em !important;
  min-width: 2.2em !important;
  height: 2.2em !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  color: #0074c8 !important;
  -webkit-text-fill-color: #0074c8 !important;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif !important;
  font-size: 1.58rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

.transplant-compare .compare-table tbody .col-us .compare-mark,
.transplant-compare .compare-table tbody .compare-mark--gold {
  color: #b47a00 !important;
  -webkit-text-fill-color: #b47a00 !important;
  font-size: 1.84rem !important;
}

.transplant-compare .compare-table tbody .compare-mark::before,
.transplant-compare .compare-table tbody .compare-mark::after,
.transplant-compare .compare-table tbody .compare-mark--gold::before,
.transplant-compare .compare-table tbody .compare-mark--gold::after,
.transplant-compare .compare-table tbody .compare-mark--gray::before,
.transplant-compare .compare-table tbody .compare-mark--gray::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   COMPARE CLINIC HEADER TEXT FIX 0513-D
   Keep the lower copy readable inside the blue best-choice header.
   ============================================================ */

html body .transplant-compare table.compare-table thead tr th.col-us {
  background: linear-gradient(180deg, #006fc1 0%, #005ea8 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 46, 92, 0.28) !important;
}

html body .transplant-compare table.compare-table thead tr th.col-us,
html body .transplant-compare table.compare-table thead tr th.col-us * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body .transplant-compare table.compare-table thead tr th.col-us .col-us-clinic-name {
  color: #ffd24a !important;
  -webkit-text-fill-color: #ffd24a !important;
  text-shadow: 0 2px 3px rgba(0, 46, 92, 0.24) !important;
}

/* ============================================================
   BODY TEXT COLOR RESTORE 0513-F
   Restore normal copy from medical-blue tint to neutral text.
   ============================================================ */

:root {
  --shinwa-text: #1a1a1a;
  --text: #1a1a1a;
  --text-light: #555555;
}

body,
main,
p,
li,
td,
dd,
dt,
.problem-text,
.problem-item-text,
.retention-p,
.retention-body-wrap,
.solution-point-text-v2,
.reason-desc-v2,
.flow-step-desc,
.doctor-message,
.doctor-message p,
.faq-answer,
.faq-answer p,
.clinic-info-card,
.access-info-card,
.pricing-lux-row-label,
.pricing-lux-note,
.pricing-notes-v2,
.pricing-notes-v2 .note-row,
.compare-table tbody td {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

.text-muted,
.pricing-lux-small,
.pricing-lux-monthly-label,
.pricing-disclaimer,
.step-desc,
.doctor-credentials li,
.clinic-hours-note {
  color: #555555 !important;
  -webkit-text-fill-color: #555555 !important;
}

.section-title,
.reason-title-v2,
.pricing-lux-title,
.flow-step-title,
.faq-question,
.doctor-message-heading,
.case-heading {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

.bg-navy,
.bg-navy *,
.cta-section,
.cta-section *,
.pricing-card-lux--featured,
.pricing-card-lux--featured *,
.btn,
.btn *,
.btn-gold,
.btn-gold *,
.btn-hero-cta-main,
.btn-hero-cta-main *,
.floating-cta-btn,
.floating-cta-btn *,
.reason-badge-v2,
.reason-badge-v2 *,
.flow-step-num,
.transplant-compare .compare-table thead .col-us,
.transplant-compare .compare-table thead .col-us * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.pricing-card-lux--featured .pricing-lux-row-value,
.pricing-card-lux--featured .pricing-lux-monthly-value,
.pricing-card-lux--featured .pricing-lux-free-note,
.transplant-compare .compare-table thead .col-us .col-us-clinic-name {
  color: #ffd24a !important;
  -webkit-text-fill-color: #ffd24a !important;
}

.section-eyebrow,
.problem .problem-cta-eyebrow,
.retention .section-eyebrow,
.solution .section-eyebrow,
.reasons .section-eyebrow,
.pricing .section-eyebrow,
.flow .section-eyebrow,
.doctor .section-eyebrow,
.faq .section-eyebrow {
  -webkit-text-fill-color: currentColor !important;
}

/* ============================================================
   DECORATIVE GHOST TEXT RESTORE 0513-G
   Keep large background letters/numbers pale, not solid black.
   ============================================================ */

.faq::before,
section.flow.section-pad::before,
.pricing .pricing-campaign-v2::after,
.retention::before,
section.retention.section-pad::before,
.retention .retention-header::before,
.retention .retention-header::after,
.flow .flow-step-ghost-num,
.flow-step-v2 .flow-step-ghost-num,
.retention .retention-p::before,
.reason-body-col::before {
  color: rgba(10, 34, 64, 0.045) !important;
  -webkit-text-fill-color: rgba(10, 34, 64, 0.045) !important;
  text-shadow: none !important;
}

.reason-body-col::before {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-color: rgba(10, 34, 64, 0.08) !important;
}

.pricing .pricing-campaign-v2::after {
  color: rgba(255, 255, 255, 0.1) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.1) !important;
}

.retention .retention-header::before {
  color: rgba(255, 255, 255, 0.055) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.055) !important;
}

.retention::before,
section.retention.section-pad::before {
  color: rgba(10, 34, 64, 0.045) !important;
  -webkit-text-fill-color: rgba(10, 34, 64, 0.045) !important;
}

.doctor-quote::before,
.doctor-quote::after {
  color: rgba(245, 251, 255, 0.46) !important;
  -webkit-text-fill-color: rgba(245, 251, 255, 0.46) !important;
  text-shadow: none !important;
}

/* ============================================================
   SOLUTION TITLE GRADIENT RESTORE 0513-H
   Restore gradient emphasis inside the new-technology title.
   ============================================================ */

section#solution.solution.section-pad .section-title .sln-stat,
section#solution.solution.section-pad .section-title .txt-accent {
  background: linear-gradient(180deg, #36c7ee 0%, #0074c8 52%, #005ea8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

section#solution.solution.section-pad .section-title .txt-accent {
  position: relative !important;
  display: inline !important;
  padding-bottom: 6px !important;
  background: linear-gradient(90deg, #0097a7 0%, #0074c8 46%, #2f8a76 78%, #c99721 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

section#solution.solution.section-pad .section-title .txt-accent::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 7px !important;
  background:
    linear-gradient(90deg, #0097a7 0%, #0074c8 50%, #c99721 100%) 0 0 / 100% 2px no-repeat,
    linear-gradient(90deg, #c99721 0%, #67d4dc 48%, #0074c8 100%) 0 100% / 100% 2px no-repeat !important;
  pointer-events: none !important;
}

/* ============================================================
   PRICING MERIT CONTRAST FIX 0513-I
   Restore contrast and add warm accents beyond medical blue.
   ============================================================ */

.pricing .pricing-card-lux {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #b8e0f4 !important;
  box-shadow: 0 18px 44px rgba(0, 65, 120, 0.1) !important;
}

.pricing .pricing-card-lux:not(.pricing-card-lux--featured)::before {
  background: #0074c8 !important;
}

.pricing .pricing-card-lux--featured {
  background:
    linear-gradient(180deg, rgba(255, 210, 74, 0.08), transparent 34%),
    linear-gradient(155deg, #173650 0%, #0067b1 58%, #1594d2 100%) !important;
  border: 1px solid rgba(255, 210, 74, 0.54) !important;
  border-top: 4px solid #ffd24a !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 24px 56px rgba(0, 65, 120, 0.24) !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-tag {
  background: linear-gradient(135deg, #ffd24a 0%, #c99721 100%) !important;
  color: #173650 !important;
  -webkit-text-fill-color: #173650 !important;
  box-shadow: 0 8px 18px rgba(201, 151, 33, 0.28) !important;
}

.pricing .pricing-card-lux:not(.pricing-card-lux--featured) .pricing-lux-tag {
  background: #0074c8 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.pricing .pricing-card-lux:nth-child(3) .pricing-lux-tag {
  background: linear-gradient(135deg, #0aa0b8 0%, #0074c8 100%) !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 40, 84, 0.28) !important;
}

.pricing .pricing-card-lux:not(.pricing-card-lux--featured) .pricing-lux-title {
  color: #173650 !important;
  -webkit-text-fill-color: #173650 !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-row {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

.pricing .pricing-card-lux:not(.pricing-card-lux--featured) .pricing-lux-row {
  background: #eef8ff !important;
  border-color: #c9e9f7 !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-row-label,
.pricing .pricing-card-lux--featured .pricing-lux-monthly-label,
.pricing .pricing-card-lux--featured .pricing-lux-note {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

.pricing .pricing-card-lux:not(.pricing-card-lux--featured) .pricing-lux-row-label,
.pricing .pricing-card-lux:not(.pricing-card-lux--featured) .pricing-lux-monthly-label,
.pricing .pricing-card-lux:not(.pricing-card-lux--featured) .pricing-lux-note {
  color: #33475b !important;
  -webkit-text-fill-color: #33475b !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-row-value,
.pricing .pricing-card-lux--featured .pricing-lux-monthly-value {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 40, 84, 0.24) !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-monthly-value {
  color: #ffd24a !important;
  -webkit-text-fill-color: #ffd24a !important;
}

.pricing .pricing-card-lux:not(.pricing-card-lux--featured) .pricing-lux-row-value,
.pricing .pricing-card-lux:not(.pricing-card-lux--featured) .pricing-lux-monthly-value {
  color: #0074c8 !important;
  -webkit-text-fill-color: #0074c8 !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-free-note {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 210, 74, 0.68) !important;
  color: #173650 !important;
  -webkit-text-fill-color: #173650 !important;
}

.pricing .pricing-card-lux .pricing-lux-row-value--crossed span {
  color: #7899b4 !important;
  -webkit-text-fill-color: #7899b4 !important;
  opacity: 1 !important;
}

.pricing .pricing-card-lux--featured .pricing-lux-row-value--crossed span {
  color: rgba(255, 255, 255, 0.56) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.56) !important;
}

.pricing .pricing-card-lux .pricing-lux-row-value--crossed span::after {
  background: currentColor !important;
}

/* ============================================================
   HEADER CONTRAST FIX 0513-J
   Keep header text readable on the medical-blue bar.
   ============================================================ */

.site-header,
.site-header .header-inner {
  background: linear-gradient(90deg, #0067b1 0%, #0074c8 56%, #1594d2 100%) !important;
}

.site-header,
.site-header *,
.site-header a,
.site-header .header-logo,
.site-header .logo-text,
.site-header nav,
.site-header nav *,
.site-header .menu,
.site-header .menu *,
.site-header .nav,
.site-header .nav * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}

.site-header .header-logo {
  gap: 10px !important;
}

.site-header .logo-text {
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.site-header .btn-header,
.site-header .btn.btn-header,
.site-header .btn-gold.btn-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 255, 0.94)) !important;
  border: 2px solid rgba(255, 210, 74, 0.86) !important;
  color: #0067b1 !important;
  -webkit-text-fill-color: #0067b1 !important;
  box-shadow: 0 10px 26px rgba(0, 65, 120, 0.18), inset 0 -2px 0 rgba(255, 210, 74, 0.28) !important;
  text-shadow: none !important;
}

.site-header .btn-header *,
.site-header .btn.btn-header *,
.site-header .btn-gold.btn-header * {
  color: #0067b1 !important;
  -webkit-text-fill-color: #0067b1 !important;
}

.site-header .btn-header:hover {
  background: #ffd24a !important;
  border-color: #fff !important;
  color: #173650 !important;
  -webkit-text-fill-color: #173650 !important;
}

/* ============================================================
   DOCTOR QUOTE CONTRAST FIX 0513-K
   Keep quote text white on the blue gradient panel.
   ============================================================ */

.doctor-quote,
blockquote.doctor-quote {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 46, 92, 0.28) !important;
}

.doctor-quote *,
blockquote.doctor-quote * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.doctor-quote::before,
.doctor-quote::after,
blockquote.doctor-quote::before,
blockquote.doctor-quote::after {
  color: rgba(245, 251, 255, 0.46) !important;
  -webkit-text-fill-color: rgba(245, 251, 255, 0.46) !important;
  text-shadow: none !important;
}

/* ============================================================
   FLOW COLOR VARIATION FIX 0513-L
   Add step-by-step color rhythm beyond repeated medical blue.
   ============================================================ */

.flow .flow-step-v2--01 {
  --flow-accent: #0074c8;
  --flow-accent-2: #36c7ee;
  --flow-title: #0067b1;
  --flow-soft: #eef8ff;
  --flow-border: #b8e0f4;
  --flow-shadow: rgba(0, 116, 200, 0.14);
}

.flow .flow-step-v2--02 {
  --flow-accent: #0097a7;
  --flow-accent-2: #67d4dc;
  --flow-title: #08737d;
  --flow-soft: #effafa;
  --flow-border: #a9e2e6;
  --flow-shadow: rgba(0, 151, 167, 0.14);
}

.flow .flow-step-v2--03 {
  --flow-accent: #c99721;
  --flow-accent-2: #ffd24a;
  --flow-title: #7a5600;
  --flow-soft: #fff8e2;
  --flow-border: #f0d78a;
  --flow-shadow: rgba(201, 151, 33, 0.16);
}

.flow .flow-step-v2--04 {
  --flow-accent: #2f8a76;
  --flow-accent-2: #80d6bd;
  --flow-title: #276f60;
  --flow-soft: #effaf6;
  --flow-border: #b9dfd4;
  --flow-shadow: rgba(47, 138, 118, 0.14);
}

.flow .flow-step-v2,
.flow .flow-step-v2:nth-child(2n-1),
.flow .flow-step-v2:nth-child(2n) {
  background:
    linear-gradient(90deg, var(--flow-soft, #eef8ff) 0%, rgba(255, 255, 255, 0.98) 42%, #fff 100%) !important;
  border-color: var(--flow-border, #b8e0f4) !important;
  border-left: 6px solid var(--flow-accent, #0074c8) !important;
  box-shadow: 0 20px 52px var(--flow-shadow, rgba(0, 116, 200, 0.12)) !important;
}

.flow .flow-step-v2:hover {
  box-shadow: 0 30px 72px var(--flow-shadow, rgba(0, 116, 200, 0.18)) !important;
}

.flow .flow-step-v2 .flow-step-accent {
  background: linear-gradient(180deg, var(--flow-accent, #0074c8), var(--flow-accent-2, #36c7ee)) !important;
}

.flow .flow-step-v2 .flow-step-img-overlay {
  background:
    linear-gradient(90deg, var(--flow-soft, #eef8ff) 0%, rgba(255, 255, 255, 0.98) 70%) !important;
  border-bottom-color: var(--flow-border, #b8e0f4) !important;
}

.flow .flow-step-v2 .flow-step-badge-wrap {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--flow-border, #b8e0f4) !important;
}

.flow .flow-step-v2 .flow-step-badge {
  color: var(--flow-title, #0067b1) !important;
  -webkit-text-fill-color: var(--flow-title, #0067b1) !important;
}

.flow .flow-step-v2 .flow-step-num {
  background: linear-gradient(135deg, var(--flow-accent, #0074c8), var(--flow-accent-2, #36c7ee)) !important;
  border-color: var(--flow-accent, #0074c8) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.flow .flow-step-v2--03 .flow-step-num {
  background: linear-gradient(135deg, #ffd24a 0%, #c99721 100%) !important;
  border-color: #c99721 !important;
  color: #173650 !important;
  -webkit-text-fill-color: #173650 !important;
}

.flow .flow-step-v2 .flow-step-time {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--flow-border, #b8e0f4) !important;
  color: var(--flow-title, #0067b1) !important;
  -webkit-text-fill-color: var(--flow-title, #0067b1) !important;
}

.flow .flow-step-v2 .flow-step-title {
  color: var(--flow-title, #0067b1) !important;
  -webkit-text-fill-color: var(--flow-title, #0067b1) !important;
}

.flow .flow-step-v2 .flow-step-desc {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* ============================================================
   SOLUTION ACCENT GRADIENT VARIATION 0513-M
   Give only 毛根再生注射 a distinct medical-tone gradient.
   ============================================================ */
section#solution.solution.section-pad .section-title .txt-accent {
  background: linear-gradient(90deg, #006f7c 0%, #0074c8 42%, #276f60 72%, #9a6a00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

section#solution.solution.section-pad .section-title .txt-accent::after {
  background:
    linear-gradient(90deg, #0097a7 0%, #0074c8 42%, #2f8a76 72%, #c99721 100%) 0 0 / 100% 2px no-repeat,
    linear-gradient(90deg, #c99721 0%, #2f8a76 34%, #0074c8 70%, #0097a7 100%) 0 100% / 100% 2px no-repeat !important;
}

/* ============================================================
   SOLUTION POINT NUMBER CONTRAST FIX 0514-A
   Keep the 01/02/03 badges readable on the pale card background.
   ============================================================ */
.solution .solution-point-badge {
  background: linear-gradient(135deg, #0067b1 0%, #007fa8 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 7px 7px 0 rgba(201, 162, 39, 0.18), 0 14px 28px rgba(0, 103, 177, 0.18) !important;
}

.solution .solution-point-badge span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 46, 92, 0.28) !important;
}

.solution .solution-point-badge::after {
  border-color: rgba(201, 162, 39, 0.52) !important;
}

/* ============================================================
   PROBLEM LIST COLOR RHYTHM RESTORE 0514-B
   Bring back the earlier blue/teal/gold feel without changing copy.
   ============================================================ */
.problem .section-title {
  color: #0067b1 !important;
  -webkit-text-fill-color: #0067b1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.problem .problem-list > li:nth-child(1) .problem-item-text,
.problem .problem-list > li:nth-child(1) .problem-item-caption::before {
  color: #00449d !important;
  -webkit-text-fill-color: #00449d !important;
}

.problem .problem-list > li:nth-child(2) .problem-item-text,
.problem .problem-list > li:nth-child(2) .problem-item-caption::before {
  color: #00707e !important;
  -webkit-text-fill-color: #00707e !important;
}

.problem .problem-list > li:nth-child(3) .problem-item-text,
.problem .problem-list > li:nth-child(3) .problem-item-caption::before {
  color: #7a5600 !important;
  -webkit-text-fill-color: #7a5600 !important;
}

.problem .problem-list > li:nth-child(4) .problem-item-text,
.problem .problem-list > li:nth-child(4) .problem-item-caption::before {
  color: #0067b1 !important;
  -webkit-text-fill-color: #0067b1 !important;
}

.problem .problem-list > li:nth-child(5) .problem-item-text,
.problem .problem-list > li:nth-child(5) .problem-item-caption::before {
  color: #276f60 !important;
  -webkit-text-fill-color: #276f60 !important;
}

.problem .problem-list > li:nth-child(6) .problem-item-text,
.problem .problem-list > li:nth-child(6) .problem-item-caption::before {
  color: #173650 !important;
  -webkit-text-fill-color: #173650 !important;
}

/* ============================================================
   SOLUTION POINT NUMBER FORCE CONTRAST 0514-C
   Stronger override for the 01/02/03 badges in the solution copy.
   ============================================================ */
html body section#solution.solution .solution-lead-box .solution-point-block-v2 .solution-point-badge {
  background-color: #0067b1 !important;
  background-image: linear-gradient(135deg, #005bbb 0%, #007fa8 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

html body section#solution.solution .solution-lead-box .solution-point-block-v2 .solution-point-badge,
html body section#solution.solution .solution-lead-box .solution-point-block-v2 .solution-point-badge span,
html body section#solution.solution .solution-lead-box .solution-point-block-v2 .solution-point-badge * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 46, 92, 0.32) !important;
  opacity: 1 !important;
}

/* ============================================================
   FOOTER CTA REMOVE 0514-D
   Hide only the footer reservation button.
   ============================================================ */
.site-footer .footer-cta {
  display: none !important;
}

/* ============================================================
   FOOTER BROKEN LOGO ICON REMOVE 0514-E
   Hide only the missing image icon before the footer clinic name.
   ============================================================ */
.site-footer .footer-logo .logo-img {
  display: none !important;
}

/* ============================================================
   RETENTION PARAGRAPH NUMBER CONTRAST 0514-F
   Keep the 01/02/03 paragraph labels readable.
   ============================================================ */
html body section#retention.retention .retention-text-block .retention-p::before {
  background-color: #005bbb !important;
  background-image: linear-gradient(135deg, #005bbb 0%, #007fa8 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 46, 92, 0.32) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  box-shadow: 0 8px 18px rgba(0, 91, 187, 0.22) !important;
}

/* ============================================================
   PRICING CAMPAIGN TITLE IMPACT 0514-G
   Make the campaign title vivid and keep its line breaks clean.
   ============================================================ */
.pricing .pricing-campaign-title-v2 {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 18px 0 18px !important;
  font-size: clamp(1.5rem, 3.3vw, 2.35rem) !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  background: none !important;
  color: #0067b1 !important;
  -webkit-text-fill-color: #0067b1 !important;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.9),
    0 7px 16px rgba(0, 91, 187, 0.16) !important;
  filter: none !important;
}

.pricing .pricing-campaign-title-v2 br {
  display: block !important;
}

.pricing .pricing-campaign-title-line {
  display: block !important;
}

@media (max-width: 768px) {
  .pricing .pricing-campaign-title-v2 {
    font-size: clamp(1.45rem, 7vw, 2.1rem) !important;
    line-height: 1.38 !important;
    letter-spacing: 0.01em !important;
  }
}

/* ============================================================
   DOCTOR NAME MEDICAL BLUE 0514-H
   Keep the doctor corporation, title, and name in medical blue.
   ============================================================ */
html body section#doctor.doctor .doctor-name-label,
html body section#doctor.doctor .doctor-corp-name,
html body section#doctor.doctor .doctor-title-row,
html body section#doctor.doctor .doctor-title-text,
html body section#doctor.doctor .doctor-name-nowrap {
  color: #0067b1 !important;
  -webkit-text-fill-color: #0067b1 !important;
  text-shadow: none !important;
}

html body section#doctor.doctor .doctor-name-nowrap {
  color: #00449d !important;
  -webkit-text-fill-color: #00449d !important;
}

/* ============================================================
   PROBLEM HEADING LINE TONE 0514-I
   Remove the upper divider before the problem section and make
   the title double-line a warm gold gradient.
   ============================================================ */
.hero-cta-block {
  background:
    linear-gradient(135deg, rgba(232, 247, 255, 0.96) 0%, rgba(247, 251, 253, 0.98) 58%, rgba(213, 240, 252, 0.94) 100%) !important;
  border-bottom: 1px solid #72c9ee !important;
}

section#problem.problem .section-title::after {
  background:
    linear-gradient(90deg, #8f6400 0%, #c99721 34%, #ffd24a 66%, rgba(255, 210, 74, 0) 100%) 0 0 / 100% 3px no-repeat,
    linear-gradient(90deg, #8f6400 0%, #c99721 34%, #ffd24a 66%, rgba(255, 210, 74, 0) 100%) 0 100% / 100% 3px no-repeat !important;
}