@charset "utf-8";
/* amiri-regular */
@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');

/* ===================================================
	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 p,
#customer_footer p { padding: 0; margin: 0;}


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

#customer_header .amiri,
#customer_footer .amiri { font-family: "Amiri", serif; font-weight: 400; font-style: normal; }

#customer_header,
#customer_footer {
	font-size: 16px; font-weight: normal; line-height: 1.8;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	-webkit-text-size-adjust: 100%; letter-spacing: 0.08em;
}

#customer_header *,
#customer_footer * { word-wrap: break-word; overflow-wrap: break-word;}

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

#customer_header *,
#customer_footer * { box-sizing: border-box; }
#customer_header a,
#customer_footer a { color: #fff; text-decoration: none; }
#customer_header a img,
#customer_footer a img { transition: opacity .3s; }

#customer_header em,
#customer_footer em { font-style: normal;}

#customer_header img,
#customer_footer img { max-width: 100%; height: auto; }

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

#customer_header .ofi,
#customer_footer .ofi { object-fit: cover; width: 100%; height: 100%; }

@media screen and (orientation:landscape) {
	body { width: 100%;}
}
@media screen and (hover: hover) {
	#customer_header a:hover,
	#customer_footer a:hover { color: #fff; }
	#customer_header a:hover img,
	#customer_footer a:hover img { opacity: 0.75; }
}
@media screen and (min-width: 769px) {
	#customer_header .tel-link,
	#customer_footer .tel-link { pointer-events: none; }
}
@media screen and (max-width: 768px) {
	body { min-width: 0;}

	#customer_header,
	#customer_footer { font-size: 15px;}

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

/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
#customer_header .inner_lg,
#customer_footer .inner_lg { width: 1400px; max-width: calc(98% - 180px); margin: 0 auto;}
#customer_header .inner_md,
#customer_footer .inner_md { width: 1200px; max-width: calc(98% - 180px); margin: 0 auto;}
#customer_header .inner_sm,
#customer_footer .inner_sm { width: 1100px; max-width: calc(98% - 180px); margin: 0 auto;}

@media screen and (max-width: 768px) {
	#customer_header .inner_lg,
	#customer_footer .inner_lg,
	#customer_header .inner_md,
	#customer_footer .inner_md,
	#customer_header .inner_sm,
	#customer_footer .inner_sm { max-width: 92%;}
}


/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#customer_header #header_top { position: relative; width: 100%; height: 90px; display: flex; justify-content: space-between; align-items: center; padding: 0 calc(90px + 1%) 0 30px;}
#customer_header .h_lang { position: relative; width: 145px; text-align: center; cursor: pointer; }
#customer_header .h_lang .acc_tit::before { content: ''; display: block; position: absolute; top: 50%; right: 10px; content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 10px; transform: translateY(-50%) rotate(45deg); border-right: 1px solid #fff; border-bottom: 1px solid #fff;}
#customer_header .h_lang ul { position: absolute; width: 100%; left: 0; top: 50px; background: #000; z-index: 1;}
#customer_header .h_lang ul li a { display: block; padding: 5px 0;}
/* Safari */
#customer_header ::-webkit-details-marker { display: none !important; }

#customer_header .h_menu { position: absolute; top: 30px; right: 30px; z-index: 99; width: 30px; height: 40px; }
#customer_header .h_menu a { display: flex; justify-content: center; width: 100%; transition: opacity .3s; font-size: 14px; }
#customer_header .h_menu a .bar { position: relative; display: flex; align-items: center; font-size: 0; }
#customer_header .h_menu a::before,
#customer_header .h_menu a .bar::before,
#customer_header .h_menu a .bar::after { content: ''; display: block; width: 1px; height: 40px; margin: 0 6.5px; background: #969696; transition: transform 0.3s; }
#customer_header .h_menu a::before { margin-left: 0; }
#customer_header .h_menu a .bar::after { margin-right: 0; }
#customer_header .h_menu a .bar+span { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); width: 35px; text-align: center; letter-spacing: normal; color: #a1a1a1; transition: opacity .3s; opacity: 0; }
#customer_header .h_menu .open { z-index: 1; }
#customer_header .h_menu .close { z-index: -1; position: absolute; top: 0; opacity: 0; pointer-events: none; /* reset */ font-weight: normal; text-shadow: none; }

