@charset "UTF-8";

/*
 * 駅構内ナビ 共通スタイル
 *
 * デジタル庁デザインシステム（β版）に準拠しています。
 * 色・書体・影はすべて公式のデザイントークン（dads/tokens.css）から参照し、
 * 部品は公式のコンポーネント CSS（dads/*.css）を使います。
 * このファイルにはレイアウトと設定のみを記述します。
 *
 * レスポンシブの方針（公式「レイアウト」基本デザインに従う）
 *   - ブレークポイントは 48rem（768px）の 1 つだけ
 *     48rem 未満: モバイル・タブレット / 48rem 以上: デスクトップ
 *   - 余白は 4px を単位とする。ガターは文字サイズの 2 倍（2rem）以上
 *   - 横スクロールを出さない。幅の指定は % か rem か fr で行う
 *   - 縦の長さは vh を使わず svh / dvh を使う
 *     （入力欄が開いたときやアドレスバーが動くときにずれない）
 *   - ノッチのある端末の余白は env(safe-area-inset-*) で確保する
 *
 * 仕様: https://design.digital.go.jp/dads/
 */

/* ---------------------------------------------------------------
 * 基本
 * --------------------------------------------------------------- */

/* 幅と余白の合計で横があふれるのを防ぐ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-family-sans);
  font-size: 100%;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--color-neutral-solid-gray-900);
  background-color: var(--color-neutral-white);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* 地図の背景でも文字が読めるように、最小のコントラストを確保する */
  color: var(--color-neutral-solid-gray-900);
  /* overflow: clip に対応していない場合の保険が下の overflow-x です */
  overflow-x: clip;
}

/* overflow: clip を使わない場合の保険 */
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

/* 画像や図形は幅をあ的画面之内にとどめる */
img, svg, video, canvas, table {
  max-width: 100%;
}

/* 長い地名・英語・URL は anywhere で折り返す */
h1, h2, h3, h4, p, li, dt, dd, label, span, td, th {
  overflow-wrap: anywhere;
}

/* hidden 属性を部品のクラスより優先させる。
 * 部品の CSS に display が書いてあると hidden が効かなくなるため。 */
[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 本文へ移動するリンク */
.skip-link {
  position: absolute;
  left: calc(8 / 16 * 1rem);
  top: calc(-100 / 16 * 1rem);
  z-index: 2000;
  padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-key-900);
  color: var(--color-neutral-white);
  text-decoration: none;
  transition: top 0.15s ease-in;
}

.skip-link:focus {
  top: calc(8 / 16 * 1rem);
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* キーボード操作のフォーカス表示
 * デジタル庁デザインシステムの指定どおり、黒い 4 ピクセルの枠線と
 * 黄色の外側に 2 重で表示する。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
  border-radius: calc(8 / 16 * 1rem);
}

/* タップの目標は 44px 以上（アクセシビリティの指針） */
:where(button, a, select, input[type="checkbox"], input[type="radio"]) {
  touch-action: manipulation;
}

/* 高コントラストモードでのヘッダー
 *
 * このモードでは OS が文字色と背景色を強制的に書き換えます。
 * そのため、濃い背景（キーカラー）を指定したままだと文字色も
 * 一緒に書き換えられ、コントラストが崩れます。
 * 背景と文字をシステム色で明示し直して、読める状態を確保します。 */
@media (forced-colors: active) {
  .site-header,
  .tool-header {
    background-color: Canvas;
    color: CanvasText;
    border-bottom-color: CanvasText;
    forced-color-adjust: none;
  }

  .dads-button,
  .dads-button[data-type="solid-fill"],
  .dads-button[data-type="outline"] {
    background-color: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    forced-color-adjust: none;
  }

  .map-popup {
    background-color: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
}

/* Windows の高コントラストモードに合わせる。
 * 色は OS が調整するため、ここでは輪郭と影で形が分かるようにする。 */
@media (forced-colors: active) {
  .skip-link,
  .map-wrapper,
  .map-popup,
  .nav-controls,
  .trip-info {
    border: 1px solid CanvasText;
  }

  .map-wrapper {
    background-color: Canvas;
  }

  #routeCasing {
    stroke: Canvas;
  }

  #route {
    stroke: Highlight;
  }

  .legend__swatch {
    border-color: CanvasText;
  }
}

