/* KYOTO K CLINIC 眉下切開LP
   デザインリファレンス（browlift_lp.html）を静的HTML/CSSとして実装。
   レイアウトは clamp() による連続的フルード表示（ブレークポイント切替なし）。 */

:root {
  --bg: #FBF8F4;
  --bg-alt: #F1E9DE;
  --bg-alt2: #FDFBF7;
  --bg-dark: #241E1A;
  --bg-dark2: #3A322C;

  --text: #4A3F36;
  --text-strong: #2B2724;
  --heading: #241E1A;
  --muted: #7C6E5F;
  --muted2: #8A7A68;

  --border: #E3DAD0;
  --border2: #DFD3C2;
  --border3: #DCCFB6;

  --gold: #A98A4B;
  --gold2: #C7B389;
  --gold3: #CBB48A;
  --price-gold: #8A6A16;
  --cta-gold: #C9A13F;
  --cta-gold-hover: #B89033;

  --cta-red: #B4283A;
  --cta-red-hover: #9A1F2F;
  --cta-red-hover-dark: #C93A4C;

  --line-green: #06C755;
  --line-green-hover: #05B44D;

  --ph-bg: #E4DACE;
  --ph-cap: #7C6E5F;

  --font-mincho: 'Shippori Mincho', serif;
  --font-gothic: 'Zen Kaku Gothic New', sans-serif;

  /* コンテンツ（テキスト・価格など）は常に最大1120px幅を想定し、余白は
     viewport 幅から逆算する。100%画像（症例写真・KV写真・暗転セクション等）
     は --pad を使わず width:100% のままブラウザ幅いっぱいまで全幅表示する。 */
  --content-col: 1120px;
  --shell-max: 1400px;
  --pad: max(18px, calc((100% - var(--content-col)) / 2));
  --pad-narrow: max(16px, calc((100% - var(--content-col)) / 2));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body {
  color: var(--text-strong);
  font-family: var(--font-gothic);
  overflow-x: hidden;
}

a { color: var(--cta-red); text-decoration: none; }
a:hover { color: #5E1A25; }

h1, h2, h3, p { margin: 0; }

.section-heading-image {
  display: block;
  width: 50%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.user-voice__title .section-heading-image,
.price-detail__title .section-heading-image,
.menu__title .section-heading-image,
.flow__title .section-heading-image,
.faq__title .section-heading-image {
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 767px) {
  .section-heading-image,
  .user-voice__title .section-heading-image,
  .price-detail__title .section-heading-image,
  .menu__title .section-heading-image,
  .flow__title .section-heading-image,
  .faq__title .section-heading-image {
    /* 元画像が1900px幅の統一キャンバス（絵柄は中央・左右に余白）になったため、
       SPでは幅いっぱいに使わないと絵柄が小さくなりすぎる */
    width: 100%;
  }

}

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

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

/* ================= scroll reveal ================= */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    transform .7s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
}
.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.section-art { display: block; width: 100%; }
.section-art img { width: 100%; height: auto; }

/* ---------- placeholder photo blocks ---------- */
.ph {
  position: relative;
  width: 100%;
  background: var(--ph-bg);
  background-image: repeating-linear-gradient(135deg, rgba(169, 138, 75, .10) 0 6px, transparent 6px 12px);
}
.ph--dark {
  background: var(--bg-dark2);
  background-image: repeating-linear-gradient(135deg, rgba(216, 201, 168, .12) 0 6px, transparent 6px 12px);
}
/* プレースホルダーに実写真を入れる際は <img> を直下に置くだけで
   現在のレイアウト（ブロックの寸法）を変えずに全面カバー表示になる */
.ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph__cap {
  position: absolute;
  left: 12px;
  top: 12px;
  max-width: 220px;
  font: 400 10.8px/1.6 ui-monospace, Menlo, monospace;
  color: var(--ph-cap);
}
.ph__cap--dark { color: #B8AB9B; }
.ph__cap--sm {
  position: absolute;
  left: 8px;
  top: 8px;
  font: 400 10.26px/1.5 ui-monospace, Menlo, monospace;
  color: var(--ph-cap);
}
.ph__cap--bottom {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  font: 400 10.26px/1.5 ui-monospace, Menlo, monospace;
  color: var(--ph-cap);
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: 49px;
  padding: 8px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.site-header__logo-img {
  display: block;
  width: auto;
  height: clamp(26px, 4vw, 34px);
}
.site-header__cta {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 6px;
  max-width: 340px;
}
.site-header__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 6px;
  font-size: clamp(10.8px, 1.03vw, 12.96px);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  text-align: center;
}
.site-header__btn-icon { flex: 0 0 auto; width: 15px; height: 15px; }
.site-header__btn--line { background: var(--line-green); color: #FFFFFF; }
.site-header__btn--line:hover { background: var(--line-green-hover); color: #FFFFFF; }
.site-header__btn--reserve { background: var(--cta-red); color: var(--bg); }
.site-header__btn--reserve:hover { background: var(--cta-red-hover); color: var(--bg); }
.site-header__btn--tel { background: var(--cta-gold); color: #FFFFFF; }
.site-header__btn--tel:hover { background: var(--cta-gold-hover); color: #FFFFFF; }

/* ---------- CTA buttons (shared) ---------- */
.cta-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-primary,
.btn-secondary,
.btn-secondary--dark,
.btn-tertiary--dark {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: .06em;
}
.btn-primary {
  min-height: 58px;
  background: var(--cta-red);
  color: var(--bg);
  font-size: clamp(17.28px, 1.84vw, 22.68px);
  font-weight: 700;
  letter-spacing: .08em;
}
.btn-primary:hover { background: var(--cta-red-hover); color: var(--bg); }
.btn-primary--lg {
  min-height: 60px;
  font-size: clamp(18.36px, 2.05vw, 24.84px);
}
.btn-primary--lg:hover { background: var(--cta-red-hover-dark); }

.btn-secondary {
  min-height: 52px;
  border: 1px solid var(--cta-red);
  color: var(--cta-red);
  font-size: clamp(16.2px, 1.62vw, 20.52px);
}
.btn-secondary:hover { background: var(--bg); }

.btn-secondary--dark {
  min-height: 54px;
  border: 1px solid #D8C9A8;
  color: var(--bg);
  font-size: clamp(16.2px, 1.62vw, 20.52px);
}
/* 暗背景ボタン: 汎用 a:hover の暗赤文字に負けないよう、hover時も明るい文字色を明示。
   枠をゴールドにして上品に変化させる */
.btn-secondary--dark:hover {
  background: var(--bg-dark2);
  border-color: var(--gold2);
  color: var(--bg);
}

.btn-tertiary--dark {
  min-height: 54px;
  background: #514943;
  border: 1px solid #655B53;
  color: #DED7D0;
  font-size: clamp(15.12px, 1.46vw, 18.9px);
  font-weight: 500;
}
.btn-tertiary--dark:hover {
  background: #5D544D;
  border-color: #746960;
  color: var(--bg);
}

/* ================= KV ================= */
.kv { position: relative; background: var(--bg); }
.kv__visual,
.kv__visual img {
  display: block;
  width: 100%;
}
.kv__visual img { height: auto; }
.kv__visual .kv__image--pc { display: none; }

@media (min-width: 768px) {
  .kv__visual .kv__image--sp { display: none; }
  .kv__visual .kv__image--pc { display: block; }
}

/* CTA pair sections (KV直下 / 症例後) */
.section-cta {
  padding: 22px var(--pad) 0;
}
.section-cta--tight { padding-top: 22px; padding-bottom: 22px; }
.cases__cta { flex-direction: row; align-items: stretch; }
.cases__cta .btn-primary,
.cases__cta .btn-secondary {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px;
  line-height: 1.5;
}

/* ================= concern ================= */
.concern { background: var(--bg); padding: 0 0 34px; }
.concern__photo { max-height: none; overflow: hidden; }
.concern__copy {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(20px, 3vw, 48px);
}
.concern__lead {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(18.36px, 2.05vw, 24.84px);
  line-height: 1.85;
  letter-spacing: .04em;
  color: #3B322C;
}
.concern__title {
  margin-top: 8px;
  font-family: var(--font-mincho);
  font-size: clamp(32.4px, 4.1vw, 51.84px);
  line-height: 1.4;
  letter-spacing: .05em;
  color: var(--heading);
}
.checklist {
  display: flex;
  flex-direction: column;
  padding: 22px var(--pad) 0;
  list-style: none;
  margin: 0;
}
.section-art--checklist { background: #FFFFFF; }
.checklist__item {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: clamp(15.12px, 1.46vw, 18.9px);
  line-height: 1.7;
}
.checklist__item:last-child { border-bottom: none; }
.checklist__mark { color: var(--gold); }

.concern__split {
  background: var(--bg-alt);
}
.concern__split-text {
  max-width: 840px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 3vw, 40px);
  text-align: center;
}
.concern__split-q {
  font-family: var(--font-mincho);
  font-size: clamp(17.28px, 1.84vw, 22.68px);
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--heading);
}
.concern__split-a {
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(14.04px, 1.35vw, 17.82px);
  line-height: 1.8;
  color: var(--text);
}

.concern__bridge {
  margin: 26px var(--pad) 0;
  padding-top: 20px;
  border-top: 1px solid var(--gold2);
}
.concern__bridge p {
  font-family: var(--font-mincho);
  font-size: clamp(19.44px, 2.27vw, 27px);
  line-height: 1.85;
  letter-spacing: .03em;
  color: var(--heading);
  text-wrap: pretty;
}

/* ================= cases ================= */
.cases { background: var(--bg-alt); padding: 36px 0 30px; }
.cases__head { padding: 0 var(--pad) 30px; }
.cases__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(28.08px, 3.56vw, 43.2px);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--heading);
}
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 48px);
  width: calc(100% - 36px);
  max-width: var(--content-col);
  margin: 0 auto 22px;
}
/* 症例写真は「上=Before/下=After」の合成画像（ラベル・経過注記は画像内に焼き込み済み）。
   PCは左に写真・右に説明、SPは写真・説明を縦に表示 */
.case__photos { min-width: 0; }
.case__photo-img {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  width: 100%;
  height: auto;
}
.case__photo-note {
  margin: 0 0 14px;
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.65;
  color: var(--muted);
}
.case__body { min-width: 0; padding: 0; }
.case__procedures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 0;
  font-size: clamp(13.5px, 1.3vw, 17.28px);
  color: var(--text);
}
.case__procedures-label { color: var(--muted); }
.case__procedures-tag { font-weight: 500; color: var(--heading); }
.case__price {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border2);
}
.case__price-label { font-size: clamp(12.96px, 1.19vw, 16.2px); letter-spacing: .06em; color: var(--muted); }
.case__price-value { margin-top: 4px; font-size: clamp(14.04px, 1.35vw, 17.82px); line-height: 1.7; color: var(--heading); }
.case__price-value strong { font-family: var(--font-mincho); font-weight: 400; font-size: clamp(20.52px, 2.38vw, 29.16px); }
.case__price-sub { margin-top: 2px; font-size: clamp(12.96px, 1.19vw, 16.2px); line-height: 1.8; color: var(--text); }

