/* GNOBLE ハンバーガーナビ css 2019.05.11 */

	/* ヘッダー ナビ */
	header {
		/*
		padding:10px;
		background: skyblue;
		*/
		position: absolute;
		top:  10px;
		left: 10px;
		z-index: 1;
	}
	#nav-drawer {
		position: relative;
	}

	/* チェックボックス等は非表示に */
	.nav-unshown {
		display:none;
	}

	/* アイコンのスペース */
	#nav-open {
		display: inline-block;
		width:  30px;
		height: 22px;
		vertical-align: middle;
		/* topに固定 */
		position: fixed;
		top:  10px;
		left: 10px;
	}

	/* ハンバーガーアイコンをCSSだけで表現(元) */
	#nav-open_xxx span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		height: 3px;	/* 線の太さ */
		width: 25px;	/* 長さ */
		border-radius: 3px;
		background: #555;
		display: block;
		content: '';
		cursor: pointer;
	}

	/* ハンバーガーアイコンをCSSだけで表現 */
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		height: 2px;	/* 線の太さ */
		width: 20px;	/* 長さ */
		border-radius: 4px;
		background: #555;
		display: block;
		content: '';
		cursor: pointer;
	}
	#nav-open span:before { /* アイコン 2本目 */
		/* bottom: -8px;*/
		bottom: -5px;
	}
	#nav-open span:after { /*  アイコン 3本目 */
		/* bottom: -16px; */
		bottom: -10px;
		content: 'Menu';font-size: 8px;
	}

	/* 閉じる用の薄黒カバー */
	#nav-close {
		display: none;	/* はじめは隠しておく */
		position: fixed;
		z-index: 99;
		top: 0;		/* 全体に広がるように */
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	}

	/* 中身 */
	#nav-content {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;			/* 最前面に */
		width: 90%;			/* 右側に隙間を作る（閉じるカバーを表示） */
		max-width: 300px;		/* 最大幅（調整）*/
		/* height: 100%; */
		height: 100%;
		background: #fff;		/* 背景色 */
		transition: .3s ease-in-out;	/* 滑らかに表示 */
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);	/* 左に隠しておく */
	}

	/* チェックが入ったらもろもろ表示 */
	#nav-input:checked ~ #nav-close {
		display: block;			/* カバーを表示 */
		opacity: .5;
	}

	#nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);	/* 中身を表示（右へスライド）*/
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}


	/* 上から 
	#nav-content {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		background: #fff;
		color: #000;
		text-align: center;
		transform: translateY(-100%);
		transition: all 0.6s;
		width: 100%;
	}
	*/

	#nav-content ul {
		background: #f9fce8; /* #f1f7de; /* #f7ffdf #ffffef #FFF8DC #ccc */
		margin: 0 auto;
		padding: 0;
		width:  100%;
		height: 100%;
	}
	 
	#nav-content ul li {
		/* 
		font-size: 1.1em;
		*/
		font-size: 12pt;
		list-style-type: none;
		/* padding: 0; */
		width: 100%;
		border-bottom: 1px dotted #333;
		/*padding-left: 20px;*/
		text-align:left;
	}
	 
	/* 最後はラインを描かない */
	#nav-content ul li:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}
	 
	#nav-content ul li a {
		display: block;
		color: #000;
		/*padding: 1em 0;*/
		padding: 6px 0px 6px 10px;
		font-size:10pt;
		text-decoration: none;
	}
	#nav-content ul li a:active ~ #nav-unshown {
		display: none	;/* カバーを表示 */
	}