/* 通院ナビ（/tsuin/）。色は tokens.css の変数だけを使う */

.ts-gap { margin-top: var(--sp-3); }

.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-right: var(--sp-1);
  font-size: var(--fs-md); font-weight: 800;
  color: var(--c-text-on-primary); background: var(--c-primary);
  border-radius: var(--r-full);
  vertical-align: middle;
}

/* 病院の大きなボタン */
.hosp-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .hosp-grid { grid-template-columns: 1fr; } }
.hosp-btn {
  display: block; width: 100%; min-height: 96px;
  padding: var(--sp-4);
  text-align: left; font: inherit; color: var(--c-text);
  background: var(--c-surface);
  border: 2px solid var(--c-line-strong); border-radius: var(--r-lg);
  cursor: pointer;
}
.hosp-btn .hn { display: block; font-size: var(--fs-xl); font-weight: 800; }
.hosp-btn .ha, .hosp-btn .hd { display: block; font-size: var(--fs-md); color: var(--c-text-sub); margin-top: var(--sp-1); }
.hosp-btn .hd { font-weight: 700; color: var(--c-text); }
.hosp-btn[aria-pressed="true"] {
  border: 3px solid var(--c-primary);
  background: var(--c-primary-soft);
}
.hosp-btn[aria-pressed="true"] .hn::before { content: "✓ "; color: var(--c-primary); }

/* 要確認の印（記号＋言葉＋色） */
.chk {
  display: inline-block; margin-left: var(--sp-1); padding: 0 var(--sp-2);
  font-size: var(--fs-sm); font-weight: 800; white-space: nowrap;
  color: var(--c-warn); background: var(--c-warn-soft);
  border: 2px solid var(--c-warn); border-radius: var(--r-sm);
  vertical-align: middle;
}
.chk::before { content: "⚠ "; }
.chk.ok { color: var(--c-ok); background: var(--c-ok-soft); border-color: var(--c-ok); }
.chk.ok::before { content: "✓ "; }

/* 早見表 */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.cmp th, .cmp td { padding: var(--sp-3) var(--sp-2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.cmp thead th { font-size: var(--fs-sm); color: var(--c-text-sub); border-bottom: 2px solid var(--c-line-strong); }
.cmp tbody th { font-weight: 800; }
.cmp .big { font-size: var(--fs-lg); font-weight: 800; }
.cmp small { display: block; font-size: var(--fs-sm); color: var(--c-text-sub); font-weight: 400; }
@media (max-width: 640px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp tr { padding: var(--sp-3) 0; border-bottom: 2px solid var(--c-line-strong); }
  .cmp th, .cmp td { border-bottom: none; padding: var(--sp-1) 0; }
  .cmp td::before { content: attr(data-label) "： "; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-sub); }
}

/* 行き方のカード */
.plan > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.plan h3 { margin: var(--sp-4) 0 var(--sp-2); color: var(--c-primary); }
.plan-kind {
  display: inline-block; padding: 2px var(--sp-3);
  font-size: var(--fs-sm); font-weight: 800;
  color: var(--c-text); background: var(--c-surface-2);
  border: 2px solid var(--c-line-strong); border-radius: var(--r-full);
}
.trip-row {
  display: grid; grid-template-columns: 4.5em 1fr; gap: var(--sp-2);
  padding: var(--sp-3); margin-bottom: var(--sp-2);
  background: var(--c-surface-2); border-radius: var(--r-md);
}
.trip-row .dir { font-weight: 800; font-size: var(--fs-lg); }
.trip-row .time { font-size: var(--fs-xl); font-weight: 800; }
.trip-row .tnote { font-size: var(--fs-md); color: var(--c-text-sub); }
.kv { display: grid; grid-template-columns: 8em 1fr; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; text-align: left; }
.kv dt { font-weight: 700; color: var(--c-text-sub); }
.kv dd { font-weight: 700; margin: 0; }
.kv dd .big { font-size: var(--fs-xl); font-weight: 800; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: var(--sp-3); } }

.legs { list-style: none; counter-reset: leg; }
.legs > li {
  position: relative; padding: var(--sp-2) 0 var(--sp-3) 44px;
  border-left: 3px solid var(--c-line-strong); margin-left: 16px;
}
.legs > li::before {
  counter-increment: leg; content: counter(leg);
  position: absolute; left: -17px; top: var(--sp-2);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--c-text-on-primary); background: var(--c-primary); border-radius: var(--r-full);
}
.legs .lt { font-weight: 800; font-size: var(--fs-lg); }
.legs .lo, .legs .lf { font-size: var(--fs-md); color: var(--c-text-sub); }
.legs .lfare { font-weight: 800; color: var(--c-text); }

.caution { list-style: none; margin-top: var(--sp-2); }
.caution > li { padding-left: 1.6em; text-indent: -1.6em; margin-bottom: var(--sp-1); }
.caution > li::before { content: "⚠ "; color: var(--c-warn); font-weight: 800; }

