@charset "UTF-8";
/* ==========================================================================
   三ツ池整形外科 TOP ／ PC・SP 確認用プレビュー
   1) Base   : SP（基準375px、〜767px）
   2) Tablet : 768px〜1023px
   3) PC     : 1024px〜（top-full.png 1400px カンプの実測値。1400px未満は等倍縮小）
   値は DESIGN_SYSTEM.md に準拠。
   ========================================================================== */

:root {
  /* Color（DESIGN_SYSTEM.md 1-2） */
  --color-primary: #1f74a0;
  --color-primary-dark: #185f85;
  --color-secondary: #025aa5;
  --color-label: #265bb0;
  --color-heading-accent: #0f73aa;
  --color-navy: #1e1e57;
  --color-tel: #1c65a4;
  --color-tel-icon: #11479a;
  --color-accent: #a8352d; /* 元 #c31a10 から明度・彩度を少し落とした */

  --color-bg: #ffffff;
  --color-bg-light: #e6eff4;
  --color-bg-info: #eff8fd;
  --color-bg-soft: #f9f9f9;
  --color-bg-gray: #f6f6f6;
  --color-bg-stripe: #f4f4f4;

  --color-heading: #333333;
  --color-text: #111111;
  --color-text-sub: #666666;
  --color-text-mute: #8c8c8c;

  --color-line: #cadce7;
  --color-line-light: #dfe5ea;
  --color-line-gray: #cccccc;

  --color-tag-yellow: #fffede;
  --color-tag-pink: #ffe5ec;
  --color-tag-blue: #ddf2ff;

  /* Font */
  /* 丸ゴシック見出し＝「砧 丸丸ゴシックCSr StdN」（Adobe Fonts kit: wvs5tmm）
     ウエイトは Regular のみ。この変数を使う箇所は必ず font-weight: 400（500/600/700 は擬似ボールドになるので指定しない）。
     maru-maru-gothic-clr-stdn は別書体なので使わない。 */
  --font-heading: "maru-maru-gothic-csr-stdn", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Barlow", "Roboto Condensed", sans-serif;
  --font-tel: "Roboto Condensed", "Barlow", sans-serif;
  --font-num: "Inter", "Helvetica Neue", sans-serif;

  /* Layout（SP） */
  --vw: min(1vw, 4.3px);            /* SP用の可変単位。430px幅で頭打ち */
  --gutter: 20px;                    /* 標準コンテナの左右余白 */
  --gutter-wide: 16px;               /* カードグリッド（ワイドコンテナ）の左右余白 */
  --section-py: 64px;
  --radius-sm: 8px;
  --radius-md: 16px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.is-menu-open { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, table { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.u-sp { display: inline; }
.u-nowrap { display: inline-block; }
.u-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Layout ---------- */
.l-frame {
  position: relative;
  background: var(--color-bg);
  overflow-x: clip;
}
.l-inner { padding-inline: var(--gutter); }
.l-inner--wide { padding-inline: var(--gutter-wide); }
.p-block .l-inner--wide { padding-inline: var(--gutter); }
.l-section { padding-block: var(--section-py); background: var(--color-bg); }
.l-section--blue { background: var(--color-bg-light); }
[id] { scroll-margin-top: 84px; }

/* ---------- 1. Header ---------- */
.l-header {
  position: fixed;
  z-index: 30;
  top: 32px;
  left: 50%;
  width: calc(100% - 24px);
  height: 58px;
  padding: 0 4px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: var(--radius-sm);
  transform: translateX(-50%);
  transition: top .3s ease, box-shadow .3s ease;
}
.l-header.is-scrolled,
.is-menu-open .l-header { top: 10px; }
.l-header.is-scrolled { box-shadow: 0 2px 12px rgba(31, 116, 160, .1); }
.l-header__logo img { width: 126px; }
.l-header__nav { display: none; }
.l-header__actions { display: flex; align-items: center; }
.l-header__tel span { display: none; }
.l-header__tel,
.l-header__menu {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}
.l-header__tel { color: var(--color-tel); }
.l-header__tel svg { width: 24px; height: 24px; }
.l-header__menu { position: relative; }
.l-header__menu span {
  position: absolute;
  left: 12px;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-tel);
  transition: transform .3s ease, opacity .2s ease;
}
.l-header__menu span:nth-child(1) { top: 16px; }
.l-header__menu span:nth-child(2) { top: 23px; }
.l-header__menu span:nth-child(3) { top: 30px; }
.l-header__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.l-header__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.l-header__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu */
.c-gnav {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 50%;
  width: 100%;
  padding: 96px var(--gutter) 40px;
  background: var(--color-bg-light);
  transform: translateX(-50%);
  overflow-y: auto;
}
.c-gnav[hidden] { display: none; }
.c-gnav__list { margin-bottom: 32px; border-top: 1px solid var(--color-line); }
.c-gnav__list a {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: .08em;
  color: var(--color-heading);
}
/* 診療案内の下に各診療ページ（PCのメガメニューと同じ6項目・同じ順） */
.c-gnav__sub { padding: 4px 0 12px 16px; border-bottom: 1px solid var(--color-line); }
.c-gnav__list .c-gnav__sub a {
  min-height: 44px;
  border-bottom: 0;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--color-text);
}
.c-gnav__list li:has(> .c-gnav__sub) > a { border-bottom: 0; }

/* ---------- 2. Main visual ---------- */
.p-mv {
  position: relative; /* z-index は付けない：バッジを固定ヘッダーより手前に出すため、MVで重なりグループを作らない */
  padding: 232px var(--gutter) calc(27 * var(--vw) + 44px);
  color: #fff;
}
.p-mv__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 50%;
}
/* MVスライド：写真2枚をクロスフェード（切り替えは script.js） */
.p-mv__img { opacity: 0; transition: opacity 1.8s ease; }
.p-mv__img.is-active { opacity: 1; }
.p-mv__img--exterior { object-position: 62% 50%; filter: brightness(.74); } /* SP：入口と看板が入る位置。明るい外観なので暗くしてキャッチの視認性を1枚目に揃える */
.p-mv::before { /* 白文字を読ませるための薄い暗幕（PC版と同程度） */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(30, 45, 60, .22);
}
.p-mv__address {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .06em;
}
.p-mv__address svg { width: 9px; height: 12px; color: var(--color-label); flex: none; }

