/* ==========================================================================
   OFFLINE MIRROR of the sample build's assets/site.css
   --------------------------------------------------------------------------
   This is a copy of the site stylesheet, taken from
   https://tahsample.pages.dev/assets/site.css, so the preview pages in this
   folder render without a network connection.

   It is NOT the authoritative file. Do not edit it and do not ship it. The
   real stylesheet lives in the generator. To point the preview pages at the
   live file instead, rebuild with:

       python3 preview/build_preview.py --live

   Sections that the preview pages do not use (the interactive globe, the news
   list, some homepage bands) may be absent here. Everything the booking engine
   inherits (the :root tokens, buttons, nav, tables, modal, mobile bar) is
   present and unmodified.
   ========================================================================== */

:root{
  --teal:#00a0a0;
  --teal-dark:#007878;
  --teal-deeper:#005f5f;
  --teal-pale:#eaf6f6;
  --ink:#1a1f27;
  --ink-deep:#0d2424;
  --cloud:#f4f7f7;
  --mist:#dae7e7;
  --white:#fff;
  --text:#3a4848;
  --text-lt:#6a7878;
  --alert:#c0392b;
  --alert-dark:#96271b;
  --shadow:0 4px 22px rgba(0,90,90,.10);
  --shadow-deep:0 16px 50px rgba(0,90,90,.18);
  --r:8px;
  --r-lg:14px;

  --sans:'Inter','Noto Sans JP','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',
         'Yu Gothic Medium','游ゴシック Medium',YuGothic,'游ゴシック体','Meiryo',sans-serif;
  --serif:'Noto Serif JP','Hiragino Mincho ProN','ヒラギノ明朝 ProN W3',
          'Yu Mincho','游明朝',YuMincho,'PT Serif',Georgia,serif;
  --num:'Barlow','Inter',sans-serif;

  --s1:8px; --s2:14px; --s3:22px; --s4:32px; --s5:48px; --s6:72px; --s7:96px;
  --nav-h:66px;
  --top-h:38px;
  --gutter:24px;
  --maxw:1200px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  font-family:var(--sans);background:var(--white);color:var(--text);
  line-height:1.85;font-size:16px;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;font-feature-settings:"palt" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dark)}
button{font:inherit;color:inherit}
address{font-style:normal}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--teal);color:#fff;padding:12px 20px;font-weight:700}
.skip-link:focus{left:0}
.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}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{padding-top:clamp(52px,5vw,84px);padding-bottom:clamp(52px,5vw,84px)}
section.tight{padding-top:var(--s4);padding-bottom:var(--s4)}
.sec-head{margin-bottom:var(--s4)}
.sec-head .en{display:block;font-family:var(--num);font-size:12px;letter-spacing:.24em;
  color:var(--teal);font-weight:600;margin-top:var(--s1);text-transform:uppercase}
.sec-foot{margin-top:var(--s4)}

/* ---------- Type ---------- */
.h1{font-family:var(--serif);font-size:clamp(26px,3.8vw,40px);font-weight:600;line-height:1.4;color:var(--ink)}
.h2{font-family:var(--serif);font-size:clamp(23px,2.7vw,34px);font-weight:600;line-height:1.4;color:var(--ink)}
.h3{font-family:var(--serif);font-size:clamp(18px,2vw,22px);font-weight:600;line-height:1.5;color:var(--ink)}
.lead{font-size:16px;line-height:1.95;color:var(--text-lt);max-width:64ch}

/* ---------- Buttons ---------- */
.btn{padding:13px 26px;border-radius:var(--r);font-size:14px;font-weight:700;letter-spacing:.03em;
  text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:none;
  line-height:1.5;transition:background-color .18s,color .18s,box-shadow .18s,transform .18s}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--teal-dark);border:2px solid var(--teal)}
.btn-outline:hover{background:var(--teal);color:#fff}
.btn-ghost{background:#fff;color:var(--teal-dark);border:1px solid var(--mist)}
.btn-ghost:hover{border-color:var(--teal);background:var(--teal-pale)}
.btn-light{background:rgba(255,255,255,.94);color:var(--teal-deeper)}
.btn-light:hover{background:#fff;transform:translateY(-1px)}

/* ---------- Top bar ---------- */
.top-bar{background:var(--ink-deep);height:var(--top-h)}
.top-bar-inner{max-width:1400px;margin:0 auto;display:flex;align-items:stretch;
  justify-content:flex-end;height:100%;padding-left:var(--gutter)}
.top-bar-links{display:flex;margin-right:auto;min-width:0;overflow:hidden}
.top-bar-links a{display:flex;align-items:center;padding:0 14px;font-size:12.5px;
  color:rgba(255,255,255,.58);text-decoration:none;letter-spacing:.03em;white-space:nowrap;
  transition:color .18s,background-color .18s}
.top-bar-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.phone-block{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 20px;
  background:var(--teal);text-decoration:none;color:#fff;transition:background .18s;flex-shrink:0}
.phone-block:hover{background:var(--teal-dark)}
.phone-block .num{font-family:var(--num);font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1.15}
.phone-block .phone-sub{font-size:10.5px;letter-spacing:.06em;opacity:.9;line-height:1.15}

/* ---------- Language switcher ---------- */
.lang{position:relative;display:flex;align-items:stretch;flex-shrink:0}
.lang-btn{display:flex;align-items:center;gap:7px;background:transparent;border:none;cursor:pointer;
  color:rgba(255,255,255,.75);font-size:12.5px;font-weight:500;letter-spacing:.04em;padding:0 14px;
  border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12);
  white-space:nowrap;transition:color .18s,background-color .18s}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.1)}
.lang-btn svg{flex-shrink:0}
.lang-btn .chev{transition:transform .2s}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-label{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lang-menu{
  display:none;position:absolute;top:100%;right:0;z-index:400;background:#fff;
  width:max-content;min-width:360px;max-width:min(520px,calc(100vw - 24px));
  border:1px solid var(--mist);border-top:3px solid var(--teal);box-shadow:var(--shadow-deep);
  padding:8px;border-radius:0 0 var(--r) var(--r);
  grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
}
.lang-menu.open{display:grid}
.lang-menu a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  min-height:42px;padding:6px 12px;text-decoration:none;color:var(--text);font-size:14px;
  border-radius:6px;line-height:1.35;transition:background-color .15s,color .15s;
}
.lang-menu a .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-menu a .code{font-family:var(--num);font-size:11px;letter-spacing:.08em;opacity:.55;
  white-space:nowrap;justify-self:end}
.lang-menu a:hover{background:var(--teal-pale);color:var(--teal-deeper)}
.lang-menu a[aria-current="true"]{background:var(--teal);color:#fff}
.lang-menu a[aria-current="true"] .code{opacity:.8}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:300;background:rgba(255,255,255,.97);
  border-bottom:2.5px solid var(--teal);box-shadow:0 2px 14px rgba(0,100,100,.07);
  backdrop-filter:saturate(130%) blur(8px);-webkit-backdrop-filter:saturate(130%) blur(8px)}
.nav-inner{display:flex;align-items:stretch;gap:var(--s2);height:var(--nav-h);
  max-width:1400px;margin:0 auto;padding:0 var(--gutter)}
.nav-brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav-brand img{height:38px;width:auto;object-fit:contain}
.nav-links{display:flex;list-style:none;align-items:stretch;margin-left:auto;min-width:0}
.nav-links>li{display:flex;align-items:stretch;position:relative}
.nav-links>li>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:0 13px;text-decoration:none;color:var(--ink);white-space:nowrap;
  border-bottom:2.5px solid transparent;margin-bottom:-2.5px;transition:color .18s,border-color .18s}
