@charset "UTF-8";
/* 基本設定 */
:root {
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Shippori Mincho", serif;
  --color-focus: #ffffff;
  --center-width: min(750px, 100vw);
  --sp-fixed-bar-height: calc(var(--center-width) * .94 * 58 / 366);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: #26352f;
  font-family: var(--font-sans);
  background-color: #f5f1e8;
}

body,
body * {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
}

a[href^="tel:"] {
  pointer-events: none;
}

@media (max-width: 1099px) {
  body {
    padding-bottom: calc(var(--sp-fixed-bar-height) + 16px + env(safe-area-inset-bottom, 0px));
  }

  a[href^="tel:"] {
    pointer-events: auto;
  }
}
@media (min-width: 1100px) {
  :root {
    --center-width: 375px;
  }
}
/* ============================================================
   全体レイアウト
   - 背景: 1枚の写真を画面全体に固定表示（px幅指定はしない）
   - PC(1100px〜): 左レール / LP本体 / 右レール の3カラム横並び
       ・中央 375px 固定  ・右レール 348px 固定（等倍）
       ・左レールだけが伸縮する（最大643px）
   - 〜1099px: LP本体のみ。背景は「PC背景左」を cover で敷く
   ============================================================ */
/* 背景：画面いっぱい。幅が広がっても全画面まで広がる */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("../images/bg-sp.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  pointer-events: none;
}

/* ステージ（3カラムの器） */
.l-stage {
  position: relative;
  z-index: 1;
}

.l-stage > main {
  position: relative;
  z-index: 1;
}

@media (min-width: 1100px) {
  .page-bg {
    /* PCはモックの全体背景（左右で共有している1枚） */
    background-image: url("../images/bg.webp");
  }

  .l-stage {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  /* 左レール：唯一伸縮する列。1100pxまで縮み、1366px以上では643pxで頭打ち */
  .l-stage > .pc-rail--left {
    flex: 1 1 643px;
    min-width: 0;
    max-width: 643px;
  }

  /* 中央：LP本体。常に375px */
  .l-stage > main {
    flex: 0 0 375px;
    width: 375px;
    min-width: 375px;
  }

  /* 右レール：等倍固定。縮小しない */
  .l-stage > .pc-rail--right {
    flex: 0 0 348px;
    width: 348px;
    min-width: 348px;
  }
}
/* ヘッダー */
.site-header {
  display: none;
}

/* セクション画像 */
.l-sp {
  width: 100%;
  margin-inline: auto;
}

.section {
  margin: 0;
}

.section__inner {
  width: min(750px, 100%);
  margin-inline: auto;
  padding: 0;
}

.images {
  position: relative;
  overflow: hidden;
  width: 100%;
  line-height: 0;
}

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

.images--01-mv {
  aspect-ratio: 1125/2610;
}

.images--02-doctor-choice {
  aspect-ratio: 1125/1368;
}

.images--03-cta-01 {
  aspect-ratio: 1125/2277;
}

.images--04-problems {
  aspect-ratio: 1125/2289;
}

.images--05-mechanism {
  aspect-ratio: 1125/2970;
}

.images--06-option {
  aspect-ratio: 1125/2400;
}

.images--07-faq-anxiety {
  aspect-ratio: 1125/3222;
}

.images--08-what-is {
  aspect-ratio: 1125/1665;
}

.images--09-considering {
  aspect-ratio: 1125/2043;
}

.images--10-skill-gap {
  aspect-ratio: 1125/2091;
}

.images--11-reasons {
  aspect-ratio: 1125/5034;
}

.images--12-compare {
  aspect-ratio: 1125/1899;
}

.images--13-not-recommended {
  aspect-ratio: 1125/1260;
}

.images--14-cta-02 {
  aspect-ratio: 1125/2820;
}

.images--15-approach {
  aspect-ratio: 1125/9036;
}

.images--16-doctor {
  aspect-ratio: 1125/6753;
}

.images--17-cases {
  aspect-ratio: 1125/2913;
}

.images--18-fee {
  aspect-ratio: 1125/2238;
}

.images--19-flow-reserve {
  aspect-ratio: 1125/2625;
}

.images--20-flow-treatment {
  aspect-ratio: 1125/3012;
}

.images--21-group {
  aspect-ratio: 1125/2151;
}

.images--22-faq {
  aspect-ratio: 1125/4629;
}

.images--23-footer {
  aspect-ratio: 1125/1854;
}

.hotspot--01-mv-1 {
  left: 4.8%;
  top: 1.3652%;
  width: 34.1333%;
  height: 3.1854%;
}

.hotspot--03-cta-01-1 {
  left: 10.1333%;
  top: 63.5046%;
  width: 80%;
  height: 9.4862%;
}

.hotspot--03-cta-01-2 {
  left: 25.3333%;
  top: 80.3689%;
  width: 49.6%;
  height: 3.4256%;
}

.hotspot--14-cta-02-1 {
  left: 10.1333%;
  top: 70%;
  width: 80%;
  height: 7.6596%;
}

.hotspot--14-cta-02-2 {
  left: 25.3333%;
  top: 84.2553%;
  width: 49.6%;
  height: 2.766%;
}

@media (min-width: 1100px) {
  /* 中央カラムは3カラムのflexで位置が決まるので幅だけ指定する */
  .section__inner {
    width: 375px;
    margin-inline: 0;
  }
}
/* フッターの下（追従CTAバーぶんの余白）は背景写真を出さず白地にする */
.footer-gap {
  display: none;
}

@media (max-width: 1099px) {
  .footer-gap {
    display: block;
    width: 100%;
    height: calc(var(--sp-fixed-bar-height) + 16px + env(safe-area-inset-bottom, 0px));
    background-color: #fff;
  }

  body {
    padding-bottom: 0;
  }
}
/* 画像重ねリンク */
.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  line-height: 0;
  transition: opacity .3s, transform .3s;
}