.p-mv__badge {
  position: absolute;
  z-index: 31; /* 固定ヘッダー（30）より手前 */
  top: 100px;
  right: 14px;
  width: 116px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(31, 116, 160, .88); /* --color-primary #1f74a0 を88%で透過（MVの丸と統一） */
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
.is-menu-open .p-mv__badge { z-index: 2; } /* SPメニュー（20）を開いている間はメニューの下へ */
.p-mv__badge::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
}
.p-mv__badge-top { font-size: 10px; letter-spacing: .04em; }
.p-mv__badge-time { margin: 2px 0 1px; font-family: var(--font-tel); font-size: 27px; font-weight: 700; line-height: 1; color: #bcdae8; }
.p-mv__badge-main { font-size: 12px; }
.p-mv__badge-sub { margin-top: 4px; font-size: 9px; font-weight: 400; }

.p-mv__catch {
  font-family: var(--font-heading);
  font-size: min(calc(6.9 * var(--vw)), 29px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .03em;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0, 20, 40, .25);
}
.p-mv__catch-sub { display: block; margin-bottom: 2px; font-size: .62em; letter-spacing: .1em; }
.p-mv__body { position: relative; z-index: 2; }
.p-mv__text {
  margin-top: 14px;
  font-size: min(calc(3.3 * var(--vw)), 14px);
  line-height: 2.1;
  letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(0, 20, 40, .3);
}

.p-mv__circles {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(3.6 * var(--vw));
  padding-inline: calc(4.6 * var(--vw));
}
.c-circle {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1.1 * var(--vw));
  border-radius: 50%;
  color: #fff;
  text-align: center;
}
.c-circle::before { /* 外側の細いリング */
  content: "";
  position: absolute;
  inset: calc(-1.3 * var(--vw));
  border: 1px solid #8fd0f5;
  border-radius: 50%;
}
/* オンマウス：丸が薄い水色、文字・アイコンはロゴの紺（#044e74）に反転 */
.c-circle { transition: background-color .3s ease, color .3s ease; }
@media (hover: hover) {
  .c-circle:hover, .c-circle:focus-visible { background: var(--color-bg-light); color: #044e74; } /* 白だと眩しいのでサイト背景の薄い水色 #e6eff4 */
}
.c-circle--01 { background: rgba(18, 91, 154, .88); } /* #125b9a を88%で透過（一般整形外科の丸と同じ） */
.c-circle--02 { background: rgba(19, 108, 155, .88); } /* #136c9b */
.c-circle--03 { background: rgba(21, 94, 156, .88);}  /* #155e9c */
.c-circle__title { font-family: var(--font-heading); font-size: calc(3.15 * var(--vw)); line-height: 1.2; white-space: nowrap; }
.c-circle__icon { width: calc(9.1 * var(--vw)); height: calc(9.1 * var(--vw)); } /* アイコンはデザインPDFから書き出し（57pxの正方形枠） */
.c-circle__en { font-family: var(--font-en); font-size: calc(2.15 * var(--vw)); line-height: 1; letter-spacing: .02em; white-space: nowrap; }

/* ---------- Section head ---------- */
.c-section-head { margin-bottom: 30px; text-align: center; }
.c-label-en {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  color: var(--color-label);
}
.c-h2 {
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--color-heading);
}
.c-section-head__lead {
  margin-top: 14px;
  font-size: min(calc(3.45 * var(--vw)), 14px);
  line-height: 1.8;
  letter-spacing: .03em;
  color: var(--color-heading);
}
.c-h3 {
  font-family: var(--font-heading);
  font-size: min(calc(4.9 * var(--vw)), 21px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .05em;
  color: var(--color-heading);
}

/* ---------- Buttons ---------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 240px;
  min-height: 48px;
  padding: 6px 16px 7.5px 22px; /* 下を1.5px多く：もっと見ると同じ天地中央の補正 */
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;      /* 文字は「もっと見る」と同じ 13px・500・字間.06em */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .06em;
}
.c-btn svg { width: 19px; height: 19px; flex: none; }

.c-btn-more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 文字は左寄せ：c-btn と同じルール（文字は左から22px、矢印は右から16px） */
  width: 100%;
  max-width: 180px;
  min-height: 44px;
  margin-inline: auto;
  border-radius: 999px;
  background: var(--color-primary);
  padding-left: 22px;
  padding-bottom: 1.5px; /* 和文の字面が下に寄る分を補正して天地中央に */
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
}
.c-btn-more svg { position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; }

.c-btn-strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 132px;
  min-height: 44px;
  padding: 0 18px 0 26px;
  border-radius: 999px;
  background: var(--color-primary); /* もっと見ると同じ青 */
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
}
.c-btn-strong svg { width: 12px; height: 10px; }

/* ---------- 3. NEWS ---------- */
.p-info { padding-top: calc(var(--section-py) + 22px); } /* MV丸ボタンのはみ出し分 */
.p-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
}
.p-news__head .c-h2 { font-size: 28px; }
.p-news__head .c-btn-strong { margin-bottom: 4px; }

.c-news {
  padding: 10px 20px;
  background: #fff;
  border: 2px solid var(--color-line-light);
  border-radius: var(--radius-md);
}
.c-news a { display: block; padding: 14px 0; }
.c-news__meta { display: flex; align-items: center; gap: 12px; }
.c-news time { font-family: var(--font-num); font-size: 15px; line-height: 1; color: #1e6a8d; }
.c-pill {
  display: inline-grid;
  place-items: center;
  min-width: 68px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
}
.c-pill--important { background: var(--color-accent); }
.c-news__title { display: block; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--color-heading); }

/* ---------- 4. Tel / Hours / Map ---------- */
.p-info .p-clinic { margin-top: 36px; }

.c-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px 13px;
  background: #fff;
  border-radius: var(--radius-md);
}
.c-tel--border { background: var(--color-bg-soft); border: 1px solid var(--color-line-gray); }
.c-tel__label { font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; color: var(--color-navy); }
.c-tel__num {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tel);
  font-size: min(calc(8.8 * var(--vw)), 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em; /* 字間を詰める（.06em→.01em） */
  color: var(--color-text-sub);
  white-space: nowrap;
}
.c-tel__num svg { width: .8em; height: .8em; color: var(--color-tel-icon); flex: none; }

.c-hours { margin-top: 28px; }
.c-hours__title {
  margin-bottom: 8px;
  font-family: var(--font-body);  /* 太字のため砧(Rのみ)は使わない。カンプの書体は要確認 */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  color: var(--color-navy);
}
.c-hours__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-body);  /* 太字のため砧(Rのみ)は使わない。カンプの書体は要確認 */
  text-align: center;
}
.c-hours__table thead th {
  height: 44px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.c-hours__table thead th:first-child { width: 29%; border-radius: 10px 0 0 0; }
.c-hours__table thead th:last-child { width: 13%; border-radius: 0 10px 0 0; font-size: 12px; white-space: nowrap; }
.c-hours__table tbody th,
.c-hours__table tbody td { height: 46px; background: var(--color-bg-soft); }
.c-hours__table tbody tr:nth-child(2) > * { background: var(--color-bg-stripe); }
.c-hours__table tbody th {
  padding-left: 8px;
  font-size: min(calc(3.6 * var(--vw)), 14px);
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  color: var(--color-heading);
}
.c-hours__table i { display: block; margin: 0 auto; }
.c-hours__table .is-open { width: 15px; height: 15px; border-radius: 50%; background: var(--color-secondary); }
.c-hours__table .is-closed { width: 1px; height: 26px; background: var(--color-primary); transform: rotate(45deg); }
.c-hours__note {
  padding: 12px 12px 13px;
  background: #fff;
  border-top: 1px solid var(--color-bg-light);
  border-radius: 0 0 10px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #115891;
}
/* 白背景セクション（アクセス）用 */
.c-hours--gray .c-hours__note { background: var(--color-bg-soft); border-top: 0; }

.c-map {
  margin-top: 28px;
  border: 1px solid var(--color-line-gray);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-gray);
}
.c-map iframe { width: 100%; height: 250px; border: 0; }

