/* 交通案内ページ（style.css に追加で読み込む） */

:root {
  --route-in: #18773f;     /* 行き */
  --route-up: #156e8a;     /* 対面通行区間 */
  --route-exit: #7046c0;   /* 帰り */
  --ng: #d62828;           /* 逆走・進入禁止 */
  --ng-ink: #c41f1f;
  --ng-soft: #fdecea;
  --ok: #18773f;
}

.nowrap { white-space: nowrap; }
/* 「左折」などの進行方向の指示は帰りルートの色で強調 */
.oneway-alert strong.turn, .timeline strong.turn { color: var(--route-exit); }
.section--tight { padding-block: clamp(32px, 5vw, 56px); }

/* ---------- 一方通行の警告 ---------- */
.oneway-alert {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: clamp(20px, 3vw, 28px);
  background: var(--ng-soft);
  border: 2px solid var(--ng);
  border-radius: var(--radius-lg);
}
.oneway-alert h2 { margin: 0 0 .4em; color: var(--ng-ink); font-size: clamp(1.35rem, 3vw, 1.9rem); }
.oneway-alert p { margin: 0 0 .6em; max-width: none; font-size: 1.04rem; }
.oneway-alert strong { color: var(--ng-ink); }
.oneway-alert .alert-en { margin: 0; color: var(--muted); font-size: .88rem; }
.noentry-icon, .sw-ng { display: block; }
.noentry-icon circle, .sw-ng circle { fill: var(--ng); }
.noentry-icon rect, .sw-ng rect { fill: #fff; }
.noentry-icon { width: 76px; height: 76px; }

@media (max-width: 560px) {
  .oneway-alert { grid-template-columns: 1fr; gap: 12px; }
  .noentry-icon { width: 56px; height: 56px; }
}

/* ---------- 目的地の設定 ---------- */
.dest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
}
.dest-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.dest-card h3 { margin: 0; }
.dest-card p { margin: 0; max-width: none; }
.dest-tel {
  font-family: var(--font-round);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.3;
}
.btn--block { width: 100%; justify-content: center; margin-top: 6px; }
.dest-sub { font-size: .92rem; font-weight: 700; text-decoration: none; }
.dest-sub:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .dest-grid { grid-template-columns: 1fr; }
}

/* ---------- 地図 ---------- */
.legend-route {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: .92rem;
}
.legend-route li { display: flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 34px; height: 8px; border-radius: 4px; }
.sw-in { background: var(--route-in); }
.sw-up { background: var(--route-up); }
.sw-exit { background: var(--route-exit); }
.sw-ng { width: 22px; height: 22px; }

