@charset "utf-8";
/* ===================================================
	Reset
====================================================== */
#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 div,
#customer_footer div { box-sizing: border-box;}
#customer_header dt,
#customer_footer dt { font-weight: normal; }

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


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

#customer_header,
#customer_footer {
	font-size: 15px; font-weight: normal; line-height: 1.5;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
	-webkit-text-size-adjust: 100%; position: relative;

	font-feature-settings: "palt"; letter-spacing: 0.28em;
}

#webc_con { padding-top: 200px;}
.webc_pagetop { display: none;}

:root {
	--color-green: #597252;
	--color-gray: #626262;
	--color-beige: #b7a886;
	--fs-tit: 35px;
}


#customer_header #header_wrap,
#customer_header #nav_wrap,
#customer_footer #footer_wrap {
	padding: 0; margin: 0;
}

#customer_header #header,
#customer_header #gnav ul,
#customer_footer #footer {
	width: 1200px; max-width: 100%; padding: 0; margin: 0 auto;
	-webkit-box-sizing: border-box; box-sizing: border-box;
}

#customer_header a,
#customer_footer a { color: #626262; text-decoration: none; transition: opacity .5s; }
@media screen and (hover: hover) {
	#customer_header a:hover,
	#customer_footer a:hover { 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 .sp,
#customer_footer .sp { display: none;}

@media screen and (orientation:landscape) {
	body { width: 100%;}
}
@media screen and (max-width: 768px) {
	body { min-width: 0;}
	#customer_header,
	#customer_footer { font-size: 14px; letter-spacing: 0.18em; }

	#webc_con { padding-top: 85px; }

	#customer_header .pc,
	#customer_footer .pc { display: none;}
	#customer_header .sp,
	#customer_footer .sp { display: inline;}
}


/* Header
------------------------------------------------------ */
#customer_header .header_wrap { position: relative; }
#customer_header #g_header { position: absolute; top: 0; left: 0; min-width: 1200px; width: 100%; background: transparent; z-index: 98; padding: 0 135px 0 0; box-sizing: border-box; background: #fff; border-bottom: 1px solid #ccc; }
#customer_header #g_header > div { display: flex; justify-content: space-between; height: 94px; padding: 10px 0; box-sizing: border-box; }
#customer_header #g_header .hd_h1 { width: 158px; margin: 0 15px 0 35px; display: flex; align-items: center; justify-content: center; }
#customer_header #g_header .hd_h1 a { display: block; pointer-events: auto;position: relative; width: 100%; height: auto; }
#customer_header #g_header .hd_h1 a img { width: 100%; height: auto; }
#customer_header #g_header .hd_nav { margin: 0 0 0 auto; display: flex; align-items: center; font-size: 15px; }
#customer_header #g_header .hd_nav li { box-sizing: border-box; }
#customer_header #g_header .hd_nav li + li { margin-left: 20px; }
#customer_header #g_header .hd_nav li a { color: #626262; padding: 5px; letter-spacing: 0.1em; position: relative; }
#customer_header #g_header .hd_nav li a::after { content: ''; width: 0; height: 1px; background: #000; position: absolute; left: 0; bottom: 0; transition: width .5s; }

@keyframes h-top {
	0% { position: fixed; transform: translateY(0); }
	80% { transform: translateY(-100%); }
}
@keyframes h-fixed {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(0); }
}

@media screen and (hover: hover) {
	#customer_header #g_header .hd_nav li a:hover { opacity: 1; }
	#customer_header #g_header .hd_nav li a:hover::after { width: 100%; }
}

@media screen and (max-width: 1200px) {
	#customer_header #g_header .hd_nav li + li { margin-left: 15px; }
}
@media screen and (max-width: 768px) {
	#customer_header #g_header { min-width: 0; padding: 0 70px 0 10px; }
	#customer_header #g_header > div { height: 55px; }
	#customer_header #g_header .hd_nav { display: none; pointer-events: none; }
	#customer_header #g_header .hd_h1 { width: 40%; margin: 0; max-width: 177px;}
}


