@charset "utf-8";



/*up,down,left,right,transform1,transform2の共通設定
（待機中の設定）
---------------------------------------------------------------------------*/
.up, .up2, .up4, .down, .left, .right, .transform1, .transform2 {
	opacity: 0;		/*透明度（透明の状態）*/
	position: relative;
}


/*up,down,left,right,transform1,transform2の共通設定
（要素が見えたら実行するアクションの設定）
---------------------------------------------------------------------------*/

.upstyle {
	opacity: 1;		/*透明度（色が100%出た状態）*/
	transition: 0.6s 0.6s;	/*0.5sはアニメーションの実行時間0.5秒。0.5sは0.5秒遅れてスタートする指定。*/
}

.up2style {
	opacity: 1;		/*透明度（色が100%出た状態）*/
	transition: 0.6s 0.8s;	/*0.5sはアニメーションの実行時間0.5秒。0.5sは0.5秒遅れてスタートする指定。*/
}

.up4style {
	opacity: 1;		/*透明度（色が100%出た状態）*/
	transition: 0.6s 1s;	/*0.5sはアニメーションの実行時間0.5秒。0.5sは0.5秒遅れてスタートする指定。*/
}

.downstyle, .leftstyle, .rightstyle, .transform1style, .transform2style {
	opacity: 1;				/*透明度（色が100%出た状態）*/
	transition: 1s 0.5s;	/*1sはアニメーションの実行時間1.5秒。0.5sは0.5秒遅れてスタートする指定。*/
}


/*upスタイル。下から上にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.up {
	bottom: -20px;	/*基準値の下20pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.upstyle {
	bottom: 0px;	/*基準値まで戻す*/
}

.up2 {
	bottom: -150px;	/*基準値の下50pxの場所からスタート*/
}
/*要素が見えたら実行するアクション*/
.up2style {
	bottom: 0px;	/*基準値まで戻す*/

}

.up4 {
	bottom: -150px;	/*基準値の下50pxの場所からスタート*/
}
/*要素が見えたら実行するアクション*/
.up4style {
	bottom: 0px;	/*基準値まで戻す*/

}

/*downスタイル。上から下にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.down {
	top: -20px;	/*基準値の上20pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.downstyle {
	top: 0px;	/*基準値まで戻す*/
}

/*leftスタイル。左からフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.left {
	left: -100px;	/*基準値より左に100pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.leftstyle {
	left: 0px;		/*基準値まで戻す*/
}

/*rightスタイル。右からフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.right {
	right: -100px;	/*基準値より右に100pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.rightstyle {
	right: 0px;		/*基準値まで戻す*/
}

/*transform1スタイル。その場で回転するスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform1 {
	transform: scaleX(0);	/*幅を0%でスタート*/
}

/*要素が見えたら実行するアクション*/
.transform1style {
	transform: scaleX(1);	/*幅を100%に戻す*/
}

/*transform2スタイル。倒れた状態から起き上がるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform2 {
	transform: perspective(400px) rotateX(50deg);
}

/*要素が見えたら実行するアクション*/
.transform2style {
	transform: perspective(400px) rotateX(0deg);
}


/*blurスタイル。ぼかしで出現するスタイル。
---------------------------------------------------------------------------*/
/*キーフレーム（アニメーション）設定*/
@keyframes blur {
0% {
	filter: blur(30px);
	transform: translateY(50px);
	transform: scale(1.5);
}
100% {
	filter: blur(0);
	transform: translateY(0px);
	transform: scale(1);
}
}

/*待機中の設定*/
.blur {
	opacity: 0;	/*透明度（透明の状態）*/
}

/*要素が見えたら実行するアクション*/
.blurstyle {
	opacity: 1;
	animation-name: blur;
	animation-duration: 1.5s;
	animation-fill-mode: both;
}