html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0 !important;
  left: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.6);
  width: 100%;
  margin: 0 !important;
}

.head h1 {
  font-size: 1.5em;
  color: #fff;
  padding: 0;
  margin: 0;
  margin-left: 0.5em;
}

.head p a {
  color: #fff;
  padding: 0;
  margin: 0;
  margin-right: 0.5em;
}
/*
.leaflet-top {
  top: 7%;
}
*/
@media screen and (max-width: 450px) {
  .head {
    display: block;
    height: auto;
    margin-top: 0 !important;
  }

  .head h1 {
    margin-top: 1%;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .head p {
    margin-top: 0;
    margin-left: 0.8em;
  }

  .leaflet-top {
    top: 15%;
  }

}

#map_container {
    /*position:absolute;
    top:0; left:0; right:0; bottom:0;*/
  width: 100vw;
  height: 100vh;
}

.leaflet-marker-icon {
  transition: .2s;
  border-radius: 50%;
}

/*マーカーの色のCSS*/
.color1 {
  background-color: #ccc;
  border:6px solid lightgreen;
  object-fit: cover;
  box-shadow: 1px 1px 1px 1px #fff,
             -1px -1px 1px 1px #fff,
              1px -1px 1px 1px #fff,
             -1px 1px 1px 1px #fff,
              1px 1px 1px 1px #fff inset,
             -1px -1px 1px 1px #fff inset,
              1px -1px 1px 1px #fff inset,
             -1px 1px 1px 1px #fff inset;

}
.color2 {
  background-color: #ccc;
  border:6px solid green;
  object-fit: cover;
  box-shadow: 1px 1px 1px 1px #fff,
             -1px -1px 1px 1px #fff,
              1px -1px 1px 1px #fff,
             -1px 1px 1px 1px #fff,
              1px 1px 1px 1px #fff inset,
             -1px -1px 1px 1px #fff inset,
              1px -1px 1px 1px #fff inset,
             -1px 1px 1px 1px #fff inset;


}
.color3 {
  background-color: #ccc;
  border:6px solid purple;
  object-fit: cover;
  box-shadow: 1px 1px 1px 1px #fff,
             -1px -1px 1px 1px #fff,
              1px -1px 1px 1px #fff,
             -1px 1px 1px 1px #fff,
              1px 1px 1px 1px #fff inset,
             -1px -1px 1px 1px #fff inset,
              1px -1px 1px 1px #fff inset,
             -1px 1px 1px 1px #fff inset;

}

.color4 {
  background-color: #ccc;
  border:6px solid orange;
  object-fit: cover;
  box-shadow: 1px 1px 1px 1px #fff,
             -1px -1px 1px 1px #fff,
              1px -1px 1px 1px #fff,
             -1px 1px 1px 1px #fff,
              1px 1px 1px 1px #fff inset,
             -1px -1px 1px 1px #fff inset,
              1px -1px 1px 1px #fff inset,
             -1px 1px 1px 1px #fff inset;

}

.color5 {
  background-color: #ccc;
  border:6px solid rgb(255, 39, 179);
  object-fit: cover;
  box-shadow: 1px 1px 1px 1px #fff,
             -1px -1px 1px 1px #fff,
              1px -1px 1px 1px #fff,
             -1px 1px 1px 1px #fff,
              1px 1px 1px 1px #fff inset,
             -1px -1px 1px 1px #fff inset,
              1px -1px 1px 1px #fff inset,
             -1px 1px 1px 1px #fff inset;

}

.color6 {
  background-color: #ccc;
  border:6px solid aqua;
  object-fit: cover;
  box-shadow: 1px 1px 1px 1px #fff,
             -1px -1px 1px 1px #fff,
              1px -1px 1px 1px #fff,
             -1px 1px 1px 1px #fff,
              1px 1px 1px 1px #fff inset,
             -1px -1px 1px 1px #fff inset,
              1px -1px 1px 1px #fff inset,
             -1px 1px 1px 1px #fff inset;

}

