@charset "UTF-8";

/* -------------------------
   共通構成
   ------------------------- */

html{
 background-color:#595959;
}
body{
 min-width:320px;
 height:100%;
 min-height:100%;
 background:url(img/bg_body.png) repeat-x 0px 38px #cdcdc7;
 font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* header
   --------------- */

#header:after{
 content:"";
 position:absolute;
 top:35px;
 width:100%;
 height:0px;
 border-top:1px solid #6bbf3f;
 border-bottom:1px solid #51b24c;
 display:block;
}
#header ul{
 position:absolute;
 top:0px;
 right:5px;
}

/* footer
   --------------- */

#footer{
 width:100%;
 height:22px;
}

/* menu
   --------------- */

#menu{
 margin-top:2px;
 box-sizing:border-box;
}
#menu #navi_l:after{
 content:"";
 display:block;
 clear:both;
}
#menu #navi_l li{
 position:relative;
 padding-left:50px;
 width:33%;
 height:25px;
 border-right:1px solid #262626;
 box-sizing:border-box;
 background-color:#333333;
 font-size:12px;
 line-height:25px;
 float:left;
}
#menu #navi_l li:last-child{
 width:34%;
 border-right:none;
 background:url("img/ico_counter.png") no-repeat 19px 5px #333333;
}
#menu #navi_l li:last-child img{
 margin-top:-1px;
}
#menu #navi_l li a{
 color:#d6d6d6;
 text-decoration:none;
 display:block;
}
#menu #navi_l li:before{
 position:absolute;
 font-family:'FontAwesome';
 content:'\f016';
 top:-1px;
 left:23px;
 color:#ffffff;
 font-size:13px !important;
}
#menu #navi_l li a:before{
 position:absolute;
 font-family:'FontAwesome';
 content:'\f11b';
 top:2px;
 left:16px;
 color:#c6e6ff;
 font-size:13px !important;
}
#menu #navi_l li#navi_l_ff11{
 width:50%;
 height:49px;
 border-bottom:1px solid #262626;
 background:url("img/ico_ff11.gif") no-repeat 10px 8px #333333;
 line-height:49px;
}
#menu #navi_l li#navi_l_ff11 span{
 font-size:14px;
 font-weight:bold;
 color:#6699cc;
}
#menu #navi_l li#navi_l_ff14{
 width:50%;
 height:49px;
 border-bottom:1px solid #262626;
 background:url("img/ico_ff14.gif") no-repeat 10px 8px #333333;
 line-height:49px;
}
#menu #navi_l li#navi_l_ff14 span{
 font-size:14px;
 font-weight:bold;
 color:#cc9966;
}
#menu #navi_l li:hover,
#menu #navi_l li#navi_l_ff11:hover,
#menu #navi_l li#navi_l_ff14:hover{
 background-color:#404040;
}
#menu #navi_l li#navi_l_ff11:before,
#menu #navi_l li#navi_l_ff11 a:before,
#menu #navi_l li#navi_l_ff14 a:before,
#menu #navi_l li#navi_l_ff14:before,
#menu #navi_l li:last-child:before{
 display:none;
}

/* data
   --------------- */

#data{
 padding-left:5px;
 width:100%;
 min-height:200px;
 border-top:1px solid #ffffff;
 box-sizing:border-box;
}

/* PageTop
   --------------- */

#PageTop{
 z-index:11;
 position:fixed;
 right:5px;
 bottom:5px;
 width:40px;
 height:40px;
 border-radius:5px;
 background-color:rgba(33, 33, 33, .9);
 line-height:40px;
}
#PageTop a{
 overflow:hidden;
 white-space:nowrap;
 text-indent:100%;
 display:block;
}
#PageTop:before{
 pointer-events:none;
 position:absolute;
 font-family:'FontAwesome';
 content:'\f077';
 top:-2px;
 left:50%;
 margin-left:-12px;
 color:#ffffff;
 font-size:24px !important;
 text-shadow:0px 0px 3px #000000;
}

/* responsive
   --------------- */

@media screen and (max-width:480px){
 #menu #navi_l li,
 #menu #navi_l li:last-child,
 #menu #navi_l li#navi_l_ff11,
 #menu #navi_l li#navi_l_ff14{
  width:100%;
  border-bottom:1px solid #262626;
 }
}
@media screen and (max-width:680px){
 #logo{
  left:calc(50% - 56px);
 }
 #header_sitelink{
  z-index:7;
  position:absolute;
  margin-left:calc(100% - 50px);
  width:50px;
  height:35px;
  line-height:35px;
 }
 #header_sitelink a{
  overflow:hidden;
  text-indent:100%;
  white-space:nowrap;
  display:block;
 }
 #header #header_sitelink:before{
  position:absolute;
  font-family:'FontAwesome';
  content:'\f0e8';
  top:-1px;
  right:18px;
  color:#969690;
  font-size:14px !important;
  text-shadow:0px 0px 3px #000000;
 }
 #header_sitelink ul{
  width:229px;
  top:35px;
  border:1px solid #51b24c;
  border-left:1px solid #6bbf3f;
  border-top:none;
  border-radius:3px;
  display:none;
 }
 #header_sitelink:hover ul{
  display:block;
 }
 #data{
  font-size:80%;
 }
}
@media screen and (min-width:1201px){
 header{
  margin:0px auto;
  width:1200px;
 }
 #header ul{
  margin-right:calc(50% - 600px);
 }
 footer{
  margin:0px auto;
  width:1200px;
 }
 #menu{
  margin:2px auto 0px auto;
  border-right:1px solid #d6d6d6;
  border-left:1px solid #d6d6d6;
  width:1200px;
 }
 #data{
  margin:0px auto;
  width:1200px;
 }
 #PageTop{
  right:calc(50% - 595px);
 }
}