@charset "utf-8";

/* ===================================================
	Reset
====================================================== */
#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;}
#customer_header img,
#customer_footer img { max-width: 100%; height: auto;}


/* ===================================================
	Custom CSS
	※ 予約番自体のコンテンツに影響するのを避けるため、
	　必ず #customer_header または #customer_footer からの継承で記述してください。
====================================================== */
body { min-width: 1200px;}
.webc_pagetop { display: none;}
#customer_header,
#customer_footer { position: relative;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; font-size: 16px; font-weight: normal; line-height: 1.8;
	color: #2f2f2f; letter-spacing: .1em;
	text-size-adjust: 100%;
}
#customer_header a,
#customer_footer a { color: #2f2f2f; text-decoration: none; transition: opacity .5s;}
#customer_header img,
#customer_footer img { max-width: 100%;}
#customer_header .br_sp,
#customer_header .view_sp,
#customer_footer .br_sp,
#customer_footer .view_sp { display: none;}

@media screen and (hover: hover) {
	#customer_header a:hover,
	#customer_footer a:hover { color: #2f2f2f; opacity: .6;}
}
@media screen and (max-width: 600px) {
	body { min-width: 0;}
	.webc_pagetop { display: block;}
	#customer_header,
	#customer_footer { font-size: 14px; letter-spacing: 0.05em;}
	#customer_header .br_sp,
	#customer_footer .br_sp { display: inline;}
	#customer_header .br_pc,
	#customer_footer .br_pc { display: none;}
	#customer_header .view_sp,
	#customer_footer .view_sp { display: block;}
	#customer_header .view_pc,
	#customer_footer .view_pc { display: none !important;}
}


/* ---------------------------------------------------
	Common Parts
------------------------------------------------------ */
/* コンテンツ幅 */
#customer_footer .inner_md { width: 1200px; max-width: 92%; margin: 0 auto;}

/* ボタン */
#customer_footer .cmn_btn [class*="cmn_btn_"] { display: flex; align-items: center; justify-content: center; min-height: 65px; padding: 0; border: none; border-radius: 6px; box-shadow: none;}
#customer_footer .cmn_btn .cmn_btn_y { color: #fff; background: #af9337;}
#customer_footer .cmn_btn .cmn_btn_b { color: #fff; background: #424242;}

@media screen and (max-width: 600px) {
	/* ボタン */
	.cmn_btn [class*="cmn_btn_"] { min-height: 50px;}
}


/* ---------------------------------------------------
	Header部分ボタン類
------------------------------------------------------ */
#customer_header #g_header [class^="btn_"] a { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 170px; height: 90px; color: #fff; transition: background-color .5s, opacity .5s;}
#customer_header #g_header [class^="btn_"] img { width: 25px; margin: 0 8px 0 0;}
#customer_header #g_header .btn_reserve a { padding: 0 0 0 1px; background: #af9337;}
#customer_header #g_header .btn_menu a { width: 90px; padding: 0 0 0 1px; background: #2f2f2f;}
#customer_header #g_header .btn_menu .icon { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 30px;}
#customer_header #g_header .btn_menu .icon span { width: 30px; height: 2px; background: #fff; transition: all .5s;}
#customer_header #g_header .btn_menu .icon span + span { margin: 6px 0 0;}
#customer_header #g_header .btn_access a { background: #aaa493;}
#customer_header #g_header .btn_tel a,
#customer_header #g_header .btn_change a { color: #2f2f2f; background: #fff;}
#customer_header #g_header .btn_map a { color: #2f2f2f; background: #ededed;}
#customer_header #g_header:target .btn_menu a { color: #2f2f2f; background: #f2f2f2;}
#customer_header #g_header:target .btn_menu .icon span { background: #2f2f2f;}
#customer_header #g_header:target .btn_menu .icon span:first-child { margin: 0 0 -2px; transform: rotate(45deg);}
#customer_header #g_header:target .btn_menu .icon span:last-child { margin: -2px 0 0; transform: rotate(-45deg);}
#customer_header #g_header:target .btn_menu .icon span:nth-child(2) { margin: 0; opacity: 0;}

