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

@media screen and (min-width: 641px) {
	.box{
	opacity: 0;
	}
	/*ディレイ*/
	.delay-time-top-01{
	animation-delay: 0.8s;
	}
	.delay-time-top-02{
	animation-delay: 1.6s;
	}
	.delay-time-top-03{
	animation-delay: 2.4s;
	}
	.delay-time-top-04{
	animation-delay: 3s;
	}
	
	/*その場で*/
	.fadeIn-top{
	animation-name:fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeInAnime{
	from {
    opacity: 0;
	}
	to {
    opacity: 1;
	}
	}
	
	/* ぼかしから出現 */
	.blur-onetop{
    animation-name:blurAnime;
    animation-duration:1s;
    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;
    }
    }
	
	/* ぼかしから出現 */
	.blur-onetop02{
    animation-name:blurAnime;
    animation-duration:2s;
    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.8s;
	}
	.delay-time-top-02{
	animation-delay: 1.6s;
	}
	.delay-time-top-03{
	animation-delay: 2.4s;
	}
	.delay-time-top-04{
	animation-delay: 3s;
	}
	
	/*その場で*/
	.fadeIn-top{
	animation-name:fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeInAnime{
	from {
    opacity: 0;
	}
	to {
    opacity: 1;
	}
	}
	
	/* ぼかしから出現 */
	.blur-onetop{
    animation-name:blurAnime;
    animation-duration:1s;
    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;
    }
    }
	
	/* ぼかしから出現 */
	.blur-onetop02{
    animation-name:blurAnime;
    animation-duration:2s;
    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;
    }
    }
}