.nav-links>li>a .ja{font-size:13.5px;font-weight:500;letter-spacing:.02em}
.nav-links>li>a .en{font-family:var(--num);font-size:9px;letter-spacing:.13em;color:var(--text-lt);
  font-weight:600;text-transform:uppercase}
.nav-links>li>a:hover,.nav-links>li.current>a{color:var(--teal-dark);border-bottom-color:var(--teal)}
.nav-links>li>a:hover .en{color:var(--teal)}
.submenu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--mist);border-top:3px solid var(--teal);
  box-shadow:var(--shadow-deep);min-width:240px;padding:8px;list-style:none;
  border-radius:0 0 var(--r) var(--r)}
.nav-links>li:hover .submenu,.nav-links>li:focus-within .submenu{display:block}
.submenu a{display:block;padding:9px 14px;font-size:13.5px;color:var(--text);text-decoration:none;
  border-radius:6px;white-space:nowrap;transition:background-color .15s,color .15s}
.submenu a:hover{background:var(--teal-pale);color:var(--teal-deeper)}

.nav-cta-wrap{display:flex;align-items:center;gap:var(--s1);flex-shrink:0;margin-left:var(--s2)}
/* The top bar (which holds the main .lang switcher) is hidden below 1240px,
   so its compact twin in the header CTA row only needs to show there --
   above 1240px the top-bar switcher is already visible and this one would
   just be a duplicate. */
.nav-cta-wrap .lang.lang-compact{display:none}
.nav-cta-wrap .lang-btn{color:var(--text);border-color:var(--mist);height:38px;border-radius:var(--r)}
.nav-cta-wrap .lang-btn:hover,.nav-cta-wrap .lang-btn[aria-expanded="true"]{
  color:var(--teal-deeper);background:var(--teal-pale)}
.nav-cta{display:inline-flex;align-items:center;gap:6px;padding:0 16px;height:38px;border-radius:var(--r);
  font-size:13px;font-weight:700;letter-spacing:.03em;text-decoration:none;white-space:nowrap;
  border:none;cursor:pointer;transition:background .18s}
