@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700,900&display=swap&subset=japanese');


/* ------------------------------------------------------------- */
/* StyleSection _02  Basic CSS                                   */
/* ------------------------------------------------------------- */
html,body{
  /* height:100%; */ /* GSAP スクロールトリガーで競合 */
  width:100%;
}
html{
  font-size:62.5%;
  overflow-y: scroll;
}
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form {
  text-align: left;
  margin: 0;
  padding: 0;
}
ul{letter-spacing: -0.4em;}
.android ul{letter-spacing: -1em;}
ul li{letter-spacing: normal;}


body a {
  text-decoration:none;
  color:inherit;
}
body{
  -webkit-text-size-adjust: 100%;
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.9;
  font-family: 'Noto Sans JP', sans-serif;
  font-feature-settings: "palt" 1;
  font-weight: 500;
  color: #2A2A2A;
  background: #fff;
  word-wrap: break-word;
  position: relative;
}

img{
  width: auto;
  max-width: 100%;
  height:auto;
}
@media screen and (min-width: 1051px) {
  html,body{
  }
  body{
    margin: 0 auto;
    min-width: 1140px;
  }
  /* 画像位置調整 PC */
  #nav1 h2{
    margin-top: 100px;
  }
}

@media screen and (max-width: 1050px) {
  html{-webkit-overflow-scrolling: touch;}
  body{
    font-size:3.2vw;
    line-height: 1.83;
  }
  img{
    width:100%;
    max-width: 100vw;
    height:auto;
  }
}

a, a img, a:hover span{
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media screen and (min-width: 1051px) {
  a:hover, a:hover img, a:hover span{
    opacity: 0.6;
  }
}
table{width: 100%;}


/* ------------------------------------------------------------- */
/* StyleSection _03  Box CSS                                     */
/* ------------------------------------------------------------- */
/*
.wrap, .wrap2, .wrap3{
  margin: 0 auto;
  position: relative;
}
.wrap{
  width:1100px;
}
.wrap2{
  width:1150px;
}
.wrap3{
  width:1200px;
}
*/

@media screen and (min-width: 1051px) {
  .sp{display: none!important;}
}

@media screen and (max-width: 1050px) {
  .pc{
    display: none!important;
  }
/*  
  body{
    width: 100%;
  }
  main{
    width: 100%;
    overflow: hidden;
  }

  .wrap, .wrap2, .wrap3{
    width: 89vw;
  }
  .sp100w{
    width: 100vw;
    margin-left: -5.5vw;
  }
*/
}



/* ------------------------------------------------------------- */
/* StyleSection _04  header Drop Down Menu CSS                   */
/* ------------------------------------------------------------- */
.nav_pc {
  margin-right:30px;
}

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #000;
  padding: 0;
}

/* 通常 Menu */
.menu li {
  text-align: center;
  position: relative;
  width: fit-content;
  min-width: 70px;
  margin-left: 4px;
  border-bottom:1px solid #000000; 
  background-color: #ccc;
  background-color: rgba(255, 255, 255, 0.61);
  border-radius: 4px 4px 0 0;
/*  
  font-size: 1.em;
  font-weight: 600;
 */
}
.menu li a {
  padding: 10px;
  display: block;
}
.menu li a:hover {
  background: #ccc;
}

/* アンダーバー 伸長 */
.menu a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #0D220D;       /* アンダーの色 */
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
}
.menu a:hover::after {
  transform: scale(1, 1);
}


/* 表示中 Menu Button */
.menu li.active {
  padding: 10px;
  border-bottom:4px solid #21823f; 
  color:#21823f; 
  background: #fff;
}

/* Drop Menu Button */
.menu li.drop {
  min-width: 140px;
  padding: 10px 5px 10px 5px;
  width: fit-content;
}
/* 三角矢印 */
.menu li.drop span:before {
  position: absolute;
  content: '';
  z-index:6;
  top: 38px;
  left: 30%;
  margin: auto;
  border-style:solid;
  border-width: 8px 30px 0 30px;
  border-color: #8a8a8a transparent transparent transparent;
}

