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

#contents_wrap{ background: url(../img/bg6.jpg) center top;}

/* ---------------------------------------------------
Main image tit
------------------------------------------------------ */
#main_img { height: 300px; background: url(../../spa/img/main_bg.jpg) no-repeat center bottom; background-size: cover;}
#main_img h2{ position: absolute; top: 50%; left: 50%; margin: -52px 0 0 -29px; }

@media screen and (max-width: 768px) {
	#main_img { height: 150px; background: url(../../spa/img/main_bg.jpg) no-repeat center top; background-size: 900px}
	#main_img h2{ position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -26px; width: 52px; }
}

/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
#sec_lead{ position: relative; overflow: hidden; padding: 0 0 30px;}
#sec_lead h3{ text-align: center; padding: 60px 0 50px;}
#sec_lead p{ position: absolute; bottom: 60px; left: 50%; margin: 0 0 0 -520px; color: #fff; font-size: 16px; line-height: 2; z-index: 2; text-shadow:0px 1px 1px #231300,0px -1px 1px #231300,1px 0px 1px #231300,-1px 0px 1px #231300;}
#sec_lead p:first-letter{ font-size: 35px; line-height: 1;}
#sec_lead ul{ position: absolute; bottom: 0; left: 50%; margin: 0 0 0 126px; overflow: hidden; z-index: 2;}
#sec_lead ul li{ float: left; margin: 0 20px 0 0; width: calc((100% - 80px) / 5);}
#sec_lead ul li:last-child{ margin: 0;}
#sec_lead .img{ position: relative; left: 50%; width: 100%; height: 100%; margin: 0 0 0 -50%; overflow: hidden; z-index: 1;}

@media screen and (max-width: 768px) {
	#sec_lead h3{ padding: 30px 0 25px; width: 168px; margin: 0 auto;}
	#sec_lead p{ margin: 0 0 0 -47%; font-size: 14px; width: 55%;}
	#sec_lead p:first-letter{ font-size: 32px;}
	#sec_lead ul{ left: 60%; margin: 0;}
	#sec_lead ul li{ margin: 0 2% 0 0; width: 18%;}
}
@media screen and (max-width: 600px) {
	#sec_lead{ padding: 0 0 120px;}
	#sec_lead p{ position: relative; bottom: inherit; left: inherit; width: 92%; margin: 0 auto 10px; color: #000; text-shadow:none;}
	#sec_lead p br{ display: none;}
	#sec_lead p:first-letter{ font-size: 30px;}
	#sec_lead ul{ left: 7.2%; width: 86%; margin: 0; display: flex; justify-content: space-between;}
	#sec_lead ul li{ float: none; margin: 0;}
	#sec_lead .img{ width: 900px; max-width: 900px; height: 237px; margin: 0 0 0 -450px;}
}

/* ---------------------------------------------------
Section 1
------------------------------------------------------ */
#sec1{ position: relative; overflow: hidden; padding: 0 0 30px;}
#sec1 h3{ padding: 20px 0 25px; text-align: center;}
#sec1 .flexslider { width: 1100px; margin: 0 auto 60px; display: block;}
#sec1 .inner{ width: 645px; min-height: 265px; padding: 0 455px 0 0; margin: 0 auto; position: relative;}
#sec1 p{ padding: 15px 0 0; line-height: 1.7;}
#sec1 p:last-of-type{ padding: 15px 0 30px;}
#sec1 dl{ display: table; border: solid 1px #b49f6f; width: 100%; box-sizing: border-box;}
#sec1 dt,
#sec1 dd{ display: table-cell; padding: 10px 35px; vertical-align: middle;}
#sec1 dt{ background: url(../img/bg7.png); text-align: center; color: #fff; width: 22%;}
#sec1 dd{ font-size: 13px;}
#sec1 .img2{ position: absolute; top: 0; left: 50%; margin: 0 0 0 140px;}

@media screen and (max-width: 768px) {
	#sec1 h3{ padding: 20px 0 15px; text-align: left; width: 92%; margin: 0 auto;}
	#sec1 h3 img{ width: 178px; height: auto;}
	#sec1 .flexslider { width: 92%; margin: 0 auto 30px;}
	#sec1 .inner{ width: 92%; min-height: inherit; padding: 0; text-align: center;}
	#sec1 p{ padding: 10px 0 0; text-align: left;}
	#sec1 p:last-of-type{ padding: 10px 0 10px;}
	#sec1 dt,
	#sec1 dd{ padding: 5px 10px; text-align: left;}
	#sec1 dt{ width: 30%; text-align: center;}
	#sec1 dd{ padding: 5px 25px;}
	#sec1 .img2{ position: relative; top: inherit; left: inherit; margin: 15px 0 0;}
}
@media screen and (max-width: 600px) {
	#sec1 dd{ padding: 5px 10px;}
	#sec1 .img2{ width: 205px;}
}

