/*============================
アニメーション基本設定
============================*/
.effect {
opacity: 0;
transition: all 0.6s linear;
}

.shutter {
width: 100%;
height: 100%;
position: absolute;
z-index: 1000;
top:0;
left:-100%;
background: #FC6401;
}

/* ============================
01 メインビジュアル
============================*/
.effect01 {
opacity: 0;
transition: opacity .3s linear;
transition-delay: 3s;
}

.effect02 {
opacity: 0;
transition: opacity 0.6s linear;
transition-delay: 6s;
}

.effect03 {
opacity: 0;
transition: opacity 0.6s linear;
transition-delay: 7s;
}

.effect.startEfx {
opacity: 1;
}

/* ============================
シャッターエフェクト
============================*/
.startEfx.effect_shutter .shutter {
animation: shutter01 1.4s cubic-bezier(.645, .045, .355, 1);
}

.startEfx.effect_shutter .shutter_cont {
animation: shutter02 1.4s cubic-bezier(.645, .045, .355, 1);
transition: transform 0.6s ease;
}

/* アニメーション設定 */
@keyframes shutter01 {
	0% {
		width: 100%;
		left: -101%;
		transform-origin: 100% 0;
	}
	30% {
		width: 100%; 
		left: 0;
		transform-origin: 100% 0;
	}
	60% {
		width: 100%; 
		left: 0;
		transform-origin: 100% 0;
	}
	100% {
		width: 0; 
		left: 101%;
		transform-origin: 100% 0;
	}
}

@keyframes shutter02 {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	99% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}


/*========================
テキストエフェクト
========================*/
.motion-txt {
  position: relative;
  overflow: hidden;
  display: inline-block;
	max-width: 100%;
}
.motion-txt:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #222;
  transform: translate3d(-101%, 0, 0);
  font-size: 0.1rem;
  line-height: inherit;
}
.js-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);
}
.js-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 {
  opacity: 0;
  display: inline-block;
	max-width: 100%;
}
.js-scroll.done .motion-txt .motion-inner {
  opacity: 1;
	max-width: 100%;
}