@charset "utf-8";
header {position:relative;width:100%;height:auto;margin:0 auto;overflow: hidden;color:#FFF; z-index:2;
box-shadow:0 -2px 15px 0 rgba(10,10,10,1);
-webkit-box-shadow:0 0 5px 0 rgba(10,10,10,1);
-moz-box-shadow:0 0 5px 0 rgba(10,10,10,1);
}
#head {position:relative;width:960px;height:65px;margin: 0 auto;padding: 0 10px 0 10px;overflow:hidden;}
#head h1{margin:0 auto;padding:37px 0 0 0;font-size:small;text-align:right;letter-spacing:0;}
#head h1 span{padding:0 0 0 10px;}
#logo{margin:-29px 0 0 0;width:auto;height:50px;float:left;}

ul#lnavi {margin:0;float:right;position:absolute;top:0;right:10px; letter-spacing:1px;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); 
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15)); 
background: linear-gradient(top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)); 
}
ul#lnavi li{font-size:x-small;text-align:center; float:left;margin:0 0 0 1px;}
ul#lnavi li a {display:block;color:#FFF;margin:0;padding:5px 10px 5px 10px;}
ul#lnavi li a:hover {background:rgba(0, 0, 0, 0.15);}

nav{overflow:visible;clear:both;margin:0 auto;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.25)); 
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.25)); 
background: linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.25));
}

#navi{text-align:center;width:1080px;max-width:100%;margin:0 auto;
	table-layout:auto;
	display:table;
	border-collapse: separate;
	border-spacing: 0 0;
	vertical-align:top;
}
#navi li{font-size:85%;font-weight:bold;white-space:nowrap;text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);letter-spacing:0;
display:table-cell;
    *display: inline;  
    *zoom: 1;
}

#navi li span{display:block;font-size:xx-small;font-weight:normal;color:rgba(255, 255, 255, 0.3);padding:5px 0 0 0;}
#navi li#navia{background:rgba(255, 55, 0, 0.8);position:relative;}

#navi li a{display:block;height:27px;color:#FFF; padding:1em 1em 0.7em 1em;}
#navi li a:hover {background:rgba(0, 0, 0, 0.2);}

@media only screen and (max-width:1024px) {
#head {height:auto;width:100%;padding:0;}
#head h1{padding:4.7vw 1vw 1.8vw 0;font-size:77%;}
#logo{margin:-3.4vw 0 0 2vw;width:30vw;height:auto;}
ul#lnavi{right:0;}
ul#lnavi li a{padding:0.7vw 2vw 0.7vw 2vw;}

#navi{width:100%;}
#navi li{font-size:1.4vw;-moz-box-sizing:border-box;box-sizing:border-box;}
#navi li span{padding:0.5vw 0 0 0;}
#navi li#navia strong{font-size:50%;top:-0.8vw;right:-1vw;padding:0.3em 0.4em 0.2em 0.4em;}
#navi li a{height:auto;padding:1.4vw 0vw 0.5vw 0vw;}
}

@media only screen and (max-width: 736px) {
#navi li{font-size:2vw;float:left;width:20%;border-right:1px solid #0088a1;border-bottom:1px solid #0088a1;}
#navi li span{padding:0.8vw 0 0 0;letter-spacing:1px;}
#navi li#navim{letter-spacing:-2px;}
#navi li#navim span{letter-spacing:0;}
#navi li a{padding:1.5vw 0 0.5vw 0;}
}

@media only screen and (max-width: 667px) {
}

@media only screen and (max-width: 568px) {
}

@media only screen and (max-width: 480px) {
#head {width:100%;padding:0;}
#head h1{font-size:3vw;line-height:1.2;padding:8.5vw 1.5vw 0 0;}
#head h1 span{display:block;padding:0.5vw 0 0 0;}
#logo{width:49vw;margin:-9vw 0 2vw 2vw;}

ul#lnavi {width:80vw; margin:0;float:none;clear:both;position:absolute;left:9vw;}
ul#lnavi li{position:relative;width:19vw}

/*ul#lnavi {width:70vw; margin:0;float:none;clear:both;position:absolute;left:54%;}
ul#lnavi li{position:relative;left:-54%;width:24%;}
*/


ul#lnavi li a{padding:1.5vw 0 1.5vw 0;}
#navi li{font-size:3.3vw;width:33.333333%;}
#navi li span{padding:1.3vw 0 0 0;}
#navi li a{padding:3vw 0 2vw 0;}
#navi li#navia strong{top:-1vw;right:-1vw;}
}
@media only screen and (max-width: 320px) {
}