@charset "utf-8";


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

/*共通設定（要素が見えたら実行するアクションの設定）※opastyle以外。
---------------------------------------------------------------------------*/
.upstyle, .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;	/*基準値まで戻す*/
}

/*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(100deg);
}
/*要素が見えたら実行するアクション*/
.transform2style {
	transform: perspective(0px) rotateX(0deg);
}