div#nav_box { position:relative; }

ul#mqNavi > li > a { display:block; }

@media all and (min-width:1px) and (max-width:799px) {
	div#mqLayout { min-width:320px; }

	div#topNavi_box > aside > div > ul > li > a { padding:11px 9px; }

	div#mqLayout { min-width:320px; }

	div#mqCheck { z-index:1; }
}

@media all and (min-width:1px) and (max-width:1216px) {
	header#mqHeader {
		
		}
	div#topNavi_box { background-color:#f7f7f7; border-bottom:1px solid #b9b9b9;}
	div#topNavi_box > aside { overflow:hidden; }
	div#topNavi_box > aside > div:last-of-type { float:right; }
	div#topNavi_box > aside > div > ul { overflow:hidden; }
	div#topNavi_box > aside > div > ul > li { float:left; height:35px;}
	div#topNavi_box > aside > div:first-of-type > ul > li {}
	div#topNavi_box > aside > div:last-of-type > ul > li {  border-left:1px solid #b9b9b9; }
	div#topNavi_box > aside > div > ul > li > a { display:block; font-weight:bold;}
	div#topNavi_box > aside > div > ul > li.pdup > a {padding:8px 9px;}

	p#mqNaviToggle { position:absolute; width:40px; height:40px; top:15px; right:15px; z-index:104; }
	p#mqNaviToggle > a { width:100%; height:100%; display:block; background:url('/images/common/btn_navi_display.png') no-repeat; }
	p#mqNaviToggle > a.enter { background-position:-40px 0; }

	ul#mqNavi { width:160px; height:100%; position:fixed; top:0; left:-160px; z-index:103; border-top:3px solid #0072bc; padding-top:0; background:#fff; overflow-y:auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
	ul#mqNavi > li > a { background-color:#fff; border-bottom:1px solid #d7d7d7; background-position:center -16px; font-size:1.2em; font-weight:bold; text-align:center; padding-top:10px; padding-bottom:10px; }
	ul#mqNavi > li > a:focus,
	ul#mqNavi > li > a:hover,
	ul#mqNavi > li > a.enter { background-color:#0072bc; color:#fff; }
	ul#mqNavi > li:first-of-type {border-top:1px solid #d7d7d7;}
	ul#mqNavi > li > ul { background-color:#fff; }
	ul#mqNavi > li > ul > li { border-bottom:1px solid #d7d7d7; }
	ul#mqNavi > li > ul > li > * { display:block; text-align:center; padding-top:8px; padding-bottom:8px; }
	ul#mqNavi > li > ul > li > *:focus,
	ul#mqNavi > li > ul > li > *:hover { background-color:#ffc12c; color:#fff; }

	ul#mqNavi > li > ul > li > ul{ background-color:#fff; }
	ul#mqNavi > li > ul > li > ul> li {   border-top:1px solid #d7d7d7; }
	ul#mqNavi > li > ul > li > ul> li > * { display:block; text-align:left; padding-top:8px; padding-bottom:8px; padding-left:18px; }
	ul#mqNavi > li > ul > li > ul> li > *:focus,
	ul#mqNavi > li > ul > li > ul> li > *:hover { background-color:#ffc12c; color:#fff; }

	ul#mqNavi > li:last-of-type { margin-bottom:50px; }

	div#nav_box > nav > div.logo { padding:16px 0; text-align:center; }

}

@media all and (min-width:800px) and (max-width:1216px) {
	div#topNavi_box > aside > div > ul > li > a { padding:10px 20px; }

	div#mqCheck { z-index:2; }
}


@media all and (min-width:1217px) {
	/* PC header */
	header#mqHeader { width:100%; position:fixed; left:0; top:0;  z-index:255; background:#fff;}
	header#mqHeader > div#topNavi_box { width:100%; height:auto; background:#f7f7f7;  border-bottom:1px solid #b9b9b9;}
	header#mqHeader > div#topNavi_box > aside#topNavi { overflow:hidden; max-width:1200px; width:100%; margin-left:auto; margin-right:auto; }
	header#mqHeader > div#topNavi_box > aside#topNavi > div { float:left; }

	header#mqHeader > div#topNavi_box > aside#topNavi > div#right_topNavi { float:right; height:35px;}
	header#mqHeader > div#topNavi_box > aside#topNavi > div#right_topNavi > ul { overflow:hidden; }
	header#mqHeader > div#topNavi_box > aside#topNavi > div#right_topNavi > ul > li { float:left;  margin:0 1px 0 0; }
	header#mqHeader > div#topNavi_box > aside#topNavi > div#right_topNavi > ul > li > a { display:block;  padding:11px 15px; border-left:1px solid #b9b9b9;}
	header#mqHeader > div#topNavi_box > aside#topNavi > div#right_topNavi > ul > li:last-of-type {border-right:1px solid #b9b9b9;}
	header#mqHeader > div#nav_box { width:100%; height:auto; border-bottom:1px solid #ccc;}
	header#mqHeader > div#nav_box > div.line { position:absolute; top:65px; left:0; border-bottom:1px solid #b9b9b9; width:100%; }
	header#mqHeader > div#nav_box > nav { overflow:hidden; max-width:1200px; width:100%; margin-left:auto; margin-right:auto; }
	header#mqHeader > div#nav_box > nav > div { float:left; }
	header#mqHeader > div#nav_box > nav > div.logo { padding:13px 0 0 0;  }
	header#mqHeader > div#nav_box > nav > div.menu { padding-top:21px; float:right; }
	
	ul#mqNavi { overflow:hidden; width:auto; text-align:center; }
	ul#mqNavi > li { float:left; }
	ul#mqNavi > li > a { width:140px; display:block; padding:5px 0 15px 0; font-size:1.4em; font-weight:bold; color:#4b4b4b; border-bottom:5px solid #fff; }
	ul#mqNavi > li > a.enter { color:#2166ac; text-decoration:none;}
	ul#mqNavi > li > ul { padding-top:3px; height:330px; border-right:1px solid #ccc; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;  background:#f7fbff;}
	ul#mqNavi > li:first-of-type > ul { border-left:1px solid #ccc; }
	ul#mqNavi > li > ul > li { text-align:left; }
	ul#mqNavi > li > ul > li > a { display:block; padding:9px 12px 9px 20px; font-size:1.1em; color:#6e6e6e;}
	ul#mqNavi > li > ul > li > a.enter { color:#fff; }
	ul#mqNavi > li > ul > li > a:focus,
	ul#mqNavi > li > ul > li > a:hover { background-color:#10a1e5; color:#fff; }

	ul#mqNavi > li > ul > li > ul > li > a { display:block; padding:9px 12px 9px 30px; color:#6e6e6e;  }
	ul#mqNavi > li > ul > li > ul > li > a.enter { color:#fff; }
	ul#mqNavi > li > ul > li > ul > li > a:focus,
	ul#mqNavi > li > ul > li > ul > li > a:hover { background-color:#9071e5; color:#fff; }
	
	div#mqCheck { z-index:3; }
}