@charset "UTF-8";
/* ==========================================================================
   Object / Project（p-*）— ページ固有の見た目
   ========================================================================== */

/* ── トップのヒーロー（全幅・写真＋ゆるい曲線。時間カードは下に重ねる） ── */
.p-hero {
  position: relative;
  background:
    radial-gradient(circle at 88% 8%, rgba(43, 110, 104, 0.10), transparent 42%),
    radial-gradient(circle at 4% 92%, rgba(43, 110, 104, 0.06), transparent 38%),
    var(--v-cream);
  padding-block: 56px 96px;
}

@media (min-width: 768px) {
  .p-hero {
    padding-block: 88px 128px;
  }
}

.p-hero__in {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .p-hero__in {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }

  .p-hero__text {
    flex: 1 1 46%;
  }

  .p-hero__visual {
    flex: 1 1 54%;
  }
}

.p-hero__tit {
  font-size: 32px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--v-ink);
}

@media (min-width: 768px) {
  .p-hero__tit {
    font-size: 44px;
  }
}

.p-hero__lead {
  margin-top: 18px;
  max-width: 26em;
}

.p-hero__tel {
  margin-top: 28px;
}

/* 写真（角丸大。無いときはスロット枠が同じ場所に出る） */
.p-hero__visual .c-figure img,
.p-hero__visual .c-imgslot {
  border-radius: 24px;
}

.p-hero__visual .c-figure {
  box-shadow: var(--v-shadow-float);
  border-radius: 24px;
}

/* ヒーロー下端のゆるい曲線（次の白い面へ繋ぐ） */
.p-hero__curve {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  width: 100%;
  height: 44px;
  display: block;
}

@media (min-width: 768px) {
  .p-hero__curve {
    height: 72px;
  }
}

/* ── 診療時間カード（ヒーローに重ねるフロート） ── */
.p-hourscard {
  background: var(--v-white);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow);
  padding: 26px;
}

.p-hourscard--float {
  position: relative;
  z-index: 2;
  margin-top: -72px;
  box-shadow: var(--v-shadow-float);
}

@media (min-width: 768px) {
  .p-hourscard--float {
    margin-top: -96px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 8px 40px;
    align-items: start;
    padding: 36px 40px;
  }
}

/* 重ねない版（アドバンスのトップ。FV直下の導線の帯を隠さない）。
   ⚠️ 下の余白を忘れない — 次の節（生成りの面）が直に触れると詰まって見える（本人指摘 2026-08-15） */
.p-hourscard--plain {
  margin-block: 44px 64px;
  border: 1px solid var(--v-line);
}

@media (min-width: 768px) {
  .p-hourscard--plain {
    margin-block: 48px 88px;
  }
}

@media (min-width: 768px) {
  .p-hourscard--plain {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 8px 40px;
    align-items: start;
    padding: 36px 40px;
  }

  .p-hourscard--plain .p-hourscard__body {
    grid-column: 2;
  }

  .p-hourscard--plain .p-hourscard__tit {
    grid-row: 1;
    margin-bottom: 0;
  }
}

.p-hourscard__tit {
  font-size: 20px;
  color: var(--v-main-dark);
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .p-hourscard--float .p-hourscard__tit {
    margin-bottom: 0;
  }
}

.p-hourscard__night {
  font-size: 14px;
  color: var(--v-muted);
  margin-top: 12px;
}

@media (min-width: 768px) {
  .p-hourscard--float .p-hourscard__body {
    grid-column: 2;
  }

  .p-hourscard--float .p-hourscard__tit {
    grid-row: 1;
  }
}

/* ── 診療内容の3枚（写真カード） ── */
.p-services {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .p-services {
    flex-direction: row;
  }

  .p-services > * {
    flex: 1 1 0;
  }
}

.p-service {
  background: var(--v-white);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}

.p-service:hover {
  translate: 0 -4px;
  box-shadow: var(--v-shadow-float);
}

.p-service__ph .c-figure img,
.p-service__ph .c-imgslot {
  border-radius: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-service__ph .c-imgslot {
  border-width: 0 0 2px;
}

.p-service__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-service__tit {
  font-size: 21px;
  color: var(--v-ink);
}

.p-service__desc {
  font-size: 15px;
}

/* ── 大切にしていること（写真＋01〜04） ── */
.p-usp {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .p-usp {
    grid-template-columns: 5fr 6fr;
    gap: 56px;
    align-items: center;
  }
}

.p-usp__list {
  display: grid;
  gap: 28px;
}

.p-usp__item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.p-usp__num {
  flex-shrink: 0;
  font-family: var(--v-font-head);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--v-main-ghost);
  letter-spacing: 0.02em;
  translate: 0 4px;
}

.p-usp__tit {
  font-size: 19px;
  color: var(--v-ink);
  margin-bottom: 4px;
}

