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

/* ---------------------------------------------------
	Section Eyecatch
------------------------------------------------------ */
.sec_eyecatch{ position: relative;}
.box_eyecatch{ width: 100%; height: auto; min-height: 1080px; 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: 100%;}
.box_eyecatch .box_slide .slick-slide{ opacity: 1 !important; }
.box_eyecatch .box_slide .slideobject{ height: 100vh; 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 5.0s; }
.box_eyecatch .box_slide .slick-continue .slideobject{ opacity: 0; transition: linear 5.0s; }
.box_eyecatch .box_slide .img{ transform: scale(1.0, 1.0); transition: 0s; }
.box_eyecatch .box_slide .slick-active .img{ transform: scale(1.05, 1.05); transition: linear 8s;  }
.box_eyecatch .box_slide .slick-continue .img{ transform: scale(1.1, 1.1); transition: linear 8s; }
.sec_eyecatch .movie{ width: 100px; height: 100px; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto auto; z-index: 30; white-space: nowrap;}
.sec_eyecatch .movie a{ width: 100%; height: 100%; font-size: 10px; text-align: center; display: flex; justify-content: center; align-items: flex-end; padding: 0 0 5px 0; box-sizing: border-box;}
.sec_eyecatch .movie a:hover{ opacity: 0.75; text-decoration: none;}
.sec_eyecatch .movie::before,
.sec_eyecatch .movie::after{ content: ""; position: absolute; top: 50%; left: 50%; transform-origin: center; pointer-events: none;}
.sec_eyecatch .movie:hover::before,
.sec_eyecatch .movie:hover::after{ opacity: 0.75;}
.sec_eyecatch .movie::before{ display: block; border: solid 1px #fff; width: 40px; height: 40px; border-radius: 40px; margin: -30px 0 0 -20px;}
.sec_eyecatch .movie::after{ display: block; margin: -15px 0 0 -3px; width: 0; height: 0; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 11px solid #ffffff; border-right: 0; }
.sec_eyecatch .box_in{ position: absolute; bottom: 80px; left: 60px; z-index: 31; display: flex; flex-direction: column; width: calc( 100% - 120px );}
.sec_eyecatch .headline{ display: flex; justify-content: flex-start; align-items: flex-start; font-size: 14px; line-height: 1.3;}
.sec_eyecatch .headline time,
.sec_eyecatch .headline a{ display: block; }
.sec_eyecatch .headline time{ padding: 0 1.2em 0 0; position: relative;}
.sec_eyecatch .headline time::after{ content: ""; display: block; width: 1px; height: 12px; background: #fff; position: absolute; right: 0; top: 0; bottom: 0; margin: auto 0;}
.sec_eyecatch .headline a{ overflow: hidden; margin: 0 0 0 1.2em; padding: 0 0 5px;}
.sec_eyecatch .headline a::after{ background: #6f6e6d;}
.sec_eyecatch .headline a span{ display: inline; padding: 0 40px 0 0; position: relative;}
.sec_eyecatch .headline a span::before,
.sec_eyecatch .headline a span::after{ content: ""; display: block; width: 35px; height: 1px; position: absolute; right: 0; bottom: 6px; transform-origin: right bottom; background: #6f6e6d;}
.sec_eyecatch .headline a span::before{ width: 8px; transform: rotate(30deg);}

@media screen and (max-width: 600px) {
.box_eyecatch{ min-height: auto;}
.sec_eyecatch .box_in{ position: absolute; bottom: 40px; left: 20px; z-index: 29; display: flex; flex-direction: column; width: calc( 100% - 40px );}
.sec_eyecatch .insta{ margin: 0 0 30px; display: block; font-size: 14px; line-height: 1;}
.sec_eyecatch .insta a{ padding: 5px 0 5px 25px; color: #6f6e6d;}
.sec_eyecatch .insta a::after{ background: #6f6e6d;}
.sec_eyecatch .insta a{ background: url("/common/img/ico_insta_01.svg") no-repeat left center; background-size: 15px; padding: 5px 0 5px 25px; color: #6f6e6d;}
.sec_eyecatch .insta a:hover{ background: url("/common/img/ico_insta_02.svg") no-repeat left center; background-size: 15px; color: #fff; text-decoration: none;}
.sec_eyecatch .headline{ display: flex; justify-content: flex-start; align-items: flex-start; font-size: 13px; line-height: 1.5;}
.sec_eyecatch .headline a:hover::after{ display: none !important;}
.sec_eyecatch .headline a span{ padding: 0;}
.sec_eyecatch .headline a span::before,
.sec_eyecatch .headline a span::after{ display: none;}
}

/* ---------------------------------------------------
JS Lity Style Overwrite
------------------------------------------------------ */
.lity-iframe .lity-container { width: 90% !important; max-width: 1200px !important; }
.lity-close{ width: 60px !important; height: 60px !important; font-size: 60px !important;}

/* ---------------------------------------------------
Box Search
------------------------------------------------------ */
.box_search{ padding: 30px 0; border-top: solid 1px #2b2b2b; border-bottom: solid 1px #2b2b2b; font-size: 14px; line-height: 1;}
.box_search .box_in{ display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; width: 100%;}
.box_search #search_489ban{ width: 100%;}
.box_search #search_489ban form,
.box_search #search_489ban .date_489ban,
.box_search #search_489ban .stay_489ban{ display: flex; align-items: center; margin: 0;}
.box_search #search_489ban form{ justify-content: space-between;}
.box_search #search_489ban .date_489ban dt,
.box_search #search_489ban .stay_489ban dt{ padding: 0 10px 0 0;}
.box_search #search_489ban .date_489ban input[type="text"]{ width: 180px;height: 30px; line-height: 30px; font-size: 15px; box-sizing: border-box; padding: 5px 10px; border: solid 1px #2b2b2b; border-radius: 0px; outline: none; background: url(../img/ico_cal_01.svg) right 10px center / 14px no-repeat #000; margin: 0px 10px 0px 0px; color: #fff; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;}
.box_search #search_489ban .stay_489ban select{ border-radius: 0; border: solid 1px #2b2b2b; font-size: 15px; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; line-height: 1.2; background: url(../img/ico_select_01.svg) no-repeat center right 10px #000; background-size: 12px; padding: 5px 30px 5px 10px; outline: none; width: 150px; height: 30px; color: #fff; appearance: none; cursor: pointer;}
.box_search #search_489ban .stay_489ban select::-ms-expand { display: none; }
.box_search #search_489ban .date_489ban input[type="text"]:disabled,
.box_search #search_489ban .date_489ban:has(input[type="text"]:disabled) + .inbox_489ban .stay_489ban select{ color: #444; pointer-events: none;}
.box_search #search_489ban .date_489ban dd,
.box_search #search_489ban .date_489ban label{ display: flex; align-items: center;}
.box_search #search_489ban input[ type="checkbox"] { appearance: none; height: 16px; width: 16px; margin: 0 5px 0 0; border: 1px solid #2b2b2b; border-radius: 0; position: relative; background-color: #000;}
.box_search #search_489ban input[ type="checkbox"]:checked { border: 1px solid #2b2b2b; background-color: #000; }
.box_search #search_489ban input[ type="checkbox"]:checked::before { content: ""; display: block; width: 10px; height: 5px; border-bottom: solid 2px #fff; border-left: solid 2px #fff; transform: rotate(-45deg); position: absolute; top: 0; right: 0; left: 0; margin: 2px auto; }
.box_search #search_489ban button{ text-align: center; color: #fff; background: #57492b; width: 25%; height: 30px; line-height: 30px; border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; outline:none; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; transition: background 0.6s ease;}
.box_search #search_489ban button:hover{ background: #6a5e47;}
.box_search .btn{ margin: 15px 0 0 30px;}
.box_search .btn a{ padding: 5px 20px 5px 0; position: relative;}
.box_search .btn a::before{ content: "＞"; position: absolute; top: 5px; right: 0;}
#ui-datepicker-div{ z-index: 100 !important;}

@media screen and (max-width: 600px) {
.box_search{ padding: 40px 0 30px; font-size: 13px; line-height: 1;}
.box_search .box_in{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 90%;}
.box_search #search_489ban{ width: 100%;}
.box_search #search_489ban form,
.box_search #search_489ban .date_489ban,
.box_search #search_489ban .stay_489ban{ align-items: flex-start; margin: 0 0 20px 0;}
.box_search #search_489ban form{ justify-content: space-between; flex-wrap: wrap;}
.box_search #search_489ban .date_489ban{ flex-direction: column; width: 100%;}
.box_search #search_489ban .stay_489ban{ flex-direction: column;}
.box_search #search_489ban .date_489ban dt,
.box_search #search_489ban .stay_489ban dt{ padding: 0 0 10px 0; text-align: left;}
.box_search #search_489ban .inbox_489ban{ width: 100%;}
.box_search #search_489ban .stay_489ban,
.box_search #search_489ban .stay_489ban dd{ width: 100%;}
.box_search #search_489ban .date_489ban input[type="text"]{ width: 100%; height: 30px; line-height: 30px; font-size: 14px; margin: 0 0 10px;}
.box_search #search_489ban .stay_489ban select{ width: 100%; height: 30px;}
.box_search #search_489ban .date_489ban dd{ flex-direction: column; align-items: flex-start; width: 100%;}
.box_search #search_489ban .date_489ban label{ align-items: flex-start;}
.box_search #search_489ban button{ width: 100%; height: 40px; line-height: 40px;}
.box_search .btn{ margin: 0 0 10px; line-height: 1.5;}
.box_search .btn,
.box_search .btn a{ width: 100%;}
}

/* ---------------------------------------------------
Section Concept
------------------------------------------------------ */
.sec_concept{ padding: 100px 0; background: url("/img/lg_en/concept_bg_01.webp") no-repeat; background-position: center top; background-size: 100%; position: relative; z-index: 1;}
.sec_concept .box_lead{ text-align: center; padding: 0; width: 90%; margin: 0 auto;}
.sec_concept .box_01{ min-height: 1100px;}
.sec_concept .box_01 .box_txt{ width: 470px; margin: 0 auto; padding: 150px 730px 0 0; box-sizing: content-box; position: relative; z-index: 2;}
.sec_concept .box_01 .box_map{ position: absolute; z-index: 1; top: 240px; left: 50%; margin: 0 0 0 -270px;}
.leaflet-control-container{ display: none;}
.sec_concept .txt_01{ font-size: 20px; line-height: 1.75; padding: 0 0 40px;}
.sec_concept .tit_01{ font-size: 20px; line-height: 1.75; position: relative; display: inline-block; margin: 0 0 60px;}
.sec_concept .tit_01::after{ content: ""; display: block; width: 90px; height: 1px; background: #818181; position: absolute; top: 50%; right: -110px;}
.sec_concept .txt_02{ font-size: 15px; line-height: 2.4; padding: 0 0 2.4em;}
.sec_concept .btn_01 a{ display: inline-block; width: auto; height: 40px; background: #343030; padding: 0 90px 0 80px; font-size: 15px; line-height: 40px; position: relative; transition: background 0.6s; box-sizing: border-box;}
.sec_concept .btn_01 a::before,
.sec_concept .btn_01 a::after{ content: ""; display: block; width: 35px; height: 1px; position: absolute; right: 40px; bottom: 19px; transform-origin: right bottom; background: #6f6e6d;}
.sec_concept .btn_01 a::before{ width: 8px; transform: rotate(30deg);}
.sec_concept .btn_01 a:hover{ text-decoration: none; background:#504A4A;}
.sec_concept .sec_traveltime{ padding: 40px 0 0;}
.sec_concept .tit_02{ font-size: 18px; line-height: 1.75; margin: 0 0 10px;}
.sec_concept .box_spots{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: 0 0 60px;}
.sec_concept .box_spots > div{ width: 32.8%;}
.sec_concept .box_spots img{ width: 100%; height: auto;}
.sec_concept .box_spots span{ font-size: 15px; line-height: 1.1; padding: 10px 0 0; display: block;}
.sec_concept .sec_traveltime .btn_01{ text-align: right;}

@media screen and (max-width: 600px) {
.sec_concept{ padding: 50px 0; background: none;}
.sec_concept .box_lead{ text-align: left; padding: 0; width: 90%; margin: 0 auto;}
.sec_concept .box_01{ min-height: auto;}
.sec_concept .box_01 .box_txt{ width: 90%; margin: 0 auto; padding: 20px 0 0 0;}
.sec_concept .box_01 .box_map_sp{ width: 90%; margin: 20px auto 0; border: solid 1px #646464;}
.leaflet-control-container{ display: block;}
.leaflet-container{ background: #000 !important;}
.sec_concept .txt_01{ font-size: 16px; line-height: 1.7; padding: 0 0 20px;}
.sec_concept .tit_01{ font-size: 18px; line-height: 1.7; margin: 0 0 30px;}
.sec_concept .txt_02{ font-size: 14px; line-height: 1.7; padding: 0 0 1.7em;}
.sec_concept .btn_01{ width: 100%;}
.sec_concept .btn_01 a{ display: block; width: 100%; height: auto; padding: 8px 20px; font-size: 14px; line-height: 1.4; text-align: center;}
.sec_concept .btn_01 a::before,
.sec_concept .btn_01 a::after{ right: 20px; bottom: 50%;}
.sec_concept .sec_traveltime{ padding: 20px 0 0;}
.sec_concept .tit_02{ font-size: 16px; line-height: 1.5; margin: 0 0 10px;}
.sec_concept .box_spots{ justify-content: flex-start; margin: 0 0 20px;}
.sec_concept .box_spots > div{ width: 48%; margin: 0 4% 10px 0;}
.sec_concept .box_spots > div:nth-of-type(2n){ margin: 0 0 10px 0;}
.sec_concept .box_spots span{ font-size: 11px; line-height: 1.3; padding: 10px 0;}
}

/* ---------------------------------------------------
Box Slide（横移動）
------------------------------------------------------ */
.box_slide { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; width: 100%; }
.box_slide .slide_side { position: relative; z-index: 0; grid-row: 1; grid-column: 1; min-width: 0; overflow: hidden; line-height: 0; pointer-events: none;}
.box_slide .slide_side .ofi { width: 110vw; min-width: 1150px; max-width: none; height: 1125px; transition: transform linear 15s; }
.box_slide .slide_side .active .ofi { transform: translateX(-10vw); }

@media screen and (max-width: 600px) {
.box_slide .slide_side .ofi { width: 110vw; min-width: 0; max-width: none; height: 600px; transition: transform linear 10s;}
.box_slide .slide_side::after{ content: ""; width: 100%; height: 50px; display: block; background-image: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); position: absolute; bottom: 0; left: 0;}
}

/* ---------------------------------------------------
Section Rooms
------------------------------------------------------ */
.sec_rooms{ background-image: url("/img/home/rooms_bg_pc.webp"); background-repeat: no-repeat; background-position: calc( 50% + 400px ) bottom; position: relative; z-index: 2; margin: 0; padding: 0 0 390px 0; overflow: hidden;}
.sec_rooms .img_02 img,
.sec_rooms .img_03 img,
.sec_rooms .img_04 img{ width: 100%; height: auto;}
.sec_rooms .box_01{ position: relative; z-index: 1;}
.sec_rooms .box_01 .box_txt{ position: absolute; top: 320px; left: 50%; margin: 0 0 0 15%; z-index: 2; width: 400px;}
.sec_rooms .box_02{ position: relative; z-index: 2; min-height: 1000px;}
.sec_rooms .box_02 .img_02{ position: absolute; top: -90px; left: calc( 50% -  670px ); z-index: 3; width: 698px; height: 479px;}
.sec_rooms .box_02 .img_03{ position: absolute; top: 170px; left: calc( 50% + 130px ); z-index: 2; width: 480px; height: 359px;}
.sec_rooms .box_02 .img_04{ position: absolute; top: 250px; left: calc( 50% - 600px ); z-index: 1; width: 1046px; height: 783px}
.sec_rooms .box_02 .box_txt{ position: absolute; bottom: 130px; left: 50%; margin: 0 0 0 15%; z-index: 3; width: 400px;}
.sec_rooms .tit{ overflow: hidden; padding: 0 0 30px;}
/*.sec_rooms .tit span.ja{ display: block; font-size: 15px; line-height: 1.1; padding: 0 0 10px;}*/
.sec_rooms .tit span.en{ display: block; font-size: 45px; line-height: 1.1; position: relative; width: 100%}
.sec_rooms .tit span.en::after{ content: ""; width: 200px; height: 1px; background: rgba(255, 255, 255, 0.5); position: absolute; top: calc(50% - 3px); right: 0;}
.sec_rooms .txt_01{ font-size: 15px; line-height: 2.1; padding: 0 0 30px;}
.sec_rooms .txt_02{ font-size: 12px; line-height: 2.3; color: rgba(255, 255, 255, 0.5);}
.sec_rooms .box_03{ width: 80%; max-width: 1200px; margin: 0 auto; padding: 50px 0 0;}
.sec_rooms .list_01{ font-size: 15px; line-height: 1.5;}
.sec_rooms .list_01 > div{ display: flex; justify-content: space-between; border-bottom: solid 1px #333;}
.sec_rooms .list_01 dt,
.sec_rooms .list_01 dd{ box-sizing: border-box; text-align: left;}
.sec_rooms .list_01 dt{ width: 35%; padding: 40px 0 40px 50px; background: #1a1a1a;}
.sec_rooms .list_01 dd{ width: 65%; padding: 40px 50px;}

@media screen and (max-width: 600px) {
.sec_rooms{ background-image: url("/img/home/rooms_bg_sp.webp"); background-position: left bottom; background-size: 100%; margin: 0; padding: 0 0 100px 0;}
.sec_rooms .box_01{ display: flex; flex-direction: column-reverse;}
.sec_rooms .box_01 .box_txt{ position: static; margin: 0 auto; z-index: 2; width: 80%; padding: 10px 0 30px 0;}
.sec_rooms .box_02{ min-height: auto;}
.sec_rooms .box_02 .img_02{ position: absolute; top: 0; left: 5%; width: 53.3%; height: 135px;}
.sec_rooms .box_02 .img_03{ position: absolute; top: 75px; left: inherit; right: 0; width: 37.3%; height: 100px;}
.sec_rooms .box_02 .img_04{ position: absolute; top: 60px; left: 10%; z-index: 1; width: 80%; height: 220px;}
.sec_rooms .box_02 .box_txt{ position: static; margin: 0 auto; width: 80%; padding: 300px 0 0;}
.sec_rooms .tit{ padding: 0 0 30px;}
/*.sec_rooms .tit span.ja{ font-size: 14px; line-height: 1.1; padding: 0 0 10px;}*/
.sec_rooms .tit span.en{ font-size: 30px; line-height: 1.1;}
.sec_rooms .tit span.en::after{ width: 140px;}
.sec_rooms .txt_01{ font-size: 14px; line-height: 2.1; padding: 0 0 30px;}
.sec_rooms .txt_02{ font-size: 12px; line-height: 2.3;}
.sec_rooms .box_03{ width: 80%; max-width: 80%; padding: 20px 0 0;}
.sec_rooms .list_01{ font-size: 14px; line-height: 1.5;}
.sec_rooms .list_01 > div{ display: block; border-bottom: none;}
.sec_rooms .list_01 dt{ width: 100%; padding: 10px 15px;}
.sec_rooms .list_01 dd{ width: 100%; padding: 10px 15px 30px;}
}

/* ---------------------------------------------------
Section Spa
------------------------------------------------------ */
.sec_spa{ position: relative; z-index: 3; margin: -200px 0 0; padding: 0 0 100px 0; overflow: hidden;}
.sec_spa .box_01{ position: relative; z-index: 1;}
.sec_spa .box_01 .box_txt{ position: absolute; top: 320px; left: 50%; margin: 0 0 0 15%; z-index: 2; width: 400px;}
.sec_spa .tit{ overflow: hidden; padding: 0 0 30px;}
/*.sec_spa .tit span.ja{ display: block; font-size: 15px; line-height: 1.1; padding: 0 0 10px;}*/
.sec_spa .tit span.en{ display: block; font-size: 45px; line-height: 1.1; position: relative; width: 100%;}
.sec_spa .tit span.en::after{ content: ""; width: 260px; height: 1px; background: rgba(255, 255, 255, 0.5); position: absolute; top: calc(50% - 3px); right: 0;}
.sec_spa .txt_01{ font-size: 15px; line-height: 2.1; padding: 0 0 30px;}
.sec_spa .txt_02{ font-size: 12px; line-height: 2.3; color: rgba(255, 255, 255, 0.5);}
.sec_spa .box_02{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 190px 0 80px;}
.sec_spa .box_02 .sec_in{ width: 46.6%; margin: 0 0 50px;}
.sec_spa .box_02 .sec_in .box_img{ padding: 0 0 90px;}
.sec_spa .box_02 .sec_in .box_img.slide{ padding: 0 0 50px;}
.sec_spa .tit_02{ display: flex; justify-content: flex-start; align-items: center; padding: 0 0 30px;}
.sec_spa .tit_02 span{ display: block;}
/*.sec_spa .tit_02 span.ja{ font-size: 25px; line-height: 1.1; padding: 0 1em 0 0;}*/
.sec_spa .tit_02 span.en{ font-size: 25px; line-height: 1.1; /*color: rgba(255,255,255,0.5);*/}
.sec_spa .box_03{ background: #1a1a1a; padding: 70px 60px 120px; box-sizing: border-box;}
.sec_spa .box_03 .box_imgs{ display: flex; justify-content: space-between; align-items: stretch; padding: 0 0 30px;}
.sec_spa .box_03 .box_imgs > div{ width: 31.4%;}
.sec_spa .box_03 .box_imgs img{ width: 100%; height: auto; /*aspect-ratio: 4 / 3;*/}
.sec_spa .box_03 .box_txt{ font-size: 15px; line-height: 2;}
.sec_spa .tit_03{ display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 0 30px;}
.sec_spa .tit_03 span{ display: block;}
/*.sec_spa .tit_03 span.ja{ font-size: 15px; line-height: 1.1; padding: 0 0 10px;}*/
.sec_spa .tit_03 span.en{ font-size: 30px; line-height: 1.1;}

@media screen and (max-width: 600px) {
.sec_spa{ margin: 0; padding: 0 0 50px 0;}
.sec_spa .box_01{ display: flex; flex-direction: column-reverse;}
.sec_spa .box_01 .box_txt{ position: static; margin: 0 auto; z-index: 2; width: 80%; padding: 10px 0 0 0;}
.sec_spa .tit{ padding: 0 0 30px;}
.sec_spa .tit span.en{ font-size: 30px; line-height: 1.1;}
.sec_spa .tit span.en::after{ width: 160px;}
.sec_spa .txt_01{ font-size: 14px; line-height: 2.1; padding: 0 0 30px;}
.sec_spa .txt_02{ font-size: 12px; line-height: 2.3;}
.sec_spa .box_02{ flex-direction: column;  padding: 40px 0 20px; width: 80%;}
.sec_spa .box_02 .sec_in{ width: 100%; margin: 0 0 20px;}
.sec_spa .box_02 .sec_in .box_img{ padding: 0 0 50px;}
.sec_spa .box_02 .sec_in .box_img.slide{ padding: 0 0 10px;}
.sec_spa .tit_02{ padding: 0 0 20px;}
/*.sec_spa .tit_02 span.ja{ font-size: 20px; padding: 0 0.5em 0 0;}*/
.sec_spa .tit_02 span.en{ font-size: 20px;}
.sec_spa .box_03{ padding: 10% 5%;}
.sec_spa .box_03 .box_imgs{ flex-direction: column; padding: 0 0 20px;}
.sec_spa .box_03 .box_imgs > div{ width: 100%; padding: 0 0 25px;}
.sec_spa .box_03 .box_txt{ font-size: 14px; line-height: 1.7;}
.sec_spa .tit_03{ padding: 0 0 10%;}
/*.sec_spa .tit_03 span.ja{ font-size: 14px; padding: 0 0 10px;}*/
.sec_spa .tit_03 span.en{ font-size: 24px;}
}

/* ---------------------------------------------------
Section Facility
------------------------------------------------------ */
.sec_facility{ position: relative; z-index: 1; padding: 0; overflow: hidden;}
.sec_facility .box_01{ position: relative; z-index: 1;}
.sec_facility .box_01 .box_txt{ position: absolute; top: 320px; left: 50%; margin: 0 0 0 -600px; z-index: 2; width: 400px;}
.sec_facility .tit{ overflow: hidden; padding: 0 0 30px;}
/*.sec_facility .tit span.ja{ display: block; font-size: 15px; line-height: 1.1; padding: 0 0 10px;}*/
.sec_facility .tit span.en{ display: block; font-size: 45px; line-height: 1.1; position: relative; width: 100%;}
.sec_facility .tit span.en::after{ content: ""; width: 150px; height: 1px; background: rgba(255, 255, 255, 0.5); position: absolute; top: calc(50% - 3px); right: 0;}
.sec_facility .txt_01{ font-size: 15px; line-height: 2.1; padding: 0 0 30px;}
.sec_facility .txt_02{ font-size: 12px; line-height: 2.3; color: rgba(255, 255, 255, 0.5);}
.sec_facility .box_02{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 190px 0 80px;}
.sec_facility .box_02 .sec_in{ width: 46.6%; margin: 0 0 50px;}
.sec_facility .box_02 .sec_in .box_img{ padding: 0 0 90px;}
.sec_facility .box_02 .sec_in .box_img.slide{ padding: 0 0 50px;}
.sec_facility .tit_02{ display: flex; justify-content: flex-start; align-items: center; padding: 0 0 30px;}
.sec_facility .tit_02 span{ display: block;}
/*.sec_facility .tit_02 span.ja{ font-size: 25px; line-height: 1.1; padding: 0 1em 0 0;}*/
.sec_facility .tit_02 span.en{ font-size: 25px; line-height: 1.1; /*color: rgba(255,255,255,0.5);*/}
.sec_facility .box_03{ background: #1a1a1a; padding: 70px 0; box-sizing: border-box;}
.sec_facility .tit_03{ text-align: center; font-size: 20px; line-height: 1.1; padding: 0 0 100px;}
.sec_facility .box_03 .box_floor{ display: flex; justify-content: space-around; align-items: center;}
.sec_facility .box_03 .box_floor > div{ width: 505px;}
.sec_facility .txt_03{ font-size: 38px; line-height: 1; padding: 40px 0 0; display: block; text-align: center;}
.sec_facility .box_04{ width: 80%; max-width: 1200px; margin: 0 auto; padding: 60px 0 0;}
.sec_facility .list_01{ font-size: 15px; line-height: 1.5;}
.sec_facility .list_01 > div{ display: flex; justify-content: space-between; border-bottom: solid 1px #333;}
.sec_facility .list_01 dt,
.sec_facility .list_01 dd{ box-sizing: border-box; text-align: left;}
.sec_facility .list_01 dt{ width: 35%; padding: 40px 0 40px 50px; background: #1a1a1a;}
.sec_facility .list_01 dd{ width: 65%; padding: 40px 0 40px 50px;}

@media screen and (max-width: 600px) {
.sec_facility{ margin: 0; padding: 0;}
.sec_facility .box_01{ display: flex; flex-direction: column-reverse;}
.sec_facility .box_01 .box_txt{ position: static; margin: 0 auto; z-index: 2; width: 80%; padding: 10px 0 30px 0;}
.sec_facility .tit{ padding: 0 0 30px;}
.sec_facility .tit span.ja{ font-size: 14px; line-height: 1.1; padding: 0 0 10px;}
.sec_facility .tit span.en{ font-size: 30px; line-height: 1.1;}
.sec_facility .tit span.en::after{ width: 80px;}
.sec_facility .txt_01{ font-size: 14px; line-height: 2.1; padding: 0 0 30px;}
.sec_facility .txt_02{ font-size: 12px; line-height: 2.3;}
.sec_facility .box_02{ flex-direction: column;  padding: 40px 0 20px; width: 80%;}
.sec_facility .box_02 .sec_in{ width: 100%; margin: 0 0 20px;}
.sec_facility .box_02 .sec_in .box_img{ padding: 0 0 50px;}
.sec_facility .box_02 .sec_in .box_img.slide{ padding: 0 0 10px;}
.sec_facility .tit_02{ padding: 0 0 20px;}
/*.sec_facility .tit_02 span.ja{ font-size: 20px; padding: 0 0.5em 0 0;}*/
.sec_facility .tit_02 span.en{ font-size: 20px;}
.sec_facility .box_03{ padding: 40px 0;}
.sec_facility .tit_03{ font-size: 16px; line-height: 1.1; padding: 0;}
.sec_facility .box_03 .box_floor{ justify-content: center; flex-direction: column;}
.sec_facility .box_03 .box_floor > div{ width: 80%; margin: 40px auto 0;}
.sec_facility .txt_03{ font-size: 18px; line-height: 1; padding: 20px 0 0;}
.sec_facility .box_04{ width: 90%; max-width: 90%; padding: 40px 0 0;}
.sec_facility .list_01{ font-size: 14px; line-height: 1.5;}
.sec_facility .list_01 > div{ display: block; border-bottom: none;}
.sec_facility .list_01 dt{ width: 100%; padding: 10px 15px;}
.sec_facility .list_01 dd{ width: 100%; padding: 10px 15px 30px;}
}

/* ---------------------------------------------------
Common Parts
------------------------------------------------------ */
.cmn_inner{ display: flex; justify-content: space-between; min-height: 700px;}/*←縦書きのテキスト量に応じて調整が必要*/
.cmn_box_tit{ width: 26.6%; position: relative;}
.cmn_box_tit .tit{ display: flex; flex-direction: row-reverse; justify-content: center;}
.cmn_box_tit .tit span{ display: block; line-height: 1;}
.cmn_box_tit .tit span.ja{ font-size: 18px; padding: 0 0 0 50px;}
.cmn_box_tit .tit span.en{ font-size: 45px; transform: rotate(90deg); transform-origin: left top; position: absolute; top: 0; left: 52%; width: 100%; white-space: nowrap;}
.cmn_box_tit .txt{ position: absolute; top: 190px; left: 41%; font-size: 15px; line-height: 1;}
.cmn_box_tit .txt span.view_pc{ display: inline !important;}
.cmn_box_tit .txt span.two_dights{ text-combine-upright: all; }
.cmn_box_body{ width: 880px;}

.cmn_box_body .sec_in{ padding: 0 0 100px;}
.cmn_box_body .img_01{ padding: 0 0 30px;}
.cmn_box_body .tit_02{ font-size: 20px; padding: 0 0 10px;}
.cmn_box_body .txt_02{ font-size: 15px; padding: 0 0 30px;}
/*.cmn_box_body .btn_01{ text-align: right;}
.cmn_box_body .btn_01 a{ display: inline-block; width: auto; height: 40px; background: #343030; padding: 0 90px 0 80px; font-size: 15px; line-height: 40px; position: relative; transition: background 0.6s; box-sizing: border-box;}
.cmn_box_body .btn_01 a::before,
.cmn_box_body .btn_01 a::after{ content: ""; display: block; width: 35px; height: 1px; position: absolute; right: 40px; bottom: 19px; transform-origin: right bottom; background: #6f6e6d;}
.cmn_box_body .btn_01 a::before{ width: 8px; transform: rotate(30deg);}
.cmn_box_body .btn_01 a:hover{ text-decoration: none; background:#504A4A;}*/

@media screen and (max-width: 600px) {
.cmn_inner{ flex-direction: column; min-height: auto;}
.cmn_box_tit{ width: 100%; position: relative; padding: 0 0 30px;}
.cmn_box_tit .tit{ display: block;}
.cmn_box_tit .tit span{ display: block;}
.cmn_box_tit .tit span.ja{ font-size: 12px; padding: 0 0 10px; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;}
.cmn_box_tit .tit span.en{ font-size: 25px; transform: rotate(0deg); transform-origin: left top; position: static; width: 100%;}
.cmn_box_tit .txt{ padding: 10px 0 0; position: static; font-size: 14px; line-height: 1.7; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;}
.cmn_box_tit .txt span.view_pc{ display: none !important;}
.cmn_box_tit .txt span.view_sp{ display: inline !important;}
.cmn_box_body{ width: 100%;}

.cmn_box_body .sec_in{ padding: 0 0 50px;}
.cmn_box_body .sec_in:last-of-type{ padding: 0;}
.cmn_box_body .img{ padding: 0 0 10px;}
.cmn_box_body .tit_02{ font-size: 18px; padding: 0 0 10px;}
.cmn_box_body .txt_02{ font-size: 14px; padding: 0 0 15px;}
/*.cmn_box_body .btn_01{ text-align: right; width: 100%;}
.cmn_box_body .btn_01 a{ display: block; width: 100%; height: auto; background: #343030; padding: 8px 20px; font-size: 14px; line-height: 1.4; position: relative; transition: background 0.6s; text-align: center;}
.cmn_box_body .btn_01 a::before,
.cmn_box_body .btn_01 a::after{ content: ""; display: block; width: 35px; height: 1px; position: absolute; right: 40px; bottom: 19px; transform-origin: right bottom; background: #6f6e6d;}
.cmn_box_body .btn_01 a::before{ width: 8px; transform: rotate(30deg);}
.cmn_box_body .btn_01 a:hover{ text-decoration: none; background:#504A4A;}*/
}

/* ---------------------------------------------------
Section Option
------------------------------------------------------ */
.sec_option{ padding: 100px 0 0;}

@media screen and (max-width: 600px) {
.sec_option{ padding: 50px 0 0;}
}

/* ---------------------------------------------------
Section Blog
------------------------------------------------------ */
.sec_blog{ padding: 100px 0 0;}
.sec_blog .cmn_inner{ min-height: auto !important;}
.sec_blog ol{ margin: 0 0 30px; }
.sec_blog ol li{ border-bottom: solid 1px #313131; padding: 15px 40px; display: flex; justify-content: flex-start; align-items: flex-start; color: #6f6e6d; font-size: 15px; line-height: 1.5;}
.sec_blog ol li time{ width: 120px;}
.sec_blog ol li a{ width: calc( 100% - 120px); color: #6f6e6d; display: inline-block;}
.sec_blog ol li a:hover{ text-decoration: none; color: #fff;}

@media screen and (max-width: 600px) {
.sec_blog{ padding: 50px 0 0;}
.sec_blog ol{ margin: 0 0 20px;}
.sec_blog ol li{ padding: 10px 0; display: block; font-size: 14px; line-height: 1.3;}
.sec_blog ol li time{ width: 100%; display: block; padding: 0 0 5px;}
.sec_blog ol li a{ width: 100%; display: block;}
}

/* ---------------------------------------------------
Section Access
------------------------------------------------------ */
.sec_access{ padding: 100px 0 0;}
.sec_access .box_gmap,
.sec_access .box_gmap iframe{ width: 100%;}
.sec_access .box_gmap{ margin: 0 0 150px;}
.sec_access .box_gmap iframe{ filter: brightness(101%) grayscale(100%);}
.sec_access .sec_in{ padding: 0 0 70px;}
/*.sec_access .box_spots{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: 0 0 40px;}
.sec_access .box_spots > div{ width: 32.8%;}
.sec_access .box_spots img{ width: 100%; height: auto;}
.sec_access .box_spots span{ font-size: 15px; line-height: 1.1; padding: 10px 0 0; display: block;}*/

.sec_access .btn_01{ text-align: right;}
.sec_access .btn_01 a{ display: inline-block; width: auto; height: 40px; background: #343030; padding: 0 90px 0 80px; font-size: 15px; line-height: 40px; position: relative; transition: background 0.6s; box-sizing: border-box;}
.sec_access .btn_01 a::before,
.sec_access .btn_01 a::after{ content: ""; display: block; width: 35px; height: 1px; position: absolute; right: 40px; bottom: 19px; transform-origin: right bottom; background: #6f6e6d;}
.sec_access .btn_01 a::before{ width: 8px; transform: rotate(30deg);}
.sec_access .btn_01 a:hover{ text-decoration: none; background:#504A4A;}

@media screen and (max-width: 600px) {
.sec_access{ padding: 50px 0 0;}
.sec_access .box_gmap{ margin: 0 0 50px;}
.sec_access .box_gmap iframe{ height: 300px;}
.sec_access .sec_in{ padding: 0 0 30px;}
/*.sec_access .box_spots{ justify-content: flex-start; margin: 0 0 20px;}
.sec_access .box_spots > div{ width: 48%; margin: 0 4% 10px 0;}
.sec_access .box_spots > div:nth-of-type(2n){ margin: 0 0 10px 0;}
.sec_access .box_spots span{ font-size: 11px; line-height: 1.3; padding: 10px 0;}*/

.sec_access .btn_01{ width: 100%;}
.sec_access .btn_01 a{ display: block; width: 100%; height: auto; padding: 8px 20px; font-size: 14px; line-height: 1.4; text-align: center;}
.sec_access .btn_01 a::before,
.sec_access .btn_01 a::after{ right: 20px; bottom: 50%;}
}

/* ---------------------------------------------------
Section Gallery
------------------------------------------------------ */
.sec_gallery{ padding: 100px 0 150px;}
.sec_gallery .cmn_inner{ min-height: 300px;}
.sec_gallery .box_gallery{ display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.sec_gallery .box_gallery > div{ width: 24.25%; margin: 0 1% 1% 0;}
.sec_gallery .box_gallery > div:nth-of-type(4n){ margin: 0 0 1% 0;}
.sec_gallery .box_gallery img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_gallery{ padding: 50px 0 100px;}
.sec_gallery .cmn_inner{ min-height: auto;}
.sec_gallery .box_gallery{ display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.sec_gallery .box_gallery > div{ width: 49%; margin: 0 1% 1% 0;}
.sec_gallery .box_gallery > div:nth-of-type(2n){ margin: 0 0 1% 0;}
.sec_gallery .box_gallery > div:nth-of-type(4n){ margin: 0 0 1% 0;}
}