@charset "UTF-8";
/* アニメーションスタイル */
/* ---------------------------- */
.js-scroll-trigger, .js-scroll-trigger2 {
  opacity: 0;
}

.zoomin.is-animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.slidein.is-animated {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn {
  0% {
    transform: translateY(50px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.poyoyon2.is-animated {
  animation: poyoyon2 0.5s 0.3s ease-in-out 1 forwards;
}

@keyframes poyoyon2 {
  0% {
    transform: scale(1, 1) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1) translate(0, 8px);
  }
  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1, 1) translate(0, 0);
  }
  100% {
    opacity: 1;
  }
}
#acd-target1, #acd-target2, #acd-target3 {
  display: none;
}

.ac-btn1 {
  position: relative;
}
.ac-btn1::before {
  display: block;
  content: "";
  background: url(../img/arrow-pink-down.png) no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
}

.ac-btn1.open::before {
  display: block;
  content: "";
  background: url(../img/arrow-pink-up.png) no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
}

@media (max-width: 700px) {
  .ac-btn1 {
    position: relative;
  }
  .ac-btn1::before {
    display: block;
    content: "";
    background: url(../img/arrow-pink-down.png) no-repeat;
    width: 15px;
    height: 15px;
    background-size: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
  }
  .ac-btn1.open::before {
    display: block;
    content: "";
    background: url(../img/arrow-pink-up.png) no-repeat;
    width: 15px;
    height: 15px;
    background-size: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
  }
}
.ac-btn2.open::before {
  display: block;
  content: "";
  background: url(../img/arrow-green-up.png) no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
}

.ac-btn2 {
  position: relative;
}
.ac-btn2::before {
  display: block;
  content: "";
  background: url(../img/arrow-green-down.png) no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
}

@media (max-width: 700px) {
  .ac-btn2 {
    position: relative;
  }
  .ac-btn2::before {
    display: block;
    content: "";
    background: url(../img/arrow-green-down.png) no-repeat;
    width: 15px;
    height: 15px;
    background-size: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
  }
  .ac-btn2.open::before {
    display: block;
    content: "";
    background: url(../img/arrow-green-up.png) no-repeat;
    width: 15px;
    height: 15px;
    background-size: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
  }
}
.ac-btn3 {
  position: relative;
}
.ac-btn3::before {
  display: block;
  content: "";
  background: url(../img/arrow-pink-down.png) no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
}

.ac-btn3.open::before {
  display: block;
  content: "";
  background: url(../img/arrow-pink-up.png) no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
}

@media (max-width: 700px) {
  .ac-btn3 {
    position: relative;
  }
  .ac-btn3::before {
    display: block;
    content: "";
    background: url(../img/arrow-pink-down.png) no-repeat;
    width: 15px;
    height: 15px;
    background-size: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
  }
  .ac-btn3.open::before {
    display: block;
    content: "";
    background: url(../img/arrow-pink-up.png) no-repeat;
    width: 15px;
    height: 15px;
    background-size: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
  }
}
figure .banner-wrapper {
  background-position: center;
  background-size: 100% auto; /* 幅を100% */
}

figure .banner-img {
  width: 100%;
  vertical-align: bottom;
  opacity: 0; /* Javascriptでスクロール時にブラーをかけるため、初期状態はみえなくする */
  -webkit-backface-visibility: hidden; /* チラつき防止用 */
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

.slick-slide {
  transform: scale(0.95);
}

.slick-current {
  transform: scale(1);
}

.next-arrow, .prev-arrow {
  top: 56% !important;
}

.slick-dots {
  bottom: -50px !important;
}

.slick-dots li button:before {
  font-size: 18px !important;
  color: #294E84 !important;
  opacity: 1;
}

.slick-dots li {
  margin: 0 1px !important;
}

.fixed-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s;
  z-index: 100;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active {
  opacity: 1 !important;
  visibility: visible;
}

/* 回転するアニメーション */
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* このクラスをつけると回転を無限に繰り返します */
.anime-fuwafuwa {
  animation: 3s fuwafuwa infinite;
}

/* アニメーションには関係ない見た目のスタイル */
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: #b9268f;
}

.fixed-bg1 {
  position: fixed;
  z-index: -10;
}

.filter::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  background: red;
}

.fixed-bg2 {
  position: fixed;
  z-index: -1;
  top: 0;
}
.fixed-bg2 .banner-wrapper {
  height: 100vh;
  background-size: cover;
}
.fixed-bg2 img {
  height: 100vh;
  object-fit: cover;
}