/* ---------- Checklist ---------- */
.c-checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .03em;
}
.c-checklist li + li { margin-top: 8px; }
.c-checklist svg { position: absolute; left: 0; top: .42em; width: 15px; height: 12px; color: #2480b0; }
.c-checklist--sm li { padding-left: 16px; font-size: 12px; line-height: 1.5; letter-spacing: -.01em; }
.c-checklist--sm li + li { margin-top: 5px; }
.c-checklist--sm svg { top: .34em; width: 10px; height: 8px; }

/* ---------- 5. Medical / Card ---------- */
.p-medical__grid,
.p-feature__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 11px;
}
.c-card {
  display: flex;
  flex-direction: column;
  padding: 9px 9px 14px;
  background: var(--color-bg-soft);
  border: 2px solid var(--color-line-light);
  border-radius: var(--radius-md);
}
.c-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.c-card__title {
  display: grid;
  place-items: center;
  min-height: 2.9em;
  margin-top: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-heading);
  font-size: min(calc(3.7 * var(--vw)), 16px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .03em;
  text-align: center;
}
.c-card .c-checklist { margin: 11px 2px 14px; }
.c-card .c-btn-more { margin-top: auto; }

/* ---------- 6. Feature ---------- */
.c-feature {
  padding: 16px 10px 16px;
  background: #fff;
  border: 2px solid var(--color-line);
  border-radius: var(--radius-md);
}
.c-feature__img { width: auto; height: 82px; margin-inline: auto; }
.c-feature__title {
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: min(calc(3.55 * var(--vw)), 15.5px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
}
.c-feature__text { margin-top: 8px; font-size: 12px; line-height: 1.7; letter-spacing: .01em; }

/* ---------- 7–11. Large content block ---------- */
.p-block__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.p-block .c-h3 { margin-top: 26px; }
.p-block__text { margin-top: 11px; font-weight: 300; line-height: 1.85; }
.p-block__text p + p { margin-top: 1.4em; }
/* 縦のリズム（字面基準）：見出し→本文 約22px ／ 本文→ボックス・ボックス→ボタン 約28px */
.p-block .c-info-box { margin-top: 22px; }
.p-block .c-btn { margin-top: 28px; }

.c-info-box {
  margin-top: 24px;
  padding: 20px 20px 22px;
  background: var(--color-bg-info);
  border-radius: var(--radius-md);
}
.c-info-box__title {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--color-heading-accent);
}

/* ---------- 11. Equipment ---------- */
.p-equipment__list { display: grid; gap: 10px; margin-top: 21px; } /* 字面基準で本文→カード 28px（他の診療ブロックと同じ） */
.c-equip {
  display: grid;
  grid-template-columns: 62px 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 16px 18px 16px 16px;
  background: var(--color-bg-gray);
  border-radius: var(--radius-md);
}
.c-equip__icon { grid-row: 1 / 3; width: 46.5px; height: 46.5px; /* 75% */ object-fit: contain; }
.c-equip__title { align-self: end; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--color-heading-accent); }
.c-equip__text { align-self: start; margin-top: 4px; font-size: 14px; line-height: 1.6; }

/* ---------- 12. Column（横スワイプ） ---------- */
.p-column__slider {
  display: flex;
  gap: 14px;
  padding: 0 var(--gutter) 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.p-column__slider::-webkit-scrollbar { display: none; }
.c-card--column {
  flex: 0 0 78%;
  scroll-snap-align: start;
  padding: 12px 12px 20px;
  background: #fff;
}
.c-card__thumb { position: relative; }
.c-card--column .c-card__img { aspect-ratio: 20 / 9; border-radius: 12px; }
.c-tag {
  position: absolute;
  right: 6px;
  bottom: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .08em;
}
.c-tag--yellow { background: var(--color-tag-yellow); }
.c-tag--pink { background: var(--color-tag-pink); }
.c-tag--blue { background: var(--color-tag-blue); }
.c-card--column .c-card__title { min-height: 0; margin-top: 12px; padding-bottom: 12px; font-size: min(calc(4.7 * var(--vw)), 19px); letter-spacing: .08em; }
.c-card__text { margin: 12px 2px 18px; font-size: 14px; line-height: 2; letter-spacing: .06em; }

/* ---------- 13. Access ---------- */
.p-access__logo { width: 160px; margin-bottom: 18px; }
.p-access__address {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 32px;
  font-size: min(calc(3.7 * var(--vw)), 15px);
  line-height: 1.5;
  letter-spacing: .05em;
  white-space: nowrap;
}
.p-access__address svg { width: 11px; height: 14px; color: var(--color-label); flex: none; }
.p-access .c-map { margin-top: 10px; }

/* ---------- 14. Footer ---------- */
.l-footer {
  position: relative;
  padding: 64px 0 56px;
  background: var(--color-bg-gray);
}
.l-footer__logo { width: 160px; }
.l-footer__tagline {
  margin-top: 30px;
  font-family: var(--font-heading);
  font-size: min(calc(4.6 * var(--vw)), 19px);
  line-height: 1.8;
  letter-spacing: .18em;
  color: #222;
}
.l-footer__copy { margin-top: 34px; line-height: 1; }
.l-footer__copy small { font-family: var(--font-en); font-size: 11px; letter-spacing: .15em; color: var(--color-text-mute); }

.c-pagetop {
  position: absolute;
  top: -34px;
  right: 16px;
  width: 68px;
  height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .1em;
  text-align: center;
}
.c-pagetop svg { width: 10px; height: 13px; }

/* ---------- 小さい端末（〜359px） ---------- */
@media (max-width: 359px) {
  :root { --gutter: 16px; --gutter-wide: 12px; }
  .l-header__logo img { width: 112px; }
  .p-mv__address { font-size: 10px; letter-spacing: .02em; }
  .p-mv__badge { width: 104px; }
  .p-mv__badge-time { font-size: 24px; }
  .c-h2 { font-size: 23px; }
  .c-card { padding-inline: 7px; }
  .c-feature { padding-inline: 7px; }
  .c-feature__text { font-size: 11.5px; }
  .c-btn { min-width: 0; width: 100%; gap: 10px; font-size: 13px; }
}


/* ==========================================================================
   Tablet 768px〜1023px（SP構成のまま、列数と余白を広げる）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --gutter: 40px; --gutter-wide: 40px; --section-py: 84px; }
  .l-header { width: calc(100% - 48px); height: 64px; padding-left: 20px; }
  .l-header__logo img { width: 140px; }
  .p-mv { padding: 250px var(--gutter) 190px; }
  .p-mv__address { right: 26px; font-size: 12px; }
  .p-mv__badge { top: 112px; right: 40px; width: 160px; }
  .p-mv__badge::before { inset: 7px; }
  .p-mv__badge-top { font-size: 13px; }
  .p-mv__badge-time { font-size: 36px; margin: 4px 0 3px; }
  .p-mv__badge-main { font-size: 16px; }
  .p-mv__badge-sub { font-size: 12px; margin-top: 6px; }
  .p-mv__catch { font-size: 40px; }
  .p-mv__text { font-size: 15px; }
  .p-mv__circles { grid-template-columns: repeat(3, 150px); justify-content: start; gap: 26px; padding-inline: var(--gutter); bottom: -30px; }
  .c-circle { gap: 6px; }
  .c-circle::before { inset: -8px; }
  .c-circle__title { font-size: 16px; }
  .c-circle__icon { width: 48px; height: 48px; }
  .c-circle__en { font-size: 10.5px; }
  .p-info { padding-top: calc(var(--section-py) + 30px); }
  .c-h2 { font-size: 32px; }
  .p-news__head .c-h2 { font-size: 34px; }
  .c-label-en { font-size: 17px; }
  .c-section-head { margin-bottom: 36px; }
  .c-section-head__lead { font-size: 15px; }
  .u-sp { display: none; }
  .c-news { padding: 16px 32px; }
  .c-news a { display: flex; align-items: center; gap: 20px; }
  .c-news__title { margin-top: 0; }
  .p-clinic { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
  .p-clinic .c-map { margin-top: 0; }
  .p-clinic .c-map iframe { height: 100%; min-height: 300px; }
  .p-clinic__side { display: flex; flex-direction: column; justify-content: flex-end; }
  .p-clinic__side .c-map { flex: 0 0 320px; margin-top: 10px; }
  .p-access__address { margin-top: 0; font-size: 14px; }
  .c-tel__num { font-size: 34px; }
  .c-hours__table tbody th { font-size: 14px; }
  .p-medical__grid, .p-feature__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
  .c-card__title { font-size: 16px; }
  .c-feature__title { font-size: 15px; }
  .c-h3 { font-size: 24px; }
  .p-block__img { aspect-ratio: 16 / 9; }
  .c-info-box .c-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
  .c-info-box .c-checklist li + li { margin-top: 0; }
  .p-equipment__list { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .c-card--column { flex-basis: 42%; }
  .c-card--column .c-card__title { font-size: 18px; }
  .l-footer__tagline { font-size: 20px; }
}

@media (min-width: 768px) {
  /* 設備カード：PCと同じ縦型（アイコン上・テキスト下） */
  .c-equip { display: block; padding: 20px 20px 24px; }
  .c-equip__icon { width: 67.5px; height: 66px; margin-inline: auto; } /* 75% */
  .c-equip__title { display: grid; place-items: center; min-height: 2.5em; margin-top: 14px; font-size: 18px; line-height: 1.25; text-align: center; }
  .c-equip__text { margin-top: 10px; font-size: 15px; line-height: 1.5; }
}