/* G-nav
------------------------------------------------------ */
#customer_header #gnav_wrap { width: 385px; height: 100vh; position: fixed; top: 0; right: 0; padding: 95px 25px 25px; box-sizing: border-box; overflow: auto; pointer-events: none; transition: opacity .5s; z-index: 10; opacity: 0; background: var(--color-green); }
#customer_header #side_menu:target #gnav_wrap { pointer-events: auto; opacity: 1;}
#customer_header #gnav { position: relative; }
#customer_header #gnav ul li { padding: 10px 0; border-bottom: 1px solid #849480;}
#customer_header #gnav ul li a { display: block; color: #fff; padding: 5px 0; font-size: 14px; letter-spacing: 0.04em; position: relative; }
#customer_header #gnav ul li a::after { content: ''; display: block; width: 10px; height: 10px; border-right: 2px solid var(--color-beige); border-top: 2px solid var(--color-beige); transform: rotate(45deg); position: absolute; top: calc(50% - 5px); right: 10px; box-sizing: border-box; transition: right .5s; }
#customer_header #gnav ul .gnav_reserve { margin: 0 0 20px; padding: 0; border: none; }
#customer_header #gnav ul .gnav_reserve a { padding: 10px 0; background: #fff; color: #626262; display: block; font-size: 16px; text-align: center; }

@media screen and (hover: hover) {
	#customer_header #gnav ul li:not(.gnav_reserve) a:hover { opacity: 1; }
	#customer_header #gnav ul li:not(.gnav_reserve) a:hover::after { right: 3px; }
}

@media screen and (max-width: 768px) {
	#customer_header #gnav_wrap { width: 100%; padding: 60px 8%; }
	#customer_header #gnav ul li { padding: 5px 0; }
	#customer_header #gnav ul li a { font-size: 12px; letter-spacing: 0.02em; }
	#customer_header #gnav ul li a::after { width: 10px; height: 10px; border-right: 1px solid var(--color-beige); border-top: 1px solid  var(--color-beige); position: absolute; top: calc(50% - 5px); }
	#customer_header #gnav ul .gnav_reserve { margin: 0 0 20px; padding: 0; border: none; }
	#customer_header #gnav ul .gnav_reserve a { padding: 10px 0; font-size: 14px; }
}


/* Side_menu
------------------------------------------------------ */
#customer_header #side_menu { position: absolute; top: 0; right: 0; z-index: 99; display: flex; flex-direction: column; justify-content: space-between; width: 100px; height: 94px; background-color: #fff; }
#customer_header #side_menu:target { position: fixed; }

#customer_header .open_menu { position: absolute; top: 0; right: 0; z-index: 99; align-self: flex-end; width: 100px; height: 94px; padding: 0 24px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; background-color: var(--color-green); cursor: pointer; transition: width .6s, padding .6s;}
#customer_header .open_menu .bar { width: 52px; height: 25px; position: relative; }
#customer_header .open_menu .bar::before,
#customer_header .open_menu .bar span::before,
#customer_header .open_menu .bar span::after { content: ''; display: block; width: 52px; height: 1px; position: absolute; transition: width .5s cubic-bezier(0.4, 0.6, 0.6, 1), transform .5s linear, opacity .4s; background: #fff; }
#customer_header .open_menu .bar::before { top: 0; }
#customer_header .open_menu .bar span { display: flex; flex-direction: column; align-items: flex-end; }
#customer_header .open_menu .bar span::before { top: 50%; transform: translateY(-50%); }
#customer_header .open_menu .bar span::after { bottom: 0; width: 51%; }
#customer_header .open_menu > span:not(.bar) { display: block; margin-top: 12px; font-size: 11px; letter-spacing: .2em; text-align: center; color: #fff; opacity: 1; transition: opacity .5s;}
#customer_header #open_menu { opacity: 1; pointer-events: auto; }
#customer_header #close_menu { pointer-events: none; opacity: 0; }

