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

/*読み込み時*/
.movie_animation {
    -webkit-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:0.8s; 
    -ms-animation-duration:0.8s; 
    animation-duration:0.8s; 	
	-webkit-animation-delay:0.3s; /* アニメーション開始時間 */
	-ms-animation-delay:0.3s;
	animation-delay:0.3s;	
    -webkit-animation-name:movie_animation; 
    animation-name:movie_animation; 
    visibility: visible !important;
}
@keyframes movie_animation{ 
    0% { opacity: 0;}
    100% { opacity: 1; }
}

.menu_animation {
    -webkit-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:1.2s; 
    -ms-animation-duration:1.2s; 
    animation-duration:1.2s; 	
	-webkit-animation-delay: 0.8s; /* アニメーション開始時間 */
	-ms-animation-delay: 0.8s;
	animation-delay: 0.8s;	
    -webkit-animation-name:menu_animation; 
    animation-name:menu_animation; 
    visibility: visible !important;
}
@keyframes menu_animation{ 
    0% { opacity: 0; /*-webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px);*/ }   
    100% { opacity: 1;/* -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);*/ }
}

.catch01_animation {
    -webkit-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:0.4s; 
    -ms-animation-duration:0.4s; 
    animation-duration:0.4s; 	
	-webkit-animation-delay:3.6s; /* アニメーション開始時間 */
	-ms-animation-delay:3.6s;
	animation-delay:3.6s;	
    -webkit-animation-name:catch01_animation; 
    animation-name:catch01_animation; 
	visibility: visible !important;
}
@keyframes catch01_animation {
  0% {  opacity: 0; /*-webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px);*/ position: absolute;top: 50%;left:5%;transform: translateY(-50%);}	
  100% { opacity: 1; /*-webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);*/   position: absolute;top: 50%;left:10%;transform: translateY(-50%);}
}

.zoomIn{	animation-name:zoomInAnime;	animation-duration:0.5s;	animation-fill-mode:forwards;animation-delay:2.0s;	}
@keyframes zoomInAnime{
  from {opacity: 0; 	transform: scale(0.6);  }
  to {     opacity: 1;  transform: scale(1);  }
}

/*スクロール時*/
.slidein01{opacity: 0; transition: all .2s linear .4s/*←開始時間*/;  transform: translateY(50px); }
.slidein01.active{opacity: 1;transform: translateY(0);	}

.fadeup01{opacity: 0; transition: all .5s linear 0.8s/*←開始時間*/; transform: translateY(0px);  }
.fadeup02{opacity: 0; transition: all .5s linear 0.5s/*←開始時間*/; transform: translateY(30px);  }
.fadeup03{opacity: 0; transition: all .5s linear 0.6s/*←開始時間*/; transform: translateY(30px);  }
.fadeup04{opacity: 0; transition: all .5s linear 0.7s/*←開始時間*/; transform: translateY(30px);  }
.fadeup05{opacity: 0; transition: all .5s linear 0.8s/*←開始時間*/; transform: translateY(30px);  }
.fadeup06{opacity: 0; transition: all .5s linear 0.9s/*←開始時間*/; transform: translateY(30px);  }
.fadeup07{opacity: 0; transition: all .5s linear 1.0s/*←開始時間*/; transform: translateY(30px);  }
.fadeup08{opacity: 0; transition: all .5s linear 1.1s/*←開始時間*/; transform: translateY(30px);  }
.fadeup09{opacity: 0; transition: all .5s linear 1.2s/*←開始時間*/; transform: translateY(30px);  }
.fadeup10{opacity: 0; transition: all .5s linear 1.3s/*←開始時間*/; transform: translateY(30px);  }
.fadeup01.active,.fadeup02.active,.fadeup03.active,.fadeup04.active,.fadeup05.active,.fadeup06.active,.fadeup07.active,.fadeup08.active,.fadeup09.active,.fadeup10.active{	opacity: 1;		transform: translateY(0);     }

.blur01{opacity: 0; transition: all .6s linear 0.6s/*←開始時間*/; filter: blur(10px);  transform: scale(1.1);  }
.blur01.active{	opacity: 1;		 filter: blur(0);  transform: scale(1);    }

.rotate01{opacity: 0; transition: all .8s linear 1.2s/*←開始時間*/;transform: rotate(320deg);  }
.rotate01.active{	opacity: 1;		transform: rotate(360deg);    }

.curtain{  position: relative;  width: 100%;  height: auto;  overflow: hidden;}
.curtain::before{    content: '';    width: 100%;    height: 100%;    position: absolute;    left: 0;    top: 0;    background:black;    z-index: 2;    transition: 1.0s;}
.curtain.active::before{    transform: translateX(100%);}
.curtain img{    opacity: 1;    transition: 1.0s;}
.curtain.active img{    opacity: 1;}	

.zoom01{opacity: 0; transition: all .3s linear .8s/*←開始時間*/; transform: scale(0.6);/*	animation-duration:0.5s;	animation-fill-mode:forwards;*/}
.zoom01.active{opacity: 1;  transform: scale(1); 	}

.zoom02{opacity: 0; transition: all .3s linear 1.2s/*←開始時間*/; transform: scale(0.6);/*	animation-duration:0.5s;	animation-fill-mode:forwards;*/}
.zoom02.active{opacity: 1;  transform: scale(1); 	}