@charset "UTF-8";

/* +++++++++++++++++++++++モーションのスタイル++++++++++++++++++++++ */
.transparent{
	opacity: 0;
	filter: alpha(opacity=0);
}
@keyframes changeOpacity{
	0%{
		opacity: 0;
		filter: alpha(opacity=0);
	}

	100%{
		opacity: 1;
		filter: alpha(opacity=100);
	}
}
@keyframes changeVisible{
	0%{
		visibility: hidden;
	}

	100%{
		visibility: visible;
	}
}
.solid{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	animation-fill-mode: both;
	visibility: visible;
}
.sa{
	position: relative;
}

@keyframes fillRight{
	0%{
		transform: rotateY(-90deg);
		width: 100%;
	}
	50%{
		transform: rotateY(0);
		width: 100%;
	}
	100%{
		transform: rotateY(0);
		width: 0%;
	}
}
@keyframes fillLeft{
	0%{
		transform: rotateY(-90deg);
		width: 100%;
	}
	50%{
		transform: rotateY(0);
		width: 100%;
	}
	100%{
		transform: rotateY(0);
		width: 0%;
	}
}
@keyframes fadeIn{
	0%{
		opacity: 0;
		filter: alpha(opacity=0);
	}
	100%{
		opacity: 1;
		filter: alpha(opacity=100);
	}
}

@keyframes fadeInBottom{
	0%{
		opacity: 0;
		filter: alpha(opacity=0);
		transform: translateY(4rem);
	}
	100%{
		opacity: 1;
		filter: alpha(opacity=100);
		transform: translateY(0);
	}
}
@keyframes fadeInTop{
	0%{
		opacity: 0;
		filter: alpha(opacity=0);
	}
	100%{
		opacity: 1;
		filter: alpha(opacity=100);
		transform: translateY(0);
	}
}
@keyframes stretchLeft{
	0%{
		width: 0;
	}
	100%{
		width: 100%;
	}
}
@keyframes stretchRight{
	0%{
		transform: scaleX(0);
	}
	100%{
		transform: scaleX(1);
	}
}
@keyframes stretchLeft{
	0%{
		transform: scaleX(0);
	}
	100%{
		transform: scaleX(1);
	}
}
@keyframes stretchTop{
	0%{
		transform: scaleY(0);
	}
	100%{
		transform: scaleY(1);
	}
}
@keyframes stretchBottom{
	0%{
		transform: scaleY(0);
	}
	100%{
		transform: scaleY(1);
	}
}