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


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

#customer_header,
#customer_footer {
	font-size: 18px; font-weight: normal; line-height: 1.5;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Droid Sans", sans-serif;
	-webkit-text-size-adjust: 100%; color: #373737;

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

#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: 1100px; max-width: 100%; padding: 0; margin: 0 auto;
	-webkit-box-sizing: border-box; box-sizing: border-box;
}

#customer_header a,
#customer_footer a { color: #373737; text-decoration: none;}
#customer_header a:hover,
#customer_footer a:hover { color: #373737; text-decoration: underline; }
#customer_header a:hover img,
#customer_footer a:hover img { opacity: 0.75;}
#customer_header img,
#customer_footer img { max-width: 100%; height: auto; }

#customer_header .inner,
#customer_footer .inner { max-width: calc(100% - 120px); margin: 0 auto; }
#customer_header .inner_s,
#customer_footer .inner_s { width: 1100px; max-width: calc(100% - 120px); margin: 0 auto;}

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

/* 左から背景が流れるリンク */
#customer_header .lr_link,
#customer_footer .lr_link {
	position: relative;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	-webkit-transition: 0.2s ease all;
  transition: 0.2s ease all;
	text-align: center;
	z-index: 1;
	box-sizing: border-box;
}
#customer_header .lr_link:hover,
#customer_footer .lr_link:hover { text-decoration: none; }
#customer_header .lr_link::before,
#customer_footer .lr_link::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	transition: transform .3s;
	transform-origin: right top;
	transform: scale(0, 1);
}
#customer_header .lr_link:hover::before,
#customer_footer .lr_link:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

#customer_header .v_rl,
#customer_footer .v_rl {-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl; }
#customer_header .ofi,
#customer_footer .ofi { object-fit: cover; }
#customer_header .en,
#customer_footer .en { font-family: 'Poiret One', sans-serif; }


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

  #customer_header .inner,
  #customer_footer .inner { max-width: 100%; }
	#customer_header .inner_s,
	#customer_footer .inner_s { width: 92%; max-width: none;}
	#customer_header .sp,
	#customer_footer .sp { display: block !important; }
	#customer_header .pc,
	#customer_footer .pc { display: none; }
}


/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#customer_header #header_wrap {
	position: absolute; top: 0; left: 0; z-index: 2; width: 100%; min-width: 1200px; height: 80px;
	transition: background-color 0.5s linear 0s , width 2s linear 0s; background: #fff;
}
#customer_header #header { max-width: calc(100% - 120px); width: 92%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
#customer_header #header h1 { font-size: 12px;}

@media screen and (max-width: 600px) {
	#customer_header #header_wrap,
	#customer_header #header { min-width: 0; }
  #customer_header #header_wrap  { position: static; background: none; height: auto; border-bottom: 1px solid #cdcdcd; }
  #customer_header #header { max-width: none; padding: 5vw 0;}
  #customer_header #header  #logo { width: 45%; margin: 0 auto; }
}


/* ---------------------------------------------------
	Gnav
------------------------------------------------------ */
#customer_header #gnav ul { display: flex; justify-content: flex-end; width: 100%; height: 80px; }
#customer_header #gnav li { -webkit-box-sizing: border-box; box-sizing: border-box; }
#customer_header #gnav li,
#customer_header #gnav li a { height: 100%; }
#customer_header #gnav li+li { margin-left: 30px;}
#customer_header #gnav li a {
	display: flex; align-items: center; font-size: 16px; position: relative; transition: .3s; color: #000;
}
#customer_header #gnav li a::after {
	position: absolute; bottom: calc(50% - 15px); left: 50%; content: ''; width: 0; height: 1px; background-color: #373737; transition: .3s; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
#customer_header #gnav li a:hover { text-decoration: none; }
#customer_header #gnav li a:hover::after { width: 100%; }
#customer_header #header_wrap.scroll #gnav li a { color: #000!important; }