#customer_header #h_reserve a { width: 100px; height: 15vw; background: url(../img/btn_bg01.jpg); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .3s; }
#customer_header #h_reserve a span { font-size: 16px;}

/* OPEN */
#customer_header:has(:target) .h_menu .open { opacity: 0; pointer-events: none; z-index: -1; }
#customer_header:has(:target) .h_menu .close { opacity: 1; pointer-events: auto; z-index: 1; }
#customer_header:has(:target) .h_menu .close .bar+span { opacity: 1; }
#customer_header:has(:target) .h_menu a::before,
#customer_header:has(:target) .h_menu a .bar::before,
#customer_header:has(:target) .h_menu a .bar::after { margin: 0; }
#customer_header:has(:target) .h_menu a::before { transform: rotate(45deg);}
#customer_header:has(:target) .h_menu a .bar::before { opacity: 0; }
#customer_header:has(:target) .h_menu a .bar::after { transform: rotate(-45deg) translate(-2px, -2px); }

@media screen and (hover: hover) {
	#customer_header .h_menu a:hover { opacity: .7;}
	#customer_header #h_reserve a:hover { opacity: .85;}
}

@media screen and (min-width: 769px) {
	#customer_header #h_reserve { display: none; }
}
@media screen and (max-width: 768px) {
	#customer_header #header_top { justify-content: flex-end; height: 15vw; padding-right: 18vw; padding-left: 3vw;}
	#customer_header #header_top .h_logo { margin-right: auto; }
	#customer_header #header_top .h_logo img { width: 22vw; min-width: 75px; }
	#customer_header #header_top .h_lang { display: none; }
	#customer_header .h_lang { width: 120px; }
	#customer_header .h_lang ul { top: 35px;}
	#customer_header .h_menu { width: 18vw; height: 15vw; display: flex; justify-content: center; align-items: center; right: 0; top: 0;}
	#customer_header .h_menu a { width: 25px; position: relative;}
	#customer_header .h_menu a::before { height: 8vw; margin-right: 5px; }
	#customer_header .h_menu a .bar::before { height: 8vw; margin: 0 5px; }
	#customer_header .h_menu a .bar::after { height: 8vw; margin-left: 5px; }
	#customer_header .h_menu .close { position: relative; }
}


/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */
#customer_header #gnav_wrap { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 100px 0 120px; background: #000; z-index: 999; transition: opacity .3s; overflow: auto; scrollbar-width: none;/* scrollbar非表示 */ }
#customer_header #gnav_wrap .h_lang { position: absolute; top: 30px; right: calc(90px + 1%); }
#customer_header #gnav { width: 1100px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; min-height: 100%; max-width: 98%;}
#customer_header #gnav #gnav_logo { text-align: center;}
#customer_header #gnav_main { margin-top: 50px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#customer_header #gnav_main ul { width: 33%; padding: 10px 0 10px 2%; border-left: 1px solid #4d4d4d; box-sizing: border-box;}
#customer_header #gnav_main ul li { line-height: 1.2;}
#customer_header #gnav_main ul li a { transition: color .3s; display: inline-block;}
#customer_header #gnav_main ul li + li { margin-top: 23px;}
#customer_header #gnav_main ul li.weather { margin-top: 25px;}
#customer_header #gnav_main ul li.weather a { padding-left: 25px; position: relative; text-decoration: underline;}
#customer_header #gnav_main ul li.weather a::before {
  content: ''; display: block; width: 20px; height: 20px; background: url(../img/ico_weather_w.svg)no-repeat center; background-size: contain;
  position: absolute; top: calc(50% - 11px); left: 0;
}
/* OPEN */
#customer_header:has(:target) #gnav_wrap { opacity: 1; pointer-events: auto; }

