@charset "UTF-8";

#title { width: 100%; max-width: 1200px; margin: 0 auto; padding:2rem 0 0 0; display:flex; flex-wrap:wrap;}
	#title h1 { padding:2rem; font-size: 2.4rem; letter-spacing: .2em; font-weight: normal;}
		#title h1:after { display: block; font-size: 1.8rem; letter-spacing: 0;}
	#title p { padding:0 2rem;}

h2.title{ padding:4rem 2rem; font-size: 2.4rem; font-weight: normal; letter-spacing: .2em; color: #CE6300; text-align: center;}
	h2.title::before { display: block; content:""; width: 220px; height: 2rem; overflow: hidden; border-top:1px solid #CE6300; margin: 0 auto;}

#layout { padding:2rem 0 4rem 0; 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 */
	#layout { padding:0 0 2rem 0;}
}

@media all and (min-width:640px){
	/* 640px+ settings */
	#title { display: flex;}
		#title h1 { width: 40%; align-self: center;}
		#title p { width: 60%;}
}

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

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	#title h1 { width: 420px;}
	#title p { width: 780px; padding: 0 0 0 0;}
}