@charset "UTF-8";
/* =========================================================
   サブページ共通コンポーネント
   style.css の後に読み込むこと（トークン・ヘッダー・フッターは style.css 側）

   文字サイズはトップページと同じ階層に揃えている。
   プロトタイプ比の対応: 11→12px / 12〜12.5→13〜14.5px / 13〜14.5→+1px / 15px以上は据え置き
   ========================================================= */

/* ---------- ページ見出し（下層ページのヒーロー） ---------- */
.page-hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #EFEAE3;
}
.page-hero__bg { position: absolute; inset: 0; background-size: cover; }
.page-hero--hero2 .page-hero__bg { background-image: url(../images/hero2.jpg); background-position: center 72%; }
/* 内視鏡が写真の左寄りにあり、ヴェールの濃い左側に隠れてしまうため左右反転して右側に見せる */
.page-hero--endoscopy .page-hero__bg { background-image: url(../images/endoscopy.jpg); background-position: center 45%; transform: scaleX(-1); }
.page-hero--processor .page-hero__bg { background-image: url(../images/endoscopy-processor.jpg); background-position: center; }
.page-hero--vaccination .page-hero__bg { background-image: url(../images/vaccination.jpg); background-position: center 78%; }
.page-hero--checkup .page-hero__bg { background-image: url(../images/checkup.jpg); background-position: center 82%; }
.page-hero--metabolic .page-hero__bg { background-image: url(../images/metabo-hero.jpg); background-position: center; }
.page-hero--norovirus .page-hero__bg { background-image: url(../images/noro-hero.jpg); background-position: center; }
.page-hero--pylori .page-hero__bg { background-image: url(../images/pyroli-hero.jpg); background-position: center; }
.page-hero--liver .page-hero__bg { background-image: url(../images/liver-hero.jpg); background-position: center; }
.page-hero--sas .page-hero__bg { background-image: url(../images/sas-hero.jpg); background-position: center; }
/* 写真を cover より小さく右寄せし、左端はマスクでぼかして地色（ヴェール）に溶かす配置。
   幅は --photo-w、縦位置は background-position で各ページごとに指定する。 */
.page-hero--clinic-outside .page-hero__bg,
.page-hero--faq .page-hero__bg,
.page-hero--results .page-hero__bg {
  background-repeat: no-repeat;
  background-size: var(--photo-w) auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right center;
  -webkit-mask-size: var(--photo-w) 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  mask-repeat: no-repeat;
  mask-position: right center;
  mask-size: var(--photo-w) 100%;
}
.page-hero--clinic-outside .page-hero__bg {
  --photo-w: min(56%, 900px);
  background-image: url(../images/clinic-outside1.jpg);
  background-position: right 88%;
}
.page-hero--faq .page-hero__bg {
  --photo-w: min(74%, 1180px);
  background-image: url(../images/faq-hero.jpg);
  background-position: right 85%;
}
.page-hero--results .page-hero__bg {
  --photo-w: min(58%, 950px);
  background-image: url(../images/results.jpg);
  background-position: right 50%;
}
/* 写真を持たない見出し帯（個人情報保護方針・サイトマップ）。
   他ページと同じ佇まいを保ちつつ、実務的なページなので少し低くしてある */
.page-hero--plain { height: 280px; background: var(--color-bg-card); }

.page-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 253, 251, .95) 0%, rgba(255, 253, 251, .86) 42%, rgba(255, 253, 251, .16) 74%);
}
.page-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 78px 56px 0;
}
.breadcrumb { font-size: 13.5px; color: var(--color-text-sub); letter-spacing: .04em; }
.breadcrumb a { color: var(--color-text-sub); }
.breadcrumb a:hover { color: var(--color-primary-dark); }
.page-hero__en {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .28em;
  color: var(--color-text-en);
  margin-top: 20px;
}
.page-hero__title {
  margin: 8px 0 0;
  font-size: 40px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: .06em;
}
.page-hero__inner .bar { margin: 16px 0 0; }
.page-hero__lead { margin: 16px 0 0; font-size: 15.5px; color: var(--color-text-body); }

/* ---------- ページ内目次（CONTENTS） ---------- */
.contents { padding: 44px 56px 0; background: #fff; }
.contents__box {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--color-bg-card);
  border-radius: 20px;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.contents__label {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .24em;
  color: var(--color-text-sub);
}
/* row-gap は下のリンクの縦paddingぶん詰めてあるので、見た目の行間は据え置き */
.contents__links { display: flex; gap: 22px 26px; flex-wrap: wrap; }
.contents__link {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 2px 0;   /* WCAG 2.2 2.5.8 タップ領域24px確保 */
  font-size: 15.5px;
  font-weight: 500;
  color: var(--color-text-nav);
}
.contents__link:hover { color: var(--color-primary-dark); }
.contents__num { font-family: var(--font-en); font-size: 14px; color: var(--color-primary-dark); }

/* ---------- セクション枠 ---------- */
.sec { padding: 90px 56px; background: #fff; }
.sec--soft { background: var(--color-bg-soft); }
.sec__inner { max-width: 1280px; margin: 0 auto; }
.sec__inner--narrow { max-width: 960px; }
.sec__num {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .28em;
  color: var(--color-text-en);
}
.sec__title {
  margin: 10px 0 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: .06em;
}
.sec__title + .bar { margin: 16px 0 0; }
.sec__lead {
  margin: 20px 0 0;
  font-size: 15.5px;
  line-height: 2;
  color: var(--color-text-body-2);
  max-width: 720px;
  text-wrap: pretty;
}
.sec__sub {
  margin: 52px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-heading);
  letter-spacing: .06em;
}

/* ---------- サイトマップ ---------- */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px;
  /* 見出しを持たないページなので、.sec の余白だけで他ページと同じ間隔になる */
  margin-top: 0;
}
.sitemap-group__title {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-secondary);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: .06em;
}
.sitemap-links { list-style: none; margin: 0; padding: 0; }
.sitemap-links > li { border-bottom: 1px solid var(--color-border); }
.sitemap-links a {
  display: block;
  padding: 13px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-heading);
  transition: color .2s, padding-left .2s var(--ease-std);
}
.sitemap-links a:hover { color: var(--color-primary-dark); padding-left: 8px; }
/* ページ内の見出しへのリンク。親ページより一段下がっていることを字下げと細字で示す */
.sitemap-links__sub { list-style: none; margin: 0 0 10px; padding: 0 0 0 18px; }
.sitemap-links__sub a {
  /* 指で押す領域が小さくなりすぎないよう、親より少し詰める程度に留める */
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-body-2);
}
.sitemap-links__sub a::before { content: "└ "; color: var(--color-text-en); }
/* 外部サービスへ移動するリンク */
.sitemap-links a[target="_blank"]::after {
  content: " ↗";
  font-size: 12px;
  color: var(--color-accent-orange-dark);
}

@media (max-width: 1024px) {
  .sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sitemap-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- 個人情報保護方針 ---------- */
/* 条文が続くページなので、節と節のあいだを本文ページより広く取る */
.sec__lead + .policy-sec { margin-top: 60px; }
.policy-sec + .policy-sec { margin-top: 56px; }
.policy-sec__body { margin-top: 22px; }
.policy-sec__body p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 2.05;
  color: var(--color-text-body-2);
}
.policy-sec__body p:last-child { margin-bottom: 0; }
.policy-note {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 3px solid var(--color-border-strong);
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body-2);
}
.policy-date {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text-sub);
  text-align: right;
}

/* ---------- 院長プロフィール ---------- */
.profile {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 48px;
}
.arch-photo {
  height: 520px;
  border-radius: 200px 200px 20px 20px;
  background-image: url(../images/director.jpg);
  background-size: cover;
  background-position: center 18%;
  background-color: var(--color-placeholder);
}
.profile__caption { margin-top: 22px; text-align: center; }
.profile__role { font-size: 13.5px; color: var(--color-text-sub); letter-spacing: .08em; }
.profile__name {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: .14em;
}
.greeting__title { font-size: 22px; font-weight: 700; color: var(--color-primary-dark); letter-spacing: .04em; }
.greeting__body {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 15px;
  line-height: 2.15;
  color: var(--color-text-body);
  max-width: 680px;
  text-wrap: pretty;
}
.greeting__body p { margin: 0; }

/* ---------- 情報カード（資格・職歴など） ---------- */
.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.info-card { background: var(--color-bg-card); border-radius: 20px; padding: 28px 30px; }
.info-card--outline { background: var(--color-bg-soft); border: 1px solid var(--color-border); }
.info-card__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
  background: var(--color-accent-orange-dark);
  border-radius: 6px;
  padding: 5px 10px;
}
.info-card__badge--brown { background: var(--color-secondary); }
.info-card__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-nav);
}
.info-card__list li { display: flex; gap: 10px; }
.info-card__list--career { gap: 14px; }
.info-card__list--career li { gap: 12px; }
.info-card__list b { font-weight: 700; color: var(--color-secondary); }
.mark { color: var(--color-primary-dark); }
/* 資格リストの ● は文字なので職歴リストの .dot と大きさが揃わない。
   このカード内だけ .dot と同じ丸として描き直す。 */
.info-card__list .mark {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: 9px;
  font-size: 0;
}
.dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-footer-heading);
  margin-top: 9px;
}
.dot--current { background: var(--color-primary); }

/* ---------- 診療時間（下層ページ版） ---------- */
.hours-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 44px;
}
/* グリッドの子は既定が min-width:auto のため、中の診療時間表
   （min-width:600px）より小さくなれず、スマホ幅でページ全体が
   横にはみ出していた。0 を指定して .table-scroll の overflow-x が
   本来の意図どおり働くようにする（はみ出すのは表の中だけになる）。*/
.hours-grid > * { min-width: 0; }
.hours-table--card { margin-top: 0; }
.hours-table--card .hours__time { padding: 18px 20px; }

.notice-box {
  margin-top: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  /* 見出し帯の角を外枠の丸みで切り落とす */
  overflow: hidden;
}
/* 見出しは濃色の帯にして本文と切り分ける。料金表のヘッダーと同じ作り。 */
.notice-box__title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: var(--color-secondary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
}
/* 見出しの目印。丸だと本文の ● と同じ形になるので 45 度に倒した小さな四角にする */
.notice-box__title::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--color-accent-orange);
  transform: rotate(45deg);
}
.notice-box .bullet-list {
  margin: 0;
  padding: 22px 26px 24px;
}
.notice-box__text {
  margin: 0;
  padding: 22px 26px 24px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-text-body-2);
}

