/* ============================================================
   Prenatal Clinic Fukuoka — Pre-opening site (Presite)
   Implemented from Figma (node 1:2). Mobile-first responsive.
   Brand red #bd3a2b, surface #fff7f3.
   English: GT Alpina Condensed Medium
   Japanese headings/labels: Zen Old Mincho (Bold)
   Japanese body copy: Zen Kaku Gothic New (Medium)
   ============================================================ */

@font-face {
  font-family: "GT Alpina Condensed";
  src: url("fonts/GT-Alpina-Condensed-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Alpina Condensed";
  src: url("fonts/GT-Alpina-Condensed-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Alpina Condensed";
  src: url("fonts/GT-Alpina-Condensed-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg:        #fff7f3;   /* page surface */
  --brand:     #bd3a2b;   /* terracotta red */
  --band:      #ffffff;   /* reservation band */
  --jp-body:   #867979;   /* long JP descriptive copy */
  --note:      #696060;   /* reservation note */
  --muted:     #4f4f4f;   /* map placeholder label */
  --map:       #efe7df;   /* map placeholder fill (warm, was #d9d9d9) */
  --rule:      rgba(189, 58, 43, 0.30);  /* soft section dividers */
  --rule-solid:#bd3a2b;

  --font-en:        "GT Alpina Condensed", "Cormorant Garamond", Georgia, serif;
  --font-mincho:    "Zen Old Mincho", "GT Alpina Condensed", serif;
  --font-gothic:    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;

  --pad: clamp(20px, 4.2vw, 60px);
  --maxw: 1320px;

  --header-h: 92px;   /* fallback; refined by JS to the real header height */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--brand);
  font-family: var(--font-en);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* offset for the fixed header so content starts below it */
  padding-top: var(--header-h);
}
img { display: block; max-width: 100%; }

/* Shared container */
.wrap {
  max-width: calc(var(--maxw) + var(--pad) * 2);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* Visually-hidden (screen-reader / SEO h1) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Eyebrow label: "SERVICES / 診療内容" pattern (some are <h2> for semantics) */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  font-weight: inherit;
}
.eyebrow .en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.02em;
  color: var(--brand);
  white-space: nowrap;
}
.eyebrow .slash { color: var(--brand); font-family: var(--font-en); font-size: clamp(16px, 1.6vw, 20px); }
.eyebrow .jp {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--brand);
}

/* ===== HEADER (fixed) ===================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;            /* top:0; left:0; right:0 */
  z-index: 100;
  background: var(--bg);
  /* equal top/bottom breathing room */
  padding-block: clamp(16px, 2.4vw, 26px);
  /* thin terracotta rule that fades in once scrolled */
  border-bottom: 1px solid transparent;
  transition: border-color 360ms cubic-bezier(0.32, 0.08, 0.24, 1);
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule);
}
.site-header .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
}
.open-date {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: 0.06em;
  justify-self: start;
}
.wordmark {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 40px);
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  justify-self: center;
}
.header-cta { justify-self: end; }

/* ===== Reservation pill (header) — INACTIVE =============== */
.res-pill {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: 999px;
  padding: clamp(7px, 0.9vw, 9px) clamp(18px, 2vw, 30px);
  white-space: nowrap;
}

/* ===== HERO =============================================== */
.hero {
  padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px);
}
.hero-mark {
  width: min(432px, 72vw);
  height: auto;
  margin: 0 auto clamp(28px, 4vw, 44px);
}
.hero-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.7vw, 9px);
  text-align: center;
}
.hero-addr {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(12px, 1.1vw, 15px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  justify-self: start;
}
.hero-tagline {
  font-family: var(--font-en);
  font-weight: 500;
  /* match the "PRENATAL CLINIC FUKUOKA" wordmark size */
  font-size: clamp(20px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}

/* ===== RESERVATION BAND =================================== */
.res-band {
  background: var(--band);
  padding-block: clamp(28px, 4vw, 40px);
}
.res-band .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.res-intro { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 14px); }
.res-intro .eyebrow { gap: 10px; }
.res-copy {                               /* same treatment as the 出生前診断 lead */
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--note);
}
.res-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.res-buttons { display: flex; gap: clamp(12px, 1.6vw, 20px); flex-wrap: wrap; }

