/*===============================================
header navi
===============================================*/


.header_pc{
  position: fixed; /* 要素の位置を固定する */
  top: 0;
  width: 100%; /* 幅を指定する */
  z-index: 99999;
  }

.header_pc .h_area{
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(219, 217, 217, 0.16);
  /* height:100px; */
  }

.header_pc .h_logo{
  width: 25%;
  float: left;
  text-align: center;
 
}

.header_pc .h_logo h1{
  width: 100%;
  margin: 0 auto;
  padding:30px 0 0 0;
  font-size: 35px;
}
.header_pc .h_logo h1 span{
  font-size: 25px;
 
}
.logo_en{
  font-size:12px;
  padding:5px 0 0 0;
  letter-spacing :0.3rem;
}

.header_pc nav.sub_gnavi{
 display:flex;
  overflow:hidden;
  justify-content: flex-end;
  padding:0px 10px 0 0;
  text-align:right;
  height:60px;

}

.header_pc .sub_gnavi .sub_gbox {
  display:flex;
  list-style: none;
  text-align: right;
/*justify-content: center;*/
  justify-content: flex-end;
  margin:0px 0 0 0 ;
  transition: 0.24s all ease;
  text-align:right;
  padding:30px 10px 0;
}
.header_pc .sub_gnavi .sub_gbox li {
  display: inline-block;
  text-align: center;
  font-weight: 400;
  font-size:1.3rem;
  padding:0 10px;
  letter-spacing:0.1rem;


}
.header_pc .sub_gnavi .sub_gbox li+ li {
  border-left: 1px solid #333; /*liの間の区切り線*/
}
.header_pc .sub_gnavi .sub_gbox li a {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all  0.7s ease;
color: #000000;
}
.header_pc .sub_gnavi .sub_gbox li a:hover {
text-decoration: none;
color: #754e06;
display: block;
padding: 3px 0;
}
.header_pc .sub_gnavi li a::after,
.header_pc .sub_gnavi li a:hover,
.header_pc .sub_gnavi li a:active,
.header_pc .sub_gnavi li a:focus,
.header_pc .sub_gnavi li a.is_active {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-decoration: none;
position: relative;
transition: .24s all ease;
background: url('../img/common/menu-hover.png')no-repeat;
color: #754e06;
padding: 3px 0;
}
.header_pc .sub_gnavi li span {
display:block;
font-size:0.5rem;
color:#754e06;
  padding-top: 10px;
  letter-spacing:0.1rem;
font-family: 'Josefin Sans', sans-serif;
}


.header_pc .sub_gnavi ul.sub_snsbox{
  display:inline-block;
  width: 250px;
  max-width: 250px;
  text-align:right;

}

.header_pc .main_gnavi{
  display:flex;
  justify-content: flex-end;

}

.header_pc .main_gnavi ul {
  width: 100%;
  list-style: none;
  display:flex;
  transition: 0.24s all ease;
}
.header_pc .main_gnavi li {
  display: inline-block;
text-align: center;
justify-content: flex-end;
font-weight: 400;
  font-size:1.5rem;
  margin:0 auto;
  padding:10px 0;

}

.header_pc .main_gnavi li a {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all  0.7s ease;
color: #000000;
}
.header_pc .main_gnavi li a:visited {
text-decoration: none;
color: #000000;
display: block;
padding: 3px 0;
}
.header_pc .main_gnavi li a::after,
.header_pc .main_gnavi li a:hover,
.header_pc .main_gnavi li a:active,
.header_pc .main_gnavi li a:focus,
.header_pc .main_gnavi li a.is_active {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-decoration: none;
position: relative;
transition: .24s all ease;
background: url('../img/common/menu-hover.png')no-repeat;
color: #754e06;
padding: 3px 0;
}
.header_pc .main_gnavi li span {
display:block;
font-size:0.8rem;
color:#bb7b04;
  padding-top: 10px;
  letter-spacing:0.1rem;
font-family: 'Josefin Sans', sans-serif;
}


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

  .h_logo h1{
      width: 100%;
      margin: 0 auto;
      padding:20px 0 0 20px;
      font-size: 35px;
     
  }
  .h_logo h1 span{
      font-size: 25px;
  
  }
  
  .logo_en{
      font-size:12px;
      padding:5px 0 0 0;
      letter-spacing :0.3rem;
  }
  h1 img{width: 160px;

  }
}