/* ==========================================================================
   PC 1024px〜
   calc(N * var(--u)) = カンプ(1400px)上の N px。1400px未満の画面では比率を保って縮小する。
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --u: min(calc(100vw / 1400), 1px); }
  body { font-size: max(12px, calc(15 * var(--u))); }
  .u-sp { display: none; }
  [id] { scroll-margin-top: calc(110 * var(--u)); }

  .l-inner { width: calc(1200 * var(--u)); margin-inline: auto; padding-inline: 0; }
  .l-inner--wide, .p-block .l-inner--wide { width: calc(1329 * var(--u)); padding-inline: 0; }
  .l-section { padding-block: calc(102 * var(--u)) calc(101 * var(--u)); }

  /* Header */
  .l-header { top: calc(38 * var(--u)); width: calc(1200 * var(--u)); height: calc(80 * var(--u)); padding: 0 calc(27.5 * var(--u)) 0 calc(30 * var(--u)); } /* 右端の「1」の字面から枠までを、左の「三」の字面までと同じ 31 に */
  .l-header.is-scrolled { top: calc(12 * var(--u)); }
  .l-header__logo img { width: calc(172 * var(--u)); }
  .l-header__nav { display: block; margin-left: auto; }
  .l-header__nav ul { display: flex; gap: calc(48 * var(--u)); }
  .l-header__nav a { position: relative; display: block; padding-block: calc(12 * var(--u)); font-size: max(12px, calc(16 * var(--u))); line-height: 1.4; letter-spacing: 0; color: var(--color-text); transition: color .2s ease; }
  .l-header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(6 * var(--u)); height: 2px; background: var(--color-primary); transform: scaleX(0); transition: transform .2s ease; }
  .l-header__nav a:hover { color: var(--color-primary); }
  .l-header__nav a:hover::after { transform: scaleX(1); }
  .l-header__actions { margin-left: calc(71 * var(--u)); }
  .l-header__tel { width: auto; height: auto; display: flex; align-items: center; gap: calc(6 * var(--u)); }
  .l-header__tel svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .l-header__tel span { display: block; font-family: var(--font-tel); font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: .035em; color: var(--color-text-sub); white-space: nowrap; } /* 番号はグレー、アイコンは青（下の電話ボックスと同じ配色） */
  .l-header__tel svg { color: var(--color-tel-icon); }
  .l-header__menu { display: none; }
  .c-gnav { display: none !important; }

  /* MV */
  .p-mv { height: calc(769 * var(--u)); padding: 0; }
  .p-mv__inner { position: relative; width: calc(1200 * var(--u)); height: 100%; margin-inline: auto; }
  .p-mv__img { object-position: 50% 50%; }
  .p-mv__img--exterior { object-position: 50% 50%; filter: brightness(.66); } /* PCは暗幕が薄いぶん強めに */
  .p-mv::before { background: rgba(30, 45, 60, .14); }
  .p-mv__address { top: calc(14 * var(--u)); right: 0; gap: calc(6 * var(--u)); font-size: max(12px, calc(14 * var(--u))); letter-spacing: .08em; }
  .p-mv__address svg { width: calc(11 * var(--u)); height: calc(15 * var(--u)); }
  .p-mv__badge { top: calc(103 * var(--u)); right: 0; width: calc(225 * var(--u)); }
  .p-mv__badge::before { inset: calc(9 * var(--u)); }
  .p-mv__badge-top { font-size: calc(16 * var(--u)); letter-spacing: .02em; }
  .p-mv__badge-time { margin: calc(8 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(50 * var(--u)); }
  .p-mv__badge-main { font-size: calc(20 * var(--u)); }
  .p-mv__badge-sub { margin-top: calc(12 * var(--u)); font-size: calc(15 * var(--u)); }
  .p-mv__body { position: absolute; left: calc(13 * var(--u)); top: calc(280 * var(--u)); }
  .p-mv__catch { font-size: calc(48 * var(--u)); letter-spacing: .04em; }
  .p-mv__catch-sub { margin-bottom: calc(1 * var(--u)); font-size: calc(28 * var(--u)); letter-spacing: .07em; }
  .p-mv__text { margin-top: calc(6 * var(--u)); font-size: max(12px, calc(15 * var(--u))); line-height: 2.2; letter-spacing: 0; }
  .p-mv__circles { left: 0; right: auto; top: calc(620 * var(--u)); bottom: auto; display: flex; gap: calc(30 * var(--u)); padding: 0; }
  .p-mv__circles li { width: calc(180 * var(--u)); }
  .c-circle { gap: calc(7 * var(--u)); padding-bottom: calc(8 * var(--u)); }
  .c-circle::before { inset: calc(-10 * var(--u)); }
  .c-circle__title { font-size: calc(18 * var(--u)); }
  .c-circle__icon { width: calc(57 * var(--u)); height: calc(57 * var(--u)); }
  .c-circle__en { margin-top: calc(6 * var(--u)); font-size: calc(12 * var(--u)); }

  /* Section head */
  .c-section-head { margin-bottom: calc(41 * var(--u)); }
  .c-label-en { font-size: calc(22 * var(--u)); letter-spacing: .15em; }
  .c-h2 { margin-top: calc(6 * var(--u)); font-size: calc(44 * var(--u)); letter-spacing: .02em; }
  .c-section-head__lead { margin-top: calc(13 * var(--u)); font-size: max(12px, calc(15 * var(--u))); letter-spacing: .05em; }
  #medical .c-section-head { margin-bottom: calc(25 * var(--u)); }
  #feature .c-section-head { margin-bottom: calc(48 * var(--u)); }
  #column .c-section-head { margin-bottom: calc(54 * var(--u)); }

  /* NEWS */
  .p-info { padding-block: calc(72 * var(--u)) calc(100 * var(--u)); }
  .p-news { display: flex; align-items: center; gap: calc(81 * var(--u)); }
  .p-news__head { flex: none; width: calc(180 * var(--u)); flex-direction: column; align-items: center; margin: 0; }
  .p-news__heading { text-align: center; }
  .p-news__head .c-h2 { margin-top: calc(8 * var(--u)); font-size: calc(44 * var(--u)); white-space: nowrap; }
  .p-news__head .c-btn-strong { margin: calc(25 * var(--u)) 0 0; }
  .c-btn-strong { position: relative; width: calc(180 * var(--u)); min-width: 0; min-height: 0; height: calc(45 * var(--u)); padding: 0 calc(10 * var(--u)) 0 0; font-size: max(12px, calc(16 * var(--u))); transition: background-color .2s ease; }
  .c-btn-strong:hover { background: var(--color-primary-dark); }
  .c-btn-strong svg { position: absolute; right: calc(20 * var(--u)); top: 50%; width: calc(12 * var(--u)); height: calc(10 * var(--u)); margin-top: calc(-5 * var(--u)); }
  .c-news { flex: 1; padding: calc(28 * var(--u)) calc(51 * var(--u)); border-radius: calc(20 * var(--u)); }
  .c-news a { display: flex; align-items: center; height: calc(74 * var(--u)); padding: 0; }
  .c-news a:hover .c-news__title { color: var(--color-primary); }
  .c-news__meta { gap: calc(31 * var(--u)); }
  .c-news time { font-size: calc(19 * var(--u)); }
  .c-pill { min-width: 0; width: calc(83 * var(--u)); height: calc(34 * var(--u)); padding: 0; font-size: max(11px, calc(13 * var(--u))); }
  .c-news__title { margin: 0 0 0 calc(25 * var(--u)); font-size: max(12px, calc(17 * var(--u))); }

  /* Tel / Hours / Map */
  .p-clinic { display: grid; grid-template-columns: calc(550 * var(--u)) calc(592 * var(--u)); gap: calc(58 * var(--u)); } /* 左端をヘッダー・他ブロックと同じ位置（左10の段差を解消）。右カラムを10広げて右端も維持 */
  .p-info .p-clinic { margin-top: calc(51 * var(--u)); }
  .c-tel { flex-direction: row; justify-content: space-between; gap: calc(33 * var(--u)); height: calc(74 * var(--u)); padding: calc(2.5 * var(--u)) calc(37 * var(--u)) 0 calc(40 * var(--u)); border-radius: calc(20 * var(--u)); } /* 字面基準：左「ご」・右「1」とも枠から42、アイコンと数字を枠の天地中央に */
  .c-tel__label { font-size: max(12px, calc(16 * var(--u))); }
  .c-tel__num { gap: calc(6 * var(--u)); font-size: calc(40 * var(--u)); letter-spacing: .01em; }
  .c-hours { margin-top: calc(26 * var(--u)); }
  .c-hours__title { margin-bottom: calc(6 * var(--u)); font-size: calc(18 * var(--u)); }
  .c-hours__table thead th { height: calc(50 * var(--u)); font-size: calc(18 * var(--u)); }
  .c-hours__table thead th:first-child { width: calc(147 * var(--u)); border-radius: calc(10 * var(--u)) 0 0 0; }
  .c-hours__table thead th:last-child { width: calc(103 * var(--u)); padding-right: calc(24 * var(--u)); border-radius: 0 calc(10 * var(--u)) 0 0; font-size: calc(18 * var(--u)); }
  .c-hours__table tbody th, .c-hours__table tbody td { height: calc(51 * var(--u)); }
  .c-hours__table tbody td:last-child { padding-right: calc(24 * var(--u)); }
  .c-hours__table tbody th { padding-left: calc(15 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; }
  .c-hours__table .is-open { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .c-hours__table .is-closed { height: calc(38 * var(--u)); }
  .c-hours__note { display: flex; align-items: center; height: calc(50 * var(--u)); padding: 0 calc(20 * var(--u)); border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u)); font-size: max(12px, calc(15 * var(--u))); }
  .c-map { margin-top: 0; border-radius: calc(20 * var(--u)); }
  .c-map iframe { height: 100%; min-height: calc(336 * var(--u)); }

  /* Buttons */
  .c-btn { gap: calc(16 * var(--u)); min-width: calc(260 * var(--u)); min-height: 0; height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u)) 1.5px calc(20 * var(--u)); font-size: max(12px, calc(13 * var(--u))); transition: background-color .2s ease; }
  .c-btn--auto { min-width: 0; }
  .c-btn--sm { min-width: calc(230 * var(--u)); }
  .c-btn svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); transition: transform .2s ease; }
  .c-btn:hover, .c-btn-more:hover { background: var(--color-primary-dark); }
  .c-btn:hover svg, .c-btn-more:hover svg { transform: translateX(calc(4 * var(--u))); }
  .c-btn-more { width: calc(180 * var(--u)); max-width: none; min-height: 0; height: calc(40 * var(--u)); padding-left: calc(20 * var(--u)); padding-bottom: 1.5px; font-size: max(12px, calc(13 * var(--u))); transition: background-color .2s ease; } /* c-btn と同じ：文字は左から20、矢印は右から14 */
  .c-btn-more svg { right: calc(14 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-top: calc(-9 * var(--u)); transition: transform .2s ease; }

  /* Checklist */
  .c-checklist li { padding-left: calc(33 * var(--u)); font-size: max(12px, calc(17 * var(--u))); line-height: calc(34 * var(--u)); letter-spacing: 0; }
  .c-checklist li + li { margin-top: 0; }
  .c-checklist svg { top: calc(10 * var(--u)); width: calc(17 * var(--u)); height: calc(13 * var(--u)); }
  .c-checklist--sm li { padding-left: calc(43 * var(--u)); font-size: max(12px, calc(17 * var(--u))); line-height: calc(34 * var(--u)); letter-spacing: .09em; }
  .c-checklist--sm li + li { margin-top: 0; }
  .c-checklist--sm svg { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(17 * var(--u)); height: calc(13 * var(--u)); }

  /* Medical / Card */
  .p-medical__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(33 * var(--u)) calc(35 * var(--u)); }
  .c-card { padding: calc(17 * var(--u)) calc(27 * var(--u)) calc(26 * var(--u)); border-radius: calc(20 * var(--u)); }
  .c-card__img { aspect-ratio: 360 / 162; border-radius: calc(16 * var(--u)); }
  .c-card__title { display: block; min-height: 0; margin-top: calc(22 * var(--u)); padding-bottom: calc(20 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.4; letter-spacing: .24em; white-space: nowrap; }
  .c-card .c-checklist { margin: calc(19 * var(--u)) 0 calc(19 * var(--u)); }

  /* Feature */
  .p-feature__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(44 * var(--u)) calc(35 * var(--u)); }
  .c-feature { padding: calc(17 * var(--u)) calc(26 * var(--u)) calc(31 * var(--u)); border-width: 3px; border-radius: calc(20 * var(--u)); }
  .c-feature__img { height: calc(150 * var(--u)); }
  .c-feature__title { margin-top: calc(13 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.46; letter-spacing: .195em; }
  .c-feature__text { margin-top: calc(14 * var(--u)); font-size: max(12px, calc(15 * var(--u))); font-weight: 300; line-height: 1.67; letter-spacing: .09em; }

  /* Large block */
  .p-block__cols { display: grid; grid-template-columns: calc(606 * var(--u)) calc(641 * var(--u)); gap: calc(51 * var(--u)); align-items: start; }
  .p-block__img { aspect-ratio: 606 / 555; border-radius: calc(20 * var(--u)); }
  .p-block__body { padding-top: calc(33 * var(--u)); }
  #equipment .p-block__cols { align-items: center; } /* 検査・医療設備：写真と右カラムを上下中央で揃える */
  #equipment .p-block__body { padding-top: 0; }
  .p-block .c-h3 { margin-top: 0; }
  .c-h3 { font-size: calc(32 * var(--u)); line-height: 1.375; letter-spacing: .035em; white-space: nowrap; }
  .p-block__text { margin-top: calc(11 * var(--u)); line-height: 1.67; }
  .p-block__text p + p { margin-top: 1.67em; }
  .c-info-box { margin-top: calc(27 * var(--u)); padding: calc(21 * var(--u)) calc(30 * var(--u)) calc(23 * var(--u)); border-radius: calc(20 * var(--u)); }
  .c-info-box__title { margin-bottom: calc(6 * var(--u)); font-size: calc(20 * var(--u)); }
  .c-info-box .c-checklist { display: grid; grid-template-columns: minmax(calc(267 * var(--u)), max-content) auto; }
  .c-info-box .c-checklist li { padding-right: calc(30 * var(--u)); white-space: nowrap; }
  .c-info-box .c-checklist li:nth-child(even) { padding-right: 0; }
  .p-block .c-info-box { margin-top: calc(25 * var(--u)); } /* 字面基準：見出し→本文 約22 ／ 本文→ボックス・ボックス→ボタン 約30 */
  .p-block .c-btn { margin-top: calc(30 * var(--u)); }

  /* Equipment */
  .p-equipment__list { grid-template-columns: repeat(3, calc(200 * var(--u))); gap: calc(20 * var(--u)); margin-top: calc(26 * var(--u)); } /* 本文→カード 30（字面基準） */
  .c-equip { min-height: calc(270 * var(--u)); padding: calc(20 * var(--u)) calc(21 * var(--u)) calc(16 * var(--u)); border-radius: calc(20 * var(--u)); }
  .c-equip__icon { width: calc(67.5 * var(--u)); height: calc(66 * var(--u)); } /* 75% */
  .c-equip__title { min-height: calc(50 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.25; }
  .c-equip__text { margin-top: calc(10 * var(--u)); font-size: max(12px, calc(17 * var(--u))); line-height: 1.41; }

  /* Column */
  .p-column__slider { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(35 * var(--u)); width: calc(1329 * var(--u)); margin-inline: auto; padding: 0; overflow: visible; }
  .c-card--column { padding: calc(17 * var(--u)) calc(27 * var(--u)) calc(26 * var(--u)); }
  .c-card--column .c-card__img { aspect-ratio: 360 / 162; border-radius: calc(16 * var(--u)); }
  .c-tag { right: calc(7 * var(--u)); bottom: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(20 * var(--u)); font-size: max(12px, calc(17 * var(--u))); letter-spacing: .06em; }
  .c-card--column .c-card__title { margin-top: calc(22 * var(--u)); padding-bottom: calc(20 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: .24em; }
  .c-card__text { margin: calc(18 * var(--u)) 0 calc(20 * var(--u)); font-size: max(12px, calc(15 * var(--u))); line-height: 2.27; letter-spacing: .2em; }

  /* Access */
  .p-access { padding-block: calc(64 * var(--u)) calc(100 * var(--u)); }
  .p-access__logo { width: calc(174 * var(--u)); margin-bottom: calc(20 * var(--u)); }
  .p-clinic__side { align-self: end; }
  .p-access__address { gap: calc(8 * var(--u)); margin: 0 0 calc(11 * var(--u)); font-size: max(12px, calc(16 * var(--u))); letter-spacing: .08em; }
  .p-access__address svg { width: calc(11 * var(--u)); height: calc(15 * var(--u)); }
  .p-access .c-hours { margin-top: calc(17 * var(--u)); }
  .p-access .c-map { margin-top: 0; }
  .p-access .c-map iframe { height: calc(354 * var(--u)); min-height: 0; }

  /* Footer */
  .l-footer { padding: 0; }
  .l-footer__inner { display: flex; align-items: center; height: calc(280 * var(--u)); }
  .l-footer__logo { width: calc(175 * var(--u)); }
  .l-footer__tagline { margin: 0 0 0 calc(257 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.67; letter-spacing: .075em; }
  .l-footer__copy { margin: 0 0 0 auto; }
  .l-footer__copy small { font-size: max(12px, calc(13 * var(--u))); }
  .c-pagetop { top: calc(-30 * var(--u)); right: calc(50% - calc(665 * var(--u))); width: calc(90 * var(--u)); height: calc(90 * var(--u)); gap: calc(4 * var(--u)); font-size: max(12px, calc(13 * var(--u))); transition: background-color .2s ease; }
  .c-pagetop:hover { background: var(--color-primary-dark); }
  .c-pagetop svg { width: calc(14 * var(--u)); height: calc(18 * var(--u)); }
}

/* ---------- タイトルセットの表示エフェクト（一般整形外科ページと共通） ----------
   ① 英字ラベルがブラーフェードイン → ② 見出し・リードがフェードイン。.js は <head> で付与、.is-in は script.js */
.js .c-section-head > .c-label-en,
.js .p-news__heading > .c-label-en { opacity: 0; filter: blur(10px); transition: opacity .9s ease, filter .9s ease; }
.js .c-section-head > .c-h2,
.js .c-section-head > .c-section-head__lead,
.js .p-news__heading > .c-h2 { opacity: 0; transition: opacity .9s ease .55s; }
.js .c-section-head.is-in > *,
.js .p-news__heading.is-in > * { opacity: 1; filter: none; }

/* ---------- MV 読み込み時の表示順：丸①→②→③（フェードイン）→ 受付バッジ（ブラーフェードイン） ---------- */
@keyframes mvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mvBlur { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
.p-mv__circles > li { animation: mvFade .8s ease both; }
.p-mv__circles > li:nth-child(1) { animation-delay: .3s; }
.p-mv__circles > li:nth-child(2) { animation-delay: .65s; }
.p-mv__circles > li:nth-child(3) { animation-delay: 1s; }
.p-mv__badge { animation: mvBlur 1s ease 1.45s both; }
@keyframes mvSlide { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.p-mv__body { animation: mvSlide 1s cubic-bezier(.22, .7, .2, 1) 2s both; } /* ⑤ キャッチ・本文：右から左へ30px */

/* ---------- 診療案内・特徴・医療機器・コラムのカード：カード①②③がフェードイン → 写真／イラスト①②③がブラーフェードイン ----------
   遅延（--d-card / --d-img）は画面に同時に入ったカードの並び順から script.js が設定 */
.js .p-medical__grid > .c-card,
.js .p-feature__grid > .c-feature,
.js .p-equipment__list > .c-equip,
.js .p-column__slider > .c-card { opacity: 0; transform: translateY(14px); transition: opacity .7s ease var(--d-card, 0s), transform .7s cubic-bezier(.22, .7, .2, 1) var(--d-card, 0s); }
.js .p-medical__grid > .c-card > .c-card__img,
.js .p-feature__grid > .c-feature > .c-feature__img,
.js .p-equipment__list > .c-equip > .c-equip__icon,
.js .p-column__slider > .c-card > .c-card__thumb { opacity: 0; filter: blur(10px); transition: opacity .9s ease var(--d-img, 0s), filter .9s ease var(--d-img, 0s); }
.js .p-medical__grid > .c-card.is-in,
.js .p-feature__grid > .c-feature.is-in,
.js .p-equipment__list > .c-equip.is-in,
.js .p-column__slider > .c-card.is-in { opacity: 1; transform: none; }
.js .p-medical__grid > .c-card.is-in > .c-card__img,
.js .p-feature__grid > .c-feature.is-in > .c-feature__img,
.js .p-equipment__list > .c-equip.is-in > .c-equip__icon,
.js .p-column__slider > .c-card.is-in > .c-card__thumb { opacity: 1; filter: none; }

/* ---------- 診療ブロックの写真（骨粗しょう症・ハイドロリリース・リハビリ・スポーツ障害）：フェードイン ---------- */
.js .p-block__img { opacity: 0; transform: scale(1.03); filter: blur(6px); transition: opacity 1.6s cubic-bezier(.25, .1, .25, 1), transform 2.2s cubic-bezier(.22, .7, .2, 1), filter 1.6s ease; }
.js .p-block__img.is-in { opacity: 1; transform: none; filter: none; } /* ふわっと：ゆっくり不透明に＋わずかに縮みながらピントが合う */

/* ---------- フッターのタグライン：若干長めのブラーフェードイン ---------- */
.js .l-footer__tagline { opacity: 0; filter: blur(12px); transition: opacity 1.8s ease, filter 1.8s ease; }
.js .l-footer__tagline.is-in { opacity: 1; filter: none; }

/* ---------- 文字詰め ----------
   和文：見出し・ボタン・キャッチはフォント内蔵のプロポーショナル詰め（palt）。本文はベタ組みのまま
   数字：電話番号・19:00 はプロポーショナル数字にしたうえで、HTML に書き込んだ <i class="u-kern"> でペアごとに補正
   （補正量は Roboto Condensed Bold の字形のサイドベアリングから算出。書体を変えたら再計算が必要） */
.c-h2, .c-h3, .c-card__title, .c-feature__title, .c-equip__title, .c-info-box__title, .c-hours__title,
.c-circle__title, .p-mv__catch, .l-footer__tagline,
.c-btn, .c-btn-more, .c-btn-strong,
.p-mv__address, .p-access__address, .o-fv__address {
  font-feature-settings: "palt";
  font-kerning: normal;
}
.c-label-en, .c-circle__en { font-kerning: normal; }
.c-tel__num, .l-header__tel span, .o-urgent__tel, .p-mv__badge-time, .o-cta__time { font-variant-numeric: proportional-nums; }
/* 診療時間（09:00–12:00）と住所の数字は Noto Sans JP の字形から補正量を算出（コロンの空き・1の空きを詰め、ダッシュの前後を均等に） */
.u-kern-run, .u-kern { font-style: normal; white-space: nowrap; margin-left: 0; }
/* 表など i { display:block } の指定に巻き込まれないよう固定 */
.u-kern-run { display: inline !important; }
.u-kern { display: inline-block !important; }

/* ---------- メガメニュー（PCのみ：「診療案内」にマウスを乗せると開く） ---------- */
.c-mega { display: none; }
@media (min-width: 1024px) {
  .c-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 12 * var(--u));
    display: grid;
    grid-template-columns: calc(250 * var(--u)) 1fr;
    gap: calc(44 * var(--u));
    padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
    background: #fff;
    border-radius: calc(20 * var(--u));
    box-shadow: 0 calc(16 * var(--u)) calc(48 * var(--u)) rgba(20, 60, 100, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-8 * var(--u)));
    transition: opacity .2s ease .12s, transform .2s ease .12s, visibility 0s .32s; /* 閉じるときは少し待つ（斜めにマウスを動かしても消えない） */
  }
  .c-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(14 * var(--u)); } /* ヘッダーとパネルの隙間をつなぐ */
  .l-header__mega-item:hover .c-mega,
  .l-header__mega-item:focus-within .c-mega,
  .l-header__mega-item.is-open .c-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .28s cubic-bezier(.22, .7, .2, 1), visibility 0s; }
  .l-header__mega-item:hover > .l-header__mega-trigger { color: var(--color-primary); }
  .l-header__mega-item:hover > .l-header__mega-trigger::after { transform: scaleX(1); }

  .c-mega__head { display: flex; flex-direction: column; padding-right: calc(36 * var(--u)); border-right: 1px solid var(--color-line); }
  .c-mega__head .c-label-en { font-size: calc(16 * var(--u)); }
  .c-mega__title { margin-top: calc(4 * var(--u)); font-family: var(--font-heading); font-size: calc(30 * var(--u)); font-weight: 400; line-height: 1.3; letter-spacing: .04em; color: var(--color-heading); font-feature-settings: "palt"; }
  .c-mega__lead { margin-top: calc(14 * var(--u)); font-size: max(12px, calc(13 * var(--u))); line-height: 1.85; color: var(--color-text-sub); }
  .l-header__nav .c-mega__links { display: block; margin-top: auto; padding-top: calc(20 * var(--u)); }
  .c-mega__links li + li { margin-top: calc(2 * var(--u)); }
  .l-header__nav .c-mega__links a { display: flex; align-items: center; justify-content: space-between; padding: calc(10 * var(--u)) 0; border-bottom: 1px solid var(--color-line); font-size: max(12px, calc(14 * var(--u))); color: var(--color-text); }
  .l-header__nav .c-mega__links a::after { content: ""; position: static; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; background: none; transform: rotate(45deg); transition: none; }
  .l-header__nav .c-mega__links a:hover { color: var(--color-primary); }

  .l-header__nav .c-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)) calc(24 * var(--u)); }
  .l-header__nav .c-mega__card { display: flex; flex-direction: column; padding: 0; color: var(--color-text); }
  .l-header__nav .c-mega__card::after { content: none; }
  .c-mega__img { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: calc(12 * var(--u)); background: var(--color-bg-light); }
  .c-mega__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, .7, .2, 1); }
  .c-mega__name { margin-top: calc(12 * var(--u)); font-family: var(--font-heading); font-size: calc(18 * var(--u)); font-weight: 400; line-height: 1.4; letter-spacing: .04em; font-feature-settings: "palt"; transition: color .2s ease; }
  .c-mega__en { margin-top: calc(3 * var(--u)); font-family: var(--font-en); font-size: calc(11 * var(--u)); letter-spacing: .12em; color: var(--color-label); }
  .c-mega__card:hover .c-mega__img img { transform: scale(1.05); }
  .c-mega__card:hover .c-mega__name, .c-mega__card[aria-current="page"] .c-mega__name { color: var(--color-primary); }

  .is-mega-open .p-mv__badge { z-index: 2; } /* メニューを開いている間は受付バッジをメニューの下へ */
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .c-mega { transition: none !important; }
  .js .l-footer__tagline { opacity: 1 !important; filter: none !important; }
  .js .p-block__img { opacity: 1 !important; }
  .js .p-medical__grid > *, .js .p-feature__grid > *, .js .p-equipment__list > *, .js .p-column__slider > *, .js .c-card__img, .js .c-card__thumb, .js .c-feature__img, .js .c-equip__icon { opacity: 1 !important; filter: none !important; transform: none !important; }
  .p-mv__circles > li, .p-mv__badge, .p-mv__body { animation: none !important; }
  .js .c-section-head > *, .js .p-news__heading > * { opacity: 1 !important; filter: none !important; }
}

