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

body { min-width: 1240px; min-height: 100vh; background: #fff; background-size: 150px; color: #fff; 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;}

.v_rl{ writing-mode: vertical-rl; font-feature-settings: "palt" 0;}

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

div { box-sizing: border-box;}

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

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

.en{ font-family: 'Cardo';}
.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: #fff; content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; margin: auto; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; }
.cmn_btn_01:hover::before { transform-origin: left top; 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: right top;}
.cmn_btn_02::before { background: #969696; }
.cmn_btn_02::after { background: #fff; transform: scale(0, 1); transition: transform .3s; }
.cmn_btn_02:hover::after { transform-origin: left top; transform: scale(1, 1); }

/* テキストリンクType03（予約ボタン） */
.cmn_btn_03{ width: 350px; height: 70px; }
.cmn_btn_03 a{ width: 100%; height: 100%; background: #baa127; display: block; font-size: 16px; line-height: 70px; text-align: center; transition: background 0.5s; color: #fff;}
.cmn_btn_03 a:hover{ text-decoration: none; background: #d9bc2e; color: #fff;}

@media screen and (max-width: 600px) {
.cmn_btn_03{ width: 100%; height: 60px; }
.cmn_btn_03 a{ font-size: 15px; line-height: 60px;}
}

/* ---------------------------------------------------
Global Header & Global Navigation
------------------------------------------------------ */
#g_header{ position: absolute; top: 0; left: 0; width: 100%; z-index: 90; display: flex; justify-content: flex-end;}
.hd_logo,
.gn_logo{ width: 200px; margin: 20px auto 0 40px; filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.5));}
.hd_nav,
.gn_nav{ display: flex; justify-content: flex-end; margin: 10px 20px 0 0; filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.5));}
.hd_nav li,
.gn_nav li{ margin: 0 15px; display: flex; align-items: center; height: 70px;}
.hd_nav li a,
.gn_nav li a{ color: #fff;}
.hd_nav li a:hover,
.gn_nav li a:hover{ text-decoration: none;}
.hd_insta,
.gn_insta{ margin: 22px 30px 0 0; filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.5));}
.hd_insta a,
.gn_insta a{ width: 44px; height: 44px; border: solid 1px #fff; border-radius: 25px; background: url("../img/ico_insta_01.svg") no-repeat center center; background-size: 20px; text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; transition: background-color 0.5s;}
.hd_insta a:hover,
.gn_insta a:hover{ background-color: rgba(255,255,255,0.2);}

.hd_rsrv,
.gn_rsrv{ width: 200px; height: 60px; margin: 15px 25px 0 0; }
.hd_rsrv a,
.gn_rsrv a{ width: 100%; height: 100%; background: #b3994d; display: block; font-size: 16px; line-height: 60px; text-align: center; transition: background 0.5s; color: #fff;}
.hd_rsrv a:hover,
.gn_rsrv a:hover{ text-decoration: none; background: #837257;}
.hd_rsrv a span,
.gn_rsrv a span{ pointer-events: none;}

@media screen and (max-width: 600px) {
.hd_logo{ width: 137px; margin: 20px auto 0 5%; filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.5));}
.hd_nav,
.hd_insta,
.hd_rsrv{ display: none;}
}

/* ---------------------------------------------------
Global Navigation
------------------------------------------------------ */
#gnav { position: fixed; top: 0; left: 0; width: 100%; min-width: 1240px; height: 90px; transition: opacity 0.8s; opacity: 0; z-index: 80; background: rgba(0,0,0,1); 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{ width: 100%; 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; background: url("../img/bg_pattern_01.webp");}

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

/* ---------------------------------------------------
	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: #000; color: #fff; position: relative;}

/* Return to Pagetop */
#g_footer #pagetop{ position: fixed; bottom: 360px; right: 5px; z-index: 3; width: 1em; font-size: 14px; line-height: 1; transition: bottom 0.8s;}
#g_footer #pagetop:hover{ bottom: 365px;}
#g_footer #pagetop a { display: block; width: 100%; height: 150px;}
#g_footer #pagetop a:hover { text-decoration: none; }
#g_footer #pagetop a .pt_txt{ transform: rotate(90deg); width: 150px; height: 1em; display: block; transform-origin: left top; text-align: right;}
#g_footer #pagetop a .pt_line { display: block; height: 100%; margin: 0; position: absolute; left: -1.5em; top: 0; text-indent: 100%; white-space: nowrap; overflow: hidden;}
#g_footer #pagetop a .pt_line::after,
#g_footer #pagetop a .pt_line::before{ content: ''; display: block; width: 1px; height: 150px; position: absolute; top: 0; left: 0;}
#g_footer #pagetop a .pt_line::after { background: #fff; animation: 2s line cubic-bezier(.645, .045, .355, 1) infinite;}
#g_footer #pagetop a .pt_line::before{ background: #6f6e6d;}

/*.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;}
.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_reservation a{ background: url("../img/ft_img_01.webp") no-repeat center center / cover; display: inline-block; width: 100%; height: 550px; 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: 38px; color: #b3994d; letter-spacing: 0.15em;}
.ft_reservation a span.ja{ font-size: 20px; /*border-bottom: solid 1px #fff;*/ padding: 25px 0 12px; letter-spacing: 0.1em; position: relative;}
.ft_reservation a span.ja::before,
.ft_reservation a span.ja::after{ content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; margin: auto; transform-origin: right top;}
.ft_reservation a span.ja::before { background: #969696; }
.ft_reservation a span.ja::after { background: #fff; transform: scale(0, 1); transition: transform .3s; }
.ft_reservation a:hover span.ja::after { transform-origin: left top; transform: scale(1, 1); }

.ft_wrap{ display: flex; justify-content: space-between; padding: 80px 0 170px;}

.ft_box_01{ width: 41.6%; max-width: 500px;}
.ft_logo{ width: 280px;}
.ft_logo img{ width: 100%; height: auto;}
.ft_txt{ padding: 30px 0 0;}
.ft_addr{ padding: 0 0 10px;}
.ft_tel{ display: inline-block;}
.ft_open{ display: inline-block;}
.ft_insta{ padding: 10px 0 0;}

.ft_insta a img{ margin: 0;}

.ft_copyright{ margin: 40px 0 0 auto; font-size: 12px; color: #7c7c7c; letter-spacing: 0.03em;}

.ft_box_02{  width: 60%; max-width: 720px; padding: 0 0 0 40px; border-left: solid 1px #3b3c43; display: flex; flex-direction: column;}
.ft_logo_02{ width: 100%; padding: 0 0 30px 40px;}
.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 0 15px 40px;}
.ft_list_02 li a{ padding: 0 0 10px; color: #fff;}
.ft_list_02 li a:hover{ text-decoration: none;}
.ft_btn_02{ width: 150px; margin: 0 0 0 auto;}
.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; color: #fff;}
.ft_btn_02 a:hover{ text-decoration: none;}

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

#g_footer #pagetop{ font-size: 10px; bottom: 240px;}
#g_footer #pagetop a { height: 120px;}
#g_footer #pagetop a .pt_txt{ width: 120px;}
#g_footer #pagetop a .pt_line::after,
#g_footer #pagetop a .pt_line::before{ height: 120px;}

/*.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: 290px; }
.ft_reservation a span.en{ font-size: 25px;}
.ft_reservation a span.ja{ font-size: 17px; padding: 15px 0 8px;}

.ft_wrap{ display: flex; justify-content: space-between; flex-direction: column; padding: 0;}

.ft_box_01{ width: 100%; max-width: 100%; padding: 35px 0; flex-direction: column;}
.ft_logo{ padding: 0 0 25px 0; width: 185px; margin: 0 auto;}
.ft_txt{ padding: 0; text-align: center; font-size: 15px; line-height: 1.7; width: 100%;}
.ft_addr{ padding: 0 0 10px;}

.ft_insta{ padding: 20px 0 0;}

.ft_copyright{ margin: 0; width: 100%; text-align: center; font-size: 10px; padding: 20px 0 0;}

.ft_box_02{ width: 100%; max-width: 100%;}
.ft_box_02{ width: 100%; max-width: 100%; padding: 0 0 0 40px; border-left: none; border-top: solid 1px #3b3c43; display: flex; flex-direction: column;}
.ft_box_02{ padding: 30px 0 100px;}
.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{ position: static; width: 150px; margin: 40px 0 0 0;}
.ft_btn_02 a{ font-size: 16px; line-height: 1; padding: 0 20px 10px 0;}
}

@keyframes line {
0% { transform: translateY(200%); }
100% { transform: translateY(-100%) }
}

/* ------------------------------
Fixed Button
------------------------------ */
#reserve { position: fixed; bottom: 0; left: calc( 100% - 890px ); background: #353535; 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: #353535; 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: #b3994d !important;}
#reserve .button-btn-f51c1a { padding: 0 !important; line-height: 40px !important; color: #fff !important; background: #b3994d !important; border: 1px solid #b3994d; width: 180px; height: 40px; border-radius: 0; transition: background 0.5s}
#reserve .button-btn-f51c1a:hover { background: #837257 !important; opacity: 1 !important;}
#reserve #reserveBtn,
#reserve #reserveCloseBtn { position: fixed; bottom: 0; left: 0; z-index: 150; width: 100%; height: 60px; background: #0b0e12; 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: #353535; 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: #b3994d;} 
#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: #1c1c1c; color: #fff; z-index: 151; text-align: center; border-right: solid 1px #686765;}
#fixedMenu{ left: 0; flex-direction: column;}
#fixedMenu span.bar{ display: block; width: 27px; height: 1px; background: #fff; 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: #242529;}
#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: #b3994d;}
#ovl_tel .name{ font-size: 14px; padding: 20px 0 5px;}
#ovl_tel .tel{ background: #000; 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: #ccc;}
#ovl_menu{ background: #242529; 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; color: #fff;}
/*#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: #b3994d; 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: #837257; }
#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: #0b0e12; 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);}
}