@media screen and (max-width: 600px) {
	#customer_header #g_header [class^="btn_"] { width: 100%;}
	#customer_header #g_header [class^="btn_"] a { flex-direction: column; width: 100%; height: 60px; font-size: 12px;}
	#customer_header #g_header [class^="btn_"] img { width: 25px; margin: 0 0 1px;}
	#customer_header #g_header .btn_tel,
	#customer_header #g_header .btn_map { transition: opacity .5s;}
	#customer_header #g_header .btn_menu .icon { width: 25px; height: 25px;}
	#customer_header #g_header .btn_menu .icon span { width: 20px;}
	#customer_header #g_header .btn_menu .icon span + span { margin-top: 4px;}
	#customer_header #g_header:target .btn_menu a { color: #fff; background: #2f2f2f;}
	#customer_header #g_header:target .btn_menu .icon span { background: #fff;}
}


/* ---------------------------------------------------
	Header
------------------------------------------------------ */

@keyframes fade_nav {
	0% { opacity: 0;}
	100% { opacity: 1;}
}
#customer_header #g_header { position: absolute; top: 0; left: 0; z-index: 200; width: 100%; min-width: 1200px; color: #fff; animation: fade_nav ease-in-out .7s;}
#customer_header #g_header::before { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 140px; pointer-events: none;
	content: '';
	background: linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 );
}
#customer_header #g_header .hd_inner { display: flex;}
#customer_header #g_header .hd_logo { position: relative; z-index: 0; display: flex; align-items: center; padding: 15px 24px; font-size: 14px;}
#customer_header #g_header .hd_logo a { position: relative; margin: 0 10px 0 0; color: #fff;}
#customer_header #g_header .hd_logo img { margin: 0 0 3px;}
#customer_header #g_header .hd_logo a span { display: block; font-size: 12px; text-align: center;}
#customer_header #g_header .hd_logo .logo_w { width: 113px;}
#customer_header #g_header .hd_logo .logo_b { display: none; width: 97px;}
#customer_header #g_header .hd_nav { position: relative; z-index: 0; display: flex; margin: 0 8px 0 auto; pointer-events: none; opacity: 0; transition: none;}
#customer_header #g_header .hd_nav li { position: relative; display: flex; align-items: center; padding: 0 12px;}
#customer_header #g_header .hd_nav a { position: relative; padding: 5px; color: #fff;}
#customer_header #g_header .hd_nav a::before { position: absolute; right: 50%; bottom: 0; left: 50%; height: 1px; content: ''; background: #000; transition: left .5s, right .5s;}
#customer_header #g_header .hd_nav_child { position: absolute; top: 70px; left: -10px; padding: 20px 10px; font-size: 14px; line-height: 1.6; white-space: nowrap; pointer-events: none; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); opacity: 0; transition: opacity .5s;}
#customer_header #g_header .hd_nav_child li + li { margin: 10px 0 0;}
#customer_header #g_header .hd_nav_child a { padding: 0;}
#customer_header #g_header .hd_nav li:hover .hd_nav_child { pointer-events: auto; opacity: 1;}
#customer_header #g_header .hd_btn { z-index: 100; display: flex;}
#customer_header #g_header .hd_btn { align-self: stretch;}
#customer_header #g_header.fixed { color: #2f2f2f;}
#customer_header #g_header.fixed::before { height: 100px; opacity: 0.8;}
#customer_header #g_header.fixed .hd_inner { background: #fff;}
#customer_header #g_header.fixed .hd_logo a,
#customer_header #g_header.fixed .hd_nav a { color: #2f2f2f;}
#customer_header #g_header.fixed .hd_logo .logo_w { display: none;}
#customer_header #g_header.fixed .hd_logo .logo_b { display: inline;}
#customer_header #g_header.fixed .hd_nav { pointer-events: auto; opacity: 1; transition: opacity .5s;}

@media screen and (hover: hover) {
	#customer_header #g_header .hd_nav a:hover { opacity: 1;}
	#customer_header #g_header .hd_nav a:hover::before { right: 0; left: 0;}
}
@media screen and (max-width: 600px) {
	#customer_header #g_header { position: absolute !important; min-width: 0; animation: none !important;}
	#customer_header #g_header::before { height: 100px;}
	#customer_header #g_header .hd_inner { justify-content: space-between;}
	#customer_header #g_header .hd_logo { flex-shrink: 0; padding: 10px 4% 0; font-size: 12px;}
	#customer_header #g_header .hd_logo a { margin-right: 5px;}
	#customer_header #g_header .hd_logo a span { display: block; font-size: 10px; text-align: center;}
	#customer_header #g_header .hd_logo img { width: 80px !important;}
	#customer_header #g_header .hd_btn { z-index: 0; width: 120px;}
	#customer_header #g_header.fixed::before { height: 70px;}
}


