@charset "UTF-8";
/* common.css — auto-split from style.css (common) */
/* =========================================================
   モンテ藤沢ビューティークリニック — トップページ
   Figma: PC 1500 / SP 390。measurement-first。
   ========================================================= */

:root{
  /* colors */
  --c-ink:#132119;        /* 本文・見出し */
  --c-green:#427257;      /* メイングリーン */
  --c-green-d:#2d4f3c;    /* 濃緑ラベル */
  --c-green-card:#3d6950; /* カード内の濃緑 */
  --c-green-lbl:#233e2f;  /* News緑 */
  --c-beige:#e5e0dc;      /* scheduleセクション背景 / タグ */
  --c-beige2:#d8cfc9;     /* schedule罫線 */
  --c-navi:#d8e3e1;       /* naviセクション背景 */
  --c-cal:#fcfaf7;        /* カレンダーセル / 一部ボタン背景 */
  --c-foot:#f5efeb;       /* footer背景 */
  --c-body-sp:#f7f3f0;    /* SPページ背景 */
  --c-line:#aeaeae;       /* newsの罫線 */
  --c-sun:#b21c30;        /* 日曜 */
  --c-sat:#0d5293;        /* 土曜 */
  --c-muted:#6b6764;      /* blog日付 */
  --c-white:#fff;
  --c-line:#52875f;       /* LINE予約ボタン（サイトの緑に寄せた指定色） */

  /* fonts */
  --f-min:"Shippori Mincho", serif;
  --f-lora:"Lora", serif;
  --f-inter:"Inter", sans-serif;

  /* layout */
  --header-h:112px;
  /* SPの固定ヘッダー実高（.header__inner の padding 14px×2 ＋ ロゴ 44px）。
     ロゴやパディングを変えたらここも合わせる */
  --header-h-sp:72px;
  --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box;}
/* スクロールバー領域を常時予約 → メニュー開閉(overflow:hidden)でバーが消えても
   ビューポート幅が変わらず、fixed要素(ハンバーガー等)が横にズレない */
html{scroll-behavior:auto;scrollbar-gutter:stable;}
body{
  margin:0;
  font-family:var(--f-min);
  color:var(--c-ink);
  background:var(--c-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}

/* ===================== shared parts ===================== */

/* ラベル（英字・上に短い罫線） */
.label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-lora);
  font-size:16px;
  line-height:1.25;
  letter-spacing:.02em;
}
.label::before,.label::after{
  content:"";
  width:11px;height:1px;
  background:currentColor;
  flex:none;
}
.label--left{justify-content:flex-start;}
.label--left::after{display:none;}
.label:not(.label--left){justify-content:center;}
.label--dark{color:var(--c-green-d);}
.label--light{color:var(--c-white);}
.label--green{color:var(--c-green);}
.label--green2{color:var(--c-green-d);}

/* セクション見出し */
.sec-title{
  font-family:var(--f-min);
  font-weight:400;
  font-size:34px;
  line-height:1.44;
  color:var(--c-ink);
}
.sec-title--green2{color:var(--c-green-d);}
.sec-heading{display:flex;flex-direction:column;gap:8px;}
.sec-heading--center{align-items:center;text-align:center;}

/* 標準フィールド：見出し下のサブタイトル（診療スケジュール/お知らせ/特集ページ 等で共通）。埋めた時だけ表示 */
.sec-sub{margin:6px 0 0;font-family:var(--f-min);font-size:16px;line-height:1.6;color:var(--c-ink);}
.sec-sub-en{margin:2px 0 0;font-size:13px;letter-spacing:.06em;color:var(--c-green,#628b74);}

/* 共通ボタン（340x61 / 文字左・矢印右） */
.btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:auto;
  min-width:340px;
  max-width:100%;
  padding:16px 24px;
  font-family:var(--f-min);
  font-weight:500;
  font-size:20px;
  line-height:1.45;
  letter-spacing:.1em;
  transition:opacity .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
  border:0;   /* button要素の既定枠線を消す（--outline等は自前でborder指定） */
}
.btn span{white-space:nowrap;}
/* hover 0.3s スムージング（リンク全般。ボタン/カード/タグ等は各自でも指定） */
a{transition:color .3s ease, background-color .3s ease, border-color .3s ease, opacity .3s ease;}
.btn:hover{opacity:.78;}
.btn__icon{width:32px;height:8px;flex:none;object-fit:contain;}
.btn--white{background:var(--c-white);color:var(--c-green);}
.btn--green{background:var(--c-green);color:var(--c-white);}
.btn--outline{background:transparent;border:1px solid var(--c-ink);color:var(--c-ink);}
.btn--beige{background:var(--c-cal);color:var(--c-ink);}
.news__arrow{width:26px;height:8px;flex:none;object-fit:contain;}

/* ===================== header ===================== */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px var(--gutter) 16px;
}
/* ヘッダーは横並び（ロゴ｜日本語名）。
   ロゴ自体が縦組み（マーク＋MONTE＋英語名）なので、日本語名まで縦に積むと
   ヘッダーの高さに収めるためにロゴを小さくするしかなく、中の英語名が潰れる。
   横に置けば高さを使わずにロゴを大きくできる。フッター/メニューは縦積み（下で上書き）。 */