.hotspot img {
  display: block;
  width: 100%;
  height: 100%;
}

.hotspot:hover {
  opacity: .85;
  transform: translateY(-2px);
}

.hotspot:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hotspot--logo {
  background: transparent;
}

/* ============================================================
   追従CTA（1100px未満のみ）
   Figma 550:1829 = 366×58 の中に WEB(0,0,136×58) / LINE(146,0,164×58) / TEL(320,12,46×46)
   ============================================================ */
.fixed-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.fixed-cta__inner {
  position: relative;
  width: calc(var(--center-width) * .94);
  max-width: 705px;
  margin-inline: auto;
  aspect-ratio: 366/58;
}

.fixed-cta__btn {
  position: absolute;
  display: block;
  line-height: 0;
  transition: opacity .3s;
  pointer-events: auto;
}

.fixed-cta__btn img {
  display: block;
  width: 100%;
  height: auto;
}

.fixed-cta__btn:hover {
  opacity: .85;
}

.fixed-cta__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 366×58 に対する実測比率 */
.fixed-cta__btn--web {
  left: 0;
  top: 0;
  width: 37.1585%;
  /* 136/366 */
}

.fixed-cta__btn--line {
  left: 39.8907%;
  /* 146/366 */
  top: 0;
  width: 44.8087%;
  /* 164/366 */
}

.fixed-cta__btn--tel {
  left: 87.4317%;
  /* 320/366 */
  top: 20.6897%;
  /* 12/58 */
  width: 12.5683%;
  /* 46/366 */
}

@media (min-width: 1100px) {
  .fixed-cta {
    display: none;
  }
}
/* ============================================================
   PCレール（1100px以上でのみ表示）
   左：ロゴ＋キャッチ＋予約ボタン群（列幅に応じて伸縮）
   右：ページ内ナビ＋WEB予約＋電話（348px 等倍固定・テキストで組む）
   ============================================================ */
.pc-rail {
  display: none;
}