@media screen and (max-width: 600px) {
	#customer_header #gnav {
		width: 100%;
		padding: 8vw 6% 10vw;
		box-sizing: border-box;
		transition: opacity 0.8s, visibility 0s ease 0.8s;
    transition-delay: 0s, 0.8s;
		visibility: hidden;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		background: #fff;
		z-index: 102;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
	}
	#customer_header #gnav:target {
		height: 100%;
		transition-delay: 0s;
		opacity: 1;
		visibility: visible;
	}
	#customer_header #gnav #close_top {
		display: block;
		width: 30px;
		height: 0;
		padding: 30px 0 0;
		overflow: hidden;
		position: absolute;
		right: 4vw;
		top: 4vw;
	}
	#customer_header #gnav .close_menu span:before,
	#customer_header #gnav .close_menu span:after {
		content: '';
		width: 30px;
		height: 1px;
		position: absolute;
		top: 50%;
		left: calc(50% - 15px);
		background: #434343;
	}
	#customer_header #gnav .close_menu span:before {
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#customer_header #gnav .close_menu span:after {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#customer_header #gnav #sp_logo { width: 45%; margin: 0 auto 6vw; }
	#customer_header #gnav #sp_reserve {
		display: block;
		width: 100%;
		text-align: center;
		padding: 5vw 10px;
		box-sizing: border-box;
		background: #214d8d;
		color: #fff;
		margin-bottom: 6vw;
	}
	#customer_header #gnav ul { display: block; height: auto; }
	#customer_header #gnav li { border-bottom: 1px solid #aaa; }
	#customer_header #gnav ul:not([class]) li:nth-of-type(1) { border-top: 1px solid #aaa; }
	#customer_header #gnav li a { display: block; padding: 3vw 20px; color: #000!important; }
	#customer_header #gnav li a::after {
		position: absolute; left: inherit; bottom: calc(50% - 5px); right: 10px; width: 9px; height: 10px; background: url(../img/g_arrow.png)no-repeat center; background-size: contain; }
	#customer_header #gnav li a:hover::after { width: 9px; }
	#customer_header #gnav ul.sp li { border-bottom: 1px dashed #aaa; }
	#customer_header #gnav ul.sp li a { font-size: 14px; }
	#customer_header #gnav ul.sp li a::after { content: none; }
	#customer_header #gnav li+li { margin: 0; }
	#customer_header #gnav #bn_shop { position: relative;
		display: flex!important; align-items: center; margin: 6vw 0; font-size: 18px; color: #000;
		background: url(../img/g_cart.png)no-repeat center right 3vw #f5f3ec; background-size: 25px; }
	#customer_header #gnav #bn_shop img { width: 33%; }
	#customer_header #gnav #bn_shop span {
		position: absolute; left: 58%; transform: translateX(-50%); white-space: nowrap; }
	#customer_header #gnav .telarea { margin: 0 0 6vw; text-align: center; color: #000; }
	#customer_header #gnav .telarea a { display: flex; align-items: center; justify-content: center; font-size: 38px; color: #000; }
	#customer_header #gnav .telarea a::before {
		content: ''; background: url(../img/ico_tel.png)no-repeat center / 38%; width: 36px; height: 36px; display: inline-block; border: 1px solid; border-radius: 50%; margin-right: 10px; }
	#sp_reserve:hover,
	#customer_header #gnav #bn_shop:hover,
	#customer_header #gnav .telarea a:hover,
	#customer_header #gnav .close_menu:hover { text-decoration: none; }
	#customer_header #gnav #sp_sns { display: flex!important; align-items: center; justify-content: center; }
	#customer_header #gnav #sp_sns li { border: none; width: 131px; padding: 0 8vw; }
	#customer_header #gnav #sp_sns li+li { border-left: 1px solid; }
	#customer_header #gnav #sp_sns li a { padding: 0; text-align: center; }
	#customer_header #gnav #sp_sns li a img { height: 36px; }
	#customer_header #gnav #sp_sns+.close_menu { position: relative; padding: 20px 0 0; margin: 10vw 0 0; text-align: center; }
	#customer_header #gnav #sp_sns+.close_menu span:before,
	#customer_header #gnav #sp_sns+.close_menu span:after { width: 50px; top: 0; left: calc(50% - 25px); }
}