.logo{display:flex;align-items:center;gap:14px;}
/* ロゴ画像（Monteロゴ清書01.ai 由来 / 余白トリム済みの透過PNG）。
   縦組みのロゴマークなので、高さを指定して幅は比率まかせにする。 */
.logo__img{height:76px;width:auto;display:block;}
.logo__name{
  font-family:var(--f-min);
  font-weight:600;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.02em;
}
.header__right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.header__access{display:flex;align-items:center;gap:16px;}
.tel{display:flex;align-items:center;gap:8px;height:35px;}
.tel__label{font-family:var(--f-lora);font-weight:500;font-size:13px;line-height:1.3;letter-spacing:.2em;}
.tel__num{font-family:var(--f-lora);font-size:23px;line-height:1.26;letter-spacing:.2em;}
/* 予約ボタンは WEB / LINE の2つ。狭い画面では折り返す（ロゴにぶつからないように） */
.header__reserve{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.btn-reserve{
  display:flex;align-items:center;gap:9px;
  height:35px;padding:0 16px;
  background:var(--c-green);color:var(--c-white);
  font-family:var(--f-min);font-weight:600;font-size:16px;line-height:1;
  transition:opacity .25s;
}
.btn-reserve:hover{opacity:.85;}
.btn-reserve__icon{width:13px;height:13px;}
/* LINE予約は指定色（--c-line）。矢印は白のままで読める */
.btn-reserve--line{background:var(--c-line);}
.gnav__list{display:flex;align-items:center;gap:clamp(18px,2.2vw,48px);}
/* ナビ直下リンクのみ（>li>a）。メガメニュー内の .mcard には波及させない（白文字が緑化するのを防止） */
.gnav__list > li > a{
  font-family:var(--f-min);font-weight:600;font-size:16px;line-height:1.2;
  transition:color .2s;white-space:nowrap;
}
.gnav__list > li > a:hover{color:var(--c-green);}

/* ===== メガメニュー（PCヘッダー 保険/自由診療をホバーで展開） ===== */
.gnav__item{position:static;}          /* megamenuはheader(fixed)基準で全幅に */
.gnav__item--mega > a{position:relative;}
.megamenu{
  position:absolute;top:100%;left:0;right:0;
  /* ヘッダーの薄い白背景をそのまま下へ延長 */
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 12px 20px rgba(19,33,25,.06);
  /* 背景+ボタン(=.megamenu全体)を opacity 0↔1 で 0.3s フェード。
     visibilityは使わない（同時変更だと初回opacityが即時になる）。閉時は pointer-events:none で不干渉 */
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.gnav__item--mega:hover .megamenu,
.gnav__item--mega:focus-within .megamenu{opacity:1;pointer-events:auto;}
/* 文字とメニューの間の透明ブリッジ（このli上だけ）＝隙間でも:hoverが切れない */
.gnav__item--mega > a::after{content:"";position:absolute;left:0;right:0;top:100%;height:60px;}
.megamenu__inner{width:min(100% - 48px,1400px);margin:0 auto;padding:26px 0 30px;}
/* メガメニュー内カード＝通常naviカードを縦低め・小さめに（cqw/aspectは解除） */
.megamenu .menu-grid,.megamenu .menu-grid--single{grid-template-columns:repeat(4,1fr);gap:10px;max-width:none;margin:0;}
.megamenu .mcard{
  container-type:normal;aspect-ratio:auto;width:auto;min-height:84px;padding:16px 12px;gap:0;
}
.megamenu .mcard__main{font-size:14px;line-height:1.3;}
.megamenu .mcard::after{display:none;}

/* hamburger + drawer (SPのみ) */
.hamburger{
  display:none;
  position:fixed;top:24px;right:24px;z-index:210; /* オーバーレイ(200)より前面 */
  width:36px;height:29px;
  padding:7px;
  background:none;border:0;cursor:pointer;
}
.hamburger span{
  display:block;height:2px;background:var(--c-ink);margin:6px 0;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .2s ease;
  transform-origin:center;
}
.hamburger span:first-child{margin-top:0;}
/* 開いたら三本線→Xへモーフィング。scaleX(1.414)で対角を伸ばし、Xの横幅を三本線(22px)に一致させる */
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg) scaleX(1.414);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg) scaleX(1.414);}
/* ===== ハンバーガー メニューオーバーレイ（≤1023で開く） ===== */
.menu-overlay{
  position:fixed;inset:0;z-index:200;
  /* 背景は「現サイトをぼかした物」を主役に。tintは可読性のためごく薄く（Figma #cecece/0.18相当） */
  background:rgba(206,206,206,.18);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  /* 開閉フェード（hidden属性の瞬間切替をやめてアニメ） */
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.menu-overlay.is-open{opacity:1;visibility:visible;}
/* backdrop-filter非対応環境のフォールバック（ぼかし不可時は少し濃いtintで可読性確保） */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .menu-overlay{background:rgba(243,239,234,.92);}
}