/* Drop Down List Item Box */
.menuSub {
  position: absolute;
  margin-top: 16px;
  margin-left: -6px;
  padding: 0;
  display: none;
}
.menuSub li {
  padding: 5px;
  min-width: 180px;
}
.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #000;
  text-decoration: none;
}
.menuSub li a:hover {
  background: #FFF;
}



@media screen and (min-width: 1051px) {
  div.nav_smp {
    display: none;
  }
}

@media screen and (max-width: 1050px) {
  .nav_smp .gnav a {
    font-size: 1.8em;
    letter-spacing: 0.4em;
  }
  div.nav_pc {
    display: none;
  }
}


/* ------------------------------------------------------------- */
/* StyleSection _05  List Nav Button CSS                         */
/* ------------------------------------------------------------- */
/* ===== 基本設定 ===== */
.nav-cont{
  display: flex;
  justify-content: center;
}

#nav {
  display: flex;
}
#nav li {
  text-align: center;
  height: 50px;
  line-height: 50px;
  margin-right: 2px;
  font-size: 1.4em;
}

#nav .pa-link, #nav .active{
  width: 40px;
}

#nav .l-nav {
  border-radius: 5px 0 0 5px;
  width: 40px;
}
#nav .r-nav {
  border-radius: 0 5px 5px 0;
  width: 40px;
}
#nav a {
  display:block;
  width: 100%;
}

/* ===== .active .disabled 以外の設定 ===== */
#nav .link-l, #nav .pa-link {
   color: #979797;
  border: solid 2px #A5A5A5;
  background-color: #eee;
}
#nav .link-l:hover, #nav .pa-link:hover {
  color: #fff;
  border: solid 2px #5A5A5A;
  background-color: #C1C1C1;
}

/* ===== 現在のページNo ===== */
#nav li.active {
  font-weight: bold;
  color:#0D220D;
  border: solid 2px #0D220D;
  background-color: #eee;
}

/* ===== L R ボタン .disabled ===== */
#nav li.disabled {
   color: #ccc;
  border: solid 2px #E6E6E6;
  background-color: #E6E6E6;
}

/* ------------------------------------------------------------- */
/* StyleSection _06  Page Nav Button CSS                         */
/* ------------------------------------------------------------- */
/* ===== .active .disabled 以外の設定 ===== */
#nav .center-link {
   color: #979797;
  border: solid 2px #A5A5A5;
  background-color: #eee;
  width: 180px;
  margin: 0 20px;
}
 #nav .center-link:hover {
  color: #fff;
  border: solid 2px #5A5A5A;
  background-color: #C1C1C1;
}





/* ------------------------------------------------------------- */
/* StyleSection _07  General CSS                                 */
/* ------------------------------------------------------------- */

/* ------------------------------
    clearfix
------------------------------ */
.cf:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.cf {display: inline-block;}

/* Hides from IE Mac */
* html .cf {height: 1%;}
.cf {display:block;}
/* End Hack */

/* ------------------------------
   float
------------------------------ */
.aligncenter{
    display:block;
    margin:0 auto;
}
.alignright{
  float:right;
}
.alignleft{
  float:left;
}
/* ------------------------------
   flex
------------------------------ */
.flex{
    display:flex;
    flex-wrap: nowrap;
    justify-content:space-between;
}
.flex_wrap{
    flex-wrap: wrap;
}
.jc_start{
    justify-content:flex-start!important;
}
.jc_center{
    justify-content:center!important;
}
.jc_end{
    justify-content:flex-end!important;
}
.item_center{
    align-items: center;
}
.item_end{
  align-items: flex-end;
}
.flex_prev{
  flex-flow: row-reverse;
}
@media screen and (min-width: 1051px) {
  .flex_pc{
    display:flex;
    flex-wrap: nowrap;
    justify-content:space-between;
    flex-wrap: wrap;
    gap: 30px 0;
  }

}
@media screen and (max-width: 1050px) {
  .flex_sp{
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
  }
}

/* ------------------------------
   text
------------------------------ */
.taC{text-align: center!important;}
.taR{text-align: right!important;}
.taL{text-align: left!important;}

