@charset "utf-8";

/*
アニメーションクラス一覧
---------------------------------------------------------------------------
up         : 下から上にフェードイン（透明・下に20px → 不透明・元の位置）
down       : 上から下にフェードイン（透明・上に20px → 不透明・元の位置）
transform1 : その場で回転（横に展開）（透明・幅0% → 不透明・幅100%）
transform2 : 倒れた状態から起き上がる（透明・3D回転 → 不透明・通常の向き）
blur       : ぼかしから鮮明に出現（透明・ぼかし30px・拡大1.1倍 → 不透明・ぼかしなし・等倍）
transform3 : 小さいサイズから原寸大に拡大（バウンス効果付き）（サイズ0% → サイズ100%）

共通仕様:
- アニメーション時間: 1秒（transform3のみ0.3秒）
- 遅延時間: 0.5秒後に開始
- 発動タイミング: 要素が画面内に入ったら実行（JavaScriptで制御）
- 発動クラス: 各クラスに "style" を追加（例：up → upstyle）

使い方:
1. 待機中: 要素に基本クラスを付ける（例：class="up"）
2. 発動時: JavaScriptで "style" 付きクラスを追加（例：class="up upstyle"）
3. アニメーション実行: 0.5秒後に1秒かけてアニメーションが開始
---------------------------------------------------------------------------*/



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


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


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

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


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

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


/*blurスタイル。ぼかしで出現するスタイル。
---------------------------------------------------------------------------*/
/*待機中の設定*/
.blur {
	opacity: 0;	/*透明度（透明の状態）*/
	filter: blur(30px);
	transform: scale(1.1);
}

/*要素が見えたら実行するアクション*/
.blurstyle {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition: 1s 0.5s;
}


/*transform3スタイル。小さなサイズから原寸大になるスタイル
---------------------------------------------------------------------------*/
/*キーフレーム（アニメーション）設定*/
@keyframes transform3 {
0% {
	transform: scale(0);
}
50% {
	transform: scale(1.1);
}
70% {
	transform: scale(0.99);
}
100% {
	transform: scale(1);
}
}

/*待機中の設定*/
.transform3 {
	transform: scale(0);
}

/*要素が見えたら実行するアクション*/
.transform3style {
	animation: transform3 0.3s ease-out 0.5s both;	/*0.5秒待機後、0.3秒かけてアニメーションを実行*/
}