@charset "UTF-8";
.o-map__sign {
  margin-bottom: 46px;
}

.map_wrap {
  width: 81%;
  min-width: 490px;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.map_wrap .map_bg {
  width: 100%;
  height: 100%;
  aspect-ratio: 58 /45;
  border-radius: 31px;
  background-color: #fff;
  overflow: clip;
  position: relative;
  z-index: -1;
}

.map_spot {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.map_spot .spot_num {
  cursor: pointer;
  position: absolute;
  z-index: 0;
}

.spot-pin_wrap .spot-icon {
  width: 16.3%;
  height: auto;
  position: absolute;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  transition: all 0.7s;
}
.spot-pin_wrap .spot-icon.active {
  visibility: visible;
  opacity: 1;
  display: block;
  z-index: 3;
}

/*参加店*/
.shop-icon-1 {
  top: 33.5%;
  left: 46%;
}
.shop-icon-2 {
  top: 67.5%;
  left: 52.2%;
}
.shop-icon-3 {
  top: 48.5%;
  left: 19.4%;
}
.shop-icon-4 {
  top: 36.8%;
  left: 39.5%;
}
.shop-icon-5 {
  top: 46.8%;
  left: 25.5%;
}
.shop-icon-6 {
  top: 3.8%;
  left: 19.5%;
}
.shop-icon-7 {
  top: -0.2%;
  left: 15.5%;
}
.shop-icon-8 {
  top: 53.8%;
  left: 60%;
}
.shop-icon-9 {
  top: 46.8%;
  left: 37.2%;
}
.shop-icon-10 {
  top: 30.8%;
  left: 33.2%;
}
.shop-icon-11 {
  top: 42.8%;
  left: 36.2%;
}
.shop-icon-12 {
  top: 48.8%;
  left: 30.5%;
}
.shop-icon-13 {
  top: 36.8%;
  left: 31.5%;
}
.shop-icon-14 {
  top: 10.8%;
  left: 10.7%;
}

/*絶景スポット*/
.spot-icon-a {
  top: 20.8%;
  left: 9%;
}
.spot-icon-b {
  top: 27.8%;
  left: 37%;
}
.spot-icon-c {
  top: 17.5%;
  left: 15.6%;
}
.spot-icon-d {
  top: 48.8%;
  left: 64%;
}

.spot-icon-e {
  top: 60.5%;
  left: 49.2%;
}
.spot-icon-f {
  top: 65.5%;
  left: 29.2%;
}
.spot-icon-g {
  top: 52.5%;
  left: 33%;
}
.spot-icon-h {
  top: 8.5%;
  left: 0.2%;
}

.spot-icon-i {
  top: 7.8%;
  left: 17.7%;
}
.spot-icon-j {
  top: 35%;
  left: 17.4%;
}
.spot-icon-k {
  top: -0.2%;
  left: 0.7%;
}
.spot-icon-l {
  top: 26.8%;
  left: 50.7%;
}
@media screen and (max-width: 1220px) {
}

@media screen and (max-width: 768px) {
  .map_spot .spot .spot-icon {
    display: none;
  }
  .map_spot .spot.active .spot-icon {
    display: block;
  }
}