@charset "UTF-8";
/* ============================================================
   Wing clinic 豊中駅前院 - TOP
   ------------------------------------------------------------
   構成:
   01. 変数 / リセット / ベース
   02. 共通パーツ（section-title / btn / アニメーション状態）
   03. ヘッダー / グロナビ / ヘッダーCV
   04. MV（羽アニメーション含む）
   05. 美容コラム記事カルーセル
   06. 強み
   07. Wing clinicとは
   08. 悩みから施術を選ぶ
   09. 症例（ビフォアフ）
   10. 担当医師紹介
   11. 初めての方へ・来院の流れ
   12. FAQ
   13. 最新情報
   14. ご予約・お問い合わせ（CV）
   15. アクセス
   16. フッター / PAGE TOP
   17. SP（レスポンシブ）
============================================================ */

/* ============================================================
   01. 変数 / リセット / ベース
============================================================ */
:root {
  /* color */
  --c-teal:        #51b8c8;  /* メインティール */
  --c-teal-bg:     #4db6c6;  /* セクション背景ティール */
  --c-teal-light:  #bfe6ea;  /* MV系ライトティール */
  --c-teal-pale:   #e5eef0;  /* FAQ背景 */
  --c-gold:        #c8a848;  /* ゴールド（罫線・ボタン） */
  --c-gold-light:  #d4bc8c;  /* ライトゴールド */
  --c-gold-bg:     #c3a558;  /* CVブロック背景 */
  --c-brown:       #8a7358;  /* flowカード（濃） */
  --c-brown-light: #cbb37e;  /* flowカード（淡） */
  --c-text:        #727171;  /* 基本テキスト */
  --c-text-dark:   #4e514f;  /* 濃いグレー */
  --c-white:       #fff;
  --c-line-green:  #06c755;  /* LINEグリーン */

  /* font */
  --ff-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  /* デザイン指定は游明朝（Yu Minchotai Pr6N）。
     Adobe Fonts（kit: vfn0pcb）の "yu-mincho-pr6n" を優先、
     未読込時はOS内蔵の游明朝＋Noto Serif JPフォールバック。
     ※Webフォントは R(400) のみ。太字はブラウザ疑似ボールドになる点に注意 */
  --ff-serif: "yu-mincho-pr6n", "Yu Mincho", "YuMincho", "游明朝体", "游明朝", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  /* 見出し透かし英字・日付・番号なども游明朝（デザイン準拠） */
  --ff-en:    "yu-mincho-pr6n", "Yu Mincho", "YuMincho", "游明朝体", "游明朝", "Noto Serif JP", serif;
  --ff-en-serif: "Cormorant Garamond", "Times New Roman", serif; /* MVセリフ英字 */

  /* layout */
  --w-content: 1200px;
  --header-h: 90px;

  /* easing */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff-serif); /* サイト全体を游明朝ベースに */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, dl, dt, dd, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; transition: opacity .3s; }
a:hover { opacity: .7; }
button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
table { border-collapse: collapse; }
iframe { border: 0; }

/* スクリーンリーダー用 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.main { overflow: clip; }

/* ============================================================
   02. 共通パーツ
============================================================ */

/* --- セクション見出し（透かし英字＋日本語） --- */
.section-title {
  position: relative;
  display: block;
  text-align: center;
  line-height: 1;
}
.section-title__en {
  display: block;
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: clamp(56px, 6.5vw, 100px);
  letter-spacing: .05em;
  color: var(--c-white);
  opacity: .35;
  white-space: nowrap;
}
.section-title__ja {
  display: block;
  /* 見出し共通ルール：JAの下端をENの下端に揃える。
     line-height:1 なので -1em ＝ JA自身の高さぶんの引き上げ ＝ 下端一致。
     EN/JAどちらのサイズが変わっても常に揃う */
  margin-top: -1em;
  position: relative; /* 透かし英字より手前 */
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--c-white);
}
/* 見出し下の羽アイコン（背景画像で付与） */
.faq .section-title::after,.about .section-title::after,.doctors .section-title::after {
  content: "";
  display: block;
  width: 28px; height: 28px;
  margin: 14px auto 0;
}
.faq .section-title::after {
  content: "";
  display: block;
  width: 28px; height: 28px;
  margin: 14px auto 0;
}
.about .section-title::after,.doctors .section-title::after {
  background: url("../images/common/icon_white.png") no-repeat center / contain;
}
.faq .section-title::after {
  background: url("../images/common/icon.png") no-repeat center / contain;
}

/* 白背景セクション用カラー différence */
.news .section-title__en { color: var(--c-gold-light); opacity: .35; }
.news .section-title__ja { color: var(--c-gold); }
/* 症例見出し：白帯の上に置くためnewsと同じ配色 */
.case .section-title__en { color: var(--c-gold-light); opacity: .35; }
.case .section-title__ja { color: var(--c-gold); }
.faq .section-title__en { color: var(--c-white); opacity: .9; z-index: 0; position: relative;}
.faq .section-title__ja { color: var(--c-teal); }

/* --- ボタン --- */
.btn {
  position: relative;
  display: inline-block;
  min-width: 300px;
  padding: 8px 40px;
  border-radius: 999px;
  font-size: 16px;
  letter-spacing: .1em;
  text-align: center;
  transition: opacity .3s, transform .3s;
}
.btn:hover { opacity: .85; transform: translateY(-2px); }

/* 金塗り */
.btn--more {
  /* 金はベタでなく左→右のグラデ（左が明るい・右端は従来のライトゴールド） */
  background: linear-gradient(90deg, #e6d5b0 0%, #b19c71 100%);
  color: var(--c-white);
}
/* 金塗り（カウンセリング誘導） */
.btn--counseling {
  background: var(--c-teal-bg);
  color: var(--c-white);
  border: 1px solid var(--c-white);
}
/* 白地×ティール枠（FAQ・モニター） */
.btn--outline,
.btn--monitor {
  background: var(--c-teal);
  border: 1px solid var(--c-teal);
  color: var(--c-white);
  border-radius: 6px;
}

/* CV系ボタン（WEB予約 / LINE / フォーム）:
   白地に金文字・緑文字＋「24時間かんたん」注記 */
.btn--reserve,
.btn--line,
.btn--form {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 220px;
  padding: 12px 24px;
  border-radius: 0;
  background: transparent;
}
.btn--reserve .btn__label,.btn--reserve .btn__en { color: var(--c-gold); }
.btn--line .btn__label,.btn--line .btn__en,
.btn--form .btn__label,.btn--form .btn__en { color: var(--c-line-green); }
.btn__note {
  font-size: 12px;
  letter-spacing: .15em;
  color: inherit;
}
.btn--reserve .btn__note { color: var(--c-gold); }
.cv-fixed__btn .btn--reserve span {
color: var(--c-white);
}
.btn--line .btn__note,
.btn--form .btn__note { color: var(--c-line-green); }
.btn__label {
  font-size: 18px;
  letter-spacing: .15em;
  font-family: var(--ff-serif);
}
.btn__en {
  font-family: var(--ff-en-serif);
  font-size: 13px;
  letter-spacing: .3em;
}
.btn__en::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'><path d='M1,0.8L4.6,4.5L1,8.2M6.4,0.8L10,4.5L6.4,8.2' fill='none' stroke='%23000' stroke-width='1.2'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'><path d='M1,0.8L4.6,4.5L1,8.2M6.4,0.8L10,4.5L6.4,8.2' fill='none' stroke='%23000' stroke-width='1.2'/></svg>") no-repeat center / contain;
}
/* 色帯が流れるホバー（news「一覧を見る」） */
.js-btn-band { overflow: hidden; }
.js-btn-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-100%);
}
.js-btn-band:hover::before { animation: btnBand .8s var(--ease-out); }
@keyframes btnBand { to { transform: translateX(100%); } }

/* --- スクロール連動フェード（IntersectionObserverで .is-inview 付与） --- */
.js-parallax-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.js-parallax-fade.is-inview {
  opacity: 1;
  transform: none;
}
/* 見出しテキストアニメーション */
.js-text-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.js-text-anim.is-inview {
  opacity: 1;
  transform: none;
}
/* MV英字コピーの輝き（メタリック質感＋光が走る）
   1枚目=走るハイライト / 2枚目=シルバーの金属グラデ */
.js-shine.is-inview {
  background-image:
    linear-gradient(100deg,
      transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%),
    linear-gradient(180deg,
      var(--c-white) 0%, #f0f5f6 35%, #c3ced2 50%, var(--c-white) 62%, #dde5e7 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s ease-in-out infinite;
}
@keyframes shine {
  0%, 25% { background-position: 130% 0, 0 0; }
  75%, 100% { background-position: -150% 0, 0 0; }
}

/* 動きを減らす設定尊重 */
@media (prefers-reduced-motion: reduce) {
  .js-parallax-fade, .js-text-anim { opacity: 1; transform: none; transition: none; }
  .feather { animation: none !important; display: none; }
}

/* ============================================================
   03. ヘッダー
============================================================ */
.header {
  position: absolute;
  top: 0; left: 0;
  z-index: 100;
  width: 100%;
  color: var(--c-white);
}
/* スクロール後の追従ヘッダー（JSで .is-scrolled 付与） */
.header.is-scrolled {
  position: fixed;
  background: var(--c-gold-light);
  color: var(--c-white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  animation: headerIn .4s var(--ease-out);
}
/* 追従状態のヘッダーにはSEOテキスト（h1）を出さない（デザイン準拠）。
   透過状態（TOP最上部・下層ヒーロー上）では表示 */
.header.is-scrolled .header__seo-text { display: none; }
@keyframes headerIn {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

.header__inner {
  position: relative;
  padding: 12px 40px;
}
.header__seo-text {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.4;
  font-family: var(--ff-serif);
}
.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.header__logo { width: 190px; flex-shrink: 0;}
.header__logo a { display: block;}
.gnav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 44px);
}
.gnav__link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-size: 15px;
  letter-spacing: .15em;
}
/* ホバーで金の下線 */
.gnav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.gnav__link:hover { opacity: 1; }
.gnav__link:hover::after { transform: scaleX(1); }