.fs05 {font-size: 0.5em!important;}
.fs06 {font-size: 0.6em!important;}
.fs07 {font-size: 0.7em!important;}
.fs08 {font-size: 0.8em!important;}
.fs09 {font-size: 0.9em!important;}
.fs10 {font-size: 1em!important;}
.fs11 {font-size: 1.1em!important;}
.fs12 {font-size: 1.2em!important;}
.fs13 {font-size: 1.3em!important;}
.fs14 {font-size: 1.4em!important;}
.fs15 {font-size: 1.5em!important;}
.fs20 {font-size: 2em!important;}

.italic { font-style: italic; }

.nowrap{
  display: inline-block;
  text-indent: 0;
}
.fw3{font-weight: 300!important;}
.fw4{font-weight: 400!important;}
.fw5{font-weight: 500!important;}
.fw7{font-weight: 700!important;}
.fw9{font-weight: 900!important;}

.txt_blk{
  color: #2A2A2A;
}
.txt_wh{
  color: #fff;
}
.txt_yl{
  color: #FFFF52;
}
.txt_or{
  color: #fc651b;
}
.txt_red{
  color: #ff0000;
}
.txt_pink{
  color: #d3438b;
}
.txt_blue{
  color: #0073E6;
}
.txt_ltblu{
  color: #46A3FF;
}


.txt_marker{
  background: linear-gradient(transparent 95%, #fff 0%);
  display: inline;
  /* 横に余白をつけたり、下にずらす時は下記の padding を調整 */
  padding: 0 0 2px;
}

.box_sha_gry {
 box-shadow: 2px 2px 8px gray;
}

/* ------------------------------
   Width Percent
------------------------------ */
.wp-50 { width: 50%; }
.wp-60 { width: 60%; }
.wp-70 { width: 70%; }
.wp-80 { width: 80%; }
.wp-90 { width: 90%; }
.wp-1000 { width: 100%; }


/* ------------------------------
   Margin Top
------------------------------ */
.mg-t4 { margin-top: 4px !important; }
.mg-t5 { margin-top: 5px !important; }
.mg-t6 { margin-top: 6px !important; }
.mg-t7 { margin-top: 7px !important; }
.mg-t8 { margin-top: 8px !important; }

.mg-t10 { margin-top: 10px !important; }
.mg-t20 { margin-top: 20px !important; }
.mg-t30 { margin-top: 30px !important; }
.mg-t40 { margin-top: 40px !important; }
.mg-t50 { margin-top: 50px !important; }
.mg-t60 { margin-top: 60px !important; }
.mg-t70 { margin-top: 70px !important; }
.mg-t80 { margin-top: 80px !important; }
.mg-t90 { margin-top: 90px !important; }
.mg-t100 { margin-top: 100px !important; }

/* ------------------------------
   Margin Bottom
------------------------------ */
.mg-b4 { margin-bottom: 4px !important; }
.mg-b5 { margin-bottom: 5px !important; }
.mg-b6 { margin-bottom: 6px !important; }
.mg-b7 { margin-bottom: 7px !important; }
.mg-b8 { margin-bottom: 8px !important; }

.mg-b10 { margin-bottom: 10px !important; }
.mg-b20 { margin-bottom: 20px !important; }
.mg-b30 { margin-bottom: 30px !important; }
.mg-b40 { margin-bottom: 40px !important; }
.mg-b50 { margin-bottom: 50px !important; }
.mg-b60 { margin-bottom: 60px !important; }
.mg-b70 { margin-bottom: 70px !important; }
.mg-b80 { margin-bottom: 80px !important; }
.mg-b90 { margin-bottom: 90px !important; }
.mg-b100 { margin-bottom: 100px !important; }


/* ------------------------------
    background
------------------------------ */
.bg_sl{
  position: relative;
/*  z-index: 2; */
  /*margin-top: 90px;*/
}
.bg_sl:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  /*
  transform: skewY(-4deg);
  transform-origin: top left;
  */
  /* background: #000; */
 
  width:100%;
  height:100%;
}