.res-btn {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 16px;
  border-radius: 999px;
  padding: 15px clamp(28px, 3vw, 44px);
  min-width: 200px;
  text-align: center;
  white-space: nowrap;
}
.res-btn--filled { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.res-btn--outline { background: transparent; color: var(--brand); border: 1px solid var(--brand); }

/* INACTIVE state for all reservation controls */
.is-inactive {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.1);
}
.res-soon {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--note);
  max-width: 36ch;
  text-align: right;
}

/* ===== SECTION scaffolding ================================ */
.section { padding-block: clamp(48px, 6vw, 72px); }
.section > .wrap > .eyebrow { margin-bottom: clamp(28px, 3.6vw, 44px); }

/* ===== SERVICES ========================================== */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 0;
}
.svc {
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}
/* vertical divider between the two columns */
.services-grid .svc:nth-child(odd) { padding-right: clamp(16px, 3vw, 56px); }
.services-grid .svc:nth-child(even) {
  padding-left: clamp(16px, 3vw, 56px);
  border-left: 1px solid var(--rule);
}
.svc-head {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 20px);
  color: var(--brand);
  margin: 0 0 6px;
}
.svc-sub {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--brand);
  margin: 0 0 14px;
}
.svc-body {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  color: var(--jp-body);
  max-width: 44ch;
}
.svc-note {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 13px;
  color: var(--note);
}

/* ===== PHYSICIAN ========================================= */
.phys-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.phys-id { display: flex; flex-direction: column; }
.phys-role .jp { font-family: var(--font-mincho); font-weight: 700; font-size: 15px; color: var(--brand); }
.phys-role .en { font-family: var(--font-en); font-weight: 500; font-size: clamp(15px, 1.4vw, 17px); letter-spacing: 0.04em; color: var(--brand); margin-top: 4px; }
.phys-name { margin-top: clamp(10px, 1.4vw, 16px); }
.phys-name .jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: 0.06em; color: var(--brand); }
.phys-name .en { font-family: var(--font-en); font-weight: 500; font-size: clamp(16px, 1.5vw, 19px); letter-spacing: 0.02em; color: var(--brand); margin-top: 6px; }

/* Certifications — styled as a credential list under the name */
.phys-creds {
  margin-top: clamp(18px, 2.4vw, 28px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--rule);
}
.phys-creds-label {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--brand);
  margin-bottom: 10px;
}
.phys-creds-list { list-style: none; margin: 0; padding: 0; }
.phys-creds-list li {
  position: relative;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.5;
  color: var(--jp-body);
  padding: 4px 0 4px 16px;
}
.phys-creds-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.78em;
  width: 6px; height: 6px;
  border: 1px solid var(--brand);
  border-radius: 999px;
}

/* ===== ACCESS & HOURS ==================================== */
.access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.addr-block { font-family: var(--font-mincho); font-weight: 700; color: var(--brand); }
.addr-name { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.8; }
.addr-zip  { font-size: clamp(15px, 1.5vw, 20px); line-height: 1.8; }
.tel-row { margin-top: clamp(20px, 2.6vw, 32px); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tel-label { font-family: var(--font-en); font-weight: 500; font-size: 18px; }
.tel-num { font-family: var(--font-en); font-weight: 500; font-size: 18px; letter-spacing: 0.01em; }
.fax-row { font-family: var(--font-en); font-weight: 500; font-size: 18px; margin-top: 8px; }

.hours-label {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 15px;
  color: var(--brand);
  margin-top: clamp(28px, 3.4vw, 40px);
  margin-bottom: 6px;
}
.hours-list { display: flex; flex-direction: column; }
.hours-list .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
}
.hours-list .row:first-child { border-top: 1px solid var(--rule); }
.hours-list .days { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(16px, 1.6vw, 20px); color: var(--brand); }
.hours-list .days.sm { font-size: 16px; }
.hours-list .time { font-family: var(--font-en); font-weight: 500; font-size: clamp(18px, 1.9vw, 23px); color: var(--brand); }
.hours-list .time.closed { font-family: var(--font-mincho); font-weight: 700; font-size: 16px; }

