@charset "UTF-8";
/* ==========================================================================
   かなわクリニック  style.css
   Figma: かなわクリニック / TOP (898:17171), SP TOP (902:28527)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* color (Figma variables) */
  --c-white: #ffffff;
  --c-gold: #a88b69;
  --c-black: #474747;
  --c-beige: #d4cab8;
  --c-ivory: #fbf7f1;
  --c-green-lt: #d6ddd6;
  --c-green: #80a097;

  /* font */
  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-en: "Cormorant Infant", "Times New Roman", serif;

  /* layout */
  --inner: 960px;
  --gutter: 40px;
  --sect-pad: 100px;
  --header-h: 132px;
  --header-h-sp: 70px;
  --spbar-h: 70px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 400;
  color: var(--c-black);
  background: var(--c-white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .3s ease, color .3s ease, background-color .3s ease, border-color .3s ease;
}

a:hover {
  opacity: .7;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.l-inner {
  width: min(var(--inner), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.l-sect {
  padding-block: var(--sect-pad);
}

/* --------------------------------------------------------------------------
   4. Common component : ボタン (Figma Component 17)
   -------------------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 20px 20px 20px 30px;
  border: 1px solid var(--c-gold);
  border-radius: 30px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
  white-space: nowrap;
}

/* 料金一覧の「◯◯の詳細を見る」は角丸 3px（Figma Frame 226） */
.c-btn--sq {
  border-radius: 3px;
}

.c-btn:hover {
  opacity: 1;
  background: var(--c-gold);
  color: var(--c-white);
  border-color: var(--c-gold);
}

/* 白背景（ベージュ地の上で使う） */
.c-btn--white {
  background: var(--c-white);
  border-color: var(--c-white);
}

.c-btn--white:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-white);
}

/* ゴールド塗り */
.c-btn--fill {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-white);
}

.c-btn--fill:hover {
  background: transparent;
  color: var(--c-gold);
}

/* 矢印（1本線＋45°のかえし） */
.c-btn__arrow {
  position: relative;
  flex: none;
  width: 25px;
  height: 8px;
}

.c-btn__arrow::before,
.c-btn__arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: inherit;
}

.c-btn__arrow::before {
  left: 0;
  width: 25px;
}

/* Figma は線の右端から「上」へ伸びるかえし（rotate 45deg / 10px） */
.c-btn__arrow::after {
  right: 0;
  width: 10px;
  transform-origin: right bottom;
  transform: rotate(45deg);
}

/* ホバーで矢印の大きさは変えない（背景と文字色だけ変わる） */

/* --------------------------------------------------------------------------
   5. Common component : セクション見出し
   -------------------------------------------------------------------------- */
.c-secttl {
  color: var(--c-gold);
  line-height: 1;
}

.c-secttl__ja {
  display: block;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .3em;
  line-height: 1;
}

.c-secttl__en {
  display: block;
  font-family: var(--f-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  letter-spacing: 0;
}

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

.c-secttl--light {
  color: var(--c-white);
}

/* 左右に罫線を伴う見出し */
.c-linettl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.c-linettl::before,
.c-linettl::after {
  content: "";
  width: 100px;
  height: 1px;
  background: var(--c-gold);
}

/* 罫線で挟んだラベル（院長紹介） */
.c-labelttl {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 80px;
  border-top: 1px solid var(--c-gold);
  border-bottom: 1px solid var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--c-gold);
}

/* カテゴリー小見出し（外科 / 皮膚科） */
.c-catttl {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--f-serif);
  font-size: 36px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.c-catttl::before {
  content: "";
  width: 200px;
  height: 1px;
  background: var(--c-gold);
}

/* --------------------------------------------------------------------------
   6. Header (PC)  Figma 898:24276
   -------------------------------------------------------------------------- */
/* Figma 実測（898:17375）:
     上段 Frame509 = x20〜1400（左20 / 右40 / 高さ57）
     ナビ Frame510 = x40〜1400（左右40 / 高さ15）
     縦: 20 → 57 → 20 → 15 → 20 ＝ 132px */
.l-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 40px 20px 20px;
  background: var(--c-ivory);
}

.l-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* トップページだけロゴを h1 で囲む。見た目は変えない */
.l-logo-h1 {
  margin: 0;
  font: inherit;
}

.l-logo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--c-green);
  white-space: nowrap;
}

.l-logo__sub {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: .05em;
  line-height: 1;
}

.l-logo__name {
  font-family: var(--f-serif);
  font-size: 24px;
  letter-spacing: .05em;
  line-height: 1;
}

.l-header__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.c-hcta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 220px;
  height: 57px;
  border-radius: 3px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
}

.c-hcta img {
  width: 20px;
  height: 20px;
  flex: none;
}

.c-hcta--web {
  background: var(--c-gold);
  color: var(--c-white);
}

.c-hcta--line {
  background: var(--c-green);
  color: var(--c-white);
}

.c-hcta--web:hover,
.c-hcta--line:hover {
  opacity: .8;
}

.c-hcta--tel {
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: var(--c-white);
  color: var(--c-green);
}

.c-hcta__label {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .05em;
  line-height: 1;
}

.c-hcta__num {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 数字は1かたまり（flexのgapが数字とハイフンの間に入らないようにする） */
.c-hcta__num .c-num,
.c-hcta__num span {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .05em;
}

.c-hcta__num .is-hyphen {
  font-family: var(--f-serif);
  font-weight: 200;
}

/* グローバルナビ */
.l-gnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  width: 100%;
  padding-left: 20px;
}

.l-gnav__item {
  position: relative;
}

.l-gnav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-black);
  white-space: nowrap;
}

.l-gnav__link:hover {
  opacity: 1;
  color: var(--c-gold);
}

/* 〉のアイコンは currentColor。Figma（898:17375）ではグリーン */
.l-gnav__chev {
  width: 13px;
  height: 5px;
  flex: none;
  color: var(--c-green);
  transition: transform .3s ease;
}

.l-gnav__item:hover .l-gnav__chev {
  transform: translateY(2px);
}

/* ドロップダウン */
.l-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 3), auto);
  gap: 24px 60px;
  margin-top: 15px;
  padding: 30px 40px;
  background: var(--c-ivory);
  box-shadow: 0 4px 20px rgba(71, 71, 71, .1);
  opacity: 0;
  visibility: hidden;
  translate: -50% 8px;
  transition: opacity .3s ease, visibility .3s ease, translate .3s ease;
}

.l-gnav__item:hover .l-dropdown,
.l-gnav__item:focus-within .l-dropdown {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

.l-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-black);
  white-space: nowrap;
}

/* Figma 898:24119 の Line 14 はグリーン */
.l-dropdown a::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--c-green);
  flex: none;
}

.l-dropdown a:hover {
  opacity: 1;
  color: var(--c-gold);
}

/* --------------------------------------------------------------------------
   7. Header (SP)  Figma 902:29066 / ドロワー 902:29116
   -------------------------------------------------------------------------- */
.l-header-sp {
  display: none;
}

.l-hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--c-gold);
}

.l-hamburger span {
  width: 20px;
  height: 1px;
  border-radius: .5px;
  background: var(--c-white);
  transition: transform .3s ease, opacity .3s ease;
}

.is-drawer-open .l-hamburger span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.is-drawer-open .l-hamburger span:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 35, 61, .3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}

.is-drawer-open .l-drawer {
  opacity: 1;
  visibility: visible;
}

.l-drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px 50px;
  background: var(--c-ivory);
  translate: 100% 0;
  transition: translate .4s cubic-bezier(.22, 1, .36, 1);
}

.is-drawer-open .l-drawer__panel {
  translate: 0 0;
}

/* Figma のナビ幅は 176px。フォントの実寸差で「クリニックについて」が
   数px はみ出して折り返すため、折り返しを禁止して幅は内容に追従させる。 */
.l-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 176px;
}

.l-drawer__nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--c-black);
}

.l-drawer__nav img {
  width: 20px;
  height: 20px;
  flex: none;
}

/* SP 下部固定 CTA バー  Figma 902:30268 */
.l-spbar {
  display: none;
}

/* --------------------------------------------------------------------------
   8. Hero  Figma 898:17172
   -------------------------------------------------------------------------- */
/* Figma のヒーローは「ヘッダー込みで 810px」。
   ヘッダーは position:fixed なので、画像領域は 810 − ヘッダー高 = 678px になる。 */
/* ヘッダー込みで画面一杯。ヘッダーは position:fixed なので
   padding-top でその分の場所を空ける（Figma の padding-top:132px と同じ考え方）。 */
.p-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  padding-top: var(--header-h);
  overflow: hidden;
}

/* 左は固定画像（Figma の 911 : 529 の比率を保つ） */
.p-hero__main {
  flex: 0 0 63.26%;
  height: 100%;
}

.p-hero__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* 右カラムは Figma 通り「4枚を縦に並べて上下にはみ出させる」静止レイアウト。
   （1440px 時: 529px 幅 × 4枚 = 1190.25px を 810px の枠に上下均等にブリード） */
/* 右は縦に無限スクロール（同じ5枚を2セット並べて -50% まで動かす） */
.p-hero__side {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.p-hero__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: heroScrollY 45s linear infinite;
}

.p-hero__side:hover .p-hero__track {
  animation-play-state: paused;
}

@keyframes heroScrollY {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-hero__track {
    animation: none;
  }
}

/* flex アイテムは min-height:auto（＝中身の高さ）が効いて aspect-ratio が
   無視されるため、min-height を 0 にして画像は絶対配置で敷く。 */
/* 写真は切り抜かず、元の縦横比のまま積む */
.p-hero__track>li {
  position: relative;
  flex: none;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Figma の各画像にかかっている薄い青のオーバーレイ */
.p-hero__track>li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(184, 210, 255, .1);
}

.p-hero__track img {
  width: 100%;
  height: auto;
}

.p-hero__body {
  position: absolute;
  inset: auto 0 0;
  padding: 0 240px 150px;
  color: var(--c-white);
  /* Figma 1048:21023 の drop shadow（0 0 5px / 20%）。濃くしすぎない */
  filter: drop-shadow(0 0 5px rgba(10, 35, 61, .2));
}

.p-hero__ttl {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.p-hero__lead {
  margin-top: 20px;
  font-family: var(--f-sans);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.p-hero__vertical {
  position: absolute;
  right: 30px;
  bottom: 30px;
  font-family: var(--f-en);
  font-size: 80px;
  line-height: 1;
  color: var(--c-white);
  opacity: .4;
  writing-mode: vertical-rl;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. News  Figma 898:17186
   -------------------------------------------------------------------------- */
.p-news {
  background: var(--c-ivory);
  padding-block: var(--sect-pad);
}

.p-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 70px;
  margin-bottom: 50px;
}

.p-news__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* 記事のカテゴリー（お知らせ個別ページの日付の横） */
.c-newsitem__cat {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 30px;
  border-radius: 3px;
  background: var(--c-gold);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   10. About Kanawa  Figma 898:17197
   -------------------------------------------------------------------------- */
.p-about {
  background: var(--c-ivory);
  padding-block: var(--sect-pad);
}

.p-about__intro {
  display: flex;
  align-items: center;
  gap: 100px;
  padding-right: max(var(--gutter), calc((100% - var(--inner)) / 2));
  margin-bottom: 70px;
}

.p-about__slider {
  flex: none;
  width: 550px;
}

.p-about__slider .swiper {
  border-radius: 0 10px 10px 0;
  overflow: hidden;
}

/* Figma の枠サイズ（550×550）は維持し、画像は自動トリミングで収める。 */
.p-about__slider img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.p-about__slider .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.p-about__slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background: var(--c-beige);
  opacity: 1;
}

.p-about__slider .swiper-pagination-bullet-active {
  background: var(--c-gold);
}

.p-about__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.p-about__catch {
  font-family: var(--f-serif);
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.p-about__txt {
  margin-top: 20px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .05em;
}

.p-about__btnwrap {
  display: flex;
  justify-content: flex-end;
}

/* 院長紹介 */
.p-doctor {
  display: flex;
  align-items: center;
  gap: 100px;
  margin-bottom: 50px;
}

.p-doctor__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* TOP はこの段落が .p-doctor__txts の中にあるので、そちらにも効くようにする */
.p-doctor__catch,
.p-doctor__txts .p-doctor__catch {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.p-doctor__txts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-doctor__txts p {
  font-size: 15px;
  line-height: 2;
  letter-spacing: .05em;
}

.p-doctor__photo {
  flex: none;
  width: 350px;
}

/* 写真は Figma の枠どおりの比率で書き出してあるので、枠で切り取らない */
.p-doctor__photo img {
  display: block;
  width: 350px;
  height: auto;
  border-radius: 5px;
}

/* 実績 */
.p-stats {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.c-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--c-beige);
}

.c-stat__head {
  width: 100%;
  padding: 10px;
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-white);
  text-align: center;
}

.c-stat__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Figma（898:17226）はカード高さ 127px 固定＝値エリア 87px。
     注記の有無で高さが変わらないよう最低高さを持たせる。 */
  min-height: 87px;
  padding: 15px 10px;
}

/* 48px の数字と 18px の単位でフォントが違うため、ボックス下端揃え（flex-end）だと
   文字の下端がずれる。Figma は text-box-trim で文字の基準線を揃えているので、
   こちらも baseline で揃える。 */
.c-stat__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  line-height: 1;
}

.c-stat__row span {
  font-family: var(--f-serif);
  font-size: 18px;
  letter-spacing: .05em;
}

