@charset "UTF-8";

.anim {
  opacity: 0;
}

.anim.active {
  opacity: 1;
}
.fade_in {
  transition: 1s ease;
}

.slide_up {
  transition: 1s ease;
  transform: translateY(50px);
}

.slide_up.active {
  transform: translateY(0);
}

.slide_down {
  transition: 1s ease;
  transform: translateY(-300px);
}

.slide_down.active {
  transform: translateY(0);
}

.slide_left_in {
  transition: 1s ease;
  transform: translateX(-500px);
}

.slide_left_in.active {
  transform: translateX(0);
}

.slide_right_in {
  transition: 1s ease;
  transform: translateX(30px);
}

.slide_right_in.active {
  transform: translateX(0);
}

.zoom_in {
  transition: .5s ease;
  transform: scale(0, 0);
}

.zoom_in.active {
  transform: scale(1, 1);
}

/* ズームイン数秒ごとに繰り返す */
.zoom_in_2.active {
  animation: zoom_in 3s linear infinite;
}

@keyframes zoom_in {
  from {
    transform: scale(0, 0);
  }

  20% {
    transform: scale(1, 1);;
  }

  to {
    transform: scale(0, 0)；
  }
}

.zoom_out {
  transition: .5s ease;
  transform: scale(1.5, 1.5);
}

.zoom_out_2{
  transition: 1s ease ;
  transform: scale(3, 3);
}

.zoom_out.active,
.zoom_out_2.active {
  transform: scale(1,1);
}
/* ズームアウト数秒ごとに繰り返す */
.zoom_out_3.active{
  animation: zoom_out 4s ease infinite;
  opacity: 1;
}

@keyframes zoom_out {
  0% {
    transform: scale(1, 1);
  }

  10% {
    transform: scale(1.25, 1.25);
  }
  20%,100% {
    transform:scale(1, 1);
  }
}


.zoom_up {
  transition: 1s ease;
  transform: scale(0, 0) translateY(50px);
}

.zoom_up.active {
  transform: scale(1, 1) translateY(0);
}

.roll_in {
  transition: .5s ease;
  transform: scale(0, 0) rotateZ(0deg);
}

.roll_in.active {
  transform: scale(1, 1) rotateZ(720deg);
}

@keyframes bounce {
  from {
    transform: translateY(-200px);
  }

  20% {
    transform: translateY(20px);
  }

  30% {
    transform: translateY(-15px);
  }

  40% {
    transform: translateY(10px);
  }

  50% {
    transform: translateY(-5px);
  }

  to {
    transform: translateY(0);
  }
}

.bounce.active {
  animation: bounce 1s;
}

@-webkit-keyframes shiny {
  0% {
    left: -20%;
  }

  20% {
    left: 140%;
  }

  100% {
    left: 140%;
  }
}

@-moz-keyframes shiny {
  0% {
    left: -20%;
  }

  20% {
    left: 140%;
  }

  100% {
    left: 140%;
  }
}

@keyframes shiny {
  0% {
    left: -20%;
  }

  20% {
    left: 140%;
  }

  100% {
    left: 140%;
  }
}

.slide_shiny_btn {
  -webkit-animation: shiny 3s linear infinite;
  -moz-animation: shiny 3s linear infinite;
  animation: shiny 3s linear infinite;
}

.slide_shiny.active {
  -webkit-animation: shiny 3s linear infinite;
  -moz-animation: shiny 3s linear infinite;
  animation: shiny 3s linear infinite;
}
.furu {
	animation: furu 3.5s infinite;
}
@keyframes furu {
    0% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    2% {
        transform: translate(2px, 2px) rotateZ(2deg)
    }
    4% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }
    6% {
        transform: translate(2px, 0px) rotateZ(-2deg)
    }
    8% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    10% {
        transform: translate(2px, 2px) rotateZ(2deg)
    }
    12% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    14% {
        transform: translate(2px, 0px) rotateZ(-2deg)
    }
    16% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }
    18% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    100% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
  }