.p-usp__body {
  font-size: 15px;
}

/* ── 診療案内ページの節（写真と本文の2カラム・左右交互） ── */
.p-svc {
  display: grid;
  gap: 24px;
}

.p-svc + .p-svc {
  margin-top: 64px;
}

@media (min-width: 768px) {
  .p-svc {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  .p-svc--rev .p-svc__ph {
    order: 2;
  }
}

.p-svc__tit {
  font-size: 24px;
  color: var(--v-ink);
  margin-bottom: 10px;
}

.p-svc__items {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.p-svc__items li {
  background: var(--v-white);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius-s);
  padding: 12px 18px;
}

.p-svc__items b {
  color: var(--v-main-dark);
}

.p-svc__items span {
  display: block;
  font-size: 14px;
  color: var(--v-muted);
}

/* ── ページ題字（下層） ── */
.p-pagehead {
  background:
    radial-gradient(circle at 90% 16%, rgba(43, 110, 104, 0.09), transparent 45%),
    var(--v-cream);
  padding-block: 32px 44px;
}

@media (min-width: 768px) {
  .p-pagehead {
    padding-block: 40px 56px;
  }
}

.p-pagehead__en {
  font-family: var(--v-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v-main);
  margin-top: 14px;
}

.p-pagehead__tit {
  font-size: 30px;
  letter-spacing: 0.05em;
  margin-top: 2px;
  color: var(--v-ink);
}

@media (min-width: 768px) {
  .p-pagehead__tit {
    font-size: 38px;
  }
}

.p-pagehead__lead {
  margin-top: 10px;
  color: var(--v-muted);
}

/* ── アクセス ── */
.p-access {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .p-access {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 48px;
  }
}

.p-access__addr {
  font-family: var(--v-font-head);
  font-size: 20px;
  color: var(--v-ink);
}

/* ── お問い合わせ ── */
.p-contact__tel {
  background: var(--v-white);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow);
  padding: 36px 24px;
  text-align: center;
}

.p-contact__teltit {
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  color: var(--v-main-dark);
  margin-bottom: 12px;
}

.p-contact__hours {
  margin-top: 20px;
  font-size: 14px;
  text-align: left;
}

.p-contact__form {
  margin-top: 56px;
}

.p-contact__demo {
  margin-block: 20px;
  font-weight: 700;
  text-align: center;
}

.p-contact__submit {
  border: 0;
  cursor: pointer;
  width: 100%;
  max-width: 360px;
  display: block;
  margin-inline: auto;
}

/* ── サンクス ── */
.p-thanks {
  text-align: center;
  padding-block: 24px;
}

.p-thanks__tit {
  font-size: 26px;
  color: var(--v-ink);
}


/* ══ 1ページ（ライト）専用 ══════════════════════════════ */

/* 🔴 L3-C つなぎ・写真の帯。中盤に1回だけ置いて、いったん息を吸わせる。
   ⚠️ 2回以上やらない（縫い目の装飾が続くと、そこが主役に見える）。 */
.p-band {
  overflow: hidden;
  max-height: 260px;
}

@media (min-width: 768px) {
  .p-band { max-height: 340px; }
}

.p-band .c-figure { margin: 0; }

.p-band .c-figure img {
  border-radius: 0;
  width: 100%;
  object-fit: cover;
  object-position: center 35%;
  aspect-ratio: 16 / 5;
}

.p-band .c-imgslot { border-radius: 0; }

/* 🔴 L4 決めた瞬間に押せる場所（このページで2回目）。3回以上は置かない */
.p-midcta {
  background: var(--v-white);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow);
  padding: 28px 24px;
  text-align: center;
}

.p-midcta__lead {
  margin-bottom: 14px;
}

.p-contact__formtit {
  font-size: 20px;
  color: var(--v-main-dark);
  margin-bottom: 12px;
}

/* ══ ライト専用のファーストビュー「写真の帯＋名刺の見開き」 ══════
   🔴 本人の指摘（2026-08-16）:「FVが5ページ版と全く一緒」→ 構図を変えた。
      さらに「せっかくの犬と猫の写真なのに、猫の顔が見えなくなっている」→
      🔴 **文字を写真の上に重ねるのをやめた。**重ねると、どこかで必ず被写体が潰れる。
      写真は帯として全部見せ、その上に「名刺」を重ねる。

   プランの違いは**枚数ではなくFVの仕事**で見せる（正本は config/plans.php の role / fv）:
     ライト       = 見つけて、連絡してもらう → **1画面に連絡先が全部そろう（密度が高い）**
     スタンダード = 読んで、納得してもらう   → 印象づくり。詳細は下層へ（余白が広い）
   ⚠️ 「格好よさ」で差をつけない。色・書体・写真・部品はスタンダードと同じ。 */
.p-fv {
  background: var(--v-cream);
  padding-bottom: 48px;
}

