@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);}




/* slide_line_mgl */ 
.casestudy_col div.wh-box span.box-inner.slide_line_mgl {
opacity: 0;
margin-left: 0;
}

.casestudy_col div.wh-box.visible span.box-inner.slide_line_mgl{
-webkit-animation: slide_line_mgl 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
animation: slide_line_mgl 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards  /*easeInOutQuart*/ ;}

.casestudy_col div.wh-box.visible span.box-inner.kaitori_slide_line_mgl{
  -webkit-animation: kaitori_slide_line_mgl 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
  animation: kaitori_slide_line_mgl 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards  /*easeInOutQuart*/ ;}


@keyframes slide_line_mgl {
0% { opacity: 0; margin-left: 0;}
100%{ margin-left: 17.87vw ; opacity: 1;}
}

@keyframes kaitori_slide_line_mgl {
0% { opacity: 0;}
100%{ transform: translateX(186px) ; opacity: 1;}
}
  


@media screen and (max-width: 767px) {

.casestudy_col div.wh-box span.box-inner.slide_line_mgl {
margin-left: -100vw;
}

@keyframes slide_line_mgl {
0% { opacity: 0; margin-left: -90vw;}
100%{ margin-left: 0 ; opacity: 1;}
}

@keyframes kaitori_slide_line_mgl {
  0% { transform: translateX(-90vw); opacity: 0;}
  100%{ transform: translateX(0); opacity: 1;}
  }


}


/* slide_line_mgr  */
.casestudy_col div.wh-box span.box-inner.slide_line_mgr {
opacity: 0;
margin-right: 0;
}

.casestudy_col div.wh-box span.box-inner.kaitori_slide_line_mgr {
  opacity: 0;
  }

.casestudy_col div.wh-box.visible span.box-inner.slide_line_mgr{
-webkit-animation: slide_line_mgr 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
animation: slide_line_mgr 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards /*easeInOutQuart*/ ;}  

.casestudy_col div.wh-box.visible span.box-inner.kaitori_slide_line_mgr{
  -webkit-animation: kaitori_slide_line_mgr 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
  animation: kaitori_slide_line_mgr 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards /*easeInOutQuart*/ ;}  

@keyframes slide_line_mgr {
0% { opacity: 0; margin-right: 0;}
100%{ margin-right: 17.87vw ; opacity: 1;}
}

@keyframes kaitori_slide_line_mgr {
  0% { opacity: 0; transform: translate(186px)}
  100%{ transform: translate(0) ; opacity: 1;}
  }


@media screen and (max-width: 767px) {

.casestudy_col div.wh-box span.box-inner.slide_line_mgr {
margin-left: -90vw;
}

@keyframes slide_line_mgr {
0% { opacity: 0; margin-left: -100vw;}
100%{ margin-left: 0 ; opacity: 1;}
}

@keyframes kaitori_slide_line_mgr {
  0% { transform: translateX(90vw); opacity: 0;}
  100%{ transform: translateX(0); opacity: 1;}
  }


}