/* =========================================================
   Shiba International Coloproctological Clinic — redesign
   Mobile-first, no framework. Breakpoints: 640 / 900 / 1160
   ========================================================= */

/* Palette & typography follow the tmsc.jp reference: DM Serif Display
   headings, Lato body, royal blue, orange urgent accent, near-black footer. */
:root {
  --blue: #0e4ce3;
  --blue-dark: #0248b7;
  --blue-deep: #0a2f73;
  --navy: #232326;
  --ink: #3c3c41;
  --muted: #59595e;
  --line: #e3e6ef;
  --bg: #ffffff;
  --bg-alt: #f4f5f8;
  --bg-soft: #dee4f7;
  --accent: #f05a24;
  --accent-dark: #d84a17;
  --ok: #0e4ce3;
  --warn: #c07700;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(10, 47, 115, .06), 0 8px 24px rgba(10, 47, 115, .08);
  --shadow-lg: 0 2px 4px rgba(10, 47, 115, .08), 0 16px 48px rgba(10, 47, 115, .14);
  --font: "Lato", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-display: "DM Serif Display", "Noto Serif JP", Georgia, "Times New Roman", serif;
  --container: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  overflow-x: clip;
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-dark); }
a:hover { color: var(--blue); }

h1, h2 {
  font-family: var(--font-display); font-weight: 400;
  line-height: 1.2; color: var(--blue-dark); margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.2rem); }
h3 { line-height: 1.3; color: var(--navy); font-weight: 700; font-size: 1.15rem; margin: 0 0 .5em; }

.sh-container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

