@charset "utf-8";

:root {
  --accent-color: #008fdb;
}

/* ----- common ----- */
.sec {
  padding: 40px 4% 100px;
  background-color: #f7f9fa;
}
.sec-ttl {
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
}

@media screen and (min-width: 768px) {
  .sec {
    margin-top: 80px;
    padding: 50px 30px 120px;
  }
  .sec-inner {
    margin: auto;
    max-width: 1000px;
  }
  .sec-ttl {
    font-size: 4rem;
  }
}

/* ----- map ----- */
/* tab */
.mapTab {
  margin-top: 20px;
  display: flex;
  border-bottom: 1px solid #dbdbdb;
}
.mapTab li {
  width: calc(100% / 3);
  padding: 20px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
}
/* tab active */
.mapTab li.is-show {
  position: relative;
  color: var(--accent-color);
}
.mapTab li.is-show::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background-color: var(--accent-color);
}
@media screen and (min-width: 768px) {
  .mapTab {
    margin-top: 40px;
  }
  .mapTab li {
    padding: 20px;
    font-size: 2.4rem;
  }
}

.mapBox {
  margin-top: 30px;
  padding: 15px 0 30px;
  background-color: #e1f1fa;
  border-radius: 15px;
}
.mapImage {
  position: relative;
  padding: 0 15px;
  width: 100%;
}
.mapStore {
  position: absolute;
  top: 0;
  left: 15px;
  display: block;
  width: calc(100% - 30px);
  height: 100%;
}
.mapStore li {
  position: absolute;
  z-index: 1;
  transition: transform 0.3s;
}
.mapStore li.is-active {
  transform: scale(2);
  z-index: 2;
}
@media (hover: hover) {
  .mapStore li:hover {
    transform: scale(2);
    z-index: 2;
  }
}
.mapStore li a {
  display: block;
}
.mapStore li a img {
  display: block;
}
@media screen and (min-width: 768px) {
  .mapBox {
    padding: 30px 0;
    border-radius: 30px;
  }
  .mapImage {
    margin: 0 auto;
    padding: 0 30px;
    max-width: 500px;
  }
}
/* 1F FIELD LEVEL */
.mapStore li._6 {
  top: 3%;
  left: 13%;
  width: 10%;
}
.mapStore li._5 {
  top: 3%;
  left: 27%;
  width: 10%;
}
.mapStore li._7 {
  top: 3%;
  left: 41%;
  width: 10%;
}
.mapStore li._24 {
  top: 3%;
  right: 35%;
  width: 10%;
}
.mapStore li._26 {
  top: 3%;
  right: 24%;
  width: 10%;
}
.mapStore li._67 {
  top: 3%;
  right: 13%;
  width: 10%;
}
.mapStore li._w1 {
  top: 10%;
  right: 5%;
  width: 11%;
}
/* .mapStore li._w16 {
  bottom: 35%;
  right: -8%;
  width: 13%;
} */
.mapStore li._w7 {
  bottom: 35%;
  right: -8%;
  width: 11%;
}
.mapStore li._p1 {
  bottom: 14.5%;
  right: 1%;
  width: 11%;
}
.mapStore li._w25 {
  bottom: 28.25%;
  right: -8%;
  width: 11%;
}
.mapStore li._w2 {
  bottom: 21.5%;
  right: -2%;
  width: 11%;
}
.mapStore li._91 {
  top: 36%;
  right: -2%;
  width: 7%;
}
.mapStore li._38 {
  top: 33%;
  right: 33%;
  width: 7%;
}
.mapStore li._39 {
  top: 38%;
  right: 34%;
  width: 6%;
}
.mapStore li._40 {
  top: 44%;
  right: 32%;
  width: 9%;
}
.mapStore li._28 {
  top: 50%;
  right: 32%;
  width: 9%;
}
.mapStore li._41 {
  top: 56%;
  right: 32%;
  width: 10%;
}
.mapStore li._35 {
  bottom: 4%;
  left: 28%;
  width: 10%;
}
.mapStore li._27 {
  bottom: 5%;
  left: 13%;
  width: 11%;
}
.mapStore li._36 {
  bottom: 16%;
  left: 4%;
  width: 11%;
}
.mapStore li._w17 {
  bottom: 29%;
  left: -1%;
  width: 12%;
}
.mapStore li._w15 {
  top: 43%;
  left: -4%;
  width: 11%;
}

