@charset "UTF-8";

body { /** ie11 */
	display:-ms-grid;
}

body {
	display:grid;
	grid-gap:10px 0;
}

@media not all and (max-width: 860px) {

	body {
		padding:0 calc(50% - 400px) 80px;
		width:800px;
	}

}

@media only all and (max-width: 860px) {

	body {
		padding:0 20px 80px;
		width:calc(100% - 40px);
	}

}

@media only all and (max-width: 410px) {

	body {padding-bottom:calc(22% - 8.8px);}

}

/** ヘッダー → サイド → メイン → Twitter → フッター */

/** ヘッダー */
.page_header { /** ie11 */
	-ms-grid-column:1;
	-ms-grid-row:1;
}

.page_header {
	display:block;
	grid-column:1 / 2;
	grid-row:1 / 2;
	margin:0;
	padding:71px 0 0;
	position:relative;
	z-index:0;
}

/** ナビ */
.header_nav:not([data-nav-show="true"]) {
	display:block;
	margin:0 auto;
	position:fixed;
	top:0;
	width:100%;
	z-index:3;
	left:-10px;
}

.header_nav[data-nav-show="true"] {
	background-color:rgba(0, 0, 0, 0.5);
	display:block;
	height:100%;
	margin:0;
	overflow-y:auto;
	position:fixed;
	width:100%;
	z-index:9999;
}

/** メイン */
.main_box { /** ie11 */
	-ms-grid-column:1;
	-ms-grid-row:3;
}

.main_box {
	display:block;
	grid-column:1 / 2;
	grid-row:3 / 4;
	margin:0;
	padding:0;
}

/** サイド */
.side_box { /** ie11 */
	-ms-grid-column:1;
	-ms-grid-row:2;
}

.side_box {
	display:block;
	grid-column:1 / 2;
	grid-row:2 / 3;
	margin:0;
	padding:0;
	z-index:2;
}

.side_menu {
	bottom:0;
	margin:0 auto;
	position:fixed;
}

@media not all and (max-width: 860px) {

	.side_menu {width:800px;}

}

@media only all and (max-width: 860px) {

	.side_menu {width:calc(100% - 40px);}

}

/** フッター */
.page_footer { /** ie11 */
	-ms-grid-column:1;
	-ms-grid-row:5;
}

.page_footer {
	display:block;
	grid-column:1 / 2;
	grid-row:5 / 6;
	margin:0;
	padding:0;
}

/** twitter */
.tw_box { /** ie11 */
	-ms-grid-column:1;
	-ms-grid-row:4;
}

.tw_box {
	display:block;
	grid-column:1 / 2;
	grid-row:4 / 5;
	margin:0;
	padding:0 30px;
}