@charset "utf-8";



body{
	background-color: #0F131A;
	overflow: hidden;
}



/**************************************************
 loading
**************************************************/
#loading{
	position: absolute;
	width: 100%;
	height: 100vh;
	background-color: #0F131A;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 99991;
}
#loading img{
	width: 70px;
	opacity: 0;
}
#loading.show{animation: loading2 0.25s ease-in-out forwards 1.6s;}
#loading.show img{animation: loading1 1.5s linear forwards;}
@keyframes loading1{
	0% {
		transform: scale(0,0);
		opacity: 0;
	}
	6% {
		transform: scale(1.0,1.0);
		opacity: 1;
	}
	94% {
		transform: scale(1.0,1.0);
		opacity: 1;
	}
	100% {
		transform: scale(0,0);
		opacity: 0;
	}
}
@keyframes loading2{
	0% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
		visibility: hidden;
	}
}



/**************************************************
 header
**************************************************/
header{
	-webkit-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
header.on{background-color: #0F131A;}



/**************************************************
 visualHanger
**************************************************/
#visualHanger{position: relative;}

#visualHanger ul{
	position: relative;
	height: 100vh;
	overflow: hidden;
}
#visualHanger ul li{
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	opacity: 0;
}
#visualHanger ul li.Scale{
	display: block;
	animation:scaleAnimation 5.1s linear forwards;
}
@keyframes scaleAnimation{
	0% { transform: scale(1.0,1.0); }
	100% { transform: scale(1.07,1.07); }
}
#visualHanger ul li:first-child{
	background: url("../img/top/visual1.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:nth-child(2){
	background: url("../img/top/visual2.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:last-child{
	background: url("../img/top/visual3.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li img{display: none;}

.visualCopy{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-family: 'Noto Serif JP', serif;
	font-size: 4.0rem;
	font-weight: 600;
	letter-spacing: 6px;
	color: #FFFFFF;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 2;
}
.visualCopy span{text-shadow: #0F131A 0 0 12px;}
.visualCopy span br{display: none;}



/**************************************************
 main
**************************************************/
main{min-width: 1100px;}



/**************************************************
 article
**************************************************/
article{
	position: relative;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}

article h2{
	font-family: 'Roboto', sans-serif;
	font-size: 10.0rem;
	font-weight: 500;
	color: #FFFFFF;
}
article h2 span{display: block;}
article h2 small{
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 2px;
	margin: 20px 0 0 0;
	opacity: 0.5;
}

.more{
	font-family: 'Roboto', sans-serif;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 2px;
	text-align: right;
	margin: 80px 0 0 0;
	opacity: 0;
}
.more a{
	position: relative;
	color: #FFFFFF;
	padding-left: 170px;
}
.more a:hover{opacity: 0.5}
.more a:hover::before{animation: moreEffect 0.2s ease-in-out forwards;}
@keyframes moreEffect{
  	0%{
	  	width: 0;
	}
  	100%{
		width: 150px;
	}
}
.more a::before{
	position: absolute;
	content: '';
	width: 150px;
	height: 1px;
	top: 50%;
	left: 0;
	background-color: #FFFFFF;
}



/**************************************************
 company
**************************************************/
#company{
	padding: 80px;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

#company h2{text-align: right;}

.companyCont{
	position: relative;
	width: calc(62% - 80px);
	color: #FFFFFF;
	order: 2;
}
.companyCont h2 span,
.companyCont h2 small{opacity: 0;}
.companyCont h3{
	font-size: 3.5rem;
	font-weight: 700;
	letter-spacing: 4px;
	margin: 60px 0 0 0;
	opacity: 0;
}
.companyCont p{
	font-size: 1.8rem;
	letter-spacing: 2px;
	line-height: 2.0;
	margin: 30px 0 0 0;
	opacity: 0;
}
.companyCont.show h2 span{animation: effect1 0.25s ease-in-out forwards;}
.companyCont.show h2 small{animation: effect1 0.25s ease-in-out forwards 0.075s;}
.companyCont.show h3{animation: effect1 0.25s ease-in-out forwards 0.15s;}
.companyCont.show p{animation: effect1 0.25s ease-in-out forwards 0.3s;}
.companyCont.show .more{animation: effect1 0.25s ease-in-out forwards 0.45s;}

.companyPhoto{
	width: 38%;
	order: 1;
	overflow: hidden;
}
.companyPhoto img{
	width: 100%;
	opacity: 0;
}
.companyPhoto.show img{
	display: block;
	animation: companyImage 0.25s ease-in-out forwards;
}
@keyframes companyImage{
	0% {
		transform: scale(1.25,1.25);
		opacity: 0;
	}
	100% {
		transform: scale(1.0,1.0);
		opacity: 1;
	}
}



/**************************************************
 products
**************************************************/
#products{
	background-color: #242F3E;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.productsCont{
	width: 50%;
	padding: 80px;
}
.productsCont h2 span,
.productsCont h2 small{opacity: 0;}
.productsCont h3{
	margin: 60px 0 0 0;
	color: #FFFFFF;
}
.productsCont h3 small{
	display: block;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 2px;
	padding-bottom: 40px;
	opacity: 0;
}
.productsCont h3 span{
	position: relative;
	font-size: 3.8rem;
	font-weight: 500;
	letter-spacing: 4px;
	padding: 10px 40px;
	opacity: 0;
}
.productsCont h3 span::before,
.productsCont h3 span::after{
	position: absolute;
	content: '';
	width: 40px;
	height: 40px;
}
.productsCont h3 span::before{
	border-top: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
	top: 0;
	left: 0;
}
.productsCont h3 span::after{
	border-bottom: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	bottom: 0;
	right: 0;
}
.productsCont.show h2 span{animation: effect1 0.25s ease-in-out forwards;}
.productsCont.show h2 small{animation: effect1 0.25s ease-in-out forwards 0.075s;}
.productsCont.show h3 small{animation: effect1 0.25s ease-in-out forwards 0.15s;}
.productsCont.show h3 span{animation: effect1 0.25s ease-in-out forwards 0.35s;}
.productsCont.show .more{animation: effect1 0.25s ease-in-out forwards 0.45s;}

.productsPhoto{
	width: 50%;
	background: url("../img/top/products.jpg") no-repeat center center;
	background-size: cover;
	opacity: 0;
}
.productsPhoto img{display: none;}
.productsPhoto.show{
	display: block;
	animation: productsImage 0.25s ease-in-out forwards;
}
@keyframes productsImage{
	0% {
		background-size: auto 140%;
		opacity: 0;
	}
	100% {
		background-size: auto 115%;
		opacity: 1;
	}
}



/**************************************************
 effects
**************************************************/
@keyframes effect1{
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}






/**************************************************
 Responsive
**************************************************/
@media screen and (max-width: 690px){
	
	
	
/**************************************************
 loading
**************************************************/
#loading img{width: 60px;}
	
	
	
/**************************************************
 visualHanger
**************************************************/
.visualCopy{
	font-size: 2.4rem;
	letter-spacing: 3px;
	text-align: center;
	line-height: 1.4;
}
.visualCopy span br{display: block;}
	
	
	
/**************************************************
 main
**************************************************/
main{min-width: 100%;}



/**************************************************
 article
**************************************************/
article{
	position: relative;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}

article h2{font-size: 4.5rem;}
article h2 small{
	font-size: 1.5rem;
	margin: 20px 0 0 0;
	opacity: 0.5;
}

.more{
	text-align: center;
	margin: 100px 0 0 0;
}
.more a{padding: 45px 0 0 0;}
.more a:hover::before{animation: moreEffect 0.2s ease-in-out forwards;}
@keyframes moreEffect{
  	0%{
	  	height: 0;
	}
  	100%{
		height: 40px;
	}
}
.more a::before{
	width: 1px;
	height: 40px;
	top: 0;
	left: 50%;
}



/**************************************************
 company
**************************************************/
#company{padding: 35px 15px;}

#company h2{text-align: center;}

.companyCont{
	width: 100%;
	order: 1;
}
.companyCont h3{
	font-size: 2.2rem;
	letter-spacing: 2px;
	margin: 35px 0 0 0;
}
.companyCont p{
	font-size: 1.6rem;
	letter-spacing: 1px;
	margin: 20px 0 0 0;
}
.companyCont.show h2 span{animation: effect1 0.25s ease-in-out forwards;}
.companyCont.show h2 small{animation: effect1 0.25s ease-in-out forwards 0.075s;}
.companyCont.show h3{animation: effect1 0.25s ease-in-out forwards 0.15s;}
.companyCont.show p{animation: effect1 0.25s ease-in-out forwards 0.3s;}
.companyCont.show .more{animation: effect1 0.25s ease-in-out forwards 0.45s;}

.companyPhoto{
	width: 80%;
	order: 2;
	margin: 40px auto 0 auto;
}
.companyPhoto.show img{
	display: block;
	animation: companyImage 0.25s ease-in-out forwards 0.6s;
}



/**************************************************
 products
**************************************************/
#products h2{text-align: center;}
#products h2 small{margin: 10px 0 0 0;}
	
.productsCont{
	width: 100%;
	padding: 40px 15px;
}
.productsCont h3{
	margin: 40px 0 0 0;
	text-align: center;
}
.productsCont h3 small{font-size: 1.7rem;}
.productsCont h3 span{
	font-size: 2.8rem;
	letter-spacing: 3px;
	padding: 10px 25px;
}
.productsCont h3 span::before,
.productsCont h3 span::after{
	width: 30px;
	height: 30px;
}
.productsCont.show h2 span{animation: effect1 0.25s ease-in-out forwards;}
.productsCont.show h2 small{animation: effect1 0.25s ease-in-out forwards 0.075s;}
.productsCont.show h3 small{animation: effect1 0.25s ease-in-out forwards 0.15s;}
.productsCont.show h3 span{animation: effect1 0.25s ease-in-out forwards 0.35s;}
.productsCont.show .more{animation: effect1 0.25s ease-in-out forwards 0.45s;}

.productsPhoto{
	width: 100%;
	height: 70vw;
}
.productsPhoto.show{
	display: block;
	animation: productsImage 0.25s ease-in-out forwards 0.6s;
}

	
	
}