* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; font-family: sans-serif; color: #171717; }
#map { width: 100%; height: 100%; height: 100dvh; background: #e7eceb; }
#show-all { position: fixed; left: 16px; bottom: max(80px, calc(env(safe-area-inset-bottom) + 64px)); z-index: 1000; margin: 0; border: 0; border-radius: 24px; background: #151515; color: white; padding: 11px 18px; cursor: pointer; font-weight: bold; }
#show-all:disabled { opacity: .45; cursor: wait; }
#map-status { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 16px; z-index: 1000; max-width: calc(100% - 90px); padding: 10px 14px; background: white; border-radius: 8px; box-shadow: 0 2px 12px #0002; font-size: 12px; margin: 0; }
.factory-pin { background: none; border: 0; }
.factory-popup h2 { font-size: 17px; margin: 0 0 8px; }
.factory-popup p { margin: 8px 0; }
.factory-popup a { display: inline-block; margin-top: 6px; font-weight: bold; }
.leaflet-control-zoom { margin-bottom: max(30px, env(safe-area-inset-bottom)) !important; }
/* Match the compass artwork: white dots, fading leaders and vertical names. */
.factory-pin .spot-dot {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 6px;
  height: 6px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  transform: none;
}
.spot-leader { position: absolute; left: 10px; top: 10px; width: 0; height: 0; }
.spot-line { position: absolute; left: 0; top: 0; width: 70px; height: 1.5px; background: linear-gradient(to right, rgba(255,255,255,.9), rgba(255,255,255,0)); transform-origin: left center; }
.spot-name { position: absolute; left: 0; top: 0; margin: 0; padding: 8px 6px; border: 0; border-radius: 4px; background: transparent; color: white; font: 700 14px/1.05 -apple-system, BlinkMacSystemFont, sans-serif; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; pointer-events: auto; }
.spot-name:hover, .factory-pin:hover .spot-name, .factory-pin:focus-visible .spot-name { background: #fff; color: #111; outline: 1px solid #fff; }
/* 社名のハイライトと同時に、スポットの点も2倍にしてピン位置を示す */
.factory-pin .spot-dot { transition: transform .15s ease-out; }
.factory-pin:hover .spot-dot, .factory-pin:focus-visible .spot-dot { transform: scale(2); }

#map { position: fixed; inset: 0; }
.site-header { text-align: left; }
.site-nav a { text-decoration: none; }
.spot-name { box-shadow: none; }
.spot-line { transition: transform 600ms ease-in-out, width 600ms ease-in-out; }
.spot-name { transition: transform 600ms ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .spot-line, .spot-name { transition: none; }
}

/* Keep the map view clear; navigation and gesture controls remain available. */
#show-all, #map-status, .leaflet-control-zoom, .fixed-bottom-nav {
  display: none !important;
}
/* Loading errors remain visible even though the normal company count is hidden. */
#map-status.is-error { display: block !important; }

.map-company-frame { display: block; width: 100%; height: 900px; border: 0; background: white; }
.map-dates { position: fixed; inset: auto 0 0; z-index: 1000; padding: 90px 0 max(18px, env(safe-area-inset-bottom)); background: linear-gradient(to top, rgb(0 32 90 / 100%) 0%, rgb(0 32 90 / 75%) 45%, rgb(0 32 90 / 0%) 100%); color: #fff; pointer-events: none; }
.map-dates__controls { display: flex; align-items: center; gap: 8px; width: 100%; pointer-events: auto; }
.map-dates__track { flex: 1; min-width: 0; overflow: hidden; padding: 8px 0; cursor: grab; user-select: none; -webkit-user-select: none; }
.map-dates__track .swiper-wrapper { display: flex; align-items: center; width: max-content; padding: 0 10vw; will-change: transform; }
.map-dates__track .swiper-slide { flex: 0 0 auto; width: auto; }
.map-dates__track.is-dragging, .map-dates__track.is-dragging button { cursor: grabbing; }
.map-dates__track::-webkit-scrollbar { display: none; }
.map-dates button { appearance: none; border: 0; border-radius: 0; background: none; color: #fff; cursor: pointer; font: inherit; }
.map-dates__date { flex: 0 0 auto; padding: 10px 0; font-size: 18px !important; font-weight: 600 !important; white-space: nowrap; scroll-snap-align: center; opacity: .65; border-bottom: 2px solid transparent !important; }
.map-dates__date[aria-pressed="true"] { opacity: 1; border-bottom-color: #fff !important; }
.map-dates__date:hover { opacity: 1; }
.map-dates__separator { flex: 0 0 auto; opacity: .5; }
.map-dates button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 720px) { .map-dates__date { font-size: 16px !important; } }
.map-company-modal .modalSheet__inner { padding: 0; }
.map-company-modal .modalSheet__closeWrap { position: sticky; top: 20px; height: 0; margin: 0 20px 0 0; transform: translateY(20px); z-index: 3; }