/* ---------------------------------------------------
Section 2
------------------------------------------------------ */
#sec2{ padding: 0 0 92px; background: url(../img/bg5.jpg); position: relative; overflow: hidden; z-index: 1;}
#sec2:after{ content: ''; position: absolute; top: 0 ; left: 50%; width: 1800px; height: 869px; margin: 0 0 0 -900px; background: url(../../spa/img/sec2_bg.png) no-repeat 0 0; z-index: 2;}
#sec2 h3{ padding: 0 0 30px; text-align: center; z-index: 3;}
#sec2 > div{ width: 1100px; margin: 0 auto; background: #000; z-index: 3;}

@media screen and (max-width: 768px) {
	#sec2{ padding: 0 0 50px;}
	#sec2:after{ display: none;}
	#sec2 h3{ padding: 0 0 20px; width: 171px; margin: 0 auto;}
	#sec2 > div{ width: 92%;}
}

/* ---------------------------------------------------
Section 3
------------------------------------------------------ */
#sec3{ position: relative; overflow: hidden; padding: 4px 0 0; background: url(../img/line.gif) repeat-x center top;}
#sec3 .wrap{ background: url(../img/bg1.jpg); padding: 0 0 30px;}
#sec3 h3{ padding: 0 0 25px; text-align: center;}
#sec3 .flexslider { width: 1100px; margin: 0 auto 60px; display: block;}
#sec3 .inner{ width: 645px; min-height: 265px; padding: 0 0 0 455px; margin: 0 auto; position: relative;}
#sec3 p{ padding: 15px 0 0; line-height: 1.7;}
#sec3 p:last-of-type{ padding: 15px 0 30px;}
#sec3 dl{ display: table; border: solid 1px #b49f6f; width: 100%; box-sizing: border-box;}
#sec3 dt,
#sec3 dd{ display: table-cell; padding: 10px 35px; vertical-align: middle;}
#sec3 dt{ background: url(../img/bg7.png); text-align: center; color: #fff; width: 22%;}
#sec3 dd{ font-size: 13px;}
#sec3 dd span{ color: #c5390f;}
#sec3 .img2{ position: absolute; top: 0; left: 50%; margin: 0 0 0 -550px;}

@media screen and (max-width: 768px) {
	#sec3 h3{ padding: 20px 0 15px; text-align: left; width: 92%; margin: 0 auto;}
	#sec3 h3 img{ width: 90vw; max-width: 324px; height: auto;}
	#sec3 .flexslider { width: 92%; margin: 0 auto 30px;}
	#sec3 .inner{ width: 92%; min-height: inherit; padding: 0; text-align: center;}
	#sec3 p{ padding: 10px 0 0; text-align: left;}
	#sec3 p:last-of-type{ padding: 10px 0 10px;}
	#sec3 dt,
	#sec3 dd{ padding: 5px 10px; text-align: left;}
	#sec3 dt{ width: 30%; text-align: center;}
	#sec3 dd{ padding: 5px 25px;}
	#sec3 .img2{ position: relative; top: inherit; left: inherit; margin: 15px 0 0;}
}
@media screen and (max-width: 600px) {
	#sec3 dd{ padding: 5px 10px;}
	#sec3 .img2{ width: 205px;}
	#sec3 dd span{ display: inline-block;}
}