.nav-cta.reserve{background:var(--teal);color:#fff}
.nav-cta.reserve:hover{background:var(--teal-dark)}
.nav-cta.alert{background:var(--alert);color:#fff}
.nav-cta.alert:hover{background:var(--alert-dark)}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;
  padding:9px;background:none;border:none;flex-shrink:0}
.hamburger span{width:24px;height:2px;background:var(--ink);display:block;transition:transform .3s,opacity .3s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:#fff;
  z-index:290;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-menu.open{display:block}
.mm-inner{padding:var(--s2) var(--gutter) 120px}
.mobile-menu details{border-bottom:1px solid var(--mist)}
.mobile-menu summary{padding:15px 2px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary::after{content:'+';color:var(--teal);font-size:22px;font-weight:300;line-height:1}
.mobile-menu details[open] summary::after{content:'\2212'}
.mm-links{padding-bottom:var(--s1)}
.mm-links a{display:block;padding:11px 14px;font-size:14px;color:var(--text);text-decoration:none;
  border-top:1px dotted var(--mist)}
.mm-top{display:block;padding:15px 2px;font-size:15px;font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--mist)}
.mm-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:var(--s3)}
.mm-quick a{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 8px;border-radius:var(--r);text-decoration:none;line-height:1.4;text-align:center;
  background:var(--teal);color:#fff}
.mm-quick a:nth-child(2){background:var(--cloud);color:var(--teal-deeper);border:1px solid var(--mist)}
.mm-quick strong{font-size:15px;font-weight:600}
.mm-quick span{font-size:11px;opacity:.85}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink-deep);overflow:hidden;padding:0;
  min-height:clamp(420px,58vw,620px);display:flex;align-items:flex-end}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(4,26,26,.72) 0%,rgba(4,26,26,.38) 48%,rgba(4,26,26,.06) 100%),
  linear-gradient(0deg,rgba(4,26,26,.5) 0%,rgba(4,26,26,0) 42%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:var(--s7) var(--gutter) var(--s6);color:#fff}
.hero h1{font-family:var(--serif);font-size:clamp(23px,3.4vw,42px);font-weight:600;line-height:1.55;
  color:#fff;margin-bottom:var(--s3);text-shadow:0 2px 22px rgba(0,0,0,.4);max-width:22em}
.hero-btns{display:flex;gap:var(--s1);flex-wrap:wrap}
.hero-dots{position:absolute;bottom:var(--s3);right:var(--gutter);z-index:3;display:flex;gap:9px}
.hero-dots button{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
  background:transparent;cursor:pointer;padding:0}
.hero-dots button[aria-current="true"]{background:#fff;border-color:#fff}

/* ---------- Quick grid ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:1400px;margin:0 auto}
.quick-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  text-align:center;padding:var(--s4) var(--s2);color:#fff;text-decoration:none;line-height:1.5;
  border-right:1px solid rgba(255,255,255,.15);transition:background-color .2s;min-height:118px}
.quick-grid a:last-child{border-right:none}
.quick-grid a:hover{background:rgba(255,255,255,.1)}
.quick-grid .ttl{font-size:14.5px;font-weight:600}
.quick-grid .en{font-family:var(--num);font-size:9.5px;letter-spacing:.16em;opacity:.7;text-transform:uppercase}
.quick-grid svg{opacity:.9;flex-shrink:0}

/* ---------- Cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
.card{background:#fff;border:1px solid var(--mist);border-radius:var(--r);padding:var(--s3);
  text-decoration:none;color:var(--text);display:block;
  transition:border-color .2s,box-shadow .2s,transform .2s}
a.card:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-2px)}
.card .en{font-family:var(--num);font-size:10px;letter-spacing:.16em;color:var(--teal);
  text-transform:uppercase;display:block;margin-bottom:var(--s1);font-weight:600}
.card h3{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);
  margin-bottom:var(--s1);line-height:1.55}
.card p{font-size:13.5px;color:var(--text-lt);line-height:1.8}
.dept-card{background:#fff;border:1px solid var(--mist);border-radius:var(--r);
  padding:var(--s2) var(--s3);text-decoration:none;display:flex;align-items:center;
  justify-content:space-between;gap:10px;color:var(--ink);font-size:14.5px;font-weight:500;
  min-height:58px;line-height:1.5;transition:border-color .2s,background-color .2s,color .2s}
.dept-card:hover{border-color:var(--teal);background:var(--teal-pale);color:var(--teal-deeper)}
.dept-card::after{content:'\203a';color:var(--teal);font-size:20px;line-height:1;flex-shrink:0}
.banner-card{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--mist);
  transition:box-shadow .2s,transform .2s}
.banner-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.banner-card img{width:100%;height:auto}

.certs{background:#fff;border-top:1px solid var(--mist)}
.certs-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3);align-items:center}
.certs-grid img{max-height:74px;width:auto;margin:0 auto;object-fit:contain}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Page head and body ---------- */
.page-head{background:var(--teal-deeper);color:#fff;padding:var(--s5) 0;position:relative;overflow:hidden}
.page-head::after{content:'';position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.05)}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{font-family:var(--serif);font-size:clamp(24px,3.2vw,36px);font-weight:600;color:#fff;line-height:1.5}
.page-head .en{font-family:var(--num);font-size:11.5px;letter-spacing:.24em;color:rgba(255,255,255,.65);text-transform:uppercase;display:block;margin-top:var(--s1);font-weight:600}
.page-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s6);max-width:var(--maxw);margin:0 auto;padding:var(--s5) var(--gutter) var(--s7);align-items:start}
.page-body.no-aside{grid-template-columns:minmax(0,1fr);max-width:920px}
.side{position:sticky;top:calc(var(--nav-h) + 20px)}
.side h2{font-family:var(--serif);font-size:15.5px;font-weight:600;color:#fff;background:var(--teal-deeper);padding:14px 18px;border-radius:var(--r) var(--r) 0 0;line-height:1.5}
.side ul{list-style:none;border:1px solid var(--mist);border-top:none;border-radius:0 0 var(--r) var(--r);overflow:hidden}
.side li+li{border-top:1px solid var(--mist)}
.side a{display:block;padding:12px 18px;font-size:13.5px;color:var(--text);text-decoration:none;line-height:1.6;transition:background-color .15s,color .15s}
.side a:hover{background:var(--teal-pale);color:var(--teal-deeper)}
.side a[aria-current="page"]{background:var(--teal-pale);color:var(--teal-deeper);font-weight:600;box-shadow:inset 3px 0 0 var(--teal)}
.side-contact{margin-top:var(--s3);border:1px solid var(--mist);border-radius:var(--r);padding:var(--s3);background:var(--cloud)}
.side-contact .lbl{font-size:11px;letter-spacing:.14em;color:var(--text-lt);text-transform:uppercase;font-weight:700}
.side-contact .tel{font-family:var(--num);font-size:23px;font-weight:600;color:var(--teal-deeper);display:block;text-decoration:none;margin:4px 0 2px;letter-spacing:.01em}
.side-contact p{font-size:12.5px;color:var(--text-lt);line-height:1.75}
.side-contact .btn{margin-top:var(--s2);width:100%;justify-content:center}

/* ---------- Prose ---------- */
.prose{font-size:15.5px;line-height:2.05}
.prose>h2{font-family:var(--serif);font-size:clamp(20px,2.3vw,26px);font-weight:600;color:var(--ink);margin:var(--s6) 0 var(--s3);padding-bottom:12px;border-bottom:2px solid var(--mist);position:relative;line-height:1.55}
.prose>h2::after{content:'';position:absolute;left:0;bottom:-2px;width:72px;height:2px;background:var(--teal)}
.prose>h2:first-child{margin-top:0}
.prose h3{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--teal-deeper);margin:var(--s4) 0 var(--s2);line-height:1.6;padding-left:14px;border-left:4px solid var(--teal)}
.prose h4{font-size:16px;font-weight:700;color:var(--ink);margin:var(--s3) 0 var(--s1)}
.prose p{margin-bottom:var(--s2)}
.prose ul,.prose ol{margin:0 0 var(--s3);padding-left:0;list-style:none}
.prose ul>li{position:relative;padding-left:22px;margin-bottom:7px}
.prose ul>li::before{content:'';position:absolute;left:4px;top:.85em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.prose ol{counter-reset:n}
.prose ol>li{position:relative;padding-left:32px;margin-bottom:7px;counter-increment:n}
.prose ol>li::before{content:counter(n);position:absolute;left:0;top:.34em;width:22px;height:22px;border-radius:50%;background:var(--teal-pale);color:var(--teal-deeper);font-family:var(--num);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.prose .note{font-size:13.5px;color:var(--text-lt);line-height:1.9;margin-bottom:var(--s1)}
.prose .callout{background:var(--teal-pale);border-left:4px solid var(--teal);border-radius:0 var(--r) var(--r) 0;padding:var(--s3);margin:var(--s3) 0}
.prose .callout ul{margin-bottom:0}
.prose .callout p:last-child{margin-bottom:0}
.prose a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--teal-deeper)}
.prose .staff{border:1px solid var(--mist);border-radius:var(--r);padding:var(--s3);margin:var(--s2) 0;background:#fff}
.prose .staff h4{margin-top:0;font-family:var(--serif);font-size:17.5px;font-weight:600;color:var(--ink)}
.prose .staff dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px var(--s3);font-size:14px;margin-top:var(--s1);line-height:1.8}
.prose .staff dt{color:var(--text-lt);white-space:nowrap}
.prose .staff dd{color:var(--text)}
.prose .staff.has-photo{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0 var(--s3)}
.prose .staff.has-photo .staff-photo{grid-row:1 / span 2;width:250px;height:250px;border-radius:50%;
  object-fit:cover;background:var(--mist)}
.prose .staff.has-photo h4{grid-column:2;align-self:center}
.prose .staff.has-photo dl{grid-column:2}
@media (max-width:720px){
  /* Stack the card: at the larger photo size the side-by-side grid squeezes
     the detail column badly on narrow screens. */
  .prose .staff.has-photo{grid-template-columns:minmax(0,1fr)}
  .prose .staff.has-photo .staff-photo{grid-row:auto;width:200px;height:200px;
    margin:0 auto var(--s2)}
  .prose .staff.has-photo h4{grid-column:1;text-align:center}
  .prose .staff.has-photo dl{grid-column:1}
}
@media (max-width:480px){
  /* Japanese labels such as アピールポイント leave too little room for the
     value beside them at this width, so put the value on its own line. */
  .prose .staff dl{grid-template-columns:minmax(0,1fr);gap:0}
  .prose .staff dt{margin-top:10px;font-size:13px}
  .prose .staff dl>dt:first-of-type{margin-top:0}
}

/* Restored content photos & video (2026-09-10). */
.prose .photo-single, .prose .photo-gallery{margin:var(--s3) 0}
.prose .photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--s2);align-items:start}
/* Photos are never cropped, never stretched and never enlarged past their own
   size. The frame shrinks to whatever the image actually is, and a cap on the
   height keeps a tall portrait from taking over the column. */