.gnav__item--tel .gnav__link { font-size: 20px; }
/* 電話アイコン（インラインSVG）
   フォントグリフの回転は箱が正方形でないため下にずれる。
   SVGは正方形の置換要素なので、中心回転しても他のナビと高さが揃う。
   角度の調整はこの rotate の値だけ変えればよい。 */
.gnav__tel-icon {
  width: 1em;
  height: 1em;
  vertical-align: -.12em;
  fill: currentColor;
  /* translateY = 高さの微調整ノブ（マイナスで上へ）／ rotate = 角度 */
  transform: translateY(-.09em) rotate(-55deg);
}

/* SPハンバーガー（PCでは非表示） */
.header__menu-btn {
  display: none;
  position: relative;
  z-index: 110;
  width: 48px; height: 48px;
}
.header__menu-lines {
  position: relative;
  display: block;
  width: 24px;
  height: 15px;
}
.header__menu-lines span {
  position: absolute;
  left: 0;
  width: 24px; height: 1px;
  background: currentColor;
  transition: transform .3s, opacity .3s;
}
.header__menu-lines span:nth-child(1) { top: 0; }
.header__menu-lines span:nth-child(2) { top: 7px; }
.header__menu-lines span:nth-child(3) { top: 14px; }
.header__menu-btn.is-open .header__menu-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__menu-btn.is-open .header__menu-lines span:nth-child(2) { opacity: 0; }
.header__menu-btn.is-open .header__menu-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- MV下部に重なるヘッダーCVバー --- */
.header-cv {
  /* MV内・英文コピー下に配置 */
  position: relative;
  z-index: 3;
  margin-top: 56px;
  display: flex;
  align-items: stretch;
  width: min(940px, 92%);
  background: var(--c-white);
  color: var(--c-text-dark);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  white-space: nowrap;
}
.header-cv__name {
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 170px;              /* デザイン実測（金ブロック 475〜644） */
  padding: 16px 8px;
  white-space: nowrap;       /* 折り返しは name-ja のblock化でのみ起こす */
  background: var(--c-gold-light);
  color: var(--c-white);
  font-family: var(--ff-serif);
  line-height: 1.2;
  text-align: center;
  letter-spacing: .05em;
}
.header-cv__name-en { font-size: 20px; }
.header-cv__name-ja { font-size: 18px; display: block; white-space: nowrap; }
.header-cv__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 20px 12px 51px;   /* PSD: 白ブロック左端 645 → 文言 696 */
}
.header-cv__tel a {
  display: block;
  color: #927957;
}
.header-cv__tel-label {
  display: block;
  font-size: 18px;
  color: #927957;                 /* PSD: ご予約・お問い合わせ 18px #927957 */
  letter-spacing: .1em;
}
.header-cv__tel-number {
    font-family: var(--ff-en);
    font-weight: 300;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: .1em;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.header-cv__tel-number::before {
  content: "\f095 ";
  font-family: FontAwesome;
  font-size: 30px;
  letter-spacing: 0;
}
.header-cv__hours {
  font-size: 10px;                /* PSD: ［診療時間］10px #9fa0a0 */
  color: #9fa0a0;
  letter-spacing: 0;
}
.header-cv__hours-label { color: #9fa0a0; margin-right: 4px; }
.header-cv__hours-time { font-family: "Lato", var(--ff-sans); font-size: 12px; }
.header-cv__holiday { margin-left: 8px; }
.header-cv__btns {
  display: flex;
  align-items: stretch;
}
/* 仕切りはPSD準拠：中央寄せの 1x50px ライトゴールド */
.header-cv__btn {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 38px;                /* PSD: 仕切り→文言 43 / 文言→仕切り 40 */
}
.header-cv__btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50px;
  background: var(--c-gold-light);
}
.header-cv__btn .btn {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
      line-height: 1;
}
.header-cv__btn .btn__note {
  display: block;
  font-size: 14px;
  letter-spacing: .1em;
}
.header-cv__btn .btn__label {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  letter-spacing: .1em;
}
.header-cv__btn .btn__en {
  display: block;
  margin-top: 12px;
  font-family: var(--ff-en);
  font-size: 14px;
  letter-spacing: .1em;
}

/* TOP・PC：ヘッダー内に出力されるSP用バーは使わない（FV内の白帯CVが本体） */
body.home .header .header-cv { display: none; }

/* MV内のCVバー（TOPデザイン実測：x475〜1445 = 970px 中央 / MV下端の約24px上） */
@media (min-width: 769px) {
  .mv .header-cv {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(970px, 92%);
    margin: 0;
  }
}

/* ============================================================
   04. MV
============================================================ */
.mv {
  position: relative;
  height: 100vh;
  min-height: 700px;
  background: var(--c-teal-light);
  overflow: hidden;
}
/* ヘッダー文字の可読性用グラデーション
   （デザインの「グラデーション 1013」レイヤー再現：#215f68 → 透明） */
.mv::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 320px;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(33, 95, 104, .55) 0%,
    rgba(33, 95, 104, .25) 45%,
    rgba(33, 95, 104, 0) 100%);
  pointer-events: none;
}
.mv__bg,
.mv__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mv__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-left: clamp(24px, 17.8vw, 342px);  /* デザイン実測：コピー左端 342px */
  padding-bottom: 150px;                     /* 下端の絶対配置CVバーと重ならないように */
}
/* デザイン実測：コピー下端→CVバー上端は約50px（YOURSのスワッシュはほぼ接する）。
   センタリングだと縦長画面でコピーとバーの間が間延びするので、
   PCではコピー群を下寄せにして バー(bottom24+高さ約115px)+50px に固定する */
@media (min-width: 769px) {
  .mv__inner {
    justify-content: flex-end;
    padding-bottom: 191px;
  }
}
.mv__copy {
  font-family: var(--ff-en-serif);
  font-weight: 500;
  font-size: clamp(48px, 8.5vw, 130px);
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--c-white);
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(255, 255, 255, .35);
}
/* 「私は、私を取り戻す」 */
.mv__inner > .mv__copy:first-child,
.mv__copy--ja { font-family: var(--ff-serif); }
.mv__copy.js-shine + .mv__copy-en { margin-top: 8px; }
.mv .mv__copy {
  font-family: var(--ff-serif);
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: .5em;
  font-weight: 500;
}
/* 英字コピー：メタリック加工済みの画像で再現 */
.mv__copy-en {
  position: relative;
  width: min(1193px, 62vw);
  margin-top: 24px;
}
.mv__copy-en-img {
  width: 100%;
  filter: drop-shadow(0 6px 16px rgba(31, 74, 80, .35)); /* 文字のドロップシャドウ */
}
/* キラキラ（黒地→アルファ変換済みの白グロー画像） */
.mv__copy-en-sparkle {
  position: absolute;
  top: -6%;
  left: -0.6%;
  width: 104.8%;
  pointer-events: none;
  animation: sparkleTwinkle 4s ease-in-out infinite;
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
/* 反射系のマスク画像（SPでは改行違いのSP版に差し替える） */
.mv__copy-en { --copy-mask: url("../images/top/mv_copy_en.png"); }
/* 金属の暗い反射帯（文字型マスク内をゆっくり往復して
   クロームの映り込みが動いているように見せる） */
.mv__copy-en::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 15%,
    rgba(45, 68, 74, .5) 35%,
    transparent 50%,
    rgba(45, 68, 74, .35) 72%,
    transparent 88%);
  background-size: 280% 100%;
  background-position: 0% 0;
  background-repeat: no-repeat;
  -webkit-mask: var(--copy-mask) no-repeat center / contain;
          mask: var(--copy-mask) no-repeat center / contain;
  animation: metalShift 9s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1; /* 画像の上に描画 */
}
@keyframes metalShift {
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}
/* 光のスイープ（文字型にマスクして文字の上だけ走らせる） */
.mv__copy-en::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 32%, rgba(255, 255, 255, .85) 50%, transparent 68%);
  background-size: 250% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  -webkit-mask: var(--copy-mask) no-repeat center / contain;
          mask: var(--copy-mask) no-repeat center / contain;
  animation: shineSweep 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shineSweep {
  0%, 30%   { background-position: 130% 0; }
  70%, 100% { background-position: -150% 0; }
}
.mv__clinic-name {
  font-family: var(--ff-serif);
  font-size: 15px;
  letter-spacing: .15em;
  color: var(--c-white);
}
.mv__tel a {
  display: inline-flex;
  flex-direction: column;
  color: var(--c-white);
}
.mv__tel-label { font-size: 13px; letter-spacing: .1em; }
.mv__tel-number {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: 34px;
  letter-spacing: .08em;
}
.mv__tel-hours { font-size: 12px; letter-spacing: .05em; }

