@charset "UTF-8";

/* 共通 */
.pre-inc .section_tit{font-family: "EB Garamond", serif;font-size: 5em;line-height: 1;color: #a99f73;}
.pre-inc .section_tit i{display: inline-block;opacity: 0;}
.pre-inc .section_tit i.text_ani{animation: 2s fadeIn 0s forwards;}

@media screen and (max-width: 768px) {
.pre-inc .section_tit{font-size: 2.8em;}
}

/* CONCEPT */
.pre-inc .concept_intro{padding: 4.5em 0;background: url("../img/salon/concept_intro_bk_pc.webp") no-repeat center center/cover;}
.pre-inc .concept_intro .section_tit_s{font-size: 1.8em;margin-top: 1.5em;letter-spacing: 0.05em;animation-name: fadeInUp;}
.pre-inc .concept_intro .section_tit_s + p{font-size: 0.9em;margin-top: 1em;letter-spacing: 0.05em;line-height: 2;animation-name: fadeInUp;}
.pre-inc .concept_salonmap{padding: 4.5em 0;background: url("../img/salon/concept_salonmap_bk.webp") no-repeat center center/cover;color: #fff;}
.pre-inc .concept_salonmap .concept_salonmap_tit{font-size: 1.5em;text-align: center;animation-name: fadeInUp;}
.pre-inc .concept_salonmap .concept_salonmap_tit_s{font-size: 1.5em;text-align: center;margin-top: 0.2em;margin-bottom: 2em;animation-name: fadeInUp;}
.pre-inc .concept_salonmap .concept_salonmap_tit_s small{font-size: 0.67em;text-align: center;display: block;}
.pre-inc .concept_salonmap_wrap{max-width: 782px;margin: 1em auto 0;animation-name: fadeInUp;}
.pre-inc .concept_salonmap_img i{width: 1.25em;height: 1.25em;display: flex;justify-content: center;align-items: center;background: #a99f73;border: 1px solid #fff;box-shadow: 0.05em 0.05em 0.2em rgba(0,0,0,0.7);position: absolute;cursor: pointer;transition: 0.3s all;}
.pre-inc .concept_salonmap_img i span{font-size: 0.8em;line-height: 1;color: #fff;}
.pre-inc .concept_salonmap_img .a{left: 19.8em;top: 4.95em;}
.pre-inc .concept_salonmap_img .b{left: 6.3em;top: 12em;}
.pre-inc .concept_salonmap_img .c01{left: 2.4em;top: 5.65em;}
.pre-inc .concept_salonmap_img .c02{left: 2.4em;top: 12.35em;}
.pre-inc .concept_salonmap_img .c03{left: 2.4em;top: 19.8em;}
.pre-inc .concept_salonmap_img .c04{left: 7.65em;top: 20.95em;}
.pre-inc .concept_salonmap_img .d{left: 12em;top: 5.3em;}
.pre-inc .concept_salonmap_img .e{left: 29em;top: 4.45em;}
.pre-inc .concept_salonmap_img .f{left: 19em;top: 15.5em;}
.pre-inc .concept_salonmap_list{display: flex;margin-top: 1em;}
.pre-inc .concept_salonmap_list > *{width: 50%;}
.pre-inc .concept_salonmap_list > * p{cursor: pointer;margin-top: 0.5em;transition: 0.3s all;}
.pre-inc .concept_salonmap_list > * p > span{font-size: 0.9em;margin-left: 0.3em;}

.pre-inc .modal_bk {display: none;position: fixed;z-index: 1000000;inset: 0;background: rgba(0, 0, 0, 0.9);cursor: pointer;}
.pre-inc .s_modal{z-index: 1000001;position: fixed;width: 51.2em;inset: 0;max-height: 80vh;margin: auto;opacity: 0;pointer-events: none;transition: 0.5s all;}
.pre-inc .s_modal.active{opacity: 1;pointer-events: auto;}
.pre-inc .s_modal .s_modal_wrap{overflow-y: auto;width: 100%;height: 100%;background: #fff;margin: auto 0;}
.pre-inc .s_modal .s_modal_tit > span{font-size: 1em;display: inline-block;margin-left: 0.5em;}
.pre-inc .s_modal .s_modal_tit + p{font-size: 0.8em;margin-top: 1em;}
.pre-inc .s_modal .s_modal_tit_s{font-size: 0.9em;margin-top: 1em;}
.pre-inc .s_modal .s_modal_tit_s + p{font-size: 0.8em;margin-top: 1em;}
.pre-inc .s_modal p + figure{margin-top: 1.5em;display: inline-block;}
.pre-inc .s_modal p + figure [src$='.svg']{width: 20em;}
.pre-inc .s_modal .s_modal_item{padding: 3.5em 4em;}
.pre-inc .s_modal dl.s_modal_item{display: flex;justify-content: space-between;}
.pre-inc .s_modal .s_modal_item > dt{width: 20em;}
.pre-inc .s_modal .s_modal_item > dd{width: 22em;}
.pre-inc .s_modal .close_btn{font-family: "EB Garamond", serif;color: #fff;font-size: 0.8em;margin: 1.5em auto 0; width: 5em;text-align: center;transition: 0.3s all;cursor: pointer;}
.pre-inc .alpha{width: 1.25em;height: 1.25em;display: inline-flex;justify-content: center;align-items: center;background: #a99f73;vertical-align: 0.1em;}
.pre-inc .alpha > span{font-size: 0.8em;line-height: 1;color: #fff;}

@media screen and (min-width: 769px) {
.pre-inc .concept_salonmap_img i:hover{opacity: 0.6;}
.pre-inc .s_modal .close_btn:hover{opacity: 0.6;}
.pre-inc .concept_salonmap_list > * p:hover{opacity: 0.6;}
}

@media screen and (max-width: 768px) {
.pre-inc .concept_intro{background: url("../img/salon/concept_intro_bk_sp.webp") no-repeat center center/cover;padding: 3em 0;}
.pre-inc .concept_intro .section_tit_s{font-size: 1.4em;}
.pre-inc .concept_salonmap{padding: 3em 0;}
.pre-inc .concept_salonmap .concept_salonmap_tit{font-size: 1.3em;}
.pre-inc .concept_salonmap .concept_salonmap_tit_s{font-size: 1.1em;}
.pre-inc .concept_salonmap_img{font-size: 2.3vw;}
.pre-inc .concept_salonmap_img i{width: 5vw;height: 5vw;}
.pre-inc .concept_salonmap_img i span{font-size: 3.5vw;}
.pre-inc .concept_salonmap_img .cap_o{font-size: 2.5vw;}
.pre-inc .concept_salonmap_list > * p{display: flex;}

.pre-inc .s_modal{width: 92vw;max-height: 80vh;}
.pre-inc .s_modal p + figure{display: block;}
.pre-inc .s_modal p + figure img{width: 100%;}
.pre-inc .s_modal .s_modal_item{padding: 1.5em 1.5em;}
.pre-inc .s_modal dl.s_modal_item{flex-wrap: wrap;}
.pre-inc .s_modal .s_modal_item > dt{width: 100%;}
.pre-inc .s_modal .s_modal_item > dd{width: 100%;margin-top: 1.5em;}
}

/* GUEST ROOM */
.pre-inc #guestroom .section_tit{text-align: center;}
.pre-inc .concept_guestroom{padding: 4.5em 0;background: url("../img/salon/concept_salonmap_bk.webp") no-repeat center center/cover;color: #fff;}
.pre-inc .concept_guestroom_wrap{width: 100%;max-width: 1024px;margin: 70px auto 0px;animation-name: fadeInUp;}
.pre-inc .concept_guestroom_img ul{display:flex;flex-wrap: wrap;justify-content: space-between;}
.pre-inc .concept_guestroom_img li:nth-child(1){width:67.7%;}
.pre-inc .concept_guestroom_img li:nth-child(2){width:30%;}
.pre-inc .concept_guestroom_img li:nth-child(3){width:49%;margin-top:1em}
.pre-inc .concept_guestroom_img li:nth-child(4){width:49%;margin-top:1em}
.pre-inc .room_list ul{display:flex;flex-wrap: wrap;justify-content: space-between;margin-top: 1.5em;}
.pre-inc .room_list li{width:49%;}
.pre-inc .room_list li:nth-child(n+3){margin-top:1em}
.pre-inc .concept_guestroom .section_tit_s{font-size: 1.8em;margin-top: 1.5em;letter-spacing: 0.05em;animation-name: fadeInUp;}
.pre-inc .concept_guestroom .section_tit_s + p{font-size: 0.9em;margin-top: 1em;letter-spacing: 0.05em;line-height: 2;animation-name: fadeInUp;}

@media screen and (max-width: 768px) {
.pre-inc .concept_guestroom .section_tit_s{font-size:1.4em;}
.pre-inc .concept_guestroom_wrap{margin:2em auto 0;}
.pre-inc .room_list ul{justify-content: center;}
.pre-inc .room_list li{width:90%;}
.pre-inc .room_list li:nth-child(n+2){margin-top:1em}
}

/* PHOTO GALLERY */
.pre-inc #photo_gallery{padding: 4.5em 0;background: url("../img/salon/photo_gallery_bk.webp") no-repeat center center/cover;}
.pre-inc #photo_gallery .section_tit{text-align: right;}
.pre-inc #photo_gallery .comingsoon{margin: 3em auto 0;background: #999;width: 40em;height: 22.5em;display: flex;justify-content: center;align-items: center;animation-name: fadeInUp;}
.pre-inc #photo_gallery .comingsoon span{font-family: "EB Garamond", serif;color: #fff;font-size: 1.6em;}

@media screen and (max-width: 768px) {
.pre-inc #photo_gallery{padding: 3em 0;}
.pre-inc #photo_gallery .comingsoon{font-size: 2.3vw;}
}

/* gallery_slider追加 */
.pre-inc .gallery_container{width: 100%;max-width: 800px;margin: 70px auto 0px;animation-name: fadeInUp;}
.pre-inc .gallery_slide figure{position: relative;}
.pre-inc .gallery_slide figure figcaption{color: #FFF;font-family: "EB Garamond", serif;font-size: 46px;line-height: 1;position: absolute;left: 10px;bottom: 10px;filter: drop-shadow(1px 1px 1px rgba(0,0,0,1)) drop-shadow(1px 1px 2px rgba(0,0,0,0.5));}
.pre-inc .gallery_container .slick-dotted.slick-slider{margin-bottom: 0px;}
.pre-inc .gallery_note{margin-top:3em;color:#fff;font-size: 0.65em;}
.pre-inc .shapedots .slick-dots{text-align: right;}
.pre-inc .shapedots .slick-dots li,.pre-inc .shapedots .slick-dots li button{width: 30px;height: 10px;padding: 0;margin: 0 3px;}
.pre-inc .shapedots{position: relative;}
.pre-inc .shapedots .slick-dots li{background: #999999;width: 30px;height: 10px;margin: 0 2px;}
.pre-inc .shapedots .slick-dots li.slick-active{background: #a99f73;}
.pre-inc .shapedots .slick-dots li button{font-size: 0;line-height: 0;display: block;width: 30px;height: 10px;padding: 0px;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;}
.pre-inc .shapedots .slick-dots li button::before {display: none;}

@media screen and (max-width: 768px){
.pre-inc .gallery_slide figure figcaption{font-size: 24px;}
}

/* MAP */
.pre-inc #salon_map{padding: 4.5em 0;background: url("../img/salon/map_bk.webp") no-repeat center center/cover;}
.pre-inc .map_item{display: flex;justify-content: space-between;margin-top: 3em;color: #fff;}
.pre-inc .map_item > dt{width: 29em;text-align: center;animation-name: fadeInUp;}
.pre-inc .map_item > dt .map_tit{font-size: 1.2em;}
.pre-inc .map_item > dt .map_frame{border: 1px solid #fff;padding: 1em;margin-top: 1.3em;font-size: 1em;}
.pre-inc .map_item > dt .parking{font-size: 0.9em;margin-top: 1.5em;}
.pre-inc .map_item > dt .parking::before{content: "";width: 1.333em;height: 1.333em;vertical-align: -0.2em;background: url("../img/salon/parking_icon.png") no-repeat center center/cover;display: inline-block;margin-right: 0.3em;}
.pre-inc .map_item > dt .parking ~ p{font-size: 0.8em;margin-top: 1.3em;}
.pre-inc .map_item > dt .parking + p{margin-top: 2.5em;}
.pre-inc .map_item > dd{width: 19.5em;animation-name: fadeInUp;}
.pre-inc .map_item > dd figure{background: #fff;}
.pre-inc .map_item > dd figure img{width: 100%;}
.pre-inc #salon_map a{display: block;width: 20em;margin: 3em auto 0;text-align: center;color: #fff;padding: 0.7em;border: 1px solid;border-image: linear-gradient(170deg,#9a792d,#a69e6f,#6c5010);border-image-slice: 1;}
.pre-inc #salon_map a::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(170deg,#9a792d,#a69e6f,#6c5010);transition: 0.3s all;}
.pre-inc #salon_map a span{font-size: 1em;letter-spacing: 0.05em;text-decoration: none;z-index: 2;}

@media screen and (min-width: 769px) {
.pre-inc .map_item > dd{animation-delay: 0.3s;}
.pre-inc #salon_map a:hover::before{opacity: 0;}
}

@media screen and (max-width: 768px) {
.pre-inc #salon_map{padding: 3em 0;}
.pre-inc .map_item{margin-top: 2em;flex-wrap: wrap;}
.pre-inc .map_item > dt{width: 100%;}
.pre-inc .map_item > dd{width: 100%;margin-top: 1.5em;;}
}