.motion-txt {
  display: table-cell;
  position: relative;
  overflow: hidden;
	}
	.motion-txt:after {
	  content: '';
	  position: absolute;
	  opacity: 1;
	  left: 0;
	  top: 0;
	  bottom: 0;
	  width: 100%;
	  background-color: #fff;
	  transform: translate3d(-101%, 0, 0);
		}
	.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 {
			  display: inline-block;
			  opacity: 0;
				padding: 10px 30px;
				}
				.js-scroll.done .motion-txt .motion-inner {
				  opacity: 1;
					background: #fff;
					padding: 10px 30px;
					}
			#home .motion-txt .motion-inner {
				padding: 0 10px;
				}
				#home .js-scroll.done .motion-txt .motion-inner {
					padding: 0 10px;
					}

/* btn */
/* revealContentを最初は消しておく */
.revealContent {
	opacity: 0;
	}

/* moveクラスが追加されて.3s後に表示する */
	.move .revealContent {
	-webkit-transition-delay: .3s;
	-o-transition-delay: .3s;
	transition-delay: .3s;
	opacity: 1;
	}
	.animation-box {
		width: 370px;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		}
		/* before擬似要素の黒いblockにanimationをつけておく */
		.animation-box.move::before {
			-webkit-animation: hideFromLeft .3s forwards, showFromLeft .3s forwards .3s;
			animation: hideFromLeft .3s forwards, showFromLeft .3s forwards .3s;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #000;
			margin: 1px;
			}
/* 白ver */
.move.white .revealContent {
	-webkit-transition-delay: .5s;
	-o-transition-delay: .5s;
	transition-delay: .5s;
	opacity: 1;
	}
	.animation-box.white.move::before {
		-webkit-animation: hideFromLeft .5s forwards, showFromLeft .5s forwards .5s;
		animation: hideFromLeft .5s forwards, showFromLeft .5s forwards .5s;
		background: #fff;
		width: 100%;
		margin: 0px;
		z-index: 9;
		}
		.animation-box.white {
			width: auto;
			}
/* before擬似要素を左から右にスライドイン */
@-webkit-keyframes hideFromLeft {
	0% {
	transform: translateX(-100%);
	}
	100% {
	transform: translateX(0%);
	}
	}
	@keyframes hideFromLeft {
	0% {
	transform: translateX(-100%);
	}
	100% {
	transform: translateX(0%);
	}
	}
	/* before擬似要素を左から右にスライドアウト */
	@-webkit-keyframes showFromLeft {
		0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		}
		100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		}
		}
		@keyframes showFromLeft {
			0% {
			-webkit-transform: translateX(0%);
			transform: translateX(0%);
			}
			100% {
			-webkit-transform: translateX(100%);
			transform: translateX(100%);
			}
			}

/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {
.animation-box {
	width: 100% !important;
	}
	.motion-txt .motion-inner {
		padding: 10px 20px;
		}
		.js-scroll.done .motion-txt .motion-inner {
			padding: 10px 20px;
			}
}