@media (min-width: 1100px) {
  .pc-rail {
    display: block;
  }

  /* ------------------------------------------------------------
     左レール：デザイン 643 × 778 を基準に % で配置する。
     列幅が縮むと中身も一緒に縮む。
     ------------------------------------------------------------ */
  .pc-rail__left-inner {
    position: sticky;
    top: 0;
    display: flow-root;
    /* 子のmargin-topが突き抜けて相殺されるのを防ぐ */
    width: 100%;
    height: 100vh;
  }

  /* 上からの margin で位置を制御する（%は左レール幅基準なので、
     列が縮めば余白も中身も一緒に縮む） */
  .pc-rail__catch {
    width: 99.8445%;
    /* 642/643 */
    margin-top: 14.9301%;
    /* 96/643 */
    margin-left: 0.1555%;
    /* 1/643 */
    line-height: 0;
  }

  .pc-rail__catch img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ロゴ部分だけをリンクにする（キャッチ画像内 205,0 / 228×50） */
  .pc-rail__logo-link {
    position: absolute;
    left: 31.9314%;
    /* 205/642 */
    top: 0;
    width: 35.5140%;
    /* 228/642 */
    height: 11.4416%;
    /* 50/437 */
    display: block;
  }

  /* 左下のCTA（WEB / LINE / TEL） */
  .pc-rail__left-cta {
    position: relative;
    width: 82.2706%;
    /* 529/643 */
    margin-top: 11.8195%;
    /* キャッチ下端533 → CTA上端609 = 76/643 */
    margin-left: 9.0202%;
    /* 58/643 */
    line-height: 0;
  }

  .pc-rail__left-cta-img {
    position: absolute;
    top: 0;
    display: block;
    height: auto;
  }

  /* 529px幅に対する3分割（Figma実測） */
  .pc-rail__left-cta-img--web,
  .pc-rail__left-link--web {
    left: 0;
    width: 32.0330%;
  }

  .pc-rail__left-cta-img--line,
  .pc-rail__left-link--line {
    left: 32.0330%;
    width: 32.6173%;
  }

  .pc-rail__left-cta-img--tel,
  .pc-rail__left-link--tel {
    left: 64.6503%;
    width: 35.3497%;
  }

  /* 高さの土台を作るため1枚だけ通常フローに置く */
  .pc-rail__left-cta-img--web {
    position: relative;
    left: 0;
  }

  .pc-rail__link {
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
    transition: opacity .3s;
  }

  .pc-rail__link:hover {
    opacity: .75;
  }

  .pc-rail__link:focus-visible,
  .pc-rail__logo-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* ------------------------------------------------------------
     右レール：348px 等倍固定。文字は画像でなくテキストで組む。
     ------------------------------------------------------------ */
  .pc-rail__right-inner {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100vh;
    padding: 96px 24px 0;
  }

  .pc-rail__nav {
    display: flex;
    flex-direction: column;
    width: 300px;
  }

  .pc-rail__nav-link {
    position: relative;
    display: block;
    height: 24px;
    margin-bottom: 10px;
    /* 24 + 10 = ピッチ34px */
    padding-left: 18px;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.3px;
    color: #06140f;
    text-decoration: none;
    white-space: nowrap;
  }

  .pc-rail__nav-link:last-child {
    margin-bottom: 0;
  }

  /* 見出し先頭の四芒星。CSSのclip-path近似だと腕の太さが合わないため、
     Figmaのpathをそのまま持つSVGを配置する（innerRadius 0.4 / #987616） */
  .pc-rail__nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
    background-image: url("../images/icon-star.svg");
    background-repeat: no-repeat;
    background-size: 12px 12px;
  }

  .pc-rail__nav-link:hover {
    opacity: .7;
  }

  .pc-rail__divider {
    width: 300px;
    height: 1px;
    margin-top: 24px;
    /* ナビ下端460 → 484.5(Figma) */
    background-color: rgba(255, 255, 255, 0.5);
  }

  .pc-rail__right-web {
    display: block;
    width: 300px;
    margin-top: 24px;
    /* 485 → 509 */
    line-height: 0;
    transition: opacity .3s;
  }

  .pc-rail__right-web img {
    display: block;
    width: 100%;
    height: auto;
  }

  .pc-rail__right-web:hover {
    opacity: .85;
  }

  .pc-rail__lead {
    width: 300px;
    margin: 19px 0 0;
    /* 581 → 600 */
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 19.2px;
    letter-spacing: 0.24px;
    text-align: center;
    color: #06140f;
  }

  .pc-rail__right-tel {
    display: block;
    width: 186px;
    margin: 9px 0 0 57px;
    /* 619 → 628 / 左は 81-24 */
    line-height: 0;
    transition: opacity .3s;
  }

  .pc-rail__right-tel img {
    display: block;
    width: 100%;
    height: auto;
  }

  .pc-rail__right-tel:hover {
    opacity: .85;
  }

  .pc-rail__hours {
    display: flex;
    align-items: center;
    gap: 7px;
    /* 149 → 156 */
    width: 300px;
    white-space: nowrap;
    margin-top: 8px;
    /* 654 → 662 */
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 19.2px;
    letter-spacing: 0.24px;
    color: #06140f;
  }

  /* 幅はFigma実測（右レール348基準）。折り返させない */
  .pc-rail__hours-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
  }

  .pc-rail__hours-group--reception {
    width: 125px;
  }

  .pc-rail__hours-group--closed {
    width: 168px;
  }

  .pc-rail__hours-chip {
    display: inline-block;
    flex: 0 0 auto;
    background-color: #5b5b5b;
    color: #fff;
    font-size: 12px;
    line-height: 19.2px;
    text-align: center;
    white-space: nowrap;
  }

  .pc-rail__hours-group--reception .pc-rail__hours-chip {
    width: 53px;
  }

  .pc-rail__hours-group--closed .pc-rail__hours-chip {
    width: 41px;
  }
}
/* ------------------------------------------------------------
   左レールのボタン群は、列が狭くなると文字が潰れて読めなくなるため
   一定幅以下で非表示にする。
   1240px = 左レール約517px = デザイン比 約80%
   ------------------------------------------------------------ */
