@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: 1100px; background: #fff; color: #000;}

#customer_header,
#customer_footer {
	font-size: 16px; font-weight: normal; line-height: 1.8;
	font-family: "NotoSerif", serif; color: #333;
	-webkit-text-size-adjust: 100%; letter-spacing: 0.1em; font-feature-settings: "palt";

	display: -webkit-flex; display: -ms-flex; display: flex;
	-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}

#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: #555; text-decoration: none;}
#customer_header a:hover,
#customer_footer a:hover { color: #555; 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%;}

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

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

	#customer_header .ver_pc,
	#customer_footer .ver_pc { display: none;}
	#customer_header .ver_sp,
	#customer_footer .ver_sp { display: inline;}
}

@media screen and (max-width: 600px) {
	#customer_header #header,
	#customer_footer #footer {
	    min-width: 0;
	}
	#customer_header *, #customer_footer * { line-height: 1.8;}
}


/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#customer_header #header_wrap { min-width: 1100px; position: absolute; background-color: rgba(255,255,255,0.85); box-shadow: 0 10px 15px -15px rgb(0 0 0 / 20%); width: 100%; z-index: 110;}
#customer_header #header { width: 100%; min-width: 1100px; margin: 0 auto; padding: 16px 2%; display: flex; box-sizing: border-box; color: #333}
#customer_header #header a { color: #333;}
#customer_header #header #logo { width: 120px;}

#customer_header .close_menu { display: none;}

#customer_header #header #gnav { display: flex; margin: 0 0 0 auto; width: 900px; justify-content: flex-end; align-items: center;}
#customer_header #header #gnav >ul { display: flex; width: calc(96% - 130px); margin: 0 auto 0 0; font-size: 16px; justify-content: flex-end;}
#customer_header #header #gnav >ul li { padding: 0 20px 0 0; white-space: nowrap;}
#customer_header #header #gnav >ul li:nth-last-of-type(1) { padding: 0;}
#customer_header #header #gnav >img { display: none;}
#customer_header #gn_home { display: none;}
#customer_header #lang { position: relative; font-size: 14px;padding: 0;}
#customer_header #lang_list { display: none; font-size: 14px;}
#customer_header #lang p { position: relative;padding: 2px 25px; }
#customer_header #lang p a:hover { text-decoration: none;}
#customer_header #lang p a+a { display: none;}
#customer_header:target #lang_list { display: block; }
#customer_header:target #lang p a+a { display: block; width: 100%; box-sizing: border-box; position: absolute; height: 100%; left: 0; top: 0;}
#customer_header #lang p { text-align: center; border: 1px solid #292929;}
#customer_header #lang p span { position: relative; padding: 0 0 0 10px;}
#customer_header #lang p span::before { content: "";
  display: block;
  position: absolute;
  top: 40%;
  left: 0;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top: 6px solid #393939;
  border-bottom-width: 0;
}
#customer_header #lang p:hover { opacity: 0.7;}
#customer_header #lang_list { display: none; width: 100%; position: absolute; border: 1px solid #888; box-sizing: border-box; border-top: none; background-color: #404040;}
#customer_header #lang_list li { border-top: 1px dotted #bfbfbf; text-align: center;}
#customer_header #lang_list li:nth-of-type(1) { border-top: none;}
#customer_header #lang_list li:hover { opacity: 0.8;}
#customer_header #lang_list li a { padding: 5px 0; display: block; background-color: #404040; color: #bfbfbf;}
#customer_header #lang_list li a:hover { text-decoration: none;}
#customer_header #pagetop { position: fixed; bottom: 30px; left: 10px; -webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
white-space: nowrap; font-size: 14px; vertical-align: middle; display: inline-flex; z-index: 100; color: #b09a6e; font-family: "Lato";}
#customer_header #pagetop a { display: block; margin: 0 auto; padding: 90px 0 0; color: #b09a6e;}
#customer_header #pagetop a:hover { text-decoration: none;}
#customer_header #pagetop a::after { content: ''; width: 1px; height: 80px;
	position: absolute; top: 0; left: 50%;
	background: #b09a6e;}
