body {
  -webkit-text-size-adjust: 100%;
  font-family: 'Noto Sans Japanese', sans-serif;
} /*レスポンシブの場合*/
.fL {
  float: left;
}
.fR {
  float: right;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
img {
  width: 100%;
  height: auto;
}
* {
  box-sizing: border-box;
}
/*=======================================================================

レイアウト

=======================================================================*/
.w49 {
  width: 49%;
}
/*=======================================================================

余白

=======================================================================*/
.mab10 {
  margin-bottom: 10px;
}
.mab20 {
  margin-bottom: 20px;
}
.mab30 {
  margin-bottom: 30px;
}
.mab40 {
  margin-bottom: 40px;
}
.mab50 {
  margin-bottom: 50px;
}
/*=======================================================================

カラー

=======================================================================*/
.orange {
  color: #C60;
}
/*=======================================================================

ボタン

=======================================================================*/
.popbn {
  font-size: 150%;
  width: 300px;
  margin: 30px auto 0 auto;
}
.popbn a {
  font-weight: bold;
  border: 1px solid #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5%;
  display: block;
  color: #fff;
  background: #C60;
  text-decoration: none;
  box-sizing: border-box;
}
/*=======================================================================

リスト

=======================================================================*/
.normal li {
  list-style-type: disc;
  margin-left: 20px;
}
ol.normal li {
  list-style-type: decimal;
}
ol.list_parentheses {
  padding: 0;
  margin: 0;
}
ol.list_parentheses li {
  list-style-type: none;
  list-style-position: inside;
  counter-increment: cnt;
  text-indent: -1.5em;
}
ol.list_parentheses li:before {
  display: marker !important;
  content: "("counter(cnt) ") ";
}
ol.roman li {
  list-style: outside lower-roman;
  counter-increment: none;
  text-indent: 2%;
}
ol.roman li:before {
  content: none;
}
/*=======================================================================

矢印

=======================================================================*/
/*ul li a {
	position: relative;
}

ul li a::after {
	position: absolute;
	top: 50%;
	right: 10px;/*右ポジション*/
/*left: 10px;/*左ポジション*/
/*display: block;
	content: '';
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(135deg);/*下*/
/*transform: rotate(135deg);/*下*/
/*-webkit-transform: rotate(-45deg);/*上*/
/*transform: rotate(-45deg);/*上*/
/*-webkit-transform: rotate(45deg);/*右*/
/*transform: rotate(45deg);/*右*/
/*-webkit-transform: rotate(-135deg);/*左*/
/*transform: rotate(-135deg);/*左*/
/*}
/*矢印*/
/*=======================================================================

フォームパーツリセット

=======================================================================*/
input[type="submit"], input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  border-style: none;
}
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus, input[type="button"]::focus {
  outline-offset: -2px;
}
select {
  font-size: 100%;
  padding: 0.5%;
}
/*=======================================================================

wrap

=======================================================================*/
#wrap, .wrap {
  text-align: left;
  margin: 0 auto;
  max-width: 1366px;
}
/*=======================================================================

header

=======================================================================*/
header {
  padding: 1%;
}
h1 {
  font-size: 81.3%;
  color: #999;
}
#logo {
  width: 43%;
  max-width: 430px;
}
@media all and (min-width: 1367px) {
  header {
    padding: 1% 0;
  }
}
/*=======================================================================

nav

=======================================================================*/
nav {
  width: 38%;
  float: right;
}
nav ul li {
  font-size: 93.8%;
  display: inline;
}
nav ul li a {
  color: #333;
  text-decoration: none;
  float: right;
  position: relative;
  padding: 1% 5%;
}
nav ul li a:visited {
  color: #333;
}
nav ul li a:hover {
  color: #999;
}
nav ul li a:after {
  position: absolute;
  top: 50%;
  right: 5px;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-top: 1px solid #998675;
  border-right: 1px solid #998675;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*=======================================================================

コンテンツ左

=======================================================================*/
#left, #T_left {
  width: 73.34%;
}
h3 {
  font-size: 125%;
  color: #534741;
  border-bottom: 1px solid #534741;
  margin-bottom: 10px;
}
h3.ti {
  font-size: 150%;
  font-family: "Sawarabi Mincho", serif;
  color: #fff;
  font-weight: bold;
  padding: 1%;
  border-bottom: none;
  margin-bottom: 0;
}
h4 {
  color: #534741;
  font-weight: bold;
  margin-bottom: 10px;
}
.josefin {
  font-family: 'Josefin Sans', sans-serif;
}
.first_area p {
  padding: 0 2%;
}
.first_area img {
  margin-bottom: 20px;
}
.first_area img.pp {
  margin-bottom: 0;
}
.first_area_lead {
  font-size: 93.8%;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}