/* 写真の帯。
   🔴 帯の高さと名刺の重なりは、**犬と猫の顔が名刺で隠れない**ように決めてある
      （本人の指摘 2026-08-16「せっかくの猫の顔が見えなくなっている」）。
      この写真は被写体が縦に約310px（原寸）ぶんあるので、
      **見えている帯の高さがそれを下回ると、必ずどちらかの顔が切れる。**
   ⚠️ 画像を差し替えたら、必ず目で顔の位置を確認すること（顔の位置は写真ごとに違う）。
   ⚠️ 「このページの中身」が1画面に入らなくても構わない。
      同じ5項目は上部の緑のナビにも出ているので、全体像は最初の画面で伝わる。 */
.p-fv__photo .c-figure,
.p-fv__photo .c-imgslot {
  margin: 0;
  border-radius: 0;
}

/* 🔴 高さを px で決めない。**画面が広いほど写真が拡大され、見える範囲が減る**ため
   （2026-08-16、幅1920で猫の顔が切れた）。比率で決めれば、どの幅でも同じだけ写る。
   数字の意味: 原寸1400×764 の写真の、縦 470px ぶんを見せる → 1400/470。
   object-position 10% ＝ 犬の耳の先から、猫の胸元まで入る位置。
   🔴 **判定は機械でやること**（幅 375/768/1100/1440/1920/2560 で、
      名刺に隠れず見えている原寸の下端が「猫の顔の下端＝原寸y410」を超えるか）。 */
.p-fv__photo .c-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;          /* スマホ: ほぼ全身が入る */
  object-fit: cover;
  object-position: center 10%;
  border-radius: 0;
}

@media (min-width: 768px) {
  .p-fv__photo .c-figure img { aspect-ratio: 1400 / 470; }
}

/* 名刺。写真に少しだけ重ねる */
.p-fv__card {
  position: relative;
  z-index: 1;
  margin-top: -36px;
  background: var(--v-white);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow-float);
  padding: 26px 22px;
}

@media (min-width: 768px) {
  .p-fv__card {
    margin-top: -40px;
    padding: 32px 40px;
  }

/* 🔴 とても広い画面では、名刺の重なりも相対的に大きくなる。写真の見える量を守るため深追いしない */
@media (min-width: 1600px) {
  .p-fv__card { margin-top: -32px; }
}
}

/* 🔴 見開き＝左「誰か・どう連絡するか」／右「いつ開いているか」 */
.p-fv__spread {
  display: grid;
  gap: 22px;
}

@media (min-width: 768px) {
  .p-fv__spread {
    grid-template-columns: 1fr auto;
    gap: 44px;
    align-items: start;
  }
}

.p-fv__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v-font-head);
  font-weight: 700;
  color: var(--v-main);
  margin-bottom: 6px;
}

.p-fv__tit {
  font-size: 28px;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

@media (min-width: 768px) {
  .p-fv__tit { font-size: 36px; }
}

.p-fv__lead {
  margin-top: 12px;
  font-size: 15px;
  max-width: 26em;
}

.p-fv__tel { margin-top: 18px; }

.p-fv__right .c-hours th,
.p-fv__right .c-hours td {
  padding: 8px 6px;
  font-size: 13px;
}

.p-fv__right .c-hours__note {
  margin-top: 6px;
  font-size: 13px;
}

.p-fv__night {
  margin-top: 10px;
  font-size: 12px;
  color: var(--v-muted);
  max-width: 24em;
}

/* 🔴 このページの中身（1枚ものにしか要らない要素）。
   ⚠️ **1画面のうちに見えること**が要件（ライトの商品性＝1画面に全部そろう）。
      帯の高さ・名刺の重なり・見出しの大きさは、この1行を守るために決めてある。 */
.p-fv__index {
  margin-top: 20px;
  border-top: 1px solid var(--v-line);
  padding-top: 16px;
}

.p-fv__indextit {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--v-muted);
  margin-bottom: 8px;
}

