@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
@font-face {
font-display: swap;
font-family: 'Marcellus';
font-style: normal;
font-weight: 400;
src: url('../fonts/marcellus-v14-latin-regular.woff2') format('woff2');
}

body { min-width: 1280px; min-height: 100vh; background: #eeede9; color: #675d55; font-size: 16px; font-weight: normal; line-height: 2; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; -webkit-text-size-adjust: 100%; position: relative; font-feature-settings: "palt"; letter-spacing: 0.15em; }
body.noscroll{ overflow: hidden;}

input,
select,
textarea { font-size: 16px;}

div { box-sizing: border-box;}

a { color: #d8d7d6; text-decoration: none;}
a:hover { color: #d8d7d6; text-decoration: underline;}
a:hover img { opacity: 0.75;}

.ofi { object-fit: cover;}
.br_sp { display: none;}

.en{ font-family: 'Marcellus';}
.gothic{ font-family:"Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;}

.inner_sm{ width: 80%; max-width: 1000px; margin: 0 auto;}
.inner_md{ width: 90%; max-width: 1200px; margin: 0 auto;}
.inner_lg{ width: 90%; max-width: 1400px; margin: 0 auto;}

@media screen and (max-width: 600px) {
body { min-width: 0;}
.br_sp { display: block;}
.br_pc { display: none !important;}
}

/* ---------------------------------------------------
Common Parts
------------------------------------------------------ */
/* テキストリンクType01（アンダーラインが中央から外に出現） */
.cmn_btn_01 { padding: 10px 0; position: relative; }
.cmn_btn_01::before { background-color: #a18d7b; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; transform: scale(0, 1); transform-origin: center top; transition: transform .3s; width: 100%; }
.cmn_btn_01:hover::before { transform: scale(1, 1); }

/* テキストリンクType02（アンダーラインが左から右に消失） */
.cmn_btn_02 { padding: 10px 0; position: relative; }
.cmn_btn_02:hover { text-decoration: none;}
.cmn_btn_02::before,
.cmn_btn_02::after{ content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; margin: auto; transform-origin: center top;}
.cmn_btn_02::before { background: #969696;}
.cmn_btn_02::after { background: #a18d7b; transform: scale(0, 1); transition: transform .3s; }
.cmn_btn_02:hover::after { transform: scale(1, 1); }

/* 画像パララックス */
.prx-outer { overflow: hidden; }
.prx-inner { height: 130%; }
.prx-inner img { width: 100%; height: 100%; display: block;}

/* ---------------------------------------------------
Global Header & Global Navigation
------------------------------------------------------ */
#g_header{ position: absolute; top: 0; left: 0; width: 100%; z-index: 90; display: flex; justify-content: flex-end;}
.gn_logo{ width: 150px; margin: 22px auto 0 30px; /*filter: drop-shadow(0px 0px 6px #000000);*/}
.hd_nav,
.gn_nav{ display: flex; justify-content: flex-end; margin: 15px 20px 0 0; /*filter: drop-shadow(0px 0px 6px #000000);*/}
.hd_nav li,
.gn_nav li{ margin: 0 15px; display: flex; align-items: center; height: 50px; letter-spacing: 0.05em;}
.hd_nav li a{ color: #fff;}
.gn_nav li a{ color: #987356;}
.hd_nav li a::before { background: #fff;}
.gn_nav li a::before { background: #987356;}
.hd_nav li a:hover,
.gn_nav li a:hover{ text-decoration: none;}
.hd_rsrv,
.gn_rsrv{ width: 210px; height: 50px; margin: 15px 25px 0 0; }
.hd_rsrv a,
.gn_rsrv a{ width: 100%; height: 100%; background: #a18d7b; display: flex; align-items: center; justify-content: center; transition: background 0.5s; color: #fff;}
.hd_rsrv a{ background: #b5a493;}
.hd_rsrv a:hover,
.gn_rsrv a:hover{ text-decoration: none; background: #95806e;}
.hd_rsrv a span,
.gn_rsrv a span{ pointer-events: none;}
.hd_rsrv a span.ja,
.gn_rsrv a span.ja{ font-size: 15px; letter-spacing: 0.1em;}
.hd_rsrv a span.en,
.gn_rsrv a span.en{ font-size: 12px; padding: 0 0 0 1em; letter-spacing: 0.05em;}

@media screen and (max-width: 600px) {
#g_header{ display: none; }
}

/* ---------------------------------------------------
Global Navigation
------------------------------------------------------ */
#gnav { position: fixed; top: 0; left: 0; width: 100%; min-width: 1240px; height: 80px; transition: opacity 0.8s; opacity: 0; z-index: 80; background: #eeedea; display: flex; justify-content: flex-end;}
#gnav.active { opacity: 1; z-index: 100;}

@media screen and (max-width: 600px) {
#gnav,
#gnav.active{ display: none !important;}
}

/* ---------------------------------------------------
Main Title
------------------------------------------------------ */
.main_tit{ color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; width: 100%; height: 850px; z-index: 1;}
.main_tit .ja,
.main_tit .en{ width: 100%; line-height: 1.4; text-align: center; position: relative; z-index: 3;}
.main_tit .ja{ font-size: 18px;}
.main_tit .en{ font-size: 70px;}
.main_tit .img{ width: 100%; height: 850px; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 2;}

@media screen and (max-width: 600px) {
.main_tit{ height: 300px;}
.main_tit .ja,
.main_tit .ja{ font-size: 16px;}
.main_tit .en{ font-size: 35px;}
.main_tit .img{ height: 300px;}
}

/* ---------------------------------------------------
Main Area
------------------------------------------------------ */
#main{ padding: 0 0 200px;}

@media screen and (max-width: 600px) {
#main{ padding: 0 0 100px;}
}

/* --- Slick.js Style Overwrite --- */
.slick-dotted.slick-slider{ margin-bottom: 40px !important;}
.slick-dots { display: flex !important; bottom: -30px; justify-content: center; align-items: center;}
.slick-dots li{ margin: 0 !important;}
.slick-dots li button:before{ font-size: 10px !important; color: #d0c6bc !important; opacity: 1 !important;}
.slick-dots li.slick-active button:before{ font-size: 10px !important; color: #a48b78 !important;}

.slick-prev,
.slick-next{ width: 37px !important; height: 93px !important; transform: translate(0, -63%) !important;}
.slick-prev{ left: -45px !important;}
.slick-next{ right: -45px !important;}
.slick-prev:before, 
.slick-next:before{ content: "" !important; background-image: url("../img/ico_arrow_02.svg") ; background-repeat: no-repeat; background-position: 0 0; background-size: 37px; width: 37px; height: 93px; display: block;}
.slick-next:before{ transform: rotate(180deg);}

@media screen and (max-width: 600px) {
.slick-prev,
.slick-next{ width: 16px !important; height: 40px !important; transform: translate(0, -86%) !important;}
.slick-prev{ left: -5% !important;}
.slick-next{ right: -5% !important;}
.slick-prev:before, 
.slick-next:before{ background-size: 16px; width: 16px; height: 40px;}
}

/* ---------------------------------------------------
	BreadCrumb
------------------------------------------------------ */
/*.breadcrumb{ display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; list-style-type: none; padding: 20px 50px; font-size: 14px; line-height: 1.2;}
.breadcrumb li:nth-child(n+2) a{ padding: 0 0 0 40px; position: relative;}
.breadcrumb li:nth-child(n+2) a::before{ content: ""; display: block; width: 15px; height: 1px; background: #fff; position: absolute; top: 0; bottom: 0; left: 13px; margin: auto 0;}*/

/*@media screen and (max-width: 600px) {
.breadcrumb{ padding: 20px 5vw; font-size: 12px;}
.breadcrumb li:nth-child(n+2) a::before{ top: 5px;}
}*/

/* ---------------------------------------------------
Global Footer
------------------------------------------------------ */
#g_footer{ background: #675d55; color: #fff; position: relative;}
.ft_returntop{ position: absolute; top: -100px; left: 0; width: 100%;}
.ft_returntop a{ display: block; width: 100%; height: 70px; padding: 30px 0 0; text-align: center; font-size: 20px; color: #383838;}
.ft_returntop a::before,
.ft_returntop a::after{ content: ""; display: block; width: 40px; height: 1px; background: #383838; position: absolute; top: 0; transition: top 0.5s;}
.ft_returntop a::before{ right: 50%; transform-origin: top right; transform: rotate(-30deg);}
.ft_returntop a::after{ left: 50%; transform-origin: top left; transform: rotate(30deg);}
.ft_returntop a:hover{ text-decoration: none;}
.ft_returntop a:hover::before,
.ft_returntop a:hover::after{ top: -3px;}
.ft_reservation a{ background: url("../img/ft_img_01.webp") no-repeat center center / cover; display: inline-block; width: 100%; height: 650px; overflow: hidden; z-index: 1; position: relative; }
.ft_reservation a,
.ft_reservation a::before { transition: .5s cubic-bezier(0.45, 0, 0.55, 1); }
.ft_reservation a::before { background: inherit; content: ""; display: block; filter: blur(10px) brightness(1.8); position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; opacity: 0; }
.ft_reservation a:hover { text-decoration: none; }
.ft_reservation a:hover::before { opacity: 1; /*transform: scale(105%);*/ }
.ft_reservation,
.ft_reservation a{ display: flex; justify-content: center; align-items: center; flex-direction: column;}
.ft_reservation a span{ display: block; line-height: 1.1; pointer-events: none;}
.ft_reservation a span.en{ font-size: 50px; color: #fff; letter-spacing: 0.15em; padding: 15px 0 0;}
.ft_reservation a span.ja{ font-size: 18px; padding: 25px 0 12px; letter-spacing: 0.1em; position: relative;}
.ft_reservation a span.ja { padding: 15px 30px 15px 0; position: relative; background: url("../img/ico_arrow_01.webp") no-repeat right center; background-size: 25px;}
.ft_reservation a span.ja::before { background-color: #fff; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; transform: scale(0, 1); transform-origin: center top; transition: transform .3s; width: 100%; }
.ft_reservation a:hover span.ja::before { transform: scale(1, 1); }
.ft_box_01{ width: 100%; background: #edebe7; color: #675d55; text-align: center; padding: 150px 0 80px;}
.ft_logo{ width: 260px; margin: 0 auto 30px; display: block;}
.ft_logo img{ width: 100%; height: auto;}
.ft_addr{ line-height: 1.4; padding: 0 0 20px;}
.ft_tel{ font-size: 22px; line-height: 1; padding: 0 0 10px;}
.ft_open{ line-height: 1; padding: 0 0 40px;}
.ft_nav{ display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
.ft_nav li{ margin: 0 15px;}
.ft_nav li a{ color: #987356; font-weight: bold;}
.ft_nav li a:hover{ text-decoration: none;}
.ft_insta{ padding: 30px 0;}
.ft_copyright{ margin: 0 0 0 auto; font-size: 14px; color: #987356; letter-spacing: 0.03em;}
.ft_box_02{ padding: 40px 0 130px; position: relative; border-top: solid 1px #3b3c43; display: flex; flex-wrap: wrap;}
.ft_logo_02{ width: 100%; padding: 0 0 30px;}
.ft_logo_02 img{ width: 144px; height: auto;}
.ft_list_02{ width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; font-size: 15px;}
.ft_list_02 li{ margin: 0 40px 15px 0;}
.ft_list_02 li a{ padding: 0 0 10px; color: #fff;}
.ft_list_02 li a.cmn_btn_01::before { background-color: #fff;}
.ft_list_02 li a:hover{ text-decoration: none;}
.ft_btn_02{ width: 150px; margin: 30px 0 0 0;}
.ft_btn_02 a{ font-size: 17px; line-height: 1; padding: 0 20px 10px 0; box-sizing: border-box; display: block; background: url("../img/ico_blank_01.webp") no-repeat right 4px top 2px; background-size: 13px;}
.ft_btn_02 a.cmn_btn_02::after { background: #fff;}
.ft_btn_02 a:hover{ text-decoration: none;}

@media screen and (max-width: 600px) {
.ft_returntop{ top: -50px;}
.ft_returntop a{ height: 35px; padding: 15px 0 0; font-size: 16px;}
.ft_returntop a::before,
.ft_returntop a::after{ width: 30px;}
.ft_reservation a{ height: 275px; }
.ft_reservation a span.en{ font-size: 25px; padding: 0;}
.ft_reservation a span.ja{ font-size: 14px; padding: 15px 30px 15px 0;}
.ft_box_01{ width: 100%; background: #edebe7; color: #675d55; text-align: center; padding: 50px 0 40px;}
.ft_logo{ width: 175px; margin: 0 auto 20px; display: block;}
.ft_addr{ line-height: 1.7; padding: 0 0 20px; letter-spacing: 0.05em;}
.ft_tel{ font-size: 22px; line-height: 1; padding: 0 0 10px;}
.ft_open{ line-height: 1; padding: 0 0 20px;}
.ft_nav{ display: none;}
.ft_insta{ padding: 0;}
.ft_copyright{ margin: 0; width: 100%; text-align: center; font-size: 10px; padding: 20px 0 0;}
.ft_box_02{ padding: 30px 0 100px; border-top: none;}
.ft_logo_02{ width: 110px; padding: 0 0 20px;}
.ft_list_02{ width: 100%; flex-direction: column; font-size: 15px;}
.ft_list_02 li{ margin: 0 0 3px 0;}
.ft_list_02 li a{ padding: 0 0 3px;}
.ft_btn_02{ margin: 40px 0 0 auto;}
.ft_btn_02 a{ font-size: 16px; line-height: 1; padding: 0 20px 10px 0;}
}

/* ------------------------------
Fixed Button
------------------------------ */
#reserve { position: fixed; bottom: 0; left: calc( 100% - 890px ); background: #665c55; width: 890px; height: 130px; color: #fff; z-index: 100; font-size: 14px; }
#reserve #tripla-searching-app > div{ display: flex;}
#reserve .search-widget-search-container-bf1818 { background: #665c55; color: #fff; text-align: left; border-radius: 0; width: auto; box-shadow: none;}
#reserve .input-container-title-db81ec { color: #fff; text-align: left; margin-bottom: 5px; font-size: 13px; }
#reserve .search-widget-input-34bba0, 
#reserve .search-widget-select-75fb48 { height: 40px !important; }
#reserve .switch-switch-e8f4ca{ width: 30px; height: 15px;}
.switch-checkbox-496f6c:checked+.switch-switch-e8f4ca { background: #a08c7b !important;}
#reserve .button-btn-f51c1a { padding: 0 !important; line-height: 40px !important; color: #fff !important; background: #a08c7b !important; border: 1px solid #a08c7b; width: 180px; height: 40px; border-radius: 0; transition: background 0.5s}
#reserve .button-btn-f51c1a:hover { background: #95806e !important; border: 1px solid #95806e; opacity: 1 !important;}
#reserve #reserveBtn,
#reserve #reserveCloseBtn { position: fixed; bottom: 0; left: 0; z-index: 150; width: 100%; height: 60px; background: #675d55; display: none; }
#reserve #reserveCloseBtn.on{ z-index: 152;}
#reserve #reserveBtn span, 
#reserve #reserveCloseBtn span { width: 100%; height: 100%; display: flex; flex-wrap: wrap; color: #fff; font-size: 20px; }
#fixedTel,
#fixedMenu{ display: none;}

@media only screen and (max-width: 992px) {
#reserve { left: 0; width: 100%; height: auto; font-size: 14px; }
#reserve .search-widget-search-container-bf1818 { background: #483f38; padding: 30px 25px 80px !important; width: 100% !important; border-radius: 0 !important; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;}
#reserve .input-container-input-container-da40af { margin-left: 0px; }
#reserve .search-widget-button-wrapper-d2b715 { margin-left: 0px; display: block !important; margin-top: 30px; }
#reserve #booking { display: none; }
#reserve #reserveBtn { display: block; left: 150px; width: calc( 100% - 150px ); padding: 0 0 0 20px; box-sizing: border-box; background: #a18d7b;} 
#reserve #reserveBtn::before{ content: ""; background: url("../img/ico_rsrv_01.svg") no-repeat 0 0; background-size: 16px; width: 16px; height: 18px; display: block; position: absolute; top: 0; bottom: 0; left: calc( 50% - 3.5em ); margin: auto 0;}
#reserve #reserveCloseBtn { display: block;}
#reserve #reserveBtn span, 
#reserve #reserveCloseBtn span { justify-content: center; align-items: center; font-size: 16px; }
#reserve #reserveCloseBtn span { box-sizing: border-box; padding: 0 0 0 30px; }
#reserve #reserveCloseBtn span::before,
#reserve #reserveCloseBtn span::after{ content: ""; width: 20px; height: 1px; background: #fff; display: block; position: absolute; top: 50%; left: calc( 50% - 2em ); transform-origin: center center;}
#reserve #reserveCloseBtn span::before{ transform: rotate(45deg);}
#reserve #reserveCloseBtn span::after{ transform: rotate(-45deg);}
#fixedMenu,
#fixedTel{ display: flex; justify-content: center; align-items: center; width: 75px; height: 60px; position: fixed; bottom: 0; background: #eeedea; color: #987356; z-index: 151; text-align: center; border-right: solid 1px #c3b09f;}
#fixedTel{ border-right: none;}
#fixedMenu{ left: 0; flex-direction: column;}
#fixedMenu span.bar{ display: block; width: 27px; height: 1px; background: #987356; margin: 3px 0; text-indent: 100%; white-space: nowrap; overflow: hidden;}
#fixedTel{ left: 75px;}
#fixedTel span{ padding: 0 0 0 20px; box-sizing: border-box;}
#fixedTel span::before{ content: ""; background: url("../img/ico_tel_01.svg") no-repeat 0 0; background-size: 12px; width: 12px; height: 12px; display: block; position: absolute; top: 0; bottom: 0; left: calc( 50% - 1.6em ); margin: auto 0;}
}

/* ------------------------------
	Overlay TEL & MENU
	SPでのみ有効。格納され、トグルボタンによりオーバーレイ表示する電話番号とメニュー領域
------------------------------ */
#ovl_tel,
#ovl_menu{ display: none;}

@media only screen and (max-width: 992px) {
#ovl_tel,
#ovl_menu{ display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s; position: fixed; top: 0; bottom: 0; right: 0; width: 100%; overflow: auto; box-sizing: border-box; padding: 0 0 60px; z-index: -1;}
#ovl_tel.on,
#ovl_menu.on{ opacity: 1; z-index: 1000; overflow: auto; visibility: visible;}
#ovl_tel{ background: #483f38;}
#ovl_tel .wrap,
#ovl_menu .wrap{ padding: 60px 0; position: relative;}
#ovl_tel .tit{ font-size: 40px; letter-spacing: 0.1em; text-align: center; padding: 0 0 20px; color: #fff;}
#ovl_tel .name{ font-size: 14px; padding: 20px 0 5px;}
#ovl_tel .tel{ background: #a18d7b; color: #fff; border-radius: 4px; width: 270px; height: 55px; font-size: 20px; line-height: 55px; text-align: center;}
#ovl_tel .tel .tel-link{ color: #fff; display: inline-block; /*width: 100%;*/ height: 100%; box-sizing: border-box; padding: 0 0 0 25px; position: relative;}
#ovl_tel .tel .tel-link::before{ content: ""; background: url("../img/ico_tel_02.svg") no-repeat 0 0; background-size: 16px; width: 16px; height: 16px; display: block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0;}
#ovl_tel .open{ text-align: center; padding: 30px 0 0; font-size: 16px; color: #fff;}
#ovl_menu{ background: #483f38; display: flex; flex-direction: column;}
#ovl_menu ul{ width: 270px; margin: 0 auto;}
#ovl_menu ul li{ margin: 10px 0;}
#ovl_menu ul li a{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 16px; line-height: 1.4; padding: 10px 0;}
#ovl_menu ul li a .en{ font-size: 20px; line-height: 1.1;}
#ovl_menu ul li a .ja{ font-size: 12px; line-height: 1.1; padding: 5px 0 0;}
#ovl_menu .ol_rsrv{ width: 180px; height: 50px; margin: 30px auto 0; }
#ovl_menu .ol_rsrv a{ width: 100%; height: 100%; background: #a08c7b; display: block; font-size: 16px; line-height: 50px; text-align: center; transition: background 0.5s;}
#ovl_menu .ol_rsrv a:hover{ text-decoration: none; background: #95806e; }
#ovl_menu .btn{ width: 200px; margin: 20px auto 60px;}
#ovl_menu .btn a{ width: 100%; height: 55px; line-height: 55px; display: block; border: solid 1px #000; text-align: center;}
#ovl_tel .close,
#ovl_menu .close{ position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #675d55; color: #fff; text-align: center; line-height: 60px; font-size: 16px; box-sizing: border-box; padding: 0 0 0 30px;}
#ovl_tel .close::before,
#ovl_menu .close::before,
#ovl_tel .close::after,
#ovl_menu .close::after{ content: ""; width: 20px; height: 1px; background: #fff; display: block; position: absolute; top: 50%; left: calc( 50% - 2em ); transform-origin: center center;}
#ovl_tel .close::before,
#ovl_menu .close::before{ transform: rotate(45deg);}
#ovl_tel .close::after,
#ovl_menu .close::after{ transform: rotate(-45deg);}
}