/* =====================================================
   住吉医院 クリニックページ専用スタイル
   -----------------------------------------------------
   clinic/index.html からのみ読み込まれる独立したデザイン系統。
   共有ページ系（css/style.css）とは意図的に分離しており、
   palette-*.css の配色切り替えにも参加しない。
   詳細は docs/ARCHITECTURE.md §3 を参照。
   ===================================================== */
:root {
  --cl-primary:       #6FAF86;
  --cl-primary-dark:  #3E7655;
  --cl-primary-deep:  #2F6B4D;
  --cl-primary-light: #E7F3EA;
  --cl-accent:        #E2B05E;
  --cl-accent-dark:   #7A520F;
  --cl-accent-deep:   #63420B;
  --cl-accent-hover:  #4F3408;
  --cl-accent-light:  #FBF0D7;
  --cl-accent-on-dark:#FFF0CC;
  --cl-accent-hover-bg:#D4A050;
  --cl-green:         #2F7450;
  --cl-green-deep:    #285F43;
  --cl-green-light:   #E2F1E7;
  --cl-bg:            #F8FAF3;
  --cl-text:          #2D4335;
  --cl-text-muted:    #53685A;
  --cl-border:        #D9E3DA;
  --cl-hero-start:    #183F2A;
  --cl-footer:        #183526;
  --r:                8px;
  --r-lg:             12px;
  --max-w:            1100px;
  --shadow-sm:        0 1px 3px rgba(15,23,42,.06);
  --shadow-md:        0 3px 10px rgba(15,23,42,.08);
  --shadow-lg:        0 6px 18px rgba(15,23,42,.10);
  --font:             'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--cl-text); background: var(--cl-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--cl-primary-deep);
  outline-offset: 3px;
}

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }

