/* 地図と写真（参考 .home-map：右に横長の写真、左に地図）。地図は道順の略図を SVG で描いた */
.map { background: var(--white); }
.map__inner { padding-top: 60px; padding-bottom: 20px; }
.map__photo { aspect-ratio: 650 / 400; overflow: hidden; }
.map__photo img { width: 100%; height: 100%; object-fit: cover; }
.map__map { margin-top: 20px; }
.map__map svg { width: 100%; height: auto; }
.map__ground { fill: var(--panel); }
.map__park { fill: var(--yellow-pale); }
.map__road { fill: none; stroke: var(--white); stroke-width: 18; }
.map__rail { fill: none; stroke: var(--ink); stroke-width: 7; }
.map__rail-dash { fill: none; stroke: var(--white); stroke-width: 3; stroke-dasharray: 14 14; }
.map__station { fill: var(--ink); }
.map__route { fill: none; stroke: var(--sky-deep); stroke-width: 3; stroke-dasharray: 6 6; stroke-linecap: round; }
.map__p { fill: var(--sky-deep); }
.map__pin { fill: var(--yellow); }
.map__pin-tooth { fill: var(--white); }
.map__label {
  font-family: var(--f-jp);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--ink);
  text-anchor: middle;
}
.map__label--w { fill: var(--white); }
.map__label--s { font-size: 12px; }
.map__label--p { font-family: var(--f-en); font-size: 26px; }

@media (min-width: 768px) {
  .map__inner { display: flex; justify-content: space-between; align-items: stretch; }
  .map__photo { order: 2; width: 60%; aspect-ratio: auto; }
  .map__map { order: 1; width: 37%; margin: 0; }
}
@media (min-width: 1024px) {
  .map__inner { padding-top: 120px; padding-bottom: 0; }
  .map__photo { width: 650px; height: 400px; }
  .map__map { width: 400px; }
}