@charset "UTF-8";

/* fadein
---------------------------------------------------------- */
.js-fadein {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s, visibility 0.9s, filter 0.9s;
}
.js-fadein._active {
  opacity: 1;
  visibility: visible;
}

/* boom
---------------------------------------------------------- */
/* 初期状態（少し小さく＆透明） */
.js-boom {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}
.js-boom._active {
  animation: boomOnce var(--anim-duration, 480ms) var(--anim-ease, ease-in-out) var(--anim-delay, 0ms) forwards;
}

@keyframes boomOnce {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  40% {
    transform: scale(1.18);
    opacity: 1;
  }

  100% {
    transform: scale(1.0);
    opacity: 1;
  }
}
span.js-boom._active {
  animation-name: boomOnceRotate;
}

@keyframes boomOnceRotate {
  0% {
    transform: rotate(-10deg) scale(0.8);
    opacity: 0;
  }

  40% {
    transform: rotate(-10deg) scale(1.18);
    opacity: 1;
  }

  100% {
    transform: rotate(-10deg) scale(1.0);
    opacity: 1;
  }
}

/* store map
---------------------------------------------------------- */
.store__map:before {
  position: absolute;
  right: 34%;
  bottom: 22.0%;
  display: block;
  content: "";
  width: 55px;
  height: 55px;
  border-radius: 50vh;
  background: rgba(196,0,1,.32);
  animation: bounce 1.5s ease-in-out forwards;
  animation-iteration-count: infinite;
}
@keyframes bounce {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }

  50% {
    transform: scale(.75);
    -webkit-transform: scale(.75);
  }
}


.store__arw {
  position: absolute;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scale(0);
  opacity: 0.999;
  transform-origin: left bottom;
  transition: transform 1.2s cubic-bezier(.25, .8, .25, 1);
}

.store__arw._grow {
  transform: rotate(var(--rotate)) scale(1);
}

.store__arw.touhoku {
  --rotate: 110deg;
  width: 53px;
  right: 20.2%;
  bottom: 46.8%;
}
.store__arw.chubu1 {
  --rotate: 79deg;
  width: 36px;
  right: 34.5%;
  bottom: 41.5%;
}
.store__arw.chubu2 {
  --rotate: -15deg;
  width: 33px;
  right: 44.3%;
  bottom: 29%;
  transform-origin: right bottom;
}
.store__arw.kinki {
  --rotate: -10deg;
  width: 58px;
  left: 40.2%;
  bottom: 28.5%;
  transform-origin: right bottom;
}
.store__arw.chugoku {
  --rotate: 0deg;
  width: 92px;
  left: 31.9%;
  bottom: 30%;transform-origin: right bottom;
}
.store__arw.shikoku {
  --rotate: 0deg;
  width: 94px;
  left: 28.4%;
  bottom: 12%;
  transform-origin: right top;
}
.store__arw.kyusyu {
  --rotate: 0deg;
  width: 138px;
  left: 19%;
  bottom: 2%;
  transform-origin: right top;
}
.store__arw.okinawa {
  --rotate: 8deg;
  width: 148px;
  left: 13%;
  bottom: 31%;
  transform-origin: right bottom;
}

/* PC */
@media (min-width: 1080px) {

  .store__map:before {
    width: 112px;
    height: 112px;
    right: 33.2%;
    bottom: 23.4%;
  }

  .store__arw.touhoku {
      width: 132px;
      right: 20.2%;
      bottom: 43.8%;
    }

    .store__arw.chubu1 {
      width: 78px;
      right: 35.5%;
      right: 32.5%;
      bottom: 39.5%;
    }

    .store__arw.chubu2 {
      width: 72px;
      right: 44.3%;
      right: 40.3%;
      bottom: 29%;
    }

    .store__arw.kinki {
      width: 125px;
      left: 46%;
    }

    .store__arw.chugoku {
      width: 178px;
      left: 34%;
      left: 41%;
      bottom: 28%;
    }

    .store__arw.shikoku {
      width: 230px;
      left: 27.8%;
      left: 36.8%;
      bottom: 9.3%;
    }

    .store__arw.kyusyu {
      width: 304px;
      left: 20%;
      left: 30%;
    }

    .store__arw.okinawa {
      width: 350px;
      left: 11.4%;
      left: 22.4%;
      bottom: 27.4%;
    }
}