@charset "UTF-8";



*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
/*
#d94e3b
#5f4a22
#f8f9f4

*/

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

}
body{
 background-color: none;
 font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
 margin: 0;
}
.center{width: 100%; width: 200px; margin:0 auto;}

/* パソコンで見た時はclass名pcだけ表示 */
.pc{
    display: block;
}
.sp{
    display: none;
}

/* スマホで見た時はclass名spだけ表示 */
@media screen and (max-width: 770px){
    .pc{
        display: none;
    }
    .sp{
        display: block;
    } 
} 

a:hover{opacity: 0.9;}
.top_txt{text-align: center; font-size: 12px; color:#fff; background: #4e332d;}
.h_navi{position: fixed;
	width: 100%;
	z-index: 2;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #333;
  border-radius:0rem;
  line-height: center;
}
.contact_area{  width: 100%; max-width: 200px;
  margin:0 auto 20px;}
.contact_btn_01,
a.contact_btn_01 {
  width: 100%; 
  margin:0 auto; 
  max-width: 200px;
  display: flex; justify-content: center; 
  align-items: center;

  color: #fff;
  background-color: #222;

}

.contact_btn_01 .img{ display: block; padding: 0; margin: 0;}
.contact_btn_01:hover,
a.contact_btn_01:hover {
  opacity: calc(0.8);
}


.contact_btn_02,
a.contact_btn_02 {
  width: 100%; 
  margin:0 auto; 
  max-width: 200px;
  display: flex; justify-content: center; 
  align-items: center;

  color: #222;
  background-color: #d8d372;

}

.contact_btn_02 .img{ display: block; padding: 0; margin: 0;}
.contact_btn_02:hover,
a.contact_btn_02:hover {
  opacity: calc(0.8);
}





.sec_btn_area{/*display:inline-block;*/ width: 100%; max-width: 300px; margin:0 auto; }
.sec_btn_01,
a.sec_btn_01 {
/*width: 300px;*/
display: flex;
justify-content: center; 
align-items: center;
color: #fff;
background-color: #222;
margin-bottom:30px;
}
.sec_btn_01:hover,
a.sec_btn_01:hover {
  opacity: calc(0.8);
}

.reservation_btn_area{width: 100%; max-width: 150px; margin:30px auto; }
.reservation_btn_01,
a.reservation_btn_01 {
width: 150px;
display: flex;
justify-content: center; 
align-items: center;
color: #fff;
font-size: 14px;
background-color: #222;
}
.reservation_btn_01:hover,
a.reservation_btn_01:hover {
  opacity: calc(0.8);
}

.kugiri{border-bottom:1px dotted #bababa; padding:20px 0 0 0;}

.left{
	float: left;
  }
  .right{
	float: right;
  }
 #osusume, #yomogimushi, #yomogiset{ padding-top:100px; margin-top:-100px;}

.g_navi_area{
	width: 100%;
	height: 80px;
	position: relative; 
	padding:10px 0 0 0;
  backdrop-filter: blur(4px);
  background-image: linear-gradient(rgb(255, 255, 255,0.6) 30%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255) 100%);
z-index: 0 !important;
}

.h_logo{
  position:fixed;
	width: 100%;
	max-width: 220px;
  padding:0px 0 0 20px;
  z-index:999;
  font-size: 22px;
  color: #d94e3b;
}

.g_navi{
	width: 100%;
  max-width: 1500px;
  padding: 0;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  list-style-type: none;


}
.g_navi ul{
	position: absolute;
	display: flex;
	/*bottom: 0; *//*下寄せの指定*/
	padding : 0 20px 0px 0;
	align-items: center;
	color:#4c1c15;

}
.g_navi ul li{
list-style: none;
font-size: 16px;
padding:0;
margin-left:40px;
text-align: center;

}

.g_navi ul li a{text-decoration: none; }

.right_area { 
  position: fixed;
  top:100px;
  right:20px;
z-index: 3;
}
.right_area .mail_img{float: left; width: 22px; margin:0 10px 0 0;} 

.sns_area { 
	 padding: 0;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    list-style-type: none;
  }
.sns_area ul li{ list-style: none; padding: 10px 0;}

.slide{position: relative;}
/*========= sp ===============*/
/*========= ナビゲーションのためのCSS ===============*/
.sp .g_navi_area{
	width: 100%;
	height: 80px;
  padding: 10px 0 0 0;
}
		
.sp .h_logo{
  position:fixed;
	width: 100%;
	max-width: 150px;
  padding:0px 0 0 10px;
  z-index:999;
  font-size: 20px;
  color: #d94e3b;
}

.sp_navi_bg{ text-align: center; font-size: 16px; padding:5px 0; border-bottom:1px dotted #867979;}

.sp #g-nav ul {padding-bottom:30px;}

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
  top:0;
    right: -120%;
  width:85%;
    height: 100vh;/*ナビの高さ*/
  background:rgba(246, 249, 236, 0.974);/*ナビエリア背景/
    /*動き*/
  transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 85%;
    height: 100vh;/*表示する高さ*/
    padding:100px 0 0 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
z-index: 999;
width:100%;
margin:30px auto 0px;
/*transform: translate(-50%,-50%);*/
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
    text-align: center;
    font-size: 16px;

}

#g-nav li a{
  color: #222;/*ナビテキストカラー*/
  text-decoration: none;
  padding:10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;

}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
  top:5px;
  right: 20px;
  cursor: pointer;
    width: 36px;
    height:50px;

}
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0px;
    height: 3px;
    border-radius: 2px;
    background-color: #333;
    width: 36px;
  }

