@charset "UTF-8";
/* CSS Document */
#section-top {
	width: 100%;
	height: 100vh;
	background-image: url(../../img/upimage.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	position: absolute;
	top:0;
	opacity: 0;
	z-index: -1;
	transform : translateY(10px);
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
	transition : all 1s;
}
#section00.action-top{
	-webkit-animation: anime01 2s ease-in-out;
    animation: anime01 2s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime01 {
  0% {
        opacity: 1;
	}
	30%{
		opacity: 0.4;
		transform: translate(0, -200px) scale(5);
	}
	 40% { 
		opacity: 0;
		transform: translate(0, -200px) scale(5);
	}
    100% { 
		opacity: 0;
		transform: translate(0, -200px) scale(5);
	}
}


#section00.action-top02{
	-webkit-animation: anime01-b 1s ease-in-out;
    animation: anime01-b 1s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime01-b {
	 
	0% { 
		opacity: 0;
		transform: translate(0, -200px) scale(5);
	}
	 60% { 
		opacity: 0;
		transform: translate(0, -200px) scale(5);
	}
	70%{
		opacity: 0.4;
		transform: translate(0, -200px) scale(5);
	}
  100% {
        opacity: 1;
	}
	
	
   
}

#section00-effect01 {
	width: 100%;
	height: 100vh;
	position: absolute;
	z-index: 1000;
	opacity: 0;
	left: 0;
	top: 0;
	background-image: url(../../img/normal-blur.jpg);
	background-size: cover;
	background-position: center center;
}
#section00-effect01.action-top{
	-webkit-animation: anime-nt 2s ease-in-out;
    animation: anime-nt 2s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-nt {
  0% {
         opacity: 0.2;
    }
	30%{
		opacity: 0.4;
		transform: translate(0, -200px) scale(5);
	}
	40%{
		opacity: 0;
		transform: translate(0, -200px) scale(5);
	}
    100% {
		opacity: 0;
		transform: translate(0, -200px) scale(5);
    }
}
#section00-effect01.action-top02{
	-webkit-animation: anime-tn 1s ease-in-out;
    animation: anime-tn 1s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-tn {
  0% {
		opacity: 0;
		transform: translate(0, -200px) scale(5);
    }
	60%{
		opacity: 0;
		transform: translate(0, -200px) scale(5);
	}
	70%{
		opacity: 0.4;
		transform: translate(0, -200px) scale(5);
	}
	100% {
         opacity: 0;
    }
	
	
    
}

#section-top.action-top{
	-webkit-animation: anime-top01 2s ease-in-out;
    animation: anime-top01 2s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-top01 {
  0% {
        opacity: 0;
    }
	5% {
        opacity: 0;
		z-index: 1;
		filter: blur(10);
		transform : translateY(0px) scale(1);
    }
    30% { 
		opacity: 1;
		transform : translateY(0px) scale(1.2);
		z-index: 2;
		filter: blur(0);
	}
	100% { 
		opacity: 1;
		transform : translateY(0px) scale(1);
		z-index: 2;
		filter: blur(0);
	}
}
#section-top.action-top02{
	-webkit-animation: anime-top01-b 1s ease-in-out;
    animation: anime-top01-b 1s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-top01-b {
	0% { 
		opacity: 1;
		transform : translateY(0px) scale(1);
		z-index: 2;
		filter: blur(0);
	}
	70% { 
		opacity: 1;
		transform : translateY(0px) scale(1.5);
		z-index: 2;
		filter: blur(0);
	}
	95% {
        opacity: 0;
		z-index: 1;
		filter: blur(10);
		transform : translateY(0px) scale(1);
    }
  100% {
        opacity: 0;
    }
	
    
	
}
#section-top-light {
	width: 100%;
	height: 100vh;
	background-image: url("../../img/top-light.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	position: absolute;
	mix-blend-mode: multiply;
	top:0;
	opacity: 0;
	z-index: 3;
}
#section-top-light.action-top{
	-webkit-animation: anime-top-light 2s 2s ease-in-out;
    animation: anime-top-light 2s 2s ease-in-out; 
	animation-fill-mode: forwards;
}

@keyframes anime-top-light {
	0% { 
		opacity: 0;
	}
	
  100% {
        opacity: 1;
    }
}
#section-top-light.action-top02{
	-webkit-animation: anime-top-light-b 0.5s ease-in-out;
    animation: anime-top-light-b 0.5s ease-in-out; 
	animation-fill-mode: forwards;
}

@keyframes anime-top-light-b {
	0% { 
		opacity: 1;
	}
	70% { 
		opacity: 0;
		transform : translateY(0px) scale(1.2);
	}
  100% {
        opacity: 0;
    }
}
.contents01.action-top{
	-webkit-animation: anime-top-cont 4s ease-in-out;
    animation: anime-top-cont 4s ease-in-out; 
	animation-fill-mode: forwards;
}

@keyframes anime-top-cont {
	0% { 
		opacity: 0;
		z-index: 5;
	}
	75% { 
		opacity: 0;
	}
  100% {
        opacity: 1;
    }
}
.contents01.action-top02{
	-webkit-animation: anime-top-cont02 2s ease-in-out;
    animation: anime-top-cont02 2s ease-in-out; 
	animation-fill-mode: forwards;
}

@keyframes anime-top-cont02 {
	 0% {
        opacity: 1;
    }25% { 
		opacity: 0;
	}
	100% { 
		opacity: 0;
		z-index: -1;
	}
	
 
}