.prose .content-photo{margin:0;background:#fff;border:1px solid var(--mist);overflow:hidden;
  width:fit-content;max-width:100%}
.prose .content-photo img{display:block;width:auto;height:auto;aspect-ratio:auto;object-fit:fill;
  max-width:100%;max-height:400px}
.prose .content-photo figcaption{padding:var(--s1) var(--s2);font-size:13px;color:var(--text-lt);line-height:1.6}
.prose .content-video{margin:0;background:#fff;border:1px solid var(--mist);overflow:hidden}
.prose .content-video video{display:block;width:100%;height:auto;background:#000}
.prose .content-video figcaption{padding:var(--s1) var(--s2);font-size:13px;color:var(--text-lt)}
.prose .video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden}
.prose .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .video-embed .video-caption{position:absolute;inset:auto 0 0 0;margin:0;padding:6px 10px;
  font-size:12.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));pointer-events:none}
.prose .video-library{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.prose .video-library .video-embed{margin:0}

.related{margin-top:var(--s6);border-top:1px solid var(--mist);padding-top:var(--s4)}
.related h2{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin-bottom:var(--s2)}
.related ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;align-items:stretch}
.related a{display:flex;align-items:center;min-height:52px;padding:12px 16px;border:1px solid var(--mist);border-radius:var(--r);font-size:14px;color:var(--text);text-decoration:none;line-height:1.6;transition:border-color .2s,background-color .2s}
.related a:hover{border-color:var(--teal);background:var(--teal-pale)}
.related li>span{display:flex;align-items:center;min-height:52px;padding:12px 16px;border:1px dashed var(--mist);border-radius:var(--r);font-size:14px;color:var(--text-lt);line-height:1.6}

.jp-badge{display:inline-block;font-family:var(--num);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;color:var(--teal-deeper);background:var(--teal-pale);
  border:1px solid var(--mist);border-radius:4px;padding:1px 5px;margin-left:6px;
  vertical-align:1px;line-height:1.4}
.nav-links>li>a .jp-badge{margin-left:5px}
.side a .jp-badge,.related a .jp-badge{margin-left:6px}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:900;background:rgba(8,24,24,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:var(--s3);overflow-y:auto}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:var(--r-lg);width:100%;max-width:560px;
  padding:var(--s5) var(--s4) var(--s4);position:relative;box-shadow:var(--shadow-deep);
  animation:modalIn .28s cubic-bezier(.22,1,.36,1);margin:auto}
@keyframes modalIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:12px;right:14px;width:38px;height:38px;border-radius:50%;
  border:none;background:var(--cloud);color:var(--text);font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .18s}
.modal-close:hover{background:var(--mist)}
.modal-title{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);line-height:1.5}
.modal-lead{font-size:14px;color:var(--text-lt);margin-top:var(--s1);line-height:1.8}
.modal-options{display:grid;gap:var(--s2);margin-top:var(--s3)}
.modal-option{display:flex;gap:var(--s2);align-items:flex-start;text-align:left;width:100%;
  padding:var(--s3);border:1.5px solid var(--mist);border-radius:var(--r);background:#fff;
  text-decoration:none;color:var(--text);cursor:pointer;
  transition:border-color .18s,background-color .18s,box-shadow .18s}
.modal-option:hover{border-color:var(--teal);background:var(--teal-pale);box-shadow:var(--shadow)}
.mo-icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--teal-pale);
  color:var(--teal-deeper);display:flex;align-items:center;justify-content:center}
.mo-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mo-title{font-size:15.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;line-height:1.5}
.mo-num{font-family:var(--num);font-size:25px;font-weight:600;color:var(--teal-deeper);
  letter-spacing:.01em;line-height:1.3}
.mo-note{font-size:12.5px;color:var(--text-lt);line-height:1.7}
.mo-badge{font-size:11px;font-weight:700;letter-spacing:.08em;background:var(--mist);
  color:var(--teal-deeper);padding:3px 9px;border-radius:99px}