/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */
#customer_header #g_nav { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100vh; overflow: auto; color: #2f2f2f; pointer-events: none;}
#customer_header #g_nav a { color: #2f2f2f;}
#customer_header #g_nav .nav_bg { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity .5s;}
#customer_header #g_nav .nav_inner { position: relative; z-index: 0; width: 600px; margin: 0 0 0 auto; background: #f2f2f2; opacity: 0; transition: opacity .5s;}
#customer_header #g_nav .nav_top { position: sticky; top: 0; left: 0; z-index: 200; display: flex; width: 100%;}
#customer_header #g_nav .nav_content { display: flex; min-height: calc(100vh - 90px); padding: 65px 70px; font-family: "Yu Gothic Medium", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
#customer_header #g_nav .nav_main { padding: 10px 50px 10px 0; font-size: 18px;}
#customer_header #g_nav .nav_main li + li { margin: 30px 0 0;}
#customer_header #g_nav .nav_child { padding: 5px 0 5px 10px; margin: 5px 0 0 3px; font-size: 14px; color: #6c6c6c; border-left: 1px solid #cdcdcd;}
#customer_header #g_nav .nav_child li::before { margin: 0 5px 0 0; content: '-';}
#customer_header #g_nav .nav_child li + li { margin: 10px 0 0;}
#customer_header #g_nav .nav_child a { color: #6c6c6c;}
#customer_header #g_nav .nav_sub { display: flex; flex-direction: column; padding: 10px 0 10px 50px; font-size: 15px; letter-spacing: 0; border-left: 1px solid #cdcdcd;}
#customer_header #g_nav .nav_sub ul { margin: 0 0 15px;}
#customer_header #g_nav .nav_sub li + li { margin: 15px 0 0;}
#customer_header #g_nav .nav_sub .sns { display: flex; margin: auto 0 0 auto;}
#customer_header #g_nav .nav_sub .sns li { width: 25px;}
#customer_header #g_nav .nav_sub .sns li + li { margin: 0 0 0 15px;}
#customer_header #g_header:target #g_nav { pointer-events: auto;}
#customer_header #g_header:target .nav_bg { opacity: 1;}
#customer_header #g_header:target .nav_inner { opacity: 1;}
#customer_header #g_header:target .hd_nav { pointer-events: none; opacity: 0;}