.bg_ppl{
  background: #DBE1ED;
}
.bg_servise{
  background: #e4ccd8;
}
.bg_pink{
  background: #e4ccd8;
}
.bg_aibo {
  background: #fff2eb;
}
.bg_gray {
  background: #ccc;
}


@media screen and (max-width: 1050px) {
  .bg_sl:before{
    /*
    transform: skewY(-8deg);
    */
  }
}


/* ------------------------------
    字下げ
------------------------------ */
.hang1, .hangli1 li{
  padding-left: 1em!important;
  text-indent: -1em!important;
}
.hang1h, .hangli1h li{
  padding-left: 1.5em!important;
  text-indent: -1.5em!important;
}
.kakko{
  display: inline-block;
  text-indent:-1em!important;
}


/* ------------------------------
    上下ラインが収縮する btn
------------------------------ */
.moveline-btn {
/* ボタン別設定 */  
/*height:70px;
  font-size:1.6em;
  letter-spacing: 0.5em;
  padding:0 2em; */

  background:#1AAB8A;
  color:#fff;

  width: 100%; 
  border:none;
  position:relative;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
.moveline-btn:hover{
  background:#fff;
  color:#1AAB8A;
}
.moveline-btn:before, .moveline-btn button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
.moveline-btn:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.moveline-btn:hover:before, .moveline-btn button:hover:after{
  width:100%;
  transition:800ms ease all;
}


/* ------------------------------
    btn
------------------------------ */
.btn_line, .btn_form, .btn_tel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}

.btn_line{
  background: #29C402;
}
.btn_form{
  background: #02A0CC;
}
.btn_tel{
  background: #fff;
  color: #008000;
}


/* ========== WEB BUTTON ARROW  ========== */
.arrow_r::before {
  content: "";
  display: block;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  rotate: -45deg;
  position: absolute;
  }
  .arrow_r::before {
    width: 36px;
    height: 36px;
    right: 30px;
    top: 24px;
  }

/* ========== li a ARROW  ========== */

.arrow_right::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 20px;
  height: 20px;
  border-top: 2px solid #0D220D;
  border-right: 2px solid #0D220D;
  transform: rotate(45deg);
}
@media screen and (max-width: 1050px) {


}



/* ========= 吹き出し設定 ========= */
.cta {
position: relative;
}
.cta p.fuki {
  position: absolute;
  top:50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 2;
  margin-top: -80px;
  margin-left: -460px;
}
.cta p.fuki img {
  width: 300px;
}

@media screen and (max-width: 1050px) {
  .cta p.fuki {
    top:0;
    left:0;

    margin-top: -24px;
    margin-left: 130px;
  }

}





/* ========= TEL ボタンフリーダイヤル ========= */

.cta .btn_tel img , .gnav2 .btn_tel img {
  width : 94px;
  margin-right: 0.5em;
}


/* PC 表示設定 */
.li_tel a.pc{
  padding-top: 10px;
  }
  .pc .tel_txt {
    line-height: 1em;
  }
  .pc .tel_no {
    line-height: 2em;
    }
    .pc .telno1 {
      font-size: 2em;
      letter-spacing: 0.03em;
    }
    .pc .telno2 {
      font-size: 2.5em;
      letter-spacing: 0.2em;
    }
    .pc .haifun{
      font-size: 2em;
      letter-spacing: 0.2em;
    }

/* SMP 用設定 */
.li_tel a.sp{
    padding-top: 14px;
  }
  .li_tel .sp img {
    width: 54px;
    margin-left: 10px;
    margin-bottom: 12px;

  }
  .sp .tel_txt {
    font-size: 1em;
    line-height: 0em;
    letter-spacing: 0.17em;
  }
  .sp .tel_no {
    padding-right: 4px;
    line-height: 2em;
    letter-spacing: 0.2em;
    }
    .sp .telno1 {
    font-size: 1.5em;
    letter-spacing: 0.08em;
    }
    .sp .telno2 {
    font-size: 1.65em;
    line-height: 1.6em;
    letter-spacing: 0.45em;
    }
    .sp .haifun1, .sp .haifun2{
    font-size: 1.6em;
    letter-spacing: 0.2em;
    }
    .sp .haifun1{
      margin-left: 4px;
    }
    .sp .haifun2{
      margin-left: -6px;
    }