.menu-overlay__scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* 内側をコンテナ化。子は cqw(=inner幅の1%) で寸法指定＝メニュー全体が幅に比例して拡大縮小 */
.menu-overlay__inner{
  width:min(100% - 48px,1000px);margin:0 auto;
  container-type:inline-size;
  padding:110px 0 80px;
  display:flex;flex-direction:column;align-items:center;
}
/* 連絡先ブロック */
.menu-contact{display:flex;flex-direction:column;align-items:center;text-align:center;}
.menu-logo{display:flex;flex-direction:column;align-items:center;gap:4px;}
.menu-logo__img{height:96px;width:auto;display:block;}
.menu-logo__name{font-family:var(--f-min);font-size:16px;line-height:1.4;}
.menu-contact__addr{font-family:var(--f-min);font-size:16px;letter-spacing:.2em;margin-top:2px;}
.menu-contact__tel{font-family:var(--f-min);font-size:26px;letter-spacing:.2em;margin-top:28px;}
.menu-contact__hours{font-family:var(--f-min);font-size:15px;letter-spacing:.1em;margin-top:8px;}
/* 一定幅以上は400px/24px(=Figma)。それ以下は幅だけでなくボタン全体を比例縮小
   （font=vw連動clamp、padding/iconはem連動で一括スケール） */
.menu-reserve{
  display:flex;align-items:center;justify-content:space-between;gap:.5em;
  width:clamp(260px,40vw,400px);max-width:100%;margin-top:28px;
  padding:1em 1.33em;
  background:var(--c-green);color:#fff;
  font-family:var(--f-min);font-size:clamp(16px,2.4vw,24px);line-height:1.46;
  transition:opacity .25s;
}
.menu-reserve:hover{opacity:.85;}
.menu-reserve__icon{width:1.17em;height:1.17em;flex:none;}
/* 2つ目以降（LINE予約）は、1つ目との間隔を詰めて縦に並べる */
.menu-reserve + .menu-reserve{margin-top:12px;}
.menu-reserve--line{background:var(--c-line);}

