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

/* ---------------------------------------------------
	Common Parts
------------------------------------------------------ */
.cmn_tit_01{ width: 100%; display: flex; flex-direction: column; align-items: center; padding: 150px 0 50px; color: #a48b78;}
.cmn_tit_01 span.ja{ font-size: 20px; line-height: 1;}
.cmn_tit_01 span.en{ font-size: 60px; line-height: 1; padding: 15px 0 0;}

@media screen and (max-width: 600px) {
.cmn_tit_01{ padding: 70px 0 20px;}
.cmn_tit_01 span.ja{ font-size: 14px; }
.cmn_tit_01 span.en{ font-size: 30px; padding: 10px 0 0;}
}

/* ---------------------------------------------------
	Section Eyecatch
------------------------------------------------------ */
.box_eyecatch{ width: 100%; height: auto; overflow: hidden; font-size: 0; position: relative; padding: 0; margin: 0;}
.box_eyecatch .box_slide{ position: relative; z-index: 1; line-height: 0; height: auto; margin: 0;}
.box_eyecatch .img{ width: 100%; height: 1052px;}
.box_eyecatch .box_slide .slick-slide{ opacity: 1 !important; }
.box_eyecatch .box_slide .slideobject{ height: calc( 100vh - 100px ); opacity: 0; transition: 0s; padding-top: 50%; position: relative; z-index: 10; overflow: hidden; vertical-align: bottom; }
.box_eyecatch .box_slide .slideobject .img{ width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover;}
.box_eyecatch .box_slide .slick-active .slideobject{ opacity: 1; transition: linear 3.0s; }
.box_eyecatch .box_slide .slick-continue .slideobject{ opacity: 0; transition: linear 3.0s; }
.box_eyecatch .box_slide .img{ transform: scale(1.0, 1.0); transition: 0s; }
.box_eyecatch .box_slide .slick-active .img{ transform: scale(1.1, 1.1); transition: linear 6s; }
.box_eyecatch .box_slide .slick-continue .img{ transform: scale(1.2, 1.2); transition: linear 6s; }
.box_eyecatch .box_slide .cap{ color: #fff; font-size: 14px; position: absolute; bottom: 30px; left: 30px; z-index: 11; text-shadow: 0px 0px 2px #000;}
.box_eyecatch .msg{ position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.box_eyecatch .msg .logo{ width: 350px;}
.box_eyecatch .msg .open{ font-size: 52px; line-height: 1; color:rgba(243,224,208,0.8); padding: 20px 0 0;}
.box_eyecatch .msg .txt_01{ font-size: 24px; line-height: 1; color: #fff; letter-spacing: 0.23em; padding: 20px 0 0;}

@media screen and (max-width: 600px) {
.box_eyecatch{ width: 100%; height: auto; padding: 0; margin: 0;}
.box_eyecatch{ margin: 0; overflow: visible;}
.box_eyecatch .box_slide .slick-list{ width: 100%; margin: 0;}
.box_eyecatch .box_slide .slick-list,
.box_eyecatch .box_slide .slick-track,
.box_eyecatch .box_slide .slick-slide > div{ height: 615px;}
.box_eyecatch{ overflow: hidden;}
.box_eyecatch .box_slide{ height: 615px;}
.box_eyecatch .box_slide .slideobject{ height: 100%; padding-top: 100%;}
.box_eyecatch .box_slide .cap{ font-size: 10px; bottom: 30px; left: 15px;}
.box_eyecatch .msg .logo{ width: 200px;}
.box_eyecatch .msg .open{ font-size: 32px;}
.box_eyecatch .msg .txt_01{ font-size: 16px;}
}

/* ---------------------------------------------------
	Box Information
------------------------------------------------------ */
.box_info{ width: 90%; max-width: 1000px; margin: 0 auto; padding: 50px 0 0;}
.box_info > div{ margin: 20px 0 0 0;}
.box_info > div.member{ cursor: pointer;}

@media screen and (max-width: 600px) {
.box_info{ width: 90%; padding: 20px 0 0;}
.box_info > div{ margin: 20px 0 0 0;}
}

/* モーダル */
/*.modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,50%); padding: 40px 20px; overflow: auto; opacity: 0; visibility: hidden; transition: .3s; box-sizing: border-box; z-index: 10; color: #000;}
.modal:before{ content: ""; display: inline-block; vertical-align: middle; height: 100%; margin-left: -0.2em; }
.modal.is-active{ opacity: 1; visibility: visible; }
.modal-container{ position: relative; display: inline-block; vertical-align: middle; max-width: 1100px; width: 90%;}
.modal-close{ position: absolute; display: block; top: 35px; right: 35px; width: 40px; height: 40px; color: #000; cursor: pointer; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.modal-close::before,
.modal-close::after{ content: ""; display: block; width: 45px; height: 1px; background: #000; transform-origin: center center; position: absolute; top: 50%; left: 50%;}
.modal-close::before{ transform: translate(-50%, -50%) rotate(45deg);}
.modal-close::after{ transform: translate(-50%, -50%) rotate(-45deg);}
.modal-content{ background: #fff; text-align: left; line-height: 1.8; padding: 60px 120px; border-radius: 10px;}
.modal-content .txt_01{ text-align: center;}
.modal-content .txt_02{ text-align: center; font-size: 24px; letter-spacing: 0.1em; line-height: 1; padding: 35px 0 25px;}
.modal-content .txt_03{ text-align: center; font-size: 20px; letter-spacing: 0.1em; line-height: 1; padding: 0 0 15px;}
.modal-content .list_01{ letter-spacing: 0.15em;}
.modal-content .list_01 > div{ background: #f3f0e3; margin: 0 0 10px; padding: 15px 0; display: flex; justify-content: flex-start;}
.modal-content .list_01 dt{ width: 110px; display: flex; justify-content: center; align-items: center;}
.modal-content .list_01 dd{ width: calc( 100% - 110px); border-left: solid 1px #000; padding: 0 30px; font-size: 16px; line-height: 2;}
.modal-content .list_01 dd em{ font-size: 20px; color: #af1010; font-style: normal;}
.modal-content .list_01 dd strong{ font-size: 28px;}
.modal-content .list_01 dd p.digico{ padding: 10px 0 0;}
.modal-content .list_01 dd p.digico img{ width: 100%; height: auto;}
.modal-content .note{ padding: 0 0 0 1em; text-indent: -1em;}
.modal-content .btn{ width: 300px; height: 60px; margin: 20px auto 0;}
.modal-content .btn a{ display: block; width: 100%; height: 100%; background: #000; color: #fff; text-align: center; line-height: 60px; transition: background 0.5s;}
.modal-content .btn a:hover{ text-decoration: none; background:#444;}

@media screen and (max-width: 600px) {
.modal{ padding: 20px 0; z-index: 201; }
.modal-close{ top: 15px; right: 15px; width: 20px; height: 20px;}
.modal-close::before,
.modal-close::after{ width: 25px;}
.modal-content{ line-height: 1.8; padding: 60px 5% 5%; border-radius: 10px;}
.modal-content .txt_01{ width: 80%; margin: 0 auto;}
.modal-content .txt_02{ font-size: 16px; letter-spacing: 0.05em; line-height: 1.5; padding: 20px 0 10px;}
.modal-content .txt_03{ font-size: 15px; letter-spacing: 0.1em; line-height: 1; padding: 0 0 15px;}
.modal-content .list_01{ letter-spacing: 0.15em;}
.modal-content .list_01 > div{ flex-direction: column;}
.modal-content .list_01 dt{ width: 100%; padding: 0 0 10px;}
.modal-content .list_01 dt img{ width: auto; height: 18px;}
.modal-content .list_01 dd{ width: 90%; border-left: none; border-top: solid 1px #000; padding: 10px 0 0; margin: 0 auto; font-size: 15px; line-height: 1.5;}
.modal-content .list_01 dd em{ font-size: 18px;}
.modal-content .list_01 dd strong{ font-size: 20px;}
.modal-content .list_01 dd p.digico{ padding: 10px 0 0;}
.modal-content .note{ font-size: 14px;}
.modal-content .btn{ width: 100%; height: 60px; margin: 20px auto 0;}
}*/

/* ---------------------------------------------------
Section About
------------------------------------------------------ */
.sec_about{ position: relative;}
.sec_about .copy{ position: absolute; top: 0; left: 50%; z-index: 2; width: 1200px; margin: 0 0 0 -600px; color: #fff; display: flex; justify-content: space-between; align-items: flex-start; padding: 12% 0 0;}
.sec_about .copy .box_tit{ width: 35%; padding: 0 0 0 5%; font-size: 42px; line-height: 1.8; letter-spacing: 0.1em;}
.sec_about .copy .box_txt{ width: 60%;}
.sec_about .copy .box_txt .ja{ font-size: 20px; line-height: 2.3; padding: 0 0 40px;}
.sec_about .copy .box_txt .en{ font-size: 12px; line-height: 2.3;}
.sec_about .img_01{ width: 100%; z-index: 0;}
.sec_about .img_01 img{ width: 100%; height: auto; /*height: 1050px; object-fit: cover;*/}

@media screen and (max-width: 600px) {
.sec_about .copy{ left: 10%; width: 80%; margin: 0; flex-direction: column; padding: 20% 0 0;}
.sec_about .copy .box_tit{ width: 100%; padding: 0 0 10%; font-size: 22px; line-height: 1.8; letter-spacing: 0.1em;}
.sec_about .copy .box_txt{ width: 100%;}
.sec_about .copy .box_txt .ja{ font-size: 13px; line-height: 2; padding: 0 0 5%; letter-spacing: 0.05em;}
.sec_about .copy .box_txt .en{ font-size: 11px; line-height: 2; letter-spacing: 0.05em;}
/*.sec_about .img_01 img{ width: 100%; height: 1050px; object-fit: cover;}*/
}

/* ---------------------------------------------------
Section Checkin/out
------------------------------------------------------ */
.sec_check{ padding: 0 0 70px;}
.sec_check .box_in{ background: #f7f6f4; padding: 60px; box-sizing: border-box;}
.sec_check .txt_01{ display: block; width: 100%; background: #e9e5e1; padding: 15px 0; margin: 0 0 30px; text-align: center; font-size: 18px; line-height: 1.5; color: #987356;}
.sec_check .txt_02{ font-size: 18px; line-height: 2;}

@media screen and (max-width: 600px) {
.sec_check{ padding: 0 0 40px 0;}
.sec_check .box_in{ padding: 5%;}
.sec_check .txt_01{ padding: 15px 0; margin: 0 0 5%; text-align: center; font-size: 14px; line-height: 1.5;}
.sec_check .txt_02{ font-size: 14px; line-height: 1.7;}
}

/* ---------------------------------------------------
Section villa
------------------------------------------------------ */
.sec_villa{ padding: 80px 0 150px; overflow: hidden;}
.sec_villa .img_01{ width: 100%; height: 900px;}
.sec_villa .img_01 img{ object-fit: cover;}
.sec_villa .txt{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 0 10px;}
.sec_villa .txt span{ display: block; line-height: 1.4;}
.sec_villa .txt span.en{ font-size: 26px; color:rgba(152,115,86,0.6);}
.sec_villa .txt span.ja{ font-size: 18px; color:rgba(152,115,86,1);}
.sec_villa .slide_01{ width: 100%;}
.sec_villa .slide_01 .img{ padding: 0 30px; display: block; box-sizing: content-box; max-width: 1000px; width: 90%;}
.sec_villa .slide_02{ width: 100%; max-width: 1204px; margin: 0 auto; padding: 50px 0 0;}
.sec_villa .slide_02 .img{ padding: 0 1px;}
.sec_villa .slide_03{ width: 100%; max-width: 1204px; margin: 0 auto; padding: 50px 0 0;}
.sec_villa .slide_03 .img{ padding: 0 1px;}
.sec_villa .box_01{ padding: 50px 0;}
.sec_villa .txt_01{ font-size: 18px; line-height: 2; letter-spacing: 0.2em;}
.sec_villa .list_01{ border-top: solid 1px #aaa; margin: 50px 0;}
.sec_villa .list_01 > div{ border-bottom: solid 1px #aaa; display: table; width: 100%;}
.sec_villa .list_01 dt,
.sec_villa .list_01 dd{ display: table-cell; font-size: 16px; line-height: 2; padding: 30px 20px; text-align: left; vertical-align: top;}
.sec_villa .list_01 dt{ width: 10em; font-weight: bold;}
.sec_villa .list_01 dd{ width: calc( 100% - 10em );}
.sec_villa .sec_in{ background: #f7f6f4; padding: 100px; margin: 0 auto 100px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.sec_villa .sec_in .tit_02{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 0 50px;}
.sec_villa .sec_in .tit_02 span{ display: block; line-height: 1.4;}
.sec_villa .sec_in .tit_02 span.en{ font-size: 45px; color:rgba(152,115,86,0.6);}
.sec_villa .sec_in .tit_02 span.ja{ font-size: 18px; color:rgba(152,115,86,1);}
.sec_villa .sec_in .box_img{ width: 46.2%; max-width: 462px; margin: 0; padding: 0;}
.sec_villa .sec_in .box_img .img{ padding: 0 1px; position: relative;}
.sec_villa .sec_in .box_img .img img{ width: 100%; height: auto;}
.sec_villa .sec_in .box_img .img .comment{ position: absolute; bottom: 10px; left: 10px; font-size: 12px; color: #fff;}
.sec_villa .sec_in .box_img .slick-dots { justify-content: flex-start;}
.sec_villa .sec_in .box_txt{ width: 46%; max-width: 460px;}
.sec_villa .sec_in .txt_02{ background: #e9e5e1; padding: 20px; margin: 0 0 2em; text-align: center; font-size: 18px; line-height: 2; color: #987356; width: 100%; display: block; box-sizing: border-box;}
.sec_villa .sec_in .txt_03{ font-size: 18px; line-height: 2; letter-spacing: 0.1em;}
.sec_villa .sec_in .tit_03{ font-size: 18px; line-height: 2; color: #987356; padding: 2em 0 0;}
.sec_villa .sec_in .tit_03:first-of-type{ padding: 0;}
.sec_villa .box_layout img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_villa{ padding: 0 0 50px;}
.sec_villa .img_01{ height: 350px;}
.sec_villa .txt{ padding: 10px 0 0;}
.sec_villa .txt span{ display: block; line-height: 1.4;}
.sec_villa .txt span.en{ font-size: 16px;}
.sec_villa .txt span.ja{ font-size: 12px;}
.sec_villa .slide_01{ width: 100%;}
.sec_villa .slide_01 .img{ padding: 0 5vw; width: 100%; box-sizing: border-box;}
.sec_villa .slide_02{ width: 100%; max-width: 100%; padding: 20px 0 0;}
.sec_villa .slide_02 .img{ padding: 0 5vw; width: 100%; box-sizing: border-box;}
.sec_villa .slide_03{ width: 90%; max-width: 90%; padding: 20px 0 0;}
.sec_villa .slide_03 .img{ padding: 0 1px; width: 100%; box-sizing: border-box;}
.sec_villa .slide_03 .txt{ align-items: flex-start;}
.sec_villa .box_01{ padding: 30px 0;}
.sec_villa .txt_01{ font-size: 16px; line-height: 1.7; letter-spacing: 0.1em;}
.sec_villa .list_01{ font-size: 15px; margin: 30px 0;}
.sec_villa .list_01 > div{ display: block;}
.sec_villa .list_01 dt,
.sec_villa .list_01 dd{ display: block; line-height: 1.7; padding: 15px 0 5px; box-sizing: border-box;}
.sec_villa .list_01 dt{ width: 100%;}
.sec_villa .list_01 dd{ width: 100%; padding: 0 0 15px;}
.sec_villa .sec_in{ padding: 10% 5%; margin: 0 auto 50px;}
.sec_villa .sec_in .tit_02{ padding: 0 0 20px;}
.sec_villa .sec_in .tit_02 span{ line-height: 1.4;}
.sec_villa .sec_in .tit_02 span.en{ font-size: 22px;}
.sec_villa .sec_in .tit_02 span.ja{ font-size: 14px;}
.sec_villa .sec_in .box_img{ width: 100%; max-width: 100%;}
.sec_villa .sec_in .box_txt{ width: 100%; max-width: 100%;}
.sec_villa .sec_in .txt_02{ padding: 10px; margin: 0 0 1em; font-size: 14px; line-height: 1.7; letter-spacing: 0.05em;}
.sec_villa .sec_in .txt_03{ font-size: 16px; line-height: 1.7; letter-spacing: 0.1em;}
.sec_villa .sec_in .tit_03{ font-size: 16px; line-height: 1.7; padding: 1em 0 0;}
.sec_villa .box_layout{ width: 90%; max-width: 90%;}
}

/* ---------------------------------------------------
Section Meal
------------------------------------------------------ */
.sec_meal{ padding: 80px 0 70px;}
.sec_meal .img_01{ width: 100%; height: 900px;}
.sec_meal .img_01 img{ object-fit: cover;}
.sec_meal .slide_01{ width: 100%;}
.sec_meal .slide_01 .img{ padding: 0 30px; display: block; box-sizing: content-box; max-width: 1000px; width: 90%;}
.sec_meal .slide_01 .img img{ width: 100%; height: auto;}
.sec_meal .slide_01 .txt{ display: flex; justify-content: center; align-items: baseline; padding: 30px 0 10px;}
.sec_meal .slide_01 .txt span{ display: block; line-height: 1.4;}
.sec_meal .slide_01 .txt span.en{ font-size: 26px; color:rgba(152,115,86,0.6);}
.sec_meal .slide_01 .txt span.slash{ font-size: 18px; color:rgba(152,115,86,1); padding: 0 0.5em;}
.sec_meal .slide_01 .txt span.ja{ font-size: 18px; color:rgba(152,115,86,1); padding: 0 0 0 1em;}
.sec_meal .box_01{ padding: 50px 0 0;}
.sec_meal .txt_01{ font-size: 18px; line-height: 2; letter-spacing: 0.2em;}
.sec_meal .list_01{ border-top: solid 1px #aaa; margin: 50px 0 0;}
.sec_meal .list_01 > div{ border-bottom: solid 1px #aaa; display: table; width: 100%;}
.sec_meal .list_01 dt,
.sec_meal .list_01 dd{ display: table-cell; font-size: 16px; line-height: 2; padding: 30px 20px; text-align: left; vertical-align: top;}
.sec_meal .list_01 dt{ width: 10em; font-weight: bold;}
.sec_meal .list_01 dd{ width: calc( 100% - 10em );}

@media screen and (max-width: 600px) {
.sec_meal{ padding: 0 0 50px;}
.sec_meal .img_01{ height: 350px;}
.sec_meal .slide_01{ width: 100%;}
.sec_meal .slide_01 .img{ padding: 0 5vw; width: 100%; box-sizing: border-box;}
.sec_meal .slide_01 .txt{ padding: 10px 0 0;}
.sec_meal .slide_01 .txt span{ line-height: 1.4;}
.sec_meal .slide_01 .txt span.en{ font-size: 16px;}
.sec_meal .slide_01 .txt span.ja{ font-size: 12px;}
.sec_meal .box_01{ padding: 30px 0 0;}
.sec_meal .txt_01{ font-size: 16px; line-height: 1.7; letter-spacing: 0.1em;}
.sec_meal .list_01{ font-size: 15px; margin: 30px 0 0;}
.sec_meal .list_01 > div{ display: block;}
.sec_meal .list_01 dt,
.sec_meal .list_01 dd{ display: block; line-height: 1.7; padding: 15px 0 5px; box-sizing: border-box;}
.sec_meal .list_01 dt{ width: 100%;}
.sec_meal .list_01 dd{ width: 100%; padding: 0 0 15px;}
}

/* ---------------------------------------------------
Section Information
------------------------------------------------------ */
.sec_info{ padding: 80px 0;}
.sec_info .img_01{ width: 100%; height: 900px;}
.sec_info .img_01 img{ object-fit: cover;}
.sec_info .list_01{ border-top: solid 1px #aaa; margin: 50px 0 0;}
.sec_info .list_01 > div{ border-bottom: solid 1px #aaa; display: table; width: 100%;}
.sec_info .list_01 dt,
.sec_info .list_01 dd{ display: table-cell; font-size: 16px; line-height: 2; padding: 30px 20px; text-align: left; vertical-align: top;}
.sec_info .list_01 dt{ width: 10em; font-weight: bold;}
.sec_info .list_01 dd{ width: calc( 100% - 10em );}
.sec_info .tit_02{ color: #987356; padding: 1em 0 0 0;}
.sec_info .tit_02:first-of-type{ padding: 0;}
.sec_info .list_01 dd .tbl_01{ margin: 10px 0 0;}
.sec_info .list_01 dd .tbl_01 th{ font-weight: normal;}
.sec_info .list_01 dd .list_note li{ padding: 0 0 5px 0.7em; text-indent: -0.7em; line-height: 2;}

@media screen and (max-width: 600px) {
.sec_info{ padding: 0 0 50px 0;}
.sec_info .img_01{ height: 350px;}
.sec_info .list_01{ font-size: 15px; margin: 30px 0 0;}
.sec_info .list_01 > div{ display: block;}
.sec_info .list_01 dt,
.sec_info .list_01 dd{ display: block; line-height: 1.7; padding: 15px 0 5px; box-sizing: border-box;}
.sec_info .list_01 dt{ width: 100%;}
.sec_info .list_01 dd{ width: 100%; padding: 0 0 15px;}
.sec_info .list_01 dd .tbl_01{ margin: 10px 0 0; display: block;}
.sec_info .list_01 dd .tbl_01 th,
.sec_info .list_01 dd .tbl_01 td{ display: inline-block;}
.sec_info .list_01 dd .list_note li{ padding: 0 0 10px 0.7em; line-height: 1.7;}
}

/* ---------------------------------------------------
Section Access
------------------------------------------------------ */
.sec_access{ padding: 80px 0 0;}
.sec_access .box_gmap,
.sec_access .box_gmap iframe{ width: 100%; height: 900px;}
.sec_access .box_gmap iframe{ filter: grayscale(1);}
.sec_access .sec_in{ display: flex; justify-content: space-between; border-bottom: solid 1px #a69061; padding: 50px 0 40px;}
.sec_access .sec_in:first-of-type{ padding: 0 0 40px;}
.sec_access .tit_02{ width: 20%; max-width: 200px;}
.sec_access .tit_02 span{ display: block;}
.sec_access .tit_02 span.en{ font-size: 35px; font-weight: 500; line-height: 1; letter-spacing: 0; color:rgba(152,115,86,0.6);}
.sec_access .tit_02 span.ja{ font-size: 18px; color:rgba(152,115,86,1); padding: 10px 0 0;}
.sec_access .list_01{ width: 80%; max-width: 800px;}
.sec_access .list_01 dt{ font-size: 18px; padding: 0 0 10px; color: #987356;}
.sec_access .list_01 dt::before{ content: "▼"; color: #987356;}
.sec_access .list_01 dd{ padding: 0 0 1.3em 1.3em; letter-spacing: 0.1em;}

@media screen and (max-width: 600px) {
.sec_access{ padding: 0;}
.sec_access .box_gmap,
.sec_access .box_gmap iframe{ width: 100%; height: 300px;}
.sec_access .sec_in{ padding: 30px 0 20px; flex-direction: column;}
.sec_access .tit_02{ width: 100%; max-width: 100%; display: flex; align-items: baseline; padding: 0 0 20px;}
.sec_access .tit_02 span.en{ font-size: 28px;}
.sec_access .tit_02 span.ja{ font-size: 16px; padding: 0 0 0 0.5em;}
.sec_access .list_01{ width: 100%; max-width: 100%;}
.sec_access .list_01 dt{ font-size: 16px; line-height: 1.7; padding: 0 0 5px;}
.sec_access .list_01 dd{ font-size: 14px; line-height: 1.9; padding: 0 0 20px 1.3em; letter-spacing: 0.1em;}
}