/* 2F MAIN LEVEL */
.mapStore li._9 {
  top: 0%;
  left: 17%;
  width: 11%;
}
.mapStore li._42 {
  top: 22%;
  left: 27%;
  width: 11%;
}
.mapStore li._53 {
  top: 2%;
  right: 16%;
  width: 10%;
}
.mapStore li._37 {
  top: 5%;
  right: 4%;
  width: 10%;
}
.mapStore li._w15-02 {
  top: 19%;
  right: -2%;
  width: 11%;
}
.mapStore li._72 {
  top: 28%;
  right: -1%;
  width: 9%;
}
.mapStore li._w18 {
  top: 28%;
  right: 26%;
  width: 7%;
}
.mapStore li._w6 {
  top: 35%;
  right: 26%;
  width: 10%;
}
.mapStore li._43 {
  bottom: 25%;
  right: 6%;
  width: 12%;
}
.mapStore li._68 {
  bottom: 17%;
  right: 10%;
  width: 8%;
}
.mapStore li._popupstore {
  bottom: 9%;
  right: 16%;
  width: 11%;
}
.mapStore li._51 {
  bottom: 32%;
  right: 26%;
  width: 10%;
}
.mapStore li._55 {
  bottom: 32%;
  right: 38%;
  width: 11%;
}
.mapStore li._30 {
  bottom: 14%;
  right: 30%;
  width: 19%;
}
.mapStore li._64 {
  bottom: 23%;
  left: 36%;
  width: 10%;
}
.mapStore li._56 {
  bottom: 7%;
  left: 50%;
  width: 10%;
}
.mapStore li._65 {
  bottom: 7%;
  left: 39%;
  width: 10%;
}
.mapStore li._50 {
  bottom: 7%;
  left: 28%;
  width: 10%;
}
.mapStore li._54 {
  bottom: 30%;
  left: 33%;
  width: 10%;
}
.mapStore li._79 {
  bottom: 22%;
  left: -6%;
  width: 14%;
}
.mapStore li._88 {
  bottom: 5%;
  left: -3%;
  width: 12%;
}
.mapStore li._89 {
  bottom: 3%;
  left: -3%;
  width: 12%;
}
.mapStore li._90 {
  bottom: 16.5%;
  left: -4%;
  width: 12%;
}
.mapStore li._102 {
  bottom: 11%;
  left: -2%;
  width: 10%;
}
.mapStore li._103 {
  bottom: -1%;
  left: 10%;
  width: 10%;
}
.mapStore li._86 {
  bottom: 16%;
  left: -4%;
  width: 12%;
}
.mapStore li._87 {
  bottom: -1%;
  left: 23%;
  width: 8%;
}
.mapStore li._49 {
  bottom: 29%;
  left: -3%;
  width: 11%;
}
.mapStore li._52 {
  bottom: 36%;
  left: -3%;
  width: 11%;
}
.mapStore li._75 {
  bottom: 48%;
  left: -2%;
  width: 13%;
}
.mapStore li._48 {
  bottom: 47%;
  left: 17%;
  width: 11%;
}
.mapStore li._47 {
  bottom: 40%;
  left: 25%;
  width: 10%;
}
.mapStore li._31 {
  bottom: 37%;
  left: 36%;
  width: 11%;
}