@media screen and (max-width:680px){
/*sp*/

.h_logo h1{
  width: 100%;
  margin: 0 auto;
  padding:10px 0 0 20px;
  font-size: 35px;
 
}
.h_logo h1 span{
  font-size: 25px;

}

.logo_en{
  font-size:12px;
  padding:5px 0 0 0;
  letter-spacing :0.3rem;
}

h1 img{width: 160px;

}

.navbar_sp .g_nav{
  width: 70%;
  overflow:hidden;
  padding:15px 0 0 5%;
}

.navbar_sp ul.nav-item_area{
  display: inline-block;
  text-align: senter;
  /*justify-content: center;*/
  margin:15px 0 0 0 ;
 
}
.navbar_sp li.nav-item{
  display: inline;
text-align: center;
font-weight: 400;
  font-size:1.3rem;
  margin:0 auto;

}


.navbar_sp li.nav-item a,
.navbar_sp li.nav-item a:visited {
text-decoration: none;
color: #000000;
display: block;
padding: 20px 0;
}
.navbar_sp li.nav-item a::after,
.navbar_sp li.nav-item a:hover,
.navbar_sp li.nav-item a:active,
.navbar_sp li.nav-item a:focus,
.navbar_sp li.nav-item a.is_active {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-decoration: none;
position: relative;
transition: .24s all ease;
background: url('../img/common/menu-hover.png')no-repeat;
color: #c08894;

}


.navbar_sp li.nav-item .sns a::after,
.navbar_sp li.nav-item .sns a:hover,
.navbar_sp li.nav-item .sns a:active,
.navbar_sp li.nav-item .sns a:focus,
.navbar_sp li.nav-item .sns a.is_active {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-decoration: none;
position: relative;
transition: .24s all ease;
background: url('../img/common/menu-hover.png')no-repeat;
color: #c08894;

}

}


.header_sp {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 70px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(219, 217, 217, 0.16);
  z-index: 99999;
}
.header_sp nav {
  position: fixed;
  right: -692px; /* これで隠れる */
  top: 0;
  width: 90%; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 80px;
  background-color: rgba(255, 255, 255, 0.93);
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
  position: absolute;
  right: 10px;
  top: 0;
  width: 50px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 50px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  
  z-index: 300;

}
.header_sp ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header_sp li.nav_content{
  width: 50%;
  text-align: center;
  font-size: 1.5rem;
  padding: 0 16px;
}
.header_sp li.nav_content a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #000;
}
.header_sp li.nav_content a:hover {

  color:#72580f;
}



li.sns{
  margin:0 auto;

  text-align: center;

}
li.sns a{
  display:inline-block;
  width: 50px;
  margin:0 auto;
  padding:10px 5px;

}

li.sns a:hover{
  opacity: 0.7 ;
}


li.sns img{
max-width: 100%;  
width: 50px;
margin:0 auto;

}


.hamburger__line {
  position: absolute;
  left: 8px;
  width: 30px;
  height: 1px;
  background-color: #111;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 14px;
}
.hamburger__line--2 {
  top: 24px;
}
.hamburger__line--3 {
  top: 34px;
}

.hamburger__menu {
  position: absolute;
  top: 45px;
  left: 0px;
  width: 50px;
  letter-spacing:0.3rem;
  text-align: center;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}

/* 表示された時用のCSS */
.nav-open .header_sp nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
}

.list-item::after{
  content: '';
  display:block;
  width:0;
  margin: 6px auto 0;
  border-bottom: 1px solid  #333;
  transition: width 0.3s ease-in-out;
}