/* ===== Corporate Return Bar ===== */
.corp-bar {
  background: var(--cl-text);
  padding: .4rem 0;
}
.corp-bar__in {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.corp-bar__link {
  display: flex; align-items: center; gap: .4rem;
  font-size: .72rem; color: rgba(255,255,255,.7);
  transition: color .15s;
}
.corp-bar__link:hover { color: #fff; }
.corp-bar__link svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.corp-bar__right { font-size: .68rem; color: rgba(255,255,255,.7); }

/* ===== Clinic Header ===== */
.cl-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  box-shadow: 0 1px 12px rgba(15,23,42,.08);
  border-bottom: 3px solid var(--cl-primary);
}
.cl-header-in {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; height: 68px; gap: 1.25rem;
}
.cl-logo { flex-shrink: 0; }
.cl-logo__name { font-size: 1.15rem; font-weight: 900; color: var(--cl-primary-deep); line-height: 1.2; }
.cl-logo__dept { font-size: .65rem; color: var(--cl-text-muted); font-weight: 500; margin-top: .1rem; }

.cl-nav { display: flex; align-items: center; gap: .05rem; margin: 0 auto; }
.cl-nav__link {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .4rem .65rem;
  font-size: .72rem; font-weight: 600; color: var(--cl-text);
  border-radius: var(--r); transition: background .15s, color .15s; white-space: nowrap;
}
.cl-nav__link svg { width: 17px; height: 17px; stroke: var(--cl-primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cl-nav__link:hover { background: var(--cl-primary-light); color: var(--cl-primary-dark); }

.cl-header-cta { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.cl-phone { text-align: right; }
.cl-phone__lbl { font-size: .58rem; color: var(--cl-text-muted); }
.cl-phone__num {
  display: flex; align-items: center; gap: .3rem;
  font-size: 1.05rem; font-weight: 900; color: var(--cl-primary-dark); letter-spacing: .02em;
}
.cl-phone__num svg { width: 13px; height: 13px; stroke: var(--cl-primary); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cl-reserve-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--cl-accent); color: var(--cl-accent-hover);
  padding: .6rem 1.1rem; border-radius: var(--r);
  font-size: .82rem; font-weight: 700; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.cl-reserve-btn:hover { background: var(--cl-accent-hover-bg); transform: translateY(-1px); }
.cl-reserve-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cl-hamburger {
  display: none; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px; width: 40px; height: 40px;
  cursor: pointer; background: none; border: none; flex-shrink: 0;
}
.cl-hamburger span { display: block; width: 22px; height: 2px; background: var(--cl-text); border-radius: 2px; transition: all .3s; }
.cl-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cl-hamburger.open span:nth-child(2) { opacity: 0; }
.cl-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Mobile Menu ===== */
.cl-mobile-menu {
  display: none; position: fixed; inset: 71px 0 0 0;
  background: #fff; z-index: 99; overflow-y: auto; padding: 1.25rem 1.5rem 3rem;
}
.cl-mobile-menu.open { display: block; }
.cl-mm-phone {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem; background: var(--cl-primary-light); border-radius: var(--r); margin-bottom: 1rem;
}
.cl-mm-phone svg { width: 20px; height: 20px; stroke: var(--cl-primary-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-mm-phone__num { font-size: 1.2rem; font-weight: 700; color: var(--cl-primary-dark); }
.cl-mm-reserve {
  display: block; text-align: center; background: var(--cl-accent); color: var(--cl-accent-hover);
  padding: .85rem; border-radius: var(--r); font-weight: 700; font-size: .95rem; margin-bottom: 1.5rem;
}
.cl-mm-link { display: block; padding: .75rem .5rem; font-size: .95rem; border-bottom: 1px solid var(--cl-border); }
.cl-mm-corp {
  display: flex; align-items: center; gap: .4rem;
  padding: .85rem .5rem; font-size: .85rem; color: var(--cl-text-muted);
  border-top: 2px solid var(--cl-border); margin-top: .5rem;
}
.cl-mm-corp svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Hero ===== */
.cl-hero {
  position: relative; overflow: hidden; min-height: 540px;
  display: flex; align-items: center;
  background: linear-gradient(135deg, var(--cl-hero-start) 0%, var(--cl-primary-deep) 55%, var(--cl-primary-dark) 100%);
  --hero-focal: center;
}
.cl-hero__photo {
  position: absolute; inset: 0;
  background: url('/images/hero-kids.jpg') var(--hero-focal)/cover no-repeat;
  opacity: .22;
}
.cl-hero__panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: 42%;
  background: url('/images/hero-kids.jpg') var(--hero-focal)/cover no-repeat;
  clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
  opacity: .75;
}
.cl-hero__content {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto; padding: 4.5rem 1.5rem; width: 100%;
}
.cl-hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.18); color: #fff;
  padding: .35rem .9rem; border-radius: 50px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px);
  margin-bottom: 1.25rem;
}
.cl-hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cl-accent); display: inline-block; }
.cl-hero__h1 {
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; color: #fff;
  line-height: 1.22; letter-spacing: -.02em; margin-bottom: 1rem;
}
.cl-hero__h1 strong { color: var(--cl-accent-on-dark); font-style: normal; }
.cl-hero__lead {
  font-size: 1rem; color: rgba(255,255,255,.9); line-height: 1.85;
  margin-bottom: 2rem; max-width: 460px;
}
.cl-hero__btns { display: flex; gap: .75rem; flex-wrap: wrap; }
.cl-btn-accent {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--cl-accent); color: var(--cl-accent-hover);
  padding: .85rem 1.75rem; border-radius: var(--r); font-weight: 700; font-size: .95rem;
  box-shadow: 0 4px 14px rgba(45,67,53,.12); transition: all .2s;
}
.cl-btn-accent:hover { background: var(--cl-accent-hover-bg); transform: translateY(-2px); }
.cl-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.14); color: #fff;
  padding: .85rem 1.75rem; border-radius: var(--r); font-weight: 600; font-size: .95rem;
  border: 2px solid rgba(255,255,255,.55); backdrop-filter: blur(8px); transition: all .2s;
}
.cl-btn-ghost:hover { background: rgba(255,255,255,.24); }
.btn-svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Quick Bar ===== */
.cl-quickbar { background: #fff; box-shadow: 0 2px 12px rgba(15,23,42,.06); }
.cl-quickbar__in {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: stretch;
}
.cl-qitem {
  flex: 1; display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.25rem; border-right: 1px solid var(--cl-border);
}
.cl-qitem:last-child { border-right: none; }
.cl-qitem__ico {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: var(--cl-primary-light);
  display: flex; align-items: center; justify-content: center;
}
.cl-qitem__ico svg { width: 20px; height: 20px; stroke: var(--cl-primary-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-qitem--amber .cl-qitem__ico { background: var(--cl-accent-light); }
.cl-qitem--amber .cl-qitem__ico svg { stroke: var(--cl-accent-dark); }
.cl-qitem__lbl { font-size: .62rem; color: var(--cl-text-muted); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .15rem; }
.cl-qitem__val { font-size: .88rem; font-weight: 700; color: var(--cl-text); line-height: 1.35; }
.cl-qitem__val small { font-size: .72rem; font-weight: 400; color: var(--cl-text-muted); }

/* ===== Symptom Quick-Nav ===== */
.cl-symptom { padding: 2.75rem 0; background: #fff; border-bottom: 1px solid var(--cl-border); }
.cl-symptom__head { font-size: .82rem; font-weight: 700; color: var(--cl-text-muted); margin-bottom: 1rem; }
.cl-symptom__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.cl-symptom__link {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem; background: var(--cl-bg); border: 1px solid var(--cl-border);
  border-radius: var(--r); font-size: .84rem; font-weight: 600; color: var(--cl-text);
  transition: border-color .15s, background .15s;
}
.cl-symptom__link:hover { border-color: var(--cl-primary); background: var(--cl-primary-light); }
.cl-symptom__link svg { width: 17px; height: 17px; stroke: var(--cl-primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ===== Sections ===== */
.cl-section { padding: 5rem 0; background: var(--cl-bg); }
.cl-section--white { background: #fff; }
.cl-section--brand { background: linear-gradient(135deg, var(--cl-primary-deep) 0%, var(--cl-primary-dark) 100%); }

.cl-sec-head { margin-bottom: 3rem; }
.cl-sec-head--center { text-align: center; }
.cl-sec-head__en { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cl-primary-deep); margin-bottom: .4rem; }
.cl-sec-head--brand .cl-sec-head__en { color: rgba(255,255,255,.9); }
.cl-sec-head__ja { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 900; color: var(--cl-text); line-height: 1.3; letter-spacing: -.02em; }
.cl-sec-head--brand .cl-sec-head__ja { color: #fff; }
.cl-sec-head__sub { font-size: .9rem; color: var(--cl-text-muted); margin-top: .6rem; line-height: 1.8; }
.cl-sec-head--brand .cl-sec-head__sub { color: rgba(255,255,255,.9); }

/* ===== News ===== */
.cl-news__wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
.cl-news__item {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .75rem;
  padding: .9rem 0; border-bottom: 1px solid var(--cl-border);
}
.cl-news__date { font-size: .75rem; color: var(--cl-text-muted); white-space: nowrap; font-weight: 500; min-width: 88px; }
.cl-news__tag {
  display: inline-block; padding: .12rem .55rem; border-radius: 50px;
  font-size: .64rem; font-weight: 700; white-space: nowrap;
}
.cl-news__tag--info    { background: var(--cl-primary-light); color: var(--cl-primary-dark); }
.cl-news__tag--vaccine { background: var(--cl-green-light); color: var(--cl-green-deep); }
.cl-news__tag--holiday { background: #FEE2E2; color: #991B1B; }
.cl-news__tag--notice  { background: var(--cl-accent-light); color: var(--cl-accent-dark); }
.cl-news__title { font-size: .88rem; color: var(--cl-text); flex: 1; }
a.cl-news__title:hover { text-decoration: underline; color: var(--cl-primary-dark); }
.cl-news__more {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1.5rem; font-size: .85rem; font-weight: 700; color: var(--cl-primary-deep);
  border-bottom: 2px solid var(--cl-primary-light); padding-bottom: .2rem; transition: border-color .15s;
}
.cl-news__more:hover { border-color: var(--cl-primary); }
.cl-news__more svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cl-news__img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.cl-news__empty { font-size: .88rem; color: var(--cl-text-muted); padding: .5rem 0; }

/* ===== Services ===== */
.cl-services__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
.cl-svc-card {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.cl-svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cl-svc-card--feat { grid-column: span 2; }
.cl-svc-card__img { width: 100%; height: 220px; object-fit: cover; }
.cl-svc-card--feat .cl-svc-card__img { height: 280px; }
.cl-svc-card__body { padding: 1.5rem; }
.cl-svc-card__tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .75rem; border-radius: 50px; font-size: .68rem; font-weight: 700; margin-bottom: .75rem;
}
.cl-svc-card__tag--peds   { background: var(--cl-primary-light); color: var(--cl-primary-dark); }
.cl-svc-card__tag--int    { background: var(--cl-accent-light); color: var(--cl-accent-dark); }
.cl-svc-card__tag--resp   { background: var(--cl-green-light); color: var(--cl-green-deep); }
.cl-svc-card__tag-star    { color: var(--cl-accent-dark); }
.cl-svc-card__h3 { font-size: 1.15rem; font-weight: 900; color: var(--cl-text); margin-bottom: .55rem; }
.cl-svc-card--feat .cl-svc-card__h3 { font-size: 1.45rem; }
.cl-svc-card__p { font-size: .86rem; color: var(--cl-text-muted); line-height: 1.85; }
.cl-svc-card__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.cl-chip {
  display: inline-flex; align-items: center; gap: .2rem;
  background: var(--cl-bg); padding: .28rem .65rem;
  border-radius: 50px; font-size: .72rem; font-weight: 600; color: var(--cl-text);
}
.cl-chip::before { content: '✓'; color: var(--cl-green); font-weight: 900; font-size: .8rem; }

/* ===== Vaccine ===== */
.cl-vax-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 1rem;
  margin-bottom: 1.5rem;
}
.cl-vax-card {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r); padding: 1rem 1.1rem; backdrop-filter: blur(6px);
  transition: background .2s;
}
.cl-vax-card:hover { background: rgba(255,255,255,.24); }
.cl-vax-card__ico {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
  margin-bottom: .6rem;
}
.cl-vax-card__ico svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-vax-card__name { font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: .2rem; }
.cl-vax-card__note { font-size: .72rem; color: rgba(255,255,255,.9); line-height: 1.5; }
.cl-vax-sub {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.9); margin-bottom: .85rem;
}
.cl-vax-note {
  background: rgba(255,255,255,.12); border-radius: var(--r); padding: 1rem 1.25rem;
  color: rgba(255,255,255,.9); font-size: .82rem; line-height: 1.85;
  border-left: 3px solid rgba(255,255,255,.45); margin-top: 2rem;
}
.cl-vax-note--tight { margin-top: 1.5rem; font-size: .78rem; }

/* ===== Tests ===== */
.cl-tests__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1rem; }
.cl-test-item {
  background: #fff; border-radius: var(--r); padding: 1.35rem 1rem; text-align: center;
  box-shadow: var(--shadow-sm); border: 1.5px solid var(--cl-border);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cl-test-item:hover { border-color: var(--cl-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cl-test-item__ico {
  width: 46px; height: 46px; border-radius: 12px; margin: 0 auto .65rem;
  background: var(--cl-primary-light); display: flex; align-items: center; justify-content: center;
}
.cl-test-item__ico svg { width: 22px; height: 22px; stroke: var(--cl-primary-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cl-test-item__name { font-size: .78rem; font-weight: 700; color: var(--cl-text); line-height: 1.4; }
.cl-tests__note { text-align: center; margin-top: 1.75rem; font-size: .82rem; color: var(--cl-text-muted); }

/* ===== Doctors ===== */
.cl-doctors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.cl-doctor-card {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  overflow: hidden; display: flex; transition: transform .2s;
}
.cl-doctor-card:hover { transform: translateY(-3px); }
.cl-doctor-card__img { width: 160px; flex-shrink: 0; object-fit: cover; }
.cl-doctor-card__body { padding: 1.5rem; }
.cl-doctor-card__role { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cl-primary-deep); margin-bottom: .45rem; }
.cl-doctor-card__name { font-size: 1.2rem; font-weight: 900; color: var(--cl-text); }
.cl-doctor-card__dept { font-size: .76rem; color: var(--cl-text-muted); margin-bottom: .75rem; margin-top: .1rem; }
.cl-doctor-card__msg { font-size: .84rem; color: var(--cl-text-muted); line-height: 1.85; }
.cl-doctor-card__more {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .75rem;
  font-size: .8rem; font-weight: 700; color: var(--cl-primary-deep);
  border-bottom: 2px solid var(--cl-primary-light); padding-bottom: .15rem; transition: border-color .15s;
}
.cl-doctor-card__more:hover { border-color: var(--cl-primary); }
.cl-doctor-card__more svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ===== CTA ===== */
.cl-cta {
  background: linear-gradient(135deg, var(--cl-primary-deep) 0%, var(--cl-primary-dark) 100%);
  padding: 5rem 0; text-align: center;
}
.cl-cta__en { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.9); margin-bottom: .45rem; }
.cl-cta__h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 900; color: #fff; margin-bottom: .7rem; letter-spacing: -.02em; }
.cl-cta__p { font-size: .92rem; color: rgba(255,255,255,.9); margin-bottom: 2.5rem; line-height: 1.85; }
.cl-cta__btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ===== Hours ===== */
.cl-hours__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.timetable { width: 100%; border-collapse: collapse; font-size: .88rem; }
.timetable th, .timetable td { padding: .75rem .85rem; border: 1px solid var(--cl-border); text-align: center; }
.timetable thead th { background: var(--cl-primary-deep); color: #fff; font-weight: 700; }
.timetable thead th:first-child { background: var(--cl-primary-deep); text-align: left; }
.timetable tbody td:first-child { text-align: left; font-size: .82rem; }
.mark-yes { color: var(--cl-primary-deep); font-weight: 900; font-size: 1.1rem; }
.mark-no  { color: var(--cl-text-muted); }
.tbl-note { margin-top: .75rem; }
.tbl-note li { font-size: .8rem; color: var(--cl-text-muted); padding: .2rem 0 .2rem 1.1em; position: relative; }
.tbl-note li::before { content: '※'; position: absolute; left: 0; }

.cl-hours__side-img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); margin-bottom: 1.25rem; }
.cl-dx-box { background: var(--cl-accent-light); border-radius: var(--r); padding: 1.1rem 1.25rem; border-left: 4px solid var(--cl-accent); }
.cl-dx-box__ttl { font-size: .72rem; font-weight: 700; color: var(--cl-accent-dark); margin-bottom: .35rem; }
.cl-dx-box__txt { font-size: .82rem; color: var(--cl-accent-hover); line-height: 1.8; }
.cl-dx-box__btn {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .85rem;
  background: var(--cl-accent); color: var(--cl-accent-hover); padding: .55rem 1.1rem;
  border-radius: var(--r); font-size: .82rem; font-weight: 700; transition: background .15s;
}
.cl-dx-box__btn:hover { background: var(--cl-accent-hover-bg); }

/* ===== Access ===== */
.cl-access__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2.5rem; align-items: start; }
.cl-access-row { display: flex; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--cl-border); align-items: flex-start; }
.cl-access-row__lbl { font-size: .72rem; font-weight: 700; color: var(--cl-primary-dark); min-width: 76px; padding-top: .15rem; flex-shrink: 0; }
.cl-access-row__val { font-size: .88rem; color: var(--cl-text); line-height: 1.7; }
.cl-access-row__val a { color: var(--cl-primary-deep); font-weight: 700; }
.cl-access__gmap {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
  height: 320px; background: var(--cl-border);
  color: var(--cl-text-muted); font-size: .9rem;
}
.cl-access__gmap iframe { display: block; width: 100%; height: 100%; border: none; }
.cl-gmap-link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
  color: var(--cl-primary); font-size: .85rem; font-weight: 600;
  border-bottom: 2px solid var(--cl-primary-light); padding-bottom: .2rem; transition: border-color .15s;
}
.cl-gmap-link:hover { border-color: var(--cl-primary); }
.cl-gmap-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Footer ===== */
.cl-footer { background: var(--cl-footer); padding: 3rem 0 1.5rem; }
.cl-footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 1.5rem;
}
.cl-footer__brand-name { font-size: 1rem; font-weight: 900; color: #fff; margin-bottom: .2rem; }
.cl-footer__brand-dept { font-size: .72rem; color: rgba(255,255,255,.75); margin-bottom: .85rem; }
.cl-footer__addr { font-size: .8rem; color: rgba(255,255,255,.75); line-height: 1.85; margin-bottom: .85rem; }
.cl-footer__tel {
  display: flex; align-items: center; gap: .4rem;
  font-size: 1.05rem; font-weight: 900; color: #fff; margin-bottom: 1rem;
}
.cl-footer__tel svg { width: 15px; height: 15px; stroke: var(--cl-primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-footer__corp-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r);
  font-size: .75rem; color: rgba(255,255,255,.75); transition: all .15s;
}
.cl-footer__corp-link:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.cl-footer__corp-link svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cl-fnav-title { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: .8rem; }
.cl-fnav-title + .cl-fnav-title { margin-top: 1.5rem; }
.cl-fnav-link { display: block; font-size: .82rem; color: rgba(255,255,255,.8); padding: .32rem 0; transition: color .15s; }
.cl-fnav-link:hover { color: #fff; }
.cl-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; color: rgba(255,255,255,.7);
}
.cl-footer__sub { display: flex; gap: 1.25rem; }
.cl-footer__sub a { color: rgba(255,255,255,.7); transition: color .15s; }
.cl-footer__sub a:hover { color: rgba(255,255,255,.75); }

/* ===== Service Panels ===== */
.cl-svc-card--feat { margin-bottom: 1.5rem; }
.cl-svc-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.cl-svc-panel {
  background: #fff; border-radius: var(--r-lg); padding: 1.5rem;
  box-shadow: var(--shadow-sm); border: 1.5px solid var(--cl-border);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cl-svc-panel:hover { border-color: var(--cl-primary); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cl-svc-panel__ico {
  width: 50px; height: 50px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; margin-bottom: .9rem;
}
.cl-svc-panel__ico svg { width: 24px; height: 24px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cl-svc-panel__ico--brand   { background: var(--cl-primary-light); }
.cl-svc-panel__ico--brand   svg { stroke: var(--cl-primary-dark); }
.cl-svc-panel__ico--green  { background: var(--cl-green-light); }
.cl-svc-panel__ico--green  svg { stroke: var(--cl-green-deep); }
.cl-svc-panel__ico--amber  { background: var(--cl-accent-light); }
.cl-svc-panel__ico--amber  svg { stroke: var(--cl-accent-dark); }
.cl-svc-panel__h3 { font-size: .98rem; font-weight: 900; color: var(--cl-text); margin-bottom: .45rem; }
.cl-svc-panel__p { font-size: .8rem; color: var(--cl-text-muted); line-height: 1.8; margin-bottom: .85rem; }
.cl-svc-panel__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.cl-svc-panel__tag { font-size: .68rem; font-weight: 600; color: var(--cl-text-muted); background: var(--cl-bg); padding: .18rem .55rem; border-radius: 50px; }

/* ===== 訪問診療 ===== */
/* 写真が無くても成立するよう1カラムを基本形にしている。
   写真を入れる場合は .cl-visit に --photo を付け、本文の前に .cl-visit__img を置くと
   PC幅で「写真｜本文」の2カラムに切り替わる。 */
.cl-visit {
  display: grid; grid-template-columns: 1fr;
  background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
/* 1カラム時（横長の枠）は上寄り、PC2カラム時（縦長の枠）は右寄りに表示位置を寄せ、
   医師と患者さまの双方が枠内に収まるようにしている */
.cl-visit__img { width: 100%; height: 260px; object-fit: cover; object-position: 85% 25%; }
.cl-visit__body { padding: 1.75rem 2rem; }
.cl-visit__h3 { font-size: 1.3rem; font-weight: 900; color: var(--cl-text); margin-bottom: .6rem; }
.cl-visit__p { font-size: .88rem; color: var(--cl-text-muted); line-height: 1.95; }
.cl-visit__note { margin-top: 1.1rem; font-size: .78rem; color: var(--cl-text-muted); }

/* ===== Sub-section heading ===== */
.cl-sub-head {
  display: flex; align-items: center; gap: 1rem;
  margin: 3rem 0 1.5rem;
}
.cl-sub-head--first { margin-top: 0; }
.cl-sub-head__line { flex: 1; height: 1px; background: var(--cl-border); }
.cl-sub-head__txt {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cl-primary-deep); white-space: nowrap; flex-shrink: 0;
}

/* ===== Dept cards (3-column equal grid) ===== */
.cl-dept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

/* ===== Info Panels (Vaccine + Tests combined) ===== */
.cl-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.cl-info-panel {
  background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-lg); padding: 2rem; backdrop-filter: blur(8px);
}
.cl-info-panel__h3 {
  display: flex; align-items: center; gap: .65rem;
  font-size: 1.1rem; font-weight: 900; color: #fff; margin-bottom: .35rem;
}
.cl-info-panel__h3 svg { width: 20px; height: 20px; stroke: var(--cl-accent-on-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cl-info-panel__sub { font-size: .78rem; color: rgba(255,255,255,.9); margin-bottom: 1.5rem; }
.cl-info-sub { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.9); margin: 1.1rem 0 .55rem; }
.cl-info-list { display: flex; flex-direction: column; gap: .28rem; }
.cl-info-list li { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; color: rgba(255,255,255,.92); line-height: 1.5; }
.cl-info-list li::before { content: '✓'; color: var(--cl-accent-on-dark); font-weight: 900; font-size: .75rem; flex-shrink: 0; }
.cl-info-list--dim li { color: rgba(255,255,255,.9); font-size: .82rem; }
.cl-info-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cl-info-chip {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  color: #fff; font-size: .78rem; font-weight: 600;
  padding: .4rem .85rem; border-radius: 50px; line-height: 1.3;
}
.cl-info-chips--dim .cl-info-chip { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); font-weight: 500; }

/* ===== Details / Accordion ===== */
.cl-details__summary {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  list-style: none; cursor: pointer; user-select: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: .9rem; font-weight: 700;
  padding: .9rem 1.5rem; border-radius: var(--r); max-width: 420px; margin: 0 auto;
  transition: background .15s;
}
.cl-details__summary:hover { background: rgba(255,255,255,.22); }
.cl-details__summary::-webkit-details-marker { display: none; }
.cl-details__summary::marker { content: ''; }
.cl-details__summary::after {
  content: ''; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg); margin-top: -3px; transition: transform .2s;
}
details[open] .cl-details__summary::after { transform: rotate(-135deg); margin-top: 3px; }
details[open] .cl-details__summary { margin-bottom: 2.25rem; }

/* ===== Doctors (3-column vertical cards) ===== */
.cl-doctors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cl-doctors__grid .cl-doctor-card { flex-direction: column; }
/* 縦位置の顔写真のため、上寄りにトリミングして頭部が切れないようにする */
.cl-doctors__grid .cl-doctor-card__img { width: 100%; height: 300px; object-position: center 20%; }

/* ===== Mobile Fixed CTA Bar ===== */
.cl-mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--cl-border);
  box-shadow: 0 -2px 12px rgba(15,23,42,.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.cl-mobile-cta a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; padding: .55rem .3rem; font-size: .66rem; font-weight: 700; color: #fff;
}
.cl-mobile-cta a svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-mobile-cta__tel     { background: var(--cl-primary-dark); }
.cl-mobile-cta a.cl-mobile-cta__reserve { background: var(--cl-accent); color: var(--cl-accent-hover); }
.cl-mobile-cta__access  { background: var(--cl-primary-deep); }

@media (min-width: 1025px) {
  .cl-visit--photo { grid-template-columns: 1fr 1.4fr; }
  .cl-visit--photo .cl-visit__img { height: 100%; min-height: 300px; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .cl-nav { display: none; }
  .cl-hamburger { display: flex; }
  .cl-services__grid { grid-template-columns: 1fr 1fr; }
  .cl-dept-grid { grid-template-columns: 1fr 1fr; }
  .cl-svc-card--feat { grid-column: span 2; }
  .cl-svc-panels { grid-template-columns: repeat(2, 1fr); }
  .cl-hours__grid { grid-template-columns: 1fr; }
  .cl-access__grid { grid-template-columns: 1fr; }
  .cl-doctors__grid { grid-template-columns: 1fr 1fr; }
  .cl-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
  .cl-mobile-cta { display: flex; }
  .cl-header-cta .cl-phone { display: none; }
  .cl-quickbar__in { flex-wrap: wrap; }
  .cl-qitem { flex: 1 1 calc(50% - 1px); }
  .cl-symptom__grid { grid-template-columns: 1fr 1fr; }
  .cl-news__wrap { grid-template-columns: 1fr; }
  .cl-services__grid { grid-template-columns: 1fr; }
  .cl-dept-grid { grid-template-columns: 1fr; }
  .cl-svc-card--feat { grid-column: span 1; }
  .cl-svc-panels { grid-template-columns: repeat(2, 1fr); }
  .cl-info-grid { grid-template-columns: 1fr; }
  /* モバイルではPC用の斜めパネル演出をやめ、
     専用の縦長画像をヒーロー背景として表示する。 */
  .cl-hero__panel { display: none; }
  .cl-hero__photo {
    background-image: url('/images/hero-kids-mobile.jpg');
    background-position: center;
    opacity: .32;
  }
  .cl-footer__top { grid-template-columns: 1fr; }
  .cl-footer__bottom { flex-direction: column; gap: .75rem; text-align: center; }
  .cl-doctors__grid { grid-template-columns: 1fr; }
  .corp-bar__right { display: none; }
}
@media (max-width: 480px) {
  .cl-qitem { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--cl-border); }
  .cl-qitem:last-child { border-bottom: none; }
  .cl-hero__btns { flex-direction: column; }
  .cl-btn-accent, .cl-btn-ghost { justify-content: center; }
  .cl-cta__btns { flex-direction: column; align-items: center; }
}

/* ===== 施設基準・医療体制ページ（/clinic/standards/） ===== */
.cl-page-hero { padding: 2.25rem 0 2.5rem; background: var(--cl-primary-light); }
.cl-page-hero__h1 { word-break: auto-phrase; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 900; color: var(--cl-text); line-height: 1.35; letter-spacing: -.02em; }
.cl-page-hero__lead { margin-top: .8rem; font-size: .95rem; color: var(--cl-text-muted); line-height: 1.9; }
.cl-breadcrumb { margin-bottom: 1.75rem; }
.cl-breadcrumb__list { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; color: var(--cl-text-muted); list-style: none; }
.cl-breadcrumb__item + .cl-breadcrumb__item::before { content: "›"; margin-right: .4rem; }
.cl-breadcrumb__item a { color: var(--cl-primary-deep); text-decoration: underline; }

.cl-std-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; list-style: none; }
.cl-std-card {
  padding: 1.4rem 1.5rem; background: var(--cl-bg);
  border: 1px solid var(--cl-border); border-left: 4px solid var(--cl-primary); border-radius: var(--r);
}
.cl-std-card__ttl { font-size: 1rem; font-weight: 700; color: var(--cl-text); line-height: 1.6; }
.cl-std-card__num {
  display: inline-block; margin: .5rem 0 .7rem; padding: .15rem .6rem;
  font-size: .78rem; font-weight: 700; color: var(--cl-primary-deep);
  background: #fff; border: 1px solid var(--cl-border); border-radius: 999px;
}
.cl-std-card__p { font-size: .88rem; color: var(--cl-text-muted); line-height: 1.85; }
.cl-std-date { margin-top: 1.25rem; font-size: .8rem; color: var(--cl-text-muted); text-align: right; }

.cl-info-block {
  padding: 1.4rem 1.25rem; background: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.cl-section--white .cl-info-block { background: var(--cl-bg); box-shadow: none; border: 1px solid var(--cl-border); }
.cl-info-block + .cl-info-block { margin-top: 1.5rem; }
.cl-info-block__h3 { margin-bottom: .9rem; font-size: 1.15rem; font-weight: 900; color: var(--cl-text); }
.cl-info-block__p { font-size: .92rem; color: var(--cl-text); line-height: 1.95; }
.cl-info-block__p + .cl-info-block__p,
.cl-checklist + .cl-info-block__p { margin-top: 1rem; }
.cl-text-link { color: var(--cl-primary-deep); font-weight: 700; text-decoration: underline; }

.cl-checklist { display: flex; flex-direction: column; gap: .75rem; list-style: none; }
.cl-checklist__item { position: relative; padding-left: 1.7rem; font-size: .92rem; color: var(--cl-text); line-height: 1.85; }
.cl-checklist__item::before {
  content: ""; position: absolute; left: .25rem; top: .4em;
  width: .45rem; height: .8rem;
  border: solid var(--cl-primary-deep); border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.cl-hospitals { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; list-style: none; }
.cl-hospitals__item {
  padding: .5rem 1rem; font-size: .9rem; font-weight: 700; color: var(--cl-primary-deep);
  background: var(--cl-primary-light); border-radius: var(--r);
}

@media (min-width: 769px) {
  .cl-page-hero { padding: 3rem 0 3.5rem; }
  .cl-std-grid { grid-template-columns: repeat(2, 1fr); }
  .cl-info-block { padding: 1.75rem 2rem; }
}