@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css");
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=EB+Garamond:wght@400;500;600;700;800&family=Public+Sans:wght@100;200;300;400;500;600;700;800;900&family=Oswald:wght@200;300;400;500;600&family=Allura&display=swap");
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeInDown {
0% {opacity: 0;transform: translateY(-3rem);}
100% {opacity: 1;transform: translateY(0);}
}
@keyframes fadeInLeft {
0% {opacity: 0;transform: translateX(-8rem);}
100% {opacity: 1;transform: translateX(0);}
}
@keyframes fadeInRight {
0% {opacity: 0;transform: translateX(8rem);}
100% {opacity: 1;transform: translateX(0);}
}
@keyframes fadeInUp {
0% {opacity: 0;transform: translateY(3rem);}
100% {opacity: 1;transform: translateY(0);}
}
@keyframes scale_x_c {
0%{transform: scaleX(0);}
100% {transform: scaleX(1);}
}
@keyframes scale_x_l {
0%{transform: scaleX(0);transform-origin: left;}
100% {transform: scaleX(1);transform-origin: left;}
}
@keyframes scale_x_r {
0%{transform: scaleX(0);transform-origin: right;}
100% {transform: scaleX(1);transform-origin: right;}
}
@keyframes scale_y_t {
0%{transform: scaleY(0);transform-origin: top;}
100% {transform: scaleY(1);transform-origin: top;}
}
@keyframes scale_y_b {
0%{transform: scaleY(0);transform-origin: bottom;}
100% {transform: scaleY(1);transform-origin: bottom;}
}
@keyframes bokashi_img {
0%{filter: blur(8px) brightness(180%);transform: scale(1.07)}
100%{filter: blur(0) brightness(100%);transform: scale(1)}
}
@keyframes bokashi {
0%{filter: blur(8px);transform: scale(1.07)}
100%{filter: blur(0);transform: scale(1)}
}
@keyframes width100 {
0%{opacity: 0;width: 0%;}
100% {opacity: 1;width: 100%;}
}

@keyframes height100 {
0%{opacity: 0;height: 0%;}
100% {opacity: 1;height: 100%;}
}

/* ヘッダー吹き出し */
@keyframes purun {0%   { transform:translate(0%, 0%); }10%  { transform:translate(4%,0%); }20%  { transform:translate(8%,0%); }40%  { transform:translate(-8%,0%); }60%  { transform:translate(4%,0%); }80% { transform:translate(0%, 0%); }
100% { transform:translate(0%, 0%); }
}
@keyframes purun_sp {0%   { transform:translate(0%, 0%); }10%  { transform:translate(0%,6%); }20%  { transform:translate(0%,12%); }40%  { transform:translate(0%,-12%); }60%  { transform:translate(0%,6%); }80% { transform:translate(0%, 0%); }
100% { transform:translate(0%, 0%); }
}

/* ローディング */
@keyframes spCircRot {from { transform: rotate(0deg); }to { transform: rotate(359deg); }
}




/*||||||||||||||||| コンテンツ |||||||||||||||||*/
/* メイン */
.pre-inc .salon_main{background: url("../img/salon/main_bk.webp") no-repeat center center/cover;overflow: hidden;padding: 2.5em 0 3em;}
.pre-inc .salon_main > i{display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(0,0,0,0.9);animation: 3s fadeIn 0.5s forwards;opacity: 0;}
.pre-inc .salon_main .wrap1024{text-align: center;color: #fff;opacity: 0;animation: 2s fadeIn 1s forwards;}
.pre-inc .salon_tit{font-size: 2.5em;}
.pre-inc .salon_tit + p{font-size: 0.9em;margin-top: 1em;}
.pre-inc .salon_tit_s{font-size: 2.8em;margin-top: 0.5em;background: linear-gradient(to bottom, #644f1d 20%, #ab9d68 45%, #9d803a 60%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;font-family: "EB Garamond", serif;letter-spacing: 0.05em;}
.pre-inc .salon_tit_s small{font-size: 0.64em;background: linear-gradient(to bottom, #644f1d 20%, #ab9d68 45%, #9d803a 60%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.pre-inc .salon_video{margin-top: 2em;cursor: pointer;pointer-events: none;}
.pre-inc .salon_video::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: url("../img/salon/video_poster_pc.jpg") no-repeat center center/cover;z-index: 1;}
.pre-inc .salon_video.play::before{display: none;}
.pre-inc .salon_video video{width: 100%;pointer-events: auto;}
.pre-inc .salon_video i:nth-of-type(1){display: block;width: 7.5em;height: 1px;background: #fff;position: absolute;top: -0.5em;left: -1em;animation: 2s fadeInRight 1.5s forwards;opacity: 0;}
.pre-inc .salon_video i:nth-of-type(2){display: block;width: 1px;height: 7.5em;background: #fff;position: absolute;top: -1em;left: -0.5em;animation: 2s fadeInUp 1.5s forwards;opacity: 0;}
.pre-inc .salon_video i:nth-of-type(3){display: block;width: 7.5em;height: 1px;background: #fff;position: absolute;bottom: -0.5em;right: -1em;animation-name: fadeInLeft;}
.pre-inc .salon_video i:nth-of-type(4){display: block;width: 1px;height: 7.5em;background: #fff;position: absolute;bottom: -1em;right: -0.5em;animation-name: fadeInDown;}

@media screen and (min-width: 769px) {
}

@media screen and (max-width: 768px) {
.pre-inc .salon_tit{font-size: 1.8em;}
.pre-inc .salon_tit_s{font-size: 1.7em;}
.pre-inc .salon_video{width: 90vw;margin-inline: auto;}
.pre-inc .salon_video::before{background: url("../img/salon/video_poster_sp.jpg") no-repeat center center/cover;}

}

/* 共通 */
.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;}
}