@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; min-height: 100vh; background: #fff;}

#customer_header,
#customer_footer {
	color: #333;
	font-size: 16px; font-weight: normal; line-height: 2.4;
	font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	-webkit-text-size-adjust: 100%; position: relative;
	font-feature-settings: "palt"; letter-spacing: 4px;
}

#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: #333; text-decoration: none; transition: opacity .5s;}
#customer_header a img,
#customer_footer a img { transition: opacity .5s;}

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

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

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

#customer_header .btn01,
#customer_footer .btn01 { position: relative; overflow: hidden; z-index: 1; background-color: #5e2b69; color: #fff; text-align: center;}
#customer_header a.btn01::after,
#customer_footer a.btn01::after { background: #42154c; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0, 1); transform-origin: left top; transition: .5s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1; }

#customer_header .btn02,
#customer_footer .btn02 { position: relative; overflow: hidden; z-index: 1; border: 1px solid #cdcdcd; text-align: center; position: relative; padding: 25px 0; display: block;}
#customer_header .btn02::before,
#customer_footer .btn02::before { position: absolute; right: 20px; top: 25px; content: ""; display: block; width: 38px; height: 38px; background: url(../img/link_arrow2.svg)no-repeat center center; background-color: #907a95; border-radius: 40px; background-size: 15px;}
#customer_header a.btn02::after,
#customer_footer a.btn02::after { background: #eee9ef; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0, 1); transform-origin: left top; transition: .5s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1;}

#customer_header div.best,
#customer_footer div.best { display: flex; align-items: center; justify-content: space-between; color: #521b5e; font-size: 18px;}
#customer_header div.best img,
#customer_footer div.best img { width: 100px; height: auto;}
#customer_header div.best p,
#customer_footer div.best p { letter-spacing: 2px; line-height: 1.5;}
#customer_header div.best span,
#customer_footer div.best span { display: block; font-size: 28px;}

#customer_header .reserve_link,
#customer_footer .reserve_link { margin: 20px 0 30px;}
#customer_header .reserve_link ul,
#customer_footer .reserve_link ul { margin: 0 0 30px;}
#customer_header .reserve_link li,
#customer_footer .reserve_link li { margin: 0 0 15px;}
#customer_header .reserve_link li a,
#customer_footer .reserve_link li a { position: relative; display: block; padding: 25px 0; color: #fff; text-align: center; background-color: #907a95; z-index: 1;}
#customer_header .reserve_link li a::before,
#customer_footer .reserve_link li a::before { position: absolute; right: 20px; top: 25px; content: ""; display: block; width: 38px; height: 38px; background: url(../img/link_arrow.svg)no-repeat center center; background-color: #fff; border-radius: 40px; background-size: 15px;}
#customer_header .reserve_link li:nth-of-type(1) a,
#customer_footer .reserve_link li:nth-of-type(1) a { background-color: #572662;}
#customer_header .reserve_link li:last-of-type,
#customer_footer .reserve_link li:last-of-type { margin: 0;}
#customer_header .reserve_link+a,
#customer_footer .reserve_link+a { display: table; margin: 0 auto; border-bottom: 1px solid #333;}
#customer_header .reserve_link li a::after,
#customer_footer .reserve_link li a::after { background: #714a7a; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0, 1); transform-origin: left top; transition: .5s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1; overflow: hidden;}
#customer_header .reserve_link li:nth-of-type(1) a::after,
#customer_footer .reserve_link li:nth-of-type(1) a::after { background: #42154c; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0, 1); transform-origin: left top; transition: .5s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1; }

