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

/* ---------------------------------------------------
Eye-catch Image & Movie
------------------------------------------------------ */
.box_eyecatch{ width: 100%; height: auto; overflow: hidden; font-size: 0;}
.box_eyecatch .eyecatch_img{ position: relative; height: 100vh; overflow: hidden;}
.box_eyecatch .eyecatch_img .box_slide{ position: relative; z-index: 1; line-height: 0;}
.box_eyecatch .eyecatch_img .img{ width: 100%; height: auto;}
.box_eyecatch .eyecatch_img .box_slide .slick-slide{ opacity: 1 !important; }
.box_eyecatch .eyecatch_img .box_slide .slideobject{ opacity: 0; transition: 0s; height: 100vh !important;}
.box_eyecatch .eyecatch_img .box_slide .slick-active .slideobject{ opacity: 1; transition: linear 5.0s; }
.box_eyecatch .eyecatch_img .box_slide .slick-continue .slideobject{ opacity: 0; transition: linear 5.0s; }
.box_eyecatch .eyecatch_img .box_slide .img{ transform: scale(1.0, 1.0); transition: 0s; }
.box_eyecatch .eyecatch_img .box_slide .slick-active .img{ transform: scale(1.1, 1.1); transition: linear 8s;  }
.box_eyecatch .eyecatch_img .box_slide .slick-continue .img{ transform: scale(1.2, 1.2); transition: linear 8s; }
.slideobject{ padding-top: 130%; position: relative; z-index: 10; overflow: hidden; vertical-align: bottom; }
.slideobject .img{ background-size: cover; background-repeat: no-repeat; background-position: 100% 50%; width: 100%; height: 100vh !important; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; }
.box_eyecatch .eyecatch_img .copy{ font-size: 52px; line-height: 1.7; color: #fff; /*filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.6));*/ position: absolute; top: 50%; left: 10%; margin: -2.55em auto 0; z-index: 3;}

@media screen and (max-width: 600px) {
.box_eyecatch .eyecatch_img{ height: 450px;}
.box_eyecatch .eyecatch_img .box_slide .slideobject{ height: 450px !important;}
.box_eyecatch .eyecatch_img .box_slide .img{ height: 450px !important;}
.box_eyecatch .eyecatch_img .copy{ font-size: 26px; margin: -1em auto 0;}
}


/* ---------------------------------------------------
Section Search 489ban
------------------------------------------------------ */
.sec_search{ background: #f2f0eb; padding: 40px 0; position: relative; z-index: 4;}
.sec_search .inner{ display: flex; justify-content: space-between;}
.sec_search .tit{ font-size: 20px; display: flex; align-items: center; justify-content: center; border-right: solid 1px #ccc; width: 280px;}
.sec_search #search_489ban{ padding: 0 20px 0 70px;}
.sec_search #search_489ban form{ display: flex; align-items: flex-start; flex-wrap: wrap; position: relative;}
.sec_search .date_489ban,
.sec_search .stay_489ban,
.sec_search .tag_list_489ban{ display: flex; align-items: center; flex-wrap: wrap; font-size: 16px; }
.sec_search .date_489ban dt{ padding: 0 10px 0 0;}
.sec_search .date_489ban input[type="text"] { width: 180px; height: 50px; padding: 10px 15px; border: solid 1px #aaa; border-radius: 0; outline: none; background: #fff url("../img/common/ico_calender_01.svg") no-repeat right 10px center; background-size: 18px; box-sizing: border-box; font-size: 16px; margin: 0 10px 0 0; color: #000;}
.sec_search .date_489ban input[type="text"]:disabled { color: #ccc;}
.sec_search .date_489ban dd{ display: flex; align-items: center;}
.sec_search .stay_489ban{ padding: 0 0 0 20px;}
.sec_search .stay_489ban dt{ padding: 0 10px 0 0;}
.sec_search .stay_489ban select{ height: 50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; border: solid 1px #aaa; padding: 10px 25px 10px 15px; background: #fff url(../img/common/ico_arrow_01.svg) no-repeat right 10px center; background-size: 11px; outline: none; box-sizing: border-box; font-size: 16px; color: #000;}
.sec_search .stay_489ban select::-ms-expand {	display: none;}
.sec_search input[ type="checkbox"]{ padding: 0; vertical-align: text-top; margin: 2px 5px 0 0;}
.sec_search .tag_489ban{ width: 100%; display: flex; align-items: center; align-items: flex-start; padding: 15px 0 0; font-size: 16px;}
.sec_search .tag_489ban dt{ flex-shrink: 0; padding: 0 20px 0 0;}
.sec_search .tag_list_489ban li{ padding: 0 15px 0 0;}
.sec_search .tag_mode_489ban{ display: none;}
.sec_search button{ border-radius: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-appearance: button; appearance: button; border: none; cursor: pointer; outline:none; position: absolute; top: 0; right: 0; width: 180px; height: 50px; background: #444; color: #fff; font-size: 15px; line-height: 50px; display: flex; justify-content: center; align-items: center; transition: all 0.5s;}
.sec_search button:hover{ text-decoration: none; background: #606060; color: #fff;}
.sec_search button:before{ content: ""; display: block; width: 14px; height: 14px; background: url("../img/common/ico_loupe_01.svg") no-repeat left center; background-size: 14px; display: block; margin: 0 5px 0 0;}
.sec_search .btn_01{ align-self: flex-start; width: 250px; height: 50px; background: #cb5219; color: #fff; font-size: 15px; line-height: 50px; display: flex; justify-content: center; align-items: center; transition: all 0.5s;}
.sec_search .btn_01:hover{ text-decoration: none; background: #E4652A; color: #fff;}
.sec_search .btn_01:before{ content: ""; display: block; width: 18px; height: 18px; background: url("../img/common/ico_bag_01.svg") no-repeat left center; background-size: 18px; display: block; margin: 0 5px 0 0;}
.sec_search .btn_01.map { margin-top: 10px; color: #fff; background: #c69465; }
.sec_search .btn_01.map:before { background: url("../img/common/ico_map_w.svg")no-repeat center/contain; }

@media screen and (min-width: 601px) {
	.sec_search .btn_01.map { display: none; }
}
@media screen and (max-width: 600px) {
.sec_search{ padding: 40px 0;}
.sec_search .inner{ flex-direction: column;}
.sec_search .tit{ font-size: 18px; border-right: none; border-bottom: solid 1px #ccc; width: 100%; padding: 0 0 10px;}
.sec_search #search_489ban{ padding: 0 0 10px;}
.sec_search #search_489ban form{ flex-direction: column;}
.sec_search .date_489ban,
.sec_search .stay_489ban,
.sec_search .tag_list_489ban{ display: block; font-size: 15px; line-height: 1;}
.sec_search .date_489ban dt{ padding: 15px 0 10px 0;}
.sec_search .date_489ban input[type="text"] { width: 180px; height: 50px; padding: 10px 15px; font-size: 15px; margin: 0 10px 0 0; }
.sec_search .stay_489ban{ padding: 0;}
.sec_search .stay_489ban dt{ padding: 15px 0 10px;}
.sec_search .stay_489ban select{ height: 50px; padding: 10px 25px 10px 15px; font-size: 16px; }
.sec_search input[ type="checkbox"]{ margin: 2px 5px 0 0;}
.sec_search .tag_489ban{ display: block; padding: 15px 0 0; font-size: 16px;}
.sec_search .tag_489ban dt{ padding: 0 0 10px 0;}
.sec_search .tag_list_489ban{ display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding: 0 0 10px;}
.sec_search .tag_list_489ban li{ padding: 0 15px 10px 0; font-size: 14px;}
.sec_search button{ -webkit-box-sizing: border-box; box-sizing: border-box; position: static; width: 100%; height: 50px; font-size: 15px; line-height: 50px; }
.sec_search .btn_01{ width: 100%; height: 50px; font-size: 15px; line-height: 50px;}
}


/* ---------------------------------------------------
Section About
------------------------------------------------------ */
.sec_about{ background-color: #fff; background-image: url("../img/home/about_bg_01.png"); background-repeat: no-repeat; background-position: calc(50% + 230px) bottom; background-size: 930px; padding: 0; position: relative; z-index: 3;}
.sec_about .box_txt{ width: 600px; padding: 100px; box-sizing: content-box;}
.sec_about .tit{ line-height: 1.4;}
.sec_about .txt_01{ font-size: 26px; display: block; padding: 0 0 15px;}
.sec_about .txt_02{ font-size: 42px; color: #cb5219; display: block; padding: 0 0 30px;}
.sec_about .txt_03{ font-size: 16px; line-height: 2;}
.sec_about .txt_03 span { display: inline-block; font-size: 18px; font-weight: bold; line-height: 1.8; }

@media screen and (max-width: 600px) {
.sec_about{ background-position: center bottom; background-size: 100%;}
.sec_about .box_txt{ width: 92%; padding: 4% 4% 70%; margin: 0 auto;}
.sec_about .tit{ line-height: 1.4;}
.sec_about .txt_01{ font-size: 16px; padding: 0 0 10px;}
.sec_about .txt_02{ font-size: 20px; padding: 0 0 15px;}
.sec_about .txt_03{ font-size: 14px; line-height: 1.7;}
.sec_about .txt_03 span { margin: 3px 0; font-size: 15px; line-height: 1.5;}
}


/* ---------------------------------------------------
Section Charm
------------------------------------------------------ */
.sec_charm{ background: #fff; overflow: hidden; position: relative; z-index: 1;}
.sec_charm::before{ content: ""; position: absolute; top: 0; right: 0; width: 3000px; height: 3000px; background: #f2f0eb; transform: rotate(60deg); transform-origin: right top; z-index: -1;}
.sec_charm::after{ content: ""; position: absolute; bottom: 0; right: 0; width: 3000px; height: 300px; background: #f2f0eb; z-index: -1;}
.sec_charm .tit_01{ text-align: center; padding: 100px 0 80px;}
.sec_charm .tit_01 .copy_01{ font-size: 24px; display: block;}
.sec_charm .tit_01 .copy_02{ font-size: 50px; display: block;}
.sec_charm .tit_01 .copy_02 em{ font-style: normal; color: #cb5219;}

@media screen and (max-width: 600px) {
.sec_charm::after{ height: 150px;}
.sec_charm .tit_01{ padding: 50px 0 30px;}
.sec_charm .tit_01 .copy_01{ font-size: 14px;}
.sec_charm .tit_01 .copy_02{ font-size: 28px;}
}


/* ---------------------------------------------------
Section Charm > ONSEN
------------------------------------------------------ */
.sec_onsen{ display: flex; }
.sec_onsen .img_01{ width: 56%; margin: 0 0 50px; overflow: hidden;}
.sec_onsen .img_01 img{ width: 100%; height: 800px;}
.sec_onsen .box_txt{ width: 44%; padding: 0 6.25%;}
.sec_onsen .tit .en{ font-size: 130px; line-height: 1; color: #ddd0c4; display: block; margin: 0 0 0 -50px; white-space: nowrap;}
.sec_onsen .tit .en::first-letter{ font-size: 180px;}
.sec_onsen .tit .ja{ font-size: 40px; line-height: 1.5; color: #cb5219; display: block; padding: 10px 0 50px;}
.sec_onsen .txt{ font-size: 16px; line-height: 2; max-width: 400px;}
.sec_onsen .img_02{ width: 500px; padding: 50px 0 0; overflow: hidden;}
.sec_onsen .img_02 img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_onsen{ flex-direction: column-reverse; }
.sec_onsen .img_01{ width: 92%; margin: 0 auto;}
.sec_onsen .img_01 img{ height: auto;}
.sec_onsen .box_txt{ width: 92%; padding: 0; margin: 0 auto;}
.sec_onsen .tit{ text-align: center;}
.sec_onsen .tit .en{ font-size: 70px; line-height: 1; margin: 0; white-space: nowrap;}
.sec_onsen .tit .en::first-letter{ font-size: 90px;}
.sec_onsen .tit .ja{ font-size: 20px; line-height: 1.5; padding: 0 0 10px;}
.sec_onsen .txt{ font-size: 14px; line-height: 1.7; max-width: 90%; width: 90%; margin: 0 auto;}
.sec_onsen .img_02{ width: 80%; padding: 20px 0; margin: 0 auto;}
}


/* ---------------------------------------------------
Section Charm > VILLA
------------------------------------------------------ */
.sec_villa{ position: relative;}
.sec_villa .img_01{ width: 1000px; position: absolute; left: 50%; top: 100px; margin: 0 0 0 -18.75%; z-index: 1; overflow: hidden;}
.sec_villa .img_01 img{ width: 100%; height: auto;}
.sec_villa .box_txt{ width: 37.5%; min-width: 600px; padding: 0 6.25% 80px; margin: 0 0 200px; background: #fff; position: relative; z-index: 2;}
.sec_villa .tit .en{ font-size: 130px; line-height: 1; color: #ddd0c4; display: block; white-space: nowrap;}
.sec_villa .tit .en::first-letter{ font-size: 180px;}
.sec_villa .tit .ja{ font-size: 40px; line-height: 1.5; color: #cb5219; display: block; padding: 10px 0 30px;}
.sec_villa .txt{ font-size: 16px; line-height: 2; max-width: 400px; padding: 0 0 20px;}

@media screen and (max-width: 600px) {
.sec_villa{ display: flex; flex-direction: column-reverse; width: 92%; margin: 0 auto; padding: 30px 0;}
.sec_villa .img_01{ width: 100%; position: static; margin: 20px auto 0;}
.sec_villa .box_txt{ width: 100%; min-width: 100%; padding: 0; margin: 0; text-align: center;}
.sec_villa .tit .en{ font-size: 70px; line-height: 1; white-space: nowrap;}
.sec_villa .tit .en::first-letter{ font-size: 90px;}
.sec_villa .tit .ja{ font-size: 20px; line-height: 1.5; padding: 0 0 10px;}
.sec_villa .txt{ font-size: 14px; line-height: 1.7; max-width: 100%; padding: 0 0 30px; text-align: left;}
}


/* ---------------------------------------------------
Section Food
------------------------------------------------------ */
.sec_food{ display: flex; padding: 100px 0;}
.sec_food .img_01{ width: 62.5%; overflow: hidden;}
.sec_food .img_01 img{ width: 100%; height: 600px;}
.sec_food .box_txt{ width: 37.5%; min-width: 600px; padding: 0 6.25% 6.25%;}
.sec_food .tit .en{ font-size: 130px; line-height: 1; color: #ddd0c4; display: block; white-space: nowrap;}
.sec_food .tit .en::first-letter{ font-size: 180px;}
.sec_food .tit .ja{ font-size: 40px; line-height: 1.5; color: #cb5219; display: block; padding: 10px 0 30px;}
.sec_food .txt{ font-size: 16px; line-height: 2; max-width: 400px; padding: 0 0 30px;}

@media screen and (max-width: 600px) {
.sec_food{ flex-direction: column-reverse; width: 92%; margin: 0 auto; padding: 30px 0;}
.sec_food .img_01{ width: 100%; padding: 20px 0 0;}
.sec_food .img_01 img{ height: auto;}
.sec_food .box_txt{ width: 100%; min-width: 100%; padding: 0; text-align: center;}
.sec_food .tit .en{ font-size: 70px; line-height: 1; white-space: nowrap;}
.sec_food .tit .en::first-letter{ font-size: 90px;}
.sec_food .tit .ja{ font-size: 20px; line-height: 1.5; padding: 0 0 10px;}
.sec_food .txt{ font-size: 14px; line-height: 1.7; max-width: 100%; padding: 0 0 20px; text-align: left;}
}


/* ---------------------------------------------------
Section 
------------------------------------------------------ */
.sec_area{ background: #f2f0eb; padding: 70px 0 100px;}
.sec_area .tit{ text-align: center; padding: 0 0 50px;}
.sec_area .tit .en{ font-size: 130px; line-height: 1; color: #ddd0c4; display: block;}
.sec_area .tit .en::first-letter{ font-size: 180px;}
.sec_area .tit .ja{ font-size: 36px; line-height: 1.5; padding: 20px 0 0; display: block;}
.sec_area .inner{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.sec_area .inner a{ position: relative; background: #000;}
.sec_area .inner a img{ transition: all 0.5s;}
.sec_area .inner a:hover img{ transform: scale(1.05); opacity: 0.8;}
.sec_area .txts{ position: absolute; bottom: 25px; right: 40px; color: #fff; line-height: 1.2;}
.sec_area .txt_01,
.sec_area .txt_02{ display: block; text-align: right;}
.sec_area .txt_01{ font-size: 80px;}
.sec_area .txt_02{ font-size: 70px; border-top: solid 1px #fff;}
.sec_area .img_01{ margin: 0 0 20px; overflow: hidden;}
.sec_area .img_01 .txt_01,
.sec_area .img_01 .txt_02{ text-align: center;}
.sec_area .img_02,
.sec_area .img_03,
.sec_area .img_04{ width: 49%; max-width: 590px; overflow: hidden;}
.sec_area .inner .img_04{margin: 20px 0 0;} 
.sec_area .inner img{ width: 100%; height: auto;}


@media screen and (max-width: 600px) {
.sec_area{ padding: 30px 0;}
.sec_area .tit{ padding: 0 0 20px;}
.sec_area .tit .en{ font-size: 70px; }
.sec_area .tit .en::first-letter{ font-size: 90px;}
.sec_area .tit .ja{ font-size: 18px; line-height: 1.5; padding: 5px 0 0;}
.sec_area .inner{ flex-direction: column;}
.sec_area .inner a{ position: relative;}
.sec_area .txts{ bottom: 15px; right: 20px;}
.sec_area .txt_01{ font-size: 40px;}
.sec_area .txt_02{ font-size: 35px;}
.sec_area .img_01{ margin: 0 0 10px;}
.sec_area .img_02,
.sec_area .img_03,.sec_area .img_04{ width: 100%; max-width: 100%;}
.sec_area .img_02{ margin: 0 0 10px;}
}


/* ---------------------------------------------------
Section News
------------------------------------------------------ */
.sec_news{ padding: 100px 0;}
.sec_news .inner{ display: flex; justify-content: space-between; min-height: 340px; position: relative;}
.sec_news .box_tit{ width: 420px;}
.sec_news .tit .en{ font-size: 100px; line-height: 1; color: #ddd0c4; display: block;}
.sec_news .tit .en::first-letter{ font-size: 150px;}
.sec_news .tit .ja{ font-size: 36px; line-height: 1.5; padding: 10px 0 30px; display: block;}
.sec_news .box_posts{ width: 780px; padding: 40px 0 0;}
.sec_news .box_posts ol{ list-style-type: none;}
.sec_news .box_posts li{ padding: 15px 0;}
.sec_news .box_posts li a{ display: block; clear: both; overflow: hidden; font-size: 16px; line-height: 1.7; padding: 0 0 0 20px; background: url("../img/common/ico_arrow_02.svg") no-repeat 0px 6px; background-size: 8px;}
.sec_news .box_posts li a time{ float: left; width: 120px;}
.sec_news .box_posts li a .post_tit{ float: right; width: calc( 100% - 120px );}
.sec_news .box_posts li a:hover .post_tit{ text-decoration: underline;}
.sec_news .cmn_btn_01{ width: 100px; position: absolute; top: 250px; left: 0;}

@media screen and (max-width: 600px) {
.sec_news{ padding: 40px 0;}
.sec_news .inner{ flex-direction: column; min-height: auto; position: relative;}
.sec_news .box_tit{ width: 100%;}
.sec_news .tit{ padding: 0 0 20px; text-align: center;}
.sec_news .tit .en{ font-size: 70px; }
.sec_news .tit .en::first-letter{ font-size: 90px;}
.sec_news .tit .ja{ font-size: 18px; line-height: 1.5; padding: 5px 0 0;}
.sec_news .box_posts{ width: 100%; padding: 0;}
.sec_news .box_posts li{ padding: 0 0 20px;}
.sec_news .box_posts li a{ font-size: 14px; line-height: 1.7; padding: 0 0 0 20px; background: url("../img/common/ico_arrow_02.svg") no-repeat 0px 4px; background-size: 8px;}
.sec_news .box_posts li a time{ float: none; width: 100%; display: block;}
.sec_news .box_posts li a .post_tit{ float: none; width: 100%; display: block;}
.sec_news .cmn_btn_01{ width: 100px; position: relative; top: inherit; left: 0; margin: 0 auto; display: block;}
}


/* ---------------------------------------------------
Section Covid-19
------------------------------------------------------ */
.sec_covid19{ padding: 0 0 150px;}
.sec_covid19 .inner{ border: solid 1px #ddd0c4; padding: 50px; display: flex; justify-content: space-between; align-items: flex-start;}
.sec_covid19 .box_txt{ width: 420px;}
.sec_covid19 .tit{ font-size: 26px; line-height: 1.5; color: #cb5219; display: block; padding: 0 0 15px;}
.sec_covid19 .txt{ font-size: 16px; line-height: 2;}
.sec_covid19 .icons{ width: 630px; display: flex; justify-content: space-between;}
.sec_covid19 .icons li{ width: 20%; position: relative; padding: 0 0 30px;}
.sec_covid19 .icons li img,
.sec_covid19 .icons li span{ display: block; margin: 0 auto;}
.sec_covid19 .icons li span{ position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 16px; line-height: 1;}

@media screen and (max-width: 600px) {
.sec_covid19{ padding: 0 0 50px;}
.sec_covid19 .inner{ padding: 20px 4% 30px; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column;}
.sec_covid19 .box_txt{ width: 100%;}
.sec_covid19 .tit{ font-size: 20px; line-height: 1.5; color: #cb5219; display: block; padding: 0 0 10px; text-align: center;}
.sec_covid19 .txt{ font-size: 14px; line-height: 1.7;}
.sec_covid19 .icons{ width: 80%; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto;}
.sec_covid19 .icons li{ width: 40%; position: relative; padding: 0 0 30px; margin: 20px 0 0;}
.sec_covid19 .icons li img,
.sec_covid19 .icons li span{ display: block; margin: 0 auto;}
.sec_covid19 .icons li img{ }
.sec_covid19 .icons li span{ position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 14px; line-height: 1;}
}