.openbtn1 span:nth-of-type(1) {
  top:8px; 
}

.openbtn1 span:nth-of-type(2) {
  top:20px;
}

.openbtn1 span:nth-of-type(3) {
  top:31px;
}

.openbtn1 p{display: flex;
	justify-content: center;
	align-items: center;
  width: 36px;
  padding-top:40px;
  color:#333;
  font-size: 13px;
  
}

.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 0px;
    transform: translateY(6px) rotate(-45deg);
    width: 40px;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 0px;
    transform: translateY(-6px) rotate(45deg);
    width: 40px;
}


ul#sns_area{
  display: flex;
  justify-content: center;
width:100%;
max-width:300px;
margin:30px auto;
margin:30px auto;

}
ul#sns_area li {padding:10px; }

/*========= sp ===============*/











footer {width: 100%; text-align: center; background-color: #d8d372; color: #222;}

footer #f_block {
  background-color: #d8d372; color: #222;}


  footer .f_area {
  display: flex;
  width: 94%; margin:0 3% ;
  padding-top:60px;
  padding-bottom:30px;
  flex-wrap: wrap;
  justify-content:center;
  
}
footer .logo{width:100%;}
footer .logo img{width: 50px;}
.f_logo {
  width: 100%;
  max-width: 220px;
  margin:20px auto;
  z-index: 999;
  font-size: 22px;
  color: #222;
  font-weight: bold;
}
footer .address {text-align: center;
  margin:30px 0 30px;
line-height: 30px;
}

footer .f_box_item{
  width: calc(100% / 1); 
  padding:0 0 30px 0;
  flex: 1;
  justify-content:space-evenly;
  text-align:center;
}
footer .f_box_item ul{ text-align: center; padding:0;}
footer .f_box_item ul li{ padding:5px 0;}

footer .f_box_item ul li.phone_area { text-align: center;
	bottom: 0; /*下寄せの指定*/ }


@media screen and (max-width: 480px){
  footer .f_area {
    display: block;
    width: 100%;
    margin:0 auto;
    padding-top:60px;
    text-align: center;
    
  }
  footer .f_box_item{
    width: 100%;
    margin:0 auto;
    text-align: center;
  }
  footer .f_logo{ width: 100%;
    font-size: 30px;

  }

  footer .f_logo a img{ width: 200px;
      margin:0 auto;
      text-align: center;}

  footer .address {text-align: center;
  }
  footer .f_box_item  ul .fnavi_bg{ text-align: center; font-size: 18px; padding:0;}
  footer .f_box_item  ul li.fnavi_bg{ background:#7676761d; padding:5px 0; border-bottom:1px dotted #211f1f;}
}

footer #copy{ background:#7676761d; padding: 10px 0; text-align: center;}
/*========================
　smartphone　bottom menu
　========================*/


.mini-text{font-size:10px;}/*文字大きさ*/

ul.bottom-menu {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    /*height:70px;高さ*/
    margin:0;
    padding:0;
    background-color:#a05e3fd7;/*背景色*/
    border-top:0px solid #b17457;/*バーの上の線*/
    border-bottom:0px solid #b17457;/*バーの下の線*/
    z-index:30;}

ul.bottom-menu li {
    float:left;
    width:25%;
    background-color:#835945;/*背景色*/
    list-style-type:none;
    text-align:center;
    font-size:25px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:#fff;/*アイコン＆文字の色*/
    padding-top:5px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}

.bottom-menu li a:hover {
    color:#fff;/*マウスオーバー時の色*/
  opacity: 0.8;
  }
  .bottom-menu li.bg01 {background: #aa6a4c;}
  .bottom-menu img {
    width: 100%;
max-width: 30px;
margin:0 auto;}
/* === 展開メニュー === */

ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;}

ul.menu-second-level li a{
    border-top:1px dashed #a9a9a9;/*展開の枠点線*/
        font-size:15px;/*展開メニューの文字サイズ*/
        line-height:30px;/*文字の縦幅*/}

.menu-second-level li a:hover {
    height:100%;
    background: lightgrey;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute;
    bottom: 47px;/*高さ*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding:0;}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 47px;/*高さ*/
    visibility: visible;
    opacity: 1;}

li.menu-width-max ul.menu-second-level li {
    float: left;
    width: 100%;
    border: none;}



    a.btn_02 {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      border: 1px solid #000000;
      box-sizing: border-box;
      width: 200px;
      height: 50px;
      padding: 0 6% 0 1%;
      color: #000000;
      font-size: 16px;
      text-align: left;
      text-decoration: none;
      position: relative;
      transition-duration: 0.2s;
      margin:0 0 20px ;
    }
    a.btn_02:hover {
      border: 1px solid #094e24;

      color: #094e24;
    }
    a.btn_02:before {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
  
      position: absolute;
      top: 50%;
      left: 1%;
      margin-top: -7px;
    }
    a.btn_02:hover:before {
      border-color: transparent transparent transparent #fff;
    }

    .pagetop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      }