@charset "UTF-8";

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

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


a:hover.slideup.visible {
  opacity: 0.65;
  transition: all 0.5s ease-in-out;
}

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

.slideup.px50  {transform: translateY(50px);}
.slideup.visible.px50 {transform: translateY(0);}

.slideR {opacity: 0; transform: translateX(-100%);transition: all 400ms cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s;}
.slideR.visible {opacity: 1;transform: translateX(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;}

/*　delay　*/
.delay500 {transition-delay: .5s;}
.delay750 {transition-delay: .75s;}
.delay1000 {transition-delay: 1s;}
.delay1250 {transition-delay: 1.25s;}
.delay1500 {transition-delay: 1.5s;}
.delay1750 {transition-delay: 1.75s;}
.delay2000 {transition-delay: 2s;}
.delay2250 {transition-delay: 2.25s;}
.delay2500 {transition-delay: 2.5s;}

/*　scale　*/
.scale-shrink {opacity: 0;transform: scale(1.3);transition: all 400ms cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s; width: 100%;}
.scale-shrink.visible {opacity: 1; transform: scale(1);}

.scale-shrink.times110 {opacity: 0;transform: scale(1.1)}
.scale-shrink.times110.visible {opacity: 1;transform: scale(1);}

.scale-shrink.times120 {opacity: 0;transform: scale(1.2)}
.scale-shrink.times120.visible {opacity: 1;transform: scale(1);}