@charset "UTF-8";

#title h1::before {content:"Greeting";}

#layout .inner { max-width:1200px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}


.message { padding: 0 0; text-align: left;}
	.message p { padding:5px 0; text-align: center;}
		.message p img { padding: 5px 0;}

.art { padding: 20px 0; text-align: left;}
	.art p { padding:10px 0;}
		.art p img {vertical-align: bottom;}


@media all and (min-width:320px) {
	/* 320px+ settings */
	.message { width: 100%;}
	.art { width: 100%;}
	.art p { font-size: 16px;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.message { width: 46%;}
	.art { width: 46%;}

}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.art p { font-size: 18px;}
	#layout .inner { padding-bottom: 100px;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	.message { width: 500px;}
	.art { width:calc(100% - 600px);}
}