.p-fv__index ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.p-fv__index a {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--v-cream);
  border: 1px solid var(--v-line);
  color: var(--v-ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.p-fv__index a:hover {
  border-color: var(--v-main);
  color: var(--v-main);
}

.p-fv__index a span {
  font-family: var(--v-font-head);
  font-size: 12px;
  color: var(--v-main);
}


/* ══ アドバンス専用 ══════════════════════════════════════
   🔴 差別化の正本は 制作の標準/36、実装計画は デモ制作/37。
   FVの仕事 = 「主張＋証拠への導線＋動き」（config/plans.php の fv と一致させる）。
   2色目（--v-sub からし色）はここでだけ使う。用途は3つに限定（37 §4-A2）。 */

/* ── FV「主張のパネル＋写真」──
   サムネイルでの見分け＝濃い青緑の大きな面（ライト=写真帯＋名刺／スタンダード=生成りの面）。
   🔴 写真の上に文字を重ねない（ライトで2回失敗した教訓 — 35 §FVの3鉄則）。
   スマホ: パネル→写真→導線の帯の縦積み（写真は原寸比のまま＝切らない）。
   PC: 左パネル＋右写真、その下に「証拠への導線」の全幅の帯。
       🔴 導線をパネルに入れないのは、パネルが写真より縦に伸びて右下に空白が出たため
          （2026-08-15 実測）。パネルは名前・主張・電話だけにして、写真と高さを揃える。
       写真は cover で切るが、被写体の実測から object-position 55% を決めてある:
       原寸1400×764。犬 x460〜700・猫 x720〜1140（顔はともに上半分）。
   🔴 判定は機械でやること（幅 900/1100/1440/1920 で見える窓を計算し、
      犬の左端 x460・猫の顔の右端 x870 が窓に入るか — bin/check-sample.php の後の目視手順）。 */
.p-afv {
  background: var(--v-main);
}

@media (min-width: 900px) {
  .p-afv__in {
    display: grid;
    grid-template-columns: minmax(400px, 46%) 1fr;
    align-items: stretch;
    min-height: 460px;
  }
}

.p-afv__panel {
  color: var(--v-white);
  padding: 44px 22px 40px;
}

@media (min-width: 900px) {
  .p-afv__panel {
    padding: 64px 48px;
    padding-left: max(24px, calc((100vw - 1080px) / 2));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.p-afv__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v-font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--v-cream);
  margin-bottom: 10px;
}

.p-afv__tit {
  font-size: 30px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--v-white);
}

@media (min-width: 900px) {
  .p-afv__tit {
    font-size: 40px;
  }
}

.p-afv__lead {
  margin-top: 14px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
  max-width: 30em;
}

.p-afv__tel {
  margin-top: 22px;
}

/* 青緑の面の上では、電話ボタンを白にする */
.p-afv .c-btn--tel {
  background: var(--v-white);
  border-color: var(--v-white);
  color: var(--v-main-dark);
}

.p-afv .c-btn--tel:hover {
  background: var(--v-cream);
  border-color: var(--v-cream);
  color: var(--v-main-dark);
}

.p-afv .c-tel__note {
  color: rgba(255, 255, 255, 0.75);
}

/* 証拠への導線の帯（FVの下・全幅）。ラベルの下線がからし色＝2色目の用途③ */
.p-afv__proofbar {
  background: var(--v-main-dark);
  padding-block: 18px;
}

.p-afv__proofin {
  display: grid;
  gap: 6px;
}

@media (min-width: 900px) {
  .p-afv__proofin {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 40px;
  }
}

.p-afv__prooftit {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
}

.p-afv__proof {
  display: grid;
}

@media (min-width: 900px) {
  .p-afv__proof {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
  }
}

.p-afv__proof a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: 2px;
  padding: 8px 2px;
  color: var(--v-white);
  text-decoration: none;
  transition: translate 0.2s ease;
}

.p-afv__proof a:hover {
  color: var(--v-white);
  translate: 4px 0;
}

@media (max-width: 899px) {
  .p-afv__proof li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}

.p-afv__proof b {
  justify-self: start;
  font-size: 16px;
  padding-bottom: 2px;
  background: linear-gradient(var(--v-sub), var(--v-sub)) left bottom / 100% 2px no-repeat;
}

.p-afv__proof span {
  grid-column: 1 / -1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.p-afv__proof a::after {
  content: "→";
  grid-column: 2;
  grid-row: 1;
  color: rgba(255, 255, 255, 0.7);
}

.p-afv__photo {
  overflow: hidden;
}

.p-afv__photo .c-figure,
.p-afv__photo .c-imgslot {
  margin: 0;
  border-radius: 0;
  height: 100%;
}

.p-afv__photo .c-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

@media (min-width: 900px) {
  .p-afv__photo .c-figure img {
    height: 100%;
    object-fit: cover;
    object-position: 55% 50%;
  }
}

/* FVの登場（CSSだけの1回きりの動き。JSに依存しない）。
   ⚠️ 出現順は 名前→主張→説明→電話→（写真）→導線の帯。順に見せる以外の動きは無い */
@media (prefers-reduced-motion: no-preference) {
  .p-afv__panel > * {
    opacity: 0;
    translate: 0 14px;
    animation: afv-in 0.65s ease forwards;
  }

  .p-afv__panel > :nth-child(2) { animation-delay: 0.08s; }
  .p-afv__panel > :nth-child(3) { animation-delay: 0.16s; }
  .p-afv__panel > :nth-child(4) { animation-delay: 0.24s; }

  .p-afv__photo {
    opacity: 0;
    animation: afv-in 0.8s ease 0.1s forwards;
  }

  .p-afv__proofbar {
    opacity: 0;
    animation: afv-in 0.65s ease 0.35s forwards;
  }

  @keyframes afv-in {
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}

/* ── 選ばれる理由（アドバンス版: 写真なし2列・番号はからし色＝用途②に準ずる飾り） ── */
.p-usp--adv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .p-usp--adv {
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
  }
}

.p-usp--adv .p-usp__num {
  color: var(--v-sub-ghost);
}

/* ── 院内紹介の抜粋（トップ）: 写真3枚の帯 ── */
.p-facpre {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .p-facpre {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }
}

.p-facpre .c-figure img,
.p-facpre .c-imgslot {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-facpre__cap {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--v-ink);
}

/* ── 料金の抜粋（トップ） ── */
.p-pricepre {
  background: var(--v-white);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow);
  padding: 26px 26px 22px;
}