details.more { margin-top: var(--sp-3); border: 2px solid var(--c-line-strong); border-radius: var(--r-md); }
details.more > summary { min-height: var(--tap-min); padding: var(--sp-3); font-weight: 700; cursor: pointer; }
details.more > .more-body { padding: 0 var(--sp-3) var(--sp-3); }
.tt { width: 100%; border-collapse: collapse; }
.tt th, .tt td { padding: var(--sp-2); text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.tt .pick td { font-weight: 800; background: var(--c-primary-soft); }

/* 将来の案 */
.plan.future, .liner-book { border: 3px solid var(--c-warn); }
.future-banner {
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  font-size: var(--fs-xl); font-weight: 800; line-height: 1.4;
  color: var(--c-warn); background: var(--c-warn-soft);
  border: 2px solid var(--c-warn); border-radius: var(--r-md);
}
.est-box { padding: var(--sp-3); background: var(--c-surface-2); border-radius: var(--r-md); margin: var(--sp-2) 0; }
.est-formula { font-weight: 700; }
.est-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); }
.est-table th, .est-table td { padding: var(--sp-2); text-align: left; border-bottom: 1px solid var(--c-line); }
.est-table td { font-weight: 800; }

/* 確定（booking.css と同じ見た目） */
.confirmed { text-align: center; border: 2px solid var(--c-ok); }
.confirmed.liner-book { border: 3px solid var(--c-warn); }
.done-mark {
  width: 64px; height: 64px; margin: 0 auto var(--sp-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800;
  color: var(--c-text-on-sem); background: var(--c-ok); border-radius: var(--r-full);
}
.confirmed .notice { text-align: left; margin-top: var(--sp-3); }

/* 予約の確認・帰り便コール */
.mine-item { padding: var(--sp-4); margin-bottom: var(--sp-3); border: 2px solid var(--c-line-strong); border-radius: var(--r-lg); }
.mine-item .mh { font-size: var(--fs-lg); font-weight: 800; }
.mine-item .ms { color: var(--c-text-sub); margin-bottom: var(--sp-3); }
.btn.call-return { min-height: 72px; font-size: var(--fs-xl); }
.called-box { padding: var(--sp-3); background: var(--c-ok-soft); border: 2px solid var(--c-ok); border-radius: var(--r-md); }
.called-box .eta { font-size: var(--fs-xl); font-weight: 800; }

/* 出典 */
.src-list > li { display: block; }
.src-list a { word-break: break-all; }
.src-list .st { display: block; font-weight: 700; }

/* ============================================================
   ここから下は、2026-09-20 に作り直した「病院への行き方」の画面のもの
   （地区をえらぶ → 病院をえらぶ → 着く時刻と縦一本の道順）
   色は tokens.css の変数だけ。金色は使わない。選択中は太枠＋✓で示す。
   ============================================================ */

/* 画面の見出しと、いまどこの表示 */
.ask { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.35; margin: 0 0 var(--sp-4); }
.ask:focus { outline: none; }
.ask.sr-title { font-size: var(--fs-xl); }
.crumb { margin: 0 0 var(--sp-2); font-size: var(--fs-md); color: var(--c-text-sub); }
.back-step { margin-bottom: var(--sp-4); }

/* ① 津南町 / 栄村 の切替 */
.town-switch { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.town-btn {
  flex: 1; min-height: var(--tap-min); padding: var(--sp-3);
  font: inherit; font-size: var(--fs-lg); font-weight: 800;
  color: var(--c-text); background: var(--c-surface);
  border: 2px solid var(--c-line-strong); border-radius: var(--r-md);
  cursor: pointer;
}
.town-btn[aria-pressed="true"] {
  border: 3px solid var(--c-primary); background: var(--c-primary-soft); color: var(--c-text);
}
.town-btn[aria-pressed="true"]::before { content: "✓ "; color: var(--c-primary); font-weight: 800; }

/* ① 地区の大きなボタン */
.area-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 620px) { .area-grid { grid-template-columns: 1fr 1fr; } }
.area-btn {
  display: block; width: 100%; min-height: 68px; padding: var(--sp-3) var(--sp-4);
  text-align: left; font: inherit; color: var(--c-text); background: var(--c-surface);
  border: 2px solid var(--c-line-strong); border-radius: var(--r-lg); cursor: pointer;
}
.area-btn:hover { background: var(--c-surface-2); }
.area-btn .an { display: block; font-size: var(--fs-xl); font-weight: 800; line-height: 1.4; }
.area-btn .as { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--c-text-sub); line-height: 1.5; }

/* ② 病院のボタンの並び */
.hosp-list { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.hosp-list .hosp-btn { min-height: 76px; }
.hosp-list .hosp-btn .ha { font-size: var(--fs-sm); }

/* ③ 答えのいちばん上（着く時刻を特大で） */
.ans-big { margin: var(--sp-3) 0 var(--sp-2); line-height: 1.25; }
.ans-big .t {
  display: block; font-size: var(--fs-3xl); font-weight: 800; color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.ans-big .w { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--c-text); }
.ans-after { margin: 0 0 var(--sp-2); font-size: var(--fs-md); color: var(--c-text-sub); }
.ans-sub { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); color: var(--c-text); }
.ans-sub strong { font-size: var(--fs-xl); font-weight: 800; }
.ans-line {
  margin: 0 0 var(--sp-4); padding: var(--sp-3);
  font-size: var(--fs-lg); font-weight: 700; color: var(--c-text);
  background: var(--c-surface-2); border-radius: var(--r-md);
}

