@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 641px) {
	.box{
	opacity: 0;
	}
	/*ディレイ*/
	.delay-time-top-01{
	animation-delay: 0.3s;
	}
	.delay-time-top-02{
	animation-delay: 0.7s;
	}
	.delay-time-top-03{
	animation-delay: 1s;
	}
	.delay-time-top-04{
	animation-delay: 1.2s;
	}
	
	/*下から*/
	.fadeUp-top {
	animation-name:fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
	}
	@keyframes fadeUpAnime{
    from {
    opacity: 0;
	transform: translateY(100px);
	}
	to {
    opacity: 1;
	transform: translateY(0);
	}
	}
	
	/*左から*/
	.fadeLeft-top{
	animation-name:fadeLeftAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeLeftAnime{
	from {
    opacity: 0;
	transform: translateX(-100px);
	}
	to {
    opacity: 1;
	transform: translateX(0);
	}
	}
	
	/* 右から */
	.fadeRight-top{
	animation-name:fadeRightAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeRightAnime{
	from {
    opacity: 0;
	transform: translateX(100px);
	}
	to {
    opacity: 1;
	transform: translateX(0);
	}
	}
	
	/*その場で*/
	.fadeIn-top{
	animation-name:fadeInAnime;
	animation-duration:1.1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeInAnime{
	from {
    opacity: 0;
	}
	to {
    opacity: 1;
	}
	}
	
	/* ぼかしから出現 */
	.blur-onetop{
    animation-name:blurAnime;
    animation-duration:0.7s;
    animation-fill-mode:forwards;
	}
    @keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
	}
	to {
	filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
    }
}
@media screen and (max-width: 640px) {
	.box{
	opacity: 0;
	}
	/*ディレイ*/
	.delay-time-top-01{
	animation-delay: 0.3s;
	}
	.delay-time-top-02{
	animation-delay: 0.7s;
	}
	.delay-time-top-03{
	animation-delay: 1s;
	}
	.delay-time-top-04{
	animation-delay: 1.2s;
	}
	
	/*下から*/
	.fadeUp-top {
	animation-name:fadeUpAnime;
    animation-duration:0.7s;
    animation-fill-mode:forwards;
    opacity: 0;
	}
	@keyframes fadeUpAnime{
    from {
    opacity: 0;
	transform: translateY(100px);
	}
	to {
    opacity: 1;
	transform: translateY(0);
	}
	}
	
	/*左から*/
	.fadeLeft-top{
	animation-name:fadeLeftAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeLeftAnime{
	from {
    opacity: 0;
	transform: translateX(-100px);
	}
	to {
    opacity: 1;
	transform: translateX(0);
	}
	}
	
	/* 右から */
	.fadeRight-top{
	animation-name:fadeRightAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeRightAnime{
	from {
    opacity: 0;
	transform: translateX(100px);
	}
	to {
    opacity: 1;
	transform: translateX(0);
	}
	}

	/*その場で*/
	.fadeIn-top{
	animation-name:fadeInAnime;
	animation-duration:1.1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeInAnime{
	from {
    opacity: 0;
	}
	to {
    opacity: 1;
	}
	}
	
	/* ぼかしから出現 */
	.blur-onetop{
    animation-name:blurAnime;
    animation-duration:0.7s;
    animation-fill-mode:forwards;
	}
    @keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
	}
	to {
	filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
    }
}