@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; text-align: left; width: 100%;}
	.art p { padding:10px 0; font-size:16px;}
	.art ul { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 10px 0;}
		.art ul::after { display: block; content:""; height:0; overflow: hidden; width: calc(33.3% - 10px);}
		.art li { width: calc(33.3% - 10px); padding: 8px 0;}

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

@media all and (min-width:320px) {
	/* 320px+ settings */
	.bnav li { width: 100%;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.bnav li {  width: calc(33.3% - 10px);}
}

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

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