/* 当院の特徴：カード全体を、当院の特徴ページの該当項目へのリンクにする */
.c-feature { position: relative; }
.c-feature__link { color: inherit; text-decoration: none; }
.c-feature__link::after { content: ""; position: absolute; inset: 0; }
.c-feature__link:hover, .c-feature__link:focus-visible { text-decoration: underline; text-underline-offset: .25em; }

/* =========================================================
   ヒアリング反映（2026-10）
   ========================================================= */
/* MV 3枚目（撮影写真に差し替え予定） */
.p-mv__img--room { object-position: 50% 40%; filter: brightness(.8); }

/* 骨粗しょう症の画像診断バナー */
.p-obanner { padding: 40px 0 0; background: var(--color-bg); }
.p-obanner__card { display: grid; overflow: hidden; border: 2px solid var(--color-line); border-radius: var(--radius-md); background: #fff; color: inherit; text-decoration: none; transition: border-color .25s ease; }
.p-obanner__img { display: block; overflow: hidden; aspect-ratio: 16 / 8; }
.p-obanner__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .6s ease; }
.p-obanner__body { display: block; padding: 22px 20px 24px; }
.p-obanner__label { display: block; font-family: var(--font-en); font-weight: 500; font-size: 13px; letter-spacing: .14em; color: var(--color-label); }
.p-obanner__title { display: block; margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.45; letter-spacing: .04em; color: var(--color-heading-accent); }
.p-obanner__text { display: block; margin-top: 12px; font-size: 14px; line-height: 1.9; }
.p-obanner__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 500; font-size: 14px; color: var(--color-primary); }
.p-obanner__more svg { width: 22px; height: 22px; transition: transform .3s ease; }
@media (hover: hover) {
  .p-obanner__card:hover { border-color: var(--color-primary); }
  .p-obanner__card:hover .p-obanner__img img { transform: scale(1.04); }
  .p-obanner__card:hover .p-obanner__more svg { transform: translateX(4px); }
}