#customer_header #pagetop a::before {
content: ''; display: block; width: 1px; height: 15px;
background: #b60a5f; position: absolute; top: 65px; left: 50%; z-index: 101; opacity: 0;
}
#customer_header #pagetop a:hover { text-decoration: none;}
#customer_header #pagetop a:hover::before { -webkit-animation: top_ani 2s; animation: top_ani 2s;}

@-webkit-keyframes top_ani {
  0% { opacity: 1; }
  80% { top: -2px;}
  100% { top: -2px; opacity: 0;}
}
@keyframes top_ani {
  0% { opacity: 1; }
  80% { top: -2px;}
  100% { top: -2px; opacity: 0;}
}


@media screen and (max-width: 1100px) {
 #customer_header #header #logo { padding: 0 2% 0 0;}
 #customer_header #header #gnav { margin: 0 0 0 auto; font-size: 17px;}
 #customer_header #header #gnav >ul li { padding: 0 10px 0 0; white-space: inherit;}
 #customer_header #lang p{ margin: 0 0 0 auto; padding: 2px 10px;}
}

@media screen and (max-width: 600px) {
#customer_header #header_wrap { display: block; position: static; min-width: auto; z-index: 120;}
#customer_header #header { min-width: 100%; padding: 0;}
#customer_header #header #logo { display: table; margin: 0 auto; padding: 12px 0; position: absolute; z-index: 10; width: 100%; text-align: center; background: rgba(255,255,255,0.8);}
#customer_header #header #logo img { width: 95px;}

#customer_header #header #gnav >img { display: block;}
#customer_header #header #gnav >ul li a { display: block;}

	#customer_header #header_wrap #gnav { width: 100%; position: fixed; top: 0; left: 0; z-index: 10000; overflow: auto; background-color: #fff; pointer-events: none; -webkit-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s; height: 0;}
	#customer_header #header_wrap:target #gnav { pointer-events: auto; height: 100%;}
	#customer_header #header #gnav { display: none; width: 92%; padding: 0 4%; margin: 0 auto;}
	#customer_header #header #gnav { display: block;}
	#customer_header #header #gnav >img { display: block; margin: 0 auto; padding: 50px 0 0; width: 120px;}
	#customer_header #header #gnav >ul { display: block; width: auto; padding: 25px 0 0;}
	#customer_header #header #gnav >ul li:not(.close_menu) { position: relative; padding: 10px 0 10px 10px; border-bottom: 1px solid #d2d2d2;}
	#customer_header #header #gnav >ul li:not(.close_menu)::after { content: '';
  width: 5px;
  height: 5px;
  border: 0px;
  border-top: solid 1px #646464;
  border-right: solid 1px #646464;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -4px;}
	#customer_header #gn_home,#customer_header .close_menu { display: block;}
	#customer_header #gnav .close_menu { cursor: pointer;}
	#customer_header #gnav .close_menu span:before,
	#customer_header #gnav .close_menu span:after { content: ''; width: 45px; height: 1px; position: absolute; left: 0;}
	#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 #header #gnav >ul li#close_top { position: absolute; top: 5px; right: 60px; display: block; padding: 5px 0; text-align: center;}
	#customer_header #gnav #close_top span {
		width: 45px; height: 0; padding: 45px 0 0;
		position: absolute; overflow: hidden;
	}
	#customer_header #gnav #close_top span:before,
	#customer_header #gnav #close_top span:after { background: #787878; margin: -2px 0 0; top: 50%;}
	#customer_header #gnav #close_bot { display: block; color: #424242; text-align: center; font-size: 12px;}
	#customer_header #gnav #close_bot span { display: inline-block; padding: 45px 0 0; position: relative;}
	#customer_header #gnav #close_bot span::before,
	#customer_header #gnav #close_bot span::after { margin: 0 0 0 -21px; top: 25px; left: 50%; background-color: #ccc;}
	#customer_header #gnav #close_bot span::before,
	#customer_header #gnav #close_bot span::after {
		content: ''; width: 45px; height: 1px;
		position: absolute; background: #434343;
	}

	#customer_header #lang { margin: 20px 0 30px; padding: 0;}
	#customer_header #lang p { display: none;}
	#customer_header #lang_list { display: flex !important; flex-wrap: wrap; border: none; position: static; justify-content: space-between; background-color: inherit;}
	#customer_header #lang_list li { border: none; width: 49%; margin: 0 0 10px; background-color: #e5e5e5;}
	#customer_header #lang_list li a { background-color: inherit; padding: 10px 0; color: #484747;}
	#customer_header #pagetop { display: none;}
}

