@charset "utf-8";
/* ===================================================
Spa unique style
====================================================== */
/* ---------------------------------------------------
#main_img
------------------------------------------------------ */
#main_img { background: url("../../spa/img/main_bg.jpg") no-repeat center top; background-size: cover; text-align: center;}
#main_img h2{ width: 100px; margin: 0 auto;}

@media screen and (max-width: 600px) {
#main_img h2{ width: 50px;}
}


/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
#contents_wrap { background-image: url("../img/bg_momiji2.png") , url("../img/bg4.jpg"); background-repeat: no-repeat , repeat; background-position: center top , center center; background-size: 1196px , 64px; padding: 0;}

@media screen and (max-width: 600px) {
#contents_wrap { background-size: 598px , 64px; padding: 25px 0 0;}
}

/* breadcrumb */
#breadcrumb,
#breadcrumb a{ color: #fff;}

/* Slider (slick.js) */
.slick-dotted.slick-slider { margin-bottom: 70px !important;}
.slide-item{ width: 100%; max-width: 1100px;}
.slide-item img { width: 100%;}
.slide .slick-next,
.slide .slick-next:hover{ right: 50%; z-index: 99; margin: 0 -540px 0 0; background: url("../img/ico_next1.png") no-repeat 0 0; background-size: 39px; width: 39px; height: 78px; text-indent: -9999px; opacity: 0.7;}
.slide .slick-next:hover{ opacity: 1;}
.slide .slick-prev,
.slide .slick-prev:hover{ left: 50%; z-index: 100; margin: 0 0 0 -540px; background: url("../img/ico_prev1.png") no-repeat 0 0; background-size: 39px; width: 39px; height: 78px; text-indent: -9999px; opacity: 0.7;}
.slide .slick-prev:hover{ opacity: 1;}
.slick-initialized .slick-slide{ margin: 0 10px;}
.slick-dots { bottom: -32px !important;}
.slick-dots li { width: 120px !important; height: auto !important; border: solid 1px #fff; background: #fff;}
.slick-dots li img{ opacity: 0.7;}
.slick-dots li:hover img,
.slick-dots li.slick-active img{ opacity: 1;}


@media screen and (max-width: 600px) {
.slick-slider .slick-list { width: 92%; margin: 0 auto;}
.slick-dotted.slick-slider { margin-bottom: 40px !important;}
.slide-item{ width: 92vw; max-width: none;}
.slide-item img { width: 100%; height: auto; max-width: 552px;}
.slide .slick-next,
.slide .slick-next:hover{ right: 4%; z-index: 99; margin: 0; background-size: 20px; width: 20px; height: 40px;}
.slide .slick-prev,
.slide .slick-prev:hover{ left: 4%; z-index: 100; margin: 0; background-size: 20px; width: 20px; height: 40px;}
.slick-dots { bottom: -19px !important;}
.slick-dots li { width: 60px !important; }
}


/* ---------------------------------------------------
	Section lead
------------------------------------------------------ */
#sec_lead{ color: #fff; position: relative; overflow: hidden; min-height: 430px;}
#sec_lead .box_txt{ width: 560px; padding: 0 540px 0 0; margin: 0 auto; box-sizing: content-box;}
#sec_lead .box_txt h3{ font-size: 26px; letter-spacing: 0.2em; padding: 50px 0 20px;}
#sec_lead .box_txt h3 span{ color: #e8380d;}
#sec_lead .box_txt h3 br{ display: none;}
#sec_lead .box_txt p{ font-size: 15px; line-height: 2;}
#sec_lead .img1{ position: absolute; top: 0; right: 0; width: calc( 50% - 45px );}
#sec_lead .img1 img{ width: 100%; height: 350px;}

@media screen and (max-width: 600px) {
#sec_lead{ min-height: 0; padding: 0 0 40px;}
#sec_lead .box_txt{ width: 92%; padding: 0;}
#sec_lead .box_txt h3{ font-size: 22px; letter-spacing: 0.1em; padding: 0 0 20px; text-align: center;}
#sec_lead .box_txt h3 br{ display: block;}
#sec_lead .box_txt p{ font-size: 15px; line-height: 1.7; padding: 0 0 15px}
#sec_lead .img1{ min-width: 92%; width: 92%; position: static; bottom: 0; left: 0; margin: 0 auto;}
#sec_lead .img1 img{ width: 100%; height: auto;}
}


/* ---------------------------------------------------
	Section 1
------------------------------------------------------ */
#sec1{ background: #f4efee; padding: 80px 0;}
#sec1 h3{ padding: 0 0 60px; text-align: center; font-size: 56px; line-height: 0.6;}
#sec1 h3 span{ color: #e8380d;}
#sec1 h3 span.sml{ color: #000; font-size: 48px;}
#sec1 h3 small{ font-size: 16px;}
#sec1 .slick-dotted.slick-slider { margin-bottom: 0 !important;}
#sec1 .wrap1{ background: url("../../spa/img/sec1_bg1.png") no-repeat center top; background-size: 1300px; padding: 80px 0 0; position: relative;}
#sec1 #sec1_1{ width: 560px; padding: 0 540px 0 0; margin: 0 auto; min-height: 360px;}
#sec1 #sec1_1 h4{ font-size: 26px; padding: 30px 0;}
#sec1 #sec1_1 h4 span{ color: #e8380d;}
#sec1 #sec1_1 h4 br{ display: none;}
#sec1 #sec1_1 p{ font-size: 15px; line-height: 2;}
#sec1 #sec1_2{ width: 500px; border: solid 1px #781902; position: absolute; top: 80px; left: 50%; margin: 0 0 0 50px; padding: 30px; box-sizing: border-box;}
#sec1 #sec1_2 h4{ color: #781902; font-size: 20px; padding: 0 0 10px;}
#sec1 #sec1_2 p{ font-size: 15px; line-height: 2;}
#sec1 #sec1_2 h5{ font-size: 15px; font-weight: 700; padding: 20px 0 10px;}
#sec1 .wrap2{ background: url("../../spa/img/sec1_bg2.png") no-repeat center 10px; background-size: 1300px; padding: 50px 0 0;}
#sec1 #sec1_3{ width: 1100px; margin: 0 auto; overflow: hidden;}
#sec1 #sec1_3 .box_txt{ float: right; width: 260px; margin: 30px 80px 0 0;}
#sec1 #sec1_3 .box_txt h4{ background: url("../img/tit_bg1.png") no-repeat 0 6px; background-size: 26px; padding: 0 0 10px 35px; text-align: left; font-size: 26px; border-bottom: solid 1px #781902; margin: 0 0 15px;}
#sec1 #sec1_3 .box_txt p{ font-size: 15px; line-height: 2;}
#sec1 #sec1_3 .box_img{ float: left; width: 735px;}

@media screen and (max-width: 600px) {
#sec1{ padding: 30px 0 30px;}
#sec1 h3{ padding: 0 0 30px; font-size: 36px;}
#sec1 h3 span.sml{ font-size: 26px;}
#sec1 h3 small{ font-size: 14px;}
#sec1 .wrap1{ background: url("../../spa/img/sec1_bg1.png") no-repeat left top; background-size: 650px; padding: 30px 0 0;}
#sec1 #sec1_1{ width: 92%; padding: 0; margin: 0 auto 30px; min-height: 0;}
#sec1 #sec1_1 h4{ font-size: 22px; padding: 20px 0; text-align: center;}
#sec1 #sec1_1 h4 br{ display: block;}
#sec1 #sec1_1 p{ font-size: 15px; line-height: 1.7;}
#sec1 #sec1_2{ width: 92%; position: static; top: 0; left: 0; margin: 0 auto; padding: 4%;}
#sec1 #sec1_2 h4{ font-size: 20px; padding: 0 0 10px;}
#sec1 #sec1_2 p{ font-size: 15px; line-height: 1.7;}
#sec1 #sec1_2 h5{ font-size: 15px; padding: 20px 0 10px;}
#sec1 .wrap2{ background: url("../../spa/img/sec1_bg2.png") no-repeat right 10px; background-size: 650px; padding: 20px 0 0;}
#sec1 #sec1_3{ width: 92%;}
#sec1 #sec1_3 .box_txt{ float: none; width: 100%; margin: 10px 0 10px;}
#sec1 #sec1_3 .box_txt h4{ background: url("../img/tit_bg1.png") no-repeat 0 4px; background-size: 26px; font-size: 20px; margin: 0 0 15px;}
#sec1 #sec1_3 .box_txt p{ font-size: 15px; line-height: 1.7;}
#sec1 #sec1_3 .box_img{ float: none; width: 100%;}
}


/* ---------------------------------------------------
	Section 2
------------------------------------------------------ */
#sec2{ background-image: url("../img/bg1.jpg"); background-repeat: repeat; background-position: center top; background-size: 300px; padding: 80px 0 150px; overflow: hidden;}
#sec2 h3{ background: url("../img/tit_bg1.png") no-repeat center top; background-size: 26px; padding: 35px 0 50px; text-align: center; font-size: 36px;}
#sec2 table{ width: 1100px; margin: 0 auto; border-collapse: inherit; border-top: solid 1px #781902; clear: both;}
#sec2 th,
#sec2 td{ border-bottom: solid 1px #aaaaaa; padding: 15px 35px; vertical-align: middle; line-height: 2;}
#sec2 th{ background: rgba(120,25,2,0.1); font-weight: normal;}
#sec2 td{ width: 80%;}
#sec2 tr:last-of-type th,
#sec2 tr:last-of-type td{ border-bottom: solid 1px #781902;}
#sec2 td br.sp{ display: none;}

@media screen and (max-width: 600px) {
#sec2{ padding: 20px 0 30px;}
#sec2 h3{ padding: 30px 0 20px; font-size: 26px;}
#sec2 table{ width: 92%; margin: 0 auto;}
#sec2 th,
#sec2 td{ display: block; width: 100%; padding: 10px 0; text-align: center; line-height: 2; box-sizing: border-box; font-size: 14px;}
#sec2 th{ border-bottom: none;}
#sec2 td{ width: 100%;}
#sec2 tr:last-of-type th{ border-bottom: none;}
#sec2 tr:last-of-type td{ border-bottom: solid 1px #781902;}
#sec2 td br.sp{ display: block;}
#sec2 td.txt_left{ text-align: left;}
}