@charset "utf-8";
/*------------------------------------- スタジアムBG
 背景の明度を落とす→戻す 6秒 */
@keyframes bg_dark-light{
	0% {opacity: 1}
	10% {opacity: 0.5}
	50% {opacity: 0.5}
	60% {opacity: 1}
}
.effect_start #stadium_bg{
	animation: bg_dark-light	10s ease-out 0s forwards;}

/*------------------------------------- ループ背景
 0秒スタート：表示5秒・フェードアウト1秒 */

@keyframes bg_fade-in-out{
	0% {opacity: 1; z-index:1}
	50% {opacity: 1}
	60% {opacity: 0; z-index:1}
	61% {z-index:-1}
}
/* 背景の組み合わせ　クラス名　＋　背景名 */
.effect_homerun #item_hanabi_bg,
/*.effect_1base #item_hanabi_mini_bg,*/
.effect_2base #item_hanabi_naiagara_bg,
.effect_3base #item_hanabi_naiagara_bg,
.effect_steel #item_steel_bg{	animation: bg_fade-in-out 10s ease-out 0s forwards;}

/*------------------------------------- 画像文字
 0秒スタート：フェードイン0.5秒：表示2秒・フェードアウト0.5秒 */
/* 共通 */
@keyframes item_common{
	0% {opacity: 0;	z-index:3}
	5% { opacity: 1;}
	25% {opacity: 1;}
	30% {opacity: 0;	z-index:3}
	31% {z-index:-1}
}

/* 0秒スタート：表示3秒・フェードなし（スライドインアウト用） */
@keyframes item_common2{
	0% {opacity: 1; z-index:3}
	30% {opacity: 1; z-index:3}
	31% {opacity: 0; z-index:-1}
}

/* ズームイン */
@keyframes item_zoom_in{
	0% { transform: scale(3);	}
	100% { transform: scale(1);}
}
.effect_homerun #item_homerun_moji,
.effect_1base #item_1base_moji,
.effect_2base #item_2base_moji,
.effect_3base #item_3base_moji{
	animation: item_common 10s ease-out 0s forwards, item_zoom_in 0.5s ease-in 0s forwards;}

/* スライドイン */
@keyframes item_slide_in{
	0% {transform: translateX(200%);	}
	15% {transform: translateX(200%);	}
	50% {transform: translateX(0);}
	57% {transform: translateX(0);}
	90% {transform: translateX(10%);}
	100%{transform: translateX(-300%);}
}
.effect_steel #item_steel_moji{
		animation: item_common2 10s ease-out 0s forwards, item_slide_in 3s ease-in 0s forwards ;}

/*------------------------------------- 入力テキスト
 3秒目スタート：フェードイン１秒・表示1秒・フェードアウト１秒）*/
@keyframes text_fade-in-out{
	0% {opacity: 0; z-index:4}
	33% {opacity: 1}
	66% {opacity: 1}
	99% {opacity: 0; z-index:4}
	100% {z-index:-1}
}
.effect_start .effect_text{
 animation: text_fade-in-out 3s ease-out 3s forwards ;}