@charset "UTF-8";

body	{margin: 0;
	font-family: 'Source Sans Pro', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}


/* サイト名 */
.site	{background-color: #444444;
	padding: 10px;
	text-align: center}

.site a	{color: #ffffff;
	font-size: 20px;
	font-family: 'Paytone One', sans-serif;
	text-decoration: none}


/* ナビゲーションメニュー */
.menu	{padding: 40px 0;
	background-color: #f0f0e9}

.menu ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu li a	{display: block;
	margin-bottom: 15px;
	padding: 15px;
	background-color: #770000;
	color: #ffffff;
	font-size: 14px;
	text-decoration: none}

.menu li a:hover	{background-color: #662222}


/* 記事 */
.kiji	{padding: 40px}

.kiji img	{max-width: 100%;
	height: auto}

.kiji h1	{margin-top: 0;
	margin-bottom: 20px;
	font-size: 36px}

.kiji h1 span	{display: block;
	margin-bottom: 20px;
	color: #930000;
	font-size: 20px;
	font-weight: bold}

.kiji p	{margin-top: 0;
	margin-bottom: 20px;
	line-height: 2;
	text-align: justify}

.kijiinfo	{margin-bottom: 20px;
	color: #666666}

/* 関連記事メニュー */
.kanren	{padding: 40px 20px;
	background-color: #f0f0e9}

.kanren ul	{margin: 0;
	padding: 0;
	list-style: none}

.kanren li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.kanren li a:hover	{background-color: #eeeeee}

.kanren img	{max-width: 100%;
	height: auto}

/* コピーライト */
.copyright	{background-color: #444444;
	padding: 10px;
	text-align: center}

.copyright p	{margin: 0;
	color: #ffffff;
	font-size: 14px}

	
	
/* グリッド */
body {
	display: grid;
	grid-template-areas:
			"head head head"
			"side1 main side2"
			"foot foot foot";
	grid-template-columns: 1fr 5fr 200px;
}



.site {	grid-area: head;}
.menu {	grid-area: side1;}
.kiji {	grid-area: main;}
.kanren {	grid-area: side2;}
.copyright {	grid-area: foot;}