/* 院長の専門性 */
.p-feature__cred { margin-top: 32px; padding: 20px; border-radius: var(--radius-md); background: #fff; text-align: center; }
.p-feature__cred-label { font-weight: 500; font-size: 14px; color: var(--color-label); letter-spacing: .08em; }
.p-feature__cred-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.p-feature__cred-list li { padding: 6px 16px; border: 1.5px solid var(--color-line); border-radius: 999px; font-weight: 500; font-size: 14px; color: var(--color-heading); }
.p-feature__cred-note { margin-top: 10px; font-size: 11px; color: var(--color-text-mute); }

/* ブロックのタグ（ハイドロリリース） */
.p-block__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.p-block__tags li { padding: 5px 14px; border-radius: 999px; background: #fff; font-weight: 500; font-size: 13px; color: var(--color-primary); }
.p-block__tags + .c-h3 { margin-top: 16px; }


@media (min-width: 768px) {
  .p-obanner { padding-top: 56px; }
  .p-obanner__card { grid-template-columns: 42% 1fr; align-items: center; }
  .p-obanner__img { aspect-ratio: auto; height: 100%; min-height: 240px; }
  .p-obanner__body { padding: 28px 36px; }
}
@media (min-width: 1024px) {
  .p-obanner { padding-top: calc(72 * var(--u)); }
  .p-obanner__card { width: calc(1200 * var(--u)); margin-inline: auto; grid-template-columns: calc(480 * var(--u)) 1fr; border-radius: calc(20 * var(--u)); }
  .p-obanner__img { min-height: calc(280 * var(--u)); }
  .p-obanner__body { padding: calc(36 * var(--u)) calc(56 * var(--u)); }
  .p-obanner__label { font-size: calc(14 * var(--u)); }
  .p-obanner__title { margin-top: calc(10 * var(--u)); font-size: calc(34 * var(--u)); }
  .p-obanner__text { margin-top: calc(16 * var(--u)); font-size: max(13px, calc(16 * var(--u))); }
  .p-obanner__more { margin-top: calc(22 * var(--u)); font-size: max(13px, calc(16 * var(--u))); }
  .p-feature__cred { width: calc(1000 * var(--u)); margin: calc(48 * var(--u)) auto 0; padding: calc(26 * var(--u)) calc(32 * var(--u)); border-radius: calc(20 * var(--u)); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(24 * var(--u)); }
  .p-feature__cred-label { font-size: max(13px, calc(16 * var(--u))); }
  .p-feature__cred-list { margin-top: 0; gap: calc(12 * var(--u)); }
  .p-feature__cred-list li { padding: calc(8 * var(--u)) calc(22 * var(--u)); font-size: max(13px, calc(16 * var(--u))); }
  .p-feature__cred-note { flex-basis: 100%; margin-top: 0; }
  .p-block__tags li { padding: calc(6 * var(--u)) calc(18 * var(--u)); font-size: max(12px, calc(15 * var(--u))); }
}
/* ハイドロリリース：タグが入って右カラムが長くなったので、写真と上下中央で揃える */
@media (min-width: 1024px) {
  #hydrorelease .p-block__cols { align-items: center; }
  #hydrorelease .p-block__body { padding-top: 0; }
  #hydrorelease .p-block__tags { margin-top: 0; }
}
@media (min-width: 1024px) {
  #rehabilitation .p-block__cols { align-items: center; }
  #rehabilitation .p-block__body { padding-top: 0; }
}

/* スマホ：画面下に固定する電話・アクセスボタン（PC・タブレットでは非表示） */
.c-spbar { display: none; }
@media (max-width: 767.98px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .c-spbar {
    position: fixed; z-index: 19; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1fr 96px; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -2px 12px rgba(16, 60, 100, .12);
  }
  .c-spbar a { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 999px; text-decoration: none; }
  .c-spbar__tel { gap: 8px; background: var(--color-primary); color: #fff; }
  .c-spbar__tel svg { width: 18px; height: 18px; }
  .c-spbar__label { font-weight: 700; font-size: 15px; letter-spacing: .06em; }
  .c-spbar__num { font-family: var(--font-tel); font-weight: 700; font-size: 16px; letter-spacing: .02em; opacity: .9; }
  .c-spbar__access { gap: 4px; border: 1.5px solid var(--color-primary); background: #fff; color: var(--color-primary); font-weight: 700; font-size: 13px; }
  .c-spbar__access svg { width: 11px; height: 14px; }
  .is-menu-open .c-spbar { display: none; }
}
/* SP：ハイドロのタグを写真から離す／白どうしで続くコラム→アクセスの余白を詰める */
@media (max-width: 1023.98px) {
  .p-block__img + .p-block__body .p-block__tags { margin-top: 22px; }
}
.p-column + .p-access { padding-top: 8px; }
@media (min-width: 1024px) { .p-column + .p-access { padding-top: 0; } }