/* Map placeholder */
.map-ph {
  background: var(--map);
  border: 1px solid var(--rule);
  aspect-ratio: 630 / 353;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.map-ph span {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--muted);
  padding: 16px;
}

/* Google Maps embed — minimal: fills the same box as the placeholder, thin rule, no chrome */
.map-embed {
  display: block;
  width: 100%;
  aspect-ratio: 630 / 353;
  border: 1px solid var(--rule);
}

/* Weekly hours grid — always fits its column (same width as the map), never cut off */
.hours-table-wrap { margin-top: clamp(24px, 3vw, 28px); }
.hours-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.hours-table th, .hours-table td {
  border: 1px solid var(--brand);
  text-align: center;
  vertical-align: middle;
  padding: clamp(5px, 0.9vw, 10px) 1px;
  overflow: hidden;
}
.hours-table thead th {
  padding-block: clamp(7px, 1vw, 12px);
}
.hours-table .th-en { font-family: var(--font-en); font-weight: 500; font-size: clamp(11px, 1.5vw, 20px); color: var(--brand); display: block; }
.hours-table .th-jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(10px, 1.3vw, 18px); color: var(--brand); display: block; margin-top: 2px; }
.hours-table td {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(10.5px, 1.5vw, 19px);
  color: var(--brand);
  line-height: 1.35;
  height: clamp(46px, 7vw, 64px);
}
.hours-table td .t { display: block; }
/* Closed day: diagonal slash */
.hours-table td.closed {
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.6px), var(--brand) calc(50% - 0.6px),
      var(--brand) calc(50% + 0.6px), transparent calc(50% + 0.6px));
}

/* ===== FOOTER ============================================ */
.site-footer {
  padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 80px);
  text-align: center;
}
.site-footer .wordmark {
  font-size: clamp(18px, 2.2vw, 27px);
  white-space: normal;
}

::selection { background: var(--brand); color: var(--bg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .phys-grid { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .access-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Header: wordmark on its own centered line */
  .site-header .wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "date"
      "mark";
    row-gap: 12px;
  }
  .open-date { grid-area: date; }
  .wordmark { grid-area: mark; white-space: normal; }

  /* Hero footer stacks */
  .hero-foot { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .hero-addr { justify-self: center; text-align: center; }
  .hero-tagline { grid-column: auto; white-space: normal; }

  /* Reservation band stacks; actions go full width and left-aligned */
  .res-band .wrap { grid-template-columns: 1fr; }
  .res-actions { align-items: stretch; }
  .res-buttons { flex-direction: column; }
  .res-btn { min-width: 0; width: 100%; }
  .res-soon { text-align: left; max-width: none; }

  /* Services collapse to one column; remove the vertical rule */
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .svc:nth-child(odd),
  .services-grid .svc:nth-child(even) { padding-inline: 0; border-left: none; }
  .svc-body { max-width: none; }
}

@media (max-width: 420px) {
  .hours-list .row { grid-template-columns: 92px 1fr; gap: 10px; }
}

/* ============================================================
   ADDITIONS (2026-06-15 revision)
   ============================================================ */

/* Hero — Japanese tagline under the English one */
.hero-tagline-jp {
  font-family: var(--font-mincho);
  /* match the gravitas of the English tagline: same size, heavier weight */
  font-weight: 700;
  font-size: clamp(20px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: 0.12em;
  color: var(--brand);
  margin: 0;
}

/* ===== SERVICES — stacked editorial blocks ===== */
.services { display: flex; flex-direction: column; }
.svc-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: clamp(20px, 4vw, 64px);
  padding-block: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--rule);
}
.svc-block:first-child { border-top: none; padding-top: 0; }
.svc-title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--brand);
  letter-spacing: 0.04em;
  margin: 0;
}
.svc-content { max-width: none; }
.svc-lead {                               /* mincho lead; slightly darker grey so it doesn't read too light */
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--note);
  margin: 0 0 clamp(22px, 2.8vw, 32px);
}
.svc-list { margin: 0; }
.svc-item { margin: 0 0 clamp(16px, 2vw, 22px); }
.svc-item:last-child { margin-bottom: 0; }