@media screen and (hover: hover) {
	#customer_header a:hover,
	#customer_footer a:hover { text-decoration: none;}
	#customer_header a:hover img,
	#customer_footer a:hover img { opacity: 0.75;}
	#customer_header a.btn01:hover::after,
	#customer_footer a.btn01:hover::after { transform: scale(1, 1);}
	#customer_header a.btn02:hover::after,
	#customer_footer a.btn02:hover::after { transform: scale(1, 1);}

	#customer_header .reserve_link li a:hover::after,
	#customer_footer .reserve_link li a:hover::after { transform: scale(1, 1);}
}


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

	#customer_header,
	#customer_footer { line-height: 1.8;}

	#customer_header div.best,
	#customer_footer div.best { font-size: 14px; justify-content: normal;}
	#customer_header div.best img,
	#customer_footer div.best img { width: 66px; margin: 0 10px 0 0;}
	#customer_header div.best span,
	#customer_footer div.best span { font-size: 20px; line-height: 1.4;}

	#customer_header .reserve_link li a,
	#customer_footer .reserve_link li a { padding: 20px 0;}
	#customer_header .reserve_link li a::before,
	#customer_footer .reserve_link li a::before { width: 25px; height: 25px; background-size: 10px; top: calc(50% - 12px);}


	#customer_header .view_pc,
	#customer_footer .view_pc { display: none !important;}
	#customer_header .view_sp,
	#customer_footer .view_sp { display: inline !important;}
}


/* ---------------------------------------------------
	Link
------------------------------------------------------ */
#customer_header .link-run,
#customer_footer .link-run {
	position: relative;
	padding: 0 0 5px;
	color: inherit;
	text-decoration: none;
}
#customer_header .link-run::after,
#customer_footer .link-run::after {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 1px;
	content: "";
	background: currentcolor;
	transition: transform 0.5s;
	transform: scaleX(0);
	transform-origin: left center;
}

@media (hover: hover) {
	#customer_header .link-run:hover,
	#customer_footer .link-run:hover {
		opacity: 1;
	}
	#customer_header .link-run:hover::after,
	#customer_footer .link-run:hover::after {
		transform: scaleX(1);
	}
}


/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#customer_header #g_header {
	/* position: absolute;
	top: -80px; */
	width: 100%;
	min-width: auto;
	/* animation: h-show 0.5s; */
	background-color: #fff;
}
#customer_header #g_header.fixed {
	position: fixed;
	top: 0;
	color: #000;
	animation: h-fixed 1.2s;
}

@media screen and (min-width: 600px) {
	#customer_header #g_header.top {
		top: -80px;
		left: 0 !important;
		animation: h-top 1.2s;
	}
}

#customer_header #g_header .hd_inner { display: flex; align-items: center;}
#customer_header #g_header .hd_h1 { margin: 0 0 0 15px;}
#customer_header #g_header .hd_menu { box-sizing: border-box; cursor: pointer; z-index: 1000; height: 80px; width: 40px; display: flex; margin: 0 15px 0 0; padding: 0 10px 0 0; position: relative; align-items: center;}

#customer_header #g_header .open_menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
		-ms-flex-direction: column;
			flex-direction: column;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
	width: 30px;
  }

  #customer_header #g_header .open_menu::before, #customer_header #g_header .open_menu > span::before, #customer_header #g_header .open_menu > span::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin-bottom: 9px;
	background-color: #000;
	-webkit-transition: opacity 0.5s, background-color 0.5s, -webkit-transform 0.5s;
	transition: opacity 0.5s, background-color 0.5s, -webkit-transform 0.5s;
	transition: transform 0.5s, opacity 0.5s, background-color 0.5s;
	transition: transform 0.5s, opacity 0.5s, background-color 0.5s, -webkit-transform 0.5s;
  }
  #customer_header #g_header .open_menu > span {
	position: relative;
	line-height: 1;
	font-size: 0;
	width: 100%;
  }
  #customer_header #g_header .open_menu > span::after {
	margin: 0 0 0 auto;
	-webkit-transition: width 0.5s, -webkit-transform 0.5s;
	transition: width 0.5s, -webkit-transform 0.5s;
	transition: transform 0.5s, width 0.5s;
	transition: transform 0.5s, width 0.5s, -webkit-transform 0.5s;
  }
  #customer_header #g_header .open_menu > span span {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
  }