/* ---------------------------------------------------
Section 4
------------------------------------------------------ */
#sec4{ padding: 4px 0 0; background: url(../img/line.gif) repeat-x center top; overflow: hidden;}
#sec4 .inner{ padding: 0 0 60px; background: url(../img/bg4.jpg); position: relative; z-index: 1;}
#sec4 .inner:before{ content: ''; position: absolute; top: 0 ; left: 50%; width: 1800px; height: 750px; margin: 0 0 0 -900px; background: url(../../spa/img/sec4_bg.png) no-repeat 0 0; z-index: 2;}
#sec4 h3{ padding: 0 0 35px; text-align: center;}
#sec4 .box1{ background: #000; width: 1100px; margin: 0 auto 70px; color: #fff; overflow: hidden; position: relative; z-index: 3;}
#sec4 .box1 table{ float: right; width: 530px; margin: 25px 0 0;}
#sec4 .box1 th,
#sec4 .box1 td{ border-bottom: solid 1px #4d4d4d; text-align: left; font-weight: normal;}
#sec4 .box1 tr:last-of-type th,
#sec4 .box1 tr:last-of-type td{ border-bottom: none;}
#sec4 .box1 th{ padding: 12px 0 12px 15px;}
#sec4 .box1 td{ padding: 12px 0 12px 15px;}
#sec4 .box1 th span{ letter-spacing: 1em;}
#sec4 .box1 img{ display: block; float: left; width: 540px;}
#sec4 h4{ width: 1100px; margin: 0 auto; padding: 2px 0 25px 20px; font-size: 26px; line-height: 1; color: #6e5928; position: relative; z-index: 3;}
#sec4 h4:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 5px; height: 30px; background: #b32a00;}
#sec4 .box_txt{ width: 1060px; margin: 0 auto 35px; line-height: 1.7; position: relative; z-index: 3;}
#sec4 .box2{ width: 1000px; margin: 0 auto; padding: 30px; background: rgba(255,255,255,0.3); overflow: hidden; position: relative; z-index: 3;}
#sec4 .box2_1{ float: left; width: 50%; padding: 0 20px 0 0; border-right: dotted 1px #ac996e; box-sizing: border-box;}
#sec4 .box2_2{ float: right; width: 50%; padding: 0 0 0 20px; box-sizing: border-box;}
#sec4 .box2 dl{}
#sec4 .box2 dt{ padding: 3px 0 15px 40px; font-size: 16px; color: #6e5928;}
#sec4 .box2 dd{ padding: 0 0 20px 12px; font-size: 13px;}
#sec4 .box2 dt.num1{ background: url(../../spa/img/ico_num1.png) no-repeat 0 0;}
#sec4 .box2 dt.num2{ background: url(../../spa/img/ico_num2.png) no-repeat 0 0;}
#sec4 .box2 dt.num3{ background: url(../../spa/img/ico_num3.png) no-repeat 0 0;}
#sec4 .box2 dt.num4{ background: url(../../spa/img/ico_num4.png) no-repeat 0 0;}
#sec4 .box2 dt.num5{ background: url(../../spa/img/ico_num5.png) no-repeat 0 0;}
#sec4 .box2 h5{ padding: 3px 0 0; background: #b32a00; color: #fff; text-align: center;}
#sec4 .box2 .box2_3{ padding: 15px 20px 20px; border: solid 1px #b32a00; background: #fff;}
#sec4 .box2 .box2_3 p{ font-size: 13px;}
#sec4 .box2 .box2_3 .copy{ padding: 0 0 10px; font-size: 15px; font-weight: bold; color: #6e5928;}
#sec4 .box2 .box2_3 .copy span{ font-size: 13px; font-weight: normal;}

@media screen and (max-width: 768px) {
	#sec4 .inner{ padding: 0 4% 20px;}
	#sec4 .inner:before{ display: none}
	#sec4 h3{ padding: 25px 0; width: 90vw; max-width: 326px;}
	#sec4 .box1{ width: 100%; margin: 0 0 30px;}
	#sec4 .box1 table{ float: none; width: 90%; margin: 15px auto 0;}
	#sec4 .box1 th{ padding: 5px 0; width: 65px; font-size: 14px;}
	#sec4 .box1 td{ padding: 5px 0 5px 10px; font-size: 13px;}
	#sec4 .box1 td br{ display: none;}
	#sec4 .box1 img{ float: none; width: 100%;}
	#sec4 h4{ width: 100%; margin: 0; padding: 2px 0 15px 15px; font-size: 20px; box-sizing: border-box;}
	#sec4 h4:before{ width: 5px; height: 23px;}
	#sec4 .box_txt{ width: 100%; margin: 0 0 20px;}
	#sec4 .box2{ width: 100%; margin: 0; padding: 15px; box-sizing: border-box;}
	#sec4 .box2_1{ float: none; width: 100%; padding: 0; border-right: none;}
	#sec4 .box2_2{ float: none; width: 100%; padding: 0; box-sizing:}
}

/* ---------------------------------------------------
Section 5
------------------------------------------------------ */
#sec5{ padding: 4px 0 0; background: url(../img/line.gif) repeat-x center top; overflow: hidden;}
#sec5 .inner{ min-height: 710px; background: url(../img/bg8.jpg); position: relative; z-index: 1;}
#sec5 .inner:before{ content: ''; position: absolute; top: 0 ; left: 50%; width: 1800px; height: 710px; margin: 0 0 0 -900px; background: url(../../spa/img/sec5_bg.png) no-repeat 0 0; z-index: 2;}
#sec5 h3{ display: block; width: 295px; height: 280px; margin: 0 auto; padding: 80px 805px 35px 0; text-align: center; position: relative; z-index: 3;}
#sec5 .img{ position: absolute; display: block; top: 68px; left: 50%; margin: 0 0 0 -230px; z-index: 3;}
#sec5 .inner > div{ width: 295px; margin: 0 auto; padding: 0 805px 0 0; position: relative; z-index: 3;}
#sec5 p{ padding: 25px 0; border-top: solid 1px #c6b7a3; font-size: 13px;}
#sec5 dl{ font-size: 13px; display: table;}
#sec5 dt,
#sec5 dd{ display: table-cell; padding: 0 0 15px;}
#sec5 dt{ width: 80px;}