/* スクロールダウン */
.mv__scroll {
  position: absolute;
  right: 40px;
      bottom: 20px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--c-white);
}
.mv__scroll-text {
  font-family: var(--ff-en);
  font-size: 11px;
  letter-spacing: .3em;
  writing-mode: vertical-rl;
}
.mv__scroll-line {
  width: 1px; height: 70px;
  background: rgba(255, 255, 255, .8);
  overflow: hidden;
  position: relative;
}
.mv__scroll-line::after {
  content: "";
  position: absolute;
  top: -100%;
  width: 100%; height: 100%;
  background: var(--c-gold-light);
  animation: scrollLine 2s var(--ease-out) infinite;
}
@keyframes scrollLine {
  0%   { top: -100%; }
  60%, 100% { top: 100%; }
}

/* --- 羽アニメーション ---
   JSで .mv__feathers 内に .feather を複数生成。
   各要素にカスタムプロパティ（--x, --size, --dur, --delay, --sway）を付与 */
.mv__feathers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.feather {
  position: absolute;
  top: calc(var(--size, 40px) * -1); /* 羽全体が画面外から降ってくるように */
  left: var(--x, 50%);
  width: var(--size, 40px);
  height: var(--size, 40px);
  /* 画像はJSが .feather--1〜5 のクラスでランダム割り当て。
     URLはCSS側で解決する（JSの相対パスはテーマ外を向いて404になるため） */
  background: url("../images/common/feather01.png") no-repeat center / contain;
  opacity: 0;
  animation:
    featherFall var(--dur, 12s) linear var(--delay, 0s) infinite,
    featherSway calc(var(--dur, 12s) / 4) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: transform, opacity;
}
.feather--1 { background-image: url("../images/common/feather01.png"); }
.feather--2 { background-image: url("../images/common/feather02.png"); }
.feather--3 { background-image: url("../images/common/feather03.png"); }
.feather--4 { background-image: url("../images/common/feather04.png"); }
.feather--5 { background-image: url("../images/common/feather05.png"); }
@keyframes featherFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--op, .8); }
  90%  { opacity: var(--op, .8); }
  100% { transform: translateY(calc(110vh + var(--size, 40px))) rotate(300deg); opacity: 0; }
}
@keyframes featherSway {
  from { margin-left: calc(var(--sway, 40px) * -1); }
  to   { margin-left: var(--sway, 40px); }
}

/* ============================================================
   05. 美容コラム記事カルーセル
============================================================ */
/* 期間限定キャンペーン帯（バナーカルーセルの代替。終了時はこのブロックごと削除） */
.cp-strip {
  padding: 40px 16px;
  background: var(--c-teal-bg);
}
.cp-strip__link {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  transition: opacity .2s var(--ease-out, ease);
}
.cp-strip__link:hover { opacity: .85; }
.cp-strip__link img {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(16, 62, 71, .15);
}
@media (max-width: 768px) {
  .cp-strip { padding: 24px 16px; }
}

.posts {
  position: relative;
padding: 40px 0;
  background: var(--c-teal-bg);
}
.posts__item { width: 300px; }
.posts__link { display: block; color: var(--c-white); }
.posts__thumb {
  aspect-ratio: 16 / 9; /* バナー仕様 */
  background: #ececec;
  overflow: hidden;
}
.posts__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.posts__link:hover .posts__thumb img { transform: scale(1.06); }
.posts__prev,
.posts__next {
  position: absolute;
  top: 40%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(78, 81, 79, .7);
  color: var(--c-white);
  font-size: 18px;
}
.posts__prev { left: 240px; }
.posts__next { right: 240px; }
.posts__pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  height: 12px;
}
.posts__pagination .swiper-pagination-bullet {
  width: 7px; height: 7px;
  background: var(--c-white);
  opacity: .6;
}
.posts__pagination .swiper-pagination-bullet-active {
  background: transparent;
  border: 1px solid var(--c-white);
  opacity: 1;
  transform: scale(1.4);
}

/* ============================================================
   06. 強み
============================================================ */
/* 強み〜とはの連続背景帯 */
.teal-band {
  position: relative;
  background: var(--c-teal-bg);
  overflow: clip;
}
/* パララックスレイヤー1：背景（ゆっくり順方向） */
.teal-band__bg {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  will-change: transform;
}
/* 院内写真：帯全体にうっすら敷く（デザイン準拠） */
.teal-band__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/top/about_bg.jpg") center / cover no-repeat;
  opacity: .3;
  /* デザイン準拠：帯の上部はフラットな teal（写真なし）→徐々に写真が現れる。
     上端の切れ目防止に、下端も軽くフェードアウト */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 55%, #000 92%, rgba(0,0,0,.55) 100%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 55%, #000 92%, rgba(0,0,0,.55) 100%);
}
/* パララックスレイヤー2：羽の散らし（逆方向に速く・2セクション通し） */
/* 外側ラッパー：動かない。上下フェードのマスクはここに置く。
   マスクを動くレイヤー自身に付けると、パララックス移動と一緒にフェード位置も
   ずれて帯の端で羽が半透明のままスパッと切れて見える（今回の不具合の原因） */
.teal-band__feathers-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, #000 280px,
    #000 calc(100% - 280px), transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0, #000 280px,
    #000 calc(100% - 280px), transparent 100%);
}
/* 内側：パララックスで動く羽タイル。移動量（±170px程度になり得る）ぶんの
   ヘッドルームを確保。はみ出しはラッパーのマスクで自然に消える */
.teal-band__feathers {
  position: absolute;
  inset: -180px 0;
  background: url("../images/top/bg_feather_teal.png") repeat-y center / 100% auto;
  will-change: transform;
  opacity: .4;
}
/* デザイン実測：帯全体に上→下の暗化フィルタ（写真・羽根ごと暗くなる）
   #51b8c8 →（35%まで変化なし）→ 下端で #3a7c82 相当 */
.teal-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 44, 50, 0) 0%,
    rgba(10, 44, 50, 0) 35%,
    rgba(10, 44, 50, .38) 100%);
}
.teal-band > section {
  position: relative;
  z-index: 1;
}

.strength {
padding: 60px 0px;
  background: transparent;
}
.strength__list {
  position: relative;
  z-index: 1; /* パララックスレイヤーより手前 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(var(--w-content) + 240px, 92%);
  margin: 0 auto;
}
.strength__item {
  position: relative;
    padding: 20px 32px;
  background: rgba(244, 244, 244, .9);
  border: 1px solid var(--c-gold);
  text-align: center;
      display: grid;
    /* autoトラックはmax-content基準で子がはみ出すため、列幅に拘束して折り返しを効かせる */
    grid-template-columns: minmax(0, 100%);
    justify-items: center;
}
.strength__item + .strength__item { border-left: none; }
.strength__circle {
    width: 278px;
    height: 278px;
    border-radius: 50%;
    overflow: hidden;
    margin: 28px 0 32px;
}
.strength__circle img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.strength__item-title {
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 400;
  color: var(--c-text-dark);
}
.strength__item-text {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
  text-align: justify;
}

/* ============================================================
   07. Wing clinicとは
============================================================ */
.about {
  position: relative;
  padding: 0 0 60px;
  background: transparent; /* 背景は.teal-bandと連続 */
  text-align: center;
}
.about__inner {
  position: relative;
  z-index: 2;
  width: min(900px, 90%);
  margin: 0 auto;
}
.about__text {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2.3;
  letter-spacing: .12em;
  color: var(--c-white);
  opacity: .9;
}
.about__text p {
margin-top: 20px;
}

/* ============================================================
   08. 悩みから施術を選ぶ
============================================================ */
.treatment {
  position: relative;
  padding: 60px 0;
  background: var(--c-teal-bg);
}
.treatment__inner {
  width: min(var(--w-content), 92%);
  margin: 0 auto;
}
.treatment__container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2カラム等幅 */
  gap: 40px;
  margin-top: 48px;
}

/* 左：悩みタブ */
.treatment__worry-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.treatment__worry-item button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  color: var(--c-text-dark);
  transition: color .3s;
  background: var( --c-white);
  /* タブ自体を角丸に：画像PNGの角丸切り欠きから白背景が覗かないようクリップ */
  border-radius: 10px;
  overflow: hidden;
}
/* 左のゴールドバー */
.treatment__worry-item button::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 8px; height: 100%;
  border-radius: 4px 0 0 4px;
  background: var(--c-gold-light);
  opacity: .8;
  transition: opacity .3s, background .3s;
}
.treatment__worry-label {
  font-size: clamp(17px, 1.4vw, 22px);
  letter-spacing: .15em;
      padding: 8px 20px;
}
.treatment__worry-img {
  width: 160px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  flex-shrink: 0;
}
.treatment__worry-item.is-active button::before,
.treatment__worry-item button:hover::before {
  background: var(--c-gold);
  opacity: 1;
}
/* 右：メニューパネル */
.treatment__menus {
  position: relative;
  padding: 20px;
  background: var(--c-white);
  border-radius: 12px;
}
/* アクティブタブへ向く三角
   位置はJSがアクティブタブの中心に合わせて --arrow-top を更新 */
