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

/*================================================
			scroll Effect 01 ・ 02 ・ 03
================================================*/

/*scroll Effect _00*/
.fadein_00{
	visibility:hidden;
	transform:translate(0,0); /*同じ位置*/
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
	}
.fadein_00.scrollin{
	visibility:visible;
	transform:translate(0,0); /*同じ位置に表示*/
	}

/*scroll Effect _01*/
.fadein_01{
	visibility:hidden;
	transform:translate(0,-15px); /*15px上にずらしておく*/
	-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(0,15px); /*15px下にずらしておく*/
	-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); /*もとの位置にもどす*/
	}
.fadein_02.scrollin li{
    background-color:rgba(29,32,136,0.75);
}
.fadein_02.scrollin li:before{
    left:0;
}
.fadein_02.scrollin li:after{
    top:0;
}

/*scroll Effect _03*/
.fadein_03{
	visibility:hidden;
	transform:translate(-100px,0); /*100px左にずらしておく*/
	-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(100px,0); /*100px右にずらしておく*/
	-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: 100%;
  background-color: #000;
  transform: translate3d(-101%, 0, 0);
}
.step2-scroll.show .motion-txt:after {
  transition-property: transform, opacity;
  transition-duration: 0.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: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
}
.step2-scroll.done .motion-txt .motion-inner {
  opacity: 1;
}