@charset "UTF-8";

#title h1::before, #title p::before {content:"Products";}

#layout .inner { max-width:1200px;}

.products {padding: 20px 0 40px 0;}
	.products h2 { padding:10px 0; font-size: 32px; text-align: center;}
	.products ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
		.products li { padding: 20px 0; display: block; justify-content:center; align-items: flex-end;}
			.products li a { display: block; text-align: center;}
			.products li a::after { display: inline-block; content: url("../images/p-arrow.svg"); padding-top: 15px;}
			.products li a:hover::after { content: url("../images/p-arrow-bg2.svg");}

.info {padding: 20px 0 40px 0; max-width: 960px; margin: 0 auto;}
	.info h2 { padding:10px 0; font-size: 32px; text-align: center;}
	.info h3 { display: block; padding:10px 0; margin-bottom: 10px; font-size:22px; text-align: center; color:#666; border-bottom: 1px solid #999;}
	.info p { padding:10px 0;}
	.info ul { padding:10px 0 10px 1em; margin: 0 0 0 1em; list-style: disc; text-align: left; }
	.info li { padding:5px 0; font-weight:bold;}

	.infocontact { text-align: center; font-weight:bold;}
		.infocontact a { display: inline-block; padding: 10px 20px; white-space: nowrap; color: #333; font-size: 28px; text-decoration: none;}
		.infocontact a:hover {color:#F15A24; text-decoration: underline;}



.intro {padding: 20px 0 40px 0;}
	.intro h2 { padding:10px 0; font-size: 32px; text-align: center;}
	.intro p { padding:10px 0;}

.topics {border: 1px solid #FE6D0F; text-align: left; background: #FFF; margin: 20px auto; max-width: 960px; padding: 20px;}
	.topics h2 { display: block; padding:5px 0; margin-bottom: 10px; font-size:22px; text-align: left; color:#FE6D0F; border-bottom: 1px solid #FE6D0F;}
	.topics p { padding:10px 0; font-weight: bold;}


.mainimage { padding: 20px 0; max-width: 960px; margin: 0 auto; text-align: center;}

.art { padding: 20px 0; max-width: 960px; margin: 0 auto; text-align: left;}
	.art h2 { display: block; padding:10px 0; margin-bottom: 10px; font-size:22px; text-align: center; color:#666; border-bottom: 1px solid #999;}

.arttext { padding:20px 0; max-width:840px; margin: 0 auto; text-align: left;}

.artphoto { padding:20px 0; max-width:840px; margin: 0 auto; text-align: center;}

.arttable{ padding:20px 0; max-width:840px; margin: 0 auto;}
	.arttable table {  width: 100%; background:#FFFCD9; margin: 5px 0;}
		.arttable th { vertical-align: top;}
		.arttable td { vertical-align: top;} 

@media all and (min-width:320px) {
	/* 320px+ settings */
	.intro, .info { text-align: left;}
	.products li { width:calc(50% - 15px);}
	.topics { padding:5px 20px;}
		.topics h2 { font-size:20px;}
		.topics p { font-size:20px;}
	.arttable table { }
	.arttable tr { display: block; padding:0 20px;}
	.arttable th { display: block; padding: 20px 0 5px 0; text-align: left; border-bottom:1px solid #CCC; white-space: nowrap;}
	.arttable td { display: block; padding: 5px 0 20px 0; text-align: left;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.intro, .info { text-align: center;}
	.products li { width:calc(33.3% - 20px);}
		.products ul::after { display: block; content:""; width:calc(33.3% - 20px); height: 0; overflow: hidden;}
	.arttable table { border: 1px solid #333;border-collapse: collapse;}
	.arttable tr { display: table-row; }
	.arttable th, .arttable td { display: table-cell; text-align: left; padding: 10px 20px; border: 1px solid #CCC; vertical-align: top;}

}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.art p { font-size: 18px;}
	.products li { width:calc(25% - 20px);}
	.topics { padding: 30px;}
		.topics h2 { font-size:24px;}
		.topics p { font-size:24px;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}