@media screen and (max-width: 440px)  {
	#customer_header #gnav #bn_shop { background-size: 18px; font-size: 16px; }
	#customer_header #gnav #bn_shop span{ left: 62%; }

  #customer_header #gnav .telarea a { font-size: 28px; }
}


/* SNS */
#customer_header #side_sns {
	display: flex; flex-direction: column; align-items: center; position: absolute; left: 0; top: calc(610px + 0.3%); z-index: 2; width: 60px; color: #000; font-size: 10px; text-align: center; vertical-align: middle; }
#customer_header #side_sns a { margin: 15px 0 0;}
#customer_header #side_sns a::before { content: ''; display: block; }
#customer_header #side_sns a:nth-of-type(1)::before {
	width: 11px; height: 24px; background: url(../img/side_fb.png) }
#customer_header #side_sns a:nth-of-type(2)::before {
	width: 20px; height: 20px; background: url(../img/side_insta.png) }
#customer_header #side_sns a::before,
#customer_header #side_sns a::after { transition: all .5s; }
#customer_header #side_sns a:hover::before,
#customer_header #side_sns a:hover::after { opacity: 0.5; }

@media screen and (max-width: 600px) {
	#customer_header #side_sns { display: none; }
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#customer_header .main_tit { padding-top: 80px;}
#customer_header .main_tit h1 { display: flex; align-items: center; height: 180px; padding: 0 10px; line-height: 1; font-size: 20px;}
#customer_header .main_tit h1.noimg { border-bottom: 1px solid #d4d4d4;}
#customer_header .main_tit .en { margin: 0 40px 0 0; text-transform: capitalize; font-size: 60px; letter-spacing: 10px;}
#customer_header .main_tit .ofi { width: 100%; height: 610px;}

@media screen and (max-width: 600px) {
  #customer_header .main_tit { width: 100%; padding-top: 0; font-size: 18px;}
  #customer_header .main_tit h1 { flex-direction: column; justify-content: center; height: 150px; padding: 0;}
  #customer_header .main_tit .en { margin: 0 0 15px; font-size: 36px; letter-spacing: 5px;}
  #customer_header .main_tit .ofi { height: auto;}
}


/* breadcrumb
------------------------------------------------------ */
#customer_footer #breadcrumb,
#customer_footer #breadcrumb li { display: flex;}
#customer_footer #breadcrumb { margin: 140px auto 10px; list-style: none; font-size: 16px;}
#customer_footer #breadcrumb li + li:before { content: '>'; margin: 0 15px;}

@media screen and (max-width: 600px) {
	#customer_footer #breadcrumb { display: none;}
}


/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
@-webkit-keyframes pagetop {
	0% { top: 0; bottom: auto; height: 15px;}
	10% { top: 0%; bottom: auto; height: 0px;}
	10.1% { top: auto; bottom: 0; height: 0px;}
	50% { top: auto; bottom: 0; height: 100%;}
	50.1% { top: 0; bottom: auto; height: 100%;}
	100% { top: 0; bottom: auto; height: 0;}
}
@-o-keyframes pagetop {
	0% { top: 0; bottom: auto; height: 15px;}
	10% { top: 0%; bottom: auto; height: 0px;}
	10.1% { top: auto; bottom: 0; height: 0px;}
	50% { top: auto; bottom: 0; height: 100%;}
	50.1% { top: 0; bottom: auto; height: 100%;}
	100% { top: 0; bottom: auto; height: 0;}
}
@-moz-keyframes pagetop {
	0% { top: 0; bottom: auto; height: 15px;}
	10% { top: 0%; bottom: auto; height: 0px;}
	10.1% { top: auto; bottom: 0; height: 0px;}
	50% { top: auto; bottom: 0; height: 100%;}
	50.1% { top: 0; bottom: auto; height: 100%;}
	100% { top: 0; bottom: auto; height: 0;}
}
@keyframes pagetop {
	0% { top: 0; bottom: auto; height: 15px;}
	10% { top: 0%; bottom: auto; height: 0px;}
	10.1% { top: auto; bottom: 0; height: 0px;}
	50% { top: auto; bottom: 0; height: 100%;}
	50.1% { top: 0; bottom: auto; height: 100%;}
	100% { top: 0; bottom: auto; height: 0;}
}

/* pagetop */
#customer_footer #pagetop { position: fixed; right: 16px; bottom: 55px; height: 55px; padding: 55px 0 0; box-sizing: border-box; z-index: 1; }
#customer_footer #pagetop::before,
#customer_footer #pagetop::after {
  content: ''; width: 1px; position: absolute; top: 0; left: calc(50% - 1px); transition: all .5s; }