#customer_header #g_header.fixed .hd_menu a > .bar::after{ background: #000;}
#customer_header #g_header .hd_menu a > .bar:nth-of-type(1) { top: 16px;}
#customer_header #g_header .hd_menu a > .bar:nth-of-type(2) { top: 24px;}
#customer_header #g_header .hd_menu a > .bar:nth-of-type(3) { top: 32px;}
#customer_header #g_header .h_nav { display: flex; margin: 0 0 0 auto; align-items: center;}
#customer_header #g_header .h_nav li { margin: 0 20px 0 0;}
#customer_header #g_header .h_nav+a { display: flex; justify-content: center; align-items: center; width: 220px; height: 50px; margin: 0 30px 0 0;}

#customer_header #g_header #open_menu { opacity: 1; pointer-events: auto;}
#customer_header #g_header #close_menu { pointer-events: none; opacity: 0; }
#customer_header #g_header #open_menu,
#customer_header #g_header #close_menu { display: block; width: 30px; position: absolute;}
#customer_header #g_header #side_menu:target #open_menu { opacity: 0; pointer-events: none; }
#customer_header #g_header #side_menu:target #close_menu { pointer-events: auto; opacity: 1; z-index: 100; position: fixed;}

#customer_header #g_header #side_menu:target .open_menu {
	width: 30px;
  }
  #customer_header #g_header #side_menu:target .open_menu::before,
  #customer_header #g_header #side_menu:target .open_menu > span::before,
  #customer_header #g_header #side_menu:target .open_menu > span::after {
	background-color: #2c2422;
  }
  #customer_header #g_header #side_menu:target .open_menu::before {
	-webkit-transform: rotate(45deg) translate(7px, 7px);
			transform: rotate(45deg) translate(7px, 7px);
  }
  #customer_header #g_header #side_menu:target span::before {
	-webkit-transform: scaleX(0);
			transform: scaleX(0);
  }
  #customer_header #g_header #side_menu:target span::after {
	width: 100%;
	-webkit-transform: rotate(-45deg) translate(7px, -7px);
			transform: rotate(-45deg) translate(7px, -7px);
  }
  #customer_header #g_header #gnav_wrap { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9; overflow: scroll; transition: opacity .5s linear; background-color: rgba(0 0 0 /50%); }
  #customer_header #g_header #side_menu:target #gnav_wrap { pointer-events: auto; opacity: 1;}

  #customer_header #g_header #gnav {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	min-height: 100vh;
    width: calc(410px + 10%);
	height: 100%;
	overflow: auto;
	background: #fff;
	transition: opacity 0.5s;
	padding: 85px 5% 60px;
    box-sizing: border-box;
}
#customer_header #g_header #gnav > img { display: table; margin: 0 auto 30px;}

#customer_header #g_header #gnav_list { display: flex; justify-content: space-between; width: 80%; margin: 0 auto 30px; font-size: 18px;}
#customer_header #g_header #gnav_list li { margin: 0 0 10px;}


/* breadcrumb */
#customer_header #breadcrumb { position: relative; left: -50px; display: table; padding: 0 60px 0 90px; background-color: #282828; color: #fff; transform: skewX(230deg);}
#customer_header #breadcrumb a { color: #fff;}
#customer_header #breadcrumb ol { transform: skewX(-230deg);}
#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: 600px) {
	#customer_header #g_header { display: none;}
	#customer_header #breadcrumb { font-size: 14px; line-height: 1.8;}
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#customer_header #main_img { text-align: center;}
#customer_header #main_img img { width: 100%; height: 800px;}
#customer_header #main_img h1 { margin: 90px 0 50px; display: inline-block; writing-mode: vertical-rl; font-feature-settings: initial; font-size: 32px; color: #6f4b78;}