/* ---------------------------------------------------------------
 * ページの骨格
 * --------------------------------------------------------------- */

.site-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* ノッチ・ホームインジケーターを避けるため、上端だけ余白を足す */
.site-header {
  padding: calc(24 / 16 * 1rem) calc(16 / 16 * 1rem) calc(8 / 16 * 1rem);
  padding-left: max(calc(16 / 16 * 1rem), env(safe-area-inset-left));
  padding-right: max(calc(16 / 16 * 1rem), env(safe-area-inset-right));
  border-bottom: 1px solid var(--color-neutral-solid-gray-200);
  background-color: var(--color-neutral-white);
}

.site-main {
  flex: 1 1 auto;
  padding: calc(16 / 16 * 1rem);
  padding-left: max(calc(16 / 16 * 1rem), env(safe-area-inset-left));
  padding-right: max(calc(16 / 16 * 1rem), env(safe-area-inset-right));
}

.site-footer {
  padding: calc(16 / 16 * 1rem);
  padding-bottom: max(calc(16 / 16 * 1rem), env(safe-area-inset-bottom));
  padding-left: max(calc(16 / 16 * 1rem), env(safe-area-inset-left));
  padding-right: max(calc(16 / 16 * 1rem), env(safe-area-inset-right));
  border-top: 1px solid var(--color-neutral-solid-gray-200);
  font-size: calc(14 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
}

.site-footer__note {
  margin: 0;
}

/* 48rem 以上で余白を広げ、画面の中央に寄せる */
@media (min-width: 48rem) {
  .site-header {
    padding: calc(32 / 16 * 1rem) calc(24 / 16 * 1rem) calc(16 / 16 * 1rem);
    padding-left: max(calc(24 / 16 * 1rem), env(safe-area-inset-left));
    padding-right: max(calc(24 / 16 * 1rem), env(safe-area-inset-right));
  }

  .site-main {
    padding: calc(24 / 16 * 1rem);
    padding-left: max(calc(24 / 16 * 1rem), env(safe-area-inset-left));
    padding-right: max(calc(24 / 16 * 1rem), env(safe-area-inset-right));
  }

  .site-footer {
    padding-left: max(calc(24 / 16 * 1rem), env(safe-area-inset-left));
    padding-right: max(calc(24 / 16 * 1rem), env(safe-area-inset-right));
  }
}

.container {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
}

/* ---------------------------------------------------------------
 * 検索フォーム（表示フロア・出発地・目的地）
 *
 * モバイル: 1 段の縦組み。操作ボタンはその下に 1 列。
 * デスクトップ: フロア / 出発地 / 目的地 を横に並べ、操作は同じ段の右端。
 * --------------------------------------------------------------- */

.nav-controls {
  display: grid;
  /* 1 列から始めて、広い画面で自動的に横並びへ */
  grid-template-columns: minmax(0, 1fr);
  gap: calc(16 / 16 * 1rem);
  padding: calc(16 / 16 * 1rem);
  margin-bottom: calc(16 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-200);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
}

/* ---------------------------------------------------------------
 * トップページ（乗換案内のテキストから駅を探す）
 *
 * 駅ページと同じ並べ方を共有します。
 * --------------------------------------------------------------- */

.hint {
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.6;
}

.msg {
  padding: calc(6 / 16 * 1rem) calc(9 / 16 * 1rem);
  margin-bottom: calc(8 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(8 / 16 * 1rem);
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.6;
  color: var(--color-neutral-solid-gray-900);
}

.msg--ok { border-color: var(--color-semantic-success-2); }
.msg--warn { border-color: var(--color-semantic-warning-orange-1); }
.msg--err { border-color: var(--color-semantic-error-1); }
.msg--info { border-color: var(--color-neutral-solid-gray-420); }
.msg:empty { display: none; }

.paste-field { margin-bottom: calc(12 / 16 * 1rem); }

.paste-field .dads-input-text {
  display: block;
  width: 100%;
}

.paste-field .dads-input-text__control {
  width: 100%;
  min-height: calc(160 / 16 * 1rem);
  font-family: inherit;
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.6;
  resize: vertical;
}

.paste-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 / 16 * 1rem);
  margin-bottom: calc(12 / 16 * 1rem);
}

