@charset "utf-8";
@import "reset.css";
@import "tab-menu.css";
@import "swiper-custom.css";
@import "toggle-box.css";

/* img-box */
.img-box {
  position: relative;
}

/* marquee */
@keyframes marquee {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -2000vw;
  }
}
.marquee {
  width: 100%;
  height: 3.7333vw;
  background: url(../images/marquee.png) repeat-x 0 center/ cover;
  position: absolute;
  left: 0;
  top: 7.2666vw;
  animation: marquee 300s linear infinite;
}

/* visual */
.visual {
  width: 100%;
  position: absolute;
  left: 0;
  top: 48vw;
  box-sizing: border-box;
}
.visual .item {
  width: 38.8vw;
  position: absolute;
  left: 50%;
  transform: scale(0.85) translateX(-50%);
  transform-origin: 0 center;
  box-shadow: 0 0 2.6666vw 0 rgba(0, 0, 0, 0.25);
}
.visual .item.wait,
.visual .item.prev,
.visual .item.next {
  opacity: 0.5;
}
.visual .item.wait {
  transform: scale(0) translateX(-50%);
  z-index: 1;
}
.visual .item.prev {
  transform: scale(0.8) translateX(-120%);
  z-index: 5;
}
.visual .item.next {
  transform: scale(0.8) translateX(20%);
  z-index: 4;
}
.visual .item.on {
  transform: scale(1) translateX(-50%);
  z-index: 10;
}

/* storeLink */
.storeLink {
  height: 11.2vw;
  position: absolute;
  left: 50%;
  bottom: 11vw;
  transform: translateX(-50%);

  /* background-color: rgba(255, 0, 0, 0.5); */
}

#storeLink1,
#storeLink4,
#storeLink5,
#storeLink6,
#storeLink7,
#storeLink8,
#storeLink11,
#storeLink12 {
  width: 54vw;
}
#storeLink2 {
  width: 39vw;
}
#storeLink3 {
  width: 42vw;
}
#storeLink9,
#storeLink10 {
  width: 60vw;
}
#storeLink12 {
  bottom: 11.7vw;
}
#storeLink13 {
  width: 65vw;
}

/* swiper */
.swiper-mask {
  width: 100%;
  position: absolute;
  top: 4vw;
}
.swiper-mask .swiper {
  padding: 0 4.4vw;
}
.link-btn {
  display: block;
  width: 26.6666vw;
  margin-top: 3.8666vw;
}