@charset "UTF-8";

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

.intro { padding: 20px 0 40px 0; text-align: left; width: 100%; max-width: 840px; margin: 0 auto;}
	.intro h3 { padding:5px 0; font-size:18px; border-bottom: 1px solid #999; margin-bottom: 20px;}
	.intro p { font-size:16px; padding: 10px 0;}

.sdgs {padding: 10px 0;}
	.sdgs p { text-align: center;}
	.sdgs ul { max-width: 540px; display: flex; flex-wrap: wrap; justify-content:center; margin: 0 auto;}
		.sdgs li { padding: 5px;}

.artbox { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px 0 0 0; text-align: left; width: 100%; max-width: 840px; margin: 0 auto;}
	.artbox h3 { text-align: center; padding:10px 0;}
	.artbox h3 img { width: 100%; max-width: 160px; height: auto;}
	.artbox ul { padding: 10px 0 10px 1em; margin: 0 0 0 1em; list-style: disc;}
	.artnote {text-align: left; width: 100%; max-width: 840px; margin: 20px auto; border: 1px solid #999;}

.art { padding: 20px 0 40px 0; text-align: left; width: 100%; }
	.art h3 { padding:5px 0; font-size:18px; border-bottom: 1px solid #999; margin-bottom: 20px;}
	.art p { font-size:16px; padding: 10px 0;}

@media all and (min-width:320px) {
	/* 320px+ settings */
	.artbox h3 { width: 100%;}
	.artbox ul { width: 100%;}
	.artnote {padding: 20px 20px;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.artbox h3 { width: 160px;}
	.artbox ul { width: calc(100% - 200px);}
	.artnote {padding: 20px 40px;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.artnote {padding: 20px 50px;}
}

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