html,
body {
  height: 100%;
  margin: 0;
  background: #333;
}

#map {
  max-width: 100%;
  height: 100%;
  background: #333;
  /* user-select: none; */
}

.leaflet-control-attribution > a[href*="leaflet"],
.leaflet-control-attribution > span {
  display: none;
}

.leaflet-control-attribution.leaflet-control {
  background: #333;
}

.leaflet-control-attribution.leaflet-control a {
  color: #ddd;
}

.leaflet-bar.leaflet-control-zoom a:any-link {
  background-color: #445;
  transition: 300ms;
  color: #fff;
}

.leaflet-bar.leaflet-control-zoom a:hover {
  background-color: #334;
}

.leaflet-marker-icon {
  filter: drop-shadow(0 0 2px #888);
  transition: 300ms;
}

.icon-location {
  z-index: 9999 !important;
}

[class*="zoom-level-14"] .leaflet-marker-icon {
  display: none;
}

[class*="zoom-level-15"] .leaflet-marker-icon {
  width: 24px !important;
  height: 24px !important;
}

[class*="zoom-level-17"] .leaflet-marker-icon,
[class*="zoom-level-18"] .leaflet-marker-icon {
  width: 48px !important;
  height: 48px !important;
}

.leaflet-tile.leaflet-tile-loaded {
  background: #7baece;
}

.leaflet-control-layers.leaflet-control {
  background: #445;
  color: #fff;
}

/* ポップアップ */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #333;
  color: #fff;
}

.leaflet-popup-content:has(img) {
  width: 480px;
}

.leaflet-popup-content h2 {
  font-size: 1rem;
}

.leaflet-popup-content img {
  width: 100%;
  max-width: 200px;
  max-height: 200px;
  margin: auto;
  display: block;
  /* aspect-ratio: 16/9; */
  /* object-fit: cover; */
}

/* マップごとの設定 */
.stgr-view,
.stgr-view .leaflet-tile.leaflet-tile-loaded {
  background: #7baece !important;
}

/* エリア名 */
.area-name {
  font-family: "Freeman", sans-serif;
  font-size: 0.9rem;
  color: #222;
  z-index: 99;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 2px 2px 10px #fff, -2px 2px 10px #fff, 2px -2px 10px #fff,
    -2px -2px 10px #fff;
}

/* アイコン別 */
.icon-hydrant {
  z-index: 999 !important;
}

/* 現在地 */
.current-position {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: #333;
  color: #fff;
  box-shadow: none;
  padding: 6px 8px;
  border: 1px solid #222;
  border-radius: 4px;
  cursor: pointer;
}