/* 3F STAR LEVEL */
.mapStore li._w26 {
  top: 28%;
  right: 24%;
  width: 11%;
}
.mapStore li._w13 {
  top: 42%;
  right: 18%;
  width: 11%;
}
.mapStore li._w21 {
  top: 49%;
  right: 19%;
  width: 8%;
}
.mapStore li._w8 {
  top: 45%;
  right: 17%;
  width: 13%;
}
.mapStore li._58 {
  bottom: 18%;
  right: 3%;
  width: 11%;
}
.mapStore li._w9 {
  bottom: 11%;
  right: 7%;
  width: 11%;
}
.mapStore li._w22 {
  bottom: 8%;
  right: 8%;
  width: 9%;
}
.mapStore li._w20 {
  bottom: 25%;
  right: 41%;
  width: 8%;
}
.mapStore li._w10 {
  bottom: 8%;
  right: 23%;
  width: 11%;
}
.mapStore li._w11 {
  bottom: 5%;
  right: 37%;
  width: 10%;
}
.mapStore li._w12 {
  bottom: 5%;
  right: 48%;
  width: 10%;
}
.mapStore li._57 {
  bottom: 5%;
  left: 26%;
  width: 10%;
}
.mapStore li._w19 {
  top: 41%;
  right: 19%;
  width: 8%;
}
.mapStore li._w24 {
  top: 49%;
  right: 19%;
  width: 11%;
}
.mapStore li._29 {
  bottom: 7%;
  left: 11%;
  width: 11%;
}
.mapStore li._w14 {
  bottom: 32%;
  left: 37%;
  width: 13%;
}
.mapStore li._32 {
  bottom: 15%;
  left: 3%;
  width: 11%;
}
.mapStore li._46 {
  bottom: 43%;
  left: 24%;
  width: 11%;
}
.mapStore li._w23 {
  bottom: 25%;
  left: 38%;
  width: 11%;
}
.mapStore li._101 {
  bottom: 12%;
  left: -2%;
  width: 11%;
}

/* slider */
.storeSlider {
  position: relative;
  margin-top: 15px;
  overflow: hidden;
}
.swiper-slide:not(.swiper-slide-active) .storeCard {
  pointer-events: none;
  opacity: 0.5;
}

/* slide */
.storeCard {
  height: 18vw;
  max-height: 130px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.storeCard img {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.storeCard-info {
  width: 60%;
  padding: 15px 8px;
}
.storeCard-name {
  margin-bottom: 5px;
  font-size: 3.2vw;
  font-weight: 700;
}
.storeCard-area {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 2.4vw;
  color: #888;
}
.storeCard-area::before {
  content: "";
  display: block;
  width: 7%;
  height: auto;
  aspect-ratio: 360 / 512;
  background: center/contain no-repeat url(../img/common/icon-pin.svg);
}

/* arrows */
.storeSlider-prev,
.storeSlider-next {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 30px;
  height: 100%;
  display: flex;
  align-items: center;
}
.storeSlider-prev img,
.storeSlider-next img {
  display: block;
  width: 10px;
  height: auto;
  aspect-ratio: 15 / 36;
}
.storeSlider-prev {
  left: 0;
  padding: 0 10px 0 15px;
  background: linear-gradient(
    90deg,
    rgba(225, 241, 250, 1) 0%,
    rgba(225, 241, 250, 1) 65%,
    rgba(225, 241, 250, 0) 100%
  );
}
.storeSlider-next {
  right: 0;
  padding: 0 15px 0 10px;
  background: linear-gradient(
    90deg,
    rgba(225, 241, 250, 0) 0%,
    rgba(225, 241, 250, 1) 35%,
    rgba(225, 241, 250, 1) 100%
  );
}

@media screen and (min-width: 768px) {
  /* slider */
  .storeSlider {
    margin-top: 30px;
  }

  /* slide */
  .storeCard {
    border-radius: 15px;
  }
  .storeCard img {
    border-radius: 15px;
  }
  .storeCard-info {
    padding: 30px 20px;
  }
  .storeCard-name {
    margin-bottom: 10px;
    font-size: 2rem;
  }
  .storeCard-area {
    font-size: 1.6rem;
  }
  .storeCard-area::before {
    width: 12px;
  }

  /* arrows */
  .storeSlider-prev,
  .storeSlider-next {
    width: 75px;
  }
  .storeSlider-prev img,
  .storeSlider-next img {
    width: 15px;
  }
  .storeSlider-prev {
    padding: 0 30px;
  }
  .storeSlider-next {
    padding: 0 30px;
  }
}