.color7 {
  background-color: #ccc;
  border:6px solid yellow;
  object-fit: cover;
  box-shadow: 1px 1px 1px 1px #fff,
             -1px -1px 1px 1px #fff,
              1px -1px 1px 1px #fff,
             -1px 1px 1px 1px #fff,
              1px 1px 1px 1px #fff inset,
             -1px -1px 1px 1px #fff inset,
              1px -1px 1px 1px #fff inset,
             -1px 1px 1px 1px #fff inset;

}


.color1:hover,
.color1:focus,
.color2:hover,
.color2:focus,
.color3:hover,
.color3:focus,
.color4:hover,
.color4:focus,
.color5:hover,
.color5:focus,
.color6:hover,
.color6:focus,
.color7:hover,
.color7:focus{
  width: 90px!important;
  height: 90px!important;
  margin-left: -45px!important;
  margin-top: -45px!important;
}

/*ポップアップの中身*/
.popup-title {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 0!important;
}

.popup-address {
  font-size: 1.1em;
  margin-top: 0!important;
}

/*カテゴリチェックボックスのマル印*/
.circle1 {
  position: relative;
  padding-left: 1.5em;
}
.circle1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border: 4px solid green;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px #eee,
             -1px -1px 1px 1px #eee,
              1px -1px 1px 1px #eee,
             -1px 1px 1px 1px #eee,
              1px 1px 1px 1px #eee inset,
             -1px -1px 1px 1px #eee inset,
              1px -1px 1px 1px #eee inset,
             -1px 1px 1px 1px #eee inset;
}

.circle2 {
  position: relative;
  padding-left: 1.5em;
}

.circle2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border: 4px solid lightgreen;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px #eee,
             -1px -1px 1px 1px #eee,
              1px -1px 1px 1px #eee,
             -1px 1px 1px 1px #eee,
              1px 1px 1px 1px #eee inset,
             -1px -1px 1px 1px #eee inset,
              1px -1px 1px 1px #eee inset,
             -1px 1px 1px 1px #eee inset;
}

.circle3 {
  position: relative;
  padding-left: 1.5em;
}

.circle3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border: 4px solid purple;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px #eee,
             -1px -1px 1px 1px #eee,
              1px -1px 1px 1px #eee,
             -1px 1px 1px 1px #eee,
              1px 1px 1px 1px #eee inset,
             -1px -1px 1px 1px #eee inset,
              1px -1px 1px 1px #eee inset,
             -1px 1px 1px 1px #eee inset;
}

.circle4 {
  position: relative;
  padding-left: 1.5em;
}

.circle4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border: 4px solid orange;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px #eee,
             -1px -1px 1px 1px #eee,
              1px -1px 1px 1px #eee,
             -1px 1px 1px 1px #eee,
              1px 1px 1px 1px #eee inset,
             -1px -1px 1px 1px #eee inset,
              1px -1px 1px 1px #eee inset,
             -1px 1px 1px 1px #eee inset;

}

.circle5 {
  position: relative;
  padding-left: 1.5em;
}

.circle5::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border: 4px solid rgb(255, 39, 179);
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px #eee,
             -1px -1px 1px 1px #eee,
              1px -1px 1px 1px #eee,
             -1px 1px 1px 1px #eee,
              1px 1px 1px 1px #eee inset,
             -1px -1px 1px 1px #eee inset,
              1px -1px 1px 1px #eee inset,
             -1px 1px 1px 1px #eee inset;
}

.circle6 {
  position: relative;
  padding-left: 1.5em;
}

.circle6::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border: 4px solid aqua;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px #eee,
             -1px -1px 1px 1px #eee,
              1px -1px 1px 1px #eee,
             -1px 1px 1px 1px #eee,
              1px 1px 1px 1px #eee inset,
             -1px -1px 1px 1px #eee inset,
              1px -1px 1px 1px #eee inset,
             -1px 1px 1px 1px #eee inset;
}

