@charset "UTF-8";


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

.art { padding: 20px;}
	.art p { padding:10px 0; font-size:16px;}
	.art ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; max-width: 960px; margin: 0 auto;}
		.art li { padding: 10px; text-align: center;}
	.art p {padding:20px 0;}

.works { padding: 20px;}
	.works p { padding:10px 0; font-size:16px;}
	.works ul { display: flex;  flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; padding: 20px 0;}
		.works li { padding: 5px; text-align: center;}
	.works p {padding:20px 0;}

@media all and (min-width:320px) {
	/* 320px+ settings */
	.art li  { width: 100%;}
	.art p { text-align: left; font-size:16px;}
		.art p br { display: none;}
	.works li { width: calc(50% - 2px);}
	.works p { text-align: left; font-size:16px;}
		.works p br { display: none;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.art li { width: 33%;}
	.art p { text-align: center; }
		.art p br { display: inline-block;}
	.works li {  width: calc(33.33%);}
	.works p { text-align: center;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
		.works p br { display: inline-block;}

}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	.works p { font-size:20px;}
}