.p-pricepre td {
  padding: 12px 6px;
  border-bottom: 1px solid var(--v-line);
}

.p-pricepre tr:last-child td {
  border-bottom: 0;
}

.p-pricepre td:last-child {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.p-pricepre__note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--v-muted);
}

/* ── 院内紹介ページ: 来院の順路（01〜06。番号がからし色＝2色目の用途②） ──
   ⚠️ 写真は同じ大きさで並べない（素材写真の目録に見える — competitorDislike への答え）。
      交互レイアウト＋番号で「順路」にする */
.p-fac {
  display: grid;
  gap: 20px;
}

.p-fac + .p-fac {
  margin-top: 56px;
}

@media (min-width: 768px) {
  .p-fac {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    align-items: center;
  }

  .p-fac--rev .p-fac__ph {
    order: 2;
  }
}

.p-fac__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.p-fac__num {
  font-family: var(--v-font-head);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--v-sub-ghost);
  letter-spacing: 0.02em;
}

.p-fac__tit {
  font-size: 24px;
  color: var(--v-ink);
}

.p-fac__body {
  margin-top: 10px;
  max-width: 30em;
}

/* ── スタッフ（声・スタッフのページ後半）。photoRealOnly=代表者・スタッフ → 顔写真なし・文字だけ ── */
.p-staff {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .p-staff {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }
}

.p-staff__card {
  background: var(--v-white);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow);
  padding: 26px 26px 24px;
}

.p-staff__role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--v-sub-dark);
}

.p-staff__name {
  font-size: 21px;
  color: var(--v-ink);
  margin-top: 4px;
}

.p-staff__word {
  margin-top: 10px;
  font-size: 14px;
}

