@charset "utf-8";
/* ===================================================
	Hotspring CSS
====================================================== */
/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
#lead{ padding: 70px 0 90px;}

@media screen and (max-width: 600px) {
#lead{ padding: 40px 5% 50px;}
}

/* ---------------------------------------------------
Section History
------------------------------------------------------ */
.sec_history{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; flex-direction: row-reverse; padding: 0 0 90px;}
.sec_history .img_01{ width: 60%;}
.sec_history .img_01 img{ width: 100%; height: 570px;}
.sec_history .box_txt{ width: 320px; margin: 0 120px 0 auto;}
.sec_history .cmn_tit_02 span.ja{ line-height: 1.8;}
.sec_history .txt_01{ line-height: 1.9; padding: 0 0 1.9em;}

@media screen and (max-width: 600px) {
.sec_history{ padding: 0 0 20px;}
.sec_history .img_01{ width: 90%; margin: 0 0 0 auto;}
.sec_history .img_01 img{ height: 250px;}
.sec_history .box_txt{ width: 90%; margin: 30px auto 0;}
}

/* ---------------------------------------------------
Box Data
------------------------------------------------------ */
.box_data{ width: 80%; max-width: 930px; margin: 0 auto; padding: 0 0 100px 0;}
.box_data dl > div{ border-bottom: solid 1px #d5d7d7; display: table; width: 100%;}
.box_data dt,
.box_data dd{ display: table-cell; padding: 25px 30px;}
.box_data dt{ width: 15%;}
.box_data dd{ width: 85%;}

@media screen and (max-width:600px){
.box_data{ width: 90%; padding: 0 0 40px 0;}
.box_data dt{ width: 4em; padding: 15px 0 15px 15px;}
.box_data dd{ width: calc( 100% - 4em ); padding: 15px 15px 15px 0;}
}

/* ---------------------------------------------------
Section Sagen & Ugen
------------------------------------------------------ */
.sec_sagen_ugen{ padding: 80px 0;}
.sec_sagen_ugen#ugen{ background-color: #f2f2f2;}
.sec_sagen_ugen .img_01{ width: 100%;}
.sec_sagen_ugen .img_01 img{ width: 100%; height: auto;}
.sec_sagen_ugen .box_txt{ text-align: center; padding: 40px 0 30px;}
.sec_sagen_ugen .txt_01{ line-height: 1.9;}
.sec_sagen_ugen .data{ width: 90%; max-width: 930px; margin: 0 auto 60px; display: table;}
.sec_sagen_ugen .data dt,
.sec_sagen_ugen .data dd{ display: table-cell; border-bottom: solid 1px #b0b0b0; padding: 20px 40px;}
.sec_sagen_ugen .data dt{ background-color: #f2f2f2;}
.sec_sagen_ugen#ugen .data dt{ background-color: #fff;}
.sec_sagen_ugen .box_imgs{ display: flex; justify-content: space-between; align-items: flex-start;}
.sec_sagen_ugen .box_imgs img{ width: 100%; height: auto;}
.sec_sagen_ugen .box_imgs .img_02,
.sec_sagen_ugen .box_imgs .img_03,
.sec_sagen_ugen .box_imgs .img_04{ width: 32.5%;}
.sec_sagen_ugen .box_imgs .cap{ display: inline-block; font-size: 14px; line-height: 1; padding: 10px 0 0;}

@media screen and (max-width:600px){
.sec_sagen_ugen{ padding: 40px 0;}
.sec_sagen_ugen .box_txt{ text-align: left; padding: 20px 5% 30px;}
.sec_sagen_ugen .txt_01{ line-height: 1.9;}
.sec_sagen_ugen .data{ margin: 0 auto 30px;}
.sec_sagen_ugen .data dt,
.sec_sagen_ugen .data dd{ padding: 15px; vertical-align: middle;}
.sec_sagen_ugen .data dt{ width: 6em;}
.sec_sagen_ugen .data dd{ width: calc( 100% - 6em );}
.sec_sagen_ugen .box_imgs{ align-items: stretch; flex-wrap: wrap;}
.sec_sagen_ugen .box_imgs .img_02,
.sec_sagen_ugen .box_imgs .img_03,
.sec_sagen_ugen .box_imgs .img_04{ position: relative; box-sizing: border-box; border-left: solid 1px #fff; border-right: solid 1px #fff;}
.sec_sagen_ugen#sagen .box_imgs .img_02{ width: 100%; order: 3; border-top: solid 2px #fff;}
.sec_sagen_ugen#sagen .box_imgs .img_02 img{ height: 200px;}
.sec_sagen_ugen#sagen .box_imgs .img_03{ width: 50%; order: 1;}
.sec_sagen_ugen#sagen .box_imgs .img_04{ width: 50%; order: 2;}
.sec_sagen_ugen#ugen .box_imgs .img_02,
.sec_sagen_ugen#ugen .box_imgs .img_03,
.sec_sagen_ugen#ugen .box_imgs .img_04{ border-left: solid 1px #f2f2f2; border-right: solid 1px #f2f2f2;}
.sec_sagen_ugen#ugen .box_imgs .img_02{ width: 50%;}
.sec_sagen_ugen#ugen .box_imgs .img_03{ width: 50%;}
.sec_sagen_ugen#ugen .box_imgs .img_04{ width: 100%; border-top: solid 2px #f2f2f2;}
.sec_sagen_ugen#ugen .box_imgs .img_04 img{ height: 200px;}
.sec_sagen_ugen .box_imgs .cap{ width: fit-content; font-size: 12px; line-height: 1; padding: 5px 10px; position: absolute; bottom: 0; left: 0; background-color: #f2f2f2;}
}

/* ---------------------------------------------------
Section How to enjoy
------------------------------------------------------ */
.sec_enjoy{ padding: 100px 0 0;}
.sec_enjoy .list_step{ width: 90%; max-width: 930px; margin: 0 auto;}
.sec_enjoy .list_step li{ padding: 50px 0 50px 30px; border-bottom: solid 1px #acb0af; position: relative;}
.sec_enjoy .list_step li::before{ content: ""; display: block; width: 20px; height: 20px; border-top: solid 1px #fff; border-right: solid 1px #fff; border-bottom: solid 1px #acb0af; border-left: solid 1px #acb0af; position: absolute; bottom: -19px; left: 50%; transform: rotate(-45deg) translate(0, -50%); background-color: #fff;}
.sec_enjoy .list_step li:last-child{ border-bottom: none;}
.sec_enjoy .list_step li:last-child::before{ display: none;}
.sec_enjoy .step{ width: 94px; height: 20px; font-size: 12px; background-color: #1a3c34; color: #fff; line-height: 20px; text-align: center; display: block;}
.sec_enjoy .tit{ font-size: 20px; padding: 10px 0 20px;}
.sec_enjoy .illust{ position: absolute; top: 50px; right: 80px;}
.sec_enjoy .list_step li#step_04 .illust{ top: 23px; right: 100px;}

@media screen and (max-width:600px){
.sec_enjoy{ padding: 50px 0 0;}
.sec_enjoy .list_step li{ padding: 40px 5%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.sec_enjoy .step{ width: 70px; height: 20px; font-size: 11px; line-height: 20px; margin: 4px 0 0;}
.sec_enjoy .tit{ font-size: 18px; padding: 0 0 20px 10px; width: calc( 100% - 70px ); box-sizing: border-box;}
.sec_enjoy .illust{ position: static; text-align: center; width: 100%; display: block; padding: 0 0 20px;}
.sec_enjoy .illust img{ width: 140px;}
.sec_enjoy .list_step li#step_04 .illust img,
.sec_enjoy .list_step li#step_05 .illust img{ width: 100px;}
}

/* ---------------------------------------------------
Section Knowledge
------------------------------------------------------ */
.sec_knowledge{ padding: 250px 0 150px; margin: -150px 0 0; position: relative; overflow: hidden;}
.sec_knowledge::before{ content: ""; position: absolute; top: 0; left: 50%; margin: 0 0 0 -700px; z-index: -1; background: url(../img/bg_flower_02.webp) no-repeat 0 0; background-size: 480px; width: 480px; height: 590px; transform: scaleX(-1);}
.sec_knowledge ol{ counter-reset: listnum; list-style: none; width: 90%; max-width: 1200px; margin: 0 auto;}
.sec_knowledge ol li{ border: solid 1px #d3d5d4; padding: 0; margin: 0 0 20px;}
.sec_knowledge ol li .acc_tit{ background-color: #f2f2f2; color: #1a3c34; font-size: 20px; line-height: 1.5; position: relative; padding: 40px 40px 40px 75px; cursor: pointer;}
.sec_knowledge ol li .acc_tit:hover,
.sec_knowledge ol li .acc_tit.active{ background-color: #fff;}
.sec_knowledge ol li .acc_tit::before{ counter-increment: listnum; content: counter(listnum); position: absolute; top: 39px; left: 40px; width: 28px; text-align: center;}
.sec_knowledge ol li .acc_tit::after{ content: ""; position: absolute; top: 40px; left: 40px; border: solid 1px #1a3c34; width: 26px; height: 26px; border-radius: 26px;}
.sec_knowledge ol li .acc_tit .plus{ position: absolute; top: 40px; right: 40px; font-size: 24px; font-weight: bold; font-family: sans-serif; line-height: 1; color: #1a3c34; transition: transform 0.5s; transform-origin: center center;}
.sec_knowledge ol li .acc_tit.active .plus{ transform: rotate(135deg);}
.sec_knowledge ol li .acc_contents{ background-color: #fff; padding: 0 40px 40px;}
.sec_knowledge ol li .acc_contents .txt_01{ padding: 0 0 1.6em; line-height: 1.6;}
.sec_knowledge ol li .acc_contents .txt_01:last-of-type{ padding: 0;}
.sec_knowledge ol li .acc_contents .list_01{ margin: 20px 0 0;}
.sec_knowledge ol li .acc_contents .list_01 > div{ display: table; width: 100%; border-bottom: solid 1px #d3d5d4;}
.sec_knowledge ol li .acc_contents .list_01 dt,
.sec_knowledge ol li .acc_contents .list_01 dd{ display: table-cell; padding: 20px 40px;}
.sec_knowledge ol li .acc_contents .list_01 dt{ width: 20%;}
.sec_knowledge ol li .acc_contents .list_01 dd{ width: 80%;}

@media screen and (max-width:600px){
.sec_knowledge{ padding: 50px 0 70px; margin: 0;}
.sec_knowledge::before{ left: -30px; margin: 0; background-size: 240px; width: 240px; height: 295px;}
.sec_knowledge ol li{ margin: 0 0 10px;}
.sec_knowledge ol li .acc_tit{ font-size: 16px; line-height: 1.5; padding: 20px 50px;}
.sec_knowledge ol li .acc_tit::before{ top: 20px; left: 20px; width: 22px; line-height: 22px;}
.sec_knowledge ol li .acc_tit::after{ top: 20px; left: 20px; width: 20px; height: 20px; border-radius: 20px;}
.sec_knowledge ol li .acc_tit .plus{ top: 20px; right: 20px; font-size: 20px;}
.sec_knowledge ol li .acc_contents{ padding: 0 5% 5%;}
.sec_knowledge ol li .acc_contents .list_01{ margin: 20px 0 0; border-top: solid 1px #d3d5d4;}
.sec_knowledge ol li .acc_contents .list_01 > div{ display: block;}
.sec_knowledge ol li .acc_contents .list_01 dt,
.sec_knowledge ol li .acc_contents .list_01 dd{ display: block; box-sizing: border-box;}
.sec_knowledge ol li .acc_contents .list_01 dt{ width: 100%; padding: 5% 5% 0 5%;}
.sec_knowledge ol li .acc_contents .list_01 dd{ width: 100%; padding: 2.5% 5% 5%;}
}