.modal-option.is-soon{opacity:.7;cursor:not-allowed}
.modal-option.is-soon:hover{border-color:var(--mist);background:#fff;box-shadow:none}
.modal-option.is-soon .mo-icon{background:var(--cloud);color:var(--text-lt)}
.modal-foot{font-size:12.5px;color:var(--text-lt);line-height:1.8;margin-top:var(--s3);
  padding-top:var(--s2);border-top:1px solid var(--mist)}

/* ---------- Mobile action bar ---------- */
.mbb{display:none}
.mbb a,.mbb button{flex:1;text-align:center;padding:13px 6px;font-size:13px;font-weight:700;
  border-radius:99px;text-decoration:none;display:flex;align-items:center;justify-content:center;
  line-height:1.3;border:none;cursor:pointer}
.mbb .a1{background:#fff;color:var(--teal-dark);border:1.5px solid var(--teal)}
.mbb .a2{background:var(--teal);color:#fff}
.mbb .a3{background:var(--alert);color:#fff}

/* ---------- Footer ---------- */
footer{background:var(--ink-deep);color:rgba(255,255,255,.62);padding:var(--s6) 0 var(--s3);font-size:14px}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:var(--s6);
  padding-bottom:var(--s5);border-bottom:1px solid rgba(255,255,255,.12)}
.footer-logo img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.footer-addr{margin-top:var(--s3);line-height:1.95;font-size:13.5px}
.footer-addr .tel{font-family:var(--num);font-size:24px;color:#fff;font-weight:600;
  text-decoration:none;display:inline-block;margin-top:6px;letter-spacing:.01em}
.footer-sub{font-size:12.5px;opacity:.75;margin-top:var(--s1);line-height:1.85}
.footer-sns{display:flex;gap:var(--s1);margin-top:var(--s3)}
.footer-sns a{display:flex;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);
  align-items:center;justify-content:center;transition:background-color .18s}
.footer-sns a:hover{background:rgba(255,255,255,.2)}
.footer-sns img{width:20px;height:20px;object-fit:contain}
.footer-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.footer-nav h3{font-size:13px;color:#fff;font-weight:600;letter-spacing:.05em;margin-bottom:var(--s2)}
.footer-nav ul{list-style:none}
.footer-nav li{margin-bottom:8px}
.footer-nav a{color:rgba(255,255,255,.58);text-decoration:none;font-size:13px;line-height:1.7;
  transition:color .18s}
.footer-nav a:hover{color:var(--teal)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding-top:var(--s3);flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.42)}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--s2)}
.footer-legal a{color:rgba(255,255,255,.48);text-decoration:none}
.footer-legal a:hover{color:var(--teal)}
.footer-lang{display:flex;align-items:center;gap:10px}
.footer-lang-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42)}
/* This widget sits at the very bottom of the document, so its popover
   opens upward instead of off the bottom of the page. */
.footer-lang .lang-menu{top:auto;bottom:100%;border-top:1px solid var(--mist);
  border-bottom:3px solid var(--teal);border-radius:var(--r) var(--r) 0 0}

/* ---------- Tables ---------- */
.hours{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff}
.hours caption{text-align:left;font-family:var(--serif);font-size:17px;font-weight:600;
  color:var(--ink);padding-bottom:var(--s1)}
.hours th,.hours td{border:1px solid var(--mist);padding:10px 6px;text-align:center}
.hours thead th{background:var(--teal-deeper);color:#fff;font-weight:600;font-size:13.5px}
.hours tbody th{background:var(--cloud);color:var(--ink);font-weight:600;text-align:left;
  padding-left:14px;white-space:nowrap;font-family:var(--num);font-size:13.5px}
.hours td{color:var(--teal-dark);font-weight:700}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:var(--s3) 0;background:#fff}
.prose th,.prose td{border:1px solid var(--mist);padding:11px 13px;text-align:left;vertical-align:top;
  line-height:1.75}
.prose thead th{background:var(--teal-deeper);color:#fff;font-weight:600;white-space:nowrap}
.prose tbody th{background:var(--cloud);font-weight:600;color:var(--ink);white-space:nowrap}
.prose .chart-figure{background:#fff;border:1px solid var(--mist);border-radius:var(--r);
  padding:var(--s3);margin:var(--s3) 0;text-align:center}
.prose .chart-figure svg{max-width:480px;width:100%;height:auto}
.prose figcaption.note{margin-top:0}

/* ---------- Breadcrumbs ---------- */
.crumbs{background:var(--cloud);border-bottom:1px solid var(--mist);font-size:12.5px}
.crumbs ol{max-width:var(--maxw);margin:0 auto;padding:11px var(--gutter);list-style:none;
  display:flex;flex-wrap:wrap;gap:7px;color:var(--text-lt);line-height:1.7}
.crumbs li::after{content:'\203a';margin-left:7px;color:var(--mist)}
.crumbs li:last-child::after{content:''}
.crumbs a{color:var(--text-lt);text-decoration:none}
.crumbs a:hover{color:var(--teal-dark);text-decoration:underline}

/* ---------- Breakpoints ---------- */
@media(max-width:1300px){
  .nav-links>li>a{padding:0 10px}
  .nav-links>li>a .ja{font-size:13px}
}

@media(max-width:1240px){
  .top-bar{display:none}
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-cta-wrap{margin-left:auto}
  .nav-cta-wrap .lang.lang-compact{display:flex}
}

@media(max-width:1080px){
  .page-body{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .side{position:static}
  .certs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:900px){
  :root{--gutter:20px}
  .nav-cta.alert{display:none}
  .nav-cta.reserve{display:none}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-grid a{border-bottom:1px solid rgba(255,255,255,.15);min-height:104px;padding:var(--s3) var(--s2)}
  .quick-grid a:nth-child(odd){border-right:1px solid rgba(255,255,255,.15)}
  .quick-grid a:nth-child(even){border-right:none}
  .quick-grid a:last-child{grid-column:1 / -1;border-right:none;border-bottom:none}
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:var(--s4)}
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  section{padding-top:clamp(40px,7vw,52px);padding-bottom:clamp(40px,7vw,52px)}
  .hero-inner{padding:var(--s6) var(--gutter) var(--s5)}
  .lang-menu{position:fixed;top:var(--nav-h);left:var(--gutter);right:var(--gutter);
    width:auto;max-width:none;min-width:0;border-radius:0 0 var(--r) var(--r);
    max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto}
  .mbb{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:280;
    background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--mist);
    padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom));gap:8px;
    box-shadow:0 -4px 14px rgba(0,80,80,.08)}
  body{padding-bottom:74px}
  .mm-inner{padding-bottom:140px}
}