/* ── 声の一覧（声のページ） ── */
.p-voicegrid {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .p-voicegrid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* ページ内アンカーの着地に少し余白（料金ページの節へ診療案内から飛ぶ） */
.p-anchor {
  scroll-margin-top: 18px;
}


/* ══ アドバンスの動き（本人指示 2026-08-15「25万円の価値に見えるよう、しっかり差別化」） ══
   🔴 すべて transform / opacity / clip-path / background-size だけ（描画性能）。
   🔴 .t-advance（body）でアドバンスに閉じ込める — ライト・スタンダードの動きは据え置き＝プランの差。
   🔴 reduced-motion では全停止。JSが死んでも全部見える（隠すのは .js が付いたときだけ）。
   種類は「順に見せる」の延長に限定: 寄りが引く・線が引かれる・下から拭き上がる・順に並ぶ。 */
@media (prefers-reduced-motion: no-preference) {

  /* ── FVの写真: ゆっくり寄りが引く（1回だけ・2.2秒） ── */
  .t-advance .p-afv__photo .c-figure img {
    animation: afv-kb 2.2s cubic-bezier(0.22, 0.6, 0.36, 1) both;
  }

  @keyframes afv-kb {
    from { scale: 1.07; }
    to { scale: 1; }
  }

  /* ── FVの導線: からし色の下線が左から引かれる（帯の出現に続けて1本ずつ） ── */
  .t-advance .p-afv__proof b {
    background-size: 0 2px;
    animation: afv-line 0.55s ease forwards;
  }

  .t-advance .p-afv__proof li:nth-child(1) b { animation-delay: 0.55s; }
  .t-advance .p-afv__proof li:nth-child(2) b { animation-delay: 0.75s; }
  .t-advance .p-afv__proof li:nth-child(3) b { animation-delay: 0.95s; }

  @keyframes afv-line {
    to { background-size: 100% 2px; }
  }

  /* ── 節見出しの英字: 字間が締まりながら現れる（全ページ） ── */
  .js .t-advance .c-heading[data-reveal]:not(.c-heading--num) .c-heading__en {
    opacity: 0;
    letter-spacing: 0.5em;
    transition: opacity 0.7s ease 0.1s, letter-spacing 1s cubic-bezier(0.22, 0.6, 0.36, 1) 0.1s;
  }

  .js .t-advance .c-heading[data-reveal].is-in:not(.c-heading--num) .c-heading__en {
    opacity: 1;
    letter-spacing: 0.22em;
  }

  /* ── 写真の拭き上げ（data-reveal="wipe"）: 下から現れ、寄りが引く ── */
  .js .t-advance [data-reveal="wipe"] {
    opacity: 1;
    translate: 0 0;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.9s cubic-bezier(0.22, 0.6, 0.36, 1);
  }

  .js .t-advance [data-reveal="wipe"] img {
    scale: 1.08;
    transition: scale 1.3s cubic-bezier(0.22, 0.6, 0.36, 1);
  }

  .js .t-advance [data-reveal="wipe"].is-in {
    clip-path: inset(0 0 0 0);
  }

  .js .t-advance [data-reveal="wipe"].is-in img {
    scale: 1;
  }

  /* ── 番号（01〜）の飛び出し: 少しはずむ ── */
  .js .t-advance .p-usp__item[data-reveal] .p-usp__num,
  .js .t-advance .p-fac[data-reveal] .p-fac__num {
    opacity: 0;
    scale: 0.4;
    transition: scale 0.7s cubic-bezier(0.34, 1.4, 0.44, 1) 0.15s, opacity 0.4s ease 0.15s;
  }

  .js .t-advance .p-usp__item[data-reveal].is-in .p-usp__num,
  .js .t-advance .p-fac[data-reveal].is-in .p-fac__num {
    opacity: 1;
    scale: 1;
  }

  /* ── 表の行が上から順に（data-reveal="rows"）。入れ物は隠さず、行だけ動かす ── */
  .js .t-advance [data-reveal="rows"] {
    opacity: 1;
    translate: 0 0;
  }

  .js .t-advance [data-reveal="rows"] tbody tr {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 0.5s ease, translate 0.5s ease;
  }

  .js .t-advance [data-reveal="rows"].is-in tbody tr {
    opacity: 1;
    translate: 0 0;
  }

  .js .t-advance [data-reveal="rows"].is-in tbody tr:nth-child(1) { transition-delay: 0.05s; }
  .js .t-advance [data-reveal="rows"].is-in tbody tr:nth-child(2) { transition-delay: 0.12s; }
  .js .t-advance [data-reveal="rows"].is-in tbody tr:nth-child(3) { transition-delay: 0.19s; }
  .js .t-advance [data-reveal="rows"].is-in tbody tr:nth-child(4) { transition-delay: 0.26s; }
  .js .t-advance [data-reveal="rows"].is-in tbody tr:nth-child(5) { transition-delay: 0.33s; }
  .js .t-advance [data-reveal="rows"].is-in tbody tr:nth-child(6) { transition-delay: 0.40s; }

  /* ── 声の引用記号: くるっと起き上がる ── */
  .js .t-advance .c-quote[data-reveal] .c-quote__mark {
    opacity: 0;
    scale: 0.3;
    rotate: -12deg;
    transition: scale 0.6s cubic-bezier(0.34, 1.4, 0.44, 1) 0.2s, rotate 0.6s cubic-bezier(0.34, 1.4, 0.44, 1) 0.2s, opacity 0.35s ease 0.2s;
  }

  .js .t-advance .c-quote[data-reveal].is-in .c-quote__mark {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  /* ── 院内写真: 触れるとゆっくり寄る ── */
  .t-advance .p-fac__ph .c-figure {
    overflow: hidden;
    border-radius: var(--v-radius);
  }

  .t-advance .p-fac__ph img {
    transition: scale 0.9s ease;
  }

  .t-advance .p-fac:hover .p-fac__ph img {
    scale: 1.04;
  }
}

/* ── 現在地ドット（トップだけ・広い画面だけ）。demo.js の現在地スパイ（data-spy）をそのまま使う。
      JSが無くてもアンカーとして効く。印が付かないだけ ── */
.p-dots {
  display: none;
}

@media (min-width: 1200px) {
  .p-dots {
    display: block;
    position: fixed;
    right: 16px;
    top: 50%;
    translate: 0 -50%;
    z-index: 20;
  }

  .p-dots ul {
    display: grid;
    gap: 14px;
  }

  .p-dots a {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--v-line);
    transition: background 0.3s, scale 0.3s;
  }

  .p-dots a:hover {
    background: var(--v-main);
  }

  .p-dots a[data-here] {
    background: var(--v-main);
    scale: 1.4;
  }
}


/* ══ ピン留めストーリー「選ばれている理由」（アドバンスのトップ） ══════
   🔴 本人指示（2026-08-15）「構成ごと変えて、見せる所に見せるアニメーションを」。
   スクロールで 01→04 が入れ替わる。進行は demo.js が書く --p（0〜1）と data-step（0〜3）。
   ピンは position: sticky。🔴 GSAP等は使わない（D96）— 同じ体験を素の CSS/JS で作る。
   ⚠️ スマホ（<900px）・reduced-motion・JSなし は「ただの縦並び」に落ちる（html.has-scrub が付かない） */
.p-story {
  background: var(--v-cream);
  padding-block: 64px;
}

@media (min-width: 768px) {
  .p-story {
    padding-block: 96px;
  }
}

/* ── 通常レイアウト（落ちたときの姿）: 縦並び ── */
.p-story__stage {
  display: grid;
  gap: 8px;
}

.p-story__panel {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: baseline;
  padding-block: 14px;
}

.p-story__num {
  font-family: var(--v-font-head);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--v-sub-ghost);
}

