@charset "utf-8";
/* ===================================================
	Hot spring Project CSS
====================================================== */
/* ---------------------------------------------------
	Main title
------------------------------------------------------ */
.box_maintit{ background-image: url("../../img/project/main_img.jpg");}
.box_maintit .tit{ width: 506px; height: 144px;}

@media screen and (max-width: 600px) {
.box_maintit .tit{ width: 300px; height: 86px; top: 74px; bottom: inherit;}
}


/* ---------------------------------------------------
	Section 1
------------------------------------------------------ */
#sec1{ padding: 40px 0 100px; text-align: center;}
#sec1 .copy1{ font-size: 26px; line-height: 1.5; color: #286c35; padding: 0 0 5px;}
#sec1 .tit1{ font-size: 46px; line-height: 1.5; padding: 0 0 30px;}
#sec1 .txt1{ font-size: 15px; line-height: 2; padding: 0 0 20px;}
#sec1 .date{ display: block; background: #286c35; color: #fff; font-size: 25px; line-height: 1.2; width: 100px; height: 100px; box-sizing: border-box; border-radius: 100px; text-align: center; padding: 21px 0 0; margin: 0 auto 20px; letter-spacing: 0;}
#sec1 .copy2{ font-size: 26px; line-height: 1.5; padding: 0 0 5px;}
#sec1 .tit2{ font-size: 42px; line-height: 1.5; color: #286c35; padding: 0 0 20px;}
#sec1 .txt2{ font-size: 15px; line-height: 2; text-align: left;}
#sec1 .tit3{ font-size: 26px; line-height: 1.5; color: #286c35; padding: 0 0 20px; text-align: left;}
#sec1_1{ width: 100%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between;}
#sec1_1 .box_txt{ width: 47%;}
#sec1_1 .box_txt .inner{ width: 450px; margin: 0 40px 0 auto; }
#sec1_1 .box_img{ width: 53%; padding: 50px 0 0;}
#sec1_1 .box_img img{ width: 100%; max-width: 750px; height: auto;}
#sec1_2{ padding: 60px 0 0; width: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; flex-direction: row-reverse;}
#sec1_2 .box_txt{ width: 400px;}
#sec1_2 .box_img{ width: 640px;}
#sec1_3{ padding: 60px 0 0; width: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between;}
#sec1_3 .box_txt{ width: 410px;}
#sec1_3 .box_img{ width: 650px;}

@media screen and (max-width: 600px) {
#sec1{ padding: 40px 4% 50px;}
#sec1 .copy1{ font-size: 20px; line-height: 1.5; padding: 0 0 5px;}
#sec1 .tit1{ font-size: 24px; line-height: 1.5; padding: 0 0 15px;}
#sec1 .txt1{ font-size: 14px; line-height: 1.7; padding: 0 0 10px; text-align: left;}
#sec1 .date{ font-size: 17px; width: 70px; height: 70px; padding: 16px 0 0; margin: 0 auto 10px;}
#sec1 .copy2{ font-size: 20px; line-height: 1.5; padding: 0 0 5px;}
#sec1 .tit2{ font-size: 24px; line-height: 1.5; padding: 0 0 10px;}
#sec1 .txt2{ font-size: 14px; line-height: 1.7; text-align: left;}
#sec1 .tit3{ font-size: 24px; line-height: 1.5; padding: 0 0 10px; text-align: center;}
#sec1_1{ width: 100%; max-width: 100%; margin: 0; flex-direction: column;}
#sec1_1 .box_txt{ width: 100%;}
#sec1_1 .box_txt .inner{ width: 100%; margin: 0; }
#sec1_1 .box_img{ width: 100%; padding: 15px 0 0;}
#sec1_1 .box_img img{ width: 100%; max-width: 100%; height: auto;}
#sec1_2{ padding: 30px 0 0; width: 100%; max-width: 100%; margin: 0; flex-direction: column;}
#sec1_2 .box_txt{ width: 100%;}
#sec1_2 .box_img{ width: 100%; padding: 15px 0 0;}
#sec1_3{ padding: 30px 0 0; width: 100%; max-width: 100%; margin: 0; flex-direction: column;}
#sec1_3 .box_txt{ width: 100%;}
#sec1_3 .box_img{ width: 100%; padding: 15px 0 0;}
}


/* ---------------------------------------------------
	Section 2
------------------------------------------------------ */
#sec2{ padding: 0 0 150px;}
#sec2 .box_tit{ background: url("../../img/project/sec2_img1.jpg") no-repeat center top; background-size: 1400px; height: 500px; max-width: 1400px; width: 100%; margin: 0 auto; position: relative; z-index: 1;}
#sec2 .tit1{ width: 3.5em; height: 6.5em; display: block; color: #fff; font-size: 46px; line-height: 1.3; position: absolute; top: 100px; left: 0; right: 0; margin: 0 auto; text-shadow: 0px 0px 10px rgba(0,0,0,0.6);}
#sec2 .tit1 .sub{ display: inline-block;}
#sec2 .tit1 .main{ display: inline-block; font-size: 66px; }
#sec2 ol{ list-style-type: none; display: flex; justify-content: space-between; width: 1100px; margin: -50px auto 50px; position: relative; z-index: 2;}
#sec2 ol li{ background: #fff; width: 350px; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3); padding: 25px; box-sizing: border-box;}
#sec2 .copy{ font-size: 22px; line-height: 1.5; color: #286c35; padding: 0; text-align: center;}
#sec2 .tit2{ font-size: 30px; line-height: 1.5; color: #286c35; padding: 0 0 10px; text-align: center;}
#sec2 .txt{ font-size: 15px; line-height: 2;}
#sec2 .box_data{ border: solid 1px #286c35; width: 1100px; margin: 0 auto 50px; box-sizing: border-box; padding: 10px 50px;}
#sec2 .box_data dl{ display: table; width: 100%; border-bottom: solid 1px #ccc;}
#sec2 .box_data dl:last-of-type{ border-bottom: none;}
#sec2 .box_data dt,
#sec2 .box_data dd{ display: table-cell; font-size: 15px; line-height: 2;}
#sec2 .box_data dt{ color: #286c35; padding: 20px 40px; width: 3em; text-align: center;}
#sec2 .box_data dd{ padding: 20px 0;}
#sec2 .cmn_btn1 span{ font-size: 18px;}

@media screen and (max-width: 600px) {
#sec2{ padding: 0 0 50px;}
#sec2 .box_tit{ background: url("../../img/project/sec2_img1.jpg") no-repeat center top; background-size: cover; height: 250px; max-width: 100%; width: 100%; margin: 0;}
#sec2 .tit1{ width: 3.5em; height: 6.5em; font-size: 26px; line-height: 1.3; top: 40px;}
#sec2 .tit1 .main{ font-size: 34px; }
#sec2 ol{ flex-direction: column; width: 92%; margin: -40px auto 30px;}
#sec2 ol li{  width: 100%; padding: 15px; margin: 0 0 20px;}
#sec2 .copy{ font-size: 18px; line-height: 1.5;}
#sec2 .tit2{ font-size: 24px; line-height: 1.5; padding: 0 0 10px;}
#sec2 .txt{ font-size: 14px; line-height: 1.7;}
#sec2 .box_data{ width: 92%; margin: -30px auto 20px; padding: 4%;}
#sec2 .box_data dt,
#sec2 .box_data dd{ font-size: 14px; line-height: 1.7;}
#sec2 .box_data dt{ padding: 10px 15px; width: 3em;}
#sec2 .box_data dd{ padding: 10px 0;}
#sec2 .cmn_btn1 span{ font-size: 14px;}
}