@charset "UTF-8";

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


.bnav {padding: 20px 0; text-align: left;}
	.bnav ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
		.bnav li {text-align: center; padding: 5px 0;}
		.bnav li a img {border:1px solid #CCC; transition: .3s;}
		.bnav li a:hover img {border:1px solid #8CC63F;}

.art { padding: 20px 0 40px 0; text-align: left; width: 100%;}
	.art h3 { padding:5px 0; font-size:18px; margin-bottom: 20px;}
	.art p { font-size:16px;}
	.art table { width: 100%; max-width: 920px; margin: 0 auto 20px auto; border-collapse: separate;}
		.art thead th, .art thead td { text-align: left; font-weight: bold; background:#F2F2F2; padding: 5px 1em;}
			.art thead th { border-right:1em solid #FFF;}
		.art tbody th, .art tbody td { text-align: left; }
	.art ul { display: flex; justify-content: space-between; padding: 20px 0;}
	.art li { width: calc(33.3% - 10px);}

h2.btitle { width: 100%; max-width:960px; padding: 10px 0 20px 0; margin: 0; font-size: 20px; text-align: left; display: flex; align-items: center;border-bottom: 1px solid #999;}
h2.btitle img { margin-right: 20px;}

@media all and (min-width:320px) {
	/* 320px+ settings */
	.bnav li { width: 100%;}
	.art thead { display: none;}
	.art tbody th { display: block; padding: 10px 0 0 0;}
	.art tbody td { display: block; padding: 0 0;}
	.art p { padding:10px 0; }
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.bnav li {  width: calc(33.3% - 10px);}
	.art thead { display: table-row-group;}
	.art tbody th { display: table-cell; padding:1px 1em; font-weight: normal;}
	.art tbody td { display: table-cell; padding:1px 1em;}
		.art tbody tr:first-of-type th, .art tbody tr:first-of-type td { padding:10px 1em 1px 1em;}
	.art p { padding:10px 1em; }
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.art tbody td { width: 14em;}
}

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