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

@font-face {
  font-family: "Freeman";
  font-weight: 400;
  font-style: normal;
  src: url("../assets/Freeman-Regular.ttf") format("truetype");
  font-display: swap;
}

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

.leaflet-control-attribution.leaflet-control {
  /* display: 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;
}

/*3以上で表示*/
.zoom-level-3 .leaflet-marker-pane,
.zoom-level-3 .leaflet-marker-shadow {
  /* display: none; */
}

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

.zoom-level-3 .gang-marker,
[class*="zoom-level-2.5"] .gang-marker {
  display: none;
}

.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: 360px;
  margin: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

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

.spoiler-view,
.spoiler-view .leaflet-tile.leaflet-tile-loaded {
  background: #384850 !important;
}

/* ギャング非表示 */
:has(.niji-view, .postal-view) .gang-marker {
  display: none;
}

.spoiler-view .default-marker {
  display: none;
}

/* 一時非表示にする */
/* .gang-marker {
  display: none;
} */

/* ポリゴン */
:has(.niji-view, .postal-view) svg path {
  display: none;
}

.spoiler-view path {
  /* transition: 300ms; */
  stroke-opacity: 0.3;
}

.spoiler-view path:hover {
  opacity: 0.6;
}

:has(.niji-view, .postal-view) .area-name {
  display: none;
}

/* エリア名 */
.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;
}

.zoom-level-4 .area-name h3 {
  /* transform: translateX(-50px); */
}

:is([class*="zoom-level-2"], .zoom-level-3, .zoom-level-6, .zoom-level-7)
  .area-name {
  display: none;
}

.zoom-level-5 .area-name {
  font-size: 1.1rem;
}

/* .area-gbc {
  color: #80b6ca;
} */

.area-neutral {
}

/* ギャングレイヤー legend */

#legend {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  height: fit-content;
  width: fit-content;
  backdrop-filter: blur(4px);
}

@media (width < 800px) {
  /*スマホ*/
  #legend {
    left: 2%;
    bottom: 12%;
  }
}

@media (width > 800px) {
  #legend {
    left: 2%;
    bottom: 12%;
  }
}

#legend ul {
  list-style-type: none;
  color: #fff;
  padding: 0 1rem;
}

#legend ul li::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  content: "";
  margin-right: 0.25rem;
}