#customer_header #side_menu:target .open_menu { background: transparent;}
#customer_header #side_menu:target .open_menu .inner,
#customer_header #side_menu:target .reserve { display: none; }
#customer_header #side_menu:target .open_menu .bar::before { transform: rotate(30deg); top: 11px; }
#customer_header #side_menu:target .open_menu .bar span::before { opacity: 0; }
#customer_header #side_menu:target .open_menu .bar span::after { transform: rotate(-30deg); width: 100%; bottom: 12px; }
#customer_header #side_menu:target .open_menu > span:not(.bar) { opacity: 0; }
#customer_header #side_menu:target #open_menu { opacity: 0; pointer-events: none; }
#customer_header #side_menu:target #close_menu { pointer-events: auto; opacity: 1; }

@media screen and (hover: hover) {
	#customer_header .open_menu:hover { opacity: 1; }
	#customer_header .open_menu:hover .bar span::after { width: 100%; }
}

@media screen and (max-width: 768px) {
	#customer_header #side_menu { width: 40px; height: 55px; transition: height .5s; }

	#customer_header .open_menu { width: 70px; height: 55px; padding: 0 20px; }
	#customer_header .open_menu .bar { width: 30px; height: 13px; margin: 0 auto; }
	#customer_header .open_menu .bar::before,
	#customer_header .open_menu .bar span::before,
	#customer_header .open_menu .bar span::after { width: 30px; }
	#customer_header .open_menu .bar span::after { width: 51%; }
	#customer_header .open_menu > span:not(.bar) { margin-top: 7px; font-size: 8px; line-height: 1;}

	#customer_header #side_menu:target .open_menu { background: transparent;}
	#customer_header #side_menu:target .open_menu .bar::before { top: 6px; }
	#customer_header #side_menu:target .open_menu .bar span::after { bottom: 6px; }
}


/* breadcrumb
------------------------------------------------------ */
#customer_footer #breadcrumb { display: flex; flex-wrap: wrap; align-items: center; padding: 60px 30px 70px; width: 100%; font-size: 13px; box-sizing: border-box; }
#customer_footer #breadcrumb li { display: flex; align-items: center; }
#customer_footer #breadcrumb li a { color: #597252; }
#customer_footer #breadcrumb li + li::before { content: ""; flex-shrink: 0; width: 12px; height: 1px; margin: 0 10px; background: #597252; }

@media screen and (max-width: 768px) {
	#customer_footer #breadcrumb { padding: 30px 10px; font-size: 12px; }
}



/* Footer
------------------------------------------------------ */
#customer_footer #fotter_img { position: relative; }
#customer_footer #pagetop { display: flex; align-items: center; flex-direction: column; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 30px); font-size: 15px; letter-spacing: 0; color: #fff; cursor: pointer; }
#customer_footer #pagetop .line { height: 60px; margin-top: 10px; width: 1px; position: relative; }
#customer_footer #pagetop .line:after { content: ''; display: block; width: 1px; height: 60px; background: #fff; animation: ScrollnavigateAnimation 2s infinite cubic-bezier(0.77, 0, 0.18, 1); position: absolute; left: 0; right: 0; top: auto; bottom: 0; }
#customer_footer #footer_wrap { background: var(--color-green);}
#customer_footer #footer { width: min(90%, 1344px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; color: #fff; padding: 125px 0 60px 30px; box-sizing: border-box; }
#customer_footer #footer a { color: #fff;}

#customer_footer #f_logo { width: min(29%, 380px); margin-bottom: 80px; display: flex; flex-wrap: wrap; justify-content: space-between; }
#customer_footer #f_logo > p { width: 100%; background: #6a7f64; color: #fff; text-align: center; margin-bottom: 45px; letter-spacing: 0; padding: 5px 0; }
#customer_footer #f_logo img { display: block; width: 100%; height: auto; }
#customer_footer #f_logo .rin {  width: min(41%, 150px);}
#customer_footer #f_logo .yuyu {  width: min(39%, 143px);}