.list-item:hover::after{
 width: 100%;
}

	/* 固定ボタン */
  .fixed_chat {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 999;
    /*filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));*/
  }
  .fixed_btns {
    position: fixed;
    top: 150px;
    right: 0;
    z-index: 999;
    padding:0;
  }
  .fixed_btns li{list-style: none;
  border: #ccc 1px solid;
  }
  
  .fixed_btns li + li {
    margin: 10px 0 0;
    list-style: none;
  }
  .fixed_btns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 200px;
    font-size: 14px;
    letter-spacing: 0.2rem;
    /*box-shadow: 0 0 10px #000;*/
    writing-mode: vertical-rl;
    text-decoration: none;
    color:#fff;
  }
  .fixed_btns a img {
    margin: 0 0 10px;
  }
  
  @media screen and (max-width: 600px) {
    .fixed_chat {
      bottom: calc(70px + env(safe-area-inset-bottom));
      left: 10px;
      width: 70px;
    }
    .fixed_btns {
      position: fixed;
      inset: auto 0 0;
      z-index: 999;
      display: flex;
      flex-direction: row-reverse;
    }
    .fixed_btns li {
      width: 100%;
      list-style: none;
  
    }
    .fixed_btns li + li {
      margin: 0;
    }
    .fixed_btns a {
      flex-direction: column;
      justify-content:center;
      width: 100%;
      height: calc(60px + env(safe-area-inset-bottom));
      padding: 0px 0 calc(0px + env(safe-area-inset-bottom));
      font-size: 12px;
      line-height: 1;
      box-shadow: none;
      writing-mode: horizontal-tb;
    }
    .fixed_btns a img {
      margin-bottom: 5px;
    }
    .fixed_btns :is(.btn_tel, .btn_menu) {
      background: #fff;
    }
    .fixed_btns .btn_tel {
      color: #444;
    }
    .fixed_btns .btn_menu {
      justify-content: center;
    }
    .fixed_btns .btn_menu span {
      width: 60%;
      max-width: 40px;
      height: 1px;
      background: #795b00;
    }
    .fixed_btns .btn_menu span + span {
      margin: 8px 0 0;
    }
  }
  
  :root {
    --bg-reserve: #8e7228;
    --bg-reserve_hover: #a8882f;
    --bg-daytrip: #371905;
    --bg-daytrip_hover: #592807;
    --txt-point: #c0a459;
    --font-lg: 32px;
    --font-md: 26px;
  }
  
  @media screen and (max-width: 600px) {
    :root {
      --font-lg: 28px;
      --font-md: 24px;
    }
  }
  /* 予約関連ボタン */
  .cmn_btn_reserve {
    background: var(--bg-reserve);
    transition: background 0.5s;
  }
  .cmn_btn_daytrip {
    background: var(--bg-daytrip);
    transition: background 0.5s;
  }
  
  @media screen and (hover: hover) and (min-width: 601px) {
    .cmn_btn_reserve:hover {
      background: var(--bg-reserve_hover);
      opacity: 1;
    }
    .cmn_btn_daytrip:hover {
      background: var(--bg-daytrip_hover);
      opacity: 1;
    }
  }
  
  /* 汎用ボタン */
  .cmn_btn {
    display: flex;
    gap: 0 10px;
    align-items: center;
    width: 300px;
    max-width: 100%;
    height: 60px;
    padding: 10px 20px 10px 30px;
    background: rgba(68, 68, 68, 0.5);
    border: 1px solid #666;
    transition: background 0.5s;
  }
  .cmn_btn::after {
    position: relative;
    right: 0;
    z-index: 0;
    flex-shrink: 0;
    width: 30px;
    height: 5px;
    margin: 0 0 0 auto;
    content: "";
    border-right: 1px solid #a58f54;
    border-bottom: 1px solid #a58f54;
    transition: right 0.5s;
    transform: skewX(-120deg);
  }
  .cmn_btn.clr_wht {
    background: rgba(255, 255, 255, 0.8);
  }
  .cmn_btn.clr_wht::after {
    border-color: #8e7228;
  }
  
  @media screen and (hover: hover) and (min-width: 601px) {
    .cmn_btn:hover {
      background: rgba(68, 68, 68, 0);
      opacity: 1;
    }
    .cmn_btn:hover::after {
      right: -5px;
    }
  }