@charset "UTF-8";

.art { padding:0 0 40px 0; text-align: left;}
	.art h2{ padding:40px 0 20px 0; font-size: 18px;}
	.art h3 { font-size:16px; font-weight: normal;}
	.art p { padding:10px 0 10px 0; font-size:16px;}
	.art table { width: 100%; margin:5px 0 40px 0; border-collapse: collapse;}
	.art thead th { background:#EEE;font-size:16px;text-align: left; font-weight: bold;}
	.art thead td { background:#EEE;font-size:16px;text-align: left; font-weight: bold;}
	.art tbody th { font-size:16px; text-align: left; white-space: nowrap; vertical-align: top; }
	.art tbody td { font-size:16px; text-align: left; vertical-align: top;}
.photo { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px 0 10px 0;}
	.photo li { padding:10px 0;}


@media all and (min-width:320px) {
	/* 320px+ settings */
	.art h3 { padding:5px 10px; background: #EEE;}
	.art thead th, .art thead td {display: none;}
	.art tbody th { display: block; padding:10px 0 0 0; border-top: none;}
	.art tbody td { display: block; padding:0 0 10px 0; border-top: none;}
	.photo li { width: 47%;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.photo li { width: 32%;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.art h3 { padding:10px 0 10px 0; background: none;}
	.art table {border-bottom: 1px solid #CCC;}
	.art thead th { display: table-cell;padding:10px 0 10px 40px; border-right:10px solid #FFF; }
	.art thead td { display: table-cell; padding:10px 40px 10px 35px; border-left:10px solid #FFF; }
	.art tbody th { display: table-cell; padding:20px 0 20px 40px; border-top: 1px solid #CCC; width:240px;}
	.art tbody td { display: table-cell; padding:10px 40px; border-top: 1px solid #CCC;}
}

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