@charset "UTF-8";

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  padding:0 0;
  transition: 0s;
}

@media only screen and  (max-width: 800px) {
header {
  background-color:#2C2626;
}
}
.is-animation {
  background-color:#2C2626;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}

/* headerArea
--------------------------------------- */
.headerArea{
  margin:0 auto;
  width:100%;
  padding:0 1% 0 2%;
  box-sizing: border-box;
  position: relative;
}

.is-animation .headerArea{
  padding:0;
  position: relative;
  height:70px;
}

@media only screen and  (max-width: 800px) {
.headerArea{
  padding:0 0 0 7px;
}
}

.headerArea h1{
  padding:5px 0;
  line-height:1.5;
  color:#FFF;
  font-weight:bold;
  font-size:13px;
  text-shadow:1px 1px 1px #000;
}

@media only screen and  (max-width: 800px) {
.headerArea h1{
  display:none;
}
}

.is-animation .headerArea h1{
  display:none;
}

/* header #headerLogo */

#headerLogo{
  width:25%;
  height:auto;
  width:346px;
  height:60px;
  margin:5px 0;
}

#headerLogo img{
  width:100%;
  height:auto;
}

.is-animation #headerLogo{
  width:259px;
  height:45px;
  position: absolute;
  top: 5px;
  left:7px;
}

@media only screen and  (max-width: 800px) {
header {
  height:60px;
}

#headerLogo{
  width:259px;
  height:45px;
  margin:7px 0 0;
}
.is-animation #headerLogo{
  width:259px;
  height:45px;
  top: 0;
  left:7px;
}
}

@media screen and (max-width: 568px) {
header {
  top:32px;
}
#headerLogo{
  width:231px;
  height:40px;
  margin:9px 0 0;
}
.is-animation #headerLogo{
  width:231px;
  height:40px;
  top: 0;
  left:7px;
}
}

/* h_right
--------------------------------------- */
.h_right{
  display:none;
}

.is-animation .h_right{
  width:100%;
  float:right;
  display:block;
}

@media only screen and  (max-width: 800px) {
.h_right{display:none;}
}

/* sub_m
--------------------------------------- */
.sub_m{
  width:200px;
  position: absolute;
  top: 0;
  right: 2%;
  /*background-color:#024D9C;*/
  padding:5px;
}
.is-animation .sub_m{
  top: 5px;
  right: 0;
  padding:0;
  /*background-color:#2C2626;*/
}

@media only screen and  (max-width: 1280px) {
.is-animation .sub_m{
  right: 0;
}
}

@media only screen and  (max-width: 1300px) {
.sub_m{
  display:none;
}

.is-animation .sub_m{
  display:none;
}
}

.sub_m .online{
  margin:0 1% 0 0;
  position: relative;
  display:block;
}

.online li{
  margin:0 5px 0 0;
  padding:2% 0;
  text-align: center;
}

.online .tl{
  font-size:13px;
  letter-spacing:0em;
  color:#FFF;
  line-height:1;
  padding-top:5px;
  min-width:175px;
  text-shadow:1px 1px 1px #633B22;
}

.online .tl span{
  font-weight:500;
  margin-left:3px;
  letter-spacing:0.05em;
  font-size:18px;
  font-family: "Times New Roman", "Ÿà–¾’©", "Yu Mincho", "Ÿà–¾’©‘Ì", "YuMincho", "ƒqƒ‰ƒMƒm–¾’© Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS–¾’©E", "ƒ�ƒCƒŠƒI", Meiryo, serif;
}

.online .tm{
  font-size:13px;
  font-weight:400;
  color:#FFF;
}

/* main_menu
--------------------------------------- */
.main_menu{
  display:none;
}

.is-animation .main_menu{
  display:block;
  margin:20px 0 0;
  width:100%;
  clear:both;
  box-sizing: border-box;
  text-align: center;
}

.main_menu li {
  display:inline-block;
  vertical-align:top;
  margin:0 1.5%;
  font-size:14px;
  font-weight:400;
  letter-spacing:0.03em;
  font-weight:bold;
  position: relative;
  text-align: center;
  line-height:1.2;
}

.main_menu li span{
  font-family: 'Roboto', sans-serif;
  font-size:0.8em;
  font-weight:400;
  text-transform: uppercase;
}

@media only screen and  (max-width: 1580px) {
.is-animation .main_menu{
  padding-left:5%;
}

.main_menu li {
  margin:0 1%;
}
}

@media only screen and  (max-width: 1300px) {
.is-animation .main_menu{
  padding-left:200px;
}
}

@media only screen and  (max-width: 1000px) {
.is-animation .main_menu{
  display:none;
}
}

.main_menu li a{
  color:#FFF;
}

.main_menu li a:hover{
  opacity: 0.6;
}


/* .menu_sp
-------------------------------------------------- */
#menu_sp {
  display: none;
}
.slicknav_menu {
  display:none;
}

@media screen and (max-width: 800px) {
.slicknav_menu {
  display:block;
  z-index: 1000;
}

.mstel{
  text-align: center;
  padding:5px 0;
  line-height:1.4;
}

.mstel a{
  font-size:1.4em;
  font-weight:500;
}

.mstel a:hover{
  color:#108DBB!important;
  text-decoration: none!important;
}
.mstel a {
  color: #fff;
  text-decoration: underline!important;
}

.mstx{
  font-size:12px;
  text-align: center;
  padding:8px 0 5px;
  clear:both;
}
}