.p-story__tit {
  font-size: 20px;
  color: var(--v-ink);
}

.p-story__body {
  grid-column: 2;
  font-size: 15px;
  margin-top: 4px;
}

.p-story__rail,
.p-story__visuals {
  display: none;
}

/* ── ピン留めレイアウト（PC＋動きOK＋JSあり） ── */
@media (min-width: 900px) {
  .has-scrub .p-story {
    /* 100vh のピン + 240vh ぶんのスクロールで4段（1段 60vh） */
    height: 340vh;
    padding-block: 0;
  }

  .has-scrub .p-story__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .has-scrub .p-story__in {
    width: 100%;
  }

  /* 🔴 大きな画面ほど中身も育てる（本人指摘 2026-08-15「大画面だと上下の余白がすごい」）。
     写真の高さ・番号・文字を vh 基準の clamp にして、1画面に占める割合を画面によらず保つ */
  .has-scrub .p-story__stage {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 clamp(40px, 5vw, 72px);
    align-items: center;
    margin-top: clamp(8px, 2vh, 28px);
  }

  /* 進行レール（からし色が進む） */
  .has-scrub .p-story__rail {
    display: block;
    position: relative;
    width: 3px;
    height: clamp(300px, 42vh, 480px);
    border-radius: 2px;
    background: var(--v-line);
    overflow: hidden;
  }

  .has-scrub .p-story__rail i {
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--p, 0) * 100%);
    background: var(--v-sub);
    border-radius: 2px;
  }

  /* 4枚の主張を同じ場所に重ね、data-step で1枚だけ見せる */
  .has-scrub .p-story__panels {
    position: relative;
    min-height: clamp(340px, 46vh, 520px);
  }

  .has-scrub .p-story__panel {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    opacity: 0;
    translate: 0 34px;
    transition: opacity 0.45s ease, translate 0.45s ease;
    pointer-events: none;
  }

  .has-scrub .p-story__num {
    display: block;
    font-size: clamp(110px, 16vh, 180px);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
  }

  .has-scrub .p-story__tit {
    font-size: clamp(30px, 3.8vh, 42px);
  }

  .has-scrub .p-story__body {
    grid-column: auto;
    font-size: clamp(16px, 1.9vh, 19px);
    max-width: 24em;
    margin-top: 12px;
  }

  /* 右の写真もクロスフェード。高さは画面の高さから取る（大画面で小さく浮かない） */
  .has-scrub .p-story__visuals {
    display: block;
    position: relative;
    height: clamp(360px, 56vh, 680px);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--v-shadow-float);
  }

  .has-scrub .p-story__vis {
    position: absolute;
    inset: 0;
    opacity: 0;
    scale: 1.06;
    transition: opacity 0.6s ease, scale 1.1s cubic-bezier(0.22, 0.6, 0.36, 1);
  }

  .has-scrub .p-story__vis .c-figure,
  .has-scrub .p-story__vis .c-imgslot {
    height: 100%;
    margin: 0;
  }

  .has-scrub .p-story__vis .c-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  /* いまの段だけ見せる（主張と写真は同じ data-i で対にしてある） */
  .has-scrub .p-story[data-step="0"] [data-i="0"],
  .has-scrub .p-story[data-step="1"] [data-i="1"],
  .has-scrub .p-story[data-step="2"] [data-i="2"],
  .has-scrub .p-story[data-step="3"] [data-i="3"] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    pointer-events: auto;
  }
}

/* ══ ピン留め横ギャラリー「院内のようす」（アドバンスのトップ） ══════
   縦スクロールで写真6枚＋導線カードが横に流れる（来院の順路の体験）。
   流す距離は demo.js が実測して --shift（px）に書き、セクションの高さも 100vh+shift にする。
   ⚠️ 落ちたときの姿 = 指でめくる横スナップの帯（それはそれで気持ちいい形にしておく） */
.p-gal {
  background: var(--v-main-pale);
  padding-block: 64px;
}

@media (min-width: 768px) {
  .p-gal {
    padding-block: 96px;
  }
}

.p-gal__ghost,
.p-gal__hint {
  display: none;
}

.p-gal__head {
  width: 100%;
}

