@charset "UTF-8";

/* CSSグリッドに対応したブラウザ用の設定 */
@supports (display: grid) {

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: #fff;
}

/* ナビゲーション */
.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;
}


/* ##### 画面の横幅1260ピクセル以上 ##### */
@media (min-width: 1260px) {
	.page {
		grid-template-columns: 260px 1fr;
	}

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

	/* ヘッダー */
	.page-head {
		padding: 40px 0;
	}

	.page-head img {
		width: 150px;
	}

	/* ナビゲーション */
	.page-nav {
		display: block;
		background-color: #222;
	}

	/* ボタン */
	.page-btn {
		display: none;
	}

	/* フッター */
	.page-foot {
		padding: 40px 0;
	}

}


} /* CSSグリッドに対応したブラウザ用の設定 ここまで */




/* IE11用の設定 */
@media all and (-ms-high-contrast: none), not all and (-ms-high-contrast: none) {

/* Autoprefixerで変換した設定 */
body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}


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

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

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

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

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

/* ナビゲーション */
.page-nav {
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 2;
	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 {
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 1;
	grid-row: 1;
	-ms-grid-column-align: start;
	    justify-self: start;
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    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 {
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 3;
	grid-row: 3;
	padding: 20px 0;
	background-color: #222;
	color: #fff;
	text-align: center;
	font-size: 14px;
}


/* IE11用追加設定 */
.page-main {
	display: block;
}


} /* IE11用の設定 ここまで */


