@charset "UTF-8";
/* scroll animations*/

/*================================================
			scroll Effect 01 ・ 02 ・ 03
================================================*/
/*scroll Effect _01*/
.fadein_01{
	visibility:hidden;
	transform:translate(0,-150px); /*50px上にずらしておく*/
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
	}
.fadein_01.scrollin{
	visibility:visible;
	transform:translate(0,0); /*もとの位置にもどす*/
	}

/*scroll Effect _02*/
.fadein_02{
	visibility:hidden;
	transform:translate(50px,0); /*50px右にずらしておく*/
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
	}
.fadein_02.scrollin{
	visibility:visible;
	transform:translate(0,0); /*もとの位置にもどす*/
	}

/*scroll Effect _03*/
.fadein_03{
	visibility:hidden;
	transform:translate(0,150px); /*150px下にずらしておく*/
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
	}
.fadein_03.scrollin{
	visibility:visible;
	transform:translate(0,0); /*もとの位置にもどす*/
	}

/*scroll Effect _04*/
.fadein_04{
	visibility:hidden;
	transform:translate(-50px,0); /*50px左にずらしておく*/
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
	}
.fadein_04.scrollin{
	visibility:visible;
	transform:translate(0,0); /*もとの位置にもどす*/
	}


/*==============================
	cont_04  >  step2-animetion ※2段階アニメーション
===============================*/
.motion-txt {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.motion-txt:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 150%;
  background-color: #ff7418;
  transform: translate3d(-120%, 0, 0);
}
.step2-scroll.show .motion-txt:after {
  transition-property: transform, opacity;
  transition-duration: 1.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.step2-scroll.done .motion-txt:after {
  transition-property: transform;
  transition-duration: 1.5s;
  transition-delay: 0.5s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(150%, 0, 0);
}
.motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
}
.step2-scroll.done .motion-txt .motion-inner {
  opacity: 1;
}