@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: 50px; top: 55px; color: #fff; display: flex; flex-direction: row-reverse;}
.sec_01 .box_01 .tit_01 .sub{ font-size: 25px; padding: 25px 0 0; opacity: 0.6;}
.sec_01 .box_01 .tit_01 .main{ font-size: 45px;}
.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 0;}
.sec_01 .box_02 .tit_02{ width: 300px; border-right: solid 1px #d6c9bf; display: flex; justify-content: center; align-items: center; font-size: 28px; color:rgba(96,50,25,0.7);}
.sec_01 .box_02 .box_txt{ width: calc( 100% - 350px ); font-size: 16px; line-height: 1.8;}
.sec_01 .box_btns{ text-align: right; padding: 15px 0 100px; 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 10px;}
.sec_01 .box_01 .tit_01 .sub{ font-size: 16px; padding: 0; 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 0;}
.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;}
.sec_01 .box_btns{ text-align: left; padding: 10px 0 30px; font-size: 15px; line-height: 1.7; display: flex; flex-wrap: wrap; justify-content: flex-start;}
}

/* ---------------------------------------------------
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 .tit_01{ background: rgba(255,255,255,0.9); width: 180px; height: 270px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sec_02 .box_01 .tit_01 .ja{ font-size: 40px; color: #603219;}
.sec_02 .box_01 .tit_01 .en{ font-size: 12px; color: #e78c67; background: #E78C67; background: linear-gradient(to right, #E78C67 0%, #C88BCA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 15px 0 0;}
.sec_02 .box_01 .img{ width: 100%; height: 750px; object-fit: cover;}
.sec_02 .txt_01{ text-align: center; font-size: 16px; line-height: 1.8; padding: 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 40px;}
.sec_02 .list_01{ display: flex; justify-content: flex-end; width: 100%; margin: -60px 0 30px 0; font-size: 16px; line-height: 1.8; border-right: solid 1px #d6c9bf;}
.sec_02 .list_01 li{ border-left: solid 1px #d6c9bf; padding: 0 15px;}
.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 .tit_01{ width: 110px; height: 160px;}
.sec_02 .box_01 .tit_01 .ja{ font-size: 24px;}
.sec_02 .box_01 .tit_01 .en{ font-size: 10px; padding: 10px 0 0;}
.sec_02 .box_01 .img{ height: 280px;}
.sec_02 .txt_01{ text-align: left; font-size: 15px; line-height: 1.7; padding: 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 .tit_01{ background: rgba(255,255,255,0.9); width: 180px; height: 270px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sec_03 .box_01 .tit_01 .ja{ font-size: 40px; color: #603219;}
.sec_03 .box_01 .tit_01 .en{ font-size: 12px; color: #e78c67; background: #E78C67; background: linear-gradient(to right, #E78C67 0%, #C88BCA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 15px 0 0;}
.sec_03 .box_01 .img{ width: 100%; height: 750px; object-fit: cover;}
.sec_03 .txt_01{ text-align: center; font-size: 16px; line-height: 1.8; padding: 60px 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 .tit_01{ width: 110px; height: 160px;}
.sec_03 .box_01 .tit_01 .ja{ font-size: 24px;}
.sec_03 .box_01 .tit_01 .en{ font-size: 10px; padding: 10px 0 0;}
.sec_03 .box_01 .img{ height: 280px;}
.sec_03 .txt_01{ text-align: left; font-size: 15px; line-height: 1.7; padding: 30px 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;}
.sec_04 .tit_01{ padding: 0 0 30px;}
.sec_04 .box_in{ background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 25px 0;}
.sec_04 .box_img{ width: 31.6%;}
.sec_04 .box_img img{ width: 100%; height: auto;}
.sec_04 .box_txt{ width: 68.4%; padding: 40px 80px; box-sizing: border-box;}
.sec_04 .txt_01{ font-size: 24px; line-height: 1; padding: 0 0 30px; opacity: 0.7;}
.sec_04 .list_01{ font-size: 16px; line-height: 1.9; display: flex; justify-content: flex-start; align-items: flex-start;}
.sec_04 .list_01:last-of-type{ margin: 0 0 30px;}
.sec_04 .list_01 dt{ width: 7em;}
.sec_04 .list_01 dd{ width: calc( 100% - 7em );}
.sec_04 .note_01{ font-size: 14px; line-height: 1.7; opacity: 0.7;}
.sec_04 .note_01 + a { margin-top: 15px; display: block; max-width: 490px;}

@media screen and (max-width: 600px) {
.sec_04{ padding: 50px 0;}
.sec_04 .tit_01{ padding: 0;}
.sec_04 .box_in{ flex-direction: column-reverse; padding: 0 0 10vw;}
.sec_04 .box_img{ width: 50%; margin: 0 auto;}
.sec_04 .box_txt{ width: 100%; padding: 10vw 5vw 5vw;}
.sec_04 .txt_01{ font-size: 18px; line-height: 1.5; padding: 0 0 15px; opacity: 0.7;}
.sec_04 .list_01{ font-size: 15px; line-height: 1.7; display: block;}
.sec_04 .list_01:last-of-type{ margin: 0 0 5px;}
.sec_04 .list_01 dt{ display: block; width: 100%;}
.sec_04 .list_01 dd{ display: block; width: 100%; margin: 0 0 10px;}
.sec_04 .note_01{ font-size: 14px; line-height: 1.7; opacity: 0.7;}
}