#customer_header .lead_col { margin: 100px auto 130px;}
#customer_header .lead_col h2 { margin: 0 0 80px; font-size: 28px; color: #521b5e;}
#customer_header .lead_col p:nth-of-type(n+2) { padding: 20px 0 0;}

@media screen and (max-width: 600px) {
	#customer_header #main_img img { height: 90vw;}
	#customer_header #main_img h1 { margin: 60px auto 100px; font-size: 24px;}
	#customer_header .lead_col { margin: 60px auto 70px;}
	#customer_header .lead_col h2 {  margin: 0 0 20px; font-size: 20px; line-height: 2;}
}


/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#customer_footer > img.ofi { width: 100%; height: 725px;}
#customer_footer #footer { display: flex;}
#customer_footer #f_logo { display: flex; justify-content: flex-end; margin: -100px 0 0; padding: 100px 0 0; width: 53%; background: url(../img/f_bg.gif); color: #fff;}
#customer_footer #f_logo >div { width: 650px; margin: 0 0 0 4%; padding: 0 80px 0 0;}
#customer_footer #f_logo address { margin: 60px 0 15px; line-height: 2.4;}
#customer_footer #f_logo address p { margin: 0 0 10px;}
#customer_footer #f_logo address+ul { display: flex; margin: 0 0 70px;}
#customer_footer #f_logo address+ul li { margin: 0 20px 0 0;}
#customer_footer #f_logo dl { margin: 0 0 30px;}
#customer_footer #f_logo dl dt { margin: 0 0 10px; color: #b3b3b3; font-weight: normal; line-height: 1.8;}
#customer_footer #f_logo dl dd { line-height: 1.8;}
#customer_footer #f_logo dl dd ul { display: flex; justify-content: space-between;}
#customer_footer #f_logo dl dd ul li { width: 49%;}
#customer_footer #f_logo dl dd ul li a { display: flex; align-items: center; width: 100%; height: 55px; padding: 0 0 0 10px; background-color: #353433; border-left: 5px solid #b3b1b1; box-sizing: border-box;}
#customer_footer #f_logo dl dd ul li a span { position: relative; padding: 0 10px; color: #b3b1b1; font-size: 13px; letter-spacing: 1px;}
#customer_footer #f_logo dl dd ul li a span::after { content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 5px;
	height: 5px;
	border-top: 1px solid #b3b1b1;
	border-right: 1px solid #b3b1b1;
	transform: rotate(45deg);}


#customer_footer #f_nav { padding: 100px 0 0; width: 47%;}
#customer_footer #f_nav >div { padding: 0 4% 0 100px; width: 540px; max-width: 100%; box-sizing: border-box;}
#customer_footer #f_nav .fnav { display: flex; justify-content: space-between; margin: 0 0 70px;}
#customer_footer #f_nav .fnav ul { width: 50%;}
#customer_footer #f_nav .fnav ul li { margin: 0 0 25px;}
#customer_footer #f_nav .fnav ul li:last-of-type { margin: 0;}
#customer_footer #copyright { margin: 20px 0 40px; font-size: 14px; text-align: center;}

@media screen and (max-width: 600px) {
	#customer_footer #footer { display: block;}
	#customer_footer > img.ofi { height: 60vw;}
	#customer_footer #f_logo { position: relative; width: 92%; padding: 40px 0 0; margin: -40px 0 0;}
	#customer_footer #f_logo >div { width: 100%; margin: 0; padding: 0 8% 40px;}
	#customer_footer #f_logo >div >img { width: 170px; height: auto;}
	#customer_footer #f_logo address { margin: 25px 0 15px;}
	#customer_footer #f_logo address p { margin: 0;}
	#customer_footer #f_logo address+ul { margin: 0 0 45px;}
	#customer_footer #f_logo address+ul li { margin: 0 10px 0 0;}
	#customer_footer #f_logo dl { margin: 0 0 10px;}
	#customer_footer #f_logo dl dt { margin: 0 0 5px;}
	#customer_footer #f_logo dl dd .tel-link { color: #fff;}
	#customer_footer #f_logo dl dd ul { display: block;}
	#customer_footer #f_logo dl dd ul li { width: 100%;}
	#customer_footer #f_logo dl dd ul li:nth-of-type(1) { margin: 0 0 15px;}
	#customer_footer #f_nav { width: 100%; padding: 30px 0 75px;}
	#customer_footer #f_nav .fnav { display: none;}
	#customer_footer #f_nav >div { width: 80%; margin: 0 auto; padding: 0;}
	#customer_footer #copyright { margin: 20px 0 10px;}
	
}




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