.case__details { margin: 0; }
.case__detail-row {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  padding: 8px 0;
  border-bottom: 1px solid var(--border2);
  font-size: clamp(13.5px, 1.3vw, 17.28px);
  line-height: 1.8;
}
.case__detail-row:first-child { padding-top: 0; }
.case__detail-row:last-child { padding-bottom: 0; border-bottom: 0; }
.case__detail-row dt {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.case__detail-row dt::after { content: "｜"; }
.case__detail-row dd { margin: 0; color: var(--heading); }

.cases__disclaimer {
  margin: 16px var(--pad) 0;
  font-size: clamp(12.42px, 1.08vw, 15.12px);
  line-height: 1.9;
  color: var(--muted);
}

/* ================= user voice ================= */
.user-voice {
  position: relative;
  padding: clamp(44px, 6vw, 76px) var(--pad);
  background: var(--bg);
  overflow: hidden;
}
.user-voice::before {
  content: "“";
  position: absolute;
  top: 12px;
  right: max(18px, calc((100% - var(--content-col)) / 2));
  font-family: Georgia, serif;
  font-size: clamp(118.8px, 19.44vw, 237.6px);
  line-height: 1;
  color: rgba(169, 138, 75, .09);
  pointer-events: none;
}
.user-voice__head { position: relative; margin-bottom: clamp(36px, calc(4vw + 12px), 52px); }
.user-voice__eyebrow {
  font-size: clamp(12.96px, 1.19vw, 16.2px);
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold);
}
.user-voice__title {
  margin-top: 5px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(30.24px, 3.78vw, 47.52px);
  letter-spacing: .12em;
  color: var(--heading);
}
.user-voice__subtitle {
  margin-top: 6px;
  font-size: clamp(14.04px, 1.3vw, 17.28px);
  letter-spacing: .08em;
  color: var(--muted);
}
.voice-card {
  position: relative;
  padding: clamp(20px, 4vw, 42px);
  background: var(--bg-alt2);
  border: 1px solid var(--border3);
  box-shadow: 0 18px 50px rgba(74, 63, 54, .07);
}
.voice-card__profile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border2);
}
.voice-card__doctor { display: flex; align-items: center; gap: clamp(12px, 2vw, 18px); min-width: 0; }
.voice-card__doctor-photo {
  flex: 0 0 auto;
  width: clamp(66px, 8vw, 92px);
  height: clamp(66px, 8vw, 92px);
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--gold3), 0 8px 20px rgba(74, 63, 54, .13);
  object-fit: cover;
  object-position: 50% 29%;
}
.voice-card__name {
  font-family: var(--font-mincho);
  font-size: clamp(21.6px, 2.38vw, 30.24px);
  color: var(--heading);
}
.voice-card__treatment { margin-top: 4px; font-size: clamp(14.04px, 1.3vw, 17.28px); color: var(--muted); }
.voice-card__score { display: flex; align-items: baseline; gap: 5px; color: var(--muted); white-space: nowrap; }
.voice-card__score strong {
  font-family: var(--font-mincho);
  font-size: clamp(36.72px, 4.54vw, 58.32px);
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
}
.voice-card__score span { font-size: clamp(11.88px, 1.08vw, 15.12px); }
.voice-card__list { margin: 0; padding: 0; list-style: none; }
.voice-card__item {
  padding: clamp(22px, 3.5vw, 36px) 0;
  border-bottom: 1px solid var(--border);
}
.voice-card__item:last-child { padding-bottom: 0; border-bottom: none; }
.voice-card__item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.voice-card__item-head h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(19.44px, 2.16vw, 27px);
  color: var(--heading);
}
.voice-card__item-head p { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; color: var(--muted); }
.voice-card__item-head strong { font-family: var(--font-mincho); font-size: clamp(21.6px, 2.38vw, 30.24px); font-weight: 500; color: var(--heading); }
.voice-card__item-head p > span:last-child { font-size: clamp(11.88px, 1.08vw, 15.12px); }
.voice-card__stars { font-size: clamp(12.96px, 1.3vw, 16.2px); letter-spacing: .06em; color: var(--gold); }
.voice-card__stars--half {
  background: linear-gradient(90deg, var(--gold) 0 90%, var(--border3) 90% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.voice-card__text {
  margin-top: 14px;
  font-size: clamp(16.2px, 1.46vw, 18.9px);
  line-height: 1.9;
  color: var(--text);
  text-wrap: pretty;
}
.voice-card__note {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-alt);
  font-size: clamp(13.5px, 1.24vw, 16.2px);
  line-height: 1.85;
  color: var(--muted);
}
.user-voice__disclaimer {
  margin-top: 14px;
  font-size: clamp(12.42px, 1.08vw, 15.12px);
  line-height: 1.8;
  color: var(--muted);
}

@media (max-width: 560px) {
  .voice-card__profile { align-items: flex-start; flex-wrap: wrap; }
  .voice-card__score { flex-wrap: wrap; justify-content: flex-end; max-width: 120px; }
  .voice-card__score span:first-child { flex-basis: 100%; text-align: right; }
  .voice-card__item-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .voice-card__stars { letter-spacing: .03em; }
}

/* ================= monitor ================= */
.monitor { position: relative; background: var(--bg-dark); color: var(--bg); }
.monitor__photo { aspect-ratio: 16 / 9; max-height: 560px; }
.monitor__badge {
  position: absolute;
  right: var(--pad-narrow);
  bottom: clamp(14px, 2.5vw, 40px);
  text-align: right;
}
.monitor__badge-eyebrow {
  display: block;
  font-size: clamp(10.8px, 1.03vw, 14.04px);
  letter-spacing: .2em;
  color: #D8C9A8;
}
.monitor__badge-title {
  margin-top: 6px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(24.84px, 3.13vw, 38.88px);
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--bg);
}
.monitor__body { padding: 22px var(--pad-narrow) 30px; }
.monitor__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mincho);
}
.monitor__price-label { font-family: var(--font-gothic); font-size: clamp(12.96px, 1.19vw, 16.2px); color: #B8AB9B; }
.monitor__price-strike {
  font-size: clamp(18.36px, 2.05vw, 24.84px);
  color: #B8AB9B;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.monitor__price-arrow { font-size: clamp(15.12px, 1.46vw, 18.9px); color: var(--gold); }
.monitor__price-value { font-size: clamp(41.04px, 4.97vw, 64.8px); letter-spacing: .01em; }
.monitor__price-tax { font-family: var(--font-gothic); font-size: clamp(12.96px, 1.19vw, 16.2px); color: #D8C9A8; }
.monitor__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #4A4340;
}
.monitor__notes p { font-size: clamp(12.42px, 1.08vw, 15.12px); line-height: 1.9; color: #C9BDAD; }
.monitor__notes--image {
  margin: 0;
  padding: 18px var(--pad-narrow) 24px;
  border-top: 1px solid #4A4340;
}
.monitor-offer-panel {
  padding: clamp(20px, 3vw, 34px);
  background: var(--bg-dark);
  color: var(--bg);
  /* 金額訴求を強める：内容を中央に寄せ、上のバナーと繋がるゴールドの枠で囲う */
  text-align: center;
  border: 1px solid rgba(216, 201, 168, .32);
  border-top: 0;
}
.monitor-offer-panel .monitor__notes--image {
  padding: 0 0 16px;
  border-top: 0;
  border-bottom: 1px solid rgba(216, 201, 168, .3);
}
.monitor-offer-panel .monitor__notes p {
  font-size: clamp(14px, 1.3vw, 17px);
  color: #E8DED1;
}
.monitor-offer-panel .price-detail__list { margin-top: 0; }
.monitor-offer-panel .price-detail__row { padding: 20px 0 16px; border-bottom: 0; }
.monitor-offer-panel .price-detail__row-label {
  color: #F7F1E9;
  font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: .08em;
}
.monitor-offer-panel .price-detail__row-label span {
  display: inline-block;
  margin-left: .5em;
  color: #D8C9A8;
}
.monitor-offer-panel .price-detail__row-price {
  margin-top: 10px;
  font-weight: 500;
  font-size: clamp(52px, 7.2vw, 92px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: #D8C9A8;
}
.monitor-offer-panel .price-detail__row-price span { color: #F7F1E9; }
.monitor-offer-panel .price-detail__row-desc {
  margin-top: 12px;
  color: #E8DED1;
}
.monitor-offer-panel__note {
  padding-top: 14px;
  border-top: 1px solid rgba(216, 201, 168, .3);
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.9;
  color: #D8C9A8;
}

@media (max-width: 767px) {
  .monitor-banner,
  .monitor-offer-panel {
    width: calc(100% + 36px);
    margin-left: -18px;
    margin-right: -18px;
  }
  .monitor-banner img { width: 100%; }
  .monitor-offer-panel { padding: 22px 18px 24px; }
}

/* ================= price detail ================= */
.price-detail { background: var(--bg); padding: 36px var(--pad) 32px; }
.price-detail__title {
  margin: 0 0 32px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(25.92px, 3.24vw, 41.04px);
  letter-spacing: .06em;
  color: var(--heading);
}
.price-detail__art { margin: 0 0 22px; border: 1px solid var(--border); }
.price-detail__monitor {
  padding: 20px 18px;
  background: var(--bg-alt);
  border-top: 3px solid var(--cta-red);
}
.price-detail__monitor-label {
  font-family: var(--font-mincho);
  font-size: clamp(16.2px, 1.62vw, 20.52px);
  line-height: 1.6;
  color: var(--cta-red);
}
.price-detail__monitor-label span { font-family: var(--font-gothic); font-size: clamp(12.96px, 1.19vw, 16.2px); }
.price-detail__monitor-price {
  margin-top: 6px;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(49.68px, 5.83vw, 77.76px);
  line-height: 1.1;
  color: var(--cta-red);
}
.price-detail__monitor-price span { font-family: var(--font-gothic); font-size: clamp(14.04px, 1.35vw, 17.82px); font-weight: 400; color: var(--text); }
.price-detail__monitor-desc { margin-top: 12px; font-size: clamp(13.5px, 1.3vw, 17.28px); line-height: 1.9; color: var(--text); }

.price-detail__list { display: flex; flex-direction: column; margin-top: 6px; }
.price-detail__row { padding: 18px 0; border-bottom: 1px solid var(--border); }
.price-detail__row-label {
  font-family: var(--font-mincho);
  font-size: clamp(15.12px, 1.46vw, 18.9px);
  line-height: 1.6;
  color: var(--text);
}
.price-detail__row-label span { font-family: var(--font-gothic); font-size: clamp(12.42px, 1.08vw, 15.12px); }
.price-detail__row--plain .price-detail__row-label { font-size: clamp(15.12px, 1.46vw, 18.9px); }
.price-detail__row-price {
  margin-top: 4px;
  font-family: var(--font-mincho);
  font-size: clamp(32.4px, 4.1vw, 51.84px);
  line-height: 1.2;
  color: var(--heading);
}
.price-detail__row-price span { font-family: var(--font-gothic); font-size: clamp(12.96px, 1.19vw, 16.2px); color: var(--text); }
.price-detail__row-price--muted { color: var(--muted); font-size: clamp(28.08px, 3.56vw, 43.2px); }
.price-detail__row-desc { margin-top: 8px; font-size: clamp(13.5px, 1.3vw, 17.28px); line-height: 1.9; color: var(--text); }

/* 価格パネル直下の注記（旧・価格画像内にあった一文をテキスト化） */
.price-detail__visit-note {
  margin-top: clamp(18px, 2.2vw, 28px);
  font-family: var(--font-mincho);
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .04em;
  text-align: center;
  color: var(--text);
}

.price-detail__anesthesia { margin-top: 18px; }
.price-detail__anesthesia-title {
  margin: 0 0 8px;
  font-family: var(--font-mincho);
  font-size: clamp(15.12px, 1.46vw, 18.9px);
  letter-spacing: .06em;
  color: var(--text);
}
.price-detail__anesthesia-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: clamp(14.04px, 1.35vw, 17.82px);
  color: var(--heading);
}
.price-detail__anesthesia-row:last-child { border-bottom: none; }
.price-detail__anesthesia-row span:last-child { font-family: var(--font-mincho); font-size: clamp(16.2px, 1.62vw, 20.52px); }

/* ================= sns ================= */
.sns { background: var(--bg-alt); padding: 30px var(--pad); }
.sns__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(19.44px, 2.27vw, 27px);
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--heading);
  text-wrap: pretty;
}
.sns__links { display: flex; gap: 12px; margin-top: 16px; }
.sns__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  color: var(--text);
}
.sns__card-top {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.5vw, 14px);
  padding: clamp(12px, 3.5vw, 18px);
}
.sns__card-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 9vw, 52px);
  height: clamp(38px, 9vw, 52px);
  border-radius: 50%;
}
.sns__card-icon svg { width: 54%; height: 54%; }
.sns__card-icon--instagram {
  background: linear-gradient(135deg, #FEDA77 0%, #F58529 25%, #DD2A7B 55%, #8134AF 80%, #515BD4 100%);
}
.sns__card-icon--line { background: var(--line-green); }
.sns__card-copy { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.sns__card-title {
  font-weight: 700;
  font-size: clamp(15.12px, 1.51vw, 19.44px);
  letter-spacing: .02em;
}
.sns__card--instagram .sns__card-title { color: #C1316B; }
.sns__card--line .sns__card-title { color: var(--line-green); }
.sns__card-desc { font-size: clamp(11.88px, 1.19vw, 15.12px); line-height: 1.5; color: var(--text); }
.sns__card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  margin: 0 clamp(10px, 3vw, 16px) clamp(10px, 3vw, 16px);
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(13.5px, 1.3vw, 16.74px);
  letter-spacing: .04em;
  color: #FFFFFF;
}
.sns__card-arrow { font-size: 1.15em; }
.sns__card--instagram .sns__card-cta { background: #C1316B; }
.sns__card--instagram:hover .sns__card-cta { background: #A5265A; }
.sns__card--line .sns__card-cta { background: var(--line-green); }
.sns__card--line:hover .sns__card-cta { background: var(--line-green-hover); }
.sns__card:hover { border-color: var(--gold); }

/* ================= reasons ================= */
.reasons { background: var(--bg); padding: 36px 0 34px; }
.reasons__head { padding: 0 var(--pad) 32px; }
.reasons__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(30.24px, 3.78vw, 47.52px);
  letter-spacing: .16em;
  color: var(--heading);
}
/* POINT 1〜5 共通コンポーネント。
   SPはPOINT 1を縦積み、POINT 2〜5を動画領域と本文の2列にする。
   PC用の2カラム化・L字アクセントは末尾のPC調整ブロックで上書きする。 */
.reason-list { display: grid; }
.reason { background: var(--bg); }
.reason:nth-child(even) { background: var(--bg-alt); }
.reason-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
}
.reason-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 院長写真（縦位置）が4/3トリミングでも顔が切れない位置に */
  object-position: 50% 20%;
}
/* 動画素材が入ったらプレースホルダーを <video> に差し替える */
.reason-media__video { width: 100%; height: 100%; object-fit: cover; }
.reason-media.is-placeholder {
  background-color: var(--ph-bg);
  background-image: repeating-linear-gradient(135deg, rgba(169, 138, 75, .10) 0 6px, transparent 6px 12px);
}
.reason-media__caption {
  position: absolute;
  left: 8px;
  top: 8px;
  font: 400 10.26px/1.5 ui-monospace, Menlo, monospace;
  color: var(--ph-cap);
}
.reason-media--video .reason-media__caption {
  top: auto;
  bottom: 8px;
}
.reason-media__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(34px, 4vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(36, 30, 26, .72);
  transform: translate(-50%, -50%);
}
.reason-media__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
  transform: translate(-50%, -50%);
}
.reason-body { padding: 20px 16px; }
.reason-num {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 10px;
  color: var(--gold);
}
.reason-num__label {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(11.34px, 1.19vw, 13.5px);
  letter-spacing: .1em;
}
.reason-num__value {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(34.56px, 3.67vw, 47.52px);
  line-height: 1;
  letter-spacing: .01em;
}
.reason-num::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 28px;
  height: 3px;
  background: var(--cta-red);
}
.reason-title {
  margin: 10px 0 8px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(18.36px, 2.05vw, 24.84px);
  line-height: 1.65;
  color: var(--heading);
  text-wrap: pretty;
}
.reason-text p {
  font-size: clamp(14.04px, 1.35vw, 17.82px);
  line-height: 1.8;
  color: var(--text);
  text-wrap: pretty;
}
.reason-text p + p { margin-top: 1.2em; }
/* 本文中の強調（原稿の太字指定） */
.reason-text strong {
  font-weight: 700;
  color: var(--heading);
}

