:root {
  --color-primary: #3A7CA5;
  --color-primary-dark: #2A6F97;
  --color-keio-navy: #001764; /* サイト最上部のボーダーに使っている慶應カラーの紺 */
  --color-primary-light: #71A1BF;
  --color-sky-100: #EAF7FF;
  --color-sky-200: #DEF3FF;
  --color-sky-300: #C8E3F0;
  --color-cream: #FAF8F5;
  --color-cream-2: #F7F3EC;
  --color-accent: #F7AE3B;
  --color-accent-dark: #ED9100;
  --color-warm-green: #C3D375;
  --color-warm-pink: #F5CDD3;
  --color-warm-pink-dark: #E8A3AE;
  --color-teal: #4CA8A1;
  --color-text: #363636;
  --color-text-sub: #707070;
  --color-border: #E1DED6;
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  --font-serif: "Zen Old Mincho", serif;
  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: #fff;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
.pc-only { display: inline; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-primary-dark); color: #fff;
  padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 0; }

.section-inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; padding: 88px 24px; }

/* paper grain texture overlay */
.grain-overlay {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.medical-grid .medical-card:nth-child(2) { transition-delay: .08s; }
.medical-grid .medical-card:nth-child(3) { transition-delay: .16s; }
.medical-grid .medical-card:nth-child(4) { transition-delay: .08s; }
.medical-grid .medical-card:nth-child(5) { transition-delay: .16s; }
.medical-grid .medical-card:nth-child(6) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* section head: left-aligned JP heading + underline dash + EN eyebrow */
.section-head { margin: 0 0 40px; }
.section-head.center { text-align: center; }
.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  color: var(--color-text);
  margin: 0;
  letter-spacing: .03em;
}
.section-head::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #001764 50%, #CF001C 50%);
  margin: 14px 0 8px;
  transition: width .6s ease .15s;
}
.section-head.center::after { margin-left: auto; margin-right: auto; }
.section-head.is-visible::after,
.reveal.is-visible .section-head::after { width: 32px; }
@media (prefers-reduced-motion: reduce) {
  .section-head::after { width: 32px; transition: none; }
}
.section-eyebrow {
  font-size: 16px;
  letter-spacing: .18em;
  color: var(--color-text-sub);
  margin: 0;
}
.section-head.on-dark .section-title { color: #fff; }
.section-head.on-dark .section-eyebrow { color: var(--color-sky-200); }

.section-lead {
  text-align: center;
  color: var(--color-text-sub);
  font-size: 17px;
  margin: 0 0 48px;
}

.section-cta { display: flex; justify-content: center; margin-top: 40px; }

/* buttons: outline style */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-sky-100);
}
.btn-solid {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  flex-shrink: 0;
}
.btn-solid:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.icon-ext { width: 13px; height: 13px; flex-shrink: 0; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding-top: 15px;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 15px;
  background: linear-gradient(180deg, #001764 5px, #CF001C 5px 10px, #001764 10px);
}
.header-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo-link { flex-shrink: 0; }
.logo-img { height: 48px; width: auto; }
.global-nav > ul { display: flex; align-items: center; gap: 24px; }
.global-nav a { font-size: 15px; font-weight: 500; color: #153f55; white-space: nowrap; }
.global-nav a:hover { color: var(--color-primary); }
.nav-mobile-only { display: none; }

/* ドロップダウン（クリニック紹介） */
.has-sub { position: relative; }
.has-sub > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; position: relative; top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.sub-menu {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%); z-index: 120;
  min-width: 250px; padding: 8px; background: #fff;
  border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 14px 30px rgba(21,63,85,.16);
}
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.sub-menu a { display: block; padding: 11px 16px; border-radius: 8px; font-size: 15px; }
.sub-menu a:hover { background: var(--color-sky-100); color: var(--color-primary-dark); }
.has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu { display: flex; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--color-text); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header-contact { display: none; align-items: center; gap: 14px; flex-shrink: 0; margin-left: 8px; }
.header-tel { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.header-tel-number { font-size: 23px; font-weight: 700; color: var(--color-primary-dark); letter-spacing: .01em; }
.header-tel-number::before { content: "TEL "; font-size: 14px; font-weight: 500; color: var(--color-text-sub); }
.nav-mobile-contact { display: none; }

/* 予約ボタン（WEB予約／LINE）。PCは画面右上に固定表示（.float-reserve）、スマホはメニュー内に表示 */
.float-reserve { display: none; }
.reserve-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #fff; text-align: center; white-space: nowrap;
  font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: 0;
  transition: background .2s ease, transform .2s ease;
}
.reserve-btn svg { width: 30px; height: 30px; flex-shrink: 0; }
.reserve-web { background: var(--color-primary-dark); }
.reserve-web:hover { background: #1f5b7d; }
.reserve-line { background: #06C755; }
.reserve-line:hover { background: #05b34c; }
.float-reserve .reserve-btn {
  width: 204px; height: 140px; border: 3px solid #fff; border-radius: 20px; gap: 10px;
  font-size: 21px; box-shadow: 0 10px 26px rgba(0,0,0,.24);
}
.float-reserve .reserve-btn svg { width: 46px; height: 46px; }
.header-cta { display: none; }
.float-reserve .reserve-btn:hover { transform: translateY(-2px); }
.float-info { width: 204px; padding: 14px 12px 12px; box-sizing: border-box; border: 3px solid #fff; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 10px 26px rgba(0,0,0,.24); text-align: center; color: var(--color-primary-dark); }
.float-info p { margin: 0; }
.float-info-open span { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
.float-info-open strong { display: block; font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: .16em; text-indent: .16em; }
.float-info .float-info-access { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(42,111,151,.28); font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }

/* hero */
.hero {
  padding: 96px 24px 80px;
  text-align: center;
  background:
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
    url("../img/photo/hero-reception.webp") center 30%/cover no-repeat;
}
.hero-inner { max-width: 760px; margin: 0 auto; }
.hero-title { font-size: 34px; font-weight: 700; margin: 0 0 22px; color: var(--color-text); letter-spacing: .02em; }
.hero-catch { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--color-text); margin: 0 0 26px; line-height: 1.8; }

/* news */
.news { background: var(--color-cream); }
.news-list { border-top: 1px solid var(--color-border); margin: 0 0 48px; }
.news-list li {
  display: flex; align-items: center; gap: 20px; padding: 22px 0;
  border-bottom: 1px solid var(--color-border); font-size: 18px;
}
.news-date { color: var(--color-text); font-weight: 500; width: 96px; flex-shrink: 0; }
.news-badge {
  border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 16px;
  font-size: 16px; font-weight: 500; flex-shrink: 0; background: #fff;
}
.news-text { color: var(--color-text); }

/* about */
.about-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 56px; align-items: start; margin-bottom: 48px; }
.about-text p.about-quote {
  font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--color-text);
  line-height: 1.7; margin: 0 0 28px;
}
.about-text p { margin: 0 0 20px; font-size: 18px; color: var(--color-text); }
.about-text p:last-child { margin-bottom: 0; }
.about-photo-wrap { width: 185px; flex-shrink: 0; }
.about-photo { width: 185px; height: 247px; border-radius: 4px; overflow: hidden; background: var(--color-cream); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-name { margin: 14px 0 0; text-align: center; font-size: 16px; font-weight: 600; color: var(--color-text); letter-spacing: .04em; }
.stat-badge { margin-top: 16px; text-align: center; }
.stat-number { font-family: var(--font-serif); font-size: 34px; font-weight: 600; color: var(--color-primary-dark); }
.stat-plus { font-size: 17px; font-weight: 500; color: var(--color-primary-dark); margin-left: 2px; }
.stat-label { font-size: 15px; font-weight: 700; color: var(--color-primary-dark); letter-spacing: .03em; margin: 0 0 6px; }
.about-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* medical */
.medical-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; margin-bottom: 40px; }
.medical-card {
  position: relative; text-align: center; border-radius: 12px; margin: -16px -12px; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.medical-card:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(30,40,60,.08); background: #fff; }
.medical-card::before, .medical-card::after,
.contact-card::before, .contact-card::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  opacity: 0; transition: opacity .3s ease;
}
.medical-card::before, .contact-card::before {
  top: 6px; left: 6px; border-top: 2px solid #00205B; border-left: 2px solid #00205B;
}
.medical-card::after, .contact-card::after {
  bottom: 6px; right: 6px; border-bottom: 2px solid #8D1B32; border-right: 2px solid #8D1B32;
}
.medical-card:hover::before, .medical-card:hover::after,
.contact-card:hover::before, .contact-card:hover::after { opacity: 1; }
.medical-photo { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-blue); }
.medical-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.medical-card:hover .medical-photo img { transform: scale(1.08); }
.medical-card:hover .medical-label { color: var(--color-accent-dark); }
.medical-body { padding: 20px 16px 24px; }
.medical-label { font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--color-primary-dark); margin: 0 0 16px; }
.medical-detail { font-size: 18px; color: var(--color-text-sub); text-align: left; margin: 0; line-height: 1.9; }
.medical-note { text-align: center; font-size: 16px; color: var(--color-text-sub); margin: 0; }

/* schedule */
.schedule { background: var(--color-cream); }
.schedule-table-wrap { overflow-x: auto; margin-bottom: 20px; text-align: center; }
.schedule-table { margin: 0 auto; border-collapse: collapse; font-size: 18px; }
.schedule-table th, .schedule-table td {
  border: 1px solid var(--color-border); padding: 16px 8px; text-align: center;
}
.schedule-table thead th { background: #fff; font-weight: 500; }
.schedule-table th:not(:first-child), .schedule-table td:not(.time-cell) {
  width: 80px; height: 56px; padding: 18px 8px; line-height: 1.2;
}
.schedule-table .time-cell { text-align: left; padding-left: 20px; white-space: nowrap; }
.schedule-table .closed { font-size: 17px; }
.schedule-table tbody { background: #fff; }
.schedule-note { text-align: center; font-size: 15px; color: var(--color-text-sub); margin: 0; }

/* access */
.access-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 56px; margin-bottom: 40px; }
.access-brand { margin-bottom: 20px; }
.access-logo { height: 26px; width: auto; }
.access-postal, .access-address { font-size: 18px; margin: 0 0 6px; }
.access-address { margin-bottom: 24px; }
.access-label { font-size: 15px; color: var(--color-primary); font-weight: 500; margin: 24px 0 8px; }
.access-info p { font-size: 18px; margin: 0 0 4px; }
.access-info a:hover { color: var(--color-primary); }
/* TEL / E-MAIL：見出し部分の幅をそろえ、値の始まり位置を統一 */
.access-contact { margin: 0 0 4px; font-size: 16px; line-height: 1.9; color: #52636b; }
.access-contact > div { display: flex; }
.access-contact dt { flex: 0 0 5.2em; margin: 0; }
.access-contact dt::after { content: "："; }
.access-contact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tel-note { font-size: 13px; color: var(--color-text-sub); margin-left: 4px; }
.access-map { border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border); min-height: 320px; }
.access-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

/* recruit banner */
.recruit-banner {
  background: linear-gradient(90deg, rgba(15,35,55,.82) 0%, rgba(15,35,55,.55) 100%), url("../img/photo/recruit-staff.webp") center/cover no-repeat;
  color: #fff;
}
.recruit-inner {
  padding: 72px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.recruit-text-block { max-width: 620px; }
.recruit-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0 0 16px; }
.recruit-text { font-size: 18px; color: var(--color-sky-200); margin: 0; }

/* contact */
.contact-note { text-align: center; font-size: 18px; color: var(--color-text-sub); margin: 0 0 48px; line-height: 1.9; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; max-width: 640px; margin: 0 auto; }
.contact-card { position: relative; border: 1px solid var(--color-border); border-radius: 4px; padding: 28px; text-align: center; transition: border-color .2s ease, background .2s ease, transform .3s ease, box-shadow .3s ease; }
.contact-card:hover { border-color: var(--color-primary-light); background: var(--color-sky-100); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(30,40,60,.08); }
.contact-label { display: block; font-size: 15px; color: var(--color-text-sub); margin: 0 0 10px; }
.contact-value { display: block; font-size: 22px; font-weight: 700; color: var(--color-text); }
.contact-value-sm { font-size: 18px; font-weight: 500; }
.contact-sub { display: block; font-size: 16px; color: var(--color-text-sub); margin-top: 10px; }

/* footer */
.site-footer { background: var(--color-cream-2); border-top: 1px solid var(--color-border); }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 48px 24px; text-align: center; }
.footer-logo { height: 44px; width: auto; margin: 0 auto 20px; }
.footer-copy { font-size: 16px; color: var(--color-text-sub); margin: 0; }
.footer-nav { margin: 0 0 28px; }
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.footer-nav a { font-size: 15px; font-weight: 500; color: #153f55; white-space: nowrap; }
.footer-nav a:hover { color: var(--color-primary); }
@media (max-width: 560px) {
  .footer-nav ul { gap: 12px 22px; }
}

/* simple sub-page (placeholder) */
.page-body { max-width: 760px; margin: 0 auto; padding: 64px 24px 140px; }
.page-body h1 { font-family: var(--font-serif); font-size: 26px; font-weight: 500; margin: 0 0 24px; }
.page-body p { color: var(--color-text-sub); font-size: 18px; margin: 0 0 16px; }

/* page hero: texture banner + title for lower-tier pages */
.page-hero {
  padding: 84px 24px 60px; text-align: center;
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--color-border);
}
.page-hero-inner { max-width: 760px; margin: 0 auto; }
.page-hero-eyebrow {
  display: inline-flex; align-items: center; margin: 0 0 16px;
  color: var(--color-primary); font-size: 13px; font-weight: 700; letter-spacing: .28em;
}
.page-hero-eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; margin-right: 20px;
  background: var(--color-accent);
  box-shadow: 9px 0 0 var(--color-warm-green), 18px 0 0 var(--color-warm-pink);
}
.page-hero h1, .page-hero-title {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 4vw, 38px);
  color: var(--ink-deep, #153f55); margin: 0; letter-spacing: .05em;
}
@media (max-width: 600px) {
  .page-hero { padding: 64px 20px 40px; }
}
.page-back { display: inline-block; margin-top: 24px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 15px; color: var(--color-text-sub); margin-bottom: 6px; }
.form-field input, .form-field textarea {
  width: 100%; border: 1px solid var(--color-border); border-radius: 4px; padding: 12px 14px;
  font-family: var(--font-base); font-size: 18px; color: var(--color-text);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-submit { border: none; cursor: pointer; }

/* responsive */
@media (min-width: 1181px) {
  .header-contact { display: flex; }
  /* ロゴ＋ナビ＋電話で約1100px必要なため、ヘッダーだけ本文幅(1120px)より広げる。右側はお問い合わせボタン(幅156px)分を空ける */
  .header-inner { max-width: none; padding-right: 176px; }
  .header-cta {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    position: absolute; top: 15px; right: 0; bottom: 0; width: 156px; padding-top: 6px;
    background: var(--ink-deep, #153f55); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; white-space: nowrap;
    transition: background .2s ease;
  }
  .header-cta:hover { background: #0e2c3c; color: #fff; }
  .header-cta svg { width: 28px; height: 28px; flex-shrink: 0; }
  /* 予約ボタンは画面右上に固定。ヘッダー(高さ約90px)のすぐ下＝FV画像の右上に重ねる。スクロールしても位置は変わらない */
  .float-reserve { display: flex; flex-direction: column; gap: 12px; position: fixed; top: 112px; right: 24px; z-index: 90; }
}
/* 1181〜1399px：はみ出さないようにロゴ・ナビを少し詰める */
@media (min-width: 1181px) and (max-width: 1399px) {
  .header-inner { padding-left: 20px; gap: 12px; }
  .logo-img { height: 38px; }
  .global-nav > ul { gap: 14px; }
  .global-nav a { font-size: 14px; }
  .header-contact { gap: 10px; margin-left: 0; }
  .header-tel-number { font-size: 19px; }
}
@media (max-width: 1180px) {
  .logo-img { height: 36px; }
  /* メニューはヘッダー直下に表示（top固定値だとヘッダーの高さとずれて☰ボタンに重なるため） */
  .global-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--color-border); max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
  }
  /* 項目が切れないよう高さに余裕を持たせ、画面が低い時はメニュー内スクロール */
  .global-nav.is-open { max-height: calc(100vh - 90px); overflow-y: auto; }
  .global-nav > ul { flex-direction: column; align-items: flex-start; padding: 16px 24px 24px; gap: 18px; }
  .nav-mobile-only { display: list-item; }
  /* スマホではドロップダウンを開閉せず、常に字下げして表示する */
  .has-sub > a::after { display: none; }
  .sub-menu {
    display: flex; position: static; transform: none; min-width: 0; padding: 12px 0 0 16px; gap: 12px;
    border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .sub-menu::before { display: none; }
  .sub-menu a { padding: 0; font-size: 14px; }
  .sub-menu a:hover { background: none; }
  .nav-toggle { display: flex; }
  .nav-mobile-contact {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    width: 100%; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--color-border);
  }
  .nav-mobile-contact .header-tel { align-items: flex-start; }
  .nav-mobile-contact .header-tel-number { font-size: 26px; }
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo-wrap { margin: 0 auto; }
  .medical-grid { grid-template-columns: 1fr; gap: 48px; }
  .access-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .recruit-inner { flex-direction: column; align-items: flex-start; }
  .recruit-inner .btn-solid { align-self: flex-start; }

  .hero-title { font-size: clamp(18px, 5.5vw, 26px); white-space: nowrap; letter-spacing: 0; }
  .hero-catch { font-size: 18px; }
  .pc-only { display: none; }
  .section-inner { padding: 64px 20px; }
}


/* FV redesign: scoped hero-only treatment */
.hero {
  position: relative; min-height: min(700px, calc(100vh - 88px)); padding: 56px 24px 84px;
  display: flex; align-items: flex-start; overflow: hidden; text-align: left; isolation: isolate;
  background: #eaf5f7;
}
.hero-slides { position: absolute; inset: 0; z-index: -2; }
.hero-slide { position: absolute; inset: 0; opacity: 0; animation: heroSlideFade 18s linear infinite; }
.hero-slide:nth-child(1) { animation-delay: -1.26s; }
.hero-slide:nth-child(2) { animation-delay: 4.74s; }
.hero-slide:nth-child(3) { animation-delay: 10.74s; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 2枚目・3枚目は背景が濃く文字に重なりやすいため、スライドと一緒に切り替わるオーバーレイを重ねる */
.hero-slide:nth-child(n+2)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244,250,250,.62) 0%, rgba(244,250,250,.58) 40%, rgba(244,250,250,.34) 60%, rgba(244,250,250,.10) 74%, rgba(244,250,250,0) 86%); }
.hero-slide:nth-child(3)::after { background: linear-gradient(90deg, rgba(244,250,250,.74) 0%, rgba(244,250,250,.72) 42%, rgba(244,250,250,.50) 60%, rgba(244,250,250,.18) 76%, rgba(244,250,250,0) 90%); }
@keyframes heroSlideFade {
  0% { opacity: 0; }
  7% { opacity: 1; }
  33.33% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:first-child { opacity: 1; }
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(244,250,250,.88) 0%, rgba(244,250,250,.80) 30%, rgba(244,250,250,.45) 50%, rgba(244,250,250,.10) 66%, rgba(244,250,250,0) 78%); }
.hero-inner { position: relative; width: 100%; max-width: var(--max-width); margin: 0 auto; }
.hero-copy { max-width: 700px; }
.hero-title { margin: 0 0 88px; color: #153f55; font-family: var(--font-serif); font-size: clamp(38px, 5vw, 62px); font-weight: 500; line-height: 1.28; letter-spacing: .06em; }
.hero-title-break { display: block; }
.hero-promise { margin: 0 0 26px; color: #153f55; font-family: var(--font-serif); font-weight: 500; line-height: 1.7; letter-spacing: .05em; }
.hero-promise span { display: block; }
.hero-promise-lead, .hero-promise-tail { font-size: clamp(18px, 1.8vw, 23px); }
.hero-promise-main { font-size: clamp(19px, 2vw, 26px); letter-spacing: .02em; color: var(--color-primary-dark); font-weight: 600; }
.hero-promise-main span { display: inline-block; }
.hero-catch { margin: 46px 0 32px; color: #153f55; font-family: var(--font-serif); font-size: clamp(19px, 1.85vw, 24px); font-weight: 500; line-height: 1.75; letter-spacing: .05em; }
.hero-catch span { color: var(--color-primary-dark); }
.hero-scroll { position: absolute; right: 56px; bottom: -30px; display: flex; align-items: center; gap: 12px; color: var(--color-primary-dark); font-size: 16px; font-weight: 700; letter-spacing: .26em; transform: rotate(90deg); transform-origin: right center; }
.hero-scroll i { position: relative; display: block; width: 54px; height: 2px; background: rgba(42,111,151,.22); overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; top: 0; left: -18px; width: 18px; height: 100%; background: var(--color-primary-dark); animation: heroScrollTravel 1.6s ease-in infinite; }
/* PC：SCROLLは画面の左右中央・FV下部に置く（縦向きのまま。回転の中心を要素の中心にして位置を決める） */
@media (min-width: 1181px) { .hero-scroll { left: 50%; right: auto; bottom: -21px; transform: translateX(-50%) rotate(90deg); transform-origin: center; } }
@keyframes heroScrollTravel {
  0% { left: -18px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 54px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll i::after { animation: none; left: 0; }
}
@media (max-width: 860px) {
  .hero { min-height: 640px; padding: 76px 20px 96px; }
  .hero-slide img { object-position: 62% center; }
  .hero::before { background: linear-gradient(90deg, rgba(244,250,250,.90) 0%, rgba(244,250,250,.76) 60%, rgba(244,250,250,.28) 100%); }
  .hero-slide:nth-child(n+2)::after { background: linear-gradient(90deg, rgba(244,250,250,.55) 0%, rgba(244,250,250,.45) 60%, rgba(244,250,250,.20) 100%); }
  /* 「たにの整形外科内科」(9文字)が折り返さない範囲で最大の大きさ＝（画面幅 − 左右の余白）÷ 9.3 */
  .hero-title { margin-bottom: 90px; font-size: min(56px, calc((100vw - 40px) / 9.3)); letter-spacing: .02em; }
  .hero-catch { margin-top: 30px; font-size: clamp(18px, 5vw, 22px); }
  .hero-promise-lead, .hero-promise-tail { font-size: clamp(16px, 4.3vw, 19px); }
  .hero-promise-main { font-size: clamp(18px, 5vw, 22px); }
  .hero-scroll { right: 0; bottom: -42px; }
}
@media (max-width: 420px) {
  .hero { min-height: 640px; padding-top: 72px; }
  .hero-slide img { object-position: 68% center; }
  .hero-title-break { display: block; }
  .hero-title { line-height: 1.42; }
  .hero-catch { line-height: 1.65; }
  .hero-scroll { display: none; }
}


/* Shared visual system — extended from the FV */
:root {
  --surface-white: rgba(255,255,255,.82);
  --surface-mist: #f3f8f8;
  --surface-blue: #eaf5f7;
  --ink-deep: #153f55;
  --line-soft: rgba(58,124,165,.20);
  --shadow-soft: 0 18px 42px rgba(21,63,85,.08);
  --radius-card: 18px;
}
.section-inner { padding-top: 104px; padding-bottom: 104px; }
.section-head { margin-bottom: 44px; }
.section-title { color: var(--ink-deep); font-size: clamp(28px, 3vw, 38px); letter-spacing: .07em; }
.section-eyebrow {
  display: inline-flex; align-items: center;
  color: var(--color-primary); font-size: 13px; font-weight: 700; letter-spacing: .28em;
}
.section-eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; margin-right: 20px;
  background: var(--color-accent);
  box-shadow: 9px 0 0 var(--color-warm-green), 18px 0 0 var(--color-warm-pink);
}
.section-head::after { width: 34px; height: 3px; margin-top: 16px; background: linear-gradient(90deg, #001764 50%, #CF001C 50%); }
.section-head.center::after { margin-left: auto; margin-right: auto; }
.news { background: linear-gradient(180deg, #f8fbfb 0%, var(--surface-blue) 100%); }
.news-list { margin: 0; border: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.news-list li { padding: 0; border: 0; background: none; }
.news-item { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 110px 92px 1fr; align-items: center; gap: 18px; padding: 20px 24px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-white); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
a.news-item:hover { transform: translateY(-3px); border-color: rgba(58,124,165,.42); box-shadow: var(--shadow-soft); }
.news-date { width: auto; color: var(--color-primary-dark); font-size: 15px; letter-spacing: .05em; }
.news-badge { padding: 4px 10px; border-color: rgba(58,124,165,.28); color: var(--color-primary-dark); background: #fff; font-size: 13px; text-align: center; }
.news-text { font-size: 16px; }
.about { background: #fff; }
.about-grid { gap: 72px; align-items: center; }
.about-text { padding: 34px 38px; border-left: 3px solid #001764; background: linear-gradient(105deg, #f6fbfb, #fff); border-radius: 0 18px 18px 0; }
.about-text p.about-quote { color: var(--ink-deep); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.65; }
.about-text p { color: #52636b; font-size: 17px; line-height: 2; }
.about-photo-wrap { width: 230px; }
.about-photo { width: 230px; height: 300px; border-radius: 120px 120px 16px 16px; box-shadow: 12px 12px 0 var(--surface-blue); }
.stat-badge { margin-top: 26px; padding: 14px 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; box-shadow: var(--shadow-soft); }
.stat-number { font-size: 38px; }
.about-cta { gap: 10px; }
.about-cta .btn { font-size: 15px; padding: 12px 18px; }
.medical { background: var(--surface-mist); }
.medical .section-lead { max-width: 720px; margin-left: auto; margin-right: auto; color: #52636b; line-height: 2; }
.medical-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-bottom: 48px; }
.medical-card { min-height: 100%; margin: 0; padding: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: rgba(255,255,255,.72); text-align: left; }
.medical-card:hover { background: #fff; box-shadow: var(--shadow-soft); }
.medical-card::before, .medical-card::after { width: 14px; height: 14px; }
.medical-body { padding: 22px 22px 26px; }
.medical-label { margin-bottom: 12px; color: var(--ink-deep); font-size: 21px; transition: color .3s ease; }
.medical-detail { color: #52636b; font-size: 16px; line-height: 1.85; }
.medical-note { padding: 14px 18px; border-radius: 8px; color: var(--color-primary-dark); background: rgba(255,255,255,.68); font-size: 14px; }
.schedule { background: linear-gradient(180deg, #fff 0%, #fdf3f0 100%); }
.schedule-table-wrap { max-width: 920px; margin-left: auto; margin-right: auto; padding: 10px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface-mist); box-shadow: var(--shadow-soft); }
.schedule-table { width: 100%; table-layout: fixed; font-size: 20px; }
.schedule-table th, .schedule-table td { border-color: var(--line-soft); padding: 22px 8px; }
/* 時間列を曜日列の2倍幅にして、水曜日が表全体のちょうど中央に来るようにする（2 + 7日 = 9分割） */
.schedule-table th:first-child, .schedule-table td.time-cell { width: 22.2222%; }
.schedule-table th:not(:first-child), .schedule-table td:not(.time-cell) { width: auto; height: 78px; padding: 22px 8px; }
.schedule-table thead th { color: var(--ink-deep); background: #fff; font-size: 20px; font-weight: 700; }
.schedule-table td.time-cell { text-align: center; padding-left: 8px; color: var(--ink-deep); font-size: 20px; font-weight: 500; }
.schedule-table tbody td:not(.time-cell) { color: var(--ink-deep); font-size: 28px; font-weight: 700; }
.schedule-table .closed { color: #3f4f57; font-size: 19px; font-weight: 700; }
@media (max-width: 860px) {
  .schedule-table { font-size: 16px; min-width: 640px; }
  .schedule-table th:first-child, .schedule-table td.time-cell { width: 22.2222%; }
  .schedule-table thead th, .schedule-table td.time-cell { font-size: 16px; }
  .schedule-table th, .schedule-table td { padding: 16px 6px; }
  .schedule-table tbody td:not(.time-cell) { font-size: 22px; }
  .schedule-table .closed { font-size: 16px; }
}
.schedule-note { margin-top: 18px; color: #52636b; }
.schedule-note + .schedule-note { margin-top: 6px; }
.access { background: linear-gradient(180deg, #f8fbfb, #eaf5f7); }
.access-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.25fr); gap: 28px; align-items: stretch; }
.access-info { padding: 34px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: rgba(255,255,255,.86); box-shadow: var(--shadow-soft); }
.access-brand { padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.access-logo { height: 48px; }
.access-postal { margin-top: 24px !important; color: var(--color-primary-dark); font-size: 15px !important; letter-spacing: .08em; }
.access-address { color: var(--ink-deep); font-weight: 400; line-height: 1.8; }
.access-info p.access-label { display: inline-block; margin-top: 22px; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--color-primary-dark); font-size: 13px; letter-spacing: .08em; }
.access-info p { color: #52636b; font-size: 16px; line-height: 1.9; }
.access-info a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.access-map { min-height: 420px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.access-map iframe { min-height: 420px; }
.recruit-banner { background: linear-gradient(90deg, rgba(13,52,71,.93), rgba(42,111,151,.70)), url("../img/photo/recruit-staff.webp") center/cover no-repeat; }
.recruit-inner { padding-top: 84px; padding-bottom: 84px; }
.recruit-title { font-size: 26px; }
.recruit-inner .btn-solid { border-color: #fff; background: #fff; color: var(--color-primary-dark); }
.recruit-inner .btn-solid:hover { background: var(--surface-blue); }
.contact { background: var(--surface-mist); }
.contact-note { max-width: 680px; margin-left: auto; margin-right: auto; color: #52636b; font-size: 16px; }
.contact-grid { max-width: 760px; gap: 16px; }
.contact-card { padding: 30px 24px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: #fff; box-shadow: 0 8px 24px rgba(21,63,85,.04); }
.contact-card:hover { border-color: var(--color-primary); background: #fff; box-shadow: var(--shadow-soft); }
.contact-label { color: var(--color-primary); font-weight: 700; letter-spacing: .12em; }
.contact-value { color: var(--ink-deep); }
.site-footer { background: #eaf5f7; border-top: 1px solid var(--line-soft); }
@media (max-width: 860px) {
  .section-inner { padding-top: 72px; padding-bottom: 72px; }
  .news-item { grid-template-columns: 92px 78px 1fr; gap: 10px; padding: 16px; }
  .about-grid { gap: 44px; }
  .medical-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .access-grid { grid-template-columns: 1fr; gap: 22px; }
  .access-info { padding: 22px 18px; }
  .medical-body { padding: 18px 18px 22px; }
}
@media (max-width: 560px) {
  .section-head { margin-bottom: 32px; }
  .news-item { grid-template-columns: 1fr; gap: 5px; }
  .news-badge { width: fit-content; }
  .about-text { padding: 24px 20px; }
  .about-photo-wrap { width: 200px; }
  .about-photo { width: 200px; height: 260px; }
  .medical-grid { grid-template-columns: 1fr; }
  .medical-body { padding: 20px 20px 24px; }
  .schedule-table-wrap { margin-left: -4px; margin-right: -4px; padding: 5px; }
  .schedule-table { min-width: 620px; }
  .schedule-table-wrap { overflow-x: auto; }
  .access-map, .access-map iframe { min-height: 320px; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ==================================================
   下層ページ個別スタイル（静的版の各HTML内<style>から移動）
   ================================================== */

/* about-doctor（院長あいさつ・医師紹介） */
.doctor-page { max-width: 820px; }
.doctor-page h2 {
  font-family: var(--font-serif); font-size: 21px; font-weight: 500;
  color: var(--color-primary-dark); margin: 56px 0 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--color-border);
}
.doctor-page h2:first-of-type { margin-top: 40px; }
.doctor-page h3 {
  font-family: var(--font-serif); font-size: 19px; font-weight: 500;
  color: var(--color-text); margin: 32px 0 12px;
}
.doctor-page p { font-size: 18px; line-height: 1.9; margin: 0 0 18px; color: var(--color-text); }
.doctor-page .lede { color: var(--color-text-sub); }
.doctor-page .doctor-signature { margin: 32px 0 0; text-align: right; font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: .08em; color: var(--ink-deep, #153f55); }
.qualification-list {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 24px;
  margin: 0 0 24px; padding: 20px 24px; background: var(--color-cream); border-radius: 8px;
}
.qualification-list li { font-size: 16px; color: var(--color-text); list-style: none; }
/* 医師紹介カード（経歴・資格） */
.doctor-page .doctor-heading { font-size: 28px; letter-spacing: .06em; }
@media (max-width: 600px) {
  .doctor-page .doctor-heading { font-size: 24px; }
}
.profile { margin: 0 0 48px; padding: 28px 32px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.profile-role { flex-shrink: 0; padding: 4px 16px; border-radius: 999px; background: var(--color-primary-dark); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; }
.doctor-page .profile-name { margin: 0; font-family: var(--font-serif); font-size: 30px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; color: var(--ink-deep, #153f55); }
.profile-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; }
/* 経歴が折り返しにくいよう、カードだけ本文の幅より左右に広げる */
@media (min-width: 1040px) {
  .profile { margin-left: -80px; margin-right: -80px; }
}
.doctor-page .profile-label { margin: 0 0 14px; font-family: var(--font-base); font-size: 18px; font-weight: 700; letter-spacing: .16em; color: var(--color-primary); }
.career-list { position: relative; margin: 0; padding: 0 0 0 22px; list-style: none; }
.career-list::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px; background: var(--color-border); }
.career-list li { position: relative; padding: 5px 0; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.career-list li::before { content: ""; position: absolute; left: -22px; top: 13px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid var(--color-primary-light); }
.career-list li:last-child { font-weight: 700; color: var(--color-primary-dark); }
.career-list li:last-child::before { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.profile .qualification-list { grid-template-columns: 1fr; margin: 0; }
/* 資格名の途中（カタカナの途中など）で折り返さず、スペースや読点の位置で折り返す */
.profile .qualification-list li { word-break: keep-all; overflow-wrap: anywhere; }
.career-list--dated li { display: grid; grid-template-columns: 5em minmax(0, 1fr); column-gap: 12px; }
.career-year { color: var(--color-primary-dark); font-weight: 500; white-space: nowrap; }
.career-list--dated li:last-child .career-year { color: inherit; }
.career-list--dated li.career-note { padding: 2px 0 6px; }
.career-list--dated li.career-note::before { display: none; }
.career-list--dated li.career-note .career-text { grid-column: 2; font-size: 14px; line-height: 1.7; color: var(--color-text-sub); }
.profile-block--wide { grid-column: 1 / -1; }
/* 所属団体・学会：認定資格等と同じ、全体を1つの枠で囲む。名称の途中で折り返さないよう、PCでは各項目を改行させない */
.affiliation-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 24px;
  margin: 0; padding: 20px 24px; list-style: none; background: var(--color-cream); border-radius: 8px;
}
.affiliation-list li { font-size: 16px; line-height: 1.7; color: var(--color-text); white-space: nowrap; }
/* PCでは折り返さない長さなので3列で並べる（列幅は各列の最長項目に合わせる） */
@media (min-width: 1040px) {
  .affiliation-list { grid-template-columns: repeat(3, max-content); justify-content: space-between; }
}
@media (max-width: 700px) {
  .profile { margin-bottom: 36px; padding: 22px 18px; }
  .doctor-page .profile-name { font-size: 26px; }
  .profile-body { grid-template-columns: 1fr; gap: 24px; }
  .profile .qualification-list { padding: 16px; gap: 8px; }
  .affiliation-list { grid-template-columns: 1fr; padding: 16px; gap: 8px; }
  .affiliation-list li { white-space: normal; }
  /* スマホでは「年」の下の行に内容を置く（平成07年／慶應義塾大学医学部卒業） */
  .career-list--dated li { grid-template-columns: minmax(0, 1fr); padding: 6px 0 8px; }
  .career-list--dated li::before { top: 14px; }
  .career-list--dated li.career-note { padding: 0 0 8px; }
  .career-list--dated li.career-note .career-text { grid-column: 1; }
}
.callout {
  margin-top: 48px; padding: 32px; background: var(--color-sky-100); border-radius: 12px; text-align: center;
}
.callout p { margin: 0 0 8px; font-size: 17px; color: var(--color-text); }
.callout .lead-line { font-weight: 500; color: var(--color-primary-dark); margin-top: 16px; margin-bottom: 24px; }
@media (max-width: 600px) {
  .qualification-list { grid-template-columns: 1fr; }
}

/* about-overview（クリニック概要） */
.overview-table { width: 100%; border-collapse: collapse; font-size: 18px; margin-top: 8px; }
.overview-table th, .overview-table td { text-align: left; vertical-align: top; padding: 16px 12px; border-bottom: 1px solid var(--color-border); }
.overview-table th { width: 30%; color: var(--color-text-sub); font-weight: 500; white-space: nowrap; }
.address-block { display: flex; gap: 1em; }
.address-zip { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) {
  .address-block { flex-direction: column; gap: 0; }
  /* スマホでは項目名を上、内容を下の縦並びにする */
  .overview-table, .overview-table tbody, .overview-table tr, .overview-table th, .overview-table td { display: block; width: 100%; }
  .overview-table { font-size: 17px; }
  .overview-table tr { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
  .overview-table th, .overview-table td { padding: 0; border: 0; }
  /* 「リウ／マチ科」のように語の途中で折り返さず、読点などの位置で折り返す */
  .overview-table td { word-break: keep-all; overflow-wrap: anywhere; }
  /* 長い文章は通常の折り返し（読点位置だけだと行が短くなりすぎるため） */
  .overview-table td.overview-long { word-break: normal; overflow-wrap: break-word; line-height: 1.9; }
  .overview-table th { margin-bottom: 4px; font-size: 14px; letter-spacing: .06em; white-space: normal; }
}

/* symptoms（症状からさがす） */
.symptom-page { max-width: 940px; }
.symptom-intro {
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 40px; align-items: center;
  margin-bottom: 56px;
}
.symptom-intro p { font-size: 17px; line-height: 1.95; margin: 0 0 16px; color: var(--color-text); }
.symptom-intro-photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 10 / 11; }
.symptom-intro-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.symptom-picker { margin-bottom: 64px; }
.symptom-picker h2 {
  font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--color-primary-dark);
  text-align: center; margin: 0 0 28px;
}
.symptom-picker-list {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 0; padding: 0; list-style: none;
}
.symptom-picker-list li { margin: 0; }
.symptom-picker-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-card);
  background: var(--surface-mist); color: var(--ink-deep); font-size: 16px; font-weight: 700;
  text-align: center; transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.symptom-picker-link:hover { background: var(--color-warm-pink); border-color: var(--color-accent); color: var(--color-accent-dark); }

/* 区切り線が前の病名リストに食い込まないよう、負のmarginをやめる（見出しの位置ずれ対策は html の scroll-padding-top で対応） */
.symptom-section { padding-top: 40px; border-top: 1px solid var(--color-border); }
.symptom-section:first-of-type { border-top: 0; }
.symptom-section h2 {
  font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--color-primary-dark);
  margin: 0 0 10px;
}
.symptom-section-lead { color: var(--color-text-sub); font-size: 15px; margin: 0 0 20px; }
.disease-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 20px; margin: 0 0 40px; padding: 0; list-style: none; }
.disease-list li { margin: 0; }
.disease-list a {
  display: block; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: 8px;
  color: var(--color-text); font-size: 16px; font-weight: 500;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.disease-list a:hover { border-color: var(--color-accent); background: var(--color-warm-pink); color: var(--color-accent-dark); }

@media (max-width: 700px) {
  .symptom-intro { grid-template-columns: 1fr; gap: 24px; }
  .symptom-intro-photo { order: -1; aspect-ratio: 4/3; }
  .symptom-picker-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .disease-list { grid-template-columns: 1fr; }
}

/* diseases（疾患について） */
.disease-page { max-width: 780px; }
.disease-page .lede { color: var(--color-text-sub); font-size: 16px; margin-bottom: 44px; }
.disease-category { margin: 0 0 12px; }
.disease-category h2 {
  font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--color-primary-dark);
  margin: 56px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 24px;
}
.disease-category:first-of-type h2 { margin-top: 40px; }
.disease-entry { padding: 22px 0; border-bottom: 1px solid var(--color-border); scroll-margin-top: 24px; }
.disease-entry:last-child { border-bottom: 0; }
.disease-entry h3 { font-size: 18px; font-weight: 700; color: var(--color-text); margin: 0 0 8px; }
.disease-entry p { font-size: 15px; line-height: 1.9; color: var(--color-text-sub); margin: 0; }

/* お知らせ詳細（news-preview-event） */
.article-head { margin: 0 0 40px; }
.article-meta { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.article-category {
  flex-shrink: 0; padding: 4px 16px; border-radius: 999px;
  background: var(--color-primary-dark); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .1em;
}
.article-date {
  display: flex; align-items: center; gap: 16px; flex: 1;
  font-family: var(--font-serif); font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: .06em; color: var(--color-primary-dark);
}
.article-date::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.article-title {
  position: relative; margin: 0; padding-bottom: 22px;
  font-family: var(--font-serif); font-size: 32px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: var(--ink-deep, #153f55);
}
.article-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px;
  background: linear-gradient(90deg, #001764 50%, #CF001C 50%);
}
.article-title { text-wrap: balance; }
@media (max-width: 600px) {
  .article-title { font-size: 22px; letter-spacing: .02em; }
}

.news-article { max-width: 720px; }
.news-article .lede { font-size: 18px; color: var(--color-text); line-height: 1.95; margin: 0 0 40px; }

.article-photo { margin: 0 0 40px; }
.article-photo h2 {
  font-family: var(--font-serif); font-size: 21px; font-weight: 500; color: var(--ink-deep, #153f55);
  margin: 0 0 16px;
}
.article-photo-frame { border-radius: var(--radius-card, 18px); overflow: hidden; border: 1px solid var(--color-border); }
.article-photo-frame img { width: 100%; display: block; }
.article-gallery { display: grid; gap: 20px; margin: 0; padding: 0; }
.article-gallery figure { margin: 0; }
.article-gallery img { display: block; width: 100%; height: auto; border-radius: var(--radius-card, 18px); border: 1px solid var(--color-border); }

/* 情報カード（内覧会 開催日時・施設情報）：白カード＋ページ見出しと同じ3色ドット */
.info-card {
  margin: 0 0 32px; padding: 36px 40px 32px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-card, 18px);
  box-shadow: var(--shadow-soft);
}
.info-card h2 {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-serif); font-size: 21px; font-weight: 500; color: var(--ink-deep);
  margin: 0 0 22px;
}
.info-card h2::before {
  content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; margin-right: 18px;
  background: var(--color-accent);
  box-shadow: 9px 0 0 var(--color-warm-green), 18px 0 0 var(--color-warm-pink);
}

/* 開催日時：日付ピル＋時間の行、点線区切り */
.event-list { margin: 0; padding: 0; list-style: none; }
.event-list li {
  display: grid; grid-template-columns: 176px minmax(0,1fr); align-items: center; gap: 10px 22px;
  padding: 16px 4px; border-bottom: 1px dashed var(--line-soft); font-size: 16px;
}
.event-list li:first-child { border-top: 1px dashed var(--line-soft); }
.event-list .event-day {
  display: flex; align-items: center; justify-content: center;
  padding: 7px 18px; border-radius: 999px; background: var(--surface-blue);
  color: var(--color-primary-dark); font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.event-list .event-day + span { font-size: 17px; font-weight: 500; color: var(--color-text); letter-spacing: .03em; }
.info-card .event-note { font-size: 13px; color: var(--color-text-sub); margin: 16px 0 0; }

/* 施設情報：左に項目名・右に内容の表組み */
.facility-grid { display: block; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.facility-grid li {
  display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 24px; align-items: baseline;
  padding: 16px 4px; border-bottom: 1px solid var(--line-soft);
}
.facility-label {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--color-primary);
}
.facility-value { font-size: 16px; font-weight: 500; color: var(--color-text); line-height: 1.85; }
.facility-value .tel-note { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-sub); margin-top: 2px; }

.article-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }

@media (max-width: 600px) {
  .info-card { padding: 28px 20px 24px; }
  .event-list li { grid-template-columns: 1fr; }
  .event-list .event-day { justify-self: start; }
  .facility-grid li { grid-template-columns: 1fr; gap: 2px; padding: 14px 2px; }
}

/* 院長ブログ 一覧・共通（blog） */
.blog-post-page { max-width: 1040px; }
.blog-post-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 56px; align-items: start; }

.page-body .blog-lede { font-size: 16px; color: var(--color-text-sub); line-height: 1.9; margin: 0 0 32px; }

.blog-list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.blog-card {
  border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden;
  background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-card:hover { transform: translateY(-3px); border-color: rgba(58,124,165,.42); box-shadow: var(--shadow-soft); }
.blog-card-link { display: grid; grid-template-columns: 200px 1fr; gap: 0; color: inherit; }
/* PCでは写真をカードの高さいっぱいに（本文が長くても写真の下に余白が出ないように） */
.blog-card-photo { min-height: 150px; overflow: hidden; background: var(--surface-blue); }
.blog-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* サムネイルなしの既定画像（ロゴ）は切り抜かず、枠に収めて表示する（ロゴが大きく見えすぎないように） */
.blog-card-photo--default { background: #fff; }
.blog-card-photo--default img { object-fit: contain; }
.blog-card-body { padding: 22px 24px; }
.blog-card-title {
  font-family: var(--font-serif); font-size: 19px; font-weight: 500; color: var(--color-text);
  margin: 10px 0 10px;
}
.page-body .blog-card-excerpt { font-size: 14px; color: var(--color-text-sub); line-height: 1.8; margin: 0; }

.blog-card .blog-meta { display: flex; align-items: center; gap: 12px; margin: 0; }
.blog-card .blog-category {
  display: inline-block; padding: 4px 12px; border-radius: 4px;
  background: var(--color-keio-navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.blog-card .blog-date { font-size: 13px; color: var(--color-text-sub); letter-spacing: .05em; }

/* サイドバー：白カード＋英字ラベル（3色ドット）、行ホバー、件数ピル
   （画面より縦に長くなり下部に届かなくなるため、スクロール追従はしない） */
.blog-sidebar { display: grid; gap: 20px; align-content: start; }
.sidebar-block {
  padding: 26px 22px 20px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: 4px;
  box-shadow: 0 10px 30px rgba(21,63,85,.06);
}
.sidebar-block h2 {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--ink-deep);
  margin: 0 0 14px; padding: 0 8px 14px; border-bottom: 1px solid var(--line-soft);
}
.sidebar-eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--font-base); font-size: 11px; font-weight: 700; letter-spacing: .26em; color: var(--color-primary);
}
.sidebar-eyebrow::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; margin-right: 16px;
  background: var(--color-accent);
  box-shadow: 7px 0 0 var(--color-warm-green), 14px 0 0 var(--color-warm-pink);
}
.sidebar-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sidebar-list a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px 10px 26px; border-radius: 4px;
  font-size: 14px; font-weight: 500; color: var(--color-text);
  transition: background .2s ease, color .2s ease;
}
.sidebar-list a::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--color-sky-300); transition: background .2s ease, transform .2s ease;
}
.sidebar-list a:hover { background: var(--surface-blue); color: var(--color-primary-dark); }
.sidebar-list a:hover::before { background: var(--color-accent); transform: scale(1.3); }
.sidebar-list a.is-current { background: var(--surface-blue); color: var(--color-primary-dark); font-weight: 700; }
.sidebar-list a.is-current::before { background: var(--color-primary); }
.sidebar-count {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 26px; height: 22px; padding: 0 8px; border-radius: 3px;
  background: var(--color-cream-2); color: var(--color-text-sub); font-size: 12px; font-weight: 700;
}
.sidebar-list a:hover .sidebar-count, .sidebar-list a.is-current .sidebar-count { background: #fff; color: var(--color-primary-dark); }
/* アーカイブ：年ごとの折りたたみ */
.archive-years { display: grid; gap: 2px; }
.archive-year summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 8px 10px 8px 30px; border-radius: 4px; position: relative;
  font-size: 15px; font-weight: 700; color: var(--color-primary-dark);
  transition: background .2s ease;
}
.archive-year summary::-webkit-details-marker { display: none; }
.archive-year summary::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg); transition: transform .2s ease;
}
.archive-year[open] summary::before { transform: rotate(45deg); margin-top: -6px; }
.archive-year summary .sidebar-count { margin-left: auto; }
.archive-year summary:hover { background: var(--surface-blue); }
.archive-year .sidebar-list { padding: 2px 0 8px 14px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 6px; }
.tag-list a {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--line-soft); border-radius: 4px;
  font-size: 13px; font-weight: 500; color: var(--color-primary-dark); background: var(--surface-mist);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tag-list a:hover { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

.blog-page-back { margin-top: 32px; }

@media (max-width: 820px) {
  .blog-post-layout { grid-template-columns: 1fr; gap: 40px; }
  .blog-sidebar { grid-template-columns: repeat(2, minmax(0,1fr)); position: static; align-items: start; }
}
@media (max-width: 560px) {
  .blog-card-link { grid-template-columns: 1fr; }
  .blog-card-photo { aspect-ratio: 16 / 9; }
  .blog-sidebar { grid-template-columns: 1fr; }
}

/* 院長ブログ 記事詳細（blog-01） */
.blog-content .blog-meta { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.blog-post-title {
  font-family: var(--font-serif); font-size: clamp(22px, 3vw, 28px); font-weight: 500; line-height: 1.6;
  color: var(--ink-deep, #153f55); letter-spacing: .03em;
  margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft);
}
.blog-content .blog-category {
  display: inline-block; padding: 5px 14px; border-radius: 4px;
  background: var(--color-keio-navy); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.blog-content .blog-date { font-size: 14px; color: var(--color-text-sub); letter-spacing: .05em; }
.blog-content p { font-size: 17px; line-height: 2; color: var(--color-text); margin: 0 0 28px; }
.blog-figure { margin: 0 0 32px; }
.blog-figure img { width: 100%; border-radius: var(--radius-card, 18px); border: 1px solid var(--color-border); display: block; }
.blog-figure figcaption { margin: 10px 0 0; font-size: 13px; color: var(--color-text-sub); text-align: center; }
.blog-post-back { margin-top: 8px; }
@media (max-width: 560px) {
  .single-blog .blog-sidebar { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .single-blog .blog-sidebar { grid-template-columns: 1fr; }
}

/* ==================================================
   WordPress用
   ================================================== */
.news-empty .news-text { grid-column: 1 / -1; }
/* お知らせ一覧ページ：詳細ページと同じ「カテゴリ（タグ）→日付（明朝）」の並び。トップのお知らせ一覧は変えない */
.page-body .news-item { grid-template-columns: 144px 116px 1fr; gap: 12px 16px; }
.page-body .news-badge {
  order: -1; justify-self: start; white-space: nowrap; padding: 4px 16px; border: 0; border-radius: 999px;
  background: var(--color-primary-dark); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em;
}
.page-body .news-date { font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: .06em; color: var(--color-primary-dark); }
.page-body .news-text { font-weight: 500; }
@media (max-width: 860px) {
  .page-body .news-item { grid-template-columns: 136px 108px 1fr; gap: 10px 12px; }
}
@media (max-width: 560px) {
  .page-body .news-item { grid-template-columns: auto 1fr; gap: 8px 14px; }
  .page-body .news-text { grid-column: 1 / -1; }
}
/* エディタ本文（固定ページ・お知らせ） */
.post-content > h2 { font-family: var(--font-serif); font-size: 21px; font-weight: 500; color: var(--color-primary-dark); margin: 48px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.post-content > h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 500; margin: 32px 0 12px; }
.post-content > ul, .post-content > ol { margin: 0 0 16px 1.5em; color: var(--color-text-sub); }
.post-content > ul { list-style: disc; }
.post-content > ol { list-style: decimal; }
.post-content > p a, .post-content > ul a, .post-content > ol a { color: var(--color-primary); text-decoration: underline; }
.post-content img { height: auto; }
/* ブログ本文：画像ブロックを静的版の .blog-figure と同じ見た目に */
.blog-content .wp-block-image { margin: 0 0 32px; }
.blog-content .wp-block-image img { width: 100%; border-radius: var(--radius-card, 18px); border: 1px solid var(--color-border); display: block; }
.blog-content .wp-block-image figcaption { margin: 10px 0 0; font-size: 13px; color: var(--color-text-sub); text-align: center; }
/* ページ送り */
.pagination { margin: 32px 0; }
.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 14px; background: #fff; }
.pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
/* Contact Form 7 */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid-tip { font-size: 13px; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 24px 0 0; padding: 12px 16px; border-radius: 4px; font-size: 14px; }
.wpcf7-spinner { vertical-align: middle; }
/* ページ内リンク（#about、疾患ページの各項目など）で見出しが追従ヘッダーの下に隠れないように */
html { scroll-padding-top: 110px; }
@media (max-width: 1180px) {
  html { scroll-padding-top: 94px; }
}

/* treatment（治療内容） */
.treatment-page .treatment-index { margin: 0 0 8px; padding: 20px 24px; background: var(--color-cream); border-radius: 8px; }
.treatment-page .treatment-index ul { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.treatment-page .treatment-index a {
  display: block; padding: 6px 18px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff;
  font-size: 15px; line-height: 1.6; color: var(--color-primary-dark); text-decoration: none; transition: background .2s, color .2s;
}
.treatment-page .treatment-index a:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.treatment-page .treatment-section h2:first-child { margin-top: 56px; }
.treatment-page .treatment-section h2 { font-size: 24px; }
.treatment-page .treatment-section h3 { font-size: 19px; margin: 36px 0 12px; }
.treatment-page .treatment-section h4 { margin: 28px 0 8px; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--color-primary-dark); }
.treatment-figure, .treatment-figure-pair { margin: 0 0 28px; }
.treatment-figure img, .treatment-figure-pair img { display: block; width: 100%; height: auto; border-radius: 12px; object-fit: cover; }
.treatment-figure img { aspect-ratio: 16 / 7; }
.treatment-figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.treatment-figure-pair img { aspect-ratio: 3 / 2; }
.treatment-page .treatment-box { margin: 32px 0; padding: 24px 28px; background: var(--color-cream); border-radius: 8px; }
.treatment-page .treatment-box .treatment-box-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--color-primary-dark); }
.treatment-page .treatment-box > p:last-child { margin-bottom: 0; }
.treatment-page .treatment-box--left .treatment-box-title { margin-bottom: 4px; font-size: 20px; }
.treatment-page .treatment-box--left h4:first-of-type { margin-top: 20px; }
.treatment-page .treatment-consult { margin-top: 28px; padding: 16px 20px; border-left: 4px solid var(--color-primary-dark); background: var(--color-sky-100); border-radius: 0 8px 8px 0; font-weight: 500; }
.treatment-page .treatment-subtitle { margin: 16px 0 6px; font-size: 16px; font-weight: 700; color: var(--color-text); }
.treatment-page .treatment-section ul { margin: 0 0 18px; padding-left: 1.4em; }
.treatment-page .treatment-section ul li { list-style: disc; font-size: 17px; line-height: 1.85; color: var(--color-text); }
.treatment-page .treatment-steps { margin: 0 0 24px; padding: 0; counter-reset: step; }
.treatment-page .treatment-steps li { position: relative; margin: 0 0 12px; padding: 14px 18px 14px 60px; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; font-size: 17px; line-height: 1.85; color: var(--color-text); counter-increment: step; list-style: none; }
.treatment-page .treatment-steps li::before { content: counter(step); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary-dark); color: #fff; font-size: 15px; font-weight: 700; line-height: 30px; text-align: center; }
.treatment-page .treatment-steps strong { display: block; margin-bottom: 2px; color: var(--color-primary-dark); }
.treatment-page .treatment-method { margin: 0 0 8px; }
@media (max-width: 600px) {
  .treatment-page .treatment-index { padding: 16px; }
  .treatment-page .treatment-section h2 { font-size: 21px; }
  .treatment-figure-pair { grid-template-columns: 1fr; gap: 12px; }
  .treatment-figure img { aspect-ratio: 3 / 2; }
  .treatment-page .treatment-box { padding: 20px 18px; }
  .treatment-page .treatment-steps li { padding: 14px 14px 14px 52px; }
  .treatment-page .treatment-steps li::before { left: 12px; }
}

/* results（院長の手術実績） */
.results-page .results-year h2 { font-size: 24px; }
.results-total { display: flex; align-items: baseline; gap: 16px; margin: 0 0 12px; padding: 20px 28px; background: var(--color-sky-100); border-radius: 8px; }
.results-total-label { font-size: 17px; font-weight: 700; color: var(--color-primary-dark); letter-spacing: .08em; }
.results-total-num { font-family: var(--font-serif); font-size: 44px; font-weight: 500; line-height: 1.2; color: var(--color-primary-dark); }
.results-total-num small, .results-count small { margin-left: 2px; font-size: 16px; font-weight: 500; }
.doctor-page .results-note { margin: 0 0 24px; font-size: 14px; line-height: 1.8; color: var(--color-text-sub); }
.results-list { margin: 0 0 24px; padding: 0; }
.results-row { display: grid; grid-template-columns: minmax(0, 18em) minmax(0, 1fr) 3.6em; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.results-name { font-size: 16px; line-height: 1.6; color: var(--color-text); }
.results-bar { display: block; height: 14px; border-radius: 7px; background: var(--color-cream-2); overflow: hidden; }
.results-bar i { display: block; height: 100%; border-radius: 7px; background: var(--color-primary-dark); }
.results-count { font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 1.4; text-align: right; color: var(--color-primary-dark); white-space: nowrap; }
.results-count small { font-family: var(--font-base); font-size: 13px; }
@media (max-width: 700px) {
  .results-page .results-year h2 { font-size: 21px; }
  .results-total { padding: 16px 18px; gap: 12px; }
  .results-total-num { font-size: 36px; }
  .results-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; }
  .results-bar { grid-column: 1 / -1; grid-row: 2; }
  .results-count { grid-column: 2; grid-row: 1; }
}

/* スマホ・タブレット（ハンバーガーメニュー幅）：WEB予約／LINEで予約するを画面下部に固定表示（PCは右上の .float-reserve） */
@media (max-width: 1180px) {
  .float-reserve {
    display: flex; flex-direction: row; gap: 0; position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 90;
    padding-bottom: env(safe-area-inset-bottom); background: #fff; box-shadow: 0 -4px 16px rgba(21,63,85,.16);
  }
  .float-reserve .reserve-btn {
    flex: 1; width: auto; min-width: 0; height: 64px; border: 0; border-radius: 0; box-shadow: none;
    flex-direction: row; gap: 8px; font-size: 17px;
  }
  .float-reserve .reserve-btn svg { width: 28px; height: 28px; }
  .float-reserve .reserve-btn:hover { transform: none; }
  .float-info { display: none; }
  /* 固定バーでフッターの最下部が隠れないようにする */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* reCAPTCHAのバッジが固定バー（LINEボタン）に重ならないよう、バーの上に出す */
  .grecaptcha-badge { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}

/* about-overview：院内のご案内（施設ごとに写真2枚＋コメント） */
.facility-guide { margin: 72px 0 0; }
.facility-guide > h2 {
  margin: 0 0 32px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border);
  font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--color-primary-dark);
}
.facility-block {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "photos" "text";
  row-gap: 14px; margin: 0 0 52px;
}
.facility-block h3 {
  grid-area: title; margin: 0; padding-left: 14px; border-left: 4px solid var(--color-primary-dark);
  font-family: var(--font-serif); font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--color-text);
}
.facility-photos { grid-area: photos; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.facility-photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.facility-text { grid-area: text; margin: 0; font-size: 17px; line-height: 1.95; color: var(--color-text); }
/* リハビリ機器：写真が5〜6枚なので3列。コメントは写真の下 */
.facility-photos--5, .facility-photos--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facility-block--equipment .facility-text { max-width: 640px; }
/* 広い画面：写真2枚を左、コメントを右（21文字×3行ほどの細い枠）。1つおきに左右を入れ替える。
   右上の固定ボタン（約230px幅）と重ならないよう、1380px以上のときだけ本文より左右に広げる */
@media (min-width: 1380px) {
  .facility-guide { margin-left: -100px; margin-right: -100px; }
  .facility-block:not(.no-text):not(.facility-block--equipment) { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; grid-template-areas: "title title" "photos text"; align-items: center; }
  .facility-block:not(.no-text):not(.facility-block--equipment):nth-of-type(even) { grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "title title" "text photos"; }
}
@media (max-width: 600px) {
  .facility-guide { margin-top: 56px; }
  .facility-guide > h2 { font-size: 21px; }
  .facility-block { margin-bottom: 40px; }
  .facility-block h3 { font-size: 18px; }
  .facility-photos { grid-template-columns: minmax(0, 1fr); }
  .facility-photos--5, .facility-photos--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .facility-text { font-size: 16px; }
}