@media (max-width: 768px) {
  .notice-box__title { padding: 13px 20px; }
  .notice-box .bullet-list,
  .notice-box__text { padding: 20px 20px 22px; }
}

.contact-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 34px;
}
.contact-card__title { font-size: 18px; font-weight: 700; color: var(--color-primary-dark); }
.contact-card__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-nav);
}
.contact-card__list li { display: flex; gap: 12px; }
.label-pill {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--color-secondary);
  border-radius: 6px;
  padding: 4px 10px;
  height: fit-content;
}
.label-pill--primary { background: var(--color-primary-surface); }
.contact-card__tel { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.contact-card__tel-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--color-text-sub); }
.contact-card__tel-num {
  display: block;
  margin-top: 6px;
  font-size: 30px;
  font-weight: 700;
  color: var(--color-primary-dark);
  letter-spacing: .02em;
}
.contact-card__tel-note { margin-top: 6px; font-size: 13.5px; color: var(--color-text-sub); }
.contact-card__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.contact-card__btns .btn { padding: 15px; font-size: 15px; }

/* ---------- 設備カード ---------- */
.facility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.facility {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
}
.facility__photo { height: 190px; background-size: cover; background-color: var(--color-placeholder); }
.facility__photo--endoscopy { background-image: url(../images/endoscopy.jpg); background-position: center 45%; }
.facility__photo--processor { background-image: url(../images/endoscopy-processor.jpg); background-position: center; }
/* 縦長の製品写真なので cover だと拡大されて粗くなる。白地のまま全体を収める */
.facility__photo--echo {
  background-image: url(../images/echo1.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
}
.facility__photo--colonoscopy { background-image: url(../images/colonoscopy-equipment.jpg); background-position: center 42%; }
.facility__photo--co2 { background-image: url(../images/co2-insufflator.jpg); background-position: center 10%; }
.facility__photo--pump { background-image: url(../images/fujifilm-irrigation-pump.jpg); background-position: center 45%; }
.facility__photo--cad { background-image: url(../images/CAD-eye.jpg); background-position: center 60%; }
.facility__photo--smartgene { background-image: url(../images/smart-gene.jpg); background-position: center 45%; }
.facility__photo--blood { background-image: url(../images/blood-analyzer.jpg); background-position: center 48%; }
.facility__photo--sleep { background-image: url(../images/fukuda-denshi-pulsleep-ls140.jpg); background-position: center 48%; }
.facility__photo--vasera { background-image: url(../images/fukuda-denshi-vasera.jpg); background-position: center 40%; }
.facility__photo--xray { background-image: url(../images/hitachi-digital-xray-machine.jpg); background-position: center 42%; }
.facility__photo--ai { background-image: url(../images/chest-xray-ai-detection-system.jpg); background-position: center 45%; }
.facility__body { padding: 26px 28px 30px; }
.facility__title { font-size: 18px; font-weight: 700; color: var(--color-primary-dark); }
.facility__text { margin: 12px 0 0; font-size: 14.5px; line-height: 2; color: var(--color-text-body-3); }

/* ---------- クリニック風景ギャラリー（横に流れるマーキー） ----------
   カード列をJSが1周ぶん複製し、track を1周ぶんだけ左へ送り続ける。
   複製ぶんが元の列と入れ替わるので、つなぎ目が見えないループになる。
   自動送りは is-running が付いているあいだだけ。JSが動かないときや
   動きを減らす設定・スマホでは、ただの横スクロールとして残る。 */
.marquee {
  position: relative;
  margin-top: 28px;
  /* 既定は横スクロール。JSが動かないときでも全部の写真にたどり着ける */
  overflow-x: auto;
  scrollbar-width: thin;
}
/* 自動送りが始まったらスクロールバーは不要になる */
.marquee.is-running {
  overflow: hidden;
  /* 左右の端を地色に溶かして、カードが切れる位置を目立たせない */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.marquee__track { display: flex; gap: 24px; width: max-content; }
.marquee.is-running .marquee__track {
  animation: marquee-scroll var(--marquee-duration, 90s) linear infinite;
  will-change: transform;
}
/* gap のぶん、1周は「幅の半分＋gapの半分」ずれる */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); }
}
/* マウスを載せている、またはキーボードでカードを選んでいるあいだは止める */
@media (hover: hover) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
/* キーボードでカードを選んでいるあいだも止める。
   :focus-within ではなく :focus-visible を見るのは、マウスでクリックした
   だけの状態まで「選択中」に含めると、拡大表示を閉じたあと
   （フォーカスが元のカードに戻る）流れが止まったままになるため。 */
.marquee:has(:focus-visible) .marquee__track { animation-play-state: paused; }
/* 拡大表示を開いているあいだも止める */
.marquee.is-paused .marquee__track { animation-play-state: paused; }

.gallery-card {
  flex: 0 0 320px;
  width: 320px;
  margin: 0;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.gallery-card__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}
.gallery-card__photo {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  background-color: var(--color-placeholder);
  transition: transform .6s var(--ease-std);
}
.gallery-card__btn:hover .gallery-card__photo { transform: scale(1.06); }
.gallery-card__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
/* 写真ごとの見せたい位置。旧 background-position をそのまま引き継いでいる */
.gallery-card__photo--hero1 { object-position: center 70%; }
.gallery-card__photo--hero2 { object-position: center 72%; }
.gallery-card__photo--hero3 { object-position: center 55%; }
.gallery-card__photo--sign { object-position: center 50%; }
/* カードは第1駐車場の1枚（parking-1.jpg）。看板が切れないよう右寄せ。
   拡大表示では data-full の3枚組（第1〜第3）に差し替わる */
.gallery-card__photo--parking { object-position: right center; }
.gallery-card__photo--night-exterior { object-position: center 55%; }
.gallery-card__photo--night-sign { object-position: center 42%; }
.gallery-card__photo--waiting2 { object-position: center 50%; }
.gallery-card__photo--consultation { object-position: center 50%; }
.gallery-card__photo--treatment { object-position: center 55%; }
.gallery-card__photo--prep { object-position: center 55%; }
.gallery-card__photo--endoscopy-room { object-position: center 55%; }
.gallery-card__photo--xray-room { object-position: center 50%; }
.gallery-card__body { padding: 18px 22px 22px; }
.gallery-card__name { font-size: 15px; font-weight: 700; color: var(--color-secondary); }
.gallery-card__desc { margin-top: 5px; font-size: 14px; color: var(--color-text-sub); }

.gallery-cta { max-width: 640px; margin: 36px auto 0; }