.treatment__menus::before {
  content: "";
  position: absolute;
  top: var(--arrow-top, 60px);
  left: -18px;
  transform: translateY(-50%);
  /* 縦幅は保ちつつ左へ長く伸ばす（縦16px×長さ18px） */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 18px solid var(--c-white); /* パネルと同色でパネルから生える見た目に */
  transition: top .4s var(--ease-out);
}
.treatment__menu-list {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.treatment__menu-list.is-active { display: flex; }
.treatment__menu-item a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* /menu/ のお悩み別カテゴリーと同期して項目数が増えた（最大9件）ため、
     88px→62px に低くして左タブとの高さバランスを取る */
  min-height: 62px;
  background: #9db4b9;
  overflow: hidden;
}
.treatment__menu-item img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .6;
  transition: opacity .4s, transform .6s var(--ease-out);
}
/* 文字の可読性用オーバーレイ */
.treatment__menu-item a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
    background: rgb(0 0 0 / 70%);
  transition: background .4s;
}
.treatment__menu-item a:hover img { opacity: .85; transform: scale(1.04); }
.treatment__menu-item a:hover::before { background: rgba(0, 0, 0, .05); }
.treatment__menu-item span {
  position: relative;
  z-index: 2;
  font-size: 16px; /* カード低背化にあわせて18px→16px */
  letter-spacing: .2em;
  color: var(--c-white);
  text-shadow: 0 0 10px rgba(0, 0, 0, .35);
}

.treatment__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 70px;
}
.treatment__btns .btn--counseling { min-width: 420px; }

/* ============================================================
   09. 症例（ビフォアフ）
============================================================ */
.case {
  padding: 60px 0;
  background: var(--c-white);
}
.case__inner {
  width: min(var(--w-content), 92%);
  margin: 0 auto;
  text-align: center;
}
.case__band {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}
/* Swiper本体はコンテンツ幅。overflow:hiddenで隣スライドは見えない */
.case__slider {
  position: static; /* 矢印は白帯基準で配置 */
  overflow: hidden;
}
.case__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  text-align: left;
  /* Swiperの .swiper-slide{height:100%} を打ち消してflexのstretchを効かせる。
     全カードが一番高いカードと同じ高さになり、テキスト量が違っても
     写真が「全体の高さの中央」に固定される（SPと同じ考え方） */
  height: auto;
}
/* ビフォー/アフター：フラットな上下積み（デザイン準拠） */
.case__photos {
  position: relative;
  width: min(432px, 100%);
  margin: 0 auto;
}
.case__photo {
  position: relative;
  aspect-ratio: 2 / 1;
  background: #9a9a9a;
  overflow: hidden;
}
.case__photo--after { background: #d9dcdb; }
.case__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.case__photo-label {
  position: absolute;
  top: 8px; left: 12px;
  padding: 3px 12px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--c-white);
  /* 写真の明暗に関係なく読めるよう半透明の帯を敷く */
  background: rgba(40, 60, 64, .55);
  border-radius: 3px;
  line-height: 1.6;
}
.case__photo--after .case__photo-label { color: var(--c-white); }
/* 縦長症例バリエーション：正面顔など縦位置写真はBefore/Afterを左右並びに。
   使い方：<li class="case__item case__item--portrait"> を付けるだけ。
   比率は実写真が来たら要調整（いまは写真の定番 3:4） */
.case__item--portrait .case__photos { display: flex; }
.case__item--portrait .case__photo { flex: 1; aspect-ratio: 3 / 4; }

.case__name {
  font-size: 26px;
  letter-spacing: .1em;
  color: var(--c-text-dark);
}
.case__data {
  margin-top: 20px;
  font-size: 15px;
  line-height: 2;
}
/* 限定解除（医療広告ガイドライン）：治療内容・費用・リスク副作用の併記枠 */
.case__disclosure {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: #6f6f6f;
}
.case__disclosure > div + div {
  margin-top: 12px;
}
/* dt＝ラベル装飾（ティール枠のチップ）、dd＝その下に落とす */
.case__disclosure dt {
  display: inline-block;
  padding: 2px 12px;
  border: 1px solid var(--c-teal);
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--c-teal);
}
.case__disclosure dd { margin: 4px 0 0; }
.case__doctor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  font-size: 16px;
  letter-spacing: .1em;
}
.case__doctor-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
/* モニター応募ボタン（右カラム内） */
.case__monitor {
  display: inline-block;
  min-width: 0;
  margin-top: 32px;
  padding: 12px 24px;
  font-size: 14px;
  letter-spacing: .1em;
}

.case__prev, .case__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px; height: 40px;
}
/* FAアイコンはSP専用（PCは細シェブロン） */
.case__prev .fa, .case__next .fa { display: none; }
.case__prev { left: clamp(16px, 4vw, 88px); }
.case__next { right: clamp(16px, 4vw, 88px); }
.case__prev::before, .case__next::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-top: 1px solid var(--c-text-dark);
  border-right: 1px solid var(--c-text-dark);
}
.case__prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.case__next::before { transform: translate(-70%, -50%) rotate(45deg); }
.case__pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
      margin: 28px 0 0 0;
}
/* 個人差の注意書き（全症例共通／医療広告ガイドライン配慮） */
.case__note {
  max-width: 720px;
  margin: 24px auto 0;
  font-size: 12px;
  line-height: 1.8;
  color: #6f6f6f;
  text-align: left;
}
.case__pagination .swiper-pagination-bullet {
  width: 7px; height: 7px;
  /* セクションを白背景化したため白ドット→ティールに変更 */
  background: var(--c-teal);
  opacity: .45;
}
.case__pagination .swiper-pagination-bullet-active {
  background: transparent;
  border: 1px solid var(--c-teal);
  opacity: 1;
  transform: scale(1.4);
}
.case__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
}

/* ============================================================
   10. 担当医師紹介
============================================================ */
.doctors {
padding: 60px 0;
  background: var(--c-teal-bg);
}
.doctors__inner {
  width: min(var(--w-content), 92%);
  margin: 0 auto;
}
.doctors__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(280px, auto));
  gap: 28px;
  margin-top: 40px;
}
.doctors__item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #67757a;
}
.doctors__item--main { grid-row: span 2; }
.doctors__photo,
.doctors__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.doctors__photo { position: absolute; inset: 0; }
/* 速水医師（縦長写真）はPCで頭が切れるため上基準でトリミング（総合FB No.3） */
.doctors__item--main .doctors__photo img { object-position: 50% 0; }
.doctors__caption {
  position: absolute;
  left: 32px; bottom: 28px;
  z-index: 2;
  color: var(--c-white);
}
.doctors__position {
  font-size: 14px;
  letter-spacing: .15em;
}
.doctors__name {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .2em;
}
.doctors__name-en {
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 44px);
  letter-spacing: .02em;
  color: var(--c-gold-light);
}
/* マウスオーバー詳細 */
.doctors__detail {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 36px 40px;
  background: rgba(78, 81, 79, .92);
  border-radius: 10px;
  color: var(--c-white);
  opacity: 0;
  transition: opacity .5s;
  overflow: auto;
}
.doctors__item:hover .doctors__detail,
.doctors__item:focus-within .doctors__detail { opacity: 1; }
.doctors__lead {
  font-size: 19px;
  letter-spacing: .12em;
  line-height: 1.7;
  color: var(--c-teal);
}
.doctors__profile { font-size: 14px; line-height: 1.9; }
/* ドクターSNS（ホバー詳細内）：白抜き円アイコン、ホバーでティール */
.doctors__sns {
  display: flex;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
/* アイコンはデザイン書き出し（images/doctor/icon_*.png）＝ドクターページと共通 */
.doctors__sns-link {
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--c-gold-light) no-repeat center / 35px 35px;
  transition: opacity .25s;
}
.doctors__sns-link:hover { opacity: .75; }
.doctors__sns-link--instagram { background-image: url("../images/doctor/icon_instagram.png"); }
.doctors__sns-link--x         { background-image: url("../images/doctor/icon_x.png"); }

.doctors__profile dt {
  margin-top: 12px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  color: var(--c-teal);
  letter-spacing: .1em;
}
.doctors__profile dd:last-of-type { color: var(--c-gold-light); }