/* Figma は text-box-trim:trim-both / cap alphabetic で字面まで箱を詰めているため、
   行の高さがキャップ高（≒0.625em）になる。カードの高さもこれで Figma と揃う。 */
.c-stat__row .c-stat__num {
  font-family: var(--f-en);
  font-size: 48px;
  line-height: .625;
  letter-spacing: 0;
  color: var(--c-gold);
}

.c-stat__row .c-stat__num--sm {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0;
  color: var(--c-black);
}

.c-stat__note {
  font-family: var(--f-serif);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   11. For Beginners  Figma 898:17281
   -------------------------------------------------------------------------- */
.p-beginners__curve {
  position: relative;
  /* 円の直径が 250vw のとき、画面端での下がりは 10.44vw。
     帯をこの高さにすると、どの画面幅でも弧が端まできれいに収まる。
     1440px のとき 150px で、これまでの見た目と同じ。 */
  height: 10.44vw;
  background: var(--c-ivory);
  overflow: hidden;
}

.p-beginners__curve::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  /* 画面幅に対する比率で持たせ、どの幅でも同じ丸みに見えるようにする
     （1440px のとき直径 3610px 相当） */
  width: 250vw;
  aspect-ratio: 1 / 1;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--c-beige);
}

.p-beginners__main {
  background: var(--c-beige);
  padding: 50px 0 var(--sect-pad);
}

.p-beginners__head {
  margin-bottom: 50px;
}

.p-beginners__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 50px;
}

.p-beginners__txt {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.p-beginners__slider {
  overflow: hidden;
}

.p-beginners__track {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-left: 20px;
  width: max-content;
  animation: scrollX 60s linear infinite;
}

/* 写真は Figma の枠どおり正方形で書き出してあるので、枠で切り取らない */
.p-beginners__track img {
  display: block;
  height: auto;
  border-radius: 10px;
}

.p-beginners__track .is-lg img {
  width: 400px;
}

.p-beginners__track .is-sm img {
  width: 300px;
}

@keyframes scrollX {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 15px));
  }
}

/* --------------------------------------------------------------------------
   12. Treatment Menu  Figma 898:27835
   -------------------------------------------------------------------------- */
.p-menu {
  background: var(--c-ivory);
  padding-block: var(--sect-pad);
}

.p-menu__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 50px;
}

.p-menu__headright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.p-menu__note {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.p-menu__group {
  margin-bottom: 50px;
}

.p-menu__group .c-catttl {
  margin-bottom: 20px;
}

/* 1440px 時は Figma 通り 287px×3（合計881px）。
   それ以下では列を可変にして、タブレット幅で横にはみ出さないようにする。 */
.p-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(881px, 100%);
  margin-inline: auto;
}

.c-menucard {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px 10px 10px;
  background: var(--c-white);
  border-radius: 3px;
  transition: box-shadow .3s ease;
}

.c-menucard:hover {
  opacity: 1;
  box-shadow: 0 4px 16px rgba(168, 139, 105, .2);
}

.c-menucard__thumb {
  flex: none;
  width: 100px;
  height: 100px;
  border-radius: 3px;
  background: #e7f0fe;
  overflow: hidden;
}

.c-menucard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1440px 時はちょうど 112px になる（287 − パディング30 − サムネ100 − gap40 − 矢印5）。
   幅が縮んだときは残り幅に追従させる。 */
.c-menucard__ttl {
  flex: 1;
  min-width: 0;
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .05em;
  text-align: center;
}

/* Figma の「〉」はゴールド（1221:21609 の SVG が fill #A88B69） */
.c-menucard__chev {
  flex: none;
  width: 5px;
  height: 13px;
  margin-left: auto;
  color: var(--c-gold);
}

.p-menu__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.p-menu__foot p {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   13. Treatment Cases  Figma 898:17319
   -------------------------------------------------------------------------- */
.p-cases {
  position: relative;
  padding-block: var(--sect-pad);
  background: var(--c-white);
  overflow: hidden;
}

.p-cases::before {
  content: "";
  position: absolute;
  inset: -66px -10px;
  /* Figma は幅いっぱい・高さ 104.45% で敷いているので cover ではなく引き伸ばす */
  background: url("../images/top/cases-bg.jpg") center / 100% 100% no-repeat;
  filter: blur(15px);
}

.p-cases::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .3);
}

.p-cases>* {
  position: relative;
  z-index: 1;
}

.p-cases__head {
  margin-bottom: 50px;
}

.p-cases__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

.p-cases__btnwrap {
  display: flex;
  justify-content: flex-end;
}

.c-case {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-white);
}

.c-case:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.c-case {
  transition: transform .3s ease;
}

/* 写真は切り抜かず、元の縦横比のまま出す */
.c-case__img {
  flex: none;
  background: var(--c-white);
}

.c-case__img img {
  width: 100%;
}

.c-case__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.c-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.c-case__tags span {
  padding: 5px 10px;
  border-radius: 18px;
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-white);
}

.c-case__ttl {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   14. Kanawa column  Figma 898:17330
   -------------------------------------------------------------------------- */
.p-column {
  background: var(--c-ivory);
  padding-top: var(--sect-pad);
}

.p-column__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 50px;
}

.p-column__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* タイトルの行数がちがっても、写真の位置が揃うようにする */
.c-column {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .3s ease;
}

/* 症例一覧のカードと同じホバー */
.c-column:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.c-column__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 20px;
  background: var(--c-white);
}

