@import url('https://fonts.googleapis.com/css?family=Monoton');

article *		{background-color: inherit}
article time	{display: inline-block}

html		{overflow-y: scroll}

body		{font-family: 'メイリオ',
			 'Hiragino Kaku Gothic Pro',
			 sans-serif;
			 background-color: #276D86;
			 background-image: url(background.png);
			 margin: 0}

h1			{font-size: 38px;
			margin-top: 0;
			margin-bottom: 0
			background-color: #2989A9}

p			{line-height: 1.5}

/* ヘッダ */
header		{background-color: #ffffff;
			border-bottom: solid 1px #aaaaaa;
			margin-bottom: 30px;
			box-shadow: 0 1px 7px #aaaaaa;
			padding: 5px}

header h1	{font-family: 'Monoton', cursive;
			font-size: 24px;
			width: 900px;
			margin-left: auto;
			margin-right: auto}

header h1 a		{text-decoration: none;
				color: #000000}

header h1 a:hover	{color: #000000}

header h1 img	{vertical-align: -10px;
				margin-right: 5px}

/* 記事 */
article, #message	{background-color: #ffffff;
					width: 900px;
					margin-left: auto;
					margin-right: auto;
					border: solid 1px #aaaaaa;
					padding: 30px;
					box-sizing: border-box;
					margin-bottom: 15px;
					box-shadow: 1px 1px 3px #aaaaaa;
					border-radius: 20px;
					overflow: hidden}

/* フッター */
footer		{width: 900px;
			margin-left: auto;
			margin-right:auto;
			clear: both}

/* 画像を中央に配置するレイアウト */
figure.photo-center		{text-align: center;
						margin-top: 30px;
						margin-bottom: 30px}

/* 画像を左に配置するレイアウト */
figure.photo-left		{margin: 0;
						float: left;
						margin-right: 20px;
						margin-bottom: 20px;
						text-align: center}

figure.photo-left img	{width: 550px}

/* 画像を右に配置するレイアウト */
figure.photo-right		{margin: 0;
						float: right;
						margin-left: 20px;
						text-align: center}

figure.photo-right img	{width: 550px}

/* 小見出し */
h2			{clear: both;
			border-bottom: solid 5px #477586;
			margin-top: 30px}

h3			{background-color: #D7E4E7;
			border-radius: 10px;
			padding: 5px;
			margin-bottom: 10px}

/* リンク */
a			{color: #b77d3c}

a:hover		{color: #276E86}

a img		{border: none}

table a		{color: #000000;
			text-decoration: none;
			display: block;
			width: 100%;
			height: 100%}
			
table a:hover	{background-color: #276E86;
				color: #ffffff}

/* 関連記事へのリンク */
aside		{border: solid 2px #d6c588;
			border-radius: 5px;
			padding: 10px;
			background-color: #edede3;
			margin-top: 40px}

aside h1	{font-family: 'Monoton', cursive;
			font-size: 18px;
			color: #8FAEB6;
			border-bottom: dotted 3px #8FAEB6}

aside ul	{list-style-image: url(listmark.png)}

aside a		{color: #000000;
			text-decoration: none}

/* ナビゲーションメニュー */
nav ul		{list-style-type: none;
			margin-top: 0;
			margin-bottom: 0;
			margin-left: 0;
			font-size: 0}

nav li		{display: inline;
			font-size: 12px;
			border-right: solid 1px #aaaaaa;
			padding-left: 10px;
			padding-right: 10px}

nav li:first-child	{border-left: solid 1px #aaaaaa}

nav			{width: 900px;
			margin-left: auto;
			margin-right: auto;
			text-align: right;
			margin-top: -27px;
			margin-bottom: 10px}

nav a		{color: #000000;
			text-decoration: none}

/* 記事の一覧のページ */
#posts article img		{float: left;
						margin-right: 20px}

#posts article h1		{font-size: 24px}

#posts section			{width: 900px;
						margin-left: auto;
						margin-right: auto}

#posts header			{margin-bottom: 20px}

#posts time				{font-size: 12px;
						color: #ffffff;
						background-color: #bdbc8f;
						border-radius: 10px;
						padding: 2px 20px 2px 20px}

#posts article a		{color: #000000;
						text-decoration: none;
						display: block;
						overflow: hidden;
						padding: 20px}

#posts article a:hover	{background-color: #ffe792}

#posts article			{padding: 0}

/* トップページ */
#top header				{margin-bottom: 0}

#photo					{background-image: url(photo.jpg);
						background-repeat: no-repeat;
						background-position: 50% 0;
						background-color: #D7E4E7;
						text-align: center;
						padding-top: 200px;
						padding-bottom: 80px}

#photo h1				{color: #ffffff;
						font-size: 60px;
						font-family: 'Monoton', cursive;
						text-shadow: 0 5px 10px #000000}

#photo p				{color: #ffffff;
						font-size: 20px;
						font-weight: bold;
						text-shadow: 0 5px 10px #000000}

#photo a				{background-color: #ffaa00;
						background-image: webkit-gradient(
							linear,
							left top, left bottom,
							from(#ffe7b8),
							to(#ffaa00));
						background-image: webkit-linear-gradient(
							top,
							#ffe7b8 0%,
							#ffaa00 100%);
						background-image: linear-gradient(
							to bottom,
							#ffe7b8 0%,
							#ffaa00 100%);
						padding: 10px 80px;
						border-radius: 10px;
						color: #000000;
						font-weight: bold;
						text-decoration: none}

/* トップページの表 */
table, th, td	{border: solid 1px #aaaaaa}

table			{border-collapse: collapse;
				margin-left: auto;
				margin-right: auto;
				margin-top: 30px}

th, td			{padding: 10px 20px 10px 20px}

th				{width: 150px;
				background-color: #8FAEB6;
				text-align: center}

td				{width: 450px;
				background-color: #D7E4E7}

caption			{font-weight: bold;
				background-color: #D7E4E7;
				border-radius: 10px;
				padding: 5px;
				margin-bottom: 10px}

/* お問い合わせページ */
input, textarea			{display: block}

input					{width: 400px}

input[type="submit"]	{width: 200px;
						background-color: #276E86;
						background-image: webkit-gradient(
							linear,
							left top, left bottom,
							from(#D7E4E7),
							to(#8FAEB6));
						background-image: webkit-linear-gradient(
							top,
							#D7E4E7 0%,
							#8FAEB6 100%);
						background-image: linear-gradient(
							to bottom,
							#D7E4E7 0%,
							#8FAEB6 100%);
						border: solid 1px #aaaaaa;
						border-radius: 10px;
						padding-top: 10px;
						padding-bottom: 10px}

textarea				{width: 500px;
						height: 200px}

/* 二段組み */
#container		{width: 900px;
				margin-left: auto;
				margin-right: auto}

#content		{width: 600px;
				float: left}

#menu			{width: 270px;
				float: right}

#content article	{width: auto}

#content article img	{width: 500px}

#menu aside		{background-color: #D7E4E7;
				border: solid 1px #aaaaaa;
				padding: 20px;
				margin-top: 0;
				margin-bottom: 30px;
				-webkit-box-shadow: 1px 1px 3px #aaaaaa;
				box-shadow: 1px 1px 3px #aaaaaa;
				border-radius: 20px}

/* 各ミニサイトのトップページ */
#index					{background-image: url(photo.jpg);
						background-repeat: no-repeat;
						background-position: 50% 0;
						background-color: #D7E4E7;
						text-align: center;
						padding-top: 200px;
						padding-bottom: 80px}

#index h1				{color: #ffffff;
						font-size: 60px;
						font-family: 'メイリオ',
			 			'Hiragino Kaku Gothic Pro',
			 			sans-serif;
			 			text-shadow: 0 5px 10px #000000}

#index p				{color: #ffffff;
						font-size: 20px;
						font-weight: bold;
						text-shadow: 0 5px 10px #000000}

#index a				{background-color: #ffaa00;
						background-image: webkit-gradient(
							linear,
							left top, left bottom,
							from(#ffe7b8),
							to(#ffaa00));
						background-image: webkit-linear-gradient(
							top,
							#ffe7b8 0%,
							#ffaa00 100%);
						background-image: linear-gradient(
							to bottom,
							#ffe7b8 0%,
							#ffaa00 100%);
						padding: 10px 80px;
						border-radius: 10px;
						color: #000000;
						font-weight: bold;
						text-decoration: none}

/* コンテンツの表 */
#content table	{border-collapse: collapse;
				margin-left: auto;
				margin-right: auto;
				margin-top: 30px;
				width: 550px}

#content th, td		{padding: 5px 5px 5px 5px}

#content th			{text-align: center}

#content td.cell1	{background-color: #FFFFFF}
#content td.cell2	{background-color: #EEEEEE}

#content th.item	{width: 220px}
#content th.outline {width: 330px}
#content td.item	{width: 220px}
#content td.outline {width: 330px}

/* コメント表示用 */
.comment-box {
	white-space: pre-wrap;
}