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

/* Common */
.box_img:has(span) { position: relative; }
.box_img span { position: absolute; bottom: 0; right: 0; display: block; padding: 5px 10px; text-align: right; font-size: 13px; color: #fff; text-shadow: 0 0 5px rgba(0 0 0/50%); }
.box_img span.bk { color: #000; text-shadow: none; }

/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
.sec_lead{ width: 90%; max-width: 1100px; margin: 0 auto; padding: 70px 0; text-align: center;}
.sec_lead .tit{ font-size: 40px; letter-spacing: 0.1em; padding: 0 0 30px;}
.sec_lead .txt{ font-size: 16px; line-height: 1.8;}
.sec_lead .lnav{ display: flex; justify-content: center; gap: 0 3%; margin: 50px 0 0;}
.sec_lead .lnav li{ width: 31%;}
.sec_lead .lnav li a{ display: flex; align-items: center; justify-content: center; width: 100%; border: solid 1px var(--cmn-btn2); background-color: #fff; padding: 40px 0 50px; position: relative; transition: all 0.3s;}
.sec_lead .lnav li a:hover{ background-color: var(--cmn-btn2); color: #fff; text-decoration: none;}
.sec_lead .lnav li a::after{ content: ""; display: block; width: 10px; height: 10px; border-right: solid 1px var(--cmn-btn2); border-bottom: solid 1px var(--cmn-btn2); transform: rotate(45deg); position: absolute; bottom: 25px; left: 0; right: 0; margin: 0 auto;}
.sec_lead .lnav li a:hover::after{ border-right: solid 1px #fff; border-bottom: solid 1px #fff;}
.sec_lead .lnav li a span{ font-size: 24px;}

@media screen and (max-width: 600px) {
.sec_lead{ width: 90%; max-width: 90%; margin: 0 auto; padding: 30px 0; text-align: center;}
.sec_lead .tit{ font-size: 26px; letter-spacing: 0.1em; padding: 0 0 15px;}
.sec_lead .txt{ font-size: 15px; line-height: 1.7; text-align: left;}
.sec_lead .lnav{ flex-wrap: wrap; margin: 20px 0 0;}
.sec_lead .lnav li{ width: 48%; margin: 0 0 4%;}
.sec_lead .lnav li a{ padding: 20px 0 30px;}
.sec_lead .lnav li a::after{ bottom: 15px;}
.sec_lead .lnav li a span{ font-size: 16px;}
}


/* ---------------------------------------------------
Section 01
------------------------------------------------------ */
.sec_01{ padding: 10px 0 80px;}
.sec_01 .tit_01{ text-align: center; padding: 0 0 50px;}
.sec_01 .tit_01 span{ display: block;}
.sec_01 .tit_01 .ja{ font-size: 40px; letter-spacing: 0.1em;}
.sec_01 .tit_01 .en{ font-size: 15px; color: var(--cmn-yel); padding: 15px 0 0;}
.sec_01 .inner_01{ width: 100%; max-width: 1200px; margin: 0 auto 70px; display: flex; justify-content: space-between;}
.sec_01 .inner_01:nth-of-type(2n){ flex-direction: row-reverse;}
.sec_01 .inner_01 .box_img{ width: 688px; position: relative;}
.sec_01 .inner_01 .box_img img{ width: 100%; height: auto;}
.sec_01 .inner_01 .box_txt{ width: 400px; margin: 40px 50px 0 0;}
.sec_01 .inner_01:nth-of-type(2n) .box_txt{ margin: 40px 0 0 50px;}
.sec_01 .tit_02{ font-size: 25px; color: var(--cmn-yel2); line-height: 1.4; position: relative; padding: 0 0 15px; margin: 0 0 20px;}
.sec_01 .tit_02::after{ content: ""; width: 90px; height: 1px; background: var(--cmn-yel2); position: absolute; bottom: 0; left: 0;}
.sec_01 .txt_01{ font-size: 15px; line-height: 2;}
.sec_01 .cmn_btn_01{ margin: 40px 0 0;}
.sec_01 .wrap{ width: 1155px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.sec_01 .inner_02{ max-width: 330px; width: 30%; margin: 0 27.5px 55px;}
.sec_01 .inner_02 .box_img{ margin-bottom: 20px;}
.sec_01 .inner_02 .box_img img{ width: 100%; height: auto;}
.sec_01 .inner_03{ width: 1200px; margin: 0 auto; border: solid 2px #ababab; padding: 60px 100px 90px; box-sizing: border-box;}
.sec_01 .inner_03 .list_01{ display: flex; justify-content: space-between; gap: 0 20px;}
.sec_01 .inner_03 .list_01 li{ display: flex; flex-direction: column; align-items: center; gap: 15px 0; width: min(20%, 150px); font-size: 18px; color: #9b7e50; }
.sec_01 .inner_03 .list_01 li span { flex-grow: 1; align-content: center; width: 100%; aspect-ratio: 1/1; text-align: center; background-color: #fcf5e9; }

@media screen and (max-width: 600px) {
.sec_01{ padding: 10px 0 30px;}
.sec_01 .tit_01{ line-height: 1.4; padding: 0 0 20px;}
.sec_01 .tit_01 .ja{ font-size: 26px; letter-spacing: 0.2em;}
.sec_01 .tit_01 .en{ font-size: 15px; padding: 8px 0 0;}
.sec_01 .inner_01{ width: 90%; max-width: 90%; margin: 0 auto 40px; flex-direction: column;}
.sec_01 .inner_01:nth-of-type(2n){ flex-direction: column;}
.sec_01 .inner_01 .box_img{ width: 100%; position: relative;}
.sec_01 .inner_01 .box_txt{ width: 100%; margin: 20px 0 0;}
.sec_01 .inner_01:nth-of-type(2n) .box_txt{ margin: 20px 0 0;}
.sec_01 .tit_02{ font-size: 22px; padding: 0 0 10px; margin: 0 0 15px;}
.sec_01 .txt_01{ font-size: 14px; line-height: 1.7;}
.sec_01 .cmn_btn_01{ margin: 20px 0 0;}
.sec_01 .wrap{ width: 90%; justify-content: space-between;}
.sec_01 .inner_02{ max-width: 48%; width: 48%; margin: 0 0 5%;}
.sec_01 .inner_02 .tit_02{ font-size: 18px;}
.sec_01 .inner_03{ width: 90%; padding: 7% 5% 0;}
.sec_01 .inner_03 .list_01{ justify-content: center; flex-wrap: wrap; gap: 0 5%;}
.sec_01 .inner_03 .list_01 li{ gap: 5px 0; width: min(47.5%, 130px); font-size: 14px; margin: 0 0 20px;}
.sec_01 .inner_03 .list_01 li span { aspect-ratio: 7/6; }
.sec_01 .inner_03 .list_01 li img{ max-width: 55%; max-height: 36%; }
.sec_01 .inner_03 .list_01 li:last-child{ letter-spacing: -0.1em;}
}


/* ---------------------------------------------------
Section 02
------------------------------------------------------ */
.sec_02{ padding: 70px 0; background-color: var(--cmn-bg);}
.sec_02 .tit_01{ text-align: center; padding: 0 0 50px;}
.sec_02 .tit_01 span{ display: block;}
.sec_02 .tit_01 .ja{ font-size: 40px; letter-spacing: 0.1em;}
.sec_02 .tit_01 .en{ font-size: 15px; color: var(--cmn-yel); padding: 15px 0 0;}
.sec_02 .wrap{ max-width: 1100px; width: 100%; margin: 0 auto; display: flex; justify-content: center;}
.sec_02 .inner{ width: 330px; margin: 0 25px;}
.sec_02 .inner .box_img{ padding: 0 0 30px;}
.sec_02 .inner .box_img img{ width: 100%; height: auto;}
.sec_02 .tit_02{ font-size: 25px; color: var(--cmn-yel2); line-height: 1.4; position: relative; padding: 0 0 15px; margin: 0 0 20px;}
.sec_02 .tit_02::after{ content: ""; width: 90px; height: 1px; background: var(--cmn-yel2); position: absolute; bottom: 0; left: 0;}
.sec_02 .txt_01{ font-size: 15px; line-height: 2;}

@media screen and (max-width: 600px) {
.sec_02{ padding: 30px 0;}
.sec_02 .tit_01{ padding: 0 0 20px;}
.sec_02 .tit_01 .ja{ font-size: 26px; letter-spacing: 0.2em;}
.sec_02 .tit_01 .en{ font-size: 15px; padding: 8px 0 0;}
.sec_02 .wrap{ max-width: 90%; width: 90%; margin: 0 auto; display: flex; justify-content: space-between;}
.sec_02 .inner{ width: 48%; margin: 0;}
.sec_02 .inner .box_img{ padding: 0 0 20px;}
.sec_02 .inner .box_txt{}
.sec_02 .tit_02{ font-size: 18px; padding: 0 0 10px; margin: 0 0 15px;}
.sec_02 .txt_01{ font-size: 14px; line-height: 1.7;}
}


/* ---------------------------------------------------
Section 03
------------------------------------------------------ */
.sec_03{ padding: 70px 0 190px;}
.sec_03 .tit_01{ text-align: center; padding: 0 0 50px;}
.sec_03 .tit_01 span{ display: block;}
.sec_03 .tit_01 .ja{ font-size: 40px; letter-spacing: 0.1em;}
.sec_03 .tit_01 .en{ font-size: 15px; color: var(--cmn-yel); padding: 15px 0 0;}
.sec_03 .tbl_01{ width: 100%; max-width: 900px; margin: 0 auto;}
.sec_03 .tbl_01 th,
.sec_03 .tbl_01 td{ padding: 30px; text-align: left; vertical-align: middle; border-bottom: solid 1px #ababab; font-weight: normal; font-size: 15px; line-height: 2; letter-spacing: 0.1em;}
.sec_03 .tbl_01 th{ background: var(--cmn-bg); width: 8em;}
.sec_03 .tbl_01 td{ width: calc( 100% - 8em );}

@media screen and (max-width: 600px) {
.sec_03{ padding: 30px 0 80px;}
.sec_03 .tit_01{ padding: 0 0 20px;}
.sec_03 .tit_01 .ja{ font-size: 26px; letter-spacing: 0.2em;}
.sec_03 .tit_01 .en{ font-size: 15px; padding: 8px 0 0;}
.sec_03 .tbl_01{ width: 90%; display: block; box-sizing: border-box;}
.sec_03 .tbl_01 th,
.sec_03 .tbl_01 td{ display: block; padding: 10px 15px; font-size: 14px; line-height: 1.7; border-bottom: none; box-sizing: border-box;}
.sec_03 .tbl_01 th{ width: 100%;}
.sec_03 .tbl_01 td{ width: 100%; padding: 10px 15px; border-bottom: solid 1px #ababab; margin: 0 0 10px;}
}