/* Main img
------------------------------------------------------ */
#customer_header #main_tit { height: 630px; background: url(https://storage.489ban.net/storage/customer/26/489ban/img/tit_bg.jpg)no-repeat center center; background-size: cover; background-repeat: no-repeat; background-size: cover; color: #fff; display: flex; align-items: center;}
#customer_header #main_tit h1 { width: 1400px; max-width: 90%; margin: 0 auto; padding: 40px 0 0; font-weight: 100;}
#customer_header #main_tit h1 span:nth-of-type(1) { font-size: 65px; display: block; font-family: "Lato"; color: rgba(255,255,255,0.6);}
#customer_header #main_tit h1 span:nth-of-type(2) { font-size: 20px; text-shadow: 0px 0px 12px rgba(0,0,0,0.2), 0px 0px 12px rgba(0,0,0,0.2), 0px 0px 12px rgba(0,0,0,0.2);}

@media screen and (max-width: 600px) {
	#customer_header #main_tit { position: relative; height: 300px;}
  #customer_header #main_tit::after { position: absolute; content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.15); z-index: 1;}
	#customer_header #main_tit h1 { line-height: 1;}
  #customer_header #main_tit h1 span { position: relative; z-index: 2;}
  #customer_header #main_tit h1 span:nth-of-type(1) { font-size: 30px;}
  #customer_header #main_tit h1 span:nth-of-type(2) { font-size: 16px;}
}


/* breadcrumb
------------------------------------------------------ */
#customer_header #breadcrumb { width: 1100px; max-width: 100%; margin: 5px auto 25px; 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 { display: none;}
}


/* ---------------------------------------------------
	footer
------------------------------------------------------ */
#customer_footer #footer_wrap { background-color: #1f1f1f;}
#customer_footer #footer { padding: 90px 0 0; color: #d8d7d7;}
#customer_footer #footer a { color: #d8d7d7;}
#customer_footer #f_logo { margin: 0 0 40px; text-align: center;}
#customer_footer #f_logo img { width: 220px;}
#customer_footer #footer address { margin: 40px 0 20px;}
#customer_footer #footer address+a { display: block; margin: 0 auto 10px; padding: 25px 0; width: 400px; color: #fff; text-align: center; background: #921857; background-size: cover;}
#customer_footer #footer address+a span { position: relative; padding: 0 30px 0 0;}
#customer_footer #footer address+a span::after { content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -4px;}
#customer_footer #footer address+a:hover { text-decoration: none; opacity: 0.7;}
#customer_footer #footer address+a+a { position: relative; display: table; margin: 0 auto; padding: 0 0 0 15px;}
#customer_footer #footer address+a+a::before { position: absolute; content: ''; display: block; top: 42%; left: 0; width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 10px;
border-color: transparent transparent transparent #8f8f8f;
}
#customer_footer #f_nav { width: 1100px; max-width: 92%; margin: 0 auto; border-top: 1px solid #3e3e3e;}
#customer_footer #f_nav div { display: flex; justify-content: space-between; font-size: 14px;}
#customer_footer #f_nav .acc_tit { display: none;}
#customer_footer #f_nav ul { margin: 45px 0 0 0;}
#customer_footer #f_nav li { position: relative; margin: 0 0 10px; padding: 0 0 0 20px;}
#customer_footer #f_nav li::before { position: absolute; content: ''; display: block; top: 42%; left: 0; width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 10px;
border-color: transparent transparent transparent #a6a6a6;}
#customer_footer p#copyright { margin: 60px 0 0; padding: 3px 0 5px; color: #fff; text-align: center; background-color: #000; font-size: 12px;}