.circle7 {
  position: relative;
  padding-left: 1.5em;
}

.circle7::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border: 4px solid yellow;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px #eee,
             -1px -1px 1px 1px #eee,
              1px -1px 1px 1px #eee,
             -1px 1px 1px 1px #eee,
              1px 1px 1px 1px #eee inset,
             -1px -1px 1px 1px #eee inset,
              1px -1px 1px 1px #eee inset,
             -1px 1px 1px 1px #eee inset;
}

/* 右上のコントロールボックス自体を、要素が縦に並ぶように設定 */
.leaflet-top.leaflet-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右寄せ */
    gap: 10px;            /* ボタン間の隙間（お好みで調整） */
}

/* Changeボタン専用スタイル */
.leaflet-control-change-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px !important;   /* ご指定の幅 */
    height: 30px !important;  /* ご指定の高さ */
    background-color: #ffffff;
    color: #333333;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px; /* 少し小さめにすると収まりが良いです */
    border-radius: 4px;
    transition: background-color 0.2s;
}

.leaflet-control-change-button:hover {
    background-color: #f4f4f4;
    color: #000;
    text-decoration: none;
}

/* 右上のレイヤーコントロールが開いた時に重ならないよう、
   Leafletの標準コンテナが自動で位置調整してくれますが、
   もし余白が必要なら以下を調整してください */
.leaflet-top.leaflet-right .leaflet-control {
    margin-top: 10px; /* ボタン同士の間隔 */
}

/*使い方モーダル*/
/*地図のz-indexを下げる*/
/*これをしないとモーダル表示中もコントロールのパネルが上になってしまう*/
.leaflet-container {
  z-index:0;
}

.btn-wrap {
  position: absolute;
  top: 21%;
  left: 2%;
  width: 30%;
}

.btn-wrap button {
  max-width: 100%;
  background: #203f5c;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #fff;
  transition: .2s;
}

.btn-wrap button:hover {
  background: #fff;
  color: #000;
  border: 1px solid #203f5c;
}

.modal {
 display: none;
}

.modaal-content-container {
  padding-top: 2%;
}

.modal-title {
  margin-top: 0;
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
  border-bottom: 2px solid #203f5c;
}

.modal-caption {
  margin-bottom: 0;
  font-size: 1.1em;
  font-weight: bold;
}

.modal-text {
  margin-top: 0.5%;
  margin-bottom: 0.5%;
  text-indent: -1em;
  padding-left: 2em
}

.modal-text img {
  vertical-align: middle;
  margin: 0 0.2em;
}

.modal-img {
  width: 80%;
  margin: 0 auto;
}
.modal-img img {
  width: 35%;
}

@media screen and (max-width: 500px) {
  .modal-title {
    font-size: 1.2em;
  }

  .modal-img img {
    width: 100%;
  }

}

@media screen and (max-width: 400px) {
  .modal-title {
    font-size: 1.1em;
  }

  .modal-caption {
    font-size: 1.05em;
  }

}


/* 1. 右上のコントロールの位置調整 */
.leaflet-top.leaflet-right {
    top: 70px !important; 
}

/* 2. 左上のズームコントロールの位置調整 */
.leaflet-top.leaflet-left {
    top: 70px !important; 
}

/* 3. 重なり順（z-index）の制御 */
.head {
    position: relative;
    z-index: 1001; /* Leafletのコントロール(z-index: 1000)より上に設定 */
}

/* モバイル対応：画面が小さい時はヘッダーが低くなる場合など */
@media screen and (max-width: 450px) {
    .leaflet-top.leaflet-right,
    .leaflet-top.leaflet-left {
        top: 60px !important; 
    }
}

