@charset "UTF-8";

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


/* 基本 */
.page * {
	margin: 0;
}

.page-head img {
	width: 80px;
	vertical-align: bottom;
}

/* グリッド */
.page {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}

/* ヘッダー */
.page-head {
	grid-column: 1;
	grid-row: 1;
	padding: 15px 0;
	background-color: #222;
	text-align: center;
}

/* メインコンテンツ */
.page-main {
	grid-column: 1;
	grid-row: 2;
	background-color: #ffe4b5;
}

/* ナビゲーション */
.page-nav {
	grid-column: 1;
	grid-row: 2;
	z-index: 100;
	background-color: rgba(0,0,0,0.8);
	display: none;
}

.open .page-nav {
	display: block;
}

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

.page-nav a {
	display: block;
	margin: 30px;
	border-bottom: solid 1px #aaa;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
}


/* ボタン */
.page-btn,
.page-btn-close {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	align-self: center;
	padding: 20px;
	border: none;
	background-color: transparent;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
}

.page-btn-close {
	display: none;
}

.open .page-btn {
	display: none;
}

.open .page-btn-close {
	display: block;
}



/* フッター */
.page-foot {
	grid-column: 1;
	grid-row: 3;
	padding: 20px 0;
	background-color: #222;
	color: #fff;
	text-align: center;
	font-size: 14px;
}