@media(max-width:640px){
  .certs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .footer-nav{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .lang-menu{grid-template-columns:1fr}
  .related ul{grid-template-columns:1fr}
  .modal{padding:0;align-items:flex-end}
  .modal-card{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:var(--s4) var(--s3) var(--s3);margin:0}
  .modal-title{font-size:20px}
  .modal-option{padding:var(--s2);gap:var(--s2)}
  .mo-num{font-size:22px}
  .prose>h2{margin-top:var(--s5)}
  .page-body{padding-top:var(--s4)}
  .hero h1{line-height:1.6}
}

@media(max-width:400px){
  .quick-grid .ttl{font-size:13.5px}
  .mbb a,.mbb button{font-size:12px;padding:12px 4px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .nav,.top-bar,.mbb,.side,footer,.mobile-menu,.modal,.hero-dots{display:none!important}
  body{padding:0;font-size:11pt;background:#fff}
  .page-head{background:none;color:#000;padding:0 0 12px}
  .page-head h1,.page-head .en{color:#000}
  .page-body{display:block;padding:0}
}

/* Buttons rendered as links inside .prose: .prose a outranks .btn (two
   selectors beat one), so restore the button's own colour and remove the
   prose underline. */
.prose a.btn{text-decoration:none}
.prose a.btn-teal{color:#fff}
.prose a.btn-teal:hover{color:#fff}
.prose a.btn-ghost{color:var(--teal-dark)}

/* Header phone block, in place of the former reservation and emergency
   buttons. Hidden at the same width those were. */
.nav-phone{display:inline-flex;flex-direction:column;justify-content:center;gap:1px;
  height:38px;padding:0 16px;border-radius:var(--r);background:var(--teal);color:#fff;
  text-decoration:none;white-space:nowrap;transition:background .18s}
.nav-phone:hover{background:var(--teal-dark)}
.nav-phone .num{font-family:var(--num);font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1.1}
.nav-phone .sub{font-size:10px;letter-spacing:.04em;opacity:.9;line-height:1.1}
@media(max-width:900px){
  .nav-phone{display:none}
}

/* Temporary-site notice, above the top bar. */
/* Site notice. Sticky above the sticky nav, and deliberately not in the site
   palette so it reads as a notice rather than as part of the header.
   --maint-h is measured at runtime so the nav sits directly beneath it. */
:root{--maint-h:0px}
.maint-bar{position:sticky;top:0;z-index:320;background:#fdf3e3;color:#6b4e12;
  border-bottom:2px solid #d8b874;margin-bottom:-1px}
.maint-bar p{max-width:var(--maxw);margin:0 auto;padding:13px var(--gutter);
  font-size:15px;font-weight:700;line-height:1.7;text-align:center;letter-spacing:.01em}
.maint-ico{width:19px;height:19px;flex:none;vertical-align:-4px;margin-right:9px}
.nav{top:calc(var(--maint-h) - 1px)}
@media(max-width:700px){
  .maint-bar p{padding:11px var(--gutter);font-size:13.5px;text-align:left}
  .maint-ico{width:17px;height:17px;vertical-align:-3px;margin-right:7px}
}
}

/* ---------- Booking form (obstetrics first visit) ---------- */
.form-notice{border:1px solid #f0dcb8;background:#fdf3e3;border-radius:var(--r);
  padding:var(--s2) var(--s3);margin:0 0 var(--s3)}
.form-notice p{margin:0;font-size:14px;line-height:1.85;color:#6b4e12}
.form-notice p+p{margin-top:6px}
.form-notice a{color:#6b4e12}

.form-steps{display:flex;gap:10px;margin:0 0 var(--s3)}
.fstep{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 10px;border-radius:var(--r);background:var(--cloud);color:var(--text-lt);
  font-size:14px;font-weight:700;text-align:center;line-height:1.3}
.fstep em{font-style:normal;font-family:var(--num);font-size:15px}
.fstep small{font-size:10px;letter-spacing:.08em;font-weight:500;opacity:.75}
.fstep.is-current{background:var(--teal);color:#fff}

.prose .tah-form{margin:var(--s2) 0 0}
.frow{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--s3);
  align-items:start;padding:var(--s2) 0;border-bottom:1px solid var(--mist)}
.fgroup .frow:first-of-type{border-top:1px solid var(--mist)}
.frow.is-invalid{background:#fff7f6}
.flabel{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
  font-size:14px;font-weight:700;color:var(--ink);padding-top:10px;line-height:1.6}
.flabel .fsub{display:block;font-weight:400;font-size:12.5px;color:var(--text-lt);margin-top:3px}
.req{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:var(--alert);
  border-radius:3px;padding:2px 6px;letter-spacing:.04em;white-space:nowrap;margin-top:2px}

.ffield input[type=text],.ffield input[type=tel],.ffield input[type=email],
.ffield input[type=date],.ffield select,.ffield textarea{
  width:100%;font:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--mist);border-radius:var(--r);padding:9px 11px;line-height:1.5}
.ffield textarea{resize:vertical}
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{
  outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.frow.is-invalid input,.frow.is-invalid select{border-color:var(--alert)}
.fgrid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.fgrid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fstack{display:grid;gap:10px}
.finline{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.finline input{max-width:220px}
.fsmall{font-size:12.5px;color:var(--text-lt)}
.fhint{margin:7px 0 0;font-size:12.5px;color:var(--text-lt);line-height:1.8}
.fnote-alert{margin:9px 0 0;font-size:12.5px;color:var(--alert-dark);line-height:1.8}

.fchoice{display:flex;flex-wrap:wrap;gap:10px}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;justify-content:center;min-width:96px;
  padding:9px 15px;border:1px solid var(--mist);border-radius:var(--r);background:#fff;
  font-size:14px;transition:background .15s,border-color .15s,color .15s}
.pill input:checked+span{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}
.pill input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}
.pill-wide span{min-width:120px}

.fpref{display:grid;grid-template-columns:86px minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}
.fpref .tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 6px;
  border-radius:var(--r);background:var(--cloud);color:var(--teal-dark);
  font-size:12.5px;font-weight:700;white-space:nowrap}

.fcheck{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.6;cursor:pointer}
.fcheck input{width:17px;height:17px;flex:none;accent-color:var(--teal);cursor:pointer}
.prose .tah-form .fcheck{margin-top:12px}
.fsubhead{margin:var(--s3) 0 10px;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink)}
.fprivacy{max-height:200px;overflow:auto;border:1px solid var(--mist);border-radius:var(--r);
  padding:var(--s2) var(--s3);background:var(--cloud);font-size:13px;line-height:1.9}
.fprivacy p{margin:0 0 9px}
.fprivacy p:last-child{margin-bottom:0}
.fconsent{display:grid;gap:4px;margin-top:var(--s2);justify-items:start}
.fconsent.is-invalid{background:#fff7f6}
.fconsent .fcheck{align-items:center}

.fsubmit{margin-top:var(--s3);text-align:center}
.ferr{margin:12px 0 0;font-size:13.5px;color:var(--alert-dark);font-weight:700}

.fout{margin-top:var(--s4);border:1px solid var(--teal);border-radius:var(--r);
  padding:var(--s3);background:var(--cloud)}
.fout .fsubhead{margin-top:0}
.fout textarea{width:100%;min-height:300px;margin-top:10px;font-size:13px;line-height:1.8;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans JP",monospace;
  color:var(--ink);background:#fff;border:1px solid var(--mist);border-radius:var(--r);
  padding:var(--s2);resize:vertical}
.fout-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s2)}
.prose .fout a.btn{text-decoration:none}

@media(max-width:720px){
  .form-steps{flex-direction:column;gap:8px}
  .frow{grid-template-columns:minmax(0,1fr);gap:9px;padding:16px 0}
  .flabel{padding-top:0}
  .fpref{grid-template-columns:minmax(0,1fr);gap:8px}
  .fpref .tag{justify-self:start;padding:5px 12px}
  .fgrid-2{grid-template-columns:minmax(0,1fr)}
  .finline input{max-width:none;width:100%}
  .fout-btns .btn{width:100%;text-align:center;justify-content:center}
}

/* Hours table: the Friday column is the exception people miss, so it is
   called out rather than left as a dash in a grid of dots. */
.hours td{font-size:15px}
.hours tbody th{font-size:14px}
.hours thead th.hl{background:#8a5a12;font-size:14.5px;line-height:1.3}
.hours thead th.hl span{display:block;font-size:10.5px;font-weight:500;opacity:.92;margin-top:2px}
.hours td.hl{background:#fdf7ec}
.hours td.off{color:var(--text-lt);font-weight:600;font-size:12.5px;background:var(--cloud)}
.hours td.hl.off{background:#fbf0dd;color:#8a5a12}
.hours-key{margin:var(--s2) 0 6px;font-size:14.5px;line-height:1.8;color:var(--ink);
  border-left:3px solid #8a5a12;padding-left:12px}

/* Form groups, per-field messages and the copy button's done state. */
.fgroup{border:0;margin:0 0 var(--s4);padding:0;min-width:0}
.fgroup legend{display:block;width:100%;padding:0 0 10px;margin:0 0 2px;
  font-family:var(--serif);font-size:18px;font-weight:600;color:var(--teal-dark);
  border-bottom:2px solid var(--teal)}
.freq-note{margin:0 0 var(--s3);font-size:13.5px;color:var(--text-lt)}
.freq-note .req{margin-right:6px}
.fmsg{margin:7px 0 0;font-size:13px;font-weight:700;color:var(--alert-dark)}
.fmsg::before{content:"\26A0\FE0E";margin-right:6px}
.frow.is-invalid{background:#fff7f6;box-shadow:inset 3px 0 0 var(--alert)}
.frow.is-invalid .flabel{padding-left:9px}
.fconsent.is-invalid{background:#fff7f6;box-shadow:inset 3px 0 0 var(--alert);
  padding:10px 12px;border-radius:var(--r)}
.btn.is-done{background:var(--teal-dark)}
.fout .fsubhead::before{content:"\2713";color:var(--teal);margin-right:8px;font-weight:700}

@media(max-width:720px){
  .fgroup legend{font-size:16.5px}
  .frow.is-invalid .flabel{padding-left:9px}
  .frow.is-invalid{padding-left:0}
  /* comfortable touch targets */
  .ffield input[type=text],.ffield input[type=tel],.ffield input[type=email],
  .ffield input[type=date],.ffield select,.ffield textarea{padding:12px 12px;font-size:16px}
  .pill span{min-width:0;flex:1;padding:12px 16px;font-size:15px}
  .fchoice{gap:8px}
  .fcheck input{width:20px;height:20px}
  .fsubmit .btn{width:100%}
}

/* The logo would not shrink, so brand + language + CTA + burger overflowed a
   narrow viewport and the whole page could be dragged sideways. */
@media(max-width:900px){
  .nav-brand{flex:0 1 auto;min-width:0}
  .nav-brand img{max-width:100%;height:auto;max-height:38px}
}
@media(max-width:420px){
  .nav-brand img{max-height:32px}
}

/* Document download list. */
.prose .dl-list{list-style:none;margin:var(--s2) 0 var(--s2);padding:0;display:grid;gap:10px}
.prose .dl-list li{margin:0;padding:0}
.prose .dl-list li::before{display:none}
.prose a.dl-item{display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid var(--mist);border-radius:var(--r);background:#fff;
  text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.prose a.dl-item:hover{border-color:var(--teal);background:var(--cloud)}
.dl-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r);background:var(--teal);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.06em}
.dl-text{display:grid;gap:3px;min-width:0}
.dl-text strong{font-size:15px;font-weight:700;line-height:1.5}
.dl-text span{font-size:13px;color:var(--text-lt);line-height:1.7}
@media(max-width:560px){
  .prose a.dl-item{gap:12px;padding:12px 13px}
  .dl-ico{width:38px;height:38px;font-size:10px}
  .dl-text strong{font-size:14.5px}
}

/* 404 */
.nf-body{grid-template-columns:minmax(0,1fr)}
.nf-code{font-family:var(--num);font-size:60px;font-weight:700;color:var(--mist);
  line-height:1;margin:0 0 var(--s2)}
.prose .nf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin:var(--s3) 0}
.prose a.nf-card{display:grid;gap:3px;padding:16px 18px;border:1px solid var(--mist);
  border-radius:var(--r);background:#fff;text-decoration:none;color:var(--ink);
  transition:border-color .15s,background .15s}
.prose a.nf-card:hover{border-color:var(--teal);background:var(--cloud)}
.nf-card strong{font-size:15px;font-weight:700}
.nf-card span{font-size:10.5px;letter-spacing:.08em;color:var(--teal-dark)}
@media(max-width:720px){.prose .nf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.prose .nf-grid{grid-template-columns:minmax(0,1fr)}}

/* 出産の申し込み flow, and the reception-hours pairs. */
.prose .flow{display:grid;gap:14px;margin:var(--s3) 0}
.flow-row{display:grid;grid-template-columns:230px 34px minmax(0,1fr);gap:0;align-items:center}
.flow-from{padding:20px 18px;border:1px solid var(--teal);border-radius:var(--r);
  background:var(--cloud);text-align:center}
.prose .flow-from p{margin:0;font-size:14.5px;font-weight:700;line-height:1.7;color:var(--ink)}
.flow-from span{font-weight:400;font-size:13.5px}
.flow-arrow{justify-self:center;width:26px;height:26px;border-radius:50%;background:var(--teal);
  position:relative}
.flow-arrow::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:8px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.flow-to{padding:20px 22px;border-radius:var(--r);background:var(--cloud);text-align:center}
.prose .flow-to p{margin:0 0 8px;font-size:14.5px;line-height:1.8}
.prose .flow-to p:last-child{margin-bottom:0}
.flow-head{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--teal-dark);
  line-height:1.6}
.flow-sub{font-size:13.5px;color:var(--text-lt)}
.prose .flow-to a{font-weight:700}
@media(max-width:760px){
  .flow-row{grid-template-columns:minmax(0,1fr);gap:8px;justify-items:stretch}
  .flow-arrow{transform:rotate(90deg)}
  .flow-from,.flow-to{padding:16px 15px}
  .flow-head{font-size:16.5px}
}
.prose .hoursdl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--s3);
  margin:0 0 var(--s2);font-size:15px;line-height:1.9}
.prose .hoursdl dt{font-weight:700;white-space:nowrap;color:var(--ink)}
.prose .hoursdl dd{margin:0;font-family:var(--num);letter-spacing:.01em}

/* Long lists of short items read better in columns than as one tall column. */
.prose ul.list-cols{columns:3;column-gap:var(--s4)}
.prose ul.list-cols li{break-inside:avoid}
@media(max-width:900px){.prose ul.list-cols{columns:2}}
@media(max-width:520px){.prose ul.list-cols{columns:1}}

/* Chronology and dated-record tables. */
.prose table.timeline{width:100%;border-collapse:collapse;font-size:14.5px}
.prose table.timeline th,.prose table.timeline td{padding:9px 14px;border-bottom:1px solid var(--mist);
  text-align:left;vertical-align:top;line-height:1.75}
.prose table.timeline thead th{background:var(--teal);color:#fff;font-size:13.5px;white-space:nowrap}
.prose table.timeline tbody th{font-weight:700;white-space:nowrap;width:1%;color:var(--teal-dark)}
.prose table.timeline td:nth-child(2){white-space:nowrap;color:var(--text-lt);width:1%}
.prose table.timeline tbody tr:hover{background:var(--cloud)}

/* Related-pages cards sit inside .prose, so the prose bullet was being drawn
   beside each card and floating out of line on two-line labels. */
.prose .related ul{margin:0;padding:0}
.prose .related ul li{margin:0;padding-left:0}
.prose .related ul li::before{content:none;display:none}

/* Hospital newsletter issues. */
.prose ul.kk-grid{list-style:none;margin:var(--s3) 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s3)}
.prose ul.kk-grid li{margin:0;padding-left:0}
.prose ul.kk-grid li::before{content:none;display:none}
.prose a.kk-card{display:block;border:1px solid var(--mist);border-radius:var(--r);
  background:#fff;text-decoration:none;color:var(--ink);overflow:hidden;
  transition:border-color .15s,box-shadow .15s}
.prose a.kk-card:hover{border-color:var(--teal);box-shadow:0 2px 10px rgba(0,0,0,.07)}
.kk-card img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:fill;
  border-bottom:1px solid var(--mist)}
.kk-noimg{display:flex;align-items:center;justify-content:center;height:150px;
  background:var(--cloud);color:var(--teal-dark);font-weight:700;letter-spacing:.08em}
.kk-meta{display:block;padding:11px 13px}
.kk-meta strong{display:block;font-family:var(--num);font-size:15px;color:var(--teal-dark)}
.kk-meta span{display:block;font-size:12.5px;color:var(--text-lt);margin-top:2px;line-height:1.6}

/* ---------- Doctor profiles ---------- */
/* Each field was running into the next, so every row is now separated and the
   label column is set apart from the value. */
.prose .staff dl{display:grid;grid-template-columns:188px minmax(0,1fr);gap:0;
  margin-top:var(--s2);font-size:14px;line-height:1.85}
.prose .staff dt{padding:9px var(--s2) 9px 0;border-top:1px solid var(--mist);
  color:var(--teal-dark);font-weight:700;font-size:13px;letter-spacing:.01em;
  overflow-wrap:anywhere;line-height:1.6}
.prose .staff dd{padding:9px 0;border-top:1px solid var(--mist);margin:0;color:var(--text)}
.prose .staff h4{margin:0 0 2px;font-size:19px}

/* Doctors with no photo get the same circle so the cards line up. */
.prose .staff:not(.has-photo){display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:0 var(--s3)}
.prose .staff:not(.has-photo)::before{content:"";grid-row:1 / span 2;width:250px;height:250px;
  border-radius:50%;background:var(--cloud);border:1px solid var(--mist);
  background-image:radial-gradient(circle at 50% 38%, var(--mist) 0 34px, transparent 35px),
    radial-gradient(ellipse at 50% 96%, var(--mist) 0 52px, transparent 53px)}
.prose .staff:not(.has-photo) h4{grid-column:2;align-self:center}
.prose .staff:not(.has-photo) dl{grid-column:2}

/* Clinic rota, no longer buried in the last doctor's profile */
.sched{margin:var(--s3) 0;padding:var(--s3);border:1px solid var(--mist);
  border-radius:var(--r);background:var(--cloud)}
.sched h3{margin:0 0 10px;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--teal-dark)}
.prose ul.sched-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 14px}
.prose ul.sched-list li{margin:0;padding-left:0;font-size:14px;line-height:1.8}
.prose ul.sched-list li::before{content:none;display:none}
.sched .note{margin:12px 0 0}

@media(max-width:720px){
  .prose .staff dl{grid-template-columns:minmax(0,1fr);gap:0}
  .prose .staff dt{padding-bottom:0;border-top:1px solid var(--mist)}
  .prose .staff dd{padding-top:2px;border-top:0}
  .prose .staff:not(.has-photo){grid-template-columns:minmax(0,1fr)}
  .prose .staff:not(.has-photo)::before{grid-row:auto;width:200px;height:200px;margin:0 auto var(--s2)}
  .prose .staff:not(.has-photo) h4{grid-column:1;text-align:center}
  .prose .staff:not(.has-photo) dl{grid-column:1}
}

/* Click a photo to see it full size. */
.lb{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(12,24,24,.9);padding:24px;cursor:zoom-out}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.45)}
.lb-close{position:absolute;top:14px;right:18px;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.26)}
.prose .content-photo img,.prose .staff-photo{cursor:zoom-in}

/* Booking form: give the notice, step bar and eligibility notes room to breathe. */
.form-page .form-notice{margin-bottom:var(--s4)}
.form-page .form-steps{margin-bottom:var(--s4)}
.form-page > .note{margin:0 0 var(--s4);padding:14px 16px;border-left:3px solid var(--mist);
  background:var(--cloud);line-height:2}
.form-page .callout{margin-bottom:var(--s4)}
.fstep{gap:10px;padding:13px 12px}
.fstep em{margin-right:2px}

/* Careers link, permanent in the footer. */
.footer-careers{margin-top:var(--s3)}
.btn-careers{display:inline-flex;flex-direction:column;gap:2px;padding:12px 20px;
  border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r);text-decoration:none;
  color:#fff;transition:background .18s,border-color .18s}
.btn-careers:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-careers strong{font-size:14.5px;font-weight:700;letter-spacing:.02em}
.btn-careers span{font-size:11px;opacity:.78;letter-spacing:.04em}
.btn-careers::after{content:"\2197";position:absolute;opacity:0}