@media screen and (max-width: 600px) {
	#customer_header #g_nav { min-width: 0;}
	#customer_header #g_nav .nav_bg { display: none;}
	#customer_header #g_nav .nav_inner { width: 100%; margin: 0;}
	#customer_header #g_nav .nav_top { justify-content: center; width: 100%; opacity: 0; transition: opacity .7s;}
	#customer_header #g_nav .nav_top li { width: 25%;}
	#customer_header #g_nav .nav_top li.btn_reserve { order: -1;}
	#customer_header #g_nav .nav_top li.btn_access { order: 2;}
	#customer_header #g_nav .nav_top li.btn_menu { order: 3;}

	/* #customer_header #g_nav .nav_top li:first-child { order: 2;} */
	#customer_header #g_nav .nav_content { display: block; min-height: 0; padding: 20px 0 0;}
	#customer_header #g_nav .nav_main { padding: 0; font-size: 16px; border-bottom: 1px solid #d4d4d4;}
	#customer_header #g_nav .nav_main li { border-top: 1px solid #d4d4d4;}
	#customer_header #g_nav .nav_main li + li { margin: 0;}
	#customer_header #g_nav .nav_main a,
	#customer_header #g_nav .nav_main .nav_cap { display: block; padding: 15px 30px 15px 20px; background: #fff;}
	#customer_header #g_nav .nav_main a { background: #fff url(../img/icon_arrow_g.svg) no-repeat right 15px center; background-size: 10px auto;}
	#customer_header #g_nav .nav_child { padding: 0; margin: 0; border-left: none;}
	#customer_header #g_nav .nav_child li { border-top: 1px dotted #d4d4d4;}
	#customer_header #g_nav .nav_child li::before { content: none;}
	#customer_header #g_nav .nav_child li + li { margin: 0;}
	#customer_header #g_nav .nav_child a { padding: 10px 30px 10px 20px; background: none;}
	#customer_header #g_nav .nav_child a::before { margin: 0 3px 0 0; content: '-';}
	#customer_header #g_nav .nav_sub { flex-flow: row wrap; justify-content: space-between; padding: 30px 20px 20px; font-size: 14px; border-left: none;}
	#customer_header #g_nav .nav_sub ul { width: 49%; margin-bottom: 0;}
	#customer_header #g_nav .nav_sub .sns { width: auto; margin-top: 20px;}
	#customer_header #g_nav .nav_sub .sns li { width: 30px;}
	#customer_header #g_nav .nav_close { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 0; background: #e4e4e4;}
	#customer_header #g_nav .nav_close .icon { display: flex; flex-direction: column; justify-content: center; width: 25px; height: 25px;}
	#customer_header #g_nav .nav_close .icon span { width: 20px; height: 2px; background: #2f2f2f;}
	#customer_header #g_nav .nav_close .icon span:first-child { margin: 0 0 -2px; transform: rotate(45deg);}
	#customer_header #g_nav .nav_close .icon span:last-child { transform: rotate(-45deg);}
	#customer_header #g_header:target .nav_top { opacity: 1;}
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#customer_header #main_img { position: relative; z-index: 0; padding: 90px 0 0;}
#customer_header #main_img h1 { padding: 70px 0 50px; font-size: 40px; line-height: 1.6; text-align: center;}
#customer_header #main_img h1 .main span { margin: 0 0 0 10px; font-size: 20px;}
#customer_header #main_img h1 .sub { display: block; font-size: 13px;}
#customer_header #main_img.img_none h1 { padding-bottom: 75px;}

@media screen and (max-width: 600px) {
	#customer_header #main_img { padding-top: 60px;}
	#customer_header #main_img h1 { padding: 40px 0 30px; font-size: 24px;}
	#customer_header #main_img h1 .main span { display: block; margin: 0; font-size: 16px;}
	#customer_header #main_img h1 .sub { margin: 5px 0 0; font-size: 12px;}
	#customer_header #main_img.img_none h1 { padding-bottom: 50px;}
}


/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
/* breadcrumb */
#customer_footer #breadcrumb { display: flex; padding: 20px 0; line-height: 1.6; list-style: none;}
#customer_footer #breadcrumb li::before { margin: 0 10px; content: '>';}
#customer_footer #breadcrumb li:first-child::before { display: none;}


/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
@keyframes pagetop {
	0% { top: 0; bottom: auto; height: 15px;}
	10% { top: 0%; bottom: auto; height: 0;}
	10.1% { top: auto; bottom: 0; height: 0;}
	50% { top: auto; bottom: 0; height: 100%;}
	50.1% { top: 0; bottom: auto; height: 100%;}
	100% { top: 0; bottom: auto; height: 15px;}
}
#customer_footer #g_footer { padding: 75px 0 80px; color: #fff; background: #131313;}
#customer_footer #g_footer a { color: #fff;}
#customer_footer #g_footer .pagetop { position: absolute; right: 30px; bottom: 110px; z-index: 10; padding: 95px 0 5px 5px; font-size: 13px; color: #939393; letter-spacing: 2px; border-left: 1px solid #424242; writing-mode: vertical-rl;}
#customer_footer #g_footer .pagetop::before { position: absolute; top: 0; left: -1px; width: 1px; height: 15px; content: ''; background: #af9337;}
#customer_footer #g_footer .ft_logo { text-align: center;}
#customer_footer #g_footer .ft_logo p { margin: 0 0 10px;}
#customer_footer #g_footer .ft_logo img { width: 150px;}
#customer_footer #g_footer .ft_logo .ruby { margin: 5px; font-size: 14px;}
#customer_footer #g_footer .ft_btn { width: 600px; margin: 35px auto 80px;}
#customer_footer #g_footer .ft_btn li + li { margin: 8px 0 0;}
#customer_footer #g_footer .ft_btn .btn_reserve a { min-height: 75px; font-size: 18px;}
#customer_footer #g_footer .ft_btn .btn_reserve img { width: 25px; margin: 0 8px 0 0;}
#customer_footer #g_footer .ft_btn .btn_cancel a { min-height: 60px;}
#customer_footer #g_footer .ft_inner { display: flex; flex-wrap: wrap; justify-content: space-between;}
#customer_footer #g_footer .ft_nav { width: 720px; max-width: 63%;}
#customer_footer #g_footer .ft_nav div { display: flex; flex-wrap: wrap; justify-content: space-between; min-height: 100%;}
#customer_footer #g_footer .ft_nav .nav_main { max-width: calc((100% - 120px) / 3); margin: 0 0 30px; font-size: 15px;}
#customer_footer #g_footer .ft_nav .nav_main li::before { margin: 0 5px 0 0; content: '-';}
#customer_footer #g_footer .ft_nav .nav_main li + li { margin: 20px 0 0;}
#customer_footer #g_footer .ft_nav .nav_child { padding: 10px 0 0 5px; margin: 3px 0 0 2px; font-size: 14px; color: #939393; border-left: 1px solid #424242;}
#customer_footer #g_footer .ft_nav .nav_child li + li { margin: 10px 0 0;}
#customer_footer #g_footer .ft_nav .nav_child a { color: #939393;}
#customer_footer #g_footer .ft_nav .nav_sub { display: flex; width: 100%; margin: auto 0 0; font-size: 14px;}
#customer_footer #g_footer .ft_nav .nav_sub li + li { margin: 0 0 0 30px;}
#customer_footer #g_footer .ft_nav .nav_sub a { color: #939393;}
#customer_footer #g_footer .ft_inq { width: 405px; max-width: 33.75%; border-left: 1px solid #424242;}
#customer_footer #g_footer .ft_inq dl { width: 325px; margin: 0 0 0 auto; font-size: 14px;}
#customer_footer #g_footer .ft_inq dt { margin: 0 0 5px; font-size: 11px; color: #7a7a7a;}
#customer_footer #g_footer .ft_inq dd + dt { margin-top: 25px;}
#customer_footer #g_footer .ft_inq .contact { font-size: 15px;}
#customer_footer #g_footer .ft_inq .tel { margin: 0 0 5px; font-size: 16px; line-height: 1.3;}
#customer_footer #g_footer .ft_inq .tel-link { pointer-events: none;}
#customer_footer #g_footer .ft_inq .tel-link span { font-size: 26px;}
#customer_footer #g_footer .ft_inq .language a::before { margin: 0 5px 0 0; content: '-';}
#customer_footer #g_footer .ft_inq .sns ul { display: flex;}
#customer_footer #g_footer .ft_inq .sns li { width: 32px;}
#customer_footer #g_footer .ft_inq .sns li + li { margin: 0 0 0 20px;}
#customer_footer #g_footer .copyright { width: 100%; margin: 15px 0 0; font-size: 11px; color: #7a7a7a; text-align: right;}


@media screen and (hover: hover) {
	#customer_footer #g_footer .pagetop:hover { text-decoration: none;}
	#customer_footer #g_footer .pagetop:hover::before { animation: pagetop 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;}
}
@media screen and (max-width: 600px) {
	#customer_footer #g_footer { padding: 50px 0;}
	#customer_footer #g_footer .pagetop { display: none;}
	#customer_footer #g_footer .ft_logo img { width: 120px;}
	#customer_footer #g_footer .ft_logo .ruby { font-size: 13px;}
	#customer_footer #g_footer .ft_btn { width: 92%; margin: 25px auto 8px;}
	#customer_footer #g_footer .ft_btn .btn_reserve a { min-height: 65px; font-size: 16px;}
	#customer_footer #g_footer .ft_btn .btn_cancel a { min-height: 50px;}
	#customer_footer #g_footer .ft_inner { display: block;}
	#customer_footer #g_footer .ft_inq { width: auto; max-width: none; margin: 15px 0 0; border-left: none;}
	#customer_footer #g_footer .ft_inq dl { display: flex; flex-wrap: wrap; width: auto; margin: 0; font-size: 16px;}
	#customer_footer #g_footer .ft_inq dt,
	#customer_footer #g_footer .ft_inq dd { padding: 20px 5px; border-bottom: 1px solid #424242;}
	#customer_footer #g_footer .ft_inq dt:last-of-type,
	#customer_footer #g_footer .ft_inq dd:last-of-type { border-bottom: none;}
	#customer_footer #g_footer .ft_inq dt { flex-shrink: 0; width: 90px; margin: 0; font-size: 12px; line-height: 28px;}
	#customer_footer #g_footer .ft_inq dt:first-of-type { line-height: 39px;}
	#customer_footer #g_footer .ft_inq dd { width: calc(100% - 90px);}
	#customer_footer #g_footer .ft_inq dd + dt { margin-top: 0;}
	#customer_footer #g_footer .ft_inq .contact { font-size: 14px;}
	#customer_footer #g_footer .ft_inq .tel { font-size: 14px; line-height: 1.6;}
	#customer_footer #g_footer .ft_inq .tel-link { font-size: 16px; pointer-events: auto;}
	#customer_footer #g_footer .ft_inq .tel-link span { font-size: 20px; text-decoration: underline;}
	#customer_footer #g_footer .ft_inq .sns li + li { margin-left: 15px;}
}


/* ---------------------------------------------------
	更新履歴
------------------------------------------------------



------------------------------------------------------ */