/* ── 清潔な青緑。CTAだけ淡い紅を置く ──────────────────────────── */
:root {
  /* Meiryo UI 優先。無い環境は OS 標準の日本語 UI 書体へ落とす */
  --ui: "Meiryo UI", Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", sans-serif;
  --bg:      #F4F7F8;
  --panel:   #FFFFFF;
  --panel-2: #E7EEF0;
  --ink:     #16232A;
  --ink-2:   #4A5A62;
  --ink-3:   #7E8E96;
  --sky:     #1E6E7E;
  --sky-2:   #2A8C9E;
  --sky-w:   #DFEDEF;
  --sakura:  #C96E86;
  --line:    #D6E0E3;
  --line-2:  #BFCDD1;
  --ok:      #2E8B57;
  --off:     #9AA7AD;
  --blob-2:  #F6E6EA;
  --shadow:  0 1px 2px rgba(22,35,42,.05), 0 10px 30px rgba(22,35,42,.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101619; --panel: #171F23; --panel-2: #1F292E;
    --ink: #E7EDEF; --ink-2: #AFBCC1; --ink-3: #7E8E96;
    --sky: #62BECE; --sky-2: #8AD5E2; --sky-w: #15282D;
    --sakura: #E093A6; --line: #26333A; --line-2: #34444B;
    --ok: #56C98A; --off: #5D6D74; --blob-2: #2A1D22;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --bg: #101619; --panel: #171F23; --panel-2: #1F292E;
  --ink: #E7EDEF; --ink-2: #AFBCC1; --ink-3: #7E8E96;
  --sky: #62BECE; --sky-2: #8AD5E2; --sky-w: #15282D;
  --sakura: #E093A6; --line: #26333A; --line-2: #34444B;
  --ok: #56C98A; --off: #5D6D74; --blob-2: #2A1D22;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--ui);
  font-size: 15px; line-height: 1.92; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; font-family: var(--ui); font-weight: 600; text-wrap: balance; }
.cond { font-family: var(--ui); font-variant-numeric: tabular-nums; }

.band { background: var(--sky); color: #F4F7F8; font-size: 11.5px; letter-spacing: .05em; padding: 8px 20px; text-align: center; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── ヘッダ：診療状況を実時刻から出す ─────────────────────── */
header { background: var(--panel); border-bottom: 1px solid var(--line); }
.hrow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 26px; align-items: center; padding: 22px 0; }
.brand { font-size: 24px; letter-spacing: .04em; }
.brand small { display: block; font-family: var(--ui); font-size: 10.5px; letter-spacing: .24em; color: var(--ink-3); font-weight: 400; margin-top: 3px; }

.status {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-2); padding: 10px 16px; background: var(--bg);
}
.status .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--off); flex: 0 0 auto; }
.status.open .dot { background: var(--ok); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
.status .txt { font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.status.open .txt { color: var(--ok); }
.status .next { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.status .now { font-family: var(--ui); font-size: 11px; color: var(--ink-3); border-left: 1px solid var(--line-2); padding-left: 12px; }

/* ── ヒーロー ──────────────────────────────────────────────── */
.hero { padding: 48px 0 54px; position: relative; overflow: hidden; }
.herogrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center; position: relative; z-index: 1; }

/* 背後の淡い円がゆっくり動く */
.blob { position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none; z-index: 0; animation: drift linear infinite; }
.blob.a { background: var(--sky-w); width: 46vw; height: 46vw; left: -16vw; top: -22vh; animation-duration: 36s; }
.blob.b { background: var(--blob-2); width: 34vw; height: 34vw; right: -12vw; bottom: -24vh; animation-duration: 46s; animation-delay: -14s; }
@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(4vw, 5vh, 0) scale(1.16); }
}
.kick { font-size: 11px; letter-spacing: .26em; color: var(--sky); margin: 0 0 16px; }
h1 { font-size: clamp(27px, 3.7vw, 44px); line-height: 1.5; }
h1 em { font-style: normal; color: var(--sky); }
.lede { color: var(--ink-2); margin: 20px 0 26px; max-width: 44ch; }
.cta {
  display: inline-block; background: var(--sakura); color: #fff; text-decoration: none;
  padding: 14px 36px; border-radius: 4px; font-weight: 700;
  transition: background .2s, transform .16s;
}
.cta:hover { background: var(--sky); transform: translateY(-2px); }
.telnote { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; }

