@charset "utf-8";



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

#visualHanger ul{
	position: relative;
	height: calc(100vh - 100px);
	background: url("../img/top/loading.gif") no-repeat center center #F6F6F6;
}
#visualHanger ul li{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: none;
	opacity: 0;
}
#visualHanger ul li img{display: none;}
#visualHanger ul li.new::before{
	position: absolute;
	content: 'NEW';
	width: 110px;
	height: 110px;
	top: 30px;
	right: 30px;
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: #FFFFFF;
	background: #FF2626;
	border-radius: 10.0rem;
	display:-webkit-box;
  	display:flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}


#visualHanger ul li:nth-of-type(1){
	background: url("../img/top/visual1.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:nth-of-type(2){
	background: url("../img/top/visual7.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:nth-of-type(3){
	background: url("../img/top/visual2.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:nth-of-type(4){
	background: url("../img/top/visual3.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:nth-of-type(5){
	background: url("../img/top/visual4.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:nth-of-type(6){
	background: url("../img/top/visual5.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:nth-of-type(7){
	background: url("../img/top/visual6.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:nth-of-type(8){
	background: url("../img/top/visual8.jpg") no-repeat center center;
	background-size: cover;
}
#visualHanger ul li:nth-of-type(9){
	background: url("../img/top/visual9.jpg") no-repeat center center;
	background-size: cover;
}




#visualCopy{
	position: absolute;
	width: 100%;
	padding-top: 60px;
	height: 100%;
	top: 0;
	/*left: 120px;*/
	left: 0;
	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: 10;
}
#visualCopy dl{opacity: 0;}
#visualCopy dl dt{
	font-size: 4.0rem;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 8px;
}
#visualCopy dl dd{
	position: relative;
	font-size: 1.7rem;
	letter-spacing: 2px;
	text-align: right;
	padding: 0 30px 0 0;
	margin: 30px 0 0 0;
}
#visualCopy dl dd::before{
	position: absolute;
	content: '';
	width: 0;
	height: 1px;
	top: 50%;
	left: 0;
	background-color: #000000;
}
#visualCopy dl span{
	position: relative;
	opacity: 0;
}
#visualCopy dl span.show{animation: effect1 0.5s ease-in-out forwards}
#visualCopy dl dd.Show::before{animation: effect2 0.25s ease-in-out forwards 0.5s}
@keyframes effect1{
	0% {
		opacity: 0;
		filter: blur(5px);
	}
	100% {
		opacity: 1;
		filter: blur(0px);
	}
}
@keyframes effect2{
	0% {
		width: 0;
	}
	100% {
		width: 160px;
	}
}

#thumbNails{
	margin: 30px 0 0 0;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#thumbNails span{
	width: 16px;
	height: 16px;
	border-radius: 10.0rem;
	background-color: #CCCCCC;
	margin: 0 10px;
	cursor: pointer;
}
#thumbNails span.cur{
	background-color: #121212;
	pointer-events: none;
}



/**************************************************
 h2
**************************************************/
h2{
	font-family: 'Roboto', sans-serif;
	font-size: 4.0rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-align: center;
}
h2 span{
	position: relative;
	padding: 0 50px;
}
h2 span::before,
h2 span::after{
	position: absolute;
	content: '';
	width: 1px;
	height: 50px;
	background-color: #000000;
}
h2 span::before{
	top: -12px;
	left: 0;
}
h2 span::after{
	top: 9px;
	right: 0;
}



/**************************************************
 h3
**************************************************/
h3{
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 2px;
	text-align: center;
	padding-bottom: 50px;
	border-bottom: 1px solid #333333;
	width: calc(100% - 450px);
	margin: 100px auto 0 auto;
}



/**************************************************
 concept
**************************************************/
#concept{padding: 100px 0;}

#concept dl{
	text-align: center;
	margin-top: 90px;
}
#concept dl dt{
	font-size: 3.5rem;
	line-height: 1.6;
	letter-spacing: 6px;
}
#concept dl dd{
	font-size: 1.6rem;
	line-height: 2.0;
	letter-spacing: 2px;
	margin: 50px 0 0 0;
}