svg { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

/* component headings stay sans-serif */
.info-card h2, .card-body h2, .card-body h3, .facility-body h2,
.footer-col h2, .aside-card h2, .step h2 { font-family: var(--font); }
.card-body h2, .card-body h3, .facility-body h2, .aside-card h2, .step h2 { color: var(--navy); font-weight: 700; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.2em; border-radius: 999px;
  font-weight: 600; font-size: .92rem; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .75em 1.5em; font-size: 1rem; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-outline { border-color: var(--blue); color: var(--blue-dark); background: transparent; }
.btn-outline:hover { background: var(--bg-soft); }
.btn-light { background: #fff; color: var(--blue-deep); }
.btn-light:hover { background: var(--bg-soft); color: var(--blue-deep); }
.btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }

/* ---------- topbar ---------- */

.topbar { background: var(--navy); color: #d4d4da; font-size: .82rem; }
.topbar-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 2.2rem; flex-wrap: wrap; padding-block: .25rem; }
.topbar-item { display: inline-flex; align-items: center; gap: .45em; color: inherit; text-decoration: none; }
.topbar-item:hover { color: #fff; }
.topbar-spacer { flex: 1; }
@media (max-width: 639px) {
  .topbar-inner > .topbar-item:first-child { display: none; }
}

/* language dropdown */
.lang-menu { position: relative; z-index: 120; }
/* The legacy stylesheet has "button, input[type=button]... { width:260px
   !important; height:50px; font-size:24px; line-height:50px; margin:0 auto;
   text-align:center; box-shadow:...; border-radius:5px; ... }" meant for old
   form-submit buttons, but it matches any bare <button> including this one —
   width needs !important to beat theirs; the rest just need an explicit
   value since our class already outranks their bare-tag specificity. */
.lang-toggle {
  display: inline-flex; align-items: center; gap: .45em;
  width: auto !important; height: auto; margin: 0; text-align: left;
  line-height: inherit; box-shadow: none; border-radius: 0;
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  color: #fff; font: inherit; font-weight: 600;
}
.lang-toggle:hover { color: #9fd8f2; }
.lang-toggle svg { transition: transform .15s; }
.lang-menu.open .lang-toggle svg { transform: rotate(180deg); }
.lang-list {
  list-style: none; margin: 0; padding: .4rem;
  position: absolute; top: calc(100% + .45rem); right: 0; min-width: 11rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.lang-menu.open .lang-list { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-list a {
  display: block; padding: .5rem .9rem; border-radius: 6px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.lang-list a:hover { background: var(--bg-soft); color: var(--blue-deep); }
.lang-list a[aria-current="true"] { color: var(--blue-dark); font-weight: 700; }
.lang-list a[aria-current="true"]::after { content: " ✓"; }

/* ---------- header / nav ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--navy); }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.02rem; letter-spacing: -.01em; }
.brand-text span { font-size: .72rem; color: var(--muted); }

/* The legacy stylesheet has bare "header nav" / "header nav ul" /
   "header nav ul li" / "header nav ul li > a" rules (teal background,
   -0.4em letter-spacing hack, forced 1/6 widths, white text, dividers)
   that structurally match this same header > nav > ul > li > a shape
   regardless of class names. Reset each explicitly below — a single
   class on our side outranks their multi-tag selectors either way, but
   nothing here was actually declared to compete until now. */
.site-nav { margin-left: auto; background: transparent; }
.site-nav > ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; letter-spacing: normal; }
.site-nav li { display: block; width: auto; text-align: left; vertical-align: baseline; padding: 0; }
.site-nav a {
  display: block; padding: .55rem .8rem; border-radius: var(--radius-sm); border: 0;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem;
}
.site-nav a:hover { background: var(--bg-soft); color: var(--blue-deep); }
.site-nav li.active > a, .site-nav a[aria-current="page"] { color: var(--blue-dark); }

.site-nav .has-sub { position: relative; }
.sub-toggle {
  /* see the .lang-toggle comment above re: the legacy bare-button rule */
  display: none; width: auto !important; height: auto; margin: 0; text-align: left;
  line-height: inherit; box-shadow: none; border-radius: 0;
  background: none; border: 0; padding: .4rem; color: var(--muted); cursor: pointer;
  font-size: 1rem; font-weight: normal;
}
.sh-submenu {
  list-style: none; margin: 0; padding: .4rem;
  position: absolute; top: 100%; left: 0; min-width: 15rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.has-sub:hover .sh-submenu, .has-sub:focus-within .sh-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sh-submenu a { font-weight: 500; }

.header-cta { margin-left: .25rem; }
.nav-cta-mobile { display: none; }

.nav-toggle {
  /* see the .lang-toggle comment above re: the legacy bare-button rule */
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px !important; height: 44px; margin: 0; text-align: left;
  line-height: inherit; box-shadow: none; border-radius: 0; font-size: 1rem; font-weight: normal;
  padding: 10px;
  background: none; border: 0; cursor: pointer; margin-left: auto;
  position: relative; z-index: 95; /* stay clickable above the open drawer */
}
.nav-toggle span { display: block; height: 2.5px; background: var(--navy); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 899px) {
  /* backdrop-filter would make the header the containing block for the
     fixed nav drawer, clipping it — use a solid background on mobile */
  .site-header { backdrop-filter: none; background: #fff; }
  .header-cta span { display: none; }
  .header-cta { padding-inline: .8em; }
  .nav-toggle { display: flex; margin-left: 0; }
  .site-nav {
    /* the legacy stylesheet has a "header nav { display: none }" rule at
       max-width:800px that would otherwise beat this by default (no
       competing display value); pin it explicitly so the drawer can show. */
    display: block;
    position: fixed; inset: 0; top: 0; z-index: 90;
    margin: 0; padding: 6.5rem 1.5rem 2rem;
    background: #fff; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease, visibility .25s;
    visibility: hidden;
  }
  .site-nav.open { transform: translateX(0); visibility: visible; box-shadow: var(--shadow-lg); }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { font-size: 1.1rem; padding: .8rem .5rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-nav .has-sub { display: flex; flex-wrap: wrap; }
  .site-nav .has-sub > a { flex: 1; }
  .sub-toggle { display: block; border-bottom: 1px solid var(--line); border-radius: 0; }
  .sub-toggle svg { transition: transform .2s; }
  .sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sh-submenu {
    position: static; width: 100%; min-width: 0; box-shadow: none; border: 0;
    background: var(--bg-alt); border-radius: var(--radius-sm); margin: .25rem 0;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .has-sub.open-sub .sh-submenu { display: block; }
  .sh-submenu a { border-bottom: 0; font-size: 1rem; }
  .nav-cta-mobile { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
  .nav-cta-mobile .btn { justify-content: center; }
  body.nav-open { overflow: hidden; }
}

/* ---------- hero ---------- */

.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 22, 48, .46) 0%, rgba(10, 22, 48, .36) 60%, rgba(10, 22, 48, .5) 100%);
}
.hero-inner { padding-block: clamp(3.5rem, 10vw, 8.5rem); max-width: 50rem; margin-inline: auto; text-align: center; }
.hero-kicker {
  display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  padding: .3em .9em; border-radius: 999px; margin: 0 0 1.1rem;
}
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero-sub { font-size: clamp(1rem, .95rem + .4vw, 1.15rem); color: #e8edf6; max-width: 40rem; margin: 0 auto 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-bottom: 0; }
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; margin: 1.2rem 0 0; padding: 0; font-size: .85rem; color: #dfe5f0; }
/* Pill rather than a plain line: the hero already carries a headline, a lead and
   a button, so the credential needs to read as a badge instead of a fourth line. */
.hero-badges li {
  display: flex; align-items: center; gap: .45em;
  padding: .3em .95em; border-radius: 999px; font-weight: 600;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .28);
}
.hero-badges svg { color: #7fd4a8; }

/* ---------- info strip ---------- */

.info-strip { background: var(--bg); border-bottom: 1px solid var(--line); }
.info-strip-grid { display: grid; gap: 1px; background: var(--line); grid-template-columns: 1fr; padding-inline: 0; }
.info-card { display: flex; gap: .9rem; padding: 1.3rem clamp(1rem, 4vw, 2rem); background: var(--bg); }
.info-icon {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-soft); color: var(--blue-dark);
}
.info-icon svg { width: 1.25rem; height: 1.25rem; }
.info-card h2 { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .2em; }
.info-card p { margin: 0; font-size: .93rem; color: var(--ink); }
.info-card a { color: var(--blue-dark); }
.info-card a:hover { color: var(--blue); }
.strong-link { font-size: 1.25rem; font-weight: 700; text-decoration: none; color: var(--blue-dark); }
@media (min-width: 900px) { .info-strip-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* ---------- insurance band ---------- */

.insurance-band { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding-block: clamp(1.5rem, 4vw, 2.25rem); }
.insurance-inner { display: grid; gap: 1.1rem; align-items: center; }
.insurance-icon {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-dark); color: #fff;
}
.insurance-icon svg { width: 1.5rem; height: 1.5rem; }
.insurance-body h2 { font-family: var(--font); font-size: 1.2rem; font-weight: 700; color: var(--blue-deep); margin: 0 0 .3em; }
.insurance-body p { margin: 0; font-size: .95rem; color: var(--ink); }
.insurance-tag {
  display: inline-block; margin-bottom: .5rem; padding: .2em .7em;
  border-radius: 999px; background: var(--blue-dark); color: #fff;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.insurance-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (min-width: 900px) {
  .insurance-inner { grid-template-columns: auto 1fr auto; gap: 1.5rem; }
  .insurance-actions { justify-content: flex-end; }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.section-head p { color: var(--muted); margin: 0; }

/* ---------- notices ---------- */

.notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.notice-list > li {
  min-width: 0;
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm); background: #fff;
}
.notice-summary {
  display: grid; gap: .25rem 1.25rem; align-items: baseline; min-width: 0;
  padding: .9rem 2.8rem .9rem 1.2rem; cursor: pointer; list-style: none; position: relative;
}
.notice-summary::-webkit-details-marker { display: none; }
.notice-title { margin: 0; font-size: .95rem; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.notice-summary:hover .notice-title { color: var(--blue-dark); }
.notice-chevron {
  position: absolute; right: 1.1rem; top: 50%; width: 1.1rem; height: 1.1rem;
  margin-top: -.55rem; color: var(--blue-dark); transition: transform .2s ease;
}
.notice[open] .notice-chevron { transform: rotate(180deg); }
.notice[open] .notice-summary { border-bottom: 1px solid var(--line); }
.notice-body { padding: .9rem 1.2rem; font-size: .95rem; line-height: 1.7; overflow-wrap: anywhere; }
.notice-body p, .notice-body ul, .notice-body ol { margin: 0 0 .7rem; }
.notice-body > :last-child { margin-bottom: 0; }
.notice-body ul, .notice-body ol { padding: 0 0 0 1.2rem; list-style: disc; }
.notice-body li { margin: 0 0 .35rem; list-style: disc; } /* legacy style.css nukes list-style-type on bare li */
.notice-body a { color: var(--blue-dark); text-decoration: underline; }

/* ---------- cards ---------- */

.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1160px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

/* Two info cards on the Contact page (EN) — caps at 2 columns, unlike
   .card-grid, since there are always exactly two cards here. */
.contact-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: 1fr 1fr; } }

.card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: inherit; }
.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card-body h2, .card-body h3 { margin: 0; font-size: 1.12rem; }
.card-body p { margin: 0; font-size: .92rem; color: var(--muted); flex: 1; }
.card-more { font-weight: 600; font-size: .9rem; color: var(--blue-dark); margin-top: .5rem; }
.card:hover .card-more { color: var(--blue); }

/* ---------- split sections ---------- */

.split { display: grid; gap: 2rem; align-items: center; }
.split-media img, .split-media iframe {
  width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); border: 0;
}
.split-media iframe { aspect-ratio: 4 / 3; }
.split-body h2 { margin-bottom: .5em; }
.split-body blockquote {
  margin: 1.25rem 0; padding: .9rem 1.2rem;
  border-left: 4px solid var(--blue); background: var(--bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: var(--blue-deep);
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .split-reverse .split-media { order: 2; }
}

.check-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
.check-list li { display: flex; gap: .6em; align-items: baseline; }
.check-list svg { color: var(--ok); }

.station-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.station-list li { display: flex; gap: .6em; align-items: baseline; }
.station-list svg { color: var(--blue); }

/* ---------- hours table ---------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.hours-table {
  border-collapse: collapse; width: 100%; min-width: 34rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .95rem;
}
.hours-table th, .hours-table td { padding: .7rem .5rem; text-align: center; border: 1px solid var(--line); }
.hours-table thead th { background: var(--blue-dark); color: #fff; font-weight: 600; font-size: .85rem; }
.hours-table tbody th { background: var(--bg-alt); font-weight: 600; white-space: nowrap; padding-inline: 1rem; }
.hours-table .open { color: var(--ok); font-weight: 700; }
.hours-table .partial { color: var(--warn); font-weight: 700; }
.hours-table .closed { color: #b0bec7; }

.hours-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin: .9rem 0 0; padding: 0; font-size: .85rem; color: var(--muted); }
.hours-legend .open { color: var(--ok); font-weight: 700; }
.hours-legend .partial { color: var(--warn); font-weight: 700; }
.hours-legend .closed { color: #b0bec7; font-weight: 700; }

.note { font-size: .88rem; color: var(--muted); }

/* ---------- CTA band ---------- */

.cta-band { background: var(--bg); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.cta-band-inner { display: grid; gap: 1.25rem; justify-items: center; }
.cta-band h2 { margin-bottom: .25em; }
.cta-band p { margin: 0 auto; color: var(--muted); max-width: 34rem; }
.cta-band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* ---------- page banner ---------- */

.page-banner {
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4.25rem); text-align: center;
}
/* The banner's bottom padding and the following section's top padding stacked
   to roughly 140px on desktop, stranding the title well above the content.
   Collapse the pair into one deliberate gap. Scoped to the adjacent pair so the
   rhythm between later sections on a page is untouched. */
.page-banner { padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }
.page-banner + .section { padding-top: clamp(1.5rem, 3.5vw, 2.25rem); }

.page-banner h1 { margin: 0; }
.page-banner .lead { margin: .8rem auto 0; max-width: 46rem; color: var(--muted); font-size: clamp(.98rem, .9rem + .4vw, 1.12rem); }

/* ---------- prose / content pages ---------- */

.prose { max-width: 50rem; }
.prose h2 { margin-top: 2.25rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: .5rem; }

.pill-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.pill {
  background: var(--bg-soft); color: var(--blue-deep); border: 1px solid #c4e2f0;
  padding: .3em .9em; border-radius: 999px; font-size: .88rem; font-weight: 600;
}

.hospital-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.hospital-list li { padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ---------- price tables ---------- */

.price-table {
  border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .95rem;
  background: #fff; border: 1px solid var(--line);
}
.price-table th, .price-table td { padding: .7rem .9rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.price-table thead th { background: var(--blue-dark); color: #fff; font-weight: 600; font-size: .87rem; }
.price-table tbody tr:nth-child(even) td { background: var(--bg-alt); }
.price-table td[rowspan] { background: var(--bg-soft) !important; font-weight: 600; color: var(--blue-deep); }
.num-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.clinic-facts th { width: 11rem; background: var(--bg-soft); color: var(--blue-deep); }
.clinic-facts { min-width: 0; }

/* ---------- director ---------- */

.profile-card {
  display: grid; gap: 1.5rem; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(1.25rem, 4vw, 2.25rem);
  margin-bottom: 2.5rem;
}
.profile-card img { border-radius: var(--radius-sm); object-fit: cover; aspect-ratio: 1; width: 100%; max-width: 260px; }
.profile-role { color: var(--muted); margin-top: -.5rem; }
@media (min-width: 640px) { .profile-card { grid-template-columns: 240px 1fr; } }

.timeline-heading { margin-top: 3rem; }
.timeline { list-style: none; margin: 1.5rem 0 0; padding: 0 0 0 1rem; border-left: 3px solid var(--bg-soft); display: grid; gap: 1.4rem; }
.timeline li { position: relative; padding-left: 1.25rem; }
.timeline li::before {
  content: ""; position: absolute; left: -1.6rem; top: .4rem;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--blue);
}
.tl-year { font-weight: 800; color: var(--blue-dark); font-size: 1.05rem; }
.timeline p { margin: .15rem 0 0; }

/* ---------- facility ---------- */

.facility-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .facility-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .facility-grid { grid-template-columns: repeat(3, 1fr); } }
.facility-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.facility-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.facility-body { padding: 1.2rem 1.3rem 1.4rem; }
.facility-body h2 { font-size: 1.15rem; }
.facility-body p { margin: 0; font-size: .92rem; color: var(--muted); }

/* The JA 設備 page keeps its content in the CMS, so the card comes from the
   markup the clinic already has — .fclts wrapping an .img and an .fclts_txt —
   rather than from .facility-card markup written into a template. Same visual
   result, one source of truth.

   No !important and no undoing needed: every legacy .fclts rule in style.css is
   scoped under .page_single, which page-facility.php does not render. */

.facility-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .facility-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .facility-cards { grid-template-columns: repeat(3, 1fr); } }

.facility-cards .fclts {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.facility-cards .fclts .img { margin: 0; }
.facility-cards .fclts .img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.facility-cards .fclts .fclts_txt { padding: 1.2rem 1.3rem 1.4rem; }
/* The stored headings are h3, not the h2 the EN cards use. */
.facility-cards .fclts .fclts_txt h3 {
  font-family: var(--font); color: var(--navy); font-weight: 700;
  font-size: 1.15rem; line-height: 1.45; margin: 0 0 .6rem;
}
.facility-cards .fclts .fclts_txt p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.75; }
.facility-cards .fclts .fclts_txt p + p { margin-top: .8rem; }

/* ---------- JA inner pages: legacy CMS markup mapped to the EN components ----

   The JA pages keep their content in the CMS, so instead of rewriting the copy
   into templates the way the EN tree did, the classes the clinic already writes
   are pointed at the components the EN redesign already defines. Nothing new is
   designed here — every value below is taken from the EN rule it mirrors, named
   in the comment above each block.

   Most legacy rules were scoped under .page_single, which page.php no longer
   renders, so they simply stopped applying. The few that were never scoped
   (.pg_drctr, .pg_drctr .name, ul.abt_doctor li) do still apply and are undone
   explicitly below. */

/* Director photo + name — mirrors .profile-card / .profile-role. The legacy
   rule floats this left with a grey box-shadow; unset that so it reads as the
   EN profile card does. */
.legacy-content .pg_drctr {
  float: left; margin: 0 1.75rem 1.5rem 0; padding: 1rem; width: 260px; max-width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Square crop and max width taken from .profile-card img, so the JA page reads
   as the same photo-left / text-right composition as the EN director page. */
.legacy-content .pg_drctr img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-sm);
}
.legacy-content h3 { clear: both; }
@media (max-width: 640px) {
  .legacy-content .pg_drctr { float: none; margin: 0 auto 1.5rem; }
}
.legacy-content .pg_drctr .name {
  font-family: var(--font); font-size: 1.15rem; font-weight: 700;
  color: var(--navy); text-align: center; margin-top: .9rem;
}

/* Career history — mirrors .timeline / .tl-year. The legacy 90px left padding
   made room for an absolutely positioned icon whose rule was .page_single-only,
   so the icons now flow inline; they are decorative next to the timeline dot. */
.legacy-content ul.abt_doctor {
  list-style: none; margin: 1.5rem 0 0; padding: 0 0 0 1rem;
  border-left: 3px solid var(--bg-soft); display: grid; gap: 1.4rem;
}
.legacy-content ul.abt_doctor li { position: relative; padding: 0 0 0 1.25rem; }
.legacy-content ul.abt_doctor li::before {
  content: ""; position: absolute; left: -1.6rem; top: .4rem;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--blue);
}
.legacy-content ul.abt_doctor li img { display: none; }
.legacy-content .year { font-weight: 800; color: var(--blue-dark); font-size: 1.05rem; }

/* Paired photos — mirrors .facility-card imagery (radius, border, shadow). */
.legacy-content .mlt_img { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 640px) { .legacy-content .mlt_img { grid-template-columns: repeat(2, 1fr); } }
.legacy-content .mlt_img img {
  width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Hanging-marker lists on 肛門科 / 胃腸科. .lbfs is the marker; the legacy rule
   positioned it absolutely and was .page_single-only. */
.legacy-content .list_bf { position: relative; padding-left: 1.75rem; }
.legacy-content .list_bf .lbfs { position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.legacy-content .red { color: var(--accent); }

/* Content tables — mirrors .price-table, which the EN pages opt into by class.
   The stored JA tables are bare <table>, so the styling is applied by context.
   .table-wrap does not exist in the CMS markup either, hence the scroll
   container here rather than on a wrapper. */
/* min-width rather than width: display:block turns the table into a block box,
   and a plain width:100% then lets the internal table layout shrink-to-fit
   inside it, leaving a blank strip on the right that reads as a phantom empty
   column. min-width forces the columns to distribute across the full width
   while still allowing the box to scroll when the content is genuinely wider. */
.legacy-content table {
  border-collapse: collapse; min-width: 100%; font-size: .95rem;
  background: #fff; border: 1px solid var(--line); margin: 1.5rem 0;
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.legacy-content table tbody { display: table; width: 100%; }
.legacy-content table th, .legacy-content table td {
  padding: .7rem .9rem; border: 1px solid var(--line); text-align: left; vertical-align: top;
}
.legacy-content table th { background: var(--bg-soft); color: var(--blue-deep); font-weight: 600; }

/* WordPress editor image alignment, used on アクセス and TV出演. */
.legacy-content img { max-width: 100%; height: auto; }
.legacy-content .aligncenter { display: block; margin: 1.5rem auto; }
.legacy-content .alignleft { float: left; margin: .35rem 1.25rem 1rem 0; }
.legacy-content .alignright { float: right; margin: .35rem 0 1rem 1.25rem; }
@media (max-width: 640px) {
  .legacy-content .alignleft, .legacy-content .alignright { float: none; display: block; margin: 1.5rem auto; }
}

/* ---------- access ---------- */

.map-frame { margin-bottom: 2rem; }
.map-frame iframe {
  width: 100%; aspect-ratio: 16 / 7; min-height: 300px; border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.routes-heading { margin-top: 2.5rem; }
.route {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; margin-top: .9rem; overflow: hidden;
}
.route summary {
  display: flex; align-items: center; gap: .7em;
  padding: 1rem 1.2rem; cursor: pointer; font-weight: 700; color: var(--blue-deep);
  list-style: none;
}
.route summary::-webkit-details-marker { display: none; }
.route summary::after {
  content: ""; margin-left: auto; width: .6em; height: .6em; flex: none;
  border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s;
}
.route[open] summary::after { transform: rotate(-135deg); }
.route summary svg { color: var(--blue); }
.route-time { font-size: .8rem; font-weight: 600; color: var(--blue-dark); background: var(--bg-soft); border-radius: 999px; padding: .15em .8em; margin-left: .5em; }
.route-body { padding: 0 1.2rem 1.2rem; border-top: 1px solid var(--line); }
.route-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1.1rem; padding-top: 1.1rem; }
.route-steps li { display: grid; gap: 1rem; counter-increment: step; align-items: start; }
.route-steps img { border-radius: var(--radius-sm); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.route-steps p { margin: 0; position: relative; padding-left: 2.4rem; }
.route-steps p::before {
  content: counter(step);
  position: absolute; left: 0; top: .1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 700; font-size: .9rem;
  display: grid; place-items: center;
}
@media (min-width: 640px) { .route-steps li { grid-template-columns: 220px 1fr; } }

.parking-figure { margin: 1rem 0 0; }
.parking-figure img { border-radius: var(--radius); border: 1px solid var(--line); }
.parking-figure figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

/* ---------- booking / contact ---------- */

.booking-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .booking-layout { grid-template-columns: 1fr 320px; gap: 3rem; } }

.steps { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.step { display: flex; gap: 1rem; }
.step-num {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--bg-soft); color: var(--blue-dark);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.step h2 { font-size: 1.05rem; margin-bottom: .15em; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; }

.widget-slot {
  border: 2px dashed #a8cfe2; border-radius: var(--radius);
  background: var(--bg-alt); padding: 2.5rem 1.5rem; text-align: center; color: var(--muted);
}
.widget-slot p { margin: 0 0 .5rem; }
.widget-slot .btn { margin-top: 1rem; }

.aside-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.3rem 1.4rem; margin-bottom: 1.25rem;
}
.aside-card h2 { font-size: 1rem; display: flex; align-items: center; gap: .5em; }
.aside-card h2 svg { color: var(--blue); }
.aside-card ul { padding-left: 1.1rem; margin: .5rem 0 0; font-size: .92rem; color: var(--muted); }
.aside-card li + li { margin-top: .45rem; }
.aside-card p { font-size: .93rem; color: var(--muted); margin: .4rem 0 0; }
.aside-phone a { font-size: 1.45rem; font-weight: 800; text-decoration: none; color: var(--blue-deep); }

/* forms */

.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.25rem, 4vw, 2rem); }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--navy); }
.req, .opt {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 4px; padding: .15em .5em; vertical-align: middle; margin-left: .4em;
}
.req { background: #fdeaea; color: #b3261e; }
.opt { background: var(--bg-alt); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: inherit;
  padding: .65rem .8rem; border: 1.5px solid #c3d4dd; border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(5, 135, 187, .18);
}

/* ---------- footer ---------- */

/* the legacy stylesheet has a bare "footer { letter-spacing: -0.4em }" rule
   (an old inline-block whitespace hack) that would otherwise inherit into
   every child here since nothing resets it; pin it back to normal. */
.site-footer { background: var(--navy); color: #c9c9cf; margin-top: 0; letter-spacing: normal; }
.footer-grid {
  display: grid; gap: 2.25rem; padding-block: clamp(2.5rem, 6vw, 3.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; } }

.brand-footer { color: #fff; margin-bottom: .9rem; }
.brand-footer .brand-text span { color: #97979f; }
.footer-about p { font-size: .9rem; margin: 0 0 1rem; }
.footer-contact a { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.footer-contact a:hover { color: #9db8f5; }
.footer-col h2 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .8rem; }
.footer-col h2.mt { margin-top: 1.5rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; }
.footer-col a { color: #c9c9cf; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-hours { color: #97979f; font-size: .87rem; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.1rem; }
.footer-bottom p { margin: 0; font-size: .8rem; color: #97979f; }

/* ---------- small-screen readability ---------- */

@media (max-width: 639px) {
  body { font-size: 1.05rem; line-height: 1.7; }
  .sh-container { padding-inline: 1.25rem; }

  h1 { line-height: 1.22; }
  h2 { line-height: 1.3; margin-bottom: .6em; }

  .section { padding-block: 3.25rem; }
  .section-head { margin-bottom: 1.75rem; }
  .section-head p { font-size: 1rem; line-height: 1.65; }

  .hero-inner { padding-block: 4rem; }
  .hero-kicker { display: none; }
  .hero h1 { font-size: 1.8rem; }
  .hero-sub { font-size: 1rem; line-height: 1.65; margin-bottom: 2.5rem; }
  .hero-actions { gap: .9rem; margin-bottom: 2rem; }
  .hero-badges { gap: .7rem 1.5rem; font-size: .95rem; margin-top: 0; } /* .hero-actions already carries the gap on mobile */

  .info-card { padding-block: 1.4rem; }
  .info-card p { font-size: .98rem; line-height: 1.65; }

  .notice-list { gap: .9rem; }
  .notice-summary { padding: 1.1rem 2.8rem 1.1rem 1.2rem; gap: .45rem; }
  .notice-title { font-size: 1rem; line-height: 1.65; }
  .notice-body { font-size: 1rem; line-height: 1.65; }

  .card-grid { gap: 1.4rem; }
  .card-body { padding: 1.25rem 1.3rem 1.5rem; gap: .5rem; }
  .card-body p { font-size: .98rem; line-height: 1.65; }
  .card-body h2, .card-body h3 { font-size: 1.2rem; }

  .split { gap: 1.6rem; }
  .split-body p, .check-list, .station-list { font-size: 1rem; line-height: 1.65; }
  .check-list { gap: .65rem; }
  .split-body blockquote { line-height: 1.6; }

  .facility-body p { font-size: .98rem; line-height: 1.65; }

  .prose { font-size: 1rem; line-height: 1.7; }
  .prose li + li { margin-top: .65rem; }

  .step p { font-size: .98rem; line-height: 1.6; }
  .aside-card p, .aside-card ul { font-size: .98rem; }

  .footer-about p, .footer-col ul { font-size: .97rem; }
  .footer-col ul { gap: .6rem; }
  .footer-grid { gap: 2rem; }
}

/* ---------- inner pages: legacy stylesheet neutralizers ---------- */

/* The legacy (Underscores) stylesheet sets "ul, ol { margin: 0 0 1.5em 3em }",
   "p { margin-bottom: 1.5em }" and "table { margin: 0 0 1.5em }" on bare tags.
   These blocks are designed against browser defaults, so pin those back
   inside the redesigned content blocks to keep the intended rhythm. */
.prose ul, .prose ol { margin: 1em 0; }
.prose p { margin: 1em 0; }
.prose .pill-grid { margin: 1rem 0; }
.price-table, .hours-table { margin: 0; }
.split-body p, .facility-body p, .card-body p, .info-card p,
.step p, .aside-card p, .route-steps p { margin-bottom: 0; }
/* legacy also centers every image via "img { margin: 0 auto }" — the
   redesigned components left-align, so undo it inside them only,
   letting the untouched JA pages keep their centering */
.parking-figure img, .profile-card img, .prose img,
.route-steps img, .split-media img { margin: 0; }
.timeline p { margin-bottom: 0; }
.profile-card .check-list { margin-bottom: 0; }

/* ---------- Contact Form 7 (.contact-form look) ---------- */

/* The CF7 form template uses the .field markup; CF7 wraps each control
   in span.wpcf7-form-control-wrap, which must not shrink-wrap. */
.field .wpcf7-form-control-wrap { display: block; }

/* The legacy stylesheet forces bare submit buttons to width:260px !important,
   height 50px, font-size 24px, etc. Its input[type="submit"] selector (0,1,1)
   also outranks .btn (0,1,0), so restate the full .btn.btn-primary.btn-lg look
   here at (0,2,0) instead of relying on the classes. */
.contact-form .wpcf7-submit {
  width: auto !important; height: auto; margin: 0; text-align: center;
  display: inline-flex; align-items: center;
  padding: .75em 1.5em; border-radius: 999px; border: 2px solid transparent;
  background: var(--blue); color: #fff; cursor: pointer;
  font-weight: 600; font-size: 1rem; line-height: 1.2; box-shadow: none;
  transition: background .15s, transform .1s;
}
.contact-form .wpcf7-submit:hover { background: var(--blue-dark); }
.contact-form .wpcf7-submit:active { transform: translateY(1px); }
.contact-form .wpcf7-spinner { margin: 0 0 0 .75em; }

/* The JA contact form (CF7 form 244) is the original table layout, unlike the
   EN form's .field markup. Flatten the table so it reads as the same stacked
   fields — label above control — reusing the .field values above rather than
   inventing a second form style. The form itself is left untouched in wp-admin
   so its mail routing keeps working. */
.legacy-form table, .legacy-form tbody, .legacy-form tr, .legacy-form th, .legacy-form td {
  display: block; width: auto; border: 0; padding: 0; background: none;
}
.legacy-form table { margin: 0; overflow: visible; }
.legacy-form tr { margin-bottom: 1.1rem; }
.legacy-form th {
  font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--navy); text-align: left;
}
.legacy-form input[type="text"], .legacy-form input[type="email"], .legacy-form input[type="tel"],
.legacy-form select, .legacy-form textarea {
  width: 100%; font: inherit; color: inherit;
  padding: .65rem .8rem; border: 1.5px solid #c3d4dd; border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.legacy-form textarea { resize: vertical; }
.legacy-form input:focus, .legacy-form select:focus, .legacy-form textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(5, 135, 187, .18);
}
.legacy-form .wpcf7-form-control-wrap { display: block; }

.contact-form .wpcf7-not-valid-tip {
  display: block; font-size: .82rem; color: #b3261e; margin-top: .35rem;
}
.contact-form .wpcf7-response-output {
  margin: 1.25rem 0 0; padding: .8rem 1.1rem;
  border: 1.5px solid var(--blue); border-radius: var(--radius-sm);
  font-size: .93rem; color: var(--blue-deep); background: var(--bg-soft);
}
.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output {
  border-color: #b3261e; color: #b3261e; background: #fdeaea;
}
.contact-form form.sent .wpcf7-response-output {
  border-color: #1b7a3d; color: #1b7a3d; background: #e9f7ee;
}

/* ---------- Booking Package slot on the reservation page ---------- */

.booking-widget { margin-top: .5rem; }
.booking-widget .note { margin: 0 0 1rem; }

/* The plugin's own form is unstyled; the pink/blue table look comes from the
   legacy stylesheet (style.css ~1985: .name{background:#FFE8E8!important} and
   .value{background:#BCECFF!important}), plus the bare-tag button rule that
   forces 260px/24px. Those use !important, so these must too.

   Keyed on the plugin's own ids, so both reservation pages get the same form.
   The JA page still runs on the legacy page.php and so keeps its own page
   layout — no steps, no aside — but the form inside it is the same form, with
   the same patient-ID behaviour, and had no reason to keep the pink/blue
   table look after the EN one lost it. */

#booking-package_inputFormPanel .row {
  display: grid !important;
  gap: .35rem;
  padding: 0 0 1rem !important;
  border: 0 !important;
}

/* A row the script hides (the patient ID on a first visit) has to stay hidden.
   The plugin's own .hidden_panel is display:none !important, but the rule above
   is more specific and would win, putting the field back on screen with 1111
   already in it. */
#booking-package_inputFormPanel .row.hidden_panel {
  display: none !important;
}
#booking-package_inputFormPanel .name {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}
#booking-package_inputFormPanel .value {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
#booking-package_inputFormPanel .required:after {
  color: var(--accent);
}

/* Inputs adopt the same treatment as the contact form. */
#booking-package_inputFormPanel input[type="text"],
#booking-package_inputFormPanel input[type="email"],
#booking-package_inputFormPanel input[type="tel"],
#booking-package_inputFormPanel textarea,
#booking-package_inputFormPanel select {
  width: 100%;
  max-width: 100%;
  padding: .6rem .75rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
#booking-package_inputFormPanel input:focus-visible,
#booking-package_inputFormPanel select:focus-visible,
#booking-package_inputFormPanel textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

/* Radio rows read as choices, not as table cells. */
#booking-package_inputFormPanel label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-right: 1rem;
  font-size: .95rem;
}

/* The confirmed date/time summary row stays highlighted, but in brand colour. */
#booking-package_inputFormPanel .row:first-child .value {
  background: var(--bg-soft) !important;
  padding: .6rem .75rem !important;
  border-radius: var(--radius-sm);
  font-weight: 700;
  color: var(--blue-deep);
}

/* Undo the legacy 260px/24px button and reuse the redesign's button shape. */
#booking-package button,
#booking-package input[type="button"],
#booking-package input[type="submit"] {
  width: auto !important;
  min-width: 12rem;
  height: auto !important;
  line-height: 1.2 !important;
  margin: 0 .5rem .6rem 0 !important;
  padding: .75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 700;
  border: 1px solid var(--blue) !important;
  border-radius: 999px !important;
  background: var(--blue) !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
}
#booking-package button:hover,
#booking-package input[type="submit"]:hover {
  background: var(--blue-dark) !important;
  border-color: var(--blue-dark) !important;
}

/* The "I forgot my patient ID" checkbox and the panel shown once a booking is
   confirmed are both built by shibaangel_booking_form_script(). Unlike the rules
   above these are not scoped to the EN template: both reservation pages get
   them, and the JA page has no styling of its own for markup the plugin never
   emits. */

.sh-forgot {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  margin: .5rem 0 0 !important;
  font-size: .9rem;
  color: var(--muted, #59595e);
}
.sh-forgot input { margin: 0; }

.sh-saved {
  margin: 1.25rem 0 0;
  padding: 1.25rem;
  border: 1px solid var(--line, #e3e6ef);
  border-radius: var(--radius-sm, 9px);
  background: var(--bg-alt, #f4f5f8);
  text-align: left;
}
.sh-saved p { margin: 0 0 .6rem; font-size: .95rem; }
.sh-saved-title { font-weight: 700; color: var(--blue-deep, #0a2f73); }
.sh-saved-note { margin: .75rem 0 0 !important; font-size: .875rem; color: var(--muted, #59595e); }

.sh-saved-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.sh-saved-btn {
  display: inline-block;
  padding: .6rem 1.25rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--blue, #0e4ce3);
  border: 1px solid var(--blue, #0e4ce3);
  border-radius: 999px;
  cursor: pointer;
}
.sh-saved-btn:hover { color: #fff; background: var(--blue-dark, #0248b7); border-color: var(--blue-dark, #0248b7); }
.sh-saved-btn-alt { color: var(--blue-dark, #0248b7); background: #fff; }
.sh-saved-btn-alt:hover { color: #fff; }

/* Closed/unavailable calendar days: the plugin already marks these with its
   own .closeDay class (Calendar.js) instead of the clickable "pointer" class,
   but the matching background rule in the plugin's own CSS is commented out
   (Booking_app.css ~1117), so a closed day renders identically to an open
   one. Restyled here instead of editing the plugin file, so a plugin update
   can't silently remove it. */
#booking-package_calendarPage .closeDay {
  background: #ececec !important;
  color: #9a9a9a !important;
  cursor: not-allowed;
}

/* ---------- the printed reservation ---------- */

/* Built by the same script and appended straight to <body>, so the print rule
   below can hide body's other children by direct-child selector. It is never
   shown on screen: "download" means print-to-PDF here, because the sheet is
   largely Japanese and a client-side PDF writer would have to ship a CJK font
   to set it, where the browser already has one. */

.sh-slip { display: none; }

@media print {
  body.sh-printing > * { display: none !important; }
  body.sh-printing > .sh-slip { display: block !important; }

  @page { margin: 16mm; }

  body.sh-printing {
    margin: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.6;
  }

  .sh-slip-head { padding-bottom: .6rem; border-bottom: 2px solid #000; }
  .sh-slip-clinic { margin: 0; font-size: 13pt; font-weight: 700; }
  .sh-slip-sub { margin: 0; font-size: 9pt; }

  .sh-slip-title { margin: 1.4rem 0 .8rem; font-size: 16pt; font-weight: 700; }

  /* A copy of the plugin's completed-booking panel. Its own styling is scoped to
     #booking-package_inputFormPanel, which the copy is not, so the rows are laid
     out here — as label over value, the way the panel reads on screen. */
  .sh-slip-booking .row { padding: .45rem 0; border-bottom: 1px solid #999; }
  .sh-slip-booking .row:first-child { border-top: 1px solid #999; }
  .sh-slip-booking .name { font-size: 9.5pt; font-weight: 400; }
  .sh-slip-booking .value { font-size: 11pt; font-weight: 700; }
  /* The plugin marks required fields with a * in CSS; nothing on a finished
     booking is still to be filled in. */
  .sh-slip-booking .required::after { content: none !important; }

  .sh-slip-nomail { margin: 1rem 0 0; font-size: 10pt; }

  .sh-slip-note { margin-top: 1.2rem; padding: .8rem 1rem; border: 1px solid #000; }
  .sh-slip-note p { margin: 0; font-size: 10pt; }
  .sh-slip-note-title { font-weight: 700; }

  .sh-slip-foot { margin-top: 1.6rem; padding-top: .6rem; border-top: 1px solid #999; }
  .sh-slip-foot p { margin: 0; font-size: 9pt; }
}

/* ---------- misc ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}