/*  ========== FORM BUTTON  ( .cta .gnav2 )  ========== */
.cta_btns .li_form a{
  font-size: 2em;
}
.cta .btn_form img , .gnav2 .btn_form img{
  width : 70px;
  margin-right: 0.5em;
}


@media screen and (min-width: 1051px) {

}
@media screen and (max-width: 1050px) {
  .btn_line, .btn_form, .btn_tel {
    font-size: 4.2vw;
  }
.cta .btn_form img , .gnav2 .btn_form img{
  width : 50px;
  margin-right: 0.5em;
}
}



/* ------------------------------
    ttl1
------------------------------ */
.ttl1 {

  img {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1100px;
  }

  .txt {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align:center;
    font-size: 2.4em;
    color: #fff;
    width: 100%;  
  
    .txt1{
      display: block;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 1.4;
    }

    .txt2{
      display: block;
      font-weight: 700;
      font-size: 2.4rem;
      padding-top: 0.2em;
      line-height: 1;
      letter-spacing: 0.25em;
    }
  }
}

@media screen and (min-width: 1051px) {
}
@media screen and (max-width: 1050px) {
  .ttl1 {
    img {
      width: 70%;
    }

    .txt {
       top: 300px;
    
    
      font-size: 2em;
      .txt1{
       line-height: 1.4;
      }

      .txt2{
        font-weight: 500;
      }
    }
  }
}


/* ------------------------------
    box_waku
------------------------------ */
.box_waku{
  position: relative;
}
.box_waku1, .box_waku2, .box_waku3, .box_waku4{
  position: absolute;
  border:17px solid #D7AB4D;
  width: 64px;
  height: 64px;
}
.box_waku1{
  top:0;
  left: 0;
  border-bottom:none;
  border-right: none;
}
.box_waku2{
  top: 0;
  right: 0;
  border-bottom:none;
  border-left: none;
}
.box_waku3{
  bottom: 0;
  right: 0;
  border-top: none;
  border-left: none;
}
.box_waku4{
  bottom: 0;
  left:0;
  border-top: none;
  border-right: none;
}
@media screen and (min-width: 1051px) {
}
@media screen and (max-width: 1050px) {
  .box_waku1, .box_waku2, .box_waku3, .box_waku4{
    border-width:2.6vw;
    width: 10.1vw;
    height: 10.1vw;
  }
}


/* ------------------------------
    ico_tri ( ▼ 画像 )
------------------------------ */
.ico_tri{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1051px) {
}
@media screen and (max-width: 1050px) {
}



