@charset "utf-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
}

/*
#wrapper {
  width: 950px;
  margin:0 auto;
  position:relative;
}
*/


body{
  font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
  font-weight: 300;
  font-size:16px;
  line-height:1.5em;
  color: #fff;
  background-color:#665e5c;

/*
  font-smoothing:subpixel-antialiased;
  -webkit-font-smoothing:subpixel-antialiased;
  -moz-font-smoothing:subpixel-antialiased;
*/
}


img{
  outline:none;
  border-style:none;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

a img:hover {
  /*opacity: 0.8;*/
}

a:link, a:visited {
/*  color: #333; */

  color: #fff;
  /*color:#5c98e6;*/
  /*text-decoration: none;*/
  text-decoration:underline;
}

a:hover {
}


/* ===========================================
Nav
=========================================== */

header{
  width:1000px;
  margin:0 auto;
  height:47px;
  padding-top:20px;
  overflow:hidden;
}

#logo{
  float:left;
  width:119px;
  padding-left:1px;
}

nav {
  /*width:;*/
  float:right;
  /background-color:red;*/
  padding: 0;
  margin: 0;
  padding-right:2px;
  padding-top:5px;  
  list-style-type: none;
  display:inline-block;
  font-weight: 100;
}

nav li {
  float: left;
  /*width: 158px;*/
  padding-top:0px;
  text-align:center;
  color:#ffffff !important;
  font-size:15px;
  line-height:1em;
  list-style-type:none;

  /*margin-left:40px;*/
  margin-left:39px;

}

nav li:last-child{
  /*margin-left:39px;*/
  margin-left:38px;
}


nav li span{
  display:inline-block;
  height:22px;
}

nav li.active span{
  border-bottom:solid 1px #fff;
}

nav li span:hover{
  border-bottom:solid 1px #fff;
}

nav li .tracking{
  border-bottom:none !important;
}

nav li:first-child .tracking{
  letter-spacing:0.04em;
} 

nav li a {
  color:#ffffff !important;
  text-decoration:none  !important;
}

nav li a:hover {
  color:#ffffff !important;
  text-decoration:none  !important;
}

#hamburger{
  display:none;
  width:55px;
  height:19px;
  float:right;
  cursor:pointer;
}

.hamburger_line{
  height:1px;
  background-color:#fff;
  margin-bottom:8px;
}

.hamburger_line:last-child{
  margin-bottom:0;  
}

#gnav_mobile{
  display:none;
  background-color:#665e5c;
  width:100vw;
  height:100vh;
  position:absolute;
  top:0;
  left:0;
  z-index:10;  
}

#gnav_mobile ul{
   width:100%;
   position: absolute;
   top: 50%;
   -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
}

#gnav_mobile li{
  font-size:21px;
  float:none;
  margin-left:0;
  margin-bottom:36px;
}

#gnav_mobile li span{
  display:inline-block;
  height:27px;
}

#gnav_mobile li:first-child .tracking{
  letter-spacing:0.4em;
} 

#gnav_mobile li:nth-child(4) .tracking{
  letter-spacing:0.5em;
} 

#gnav_mobile li:last-child{
  margin-bottom:0;
}

#gnav_mobile_close{
  width:17px;
  height:16px;
  
  width:33px;
  height:32px;

  position:absolute;
  right:20px;
  top:20px;
  cursor:pointer;
}

#close_line_left{
  width:1px;
  height:32px;

  background-color:#fff;

  transform-origin:left bottom;
  position:absolute;
  left:0;  
  transform:skewX(-45deg);
}

#close_line_right{
  width:1px;
  height:32px;

  background-color:#fff;

  transform-origin:right bottom;
  position:absolute;
  right:0;
  transform:skewX(45deg);
}



.sec_separate{
  background-color:#f2f2f2;
  height:10px;
}

.sec_category_name{
  width:1000px;
  height:75px;
  margin:0 auto;
  padding-left:12px;
  padding-top:46px;
  text-align:left;
}

.category_name{
  font-size:15px;
  line-height:1em;
  margin-bottom:13px;
  font-weight:100;
}

.category_name_line{
  width:25px;
  height:1px;
  background-color:#fff;
}

/* ===========================================
footer
=========================================== */
footer{
  font-size: 0.8rem;	
  width: 100%;
  text-align: center;
  padding: 80px 0 69px 0;
}

.btn_contact{
  margin:0 auto 103px;
  width:304px;
  height:64px;
  background:url(../images/img_contact_text.png) no-repeat 25px 18px, #fff;
  border-radius:32px;
  text-align:center;
}

.btn_contact:hover{
  background:url(../images/img_contact_text_hover.png) no-repeat 25px 18px, #a6a6a6;
}

.f_menu{
  width:584px;
  margin:0 auto 72px;
  /*background-color:red;*/
}

.f_menu li{
  float:left;
  font-size:15px;
  font-weight:100;
  border-left:solid 1px #fff;
  height:15px;
  line-height:1em;
  text-align:center;
  position:relative;
  list-style-type:none;
}

.f_menu li span{
  display:inline-block;
  position:relative;
  top:0px;
}

.f_menu li:nth-child(1){
  width:58px;
}

.f_menu li:nth-child(2){
  width:93px;
}

.f_menu li:nth-child(3){
  width:93px;
}

.f_menu li:nth-child(4){
  width:62px;
}

.f_menu li:nth-child(5){
  width:124px;
}

.f_menu li:nth-child(6){
  width:154px;
  border-right:solid 1px #fff;
}

.f_menu a:link, .f_menu a:visited{
  color:#fff;
  text-decoration:none;
}

.f_menu a:hover{
  text-decoration:underline;
}

footer address{
  font-size:15px;
  line-height:1.625em;
  font-weight:100;
  margin-bottom:34px;
  font-style:normal;
}

footer address .company_name{
  font-size:19px;
  font-weight:500;
  margin-bottom:7px;
}

footer small{
  font-weight:100;
  font-size:13px !important;
}

.copyright_block{
  font-weight:200;
  font-size:14px !important;
}

.br_address_sp{
  display:none;
}


#pagetop{
  position:fixed;
  right:25px;
  bottom:25px;    
  z-index:5;
  cursor:pointer;
  display:none;
  width:58px;
  height:58px;
}



@media screen and (max-width: 768px) {
    header{
        width:auto;
        margin-left:15px;
        margin-right:15px;
    }

    #gnav{
        display:none;
    }

    #hamburger{
      display:block;
    }

    .f_menu{
        display:none;
    }

    .sec_category_name{
        width:90%;
        padding-left:0;
    }

    #gnav_mobile li,
    .category_name,
    .f_menu li,
    footer address,
    footer small{
        font-weight:200;
    }


    .btn_contact{
        margin:0 auto 98px;
    }

}


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


@media screen and (max-width: 414px) {
    #pagetop{
      right:20px;
      bottom:20px;
    }
}


@media screen and (max-width: 375px) {

}


@media screen and (max-width: 320px) {

  .btn_contact{
      width:288px;
      background:url(../images/img_contact_text.png) no-repeat 17px 18px, #fff;
  }

  .btn_contact:hover{
      background:url(../images/img_contact_text_hover.png) no-repeat 17px 18px, #a6a6a6;
  }

  .br_address_sp{
    display:inline;
  }

}