@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap');

#customer_header,
#customer_footer{ min-width: 1100px; background: #fff; color: #000; font-size: 15px; font-weight: 500; line-height: 1.6; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; -webkit-text-size-adjust: 100%; }


#customer_header header,
#customer_header nav,
#customer_footer footer,
#customer_header section,
#customer_footer section,
#customer_header div,
#customer_footer div,
#customer_header p,
#customer_footer p,
#customer_header ul,
#customer_footer ul,
#customer_header ol,
#customer_footer ol,
#customer_header li,
#customer_footer li,
#customer_header dl,
#customer_footer dl,
#customer_header dt,
#customer_footer dt,
#customer_header dd,
#customer_footer dd,
#customer_header span,
#customer_footer span,
#customer_header em,
#customer_footer em,
#customer_header strong,
#customer_footer strong,
#customer_header a,
#customer_footer a { box-sizing: border-box;}

#customer_header a,
#customer_footer a { color: #000; text-decoration: underline;}
#customer_header a img,
#customer_footer a img { transition: opacity .5s;}

.ofi { object-fit: cover;}
.br_sp,
.view_sp { display: none;}
.en { font-family: 'Quicksand', sans-serif;}

@media screen and (hover: hover) and (min-width: 601px) {
	#customer_header a:hover,
	#customer_footer a:hover { text-decoration: none;}
	#customer_header a:hover img,
	#customer_footer a:hover img { opacity: 0.75;}
}
@media screen and (max-width: 600px) {
#customer_header,
#customer_footer { min-width: 0;}

	.br_sp,
	span.view_sp { display: inline;}
	.view_sp { display: block;}
	.br_pc,
	.view_pc { display: none !important;}
}


/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
/* コンテンツ幅 */
.inner_md { width: 1100px; max-width: 90%; margin: 0 auto;}


/* ボタン */
#customer_footer .cmn_btn { display: flex; align-items: center; justify-content: center; background: #000; border: 1px solid #000; color: #fff; text-decoration: none; transition: background .5s, color .5s;}
#customer_footer .cmn_btn::after { content: '>'; margin: 0 0 0 -1em; opacity: 0; transition: margin .5s, opacity .5s, transform .5s;}

@media screen and (hover: hover) and (min-width: 601px) {
	#customer_footer .cmn_btn:hover { background: #fff; color: #000;}
	#customer_footer .cmn_btn:hover::after { margin: 0 0 0 15px; opacity: 1; transform: translateX(0);}
}



/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#customer_header #g_header { display: flex; width: 100%; height: 70px; position: fixed; left: 0; top: 0; z-index: 998; background: #fff; color: #000;}
#customer_header #g_header a { color: #000; transition: color .5s;}
#customer_header #g_header a img { opacity: 1;}
#customer_header #g_header .hd_logo { align-self: center; margin: 0 0 0 25px; position: relative; transition: opacity .5s;}
#customer_header #g_header .hd_nav { display: flex; margin: 0 84px 0 auto;}
#customer_header #g_header .hd_nav li,
#customer_header #g_header .hd_nav a { display: flex; align-items: center; justify-content: center;}
#customer_header #g_header .hd_nav a { text-decoration: none;}
#customer_header #g_header .hd_nav .hd_inq { padding: 0 25px;}
#customer_header #g_header .hd_nav .hd_inq a { position: relative; color: #000;}
#customer_header #g_header .hd_nav .hd_inq a img { margin: 0 8px 0 0; transition: opacity .5s;}
#customer_header #g_header .hd_nav .hd_btn a { width: 185px; height: 100%; background: #7a6848; color: #fff; font-size: 20px; transition: background .5s;}

@media screen and (hover: hover) and (min-width: 601px) {
	#customer_header #g_header .hd_logo:hover { opacity: .5;}
	#customer_header #g_header .hd_nav li:not(.btn) a:hover { text-decoration: underline;}
	#customer_header #g_header .hd_nav .hd_btn a:hover { background: #675637; text-decoration: none !important;}
}
@media screen and (max-width: 600px) {
	#customer_header #g_header { min-width: 0; height: 50px;}
	#customer_header #g_header .hd_logo { margin-left: 10px;}
	#customer_header #g_header .hd_logo img { width: 70px;}
	#customer_header #g_header .hd_nav { margin: 0 60px 0 auto;}
	#customer_header #g_header .hd_nav .hd_inq { padding: 0 10px;}
	#customer_header #g_header .hd_nav .hd_inq a img { margin: 0;}
	#customer_header #g_header .hd_nav .hd_btn a { width: 80px; font-size: 14px;}
}