.map-frame {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.map-scroll:focus-visible { outline: 3px solid var(--star); outline-offset: -3px; }
/* 地図内は文字幅を一定にする（枠の大きさを文字数から計算しているため） */
.route-map { display: block; width: 100%; min-width: 720px; height: auto; font-family: var(--font-body); font-feature-settings: normal; }
.map-hint { margin: 10px 0 0; color: var(--muted); font-size: .85rem; max-width: none; }
@media (min-width: 760px) { .map-hint { display: none; } }

/* SVGの中身 */
.map-bg { fill: #eef2e6; }
.road-minor path { fill: none; stroke: #d3d9c7; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.road-major path { fill: none; stroke: #e6c464; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.route-casing { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.route { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.route-in { stroke: var(--route-in); }
.route-up { stroke: var(--route-up); stroke-width: 8; }
.route-exit { stroke: var(--route-exit); }
.route-to79 { stroke: var(--route-exit); stroke-width: 7; }
.chev { fill: #fff; stroke: none; }

.sign-noentry circle { fill: var(--ng); }
.sign-noentry .sign-halo { fill: #fff; }
.sign-noentry rect { fill: #fff; }

.callout rect { fill: #fff; stroke: var(--hairline); stroke-width: 1.5; }
.callout-ng rect { fill: #fff6f5; stroke: var(--ng); stroke-width: 2.5; }
.callout-in rect { stroke: var(--route-in); stroke-width: 2.5; }
.callout-out rect { stroke: var(--route-exit); stroke-width: 2.5; }
.c-title { font-family: var(--font-round); font-weight: 700; font-size: 27px; fill: var(--route-in); }
.callout-out .c-title { fill: var(--route-exit); }
.c-title-sm { font-size: 22px; }
.c-strong { font-weight: 700; font-size: 16px; fill: var(--ng-ink); }
.c-small { font-size: 13.5px; fill: var(--ink); }

.pin circle { stroke: #fff; stroke-width: 4; }
.pin-in circle { fill: var(--route-in); }
.pin-out circle { fill: var(--route-exit); }
.pin text { fill: #fff; font-family: var(--font-round); font-weight: 700; font-size: 19px; text-anchor: middle; }
.p-icon rect { fill: #1d4f91; stroke: #fff; stroke-width: 3; }
.p-icon text { fill: #fff; font-family: Arial, sans-serif; font-weight: 700; font-size: 17px; text-anchor: middle; }
.star path { fill: var(--star); stroke: #5a4300; stroke-width: 1.5; stroke-linejoin: round; }

.lbl { fill: var(--ink); font-size: 15px; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.lbl-strong { font-weight: 700; font-size: 16px; }
.lbl-small { font-size: 13px; }
.lbl-iao { font-family: var(--font-round); font-weight: 700; font-size: 20px; }
.lbl-road { fill: #7a6420; font-size: 15px; font-weight: 700; }
.leader { fill: none; stroke: #5f6a73; stroke-width: 1.5; stroke-dasharray: 3 3; }
.pill rect { fill: #fff; stroke: var(--route-in); stroke-width: 2.5; }
.pill text { fill: var(--route-in); font-size: 14px; font-weight: 700; text-anchor: middle; }
.pill-two rect { stroke: var(--route-up); }
.pill-two text { fill: var(--route-up); font-size: 14px; }
.pill-exit rect { stroke: var(--route-exit); }
.pill-exit text { fill: var(--route-exit); font-size: 14px; }
.pill-road text { font-size: 16px; }
.north path { fill: var(--ink); }
.north text { font-size: 14px; font-weight: 700; }
.scale path { fill: none; stroke: var(--ink); stroke-width: 2; }
.scale text { font-size: 12px; }
.attr { fill: var(--muted); font-size: 11px; }

/* ---------- 行き・帰り ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.steps-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.steps-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: .9rem;
}
.steps--in .steps-badge { background: var(--route-in); }
.steps--out .steps-badge { background: var(--route-exit); }

.timeline { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.timeline li {
  position: relative;
  padding: 0 0 22px 52px;
  counter-increment: step;
}
.timeline li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
}
.timeline li::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 4px;
  width: 2px;
  background: var(--hairline);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.steps--in .timeline li::before { background: var(--route-in); }
.steps--out .timeline li::before { background: var(--route-exit); }
.timeline h3 { margin: 4px 0 4px; font-size: 1.05rem; }
.timeline p { margin: 0; font-size: .95rem; max-width: none; }
.timeline .is-key {
  margin: 0 0 22px;
  padding: 14px 16px 14px 52px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.timeline .is-key::before { left: 10px; top: 14px; }
.timeline .is-key::after { display: none; }
.timeline strong { color: var(--ng-ink); }

@media (max-width: 860px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* ---------- 逆走になりやすいケース ---------- */
.ngok-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ngok {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.ngok p {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  max-width: none;
  padding: 16px 18px;
  font-size: .95rem;
}
.ngok .ng { background: var(--ng-soft); }
.ngok .ok { border-top: 1px solid var(--hairline); }
.mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.mark-ng { background: var(--ng); }
.mark-ok { background: var(--ok); }

@media (max-width: 860px) {
  .ngok-grid { grid-template-columns: 1fr; }
}

/* ---------- ご来館の前に ---------- */
.notes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.notes-list { margin: 0; padding-left: 1.2em; }
.notes-list li { margin-bottom: .5em; }
.notes-side { display: grid; gap: 14px; }
.print-btn { font: inherit; font-weight: 700; cursor: pointer; }

@media (max-width: 860px) {
  .notes-layout { grid-template-columns: 1fr; }
}

/* ---------- 印刷（A4で地図と手順が読めるように） ---------- */
@media print {
  .draft-bar, .site-header, .site-footer, .print-btn, .map-hint, .dest-sub, #mistakes { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section, .section--tint { background: none; padding-block: 10px; }
  .route-map { min-width: 0; }
  .map-scroll { overflow: visible; }
  .btn--primary { display: none; }
  .steps-grid { grid-template-columns: 1.2fr 1fr; }
  .dest-grid { grid-template-columns: 1fr 1fr; }
  .oneway-alert, .map-frame, .dest-card { break-inside: avoid; }
}