.furu_arrow_zoom {
	animation: furu_arrow_zoom 3.5s infinite;
}
@keyframes furu_arrow_zoom {
    0% {
        transform: translate(0px, 0px) rotateZ(0deg) scale(1 ,1)
    }
    2% {
        transform: translate(2px, 2px) rotateZ(2deg) 
    }
    4% {
        transform: translate(0px, 2px) rotateZ(0deg) 
    }
    6% {
        transform: translate(2px, 0px) rotateZ(-2deg) 
    }
    8% {
        transform: translate(0px, 0px) rotateZ(0deg) 
    }
    10% {
        transform: translate(2px, 2px) rotateZ(2deg) 
    }
    12% {
        transform: translate(0px, 0px) rotateZ(0deg) 
    }
    14% {
        transform: translate(2px, 0px) rotateZ(-2deg) 
    }
    16% {
        transform: translate(0px, 2px) rotateZ(0deg) 
    }
    18% {
        transform: translate(0px, 0px) rotateZ(0deg) 
    }
    50% {
      transform: scale(1 ,1.1)
    }
    100% {
        transform: translate(0px, 0px) rotateZ(0deg) scale(1 ,1)
    }
  }

  .fv_arrow {
    transform-origin: top;
    animation: fv_arrow 6s infinite;
    /* animation-direction: alternate; */
  }
  @keyframes fv_arrow {
    0% {
        transform: scale(1 ,1)
    }
    5% {
      transform: scale(1 ,1)
    }
    10% {
      transform: scale(1 ,0.9)
    }
    15% {
      transform: scale(1 ,1)
    }
    20% {
      transform: scale(1 ,0.9)
    }
    25% {
      transform: scale(1 ,1)
    }
    30% {
      transform: scale(1 ,0.9)
    }
    35% {
      transform: scale(1 ,1)
    }
    100% {
      transform: scale(1 ,1)
    }
  }
  /* 点滅アニメーション */
.flash{
  animation: flash 3s linear infinite;
}

@keyframes flash {
  0%,10%,21%,30%,41%,50%,61%,70%,81%,90% {
    opacity: 0;
  }
  11%,20%,31%,40%,51%,60%,71%,80%,91%,100% {
    opacity: 1;
  }
}
/* バウンドアニメーション */
.bound {
  animation: bound-anim 2.5s linear infinite;
}
@keyframes bound-anim {
	0%,50%,100% {top: 107px;transform: scale(1);}
	2.5%,45% {top: 107px; transform: scale(0.96,1.04);}
	7%,30% {transform: scale(1);}
	12%,24% {top: 50px;transform: scale(1.15,0.9);}
  18% {
    top: 50px;
    transform: scale(1);
  }
}

.active .checkMark::before{
  animation: 0.5s checkMark;
  opacity: 1;
}
.active .checkMark.dly2::before{
  animation: 0.5s checkMark;
  transition-delay: .3s;
  animation-delay: .3s;
  opacity: 1;
}
.active .checkMark.dly3::before{
  animation: 0.5s checkMark;
  transition-delay: .6s;
  animation-delay: .6s;
  opacity: 1;
}

@keyframes checkMark{
  0%{
      height: 0;
      width: 0;
      top: 6vw;
      left: -6vw;
  }
  30%{
      height: 2vw;
      width: 0;
      top: -2vw;
      left: -5vw;
  }
  100%{
      height: 2vw;
      width: 5vw;
      top: 0;
      left: -6vw;
  }
}

@keyframes flip {
    0% {
    	opacity: 1;
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    }

    40% {
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)
    }

    50% {
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    }

    80% {
        animation-timing-function: ease-in;
        transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);
    }

    100% {
    	opacity: 1;
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    }
}
.flip.active {
    opacity: 0;
    animation-name: flip;
    animation-fill-mode: forwards;
    backface-visibility: visible;
    animation-duration: 1.0s;
}
.flip.active.delay1 {
    animation-delay: 0.5s;
}
.flip.active.delay2 {
    animation-delay: 1.0s;
}
.flip.active.delay3 {
    animation-delay: 1.5s;
}
.flip.active.delay4 {
    animation-delay: 2.0s;
}

@keyframes bounceIn {
    0%,20%,40%,60%,80%,100% {
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }

    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3);
    }

    20% {
        transform: scale3d(1.1,1.1,1.1);
    }

    40% {
        transform: scale3d(.9,.9,.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03);
    }

    80% {
        transform: scale3d(.97,.97,.97);
    }
    100 {
        opacity: 1;
        transform: scaleX(1);
    }
}
.bounceIn.active {
  animation: bounceIn 1s;
}

.heartBeat.active {
  animation: heartBeat 2.5s ease-in 0.0s forwards infinite;
}
@keyframes heartBeat {
  0% { 
    width: 53.3333vw;
  }
  5.0% { 
    width: 60.0vw;
  }
  10.0% {
    width: 53.3333vw;
  }
  15.0% {
    width: 60.0vw;
  }
  20% {
    width: 53.3333vw;
  }
  100% {
    width: 53.3333vw;
  }
}


/* deray
**********************************************/
.dly1.active {
  transition-delay: .1s;
  animation-delay: .1s;
}

.dly2.active {
  transition-delay: .3s;
  animation-delay: .3s;
}

.dly3.active {
  transition-delay: .6s;
  animation-delay: .6s;
}

.dly4.active {
  transition-delay: .9s;
  animation-delay: .9;
}

.dly5.active {
  transition-delay: 1.2s;
  animation-delay: 1.2;
}