.ol-popup {
      display: none; 
      position: absolute;
      background-color: white;
      -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
      -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
      filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
      /* padding: 15px; */
      padding: 0px;
      /* border-radius: 10px; */
      border: 1px solid #cccccc;
      bottom: 12px;
      left: -50px;
      z-index: 100;
    }

    .ol-popup:after, .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    }
    .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    }

    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
       top: 3px;
      right: 6px;
      /*
      top: 2px;
      right: 8px;
      */
    }
    .ol-popup-closer:after {
      /* content: url("../img/btn_close.png"); */
      position: absolute;
      top:0px;
      right:0px;
    }

      



/* zoomボタン */
.ol-zoom {
  left:unset;
  top:unset;
  bottom: 3.0em!important;
  right: 0.5em!important; 
  /* bottom: 2.5em!important; */
}
@media  (max-width: 512px) {
  .ol-zoom {
    bottom: 4.5em!important;
  }
}

.ol-attribution {
  bottom:unset;
  top:0.5em;
}

.ol-overviewmap {
  bottom:unset;
  top: 0.5em;
  /* right:0.5em; */
}
.ol-overviewmap:not(.ol-collapsed) {
  background: rgba(192,192,192,1.0);
}
/*
.ol-attribution {
  left:0.5em;
  top:5em;
}

.ol-attribution {
  right:0.5em;
  bottom:6.7em;
}
    .ol-attribution ul{
        margin:0;
        padding:0 .5em;
        font-size:0.75em;
        line-height:1.375em;
        color:#000;
        text-shadow:0 0 2px #fff;
        max-width:calc(100%)
    }
*/

/*
.ol-zoom-in { font-size: 1.0em!important; }
.ol-zoom-out { font-size: 1.0em!important; }
*/

/* ol-ext geobutton */
.ol-control.ol-geobt {
  bottom:6em;
}

.ol-layerswitcher
{
  right: 15em!important;
}

.center-scope {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; 
  height: 50px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.center-scope .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #000000e0;
  /* 視認性を確保する白いフチ */
  box-shadow: 0 0 0 0.5px white, inset 0 0 0 0.5px white;
  box-sizing: border-box;
}

/* 外側：50px（最も太い） */
.center-scope .outer {
  width: 50px;
  height: 50px;
  border-width: 2.5px;
  background-color: #6f7b8730;
}

/* 中間：34px（極細） */
.center-scope .middle {
  width: 40px;
  height: 40px;
  border-width: 0.5px;
}

/* 内側：18px（中間の太さ） */
.center-scope .inner {
  width: 24px;
  height: 24px;
  border-width: 1.2px;
}

/* 中心十字線：短く精密に */
/* 十字線コンテナ：中心に配置 */
.center-scope .cross-reticle {
  position: absolute;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 横線：中心に1pxの隙間を作る */
.center-scope .cross-reticle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1.5px; /* 線の太さ */
  /* 46%から54%の間を透明(transparent)にすることで中心に約1px強の穴を開ける */
  background: linear-gradient(90deg, 
    black 0%, black 45%, 
    transparent 45%, transparent 55%, 
    black 55%, black 100%);
  filter: drop-shadow(0 0 1px white);
}

/* 縦線：中心に1pxの隙間を作る */
.center-scope .cross-reticle::after {
  content: "";
  position: absolute;
  width: 1.5px; /* 線の太さ */
  height: 100%;
  /* 46%から54%の間を透明(transparent)にする */
  background: linear-gradient(0deg, 
    black 0%, black 40%, 
    transparent 40%, transparent 60%, 
    black 60%, black 100%);
  filter: drop-shadow(0 0 1px white);
}