/* モバイルデバイスでのレイアウト */
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 480px) {
  body {
    flex-direction: row;
  }
}

.spinner-overlay {
  position: absolute;
  width: 100%; /* 親要素の幅に合わせる */
  height: calc(100vh - 56px); /* ヘッダーの高さを引く */
  top: 0; /* 親要素の上部から配置 */
  left: 0; /* 親要素の左端から配置 */
  display: flex;
  justify-content: center; /* 横方向の中央に配置 */
  align-items: center; /* 縦方向の中央に配置 */
  pointer-events: none; /* クリックなどを透過させる */
}

.folium-map {
  position: relative;
  /* 初期状態での透過度を50%に設定 */
  opacity: 0.5;
  transition: opacity 0.5s ease; /* 透過度の変化にアニメーションを加える */
  height: calc(100vh - 56px); /* ヘッダーの高さを引く */
}


/* 初期スタイル：通常モード */
.leaflet-pane.leaflet-tile-pane {
  filter: none;
  opacity: 1;
  transition: all 0.3s ease;
}

/* 透過モード用クラス */
.leaflet-tile-pane.transparent-mode {
  filter: none;
  opacity: 0.5;
}

/* ダークモード用クラス */
.leaflet-tile-pane.dark-mode {
  filter: saturate(0.1) invert(1) brightness(1.1);
  opacity: 1;
}


.popup_content_featured_image {
	max-height: 200px;
}


/* アイコンの影 */
img[class*="icon-figure-"] {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* 正円 */
.icon-figure-religion {
  border-radius: 50%;
}

/* 正方形の上半分を三角形にしたもの */
.icon-figure-dwelling {
  clip-path: polygon(0% 100%, 0% 50%, 50% 0%, 100% 50%, 100% 100%);
}

/* 正方形 */
.icon-figure-public {
}

/* 星形 */
.icon-figure-infrastructure {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 正三角形 */
.icon-figure-industry {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 正六角形 */
.icon-figure-sonota {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}