/* Two-column grid for the test items (compact on desktop, 1-col when narrow) */
.svc-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: clamp(28px, 3vw, 56px);
  row-gap: clamp(22px, 2.6vw, 34px);
}
.svc-list--grid .svc-item { margin: 0; }
.svc-list dt {
  font-family: var(--font-mincho);
  font-weight: 900;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--brand);
  margin: 0 0 6px;
}
.svc-list dd {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(13.5px, 1.05vw, 14.5px);
  line-height: 1.85;
  color: var(--jp-body);
  margin: 0;
}
.svc-aster {
  display: block;
  margin-top: 0.8em;
  color: var(--jp-body);   /* match the surrounding description text */
}
.svc-note {                               /* QF-PCR note (overrides earlier .svc-note) */
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.85;
  color: var(--jp-body);
  margin: clamp(18px, 2.2vw, 24px) 0;
  padding: 14px 18px;
  background: rgba(189, 58, 43, 0.04);
  border-left: 2px solid var(--rule);
}
.svc-pending {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 14px;
  color: var(--note);
  margin: 0;
}

/* QF-PCR note placed inside the test grid, after 羊水検査 / before 中期 — full width */
.svc-list--grid .svc-note-row { grid-column: 1 / -1; }
.svc-list--grid .svc-note-row .svc-note { margin: 0; }

/* 妊婦健診 / 一般婦人科診療 — body paragraphs, sub-label, bullet list */
.svc-para {                               /* same treatment as the 出生前診断 lead */
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--note);
  margin: 0 0 0.7em;
}
.svc-content > .svc-para:last-child { margin-bottom: 0; }
/* consecutive intro sentences read as one paragraph — drop the gap between them */
.svc-para:has(+ .svc-para) { margin-bottom: 0; }
.svc-sublabel {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 17px);
  letter-spacing: 0.04em;
  color: var(--brand);
  margin: 1.4em 0 6px;
}
/* Lists reuse the price-table look: dotted row separators, no markers/amounts */
.svc-bullets {
  list-style: none;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  padding: 0;
}
.svc-bullets li {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.5;
  color: var(--jp-body);
  padding: 11px 0;
  border-bottom: 1px dotted var(--rule);
}
.svc-bullets li:first-child { border-top: 1px dotted var(--rule); }
.svc-content > .svc-bullets:last-child { margin-bottom: 0; }

/* 主な診療内容: short items in a 5×2 grid (2 per row) with a center divider */
.svc-bullets--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.svc-bullets--cols li:nth-child(2) { border-top: 1px dotted var(--rule); }
.svc-bullets--cols li:nth-child(odd) { padding-right: clamp(20px, 3vw, 40px); }
.svc-bullets--cols li:nth-child(even) {
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px dotted var(--rule);
}

/* ===== Price table ===== */
.price { margin-top: clamp(24px, 3vw, 36px); }
.price-title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--brand);
  margin: 0 0 12px;
}
.price-sub {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--note);
  letter-spacing: 0;
}
.price-list { margin: 0; }
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dotted var(--rule);
}
.price-row:first-child { border-top: 1px dotted var(--rule); }
.price-row dt {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.5;
  color: var(--jp-body);
  margin: 0;
}
.price-row dd {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--brand);
  margin: 0;
  white-space: nowrap;
}