.paste-actions .dads-button {
  display: inline-flex;
  align-items: center;
  gap: calc(6 / 16 * 1rem);
}

.result-note {
  margin: 0 0 calc(8 / 16 * 1rem);
  font-size: calc(13 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
}

/* 経路の概要 */
.summary {
  padding: calc(12 / 16 * 1rem);
  margin-bottom: calc(16 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-200);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
}

.summary__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(8 / 16 * 1rem);
  margin: 0;
}

@media (min-width: 48rem) {
  .summary__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.summary__item dt {
  font-size: calc(12 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-neutral-solid-gray-700);
}

.summary__item dd {
  margin: calc(2 / 16 * 1rem) 0 0;
  font-size: calc(14 / 16 * 1rem);
}

/* 経路の案内（行程） */
.route-view {
  padding: calc(12 / 16 * 1rem);
  margin-bottom: calc(16 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-200);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
}

.route-view .dads-heading { margin-top: 0; }

.route-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(4 / 16 * 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-item {
  display: grid;
  grid-template-columns: calc(64 / 16 * 1rem) minmax(0, 1fr);
  gap: 0 calc(8 / 16 * 1rem);
  align-items: baseline;
}

.route-item__time {
  font-variant-numeric: tabular-nums;
  font-size: calc(14 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-neutral-solid-gray-700);
}

.route-item__body { min-width: 0; }

.route-item__line {
  font-size: calc(14 / 16 * 1rem);
  font-weight: bold;
}

.route-item__meta {
  font-size: calc(13 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
}

.route-item--transfer {
  grid-template-columns: minmax(0, 1fr);
  padding: calc(4 / 16 * 1rem) 0;
  border-top: 1px dashed var(--color-neutral-solid-gray-200);
  border-bottom: 1px dashed var(--color-neutral-solid-gray-200);
  font-size: calc(12 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
}

/* 駅の一覧 */
.station-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(8 / 16 * 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .station-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.station-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-neutral-solid-gray-200);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  overflow: hidden;
}

.station-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 / 16 * 1rem);
  min-height: calc(48 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem) calc(12 / 16 * 1rem);
  font-size: calc(16 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-key-900);
  text-decoration: none;
}

.station-card__link:hover {
  background-color: var(--color-neutral-solid-gray-100);
}

.station-card__icon { font-size: calc(20 / 16 * 1rem); }

/*
 * 「○○駅の乗り換えガイドを開く」ボタン。
 * 拡張機能が乗換案内の画面に置くものと同じ見た目にするため、
 * 緑・角丸・影・太字の感じを揃えています。
 * 色はデザイントークンから取ります（生の hex は書きません）。
 */
.station-card__guide {
  display: block;
  margin: calc(8 / 16 * 1rem) calc(12 / 16 * 1rem) calc(12 / 16 * 1rem);
  padding: calc(10 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-primitive-green-600);
  box-shadow: 0 calc(4 / 16 * 1rem) var(--color-primitive-green-800);
  color: var(--color-neutral-white);
  font-size: calc(13 / 16 * 1rem);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.station-card__guide:hover { background-color: var(--color-primitive-green-800); }
.station-card__guide:active { box-shadow: none; transform: translateY(2px); }

.station-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(4 / 16 * 1rem);
  padding: 0 calc(12 / 16 * 1rem) calc(10 / 16 * 1rem);
}

.station-card__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(6 / 16 * 1rem);
  font-size: calc(13 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
}

.station-card__label {
  flex: 0 0 calc(28 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-neutral-solid-gray-700);
}

.station-card__value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.station-card__time {
  margin-left: auto;
  color: var(--color-neutral-solid-gray-700);
}

.station-card--off {
  padding: calc(8 / 16 * 1rem) calc(12 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
}

.station-card__name { font-weight: bold; }

.station-card__note {
  font-size: calc(13 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
}

.station-card--rest { grid-column: 1 / -1; }

.station-card__name + .station-card__note { margin-left: calc(8 / 16 * 1rem); }

@media (forced-colors: active) {
  .station-card,
  .summary,
  .msg { border-color: CanvasText; }
  .station-card__link { color: LinkText; }
}

@media (min-width: 48rem) {
  .nav-controls {
    /* 左にフロア選択、右に出発地・目的地と検索ボタンを置く */
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    grid-template-areas:
      "floor pair"
      "floor actions";
    align-items: start;
    padding: calc(24 / 16 * 1rem);
  }

  .nav-controls__floor { grid-area: floor; }
  .nav-controls__pair { grid-area: pair; }
  .nav-controls__actions {
    grid-area: actions;
    justify-content: flex-end;
  }
}

.nav-controls__field {
  display: flex;
  flex-direction: column;
  gap: calc(4 / 16 * 1rem);
  /* grid 子要素は既定で幅の上限があるので Overflow を防ぐ */
  min-width: 0;
}

.nav-controls__label {
  font-size: calc(14 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-neutral-solid-gray-800);
}

/* 表示フロア（積み上げ式。floors.css に本体の指定がある） */
.nav-controls__floor {
  display: flex;
  flex-direction: column;
  gap: calc(4 / 16 * 1rem);
  min-width: 0;
}

.nav-controls__floorHeading {
  margin: 0;
  font-size: calc(14 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-neutral-solid-gray-800);
}

.nav-controls__subHeading {
  margin: 0;
  font-size: calc(12 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-neutral-solid-gray-700);
}

/* 補足の説明 */
.nav-controls .hint {
  font-size: calc(12 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
}

/* ボタンを持っているときは select は隠す（JavaScript 側の処理） */
.nav-controls__floor > #floorSelect {
  max-width: calc(320 / 16 * 1rem);
}

/* セレクトは幅いっぱいにお使いいただけるようにする */
.nav-controls .dads-select,
.nav-controls .dads-select__control,
.nav-controls .dads-select__select {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* 出発地・目的地・入れ替えボタン。
 * 3 列に並べ、入れ替えボタンは選択欄と同じ高さにそろえる。 */
.nav-controls__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: calc(8 / 16 * 1rem);
  align-items: end;
  min-width: 0;
}

@media (min-width: 48rem) {
  .nav-controls__pair {
    /* 広い画面でも 3 列のまま据え置く。display: contents にすると
       入れ替えボタンが別の行に回り、選択欄より大きくなる */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
  }
}

/* 操作ボタン。モバイルでは 2 個を横に並べて指で押しやすくする */
.nav-controls__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(8 / 16 * 1rem);
}

@media (min-width: 48rem) {
  .nav-controls__actions {
    display: flex;
    align-items: center;
    gap: calc(8 / 16 * 1rem);
  }
}

.nav-controls__actions .dads-button {
  width: 100%;
}

@media (min-width: 48rem) {
  .nav-controls__actions .dads-button {
    width: auto;
  }
}

/* 入れ替えボタン
 *
 * 出発地・目的地の選択欄と同じ高さ（48px）にそろえます。
 * 正方形のままにすると選択欄より一回り大きくなり、存在感が出すぎます。
 * 公式ボタンの CSS より優先したいので、.class 2 つで指定します。 */
.nav-controls .dads-button.nav-controls__swap {
  height: calc(48 / 16 * 1rem);
  min-width: calc(48 / 16 * 1rem);
  min-height: calc(48 / 16 * 1rem);
  aspect-ratio: auto;
  padding: 0 calc(12 / 16 * 1rem);
  align-self: end;
  margin-bottom: 0;
}

/* フロア選択はフロア数だけ増えるので、高さを超えたらスクロールする */
.nav-controls__floor .floor-picker {
  max-height: calc(272 / 16 * 1rem);
  overflow-y: auto;
}

/* ---------------------------------------------------------------
 * 会社・ホームの情報（拡張機能から渡された値）
 * --------------------------------------------------------------- */

.trip-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(8 / 16 * 1rem) calc(24 / 16 * 1rem);
  margin: 0 0 calc(16 / 16 * 1rem);
  padding: calc(16 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-200);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
}

@media (min-width: 48rem) {
  .trip-info {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.trip-info__item {
  display: flex;
  flex-direction: column;
  gap: calc(2 / 16 * 1rem);
  margin: 0;
  min-width: 0;
}

.trip-info__label {
  font-size: calc(13 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-800);
}

.trip-info__value {
  font-size: calc(16 / 16 * 1rem);
  font-weight: bold;
}

/* ---------------------------------------------------------------
 * ルート案内
 * --------------------------------------------------------------- */

.route-guide {
  margin: 0 0 calc(16 / 16 * 1rem);
}

/* ---------------------------------------------------------------
 * 地図
 *
 * 高さは svh / dvh で決める。vh だと入力欄が開いたときや
 * アドレスバーが動くときにずれるため。
 * --------------------------------------------------------------- */

.map-wrapper {
  position: relative;
  width: 100%;
  /* 高さは「画面の高さ」からヘッダーと余白を差し引いた量 */
  height: calc(100svh - 20rem);
  height: calc(100dvh - 20rem);
  min-height: 22rem;
  max-height: 44rem;
  margin: 0 0 calc(16 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-solid-gray-100);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  /* ピンチ操作でページ全体がスクロールしない */
  overscroll-behavior: contain;
}

@media (min-width: 48rem) {
  .map-wrapper {
    /* 画面の高さに合わせて、上下の余白を足した高さに収める */
    height: calc(100svh - 13rem);
    height: calc(100dvh - 13rem);
    max-height: 56rem;
  }
}

.map-wrapper:active {
  cursor: grabbing;
}

/* 画像と図形を 1 つの層として回転・拡大する */
.map-content {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  will-change: transform;
}

#map {
  display: block;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

#svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* 路線
 * フロア図にはバリアフリールート（赤線）が既に描かれており、赤で重ねると
 * 視認性が落ちるため青系にし、その下に白い下地を敷いて読みやすくしています。
 *
 * 色は nav.js の ROUTE_COLOR / ROUTE_CASING_COLOR が正です。
 * CSS 側の色（tokens.css の key-900 と neutral-white）は、その値と同じものにして
 * あります。どちらかを直すときは両方を揃えること。
 * check-dads.js が一致を検査します。 */
#routeCasing,
#route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: map-draw 1.5s linear forwards;
}

/* 白い下地（細い線より先に描く） */
#routeCasing {
  stroke: var(--color-neutral-white);
}

/* 路線本体 */
#route {
  stroke: var(--color-key-900);
}

