/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/

/*左から右テキストエフェクト*/
.leftAnime {
	opacity: 0;
	overflow: hidden;
	display: inline-block;
}

.leftAnimeInner {
	display: inline-block;
}

/*次章で追加するクラス*/
.slideAnimeLeftRight {
	animation-name: slideTextX100;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes slideTextX100 {
	from {
		transform: translateX(-100%);
		/*要素を左の枠外に移動*/
		opacity: 0;
	}

	to {
		transform: translateX(0);
		/*要素を元の位置に移動*/
		opacity: 1;
	}
}

/*次章で追加するクラス*/
.slideAnimeRightLeft {
	animation-name: slideTextX-100;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}


@keyframes slideTextX-100 {
	from {
		transform: translateX(100%);
		/*要素を右の枠外に移動*/
		opacity: 0;
	}

	to {
		transform: translateX(0);
		/*要素を元の位置に移動*/
		opacity: 1;
	}
}
/*左から右テキストエフェクト ここまで*/