@charset "utf-8";

/*リセット*/
*{
	margin: 0;
	padding: 0;
	font-size: 100%;
}

hr {
	display: none;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
}
body {
	font-family: Georgia, "メイリオ";
	line-height: 1.8;
}
#page {
	width: 100%;	/* 幅は基本的に全て % で指定 */
	background: #FDFCE0;
	margin: 0 auto;		/* ← サイトの中央表示（最近は中央表示が一般的）*/
	max-width: 960px;	/* ← サイトの最大幅（一般値）*/
	min-width: 320px;	/* ← サイトの最小幅（一般値）*/
}
header {
	background: #FF8F56;
	padding: 20px 2%;	/* 余白やマージンも横方向は % 指定 */
}
header h1 {
	font-size: 225%;
	text-shadow: #eee 2px 2px;
}
nav li {
	width: 20%;	/* ボタンが5つの為 100% / 5つのナビ → 1つのボタン幅が20% */
	float: left;
}
nav li a {
	display: block;
	background: #B1AD25;
	line-height: 3em;
	border: 1px solid #185245;
	text-align: center;
	color: #11372f;
}
nav li a:hover {
	background: #DAD773;
}
main {
	clear: both;
	padding: 10px 2% 0;
}
#subMenu {
	width: 35%;
	background: #FF847C;
	padding: 10px 2%;
	margin-bottom: 10px;
	float: left;
}
#subMenu li a {
	display: block;
	padding: 0 10px;
	line-height: 2em;
	color: #494949;
}
#subMenu li a:hover {
	background: #FECEAB;
}
#contents {
	width: 55%;
	background: #DBF094;
	padding: 10px 2%;
	float: right;
	margin-bottom: 10px;
}
#contents h2 {
	border-bottom: 1px solid #c00;
	border-left: 5px solid #c00;
	padding-left: 5px;
	margin-bottom: 10px;
}
#contents p {
	margin-bottom: 10px;
}
footer {
	clear: both;
	background: #2D5C7F;
	color: #ddd;
	text-align: center;
	padding: 10px 2%;
	font-size: 87.5%;
}
footer li {
	display: inline;
}
footer li+li::before {
	content: " | ";
}
footer li a {
	color: #eee;
	text-decoration: none;
	letter-spacing: 0.2em;
}
footer li a:hover {
	color: #ccc;
	text-decoration: underline;
}

/* 以下レスポンシブ対応 */
/* 例として今回はサイト幅が480pxまでは { } 内の設定が適用される指定 */
@media screen and (max-width: 480px){	/* ← @media（＝PCなどのスクリーンに対して）最大480px幅まで効かせる */
	header h1 {
		text-align: center;
	}
	#subMenu {
		width: auto;	/* 幅の制限をかけない */
		float: none;	/* floatを止める(解除ではない) */
	}
	#contents {
		width: auto;	/* 幅の制限をかけない */
		float: none;	/* floatを止める(解除ではない) */
	}
}