.p-gal__head .c-heading {
  margin-bottom: 20px;
}

/* ── 通常レイアウト: 横スナップの帯 ── */
.p-gal__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 20px 14px;
  -webkit-overflow-scrolling: touch;
}

.p-gal__item {
  flex: 0 0 78%;
  scroll-snap-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .p-gal__item {
    flex-basis: 44%;
  }
}

.p-gal__ph .c-figure img,
.p-gal__ph .c-imgslot {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--v-radius);
}

.p-gal__cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
  font-weight: 700;
  color: var(--v-ink);
}

.p-gal__num {
  font-family: var(--v-font-head);
  font-weight: 700;
  font-size: 20px;
  color: var(--v-sub-dark);
}

.p-gal__more {
  flex: 0 0 auto;
  align-self: center;
  scroll-snap-align: center;
  display: grid;
  place-content: center;
  gap: 6px;
  min-width: 200px;
  min-height: 140px;
  padding: 24px 28px;
  border-radius: var(--v-radius);
  background: var(--v-main);
  color: var(--v-white);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, translate 0.2s;
}

.p-gal__more:hover {
  background: var(--v-main-dark);
  color: var(--v-white);
  translate: 0 -2px;
}

.p-gal__more span {
  font-size: 22px;
}

/* ── ピン留めレイアウト ── */
@media (min-width: 900px) {
  .has-scrub .p-gal {
    /* 高さは demo.js が 100vh + 流す距離 で上書きする */
    padding-block: 0;
    position: relative;
  }

  .has-scrub .p-gal__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(32px, 5vh, 60px);
    overflow: hidden;
  }

  /* 背面の大きな英字（飾りは書体で出す — アイコンは増やさない方針のまま） */
  .has-scrub .p-gal__ghost {
    display: block;
    position: absolute;
    right: -0.04em;
    bottom: -0.14em;
    font-family: var(--v-font-head);
    font-weight: 700;
    font-size: min(24vw, 320px);
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(43, 110, 104, 0.06);
    pointer-events: none;
    user-select: none;
  }

  .has-scrub .p-gal__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
  }

  .has-scrub .p-gal__head .c-heading {
    margin-bottom: 0;
  }

  .has-scrub .p-gal__hint {
    display: block;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--v-muted);
    padding-bottom: 6px;
  }

  .has-scrub .p-gal__hint::after {
    content: "→";
    display: inline-block;
    margin-left: 6px;
    animation: gal-nudge 1.8s ease-in-out infinite;
  }

  @keyframes gal-nudge {
    0%, 100% { translate: 0 0; }
    50% { translate: 6px 0; }
  }

  /* 帯: スクロール量ぶん左へ流す（--p × --shift） */
  .has-scrub .p-gal__track {
    overflow: visible;
    scroll-snap-type: none;
    gap: 28px;
    padding: 0 22vw 0 max(20px, calc((100vw - 1080px) / 2));
    translate: calc(var(--p, 0) * var(--shift, 0px) * -1) 0;
    will-change: translate;
  }

  /* カードの幅は「画面の高さ」からも取る（大画面で写真が小さく浮かない。写真の高さ ≒ 幅×2/3） */
  .has-scrub .p-gal__item {
    flex: 0 0 clamp(400px, min(42vw, 74vh), 680px);
  }

  .has-scrub .p-gal__ph .c-figure img,
  .has-scrub .p-gal__ph .c-imgslot {
    border-radius: 20px;
    box-shadow: var(--v-shadow);
  }

  .has-scrub .p-gal__cap {
    font-size: 17px;
  }

  .has-scrub .p-gal__num {
    font-size: 26px;
  }

  .has-scrub .p-gal__more {
    min-width: 240px;
    min-height: 180px;
  }
}

/* reduced-motion では矢印の揺れだけ止める（レイアウトはそもそも通常版になる） */
@media (prefers-reduced-motion: reduce) {
  .p-gal__hint::after {
    animation: none;
  }
}


/* ── FVのゆっくりズーム（スクロール連動・アドバンスのみ） ──
   離れるほど写真がわずかに寄る（--vy は demo.js が書くスクロール量 0〜1200）。
   🔴 拡大方向にしか動かない＝どの瞬間も隙間や見切れが出ない（被写体の判定は倍率1のときが最小） */
@media (prefers-reduced-motion: no-preference) {
  .js .t-advance .p-afv__photo .c-figure {
    scale: calc(1 + var(--vy, 0) * 0.00006);
  }
}


/* ── 犬と猫の2枚並び（声のページのつなぎ。検収済みの予備写真の席） ── */
.p-duo {
  display: grid;
  gap: 16px;
  padding-block: 8px 56px;
}

@media (min-width: 768px) {
  .p-duo {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-bottom: 72px;
  }
}

.p-duo .c-figure img,
.p-duo .c-imgslot {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--v-radius);
}