@charset "UTF-8";

  /* animation
* --------------------------------------- */

.no_trans {
  /*　js連動　windowリサイズ時 transitionさせない */
  transition: none !important; }


/*　Slide up before after　*/
.slideup  {
  opacity: 0;
  transform: translateY(15%);
  transition : all 1s .5s;
}
.slideup.visible {
  opacity: 1;
  transform: translateY(0);
}

/*　Slide up translateY precentage before after　*/
.slideup.per05 {transform: translateY(5%);}
.slideup.visible.per05 {transform: translateY(0);}

.slideup.per10 {transform: translateY(10%);}
.slideup.visible.per10 {transform: translateY(0);}

.slideup.per20 {transform: translateY(20%);}
.slideup.visible.per20 {transform: translateY(0);}

.slideup.per30 {transform: translateY(30%);}
.slideup.visible.per30 {transform: translateY(0);}

.slideup.per40 {transform: translateY(40%);}
.slideup.visible.per40 {transform: translateY(0);}

.slideup.per50 {transform: translateY(50%);}
.slideup.visible.per50 {transform: translateY(0);}


/*　fadein before after　*/
.fadein {opacity: 0;transition: all 500ms cubic-bezier(0.550, 0.085, 0.680, 0.530) .5s; /* easeInQuad */}
.fadein.visible {opacity: 1;}

/* zoom in out before after */
.zoomin { opacity: 0; transform: scale(.6);transition : all .5s .5s;}
.zoomin.visible{ opacity: 1; transform: scale(1);}

.zoominX { opacity: 0; transform: scale(.8);transition : all .5s .5s;}
.zoominX.visible {
  animation: zoominX 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1s 1 forwards;
}
 
@keyframes zoominX {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }  
}





/*　delay　*/
.delay500 {transition-delay: .5s;}
.delay1000 {transition-delay: 1s;}
.delay1500 {transition-delay: 1.5s;}
.delay2000 {transition-delay: 2s;}
.delay2500 {transition-delay: 2.5s;}
.delay3000 {transition-delay: 3s;}
.delay5000 {transition-delay: 5s;}

/*　delay　*/
.delay100 {transition-delay: .1s;}
.delay200 {transition-delay: .2s;}
.delay300 {transition-delay: .3s;}
.delay400 {transition-delay: .4s;}
.delay500 {transition-delay: .5s;}
.delay600 {transition-delay: .6s;}