/* ============================================================
   11. 初めての方へ・来院の流れ
============================================================ */
.flow {
  position: relative;
    padding: 40px 0;
 isolation: isolate;
}
.flow__bg,
.flow__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.flow__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(88, 150, 156, .6);
}
.flow__bg {
   z-index: -1;
   overflow: hidden;
}
.flow__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
  gap: 60px;
  width: min(var(--w-content), 92%);
  margin: 0 auto;
}
.flow .section-title__en {
  white-space: normal;
  line-height: 1.05;
}
/* 左：追従見出し */
.flow__head {
  position: sticky;
  top: 140px;
  align-self: start;
  padding: 40px 0;
  color: var(--c-white);
}
.flow__head::before,
.flow__head::after {
  content: "";
  display: block;
  width: 80%; height: 1px;
  background: var(--c-white);
  opacity: .6;
}
.flow__head::before { margin-bottom: 36px; }
.flow__head::after { margin-top: 36px; }
.flow .section-title { text-align: left; }
.flow .section-title__en { opacity: .5; }
.flow .section-title__ja {
  font-size: 24px;
}
.flow__lead {
  margin-top: 28px;
  font-size: 15px;
  letter-spacing: .15em;
  line-height: 2;
}
/* 右：ステップ */
.flow__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  counter-reset: step;
      padding: 40px 0;
}
.flow__item {
  position: relative;
  min-height: 200px;
  border-radius: 10px;
  padding: 20px 210px 20px 32px;
  color: var(--c-white);
  overflow: hidden;
  counter-increment: step;
}
/* カード背景を交互に（デザイン実測：奇数=濃→淡 / 偶数=淡→濃 のゴールドグラデ） */
.flow__item:nth-child(odd)  { background: linear-gradient(90deg, #927957 0%, #927957 25%, #d3bc94 100%); }
.flow__item:nth-child(even) { background: linear-gradient(90deg, #d0b889 0%, #d0b889 55%, #ae9770 100%); }
/* 番号はマークアップに持たせず、カウンターで自動採番（01〜） */
.flow__item-title::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: 56px;
  line-height: 1;
  opacity: .5;
}
.flow__item-title {
      display: flex;
    align-items: center;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .12em;
   gap: 12px;
}
.flow__item-text {
  margin: 12px 0 0 0;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .05em;
}
.flow__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 180px;
}
/* デザイン：カードのグラデが写真の左端に被さって溶け込む */
.flow__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.flow__item:nth-child(odd) .flow__photo::after {
  background: linear-gradient(90deg, #b99f7c 0%, rgba(185, 159, 124, 0) 55%);
}
.flow__item:nth-child(even) .flow__photo::after {
  background: linear-gradient(90deg, #c5ae80 0%, rgba(197, 174, 128, 0) 55%);
}
.flow__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ============================================================
   12. FAQ
============================================================ */
.faq {
padding: 60px;
  background: var(--c-teal-pale);
}
.faq__inner {
  width: min(820px, 92%);
  margin: 0 auto;
}
.faq__list { margin-top: 40px; }
.faq__item + .faq__item { margin-top: 40px; }
.faq__question {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(81, 184, 200, .5);
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--c-text);
}
/* デザインはアコーディオンではなく常時全文表示 */
.faq__answer {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 20px;
}
.faq__answer p {
  font-size: 15px;
  line-height: 2;
  letter-spacing: .05em;
  text-align: justify;
}
.faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 50%;
  font-family: var(--ff-serif);
  font-size: 18px;
  color: var(--c-white);
}
.faq__icon--q { background: var(--c-teal); }
.faq__icon--a { background: var(--c-gold-light); }
.faq__btn {
  display: block;
  width: fit-content;
  margin: 70px auto 0;
  background: var(--c-white);
  border: 1px solid var(--c-teal);
  color: var(--c-teal);
}

/* ============================================================
   13. 最新情報
============================================================ */
.news {
padding: 40px 0 40px;
  background: var(--c-white);
}
.news__inner {
  width: min(980px, 92%);
  margin: 0 auto;
}
.news .section-title { text-align: left; }

.news__tabs {
  display: flex;
  gap: 36px;
  margin-top: 60px;
  font-size: 15px;
  letter-spacing: .1em;
}
.news__tab button {
  position: relative;
  padding: 6px 2px;
  color: var(--c-text);
}
.news__tab.is-active button::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-gold-light);
}
.news__list {
    margin-top: 32px;
  border-top: 1px solid #ddd;
}
/* TOPはカテゴリタブ撤去に伴い一覧の上余白を確保（一覧ページ .news--archive はタブありのため対象外） */
.news:not(.news--archive) .news__list { margin-top: 56px; }
.news__link {
    position: relative;
    display: grid;
    grid-template-columns: 88px 100px 1fr 60px;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    border-bottom: 1px solid #ddd;
}
.news__date {
font-family: var(--ff-en);
    font-weight: 300;
    font-size: 16px;
  letter-spacing: .05em;
  color: var(--c-text-dark);
}
.news__category {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--c-gold);
  font-size: 12px;
  letter-spacing: .1em;
  text-align: center;
  color: var(--c-gold);
}
.news__text {
  font-size: 15px;
  letter-spacing: .1em;
}
/* → 矢印（デザイン実測：細線39px + 塗り三角6x7 / #595757、線は50%） */
.news__link::after {
  content: "";
  justify-self: end;
  width: 39px;
  height: 8px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 8'><path d='M0,4H34' stroke='%23595757' stroke-opacity='.5' stroke-width='1'/><path d='M33,0.5L38.5,4L33,7.5Z' fill='%23595757'/></svg>") no-repeat center / contain;
  transition: transform .3s;
}
.news__link:hover::after { transform: translateX(6px); }

.news__more {
  display: block;
  width: fit-content;
  margin: 60px auto 0;
}

/* ============================================================
   14. ご予約・お問い合わせ（CV）
   ------------------------------------------------------------
   PSD（wingclinic_doctor.psd / FOOTER › 予約問い合わせ）の実測値で再実装。
   静的版TOPは「写真の上に電話番号・3枚のカード」だったが、
   PSDは「写真＋見出し＋2枚のカード → 下に金＋白の帯（電話・WEB予約）」。
   TOP・下層ともこのパーツ（template-parts/cv.php）を使う。
============================================================ */
.cv {
  position: relative;
  background: url("../images/top/cv_bg.jpg") center / cover no-repeat, var(--c-teal-bg);
}
/* 指示書4：背景をパララックスでずらす（PCのみ。iOSはfixed非対応のため通常表示） */
@media (min-width: 769px) {
  .cv { background-attachment: fixed, scroll; }
}
/* 写真を少し沈める（PSD: レイヤー 21 相当） */
.cv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(77, 182, 198, .15) 0%, rgba(77, 182, 198, .35) 100%);
}
.cv__inner {
  position: relative;
  z-index: 2;
    padding: 20px 0 20px;
  text-align: center;
}
.cv .section-title__en { opacity: .2; }

/* --- 2枚のカード（PSD: 200x200 / 間 21 / 白 89%） --- */
.cv__cards {
  display: flex;
  justify-content: center;
  gap: 21px;
  margin: 32px 0 0;          /* 見出し下端 5980 → カード 6012 */
  padding: 0;
  list-style: none;
}
.cv__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 200px;
  height: 200px;
  padding: 0;
  white-space: nowrap;
  background: rgba(255, 255, 255, .89);
  color: var(--c-gold);
  text-align: center;
  line-height: 1;
  transition: opacity .3s;
      border-radius: 8px;
}
.cv__card:hover { opacity: .8; }
.cv__card--line { color: var(--c-line-green); }
/* アイコンはPNGをマスクにして currentColor で塗る。
   （PSDから書き出した単色シルエットPNGをそのまま使える。
     LINE＝カードの文字色と同じ緑、フォーム＝金になる） */
.cv__card-icon {
  display: block;
  width: 42px;
  height: 40px;
  margin-bottom: 10px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
}
.cv__card--line .cv__card-icon {
  -webkit-mask-image: url("../images/common/icon_line.png");
          mask-image: url("../images/common/icon_line.png");
}
.cv__card--form .cv__card-icon {
  width: 40px;
  height: 27px;
  margin: 7px 0 16px;
  -webkit-mask-image: url("../images/common/icon_mail.png");
          mask-image: url("../images/common/icon_mail.png");
}
.cv__card-note  { font-size: 14px; letter-spacing: .1em; }
.cv__card-label { margin-top: 5px; font-size: 18px; letter-spacing: .05em; }
.cv__card--form .cv__card-label { letter-spacing: -.05em; }
.cv__card-en    { margin-top: 12px; font-size: 14px; letter-spacing: .1em; }
.cv__card-en::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'><path d='M1,0.8L4.6,4.5L1,8.2M6.4,0.8L10,4.5L6.4,8.2' fill='none' stroke='%23000' stroke-width='1.2'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'><path d='M1,0.8L4.6,4.5L1,8.2M6.4,0.8L10,4.5L6.4,8.2' fill='none' stroke='%23000' stroke-width='1.2'/></svg>") no-repeat center / contain;
}
.cv__card--form { color: #927957; }

.cv__line-note {
  margin: 22px 0 0; 
  font-size: 16px;
  letter-spacing: .05em;
  color: var(--c-white);
}

/* ============================================================
   14.5 追従CVバー（PSD: FT_CVボタン 1920x120）
   ------------------------------------------------------------
   画面下に固定される金＋白の帯。footer.php が全ページで読み込み、
   main.js が少しスクロールした時点で .is-visible を付けてせり上げる。
   SPはヘッダー側の追従CVがあるため出さない。
   文字サイズ・間隔はヘッダーCVバー（.header-cv）と共通。
============================================================ */
.cv-fixed {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 95;
    /* 非表示が初期状態：スクロール300pxでJSが .is-visible を付けてふわっと出す */
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.cv-fixed.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cv-fixed__btn {
    height: 148px;
    width: 148px;
    border-radius: 50%;
    overflow: hidden;
}
.cv-fixed__btn .btn--reserve {
    position: relative;
    width: auto;
    background: var(--c-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: row;
    min-width: auto;
}
.cv-fixed__btn .btn__label {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .1em;
}
/* ============================================================
   15. アクセス
   ------------------------------------------------------------
   PSD準拠。地図はピン入りの書き出し画像（access_map.jpg）を
   セクション背景に敷く。カードは 580x460 / 左582px（1920時 x=362）。
============================================================ */
.access {
  position: relative;
  background: #dfeef0 url("../images/common/access_map.jpg") center / cover no-repeat;
}
.access__map-sp { display: none; }
/* Swiper未初期化時のフォールバック（横並び維持） */
.swiper-wrapper { display: flex; }
.access__inner {
  position: relative;
  height: 505px;               /* PSD: 帯 6389 → 6894 */
}
/* ティールカード（PSD: 長方形 1149 580x460 / (362,6410)） */
.access__info {
  position: absolute;
  top: 22px;
  left: max(calc(50% - 598px), 4%);
  z-index: 5;
  width: 580px;
  padding: 52px 60px 0 64px;   /* PSD: 見出し (66,56) */
  height: 460px;
   background: #0b6674;
  color: var(--c-white);
  overflow: hidden;
}
/* カード内の羽ロゴ透かし（PSD: IMG_0817） */
.access__info::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/common/logo_watermark.png") no-repeat center / auto 100%;
  opacity: .3;
  pointer-events: none;
}
.access__info > * { position: relative; }
.access__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.access__title,
.access__hours-title {
  font-size: 22px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .05em;
}
.access__map-link {
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--c-gold-light);
  font-weight: bold;
}
.access__map-link::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 16px;
  margin-right: 5px;
  vertical-align: -2px;
  background: url("../images/common/icon_pin.png") no-repeat center / contain;
}
.access__address {
  margin-top: 20px;            /* PSD: 見出し 6466 → 住所 6508 */
  font-size: 16px;
  line-height: 24px;
}
.access__route {
  margin-top: 20px;            /* PSD: 住所 → 6551 */
  font-size: 16px;
  line-height: 24px;
}
.access__route li {
  position: relative;
  padding-left: 40px;          /* PSD: アイコン幅28 + 12 */
}
.access__route li + li { margin-top: 12px; }
.access__route li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 20px;
  /* ショートハンドだと詳細度で下の--train/--planeのimage指定を打ち消すためロングハンドで */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.access__route li.access__route--train::before { background-image: url("../images/common/icon_train.png"); }