/* 線の太さは表示サイズで変えないため、SVG の座標で指定する */
#routeCasing { stroke-width: 16; }
#route { stroke-width: 8; }

/* アニメーション finished が使えない環境向けの保険。
 * 再生されないまま透明なままにならないよう、
 * 開始をわずかに遅らせて描画する。 */
@media (prefers-reduced-motion: reduce) {
  #routeCasing,
  #route {
    animation: none;
    stroke-dashoffset: 0;
  }
}

@keyframes map-draw {
  to { stroke-dashoffset: 0; }
}

.node-clickable {
  cursor: pointer;
}

/* ピンの:focus-visible（SVG 要素） */
#svg [tabindex]:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
}

/* Google Material Symbols（ボタンのアイコン。仕様は https://fonts.google.com/icons）
 * アイコンは読み込み中も文字ではなく豆腐（□）に見えないよう、
 * 読み込みが完了するまで伏せておく。 */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings:
    "FILL" 0,
    "wght" 500,
    "GRAD" 0,
    "opsz" 24;
  font-size: calc(24 / 16 * 1rem);
  /* フォントが読めてから表示する */
  visibility: hidden;
}

html.material-icons-ready .material-symbols-outlined,
.material-symbols-outlined.icon-ready {
  visibility: visible;
}