#customer_footer #sp_nav { display: none;}

@media screen and (max-width: 600px) {
	#customer_footer #sp_nav { display: block; width: 100%; position: fixed; bottom: 60px; left: 0; background: #fff; z-index: 100; transform: translateY(100%); transition: .3s;}
	#customer_footer #sp_nav.active{ transform: translate(0);}
	#customer_footer #sp_nav #sp_nav_flex,
	#customer_footer #sp_nav #sp_nav_flex > li > a { display: flex; width: 100%;}
	#customer_footer #sp_nav #sp_nav_flex > li { width: 20.5%; padding-bottom: env(safe-area-inset-bottom);}
	#customer_footer #sp_nav #sp_nav_flex > li + li { border-left: 1px solid #555;}
	#customer_footer #sp_nav #sp_nav_flex > li > a {
		flex-direction: column; align-items: center; justify-content: center;
		padding: 10px 0 0; color: #333; font-size: 12px; letter-spacing: 1px;
	}
	#customer_footer #sp_nav #sp_nav_flex > li:nth-of-type(1) img { width: 14px; padding: 0 0 5px;}
	#customer_footer #sp_nav #sp_nav_flex > li:nth-of-type(2) img { width: 20px; padding: 0 0 6px;}
	#customer_footer #sp_nav #sp_nav_flex > li:nth-of-type(3) { width: 33%; background-color: #5e2b69;}
	#customer_footer #sp_nav #sp_nav_flex > li:nth-of-type(3) a { color: #fff;}
	#customer_footer #sp_nav #sp_nav_flex > li:nth-of-type(4) { width: 26%; background-color: #eee9ef;}
	#customer_footer #sp_nav #sp_nav_flex > li a:hover { text-decoration: none;}
	#customer_footer #sp_nav #sp_nav_flex > li img { width: 27px; margin: 0 0 3px; opacity: 1;}
	#customer_footer #sp_nav .hd_menu { height: 100%; position: relative;}

	#customer_footer #sp_nav .open_menu#open_menu2 { opacity: 1; pointer-events: auto;}
	#customer_footer #sp_nav .open_menu#close_menu2 { pointer-events: none; opacity: 0; }
	#customer_footer #sp_nav .hd_menu > .open_menu {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
			-ms-flex-direction: column;
				flex-direction: column;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
		-webkit-box-pack: center;
			-ms-flex-pack: center;
				justify-content: center;
		-webkit-box-sizing: border-box;
				box-sizing: border-box;
		-webkit-transition: background-color 0.5s;
		transition: background-color 0.5s;
		width: 100%;
		height: 100%;
		position: absolute;
		padding: 12px 0 0;
	  }
	
	  #customer_footer #sp_nav .open_menu::before,
	  #customer_footer #sp_nav .open_menu > span::before,
	  #customer_footer #sp_nav .open_menu > span::after {
		content: "";
		display: block;
		width: 30px;
		height: 1px;
		margin-bottom: 9px;
		background-color: #521b5e;
		-webkit-transition: opacity 0.5s, background-color 0.5s, -webkit-transform 0.5s;
		transition: opacity 0.5s, background-color 0.5s, -webkit-transform 0.5s;
		transition: transform 0.5s, opacity 0.5s, background-color 0.5s;
		transition: transform 0.5s, opacity 0.5s, background-color 0.5s, -webkit-transform 0.5s;
	  }
	  #customer_footer #sp_nav .open_menu > span {
		position: relative;
		line-height: 1;
		font-size: 0;
		width: 30px;
	  }
	  #customer_footer #sp_nav .open_menu > span::after {
		margin: 0 0 0 auto;
		-webkit-transition: width 0.5s, -webkit-transform 0.5s;
		transition: width 0.5s, -webkit-transform 0.5s;
		transition: transform 0.5s, width 0.5s;
		transition: transform 0.5s, width 0.5s, -webkit-transform 0.5s;
	  }
	  #customer_footer #sp_nav .open_menu > span span {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
	  }
	  #customer_footer #sp_nav .open_menu p { color: #521b5e; padding: 5px 0 0; font-size: 12px; letter-spacing: 1px;}

	  #customer_footer #side_menu2:target #open_menu2 { opacity: 0; pointer-events: none; }
	  #customer_footer #side_menu2:target #close_menu2 { pointer-events: auto; opacity: 1; z-index: 100;}

	  #customer_footer #gnav_wrap_sp { opacity: 0; pointer-events: none; width: 100%; height: 100vh; position: fixed; top: -100vh; left: 0; z-index: 9; overflow: scroll; transition: opacity .5s linear; background-color: rgba(0 0 0 / 50%);}
	  #customer_footer #side_menu2:target #gnav_wrap_sp { pointer-events: all; opacity: 1;}
	  #customer_footer #side_menu2:target #gnav_wrap_sp #gnav_sp { position: fixed; top: calc(-100vh + 60px); right: 0; z-index: 10; width: 100%; max-width: 594px; height: calc(100vh - 60px); box-sizing: border-box; min-height: auto; padding: 60px 10% 50px; overflow: auto; background: #fff; transition: opacity 0.5s;}
	  
	  #customer_footer #side_menu2:target .open_menu::before,
	  #customer_footer #side_menu2:target .open_menu > span::before,
	  #customer_footer #side_menu2:target .open_menu > span::after {
		background-color: #521b5e;
	  }
	  #customer_footer #side_menu2:target .open_menu::before {
		-webkit-transform: rotate(45deg) translate(7px, 7px);
				transform: rotate(45deg) translate(7px, 7px);
	  }
	  #customer_footer #side_menu2:target .open_menu > span::before {
		-webkit-transform: scaleX(0);
				transform: scaleX(0);
	  }
	  #customer_footer #side_menu2:target .open_menu > span::after {
		width: 100%;
		-webkit-transform: rotate(-45deg) translate(7px, -7px);
				transform: rotate(-45deg) translate(7px, -7px);
	  }

		/* #customer_footer #sp_nav .open_menu */
		#customer_footer #sp_nav #gnav_sp #close_top_sp { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;}
		#customer_footer #sp_nav #gnav_sp #close_top_sp::before,
		#customer_footer #sp_nav #gnav_sp #close_top_sp::after { content: ''; width: 30px; height: 1px; background: #000; display: block;}
		#customer_footer #sp_nav #gnav_sp #close_top_sp::before { transform: rotate(-45deg);}
		#customer_footer #sp_nav #gnav_sp #close_top_sp::after { margin: -1px 0 0; transform: rotate(45deg);}
		#customer_footer #sp_nav #gnav_sp #close_top_sp { width: 50px; height: 50px; padding: 0; position: absolute; top: 40px; right: 20px; font-size: 0;}
		#customer_footer #sp_nav #gnav_sp #close_top_sp { width: auto;}


		#gnav_list_sp { display: block; width: 100%; font-size: 16px; margin: 0 0 30px;}
		#gnav_list_sp li { margin: 0 0 10px;}
		#customer_footer #sp_nav #gnav_sp > img { margin: 0 0 30px !important; width: 160px !important;}
		#customer_footer #sp_nav #sp_nav_flex > li .best img { width: 66px; margin: 0 10px 0 0;}


	  
}



/* 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;} */


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



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