#customer_footer #pagetop::before { height: 55px; background: #222; }
#customer_footer #pagetop::after { background: #fff; opacity: 0; }
#customer_footer #pagetop:hover { text-decoration: none;}
#customer_footer #pagetop:hover::after { -webkit-animation: pagetop 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
	animation: pagetop 1.2s cubic-bezier(0.77, 0, 0.175, 1) both; opacity: 1; }
#customer_footer #pagetop span { color: #222; font-size: 12px; letter-spacing: normal; transition: all .5s; }
#customer_footer #pagetop.txt_w::before { background: #fff; }
#customer_footer #pagetop.txt_w:hover::after { background: #242f47; }
#customer_footer #pagetop.txt_w span { color: #fff; }

#customer_footer #footer_wrap { padding: 60px 0 140px; background: #242f47; color: #e6e6e6;}
#customer_footer #footer {
	display: flex; flex-wrap: wrap;
	max-width: 1100px; width: 92%; margin: 0 auto; }
#customer_footer .f_contents {
	display: flex; justify-content: flex-end; position: relative; width: 100%; }
#customer_footer .f_contents a { color: #e6e6e6; }
#customer_footer .f_contents>ul li+li { margin-left: 30px; }
#customer_footer #f_logo {
	display: flex; flex-direction: column; justify-content: space-between;
	width: 17%; margin-right: 80px; }
#customer_footer #f_nav { display: flex; flex-wrap: wrap; }
#customer_footer #f_nav>div { display: flex; }
#customer_footer #f_nav ul:nth-of-type(2) { margin-left: 60px;}
#customer_footer #f_nav ul:not(:last-of-type) { padding: 10px 0 0; }
#customer_footer #f_nav ul:not(:last-of-type) li+li { margin-top: 30px; }
#customer_footer #f_nav a { font-size: 18px; color: #e6e6e6; }
#customer_footer #f_nav ul:last-of-type {
	display: flex; position: absolute; bottom: -100px; }
#customer_footer #f_nav ul:last-of-type li+li { margin-left: 30px; }
#customer_footer #f_nav ul:last-of-type a { font-size: 14px; }
#customer_footer #f_nav .acc_tit { display: none;}

#customer_footer #f_reserve { margin-left: auto; }
#customer_footer #f_reserve li:not(:nth-of-type(1)),
#customer_footer #f_reserve address { font-size: 14px; }
#customer_footer #f_reserve li:nth-of-type(1) { margin: 0 0 24px; }
#customer_footer #f_reserve li:nth-of-type(2) { margin: 0 0 10px; }
#customer_footer #f_reserve li:nth-of-type(3),
#customer_footer #f_reserve li:nth-of-type(4) { display: inline-block; }
#customer_footer #f_reserve li:last-of-type:before { content: '／'; margin: 0 10px 0 6px; }
#customer_footer #f_reserve a { color: #e6e6e6; }
#customer_footer #f_reserve .lr_link {
	width: 323px;
  padding: 13px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	font-size: 18px;
	color: #fff;
	z-index: 1;
}
#customer_footer #f_reserve .lr_link:hover { color: #242f47;}
#customer_footer #f_reserve .lr_link::before { background: #fff; }

#customer_footer #f_reserve address { margin: 50px 0 0; line-height: 2; }

#customer_footer #copyright {
  position: absolute; left: 0; bottom: -100px;
  font-size: 13px; /* color: #e6e6e6; */ /* font-family: 筑紫A丸ゴシック; */ }