/* 拡大・回転・初期化の操作
 * モバイルでは 5 個を横に並べて地図を隠さないようにする。 */
.map-controls {
  position: absolute;
  right: calc(8 / 16 * 1rem);
  bottom: calc(8 / 16 * 1rem);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(4 / 16 * 1rem);
  max-width: calc(100% - calc(16 / 16 * 1rem));
  z-index: 100;
}

@media (min-width: 48rem) {
  .map-controls {
    right: calc(12 / 16 * 1rem);
    bottom: calc(12 / 16 * 1rem);
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: none;
    gap: calc(8 / 16 * 1rem);
  }
}

.map-controls .dads-button {
  border-radius: 50%;
  padding: 0;
  box-shadow: var(--elevation-2);
  /* 指で押しやすくするため 44px を下回らない */
  min-width: calc(44 / 16 * 1rem);
  min-height: calc(44 / 16 * 1rem);
}

/* 拡大・縮小のボタンはデスクトップだけ。
 * スマートフォンでは 2 本指で拡大縮小できるためです。 */
@media (max-width: 47.9375rem) {
  .map-controls__zoom {
    display: none;
  }
}

/* フロア図が未登録のとき、または読み込めなかったときに表示する案内 */
.map-empty-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 / 16 * 1rem);
  text-align: center;
  color: var(--color-neutral-solid-gray-800);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.9;
  pointer-events: none;
  overflow: auto;
}