/* ================= menu ================= */
.menu { background: var(--bg-alt); padding: 36px 0 32px; }
.menu__head { padding: 0 var(--pad) 30px; }
.menu__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(25.92px, 3.24vw, 41.04px);
  letter-spacing: .06em;
  color: var(--heading);
}
.menu__sp-break { display: none; }
@media (max-width: 767px) {
  .menu__sp-break { display: block; }
}
.menu__item-title {
  margin: 0;
  padding: 0 var(--pad);
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(20.52px, 2.38vw, 29.16px);
  line-height: 1.65;
  color: var(--heading);
  text-wrap: pretty;
}
.menu__item-title--second { margin-top: 30px; }
/* 図解を削除したため、見出しと本文の間隔はここで確保する */
.menu__item-body { margin-top: 16px; padding: 0 var(--pad); }
.menu__item-body p { font-size: clamp(15.12px, 1.46vw, 18.9px); line-height: 1.95; color: var(--text); text-wrap: pretty; }
.menu__item-body p + p { margin-top: 16px; }

@media (min-width: 768px) {
  .menu__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(28px, 4vw, 56px);
    padding: 0 var(--pad);
  }

  .menu__item-title,
  .menu__item-body {
    padding-right: 0;
    padding-left: 0;
  }

  /* ふりがなを1段小さくして見出しを1行に収める（見出し高さの不揃いを解消） */
  .menu__item-title-kana {
    font-size: .55em;
    letter-spacing: .02em;
  }

  .menu__item-title--second { margin-top: 0; }
}