/* ===== Physician bio ===== */
.phys-bio {                               /* same treatment as the 出生前診断 lead */
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--note);
  max-width: none;
  margin: 0;
}

/* ===== Access — e-mail row ===== */
.mail-row {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 18px;
  color: var(--brand);
  margin-top: 8px;
}

/* ===== Reservation — notice + policy links ===== */
.res-notes { grid-column: 1 / -1; margin-top: clamp(24px, 3vw, 36px); }
.res-notice {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(12.5px, 1vw, 13.5px);
  line-height: 1.9;
  color: var(--note);
  margin: 0 0 clamp(16px, 2vw, 20px);
  max-width: 94ch;
}
.res-policies {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.res-policies a {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 14px);
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 300ms ease;
}
.res-policies a:hover { border-bottom-color: var(--brand); }
.res-policies .is-pending {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 14px);
  color: var(--note);
  opacity: 0.6;
}

/* ===== Responsive for the new blocks ===== */
@media (max-width: 720px) {
  .svc-block { grid-template-columns: 1fr; gap: 14px; }
  .svc-content { max-width: none; }
}

/* ============================================================
   DOCUMENT PAGES (privacy policy, web-monshin notice)
   ============================================================ */
body.doc-body { padding-top: 0; }   /* no fixed header on doc pages */
.doc-header {
  padding: clamp(20px, 4vw, 32px) var(--pad);
  border-bottom: 1px solid var(--rule);
}
.doc-home {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: 0.06em;
  color: var(--brand);
  text-decoration: none;
}
.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) var(--pad) clamp(64px, 10vw, 120px);
}
.doc-title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--brand);
  margin: 0 0 8px;
}
.doc-subtitle {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--note);
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.doc h2 {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--brand);
  margin: clamp(28px, 3.4vw, 40px) 0 10px;
}
.doc p {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--jp-body);
  margin: 0 0 1em;
}
.doc ul {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--jp-body);
  margin: 0 0 1em;
  padding-left: 1.4em;
}
.doc li { margin: 0 0 4px; }
.doc .contact-block {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--jp-body);
}
.doc-back {
  display: inline-block;
  margin-top: clamp(32px, 5vw, 48px);
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 14px;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 300ms ease;
}
.doc-back:hover { border-bottom-color: var(--brand); }

/* ============================================================
   ADDITIONS (2026-06-16 part II)
   ============================================================ */

/* Price table — title and (税抜) on the same line, (税抜) right-aligned */
.price-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.price-head .price-title { margin: 0; }
.price-tax {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--brand);            /* same red as the prices */
  white-space: nowrap;
  margin: 0 0 0 auto;             /* always right-aligned, incl. when wrapped on mobile */
}

/* ===== Reservation — copy + WEB問診 note ===== */
.res-band .wrap { align-items: start; }
.res-monshin {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(12.5px, 1vw, 13.5px);
  line-height: 1.9;
  color: var(--note);
  margin: clamp(14px, 1.8vw, 18px) 0 0;
  max-width: 62ch;
}

/* Reservation notices — 2×2 grid (notes 1&2 left column, 3&4 right column) */
.res-notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  align-items: start;
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: clamp(14px, 2vw, 22px);
  margin-bottom: clamp(22px, 3vw, 32px);
}
.res-notes-grid .res-notice { margin: 0; max-width: none; }
@media (max-width: 720px) {
  .res-notes-grid { grid-template-columns: 1fr; grid-auto-flow: row; }
}

