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

@media screen and (min-width: 641px) {
	.box{
	opacity: 0;
	}
	/*ディレイ*/
	.delay-time-top-01{
	animation-delay: 0.5s;
	}
	.delay-time-top-01-1{
	animation-delay: 0.6s;
	}
	.delay-time-top-02{
	animation-delay: 0.8s;
	}
	.delay-time-top-03{
	animation-delay: 1.1s;
	}
	
	/*下から*/
	.fadeUp-top {
	animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
	}
	@keyframes fadeUpAnime{
    from {
    opacity: 0;
	transform: translateY(100px);
	}
	to {
    opacity: 1;
	transform: translateY(0);
	}
	}
	
	/* 上から */
	.fadeDown{
    animation-name:fadeDownAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    @keyframes fadeDownAnime{
    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:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeInAnime{
	from {
    opacity: 0;
	}
	to {
    opacity: 1;
	}
	}
	
	/* ぼかしから出現 */
	.blur-onetop{
    animation-name:blurAnime;
    animation-duration:0.5s;
    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;
    }
    }
	
	/* 拡大 */
	.zoomIn{
		animation-name:zoomInAnime;
		animation-duration:0.5s;
		animation-fill-mode:forwards;
	}
	@keyframes zoomInAnime{
		from {
			transform: scale(0.6);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	/* 下へ */
	.flipDown{
		animation-name:flipDownAnime;
		animation-duration:1s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	@keyframes flipDownAnime{
		from {
			transform: perspective(2500px) rotateX(100deg);
			opacity: 0;
		}
	to {
		transform: perspective(2500px) rotateX(0);
		opacity: 1;
		}
	}
}
@media screen and (max-width: 640px) {
	.box{
	opacity: 0;
	}
	/*ディレイ*/
	.delay-time-top-01{
	animation-delay: 0.5s;
	}
	.delay-time-top-01-1{
	animation-delay: 0.6s;
	}
	.delay-time-top-02{
	animation-delay: 0.8s;
	}
	.delay-time-top-03{
	animation-delay: 1.1s;
	}
	
	/*下から*/
	.fadeUp-top {
	animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
	}
	@keyframes fadeUpAnime{
    from {
    opacity: 0;
	transform: translateY(100px);
	}
	to {
    opacity: 1;
	transform: translateY(0);
	}
	}
	
	/* 上から */
	.fadeDown{
    animation-name:fadeDownAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    @keyframes fadeDownAnime{
    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:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeInAnime{
	from {
    opacity: 0;
	}
	to {
    opacity: 1;
	}
	}
	
	/* ぼかしから出現 */
	.blur-onetop{
    animation-name:blurAnime;
    animation-duration:0.5s;
    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;
    }
    }
	
	/* 拡大 */
	.zoomIn{
		animation-name:zoomInAnime;
		animation-duration:0.5s;
		animation-fill-mode:forwards;
	}
	@keyframes zoomInAnime{
		from {
			transform: scale(0.6);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	/* 下へ */
	.flipDown{
		animation-name:flipDownAnime;
		animation-duration:1s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	@keyframes flipDownAnime{
		from {
			transform: perspective(2500px) rotateX(100deg);
			opacity: 0;
		}
	to {
		transform: perspective(2500px) rotateX(0);
		opacity: 1;
		}
	}
}