.svg-areamap-wrapper {
  position: relative;
}

.svg-areamap-wrapper svg {
  /* visibility: hidden; */
  position: relative;
  z-index: 20;
}

.svg-areamap-wrapper svg a:is(.pending, .sold) {
  pointer-events: none;
}

/* .svg-areamap-wrapper svg>path:first-of-type {
        fill: red;
        opacity: .5;
    } */

.svg-areamap-wrapper svg a path {
  fill: rgba(193, 231, 210, 1);
}

.svg-areamap-wrapper svg a:not(.is-not-sale) path {
  fill: rgb(228, 232, 233);
}

.svg-areamap-wrapper svg a:not(.pending, .sold) path {
  fill: rgba(193, 231, 210, 0);
}

.svg-areamap-wrapper svg a:not(.is-not-sale):not(.pending, .sold) path {
  fill: rgba(255, 253, 189, 0);
}

.svg-areamap-wrapper svg a:not(.pending, .sold):hover path {
  fill: rgba(0, 0, 0, 0.2);
}

.svg-areamap-wrapper img {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
}

.svg-areamap-wrapper img + img {
  z-index: 25;
}

.svg-areamap-wrapper svg {
  position: relative;
  z-index: 20;
}

#planningMap {
  display: none;
}

.box-navi {
  position: fixed;
  top: 0;
  right: 0;
  pointer-events: auto;
}

.sp {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block !important;
  }
  /* .box-navi{
            width: 70px;
        } */
}