@charset "utf-8";
/* ===================================================
	Reset
====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

#customer_header *,
#customer_footer * { -webkit-box-sizing: content-box; box-sizing: content-box;}

#customer_header h1,
#customer_header h2,
#customer_header h3,
#customer_header h4,
#customer_header h5,
#customer_header h6,
#customer_footer h1,
#customer_footer h2,
#customer_footer h3,
#customer_footer h4,
#customer_footer h5,
#customer_footer h6 { margin: 0;}

#customer_header ul,
#customer_header ol,
#customer_header li,
#customer_footer ul,
#customer_footer ol,
#customer_footer li { padding: 0; margin: 0; list-style-type: none;}

#customer_header dl,
#customer_footer dl { padding: 0; margin: 0;}

#customer_header p,
#customer_footer p { padding: 0; margin: 0;}


/* ===================================================
	Custom CSS
	※ 予約番自体のコンテンツに影響するのを避けるため、
	　必ず #customer_header または #customer_footer からの継承で記述してください。
====================================================== */
body { min-width: 1280px; background: #fff; color: #000; }

#customer_header,
#customer_footer {
	font-size: 16px; color: #4f443a; font-weight: normal; line-height: 1.5; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; -webkit-text-size-adjust: 100%; position: relative; font-feature-settings: "palt"; letter-spacing: 0.05em; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

#customer_header div,
#customer_footer div { box-sizing: border-box;}

#customer_header a,
#customer_footer a { color: #6e6e6e; text-decoration: none;}
#customer_header a:hover,
#customer_footer a:hover { color: #6e6e6e; text-decoration: underline;}
#customer_header a img,
#customer_footer a img { transition: opacity 0.5s; }
#customer_header a:hover img,
#customer_footer a:hover img { opacity: 0.75; }

#customer_header .v_rl,
#customer_footer .v_rl{ writing-mode: vertical-rl; font-feature-settings: "palt" 0;}
#customer_header .ofi,
#customer_footer .ofi { object-fit: cover; width: 100%; height: 100%;}
#customer_header .view_sp,
#customer_footer .view_sp { display: none;}

#customer_header img,
#customer_footer img { max-width: 100%; height: auto; width: auto\9; border: 0; vertical-align: bottom;}

#customer_header .mincho,
#customer_footer .mincho { font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
#customer_header .gothic,
#customer_footer .gothic{ font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;}
#customer_header .num,
#customer_footer .num{ font-family: 'EB Garamond', serif;}
#customer_header .en,
#customer_footer .en { font-family: 'Cormorant Garamond', serif;}

#webc_con { padding: 200px 0 0;}
#webc_con.webc_clr_blk .webc_language { background: #fff;}

@media screen and (orientation:landscape) {
	body { width: 100%;}
}

@media screen and (max-width: 1100px) {
	#customer_header .inner,
	#customer_header .inner { padding: 0 3%; }
}

@media screen and (max-width: 600px) {
	body { min-width: 0; }

	#customer_header .ver_pc,
	#customer_footer .ver_pc,
	#customer_header .view_pc,
	#customer_footer .view_pc { display: none;}
	#customer_header .ver_sp,
	#customer_footer .ver_sp,
	#customer_header .view_sp,
	#customer_footer .view_sp { display: inline-block;}

	#webc_con { padding: 90px 0 100px;}
}


/* ---------------------------------------------------
	Global Header
------------------------------------------------------ */
#customer_header #g_header { position: absolute; top: 0; left: 0; width: 100%; height: 110px; z-index: 50;}
#customer_header .hd_inner{ width: 100%; height: 100%; display: flex; justify-content: flex-end;}
#customer_header .hd_logo{ width: 130px; height: auto; margin: 30px auto 0 40px; }
#customer_header .hd_logo img{ width: 100%; height: auto;}
#customer_header .hd_btns{ display: flex; justify-content: flex-end; align-items: center; font-size: 16px; line-height: 1.1; margin: 0 280px 0 0; }
#customer_header .hd_btns li{ margin: 0 8px;}
#customer_header .hd_btns li a{ padding: 10px 5px; display: block; color: #4f443a; position: relative; white-space: nowrap;}
#customer_header .hd_btns li a:hover{ text-decoration: none;}
#customer_header .hd_btns li a::after { position: absolute; left: 0; content: ''; width: 100%; height: 1px; background: #6e6e6e; bottom: -1px; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }

#customer_header .hd_btns li a:hover::after { transform: scale(1, 1); }

#customer_header .hd_lang{ font-size: 18px; line-height: 1.1; position: absolute; top: 125px; right: 25px;}
#customer_header #lang_btn{ padding: 10px 20px 10px 10px; position: relative; cursor: pointer; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
#customer_header #lang_btn a { text-decoration: none;}
#customer_header #lang_btn a:nth-child(2) { position: absolute; z-index: -1; }
#customer_header #lang_btn::after{ content: ""; display: block; width: 6px; height: 6px; border-bottom: solid 1px #4f443a; border-right: solid 1px #4f443a; position: absolute; top: 15px; right: 5px; transform: rotate(45deg); transition: all, 0.5s;}
#customer_header #g_header:target .hd_lang #lang_btn::after{ top: 18px; transform: rotate(-135deg);}
#customer_header #g_header:target .hd_lang #lang_btn a:nth-child(2) { z-index: 5; }
#customer_header #lang_list{ width: 100%; position: absolute; top: calc( 1.1em + 22px ); left: 0; opacity: 0; z-index: 100; visibility: hidden; height: 0; transition: all 0.5s; box-sizing: border-box; font-size: 16px;}
#customer_header #g_header:target #lang_list { opacity: 1; visibility: visible; height: auto;}
#customer_header #lang_list li{ margin: 0 0 1px;}
#customer_header #lang_list li a{ display: block; padding: 7px 10px; text-align: center; background: rgba(255,255,255,0.8); color: #000; transition: background .5s;}
#customer_header #lang_list li a:hover{ background: #E6E6E6; text-decoration: none;}
#customer_header .hd_book{ width: 150px; height: 110px; position: absolute; top: 0; right: 110px; z-index: 100;}
#customer_header .hd_book a{ width: 100%; height: 100%; padding: 0; background-color: #666362; font-size: 16px; color: #fff; display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: background 0.5s;}
#customer_header .hd_book a:hover{ text-decoration: none; background-color:#84807F;}

@media screen and (max-width: 600px) {
#customer_header #g_header { height: 70px;}
#customer_header .hd_inner{ justify-content: space-between;}
#customer_header .hd_logo{ width: 80px; margin: 15px 0 0 5%;}
#customer_header .hd_lang{ font-size: 18px; top: 15px; right: 15px;}
#customer_header #lang_btn { padding: 5px 20px 5px 10px; }
#customer_header #lang_btn::after { top: 11px; }
#customer_header #lang_list{ font-size: 15px;}
#customer_header .hd_btns,
#customer_header .hd_book{ display: none;}
}


/* ---------------------------------------------------
	Side Menu
------------------------------------------------------ */
#customer_header div:has(.sidemenu) { position: absolute; top: 0; right: 0; height: 110px; width: 110px; overflow: hidden; z-index: 250; }
#customer_header .sidemenu { display: block; position: absolute; top: 0; right: 0;  box-sizing: border-box; cursor: pointer; z-index: 120; height: 100%; width: 100%; background: #282623; }
#customer_header .sidemenu > .bar { transition: all 0.3s; box-sizing: border-box; position: absolute; height: 1px; width: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; z-index: 2; transform-origin: center center; left: 36px;}
#customer_header .sidemenu > .bar::after{ content: ""; height: 1px; width: 40px; display: block; background: #adadad; position: absolute; top: 0; left: 0;}
#customer_header .sidemenu > .bar:nth-of-type(1) { top: 43px;}
#customer_header .sidemenu > .bar:nth-of-type(2) { top: 54px;}
#customer_header .sidemenu > .bar:nth-of-type(3) { top: 65px; width: 40px;}
#customer_header .sidemenu:hover > .bar:nth-of-type(3) { width: 20px;}
#customer_header:target .sidemenu > .bar:nth-of-type(1),
body:has(#customer_footer #sp_nav:target) #customer_header .sidemenu > .bar:nth-of-type(1) { transform: rotate(135deg); top: 79px; left: -21px; }
#customer_header:target .sidemenu > .bar:nth-of-type(2),
body:has(#customer_footer #sp_nav:target) #customer_header .sidemenu > .bar:nth-of-type(2) { opacity: 0; }
#customer_header:target .sidemenu > .bar:nth-of-type(3),
body:has(#customer_footer #sp_nav:target) #customer_header .sidemenu > .bar:nth-of-type(3) { transform: rotate(-135deg); top: 54px; left: 38px; width: 40px;}
#customer_header .sidemenu .txt{ display: none;}

#customer_header .sidemenu.menu_close,
#customer_footer .sidemenu.menu_close { z-index: -1; }
#customer_header:target .sidemenu.menu_close,
body:has(#customer_footer #sp_nav:target) #customer_header .sidemenu.menu_close { z-index: 150; }
#customer_header:target .sidemenu.menu_open,
body:has(#customer_footer #sp_nav:target) #customer_header .sidemenu.menu_open { z-index: -1; }

@media screen and (max-width: 600px) {
#customer_header div:has(.sidemenu) { position: fixed; top: inherit; bottom: 0; right: 0; height: 60px; width: 75px; }
#customer_header .sidemenu { position: absolute; }
#customer_header .sidemenu > .bar{ left: 23px;}
#customer_header .sidemenu > .bar::after{ width: 30px; background: #adadad;}
#customer_header .sidemenu > .bar:nth-of-type(1) { top: 20px;}
#customer_header .sidemenu > .bar:nth-of-type(2) { top: 29px;}
#customer_header .sidemenu > .bar:nth-of-type(3) { top: 38px; width: 15px;}
#customer_header:target .sidemenu > .bar:nth-of-type(1),
body:has(#customer_footer #sp_nav:target) #customer_header .sidemenu > .bar:nth-of-type(1)  { top: 48px; left: -16px; }
#customer_header:target .sidemenu > .bar:nth-of-type(3),
body:has(#customer_footer #sp_nav:target) #customer_header .sidemenu > .bar:nth-of-type(3) { top: 32px; left: 23px; width: 30px;}
#customer_header .sidemenu .txt{ display: block; padding: 50px 0 0; text-align: center; font-size: 13px; line-height: 1;}
}


/* ---------------------------------------------------
	Global Navigation
------------------------------------------------------ */
#customer_header #gnav { position: fixed; top: 0; right: 0; bottom: 0; overflow: auto; width: 100%; padding: 0; box-sizing: border-box; opacity: 0; /*z-index: -1;*/ transition: opacity 0.5s, visibility 1s; visibility: hidden; color: #4f443a;}
#customer_header:target #gnav,
body:has(#customer_footer #sp_nav:target) #customer_header #gnav { opacity: 1; visibility: visible; z-index: 200;}
#customer_header .overlay{ width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; z-index: 99;}
#customer_header .gnav_inner{ padding: 60px 140px 40px; width: 690px; min-height: 100%; margin: 0 0 0 auto; background: #fbfaf9; box-sizing: border-box; position: relative; z-index: 101;}
#customer_header .gn_logo{ width: 120px; height: auto; margin: 0 auto;}
#customer_header .gn_logo img{ width: 100%; height: auto;}
#customer_header .gn_btns{ width: 100%; column-count: 2; font-size: 16px; margin: 20px 0 40px; list-style: none;}
#customer_header .gn_btns li{ width: 100%; break-inside: avoid; padding: 0 0 20px;}
#customer_header .gn_btns li a{ padding: 10px 0; display: inline-block; position: relative; color: #4f443a;}
#customer_header .gn_btns li a::after { position: absolute; left: 0; content: ''; width: 100%; height: 1px; background: #4f443a; bottom: 0; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }

#customer_header .gn_btns li a:hover::after { transform: scale(1, 1); }

#customer_header .gn_btns li a:hover{ text-decoration: none;}
#customer_header .gn_book{ width: 100%;}
#customer_header .gn_book a{ width: 100%; height: 65px; padding: 0; background-color: #666362; font-size: 16px; color: #fff; display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: background 0.5s;}
#customer_header .gn_book a:hover{ text-decoration: none; background-color:#84807F; color: #fff;}
#customer_header .gn_conf{ padding: 20px 0; text-align: center;}
#customer_header .gn_conf a{ width: fit-content; font-size: 16px; display: inline-block; position: relative; padding: 10px 2px; color: #4f443a;}
#customer_header .gn_conf a::after { display: none; }
#customer_header .gn_conf a::after { background: #4f443a; }
#customer_header .gn_conf a:hover{ text-decoration: none;}
#customer_header .gn_tel{ text-align: center; font-size: 18px; line-height: 1.1; letter-spacing: 0.1em;}
#customer_header .gn_tel .tel-link{ font-size: 28px; color: #4f443a;}
#customer_header .gn_open{ text-align: center; font-size: 14px; line-height: 1.1; padding: 10px 0 30px;}
#customer_header .gn_lang { display: flex; justify-content: center; flex-wrap: wrap; text-align: center; margin: 0;}
#customer_header .gn_lang li { margin: 5px; }
#customer_header .gn_lang li a{ color: #4f443a; display: inline-block; padding: 10px 25px; font-size: 15px; line-height: 1.1; border: solid 1px #ccc7c3; background: #fff; transition: background 0.5s;}
#customer_header .gn_lang li a:hover{ background: transparent; text-decoration: none;}

@media screen and (max-width: 600px) {
#customer_header .gnav_inner{ padding: 30px 10% 80px; width: 100%; margin: 0;}
#customer_header .gn_logo{ width: 120px;}
#customer_header .gn_btns{ font-size: 15px; margin: 20px 0;}
#customer_header .gn_btns li{ margin: 0; padding: 0 0 10px;}
#customer_header .gn_btns li a { padding: 5px 0; }
#customer_header .gn_book a{ height: 60px; font-size: 15px;}
#customer_header .gn_conf{ padding: 10px 0;}
#customer_header .gn_conf a{ font-size: 15px;}
#customer_header .gn_tel{ font-size: 18px; letter-spacing: 0.1em;}
#customer_header .gn_tel .tel-link{ font-size: 28px;}
#customer_header .gn_open{ font-size: 12px; padding: 10px 0 20px;}
#customer_header .gn_lang li { margin: 3px; }
#customer_header .gn_lang li a{ padding: 10px 10px; font-size: 12px;}
}

/* ---------------------------------------------------
	Common Link type01 & 02 矢印付きボタン（01が暗めの背景用）
------------------------------------------------------ */
#customer_header .cmn_link_01,
#customer_header .cmn_link_02,
#customer_footer .cmn_link_01,
#customer_footer .cmn_link_02{ position: relative; z-index: 0; display: flex; align-items: center; justify-content: space-between; width: 190px; max-width: 100%; letter-spacing: 0.1em; padding: 10px 0; color: #d4d1ca; border-bottom: 1px solid #4f4d48; }
#customer_header .cmn_link_02,
#customer_footer .cmn_link_02{ color: #50453b; }
#customer_header .cmn_link_01::before,
#customer_header .cmn_link_02::before,
#customer_footer .cmn_link_01::before,
#customer_footer .cmn_link_02::before{ position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; content: ""; background: #d4d1ca; transition: width 0.5s; }
#customer_header .cmn_link_01,
#customer_footer .cmn_link_01 { border-bottom-color: #a0a0a0; }
#customer_header .cmn_link_01::after,
#customer_header .cmn_link_02::after,
#customer_footer .cmn_link_01::after,
#customer_footer .cmn_link_02::after{ position: relative; right: 0; width: 14px; height: 10px; content: ""; background: url("../img/ico_arrow_01.svg"); transition: right 0.5s; }
#customer_header .cmn_link_02::after,
#customer_footer .cmn_link_02::after{ background: url("../img/ico_arrow_02.svg"); }
#customer_header .cmn_link_01:hover,
#customer_header .cmn_link_02:hover,
#customer_footer .cmn_link_01:hover,
#customer_footer .cmn_link_02:hover{ text-decoration: none; color: #d4d1ca;}
#customer_header .cmn_link_02:hover,
#customer_footer .cmn_link_02:hover{ color: #50453b;}
#customer_header .cmn_link_01:hover::before,
#customer_header .cmn_link_02:hover::before,
#customer_footer .cmn_link_01:hover::before,
#customer_footer .cmn_link_02:hover::before{ width: 100%; }
#customer_header .cmn_link_01:hover::after,
#customer_header .cmn_link_02:hover::after,
#customer_footer .cmn_link_01:hover::after,
#customer_footer .cmn_link_02:hover::after{ right: -5px; }

@media screen and (max-width: 600px) {
	#customer_header .cmn_link_01,
	#customer_header .cmn_link_02,
	#customer_footer .cmn_link_01,
	#customer_footer .cmn_link_02 { font-size: 15px; }
}

/* ---------------------------------------------------
	Global Footer
------------------------------------------------------ */
#customer_footer #g_footer{ letter-spacing: 0.1em;}
#customer_footer .ft_box_01{ background: url("../img/ft_bg_01.webp") no-repeat center center; background-size: cover; color: #dedede; padding: 90px 0 70px; text-align: center;letter-spacing: 0.2em;}
#customer_footer .ft_txt{ font-size: 22px; line-height: 1.1; padding: 0 0 40px;}
#customer_footer .ft_book{ width: 400px; margin: 0 auto;}
#customer_footer .ft_book a{ width: 100%; height: 65px; padding: 0; background-color: #fff; font-size: 16px; color: #2c2a2a; display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: all 0.5s; }
#customer_footer .ft_book a:hover{ text-decoration: none; background-color: #84807F; color: #fff}
#customer_footer .ft_conf{ padding: 10px 0 20px; text-align: center;}
#customer_footer .ft_conf a{ font-size: 14px; display: inline-block; position: relative; padding: 10px 2px; color: #dedede;}
#customer_footer .ft_conf a::after { background: #6d6762; }
#customer_footer .ft_conf a:hover{ text-decoration: none; color: #dedede;}
#customer_footer .ft_tel{ text-align: center; font-size: 20px; line-height: 1.1; }
#customer_footer .ft_tel .tel-link{ font-size: 34px; color: #dedede;}
#customer_footer .ft_open{ text-align: center; font-size: 14px; line-height: 1.1; padding: 5px 0 0; letter-spacing: 0.1em;}
#customer_footer .ft_box_02{ background: url("../img/bg_pattern_01.jpg"); background-size: 100px; padding: 70px 0 60px; text-align: center; color: #4f443a;}
#customer_footer .ft_logo{ padding: 0 0 30px; width: 221px; margin: 0 auto;}
#customer_footer .ft_logo img{ width: 100%; height: auto;}
#customer_footer .ft_name{ font-size: 18px; padding: 0 0 5px; letter-spacing: 0.3em; }
#customer_footer .ft_addr{ font-size: 16px; padding: 0 0 30px;}
#customer_footer .ft_btns{ display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 0; font-size: 16px; width: 1100px; margin: 0 auto; box-sizing: border-box; }
#customer_footer .ft_btns li{ margin: 0 15px;}
#customer_footer .ft_btns li a{ padding: 10px 5px 5px; display: inline-block; position: relative; color: #4f443a;}
#customer_footer .ft_btns li a::after { position: absolute; left: 0; content: ''; width: 100%; height: 1px; background: #4f443a; bottom: 0; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }
#customer_footer .ft_btns .ft_btn_13,
#customer_footer .ft_btns .ft_btn_14,
#customer_footer .ft_btns .ft_btn_15 { width: 100%; }
#customer_footer .ft_btns .ft_btn_14 { margin-top: 30px; margin-bottom: 10px; }
#customer_footer .ft_btns .ft_btn_14 a { padding: 0; }
#customer_footer .ft_btns .ft_btn_14 a::after { display: none;}

#customer_footer .ft_btns li a:hover::after { transform: scale(1, 1); }

#customer_footer .ft_btns li a:hover{ text-decoration: none;}
#customer_footer .ft_copyright{ display: inline-block; font-size: 10px; padding: 20px 0 0;}

@media screen and (max-width: 600px) {
#customer_footer .ft_box_01{ padding: 40px 0 30px;}
#customer_footer .ft_txt{ font-size: 18px; padding: 0 0 15px;}
#customer_footer .ft_book{ width: 225px;}
#customer_footer .ft_book a{ height: 50px;}
#customer_footer .ft_conf{ padding: 10px 0;}
#customer_footer .ft_conf a{ font-size: 13px; padding: 5px 2px;}
#customer_footer .ft_tel{ font-size: 16px;}
#customer_footer .ft_tel .tel-link{ font-size: 28px;}
#customer_footer .ft_open{ font-size: 13px; padding: 5px 0 0;}
#customer_footer .ft_box_02{ padding: 70px 0 100px;}
#customer_footer .ft_logo{ padding: 0 0 15px; width: 135px;}
#customer_footer .ft_name{ font-size: 16px; padding: 0 0 5px;}
#customer_footer .ft_addr{ font-size: 15px; padding: 0 0 20px;}
#customer_footer .ft_btns{ display: block; column-count: 2; padding: 0 7%; font-size: 14px; width: 100%; margin: 0;}
#customer_footer .ft_btns li{ margin: 0; /*width: 50%;*/ text-align: left;}
#customer_footer .ft_btns li.ft_btn_09{ width: 100%;}
#customer_footer .ft_btns li a{ padding: 10px 5px 5px; margin-bottom: 5px; text-align: left;}
#customer_footer .ft_btns + .ft_btns { display: flex; flex-direction: column; align-items: center; }
#customer_footer .ft_btns .ft_btn_14 { margin-top: 20px; margin-bottom: 5px; width: min(300px, 60%); }
#customer_footer .ft_btns .ft_btn_13,
#customer_footer .ft_btns .ft_btn_15 { text-align: center; }
#customer_footer .ft_copyright{ font-size: 10px; padding: 20px 0 0;}
}

/* ---------------------------------------------------
	sp_nav
------------------------------------------------------ */
#customer_footer #sp_nav { display: none;}

@media screen and (max-width: 600px) {
#customer_footer #sp_nav { display: block; width: calc( 100% - 75px ); height: 60px; position: fixed; bottom: 0; left: 0; z-index: 150;}
#customer_footer #sp_nav ul{ display: flex; width: 100%; height: 100%;}
#customer_footer #sp_nav li.reservation{ width: 50%; background: #666362;}
#customer_footer #sp_nav li.tel,
#customer_footer #sp_nav li.access{ width: 25%; background: #282623; border-right: solid 1px #666362;}
#customer_footer #sp_nav li a { height: 100%; font-size: 13px; color: #adadad; display: flex; justify-content: center; align-items: center;}
#customer_footer #sp_nav li.reservation a{ color: #fff;}
#customer_footer #sp_nav a:hover { text-decoration: none;}
#customer_footer #sp_nav:target ul { display: none; }
}