#customer_header #gnav_reserve { margin-top: 65px;}
#customer_header #gnav_reserve > p { text-align: center;}
#customer_header #gnav_reserve > p > span { color: #bbaa82; display: block; font-size: 32px; line-height: 1.3;}
#customer_header #gnav_reserve > p > span span { margin-right: 10px;}
#customer_header #gnav_reserve ul { display: flex; justify-content: center; margin-top: 25px;}
#customer_header #gnav_reserve ul li { width: 280px;}
#customer_header #gnav_reserve ul li + li { margin-left: 15px;}
#customer_header #gnav_reserve ul li a { display: block; background: url(../img/btn_bg02.jpg); text-align: center; padding: 20px 0; transition: opacity .3s;}
#customer_header #gnav_reserve ul li:first-of-type a { background: url(../img/btn_bg01.jpg);}

@media screen and (hover: hover) {
	#customer_header #gnav_main ul li a:hover { color: #b3bff3;}
	#customer_header #gnav_reserve ul li a:hover { opacity: .85;}
}

@media screen and (max-width: 768px) {
	#customer_header #gnav_wrap .h_lang { top: 5vw; right: 20vw; }
	#customer_header .gnav_inner { padding: 80px 0 120px; }
	#customer_header #gnav { width: 90%;}
	#customer_header #gnav #gnav_logo img { width: 35vw;}
	#customer_header #gnav_main { margin-top: 30px;}
	#customer_header #gnav_main ul { width: 49%; padding: 0; border-left: none;}
	#customer_header #gnav_main ul:nth-of-type(3) { width: 100%; margin-top: 30px; border-bottom: 1px solid #4d4d4d; padding-bottom: 25px;}
	#customer_header #gnav_main ul li + li { margin-top: 20px;}
	#customer_header #gnav_main ul:nth-of-type(3) li + li { margin-top: 10px;}

	#customer_header #gnav_reserve { margin-top: 30px;}
	#customer_header #gnav_reserve > p > span { font-size: 24px; line-height: 1.6;}
	#customer_header #gnav_reserve ul { display: block; margin-top: 15px;}
	#customer_header #gnav_reserve ul li { width: 85%; margin: 0 auto;}
	#customer_header #gnav_reserve ul li + li { margin: 10px auto 0;}
	#customer_header #gnav_reserve ul li a { padding: 15px 0;}
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#customer_header #main_img { width: calc(99% - 90px);}
#customer_header #main_img .img_wrap { position: relative;}
#customer_header #main_img .tit_wrap { display: flex; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: calc(50% - 600px);}
#customer_header #main_img h1 { font-size: 34px; line-height: 1.4; text-shadow: 0 0 5px rgba(0,0,0,0.75);}
#customer_header #main_img h1 span { font-size: 16px; display: block;}

@media screen and (max-width: 1409px) {
  #customer_header #main_img .tit_wrap { padding-left: calc(1vw + 90px);}
}

@media screen and (max-width: 1200px) {
  #customer_header #main_img .tit_wrap { padding-left: 102px;}
}

@media screen and (max-width: 768px) {
  #customer_header #main_img { width: 100%;}
  #customer_header #main_img .tit_wrap { padding-left: 4%;}
  #customer_header #main_img h1 { font-size: 28px;}
  #customer_header #main_img h1 span { font-size: 15px;}
}


/* breadcrumb */
#customer_header #breadcrumb { margin: 5px auto 25px; width: 100%; font-size: 12px; text-align: right;}
#customer_header #breadcrumb li { display: inline-block; line-height: 1.6;}
#customer_header #breadcrumb li:before { content: '>'; margin: 0 5px;}
#customer_header #breadcrumb li:first-child:before { display: none;}
@media screen and (max-width: 768px) {
  #customer_header #breadcrumb { width: 94%;}
}


/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#customer_footer #footer_wrap { margin-top: 90px; }
#customer_footer #footer_reserve { padding: 100px 0 125px; background: url(../img/footer_reserve_bg.jpg)no-repeat center; background-size: cover;}
#customer_footer #footer_reserve p { font-size: 28px; display: flex; align-items: center;}
#customer_footer #footer_reserve p span { font-size: 20px; color: #a0a0a0; margin-left: 25px;}
#customer_footer #footer_reserve ul { display: flex; justify-content: center; margin-top: 55px;}
#customer_footer #footer_reserve ul li { width: 280px;}
#customer_footer #footer_reserve ul li + li { margin-left: 50px;}
#customer_footer #footer_reserve ul li a { display: block; background: #ffffff; text-align: center; padding: 20px 0; font-size: 18px; color: #000; transition: background-color .3s, color .3s;}

#customer_footer #footer { padding: 85px 4% 120px; position: relative; display: flex; justify-content: space-between;}
#customer_footer #pagetop { position: absolute; top: 50px; right: 2%;}
#customer_footer #pagetop a { display: block; padding: 0 10px;}
#customer_footer #f_logo { width: 350px;}
#customer_footer #f_logo .name { margin-top: 30px;}
#customer_footer #f_logo address { line-height: 1.8; }
#customer_footer #f_logo address span { display: inline-block;}
#customer_footer #f_logo address span:first-of-type { margin-right: 10px;}
#customer_footer #f_logo address .tel-link span { font-size: 30px; line-height: 1.4;}
#customer_footer #f_logo ul { display: flex; margin-top: -5px;}
#customer_footer #f_logo ul li + li { margin-left: 20px;}

#customer_footer #f_nav { width: 700px; max-width: calc(100% - 350px); margin: 15px auto 0;}
#customer_footer #f_nav > p { display: flex; justify-content: flex-end;}
#customer_footer #f_nav > p > span { display: flex; align-items: center; border: 1px solid #6b6b6b; color: #d2d2d2; line-height: 1; padding: 5px 10px;}
#customer_footer #f_nav > p > span span { margin-right: 10px;}
#customer_footer #f_navmain { display: flex; justify-content: space-between; margin-top: 60px;}
#customer_footer #f_navmain ul { width: 210px;}
#customer_footer #f_navmain ul li { line-height: 1.2;}
#customer_footer #f_navmain ul li a { transition: color .3s; display: inline-block;}
#customer_footer #f_navmain ul li.weather a { padding-left: 25px; position: relative; text-decoration: underline;}
#customer_footer #f_navmain ul li.weather a::before {
  content: ''; display: block; width: 20px; height: 20px; background: url(../img/ico_weather_w.svg)no-repeat center; background-size: contain;
  position: absolute; top: calc(50% - 11px); left: 0;
}
#customer_footer #f_navmain ul li + li { margin-top: 18px;}

