@charset "UTF-8";

/*color_area title*/
#color_area h1{
	margin:70px 0 0;
	padding:50px 20px;
	background-color:#000;
	color:#fff;
	text-align:center;
	font-size:25px;
	line-height:1;
	font-weight:normal;
}

#color_area h1 span{
	display:block;
	margin:10px 0 0;
	font-size:12px;
}

@media only screen and (max-width:1000px){
	#color_area h1{
		padding:40px 20px;
		font-size:22px;
	}
	
	#color_area h1 span{
		font-size:10px;
	}
}

@media only screen and (max-width:660px){
	#color_area h1{
		margin:64px 0 0;
		padding:30px;
		font-size:18px;
	}
}

@media only screen and (max-width: 414px){
	#color_area h1{
		margin:82px 0 0;
	}
}

/*color_list*/
#color_list{
	padding:100px 20px;
}

#color_list section{
	max-width:1200px;
	margin:0 auto 50px;
	overflow:hidden;
}

#color_list section h2{
	width:140px;
	margin:0;
	text-align:right;
	font-family:'Roboto', sans-serif;
	font-size:14px;
	line-height:1.5em;
	font-weight:500;
	float:left;
}

#color_list section h2 a:link,
#color_list section h2 a:visited{
	color:#000;
	text-decoration:none;
	transition:.2s;
}

#color_list section h2 a:hover,
#color_list section h2 a:active{
	opacity:0.9;
}

#color_list section ul{
	box-sizing:border-box;
	width:calc(100% - 160px);
	margin:0;
	padding:0 0 0 20px;
	border-left:1px solid #ddd;
	list-style-type:none;
	float:right;
}

#color_list section ul li{
	width:calc(33.33333333% - 40px);
	float:left;
	margin:0 60px 20px 0;
}

#color_list section ul li:nth-of-type(3n){
	margin:0 0 20px 0;
}

#color_list section ul li:last-child{
	margin:0;
}

#color_list section ul li:nth-last-child(2):nth-of-type(1+3n),
#color_list section ul li:nth-last-child(2):nth-of-type(2+3n){
	margin:0 60px 0 0;
}

#color_list section ul li:nth-last-child(3):nth-of-type(1+3n),
#color_list section ul li:nth-last-child(3):nth-of-type(2+3n){
	margin:0 60px 0 0;
}

#color_list section ul li a:link,
#color_list section ul li a:visited{
	display:flex;
	justify-content:space-between;
	align-items:center;
	color:#000;
	text-decoration:none;
	transition:.2s;
}

#color_list section ul li a:hover,
#color_list section ul li a:active{
	opacity:0.9;
}

#color_list section ul li a img{
	width:100px;
	height:auto;
	vertical-align:bottom;
}

#color_list section ul li a p{
	width:calc(100% - 110px);
	margin:0;
	font-size:12px;
	line-height:1.3;
}

#color_list section ul li a p span{
	display:block;
	word-break:break-all;
}

#color_list section ul li a p span.en{
	font-family:'Roboto',sans-serif;
	font-size:13px;
	font-weight:400;
}

@media only screen and (min-width:661px) and (max-width:1200px){
	#color_list section ul li{
		width:calc(50% - 10px);
		margin:0 20px 20px 0;
	}
	
	#color_list section ul li:nth-of-type(3n){
		margin:0 20px 20px 0;
	}
	
	#color_list section ul li:nth-last-child(2):nth-of-type(1+3n),
	#color_list section ul li:nth-last-child(2):nth-of-type(2+3n){
		margin:0 20px 20px 0;
	}
	
	#color_list section ul li:nth-last-child(3):nth-of-type(1+3n),
	#color_list section ul li:nth-last-child(3):nth-of-type(2+3n){
		margin:0 20px 20px 0;
	}
	
	#color_list section ul li:nth-of-type(2n){
		margin:0 0 20px 0;
	}
	
	#color_list section ul li:nth-last-child(2):nth-of-type(1+2n){
		margin:0 20px 0 0;
	}
	
	#color_list section ul li:nth-last-child(2):nth-of-type(2+2n){
		margin:0 0 20px 0;
	}
}

@media only screen and (max-width:660px){
	#color_list{
		padding:60px 20px;
	}
	
	#color_list section{
		margin:0 0 40px;
	}
	
	#color_list section h2{
		width:100%;
		margin:0 0 15px;
		padding:0 0 8px;
		border-bottom:1px solid #ddd;
		text-align:left;
		font-size:14px;
		line-height:1.4em;
		float:none;
	}
	
	#color_list section ul{
		width:100%;
		margin:10px 0 0;
		padding:0;
		border-left:none;
		float:none;
	}
	
	#color_list section ul li{
		width:calc(50% - 10px);
		margin:0 20px 10px 0;
	}
	
	#color_list section ul li:nth-of-type(3n){
		margin:0 20px 10px 0;
	}
	
	#color_list section ul li:nth-last-child(2):nth-of-type(1+3n),
	#color_list section ul li:nth-last-child(2):nth-of-type(2+3n){
		margin:0 20px 10px 0;
	}
	
	#color_list section ul li:nth-last-child(3):nth-of-type(1+3n),
	#color_list section ul li:nth-last-child(3):nth-of-type(2+3n){
		margin:0 20px 10px 0;
	}
	
	#color_list section ul li:nth-of-type(2n){
		margin:0 0 15px 0;
	}
	
	#color_list section ul li:nth-last-child(2):nth-of-type(1+2n){
		margin:0 20px 0 0;
	}
	
	#color_list section ul li:nth-last-child(2):nth-of-type(2+2n){
		margin:0 0 10px 0;
	}
	
	#color_list section ul li a:link,
	#color_list section ul li a:visited{
		align-items:flex-start;
	}
	
	#color_list section ul li a img{
		width:70px;
	}
	
	#color_list section ul li a p{
		width:calc(100% - 75px);
		font-size:11px;
	}
	
	#color_list section ul li a p span.en{
		font-size:12px;
	}
}