@charset "UTF-8";

html {overflow-x: hidden;}

 body {font-family: "Noto Sans JP", sans-serif;color: #755f27;}
@media screen and (max-width: 767px) {
body {padding: 0 0 46vw;}
}

body {background: url("/images/background.jpg") repeat center;}
.back_color {background: rgb(117, 95, 39,.1); }

.re_top{display:none;height:50px;width:50px;overflow:hidden;position:fixed;z-index:9999;right:15px;bottom:15px;}
.re_top a{display:block;}
.re_top a:hover img{margin-top:-50px;}
@media screen and (max-width: 767px) {
.re_top{display:none;height:50px;width:50px;overflow:hidden;position:fixed;z-index:9;right:15px;bottom:200px;}
.re_top a{display:block;}
.re_top a:hover img{margin-top:-50px;}
}

.side_booking{opacity: 0; height:auto;width:130px;padding: 20px;background: #fff; position:fixed;z-index:9999;
top: 50%;
right: 0;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%);
transition-property: opacity;
transition-duration: 1s;
border-radius: 6px 0 0 6px;
color: #755f27;
}
.scrolled .side_booking {opacity: 1;
transition-property: opacity;
transition-duration: 1s;
}
.side_booking h2.side_booking_sub {}
.side_booking h2.side_booking_sub{font-size: 12px; font-family: "Noto Serif JP", serif;margin: 0;text-align: center;}
.side_booking h2.side_booking_sub span {font-size: 18px; font-family: "Belleza", sans-serif;margin-right: .5em;}
.side_booking .side_booking_logo {margin: 20px 0 10px;}
.side_booking .side_booking_logo img {width: 50%;height: auto; margin: auto;margin: 0 0 5px;}
.side_booking .side_booking_logo h3 {font-size: 11px;font-family: "Noto Serif JP", serif;}
.side_booking ul.banner {}
.side_booking ul.banner li {margin: 0 0 10px;border: 1px solid #755f27;}
.side_booking ul.banner li img {width: 100%;height: auto;}
@media screen and (max-width: 1060px) {
.side_booking{opacity: 0; height:auto;width:100px;padding: 20px;background: #fff; position:fixed;z-index:9999;
top: 50%;
right: 0;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%);
border-radius: 6px 0 0 6px;
color: #755f27;
}
.scrolled .side_booking {opacity: 1;}
.side_booking h2.side_booking_sub {}
.side_booking h2.side_booking_sub{font-size: 1vw; font-family: "Noto Serif JP", serif;margin: 0;text-align: center;}
.side_booking h2.side_booking_sub span {font-size: 1.6vw; font-family: "Belleza", sans-serif;margin-right: .5em;}
.side_booking .side_booking_logo {margin: 20px 0 10px;}
.side_booking .side_booking_logo img {width: 50%;height: auto; margin: auto;margin: 0 0 5px;}
.side_booking .side_booking_logo h3 {font-size: 1vw;font-family: "Noto Serif JP", serif;}
.side_booking ul.banner {}
.side_booking ul.banner li {margin: 0 0 10px;border: 1px solid #755f27;}
.side_booking ul.banner li img {width: 100%;height: auto;}
}
@media screen and (max-width: 767px) {
.side_booking{opacity: 0; 

height:auto;width:100%;overflow:hidden;position:fixed;z-index:999;right:0;bottom:0;top: auto;
padding: 0;
transform: inherit;

display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
border-radius: 0;

}
.scrolled .side_booking {opacity: 1;
position:fixed;
bottom:0;
left: 0;
}

.side_booking .booking_block {width: 70%;margin:0 0 0 5%;padding: 0 0 10%; }
.side_booking .booking_block:last-child {width: 20%;margin: 0;}
.side_booking h2.side_booking_sub {padding: 5vw 0;width: 100%;}
.side_booking h2.side_booking_sub{font-size: 3vw; font-family: "Noto Serif JP", serif;margin: 0;text-align: center;}
.side_booking h2.side_booking_sub span {font-size: 4vw; font-family: "Belleza", sans-serif;margin-right: .5em;}
.side_booking .side_booking_logo {width: 100%; margin:0 0 10px;}
.side_booking .side_booking_logo img {width: 10vw;height: auto; margin: 0 auto 5px;}
.side_booking .side_booking_logo h3 {font-size: 3vw;font-family: "Noto Serif JP", serif;}
.side_booking ul.banner {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.side_booking ul.banner li {width: 20vw; margin: 0 2% 0 0;border: 1px solid #755f27;}
.side_booking ul.banner li img {width: 100%;height: auto;}
.side_booking ul.banner li:last-child {margin-right: 0;}
}

/*-------------------------
__base_style
-------------------------*/
#wrap{}
h1{}

/*-------------------------
__header
-------------------------*/
#header{}
.pc {display: block;}
.sph {display: none;}
header {
position: fixed;
width: 100%; 
height: 80px; 
box-sizing: border-box;
top: 0; 
left: 0; 
display: flex; 
align-items: center; 
z-index: 99;
}
.header_back {}
.header_back h1 {font-size: 2vw;line-height: 1.6;font-weight: 500;color: #fff; position: absolute;left: 0;top: 0;
transition-property: scale;
transition-duration: 1s;
width: auto;height: auto;
}
.header_back h1 a {color: #fff;text-decoration: none;}
.header_back h1 img {width: auto;height: 100%;
transition-property: scale;
transition-duration: 1s;
height: 80px;
}
.header_back2 {}
.header_back2 h1 {font-size: 2vw;line-height: 1.6;font-weight: 500;color: #755f27; position: absolute;left: 40px;top: 30px;
transition-property: top;
transition-duration: 1s;}
.header_back2 h1 a {color: #755f27;text-decoration: none;}

.header_menu {
font-family: "Belleza", sans-serif;
position: absolute;
top: 2.5vw;right: 40px;
transition-property: top;
transition-duration: 1s;}
.header_menu ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.header_menu ul li {font-size: 1.2vw;line-height: 1.6;font-weight: 500;margin-left: 2em;}
.header_menu ul li a {color: #755f27;text-decoration: none;
transition-property: top;
transition-duration: 1s;
}
.header_menu ul li a:hover {text-decoration: underline;}
.header_menu ul li:first-child {margin-left: 0;}

.header_menu2 {position: absolute;
top: 2.5vw;right: 40px;
transition-property:top;
transition-duration: 1s;}
.header_menu2 ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.header_menu2 ul li {font-size: 1.2vw;line-height: 1.6;font-weight: 500;}
.header_menu2 ul li a {color: #755f27;text-decoration: none;
transition-property: top;
transition-duration: 1s;
}
.header_menu2 ul li a:hover {text-decoration: underline;}
@media screen and (max-width: 1060px) {
header {
position: fixed;
width: 100%; 
height: 80px; 
box-sizing: border-box;
top: 0; 
left: 0; 
display: flex; 
align-items: center; 
z-index: 99;
}
.header_back {}
.header_back h1 {font-size: 2vw;line-height: 1.6;font-weight: 500;color: #fff; position: absolute;left: 0;top: 0;
width: auto;height: auto;
}
.header_back h1 a {color: #fff;text-decoration: none;}
.header_back h1 img {width: auto;height: 100%;
height: 80px;
}
.header_back2 {}
.header_back2 h1 {font-size: 2vw;line-height: 1.6;font-weight: 500;color: #755f27; position: absolute;left: 40px;top: 30px;
}
.header_back2 h1 a {color: #755f27;text-decoration: none;}

.header_menu {
font-family: "Belleza", sans-serif;
position: absolute;
top: 3.5vw;right: 40px;
}
.header_menu ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.header_menu ul li {font-size: 1.8vw;line-height: 1.6;font-weight: 500;margin-left: 2em;}
.header_menu ul li a {color: #755f27;text-decoration: none;

}
.header_menu ul li a:hover {text-decoration: underline;}
.header_menu ul li:first-child {margin-left: 0;}

.header_menu2 {position: absolute;
top: 2.5vw;right: 40px;}
.header_menu2 ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.header_menu2 ul li {font-size: 1.2vw;line-height: 1.6;font-weight: 500;}
.header_menu2 ul li a {color: #755f27;text-decoration: none;
}
.header_menu2 ul li a:hover {text-decoration: underline;}
}
@media screen and (max-width: 767px) {

header {
position: fixed;
width: 100%; 
height: 12vw; 
box-sizing: border-box;
top: 0; 
left: 0; 
display: flex; 
align-items: center; 
z-index: 99;
}

.pc {display: none;}
.sph {display: block;}

.header_back {}
.header_back h1 {font-size: 4.2vw;line-height: 1.6;font-weight: 500;color: #fff; 
position: absolute;
top: 0;
left: 0;}
.header_back h1 a {color: #fff;text-decoration: none;}
.header_back h1 span {font-size: 3.8vw;}
.header_back h1 img {width: auto;height: 60px;}

.header_back2 {}
.header_back2 h1 {font-size: 4.2vw;line-height: 1.6;font-weight: 500;color: #755f27; 
position: absolute;
top: 50%;
left: 5vw;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);}
.header_back2 h1 a {color: #755f27;text-decoration: none;}
.header_back2 h1 span {font-size: 3.8vw;}
}





.header{  background-color:rgba(255, 255, 255, 0);
transition-property: background-color;
transition-duration: 1s;
}
.header.scrolled {
background-color:rgba(255, 255, 255, 0.9);color: #755f27!important;
transition-property: background-color;
transition-duration: 1s;
height: 60px;
}
.header.scrolled h1,
.header.scrolled a,
.header.scrolled ul li::after{

transition-property: scale;
transition-duration: 1s;
}
.header.scrolled h1 {font-size: 1.4vw;top:0;transition-property: scale;
transition-duration: 1s;}
.header.scrolled h1 img {width: auto;height: 60px;
transition-property: scale;
transition-duration: 1s;
}
.header.scrolled .header_menu {top: 15px;}
@media screen and (max-width: 1060px) {

.header.scrolled .header_menu {top: 20px;}
}
@media screen and (max-width: 767px) {
.header{  background-color:rgba(255, 255, 255, 0);
}
.header.scrolled {
background-color:inherit;color: #755f27!important;
height: 50px;
}
.header.scrolled h1,
.header.scrolled a,
.header.scrolled ul li::after{
}
.header.scrolled h1 {font-size: 1.4vw;top:0;}
.header.scrolled h1 img {width: auto;height: 50px;
}
.header.scrolled .header_menu {top: 15px;}
}



@media screen and (max-width: 767px) {
/*開閉用ボタン（ハンバーガーボタン）*/
.menu-btn {
position: fixed;
top: 18px;
right: 3%;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
z-index: 101;
border: solid 1px #333;
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
}
.menu-btn-line {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 1px;
width: 30%;
background: #333;
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
}
.menu-btn-line::before,
.menu-btn-line::after {
content: "";
height: 1px;
width: 100%;
background: #333;
position: absolute;
left: 0;
-webkit-transition: inherit;
transition: inherit;
}
.menu-btn-line::before{
top: -5px;
}
.menu-btn-line::after{
top: 5px;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
-webkit-transition: all .5s;
transition: all .5s;
visibility: visible;
opacity: 1;
}
.open .menu-btn {
border-color: #fff
}
.open .menu-btn-line{
background-color: transparent;
}
.open .menu-btn-line::before,
.open .menu-btn-line::after {
top: 0;
background: #fff
}
.open .menu-btn-line::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .menu-btn-line::after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/*開いたメニュー*/
.menu {
position: fixed;
display: flex;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(1,1,1,.9);
-webkit-transition: all .5s;
transition: all .5s;
visibility: hidden;
opacity: 0;
z-index: 100;
}
.menu ul {
transform: translateY(30%);
padding: 0;
list-style-type: none
}
.menu li {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
.menu li a {
display: block;
font-size: 1.4rem;
color: #fff;
text-decoration: none;
-webkit-transition: all .2s;
transition: all .2s;
}
.menu li a:hover {
transform: translateX(5px);
-webkit-transition: all .2s;
transition: all .2s;
}
}


/*-------------------------
__content
-------------------------*/
.topic_path{clear:both;padding:0 20px 20px;}
.topic_path ul{width:100%;text-align:left;}
.topic_path li{font-size:1.4em;line-height:1.4;font-weight:700;color:#755f27;vertical-align:top;display:inline-block;}
.topic_path li:before{content:">";color:#755f27;font-weight:400;margin-left:5px;margin-right:5px;}
.topic_path li:first-child:before{content:"";margin:0;}
.topic_path li a{font-weight:400;color:#04C;text-decoration:underline;}
.topic_path li a:hover{text-decoration:none;}

#content #main{display:block;}

/*-------------------------
__footer
-------------------------*/
#footer{}

.contact {padding: 100px 0;background: #755f27;}
.contact .sub_title {color: #fff;}
.contact ul {width: 360px;margin:0 auto 50px;}
.contact ul li {margin: 0 0 20px;}
.contact ul li:last-child {margin: 0;}
.contact ul li .contact_btn {position: relative;width: 360px;height: 80px;}
.contact ul li .contact_btn a {text-decoration: none;}
.contact ul li .contact_btn span {z-index: 999;
display: block;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0 20px 0 40px;
background: #fff;
color: #755f27;
font-size: 24px;
line-height: 80px;
font-weight: 700;
transition: 0.3s;
text-align: left;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.contact ul li.tel .contact_btn span:before {
content: '';
display: inline-block;
width: 40px;
height: 40px;
background-image: url("../images/contact_icon01.svg");
background-size: contain;
vertical-align: middle;
margin: 0 10px 0 0;
}
.contact ul li.mail .contact_btn span:before {
content: '';
display: inline-block;
width: 40px;
height: 40px;
background-image: url("../images/contact_icon02.svg");
background-size: contain;
vertical-align: middle;
margin: 0 10px 0 0;
}
.contact .copyright {}
.contact .copyright p {font-size: 16px; color: #fff;}

@media screen and (max-width: 1060px) {
.contact {padding: 10% 0;background: #755f27;}
.contact .sub_title {color: #fff;}
.contact ul {width: 360px;margin:0 auto 50px;}
.contact ul li {margin: 0 0 20px;}
.contact ul li:last-child {margin: 0;}
.contact ul li .contact_btn {position: relative;width: 360px;height: 80px;}
.contact ul li .contact_btn a {text-decoration: none;}
.contact ul li .contact_btn span {z-index: 999;
display: block;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0 20px 0 40px;
background: #fff;
color: #755f27;
font-size: 24px;
line-height: 80px;
font-weight: 700;
transition: 0.3s;
text-align: left;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.contact ul li.tel .contact_btn span:before {
content: '';
display: inline-block;
width: 40px;
height: 40px;
background-image: url("../images/contact_icon01.svg");
background-size: contain;
vertical-align: middle;
margin: 0 10px 0 0;
}
.contact ul li.mail .contact_btn span:before {
content: '';
display: inline-block;
width: 40px;
height: 40px;
background-image: url("../images/contact_icon02.svg");
background-size: contain;
vertical-align: middle;
margin: 0 10px 0 0;
}
.contact .copyright {}
.contact .copyright p {font-size: 16px; color: #fff;}

}
@media screen and (max-width: 767px) {
.contact {padding: 10% 0;background: #755f27;}
.contact .sub_title {color: #fff;}
.contact ul {width: 80%;margin:0 auto 10%;}
.contact ul li {margin: 0 0 5%;}
.contact ul li:last-child {margin: 0;}
.contact ul li .contact_btn {position: relative;width: 100%;height: 80px;}
.contact ul li .contact_btn a {text-decoration: none;}
.contact ul li .contact_btn span {z-index: 999;
display: block;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0 5% 0 10%;
background: #fff;
color: #755f27;
font-size: 6vw;
line-height: 80px;
font-weight: 700;
transition: 0.3s;
text-align: left;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.contact ul li.tel .contact_btn span:before {
content: '';
display: inline-block;
width: 7vw;
height: 7vw;
background-image: url("../images/contact_icon01.svg");
background-size: contain;
vertical-align: middle;
margin: 0 10px 0 0;
}
.contact ul li.mail .contact_btn span:before {
content: '';
display: inline-block;
width: 7vw;
height: 7vw;
background-image: url("../images/contact_icon02.svg");
background-size: contain;
vertical-align: middle;
margin: 0 10px 0 0;
}
.contact .copyright {}
.contact .copyright p {font-size: 3vw; color: #fff;}
}

.sub_title {margin: 0 0 50px;}
.sub_title h1,
.sub_title h2 {font-size: 60px;font-family: "Belleza", sans-serif;}
.sub_title p {font-size: 32px;font-family: "Noto Serif JP", serif;padding: 25px 0 0 ;}
@media screen and (max-width: 1060px) {
.sub_title {margin: 0 0 5%;}
.sub_title h1,
.sub_title h2 {font-size: 60px;font-family: "Belleza", sans-serif;}
.sub_title p {font-size: 32px;font-family: "Noto Serif JP", serif;padding: 25px 0 0 ;}
}
@media screen and (max-width: 767px) {
.sub_title {margin: 0 0 5%;}
.sub_title h1,
.sub_title h2 {font-size: 6vw;font-family: "Belleza", sans-serif;}
.sub_title p {font-size: 3.6vw;font-family: "Noto Serif JP", serif;padding: 2.5vw 0 0 ;}

}


.error_back {padding: 230px 0 0;}
.error_title {}
.error_title p {font-size: 28px;line-height: 2; text-align: center; width: 960px;margin: auto; text-align: center;position: relative;}
.error {padding: 40px 0 160px;}
.error p {font-size: 18px;line-height: 28px;text-align: center;}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {
.error_back {padding: 100px 0 0;}
.error_title {}
.error_title p {font-size: 4vw;text-align: center;width: 90%;margin: auto; text-align: center;position: relative;}
.error {padding: 10% 0;margin: 0 5%;}
.error p {font-size: 12px;line-height: 18px;text-align: left;}

}