.access__route li.access__route--plane::before { background-image: url("../images/common/icon_car.png"); }
/* 金の罫線（PSD: (66,237) 450x2）と診療時間 */
.access__hours-title {
    margin-top: 30px;
    padding-top: 30px;
  border-top: 2px solid var(--c-gold-light);
  width: 450px;
  max-width: 100%;
}
.access__hours {
  margin-top: 20px;
  font-size: 16px;
  line-height: 32px;
}
.access__hours small { font-size: 14px; }

/* ============================================================
   16. フッター / PAGE TOP
============================================================ */
.footer {
  position: relative;
  padding: 60px 0 0;
  background: var(--c-white);
  overflow: hidden;
}
/* PSD: IMG_0796（ぼかし済みの院内写真）を不透明度30%で敷く。
   画像自体がぼかし済みなのでCSS側のblurは不要（リキッドグラス風の質感は画像が持っている） */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/common/footer_bg.jpg") center / cover no-repeat;
  opacity: .3;
  pointer-events: none;
}
.footer__inner { position: relative; }
.footer__inner {
  width: min(var(--w-content), 92%);
  margin: 0 auto;
}
.footer__inner { position: relative; z-index: 1; }
.footer__logo { text-align: center; }
.footer__logo img { width: 220px; }
.footer__logo-text {
  margin-top: 12px;
  font-family: var(--ff-serif);
  font-size: 18px;              /* PSD: 18px / 行送り30 / #51b8c8 */
  line-height: 30px;
  letter-spacing: 0;
  color: var(--c-teal);
}
.footer__nav {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-template-areas:
    "clinic  menu"
    "support menu";
  gap: 40px 80px;
  margin-top: 70px;
  color: var(--c-text-dark);
}
.footer__nav-col--menu { grid-area: menu; position: relative; }
.footer__nav-col:nth-child(2) { grid-area: clinic; }
.footer__nav-col:nth-child(3) { grid-area: support; }

/* 見出し：英字大＋日本語小（HTMLは「日本語+<span>英字</span>」なので column-reverse で反転） */
.footer__nav-title {
  display: flex;
  flex-direction: column-reverse;
  font-size: 14px;              /* PSD: 見出しは #927957 */
  letter-spacing: .05em;
  padding-bottom: 10px;
    border-bottom: 1px solid var(--c-gold-light);
    color: #927957;
    line-height: 1.4;
}
.footer__nav-title-en {
  display: block;
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: .08em;
}
.footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-top: 18px;
  font-size: 14px;
  letter-spacing: .08em;
}
.footer__nav-subtitle {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--c-text-dark);
}
.footer__nav-group .footer__nav-list { margin-top: 8px; opacity: .85; }
.footer__nav-more {
  position: absolute;
  top: -6px;
  right: 0;
  min-width: 150px;
  padding: 8px 20px;
  background: transparent;
  border: 1px solid var(--c-gold);
  border-radius: 4px;
  color: var(--c-gold);
  font-size: 13px;
}
.footer__copyright {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  padding: 16px 0;
  background: var(--c-white);
  border-top: 1px solid var(--c-gold-light);
  text-align: center;
  color: var(--c-gold-light);
  letter-spacing: .02em;
}
.footer__copyright small {
  font-size: 14px;
}

/* PAGE TOP */
/* PAGE TOP
   Figma / PSD（上に戻るBTN 1864,7516 / 27x120）準拠：
   浮遊ボタンではなく、フッター右下に静的に置く。
   縦書き「PAGE TOP」＋細い線の丸（中はシェブロン）。 */
/* ============================================================
   公式SNS（フローティング / フッター）
   ------------------------------------------------------------
   アイコンはブランドカラーのインラインSVG（inc/setup.php）。
   フローティングは全ページ共通（footer.php で読み込み）。
============================================================ */
.sns-float {
  position: fixed;
  right: 18px;
  /* 下基準に変更：右下のWEB予約丸ボタン（.cv-fixed: bottom 20px + 148px）と
     ウィンドウが低いときに被らないよう、その上に24px空けて置く */
  bottom: 192px;
  z-index: 90; /* ヘッダー(100)・SP追従バー(95)より下 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 10px 14px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 188, 140, .55); /* --c-gold-light系の淡い枠 */
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(33, 95, 104, .14);
}
.sns-float__label {
  writing-mode: vertical-rl;
  font-family: var(--ff-en);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--c-gold);
}
.sns-float__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sns-float__link {
  display: block;
  width: 38px;
  height: 38px;
  transition: transform .25s var(--ease-out), opacity .25s;
}
.sns-float__link:hover { transform: translateY(-2px); opacity: .85; }
/* 期間限定キャンペーン：追従サークルバナー（終了時はこのブロックと footer.php の .cp-circle を削除）
   PC: WEB予約丸ボタン（right20+148px）の左に16px空けて並べる
   SP: Follow us（.sns-float）の下（メディア内で位置指定） */
.cp-circle {
  position: fixed;
  right: 184px;
  bottom: 20px;
  z-index: 94; /* WEB予約丸(95)のすぐ下 */
  width: 148px;
  height: 148px;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .4s var(--ease-out), visibility .4s, transform .4s var(--ease-out);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .22));
}
body.is-cv-shown .cp-circle { opacity: 1; visibility: visible; transform: none; }
.cp-circle:hover { transform: translateY(-2px); }
.cp-circle img { display: block; width: 100%; height: 100%; }
.sns-float__link svg { display: block; width: 100%; height: 100%; border-radius: 9px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }

/* フッター：ロゴ下に横並び */
.footer__sns {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.footer__sns-link {
  display: block;
  width: 34px;
  height: 34px;
  transition: transform .25s var(--ease-out), opacity .25s;
}
.footer__sns-link:hover { transform: translateY(-2px); opacity: .85; }
.footer__sns-link svg { display: block; width: 100%; height: 100%; border-radius: 8px; }

.pagetop {
  position: absolute;
  right: 29px;               /* PSD: 右端 1891（1920 - 29） */
  bottom: 106px;             /* Figma: 円の下端は罫線の約40px上 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                 /* PSD: 文字下端 7595 → 円 7609 */
  font-family: var(--ff-serif);
  font-size: 12px;
  letter-spacing: .35em;
  color: #686c6e;            /* PSD: PAGE TOP 文字色 */
  cursor: pointer;
}
/* 縦書きは文字だけ（ボタン全体に掛けるとflexの軸が回ってしまう） */
.pagetop__label { writing-mode: vertical-rl; }
.pagetop:hover { opacity: .7; }
.pagetop::after {
  content: "";
  width: 27px; height: 27px; /* PSD: 楕円形 1147 */
  border-radius: 50%;
  border: 1px solid #686c6e;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 7l5-5.5L11 7' fill='none' stroke='%23686c6e' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / 11px;
}

/* ============================================================
   17. SP（レスポンシブ） ~768px
============================================================ */
/* ============================================================
   タブレット（769〜1100px）：PCレイアウトのまま密度を上げて
   ヘッダーCVと強み3カラムのはみ出しを防ぐ
============================================================ */
@media (min-width: 769px) and (max-width: 1100px) {
  /* グロナビ：縦折れ防止 */
  .gnav__link { white-space: nowrap; font-size: 13px; }
  .gnav__list { gap: clamp(10px, 1.8vw, 24px); }
  .header-cv__name { width: 140px; }
  .header-cv__info { padding: 14px 14px 12px 22px; }
  .header-cv__tel-number { font-size: 26px; }
  .header-cv__tel-number::before { font-size: 24px; }
  .header-cv__tel-label { font-size: 15px; }
  .header-cv__btn { padding: 0 16px; }
  .header-cv__btn .btn__note { font-size: 12px; }
  .header-cv__btn .btn__label { font-size: 16px; }
  .strength__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strength__circle { width: 180px; height: 180px; }
  .strength__item { padding: 20px 16px; }
  /* 追従CVバー（PC）も同様に圧縮 */
  .cv-fixed__body { padding-left: 24px; }
  .cv-fixed__tel { width: auto; padding-right: 20px; }
  .cv-fixed__tel-label { gap: 16px; font-size: 15px; }
  .cv-fixed__tel a { font-size: 26px; }
  .cv-fixed__tel a::before { font-size: 24px; }
  .cv-fixed__btn .btn__note { font-size: 12px; }
  .cv-fixed__btn .btn__label { font-size: 16px; }
}

.header-cv__tel-sp { display: none; }
.btn__label-sp2 { display: none; } /* SP追従バー専用の2行ラベル */
.spnav { display: none; }
.header__menu-label { display: none; }

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  body { font-size: 14px; }

  /* ヘッダー */
  .header__inner { padding: 8px 16px; 
          display: flex;
        align-items: center;
        justify-content: space-between;}
  /* デザイン：SPはヘッダー上のSEOテキスト（h1）を出さない */
  .header__seo-text { display: none; }
  /* 追従ヘッダーのスライドインはSPでは切る：
     アニメ中ヘッダーにtransformがかかると、ヘッダー内の固定CVバーの
     fixed基準がヘッダーになり、バーが一瞬上に飛ぶため */
  .header.is-scrolled { animation: none; }
  .header__row { gap: 12px; }
  .header__logo { width: 140px; margin-bottom: 0;}
  .header__menu-btn {
display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 52px;
        height: 52px;
  }
  .header__menu-label {
    display: block;
    font-family: var(--ff-en);
    font-size: 10px;
    letter-spacing: .08em;
    line-height: 1;
  }
  .header__menu-btn.is-open .header__menu-label--open { display: none; }
  .header__menu-btn:not(.is-open) .header__menu-label--close { display: none; }
  /* ドロワー展開中は右上に固定（デザイン：close位置）＋ティール上なので常に白 */
  .header__menu-btn.is-open {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 120;
    color: var(--c-white);
  }

  /* SPナビはドロワー（デザイン：左寄せ・白罫線・アコーディオン） */
  .header__nav {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--c-teal);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* 閉状態はトランジション無し：PC→SPへウィンドウリサイズした瞬間に
       0.4sのフェードが走って中身が一瞬見えるのを防ぐ（開くときだけフェード） */
    transition: none;
  }
  .header__nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .4s;
  }
  .header__nav .gnav__list { display: none; } /* PCナビはSPでは使わない */
  .spnav {
    display: block;
    padding: 76px 0 90px;
    color: var(--c-white);
    font-family: var(--ff-serif);
  }
  .spnav__list { list-style: none; margin: 0; padding: 0; }
  .spnav__item { border-top: 1px solid rgba(255, 255, 255, .4); }
  .spnav__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .4); }
  .spnav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 17px 22px;
    color: var(--c-white);
    font-size: 14px;
    letter-spacing: .12em;
    text-align: left;
  }
  .spnav__arrow {
    width: 30px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 8'%3E%3Cpath d='M0,4H34' stroke='white' stroke-width='1'/%3E%3Cpath d='M33,0.5L38.5,4L33,7.5Z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  /* アコーディオン開閉アイコン（円に − / ＋） */
  .spnav__acc-icon {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 60, 70, .45);
  }
  .spnav__acc-icon::before,
  .spnav__acc-icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 1px;
    background: var(--c-white);
    transform: translate(-50%, -50%);
  }
  .spnav__acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
  .js-spnav-acc.is-open .spnav__acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
  .spnav__sub { display: none; padding: 0 0 6px; }
  .js-spnav-acc.is-open .spnav__sub { display: block; }
  .spnav__sub li { list-style: none; }
  .spnav__sub > li > a,
  .spnav__sub-list li a {
    display: block;
    padding: 12px 22px 12px 40px;
    color: var(--c-white);
    font-size: 13px;
    letter-spacing: .12em;
  }
  .spnav__row--sub-head { border-top: 1px solid rgba(255, 255, 255, .4); }
  .spnav__sub-list { margin: 0; padding: 0 0 4px; }

  /* TOP・SP：バーはヘッダー直下のコピーを使う（.mv配下のfixedは実機Safariで
     表示されない事象があったため、下層と同じDOM位置に統一） */
  body.home .header .header-cv { display: flex; }
  body.home .mv .header-cv { display: none; }

  /* SP追従CV：デザインの3分割バー（お電話58px金 / WEB白 / LINE teal） */
  .header-cv {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 58px;
    z-index: 95;
    display: flex;
    padding: 0;
    gap: 0;
    background: none;
    border-radius: 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .1);
  }
  .header-cv__name,
  .header-cv__hours { display: none; }
  .header-cv__info { flex: 1; padding: 0; background: #d4bc8c; }
  .header-cv__tel { height: 100%; }
  .header-cv__tel a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
  }
  .header-cv__tel-label,
  .header-cv__tel-number { display: none; }
  /* デザイン：アイコンが上・「お電話」が下の2段組み */
  .header-cv__tel-sp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--c-white);
    font-family: var(--ff-serif);
    font-size: 11px;
    letter-spacing: .1em;
    line-height: 1;
  }
  .header-cv__tel-sp .fa { font-size: 15px; }
  .header-cv__btns { flex: 2; display: flex; gap: 0; margin: 0; }
  .header-cv__btn { flex: 1; justify-content: center; padding: 0; }
  .header-cv__btn::before { display: none; }
  .header-cv__btn .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    min-width: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
  }
  /* デザイン：「WEB／診療予約」「LINE／診療予約」の2行ラベル */
  .header-cv__btn .btn__label { display: none; }
  .header-cv__btn .btn__label-sp2 {
    display: block;
    font-size: 11px;
    line-height: 1.55;
    letter-spacing: .08em;
    text-align: center;
    font-family: var(--ff-serif);
    line-height: 1.4;
  }
  .header-cv__btn .btn__note { display: none; }
  .header-cv__btn .btn__en { display: none; }
  .header-cv__btn .btn--reserve { background: var(--c-white); }
  .header-cv__btn .btn--reserve .btn__label-sp2 { color: #c9b283; /* デザイン実測：白セルにゴールド文字 */ }
  .header-cv__btn .btn--line { background: #51b8c8; }
  .header-cv__btn .btn--line .btn__label-sp2 { color: var(--c-white); }
  /* TOP：最上部では追従バーを隠し、スクロール開始でせり上げる（JSがbodyにis-cv-shownを付与） */
  body.home .header-cv {
    transform: translateY(100%);
    transition: transform .35s var(--ease-out, ease);
  }
  body.home.is-cv-shown .header-cv { transform: translateY(0); }
  body { padding-bottom: 58px; }

  /* SP追従バーはMV内（.mv__inner）にあり、mv__innerのz-index:2の
     スタッキングコンテキストに閉じ込められて、ページ側のz-index:3以上の
     要素（ドクターのホバー詳細等）に負けてしまう。
     SPではコンテキストごと持ち上げる（ヘッダー100・ドロワー105よりは下） */
  .mv__inner { z-index: 90; }

  /* MV：デザイン準拠でファーストビューは画面の縦いっぱい */
  .mv { min-height: 560px; height: 100vh; height: 100svh; }
  /* デザイン：SPの舞い散る羽はPCよりかなり大きい（JSの--sizeを一括拡大） */
  .feather {
    width: calc(var(--size, 40px) * 2.1);
    height: calc(var(--size, 40px) * 2.1);
    top: calc(var(--size, 40px) * -2.1);
  }
  .mv__inner { padding-left: 6%; padding-right: 6%; justify-content: flex-end; padding-bottom: 120px; }
  .mv .mv__copy { font-size: 20px; letter-spacing: .3em; }
  .mv__copy-en { width: 76vw; --copy-mask: url("../images/top/mv_copy_en_sp.png"); } /* デザイン実測：285/375。反射マスクもSP版画像に */
  /* SPは文字が小さく詰まるぶん暗い反射帯が黒っぽく見えるので弱める */
  .mv__copy-en::before { opacity: .18; }

  .mv__tel-number { font-size: 28px; }
  .mv__scroll { right: 16px; }

  /* コラム（デザイン：左寄せ1.2枚見せ・タイトル→日付・右下に丸矢印） */
  .posts { padding: 20px 0; }
  .posts__item { width: 82vw; }
  .posts__slider { padding-bottom: 64px; }
  .posts__prev, .posts__next {
    display: grid;
    place-items: center;
    position: absolute;
    top: auto;
    bottom: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2f5a63;
    color: var(--c-white);
    font-size: 15px;
  }
  .posts__prev { left: auto; right: 68px; }
  .posts__next { right: 16px; }

  /* 強み */
  .strength { padding: 40px 0 0; }
  .strength__list {
    grid-template-columns: 1fr;
    gap: 40px;
    width: min(480px, 88%);
  }
  .strength__item { padding: 20px 16px 20px; }
  .strength__item + .strength__item { border-left: 1px solid var(--c-gold); }
  .strength__circle img { 
          max-width: 278px;
          width: 100%;
          max-height: 278px;
          height: 100%;
        margin: 0px 0 16px;
  }
.strength__item-text {
      margin-top: 8px;
    font-size: 16px;
}
  /* about */
  .about { padding: 60px 0 40px; }
  .about__text { margin-top: 20px; font-size: 14px; line-height: 2.1; letter-spacing: .06em; }

  /* 施術 */
  .treatment { padding: 40px 0; }
  .treatment__container {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 40px;
  }
  .treatment__worry-list { gap: 14px; }
  .treatment__worry-label { font-size: 14px; letter-spacing: .1em; padding: 8px 12px 8px 16px; white-space: nowrap; }
  .treatment__worry-img { width: 110px; }

  .treatment__menus {
  padding: 12px;}
  .treatment__menu-item a {
  min-height: 60px;}
.treatment__menu-item span {
      font-size: 14px;
}

  /* SPはアコーディオン：タップ項目の直下にパネル（JSがslotごと差し込む） */
  /* 閉じている間（スロット外＝右カラム位置のまま）は空パネルを出さない */
  .treatment__container > .treatment__menus { display: none; }
  .treatment__worry-panel-slot { list-style: none; }
  .treatment__worry-panel-slot .treatment__menus { display: block; }
  .treatment__worry-panel-slot .treatment__menus { border-radius: 8px; }
  /* 開閉インジケータ（下向きシェブロン、開いたら反転）。写真の上に白で乗せる */
  .treatment__worry-item button::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--c-white);
    border-bottom: 2px solid var(--c-white);
    transform: translateY(-70%) rotate(45deg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
    transition: transform .3s;
  }
  .treatment__worry-item.is-active button::after {
    transform: translateY(-30%) rotate(225deg);
  }
  /* パネル上端の三角：タップした項目（真上）を指す。パネルと同色 */
  .treatment__menus::before {
display: none;
  }
  .treatment__btns { margin-top: 46px; }
  .treatment__btns .btn { min-width: 0; width: 100%; }
  .treatment__btns .btn--counseling { min-width: 0; font-size: 14px; }
  .case { padding: 40px 0; }
  .case__title { margin-bottom: 28px; }
  .case__slider { margin-top: 0; overflow: visible; }
  .case__band {
    /* センタリング表示（centeredSlides）に合わせて左右対称のフルブリードにする。
       旧：padding-left:16px（左揃え1.15枚見せ時代の名残）→ カードが右に寄って見える原因だった */
    padding: 0;
  }
  .case__item {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    background: var(--c-white);
    border-radius: 4px;
    overflow: hidden;
    padding-bottom: 26px;
    /* Swiperの height:100% を打ち消してflexのstretchを効かせる：
       縦型・横型が混在しても全カードが一番高いカードに揃う */
    height: auto;
  }
  .case__photos { width: 100%; }
  .case__body { padding: 22px 20px 0; }
  .case__name { font-size: 19px; }
  .case__data { margin-top: 12px; font-size: 13px; }
  .case__disclosure { margin-top: 10px; font-size: 11px; }
  .case__doctor { margin: 20px 0; font-size: 14px; }
  .case__doctor-icon { width: 52px; height: 52px; }
  .case__monitor { font-size: 13px; }
  /* フローティングSNS：右下・追従CVバーの上に小さく。
     FV右下のスクロールアニメーションと重なるため、最上部では隠して
     スクロール開始（body.is-cv-shown＝main.jsがy>10で付与）でふわっと出す */
  .sns-float {
    top: auto;
    bottom: 216px; /* サークルバナー（bottom96+104px+16px）の上へ */
    transform: translateY(8px);
    right: 10px;
    gap: 10px;
    padding: 12px 7px 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease-out), visibility .4s, transform .4s var(--ease-out);
  }
  body.is-cv-shown .sns-float {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sns-float__label { font-size: 9px; letter-spacing: .18em; }
  .sns-float__link { width: 32px; height: 32px; }

  /* 追従サークルバナー（SP）：Follow us の下・追従CVバーの上 */
  .cp-circle {
    right: 10px;
    bottom: 96px;
    width: 104px;
    height: 104px;
  }

  /* ページネーション行：ドットは中央、矢印ボタンは右端（白帯基準の絶対配置） */
  .case__pagination {
    position: relative;
    justify-content: center;
    padding: 0;
  }
  .case__prev, .case__next {
    display: grid;
    place-items: center;
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2f5a63;
    color: var(--c-white);
    top: auto;
    /* 帯下端基準：ドット行（+32px〜）と天地センターが揃う位置 */
    bottom: -66px;
    transform: none; /* PCの translateY(-50%) を打ち消し */
    z-index: 5;
  }
  .case__prev { left: auto; right: 70px; }
  .case__next { right: 16px; }
  /* 矢印：コラム（FV直下）スライダーと同じFAの長矢印に統一 */
  .case__prev::before, .case__next::before { content: none; }
  .case__prev .fa, .case__next .fa { display: block; font-size: 15px; }
  /* 注意書きはSPの矢印ボタン（bottom:-66px）と重ならないよう下げる */
  .case__note { margin-top: 90px; font-size: 11px; }

  /* カード内は上詰め＋応募ボタンだけ下端に固定（縦型/横型で統一感を出す） */
  .case__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .case__body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .case__monitor {
        padding-top: 12px;
        align-self: center;
        margin-top: auto; /* カード下端に固定（16px相当の最低間隔はpadding側で確保） */
  }
.case__btns {
margin-top: 100px;}
  /* 医師 */
  .doctors { padding: 40px 0; }
  .doctors__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 20px;
    margin-top: 28px;
  }
  .doctors__item { aspect-ratio: 4 / 5; }
  .doctors__item--main { grid-row: auto; }
  .doctors__item:not(.doctors__item--main) { aspect-ratio: 16 / 10; }
  .doctors__detail { padding: 24px; gap: 8px; }
  .doctors__lead { font-size: 15px; }
  .doctors__profile { font-size: 12px; line-height: 1.7; }

  /* flow */
  .flow { padding: 40px 0; }
  .flow__inner { grid-template-columns: 1fr; gap: 40px; }
  .flow__head { position: static; padding: 0; }
  .flow__head::before,.flow__head::after {
  display: none;}
  .flow .section-title__en { font-size: 44px; }
  .flow .section-title {
    text-align: center;
  }
  .flow__lead {
  text-align: center;
  border-top: 1px solid var(--c-white);
  border-bottom: 1px solid var(--c-white);
  }
  .flow__list {
      padding: 0;
  }
  .flow__item { min-height: 0; padding: 18px 128px 20px 20px; }
  /* PC同様、番号はh3内のインライン表示（旧絶対配置用のオフセットは廃止） */
  .flow__item-title::before { font-size: 40px; }
  .flow__item-title { font-size: 16px; gap: 10px; }
  .flow__item-text { margin: 10px 0 0 0; font-size: 12.5px; line-height: 1.8; }
  .flow__photo { width: 110px; margin: 0; }

  /* FAQ */
  .faq { padding: 40px 0; }
  .faq__list { margin-top: 28px; }
  .faq__item + .faq__item { margin-top: 30px; }
  .faq__question { font-size: 16px; gap: 14px; letter-spacing: .1em;    padding-bottom: 16px; }
  .faq__answer { padding-top: 16px; }
  .faq__icon { width: 38px; height: 38px; font-size: 15px; }
  .faq__btn { min-width: 0; width: 100%; font-size: 14px;    margin: 40px auto 0; }

  /* news */
  .news { padding: 40px 0; }
  .news .section-title {
  text-align: center;
  }
  .news__tabs { gap: 20px; margin-top: 40px; font-size: 13px; flex-wrap: wrap; }
  .news__link {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "date cat arrow"
      "text text text";
    gap: 8px 14px;
    padding: 18px 4px;
  }
  .news__date { grid-area: date; font-size: 20px; }
  .news__category { grid-area: cat; }
  .news__text { grid-area: text; }
  .news__link::after { grid-area: arrow; }

  /* CV */
  .cv__inner {         padding: 40px 16px 40px; }
  .cv-fixed { display: none; }
  .cv__cards { flex-wrap: wrap; gap: 12px; }
  .cv__card { width: 160px; height: 160px; }
  .cv__card-label { font-size: 14px; }
  .cv__line-note { font-size: 14px; }

  /* アクセス */
  .access__inner { height: auto; padding: 0; }
  .access__info {
    position: static;
    width: 100%;
    height: auto;
    padding: 40px 16px 40px
  }
  .access__hours-title { width: 100%; }
  .access__address {
  margin-top: 12px;}
  .access__route {
  margin-top: 12px;}

  .footer { padding: 40px 0 0; }
  .footer__logo-text {
  margin-top: 8px;}
  .footer__nav {
    grid-template-columns: 1fr;
    grid-template-areas: "clinic" "support" "menu";
           gap: 28px;
        margin-top: 28px;
  }
  .footer__nav-more { position: static; display: inline-block; margin-top: 16px; }
  .footer__copyright { margin-top: 40px;padding: 12px;}
  .footer__copyright small {font-size: 14px;}
  .pagetop { display: none; }

  /* ============================================
     SPの左右余白統一：全セクション横16px
     （%指定は画面幅で余白が変わりバラつくため固定pxへ）
  ============================================ */
  .mv__inner { padding-left: 16px; padding-right: 16px; }
  .about__inner,
  .treatment__inner,
  .case__inner,
  .doctors__inner,
  .flow__inner,
  .faq__inner,
  .news__inner,
  .footer__inner {
    width: calc(100% - 32px);
  }
  .strength__list { width: min(480px, calc(100% - 32px)); }

  /* 見出しの透かし英字：SPはデザイン準拠で44px＋折り返し許可。
     長い英字（Find Your Treatment等）が画面からはみ出すのを防ぐ。
     日本語の下揃えは -1em 方式なので2行になっても自動で追従する */
  .section-title__en {
    font-size: 44px;
    white-space: normal;
    line-height: 1.05;
  }

  /* アクセス：SPは背景地図をやめ、等倍比率のimg＋下に情報ブロックの縦積み */
  .access { background: none; }
  .access__map-sp { display: block; width: 100%; height: auto; }
}

/* 極小幅（〜350px）：悩みタブ・施術リストのはみ出し防止 */
@media (max-width: 350px) {
  .treatment__worry-label { font-size: 12px; letter-spacing: .05em; white-space: normal; }
  .treatment__worry-img { width: 92px; }
  .treatment__menu-item a { white-space: normal; }
}