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

/* ---------------------------------------------------
Box Local Navigation
------------------------------------------------------ */
.box_lnav{ text-align: center; padding: 90px 0 60px;}
.box_lnav .lnav{ display: flex; justify-content: center; align-items: stretch;}
.box_lnav .lnav li{ width: 290px; margin: 0 5px;}
.box_lnav .lnav li a{ display: flex; justify-content: center; align-items: center; font-size: 18px; line-height: 1.1; height: 100px; width: 100%; border-top: solid 3px #dfd6d1; position: relative;}
.box_lnav .lnav li a::after{ content: ""; display: block; width: 8px; height: 8px; border-bottom: solid 3px #dfd6d1; border-right: solid 3px #dfd6d1; transform: rotate(45deg); position: absolute; bottom: 15px; left: 0; right: 0; margin: 0 auto; transition: bottom 0.5s;}
.box_lnav .lnav li a:hover{ text-decoration: none;}
.box_lnav .lnav li a:hover::after{ bottom: 10px;}

@media screen and (max-width: 600px) {
.box_lnav{ padding: 30px 0;}
.box_lnav .lnav{ flex-direction: column; width: 90%; margin: 0 auto; border-bottom: solid 1px #dfd6d1;}
.box_lnav .lnav li{ width: 100%; margin: 0;}
.box_lnav .lnav li a{ font-size: 16px; line-height: 1.1; height: 60px; border-top: solid 1px #dfd6d1;}
.box_lnav .lnav li a::after{ width: 8px; height: 8px; border-bottom: solid 2px #dfd6d1; border-right: solid 2px #dfd6d1; top: 0; bottom: 0; left: inherit; right: 15px; margin: auto 0;}
.box_lnav .lnav li a:hover::after{ bottom: 3px;}
}


/* ---------------------------------------------------
Section 01
------------------------------------------------------ */
.sec_01 .box_01{ display: flex; justify-content: space-between; position: relative;}
.sec_01 .box_01 .tit_01{ position: absolute; left: 30px; bottom: 30px; color: #fff; display: flex; flex-direction: column;}
.sec_01 .box_01 .tit_01 .sub{ font-size: 25px; line-height: 1.1; padding: 0 0 10px;}
.sec_01 .box_01 .tit_01 .main{ font-size: 45px; line-height: 1.1;}
.sec_01 .box_01 .img_01 img,
.sec_01 .box_01 .img_02 img{ width: 100%; height: auto;}
.sec_01 .box_01 .img_01{ width: 64.1%; max-width: 770px;}
.sec_01 .box_01 .img_02{ width: 35%; max-width: 420px;}
.sec_01 .box_02{ display: flex; justify-content: space-between; padding: 50px 0 100px;}
.sec_01 .box_02 .tit_02{ width: 300px; border-right: solid 1px #d6c9bf; display: flex; justify-content: center; align-items: center; font-size: 28px; line-height: 1.4; color:rgba(96,50,25,0.7);}
.sec_01 .box_02 .box_txt{ width: calc( 100% - 350px ); font-size: 16px; line-height: 1.8;}

@media screen and (max-width: 600px) {
.sec_01 .box_01{ flex-wrap: wrap;}
.sec_01 .box_01 .tit_01{ position: static; color:rgba(96,50,25,0.7); width: 100%; display: flex; flex-direction: column; text-align: center; padding: 0 0 15px;}
.sec_01 .box_01 .tit_01 .sub{ font-size: 16px; padding: 0 0 10px; opacity: 1;}
.sec_01 .box_01 .tit_01 .main{ font-size: 26px;}
.sec_01 .box_01 .tit_01 .sub.v_rl,
.sec_01 .box_01 .tit_01 .main.v_rl{ writing-mode: horizontal-tb;}
.sec_01 .box_02{ flex-direction: column; padding: 15px 0 50px;}
.sec_01 .box_02 .tit_02{ width: 100%; border-right: none; border-bottom: solid 1px #d6c9bf; display: flex; justify-content: center; align-items: center; font-size: 20px; color:rgba(96,50,25,0.7);}
.sec_01 .box_02 .box_txt{ width: 100%; font-size: 15px; line-height: 1.7; padding: 15px 0 0;}
}

/* ---------------------------------------------------
Section 02
------------------------------------------------------ */
.sec_02{ background-color: #f3efe9; padding: 0 0 100px;}
#sec_03.sec_02{ background-color: #fff;}
.sec_02 .box_01{ width: 100%; position: relative;}
.sec_02 .box_01 .img{ width: 100%; height: 750px; object-fit: cover;}
.sec_02 .tit_01{ padding: 50px 0 0;}
.sec_02 .txt_01{ text-align: center; font-size: 16px; line-height: 1.8; padding: 0 0 50px 0;}
.sec_02 .sec_in{ padding: 40px 0 0;}
.sec_02 .tit_02{ font-size: 28px; line-height: 1.4; text-align: center; width: 100%; padding: 0 0 20px;}
.sec_02 .list_01{ display: flex; justify-content: center; margin: 0 0 30px 0; font-size: 16px; line-height: 1.8;}
.sec_02 .list_01 li{ border-left: solid 1px #d6c9bf; padding: 0 15px;}
.sec_02 .list_01 li:last-child{ border-right: solid 1px #d6c9bf;}
.sec_02 .txt_02{ padding: 40px 0 0; font-size: 16px; line-height: 1.9;}
.sec_02 .note{ padding: 5px 0 0; font-size: 14px; line-height: 1.9; opacity: 0.7;}

@media screen and (max-width: 600px) {
.sec_02{ padding: 0 0 50px;}
.sec_02 .box_01 .img{ height: 280px;}
.sec_02 .tit_01{ padding: 20px 0 0;}
.sec_02 .txt_01{ text-align: left; font-size: 15px; line-height: 1.7; padding: 10px 0 40px 0;}
.sec_02 .sec_in{ padding: 0 0 30px;}
.sec_02 .tit_02{ font-size: 22px; line-height: 1.4; padding: 0;}
.sec_02 .list_01{ justify-content: center; margin: 10px 0 20px 0; font-size: 14px; line-height: 1.5; border-right: none;}
.sec_02 .list_01 li{ padding: 0 15px;}
.sec_02 .list_01 li:last-child{ border-right: solid 1px #d6c9bf;}
.sec_02 .txt_02{ padding: 0; font-size: 15px; line-height: 1.7;}
.sec_02 .note{ padding: 5px 0 0; font-size: 12px; line-height: 1.7; opacity: 0.7;}
}

/* ---------------------------------------------------
Slide Type01
------------------------------------------------------ */
.slide_01{ width: 100%;}
.slide_01 .slick-slide{ position: relative; line-height: 0;}
.slide_01 .cap{ position: absolute; bottom: 0; left: 0; background: #fff; font-size: 16px; line-height: 1.5; padding: 10px 15px; z-index: 2;}
.slide_01 .slick-slide img{ position: relative; z-index: 1;}
.slide_01 .slick-dots{ text-align: left; bottom: -30px;}

@media screen and (max-width: 600px) {
.slide_01 .slick-list{ width: 100%; margin: 0 auto;}
.slide_01 .cap{ position: absolute; bottom: 0; left: 0; background: #fff; font-size: 14px; line-height: 1.5; padding: 10px 15px; z-index: 2;}
.slide_01 .slick-dots{ text-align: center;}
}

/* ---------------------------------------------------
Section 03
------------------------------------------------------ */
.sec_03{ padding: 0 0 100px;}
.sec_03 .box_01{ width: 100%; position: relative;}
.sec_03 .box_01 .img{ width: 100%; height: 750px; object-fit: cover;}
.sec_03 .tit_01{ padding: 50px 0 0;}
.sec_03 .txt_01{ text-align: center; font-size: 16px; line-height: 1.8; padding: 0 0 90px;}
.sec_03 .box_02{ display: flex; justify-content: space-between;}
.sec_03 .box_02 .box_in{ width: 48.3%; max-width: 580px; text-align: center;}
.sec_03 .tit_02{ font-size: 24px; line-height: 1.1; padding: 0 0 30px; opacity: 0.7;}
.sec_03 .img,
.sec_03 .img img{ width: 100%; height: auto;}
.sec_03 .txt_02{ font-size: 16px; line-height: 1.8; padding: 40px 0 0;}

@media screen and (max-width: 600px) {
.sec_03{ padding: 0 0 50px;}
.sec_03 .box_01 .img{ height: 280px;}
.sec_03 .tit_01{ padding: 20px 0 0;}
.sec_03 .txt_01{ text-align: left; font-size: 15px; line-height: 1.7; padding: 10px 0 40px;}
.sec_03 .box_02{ flex-direction: column;}
.sec_03 .box_02 .box_in{ width: 100%; max-width: 100%; text-align: center; margin: 0 0 30px;}
.sec_03 .tit_02{ font-size: 22px; line-height: 1.1; padding: 0 0 10px; opacity: 0.7;}
.sec_03 .txt_02{ font-size: 15px; line-height: 1.7; padding: 0;}
}

/* ---------------------------------------------------
Section 04
------------------------------------------------------ */
.sec_04{ background-color: #f3efe9; padding: 100px 0; counter-reset: number 0;}
.sec_04 .txt_01{ text-align: center; padding: 0 0 50px; color: #603219;}
.sec_04 .box_in{ background: #fff; margin: 0 0 40px; padding: 45px 520px 45px 0; position: relative;}
.sec_04 .box_in::before{ counter-increment: number 1; content: counter(number);
position: absolute; top: 30px; left: 0; background: #e69194; font-size: 30px; line-height: 1; color: #fff; padding: 20px 30px; border-radius: 0 60px 60px 0;}
.sec_04 .box_in::after{ content: ""; width: 4px; height: 40px; background: url("../../spa/img/dot_01.webp") repeat-y 0 0; background-size: 4px; position: absolute; bottom: -40px; left: 50%;}
.sec_04 .box_in:last-of-type::after{ display: none;}
.sec_04 .box_in .tit_02{ font-size: 30px; line-height: 1.4; padding: 0 0 0 90px;}
.sec_04 .box_in .txt_02{ font-size: 18px; line-height: 1.7; border-bottom: solid 1px #e5deda; padding: 10px 0 20px 90px;}
.sec_04 .box_in .list_01{ padding: 20px 0 10px 90px;}
.sec_04 .box_in .list_01 li{ padding: 0 0 0 20px; position: relative;}
.sec_04 .box_in .list_01 li::before{ content: ""; display: block; position: absolute; top: 9px; left: 0; width: 10px; height: 10px; border-radius: 10px; background: #e69194;}
.sec_04 .box_in .note{ padding: 0 0 0 90px;}
.sec_04 .box_in .illust{ position: absolute; top: 0; right: 30px; bottom: 0; margin: auto 0; display: flex; align-items: center; width: 470px;}
.sec_04 .box_in .illust img{ width: 100%; height: auto;}
.sec_04 .box_requests{ display: flex; border-top: solid 1px #e5deda; border-bottom: solid 1px #e5deda; margin: 60px auto 0;}
.sec_04 .box_requests .tit{ background: #fbfaf8; padding: 30px; width: 22%; font-weight: bold; box-sizing: border-box;}
.sec_04 .box_requests .list{ padding: 30px 0 30px 50px; width: 78%; list-style-type: none; box-sizing: border-box;}
.sec_04 .box_requests .list li{ padding: 0 0 0 1em; text-indent: -1em;}
.sec_04 .box_requests .list li::before{ content: "・ ";}

@media screen and (max-width: 600px) {
.sec_04{ padding: 50px 0;}
.sec_04 .txt_01{ text-align: left; padding: 0 5% 5%;}
.sec_04 .box_in{ margin: 0 0 40px; padding: 20px 0;}
.sec_04 .box_in::before{ top: 20px; font-size: 26px; line-height: 1; padding: 20px 25px;}
.sec_04 .box_in .tit_02{ font-size: 22px; line-height: 1.4; padding: 0 5% 0 80px;}
.sec_04 .box_in .txt_02{ font-size: 16px; line-height: 1.7; padding: 5px 5% 20px 80px;}
.sec_04 .box_in .list_01{ padding: 20px 5% 10px 5%; font-size: 15px;}
.sec_04 .box_in .note{ padding: 0 5%; font-size: 14px;}
.sec_04 .box_in .illust{ position: static; margin: 20px 0 0; display: block; width: 100%;}
.sec_04 .box_requests{ flex-direction: column;}
.sec_04 .box_requests .tit{ padding: 10px 5%; width: 100%;}
.sec_04 .box_requests .list{ padding: 10px 5%; width: 100%; font-size: 15px; line-height: 1.7;}
}