/* ---------- 拡大表示（ライトボックス） ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120; /* ヘッダー50・サイドタブ60・モバイルメニュー80 より前 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: rgba(38, 30, 18, .88);
  opacity: 0;
  visibility: hidden;
  /* 閉じるときだけ visibility を遅らせる。開くときは即 visible にしないと
     閉じるボタンにフォーカスを移せない（見えない要素は選べないため） */
  transition: opacity .3s var(--ease-std), visibility 0s .3s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease-std), visibility 0s;
}
.lightbox__fig { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  transform: scale(.97);
  transition: transform .3s var(--ease-std);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__cap { margin-top: 18px; color: #fff; }
.lightbox__name { font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.lightbox__desc { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.lightbox__count { margin-top: 10px; font-family: var(--font-en); font-size: 13px; letter-spacing: .18em; color: rgba(255, 255, 255, .5); }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close { top: 20px; right: 24px; width: 46px; height: 46px; font-size: 22px; line-height: 1; }
.lightbox__nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; font-size: 24px; line-height: 1; }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__nav:hover { transform: scale(1.08); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.brown-card {
  background: var(--color-secondary);
  border-radius: 18px;
  padding: 32px 30px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brown-card__en { font-family: var(--font-en); font-size: 13px; letter-spacing: .24em; color: rgba(255, 255, 255, .75); }
.brown-card__title { margin: 10px 0 0; font-size: 20px; font-weight: 700; line-height: 1.6; }
.brown-card__text { margin: 14px 0 0; font-size: 14px; line-height: 1.95; color: rgba(255, 255, 255, .82); }
.brown-card .btn {
  align-self: flex-start;
  margin-top: 20px;
  padding: 13px 26px;
  font-size: 14px;
  background: #fff;
  color: var(--color-primary-dark);
}
.brown-card .btn:hover { background: var(--color-bg-card-mute); color: var(--color-primary-dark); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1200px) {
  .page-hero__inner { padding: 70px 32px 0; }
  .contents { padding: 36px 32px 0; }
  .sec { padding: 72px 32px; }
}

@media (max-width: 1024px) {
  .profile { grid-template-columns: 1fr; gap: 36px; }
  .arch-photo { max-width: 400px; width: 100%; margin: 0 auto; }
  .hours-grid { grid-template-columns: 1fr; gap: 28px; }
  .facility-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
  .page-hero { height: 240px; }
  /* 幅が狭いと cover でもほぼ全景が入るので、右寄せ・マスクは解除して全面に敷く */
  .page-hero--clinic-outside .page-hero__bg,
  .page-hero--faq .page-hero__bg,
  .page-hero--results .page-hero__bg {
    background-size: cover;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-hero--clinic-outside .page-hero__bg { background-position: center 88%; }
  .page-hero--faq .page-hero__bg { background-position: center 85%; }
  .page-hero--results .page-hero__bg { background-position: right 55%; }
  .page-hero__inner { padding: 56px 20px 0; }
  .page-hero__title { font-size: 28px; }
  .page-hero__lead { font-size: 14.5px; }
  .contents { padding: 28px 20px 0; }
  .contents__box { padding: 20px 22px; gap: 16px; }
  .contents__links { gap: 10px 20px; }
  .sec { padding: 48px 20px; }
  .sec__title { font-size: 26px; }
  .sec__sub { margin-top: 36px; }
  .info-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .facility-grid { grid-template-columns: 1fr; margin-top: 32px; }
  /* スマホは自動送りを止めて、指でスワイプする横スクロールにする。
     流れているとタップしにくいため。1枚ずつ気持ちよく止まるよう scroll-snap を効かせる */
  .marquee,
  .marquee.is-running {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 4px;
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee.is-running .marquee__track { animation: none; }
  .marquee__track { gap: 16px; }
  .gallery-card { flex-basis: min(78vw, 320px); width: min(78vw, 320px); scroll-snap-align: center; }
  .gallery-card__photo { height: 200px; }
  .lightbox { padding: 24px 14px; }
  .lightbox__close { top: 12px; right: 14px; width: 40px; height: 40px; }
  .lightbox__nav { width: 42px; height: 42px; margin-top: -21px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__img { max-height: 62vh; }
  .arch-photo { height: 380px; border-radius: 160px 160px 20px 20px; }
  .contact-card { padding: 26px 22px; }
}

/* =========================================================
   診療案内（サイドレール＋スクロール連動）
   ========================================================= */
.med-wrap { padding: 64px 56px 96px; background: #fff; }
.med-layout {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.rail { position: sticky; top: 120px; }
.rail__label { font-family: var(--font-en); font-size: 14px; letter-spacing: .28em; color: var(--color-text-en); }
.rail__list { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.rail__pill {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 26px;
  border-radius: 999px;
  background: #FFFDFB;
  border: 1px solid var(--color-border-strong);
  transition: background .4s var(--ease-out-expo), box-shadow .4s, transform .4s var(--ease-out-expo), border-color .4s;
}
.rail__pill.is-active {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(107, 91, 58, .16);
  transform: translateX(6px);
}
.rail__num { flex: none; font-family: var(--font-en); font-size: 20px; line-height: 1; color: var(--color-text-en); transition: color .35s; }
.rail__pill.is-active .rail__num { color: var(--color-primary-dark); }
.rail__text { display: flex; flex-direction: column; gap: 3px; }
.rail__en { font-family: var(--font-en); font-size: 11px; letter-spacing: .1em; white-space: nowrap; color: var(--color-text-en); transition: color .35s; }
.rail__pill.is-active .rail__en { color: var(--color-accent-orange-dark); }
.rail__title { font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--color-secondary); transition: color .35s; }
.rail__pill.is-active .rail__title { color: var(--color-primary-dark); }
.rail__line { width: 1px; height: 14px; margin: 0 auto; background: var(--color-border-strong); }

/* 項目が多いページ（睡眠時無呼吸症候群など）用。6項目でも画面内に収まるよう縦を詰める */
.rail--compact .rail__list { gap: 7px; margin-top: 14px; }
.rail--compact .rail__pill { padding: 13px 22px; gap: 14px; }
.rail--compact .rail__num { font-size: 18px; }
.rail--compact .rail__title { font-size: 15px; }
.rail--compact .rail__line { height: 10px; }

/* 出現演出が右へ180pxはみ出すぶんを隠す。ここで overflow-x: hidden を使うと
   スクロールコンテナになってしまい、#付きリンクで開いたときに横スクロール位置が
   残って本文が左に隠れる。clip はスクロールできないので同じ見た目のまま安全。
   （clip 非対応の古い環境向けに hidden を先に書いて残しておく） */
.med-body {
  display: flex;
  flex-direction: column;
  gap: 80px;
  overflow-x: hidden;
  overflow-x: clip;
}
.med-mark { height: 0; overflow: hidden; }

/* 疾患解説ページ（メタボ・ピロリ菌・ノロ・肝臓・SAS）の面づくり。
   本文が白一色でカードだけが浮いていると平坦に見えるため、セクションを1つおきに
   やわらかい面で包んでスクロールのリズムをつける。
   .med-body は overflow-x: clip なので、面は負のマージンで外へ出さず内側に敷く */
.med-body--banded > section:nth-of-type(even) {
  padding: 50px 44px 54px;
  border-radius: 28px;
  background: var(--color-bg-card);
}
/* 面の上では地色のカードが沈むので、白に置き換えて輪郭を残す */
.med-body--banded > section:nth-of-type(even) .info-box:not(.info-box--white),
.med-body--banded > section:nth-of-type(even) .step {
  background: #fff;
  border: 1px solid var(--color-border);
}

/* 本文末尾の、どのセクションにも属さないブロック（よくある質問・予約バンド）。
   面つきセクションの地色に飲み込まれないよう section の外に出しているので、
   先頭の見出しの上余白は .med-body の gap にまかせる */
.med-tail > .stats-h3:first-child { margin-top: 0; }


/* スクロールで奥から現れる演出。JS無効時は最初から表示される */
.reveal { scroll-margin-top: 130px; }
.js .reveal {
  opacity: 0;
  transform: translate(180px, 140px) scale(.94);
  transition: transform 1.1s var(--ease-out-expo), opacity .6s ease-out;
  will-change: transform, opacity;
}
.js .reveal.is-shown { opacity: 1; transform: translate(0, 0) scale(1); }

/* スクロール量に連動して起き上がるページ（liver.html）。
   JS が毎フレーム transform を書き換えるので、トランジションは外す */
.js .is-spin-reveal .reveal {
  transform: translate(180px, 140px) rotate(8deg) scale(.94);
  transform-origin: 0% 50%;
  transition: none;
}

/* 最初のセクションはページを開いた時点で見えている位置にあるため、
   演出の対象から外してそのまま表示する（起き上がるのは2つ目以降）。
   狭い画面用の指定より優先させたいので属性セレクタで詳細度を上げている */
.js .reveal[data-reveal="0"],
.js .is-spin-reveal .reveal[data-reveal="0"] {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

.med-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  align-items: start;
  margin-top: 44px;
}
.med-intro__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 15px;
  line-height: 2.15;
  color: var(--color-text-body);
  max-width: 700px;
  text-wrap: pretty;
}
.med-intro__text p { margin: 0; }
.med-intro__photo { height: 280px; border-radius: 20px; background-size: cover; background-color: var(--color-placeholder); }
.med-intro__photo--naika { background-image: url(../images/naika-metabo.jpg); background-position: center; }
.med-intro__photo--echo { background-image: url(../images/index-echo.jpg); background-position: center; }

.med-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 44px; }
.med-cards--tight { margin-top: 24px; }
.med-cards--sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 20px; }
.med-card { background: var(--color-bg-card); border-radius: 20px; padding: 30px 32px; }
.med-card--outline { background: var(--color-bg-soft); border: 1px solid var(--color-border); }
/* 白背景セクションの上に置く白カード。枠線がないと境界が消えるので必ず罫線を付ける */
.med-card--white,
.med-card--white-outline { background: #fff; border: 1px solid var(--color-border); }
.med-card__title { font-size: 17px; font-weight: 700; color: var(--color-primary-dark); }
.med-card__title--dark { color: var(--color-text-heading); }

.tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.tag-pill {
  font-size: 14px;
  color: var(--color-secondary);
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  padding: 8px 16px;
}
.tag-pill--plain { background: var(--color-bg-card); border-color: transparent; }
/* 予約の要否だけは一目で拾えるようにする。要予約は診療時間表の「△」と同じアンバー、
   予約不要はロゴの葉の緑。地は薄く敷くだけにして、白抜きの料金より前には出さない */
.tag-pill--book {
  background: rgba(216, 137, 28, .12);
  border-color: rgba(216, 137, 28, .5);
  color: var(--color-accent-orange-dark);
  font-weight: 700;
}
.tag-pill--walkin {
  background: rgba(94, 125, 30, .12);
  border-color: rgba(94, 125, 30, .5);
  color: var(--color-accent-green);
  font-weight: 700;
}

.symptoms {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-nav);
}
.symptoms li { display: flex; gap: 9px; }

.related-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 28px 30px;
  transition: transform .2s, box-shadow .2s, border-color .45s var(--ease-std);
}
/* ホバーでカード全体がオレンジに変わる。トップページの .mcard__overlay と同じ
   「下からせり上がる」動き・同じ尺に揃えている。 */
.related-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary-surface);
  transform: translateY(101%);
  transition: transform .45s var(--ease-std);
}
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(107, 91, 58, .13);
  border-color: var(--color-primary);
}
.related-card:hover::before { transform: translateY(0); }
.related-card--sm { padding: 26px 28px; }

/* せり上がる面より前に出す。色の変化は .mcard の文字と同じ配分。 */
.related-card__label,
.related-card__title,
.related-card__text,
.related-card__more { position: relative; z-index: 1; transition: color .3s; }

.related-card__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--color-accent-orange-dark); }
.related-card__title { margin: 10px 0 0; font-size: 18px; font-weight: 700; color: var(--color-secondary); }
.related-card--sm .related-card__title { margin: 0; font-size: 17px; }
.related-card__text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--color-text-body-3); }
.related-card__more { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--color-primary-dark); }

.related-card:hover .related-card__label { color: rgba(255, 255, 255, .75); }
.related-card:hover .related-card__title { color: #fff; }
.related-card:hover .related-card__text { color: rgba(255, 255, 255, .92); }
.related-card:hover .related-card__more { color: #fff; }

.endo-lead-title { margin-top: 36px; font-size: 20px; font-weight: 700; color: var(--color-primary-dark); }
.endo-lead {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 2.15;
  color: var(--color-text-body);
  max-width: 820px;
  text-wrap: pretty;
}

/* 内視鏡の2カード */
.scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; margin-top: 44px; }
.scope { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: 24px; overflow: hidden; }
.scope__photo { height: 230px; background-size: cover; background-color: var(--color-placeholder); }
.scope__photo--endoscopy { background-image: url(../images/endoscopy.jpg); background-position: center 45%; }
.scope__photo--processor { background-image: url(../images/endoscopy-processor.jpg); background-position: center; }
.scope__body { padding: 32px 34px 36px; }
.scope__title { font-size: 21px; font-weight: 700; color: var(--color-secondary); }
.scope__block { margin-top: 22px; }
.scope__block--sep { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.scope__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--color-accent-orange-dark); }
.scope__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scope__tag {
  font-size: 14px;
  color: var(--color-secondary);
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  padding: 7px 14px;
}
.scope__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--color-text-nav);
}
.scope__list li { display: flex; gap: 10px; }
.scope .btn { margin-top: 26px; padding: 14px 30px; font-size: 14.5px; }