@media screen and (max-width: 600px) {
  #customer_footer #pagetop { display: none!important; }

  #customer_footer #footer_wrap { padding: 7vw 0 80px; }
  #customer_footer .f_contents { flex-direction: column; }
  #customer_footer #f_logo { width: 100%; margin: 0 0 8vw; }
  #customer_footer #f_logo a { display: block; width: 140px; margin: 0 auto; }
  #customer_footer #f_nav .acc_tit {
    display: block; width: 100%; padding: 10px 15px; position: relative;
    text-align: center; background: rgba(255,255,255,0.2); }
  #customer_footer #f_nav .acc_tit::before {
    content: ''; width: 5px; height: 5px; position: absolute; right: 20px; top: 50%;
    border-left: 1px solid; border-bottom: 1px solid;
    -webkit-transform: translateY(-50%) rotate(-45deg);
    -ms-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg); transition: all .5s; }
  #customer_footer #f_nav .acc_tit.active::before {
    -webkit-transform: translateY(-50%) rotate(135deg);
    -ms-transform: translateY(-50%) rotate(135deg);
    transform: translateY(-50%) rotate(135deg); }
  #customer_footer #f_nav>div { flex-direction: column; width: 100%; padding: 0 4%; background: rgba(255,255,255,0.2); }
  #customer_footer #f_nav ul:not(:last-of-type) { margin: 0; padding: 0; }
  #customer_footer #f_nav ul { padding: 0 4%; }
  #customer_footer #f_nav ul:last-of-type { position: static; flex-direction: column; padding: 0 0 8vw; }
  #customer_footer #f_nav li,
  #customer_footer #f_nav ul:not(:last-of-type) li+li,
  #customer_footer #f_nav ul:last-of-type li+li { margin: 3vw 0 0; }
  #customer_footer #f_nav a { display: block; font-size: 14px; }
  #customer_footer #f_reserve { position: static; width: 100%; margin: 20px auto 0; }
  #customer_footer #f_reserve ul { text-align: center; }
  #customer_footer #f_reserve li:not(:first-of-type) a { text-decoration: underline; }
  #customer_footer #f_reserve .lr_link { width: 100%; }

  #customer_footer #f_reserve address { margin: 5vw 0 0; }
  #customer_footer #copyright { position: static; margin: 6vw 0 0; text-align: center; }
}


/* ---------------------------------------------------
	sp_nav
------------------------------------------------------ */

#customer_footer #sp_nav { display: none; }

@media screen and (max-width: 600px) {
	#customer_footer #sp_nav {
    display: -webkit-flex; display: -ms-flex; display: flex; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 101; border-top: 1px solid #ccc; letter-spacing: 0.5px; background: #fff;
	}
	#customer_footer #sp_nav ul { display: table; width: 100%; table-layout: fixed;}
	#customer_footer #sp_nav li { width: 20%; padding: 0 0 env(safe-area-inset-bottom); -webkit-box-sizing: border-box;
    box-sizing: border-box; }
	#customer_footer #sp_nav li:nth-of-type(3) { width: 40%; }
	#customer_footer #sp_nav li + li { border-left: 1px solid #ccc;}
	#customer_footer #sp_nav li:last-of-type { background: #214d8d; }
	#customer_footer #sp_nav #open_menu { color: #fff; }
	#customer_footer #sp_nav #open_menu::before {
		content: ''; display: block; width: 60%; height: 2px; margin: 0 auto; background: #fff; transition: transform .5s;
	}
	#customer_footer #sp_nav #open_menu span { display: block; width: 60%; margin: 0 auto 2vw; }
	#customer_footer #sp_nav #open_menu span::before,
	#customer_footer #sp_nav #open_menu span::after {
		content: ''; display: block; width: 100%; height: 2px; margin-top: 2vw; background: #fff; }
	#customer_footer #sp_nav a { display: block; height: 100%; padding: 10px 0 5px; font-size: 12px; text-align: center; color: #373737; }
	#customer_footer #sp_nav a img { display: block; height: 25px; margin: 0 auto 3px; }
	#sp_nav li:nth-child(3) a span {font-size: 10px; display: block;background: #7591b8;width: 110px; margin: 0 auto; color: #fff; border-radius: 30px;}
}




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



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