.map-empty-note__title {
  margin: 0 0 calc(8 / 16 * 1rem);
  font-weight: bold;
}

.map-empty-note__detail {
  margin: 0;
}

/* 読み込みに失敗したときだけ、参照先を表示する */
.map-empty-note__url {
  margin: calc(8 / 16 * 1rem) 0 0;
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(12 / 16 * 1rem);
  word-break: break-all;
}

.map-empty-note--failed .map-empty-note__url:empty {
  display: none;
}

/* 読み込み中の表示 */
.map-wrapper--loading::after {
  content: "フロア図を読み込んでいます";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 / 16 * 1rem);
  text-align: center;
  background-color: var(--color-neutral-solid-gray-100);
  color: var(--color-neutral-solid-gray-800);
  font-size: calc(14 / 16 * 1rem);
}

/* 読み込みに失敗したとき */
.map-wrapper--error {
  border-color: var(--color-semantic-error-1);
}

.map-empty-note code {
  font-family: var(--font-family-mono);
  background-color: var(--color-neutral-solid-gray-100);
  padding: 0 calc(4 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
}

/* 地点のポップアップ
 * 左上の位置は nav.js が計算し、枠からはみ出さないよう補正する。 */
.map-popup {
  position: absolute;
  z-index: 1000;
  width: min(15rem, calc(100% - calc(24 / 16 * 1rem)));
  padding: calc(12 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  box-shadow: var(--elevation-4);
}

.map-popup__title {
  margin: 0 0 calc(4 / 16 * 1rem);
  font-size: calc(16 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-neutral-solid-gray-900);
}

.map-popup__buttons {
  display: flex;
  flex-direction: column;
  gap: calc(8 / 16 * 1rem);
}

.map-popup__buttons .dads-button {
  width: 100%;
}

.popup-note {
  margin: calc(4 / 16 * 1rem) 0 0;
  font-size: calc(12 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
}

/* ---------------------------------------------------------------
 * 凡例
 * --------------------------------------------------------------- */

.legend {
  margin: 0 0 calc(16 / 16 * 1rem);
  padding: 0;
  border: 0;
}

/* モバイルでは項目が多いときに横にスクロールさせる */
.legend__inner {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 / 16 * 1rem);
}

.legend .dads-chip-label {
  gap: calc(6 / 16 * 1rem);
}

.legend__swatch {
  display: inline-block;
  width: calc(12 / 16 * 1rem);
  height: calc(12 / 16 * 1rem);
  border: 1px solid var(--color-neutral-black);
  border-radius: 50%;
  vertical-align: middle;
}

/* ---------------------------------------------------------------
 * 出発地・到着地の札
 *
 * 丸だけではどれが出発でどれが到着か分からないので、
 * 地点の上に「出発」「到着」の文字と輪を描きます。
 * --------------------------------------------------------------- */

.endpoint-mark {
  pointer-events: none;
}

.endpoint-mark--from {
  --_mark-color: var(--color-error);
}

.endpoint-mark--to {
  --_mark-color: var(--color-primary);
}

.endpoint-mark__ring {
  stroke: var(--_mark-color);
}

.endpoint-mark__label {
  font-family: var(--font-family-sans-serif, system-ui, sans-serif);
  font-size: calc(34 / 16 * 1rem);
  font-weight: 700;
  fill: var(--_mark-color);
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: calc(10 / 16 * 1rem);
  stroke-linejoin: round;
}

/* 選択欄の注意書き */
.endpoint-note {
  margin: calc(8 / 16 * 1rem) 0 0;
  color: var(--color-error);
  font-weight: 700;
}

/* ---------------------------------------------------------------
 * 出典
 * --------------------------------------------------------------- */

.sources {
  margin: calc(24 / 16 * 1rem) 0 calc(16 / 16 * 1rem);
}

.sources__list {
  margin: calc(8 / 16 * 1rem) 0 0;
  padding-left: calc(20 / 16 * 1rem);
}

.sources__item {
  margin: calc(4 / 16 * 1rem) 0;
}

.sources__note {
  margin: calc(8 / 16 * 1rem) 0 0;
  color: var(--color-neutral-black);
}

/* ---------------------------------------------------------------
 * 使い方ページ（guide.html）
 * --------------------------------------------------------------- */

.guide-nav {
  margin-top: calc(12 / 16 * 1rem);
}

.guide-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 / 16 * 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-nav__item {
  display: inline-block;
  padding: calc(6 / 16 * 1rem) calc(12 / 16 * 1rem);
  border: 1px solid var(--color-neutral-black);
  border-radius: calc(6 / 16 * 1rem);
  color: inherit;
  text-decoration: none;
}

.guide {
  margin: calc(24 / 16 * 1rem) 0;
}

.guide__list {
  margin: calc(8 / 16 * 1rem) 0;
  padding-left: calc(20 / 16 * 1rem);
}

.guide__list--ordered {
  list-style: decimal;
}

.guide__list li {
  margin: calc(4 / 16 * 1rem) 0;
}

.guide__from {
  color: var(--color-error);
}

.guide__to {
  color: var(--color-primary);
}

.guide__back {
  margin: calc(24 / 16 * 1rem) 0;
}

.site-header__links {
  display: flex;
  gap: calc(16 / 16 * 1rem);
  margin: calc(8 / 16 * 1rem) 0 0;
}

.site-header__link {
  color: inherit;
}

/* ---------------------------------------------------------------
 * 視覚的に隠す（スクリーンリーダーだけが読む）
 * --------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}