.c-column__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-column__date {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.c-column__ttl {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.c-column__img {
  flex: none;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.c-column__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 矢印だけの小さいパーツ（カード内） */
.c-arrow {
  position: relative;
  width: 25px;
  height: 8px;
  color: var(--c-gold);
  flex: none;
}

.c-arrow::before,
.c-arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background: currentColor;
}

.c-arrow::before {
  left: 0;
  width: 25px;
}

.c-arrow::after {
  right: 0;
  width: 10px;
  transform-origin: right bottom;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   15. Price list  Figma 898:17341
   -------------------------------------------------------------------------- */
.p-price {
  background: var(--c-ivory);
  padding-block: var(--sect-pad);
}

.p-price__card {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 50px;
  border-radius: 10px;
  background: var(--c-beige);
}

/* 写真は Figma の枠どおり正方形で書き出してあるので、枠で切り取らない */
.p-price__img {
  flex: none;
  width: 350px;
  border-radius: 10px;
  overflow: hidden;
}

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

.p-price__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-price__txt {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .05em;
}

.p-price__btnwrap {
  display: flex;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   16. Instagram  Figma 898:17351
   -------------------------------------------------------------------------- */
.p-insta {
  background: var(--c-white);
  padding-block: var(--sect-pad);
}

.p-insta__head {
  margin-bottom: 50px;
}

.p-insta__lead {
  margin-bottom: 50px;
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}

.p-insta__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.p-insta__list a {
  aspect-ratio: 4 / 5;
  border-radius: 5px;
  overflow: hidden;
}

/* プラグインのショートコードで出すときの受け皿 */
.p-insta__embed {
  margin-bottom: 50px;
}

.p-insta__embed img {
  border-radius: 5px;
}

.p-insta__list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-insta__btnwrap {
  display: flex;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   17. Contact  Figma 898:17362
   -------------------------------------------------------------------------- */
.p-contact {
  background: var(--c-gold);
  padding-block: var(--sect-pad);
}

.p-contact__card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px;
  background: var(--c-white);
}

.p-contact__lead {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .05em;
  text-align: center;
}

.p-contact__btns {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-contact__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.c-cbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 30px;
  border-radius: 3px;
  background: var(--c-gold);
  color: var(--c-white);
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
}

.c-cbtn:hover {
  opacity: .85;
}

/* メールのアイコンだけ 40×27.7。縦横比を保ったまま 40px の枠に収める */
.c-cbtn img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.c-cbtn--tel {
  gap: 20px;
}

.c-cbtn__num {
  display: flex;
  align-items: center;
  gap: 15px;
}

.c-cbtn__num .c-num,
.c-cbtn__num span {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 42px;
  line-height: 1;
  letter-spacing: .05em;
}

.c-cbtn__num .is-hyphen {
  font-family: var(--f-serif);
  font-weight: 200;
  letter-spacing: .019em;
}

/* --------------------------------------------------------------------------
   18. Footer  Figma 311:2568
   -------------------------------------------------------------------------- */
.l-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 100px 120px;
  background: var(--c-white);
}

.l-footer__top {
  display: flex;
  align-items: flex-start;
  gap: 150px;
  width: 100%;
  padding-bottom: 70px;
  border-bottom: 1px solid var(--c-beige);
}

.l-footer__left {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.l-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.l-footer__name {
  font-family: var(--f-serif);
  font-size: 32px;
  line-height: 1;
  letter-spacing: .05em;
}

.l-footer__desc {
  margin-top: 10px;
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.l-footer__sns {
  display: flex;
  align-items: center;
  gap: 30px;
}

.l-footer__sns img {
  width: 50px;
  height: 50px;
}

.l-footer__nav {
  display: flex;
  gap: 70px;
}

.l-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.l-footer__nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .1em;
  white-space: nowrap;
}

.l-footer__nav img {
  width: 25px;
  height: 25px;
  flex: none;
}

.l-footer__right {
  flex: 1;
  min-width: 0;
}

.l-footer__info {
  margin: 0;
}

.l-footer__info>div {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-block: 20px;
  border-bottom: 1px solid var(--c-beige);
}

.l-footer__info>div:first-child {
  padding-top: 0;
}

.l-footer__info dt {
  flex: none;
  width: 87px;
  /* 文字幅 67px ＋ 左右パディング 20px */
  padding: 5px 10px;
  text-align: center;
  border-radius: 3px;
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-white);
}

.l-footer__info dd {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .05em;
}

/* Figma 898:17374：駅名だけゴールド、(まちなみ口) だけ小さい */
.l-footer__station {
  color: var(--c-gold);
}

.l-footer__small {
  font-size: 12px;
}

.l-footer__hours {
  display: flex;
  align-items: center;
  gap: 10px;
}

.l-footer__hours span:not(.is-sep) {
  line-height: 1;
}

/* Figma の区切り線はベージュ */
.l-footer__hours .is-sep {
  width: 1px;
  height: 15px;
  background: var(--c-beige);
}

.l-footer__map {
  margin-top: 20px;
  height: 185.4px;
  border-radius: 5px;
  overflow: hidden;
}

.l-footer__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-footer__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.l-footer__group p {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.l-footer__copy {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--c-gold);
}

/* ==========================================================================
   19. Tablet  (769px - 1200px)
   ========================================================================== */
@media screen and (max-width: 1200px) {
  .p-casedetail__photos {
    width: 320px;
  }

  .c-spec dt {
    width: 130px;
  }

  :root {
    --sect-pad: 70px;
  }

  .c-secttl__en {
    font-size: 64px;
  }

  .l-gnav {
    gap: 30px;
  }

  .c-hcta {
    width: 190px;
  }

  .p-hero__main {
    flex: 0 0 62%;
  }

  .p-hero__body {
    padding: 0 var(--gutter) 100px;
  }

  .p-about__intro,
  .p-doctor {
    gap: 50px;
  }

  .p-about__slider {
    width: 42%;
  }

  .l-footer {
    padding: 70px var(--gutter);
  }

  .l-footer__top {
    gap: 40px;
  }

  .l-footer__left {
    min-width: 0;
  }

  .l-footer__nav {
    gap: 30px;
  }

  .l-footer__nav a {
    white-space: normal;
    align-items: flex-start;
  }

  .l-footer__nav img {
    margin-top: .1em;
  }

  .l-footer__group .c-btn {
    white-space: normal;
    text-align: left;
  }
}

/* ==========================================================================
   20. SP  (max 768px)   Figma 902:28527
   ========================================================================== */
@media screen and (max-width: 768px) {
  :root {
    --inner: 374px;
    --gutter: 20px;
    --sect-pad: 50px;
  }

  body {
    padding-bottom: var(--spbar-h);
  }

  /* --- ヘッダー切り替え --- */
  .l-header {
    display: none;
  }

  .l-header-sp {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h-sp);
    padding: 15px 20px;
    background: var(--c-ivory);
  }

  .l-logo__sub {
    font-size: 10px;
  }

  .l-logo__name {
    font-size: 18px;
  }

  .l-header-sp .l-logo {
    gap: 2px;
  }

  .l-drawer__panel {
    padding: 70px 50px;
  }

  .l-spbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 95;
    display: flex;
    gap: 5px;
    padding: 10px;
    background: var(--c-ivory);
  }

  .l-spbar a {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 50px;
    padding: 0 10px;
    border-radius: 5px;
    font-family: var(--f-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  .l-spbar img {
    width: 15px;
    height: 15px;
    flex: none;
  }

  .l-spbar .is-tel {
    background: var(--c-white);
    color: var(--c-green);
    font-weight: 600;
  }

  .l-spbar .is-web {
    background: var(--c-gold);
    color: var(--c-white);
  }

  .l-spbar .is-line {
    background: var(--c-green);
    color: var(--c-white);
  }

  /* --- 共通パーツ --- */
  .c-btn {
    gap: 10px;
    padding: 15px 15px 15px 20px;
    font-size: 12px;
  }

  .c-btn__arrow {
    width: 15px;
    height: 5px;
  }

  .c-btn__arrow::before {
    width: 15px;
  }

  .c-btn__arrow::after {
    width: 6px;
  }


  .c-secttl__ja {
    font-size: 14px;
  }

  .c-secttl__en {
    font-size: 50px;
  }

  .c-linettl {
    gap: 10px;
    font-size: 16px;
  }

  .c-linettl::before,
  .c-linettl::after {
    width: 50px;
  }

  .c-labelttl {
    padding: 10px 40px;
    font-size: 18px;
  }

  .c-catttl {
    font-size: 18px;
    letter-spacing: 0;
  }

  .c-catttl::before {
    width: 100px;
  }

  /* --- ヒーロー --- */
  /* 画面に見えている高さいっぱいにして、下に余白が出ないようにする。
     dvh はブラウザの枠が出入りしても、その時点の見えている高さに追従する。 */
  .p-hero {
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    /* 実際に見えている高さ（main.js が入れる）。使えるときはこちらが勝つ */
    height: var(--hero-h, 100dvh);
    min-height: 480px;
    padding-top: var(--header-h-sp);
  }

  .p-hero__main {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  /* SP も Figma 通り「4枚を横に並べて左右にはみ出させる」静止レイアウト。
     （414px 時: 130px 高 × 4枚 = 924px を左右均等にブリード） */
  .p-hero__side {
    width: 100%;
    height: 130px;
    flex: none;
  }

  .p-hero__track {
    flex-direction: row;
    width: max-content;
    animation: heroScrollX 40s linear infinite;
  }

  @keyframes heroScrollX {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  /* 横並びのときは高さを揃えて、幅は写真の比率にまかせる */
  .p-hero__track>li {
    height: 130px;
    width: auto;
    min-height: 0;
  }

  .p-hero__track img {
    width: auto;
    height: 130px;
  }

  .p-hero__body {
    inset: auto 0 130px;
    padding: 0 30px 30px;
  }

  .p-hero__ttl {
    font-size: 24px;
  }

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

  .p-hero__vertical {
    right: 20px;
    bottom: 160px;
    font-size: 50px;
  }

  /* --- News --- */
  .p-news__head {
    gap: 20px;
    margin-bottom: 30px;
  }

  .p-news__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .c-newsitem__cat {
    width: 70px;
    height: 21px;
    font-size: 10px;
  }

  /* --- About --- */
  .p-about__intro {
    flex-direction: column;
    gap: 30px;
    padding-right: 0;
    margin-bottom: 100px;
  }

  .p-about__slider {
    width: 100%;
    padding: 0 70px 0 0;
  }

  .p-about__slider .swiper-pagination {
    gap: 20px;
  }

  .p-about__body {
    gap: 30px;
  }

  .p-about__catch {
    font-size: 18px;
  }

  .p-about__txt {
    font-size: 14px;
  }

  /* Figma SP は 本文 → 写真 の順（写真は下・中央・350×466） */
  .p-doctor {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
  }

  .p-doctor__body {
    gap: 30px;
    width: 100%;
  }

  .p-doctor__catch,
  .p-doctor__txts .p-doctor__catch {
    font-size: 18px;
  }

  .p-doctor__txts p {
    font-size: 14px;
  }

  .p-doctor__photo {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .p-doctor__photo img {
    width: min(350px, 100%);
    height: auto;
  }

  /* Figma SP 902:28580 ＝ 3列×118px（gap 10）/ 見出し2行 54px / 数値2行 */
  .p-stats {
    gap: 20px;
  }

  .p-stats__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .c-stat__head {
    padding: 10px 5px;
    font-size: 14px;
    line-height: 1.25;
  }

  .c-stat__body {
    min-height: 0;
    padding: 10px 5px;
    gap: 5px;
  }

  /* SP は flex をやめてインライン組みにする。ラベルと数値でフォントが違っても
     行内で自然にベースラインが揃い、<br class="u-sp"> で改行位置を固定できる。 */
  .c-stat__row {
    display: block;
    text-align: center;
    line-height: 1.5;
  }

  .c-stat__row span {
    font-size: 14px;
  }

  .c-stat__row .c-stat__num {
    font-size: 24px;
    line-height: 1.2;
  }

  .c-stat__row .c-stat__num--sm {
    font-size: 16px;
  }

  .c-stat__note {
    font-size: 8px;
  }

  /* --- For Beginners --- */
  .p-beginners__curve {
    height: 70px;
  }

  .p-beginners__curve::after {
    width: 435vw;
  }

  /* 414px のとき直径 1800px 相当 */
  .p-beginners__main {
    padding: 50px 0 100px;
  }

  .p-beginners__head {
    margin-bottom: 30px;
  }

  /* Figma SP 902:29443 ＝ 本文は左・ボタンは右寄せ */
  .p-beginners__row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 30px;
  }

  .p-beginners__row .c-btn {
    align-self: flex-end;
  }

  .p-beginners__txt {
    font-size: 14px;
  }

  .p-beginners__track {
    gap: 15px;
    padding-left: 10px;
  }

  .p-beginners__track .is-lg img {
    width: 200px;
  }

  .p-beginners__track .is-sm img {
    width: 150px;
  }

  /* --- Treatment Menu --- */
  /* Figma SP 902:28652 ＝ 見出しは左・ボタン／注記は右寄せ、見出しとの間隔 30px */
  .p-menu__head {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    margin-bottom: 30px;
  }

  .p-menu__headright {
    align-items: flex-end;
    gap: 10px;
  }

  .p-menu__note {
    text-align: right;
  }

  .p-menu__note {
    font-size: 12px;
  }

  .p-menu__group {
    margin-bottom: 20px;
  }

  .p-menu__group .c-catttl {
    margin-bottom: 10px;
  }

  .c-catttl {
    gap: 10px;
  }

  .p-menu__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .c-menucard {
    gap: 5px;
    padding: 5px 10px 5px 5px;
  }

  .c-menucard__thumb {
    width: 70px;
    height: 70px;
  }

  .c-menucard__ttl {
    width: auto;
    flex: 1;
    font-size: 14px;
  }

  .c-menucard__chev {
    width: 4px;
    height: 10px;
  }

  .p-menu__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .p-menu__foot p {
    font-size: 14px;
  }

  /* --- Treatment Cases --- */
  .p-cases {
    padding-block: 70px;
  }

  .p-cases__head {
    margin-bottom: 30px;
  }

  .p-cases__list {
    display: flex;
    gap: 20px;
    margin: 0 calc(var(--gutter) * -1) 30px;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .p-cases__list::-webkit-scrollbar {
    display: none;
  }

  .p-cases__list .c-case {
    flex: none;
    width: 200px;
    scroll-snap-align: start;
  }

  .c-case__body {
    padding: 15px;
  }

  .c-case__tags span {
    font-size: 12px;
  }

  .c-case__ttl {
    font-size: 14px;
  }

  /* --- Column --- */
  .p-column {
    padding-top: 100px;
  }

  .p-column__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
  }

  .p-column__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .c-column__body {
    gap: 5px;
    padding: 20px 15px;
  }

  .c-column__date {
    font-size: 16px;
  }

  .c-column__ttl {
    font-size: 13px;
  }

  .c-arrow {
    width: 18px;
    height: 6px;
  }

  .c-arrow::before {
    width: 18px;
  }

  .c-arrow::after {
    width: 7px;
  }

  /* --- Price list --- */
  .p-price__card {
    flex-direction: column;
    gap: 30px;
    padding: 20px;
  }

  .p-price__img {
    width: 100%;
  }

  .p-price__body {
    gap: 20px;
    width: 100%;
  }

  .p-price__txt {
    font-size: 14px;
  }

  /* --- Instagram --- */
  .p-insta__head {
    margin-bottom: 30px;
  }

  .p-insta__lead {
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 1.5;
  }

  .p-insta__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 30px;
  }

  /* --- Contact --- */
  .p-contact__card {
    gap: 30px;
    padding: 30px 20px;
  }

  .p-contact__lead {
    font-size: 14px;
  }

  .p-contact__btns {
    gap: 10px;
  }

  .p-contact__row {
    gap: 10px;
  }

  .c-cbtn {
    gap: 10px;
    padding: 15px 5px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
  }

  .c-cbtn img {
    width: 24px;
    height: 24px;
  }

  .c-cbtn--tel {
    gap: 10px;
  }

  .c-cbtn--tel>span:first-child {
    font-size: 14px;
  }

  .c-cbtn__num {
    gap: 10px;
  }

  .c-cbtn__num img {
    width: 28px;
    height: 28px;
  }

  .c-cbtn__num .c-num,
  .c-cbtn__num span {
    font-size: 28px;
  }

  /* --- Footer --- */
  .l-footer {
    gap: 70px;
    padding: 50px 20px;
  }

  .l-footer__top {
    flex-direction: column;
    gap: 50px;
    padding-bottom: 50px;
  }

  .l-footer__left {
    gap: 50px;
    width: 100%;
  }

  .l-footer__brand {
    gap: 30px;
  }

  .l-footer__name {
    font-size: 20px;
  }

  .l-footer__desc {
    font-size: 13px;
  }

  .l-footer__sns {
    gap: 20px;
  }

  .l-footer__sns img {
    width: 36px;
    height: 36px;
  }

  /* Figma の SP は 414px 前提で 2カラム（各171px）がぎりぎり収まる寸法。
     375px 等の狭い端末でも破綻しないよう、カラムを可変にして折り返しを許可する。 */
  .l-footer__nav {
    gap: 20px;
  }

  .l-footer__nav ul {
    flex: 1;
    min-width: 0;
    gap: 30px;
  }

  .l-footer__nav a {
    font-size: 16px;
    white-space: normal;
    align-items: flex-start;
  }

  .l-footer__nav img {
    width: 20px;
    height: 20px;
    margin-top: .1em;
  }

  .l-footer__right {
    width: 100%;
  }

  .l-footer__info dt,
  .l-footer__info dd {
    font-size: 13px;
  }

  .l-footer__info>div {
    flex-direction: column;
    gap: 10px;
    padding-block: 15px;
  }

  .l-footer__hours {
    flex-wrap: wrap;
  }

  .l-footer__map {
    height: 160px;
  }

  .l-footer__group p {
    font-size: 13px;
  }

  .l-footer__copy {
    font-size: 12px;
  }
}

/* ==========================================================================
   21. Utility
   ========================================================================== */
.u-pc {
  display: block;
}

.u-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .u-pc {
    display: none;
  }

  .u-sp {
    display: block;
  }
}

/* スクロール連動フェード（GSAP 未読込時も表示されるよう既定は表示） */
.js-fade {
  opacity: 1;
}

.js-ready .js-fade {
  opacity: 0;
  transform: translateY(30px);
}

/* ==========================================================================
   22. 下層ページ 共通
   ========================================================================== */
.l-page {
  padding-top: calc(var(--header-h) + 28px);
  background: var(--c-ivory);
}

/* パンくず */
.c-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.c-crumb a,
.c-crumb span {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
  color: #9f9f9f;
}

.c-crumb a:hover {
  opacity: 1;
  color: var(--c-gold);
}

.c-crumb__sep {
  width: 4px;
  height: 10px;
  flex: none;
  color: #9f9f9f;
}

/* ページ見出し */
.c-pagehead {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-pagehead__en {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-en);
  font-size: 32px;
  /* Figma は text-box-trim:trim-both / text-box-edge:cap alphabetic で
     字面ぶん（キャップ高 ≒ 0.625em）まで箱を詰めているので、それに合わせる。
     単位なしにしてあるので SP でサイズが変わっても比率は保たれる。 */
  line-height: .625;
  color: var(--c-green);
}

.c-pagehead__dot {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--c-green);
}

.c-pagehead__ja {
  font-family: var(--f-serif);
  font-weight: 400;
  /* Figma 898:17387 は Noto Serif JP Regular */
  font-size: 48px;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--c-black);
}

.c-pagelead {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--c-gold);
  text-align: center;
}

/* 下層ページ本文の縦リズム */
.l-page__body {
  padding-block: 70px 150px;
}

.l-page__head {
  margin-bottom: 70px;
}

/* 罫線つき見出し（丸角ブロック内で使う） */
.c-roundttl {
  text-align: center;
  color: var(--c-gold);
}

/* 院内紹介 / 院長あいさつ はグリーン（Figma 898:17472 / 898:17495） */
.c-roundttl--green {
  color: var(--c-green);
}

.c-roundttl__ja {
  display: block;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .3em;
  text-indent: .3em;
}

.c-roundttl__en {
  display: block;
  margin-top: 5px;
  font-family: var(--f-en);
  font-size: 80px;
  line-height: 1;
}

/* 下線つき小見出し */
.c-underttl {
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--c-black);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
}

.c-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 15px;
  background: var(--c-white);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

/* ゴールドの帯見出し */
.c-barttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 3px;
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: .05em;
  color: var(--c-white);
  text-align: center;
}

/* 症例の見出しは塗りではなく上下の罫線（Figma 898:19435） */
.c-barttl--line {
  margin-bottom: 50px;
  padding: 10px 80px;
  border-top: 1px solid var(--c-gold);
  border-bottom: 1px solid var(--c-gold);
  border-radius: 0;
  background: none;
  font-size: 24px;
  letter-spacing: .3em;
  color: var(--c-gold);
}

/* カテゴリータブ */
.c-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.c-tabs a {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma（898:19641）は 1 行・高さ 48px。左右パディングは実測 17px 相当 */
  padding: 15px 10px;
  border: 1px solid var(--c-gold);
  border-radius: 3px;
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--c-white);
  text-align: center;
}

.c-tabs a:hover {
  opacity: .85;
}

/* 選択中はどのタブか分かるよう白抜きにする（Figma は全タブ同色） */
.c-tabs a.is-current {
  background: var(--c-white);
  color: var(--c-gold);
}