#customer_footer #f_nav .sub { margin-bottom: 4px; }
#customer_footer #f_nav .sub::before { display: inline-block; content: '-'; margin-right: 0.5em; border: none; position: static; width: auto; height: auto; }

@media screen and (max-width: 600px) {
#customer_footer #footer { padding: 30px 0 70px;}
#customer_footer #footer address { margin: 30px 0 20px;}
#customer_footer #footer address .tel-link+span { display: block;}
#customer_footer #footer address .tel-link+span span { display: none;}
#customer_footer #footer address+a { width: 100%;}
#customer_footer #f_logo { padding: 0 4%;}
#customer_footer #f_logo >img { width: 140px;}
#customer_footer #f_nav .acc_tit {
		display: block; width: 100%; padding: 10px 25px; margin: 0 0 15px;
		position: relative; background-color: #575757; color: #fff; text-align: center;
		-webkit-box-sizing: border-box; box-sizing: border-box;
	}
	#customer_footer #f_nav .acc_tit:after {
		content: ''; width: 9px; height: 9px; margin: -4px 0 0 0;
		position: absolute; top: 50%; right: 10px;
		background: url(../img/f_arrow_off.png) no-repeat left top; background-size: 100%;
	}
	#customer_footer #f_nav .acc_tit.active:after { background-image: url(../img/f_arrow_on.png);}
	#customer_footer #f_nav div { margin: 20px 0 0; flex-wrap: wrap;}
	#customer_footer #f_nav ul { width: 50%; margin: 0;}
	#customer_footer #f_nav ul:last-of-type { width: 100%;}

	#customer_footer p#copyright { margin: 30px 0 0;}
}

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

#customer_footer #sp_nav { display: none;}

@media screen and (max-width: 600px) {
	#customer_footer #sp_nav { display: block; position: fixed; bottom: 0; left: 0; background: #fff; z-index: 110;}
	#customer_footer #sp_nav ul { display: table; width: 100%; table-layout: fixed;}
	#customer_footer #sp_nav li { display: table-cell; -webkit-box-sizing: border-box; box-sizing: border-box;}
	#customer_footer #sp_nav li:nth-of-type(2),
	#customer_footer #sp_nav li:nth-of-type(3),
	#customer_footer #sp_nav li:nth-of-type(4) { border-left: 1px solid #bdab84;}
	#customer_footer #sp_nav a,
	#customer_footer #sp_nav .tel-link { display: block; padding: 10px 0; text-align: center; font-size: 12px; color: #917948;}
	#customer_footer #sp_nav img { width: 26px;}
	#customer_footer #sp_nav li span { display: block; margin: 5px auto 0;}
	#customer_footer #sp_nav li:nth-of-type(1),
	#customer_footer #sp_nav li:nth-of-type(2) { background-color: #e6dfd0;}
	#customer_footer #sp_nav li:nth-of-type(3) { width: 40%; background-color: #991657;}
	#customer_footer #sp_nav li:nth-of-type(4) { background-color: #a7936b;}
	#customer_footer #sp_nav li:nth-of-type(3) a,
	#customer_footer #sp_nav li:nth-of-type(4) a { color: #fff;}
}


/* ---------------------------------------------------
	clear
------------------------------------------------------ */

#header:after,
#nav_wrap:after,
#gnav ul:after,
#contents_wrap:after,
#footer:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}


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



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