/* ================= flow ================= */
.flow { background: var(--bg); padding: 36px var(--pad) 32px; }
.flow__title {
  margin: 0 0 36px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(25.92px, 3.24vw, 41.04px);
  letter-spacing: .06em;
  color: var(--heading);
}
.flow__list { display: flex; flex-direction: column; }
.flow__step-title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(18.9px, 2.16vw, 25.92px);
  line-height: 1.5;
  color: var(--heading);
}
.flow__num {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  padding-bottom: 7px;
  font-weight: 500;
  font-size: clamp(30.24px, 3.24vw, 41.04px);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--gold);
}
.flow__num::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--gold);
}
.flow__row { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.flow__row--wide { position: relative; margin-top: 12px; }
.flow__photo { flex: 0 0 40%; aspect-ratio: 4 / 3; position: relative; }
.flow__photo img { width: 100%; height: 100%; object-fit: cover; }
.flow__photo--wide { aspect-ratio: 2 / 1; }
.flow__text { flex: 1; font-size: clamp(13.5px, 1.3vw, 17.28px); line-height: 1.8; color: var(--text); text-wrap: pretty; }
.flow__text--wide { margin-top: 12px; }

.flow__anesthesia { margin-top: 12px; padding: 14px; background: var(--bg-alt); }
.flow__anesthesia p {
  padding: 10px 0;
  border-bottom: 1px solid var(--border2);
  font-size: clamp(14.04px, 1.35vw, 17.82px);
  line-height: 1.9;
  color: var(--text);
}
.flow__anesthesia p:first-child { padding-top: 0; }
.flow__anesthesia p:last-child { padding-bottom: 0; border-bottom: none; }

.flow__divider { display: flex; align-items: center; gap: 12px; padding: 32px 0; }
.flow__divider-line { flex: 1; height: 1px; background: var(--border); }
.flow__divider-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--gold2);
}
.flow__divider-arrow--final { border-top-color: var(--gold2); }