/* お知らせのタブはゴールドの帯の中に並ぶ（Figma 898:19497）。
   コラム（898:19640）は帯が無いので、こちらだけ modifier で切り替える。 */
.c-tabs--band {
  justify-content: center;
  gap: 10px;
  padding: 20px 30px;
  background: var(--c-gold);
}

.c-tabs--band a {
  padding: 15px 40px 15px calc(40px + .3em);
  border: 0;
  border-radius: 3px;
  background: none;
  letter-spacing: .3em;
  color: var(--c-white);
}

.c-tabs--band a.is-current {
  background: var(--c-white);
  color: var(--c-gold);
}

/* ページャー */
.c-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.c-pager__nums {
  display: flex;
  align-items: center;
  gap: 10px;
}

.c-pager__nums a,
.c-pager__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.c-pager__nums a.is-current {
  background: var(--c-gold);
  color: var(--c-white);
}

.c-pager__arrow img {
  width: 40px;
  height: 40px;
}

/* ==========================================================================
   23. 施術内容ページ
   ========================================================================== */
.p-treat__hero {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 150px;
}

.p-treat__herobody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.c-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--c-white);
}

.p-treat__ttl {
  margin-top: 20px;
  font-family: var(--f-serif);
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--c-black);
}

.p-treat__lead p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 2;
  letter-spacing: .05em;
}

.p-treat__heroimg {
  flex: none;
  width: 440px;
  border-radius: 10px;
  overflow: hidden;
  background: #e5ebf3;
}

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

.p-treat__list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* 一覧が 2 つ並ぶページ（ドクターズコスメ）だけ、あいだを空ける */
.p-treat__list + .p-treat__list {
  margin-top: 150px;
}

/* 施術一覧の見出しの下に入る説明文 */
.p-treat__listlead {
  margin-top: -20px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .05em;
  text-align: center;
}
.p-treat__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.p-treat__btnwrap {
  display: flex;
  justify-content: flex-end;
}

.c-tcard {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: 5px;
  overflow: hidden;
}

/* 枠の比率は固定せず、写真は元の縦横比のまま出す */
.c-tcard__img {
  flex: none;
  border-radius: 5px;
  overflow: hidden;
  background: #e5ebf3;
}

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

/* 本文が 2 段以上あるとき、段のあいだに余白を入れずに詰める。
   見出し / チップとのあいだだけ 20px 空ける。 */
.c-tcard__body {
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.c-tcard__ttl,
.c-tcard__pill {
  margin-bottom: 20px;
}

/* 本文が無いカードは、見出しの下に余白を作らない */
.c-tcard__ttl:last-child,
.c-tcard__pill:last-child {
  margin-bottom: 0;
}

/* 見出しだけのカードは、Figma どおり下線も引かない */
.c-tcard__ttl:last-child {
  padding: 0;
  border-bottom: 0;
}

.c-tcard__ttl {
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--c-green);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-green);
}

.c-tcard__pill {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid var(--c-green);
  border-radius: 40px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .05em;
  color: var(--c-green);
}

.c-tcard__txt {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .05em;
}

.c-tcard__txt+.c-tcard__txt {
  margin-top: 0;
}

/* 注意事項 / ご案内（ベージュの丸角ブロック） */
.p-attention {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: 100px 0;
  border-radius: 300px;
  background: var(--c-beige);
}

/* .p-attention の gap は inner 1枚にしか効かないので、内側で 100px を取る */
.p-attention__inner {
  display: flex;
  flex-direction: column;
  gap: 100px;
  width: min(960px, 100% - 120px);
  margin-inline: auto;
}

.p-attention__block {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.p-attention__groups {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-attention__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.p-attention__item p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.p-attention__imgs {
  display: flex;
  gap: 30px;
}

/* 写真は切り抜かず元の縦横比のまま出す（枠の比率は固定しない） */
.p-attention__imgs>div {
  flex: 1;
  border-radius: 5px;
  overflow: hidden;
  background: #e5ebf3;
}

.p-attention__imgs img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   お問い合わせ / ご予約（Figma 898:19738）
   ========================================================================== */
/* 院長あいさつ（Figma 898:17494）は背景が白・上下 150px */
.p-messagesect {
  background: var(--c-white);
}

.p-messagesect>.l-page__body {
  padding-block: 150px;
}

.l-page__body--contact {
  padding-bottom: 0;
}

/* 症例詳細：下の「◯◯の症例」が上に 150px 持っているので、こちらは空けない */
.l-page__body--case {
  padding-bottom: 0;
}

.l-page__body--contact .c-pagelead {
  margin-bottom: 100px;
}

/* リード文のすぐ下の注記（Figma 1501:3965 = 15px / 間 10px） */
.l-page__body--contact .c-pagelead {
  margin-bottom: 10px;
}

.c-pagelead__note {
  margin-bottom: 100px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;      /* Figma 1501:3965 は 1 行ぶんの高さ 15px */
  letter-spacing: .05em;
  color: var(--c-gold);
  text-align: center;
}

/* LINE / Web予約 の2枚 */
.p-reserve {
  display: flex;
  align-items: stretch;
  gap: 30px;
}

.c-rescard {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px;
  border-radius: 10px;
  background: var(--c-gold);
  color: var(--c-white);
}

.c-rescard__ttl {
  padding: 0 20px 10px;
  border-bottom: 1px solid var(--c-white);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .05em;
}

.c-rescard__txt {
  width: 100%;
}

.c-rescard__txt p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.c-rescard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 20px;
  border-radius: 3px;
  background: var(--c-white);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
  text-align: center;
}

.c-rescard__btn:hover {
  opacity: .85;
}

/* 電話 */
.p-restel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding: 30px;
  border-radius: 10px;
  background: var(--c-gold);
  color: var(--c-white);
}

.p-restel__label {
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
}

.p-restel__num {
  display: flex;
  align-items: center;
  gap: 15px;
  color: inherit;
}

.p-restel__num img {
  width: 40px;
  height: 40px;
}

.p-restel__num .c-num {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 40px;
  line-height: .625;
  letter-spacing: .02em;
}

.p-restel__num .is-hyphen {
  font-family: var(--f-serif);
  font-weight: 200;
}

/* メールフォーム */
.p-form {
  padding-block: 100px;
}

.p-form__ttl {
  width: fit-content;
  margin: 0 auto 30px;
  padding: 20px calc(50px - .3em) 20px 50px;
  border-top: 1px solid var(--c-gold);
  border-bottom: 1px solid var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .3em;
  color: var(--c-gold);
  text-align: center;
}

/* Figma 898:19774：ゴールド・20px・行間 2 */
.p-form__lead {
  margin-bottom: 50px;
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 2;
  letter-spacing: .05em;
  color: var(--c-gold);
  text-align: center;
}

.p-form__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(760px, 100%);
  margin-inline: auto;
}

.c-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-field__head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.c-field__label {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
}

.c-field__badge {
  flex: none;
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-white);
}

.c-field__badge--any {
  background: #bbb;
}

.c-field input[type="text"],
.c-field input[type="tel"],
.c-field input[type="email"],
.c-field textarea {
  width: 100%;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--c-white);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--c-black);
}

.c-field textarea {
  min-height: 294px;
  resize: vertical;
}

.c-field input::placeholder,
.c-field textarea::placeholder {
  color: #bbb;
}

.c-field input:focus,
.c-field textarea:focus {
  outline: 0;
  border-color: var(--c-gold);
}

.c-field--agree {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.c-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.c-check input {
  width: 15px;
  height: 15px;
  border: 1px solid var(--c-black);
  border-radius: 1px;
  accent-color: var(--c-gold);
}

.c-check span {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
}

/* Figma 898:19821：全体に下線。「プライバシーポリシー」は保護方針へ */
.c-check__txt {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.c-check__txt a {
  color: inherit;
}

.c-check__txt a:hover {
  color: var(--c-gold);
}

.c-check__txt label {
  cursor: pointer;
}

/* ボット対策の隠し項目 */
.c-field__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.p-form__submit {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.p-form__submit button {
  padding: 20px 100px;
  border: 1px solid var(--c-gold);
  border-radius: 3px;
  background: var(--c-white);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
  transition: background-color .2s ease, color .2s ease;
}

.p-form__submit button:hover {
  background: var(--c-gold);
  color: var(--c-white);
}

/* 送信完了 / エラー */
.p-formresult {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 50px 0 100px;
  text-align: center;
}

.p-formresult__en {
  font-family: var(--f-en);
  font-size: 64px;
  line-height: 1;
  color: var(--c-gold);
}

.p-formresult__ttl {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: .05em;
}

.p-formresult__txt {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(760px, 100%);
}

.p-formresult__txt p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .05em;
}

.p-formresult__note {
  font-size: 14px !important;
  color: #777;
}

.p-formresult__errors {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.p-formresult__errors li {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.6;
  color: #c0392b;
}

.p-formresult__btn {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .l-page__body--contact .c-pagelead {
    margin-bottom: 40px;
  }

  .l-page__body--contact .c-pagelead {
    margin-bottom: 10px;
  }

  .c-pagelead__note {
    margin-bottom: 40px;
    font-size: 12px;
    line-height: 1.6;   /* SP は折り返すので行間をとる */
  }

  .p-reserve {
    flex-direction: column;
    gap: 15px;
  }

  .c-rescard {
    gap: 15px;
    padding: 20px;
  }

  .c-rescard__ttl {
    padding: 0 10px 8px;
    font-size: clamp(16px, 5.2vw, 20px);
  }

  .c-rescard__txt p {
    font-size: 14px;
  }

  .c-rescard__btn {
    padding: 15px;
    font-size: clamp(16px, 5.2vw, 20px);
  }

  .p-restel {
    gap: 10px;
    margin-top: 15px;
    padding: 20px;
  }

  .p-restel__label {
    font-size: 14px;
  }

  .p-restel__num img {
    width: 28px;
    height: 28px;
  }

  .p-restel__num .c-num {
    font-size: clamp(24px, 8vw, 32px);
  }

  .p-form {
    padding-block: 70px;
  }

  .p-form__ttl {
    margin-bottom: 20px;
    padding: 12px calc(15px - .2em) 12px 15px;
    font-size: clamp(17px, 5.4vw, 24px);
    letter-spacing: .2em;
  }

  .p-form__lead {
    margin-bottom: 30px;
    font-size: 14px;
  }

  .p-form__body {
    gap: 15px;
  }

  .c-field__head {
    gap: 10px;
  }

  .c-field__label {
    font-size: 15px;
  }

  .c-field__badge {
    font-size: 12px;
  }

  .c-field input[type="text"],
  .c-field input[type="tel"],
  .c-field input[type="email"],
  .c-field textarea {
    padding: 12px 15px;
    font-size: 15px;
  }

  .c-field textarea {
    min-height: 180px;
  }

  .c-field--agree {
    align-items: flex-start;
    gap: 10px;
  }

  .c-check span {
    font-size: 14px;
    line-height: 1.4;
  }

  .p-form__submit button {
    padding: 15px 60px;
    font-size: 16px;
  }

  .p-formresult {
    gap: 20px;
    padding: 30px 0 70px;
  }

  .p-formresult__en {
    font-size: clamp(36px, 12vw, 48px);
  }

  .p-formresult__ttl {
    font-size: clamp(18px, 6vw, 22px);
  }

  .p-formresult__txt p {
    font-size: 14px;
  }
}

/* --- 商品一覧（ドクターズコスメ / Figma 898:19102） --- */
.p-products {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.c-product {
  display: flex;
  align-items: center;
  gap: 50px;
}

/* 写真は Figma のまま書き出してあるので、枠で切り取らず元の比率で出す */
.c-product__img {
  flex: none;
  width: 360px;
  border-radius: 5px;
  overflow: hidden;
  background: #f7fbff;
}

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

.c-product__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.c-product__brand {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-green);
}

.c-product__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-product__rows>div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-green-lt);
}

.c-product__rows>div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.c-product__rows dt {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
}

.c-product__rows dd {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex: none;
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 18px;
  /* Figma は text-box-trim でキャップまで詰めている */
  line-height: .625;
  letter-spacing: .05em;
}

.c-product__rows dd i {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .05em;
  font-style: normal;
}

/* 見出し無しの注意書き（Figma 898:19250） */
.p-attention__note {
  width: 100%;
  text-align: center;
}

.p-attention__note p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .05em;
}

/* 関連症例は 4 列（Figma 1204:16517） */
.p-treatcase .p-cases__list {
  grid-template-columns: repeat(4, 1fr);
}

/* 施術症例（下層内） */
.p-treatcase {
  padding-block: 150px;
}

/* 症例セクションが無いページも、注意事項の下に同じ 150px を空ける */
.p-attention + .p-contact {
  margin-top: 150px;
}

.p-treatcase__head {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.p-treatcase__ttl {
  padding: 0 30px 20px;
  border-bottom: 1px solid var(--c-green);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: .1em;
  color: var(--c-green);
  text-align: center;
}

/* ==========================================================================
   24. 施術症例 一覧 / 個別
   ========================================================================== */
/* --- 症例の絞り込み（Figma 898:19281） --- */
.p-casefilter {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 100px 0 70px;
}

.p-casefilter__ttl {
  align-self: flex-start;
  padding: 0 30px 20px;
  border-bottom: 1px solid var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.p-casefilter__form {
  display: flex;
  align-items: flex-end;
  gap: 30px;
}

.p-casefilter__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.p-casefilter__label {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

/* プルダウン（Figma 898:27972）— ネイティブ select に見た目を付ける */
.c-select {
  position: relative;
  width: 215px;
}

.c-select select {
  appearance: none;
  width: 100%;
  padding: 15px 50px 15px 20px;
  border: 0;
  border-radius: 3px;
  background: var(--c-white);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-black);
  cursor: pointer;
}

.c-select::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1px solid var(--c-black);
  border-bottom: 1px solid var(--c-black);
  rotate: 45deg;
  pointer-events: none;
}

.c-select--sort {
  width: 170px;
}

.c-searchbtn {
  padding: 15px 40px;
  border-radius: 3px;
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-white);
  transition: opacity .2s ease;
}