/* 時間割 */
.tt { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tthead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.tthead h2 { font-size: 14px; letter-spacing: .1em; }
.tthead span { font-size: 10.5px; letter-spacing: .12em; color: var(--ink-3); }
.ttgrid { display: grid; grid-template-columns: 88px repeat(7, minmax(0,1fr)); }
.ttgrid > div { padding: 10px 4px; text-align: center; font-size: 13px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.ttgrid > div:nth-child(8n) { border-right: none; }
.ttgrid .hd { background: var(--panel-2); font-family: var(--ui); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ttgrid .rowlab { background: var(--panel-2); text-align: left; padding-left: 12px; font-size: 12px; color: var(--ink-2); }
.ttgrid .yes { color: var(--sky); font-weight: 700; }
.ttgrid .no { color: var(--off); }
.ttgrid .today { background: var(--sky-w); }
.ttgrid .hd.today { background: var(--sky); color: #fff; }
.ttfoot { padding: 11px 16px; font-size: 12px; color: var(--ink-3); }

/* ── セクション ───────────────────────────────────────────── */
section { padding: 54px 0; border-top: 1px solid var(--line); }
.shead { margin-bottom: 26px; }
.shead .no { font-family: var(--ui); font-size: 12px; letter-spacing: .14em; color: var(--sky); }
.shead h2 { font-size: 26px; margin: 5px 0 7px; }
.shead p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 62ch; }

.rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.rise.seen { opacity: 1; transform: none; }

/* 症状別 */
.syms { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 14px; }
.sym {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 20px 20px 22px; position: relative; overflow: hidden;
  transition: border-color .22s, transform .22s;
}
.sym:hover { border-color: var(--sky); transform: translateY(-3px); }
.sym .ic { width: 34px; height: 34px; margin-bottom: 12px; }
.sym h3 { font-size: 17px; margin-bottom: 5px; }
.sym p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.sym .when { display: inline-block; margin-top: 11px; font-size: 11.5px; color: var(--sakura); border: 1px solid var(--sakura); border-radius: 999px; padding: 1px 10px; }

/* 方針 */
.pol { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; }
.polc { background: var(--panel); border-left: 3px solid var(--sky); padding: 22px 22px; }
.polc h3 { font-size: 17px; margin-bottom: 7px; }
.polc p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

/* 診療内容 */
.menu { background: var(--panel); border: 1px solid var(--line); }
.mrow { display: grid; grid-template-columns: minmax(0,1fr) 108px 120px; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: center; font-size: 14px; }
.mrow:last-child { border-bottom: none; }
.mrow.head { background: var(--panel-2); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-2); }
.mrow .ins { text-align: center; font-size: 12px; }
.mrow .ins b { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 500; }
.mrow .ins .k { background: var(--sky-w); color: var(--sky); }
.mrow .ins .j { background: var(--panel-2); color: var(--ink-2); }
.mrow .p { text-align: right; font-family: var(--ui); font-variant-numeric: tabular-nums; }
.mnote { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0; }

/* 初診の流れ */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 46px minmax(0,1fr) 80px; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); align-items: start; }
.steps li::before {
  counter-increment: s; content: counter(s);
  width: 30px; height: 30px; border-radius: 50%; background: var(--sky); color: #fff;
  display: grid; place-items: center; font-family: var(--ui); font-weight: 700; font-size: 14px;
}
.steps h3 { font-size: 16px; margin-bottom: 3px; }
.steps p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.steps .min { font-family: var(--ui); font-size: 13px; color: var(--ink-3); text-align: right; padding-top: 4px; }

/* 医療広告の注記 */
.guide { background: var(--panel-2); border: 1px solid var(--line-2); padding: 24px 24px; }
.guide h3 { font-size: 16px; margin-bottom: 10px; }
.guide ul { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.guide li { padding: 7px 0 7px 22px; position: relative; color: var(--ink-2); line-height: 1.85; }
.guide li::before { content: "✓"; position: absolute; left: 0; top: 7px; color: var(--sky); font-weight: 700; }
.guide .src { font-size: 11.5px; color: var(--ink-3); margin: 14px 0 0; }

/* 医院概要 */
.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px; }
.info dl { display: grid; grid-template-columns: 96px minmax(0,1fr); margin: 0; }
.info dt, .info dd { padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: 13.5px; }
.info dt { color: var(--ink-3); font-size: 12.5px; }

/* ── 実装メモ ──────────────────────────────────────────────── */
.techgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 22px 30px; }
.techgrid dt { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; font-family: var(--ui); }
.techgrid dd { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.85; }
.techgrid dd b { color: var(--ink); }
.techgrid .m { font-family: var(--ui); font-size: 12px; color: var(--sky); }

/* ── 動きの追加 ────────────────────────────────────────────── */

/* 時間割：組み終わってから1マスずつ現れる */
.ttgrid > div { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.ttgrid.ready > div { opacity: 1; transform: none; }

/* 症状アイコン：線が描かれる */
.sym .ic [stroke] { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1); }
.syms.seen .sym .ic [stroke] { stroke-dashoffset: 0; }