/* ===== Reservation — WEB予約 / WEB問診 / 電話予約 banners ===== */
.res-banners {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.res-banner {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 16px;
  border-radius: 999px;
  padding: 14px clamp(26px, 2.8vw, 44px);
  min-width: 240px;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: opacity 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
button.res-banner {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.res-banner--filled { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.res-banner--outline { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.res-banner:hover { opacity: 0.82; }
.res-tel-banner { display: flex; align-items: center; gap: 16px; }
.res-tel-mobile { display: none; }
.res-tel-num {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.01em;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}

/* Policy links rendered as buttons (open modals) */
.res-policies .policy-link {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 14px);
  color: var(--brand);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 2px;
  cursor: pointer;
  transition: border-color 300ms ease;
}
.res-policies .policy-link:hover { border-bottom-color: var(--brand); }

/* ===== Policy modals ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 30, 27, 0.5);
}
.modal-panel {
  position: relative;
  width: min(760px, 50vw);
  height: min(600px, 80vh);
  min-width: 320px;
  background: var(--bg);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 70px rgba(45, 30, 27, 0.28);
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 34px);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  margin-bottom: clamp(14px, 1.8vw, 20px);
  padding-bottom: clamp(12px, 1.6vw, 16px);
  border-bottom: 1px solid var(--rule);
}
.modal-head .modal-title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.modal-close {
  flex-shrink: 0;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brand);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 22px;
  cursor: pointer;
  transition: border-color 200ms ease;
}
.modal-close:hover { border-color: var(--brand); }
.modal-title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 25px);
  letter-spacing: 0.04em;
  color: var(--brand);
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  padding-bottom: clamp(12px, 1.6vw, 16px);
  border-bottom: 1px solid var(--rule);
}
.modal-head .modal-close { margin: 0; }
.modal-body {            /* gray Mincho content, scrolls within the panel */
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
}
.modal-body p {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--note);
  margin: 0 0 1em;
}
.modal-sub { font-weight: 700; }
.modal-body h3 {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 16.5px);
  letter-spacing: 0.03em;
  color: var(--note);
  margin: clamp(18px, 2.2vw, 26px) 0 8px;
}
.modal-body ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--note);
}
.modal-body li { margin: 0 0 4px; }

/* External-link modals (WEB予約 / WEB問診) — agree checkbox + proceed CTA */
.modal--external .modal-footer {
  flex-direction: column;
  align-items: stretch;
  gap: clamp(14px, 2vw, 20px);
}
.modal-agree {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin: 0;
  justify-content: flex-start;
}
.modal-agree-check {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.modal-agree-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(189, 58, 43, 0.38);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.modal-agree-check:focus-visible + .modal-agree-box {
  outline: 2px solid rgba(189, 58, 43, 0.35);
  outline-offset: 2px;
}
.modal-agree-check:checked + .modal-agree-box {
  border: 1.5px solid var(--brand);
  background: var(--bg);
}
.modal-agree-check:checked + .modal-agree-box::after {
  content: "";
  display: block;
  width: 6px;
  height: 11px;
  border: solid var(--brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.modal-agree-label {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 16px);
  letter-spacing: 0.04em;
  color: var(--brand);
  line-height: 1.6;
}
.modal-footer {
  flex-shrink: 0;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--rule);
  margin-top: clamp(12px, 1.6vw, 18px);
  display: flex;
  justify-content: center;
}
.modal-footer .modal-proceed { min-width: 240px; }
.modal-proceed.is-disabled {
  background: #b5aaa6;
  border-color: #b5aaa6;
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}
.modal-proceed:not(.is-disabled):hover { opacity: 0.82; }

@media (max-width: 720px) {
  /* Banners go full width on mobile */
  .res-banners { align-items: stretch; }
  .res-banner { min-width: 0; }
  .res-tel-banner {
    display: block;
    width: 100%;
  }
  .res-tel-num,
  .res-tel-btn { display: none; }
  .res-tel-mobile {
    display: block;
    width: 100%;
    min-width: 0;
  }
  /* Reservation modals — full-screen on small viewports */
  .modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .modal-panel {
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  .modal-footer .modal-proceed { width: 100%; min-width: 0; }
}

/* ============================================================
   Reservation — title left / buttons + explanation right on
   desktop (all left-aligned); single centered column on mobile.
   Direct-link banners (no modal/consent gate). 2026-06-20 (rev)
   ============================================================ */
.res-band .res-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  text-align: left;
}
.res-band .res-grid .res-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 14px);
  align-items: flex-start;
}
.res-band .res-grid .res-intro .eyebrow { gap: 10px; }
.res-band .res-grid .res-copy { margin: 0; }
.res-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 20px);
}
.res-main .res-banner {
  width: 100%;
  max-width: 340px;
  min-width: 0;
}
.res-band .res-note {                     /* same treatment for left + right notes */
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(12.5px, 1vw, 13.5px);
  line-height: 1.9;
  color: var(--note);
  text-align: left;
  width: 100%;
  margin: 0;
}
/* cancellation note in the brand red so the policy gets read */
.res-band .res-note--cancel { color: var(--brand); }
/* Policy links: full-width row spanning the whole reservation area, left-aligned,
   separated by a hairline rule. */
.res-grid > .res-policies {
  grid-column: 1 / -1;
  list-style: none;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 8px clamp(16px, 2.2vw, 32px);
  width: 100%;
}
.res-grid > .res-policies li { display: inline-flex; }

/* Mobile: single column, left-aligned (matching the sections above the reservation) */
@media (max-width: 720px) {
  .res-band .res-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 28px);
  }
}

/* Reservation: WEB問診 lead-in line + extra spacing before the phone banner */
.res-main .res-lead {                     /* same font treatment as .res-copy */
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--note);
  text-align: left;
  width: 100%;
  margin: 0;
}
.res-main .res-banner.is-spaced { margin-top: clamp(8px, 1.6vw, 16px); }

/* Left notices: stack with their own gap; on desktop, bottom-align them with
   the WEB問診 button (push to the bottom of the column). Mobile is unchanged. */
.res-intro-notes {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
  width: 100%;
}
@media (min-width: 721px) {
  .res-band .res-grid { align-items: stretch; }
  .res-intro-notes { margin-top: auto; }
}

/* ============================================================
   INFORMATION / お知らせ — the whole section sits inside one
   light-red callout (padding 36); layout grammar inside matches
   the service blocks (title left, content right).
   ============================================================ */
.info-callout {
  background: rgba(189, 58, 43, 0.055);   /* 薄い赤 */
  border: 1px solid var(--rule);
  padding: 24px;
}
.info-callout > .eyebrow { margin-bottom: clamp(24px, 3vw, 36px); }
.info-callout .svc-block { padding-block: 0; border-top: none; }

/* 「重要」 pill — same treatment as the banners, smaller; white bg */
.info-pill {
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: 0.12em;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 4px 16px;
  white-space: nowrap;
}

.info-sublabel {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--brand);
  margin: 0 0 10px;
}

/* 電話対応可能日 — two 4-row tables side by side (stacked on mobile) */
.info-tel-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(14px, 1.8vw, 24px);
  align-items: start;
}
.info-tel-table {
  border-collapse: collapse;
  width: 100%;
}
.info-tel-table th,
.info-tel-table td {
  border: 1px solid var(--brand);
  padding: clamp(6px, 0.9vw, 9px) clamp(8px, 1.2vw, 14px);
  text-align: left;
  vertical-align: middle;
  background: var(--bg);
}
.info-tel-table th {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--brand);
  white-space: nowrap;
  width: 8.5em;
}
.info-tel-table td {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(12.5px, 1.05vw, 15px);
  line-height: 1.4;
  color: var(--brand);
}
.info-aster {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.8;
  color: var(--note);
  margin: 10px 0 clamp(22px, 2.8vw, 32px);
}

@media (max-width: 720px) {
  .info-callout { padding: 24px 20px; }
  .info-tel-tables { grid-template-columns: 1fr; row-gap: 0; }
  /* stacked: hide the double border between the two tables */
  .info-tel-tables .info-tel-table + .info-tel-table tr:first-child th,
  .info-tel-tables .info-tel-table + .info-tel-table tr:first-child td { border-top: none; }
}
@media (max-width: 480px) {
  .info-tel-table th { width: auto; white-space: normal; }
}