.c-searchbtn:hover {
  opacity: .85;
}

.p-casesort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 30px;
}

.p-casesort span,
.p-casesort a {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
}

.p-casesort a.is-current {
  color: var(--c-gold);
}

.p-caselist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 70px;
}

/* 症例個別 */
/* --- 症例詳細（Figma 898:19398） --- */
.p-casedetail__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.p-casedetail__row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.p-casedetail__cat {
  padding: 8px 20px;
  border: 1px solid var(--c-green);
  border-radius: 20px;
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .1em;
  text-indent: .1em;
  color: var(--c-green);
}

.p-casedetail__name {
  font-family: var(--f-serif);
  font-size: 28px;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--c-green);
}

.p-casedetail__ttl {
  font-family: var(--f-serif);
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: .1em;
  color: var(--c-black);
}

.p-casedetail__date {
  font-family: var(--f-en);
  font-size: 20px;
  line-height: 1;
  color: var(--c-gold);
}

/* 写真（400×400）とスペック表を横に並べる */
.p-casedetail__main {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-top: 50px;
}

.p-casedetail__photos {
  flex: none;
  width: 400px;
}

/* 写真は切り抜かず、元の縦横比のまま出す */
.p-casedetail__photos figure {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: #e5ebf3;
}

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

.p-casedetail__photos .swiper {
  border-radius: 5px;
  overflow: hidden;
}

/* 症例写真スライダーの前後ボタン */
.c-slidenav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 6px rgba(0, 0, 0, .15);
  color: var(--c-gold);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .3s ease, opacity .3s ease;
}

.c-slidenav:hover {
  background: var(--c-white);
}

.c-slidenav svg {
  width: 5px;
  height: 13px;
}

.c-slidenav.is-prev {
  left: 10px;
}

.c-slidenav.is-next {
  right: 10px;
}

.c-slidenav.swiper-button-disabled {
  opacity: .3;
  pointer-events: none;
}

.p-casedetail__photos .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.p-casedetail__photos .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background: var(--c-beige);
  opacity: 1;
}

.p-casedetail__photos .swiper-pagination-bullet-active {
  background: var(--c-gold);
}

.c-spec {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-spec>div {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.c-spec dt {
  flex: none;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
  border-radius: 20px;
  background: var(--c-green);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-white);
  text-align: center;
}

.c-spec dd {
  flex: 1;
  min-width: 0;
  padding: 7px 0 7px 20px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .05em;
}

/* ==========================================================================
   25. ニュース / コラム
   ========================================================================== */
.p-newslist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 70px;
}

.p-columnlist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 70px;
}

/* 記事本文 */
.p-article__meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.p-article__eyecatch {
  margin-bottom: 40px;
  border-radius: 10px;
  overflow: hidden;
}

.p-article__eyecatch img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.p-article__date {
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
}

.p-article__ttl {
  margin: 20px 0 50px;
  font-family: var(--f-serif);
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: .05em;
}

/* --- 記事本文（お知らせ / コラム / 症例）の見出しと画像 ---------------
   管理画面のエディタで入れた h2〜h4・画像・引用・表などの体裁。
   フォントや色はサイト全体のトーンに合わせている。 */
.p-article__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-article__body>* {
  margin: 0;
}

.p-article__body p {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .05em;
}

/* 見出し */
/* Figma 898:19591 ＝ ゴールドの文字に下線 */
.p-article__body h2 {
  width: fit-content;
  max-width: 100%;
  padding: 0 20px 10px;
  border-bottom: 1px solid var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.p-article__body h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.p-article__body h3::before {
  content: "";
  flex: none;
  width: 3px;
  height: 18px;
  background: var(--c-gold);
}

.p-article__body h4 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--c-black);
}

.p-article__body h4::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
}

.p-article__body h5,
.p-article__body h6 {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--c-black);
}

/* 見出しの前は少し広めに空ける（gap 30px ＋ 20px） */
.p-article__body h2:not(:first-child),
.p-article__body h3:not(:first-child),
.p-article__body h4:not(:first-child) {
  margin-top: 20px;
}

/* 箇条書き */
.p-article__body ul,
.p-article__body ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 1.4em;
}

.p-article__body ul {
  list-style: disc;
}

.p-article__body ol {
  list-style: decimal;
}

.p-article__body li {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .05em;
  display: list-item;
}

/* 画像（最大 600px・中央ぞろえ・上下に余白） */
.p-article__body img,
.p-article__body figure,
.p-article__body .wp-block-image {
  display: block;
  max-width: min(600px, 100%);
  height: auto;
  margin: 10px auto;
  border-radius: 5px;
}

.p-article__body figure {
  overflow: hidden;
}

.p-article__body figure img {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.p-article__body figcaption {
  margin-top: 8px;
  font-family: var(--f-serif);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .05em;
  color: #777;
  text-align: center;
}

/* エディタの「配置」指定は尊重する */
.p-article__body .alignleft {
  margin-left: 0;
}

.p-article__body .alignright {
  margin-right: 0;
}

.p-article__body .alignwide,
.p-article__body .alignfull {
  max-width: 100%;
}

/* 引用・表・区切り線 */
.p-article__body blockquote {
  padding: 20px 24px;
  border-left: 3px solid var(--c-beige);
  background: var(--c-ivory);
}

.p-article__body blockquote p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.p-article__body table {
  width: 100%;
  border-collapse: collapse;
}

.p-article__body th,
.p-article__body td {
  padding: 12px 15px;
  border: 1px solid var(--c-beige);
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .05em;
  text-align: left;
}

.p-article__body th {
  background: var(--c-ivory);
  font-weight: 500;
}

.p-article__body hr {
  border: 0;
  border-top: 1px solid var(--c-beige);
}

.p-article__body a {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: .3em;
}

.p-article__body strong {
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .p-article__body {
    gap: 20px;
  }

  .p-article__body p {
    font-size: 15px;
    line-height: 1.9;
  }

  .p-article__body h2 {
    padding: 0 15px 8px;
    font-size: clamp(17px, 5.4vw, 20px);
  }

  .p-article__body h3 {
    font-size: clamp(16px, 5vw, 18px);
  }

  .p-article__body h4 {
    font-size: 16px;
  }

  .p-article__body h2:not(:first-child),
  .p-article__body h3:not(:first-child),
  .p-article__body h4:not(:first-child) {
    margin-top: 10px;
  }

  .p-article__body li {
    font-size: 14px;
  }

  .p-article__body blockquote {
    padding: 15px;
  }

  .p-article__body th,
  .p-article__body td {
    padding: 10px;
    font-size: 14px;
  }
}

/* 記事下のナビ（Figma 898:19601）。左に前の記事、右に次の記事 */
.p-article__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 70px;
}

.p-article__nav a {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.p-article__nav .is-next {
  margin-left: auto;
  text-align: right;
}

.p-article__navicon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
}

.p-article__navicon svg {
  width: 5px;
  height: 13px;
}

/* ==========================================================================
   26. 個人情報保護方針
   ========================================================================== */
.p-privacy__lead {
  margin-bottom: 50px;
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 2;
  letter-spacing: .05em;
  text-align: center;
}

/* 見出し → 本文 → 箇条書き / 住所 を 20px 間隔で縦に並べる（Figma 898:19841） */
.p-privacy__sect {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 50px;
}

.p-privacy__sect h2 {
  padding: 0 20px 9px;   /* 下線 1px を含めて 35px（Figma の枠の高さ） */
  border-bottom: 1px solid var(--c-black);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.p-privacy__sect p,
.p-privacy__sect li {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 2;
  letter-spacing: .05em;
}

/* 1 行の項目は Figma で 38px 間隔（行の高さ 36px + 2px） */
.p-privacy__sect ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 行頭の丸は 12px。1 行目の高さの中央にそろえる */
.p-privacy__sect li {
  position: relative;
  padding-left: 22px;
}

.p-privacy__sect li::before {
  content: "";
  position: absolute;
  top: calc((2em - 12px) / 2);
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-black);
}

/* ==========================================================================
   27. 料金一覧
   ========================================================================== */
/* --- 料金一覧の縦リズム（Figma 898:17609） --- */
.l-page__body--price {
  padding-bottom: 0;
}

.l-page__body--price .l-page__head {
  margin-bottom: 50px;
}

.c-pagelead--green {
  color: var(--c-green);
}

.l-page__body--price .c-pagelead {
  margin-bottom: 100px;
}

.p-price__list {
  padding-bottom: 80px;
}

.p-price__list .p-price__cat:first-child {
  margin-top: 100px;
}

.c-pricesect+.p-price__cat {
  margin-top: 30px;
}

/* --- モニター様募集（Figma 898:17625） --- */
.p-monitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 50px 200px;
  border-radius: 1000px;
  background: var(--c-white);
}

.p-monitor__ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 「特別価格」の4文字だけ圏点を打つ（Figma 898:17628） */
.p-monitor__catch {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.p-monitor__catch span {
  position: relative;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--c-green);
}

.p-monitor__catch .is-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 4px;
  height: 4px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--c-green);
}

.p-monitor__lead {
  padding: 15px calc(50px - .3em) 15px 50px;
  border-top: 1px solid var(--c-green);
  border-bottom: 1px solid var(--c-green);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .3em;
  color: var(--c-green);
  text-align: center;
}

.p-monitor__txt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: center;
}

.p-monitor__txt p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .05em;
}

.p-monitor__txt small {
  font-size: 14px;
  letter-spacing: .05em;
}

.p-monitor__txt .p-monitor__note {
  font-size: 14px;
  line-height: 1;
  letter-spacing: .05em;
}

.p-monitor__imgs {
  display: flex;
  gap: 30px;
  width: 100%;
}

.p-monitor__imgs img {
  flex: 1;
  min-width: 0;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 5px;
}

/* --- カテゴリー見出し（Figma 898:17656 ＝ 36px / 線1px / gap 20） --- */
.p-price__cat {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 100px 0 30px;
}

.p-price__cat::before,
.p-price__cat::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-gold);
}

.p-price__cat span {
  font-family: var(--f-serif);
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-gold);
}

.p-price__cat+.c-pricesect {
  margin-top: 0;
}

/* --- 料金アコーディオン（Figma 898:24984） --- */
.c-pricesect {
  margin-bottom: 20px;
}

.c-pricesect__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 10px 20px;
  border-radius: 3px;
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-white);
  text-align: left;
  /* 開閉できることが分かるように指カーソルに */
  cursor: pointer;
  transition: opacity .2s ease;
}

.c-pricesect__head:hover {
  opacity: .85;
}

.c-pricesect__icon {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
}

.c-pricesect__icon::before,
.c-pricesect__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 1px;
  background: var(--c-white);
  transition: transform .3s ease;
}

.c-pricesect__icon::after {
  transform: rotate(90deg);
}

.c-pricesect[open] .c-pricesect__icon::after {
  transform: rotate(0);
}

.c-pricesect__head::-webkit-details-marker {
  display: none;
}

.c-pricesect__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

/* グループごとに「見出し + 通常料金 / モニター料金」の帯が付く */
.c-pricegroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-pricegroup__head {
  display: flex;
  align-items: center;
  gap: 50px;
  padding-right: 30px;
}

.c-pricegroup__name {
  flex: 1;
  min-width: 0;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.c-pricegroup__head span {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  padding: 5px 10px 5px calc(10px + .3em);
  background: var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .3em;
  color: var(--c-white);
}

.c-pricetable {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  border-radius: 3px;
  background: var(--c-white);
}

.c-pricerow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 20px;
  /* 線は場所を取らない box-shadow で描く（border だと 1 行ごとに 1px 伸びて Figma とずれる） */
  box-shadow: 0 1px 0 var(--c-beige);
}

/* 各表の最後の行は下線も下余白もなし。表の下の余白は .c-pricetable の 30px だけにする */
.c-pricetable>.c-pricerow:last-child {
  padding-bottom: 0;
  box-shadow: none;
}

/* 表の中のグループの区切り（Figma 1366:21597）。線なしで、次のグループまで 50px
   （表の行間 gap 20px + 30px）。直後の小見出しは上余白を足さない */
.c-pricerow.is-groupend {
  margin-bottom: 30px;
  padding-bottom: 0;
  box-shadow: none;
}

.c-pricerow.is-groupend+.c-pricesub {
  padding-top: 0;
}

.c-pricerow__name {
  flex: 1;
  min-width: 0;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: .05em;
  /* Figma は行の高さ 100%（20px）。行間は 1.4 のまま、上下の余りだけ削る */
  margin-block: -.2em;
}

.c-pricerow__note {
  display: block;
  font-size: 14px;
  color: #777;
  letter-spacing: .05em;
}

/* 価格が1つだけの行が「モニター料金」の位置に入らないよう、2列固定のグリッドにする */
.c-pricerow__prices {
  display: grid;
  grid-template-columns: 150px 150px;
  align-items: flex-end;
  gap: 50px;
  text-align: right;
}