/* SPECIALIST 帯 */
.specialist {
  margin-top: 44px;
  border-radius: 24px;
  padding: 52px 56px;
  background: var(--color-secondary);
  color: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  align-items: center;
}
.specialist__en { font-family: var(--font-en); font-size: 14px; letter-spacing: .28em; color: rgba(255, 255, 255, .75); }
.specialist__title { margin: 12px 0 0; font-size: 26px; font-weight: 700; line-height: 1.6; }
/* 見出しは文節ごとに span で区切り、「による」の途中で折り返して1文字だけ残るのを防ぐ */
.specialist__title span { display: inline-block; }
.specialist__text {
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 2.05;
  color: rgba(255, 255, 255, .85);
  max-width: 640px;
  text-wrap: pretty;
}
.specialist__card { background: rgba(255, 255, 255, .96); border-radius: 20px; padding: 30px 32px; color: var(--color-text-nav); }
.specialist__card .btn { margin-top: 18px; padding: 12px 26px; font-size: 14px; }

@media (max-width: 1024px) {
  .med-wrap { padding: 48px 32px 72px; }
  .med-layout { grid-template-columns: 1fr; gap: 32px; }
  .rail { position: static; }
  .rail__list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .rail__pill { flex: 1 1 220px; }
  .rail__pill.is-active { transform: none; }
  /* 項目数が多いページは横並びのタイル状にして、目次で画面が埋まらないようにする */
  .rail--compact .rail__list { gap: 8px; }
  .rail--compact .rail__pill { flex: 1 1 140px; padding: 11px 18px; }
  .rail__line { display: none; }
  .med-body { gap: 56px; }
  .med-body--banded > section:nth-of-type(even) { padding: 40px 28px 44px; border-radius: 24px; }
  .js .reveal { transform: translate(60px, 60px) scale(.97); }
  .js .is-spin-reveal .reveal { transform: translate(60px, 60px) rotate(5deg) scale(.97); }
  .specialist { padding: 40px 32px; }
}

@media (max-width: 768px) {
  .med-wrap { padding: 36px 20px 56px; }
  .med-body--banded > section:nth-of-type(even) { padding: 30px 18px 34px; border-radius: 18px; }
  .med-card { padding: 24px 22px; }
  .scope__body { padding: 26px 22px 30px; }
  .specialist { padding: 32px 24px; }
  .specialist__title { font-size: 22px; }
  .related-card { padding: 24px 22px; }
}

/* =========================================================
   診療実績（数値バンド＋データ表）
   ========================================================= */
.results-band { padding: 70px 56px 0; background: #fff; }
.results-band__inner {
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 24px;
  padding: 48px 52px;
  background: var(--color-secondary);
  color: #fff;
}
.results-band__en { font-family: var(--font-en); font-size: 14px; letter-spacing: .28em; color: rgba(255, 255, 255, .75); }
.results-band__title { margin: 8px 0 0; font-size: 24px; font-weight: 700; letter-spacing: .06em; }
.results-band .results__grid { max-width: none; margin-top: 34px; }
.results-band .results__num { margin-top: 8px; font-size: 68px; }
.results-band .results__unit { font-size: 20px; }

.stats-h3 {
  margin: 44px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-heading);
  letter-spacing: .06em;
}
.sec__inner > .stats-h3:first-of-type,
.med-body > section > .stats-h3:first-of-type { margin-top: 40px; }
.stats-h3 span { font-size: 13.5px; font-weight: 400; color: var(--color-text-sub); margin-left: 8px; }
.stats-note { margin: 18px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--color-text-sub); }

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 16px;
  font-size: 15px;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  overflow: hidden;
}
.data-table thead tr { background: var(--color-secondary); color: #fff; }
.data-table th { padding: 14px 10px; font-weight: 700; }
.data-table th:first-child { padding: 14px 20px; font-weight: 500; text-align: left; }
.data-table th.is-latest { background: var(--color-secondary-dark); }
.data-table tbody td { border-bottom: 1px solid var(--color-border); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td { text-align: center; color: var(--color-text-nav); }
.data-table td:first-child {
  padding: 15px 20px;
  text-align: left;
  color: var(--color-text-body);
  font-weight: 500;
  white-space: nowrap;
}
.data-table td.is-latest { color: var(--color-primary-dark); font-weight: 700; background: var(--color-bg-soft); }
.data-table td.is-none { color: var(--color-status-closed); }
.data-table--month th { padding: 14px 8px; }
.data-table--year { min-width: 720px; }
.data-table--month { min-width: 900px; }

@media (max-width: 1200px) {
  .results-band { padding: 56px 32px 0; }
  .results-band__inner { padding: 40px 32px; }
}

@media (max-width: 768px) {
  .results-band { padding: 40px 20px 0; }
  .results-band__inner { padding: 30px 22px; }
  .results-band .results__grid { grid-template-columns: 1fr; gap: 24px; }
  .results-band .results__num { font-size: 52px; }
  .data-table { font-size: 14px; }
  .data-table--year { min-width: 640px; }
}

/* =========================================================
   FAQアコーディオン（よくある質問・検査ページで使用）
   details/summary によるネイティブ開閉
   ========================================================= */
.faq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.faq-item {
  /* 余白はカードではなく summary と答えに持たせる。
     カード側に padding を置くと、その余白が summary の外側になり、
     質問の周りにクリックの効かない帯（矢印カーソルのまま反応しない
     領域）ができる。 */
  --faq-pad-y: 24px;
  --faq-pad-x: 28px;
  --faq-gap: 16px;    /* 開いたときの質問と答えの間隔 */
  --faq-indent: 38px; /* 答えの字下げ（Qマークぶん） */
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 0;
  transition: box-shadow .3s, border-color .3s, background-color .3s var(--ease-std);
}
/* 開いている間はカードごと地色を敷き、もとからある影と枠線の変化と一緒に浮かせる */
.faq-item[open] {
  background: var(--color-bg-soft);
  border-color: var(--color-border-strong);
  box-shadow: 0 14px 32px rgba(107, 91, 58, .12);
}
/* 閉じるアニメーション中は open が付いたままなので、＋印と同じく地色も先に戻す */
.faq-item.is-closing { background: #fff; }
.faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  /* カードの余白ごと受ける。閉じているときはこれがカード全面になる */
  padding: var(--faq-pad-y) var(--faq-pad-x);
  /* 枠線のぶん内側なので、カードより 1px 小さい半径で合わせる */
  border-radius: 17px;
  /* ホバーの色は開いたときと同じ地色。行き先が同色なので、透明側も
     同じ値の alpha 0 にして、色相がぶれずに濃さだけで出入りするようにする */
  background: rgba(250, 246, 241, 0);
  transition: background-color .3s var(--ease-std), border-radius .3s var(--ease-std);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-text-heading);
}
.faq-item__q::-webkit-details-marker { display: none; }
/* 開くと下辺は答えへ続くので、そちら側の角を落として一枚につなげる */
.faq-item[open] .faq-item__q { border-radius: 17px 17px 0 0; }
.faq-item.is-closing .faq-item__q { border-radius: 17px; }
/* 触る端末では :hover が指を離したあとも残るので、ポインタのある環境だけに効かせる */
@media (hover: hover) {
  .faq-item__q:hover { background: var(--color-bg-soft); }
}
.faq-item__mark {
  flex: none;
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.1;
}
.faq-item__icon {
  flex: none;
  margin-left: auto;
  font-size: 18px;
  color: var(--color-primary-dark);
  line-height: 1.2;
  transition: transform .46s var(--ease-out-quad);
}
.faq-item[open] .faq-item__icon { transform: rotate(135deg); }
/* 閉じるアニメーション中は open が付いたままなので、＋印だけ先に戻す（JS が is-closing を付ける） */
.faq-item.is-closing .faq-item__icon { transform: none; }
.faq-item__a {
  /* summary が下に持つ余白を差し引いて、質問と答えの間隔を --faq-gap に保つ */
  margin: calc(var(--faq-gap) - var(--faq-pad-y)) 0 0;
  padding: 0 var(--faq-pad-x) var(--faq-pad-y) calc(var(--faq-pad-x) + var(--faq-indent));
  font-size: 15px;
  line-height: 2.05;
  color: var(--color-text-body-2);
}
.faq-item__a p { margin: 0; }
.faq-item__a p + p { margin-top: 12px; }

@media (max-width: 768px) {
  .faq-item { --faq-pad-y: 20px; --faq-pad-x: 20px; --faq-gap: 14px; --faq-indent: 0px; }
  .faq-item__q { font-size: 15px; gap: 10px; }
}

/* =========================================================
   よくある質問（カテゴリカード）
   ========================================================= */
.cat-wrap { padding: 56px 56px 0; background: #fff; }
.cat-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.cat-card {
  display: block;
  background: var(--color-bg-card);
  border-radius: 18px;
  padding: 24px 22px;
  transition: transform .2s, box-shadow .2s;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(107, 91, 58, .14); }
.cat-card__en { font-family: var(--font-en); font-size: 12px; letter-spacing: .2em; color: var(--color-text-en); }
.cat-card__title { margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--color-secondary); }
.cat-card__desc { margin-top: 7px; font-size: 13.5px; line-height: 1.7; color: var(--color-text-sub); }

.sec--flush { padding-bottom: 0; }
.sec__title--sm { font-size: 28px; }
.reserve-band__tel-note { margin-top: 4px; font-size: 13px; color: var(--color-text-sub); }

@media (max-width: 1024px) {
  .cat-wrap { padding: 40px 32px 0; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (max-width: 768px) {
  .cat-wrap { padding: 32px 20px 0; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card { padding: 18px 16px; }
  .sec__title--sm { font-size: 24px; }
}

/* =========================================================
   スクロールで重なるカード（胃カメラ検査ページ）
   JS無効・モーション低減時は普通の縦並びになる
   ========================================================= */
.stack-track { position: relative; }
.js .stack-track { height: 340vh; }
.stack-sticky {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
}
.js .stack-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.stack-cards {
  position: relative;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.js .stack-cards { display: block; height: 300px; }
.stack-card {
  box-sizing: border-box;
  width: 100%;
  background: var(--color-bg-card);
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 18px 50px -18px rgba(107, 91, 58, .35);
}
.stack-card:nth-child(even) { background: #F1E8DA; }
.js .stack-card { position: absolute; top: 0; left: 0; will-change: transform, opacity; }
.stack-card__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
  background: var(--color-accent-orange-dark);
  border-radius: 6px;
  padding: 6px 12px;
}
.stack-card__title { margin: 16px 0 0; font-size: 20px; font-weight: 700; color: var(--color-text-heading); }
.stack-card__text { margin: 12px 0 0; font-size: 15px; line-height: 2.05; color: var(--color-text-body-2); }

@media (max-width: 768px) {
  .js .stack-track { height: 300vh; }
  .js .stack-cards { height: 340px; }
  .stack-card { padding: 26px 24px; }
  .stack-card__title { font-size: 18px; }
}

/* =========================================================
   ステップ（検査の流れ・麻酔の流れ）
   ========================================================= */
.steps { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 26px 30px;
}
.step__no { text-align: center; }
.step__label { font-family: var(--font-en); font-size: 13px; letter-spacing: .2em; color: var(--color-text-en); }
.step__num { font-family: var(--font-en); font-size: 44px; line-height: 1; color: var(--color-primary-dark); }
.step__title { font-size: 17px; font-weight: 700; color: var(--color-text-heading); }
.step__text { margin: 8px 0 0; font-size: 15px; line-height: 1.95; color: var(--color-text-body-2); }

@media (max-width: 768px) {
  .step { grid-template-columns: 76px 1fr; gap: 16px; padding: 20px 20px; }
  .step__num { font-size: 34px; }
  .step__title { font-size: 16px; }
}

/* ---- 検査の流れの分岐（大腸カメラ：自宅で洗浄水を飲む場合） ----
   本流と違うのは STEP02 だけなので、差分のカードだけを枝分かれさせて置く */
.flow-alt {
  position: relative;
  margin-top: 30px;
  padding-left: 30px;
}
/* 本流から分かれていることを示す破線 */
.flow-alt::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  border-left: 2px dashed var(--color-border-strong);
}
.flow-alt__badge {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--color-primary-surface);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
}
.flow-alt__title {
  margin: 14px 0 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .04em;
  color: var(--color-text-heading);
}
.flow-alt__note { margin: 10px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--color-text-body-2); }
.flow-alt .step { margin-top: 20px; }
/* 差し替えのカードだと分かるよう、本流のカードとは枠線を変える */
.step--alt { border-style: dashed; border-color: var(--color-border-strong); }

@media (max-width: 768px) {
  .flow-alt { padding-left: 20px; }
  .flow-alt::before { left: 4px; }
  .flow-alt__title { font-size: 17px; }
}

/* ---- スクロールで1枚ずつふわっと表示（鼻の麻酔・検査の流れ） ----
   検知はSTEP1枚ごと。画面に入ったものから順に is-shown が付く。
   --d は、複数枚が同時に入ってきたときだけ JS が入れるずらし幅 */
.js [data-steps-reveal] .step { opacity: 0; }
.js [data-steps-reveal] .step.is-shown {
  animation: steps-rise 1.6s var(--ease-std) both;
  animation-delay: var(--d, 0ms);
}
@keyframes steps-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================
   2カラムの情報ボックス（検査の特徴・ポリシーなど）
   ========================================================= */
.card-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.info-box { background: var(--color-bg-card); border-radius: 20px; padding: 30px 32px; }
.info-box--white { background: #fff; border: 1px solid var(--color-border); }
.info-box--center { display: flex; flex-direction: column; justify-content: center; }
.info-box__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--color-accent-orange-dark); }
/* 同じボックスの中に見出しをもう一つ立てるとき用。bullet-list に下マージンがないので、
   ここで上の内容との間を空ける */
.info-box__label--sub { margin-top: 24px; }
.info-box__title { margin: 10px 0 0; font-size: 18px; font-weight: 700; color: var(--color-secondary); }
.info-box--center .info-box__title { margin: 0; }
.info-box__text { margin: 12px 0 0; font-size: 14.5px; line-height: 2; color: var(--color-text-body-3); }
.info-box__tel {
  display: inline-block;
  margin-top: 18px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.bullet-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--color-text-body-3);
}
.bullet-list li { display: flex; gap: 10px; }
.info-box__text b, .bullet-list b { font-weight: 700; color: var(--color-text-heading); }
.sec__sub--tight { margin-top: 36px; }
.sec__lead--wide { max-width: 880px; margin-top: 26px; font-size: 15px; line-height: 2.15; color: var(--color-text-body); }

