@charset "UTF-8";
#title {  background-image: url("images/title-bg.jpg");}

.inner { max-width:960px;}

.intro { padding: 20px 0 40px 0; text-align: left; width: 100%; margin: 0 auto;}
	.intro h2 { padding:10px 0 0 0; font-size:25px;}
	.intro p { padding:10px 0; font-size:16px;}

.art { padding: 20px 0 40px 0; text-align: left; width: 100%; margin: 0 auto;}
	.art h2 { padding:10px 0 5px 0; font-size:16px; margin-bottom: 5px; border-bottom:1px solid #FFF;}
	.art p{ padding:10px 0; font-size:16px;}
.artbox {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}


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

@media all and (min-width:640px) {
	/* 640px+ settings */
	.arttext { width: 48%;}
	.artphoto { width: 48%;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.arttext { width: calc(100% - 370px);}
	.artphoto { width:330px;}
}

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