/* 路線図の部品（TOP「東京から約2時間」とアクセスページで共通。11/10 Takeru）。
   出発地・線・到着地を1行で見せる。線の描き方と色はアクセスの地図に合わせる
   （鉄道＝黒で白と交互、高速道路＝二本線、乗り継ぎ＝点線。色はどれも黒。橙は見た目が落ちるのでやめた、11/10 Takeru）。
   出発地・線・到着地の列は全行で共通にして、線の両端をそろえる。
   大きさはページ側で --route-name / --route-small / --route-gap / --route-to を上書きできる */
.route { --route-name: 20px; --route-small: 14px; --route-gap: 24px; --route-to: max-content; --route-min: 120px;
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content max-content minmax(0, 1fr) var(--route-to); column-gap: var(--route-gap); }
.route--plain { grid-template-columns: max-content minmax(0, 1fr) var(--route-to); }
.route__row { --a: var(--semantic-color-map-rail, #222); grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; margin: 0; padding: var(--route-gap) 0; border-top: 1px solid var(--semantic-color-border-default, #ddd); text-indent: 0; }
.route__row:first-child { padding-top: 6px; border-top: 0; }
.route__row:last-child { padding-bottom: 0; }
.route__mode, .route__from, .route__to { margin-top: calc(36px - .7em); line-height: 1.4; }
.route__mode { font-size: 15px; font-weight: 700; }
.route__from, .route__to { font-size: var(--route-name); font-weight: 700; letter-spacing: .02em; }
.route__line { display: grid; grid-template-rows: 24px 12px auto; row-gap: 6px; justify-items: center; align-items: center; min-width: var(--route-min); text-align: center; }
.route__time { grid-row: 1; font-size: var(--route-name); font-weight: 700; line-height: 24px; font-feature-settings: "palt" 1; white-space: nowrap; }
.route__via { grid-row: 3; font-size: var(--route-small); line-height: 1.6; color: var(--semantic-color-text-muted, #666); text-wrap: balance; }
.route__line::before { content: ""; grid-row: 2; justify-self: stretch; height: 12px;
  background:
    radial-gradient(circle at 6px 50%, var(--a) 5.5px, transparent 6px),
    radial-gradient(circle at calc(100% - 6px) 50%, var(--semantic-color-surface-default, #fff) 3px, var(--a) 3.5px 5.5px, transparent 6px),
    var(--route-line); background-repeat: no-repeat; }
.route__row--rail { --route-line:
    linear-gradient(var(--a), var(--a)) 50% calc(50% - 3px) / calc(100% - 22px) 1px,
    linear-gradient(var(--a), var(--a)) 50% calc(50% + 3px) / calc(100% - 22px) 1px,
    repeating-linear-gradient(90deg, var(--a) 0 14px, transparent 14px 28px) 11px 50% / calc(100% - 22px) 6px; }
.route__row--road { --route-line:
    linear-gradient(var(--a), var(--a)) 50% calc(50% - 2px) / calc(100% - 22px) 2px,
    linear-gradient(var(--a), var(--a)) 50% calc(50% + 2px) / calc(100% - 22px) 2px; }
.route__row--air { --route-line: repeating-linear-gradient(90deg, var(--a) 0 6px, transparent 6px 12px) 12px 50% / calc(100% - 24px) 2px; }
.route-note { margin: 12px 0 0; font-size: var(--route-small, 13px); color: var(--semantic-color-text-muted, #666); }