@media (max-width: 768px) {
  .card-grid2 { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .info-box { padding: 24px 22px; }
}

/* =========================================================
   料金表
   ========================================================= */
.fee-table {
  width: 100%;
  /* separate + border-spacing 0 にしないと border-radius が効かない（角が丸まらない） */
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 36px;
  font-size: 15.5px;
  /* 白背景のセクションに置くため、外枠は濃いめの罫色にして境界をはっきりさせる */
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  overflow: hidden;
  min-width: 640px;
}
.fee-table thead tr { background: var(--color-secondary); color: #fff; }
.fee-table th { padding: 16px 20px; font-weight: 700; text-align: right; }
.fee-table th:first-child { padding: 16px 24px; font-weight: 500; text-align: left; }
.fee-table th.is-latest { background: var(--color-secondary-dark); }
.fee-table tbody td { border-bottom: 1px solid var(--color-border); }
.fee-table tbody tr:last-child td { border-bottom: 0; }
.fee-table td { padding: 18px 20px; text-align: right; color: var(--color-text-nav); }
.fee-table td:first-child { padding: 18px 24px; text-align: left; }
.fee-table td.is-latest { color: var(--color-primary-dark); font-weight: 700; background: var(--color-bg-soft); }
.fee-note { margin: 16px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--color-text-sub); }

/* 問診票などの PDF を配る小さな案内帯。表やカードの下に置く前提。 */
.dl-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 22px;
  background: var(--color-bg-card);
  border-radius: 20px;
  padding: 24px 28px;
}
.dl-note__text { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.7; color: var(--color-secondary); }
.dl-note__sub { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--color-text-sub); }
.dl-note .btn { gap: 10px; padding: 14px 28px; font-size: 15px; background: #fff; }
/* 既定を白地にしている分、ホバーの塗りも明示しないと
   .btn--outline-brown:hover の白文字だけが効いて読めなくなる */
.dl-note .btn:hover { background: var(--color-secondary); color: #fff; }
.dl-note__icon { width: 18px; height: 18px; flex: none; }
@media (max-width: 768px) {
  .dl-note { gap: 16px; padding: 22px 20px; text-align: center; }
  .dl-note .btn { width: 100%; }
}
.fee-table--tight { margin-top: 20px; }
.fee-table--wide { min-width: 760px; }
.fee-table--center th,
.fee-table--center td { text-align: center; }
.fee-table--center th:first-child,
.fee-table--center td:first-child { text-align: left; }

/* 比較表（帯状疱疹ワクチンなど）：行の交互色と縦罫で視線を追いやすくする */
.fee-table--compare thead th { border-left: 1px solid rgba(255, 255, 255, .22); }
.fee-table--compare thead th:first-child { border-left: 0; }
/* 2つのワクチン列は同じ扱いなので、ヘッダーにも濃淡を付けない */

.fee-table--compare tbody td { border-left: 1px solid var(--color-border); }
.fee-table--compare tbody td:first-child { border-left: 0; }

/* 1列目（項目名）：ベージュで見出し列であることを示す */
.fee-table--compare tbody td:first-child {
  background: var(--color-bg-card-alt);
  color: var(--color-text-heading);
  font-weight: 700;
  white-space: nowrap;
}
.fee-table--compare tbody tr:nth-child(even) td:first-child { background: var(--color-bg-card); }

/* 2列目・3列目（水痘生ワクチン／シングリックス）：2つのワクチン列は同色にする。
   列の区別は縦罫とヘッダーに任せ、白とごく淡いベージュの行交互色だけ残す */
.fee-table--compare tbody td:nth-child(2),
.fee-table--compare tbody td:nth-child(3) { background: #FFFFFF; }
.fee-table--compare tbody tr:nth-child(even) td:nth-child(2),
.fee-table--compare tbody tr:nth-child(even) td:nth-child(3) { background: #FBF7F1; }

/* =========================================================
   健康診断（コース比較表・オプション・注意事項）
   ========================================================= */
.card-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.card-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 36px; }
.card-grid--tight { margin-top: 20px; }
.card-grid1 { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
.info-box--wide { padding: 32px 34px; }
.info-box__title--md { font-size: 19px; }
.info-box__title--primary { color: var(--color-primary-dark); }
.tag-pill--sm { font-size: 13px; padding: 6px 14px; }
.info-box__text--lg { font-size: 15px; line-height: 2.05; color: var(--color-text-body-2); }
.bullet-list--lg { font-size: 15px; line-height: 1.95; gap: 14px; }
.bullet-list--dark { color: var(--color-text-nav); line-height: 1.8; gap: 12px; margin-top: 18px; }
.intro-grid { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start; margin-top: 40px; }
.intro-grid__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 15px;
  line-height: 2.15;
  color: var(--color-text-body);
  text-wrap: pretty;
}
.intro-grid__text p { margin: 0; }
.intro-grid__text b { color: var(--color-primary-dark); }

@media (max-width: 1024px) {
  .intro-grid { grid-template-columns: 1fr; gap: 28px; }
}
.info-box__value { margin-top: 10px; font-size: 22px; font-weight: 700; color: var(--color-primary-dark); }
a.info-box { display: block; transition: transform .2s, box-shadow .2s; }
a.info-box:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(107, 91, 58, .13); }
.info-box__title--lg { font-size: 22px; }
.info-box__more { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--color-primary-dark); }
.info-box .btn { margin-top: 18px; padding: 13px 28px; font-size: 14px; }
/* カードの中に置くPDFリンク（ノロの消毒液の作り方）。カード幅が狭いので
   全幅に伸ばし、文字を小さくして1行に収める */
.info-box .btn--dl { width: 100%; gap: 8px; padding: 12px 14px; font-size: 13.5px; }
.btn__dl-icon { width: 17px; height: 17px; flex: none; }
.info-box__text .em { color: var(--color-primary-dark); font-weight: 700; }

/* ホバーでカード全面がアクセント色に変わるリンクカード。ワクチンの .vax-card__fill、
   診療案内の .related-card と同じ「下からせり上がる」動き・同じ尺に揃えている。 */
.info-box--fill { position: relative; overflow: hidden; }
.info-box--fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary-surface);
  transform: translateY(101%);
  transition: transform .45s var(--ease-std);
}
.info-box--fill:hover::before { transform: translateY(0); }
/* せり上がる面より前に出す。色の変化は .related-card の文字と同じ配分。 */
.info-box--fill > * { position: relative; z-index: 1; transition: color .3s; }
.info-box--fill .info-box__text .em { transition: color .3s; }
.info-box--fill:hover .info-box__label { color: rgba(255, 255, 255, .75); }
.info-box--fill:hover .info-box__title { color: #fff; }
.info-box--fill:hover .info-box__text { color: rgba(255, 255, 255, .92); }
.info-box--fill:hover .info-box__text .em { color: #fff; }
.info-box--fill:hover .info-box__more { color: #fff; }

/* リンクではない情報カードのホバー。面を塗ると押せるものに見えてしまうので、
   .cat-card と同じ持ち上げ量・同じ影にとどめ、枠と見出しの色だけを起こす。
   触る端末では :hover が指を離したあとも残るので、ポインタのある環境だけに効かせる */
.info-box--lift {
  transition: transform .25s var(--ease-std), box-shadow .25s var(--ease-std), border-color .25s var(--ease-std);
}
@media (hover: hover) {
  .info-box--lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(107, 91, 58, .14);
    border-color: var(--color-secondary);
  }
  .info-box--lift .info-box__title { transition: color .25s var(--ease-std); }
  .info-box--lift:hover .info-box__title { color: var(--color-primary-dark); }
}

.course-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 24px;
  font-size: 15px;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  overflow: hidden;
  min-width: 1000px;
}
.course-table thead tr { background: var(--color-secondary); color: #fff; }
/* 帯の色はセル自身にも持たせる。行の背景を透かしたままだと、ホバーで
   セルが単独のレイヤーに切り出された瞬間に表の白地が出て、白文字が消える。 */
.course-table thead th { background-color: var(--color-secondary); }
.course-table th { padding: 15px 12px; font-weight: 700; text-align: center; white-space: nowrap; }
.course-table th:first-child { padding: 15px 24px; font-weight: 500; text-align: left; }
/* コース名の下に料金を改行して置く。濃い見出し帯の上なので、
   料金は白を少し落として主従をつける。 */
.course-th__name { display: block; }
.course-th__fee { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .82); }
.course-table tbody td { border-bottom: 1px solid var(--color-border); }
.course-table tbody tr:last-child td { border-bottom: 0; }
.course-table tbody tr.is-group { background: var(--color-bg-soft); }
.course-table td { padding: 14px 12px; text-align: center; }
.course-table td:first-child { padding: 14px 24px; text-align: left; color: var(--color-text-body); font-weight: 500; }
/* 「あり」は葉のマーク。JPG は透過を持てないので地を純白で書き出し、
   乗算で敷いて背景に畳む。白は乗算すると背後の色そのままになるため、
   白い行でも .is-group のベージュ行でも、ホバーで色の付いた列でも
   四角く浮かない。
   乗算は img ではなく span 側に置く。img に置くと、ホバーで span に掛かる
   opacity が合成を隔離して白地が残る。span に置けば「不透明度を適用して
   から背後と乗算」の順になり、白は畳まれたまま葉だけが沈む。 */
.check-yes { display: inline-flex; vertical-align: middle; mix-blend-mode: multiply; }
.check-yes img { display: block; width: auto; height: 20px; }
.check-no { color: var(--color-status-closed); font-size: 17px; }

/* コース列ホバー：乗せた列だけを残して他のコース列を沈める。
   検査項目の列（1列目）は行の見出しなので常に読める明るさのまま。
   沈めるのはセルではなく中の span。セルに opacity を掛けると帯の茶色まで
   薄まり、白文字が読めなくなる。
   ポインタのある環境限定。:has() 非対応ブラウザではルールごと無視され、
   これまでどおりの静的な表になる。 */
@media (hover: hover) {
  .course-table :is(th, td):nth-child(n+2) { transition: background-color .25s ease; }
  .course-table :is(th, td):nth-child(n+2) > span { transition: opacity .25s ease; }

  .course-table:has(:is(th, td):nth-child(n+2):hover) :is(th, td):nth-child(n+2) > span {
    opacity: .38;
  }
  .course-table:has(:is(th, td):nth-child(2):hover) td:nth-child(2),
  .course-table:has(:is(th, td):nth-child(3):hover) td:nth-child(3),
  .course-table:has(:is(th, td):nth-child(4):hover) td:nth-child(4),
  .course-table:has(:is(th, td):nth-child(5):hover) td:nth-child(5),
  .course-table:has(:is(th, td):nth-child(6):hover) td:nth-child(6) {
    background-color: rgba(226, 88, 63, .07);
  }
  .course-table:has(:is(th, td):nth-child(2):hover) th:nth-child(2),
  .course-table:has(:is(th, td):nth-child(3):hover) th:nth-child(3),
  .course-table:has(:is(th, td):nth-child(4):hover) th:nth-child(4),
  .course-table:has(:is(th, td):nth-child(5):hover) th:nth-child(5),
  .course-table:has(:is(th, td):nth-child(6):hover) th:nth-child(6) {
    /* 濃い茶色に白を薄く混ぜた不透明色。半透明を重ねると上と同じ穴にはまる。 */
    background-color: color-mix(in srgb, #fff 15%, var(--color-secondary));
  }
  .course-table:has(:is(th, td):nth-child(2):hover) :is(th, td):nth-child(2) > span,
  .course-table:has(:is(th, td):nth-child(3):hover) :is(th, td):nth-child(3) > span,
  .course-table:has(:is(th, td):nth-child(4):hover) :is(th, td):nth-child(4) > span,
  .course-table:has(:is(th, td):nth-child(5):hover) :is(th, td):nth-child(5) > span,
  .course-table:has(:is(th, td):nth-child(6):hover) :is(th, td):nth-child(6) > span {
    opacity: 1;
  }
}

.option-card { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: 24px 26px; }
.option-card__title { font-size: 16px; font-weight: 700; color: var(--color-secondary); }
.option-card__price { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--color-primary-dark); }
.option-card__note { margin: 8px 0 0; font-size: 14px; line-height: 1.9; color: var(--color-text-body-3); }

@media (max-width: 1024px) {
  .card-grid3, .card-grid4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
  .card-grid3, .card-grid4 { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .course-table { font-size: 14px; min-width: 860px; }
  .option-card { padding: 20px 20px; }
}

/* =========================================================
   予約バンド（濃色・電話＋WEB予約）
   ========================================================= */
.reserve-band {
  margin-top: 44px;
  border-radius: 24px;
  padding: 44px 48px;
  background: var(--color-secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.reserve-band__title { font-size: 22px; font-weight: 700; }
.reserve-band__text { margin: 10px 0 0; font-size: 15px; line-height: 1.95; color: rgba(255, 255, 255, .84); }
/* 文章側は伸縮、電話・予約は固有幅。こうしないと長い文章が1行を占めて
   ボタン列が下に落ち、右側が大きく空いてしまう */
.reserve-band > div:first-child { flex: 1 1 440px; min-width: 0; }
.reserve-band__actions { display: flex; align-items: stretch; flex: 0 0 auto; gap: 14px; flex-wrap: wrap; }
.reserve-band__tel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  padding: 16px 26px;
  text-align: center;
}
.reserve-band__tel-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--color-text-sub); }
.reserve-band__tel-num { display: block; margin-top: 2px; font-size: 26px; font-weight: 700; color: var(--color-primary-dark); }
/* 電話カードと同じ高さ・同じ角丸にして、2つで1組に見えるようにする */
.reserve-band .btn { padding: 16px 32px; border-radius: 16px; font-size: 17px; background: #fff; color: var(--color-primary-dark); }
.reserve-band .btn:hover { background: var(--color-bg-card-mute); color: var(--color-primary-dark); }

@media (max-width: 768px) {
  .reserve-band { padding: 30px 24px; gap: 24px; }
  .reserve-band__title { font-size: 19px; }
  .reserve-band__actions { width: 100%; }
  .reserve-band__tel { flex: 1 1 100%; }
  .reserve-band .btn { flex: 1 1 100%; }
}

/* =========================================================
   検査の特徴 — 横型アコーディオン（胃カメラ・大腸カメラ検査ページ）
   PCでは縦長トラックの中でセクションを画面に固定し、スクロールした量に
   比例して次のパネルが右から出てくる（上に戻せば右へ引っ込む）。
   開いていないパネルはスリットに畳まれ、本文は「折り返さずに切れる」
   ことで開いたときとの落差を出す。
   開いたパネルの幅は6枚ぶんの残りなので JS が実測して --acc-open に
   入れる（初期値はフォールバック）。
   スマホ・タブレットでは固定せず、タップで開く縦型になる。
   html に js クラスが無いとき（JS無効・モーション低減）は
   全パネルが開いた縦並びになる。
   ========================================================= */
.acc-track { position: relative; }
.acc__hint {
  display: none;
  margin: 30px 0 0;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--color-text-sub);
}
.js .acc__hint { display: block; }
.acc__hint-pc { display: none; }
@media (min-width: 1025px) {
  .acc__hint-pc { display: inline; }
  .acc__hint-sp { display: none; }
}

.acc {
  --acc-collapsed: 112px;
  --acc-pad: 40px;
  /* 畳んだパネルの背景に埋もれない縦の仕切り線の色 */
  --acc-line: rgba(107, 91, 58, .38);
  display: flex;
  flex-direction: column;
  margin-top: 18px;
}
/* パネルが少ないページ（胃カメラの4枚など）用。畳んだ幅を広げて、
   開いたパネルの1行が長くなりすぎないようにする */
.acc--slit-wide { --acc-collapsed: 168px; }
/* 畳んだパネルの地は開いた面より濃いため、同じ文字色だと 4.5:1 に届かない。
   畳んでいる間だけ一段濃い文字色にする（開くと通常の色に戻る） */
.acc__panel { background: var(--color-bg-card-mute); }
.acc__panel:not(.is-active) .acc__no,
.acc__panel:not(.is-active) .acc__tags,
.acc__panel:not(.is-active) .acc__meta-v { color: var(--color-text-body); }
.acc__panel + .acc__panel { margin-top: 10px; }
.acc__panel.is-active { background: var(--color-bg-card); }
.acc__head { margin: 0; }
.acc__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.acc__btn:focus-visible { outline: 3px solid var(--color-primary-dark); outline-offset: -3px; }
.acc__no {
  padding: 22px var(--acc-pad) 16px;
  font-family: var(--font-en);
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--color-text-sub);
}
.acc__no::after { content: ":"; }
.acc__panel.is-active .acc__no { color: var(--color-primary-dark); }
.acc__ttl {
  position: relative;
  display: block;
  width: 100%;
  padding: 26px var(--acc-pad) 0;
  border-top: 3px solid var(--color-secondary);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--color-text-heading);
}
.acc__ttl::after {
  content: "";
  position: absolute;
  right: var(--acc-pad);
  top: 38px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity .4s var(--ease-std);
}
.acc__panel.is-active .acc__ttl {
  color: var(--color-secondary-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}
.acc__panel.is-active .acc__ttl::after { opacity: 1; }
.acc__inner { padding: 20px var(--acc-pad) 30px; }
.acc__tags {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-text-sub);
}
.acc__text {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 2.05;
  color: var(--color-text-body-3);
}
.acc__text b { font-weight: 700; color: var(--color-text-heading); }