figure .banner-img {
  width: 100vw;
  vertical-align: bottom;
  opacity: 0; /* Javascriptでスクロール時にブラーをかけるため、初期状態はみえなくする */
  -webkit-backface-visibility: hidden; /* チラつき防止用 */
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

.banner2 {
  display: none;
}

.show {
  display: block;
}

@media (min-width: 700px) {
  .banner2.sp {
    display: none;
  }
}
.confetti {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 90vh;
}

.confetti > span {
  display: block;
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
}

.confetti > span > span {
  display: block;
  width: 100%;
  height: 100%;
}

.confetti > span > span > span {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.kami {
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 10;
  background: none;
}

@keyframes anim1 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 6%;
    left: 90%;
    scale: 1;
  }
}
@keyframes anim2 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 25%;
    left: 4%;
    scale: 1;
  }
}
@keyframes anim3 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 30%;
    left: 85%;
    scale: 1;
  }
}
@keyframes anim4 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 87%;
    left: 85%;
    scale: 1;
  }
}
@keyframes anim5 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 65%;
    left: 55%;
    scale: 1;
  }
}
@keyframes anim6 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 75%;
    left: 85%;
    scale: 1;
  }
}
@keyframes anim7 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 80%;
    left: 45%;
    scale: 1;
  }
}
@keyframes anim8 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 50%;
    left: 3%;
    scale: 1;
  }
}
@keyframes anim9 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 5%;
    left: 5%;
    scale: 1;
  }
}
@keyframes anim10 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 60%;
    left: 90%;
    scale: 1;
  }
}
@keyframes anim11 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 85%;
    left: 25%;
    scale: 1;
  }
}
@keyframes anim12 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 5%;
    left: 35%;
    scale: 1;
  }
}
@keyframes anim13 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 8%;
    left: 65%;
    scale: 1;
  }
}
@keyframes anim14 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 45%;
    left: 20%;
    scale: 1;
  }
}
@keyframes anim15 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 75%;
    left: 2%;
    scale: 1;
  }
}
@keyframes anim16 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 2%;
    left: 25%;
    scale: 1;
  }
}
@keyframes anim17 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 35%;
    left: 3%;
    scale: 1;
  }
}
@keyframes anim18 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 37%;
    left: 25%;
    scale: 1;
  }
}
@keyframes anim19 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 55%;
    left: 95%;
    scale: 1;
  }
}
@keyframes anim20 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 45%;
    left: 90%;
    scale: 1;
  }
}
@keyframes anim21 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 95%;
    left: 30%;
    scale: 1;
  }
}
@keyframes anim22 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 93%;
    left: 75%;
    scale: 1;
  }
}
@keyframes anim23 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 90%;
    left: 57%;
    scale: 1;
  }
}
@keyframes anim24 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 85%;
    left: 95%;
    scale: 1;
  }
}
@keyframes anim25 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 85%;
    left: 5%;
    scale: 1;
  }
}
@keyframes anim26 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 65%;
    left: 40%;
    scale: 1;
  }
}
@keyframes anim27 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 20%;
    left: 85%;
    scale: 1;
  }
}
@keyframes anim28 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 25%;
    left: 95%;
    scale: 1;
  }
}
@keyframes anim29 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 5%;
    left: 80%;
    scale: 1;
  }
}
@keyframes anim30 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 10%;
    left: 45%;
    scale: 1;
  }
}
@keyframes anim31 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 10%;
    left: 55%;
    scale: 1;
  }
}
@keyframes anim32 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 35%;
    left: 50%;
    scale: 1;
  }
}
@keyframes anim33 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 58%;
    left: 50%;
    scale: 1;
  }
}
@keyframes anim34 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 82%;
    left: 75%;
    scale: 1;
  }
}
@keyframes anim35 {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    top: 80%;
    left: 67%;
    scale: 1;
  }
}
#kami1 {
  animation: 1s forwards anim1;
}

#kami2 {
  animation: 1s forwards anim2;
}

#kami3 {
  animation: 1s forwards anim3;
}

#kami4 {
  animation: 1s forwards anim4;
}

#kami5 {
  animation: 1s forwards anim5;
}

#kami6 {
  animation: 1s forwards anim6;
}

#kami7 {
  animation: 1s forwards anim7;
}

#kami8 {
  animation: 1s forwards anim8;
}

#kami9 {
  animation: 1s forwards anim9;
}

#kami10 {
  animation: 1s forwards anim10;
}

#kami11 {
  animation: 1s forwards anim11;
}

#kami12 {
  animation: 1s forwards anim12;
}

#kami13 {
  animation: 1s forwards anim13;
}

#kami14 {
  animation: 1s forwards anim14;
}

#kami15 {
  animation: 1s forwards anim15;
}

#kami16 {
  animation: 1s forwards anim16;
}

#kami17 {
  animation: 1s forwards anim17;
}

#kami18 {
  animation: 1s forwards anim18;
}

#kami19 {
  animation: 1s forwards anim19;
}

#kami20 {
  animation: 1s forwards anim20;
}

#kami21 {
  animation: 1s forwards anim21;
}

#kami22 {
  animation: 1s forwards anim22;
}

#kami23 {
  animation: 1s forwards anim23;
}

#kami24 {
  animation: 1s forwards anim24;
}

#kami25 {
  animation: 1s forwards anim25;
}

#kami26 {
  animation: 1s forwards anim26;
}

#kami27 {
  animation: 1s forwards anim27;
}

#kami28 {
  animation: 1s forwards anim28;
}

#kami29 {
  animation: 1s forwards anim29;
}

#kami30 {
  animation: 1s forwards anim30;
}

#kami31 {
  animation: 1s forwards anim31;
}

#kami32 {
  animation: 1s forwards anim32;
}

#kami33 {
  animation: 1s forwards anim33;
}

#kami34 {
  animation: 1s forwards anim34;
}

#kami35 {
  animation: 1s forwards anim35;
}

@keyframes rotation1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation2 {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(360deg);
  }
}
@keyframes rotation3 {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.rotation1 {
  animation: 3s linear infinite rotation1;
}

.rotation2 {
  animation: 3s linear infinite rotation2;
}

.rotation3 {
  animation: 3s linear infinite rotation3;
}

.btn1.is-animated {
  animation-delay: 1s;
}

.bokashi {
  filter: blur(5px);
}

.section__line-up.fixed {
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.modal {
  z-index: 100;
}/*# sourceMappingURL=animation.css.map */