/* ---------------------------------------------------
	MENU
------------------------------------------------------ */
#customer_header .hd_menu { box-sizing: border-box; cursor: pointer; position: fixed; z-index: 998; top: 0; right: 0; height: 70px; width: 84px; background: #998e7a; display: block;}
#customer_header .hd_menu a{ width: 100%; height:100%; display: block;}
#customer_header .hd_menu .bar{ transition: all 0.3s; box-sizing: border-box; position: absolute; height: 1px; width: 50px; text-indent: 100%; white-space: nowrap; overflow: hidden; z-index: 2; transform-origin: center center; right: 18px;}
#customer_header .hd_menu .bar::after{ content: ""; height: 1px; width: 50px; display: block; background: #fff; position: absolute; top: 0; left: 0;}
#customer_header .hd_menu .bar:nth-of-type(1) { top: 22px;}
#customer_header .hd_menu .bar:nth-of-type(2) { top: 32px;}
#customer_header .hd_menu .bar:nth-of-type(3) { top: 42px; width: 30px;}
#customer_header .hd_menu:hover .bar:nth-of-type(3) { width: 50px;}

@media screen and (max-width: 600px) {
	#customer_header .hd_menu { height: 50px; width: 60px;}
	#customer_header .hd_menu .bar{ transition: all 0.3s; box-sizing: border-box; position: absolute; height: 1px; width: 40px; text-indent: 100%; white-space: nowrap; overflow: hidden; z-i: 2; transform-origin: center center; right: 10px;}
	#customer_header .hd_menu .bar::after{ content: ""; height: 1px; width: 40px; display: block; background: #fff; position: absolute; top: 0; left: 0;}
	#customer_header .hd_menu .bar:nth-of-type(1) { top: 14px;}
	#customer_header .hd_menu .bar:nth-of-type(2) { top: 24px;}
	#customer_header .hd_menu .bar:nth-of-type(3) { top: 34px; width: 30px;}
	#customer_header .hd_menu:hover .bar:nth-of-type(3) { width: 40px;}
}


/* ---------------------------------------------------
	Global Navigation
------------------------------------------------------ */
#customer_header #gnav { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; transition: all 0.5s; display: block; z-index: 999;}
#gnav:not(:target) { opacity: 0; visibility: hidden;}
#gnav:target { opacity: 1; visibility: visible;}
#customer_header #gnav .gn_inner{ width: 380px; height: 100%; padding: 100px 0 50px; background-color: #fff; overflow-y: auto; position: absolute; top: 0; right: -380px; z-index: 2; transition: all 0.5s;}
#customer_header #gnav.on .gn_inner{ right: 0;}
#customer_header #gnav:target .gn_inner{ right: 0;}
#sideclose { box-sizing: border-box; cursor: pointer; position: fixed; z-index: 1000; top: 0; right: 0; height: 70px; width: 84px; background: #998e7a; display: block;}
#sideclose a{ color: #fff; display: block; width: 100%; height: 100%; }
#sideclose .bar{ transition: all 0.3s; box-sizing: border-box; position: absolute; height: 1px; width: 40px; text-indent: 100%; white-space: nowrap; overflow: hidden; z-index: 2; transform-origin: center center; right: 22px;}
#sideclose .bar::after{ content: ""; height: 1px; width: 40px; display: block; background: #fff; position: absolute; top: 0; left: 0;}
#sideclose .bar:nth-of-type(1) { transform: rotate(45deg); top: 30px; }
#sideclose .bar:nth-of-type(2) { transform: rotate(-45deg); top: 30px; }
#sideclose .close{ text-align: center; color: #fff; font-size: 11px; line-height: 1; letter-spacing: 0.1em; position: absolute; top: 50px; left: 0; width: 100%; transition: opacity 0.5s; text-shadow: none; opacity: 1; font-weight: normal;}
#customer_header #gnav .gn_txt_01{ text-align: center; font-size: 12px; line-height: 1.4;}
#customer_header #gnav .gn_logo{ width: 120px; margin: 10px auto 20px;}
#customer_header #gnav .gn_logo img{ width: 100%; height: auto;}
#customer_header #gnav .gn_btns_01{ width: 100%; padding: 0 50px 20px; list-style-type: none;}
#customer_header #gnav .gn_btns_01 li{ font-size: 17px; line-height: 1.4; margin: 5px 0;}
#customer_header #gnav .gn_btns_01 li a{ display: block; text-decoration: none; position: relative; padding: 8px 0 8px 20px;}
#customer_header #gnav .gn_btns_01 li a::before{ content: ""; display: block; width: 8px; height: 1px; background: #7f7f7f; position: absolute; top: 18px; left: 0;}
#customer_header #gnav .gn_btns_01 li a:hover{ text-decoration: underline;}
#customer_header #gnav .gn_btns_02{ border-top: solid 1px #ccc; width: 100%; padding: 30px 50px 20px; display: flex; justify-content: space-between; flex-wrap: wrap; list-style-type: none;}
#customer_header #gnav .gn_btns_02 li{ width: 60%; font-size: 14px; line-height: 1.4; margin: 0 0 10px;}
#customer_header #gnav .gn_btns_02 li:nth-child(2n){ width: 40%; text-align: right;}
#customer_header #gnav .gn_btns_02 li.gn_12{ width: 100%;}
#customer_header #gnav .gn_btns_02 li a{ text-decoration: none; position: relative; padding: 5px 0 5px 1.3em;}
#customer_header #gnav .gn_btns_02 li a::before{ content: "＞"; position: absolute; top: 3px; left: 0;}
#customer_header #gnav .gn_btns_02 li a:hover{ text-decoration: underline;}
#customer_header #gnav .gn_btn_01{ width: 280px; margin: 0 auto;}
#customer_header #gnav .gn_btn_01 a{ display: block; background: #7a6848; color: #fff; padding: 20px 0; font-size: 16px; line-height: 1; text-align: center; border-radius: 5px; text-decoration: none; transition: all 0.5s;}
#customer_header #gnav .gn_btn_01 a:hover{ text-decoration: none; background: #675637;}
#customer_header #gnav .gn_close{ display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1; position: fixed; top: 0; left: 0; text-indent: 100%; white-space: nowrap; overflow: hidden;}
#customer_header #gnav .gn_close a{ width: 100%; height:100%; display: block;}