/* 表の中の小見出し（エラボトックス / 肩ボトックス など） */
.c-pricesub {
  padding-top: 10px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  /* Figma の文字枠は 20px */
  line-height: 1.25;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.c-pricetable>.c-pricesub:first-child {
  padding-top: 0;
}

/* モニター料金が無い行の「－」（Figma Frame 606） */
.c-pricerow__price.is-none {
  justify-content: center;
  padding-right: 0;
  color: var(--c-black);
}

.c-pricerow__price {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 3px;
  width: 150px;
  padding-right: 20px;
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 24px;
  /* Figma は text-box-trim でキャップまで詰めている */
  line-height: .625;
  letter-spacing: .05em;
}

.c-pricerow__price i {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .05em;
  font-style: normal;
}

.c-pricesect__note {
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: right;
}
.c-pricesect__link {
  display: flex;
  justify-content: flex-end;
  /* margin-top: 20px; */
}

/* --- お支払い方法について（Figma 898:17685） --- */
.p-pay {
  background: var(--c-white);
  padding-block: 150px;
}

.p-pay__head {
  margin-bottom: 50px;
}

.p-pay__cols {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.p-pay__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-pay__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 19px 10px 19px calc(10px + .3em);
  border: 1px solid var(--c-green);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .3em;
  color: var(--c-green);
  text-align: center;
}

.p-pay__col p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.p-pay__col small {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
}

/* ==========================================================================
   28. クリニック紹介
   ========================================================================== */
.p-about2__catch {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.p-about2__txt {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .05em;
}

.p-steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.c-step {
  background: var(--c-white);
  border-radius: 5px;
  overflow: hidden;
}

.c-step__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 30px;
  background: var(--c-green);
  color: var(--c-white);
}

.c-step__no {
  font-family: var(--f-en);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .05em;
}

.c-step__ttl {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: .05em;
}

.c-step__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
}

.c-step__body p {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .05em;
}

.c-step__note {
  font-size: 13px !important;
  color: #777;
}

.c-step__sub {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  border-radius: 5px;
  background: var(--c-ivory);
}