/* クイックリンク（白80%ボックス）— cqwで比例スケール */
.menu-links{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;
  width:100%;margin-top:5.6cqw;
}
.menu-links a{
  display:flex;align-items:center;justify-content:center;
  min-height:8.2cqw;padding:1cqw;
  background:rgba(255,255,255,.8);
  font-family:var(--f-min);font-size:2.4cqw;color:var(--c-ink);
  text-align:center;transition:background .2s;
}
.menu-links a:hover{background:#fff;}

/* 診療メニュー（カードは .menu-block/.mcard を再利用）— cqwで比例スケール。tablet=緑4列, SP=白2列 */
.menu-services{width:100%;margin-top:6.4cqw;}
.menu-services .menu-block{padding:2.4cqw 0;}
.menu-services .sec-heading{margin-bottom:2.4cqw;gap:.8cqw;}
.menu-services .label{font-size:1.6cqw;}
.menu-services .label::before,.menu-services .label::after{width:1.1cqw;}
.menu-services .sec-title{font-size:3.4cqw;}
.menu-overlay .menu-grid,.menu-overlay .menu-grid--single{grid-template-columns:repeat(4,1fr);gap:1.2cqw;}
.menu-overlay .mcard{min-height:13cqw;padding:1.6cqw 1cqw 2.8cqw;gap:1.6cqw;}
.menu-overlay .mcard__main{font-size:1.8cqw;line-height:1.33;}
.menu-overlay .mcard::after{width:1.7cqw;height:.5cqw;right:1.1cqw;bottom:1.2cqw;}
.sec-heading{margin-bottom:34px;}
.news{border-top:0;margin-bottom:0;}
.news__item a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:32px;
  padding:24px 16px;
  border-bottom:1px solid var(--c-line);
  transition:background .2s;
}
.news__item:first-child a{border-top:1px solid var(--c-line);}
.news__item a:hover{background:#f7f7f5;}
.news__date{font-family:var(--f-min);font-size:16px;color:var(--c-green);white-space:nowrap;}
.news__title{font-family:var(--f-min);font-size:18px;line-height:1.44;color:var(--c-ink);}
.news__arrow{width:26px;height:8px;color:var(--c-green);flex:none;}

/* ===================== navi (診療メニュー) ===================== */
.navi{background:var(--c-navi);}
.navi__inner{width:min(100% - 48px,1200px);margin:0 auto;padding:71px 0;}
.menu-block{padding:48px 0;}
.menu-block .sec-heading{margin-bottom:24px;}
.menu-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  max-width:1000px;margin:0 auto;
}
.mcard{
  position:relative;overflow:hidden;
  min-height:130px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:16px 10px;
  background:var(--c-green-card);
  color:var(--c-white);text-align:center;
  transition:opacity .3s ease;
}
/* 背景テクスチャ: Figmaの配置(348x232 @ -60,-62)を再現。#3d6950の上に25%で重ねる。
   Figmaノードは水平反転で配置されている（生の画像fillは非反転）→ scaleX(-1)で一致させる */
.mcard::before{
  content:"";position:absolute;inset:0;
  background:url(../images/card-bg.png) no-repeat;
  background-size:152.6% 178.5%;
  background-position:50% 61%;
  transform:scaleX(-1);
  opacity:.25;
}
.mcard:hover{opacity:.8;}   /* ボタン自体を 1→0.8 に(0.3s)。白文字の色は変えない */
.mcard>*{position:relative;z-index:1;}
.mcard__main{font-family:var(--f-min);font-weight:600;font-size:18px;line-height:1.33;}
.mcard__sub{font-family:var(--f-min);font-weight:400;font-size:13px;line-height:1.3;}
/* 矢印は右下（Figma: 右11px・下11px） */
.mcard::after{
  content:"";position:absolute;right:11px;bottom:12px;
  width:17px;height:5px;z-index:1;
  background:url(../images/arrow-white.svg) no-repeat center/contain;
}
/* カードは常に同じアスペクト比(Figma 228×130)で、ブラウザ幅に比例して全体が拡大縮小。
   寸法は cqw(=カード幅の1%) で指定＝幅が変わっても比率一定。menu-overlayには波及させない(.navi配下限定)。 */
.navi .mcard{
  container-type:inline-size;                 /* カードを問い合わせコンテナ化（子のcqwがカード幅基準になる） */
  aspect-ratio:228/130;width:100%;min-height:0;min-width:0;  /* 幅=トラック固定→高さはaspect-ratioで導出 */
  padding:7% 4.4%;                            /* 自要素の余白は%(=トラック幅比)。cqwは祖先参照のため使わない */
}
.navi .mcard__main{font-size:7.9cqw;line-height:1.33;}   /* 子のcqw=カード幅の1% */
.navi .mcard__sub{font-size:5.7cqw;}
.navi .mcard::after{width:7.5cqw;height:2.2cqw;right:4.8cqw;bottom:5.3cqw;}