@media screen and (max-width: 600px) {
	#customer_header #gnav .gn_inner{ width: 100%; padding: 70px 0 30px; right: -100%;}
	#sideclose { height: 50px; width: 60px;}
	#sideclose .bar{ width: 30px; right: 16px;}
	#sideclose .bar::after{ width: 30px;}
	#sideclose .bar:nth-of-type(1) { top: 20px; }
	#sideclose .bar:nth-of-type(2) { top: 20px; }
	#sideclose .close{ top: 36px;}
	#customer_header #gnav .gn_btns_01{ padding: 0 40px 20px;}
	#customer_header #gnav .gn_btns_01 li{ margin: 0;}
	#customer_header #gnav .gn_btns_02{ padding: 30px 40px 20px;}
	#customer_header #gnav .gn_btn_01{ width: calc( 100% - 80px );}
}


/* ---------------------------------------------------
	Main Title
------------------------------------------------------ */
.main_tit{ position: relative; padding: 90px 0 0;}
.main_tit .tit{ position: absolute; bottom: 30px; left: 30px; z-index: 2; color: #fff; display: flex; align-items: baseline;}
.main_tit .tit::before{ content: ""; display: block; width: 150px; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0; transform: rotate(-45deg); transform-origin: left bottom;}
.main_tit .tit span{ display: block; line-height: 1.4;}
.main_tit .tit .en{ font-size: 48px; font-weight: 300; padding: 0 0 0 100px;}
.main_tit .tit .ja{ font-size: 22px; padding: 0 0 0 2em;}
.main_tit .img{ width: 100%; height: auto; position: relative; z-index: 1;}

@media screen and (max-width: 600px) {
.main_tit{ position: relative; padding: 60px 0 0;}
.main_tit .tit{ position: absolute; bottom: 15px; left: 15px; z-index: 2; color: #fff; display: flex; align-items: baseline; flex-direction: column;}
.main_tit .tit::before{ content: ""; display: block; width: 80px; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0; transform: rotate(-45deg); transform-origin: left bottom;}
.main_tit .tit span{ display: block; line-height: 1.4;}
.main_tit .tit .en{ font-size: 24px; font-weight: 300; padding: 0 0 0 60px;}
.main_tit .tit .ja{ font-size: 16px; padding: 0 0 0 60px;}
.main_tit .img{ width: 100%; height: 200px; position: relative; z-index: 1;}
}



/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#customer_footer #g_footer { padding: 110px 4% 65px; border-top: 1px solid #b7b5b1; text-align: center;}
#customer_footer #g_footer p { font-size: 15px; line-height: 1.4;}
#customer_footer #g_footer .ft_logo{ width: 167px; margin: 0 auto;}
#customer_footer #g_footer .ft_logo img{ width: 100%; height: auto;}
#customer_footer #g_footer .ft_addr{ padding: 40px 0 5px;}
#customer_footer #g_footer .ft_check{ display: flex; justify-content: center; padding: 0 0 20px;}
#customer_footer #g_footer .ft_check dl{ display: flex; justify-content: center; margin: 0 10px;}
#customer_footer #g_footer .ft_check dt,
#customer_footer #g_footer .ft_check dd{ padding: 0 5px; font-weight: normal;}
#customer_footer #g_footer .ft_contact{ padding: 0 0 10px;}
#customer_footer #g_footer .ft_resarve{}
#customer_footer #g_footer .ft_resarve .cmn_btn { width: 250px; max-width: 100%; height: 65px; margin: 10px auto 25px; font-size: 16px;}
#customer_footer #g_footer .ft_sns{ display: flex; justify-content: center; list-style-type: none; padding: 0;}
#customer_footer #g_footer .ft_sns li{ margin: 0 5px;}

@media screen and (hover: hover) and (min-width: 601px) {
	#pagetop:hover { opacity: .5;}
}
@media screen and (max-width: 600px) {
	#customer_footer #g_footer { padding: 60px 4% calc(env(safe-area-inset-bottom) + 60px);}
	#customer_footer #g_footer .ft_logo{ width: 120px;}
	#customer_footer #g_footer .ft_addr{ padding: 30px 0 10px;}
	#customer_footer #g_footer .ft_check{ display: flex; justify-content: center; flex-wrap: wrap; flex-direction: column;  padding: 0 0 20px;}
}