@import url("https://unpkg.com/leaflet@1.9.4/dist/leaflet.css");

/* マップの外枠（コンテナ）の設定 */
#map {
  width: 95%;           /* 基本は幅いっぱいに広げる（左右に少し余白） */
  max-width: 800px;     /* PCなどの大きな画面で広がりすぎないように制限 */
  height: 70vh;         /* 画面の高さの70%に設定 */
  margin: 20px auto;    /* 上下に余白を作り、左右中央に配置 */
  border: 2px solid #333;
  box-sizing: border-box; /* 枠線を含めたサイズ計算にする（崩れ防止） */
}

/* スマホ向けの調整（画面幅が768px以下の場合） */
@media (max-width: 768px) {
  #map {
    width: 100%;        /* スマホでは横幅いっぱいにする */
    height: 60vh;       /* スマホでは少し高さを抑えて操作しやすくする */
    margin: 10px 0;     /* 上下の余白を詰め、左右は0に */
    border-left: none;  /* 左右の枠線を消してスッキリ見せる */
    border-right: none;
  }
}

/*サムネイルクリック*/
.clickMap {
    display: inline-block; /* Edgeでの判定を安定させる */
    cursor: pointer !important;
}

.clickMap:hover {
    opacity: 0.7; /* 重ねた時に少し薄くする */
    outline: 3px solid red; /*赤枠*/
}

.clickMap:active {
    transform: scale(0.95); /* クリックした瞬間に少し凹ませる */
}