@charset "utf-8";


/* トップページアニメーション */

#next {
	position: fixed;
	z-index: 9002;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;	
}

#next a{
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;	
}

#next a p{
	margin-top: 20%;
	font-size: 2.6rem;
	color: #ccc;
	transform-origin:center center;
	animation: next 5.0s 1 ease-in;
	-webkit-transform-origin:center center;
	-webkit-animation: next 5.0s 1 ease-in;
	-moz-transform-origin:center center;
	animation: next 5.0s 1 ease-in;	
}


#start {
	background: #fff!important;
	position: fixed;
	z-index: 9001;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
}

#next.active, #start.active{
	height: 0;
	width: 0;
	display: none;
}


@keyframes next {
	0%{
		opacity: 0;
	}
	70%{
		opacity: 0;
	}
    100% {
		opacity: 1;
    }
}
@-webkit-keyframes next {
	0%{
		opacity: 0;
	}
	70%{
		opacity: 0;
	}
    100% {
		opacity: 1;
    }
}
@-moz-keyframes next{
	0%{
		opacity: 0;
	}
	70%{
		opacity: 0;
	}
    100% {
		opacity: 1;
    }
}


#start > div{
	display: flex;
	align-items: center;
}

#start .logo01{
	width: 40%;
	overflow: hidden;
	justify-content: flex-end;	
}

#start .logo02{
	width: 60%;
	overflow: hidden;
}

#start .logo01 img{
	width: 100%;
	height: auto;
	transform-origin:center center;
	animation: logo01b 1.2s 2 linear;	
	-webkit-transform-origin:center center;
	-webkit-animation: logo01b 1.2s 2 linear;
	-moz-transform-origin:center center;
	-moz-animation: logo01b 1.2s 2 linear;
}

#start .logo01 > div{
	width: 31%;
	transform-origin:center center;
	animation: logo01 4.5s 1 ease-in;
	-webkit-transform-origin:center center;
	-webkit-animation: logo01 4.5s 1 ease-in;
	-moz-transform-origin:center center;
	animation: logo01 4.5s 1 ease-in;	
}

#start .logo01 > div > div{
	width: 100%;
	transform-origin:center center;
	animation: logo01c 0.8s 3 ease-in;
	-webkit-transform-origin:center center;
	-webkit-animation: logo01c 0.8s 3 ease-in;
	-moz-transform-origin:center center;
	animation: logo01c 0.8s 3 ease-in;	
}


#start .logo02 img{
	width: 55%;
	height: auto;	
/*
	transform-origin:center center;
	animation: logo02 4.5s 1;
	-webkit-transform-origin:center center;
	-webkit-animation: logo02 4.5s 1;
	-moz-transform-origin:center center;
	-moz-animation: logo02 4.5s 1;	
*/
}

@keyframes logo01{
0%{transform:translate(-400%,0px);}
50%{transform:translate(0px,0px);}
}
@-webkit-keyframes logo01{
0%{-webkit-transform:translate(-400%,0px);}
50%{-webkit-transform:translate(0px,0px);}
}
@-moz-keyframes logo01{
0%{-moz-transform:translate(-400%,0px);}
50%{-moz-transform:translate(0px,0px);}
}

@keyframes logo01b{
100%{transform:rotate(360deg);}
}
@-webkit-keyframes logo01b{
100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes logo01b{
100%{-moz-transform:rotate(360deg);}
}

@keyframes logo01c{
0%{transform:translate(0px,0);}
50%{transform:translate(0px,-50%);}
}
@-webkit-keyframes logo01c{
0%{transform:translate(0px,0);}
50%{transform:translate(0px,-50%);}
}
@-moz-keyframes logo01c{
0%{transform:translate(0px,0);}
50%{transform:translate(0px,-50%);}
}




@media(max-width:768px) {

#next a p{
	margin-top: 28%;
	font-size: 1.8rem;
}

}