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

/* ---------------------------------------------------
Eye-catch Image
------------------------------------------------------ */
.box_eyecatch{ position: relative; overflow: hidden;}
.box_eyecatch::before{ content: ""; display: block; width: 100%; height: 180px; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); position: absolute; top: 0; left: 0; z-index: 2;}
.box_eyecatch .box_slide{ position: relative; z-index: 1; line-height: 0; font-size: 0; height: 100vh;}
.box_eyecatch .img{ width: 100%; height: auto;}
.box_eyecatch .box_slide .slick-slide{ opacity: 1 !important; }
.box_eyecatch .box_slide .slick-list,
.box_eyecatch .box_slide .slick-track,
.box_eyecatch .box_slide .slick-slide > div{ height: 100%;}
.box_eyecatch .box_slide .slideobject{ height: 100%; opacity: 0; transition: 0s; /*padding-top: 50%;*/ position: relative; z-index: 10; overflow: hidden; display: flex !important; justify-content: center; align-items: center;}
.box_eyecatch .box_slide .slideobject .img{ background-size: cover; background-repeat: no-repeat; background-position: 100% 50%; width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; }
.box_eyecatch .box_slide .slick-active .slideobject{ opacity: 1; transition: linear .7s; }
.box_eyecatch .box_slide .slick-continue .slideobject{ opacity: 0; transition: linear .7s; }
.box_eyecatch .box_slide .img{ transform: inherit; transition: inherit; }
.box_eyecatch .box_slide .slick-active .img{ transform: inherit; transition: inherit;  }
.box_eyecatch .box_slide .slick-continue .img{ transform: inherit; transition: inherit; }
.box_eyecatch .slick-dots{ bottom: 15px;}
.box_eyecatch .slick-dots li{ margin: 0;}
.box_eyecatch .slick-dots li button:before{ color: #fff; content: "○"; opacity: 1; font-size: 10px;}
.box_eyecatch .slick-dots li.slick-active button:before{ color: #fff; content: "●";}
.box_eyecatch .copy{ position: relative; z-index: 11; filter: drop-shadow(0px 0px 4px rgba(0,0,0,1)); font-size: 28px; line-height: 1.7; color: #fff; text-align: center; letter-spacing: 0.1em;}

@media screen and (max-width: 600px) {
.box_eyecatch{ width: 100%; margin: 0; overflow: hidden;}
.box_eyecatch .box_slide{ height: 550px; min-height: 0;}
.box_eyecatch .box_slide .slideobject{ padding-top: 60px;}
.box_eyecatch .copy{ font-size: 20px; line-height: 1.7; letter-spacing: 0.1em;}
}

/* ---------------------------------------------------
Wrapper 01
------------------------------------------------------ */
.wrap_01{ background: url("../../img/wrap1_bg_01.webp") no-repeat center top; background-size: cover;}
.wrap_01 .tax{display: flex;justify-content: space-between;    margin-bottom: 80px;}
.wrap_01 .tax a{align-items: center; line-height: 1; padding: 15px 55px; height: 100%; box-sizing: border-box;border: solid 1px #ffffff;text-decoration: none;}
.wrap_01 .tax a:hover{opacity: 0.7; background: #ffffff1d;}

@media screen and (max-width: 600px) {
.wrap_01{ background: url("../../img/wrap1_bg_02.webp") no-repeat center top; background-size: cover;}
.wrap_01 .tax {flex-direction: column;margin-bottom:50px;}
.wrap_01 .tax a{text-align: center;    padding: 15px 0;font-size: 15px;line-height: normal;}
.wrap_01 .tax a:nth-child(2){margin-top: 30px;}
}

/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
.sec_lead{ padding: 170px 0 0;}
.sec_lead .box_in{ display: flex; justify-content: space-between; flex-direction: row-reverse;}
.sec_lead .box_txt{ width: 560px;}
.sec_lead .tit{ font-size: 80px; line-height: 1.2; color: rgba(255,255,255,0.2); padding: 0 0 40px;}
.sec_lead .copy{ font-size: 36px; line-height: 1.2; padding: 0 0 30px;}
.sec_lead .txt{ font-size: 16px; line-height: 2.7;}
.sec_lead .box_img{ width: 600px;}
.sec_lead .box_img img{ width: 100%; height: auto; margin: 0 0 30px;}

@media screen and (max-width: 600px) {
.sec_lead{ padding: 50px 0 0;}
.sec_lead .box_in{ display: flex; justify-content: space-between; flex-direction: column;}
.sec_lead .box_txt{ width: 100%;}
.sec_lead .tit{ font-size: 46px; line-height: 1.2; color: rgba(255,255,255,0.2); padding: 0 0 20px;}
.sec_lead .copy{ font-size: 23px; line-height: 1.2; padding: 0 0 10px;}
.sec_lead .txt{ font-size: 15px; line-height: 1.8; padding: 0 0 15px;}
.sec_lead .box_img{ width: 100%;}
.sec_lead .box_img img{ width: 100%; height: auto; margin: 0 0 15px;}
}

/* ---------------------------------------------------
Section Access
------------------------------------------------------ */
.sec_access { padding: 150px 0;}
.sec_access .box_in{ position: relative;}
.sec_access .tit{ font-size: 38px; line-height: 1.2; padding: 0 0 30px; text-align: center;}
.sec_access .txt{ font-size: 16px; line-height: 2; padding: 0 0 30px; text-align: center;}
/*.sec_access .leaflet-container { z-index: 1; display: none;}*/
.sec_access .btn_01{ position: absolute; bottom: 0; right: 0;}

@media screen and (max-width: 600px) {
.sec_access { padding: 50px 0;}
.sec_access .tit{ font-size: 26px; line-height: 1.2; padding: 0 0 15px; text-align: center;}
.sec_access .txt{ font-size: 15px; line-height: 1.8; padding: 0 0 20px; text-align: left;}
.sec_access .box_map{ }
/*.sec_access .box_map{ border: 1px solid #3a3a3a; background: #000; padding: 15px;}
.sec_access .leaflet-container { display: block; background: #000;}
.sec_access .leaflet-left { left: auto; right: 0; }
.sec_access .leaflet-left .leaflet-control { margin: 0; }*/
.sec_access .btn_01{ position: static;}
.sec_access .btn_01 a{ margin: 30px auto 0;}
}

/* ---------------------------------------------------
Section Charms
------------------------------------------------------ */
.sec_charms{ padding: 0 0 150px;}
.sec_charms .img_01{ width: 100%; position: relative; padding: 0 0 75px;}
.sec_charms .img_01 img{ width: 100%; height: auto;}
.sec_charms .img_01 .tit_01{ font-size: 150px; line-height: 1; color: rgba(255,255,255,0.15); position: absolute; bottom: 0; right: 5%;}
.sec_charms .copy_01{ text-align: center; font-size: 38px; line-height: 1; letter-spacing: 0.1em; padding: 100px 0 40px;}
.sec_charms .copy_01 em{ font-style: normal; font-size: 50px;}
.sec_charms .slide_01 .slick-slide{ width: 1200px; margin: 0 50px;}
.sec_charms .slide_01 .slick-arrow{ width: 60px; height: 60px; z-index: 10; top: 320px;}
.sec_charms .slide_01 .slick-next{ right: 50%; margin: 0 -660px 0 0;}
.sec_charms .slide_01 .slick-prev{ left: 50%; margin: 0 0 0 -660px;}
.sec_charms .slide_01 .slick-next::before,
.sec_charms .slide_01 .slick-prev::before{ content: ""; display: block; width: 50px; height: 50px; border-bottom: solid 1px #fff; border-right: solid 1px #fff;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.sec_charms .slide_01 .slick-next{ transform: rotate(-45deg);}
.sec_charms .slide_01 .slick-prev{ transform: rotate(135deg);}
.sec_charms .box_point{ position: relative;}
.sec_charms .box_point .box_num{ position: absolute; top: 0; left: 0; width: 130px; height: 130px; background: #000 url("../../img/charms_bg_01.webp") no-repeat left top; background-size: 125px; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 2;}
.sec_charms .box_point .box_num p{ font-size: 20px; line-height: 1;}
.sec_charms .box_point .box_num p.num{ font-size: 68px;}
.sec_charms .box_point picture{ position: relative; z-index: 1;}
.sec_charms .copy_02{ font-size: 23px; text-align: center; padding: 30px 0 0;}
.sec_charms .tit_02{ font-size: 35px; text-align: center;}
.sec_charms .txt_02{ font-size: 16px; text-align: center; padding: 10px 0 0;}

@media screen and (max-width: 600px) {
.sec_charms{ padding: 0 0 50px;}
.sec_charms .img_01{  padding: 0 0 30px;}
.sec_charms .img_01 .tit_01{ font-size: 60px; line-height: 1; right: 5%;}
.sec_charms .copy_01{ font-size: 26px; line-height: 1; letter-spacing: 0.1em; padding: 50px 0 30px;}
.sec_charms .copy_01 em{ font-size: 33px;}
.sec_charms .slide_01 .slick-list{ width: 80%; margin: 0 auto;}
.sec_charms .slide_01 .slick-slide{ width: auto; margin: 0 5px;}
.sec_charms .slide_01 .slick-arrow{ width: 30px; height: 30px; top: 80px;}
.sec_charms .slide_01 .slick-next{ margin: 0 -47% 0 0;}
.sec_charms .slide_01 .slick-prev{ margin: 0 0 0 -47%;}
.sec_charms .slide_01 .slick-next::before,
.sec_charms .slide_01 .slick-prev::before{ width: 20px; height: 20px; }
.sec_charms .box_point .box_num{ width: 60px; height: 60px; background-size: 50px;}
.sec_charms .box_point .box_num p{ font-size: 10px; line-height: 1;}
.sec_charms .box_point .box_num p.num{ font-size: 32px;}
.sec_charms .copy_02{ font-size: 18px; text-align: center; padding: 20px 0 0; line-height: 1.2;}
.sec_charms .tit_02{ font-size: 23px; text-align: center;}
.sec_charms .txt_02{ font-size: 15px; text-align: left; padding: 5px 0 0;}
}

/* ---------------------------------------------------
Section Type1
------------------------------------------------------ */
.sec_type1{ background-image: url("../../img/bg_deco_01.webp") , url("../../img/bg_01.webp"); background-repeat: no-repeat , repeat; background-position: left bottom , center center; background-size: 360px , 255px; padding: 120px 0 150px;}
.sec_type1 .tit_01{ text-align: center; font-size: 38px; line-height: 1.2; padding: 0 0 40px;}
.sec_type1 .box_img_01{ padding: 0 0 30px;}
.sec_type1 .box_img_01 img{ width: 100%; height: auto;}
.sec_type1 .box_in{ display: flex; justify-content: space-between;}
.sec_type1 .box_txt{ width: 550px;}
.sec_type1 .box_txt .copy{ font-size: 25px; line-height: 1.5; padding: 30px 0 30px;}
.sec_type1 .box_txt .txt{ font-size: 16px; line-height: 1.7;}
.sec_type1 .box_txt .btn_01{ margin: 40px 0 0;}
.sec_type1 .box_img_02{ width: 600px;}
.sec_type1 .box_img_02 img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_type1{  background-position: left bottom -30px , center center; background-size: 150px , 255px; padding: 50px 0 80px;}
.sec_type1 .tit_01{ text-align: center; font-size: 26px; line-height: 1.2; padding: 0 0 20px;}
.sec_type1 .box_img_01{ padding: 0 0 20px;}
.sec_type1 .box_in{ flex-direction: column;}
.sec_type1 .box_txt{ width: 100%;}
.sec_type1 .box_txt .copy{ font-size: 20px; line-height: 1.5; padding: 0 0 30px;}
.sec_type1 .box_txt .txt{ font-size: 15px; line-height: 1.7;}
.sec_type1 .box_txt .btn_01{ margin: 30px 0;}
.sec_type1 .box_txt .btn_01 a{ margin: 0 auto;}
.sec_type1 .box_img_02{ width: 80vw; margin: 0 auto;}
}

/* ---------------------------------------------------
Section Type2
------------------------------------------------------ */
.sec_type2{ background-image: url("../../img/bg_deco_02.webp"); background-repeat: no-repeat; background-position: right bottom; background-size: 360px; background-color: #000; padding: 120px 0 150px;}
.sec_type2 .tit_01{ text-align: center; font-size: 38px; line-height: 1.2; padding: 0 0 40px;}
.sec_type2 .box_img_01{ padding: 0 0 30px;}
.sec_type2 .box_img_01 img{ width: 100%; height: auto;}
.sec_type2 .box_in{ display: flex; justify-content: space-between; flex-direction: row-reverse;}
.sec_type2 .box_txt{ width: 550px;}
.sec_type2 .box_txt .copy{ font-size: 25px; line-height: 1.5; padding: 30px 0 30px;}
.sec_type2 .box_txt .txt{ font-size: 16px; line-height: 1.7;}
.sec_type2 .box_txt .btn_01{ margin: 40px 0 0;}
.sec_type2 .box_img_02{ width: 600px;}
.sec_type2 .box_img_02 img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_type2{ background-position: right bottom -30px; background-size: 150px; padding: 50px 0 80px;}
.sec_type2 .tit_01{ text-align: center; font-size: 26px; line-height: 1.2; padding: 0 0 20px;}
.sec_type2 .box_img_01{ padding: 0 0 20px;}
.sec_type2 .box_in{ flex-direction: column;}
.sec_type2 .box_txt{ width: 100%;}
.sec_type2 .box_txt .copy{ font-size: 20px; line-height: 1.5; padding: 0 0 30px;}
.sec_type2 .box_txt .txt{ font-size: 15px; line-height: 1.7;}
.sec_type2 .box_txt .btn_01{ margin: 30px 0;}
.sec_type2 .box_txt .btn_01 a{ margin: 0 auto;}
.sec_type2 .box_img_02{ width: 80vw; margin: 0 auto;}
}

/* ---------------------------------------------------
Section Sightseeing
------------------------------------------------------ */
.sec_sightseeing{ background-image: url("../../img/bg_deco_02.webp"); background-repeat: no-repeat; background-position: right bottom; background-size: 360px; background-color: #000; padding: 120px 0 150px;}
.sec_sightseeing .box_in{ position: relative; min-height: 840px;}
.sec_sightseeing .tit_01{ width: 450px; font-size: 38px; line-height: 1.2;}
.sec_sightseeing .copy{ width: 450px; font-size: 25px; line-height: 1.5; padding: 30px 0;}
.sec_sightseeing .btn_01{ margin: 40px 0 0;}
.sec_sightseeing .txt{ width: 450px; font-size: 16px; line-height: 1.7; padding: 30px 0 0;}
.sec_sightseeing .box_imgs{ position: absolute; top: 0; right: 0; width: 100%;}
.sec_sightseeing .box_imgs .img_01{ position: absolute; top: 0; right: 0; width: 700px;}
.sec_sightseeing .box_imgs .img_02{ position: absolute; top: 440px; left: 0; width: 540px;}
.sec_sightseeing .box_imgs .img_03{ position: absolute; top: 540px; right: 40px; width: 503px;}
.sec_sightseeing .box_imgs .cap{ position: absolute; bottom: 0; right: 0; background: #000; padding: 10px 15px; font-size: 15px; line-height: 1; }
.sec_sightseeing .box_imgs img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_sightseeing{ background-position: right bottom -30px; background-size: 150px; padding: 50px 0 100px;}
.sec_sightseeing .box_in{ min-height: auto;}
.sec_sightseeing .tit_01{ width: 100%; font-size: 26px; line-height: 1.2; text-align: center;}
.sec_sightseeing .copy{ width: 100%; font-size: 20px; line-height: 1.5; padding: 30px 0;}
.sec_sightseeing .btn_01{ margin: 30px 0 0;}
.sec_sightseeing .btn_01 a{ margin: 0 auto;}
.sec_sightseeing .txt{ width: 100%; font-size: 15px; line-height: 1.7; padding: 30px 0 0;}
.sec_sightseeing .box_imgs{ position: relative; top: 0; right: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.sec_sightseeing .box_imgs .img_01{ position: relative; top: auto; right: auto; width: 100%; padding: 0 0 2%;}
.sec_sightseeing .box_imgs .img_02{ position: relative; top: auto; left: auto; width: 46.5%;}
.sec_sightseeing .box_imgs .img_03{ position: relative; top: auto; right: auto; width: 51.5%;}
.sec_sightseeing .box_imgs .cap{ font-size: 10px; line-height: 1; }
}

/* ---------------------------------------------------
Section Information
------------------------------------------------------ */
.sec_info{ background-image: url("../../img/bg_01.webp"); background-repeat: repeat; background-position: center center; background-size: 255px; padding: 160px 0 220px;}
.sec_info .tit_01{ font-size: 38px; line-height: 1.2; text-align: center; padding: 0 0 70px;}
.sec_info .data{ font-size: 16px; line-height: 1.7;}
.sec_info .data > div{ display: flex; }
.sec_info .data dt,
.sec_info .data dd{ border-bottom: solid 1px #5d5d5d; padding: 20px 30px;}
.sec_info .data dt{ width: 20%; background: #3e3e3e;}
.sec_info .data dd{ width: 80%;}

@media screen and (max-width: 600px) {
.sec_info{ padding: 70px 0 80px;}
.sec_info .tit_01{ font-size: 26px; line-height: 1.2; text-align: center; padding: 0 0 30px;}
.sec_info .data{ font-size: 15px; line-height: 1.7;}
.sec_info .data > div{ display: block; }
.sec_info .data dt,
.sec_info .data dd{ border-bottom: none; box-sizing: border-box;}
.sec_info .data dt{ width: 100%; padding: 15px; border-bottom: none;}
.sec_info .data dd{ width: 100%; padding: 15px 0 20px;}
}