@media (max-width: 1239.98px) {
  .pc-rail__left-cta {
    display: none;
  }
}

/* ============================================================
   表示速度対策：画面外セクションの描画をスキップする
   （縦長ページのレイアウト/ペイント負荷を大幅に削減）
   contain-intrinsic-size を入れて省略中もスクロール量を正しく保つ
   ============================================================ */
.section {
  content-visibility: auto;
}

/* MVは初期表示に必要なので対象外 */
.section--01-mv {
  content-visibility: visible;
}

.section--01-mv { contain-intrinsic-height: auto 870px; }
.section--02-doctor-choice { contain-intrinsic-height: auto 456px; }
.section--03-cta-01 { contain-intrinsic-height: auto 759px; }
.section--04-problems { contain-intrinsic-height: auto 763px; }
.section--05-mechanism { contain-intrinsic-height: auto 990px; }
.section--06-option { contain-intrinsic-height: auto 800px; }
.section--07-faq-anxiety { contain-intrinsic-height: auto 1074px; }
.section--08-what-is { contain-intrinsic-height: auto 555px; }
.section--09-considering { contain-intrinsic-height: auto 681px; }
.section--10-skill-gap { contain-intrinsic-height: auto 697px; }
.section--11-reasons { contain-intrinsic-height: auto 1678px; }
.section--12-compare { contain-intrinsic-height: auto 633px; }
.section--13-not-recommended { contain-intrinsic-height: auto 420px; }
.section--14-cta-02 { contain-intrinsic-height: auto 940px; }
.section--15-approach { contain-intrinsic-height: auto 3012px; }
.section--16-doctor { contain-intrinsic-height: auto 2251px; }
.section--17-cases { contain-intrinsic-height: auto 971px; }
.section--18-fee { contain-intrinsic-height: auto 746px; }
.section--19-flow-reserve { contain-intrinsic-height: auto 875px; }
.section--20-flow-treatment { contain-intrinsic-height: auto 1004px; }
.section--21-group { contain-intrinsic-height: auto 717px; }
.section--22-faq { contain-intrinsic-height: auto 1543px; }
.section--23-footer { contain-intrinsic-height: auto 618px; }