@charset "UTF-8";
/* CSS Document */
/*ローディング*/
.loading_splash{   position: fixed;  width: 100%;  height: 100%;  z-index: 99999;   }
.loading_splash_logo {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}
.loading_splash_logo img {  width:280px;}
.loading_splash_fadeUp{animation-name: loading_splash_fadeUp;animation-duration:0.5s;animation-fill-mode:forwards;opacity: 0;}
@keyframes loading_splash_fadeUp{
  from {    opacity: 0;  transform: translateY(50px);  }
  to {    opacity: 1;  transform: translateY(0);  }
}

.loading{  position: fixed;  top: 0;  left: 0;  margin: 0 auto;  width: 100%;  height: 100vh;}
.loading2{  position: fixed;  top: 0;  left: 0;  margin: 0 auto;  width: 100%;  height: 100vh;}
.loading{  z-index: 99997;  background:#0047D0;  animation-duration: 1.2s;  animation-delay:2.4s;  animation-fill-mode: forwards;  animation-name: top-op;}
.loading2{  z-index: 99998;  background:white ;  animation-duration: 0.7s;  animation-delay: 1.6s;  animation-fill-mode: forwards;  animation-name: top-op2;}
.loading_logo img{width: 280px}
@keyframes top-op{
	0% {  width: 100%;  left:0;}
	50% {  width: 100%;}
	100% {  width: 0%;  left: 100%;}
}
@keyframes top-op2{
	0% {  width: 100%;  left:0;}
	50% {  width: 100%;}
	100% {  width: 0%;  left: 100%;}
}

/*読み込み時*/
.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; }
}

.logo_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:logo_animation; 
    animation-name:logo_animation; 
    visibility: visible !important;
}
@keyframes logo_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:2s; 
    -ms-animation-duration:2s; 
    animation-duration:2s; 	
	-webkit-animation-delay:1.6s; /* アニメーション開始時間 */
	-ms-animation-delay:1.6s;
	animation-delay:1.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); }
	
  100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);  }
}

.catch02_animation {
    -webkit-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:2s; 
    -ms-animation-duration:2s; 
    animation-duration:2s; 	
	-webkit-animation-delay: 1.8s; /* アニメーション開始時間 */
	-ms-animation-delay:1.8s;
	animation-delay:1.8s;	
    -webkit-animation-name:catch02_animation; 
    animation-name:catch02_animation; 
    visibility: visible !important;
}
@keyframes catch02_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); }
}

.curtain_animation{position: relative;width: 100%;  height: 100%;}
.curtain_animation::before{  content: "";  position: absolute;top: 0;  right: 0;  width: 100%;  height: 100%;  background: white;animation:curtain_animation 1s forwards;  animation-delay:0.3s;}
@keyframes curtain_animation{
  0%{    width: 100%;  }
  100%{     width: 0;  visibility: hidden; }
}

/*スクロール時*/
.fadeup01{opacity: 0; transition: all .5s linear 0.4s/*←開始時間*/; transform: translateY(30px);  }
.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;}