@media screen and (max-width: 450px) {
    /* レイヤーリストのコンテナ制限 */
    .leaflet-control-layers-list {
        max-width: 200px !important; /* 最大幅を200pxに制限 */
        max-height: 300px !important; /* 縦も長すぎると操作しにくいので制限（任意） */
        overflow-y: auto !important;  /* 縦に長い場合はスクロールさせる */
        overflow-x: hidden !important; /* 横スクロールは防ぐ */
        padding-right: 5px;           /* スクロールバーとの重なり防止 */
    }

    /* リスト内のテキストが長い場合に折り返す、または省略する設定 */
    .leaflet-control-layers-selector + span {
        display: inline-block;
        max-width: 160px;            /* チェックボックス分を引いた幅 */
        vertical-align: middle;
        word-wrap: break-word;       /* 長い単語を折り返す */
        font-size: 11px;             /* モバイル用に少し小さく */
    }
    
    /* レイヤーコントロール自体のマージン調整（右端に寄りすぎないように） */
    .leaflet-control-layers {
        margin-right: 10px !important;
    }
}

/* ===================================
   Header + Leaflet controls layout (cleaned)
   =================================== */

:root{
  --headH-pc: 56px;   /* PC: 1行想定 */
  --headH-sp: 86px;   /* SP: 2行想定 */
  --headH-se: 44px;   /* iPhone SE: 1段固定 */

  --ctrlGap: 8px;     /* ヘッダーとコントロールの隙間 */
  --zoomHeight: 70px; /* ズーム(＋−)コントロール高さ目安 */
  --gap: 10px;        /* ズームと「使い方」の間隔 */
}

/* ===== head（共通） ===== */
.head{
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  background: rgba(0,0,0,0.6);
  padding-top: env(safe-area-inset-top);

  height: calc(var(--headH-pc) + env(safe-area-inset-top));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head h1,
.head p{
  margin: 0;
}

/* ===== SP（2段） ===== */
@media screen and (max-width: 450px){
  .head{
    height: calc(var(--headH-sp) + env(safe-area-inset-top));
    display: block;
  }

  .head h1{
    padding: 6px 0 0;
    margin-left: 0.5em;
  }

  .head p{
    margin-left: 0.8em;
    padding: 2px 0 8px;
  }
}

/* ===== Leaflet コントロール（ヘッダー直下） ===== */
.leaflet-top{
  top: calc(var(--headH-pc) + env(safe-area-inset-top) + var(--ctrlGap)) !important;
}

@media screen and (max-width: 450px){
  .leaflet-top{
    top: calc(var(--headH-sp) + env(safe-area-inset-top) + var(--ctrlGap)) !important;
  }
}

/* ===== 「使い方」ボタン：ズームの下（全画面共通） ===== */
.btn-wrap{
  position: fixed;
  left: 10px;
  z-index: 1050;
  width: auto;

  top: calc(
    var(--headH-pc)
    + env(safe-area-inset-top)
    + var(--ctrlGap)
    + var(--zoomHeight)
    + var(--gap)
  );
}

@media screen and (max-width: 450px){
  .btn-wrap{
    top: calc(
      var(--headH-sp)
      + env(safe-area-inset-top)
      + var(--ctrlGap)
      + var(--zoomHeight)
      + var(--gap)
    );
  }
}

/* ===== iPhone SE（1段固定・タイトル省略なし、リンクは…） ===== */
@media screen and (max-width: 375px){

  .head{
    height: calc(var(--headH-se) + env(safe-area-inset-top));
    padding-left: 10px;
    padding-right: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* タイトルは省略しない（1行固定） */
  .head h1{
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  /* リンクは収まらなければ … */
  .head p{
    min-width: 0; /* flex内の省略を効かせる */
  }
  .head p a{
    display: block;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48vw;
  }

  /* Leaflet + 使い方：SEのヘッダー高さに追従 */
  .leaflet-top{
    top: calc(var(--headH-se) + env(safe-area-inset-top) + var(--ctrlGap)) !important;
  }

  .btn-wrap{
    top: calc(
      var(--headH-se)
      + env(safe-area-inset-top)
      + var(--ctrlGap)
      + var(--zoomHeight)
      + var(--gap)
    );
  }
}