@charset "UTF-8";

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

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

/*　Slide up before after base　*/
.slideUp  {
  opacity: 0;
  transform: translateY(100%);
  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);}

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


/*　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;}

/* underbar R to L */
.lineSlide {position: relative;}
.lineSlide::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #ffc522;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 1.5s 1.5s;
}
.ani.visible .lineSlide::after {
  transform: scale(1, 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;}
.delay4000 {transition-delay: 4s;}