/*menu*/

#headerarea{width:100%;position:relative;z-index: 100; box-sizing: border-box;}
#headerarea:after{content:"";clear:both;display:block}
.is-fixed #headerarea {display: block; position:fixed; top:0; left:0; margin-bottom:0; box-shadow: 0 5px 5px 0 rgba(0,0,0,0.05); background: rgba(255,255,255,0.8);}


.search{float:right;padding:0.5vw 2vw 0 1vw;}
.search .btn10{padding:1vw 1vw;}

.logo{display: block;float:left;padding:26px 0 26px;width:24%;}
.logo a{font-size:28px;display:block;padding:0 0 0 20px}
.is-fixed .logo{padding:0; position: relative; top:2.8vw;}

nav#header_navi{float:right;}
nav#header_navi>ul{float:left;position:relative}
nav#header_navi li{list-style:none;float:left;}

nav#header_navi li a.nav01{padding: 2vw 2.4vw 1vw;/*margin: 0 2vw 0 0;*/ letter-spacing: 0.1em; box-sizing: border-box; font-weight: bold;font-style: italic;}
nav#header_navi li a.nav01 span{ display: block; width: 100%; font-size: .8em; text-align: center; padding: 4px 0; font-style: normal; font-weight: normal;}
nav#header_navi li a.nav01 img{width: 34px; height: auto;}


nav#header_navi .dropdown{position:relative;box-sizing: border-box;}
nav#header_navi li a{float:left;padding:35px}
nav#header_navi li a:hover{background:#004063; color: #fff;}
nav#header_navi li ul{display:none}
nav#header_navi li:hover ul{display:inline}
nav#header_navi li li{float:none}
nav#header_navi .dropdown ul{position:absolute;left:0; right: 1vw; top:100%;background:#fff;padding:20px 0;border-bottom:3px solid #34495e;box-sizing: border-box;}
nav#header_navi .dropdown li{white-space:nowrap}
nav#header_navi .dropdown li a{padding:10px 0px;font-size:13px;min-width:200px;box-sizing: border-box;}
nav#header_navi .mega-dropdown{width:100%;position:absolute;top:100%;left:0; right: 1vw; background:#004063;overflow:hidden;padding:25px;/*border-bottom:3px solid #34495e;*//*box-shadow: 2px 2px 4px gray;*/color: #fff;}
nav#header_navi li li a{float:none;color:#fff;display:block;padding:8px 0px;border-radius:3px;font-size:13px}
nav#header_navi li li a:hover{color: #ccc;}
.mega-col{width:23%;float:left;margin: 0 2% 0 0;}
.mega-col:last-child{margin-right: 0;}
nav#header_navi img{ width: auto; height: auto;}

nav#header_navi li.li_tit {font-size: 100%; border-bottom: 1px solid #ccc;font-size: 90%; font-weight: bold; margin: 0 0 2%; padding: 0 0 1%;}
nav#header_navi li li a:before { content: '●'; color:#73C2B5; position:relative; margin: 0 3px 0 0; font-size: 50%;}

#menu-icon{position:absolute;right:0;top:50%;/*margin-top:-12px;*/margin-right:6vw;display:none}
#menu-icon span{border:1px solid #2b2d42; display:block;-webkit-transition:all .2s;transition:all .1s}
#menu-icon span.first{ width:30px; margin-bottom:7px;}
#menu-icon span.second{ width:26px; margin-bottom:7px;}
#menu-icon span.third{ width:22px;}



@media only screen and (max-width: 1170px) {
  nav#header_navi >ul>li >a{padding:35px 15px}
}

@media only screen and (min-width: 960px) {
  nav#header_navi{display:block!important}
}

@media only screen and (max-width: 959px) {
	.logo{display: block;float:left;padding:4vw 0;width:40%;}
	.is-fixed .logo{position: relative; top:0.8vw;padding:2vw 0;}
	.active .logo{position: relative; top:0.8vw;padding:2vw 0;}

	nav#header_navi{display:none;width:100%;clear:both;float:none;max-height:600px; overflow-y:scroll;background: rgba(0, 64, 99,0.9);padding:0;/*box-shadow: 2px 2px 4px gray;*/}
	nav#header_navi li a.nav01 img{width: 20px; height: auto; margin: 0 1%;}
	#menu-icon{display:inline;top:6vw;cursor:pointer;}
	.is-fixed #menu-icon{display:inline;top:4vw;cursor:pointer; margin-top:0;}
	
	#menu-icon.active .first{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-top:10px}
	#menu-icon.active .second{transform:rotate(135deg);-webkit-transform:rotate(135deg);position:relative;top:-9px; width: 30px;}
	#menu-icon.active .third{display:none}
	.search{display: none;}

	nav#header_navi ul{float:none}
	nav#header_navi li{float:none}
	nav#header_navi li a.nav01{width: 100%; padding: 2vw; /*background:#0a5593;*/background:#193768;}

	nav#header_navi ul li a{float:none;padding:8px;display:block}
	#headerarea nav#header_navi ul ul{display:block;position:static;background:none;border:none;padding:0}
	#headerarea nav#header_navi ul ul.mega-col,#headerarea nav#header_navi ul ul.mega-dropdown{padding:4vw;}
	
	#headerarea nav#header_navi a{padding:8px 0; margin: 0 0 1px;color: #fff;}
	#headerarea nav#header_navi a:hover{color:#ccc;border-radius:3px}
	nav#header_navi li li a{font-size: 1em;}
	nav#header_navi li li a:before {font-size: 80%;}
	#headerarea nav#header_navi ul li li a:before{content:"- "}
	.mega-col{width:100%}
	nav#header_navi .mega-dropdown{box-shadow: none;}	
	nav#header_navi li a.nav01 span{ display: inline; width: 100%; font-size: .8em; text-align: center; padding: 4px; font-style: normal; font-weight: normal;}	
}