/* 大きな注意（帰りの便が少ない・受付に間に合わない） */
.big-caution {
  margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-lg); font-weight: 800; line-height: 1.5;
  color: var(--c-danger); background: var(--c-danger-soft);
  border: 2px solid var(--c-danger); border-radius: var(--r-md);
}

/* ③ 縦一本の道順 */
.steps { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.steps .step {
  display: grid; grid-template-columns: 112px 1fr; gap: var(--sp-2);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line);
}
/* せまい画面では、時刻を上の行に置いて折り返さないようにする */
@media (max-width: 359px) { .steps .step { grid-template-columns: 1fr; gap: var(--sp-1); } }
.steps .step:last-child { border-bottom: none; }
.steps .st-time { font-variant-numeric: tabular-nums; }
.steps .tm { font-size: var(--fs-lg); font-weight: 800; color: var(--c-text); white-space: nowrap; }
.steps .tm.none { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-sub); }
.steps .st-body { min-width: 0; }
.steps .sp { font-size: var(--fs-md); color: var(--c-text); line-height: 1.5; }
.steps .sp.big { font-size: var(--fs-xl); font-weight: 800; }
.steps .sv { margin-top: 2px; font-size: var(--fs-md); color: var(--c-text); line-height: 1.6; }
.steps .sv .act { font-size: var(--fs-lg); font-weight: 800; }
.steps .sa { font-size: var(--fs-md); font-weight: 700; color: var(--c-text-sub); }
.steps .sn { margin-top: 2px; font-size: var(--fs-sm); color: var(--c-text-sub); line-height: 1.5; }
.steps .emoji { font-size: var(--fs-xl); }

/* 乗り換えの段は太枠で目立たせる */
.steps .step.transfer {
  grid-template-columns: 1fr; gap: var(--sp-1);
  margin: var(--sp-2) 0; padding: var(--sp-3) var(--sp-4);
  background: var(--c-warn-soft);
  border: 3px solid var(--c-warn); border-radius: var(--r-md);
}
.steps .step.transfer .tr-main { font-size: var(--fs-lg); font-weight: 800; color: var(--c-warn); }
.steps .step.transfer .tr-main::before { content: "⇄ "; }
.steps .step.transfer .tr-wait { font-size: var(--fs-md); font-weight: 700; }
.steps .step.transfer .sp { color: var(--c-text); }

/* 歩く段・道順だけの段 */
.steps .step.walk .sv { font-size: var(--fs-md); }
.steps .step.outline-tr { border-top: 2px dashed var(--c-line-strong); }
.steps .step.arrive .sp.big, .steps .step.arrive_home .sp.big { color: var(--c-primary); }

/* ※（確認中の印） */
.kome { margin-left: 2px; font-size: var(--fs-sm); font-weight: 800; color: var(--c-warn); }
.kome-line { margin: var(--sp-3) 0; font-size: var(--fs-sm); color: var(--c-text-sub); line-height: 1.6; }

/* おすすめの説明・ひとつ早い／遅い */
.pick-note { margin: 0 0 var(--sp-3); font-size: var(--fs-md); color: var(--c-text-sub); }
.shift { display: flex; gap: var(--sp-3); }
.shift .btn { flex: 1; }

/* 道順の下の注意（3行まで） */
.notes { margin: var(--sp-4) 0 0; padding-left: 1.3em; }
.notes li { margin-bottom: var(--sp-2); font-size: var(--fs-md); color: var(--c-text); line-height: 1.6; }

/* つながらないときの注意の帯 */
.ts-note { margin-top: var(--sp-3); align-items: flex-start; }

/* 集落をえらび直す */
.place-pick { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.place-pick p { margin: 0 0 var(--sp-2); font-size: var(--fs-md); color: var(--c-text-sub); }
.place-pick label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-md); font-weight: 700; }
.place-pick select { width: 100%; min-height: var(--tap-min); }

/* いちばん下の「合わないときは」 */
.fallback { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 2px solid var(--c-line-strong); }
.fallback h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.fallback p { margin: 0 0 var(--sp-2); font-size: var(--fs-md); color: var(--c-text); line-height: 1.6; }
.text-link {
  min-height: var(--tap-min); padding: var(--sp-2) 0;
  font: inherit; font-size: var(--fs-md); color: var(--c-primary);
  background: none; border: none; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; text-align: left;
}

/* 出典（ページのいちばん下に小さく） */
.sources { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--c-text-sub); }
.sources h2 { font-size: var(--fs-md); color: var(--c-text); margin-bottom: var(--sp-2); }
.sources li { margin-bottom: var(--sp-2); line-height: 1.6; }
.sources a { color: var(--c-primary); }