/* ===================== blog (特集ページ) ===================== */
.blog{background:var(--c-white);padding:96px 0 100px;}
.blog__inner{width:min(100% - 48px,1446px);margin:0 auto;}
.blog__cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:78px;margin-top:56px;
}
/* 記事が1件も無いとき */
.blog__empty{
  grid-column:1 / -1;text-align:center;padding:32px 0;
  font-family:var(--f-min);font-size:18px;letter-spacing:.04em;color:var(--c-muted);
}
.bcard{position:relative;display:flex;flex-direction:column;gap:19px;transition:opacity .3s ease;}
.bcard:hover{opacity:.85;}
.bcard__link{position:absolute;inset:0;z-index:1;}   /* カード全体リンク（stretched） */
.bcard__img{aspect-ratio:428/274;overflow:hidden;}
.bcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.bcard:hover .bcard__img img{transform:scale(1.04);}
.bcard__body{display:flex;flex-direction:column;gap:28px;}
.bcard__title{font-family:var(--f-min);font-weight:400;font-size:18px;line-height:1.4;letter-spacing:.05em;}
.bcard__meta{display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.bcard__date{font-family:var(--f-min);font-size:18px;color:var(--c-muted);letter-spacing:.04em;}
.bcard__tag{
  display:inline-block;padding:4px 8px;
  background:var(--c-beige);
  font-family:var(--f-min);font-size:14px;line-height:1.4;letter-spacing:.04em;color:var(--c-ink);
}
.bcard__tag-link{position:relative;z-index:2;color:inherit;text-decoration:none;transition:color .3s ease;}   /* カテゴリーへのリンク（カード全体リンクの上に載る） */
.bcard__tag-link:hover{color:var(--c-green);}
.blog__btnwrap{display:flex;justify-content:flex-end;margin-top:60px;}

/* ===================== footer ===================== */
.footer{background:var(--c-foot);padding:105px 0 76px;}
.footer__inner{
  width:min(100% - 48px,1310px);margin:0 auto;
  display:flex;align-items:flex-start;
  /* 左ブロック(ロゴ/TEL)と右メニュー列の隙間: Figma実測164px(10.9%)を比例確保 */
  gap:clamp(48px,11vw,165px);
}
.footer__brand{display:flex;flex-direction:column;gap:20px;width:247px;flex:0 0 247px;}
.logo--footer{flex-direction:column;align-items:flex-start;gap:10px;}
.logo--footer .logo__img{height:96px;}
.logo--footer .logo__name{font-size:14px;line-height:1;}
.footer__divider{width:100%;height:0;margin:0;border:0;border-top:1px solid var(--c-ink);}
.footer__contact{display:flex;flex-direction:column;gap:16px;}
.footer__addr{font-size:12px;line-height:1.42;}
.footer__telrow{display:flex;align-items:flex-start;gap:8px;}
.footer__tag{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:58px;height:38px;
  border:1px solid var(--c-ink);
  font-family:var(--f-lora);font-size:14px;
}
.footer__telbody{display:flex;flex-direction:column;justify-content:center;}
.footer__telnum{font-family:var(--f-lora);font-size:23px;line-height:1.26;}
.footer__telhours{font-size:10px;line-height:1;}
/* リンク3列: Figma実測=各300px・列間gap0（隣接）。1段のまま狭幅では等比縮小 */
.footer__cols{display:flex;flex:1 1 auto;justify-content:space-between;gap:0;min-width:0;max-width:900px;}
.footer__col{flex:1 1 0;min-width:0;}
.footer__col-title{font-family:var(--f-min);font-weight:400;font-size:24px;line-height:1;padding-top:24px;margin-bottom:32px;}
.footer__col ul{display:flex;flex-direction:column;}
.footer__col a{display:block;font-size:14px;line-height:2.57;transition:color .2s;}
.footer__col a::before{content:"- ";}
.footer__col a:hover{color:var(--c-green);}

/* =========================================================
   TABLET  (max 1023px)
   ========================================================= */
@media (max-width:1023px){
  /* header → hamburger（ナビが窮屈になる幅から） */
  .header__right{display:none;}
  .hamburger{display:block;}
  .header{background:rgba(255,255,255,.85);}
  .menu-grid{grid-template-columns:repeat(3,1fr);}
  .menu-grid--single{grid-template-columns:repeat(2,1fr);}
  .blog__cards{gap:32px;}
}

/* =========================================================
   MOBILE  (max 767px)  — SP 390 基準
   ========================================================= */
@media (max-width:767px){
  body{background:var(--c-body-sp);}

  /* header (SPはロゴ縮小) */
  .header__inner{padding:14px 16px;}
  .logo__img{height:44px;}
  .logo__name{font-size:10px;}
  .news__item a{grid-template-columns:1fr auto;gap:8px 16px;padding:24px 8px 40px;row-gap:8px;}
  .news__date{grid-column:1/-1;}
  .news__title{font-size:16px;}

  /* navi */
  .navi__inner{width:min(100% - 50px,340px);}
  .menu-block{padding:32px 0;}
  .menu-grid,.menu-grid--single{grid-template-columns:repeat(2,1fr);}
  .mcard__main{font-size:15px;}
  .mcard__sub{font-size:11px;}

  /* blog */
  .blog{padding:56px 0 64px;}
  .blog__inner{width:min(100% - 50px,340px);}
  .blog__cards{grid-template-columns:1fr;gap:64px;margin-top:40px;}
  .bcard__title{font-size:17px;}
  .bcard__date{font-size:16px;}
  .blog__btnwrap{justify-content:center;margin-top:48px;}

  /* footer: SPのみ縦積み */
  .footer{padding:64px 0;}
  .footer__inner{flex-direction:column;gap:40px;width:calc(100% - 50px);}  /* 上限撤廃＝全幅（左右25pxのみ） */
  .footer__brand{flex:none;width:100%;}  /* 全幅→ロゴ下の区切り線もコンテンツ全幅に */
  .footer__cols{flex:none;max-width:none;flex-direction:column;gap:24px;}
  .footer__col{flex:none;width:auto;}
  .footer__col-title{padding-top:0;margin-bottom:8px;line-height:2;}
  .btn{width:340px;}

  /* メニューオーバーレイ SP版（2列・白カード）— PC同様に画面幅へ比例スケール(cqw, 390基準)
     inner幅 ≒ 342px(=100vw-48 @390) を SPデザインに対応させ cqw を算出 */
  .menu-overlay__inner{padding:22cqw 0 18cqw;}   /* ~76/64px @342 */
  .hamburger{top:14px;right:16px;}               /* SPヘッダーに合わせる */
  .menu-logo{gap:1.2cqw;}
  .menu-logo__img{height:22cqw;}                 /* ~75 @342 */
  .menu-logo__name{font-size:3.5cqw;}            /* 12 */
  .menu-contact__addr{font-size:3.5cqw;letter-spacing:.2em;margin-top:.6cqw;}
  .menu-contact__tel{font-size:7cqw;margin-top:5.3cqw;}   /* 24 / ~18 */
  .menu-contact__hours{font-size:3.8cqw;margin-top:2.3cqw;}
  .menu-reserve{width:76cqw;padding:1em 1.5em;font-size:4.7cqw;font-weight:600;margin-top:8cqw;}
  .menu-reserve__icon{width:3.8cqw;height:3.8cqw;}
  .menu-links{grid-template-columns:repeat(2,1fr);gap:2.3cqw;width:100%;margin-top:11.7cqw;}
  .menu-links a{min-height:12cqw;font-size:4.1cqw;padding:1cqw;}
  .menu-services{margin-top:14cqw;}
  .menu-services .label{display:none;}
  .menu-services .sec-title{font-size:5.3cqw;}   /* 18 */
  .menu-services .menu-block{padding:4.7cqw 0;}
  .menu-services .menu-grid,.menu-services .menu-grid--single{grid-template-columns:repeat(2,1fr);gap:2.3cqw;}
  .menu-overlay .mcard{background:#fff;color:var(--c-ink);min-height:23.4cqw;padding:4.7cqw 2.9cqw 6cqw;gap:2.3cqw;border:1px solid rgba(19,33,25,.12);}
  .menu-overlay .mcard::before{display:none;}
  .menu-overlay .mcard__main{color:var(--c-ink);font-weight:600;font-size:4.1cqw;}
  .menu-overlay .mcard::after{background-image:url(../images/arrow-dark.svg);width:5cqw;height:1.5cqw;right:3.2cqw;bottom:3.5cqw;}
}

/* =========================================================
   下層ページ共通（お知らせ/ブログ/特集など。header/footerは流用）
   ========================================================= */
.subpage{padding-top:var(--header-h);}          /* fixedヘッダー分をクリア */
.subpage-inner{width:min(100% - 48px,890px);margin:0 auto;}
.subpage-inner--wide{max-width:1386px;}
/* 本文ページ（page.php）のコンテンツ幅。「初診の方へ」の .info-inner（css/info.css）と同じ。
   info.css は初診・院内の2ページでしか読まないので、同じ値をここに持つ。
   値を変えるときは info.css 側と揃えること。 */
.subpage-inner--doc{width:min(100% - 100px,1400px);}
.subpage-head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:89px 0 60px;}
.subpage-head .sec-title{font-size:34px;}
.subpage-section{padding-bottom:108px;}
.btn--back{justify-content:center;gap:16px;}
.btn__icon--flip{transform:scaleX(-1);}

/* ページネーション */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:56px;}
.pagination a,.pagination span{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:var(--c-beige);color:var(--c-ink);
  font-family:var(--f-min);font-size:14px;line-height:1;
  transition:opacity .2s;
}
.pagination a:hover{opacity:.7;}
.pagination .is-active{background:var(--c-green);color:#fff;}
.pagination__ellipsis{font-family:var(--f-inter);}
.pagination__nav{position:relative;}
.pagination__nav::before{
  content:"";width:7px;height:7px;
  border-top:1.5px solid var(--c-ink);border-right:1.5px solid var(--c-ink);
}
.pagination__prev::before{transform:translateX(2px) rotate(-135deg);}
.pagination__next::before{transform:translateX(-2px) rotate(45deg);}

@media (max-width:1023px){
  .subpage{padding-top:64px;}
  .subpage-inner--doc{width:min(100% - 48px,900px);}   /* info.css の .info-inner と同値 */
}

@media (max-width:767px){
  .subpage-inner{width:min(100% - 50px,340px);}
  .subpage-inner--doc{width:min(100% - 30px,600px);}   /* info.css の .info-inner と同値 */
  .subpage-head{padding:48px 0 32px;}
  .subpage-head .sec-title{font-size:24px;}
  .subpage-section{padding-bottom:64px;}
  .pagination{margin-top:40px;}
}

/* 更に狭い端末で340pxボタンが溢れないよう */
@media (max-width:390px){
  .btn{width:100%;}
}

/* reduce-motion: 大きな動きのトランジションは最小化（重要スクロール演出は自前JSで担保）。
   ただしハンバーガー↔Xの小さな機能的モーフィングとメニュー開閉フェードは残す */
/* ===== 共有：緑バー見出し / 予約バナー（feature・reserve 共通） ===== */
.feat-h{position:relative;padding-left:21px;font-family:var(--f-min);font-weight:400;font-size:32px;line-height:1.4;color:var(--c-ink);margin-bottom:21px;}
.feat-h::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:42px;background:var(--c-green);}
/* 背景は合成済み画像(緑＋波線)を1枚 cover で表示。高さは padding 基準で変えない */
.reservation{position:relative;background:var(--c-green) url(../images/reservation-bg.png) center/cover no-repeat;padding:83px 0 84px;text-align:center;}
.reservation > *{position:relative;z-index:1;}
.reservation__lead{font-family:var(--f-min);font-size:24px;color:#fff;}
.reservation__btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  width:500px;max-width:calc(100% - 48px);margin-top:16px;padding:28px 48px;
  background:#fff;color:var(--c-green);
  font-family:var(--f-min);font-size:32px;transition:opacity .25s;
}
.reservation__btn:hover{opacity:.88;}
.reservation__btn img{width:28px;height:28px;flex:none;}
@media (max-width:767px){
  .feat-h{font-size:20px;padding-left:16px;}
  .feat-h::before{height:28px;width:5px;}
  .reservation{padding:48px 0;}
  .reservation__lead{font-size:18px;}
  .reservation__btn{width:min(100% - 50px,340px);padding:20px 28px;font-size:22px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;}
  .hamburger span{transition-duration:.35s !important;}
  .menu-overlay{transition-duration:.3s !important;}
  /* 微細なフェード/開閉は reduce-motion でも残す（意匠上の要求。大きな移動ではない） */
  .megamenu,.mcard,.megamenu .mcard{transition-duration:.3s !important;}
  .faq-a{transition-duration:.3s !important;}
  .faq-toggle::after{transition-duration:.3s !important;}
  .sch-modal,.sch-modal__inner{transition-duration:.32s !important;}   /* 3ヶ月ポップアップのフェード */
  /* hover スムージング（意匠上の微細な色/背景変化。大きな移動ではない） */
  a,.btn,.bcard,.bcard__tag-link,.feature-filter__item,.bloglist__filter a{transition-duration:.3s !important;}
  .bcard__img img{transition-duration:.4s !important;}   /* 特集カードの画像ズームを滑らかに（reduce-motionでも維持） */
}