/* 特徴パネルの写真。本文の下に横帯で敷き、下端に短い説明を重ねる。
   PC では高さを vh 基準で決め打ちにする。パネルは固定表示（100vh）の
   中に収める必要があり、写真の比率に高さを任せると下が切れてしまうため */
.acc__fig {
  position: relative;
  margin: 24px 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-placeholder);
}
.acc__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 横長に切り取ると被写体が上下に外れる写真だけ、
     HTML 側の --fig-pos で見せたい高さに寄せる */
  object-position: var(--fig-pos, center);
}
.acc__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 10px;
  background: linear-gradient(to top, rgba(42, 34, 20, .70), rgba(42, 34, 20, .30) 55%, transparent);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: .06em;
}
.acc__tel {
  display: inline-block;
  margin-top: 20px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-primary-dark);
}
.acc__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 28px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-text-body-2);
}
.acc__meta-k { color: var(--color-text-sub); }
.acc__count { margin-left: auto; color: var(--color-text-sub); white-space: nowrap; }
.acc__mark { display: none; }

/* ---- PC：スクロールで進む横型アコーディオン ---- */
@media (min-width: 1025px) {
  /* 100vh は固定表示のぶん、残りが送りしろ。1枚あたり 52vh 送る。
     ここを伸ばすほど、同じホイール量でパネルがゆっくり開く。
     --acc-steps（パネルの枚数）は JS が入れる */
  .js .acc-track { height: calc(100vh + var(--acc-steps, 6) * 52vh); }
  /* 上の余白は固定表示側（.acc-sticky の padding-top）にまとめる。
     セクション側にも余白があると、目次との間が空きすぎる */
  .js .sec--acc { padding-top: 0; }
  .js .acc-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* 中央寄せだと画面が高いほど見出しが下がり、目次との間が広く空く。
       上端から一定の位置に置いて、目次のすぐ下に見出しが来るようにする */
    justify-content: flex-start;
    padding-top: calc(var(--header-h) + 52px);
  }
  .js .acc { flex-direction: row; align-items: stretch; }
  /* 幅と地色はスクロール量から JS が毎フレーム引く。--acc-p は開き具合
     （0＝スリット／1＝開ききり）で、JS がパネルごとに入れる。
     transition を持たせると指を止めたあとも動き続けて連動が崩れるので、
     ここでは付けない。JS が入れる前のひと瞬間のために、
     開いた1枚ぶんは CSS 側にも残しておく */
  .js .acc__panel {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: var(--acc-collapsed);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-bg-card) calc(var(--acc-p, 0) * 100%), var(--color-bg-card-mute));
  }
  .js .acc__panel + .acc__panel { margin-top: 0; }
  .js .acc__panel.is-active { width: var(--acc-open, 720px); --acc-p: 1; }
  /* 畳まれても本文が折り返さないよう、中身は「開いたときの幅」で固定する */
  .js .acc__ttl,
  .js .acc__inner { width: var(--acc-open, 720px); }
  .js .acc__body { flex: 1 1 auto; display: flex; }
  /* 本文は左、写真は右の2段組み。行は上から
     タグ／本文／電話（無いパネルでは高さ0）／余白／POINT 行。
     4行目を 1fr にして余りをここに集め、POINT 行を下端に、
     写真をその上まで縦いっぱいに伸ばす。
     flex-shrink を切らないと、畳んだパネルの中で本文が折り返してしまう */
  .js .acc__inner {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--acc-fig-w, 44%);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 26px;
    width: var(--acc-open, 720px);
  }
  .js .acc__tags { grid-area: 1 / 1; }
  .js .acc__text { grid-area: 2 / 1; }
  .js .acc__tel { grid-area: 3 / 1; }
  .js .acc__meta { grid-area: 5 / 1 / 6 / 3; margin-top: 0; padding-top: 28px; }
  /* 写真は右段いっぱい（POINT 行の上まで）。高さは段組みが決めるので
     比率での決め打ちは外し、min-height でカードの高さの下限を持たせる。
     画面の高さに合わせて写真も伸び縮みさせるため vh で書く */
  .js .acc__fig {
    grid-area: 1 / 2 / 5 / 3;
    aspect-ratio: auto;
    height: auto;
    min-height: clamp(260px, 34vh, 360px);
    margin: 0;
  }
  /* 畳んだパネルは背景色が同じで境目が消えてしまうので、
     パネル1枚ごとに全高の仕切り線（茶＋白のハイライト）を引く。
     幅のアニメーションに影響しないよう、レイアウトを取らない疑似要素で描く */
  .js .acc__panel + .acc__panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to right, var(--acc-line) 0 1px, rgba(255, 255, 255, .6) 1px);
    z-index: 2;
  }
  /* 畳まれたパネルは、カーソルを乗せると開いた面の色に近づけて「押せる」と分かるようにする */
  .js .acc__panel:not(.is-active):hover { background: var(--color-bg-card-alt); }
  /* 畳まれたパネルの電話番号にタブが入って中身がずれるのを防ぐ */
  .js .acc__panel:not(.is-active) .acc__tel { visibility: hidden; }
  .js .acc__ttl { font-size: 34px; }
  /* 見出し脇の点も、開き具合に合わせて濃くなる */
  .js .acc__panel .acc__ttl::after { opacity: var(--acc-p, 0); transition: none; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .js .acc { --acc-collapsed: 88px; --acc-pad: 30px; }
  .js .acc--slit-wide { --acc-collapsed: 128px; }
  .js .acc__ttl { font-size: 28px; }
  .js .acc__text { font-size: 17px; }
  .js .acc__inner { --acc-fig-w: 40%; column-gap: 22px; }
}
/* 画面の高さが足りないノートPCでは、固定表示に収まるまで詰める */
@media (min-width: 1025px) and (max-height: 820px) {
  .js .acc-sticky { padding-top: calc(var(--header-h) + 24px); }
  .js .acc-sticky .sec__title { font-size: 26px; }
  .js .acc-sticky .acc__hint { margin-top: 18px; font-size: 13px; }
  .js .acc { margin-top: 12px; }
  .js .acc__no { padding-top: 16px; padding-bottom: 12px; font-size: 17px; }
  .js .acc__ttl { padding-top: 20px; font-size: 28px; }
  .js .acc__tags { font-size: 13px; }
  .js .acc__text { margin-top: 14px; font-size: 16px; line-height: 1.9; }
  .js .acc__tel { margin-top: 14px; font-size: 26px; }
  .js .acc__inner { padding-top: 16px; padding-bottom: 22px; }
  .js .acc__meta { padding-top: 18px; }
}