/* ================= faq ================= */
.faq { background: var(--bg-alt); padding: 36px var(--pad) 32px; }
.faq__title {
  margin: 0 0 30px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(25.92px, 3.24vw, 41.04px);
  letter-spacing: .06em;
  color: var(--heading);
}
.faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--border2); }
.faq__item { border-bottom: 1px solid var(--border2); }
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  font-size: clamp(15.12px, 1.46vw, 18.9px);
  line-height: 1.7;
  color: var(--heading);
}
.faq__mark {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--gold);
  font-size: clamp(12.96px, 1.19vw, 16.2px);
  transition: transform .22s ease;
}
.faq__item[open] .faq__mark { transform: rotate(90deg); }
.faq__a {
  margin: 0;
  padding: 0 0 18px 24px;
  font-size: clamp(14.58px, 1.4vw, 18.36px);
  line-height: 1.85;
  color: var(--text);
}

/* ================= online consultation ================= */
.online-consultation__banner,
.online-consultation__how-to {
  display: block;
  width: 100%;
}
.online-consultation__banner img,
.online-consultation__how-to img {
  display: block;
  width: 100%;
  height: auto;
}
.online-consultation__banner .online-consultation__image--pc { display: none; }
.online-consultation__banner {
  margin: clamp(28px, 4vw, 48px) auto 0;
}
.online-consultation__how-to {
  margin: clamp(28px, 4vw, 48px) auto 0;
}

@media (min-width: 768px) {
  .online-consultation__banner,
  .online-consultation__how-to {
    max-width: var(--content-col);
    margin-right: auto;
    margin-left: auto;
  }
  .online-consultation__banner .online-consultation__image--sp { display: none; }
  .online-consultation__banner .online-consultation__image--pc { display: block; }
}

/* ================= final CTA ================= */
.final-cta { background: var(--bg-dark); color: var(--bg); }
.final-cta__photo { aspect-ratio: 4 / 3; max-height: 600px; }
/* 明るい写真の上に白の見出しを乗せるため、全幅で暗幕を敷いて可読性を確保する */
.final-cta__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(36, 30, 26, .45), rgba(36, 30, 26, .62));
  pointer-events: none;
}
.final-cta__title { z-index: 1; }
.final-cta__title {
  position: absolute;
  left: var(--pad);
  bottom: clamp(22px, 3.5vw, 52px);
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(34.56px, 4.32vw, 56.16px);
  letter-spacing: .12em;
  color: var(--bg);
}
.final-cta__body { padding: 26px var(--pad) 34px; }
.final-cta__lead { font-size: clamp(15.12px, 1.46vw, 18.9px); line-height: 1.95; color: var(--border); text-wrap: pretty; }
.final-cta__voices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  padding: 16px 0;
  border-top: 1px solid rgba(216, 201, 168, .45);
  border-bottom: 1px solid rgba(216, 201, 168, .45);
}
.final-cta__voices p {
  font-family: var(--font-mincho);
  font-size: clamp(18.36px, 2.05vw, 24.84px);
  line-height: 1.7;
  color: var(--bg);
}
.final-cta__closing { margin-top: 20px; font-size: clamp(15.12px, 1.46vw, 18.9px); line-height: 1.95; color: var(--border); }
.final-cta__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

/* ================= clinic info ================= */
.clinic-info { background: var(--bg); padding: 0 0 40px; }
.clinic-info__photo { width: 100%; max-width: var(--content-col); margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; }
.clinic-info__photo-img { width: 100%; height: 100%; object-fit: cover; }
.clinic-info__body { padding: 26px var(--pad) 0; }
.clinic-info__title {
  margin: 0 0 16px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(23.76px, 2.92vw, 36.72px);
  letter-spacing: .06em;
  color: var(--heading);
}
.clinic-info__list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.clinic-info__row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.clinic-info__row:last-child { border-bottom: none; }
.clinic-info__label { flex: 0 0 84px; font-size: clamp(12.96px, 1.19vw, 16.2px); line-height: 1.9; color: var(--muted2); }
.clinic-info__value { font-size: clamp(14.04px, 1.35vw, 17.82px); line-height: 1.9; color: var(--heading); }
.clinic-info__value--break { word-break: break-all; }