/**************************************************
 products
**************************************************/
#products{
	padding: 100px 0;
	background-color: #F6F6F6;
}

#products ul{
	margin: 50px 0 0 0;
	padding: 0 60px;
	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;
}
#products ul.style1{margin: 20px 0 0 0;}
#products ul li{
	width: calc((100% - 400px) / 3);
	margin: 40px 25px 0 25px;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
}
#products ul li a{
	position: relative;
	color: #000000;
	display: block;
}
#products ul li a:hover{opacity: 0.5;}
#products ul li a.new::before{
	position: absolute;
	content: 'NEW';
	width: 60px;
	height: 60px;
	top: -10px;
	left: -10px;
	font-size: 1.4rem;
	color: #FFFFFF;
	background: #FF2626;
	border-radius: 10.0rem;
	display:-webkit-box;
  	display:flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}
#products ul li a span{
	display: block;
	padding: 20px;
	background-color: #FFFFFF;
	-webkit-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
#products ul li a span img{width: 100%;}
#products ul li a small{
	display: block;
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0;
	padding: 17px 0 12px 0;
	-webkit-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
#products ul li a:hover span{box-shadow: 0 0 15px #CCCCCC;}
#products ul li a:hover small{opacity: 0.5;}






/**************************************************
 Responsive
**************************************************/
@media screen and (max-width: 690px){
	
	
	
/**************************************************
 visualHanger
**************************************************/
#visualHanger ul{height: calc(100vh - 60px);}
	
#visualHanger ul li.new::before{
	width: 80px;
	height: 80px;
	top: 15px;
	right: 15px;
	font-size: 2.0rem;
	letter-spacing: 1px;
}

#visualCopy{
	left: 0;
	width: 100%;
	height: 50%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#visualCopy dl dt{
	font-size: 2.8rem;
	letter-spacing: 5px;
}
#visualCopy dl dd{
	font-size: 1.4rem;
	letter-spacing: 1px;
	padding: 0 20px 0 0;
	margin: 25px 0 0 0;
}
@keyframes effect2{
	0% {
		width: 0;
	}
	100% {
		width: 100px;
	}
}

#thumbNails{margin: 20px 0 0 0;}
#thumbNails span{
	width: 12px;
	height: 12px;
	margin: 0 6px;
}



/**************************************************
 h2
**************************************************/
h2{
	font-size: 2.5rem;
	letter-spacing: 1px;
}
h2 span{padding: 0 25px;}
h2 span::before,
h2 span::after{height: 40px;}
h2 span::before{top: -15px;}
h2 span::after{top: 6px;}
	
/**************************************************
 h3
**************************************************/
h3{
	font-size: 2.0rem;
	letter-spacing: 1px;
	padding-bottom: 30px;
	width: 100%;
	margin: 70px auto 0 auto;
}



/**************************************************
 concept
**************************************************/
#concept{padding: 70px 20px 50px 20px;}

#concept dl{margin-top: 50px;}
#concept dl dt{
	font-size: 2.1rem;
	letter-spacing: 3px;
}
#concept dl dd{
	font-size: 1.4rem;
	letter-spacing: 0;
	margin: 30px 0 0 0;
	padding: 0;
	text-align: left;
}



/**************************************************
 products
**************************************************/
#products{padding: 50px 20px;}

#products ul{
	margin: 30px 0 0 0;
	padding: 0;
}
#products ul li{
	width: calc(50% - 6px);
	margin: 20px 0 0 0;
	font-size: 1.3rem;
}
#products ul li:nth-child(2n){margin: 20px 0 0 12px;}
#products ul li a.new::before{
	width: 50px;
	height: 50px;
	top: -8px;
	left: -8px;
	font-size: 1.3rem;
}
#products ul li a span{padding: 15px;}
#products ul li a small{
	font-size: 1.0rem;
	padding: 14px 0 9px 0;
}
#products ul li a:hover span{box-shadow: 0 0 7px #CCCCCC;}
	
	
	
}