.page_ti {
  font-size: 125%;
  font-family: "Sawarabi Mincho", serif;
  color: #fff;
}
#sec01, #left section:nth-of-type(1) {
  background: #998675;
}
#sec01 {
  padding: 2% 0;
}
#left section:nth-of-type(1) {
  padding: 1% 0 0 0;
}
#left section > section:nth-of-type(1) {
  background: #E9E0D6;
}
#left section > section:nth-of-type(2) {
  background: #FCF1C0;
}
#sec04, #left section > section:nth-of-type(3) {
  background: #FEF9E6;
}
#sec05, #left section > section:nth-of-type(4) {
  background: #fff;
}
#sec02, #sec03 {
  padding-top: 2%;
  padding-bottom: 2%;
}
#left section > section {
  padding: 2% !important;
}
.top_contents, #left section > section:last-of-type {
  padding-bottom: 150px !important;
}
.top_contents div section:last-of-type {
  padding-bottom: 0 !important;
}
#left section > section > section, #left section > section > section:last-of-type {
  padding: 0 0 3% 0 !important;
  background: none !important;
}
/*=======================================================================

予約フォームエリア（コンテンツ右）

=======================================================================*/
#right, #T_right {
  width: 26.66%;
  background: #392D27;
}
#right img, #T_right img {
  width: 20px !important;
  height: 20px !important;
}
.reservation {
  background: #392D27;
  box-sizing: border-box;
  width: 26.66%;
}
.reservation form {
  margin: 3% 8%;
}
.reservation .fit-sidebar .fit-sidebar-fixed {
  right: 0px !important;
}
.s_box {
  margin-bottom: 20px;
}
.s_box p, .text_s {
  color: #fff;
}
.rsvbtn {
  font-size: 100%;
  color: #392D27;
  font-weight: bold;
  background: #FCF1C0;
  padding: 1.5% 3%;
  width: 100%;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
}
.rsvbtn:hover {
  background: #009B5E;
  color: #fff;
}
/*=======================================================================

footer

=======================================================================*/
footer {
  width: 100%;
  background: #736357;
  color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
}
footer p, address {
  font-size: 81.3%;
  padding-left: 1%;
}
#pp {
  margin-bottom: 10px;
}
#pp a {
  color: #fff;
  padding: 1% 1% 1% 0;
  text-decoration: none;
  position: relative;
}
#pp a:visited {
  color: #fff;
}
#pp a:hover {
  text-decoration: underline;
}
#pp a:after {
  position: absolute;
  top: 50%;
  right: 5px;
  display: block;
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
address span {
  font-size: 140%;
  margin-right: 20px;
}
footer .wrap {
  position: relative;
  padding: 1% 0;
  max-width: 100%;
}
#tel {
  background: #392D27;
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100vh;
  text-align: center;
}
#tel p {
  font-size: 193.8%;
  font-size: 1.8vw;
  font-weight: bold;
  color: #fff;
  padding-top: 30px;
}
#tel p a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
#pagetop {
  position: fixed;
  right: 0;
  bottom: 120px;
}
/*-----------------------------------------------------------------------

スマホ

-----------------------------------------------------------------------*/
@media all and (max-width: 799px) {
  .fL, .fR {
    float: none;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  /*=======================================================================

レイアウト

=======================================================================*/
  .w49 {
    width: 100%;
  }
  /*=======================================================================

header

=======================================================================*/
  header {
    padding: 1% 1% 6% 1%;
  }
  #logo {
    width: 80%;
    max-width: 80%;
  }
  /*=======================================================================

nav

=======================================================================*/
  #sp_nav {
    display: block;
  }
  #sp_nav {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
  .btn {
    background: transparent url(../img/btn.png) no-repeat 0 0;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 25px;
    right: 10px;
    cursor: pointer;
    z-index: 200;
    border: 1px solid #fff;
  }
  .peke {
    background-position: -40px 0;
  }
  .drawr {
    display: none;
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    top: 0px;
    right: 0;
    width: 300px;
    height: 100%;
    padding: 80px 0 0 0;
    z-index: 100;
  }
  #sp_nav ul li a {
    width: 100%;
    display: block;
    color: #333;
    line-height: 45px;
    border-bottom: 1px solid #333;
  }
  nav ul li a:after {
    right: 15px;
  }
  /*=======================================================================

コンテンツ左

=======================================================================*/
  #left, #T_left {
    width: 100%;
  }
  #left section > section > section, #left section > section > section:last-of-type {
    padding: 0 0 6% 0 !important;
    background: none !important;
  }
  /*=======================================================================

予約フォームエリア（コンテンツ右）

=======================================================================*/
  #right, #T_right {
    width: 100%;
    padding: 2%;
  }
  #r-open {
    color: #fff;
    text-align: center;
    border: 5px double #fff;
    padding: 0.5%;
  }
  .reservation div:nth-of-type(2), .reservation div:nth-of-type(3) {
    width: 50%;
    float: left;
  }
  /*=======================================================================

footer

=======================================================================*/
  footer {
    background: rgba(115, 99, 87, 0.95);
  }
  footer .wrap {
    padding: 0;
  }
  footer p, address {
    font-size: 62.5%;
  }
  #pp, address, #copy {
    padding: 1%;
  }
  #pp a:after {
    right: -10px;
  }
  address span {
    display: block;
    margin-bottom: 5px;
  }
  #tel {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2% auto !important;
  }
  #tel p {
    font-size: 193.8%;
    padding-top: 0;
  }
  #pagetop {
    display: none;
  }
  #pagetop_sp a {
    color: #fff;
    position: absolute;
    top: 5px;
    right: 5px;
  }
  #pagetop_sp a:visited {
    color: #fff;
  }
}