/* ---- タブレット・スマホ：縦に開くアコーディオン ---- */
@media (max-width: 1024px) {
  .js .acc__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s var(--ease-std);
  }
  .js .acc__panel.is-active .acc__body { grid-template-rows: 1fr; }
  /* border-box では高さ0でも padding のぶんだけ残ってしまうので、閉じている間は上下0にする */
  .js .acc__inner {
    overflow: hidden;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: padding .5s var(--ease-std);
  }
  .js .acc__panel.is-active .acc__inner { padding-top: 20px; padding-bottom: 28px; }
  .acc__ttl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .acc__ttl::after { display: none; }
  /* ＋／− の目印は開閉できるとき（js あり）だけ出す */
  .js .acc__mark { position: relative; display: block; flex: 0 0 auto; width: 18px; height: 18px; }
  .acc__mark::before,
  .acc__mark::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 2px;
    background: var(--color-secondary);
    transition: transform .4s var(--ease-std);
  }
  .acc__mark::after { transform: rotate(90deg); }
  .acc__panel.is-active .acc__mark::after { transform: rotate(0deg); }
  .acc__no { padding-bottom: 10px; }
}
@media (max-width: 768px) {
  .acc { --acc-pad: 22px; }
  .acc__ttl { font-size: 22px; }
  .acc__no { font-size: 17px; padding-top: 18px; }
  .acc__text { font-size: 16px; line-height: 1.95; }
  .acc__tel { font-size: 26px; }
  .acc__meta { flex-wrap: wrap; gap: 8px 12px; font-size: 12.5px; }
}

/* =========================================================
   ワクチン一覧（予防接種ページ）
   3×2 のグリッドは動かさず、カーソルを合わせた1枚だけが
   拡大して浮き上がり、残りは少し縮んで淡くなる。
   光はカーソルを追い、上端のアクセント罫が左から右へ伸びる。
   JS 無効・モーション低減時は、素のカード並びのまま。
   ========================================================= */