#customer_footer #copyright { color: #969696; font-size: 12px; margin-top: 65px;}

@media screen and (hover: hover) {
	#customer_footer #footer_reserve ul li a:hover { background: #474e6e; color: #fff;}
	#customer_footer #f_navmain ul li a:hover { color: #b3bff3;}
}

@media screen and (max-width: 768px) {
	#customer_footer #footer_wrap { margin-top: 40px; }
	#customer_footer #footer_reserve { padding: 30px 0;}
	#customer_footer #footer_reserve > div { width: 84%;}
	#customer_footer #footer_reserve p { font-size: 22px;}
	#customer_footer #footer_reserve p span { font-size: 16px;}
	#customer_footer #footer_reserve ul { display: block; margin-top: 10px;}
	#customer_footer #footer_reserve ul li { width: 100%;}
	#customer_footer #footer_reserve ul li + li { margin: 10px 0 0;}
	#customer_footer #footer_reserve ul li a { font-size: 16px; padding: 15px 0;}

	#customer_footer #footer { flex-direction: column; padding: 20px 4% 50px;}
	#customer_footer #pagetop { right: 1%; top: 20px;}
	#customer_footer #f_logo { width: 100%; order: 1; margin-top: 50px;}
	#customer_footer #f_logo .logo { text-align: center;}
	#customer_footer #f_logo .logo img { width: 36vw; min-width: 130px;}
	#customer_footer #f_logo .name { margin-top: 20px;}
	#customer_footer #f_logo ul { margin-top: 20px;}
	#customer_footer #f_nav { max-width: none; width: 100%;}
	#customer_footer #f_nav > p { justify-content: center;}
	#customer_footer #f_navmain { flex-wrap: wrap; margin-top: 50px;}
	#customer_footer #f_navmain ul { width: 49%;}
	#customer_footer #f_navmain ul:nth-of-type(3) { width: 100%; margin-top: 25px;}

	#customer_footer #copyright { margin-top: 30px;}
}


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



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