@media screen and (max-width: 768px) {
	#sec5 .inner{ min-height: inherit; padding: 0 0 30px;}
	#sec5 .inner:before{ display: none;}
	#sec5 h3{ width: 92%; height: auto; margin: 0 auto; padding: 20px 0; text-align: left;}
	#sec5 h3 img{ width: 90vw; max-width: 189px; height: auto;}
	#sec5 .img{ position: relative; top: inherit; left: inherit; margin: 0 auto; width: 92%;}
	#sec5 .inner > div{ width: 92%; margin: 0 auto; padding: 15px 0 0;}
	#sec5 p br,
	#sec5 dd br{ display: none;}
}
@media screen and (max-width: 600px) {
	#sec5 p br,
	#sec5 dd br{ display: block;}
}


/* ---------------------------------------------------
Section 6
------------------------------------------------------ */
#sec6{ position: relative; overflow: hidden; padding: 4px 0 0; background: url(../img/line.gif) repeat-x center top;}
#sec6 .wrap{ padding: 0 0 30px;}
#sec6 h3{ padding: 0 0 25px; text-align: center;}
#sec6 .flexslider { width: 1100px; margin: 0 auto 40px; display: block;}
#sec6 .inner{ width: 590px; min-height: 345px; padding: 0 0 0 510px; margin: 0 auto; position: relative;}
#sec6 p{ padding: 15px 0 0; line-height: 1.7;}
#sec6 p:last-of-type{ padding: 15px 0 30px;}
#sec6 dl{ display: table; border: solid 1px #b49f6f; width: 100%; box-sizing: border-box;}
#sec6 dt,
#sec6 dd{ display: table-cell; padding: 10px 35px; vertical-align: middle;}
#sec6 dt{ background: url(../img/bg7.png); text-align: center; color: #fff; width: 30%;}
#sec6 dd{ font-size: 13px;}
#sec6 a{ float: right;}
#sec6 .img2{ position: absolute; top: 0; left: 50%; margin: 0 0 0 -550px;}
#sec6 .bnr_qr {display: flex; align-items: flex-start; column-gap: 5%; width: min(100%, 530px); margin: 30px 0; padding: 20px 0 20px 30px; box-sizing: border-box; background-color: #fff; line-height: 1.6; }
#sec6 .bnr_qr a {flex-shrink: 0;}
#sec6 .bnr_qr a img {height: auto; transition: opacity 0.5s; object-fit: contain;}
#sec6 .bnr_qr .txt {flex-grow: 1; padding-top: 4px;}
#sec6 .bnr_qr .tit {position: relative; margin-bottom: 10px; padding: 0; font-size: 19px; font-weight: bold; color: #fff;}
#sec6 .bnr_qr .tit span {position: relative; z-index: 1; display: inline-block; padding-right: 6%; color: #ad9c71; background-color: #fff;}
#sec6 .bnr_qr .tit::after {position: absolute; top: 50%; right: 0; z-index: 0; content: ''; width: 100%; height: 1px; background-color: #d6cdb8; }
#sec6 .bnr_qr p:not(.tit) {padding: 0 4% 0 0;}

@media screen and (max-width: 768px) {
	#sec6 h3{ padding: 20px 0 15px; text-align: left; width: 92%; margin: 0 auto;}
	#sec6 h3 img{ width: 90vw; max-width: 268px; height: auto;}
	#sec6 .flexslider { width: 92%; margin: 0 auto 20px;}
	#sec6 .inner{ width: 92%; min-height: inherit; padding: 0; text-align: center;}
	#sec6 p{ padding: 10px 0 0; text-align: left;}
	#sec6 p:last-of-type{ padding: 0 0 10px;}
	#sec6 dt,
	#sec6 dd{ padding: 5px 10px; text-align: left;}
	#sec6 dt{ text-align: center;}
	#sec6 dd{ padding: 5px 25px;}
	#sec6 a{ float: none;}
	#sec6 .img2{ position: relative; top: inherit; left: inherit; margin: 15px 0 0;}
}
@media screen and (max-width: 600px) {
	#sec6 dd{ padding: 5px 10px;}
	#sec6 .bnr_qr {padding: 20px 0 20px 4%; font-size: 14px;}
	#sec6 .bnr_qr a {width: min(25%, 90px);}
	#sec6 .bnr_qr .tit {font-size: 16px;}
	#sec6 .bnr_qr .tit span,
	#sec6 .bnr_qr p:not(.tit) {padding-right: 4%;}
}