#customer_footer #f_nav { margin: 0 0 95px auto; width: min(32%, 420px); }
#customer_footer #f_nav ul { column-count: 2; }
#customer_footer #f_nav li + li { margin-top: 15px; }
#customer_footer #f_nav li a { font-size: 14px; padding: 3px 0; line-height: 1.2; display: inline-block; position: relative; }
#customer_footer #f_nav li a:after { content: ''; width: 0; height: 1px; background: #fff; position: absolute; left: 0; bottom: 0; transition: width .5s; }

#customer_footer #f_add { width: auto; }
#customer_footer #f_add .f_tel { font-size: 12px; }
#customer_footer #f_add .f_tel .tel-link { font-size: 20px; }
#customer_footer #f_add .f_tel > span { display: block; }
#customer_footer #f_add .f_tel > span .link-none { pointer-events: none; text-decoration: none; }
#customer_footer #f_add address { margin-top: 40px; font-size: 13px; line-height: 2; }
#customer_footer #f_add address span { display: block;}

#customer_footer #f_snav { width: 80%; }
#customer_footer #f_snav ul { display: flex; align-items: center; }
#customer_footer #f_snav li a { font-size: 13px; line-height: 1.2; display: block; }

#customer_footer #f_sns { width: 100%; /* width: 20%; */ display: flex; align-items: center; justify-content: flex-end; }
#customer_footer #f_sns li + li { margin-left: 25px; }
#customer_footer #f_sns li a { display: block; }

@keyframes ScrollnavigateAnimation{
	0%{
		height:0;
	}
	45%{
		height:100%;
	}
	55%{
		height:100%;
		bottom: 0;
	}
	100%{
		height:0;
		bottom: 100%;
	}
}

@media screen and (hover: hover) {
	#customer_footer #f_nav li a:hover { opacity: 1; }
	#customer_footer #f_nav li a:hover::after { width: 100%; }
}

@media screen and (min-width: 601px) {
	#customer_footer #f_snav li + li { border-left: 1px solid #fff; margin-left: 25px; padding-left: 25px;}
}
@media screen and (max-width: 768px) {
	#customer_footer #pagetop { transform: translate(-50%, 20px); font-size: 14px; }
	#customer_footer #pagetop .line { height: 40px; margin-top: 7px; }
	#customer_footer #footer { flex-direction: column; width: 76%; padding: 80px 0 60px;  }ｚ
	#customer_footer #footer a { color: #fff;}

	#customer_footer #f_logo { width: 100%; justify-content: center; margin: 0; }
	#customer_footer #f_logo > p { margin-bottom: 20px; }
	#customer_footer #f_logo a + a { margin-left: 10%; }

	#customer_footer #f_nav { margin: 60px 0 0; width: 100%; }
	#customer_footer #f_nav li + li { margin-top: 10px; }
	#customer_footer #f_nav li a { font-size: 12px; padding: 2px 0; }

	#customer_footer #f_add { margin-top: 40px; width: 100%; }
	#customer_footer #f_add .f_tel { font-size: 10px; }
	#customer_footer #f_add .f_tel .tel-link { font-size: 18px; text-decoration: underline; }
	#customer_footer #f_add address { font-size: 12px; margin: 20px 0 0; line-height: 1.8; }

	#customer_footer #f_snav { margin-top: 40px; width: 100%; }
	#customer_footer #f_snav ul { flex-wrap: wrap; }
	#customer_footer #f_snav li { margin-bottom: 15px; }
	#customer_footer #f_snav li:not(:last-child) { border-right: 1px solid #fff; margin-right: 15px; padding-right: 15px;}
	#customer_footer #f_snav li a { font-size: 12px; }

	#customer_footer #f_sns { margin-top: 40px; width: 100%;  }
	#customer_footer #f_sns li + li { margin-left: 15px; }
	#customer_footer #f_sns li a img { height: 20px; }
}