.vax {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.vax-card:nth-child(1) { --i: 0; }
.vax-card:nth-child(2) { --i: 1; }
.vax-card:nth-child(3) { --i: 2; }
.vax-card:nth-child(4) { --i: 3; }
.vax-card:nth-child(5) { --i: 4; }
.vax-card:nth-child(6) { --i: 5; }

.vax-card {
  /* --vax は罫・光・透かし用の明るいアクセント、
     --vax-ink は白抜き文字やリンクに使う、白地で 4.5:1 を満たす濃い方 */
  --vax: var(--color-primary);
  --vax-ink: var(--color-primary-dark);
  --vax-soft: rgba(226, 88, 63, .10);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 30px 32px 32px;
}
.vax-card--flu    { --vax: #E2583F; --vax-ink: #C03A24; --vax-soft: rgba(226, 88, 63, .16); }
.vax-card--pneumo { --vax: #D8891C; --vax-ink: #A66710; --vax-soft: rgba(216, 137, 28, .18); }
.vax-card--zoster { --vax: #B4623C; --vax-ink: #90492A; --vax-soft: rgba(180, 98, 60, .18); }
.vax-card--hepb   { --vax: #BE4B2E; --vax-ink: #9E3A22; --vax-soft: rgba(190, 75, 46, .16); }
.vax-card--mr     { --vax: #A8823C; --vax-ink: #806018; --vax-soft: rgba(168, 130, 60, .19); }
.vax-card--other  { --vax: #7A6642; --vax-ink: #6B5B3A; --vax-soft: rgba(122, 102, 66, .19); }

/* 上端のアクセント罫。既定は淡く、ホバーで濃い罫が左から右へ重なる */
.vax-card::before,
.vax-card__bar {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--vax);
}
.vax-card::before { z-index: 2; opacity: .38; }
.vax-card__bar { z-index: 3; }

/* アクセント色の淡い光 */
.vax-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(58% 62% at 12% 0%, var(--vax-soft), transparent 70%);
  pointer-events: none;
}

/* ホバーでカード全面を塗りつぶす面。既定は card の下に隠しておく。
   せり上がりは PC のみ（下の @media 参照） */
.vax-card__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--vax);
  transform: translateY(101%);
  transition: transform .45s var(--ease-std);
  pointer-events: none;
}
.vax-card__no,
.vax-card__name,
.vax-card__text,
.vax-card__more { transition: color .3s; }
/* ホバーのときだけ右下の角から顔を出す大きな連番。
   ホバーのない画面では出しどころがないので、PC だけの飾り */
.vax-card__ghost { display: none; }

.vax-card__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.vax-card__no {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .16em;
  color: var(--vax-ink);
}
.vax-card__name { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--color-secondary); }

.vax-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.vax-card .tags { gap: 10px; margin-top: 20px; }
.vax-card .tag-pill {
  font-size: 14.5px;
  padding: 8px 17px;
  transition: background-color .3s, border-color .3s, color .3s;
}
.vax-card__text {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-body-3);
  line-break: strict;
  text-wrap: pretty;
}
.vax-card__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 22px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--vax-ink);
}
.vax-card__more::before { content: "→"; }
.vax-card__more:hover { color: var(--vax-ink); text-decoration: underline; text-underline-offset: 4px; }
.tag-pill--price { background: var(--vax-ink); border-color: transparent; color: #fff; font-weight: 700; }

/* ---- スクロールで6枚が左上から順に立ち上がる ---- */
.js .vax-card { opacity: 0; }
.js .vax.is-in .vax-card {
  animation: vax-rise .85s var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* 出そろったらアニメーションを外す。付けたままだとホバーの
   transform が fill-mode に上書きされて効かない */
.js .vax.is-settled .vax-card { animation: none; opacity: 1; }
@keyframes vax-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* ---- PC：カーソルを合わせた1枚だけを持ち上げる ---- */
@media (min-width: 1025px) {
  .js .vax-card {
    transition:
      transform .5s var(--ease-out-expo),
      opacity .45s var(--ease-std),
      filter .45s var(--ease-std),
      box-shadow .5s var(--ease-std),
      border-color .5s var(--ease-std);
  }
  /* 手前の1枚以外は、下に沈める。縮小・退色・彩度落とし・
     わずかな沈み込みを重ねて、奥行きの差をはっきりさせる */
  .js .vax:hover .vax-card,
  .js .vax:focus-within .vax-card {
    transform: translateY(6px) scale(.952);
    opacity: .44;
    filter: saturate(.62);
  }
  .js .vax .vax-card:hover,
  .js .vax .vax-card:focus-within {
    z-index: 3;
    transform: translateY(-7px) scale(1.06);
    opacity: 1;
    filter: none;
    border-color: var(--vax);
    box-shadow: 0 34px 66px rgba(107, 91, 58, .2);
  }

  /* カード全面がアクセント色に変わる。診療案内の .related-card と同じ
     「下からせり上がる」動き・同じ尺に揃えている。色は上端の罫と同じ --vax */
  .vax-card:hover .vax-card__fill,
  .vax-card:focus-within .vax-card__fill { transform: translateY(0); }

  /* せり上がる面より前にある文字は、面が来たら白へ */
  .vax-card:hover .vax-card__no,
  .vax-card:focus-within .vax-card__no,
  .vax-card:hover .vax-card__name,
  .vax-card:focus-within .vax-card__name,
  .vax-card:hover .vax-card__text,
  .vax-card:focus-within .vax-card__text,
  .vax-card:hover .vax-card__more,
  .vax-card:focus-within .vax-card__more { color: #fff; }
  .vax-card:hover .tag-pill,
  .vax-card:focus-within .tag-pill {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
  }
  /* 料金だけは白地のまま残して、色面の中でも一番に目が行くようにする */
  .vax-card:hover .tag-pill--price,
  .vax-card:focus-within .tag-pill--price { background: #fff; border-color: transparent; color: var(--vax-ink); }
  /* 予約の要否は色面の上では色を持てないので、罫を強めて他のタグとの差を残す */
  .vax-card:hover .tag-pill--book,
  .vax-card:focus-within .tag-pill--book,
  .vax-card:hover .tag-pill--walkin,
  .vax-card:focus-within .tag-pill--walkin { border-color: rgba(255, 255, 255, .78); }

  /* 上端の罫が左から右へ */
  .js .vax-card__bar {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .75s var(--ease-out-expo);
  }
  .js .vax-card:hover .vax-card__bar,
  .js .vax-card:focus-within .vax-card__bar { transform: scaleX(1); }

  /* 光はカーソルを追う。--mx / --my は JS が入れる */
  .js .vax-card::after {
    background: radial-gradient(300px circle at var(--mx, 12%) var(--my, 0%), var(--vax-soft), transparent 72%);
    opacity: 0;
    transition: opacity .5s var(--ease-std);
  }
  .js .vax-card:hover::after,
  .js .vax-card:focus-within::after { opacity: 1; }

  /* Cormorant Garamond はオールドスタイル数字で 3・4・5 などが
     ベースラインより下に出る。行の高さを確保して、下を切らない */
  .js .vax-card__ghost {
    display: block;
    position: absolute;
    right: 20px;
    bottom: 8px;
    z-index: 0;
    font-family: var(--font-en);
    font-size: 112px;
    line-height: 1.24;
    letter-spacing: .04em;
    /* せり上がった色面の上に出るので、--vax では沈んで見えない */
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease-std), transform .7s var(--ease-out-expo);
  }
  .js .vax-card:hover .vax-card__ghost,
  .js .vax-card:focus-within .vax-card__ghost { opacity: .16; transform: none; }

  /* タグが左から順にわずかに浮く */
  .js .vax-card .tag-pill {
    transition: transform .4s var(--ease-out-expo), background-color .3s, border-color .3s, color .3s;
  }
  .js .vax-card:hover .tag-pill,
  .js .vax-card:focus-within .tag-pill { transform: translateY(-3px); }
  .js .vax-card:hover .tag-pill:nth-child(2) { transition-delay: .04s; }
  .js .vax-card:hover .tag-pill:nth-child(3) { transition-delay: .08s; }
  .js .vax-card:hover .tag-pill:nth-child(4) { transition-delay: .12s; }
  .js .vax-card:hover .tag-pill:nth-child(5) { transition-delay: .16s; }

  .js .vax-card__more::before { transition: transform .45s var(--ease-out-expo); }
  .js .vax-card:hover .vax-card__more::before,
  .js .vax-card:focus-within .vax-card__more::before { transform: translateX(5px); }
}

@media (max-width: 1024px) {
  .vax { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .vax-card { padding: 28px 26px 30px; }
}
@media (max-width: 768px) {
  .vax { margin-top: 28px; grid-template-columns: 1fr; gap: 16px; }
  .vax-card { padding: 24px 22px 26px; }
  .vax-card__name { font-size: 19px; }
}

/* ---- 接種前の確認事項（予防接種ページ） ---- */
.vax-note {
  margin-top: 44px;
  background: var(--color-bg-card);
  border-radius: 22px;
  padding: 42px 46px;
}
.vax-note__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--color-accent-orange-dark);
}
.vax-note__title {
  margin: 12px 0 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-secondary-dark);
}
.vax-note__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 52px;
  margin: 34px 0 0;
}
.vax-note__item { min-width: 0; }
.vax-note__term {
  display: inline-block;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--color-primary);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-secondary-dark);
}
.vax-note__desc {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.95;
  color: var(--color-text-body);
  line-break: strict;
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .vax-note { padding: 34px 32px; }
  .vax-note__title { font-size: 22px; }
  .vax-note__list { gap: 28px 36px; }
  .vax-note__desc { font-size: 16.5px; }
}
@media (max-width: 768px) {
  .vax-note { margin-top: 32px; padding: 28px 22px; border-radius: 18px; }
  .vax-note__title { font-size: 20px; }
  .vax-note__list { grid-template-columns: 1fr; gap: 26px; margin-top: 26px; }
  .vax-note__term { font-size: 16px; }
  .vax-note__desc { font-size: 16px; line-height: 1.9; }
}

/* 動きを減らす設定のときは流さない。横スクロールとしては最後まで見られる */
@media (prefers-reduced-motion: reduce) {
  .marquee.is-running { overflow-x: auto; }
  .marquee.is-running .marquee__track { animation: none; }
  .gallery-card__btn:hover .gallery-card__photo { transform: none; }
  .info-box--lift, .info-box--lift:hover { transform: none; transition: box-shadow .25s, border-color .25s; }
  .lightbox, .lightbox__img { transition: none; }
}