/* ================= footer ================= */
/* PC・SP共通。下paddingは追従CTAに隠れない分を確保する */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 48px var(--pad) 100px;
  background: var(--bg-dark);
  color: var(--bg);
  text-align: center;
}
.site-footer__logo { display: block; }
.site-footer__logo-img {
  display: block;
  width: auto;
  height: 32px;
  /* 濃紺地でもロゴが沈まないように明度を上げる */
  filter: brightness(0) invert(1);
  opacity: .85;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
}
.site-footer__nav a {
  color: #D8C9A8;
  font-size: 13.5px;
  letter-spacing: .04em;
  transition: color .2s;
}
.site-footer__nav a:hover { color: var(--bg); }
.site-footer__copy {
  font-size: 12px;
  letter-spacing: .08em;
  color: #B8AB9B;
}

/* ================= fixed CTA ================= */
.fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--bg);
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.fixed-cta.is-visible { transform: translateY(0); }
.fixed-cta__link {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 0 4px;
  text-align: center;
}
.fixed-cta__link--line { background: var(--line-green); color: #FFFFFF; }
.fixed-cta__link--line:hover { background: var(--line-green-hover); color: #FFFFFF; }
.fixed-cta__line-icon { width: 18px; height: 18px; border-radius: 5px; background: #FFFFFF; }
.fixed-cta__link-title { font-size: clamp(12.96px, 1.19vw, 16.2px); font-weight: 700; letter-spacing: .04em; }
/* タイトル横のアイコンはPCのみ表示 */
.fixed-cta__icon { display: none; }
.fixed-cta__link-sub { font-size: clamp(10.26px, 0.97vw, 13.5px); letter-spacing: .02em; color: #EAFBF1; }

.fixed-cta__link--counsel { background: var(--cta-red); color: var(--bg); gap: 2px; }
.fixed-cta__link--counsel:hover { background: var(--cta-red-hover); color: var(--bg); }
.fixed-cta__link--counsel .fixed-cta__link-title { font-size: 13.5px; color: var(--bg); }
.fixed-cta__link--counsel .fixed-cta__link-sub { font-size: clamp(10.8px, 1.03vw, 14.04px); color: #EBD9DB; }

.fixed-cta__link--tel { background: var(--cta-gold); color: #332508; gap: 2px; }
.fixed-cta__link--tel:hover { background: var(--cta-gold-hover); color: #332508; }
/* 太字は電話番号（sub）側に置き、タイトルは通常ウェイトにする */
.fixed-cta__link--tel .fixed-cta__link-title { font-size: 10.8px; color: var(--bg); font-weight: 500; }
.fixed-cta__link--tel .fixed-cta__link-sub { font-size: 18px; font-weight: 700; font-family: var(--font-mincho); color: var(--bg); }

/* ================= PC adjustments (768px以上のみ / SPには影響しない) ================= */
@media (min-width: 768px) {

  :root {
    /* CTAボタンの共通幅・高さ */
    --cta-col: 460px;
    --cta-height: 58px;
    /* セクションの上下余白と、見出し〜本文の間隔（全セクション共通） */
    --section-pad-y: clamp(64px, 7.5vw, 112px);
    --heading-gap: clamp(40px, calc(3vw + 12px), 56px);
  }

  /* ヘッダー：PCはstickyで追従し、スクロール時のみ薄い影（JSが .is-scrolled を付与）。
     バーは画面幅いっぱいに広げ、ロゴ・ボタンもひと回り大きく */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    max-width: none;
    min-height: 72px;
    padding: 12px clamp(24px, 2.5vw, 48px);
    gap: 24px;
    transition: box-shadow .2s;
  }
  .site-header.is-scrolled { box-shadow: 0 1px 8px rgba(0, 0, 0, .06); }
  .site-header__logo-img { height: 50px; }
  .site-header__cta {
    max-width: 620px;
    gap: 10px;
  }
  .site-header__btn {
    min-height: 46px;
    padding: 0 14px;
    gap: 6px;
    font-size: clamp(15px, 1.35vw, 18px);
  }
  .site-header__btn-icon { width: 18px; height: 18px; }

  /* 追従CTA：PCは画面幅いっぱいに。タイトル横にアイコンを表示 */
  .fixed-cta { max-width: none; }
  .fixed-cta__icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 7px;
    vertical-align: -.25em;
  }
  .fixed-cta__link-title,
  .fixed-cta__link--counsel .fixed-cta__link-title {
    font-size: clamp(17px, 1.5vw, 20px);
  }
  .fixed-cta__link-sub,
  .fixed-cta__link--counsel .fixed-cta__link-sub {
    font-size: clamp(14px, 1.2vw, 16px);
  }
  .fixed-cta__link--tel .fixed-cta__link-title {
    font-size: clamp(14px, 1.2vw, 16px);
  }
  .fixed-cta__link--tel .fixed-cta__link-sub {
    font-size: clamp(20px, 1.8vw, 24px);
  }

  /* 見出し画像：元画像は全て 1900px幅の同一キャンバス（左右余白込み）で書き出されているため、
     幅基準で揃えると全見出しが同じスケールになる。
     高さ基準＋max-width の組み合わせは幅が頭打ちになった際に横方向へ潰れるので使わない。 */
  .section-heading-image,
  .user-voice__title .section-heading-image,
  .price-detail__title .section-heading-image,
  .menu__title .section-heading-image,
  .flow__title .section-heading-image,
  .faq__title .section-heading-image {
    width: min(840px, 82%);
    max-width: none;
    height: auto;
  }
  /* 症例同士の間隔を確保 */
  .case + .case { margin-top: clamp(36px, 4vw, 56px); }

  /* KV：縦の間延びを抑える。コピーとバッジは絶対配置をやめて通常フローに戻し、
     サブコピーの直下にバッジが続くようにする（下端固定によるすき間をなくす） */
  .concern__split-a { max-width: 62ch; }


  /* テキスト見出し用コンポーネント：画像見出しと同じ「金の飾り＋ネイビー×ゴールド」をCSSで再現
     （選ばれる理由・クリニック情報。SPは現行スタイルのまま） */
  .section-heading {
    text-align: center;
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: clamp(30.24px, 3.78vw, 47.52px);
    letter-spacing: .12em;
    color: var(--heading);
  }
  .section-heading::before {
    content: "";
    display: block;
    width: clamp(120px, 12vw, 168px);
    height: 26px;
    margin: 0 auto 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 26'%3E%3Cg fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 15 C 28 3 52 5 70 13'/%3E%3Cpath d='M162 15 C 140 3 116 5 98 13'/%3E%3Cpath d='M70 13 q6 5 12 1'/%3E%3Cpath d='M98 13 q-6 5 -12 1'/%3E%3Ccircle cx='84' cy='14' r='4'/%3E%3Ccircle cx='84' cy='14' r='8.5' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  }
  .section-heading__accent { color: var(--gold); }
  .reasons__head { text-align: center; }

  /* 選ばれる理由：偶数行（POINT 2・4）は動画領域を右に、奇数行（3・5）は左に配置 */
  .reason-list {
    max-width: var(--content-col);
    margin-inline: auto;
    padding: 0 18px;
    row-gap: 96px;
  }
  .reason,
  .reason:nth-child(even) { background: none; }
  .reason {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: 72px;
    align-items: stretch;
  }
  .reason:nth-child(even) { grid-template-columns: 7fr 5fr; }
  .reason:nth-child(even) .reason-media { order: 2; }
  .reason:nth-child(even) .reason-body { order: 1; }
  .reason-media {
    aspect-ratio: auto;
    min-height: 340px;
  }
  /* メディアの外角にゴールドの細いL字（奇数=右下・偶数=左下）。overflow:hiddenは付けない */
  .reason-media::after {
    content: "";
    position: absolute;
    inset: auto -10px -10px auto;
    width: 64px;
    height: 64px;
    border-right: 1px solid var(--gold2);
    border-bottom: 1px solid var(--gold2);
    pointer-events: none;
  }
  .reason:nth-child(even) .reason-media::after {
    inset: auto auto -10px -10px;
    border-right: 0;
    border-left: 1px solid var(--gold2);
  }
  .reason-body {
    align-self: center;
    padding: 8px 0;
  }
  .reason:nth-child(n + 2) {
    display: block;
  }
  .reason:nth-child(n + 2) .reason-body {
    width: 100%;
    padding: 0;
  }
  .reason:nth-child(n + 2) .reason-content {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    align-items: start;
    gap: clamp(32px, 4vw, 56px);
  }
  .reason:nth-child(n + 2) .reason-content .reason-text {
    grid-column: 1;
    grid-row: 1;
  }
  .reason:nth-child(n + 2) .reason-content .reason-media {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
  }
  .reason:nth-child(n + 2) .reason-content .reason-media img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
  .reason:nth-child(odd):not(:first-child) .reason-content {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  }
  .reason:nth-child(odd):not(:first-child) .reason-content .reason-media { grid-column: 1; }
  .reason:nth-child(odd):not(:first-child) .reason-content .reason-text { grid-column: 2; }
  .reason-num {
    gap: 10px;
    padding-bottom: 0;
    margin-bottom: 16px;
  }
  .reason-num__label {
    font-size: 12px;
    letter-spacing: .24em;
    transform: translateY(-6px);
  }
  .reason-num__value { font-size: 54px; }
  .reason-num::after {
    position: static;
    width: 40px;
    height: 1px;
    align-self: center;
    margin-left: 6px;
  }
  .reason-title {
    margin: 0 0 22px;
    font-size: 26px;
    line-height: 1.55;
    letter-spacing: .04em;
  }
  .reason-text { max-width: 36em; }
  .reason-text p {
    font-size: 15px;
    line-height: 1.9;
  }

  /* 麻酔オプション：2項目を横並びにしてコンテナ幅いっぱいに（右側の空白をなくす） */
  .price-detail__anesthesia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 4vw, 56px);
  }
  .price-detail__anesthesia-title { grid-column: 1 / -1; }
  .price-detail__anesthesia-row:last-child { border-bottom: 1px solid var(--border); }

  /* 施術の流れ：全ステップ「左=見出し＋本文（03は麻酔ボックスも）、右=写真」に統一。
     写真は aspect-ratio 4/3、左列は上下の1frスペーサー行で写真に対して垂直中央 */
  .flow__list > div:not(.flow__divider) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40%;
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(28px, 4vw, 56px);
  }
  .flow__step-title {
    grid-column: 1;
    grid-row: 2;
  }
  .flow__row { display: contents; }
  .flow__text {
    grid-column: 1;
    grid-row: 3;
    max-width: 520px;
    margin-top: 10px;
  }
  .flow__photo,
  .flow__photo--wide {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
  }
  /* 03のみ行が1つ多い：麻酔ボックスは本文の下（同じ左列）に
     （共通ルールと同じ詳細度になるよう .flow__list > div を付ける） */
  .flow__list > div.flow__step--anesthesia { grid-template-rows: 1fr auto auto auto 1fr; }
  .flow__step--anesthesia .flow__anesthesia {
    grid-column: 1;
    grid-row: 4;
    margin-top: 16px;
  }

  /* 02・04は左右反転（画像左・テキスト右） */
  .flow__list > div.flow__step--reverse {
    grid-template-columns: 40% minmax(0, 1fr);
  }
  .flow__step--reverse .flow__step-title,
  .flow__step--reverse .flow__text { grid-column: 2; }
  .flow__step--reverse .flow__photo,
  .flow__step--reverse .flow__photo--wide { grid-column: 1; }

  /* ステップ間の区切り矢印（▼）をひと回り大きく */
  .flow__divider-arrow {
    border-left-width: 12px;
    border-right-width: 12px;
    border-top-width: 13px;
  }

  /* モニターの感想：飾りの引用符はセクションからカード内右上へ移し、見出しとの被りをなくす */
  .user-voice::before { content: none; }
  .voice-card::before {
    content: "“";
    position: absolute;
    top: 6px;
    right: 18px;
    font-family: Georgia, serif;
    font-size: clamp(90px, 9vw, 150px);
    line-height: 1;
    color: rgba(169, 138, 75, .15);
    pointer-events: none;
  }

  /* 数字表示（価格・POINT番号・ステップ番号）を明朝 weight 500 に統一 */
  .case__price-value strong,
  .reason-num__value,
  .price-detail__row-price { font-weight: 500; }

  /* hover：色替えは既存のhover色を使い、変化を .2s で滑らかに。FAQ行にもhoverを追加 */
  .btn-primary,
  .btn-secondary,
  .btn-secondary--dark,
  .btn-tertiary--dark,
  .site-header__btn,
  .sns__card,
  .sns__card-cta,
  .fixed-cta__link {
    transition: background-color .2s, color .2s, border-color .2s;
  }
  .faq__q { transition: color .2s; }
  .faq__q:hover { color: var(--price-gold); }

  /* 最終CTA：見出しを写真の中央に置く（暗幕は基本CSSで全幅に適用） */
  .final-cta__title {
    left: 0;
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    text-align: center;
  }

  /* クリニック情報：ラベル列の折り返しを防ぐ（「クリニック名」の2行折れ解消） */
  .clinic-info__label {
    flex: 0 0 8em;
    white-space: nowrap;
  }

  /* CTAペア：全箇所「中央寄せ・2本横並び・同じ幅(--cta-col)・同じ高さ(--cta-height)」に統一 */
  .cases__cta,
  .final-cta__cta {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .cases__cta .btn-primary,
  .cases__cta .btn-secondary,
  .final-cta__cta .btn-primary--lg,
  .final-cta__cta .btn-secondary--dark,
  .final-cta__cta .btn-tertiary--dark {
    flex: 0 1 var(--cta-col);
    min-width: 0;
    min-height: var(--cta-height);
  }

  /* セクションの縦リズム：全セクションで --section-pad-y に統一。
     例外は下記1つのみ（隣と背景が連続し、paddingが2重に見えるため片側を0にする）。 */
  .cases,
  .user-voice,
  .price-detail,
  .reasons,
  .menu,
  .flow,
  .faq,
  .sns {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
  }
  /* 例外1: モニターの感想と料金詳細は同じ背景色で連続するため、境界の余白は料金詳細のpadding-topのみで作る */
  .user-voice { padding-bottom: 0; }
  .concern { padding-bottom: var(--section-pad-y); }
  .final-cta__body { padding-bottom: var(--section-pad-y); }
  .clinic-info {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
  }

  /* 見出しと本文の間隔も --heading-gap に統一 */
  .cases__head { padding-bottom: var(--heading-gap); }
  .user-voice__head { margin-bottom: var(--heading-gap); }
  .price-detail__title { margin-bottom: var(--heading-gap); }
  .reasons__head { padding-bottom: var(--heading-gap); }
  .menu__head { padding-bottom: var(--heading-gap); }
  .flow__title { margin-bottom: var(--heading-gap); }
  .faq__title { margin-bottom: var(--heading-gap); }
  .clinic-info__title { margin-bottom: var(--heading-gap); }
}

/* ================= SP adjustments (767px以下のみ / PCには影響しない) ================= */
@media (max-width: 767px) {

  /* 選ばれる理由：POINT 2〜5は小さめの動画領域と説明を交互に配置 */
  .reason:nth-child(n + 2) { padding: 20px 16px; }
  .reason:nth-child(n + 2) .reason-body { padding: 0; }
  .reason:nth-child(n + 2) .reason-content {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }
  .reason:nth-child(n + 2) .reason-content .reason-text {
    grid-column: 1;
    grid-row: 1;
  }
  .reason:nth-child(n + 2) .reason-content .reason-media {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  .reason:nth-child(n + 2) .reason-content .reason-media img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
  .reason:nth-child(odd):not(:first-child) .reason-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .reason:nth-child(odd):not(:first-child) .reason-content .reason-media { grid-column: 1; }
  .reason:nth-child(odd):not(:first-child) .reason-content .reason-text { grid-column: 2; }

  /* KV：コピーとバッジを通常フローに戻し、サブコピーとバッジの間隔を詰める */
  /* 施術の流れ：各ステップを「見出し→画像→本文」の縦並びに */
  .flow__row {
    flex-direction: column;
    align-items: stretch;
  }
  .flow__row .flow__photo {
    order: -1;
    flex-basis: auto;
    width: 100%;
  }

  /* ヘッダー：SPは予約ボタン群を出さず（導線は追従CTAに集約）、ロゴを大きく */
  .site-header__cta { display: none; }
  .site-header__logo-img { height: 34px; }

  /* セクション間の余白：SPは全体的にひと回り広く統一 */
  .cases,
  .user-voice,
  .price-detail,
  .sns,
  .reasons,
  .menu,
  .flow,
  .faq {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .concern { padding-bottom: 52px; }
  .clinic-info { padding-bottom: 52px; }

  /* 症例：SPは写真を1行目、説明を2行目に配置 */
  .case {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
  }
  .case + .case { margin-top: 36px; }

  /* 症例下のCTAペア：SPは縦並びに */
  .cases__cta { flex-direction: column; }

  /* SNS導線：Instagram・公式LINEのカードを縦並びに
     （flex-basis:0のままだと縦方向で高さ0になるためautoに戻す） */
  .sns__links { flex-direction: column; }
  .sns__card { flex: 0 0 auto; }

  /* 追従CTA：SPはスクロール量に関係なく常時表示（プレビュー環境でも確実に追従） */
  .fixed-cta { transform: none; }
  /* アイコンは各ボタンの最上段（友だち追加・カウンセリング予約・電話お問い合わせの上）に表示。
     アイコンを含むspanをdisplay:contentsで解体し、order:-1でボタン先頭へ移す */
  .fixed-cta__link--line .fixed-cta__link-title,
  .fixed-cta__link--counsel .fixed-cta__link-title,
  .fixed-cta__link--tel .fixed-cta__link-sub { display: contents; }
  .fixed-cta__icon {
    display: block;
    order: -1;
    width: 17px;
    height: 17px;
    margin-bottom: 3px;
  }
  /* アイコンの上に余白を確保しつつ、補足テキストとメインテキストの行間は詰める */
  .fixed-cta__link {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 1px;
  }
  /* 行ボックス由来の上下余白も削って2行を近づける */
  .fixed-cta__link-title,
  .fixed-cta__link-sub { line-height: 1.1; }
  /* 電話番号が2行に折れないよう、SPは少し縮めて1行固定 */
  .fixed-cta__link--tel .fixed-cta__link-sub {
    white-space: nowrap;
    font-size: 11.5px;
    letter-spacing: 0;
  }
}

/* ================= WordPress（Snow Monkey）が注入する要素の無効化 ================= */
/* テーマが wp_footer で全ページに出力するオーバーレイ検索UI等はLPでは使わない。
   （テーマCSSを遮断しているため、放置すると裸のフォームがフッター下に見えてしまう） */
#sm-overlay-search-box,
.p-overlay-search-box,
.c-overlay-container {
  display: none !important;
}

/* ================= 一時非表示: モニターの感想 =================
   「モニターの感想」セクションの掲載を一旦停止（2026-09-16）。
   再表示するときはこのブロックごと削除する。 */
.user-voice {
  display: none !important;
}

/* ================= privacy policy page ================= */
/* 下部固定CTAがないページでは body の逃げ余白を使わない */
.policy-page { padding-bottom: 0; }
.policy {
  background: var(--bg);
  padding: clamp(40px, 5vw, 72px) var(--pad) clamp(56px, 6vw, 96px);
}
.policy__inner { max-width: 820px; margin-inline: auto; }
.policy__title {
  margin-bottom: clamp(28px, 4vw, 48px);
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: .1em;
  text-align: center;
  color: var(--heading);
}
.policy h2 {
  margin: clamp(32px, 4vw, 48px) 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold2);
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: .04em;
  color: var(--heading);
}
.policy p {
  margin-bottom: 1em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
  text-wrap: pretty;
}
.policy ul {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.policy li {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}
.policy__contact { padding: 16px 20px; background: var(--bg-alt2); border: 1px solid var(--border); }
.policy__date {
  margin-top: clamp(32px, 4vw, 48px);
  text-align: right;
  color: var(--muted);
}

/* ================= 一時非表示: 施術の流れ 03（麻酔） =================
   麻酔ステップの掲載を一旦停止（2026-09-18）。再表示するときはこのブロックごと削除する。
   直後の区切り線（▼）も一緒に消し、区切りが2つ連続しないようにする。 */
.flow__step--anesthesia,
.flow__step--anesthesia + .flow__divider {
  display: none !important;
}

/* FLOW 03・04の横長写真は元画像の16:9比率を維持する */
.flow__photo--landscape {
  position: relative;
  aspect-ratio: 16 / 9;
}
.flow__photo--landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SNSセクションのみ上余白を設けない */
.sns {
  padding-top: 0;
}