@charset "UTF-8";

#title { width: 100%;  text-align: center;background:linear-gradient(#00A5DB 0%, #01ACC6 50%, #00B4B3 100%);}
	#title h1 { display: block; width: 100%; max-width: 1200px; padding:2rem; margin: 0 auto; text-align: center;}
	#title h1 img { max-height: 60px; width: auto; }

h2.title { padding:4rem 0 0 0; display: flex; }
	h2.title span { display: block; white-space: nowrap; padding: 0 4rem; font-size:1.8rem; text-align: center;}
	h2.title::before, h2.title::after { display: block; content:""; width: 100%; height:1px; overflow: hidden; background:#CCC; align-self: center;}

#layout { width: 100%; max-width:1100px; margin: 0 auto; background:#FFF;}

footer { border-top:1px solid #CCC;}

.pagenavi {width:100%; clear:both; padding:2rem 0;}
	.pagenavi p { display: flex; flex-wrap: wrap; justify-content:flex-start; font-size:1.2rem; line-height:2em; padding:0; margin:0; text-align: center; }
	.pagenavi a { min-width: 3em; padding:.5rem .2rem; margin:0 0 .5rem .5rem; color:#333; text-decoration:none; background:#CCC; white-space: nowrap;}
			.pagenavi a:hover { color:#FFF; background:#555;}
	.pagenavi strong { min-width: 3em; padding:.5rem .2rem; margin:0 0 .5rem .5rem; color:#FFF; text-decoration:none; background:#555; white-space: nowrap;}


@media all and (min-width:320px){
	/* 320px+ settings */
	#title {padding:4rem 0;}
	#layout { padding:0 2rem 2rem 2rem;}
}

@media all and (min-width:640px){
	/* 640px+ settings */
	#layout {padding:2rem 2rem 4rem 2rem; }
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#title {padding:16rem 0 4rem 0;}
}

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