@charset "utf-8";
/* CSS Document */

div#cont-head{
	margin: 0 0 15px 0;
	overflow: hidden;
}

h2{
	margin: 0 10px 10px 0;
	font-size: 25px;
	float: left;
}

div.anchor{
	max-width: 200px;
	width: 100%;
	float: left;
	display: flex;
	justify-content: space-between;
}

div.anchor a:link,
div.anchor a:visited,
div#archi,
div#public{
	width: 90px;
	padding: 3px 0;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	background-color: #005e5b;
}

div#contents p{
	font-size: 16px;
}

div.material{
	width: 100%;
	margin: 5px 0;
}

div#archi,
div#public{
	margin: 30px 0 20px;
}

div.product{
	margin-bottom: 10px;
}

/*div.classification{
	min-width: 100%;
	margin: 0 auto 10px;
	line-height: 30px;
}*/


div.classification p{
	font-size: 16px;
	line-height: 1.5;
}

@media screen and (min-width: 751px){
	
	h2{
		font-size: 20px;
	}
	
	div.anchor{
		width: auto;
	}
	
	div.anchor a:link,
	div.anchor a:visited,
	div#archi,
	div#public{
		width: 75px;
		font-size: 16px;
	}
	
	div.anchor a{
		margin: 0 0 0 20px;
	}
	
	div #contents p{
		width: 85%;
		margin: auto;
		font-size: 14px;
		line-height: 20px;
	}
	
	div.material{
		margin: 10px auto 0;
	}
	
	div.product{
		width: 76%;
		margin: auto;
		display: flex;
	}
	
	div.classification{
		min-width: auto;
		width: 32%;
	}
	
	div.classification p{
		width: 100%;
	}
	
	h4{
		font-size: 16px;
		line-height: 28px;
	}

	div.classification p{
		font-size: 14px;
		line-height: 24px;
	}
	
	div.material-picture{
		width: 58.5%;
		margin: 0 auto;
	}