/* 症状カード：下線が伸びる */
.sym::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--sky); transition: width .45s cubic-bezier(.2,.8,.3,1);
}
.sym:hover::after { width: 100%; }

/* 料金：行が順に現れる */
.menu .mrow { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease, transform .45s ease; }
.menu.seen .mrow { opacity: 1; transform: none; }

/* 初診の流れ：縦線が伸び、番号が跳ねて出る */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 14px; top: 24px; bottom: 24px; width: 2px; background: var(--line); }
.steps::after {
  content: ""; position: absolute; left: 14px; top: 24px; width: 2px; height: 0;
  background: var(--sky); transition: height 1.5s cubic-bezier(.3,.8,.3,1);
}
.steps.seen::after { height: calc(100% - 48px); }
.steps li { position: relative; }
.steps li::before {
  position: relative; z-index: 1;
  transform: scale(0); transition: transform .5s cubic-bezier(.32,1.5,.5,1);
  transition-delay: var(--d, 0s);
}
.steps.seen li::before { transform: scale(1); }

/* CTA に光が走る */
.cta { position: relative; overflow: hidden; }
.cta::after {
  content: ""; position: absolute; top: 0; left: -45%; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: shine 5s ease-in-out infinite;
}
@keyframes shine { 0% { left: -45%; } 58%, 100% { left: 130%; } }

/* 診療状況が切り替わるときの余韻 */
.status .txt { transition: color .4s; }
.status { transition: border-color .4s; }
.status.open { border-color: var(--ok); }

/* ── 問い合わせ ────────────────────────────────────────────── */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(222px, 1fr)); gap: 16px 22px; max-width: 820px; }
.f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.f.wide { grid-column: 1 / -1; }
.f > label { font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.f .req { color: var(--sakura); }
.f input[type="text"], .f input[type="email"], .f input[type="tel"], .f input[type="date"], .f textarea, .f select {
  font: inherit; font-size: 14px; padding: 10px 11px; width: 100%;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 4px;
}
.f textarea { min-height: 110px; resize: vertical; }
.f input:focus, .f textarea:focus, .f select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-w); }
.f .err { font-size: 11.5px; color: var(--sakura); min-height: 1.15em; }
.f.bad input, .f.bad textarea, .f.bad select { border-color: var(--sakura); }
.consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.consent input { accent-color: var(--sky); margin-top: 5px; }
.submit {
  font: inherit; font-size: 15px; font-weight: 700; padding: 14px 42px; margin-top: 4px;
  background: var(--sky); color: #fff; border: none; border-radius: 4px; cursor: pointer;
  transition: background .2s, transform .16s;
}
.submit:hover { background: var(--sakura); transform: translateY(-1px); }
.sent { display: none; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--ok); background: var(--sky-w); font-size: 13px; max-width: 820px; }
.sent.on { display: block; }

/* ── ページ上部へ ──────────────────────────────────────────── */
.pagetop {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--sky); color: #fff; text-decoration: none; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s, transform .3s, background .2s;
}
.pagetop.on { opacity: 1; pointer-events: auto; transform: none; }
.pagetop:hover { background: var(--sakura); }
.pagetop b { font-size: 15px; line-height: 1; }
.pagetop span { font-size: 7.5px; letter-spacing: .1em; margin-top: 3px; font-family: var(--ui); }

footer { padding: 32px 0 62px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); }
footer p { margin: 0 0 8px; text-wrap: pretty; word-break: auto-phrase; }

@media (max-width: 900px) {
  .herogrid { grid-template-columns: 1fr; gap: 30px; }
  .hrow { grid-template-columns: 1fr; }
  .ttgrid { grid-template-columns: 70px repeat(7, minmax(0,1fr)); font-size: 12px; }
  .mrow { grid-template-columns: minmax(0,1fr) 84px; }
  .mrow .p { grid-column: 2; }
  .steps li { grid-template-columns: 40px minmax(0,1fr); }
  .steps .min { grid-column: 2; text-align: left; padding-top: 0; }
  .info dl { grid-template-columns: 84px minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; }
  .status.open .dot { animation: none; opacity: 1; }
  .cta:hover, .submit:hover, .pagetop:hover, .sym:hover { transform: none; }
  .blob, .cta::after { animation: none; }
  .cta::after { display: none; }
  .ttgrid > div, .menu .mrow { opacity: 1 !important; transform: none !important; transition: none; }
  .sym .ic [stroke] { stroke-dashoffset: 0 !important; transition: none; }
  .steps li::before { transform: scale(1) !important; transition: none; }
  .steps::after { transition: none; }
}
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }