html, body { position: relative; }

body.open { overflow-x: hidden; }

.mcl_nav_wrap { position: relative; }

.admin-bar .mcl_nav_btn { margin-top: 32px; }
.admin-bar .mcl_nav_list { padding-top: 47px; }

/*----------------------------------------
	nav btn style 
/*-------------------------------------- */
.mcl_nav_btn {
		position:	fixed;
		z-index:	99999;
		display:	block;
		width:		48px;/* ←幅 変更 */
		height:		48px;/* ←縦 変更 */
		border:		none;
		cursor:		pointer;
		padding:	8px;
		box-sizing:	border-box;
		}
.mcl_nav_btn .btn_border {
		display:			block;
		width:				32px;/* ←3本ライン長さ 変更 */
		-webkit-transition: all 0.3s;
		transition:			all 0.3s;
		margin-top:		4px;
		margin-bottom:		5px;
		}
.mcl_nav_btn .btn_border:last-child:after{/* ←「menu」追記 */
		color:#fff;
		content: "menu";
		font-size:0.95em;
			}
body.open .mcl_nav_btn .btn_border.middle { visibility: hidden; }
body.open .mcl_nav_btn .btn_border:first-child {
		position: absolute;
		top: 18px;/* ←「×」の上余白 変更 */
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		}
body.open .mcl_nav_btn .btn_border:last-child {
		position: absolute;
		top: 18px;/* ←「×」の上余白 変更 */
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		}

body.open .mcl_nav_btn .btn_border:last-child:after {/* ←「menu」非表示 */
	content: none;
	}

/*----------------------------------------
	nav list style 
/*-------------------------------------- */
.mcl_nav_list {
	position: fixed;
	top: 0;
	z-index: 99999;
	display: none;
	padding: 15px 0 30px 0;
	width: 250px;
	height: 100%;
	box-shadow: 1px 0 40px rgba(0, 0, 0, 0.2);
	margin: 0;
	overflow:scroll;/* ←リスト長くなった時にスクロール */
	}
.mcl_nav_list li {
	list-style: none;
	}
.mcl_nav_list a {
	display: block;
	font-size: 0.8em;/* ←文字サイズ */
	text-decoration: none;
	}
.mcl_nav_list a:hover {
	text-decoration: none;
	}
.mcl_nav_list > li {
	margin-bottom: 0.6em;
	padding: 0.6em 1em 0;/* ←リスト 1階層目の余白 */
	}
.mcl_nav_list .sub-menu {
	margin-top: 0.6em;
	}
.mcl_nav_list .sub-menu > li {/* ←リスト 2階層目の余白 */
	margin-bottom: 0.6em;
	padding: 0.6em 0 0 1.2em;
	}

/*----------------------------------------
	layer style 
/*-------------------------------------- */
.mcl_nav_layer { position: fixed; top: 0; left: 0; z-index: 9999; display: none; width: 100%; height: 100%; background-color: #000; opacity: 0.5; }

.mcl_nav_btn {
	/*border: solid 1px #333; ←ボタンの枠線 非表示に */
	background-color: #00ac9d;/* ←ボタンの背景色 */
	border-radius:			3px;/* ←ボタン角丸に */
	-moz-border-radius:		3px;
	-webkit-border-radius:	3px;
	}
.mcl_nav_btn .btn_border {
	border-top: solid 2px #fff;
	}

/*----------------------------------------
	nav list style 
/*-------------------------------------- */
.mcl_nav_list { background: #333; box-shadow: -1px 0 40px rgba(0, 0, 0, 0.5), 1px 0 40px rgba(0, 0, 0, 0.5); }
.mcl_nav_list a { color: #fff; }
.mcl_nav_list a:hover { color: #ccc; }
.mcl_nav_list > li + li {
	overflow: hidden;
	border-top: solid 1px #555;/* ←ボーダー色変更 */
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
	}
.mcl_nav_list .sub-menu > li {
	overflow: hidden;
	border-top: solid 1px #555;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
	}