.c-step__subttl {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.p-tour {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.p-tour figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-tour img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
  background: #e5ebf3;
}

.p-tour figcaption {
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}

/* Figma 898:17498 ＝ 写真 350×466 ／ 間 100px ／ 右カラムは上下中央 */
.p-doctor2 {
  display: flex;
  gap: 100px;
  align-items: center;
}

.p-doctor2__photo {
  flex: none;
  width: 350px;
  border-radius: 5px;
}

.p-doctor2__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.p-doctor2__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

/* 「院長」は氏名の下端にそろえる（Figma 898:17501 ＝ items-end / gap 30） */
.p-doctor2__nameblock {
  display: flex;
  align-items: flex-end;
  gap: 30px;
}

.p-doctor2__role {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .3em;
}

.p-doctor2__names {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-doctor2__en {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 23px;
  line-height: 1;
  color: var(--c-gold);
}

.p-doctor2__name {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .05em;
}

.p-doctor2__career {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.p-doctor2__careerttl {
  /* 枠込みで 26px（border-box）。字間の分だけ右パディングを詰める。 */
  padding: 4px 15px 4px 20px;
  border: 1px solid var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .3em;
  color: var(--c-gold);
}

.p-career {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-career>div {
  display: flex;
  gap: 10px;
}

.p-career dt,
.p-career dd {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
}

.p-career dt {
  flex: none;
}

/* 院長メッセージ（Figma 898:17530 ＝ gap 20 / 行送り 1.7） */
.p-message {
  gap: 20px;
}

.p-message .p-doctor__txts {
  gap: 20px;
}

.p-message .p-doctor__txts p {
  line-height: 1.7333;
}

/* ==========================================================================
   29. 下層ページ タブレット (769 - 1200px)
   ========================================================================== */
@media screen and (max-width: 1200px) {
  .c-pagehead__ja {
    font-size: 40px;
  }

  .c-roundttl__en {
    font-size: 64px;
  }

  .p-attention {
    border-radius: 200px;
    padding: 80px 0;
  }

  .p-attention__inner {
    gap: 70px;
    width: min(960px, 100% - 100px);
  }

  .p-treat__heroimg {
    width: 38%;
    height: auto;
  }

  .p-price__cat span {
    font-size: 40px;
  }

  .p-monitor {
    padding: 50px 100px;
  }

  .p-pay {
    padding-block: 100px;
  }
}

/* ==========================================================================
   30. 下層ページ SP (max 768px)
       ※ SPデザインは未提供のため、TOPのSP規則（見出し 14px/50px・本文14px・
          余白 50px/20px・カード2列）に合わせて構築している
   ========================================================================== */
@media screen and (max-width: 768px) {
  .l-page {
    padding-top: calc(var(--header-h-sp) + 20px);
  }

  .l-page__body {
    padding-block: 30px 70px;
  }

  .l-page__head {
    margin-bottom: 40px;
  }

  .c-crumb a,
  .c-crumb span {
    font-size: 12px;
  }

  .c-crumb__sep {
    width: 3px;
    height: 8px;
  }

  .c-pagehead {
    gap: 5px;
  }

  .c-pagehead__en {
    font-size: 20px;
  }

  .c-pagehead__dot {
    width: 12px;
    height: 12px;
  }

  .c-pagehead__ja {
    font-size: 26px;
  }

  .c-pagelead {
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
  }

  .c-roundttl__ja {
    font-size: 14px;
  }

  .c-roundttl__en {
    font-size: 40px;
  }

  .c-underttl {
    font-size: 15px;
  }

  .c-chip {
    padding: 4px 10px;
    font-size: 14px;
  }

  .c-barttl {
    padding: 10px 15px;
    font-size: 20px;
  }

  .c-barttl--line {
    margin-bottom: 30px;
    padding: 10px 20px;
    font-size: 18px;
    letter-spacing: .2em;
  }

  .c-tabs {
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
  }

  .c-tabs--band {
    gap: 5px;
    padding: 10px;
  }

  .c-tabs--band a {
    padding: 10px 5px 10px calc(5px + .2em);
    letter-spacing: .2em;
  }

  .c-tabs a {
    flex: 1 1 calc(50% - 5px);
    padding: 10px 5px;
    font-size: 12px;
    letter-spacing: .1em;
    text-indent: .1em;
  }

  .c-pager {
    gap: 10px;
  }

  .c-pager__nums {
    gap: 5px;
  }

  .c-pager__nums a,
  .c-pager__arrow {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .c-pager__arrow img {
    width: 32px;
    height: 32px;
  }

  /* --- 施術内容ページ --- */
  .p-treat__hero {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    margin-bottom: 70px;
  }

  .p-treat__herobody {
    gap: 30px;
  }

  .c-badge {
    padding: 6px 15px;
    font-size: 16px;
  }

  .p-treat__ttl {
    margin-top: 15px;
    font-size: 22px;
  }

  .p-treat__lead p {
    font-size: 14px;
    line-height: 1.9;
  }

  .p-treat__heroimg {
    width: 100%;
    height: auto;
  }

  .p-treat__list {
    gap: 30px;
  }

  .p-treat__list + .p-treat__list {
    margin-top: 70px;
  }

  .p-products {
    gap: 30px;
  }

  .c-product {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .c-product__img {
    width: 100%;
  }

  .c-product__body {
    gap: 20px;
  }

  .c-product__rows dt {
    font-size: 14px;
    line-height: 1.4;
  }

  .c-product__rows dd {
    font-size: 16px;
  }

  .p-attention__note p {
    font-size: 14px;
    line-height: 1.9;
  }

  .p-treat__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .c-tcard__body {
    padding: 15px;
  }

  .c-tcard__ttl,
  .c-tcard__pill {
    margin-bottom: 10px;
  }

  .c-tcard__ttl {
    padding: 0 5px 7px;
    font-size: 15px;
    line-height: 1;
  }

  .c-tcard__pill {
    align-self: stretch;
    padding: 3px 5px;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
  }

  .c-tcard__txt {
    font-size: 13px;
    line-height: 1.8;
  }

  .p-attention {
    padding: 50px 0;
    border-radius: 40px;
  }

  .p-attention__inner {
    gap: 50px;
    width: calc(100% - 40px);
  }

  .p-attention__block {
    gap: 30px;
  }

  .p-attention__groups {
    gap: 20px;
  }

  .p-attention__item p {
    font-size: 14px;
  }

  .p-attention__imgs {
    flex-direction: column;
    gap: 15px;
  }

  .p-treatcase {
    padding-block: 70px;
  }

  .p-attention + .p-contact {
    margin-top: 70px;
  }

  .p-treatcase__head {
    margin-bottom: 30px;
  }

  .p-treatcase__ttl {
    padding: 0 10px 15px;
    font-size: 20px;
  }

  /* --- 症例 --- */
  .p-casefilter {
    padding: 20px;
    margin-bottom: 30px;
  }

  .p-casefilter__ttl {
    margin-bottom: 20px;
    font-size: 20px;
  }

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

  .p-casefilter__tags label {
    padding: 6px 12px;
    font-size: 13px;
  }

  .p-casefilter__submit button {
    padding: 12px 40px;
    font-size: 15px;
  }

  .p-casefilter {
    gap: 20px;
    margin: 50px 0 40px;
  }

  .p-casefilter__ttl {
    padding: 0 15px 12px;
    font-size: clamp(20px, 6.6vw, 26px);
  }

  .p-casefilter__form {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

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

  .c-select {
    width: 100%;
  }

  .c-select select {
    padding: 12px 40px 12px 15px;
    font-size: 15px;
  }

  .c-searchbtn {
    padding: 13px 40px;
    font-size: 15px;
  }

  .p-casesort {
    gap: 10px;
    margin-bottom: 20px;
  }

  .p-casesort .c-select--sort {
    width: 140px;
  }

  .p-casesort span,
  .p-casesort a {
    font-size: 14px;
  }

  .p-caselist {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 40px;
  }

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

  .p-casedetail__name {
    font-size: 20px;
  }

  .p-casedetail__ttl {
    font-size: 20px;
  }

  .p-casedetail__date {
    font-size: 16px;
  }

  .p-casedetail__head {
    gap: 15px;
  }

  .p-casedetail__row {
    gap: 10px;
  }

  .p-casedetail__cat {
    padding: 6px 15px;
  }

  /* 写真とスペック表を縦積みに */
  .p-casedetail__main {
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
  }

  .p-casedetail__photos {
    width: 100%;
  }

  .c-spec {
    width: 100%;
    gap: 15px;
  }

  .c-spec>div {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .c-spec dt {
    width: auto;
    min-width: 120px;
    padding: 6px 15px;
    font-size: 13px;
  }

  .c-spec dd {
    width: 100%;
    padding: 0;
    font-size: 14px;
  }

  /* --- ニュース / コラム --- */
  .p-newslist {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 40px;
  }

  .p-columnlist {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 40px;
  }

  .p-article__meta {
    gap: 10px;
  }

  .p-article__eyecatch {
    margin-bottom: 25px;
  }

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

  .p-article__ttl {
    margin: 15px 0 30px;
    font-size: 20px;
  }

  .p-article__body {
    gap: 20px;
  }

  .p-article__body p {
    font-size: 14px;
    line-height: 1.9;
  }

  .p-article__body h2 {
    font-size: 18px;
  }

  .p-article__body li {
    font-size: 13px;
  }

  .p-article__nav {
    margin-top: 40px;
  }

  .p-article__nav a {
    font-size: 13px;
  }

  /* --- 個人情報保護方針 --- */
  .p-privacy__lead {
    margin-bottom: 30px;
    font-size: 14px;
    text-align: left;
  }

  .p-privacy__sect {
    gap: 15px;
    margin-bottom: 30px;
  }

  .p-privacy__sect h2 {
    padding: 0 10px 8px;
    font-size: 18px;
  }

  .p-privacy__sect p,
  .p-privacy__sect li {
    font-size: 14px;
    line-height: 1.8;
  }

  .p-privacy__sect li {
    padding-left: 16px;
  }

  .p-privacy__sect li::before {
    top: calc((1.8em - 8px) / 2);
    width: 8px;
    height: 8px;
  }

  /* --- 料金一覧 --- */
  .l-page__body--price .l-page__head {
    margin-bottom: 30px;
  }

  .l-page__body--price .c-pagelead {
    margin-bottom: 50px;
  }

  .p-price__list {
    padding-bottom: 40px;
  }

  .p-price__list .p-price__cat:first-child {
    margin-top: 50px;
  }

  .p-price__cat {
    margin: 40px 0 15px;
  }

  .p-price__cat span {
    font-size: 26px;
  }

  .c-pricesect+.p-price__cat {
    margin-top: 20px;
  }

  .c-pricesect__head {
    padding: 10px 15px;
    font-size: 16px;
  }

  .c-pricesect__body {
    gap: 15px;
    margin-top: 15px;
  }

  .c-pricegroup {
    gap: 8px;
  }

  .c-pricegroup__head {
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 0;
  }

  .c-pricegroup__name {
    flex: 0 0 100%;
    font-size: 15px;
  }

  /* 見出し名の無い表（HIFU）は、空の行を作らない */
  .c-pricegroup__name:empty {
    display: none;
  }

  .c-pricegroup__head span {
    width: auto;
    flex: 1;
    padding: 4px 5px 4px calc(5px + .3em);
    font-size: 12px;
  }

  .c-pricetable {
    gap: 15px;
    padding: 15px;
  }

  .c-pricerow {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-bottom: 15px;
  }

  /* SP の区切りは表の行間 15px + 20px */
  .c-pricerow.is-groupend {
    margin-bottom: 20px;
  }

  .c-pricerow__name {
    margin-block: 0;
    font-size: 15px;
  }

  /* モニター様募集 */
  .p-monitor {
    gap: 20px;
    padding: 40px 20px;
    border-radius: 30px;
  }

  .p-monitor__ttl {
    gap: 15px;
  }

  .p-monitor__catch {
    gap: 5px;
  }

  .p-monitor__catch span {
    font-size: clamp(14px, 4.6vw, 18px);
  }

  .p-monitor__catch .is-dot::before {
    top: -6px;
    width: 3px;
    height: 3px;
  }

  .p-monitor__lead {
    padding: 10px calc(15px - .2em) 10px 15px;
    font-size: clamp(20px, 6.6vw, 28px);
    letter-spacing: .2em;
  }

  .p-monitor__txt p {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .p-monitor__txt small,
  .p-monitor__txt .p-monitor__note {
    font-size: 11px;
    letter-spacing: .02em;
  }

  .p-monitor__imgs {
    gap: 10px;
  }

  /* お支払い方法について */
  .p-pay {
    padding-block: 70px;
  }

  .p-pay__head {
    margin-bottom: 30px;
  }

  /* 縦積みにすると align-items:flex-start が幅を縮めてしまうので stretch に戻す */
  .p-pay__cols {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .p-pay__ttl {
    padding: 12px 10px 12px calc(10px + .3em);
    font-size: 16px;
  }

  .p-pay__col p {
    font-size: 14px;
  }

  .p-pay__col small {
    font-size: 12px;
  }

  .c-pricerow__note {
    font-size: 12px;
  }

  /* 見出しの「通常料金 / モニター料金」と同じ 2 等分。価格が 1 つだけの行が
     モニター料金の位置に入ってしまうのを防ぐ。 */
  .c-pricerow__prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .c-pricerow__price {
    width: auto;
    padding-right: 0;
    font-size: 18px;
    text-align: right;
  }

  /* SP では「－」もほかの料金と同じく右そろえ（PC は列の中央） */
  .c-pricerow__price.is-none {
    justify-content: flex-end;
  }

  /* --- クリニック紹介 --- */
  .p-about2__catch {
    font-size: 18px;
    line-height: 1.7;
  }

  .p-about2__txt {
    font-size: 14px;
  }

  .p-steps {
    gap: 20px;
  }

  .c-step__head {
    gap: 10px;
    padding: 12px 20px;
  }

  .c-step__no {
    font-size: 16px;
  }

  .c-step__ttl {
    font-size: 16px;
  }

  .c-step__body {
    gap: 15px;
    padding: 20px;
  }

  .c-step__body p {
    font-size: 14px;
  }

  .c-step__sub {
    padding: 15px;
  }

  .c-step__subttl {
    font-size: 15px;
  }

  .p-tour {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .p-tour figcaption {
    font-size: 14px;
  }

  .p-doctor2 {
    flex-direction: column;
    gap: 30px;
  }

  .p-doctor2__photo {
    width: 100%;
  }

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

  .p-doctor2__en {
    font-size: 18px;
  }

  .p-doctor2__name {
    font-size: 26px;
  }

  .p-career dt {
    width: 56px;
    font-size: 14px;
  }

  .p-career dd {
    font-size: 13px;
  }
}

/* クリニック紹介 / For Beginners のリード文 */
.p-about2__leadc {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .05em;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-about2__leadc {
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
  }
}

/* ==========================================================================
   31. タブレット対応の追補
       Figma は 1440px と 414px の2種類しか無いため、その間の幅で
       破綻する箇所をここで吸収する。
   ========================================================================== */

/* --- ヘッダーは 1100px 以下で SP 版（ハンバーガー）に切り替える -------------
   PC ヘッダーはロゴ + 電話 + Web予約 + LINE で約 870px 必要なため、
   iPad 縦（834px）などでは横に収まらず重なってしまう。               */
@media screen and (max-width: 1100px) {
  :root {
    --header-h: 70px;
  }

  body {
    padding-bottom: var(--spbar-h);
  }

  .l-header {
    display: none;
  }

  .l-header-sp {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h-sp);
    padding: 15px 20px;
    background: var(--c-ivory);
  }

  .l-header-sp .l-logo {
    gap: 2px;
  }

  .l-header-sp .l-logo__sub {
    font-size: 10px;
  }

  .l-header-sp .l-logo__name {
    font-size: 18px;
  }

  .l-spbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 95;
    display: flex;
    gap: 5px;
    padding: 10px;
    background: var(--c-ivory);
  }

  .l-spbar a {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 50px;
    padding: 0 10px;
    border-radius: 5px;
    font-family: var(--f-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  .l-spbar img {
    width: 15px;
    height: 15px;
    flex: none;
  }

  .l-spbar .is-tel {
    background: var(--c-white);
    color: var(--c-green);
    font-weight: 600;
  }

  .l-spbar .is-web {
    background: var(--c-gold);
    color: var(--c-white);
  }

  .l-spbar .is-line {
    background: var(--c-green);
    color: var(--c-white);
  }
}

/* --- フッターは 1024px 以下で1カラムに積む ------------------------------
   2カラムのままだと右カラムが狭くなり、
   「医療法人 泉ヶ丘 総合サイト」ボタンが折り返して崩れる。          */
@media screen and (max-width: 1024px) {
  .l-footer__top {
    flex-direction: column;
    gap: 50px;
  }

  .l-footer__left,
  .l-footer__right {
    width: 100%;
  }

  .l-footer__left {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px 100px;
  }

  .l-footer__group .c-btn {
    white-space: nowrap;
  }
}

@media screen and (max-width: 768px) {
  .l-footer__left {
    flex-direction: column;
    gap: 50px;
  }
}

/* --- 施術メニューのカード ------------------------------------------------
   幅が縮むとタイトル欄が狭くなり日本語が単語の途中で折れるため、
   タブレット幅ではサムネイルと文字を少し小さくする。
   改行位置は Figma（898:27852）どおり <br> で指定してあるので、
   自動での折り返しは禁止する。「ヒアルロン酸」が 1 文字はみ出して
   「ヒアルロン / 酸」と割れるのを防ぐため。                        */
.c-menucard__ttl {
  white-space: nowrap;
}

@media screen and (max-width: 1200px) {
  .c-menucard {
    gap: 12px;
    padding: 8px 12px 8px 8px;
  }

  .c-menucard__thumb {
    width: 80px;
    height: 80px;
  }

  .c-menucard__ttl {
    font-size: 15px;
  }
}

/* --- SP でのみ改行させる <br> ------------------------------------------
   <span class="u-sp"><br></span> だと span がブロック化して
   余分な空行ができてしまうため、<br class="u-sp"> を使う。        */
br.u-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  br.u-sp {
    display: inline;
  }
}

/* ==========================================================================
   32. クリニック紹介（2026-08-27 更新版）  Figma: 898:17376
   ========================================================================== */

/* --- 導入（画像が右端までブリードする） --- */
.p-about2__intro {
  display: flex;
  align-items: center;
  gap: 100px;
  padding-block: 100px;
  padding-left: max(var(--gutter), calc((100% - var(--inner)) / 2));
}

.p-about2__introbody {
  flex: none;
  width: 530px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 写真は Figma の枠どおり正方形で書き出してあるので、枠で切り取らない */
.p-about2__introimg {
  flex: 1;
  min-width: 0;
  border-radius: 10px 0 0 10px;
  overflow: hidden;
}

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

.p-about2__txt {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-about2__txt p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .05em;
}

/* --- はじめての方へ --- */
.p-beginners2 {
  background: var(--c-beige);
  padding-block: 100px;
}

.p-beginners2__lead {
  margin: 50px 0;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 2;
  letter-spacing: .05em;
  text-align: center;
}

.p-beginners2__barwrap {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.p-beginners2__bar {
  padding: 20px 50px;
  border-top: 1px solid var(--c-white);
  border-bottom: 1px solid var(--c-white);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--c-white);
  text-align: center;
}

.p-steps2 {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.c-step2 {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px;
  border-radius: 10px;
  background: var(--c-white);
}

.c-step2__body {
  flex: none;
  width: 467px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.c-step2--full {
  flex-direction: column;
  align-items: stretch;
}

.c-step2--full .c-step2__body {
  width: 100%;
}

.c-step2__badge {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  border-radius: 3px;
  background: var(--c-gold);
  color: var(--c-white);
}

.c-step2__no {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .05em;
}

.c-step2__badge i {
  width: 1px;
  height: 24px;
  background: var(--c-white);
  flex: none;
}

.c-step2__ttl {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .05em;
}

/* Figma は本文をひと続きのテキスト（行送り 30px）で組んでいるので、
   段落間に余分な間隔を入れない。 */
.c-step2__txt p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .05em;
}

p.c-step2__note {
  font-size: 13px;
}

/* Step.01 の注記（Figma 1501:3962 = 12px / 行間 1.5 / 本文との間 10px） */
p.c-step2__note.is-sm {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .05em;
}

small.c-step2__note {
  font-size: 12px;
  letter-spacing: .05em;
}

.c-step2__note.is-gold {
  color: var(--c-gold);
}

.c-step2__line {
  flex: none;
  width: 1px;
  align-self: stretch;
  background: var(--c-beige);
}

.c-step2__side {
  flex: none;
  width: 373px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}

.c-step2__side img {
  width: 100%;
  border-radius: 5px;
}

/* Figma（898:17403）はカードの高さと Step.02 の写真の大きさを決め打ちしている */
@media screen and (min-width: 1201px) {
  .p-steps2 .c-step2:nth-child(2) {
    min-height: 340px;
  }

  .p-steps2 .c-step2:nth-child(5) {
    min-height: 229px;
  }

  .p-steps2 .c-step2:nth-child(2) .c-step2__side img {
    width: 320px;
  }
}

/* 見出し → 本文は 10px、本文どうしは行送りだけ（Figma 898:17413 = 20+10+42） */
.c-step2__sub {
  display: block;
}

.c-step2__subttl+* {
  margin-top: 10px;
}

.c-step2__subttl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.c-step2__subttl::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-gold);
}

.c-step2__sub p {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .05em;
}

/* ↑の詳細度に負けて 14px になっていたので上書き（Figma 898:17416 ＝ 20px） */
.c-step2__sub p.c-step2__subttl {
  font-size: 20px;
  line-height: 1;
}

.c-step2__bring {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-step2__bring p {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  line-height: 1;
}

.c-step2__bring span {
  font-size: 15px;
  letter-spacing: .05em;
}

.c-step2__bring small {
  font-size: 12px;
  letter-spacing: .05em;
}

/* --- 院内紹介（2×3） --- */
.p-tour {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.p-tour figure {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-tour img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
  background: #e5ebf3;
}

.p-tour figcaption {
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}

/* 左寄せの見出し（クリニック紹介ページ） */
.c-roundttl--left {
  text-align: left;
}

/* --- タブレット --- */
@media screen and (max-width: 1200px) {
  .p-about2__intro {
    gap: 50px;
  }

  .p-about2__introbody {
    width: 45%;
  }

  .c-step2__body {
    width: 52%;
  }

  .c-step2__side {
    width: 40%;
  }

  .p-beginners2__bar {
    padding: 15px 30px;
    font-size: 26px;
  }
}

/* iOS では、transform の掛かった祖先の中にあると、角丸の枠で中身を切り抜けない
   ことがある（このサイトは js-fade や Swiper で transform が付く）。枠の切り抜き
   だけに頼らず、画像自体にも同じ角丸を持たせておく。 */
.c-tcard__img>img,
.c-product__img>img,
.p-treat__heroimg>img,
.p-about2__introimg>img,
.p-article__eyecatch>img,
.p-price__img>img,
.p-doctor2__photo>img,
.c-menucard__thumb>img,
.p-attention__imgs>div>img,
.p-casedetail__photos figure>img,
.p-article__body figure>img,
.l-footer__map>iframe {
  border-radius: inherit;
}

/* --- SP --- */
@media screen and (max-width: 768px) {
  .p-about2__intro {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding-block: 50px;
    padding-left: 0;
  }

  .p-about2__introbody {
    width: auto;
    gap: 20px;
    padding-inline: var(--gutter);
  }

  /* 左に余白を空けて、右は画面の外まで伸ばす */
  .p-about2__introimg {
    width: auto;
    margin-left: 70px;
    border-radius: 10px 0 0 10px;
  }

  .p-about2__txt p {
    font-size: 14px;
  }

  .p-beginners2 {
    padding-block: 50px;
  }

  .p-beginners2__lead {
    margin: 30px 0;
    font-size: 14px;
    line-height: 1.9;
  }

  .p-beginners2__barwrap {
    margin-bottom: 30px;
  }

  .p-beginners2__bar {
    padding: 12px 20px;
    font-size: 20px;
    letter-spacing: .2em;
    text-indent: .2em;
  }

  .p-steps2 {
    gap: 20px;
  }

  .c-step2 {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
  }

  .c-step2__body {
    width: 100%;
    gap: 20px;
  }

  .c-step2__badge {
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 15px;
  }

  .c-step2__no {
    font-size: 18px;
  }

  .c-step2__badge i {
    display: none;
  }

  .c-step2__ttl {
    font-size: 16px;
  }

  .c-step2__txt p {
    font-size: 14px;
    line-height: 1.9;
  }

  .c-step2__line {
    width: auto;
    height: 1px;
    align-self: auto;
  }

  .c-step2__side {
    width: 100%;
    gap: 20px;
  }

  .c-step2__sub p.c-step2__subttl {
    font-size: 15px;
  }

  .c-step2__sub p {
    font-size: 13px;
  }

  .c-step2__bring span {
    font-size: 14px;
  }

  .c-step2__bring small {
    font-size: 11px;
  }

  .p-tour {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .p-tour figure {
    gap: 10px;
  }

  .p-tour figcaption {
    font-size: 13px;
  }
}

/* ==========================================================================
   33. SP の詰め直し（2026-08-27）
       Figma の SP は 414px 前提のため、320〜390px で
       文字が縦になる・余白が無い・比率が崩れる といった破綻が出ていた。
       ・画像はすべて比率を固定
       ・見出しの字間とサイズを詰める
       ・左右の余白を揃える
   ========================================================================== */

/* --- 画像の比率を固定（縦横比が中身任せになっていた箇所） --- */
/* 診療の流れの写真は切り抜かず、元の縦横比のまま出す */
.c-step2__side img {
  height: auto;
}

.p-doctor2__photo img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media screen and (max-width: 768px) {

  /* ------------------------------------------------------------------
     見出し（字間・サイズを詰めてバランスを取る）
     ------------------------------------------------------------------ */
  .c-secttl__ja {
    font-size: 13px;
    letter-spacing: .2em;
  }

  .c-secttl__en {
    font-size: clamp(30px, 11vw, 46px);
  }

  .c-roundttl__ja {
    font-size: 13px;
    letter-spacing: .2em;
    text-indent: .2em;
  }

  .c-roundttl__en {
    font-size: clamp(28px, 10vw, 40px);
  }

  .c-pagehead__en {
    font-size: clamp(15px, 5vw, 20px);
  }

  .c-pagehead__ja {
    font-size: clamp(19px, 6.4vw, 26px);
    letter-spacing: .06em;
  }

  .c-pagelead {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .c-barttl {
    font-size: clamp(16px, 5.6vw, 20px);
    letter-spacing: .1em;
  }

  .c-linettl {
    font-size: clamp(13px, 4.6vw, 16px);
    letter-spacing: .02em;
  }

  .c-linettl::before,
  .c-linettl::after {
    width: 30px;
  }

  .c-labelttl {
    padding: 10px 20px;
    font-size: 16px;
    letter-spacing: .2em;
    text-indent: .2em;
  }

  .c-catttl {
    font-size: clamp(15px, 5.2vw, 18px);
  }

  .c-underttl {
    font-size: 14px;
  }

  .c-chip {
    font-size: 13px;
  }

  /* ヒーロー */
  .p-hero__ttl {
    font-size: clamp(19px, 6.4vw, 24px);
    letter-spacing: .03em;
  }

  .p-hero__lead {
    font-size: clamp(12px, 3.8vw, 14px);
    letter-spacing: .02em;
  }

  .p-hero__vertical {
    font-size: clamp(34px, 13vw, 50px);
  }

  /* ------------------------------------------------------------------
     About（TOP）— 本文に左右の余白が無かった
     ------------------------------------------------------------------ */
  .p-about__intro {
    padding-inline: 0;
  }

  .p-about__body {
    padding-inline: var(--gutter);
    gap: 20px;
  }

  .p-about__catch {
    font-size: clamp(16px, 5.2vw, 18px);
    letter-spacing: .03em;
  }

  .p-about__txt {
    font-size: 13px;
    letter-spacing: .02em;
  }

  /* Figma SP（1221:21469）は画像を左端まで出して右に 70px、角丸は右側。
     ドットは 6px・間隔 20px で、画像から 30px 下。 */
  .p-about__slider {
    width: 100%;
    padding: 0 70px 0 0;
  }

  .p-about__slider .swiper {
    border-radius: 0 10px 10px 0;
  }

  .p-about__slider .swiper-pagination {
    gap: 20px;
    margin-top: 30px;
  }

  .p-about__slider .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
  }

  /* 院長紹介 / 実績 */
  /* Figma SP（1221:21493）は 18px / 字間 0.9px */
  .p-doctor__catch,
  .p-doctor__txts .p-doctor__catch {
    font-size: 18px;
    letter-spacing: .05em;
  }

  .p-doctor__txts p {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .c-stat__head {
    letter-spacing: .02em;
  }

  .c-stat__row span {
    letter-spacing: .02em;
  }

  .c-stat__note {
    letter-spacing: 0;
  }

  /* ------------------------------------------------------------------
     施術メニューのカード（Figma SP 902:29517 ＝ 182×80）
       左に 70px の画像、右にラベル（80px）、右端にシェブロン。
       400px 以下は画像とフォントを一段落として文字が潰れないようにする。
     ------------------------------------------------------------------ */
  .c-menucard {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 5px;
  }

  .c-menucard__thumb {
    flex: none;
    width: 70px;
    height: 70px;
    aspect-ratio: auto;
  }

  /* Figma SP は 14px / 字間 5%（1221:21609）。3 行のボトックスだけ 13px（1221:21644） */
  .c-menucard__ttl {
    flex: 1;
    width: auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: .05em;
  }

  .c-menucard__ttl.is-sm {
    font-size: 13px;
  }

  .c-menucard__chev {
    position: static;
    width: 5px;
    height: 13px;
    margin-left: auto;
  }

  .p-menu__note {
    font-size: 11px;
    letter-spacing: .02em;
  }

  .p-menu__foot p {
    font-size: 13px;
    letter-spacing: .02em;
  }

  /* ------------------------------------------------------------------
     症例の横スクロール（左右の余白を確保・少ないときは中央寄せ）
     ------------------------------------------------------------------ */
  .p-cases__list {
    display: flex;
    gap: 15px;
    margin: 0 0 30px;
    padding-inline: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    justify-content: safe center;
  }

  .p-cases__list .c-case {
    width: 180px;
  }

  .c-case__body {
    padding: 12px;
    gap: 8px;
  }

  .c-case__tags span {
    font-size: 11px;
    padding: 4px 8px;
    letter-spacing: .02em;
  }

  .c-case__ttl {
    font-size: 13px;
    letter-spacing: .02em;
  }

  /* コラム / お知らせ */
  .c-column__body {
    padding: 15px 12px;
  }

  .c-column__date {
    font-size: 14px;
  }

  .c-column__ttl {
    font-size: 12px;
    letter-spacing: .02em;
  }

  .c-newsitem__cat {
    width: 62px;
    height: 20px;
    font-size: 9px;
    letter-spacing: .02em;
  }

  /* 料金 / お問い合わせ */
  .p-price__txt {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .p-insta__lead {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .p-contact__lead {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .c-cbtn {
    font-size: 11px;
    letter-spacing: .02em;
  }

  .c-cbtn--tel>span:first-child {
    font-size: 12px;
  }

  .c-cbtn__num .c-num,
  .c-cbtn__num span {
    font-size: clamp(20px, 7.5vw, 28px);
  }

  /* 施術内容ページ */
  .p-treat__ttl {
    font-size: clamp(18px, 6vw, 22px);
    letter-spacing: .04em;
  }

  .p-treat__lead p {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .c-badge {
    font-size: 14px;
    letter-spacing: .06em;
  }

  .c-tcard__ttl {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: .03em;
  }

  .c-tcard__txt {
    font-size: 12px;
    letter-spacing: .03em;
  }

  .p-attention__item p {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .p-treatcase__ttl {
    font-size: clamp(15px, 5.2vw, 20px);
    letter-spacing: .04em;
  }

  /* クリニック紹介 */
  .p-about2__catch {
    font-size: clamp(16px, 5.2vw, 18px);
    letter-spacing: .02em;
  }

  .p-about2__txt p {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .p-about2__leadc {
    font-size: 13px;
    letter-spacing: .02em;
  }

  /* PC 用の <br> が残ると中央寄せで行が不揃いになるため、SP は左寄せで自然に流す
     （TOP の .p-beginners__txt / .p-about2__leadc と揃える） */
  .p-beginners2__lead {
    font-size: 13px;
    letter-spacing: .02em;
    text-align: left;
  }

  .p-beginners2__lead br {
    display: none;
  }

  .p-beginners2__bar {
    font-size: clamp(16px, 5.6vw, 20px);
    letter-spacing: .2em;
    text-indent: .2em;
  }

  .c-step2__ttl {
    font-size: 15px;
    letter-spacing: .02em;
  }

  .c-step2__txt p {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .c-step2__subttl {
    font-size: 14px;
    letter-spacing: .02em;
  }

  .c-step2__sub p {
    font-size: 12px;
    letter-spacing: .02em;
  }

  .p-tour figcaption {
    font-size: 12px;
    letter-spacing: .02em;
  }

  .p-doctor2__name {
    font-size: clamp(20px, 6.5vw, 26px);
    letter-spacing: .06em;
  }

  /* 料金表 */
  .c-pricesect__head {
    font-size: 14px;
    letter-spacing: .02em;
  }

  .c-pricerow__name {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .c-pricegroup__name {
    font-size: 14px;
  }

  .c-pricerow__price {
    font-size: 16px;
  }

  .p-price__cat span {
    font-size: clamp(20px, 7vw, 26px);
  }

  /* 個人情報保護方針 */
  .p-privacy__lead {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .p-privacy__sect h2 {
    font-size: 16px;
    letter-spacing: .02em;
  }

  .p-privacy__sect p,
  .p-privacy__sect li {
    font-size: 13px;
    letter-spacing: .02em;
  }

  /* フッター */
  .l-footer__name {
    font-size: 18px;
    letter-spacing: .04em;
  }

  .l-footer__desc {
    font-size: 12px;
    letter-spacing: .02em;
  }

  .l-footer__nav a {
    font-size: 14px;
    letter-spacing: .04em;
  }

  .l-footer__info dt,
  .l-footer__info dd {
    font-size: 12px;
    letter-spacing: .02em;
  }

  .l-footer__group p {
    font-size: 12px;
    letter-spacing: .02em;
  }

  .l-footer__copy {
    font-size: 11px;
  }

  /* ボタン（長いラベルでもはみ出さないよう折り返しを許可） */
  .c-btn {
    font-size: 12px;
    letter-spacing: .05em;
    padding: 12px 12px 12px 16px;
    white-space: normal;
    text-align: left;
  }
}

/* --- 360px 以下の細かい詰め ------------------------------------------- */
@media screen and (max-width: 400px) {
  /* このサイズではバーが 62px になるので、変数も実際の高さに合わせる */
  :root {
    --spbar-h: 62px;
  }

  .l-spbar {
    gap: 4px;
    padding: 8px;
  }

  .l-spbar a {
    gap: 3px;
    height: 46px;
    padding: 0 4px;
    font-size: 10px;
    letter-spacing: 0;
  }

  .l-spbar img {
    width: 13px;
    height: 13px;
  }

  .l-logo__sub {
    font-size: 9px;
    letter-spacing: .02em;
  }

  .l-logo__name {
    font-size: 16px;
    letter-spacing: .03em;
  }

  .c-catttl::before {
    width: 60px;
  }

  /* 〈 カウンセリングルーム 〉が「ム 〉」だけ改行されるのを防ぐ */
  .p-tour figcaption {
    font-size: 10px;
    letter-spacing: 0;
  }

  .p-stats__grid {
    gap: 8px;
  }

  .c-stat__head {
    padding: 8px 4px;
    font-size: 12px;
    line-height: 1.35;
  }

  .c-stat__body {
    gap: 4px;
    padding: 8px 4px;
  }

  .c-stat__row span {
    font-size: 12px;
  }

  .c-stat__row .c-stat__num {
    font-size: 21px;
  }

  .c-stat__row .c-stat__num--sm {
    font-size: 14px;
  }

  .p-columnlist,
  .p-newslist,
  .p-caselist {
    gap: 8px;
  }

  .c-tabs a {
    font-size: 11px;
    letter-spacing: .05em;
    text-indent: .05em;
  }
}

/* フッター最下部（個人情報保護方針 + コピーライト） */
.l-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.l-footer__policy {
  font-family: var(--f-serif);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: .3em;
}

.l-footer__policy:hover {
  opacity: 1;
  color: var(--c-gold);
}

@media screen and (max-width: 768px) {
  .l-footer__bottom {
    gap: 12px;
  }

  .l-footer__policy {
    font-size: 12px;
  }
}
/* 本文が画面いっぱいになる幅では、症例の横スクロールを右端まで出す
   （続きがあることが分かるように） */
@media screen and (max-width: 414px) {
  /* 左右とも画面の端まで流す。最初と最後だけ、本文と同じ余白を残す */
  .p-cases__list {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

/* 329px 以下（iPhone SE 初代など）だけは Figma の 14px だと右列のカードが
   はみ出すので、13px / 字間 .02em に詰める（330px 以上は Figma どおり） */
@media screen and (max-width: 329px) {
  .c-menucard__ttl,
  .c-menucard__ttl.is-sm {
    font-size: 13px;
    letter-spacing: .02em;
  }
}

/* 384px 以下はサムネ 70px だとカードがはみ出すので、画面幅に合わせて小さくする。
   余白・間隔・文字の大きさは Figma のまま（385px 以上は 70px）。 */
@media screen and (max-width: 384px) {
  .c-menucard__thumb {
    width: clamp(40px, calc(45.7vw - 110px), 70px);
    height: clamp(40px, calc(45.7vw - 110px), 70px);
  }
}