/* clinic-hp — 道路沿いの医院の看板を、そのまま画面に。
   高齢者向け: 本文18px以上・行間広め・単一カラム・外部フォントなし */
:root {
  --navy: #123c63;        /* 看板の紺 */
  --navy-deep: #0c2a47;
  --ink: #1d2730;
  --muted: #5f6b76;
  --paper: #ffffff;
  --band: #f1f5f8;        /* 交互の帯 */
  --line: #d6dee5;
  --ok: #1b7a4e;
  --part: #b56a00;
  --no: #a3adb6;
  --today: #fff4c2;
  --max: 720px;
}
* { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  line-height: 1.85; font-feature-settings: "palt";
}
a { color: var(--navy); }
p { margin: 0.4rem 0; }
h2 { font-size: 1.3rem; margin: 0 0 0.9rem; line-height: 1.4; display: flex; align-items: center; gap: 0.6rem; }
h2::before { content: ""; width: 0.5rem; height: 1.3rem; background: var(--navy); border-radius: 2px; flex: none; }

/* ---- 看板 ---- */
.sign { background: var(--navy); color: #fff; }
.sign-inner { max-width: var(--max); margin: 0 auto; padding: 36px 20px 28px; text-align: center; }
.sign-corp { margin: 0; font-size: 0.95rem; opacity: 0.85; letter-spacing: 0.08em; }
.sign-name { margin: 0.1em 0 0; font-size: clamp(1.45rem, 7.2vw, 1.9rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; }
.sign-dept { margin: 0.5rem 0 0; font-size: 1.05rem; opacity: 0.95; }
.sign-tel {
  display: inline-flex; flex-direction: column; align-items: center; margin-top: 1.1rem;
  background: #fff; color: var(--navy-deep); text-decoration: none;
  padding: 10px 26px; border-radius: 14px; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.sign-tel small { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.sign-addr { margin: 1.1rem 0 0; font-size: 0.95rem; opacity: 0.9; line-height: 1.7; }
.sign-addr span { display: inline-block; }

/* ---- 今日の診療 ---- */
.today {
  max-width: var(--max); margin: 0 auto; padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 0 0.8rem; align-items: baseline;
  border-bottom: 1px solid var(--line);
}
.today-day { font-weight: 700; }
.today-status { font-weight: 700; }
.today.is-open .today-status { color: var(--ok); }
.today.is-closed .today-status { color: #b23a3a; }
.today-time { color: var(--muted); }

.demo-bar { background: #fff3cd; color: #6b4a00; text-align: center; padding: 6px 12px; font-size: 0.9rem; }

/* ---- 本文 ---- */
main { padding-bottom: 32px; }
main > section { padding: 32px 20px; }
main > section > * { max-width: var(--max); margin-left: auto !important; margin-right: auto !important; }
.band { background: var(--band); }
.catch { max-width: var(--max); margin: 28px auto 0; padding: 0 20px; font-size: 1.2rem; font-weight: 700; color: var(--navy-deep); }
.lead { color: var(--ink); }
.note { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }
.note-warn { color: #8a4b00; }

/* お知らせ */
ul.news { list-style: none; padding: 0; margin: 0; }
ul.news li { padding: 14px 0; border-bottom: 1px solid var(--line); }
ul.news li:first-child { padding-top: 0; }
.news-head { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 0.9rem; }
.tag { border-radius: 6px; padding: 0 8px; font-weight: 600; font-size: 0.85rem; }
.tag-off { background: #fde8e8; color: #9b2c2c; }
.tag-vac { background: #e3f1ff; color: #1f4f8b; }
.tag-info { background: #e9edf1; color: #4a5560; }
.news-title { font-weight: 700; }

/* 診療時間 */
.table-wrap { overflow-x: auto; }
table.hours { border-collapse: separate; border-spacing: 0; width: 100%; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.hours th, table.hours td { padding: 12px 4px; border-bottom: 1px solid var(--line); }
table.hours tr:last-child th, table.hours tr:last-child td { border-bottom: 0; }
table.hours thead th { background: #e8eef4; font-weight: 700; }
table.hours thead th.wk { color: #8a4b4b; }
table.hours tbody th { background: #f6f8fa; white-space: nowrap; font-weight: 700; }
table.hours td.ok { color: var(--ok); font-weight: 700; font-size: 1.3rem; }
table.hours td.part { color: var(--part); font-weight: 700; font-size: 1.2rem; }
table.hours td.no { color: var(--no); }
table.hours .today-col { background: var(--today); }
table.hours thead th.today-col { box-shadow: inset 0 -4px 0 #e5b800; }
.hours-times { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 0.9rem; font-size: 1.05rem; }
.hours-times b { color: var(--navy); margin-right: 0.3em; }
.hours-note { color: var(--muted); margin-top: 0.2rem; }

/* 診療内容 */
ul.services { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.services li { border: 2px solid var(--navy); color: var(--navy-deep); border-radius: 999px; padding: 6px 16px; font-weight: 600; }

/* 予防接種 */
.vac-group { font-size: 1rem; color: var(--muted); margin: 1.1rem 0 0.3rem; font-weight: 600; }
.vac-group + ul.vaccines { margin-top: 0; }
ul.vaccines { list-style: none; padding: 0; margin-top: 0.6rem; margin-bottom: 0.9rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
ul.vaccines li { padding: 12px 16px; border-bottom: 1px solid var(--line); }
ul.vaccines li:last-child { border-bottom: 0; }
.vac-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vac-name { font-weight: 600; }
.vac-price { font-size: 1.15rem; white-space: nowrap; }
.vac-ask { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.vac-note { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin-top: 2px; }

/* 設備・検査 */
.fac-group + .fac-group { margin-top: 1.1rem; }
.fac-group h3 { font-size: 1rem; color: var(--muted); margin: 0 0 0.4rem; font-weight: 600; }
ul.facilities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 4px 20px; }
ul.facilities li { padding: 6px 0 6px 1.6em; position: relative; border-bottom: 1px solid var(--line); }
ul.facilities li::before { content: "✓"; position: absolute; left: 0.2em; color: var(--ok); font-weight: 700; }
ul.facilities li.sub { padding-left: 2.6em; color: var(--muted); font-size: 0.95rem; }
ul.facilities li.sub::before { content: "–"; left: 1.5em; color: var(--muted); font-weight: 400; }

/* 写真 */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.photos figure { margin: 0; }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.photos figcaption { font-size: 0.9rem; color: var(--muted); text-align: center; }

/* 医師 */
.doctor { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); }
.doctor:first-of-type { padding-top: 0; }
.doctor img { width: 140px; height: 140px; object-fit: cover; border-radius: 14px; flex: none; }
.doctor-body { flex: 1 1 240px; }
.doctor-name { font-weight: 700; font-size: 1.25rem; margin: 0 0 0.2rem; }
.doctor-name small { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-right: 0.8em; }
.doctor-spec { color: var(--muted); font-size: 0.95rem; margin: 0 0 0.4rem; }
.doctor-sub { font-size: 1rem; color: var(--muted); margin: 1.2rem 0 0.4rem; font-weight: 600; }
ul.doctor-list { list-style: none; padding: 0; margin: 0; }
ul.doctor-list li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0 1em; align-items: baseline; }
ul.doctor-list li span { color: var(--muted); font-size: 0.95rem; }

/* アクセス */
dl.info { margin-top: 0; margin-bottom: 1rem; }
dl.info div { display: grid; grid-template-columns: 5.5em 1fr; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
dl.info dt { color: var(--muted); font-weight: 600; }
dl.info dd { margin: 0; }
.map iframe { width: 100%; height: 320px; border: 0; border-radius: 12px; display: block; }
.btn-outline { display: inline-block; margin-top: 12px; border: 2px solid var(--navy); color: var(--navy); border-radius: 10px; padding: 10px 18px; text-decoration: none; font-weight: 700; }

/* フッター・電話 */
.foot { background: var(--navy-deep); color: #dbe5ee; text-align: center; padding: 28px 20px 110px; font-size: 0.95rem; line-height: 1.9; }
.foot-name { color: #fff; font-weight: 700; font-size: 1.05rem; }
.foot a { color: #fff; }
.sticky-tel {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--navy); color: #fff; text-decoration: none;
  padding: 15px 16px; border-radius: 14px; font-size: 1.15rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25); z-index: 100;
}
@media (min-width: 640px) {
  html { font-size: 19px; }
  ul.facilities { grid-template-columns: 1fr 1fr; }
  .sign-name { font-size: 2.4rem; }
  .sign-inner { padding: 48px 20px 36px; }
  .sticky-tel { left: auto; right: 24px; max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }