/* -------------------------------------------------------------------- */
/* ▼全ての共通デザインを記述 */
/* -------------------------------------------------------------------- */

#nav-drawer {
	position: fixed;
	margin: 20px;
	z-index: 999;
	/* right: 0; */
}

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

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 50px;
	height: 50px;
	vertical-align: middle;
	cursor: pointer;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 5px;			/*線の太さ*/
	width: 48px;			/*長さ*/
	border-radius: 2px;
	background: white;
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
	bottom: -14px;
}
#nav-open span:after {
	bottom: -28px;
}

/*閉じる用の薄黒カバー*/
#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: 999;			/*最前面に*/
	width: 90%;			/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 300px;		/*最大幅（調整してください）*/
	height: 100%;
	/*background: #efffef;*/		/*背景色*/
	background: #ffffff;
	transition: .3s ease-in-out;	/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);	/*左に隠しておく*/
	/*opacity: 0.9;*/

	/*背景画像*/
	background-image: url('../img/bg_menu.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: left bottom;

}

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

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

/*メニュー*/
.hmenu {
	list-style: none;
	overflow: hidden;
	padding-left: 0;
	text-align: center;
}
.hmenu li:not(:first-child){
	margin-top: 5%;
}
.hmenu li img {
	width: 90%;
}
.hmenu_view {
	display: none;
}
.hmenu_view_on {
	display: block;
}

#contact_view {
	display: block;
}


/* -------------------------------------------------------------------- */
/* ▼タブレットや狭い画面のPC用デザインとして付け足すデザインだけを記述 */
/* -------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	
	/*中身*/
	#nav-content {
		max-width: 300px;
	}

	/*メニュー*/
	.hmenu {
		position: fixed;
		top: 20px;
		bottom: 70px;
		right: 20px;
		overflow-y: auto;
	}
	.hmenu li img {
		width: 300px;
		opacity: 0.8;
	}
	.hmenu li img:hover {
		opacity: 1;
		transition: .3s;
	}
	.hmenu_view {
		display: block;
	}
	.hmenu_view_on {
		display: none;
	}

	#contact_view {
		display: none;
	}

}

/* ---------------------------------------------- */
/* ▼PC用デザインとして付け足すデザインだけを記述 */
/* ---------------------------------------------- */
@media screen and (min-width: 960px) {
	
	/*中身*/
	#nav-content {
		max-width: 400px;
	}

	/*メニュー*/
	.hmenu li img {
		width: auto;
	}

}