/* ------------------------------
    flex_li  ( news )
------------------------------ */
@media screen and (min-width: 1051px) {
  .flex_li{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .flex_li li{
    position: relative;
    display: flex;
    width: 540px;
    margin-top: 20px;
  }

}
@media screen and (max-width: 1050px) {
  .flex_li li{
    margin-top: 10px;
  }

}


/* ------------------------------------------------------------- */
/* StyleSection _08 DIV ▼ 下三角マーク  CSS                     */
/* ------------------------------------------------------------- */
/*
<section class="sec1">
  <div>コンテンツ上</div>
</section>
<section class="sec2">
  <div>コンテンツ下</div>
</section>
*/

.low-trian1{
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  
/* ===== local.css ===== */
/*width: 100%;
  background: #f8faed;
  padding: 50px; */         /* 三角の高さ分下記でマイナス  */

}
.low-trian1::before{     /* beforeでもafterでも*/
  content: "";
  position: absolute;
  clip-path: polygon(0 0,50% 100%,100% 0);
  margin: 0 auto;
  
/* ===== local.css ===== */
/*height: 60px;    
  width: 80%;
  background-color: #0080FF;
  bottom: -60px; */      /* bottomに付けるため三角の高さマイナス */

}
.low-trian2{ 
/* ===== local.css ===== */
/*padding-top: 30px;*/
}


/* ------------------------------------------------------------- */
/* StyleSection _09   cta ( 電話・メール 問合せCont )  CSS       */
/* ------------------------------------------------------------- */
.cta{
  width: 100%;
  background: #0D220D;
  text-align: center;
}
.cta .wrap{
  padding: 40px 0 40px;
  z-index: 1;
}
.cta .txt1{
  line-height: 2;
  font-size: 3rem;
  margin-bottom: 22px;
  letter-spacing: 0.05em;
}
.cta .txt2{
  line-height: 2;
  font-size: 2rem;
  margin-bottom: 22px;
  letter-spacing: 0.05em;
  display: inline;
  margin: 0 20px;
}
.cta_btns{
  margin-bottom: 26px;
}
.cta_btns li{
  width: 536px;
}
.cta_btns a{
  height: 80px;
  letter-spacing: 0.03em;
}

.cta_tel p{
  letter-spacing: 0.1em;
/*  font-weight: 700;*/
}
@media screen and (min-width: 1051px) {

  .cta_tel p{
    padding-left: 1em;
  }
}

@media screen and (max-width: 1050px) {
  .cta{
  }
  .cta .wrap{
    padding: 6.6vw 0 8vw;
  }
  .cta .txt1{
    line-height: 1.6;
    font-size: 4.6vw;
    margin-bottom: 4.8vw;
  }
  .cta .txt2{
    line-height: 1.6;
    font-size: 3.2vw;
    margin-bottom: 4.8vw;
    margin: 0 10px;
  }
  .cta_btns{
    margin-bottom: 5.3vw;
  }
  .cta_btns li{
    width: 100%;
  }
  .cta_btns li+li{
    margin-top: 3.4vw;
  }
  .cta_btns a{
    height: 13.3vw;
    font-size: 4.2vw;
  }
  .cta_tel img{
    width: 71.6vw;
  }
  .cta_tel p{
    line-height: 1;
    font-size: 2.6vw;
    margin-top: 1em;
  }
}


/* ------------------------------------------------------------- */
/* StyleSection _10  header  CSS                                 */
/* ------------------------------------------------------------- */
header {
  width: 100%;
  background: rgba(255,255,255,0.8);
  padding: 0;
  position: fixed;
  top: 0;
  z-index: 99;
  border-bottom: 1px solid #fff;
  height: 80px;
  display: flex;
  align-items: center;
  
  justify-content:space-between;  /*両端に配置*/
  
}

header .logo{
  margin-left: 20px;
  display: flex;
  align-items: center;
}
header .logo img{
  min-width: 180px;
}
header .logo span{
  font-size: 20px;
  line-height: 1.25;
  margin-top: 20px;
  margin-left: 18px;
  letter-spacing: 0.1em;
  
  display: none;
}
/* 一定のサイズ以下では表示しない */
@media screen and (min-width: 1140px) {
  header h1.logo span{
  display: block;
  }
}

header .gnav li{
  line-height: 1;
  border-bottom:1px solid #fff;
}
header .gnav a{
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  width: 100%;
  height: 70px;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
}

/* ハンバーガーmenu メール・電話部分 */
header .gnav2{
  padding: 38px 26px 0;
}
header .gnav2 a{
  height: 65px;
  letter-spacing: 0.03em;
}
header .gnav2 li+li{
  margin-top: 19px;
}
header .gnav2 li.gnav_tel{
  margin-top: 26px;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}
header .gnav2 li.gnav_tel img{

}
header .gnav2 li.gnav_tel p{
  letter-spacing: 0.12em;
}

/* ハンバーガー 開閉 */
.menu_opn{
  width: 100%;
  height: calc(100% - 80px);
  position: fixed;
   left: 0;
     top: 80px;
     z-index: -1;
     overflow-y:hidden;
     display: none;
}
.menu_opn.on{
  width: 100%;
     height: 100%;
}
.menu_opn.off{
}

.menu_bg{
  background: rgba(255,255,255,0.6);
  background-size: cover;
  position: fixed;
  width: 100%;
  height: calc(100% - 80px);
  left: 0;
  top: 80px;
  z-index: -10;
  display: block;
}

.menu_opn .menu_inner{
  width: 486px;
  height: auto;
  max-height: calc(100% - 80px);
  padding: 0;
  overflow-y:scroll;
  background: #0D220D;
  margin: 0 0 0 auto;
  padding-bottom: 35px;
  position: relative;
  z-index: 2;
}


@media screen and (min-width: 1051px) and (max-height: 1300px){
  .menu_opn .menu_inner{
    height: 100%;
  }
}

@media screen and (max-width: 1050px) {
  header {
    border-bottom: none;
  }
  header {
    height: 13.3vw;
  }
  header .logo{
    margin-left: 2.6vw;
  }
  header .logo img{
  /* 調整のためコメント化 */
  /*  width:36vw; */
  }
  header .logo span{
    line-height: 1.25;
    margin-left: 1em;
    font-size: 2.6vw;
  }
  header .gnav a{
    font-size: 3.46vw;
    height: 14.6vw;
  }
  header .gnav2{
    padding: 8vw 5vw 0;
  }
  header .gnav2 a{
    height: 13.3vw;
  }
  header .gnav2 li+li{
    margin-top: 4vw;
  }
  header .gnav2 li.gnav_tel{
    margin-top: 5.3vw;
    font-size: 2.6vw;
  }
  header .gnav2 li.gnav_tel img{
    width: 71.5vw;
  }
  .menu_opn{
    width: 100%;
    height: auto;
    position: fixed;
     left: 0;
       top: 13.3vw;
  }
  .menu_opn.on{
    width: 100%;
    height: 100%;
  }
  .menu_opn.off{
  }

  .menu_bg{
    height: calc(100% - 13.3vw);
    top: 13.3vw;
  }
  .menu_opn .menu_inner{
    width: 100%;
    height: auto;
    max-height: calc(100% - 13.3vw);
    padding-bottom: 7vw;
  }

}
@media screen and (max-width: 1050px) and (orientation: landscape){
  .menu_opn .menu_inner{
    padding-bottom: 8vw;
  }
}

/* ------------------------------------------------------------- */
/* StyleSection _11 sp ハンバーガー CSS                          */
/* ------------------------------------------------------------- */

. { width: 100%; height: 100%; overflow: hidden; }
  /*.is_gnavOpen { width: 100%; height: 100%; overflow: hidden; }*/
  /* gnav背景 */
.js_gnavLayer { display: none; }
header .bl_navTrigger{
  cursor: pointer;
}
  header .bl_navTrigger,
  header .bl_navTrigger span { display: inline-block; transition: all .4s; }
  header .bl_navTrigger {
    position: fixed;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #0D220D;
    z-index: 999;
  }
  header .bl_navTrigger span {
    width: 33px;
    height: 2px;
    position: absolute;
    left: 24px;
    background-color: #fff;
  }
  header .bl_navTrigger:before{
    content: "MENU";
    display: block;
    position: absolute;
    line-height: 1;
    color: #fff;
    width: 100%;
    bottom: 10px;
    font-size: 1.4rem;
    text-align: center;
  }
    
  header .bl_navTrigger span:nth-of-type(1) { top: 17px; }
  header .bl_navTrigger span:nth-of-type(2) { top: 30px;}
  header .bl_navTrigger span:nth-of-type(3) { top: 43px; }
  header .bl_navTrigger.active span:nth-of-type(1) { transform: translateY(13px) rotate(-45deg); }
  header .bl_navTrigger.active span:nth-of-type(2) { display: none;}
  header .bl_navTrigger.active span:nth-of-type(3) { transform: translateY(-13px) rotate(45deg); }

/* ハンバーガーメニューボタンアニメーション */
@-webkit-keyframes active_menu_bar {
  100% { height: 0; }
}

@keyframes active_menu_bar {
  100% { height: 0; }
}
@media screen and (max-width: 1050px) {
  header .bl_navTrigger {
    width: 13.3vw;
    height: 13.3vw;
  }
  header .bl_navTrigger span {
    width: 5.6vw;
    height: 1px;
    left: 3.85vw;
  }
  header .bl_navTrigger:before{
    bottom: 1.8vw;
    font-size: 2.6vw;
    transform: scale(0.85);
  }
  header .bl_navTrigger span:nth-of-type(1) { top: 3.2vw; }
  header .bl_navTrigger span:nth-of-type(2) { top: 5.3vw;}
  header .bl_navTrigger span:nth-of-type(3) { top: 7.4vw; }

  header .bl_navTrigger.active span:nth-of-type(1) { transform: translateY(2.1vw) rotate(-45deg); }
  header .bl_navTrigger.active span:nth-of-type(3) { transform: translateY(-2.1vw) rotate(45deg); }
}


/* ------------------------------------------------------------- */
/* StyleSection _12  Footer BTN CSS                              */
/* ------------------------------------------------------------- */
.footbtns{
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #0D220D;
  z-index: 6;
  color: #fff;
  transition: .3s;
}
.footbtns .wrap3{
  height: 95px;
  align-items: center;
}

.foot_btns li a {
  display: block;
  height: 100%;
  width: 100%;
}

.footbtns.nofix{
  bottom: -100px;
}




/* PC 表示設定 */
@media screen and (min-width: 1051px) {
  .footbtns{
    min-width: 1140px;
  }
  .foot_btns li {
    border-radius: 100vh;   /* li の方で角丸 */
    height: 70px;
    margin-left: 20px;
  }
  .foot_btns li a {
    padding-left: 20px;
    border-radius: 30px;
  }
  .foot_btns li.btn_tel {
    width: 420px;
  }
  .foot_btns li.btn_form {
    width: 300px;
  }
  .foot_btns li.btn_form img {
    margin-top: 4px;
    width: 320px;
  }

  /* お問い合せ PCのみ表示  */
  .footbtns .txt1{
    font-size: 3rem;
    line-height: 3em;
    width: 440px;
    letter-spacing: 0.005em;
  }

}

/* SMP 表示設定 */
@media screen and (max-width: 1050px) {
  .footbtns {
    padding-top: 1vw;
/*    padding-bottom: 1vw; */
  }
  .footbtns .wrap3{
    height: 48px;
    width: 100%;
  }
  .footbtns .txt1{
    display: none;
  }
  
  .foot_btns a {
    padding-top: 5px;
    padding-bottom: 5px;
    
  }


  /*  TEL 問合せボタン設定 */
  .foot_btns li.btn_tel {
    width: 60%;
  }
  .foot_btns li.btn_tel a {
    padding-left: 5px;
  }
  
  
  /*  WEB より問合せボタン設定 */
  .foot_btns li.btn_form {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .foot_btns li.btn_form a {
    padding-left: 15px;
  }

  .foot_btns li.btn_form img{
    width: 7.2vw;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 14px;
  }
  .foot_btns li.btn_form span{
    margin-left: 40px;
    font-size: 5vw;
  }
  

  .footbtns.nofix{
    bottom: -24vw;
  }
}

@media screen and (max-width: 1050px) and (orientation: landscape){
  .footbtns{
    bottom: -24vw;
  }
}



/* ------------------------------------------------------------- */
/* StyleSection _13  Footer CSS                                  */
/* ------------------------------------------------------------- */

/* -----   Footer ( 通常時 ) ----- */
footer.footer-standard {
  margin-top: 2px;
  width: 100%;


  .copyright{
    width: 100%;

    padding: 16px 0;
    color: #fff;
    text-align: center;
    line-height: 1;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    
    background:#0D220D; 
  }
}



/* -----   Footer ( 下に固定 ) ----- */
footer.footer-fixed {

  margin-top: 2px;
  width: 100%;
/*
  position: relative;
  background:#0D220D;
  padding: 20px 0;
*/
  .copyright{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: 16px 0;

    color: #fff;
    text-align: center;
    line-height: 1;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    
    background:#0D220D;
  }
}


@media screen and (min-width: 1051px) {
}

@media screen and (max-width: 1050px) {
  footer.footer-fixed {
    margin-top: 1px;
    padding: 2.4vw 0;
    
    .copyright{
      font-size: 2.4vw;
    }
  }
}