*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;font-family:'Noto Sans JP',sans-serif}

/* NAV */
.nav{width:100%;background:#fff;padding:40px 0}
.nav__l{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:80px;list-style:none;margin:0;padding:0}
.nav__i{flex:0 0 auto}
.nav__a,.nav__a:hover,.nav__a:focus,.nav__a:visited,.nav__a:active{display:flex;flex-direction:column;align-items:center;padding-bottom:4px;text-decoration:none}
.nav__j{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:32px;line-height:1.7;color:#e4e4e4;transition:color .25s ease}
.nav__e{position:relative;font-family:"Montserrat",sans-serif;font-weight:700;font-size:20px;line-height:1.7;letter-spacing:1px;color:#e4e4e4;transition:color .25s ease}
.nav__e::after{content:attr(data-text);position:absolute;inset:0;background:linear-gradient(to right,#772583,#a04aac);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0;transition:opacity .25s ease}
.nav__a:hover .nav__j{color:#231f20}
.nav__a:hover .nav__e::after{opacity:1}
.nav__a--on .nav__j{color:#231f20}
.nav__a--on .nav__e::after{opacity:1}
@media (min-width:768px) and (max-width:1100px){
    .nav{padding:28px 0}
    .nav__l{gap:40px}
    .nav__j{font-size:24px}
    .nav__e{font-size:16px}
}
@media (max-width:767px){
    .nav{padding:20px 0}
    .nav__l{gap:20px}
    .nav__j{font-size:18px}
    .nav__e{font-size:11px}
}

/* PAGE HERO */
.ph{position:relative;width:100%;aspect-ratio:1920/480;overflow:hidden}
.ph__bg{position:absolute;inset:0;pointer-events:none}
.ph__bg img{width:100%;height:100%;object-fit:cover;display:block}
.ph__ov{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.ph__t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center}
.ph__tl{margin:0;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:64px;line-height:1.7;color:#fff;white-space:nowrap}
.ph__st{margin:0;font-family:'Montserrat',sans-serif;font-weight:700;font-size:40px;line-height:1.7;letter-spacing:2px;color:#fff;white-space:nowrap}
@media (min-width:768px) and (max-width:1100px){
    .ph__tl{font-size:48px}
    .ph__st{font-size:30px}
}
@media (max-width:767px){
    .ph{aspect-ratio:16/9}
    .ph__tl{font-size:36px}
    .ph__st{font-size:22px;letter-spacing:1px}
}

/* ROOMS */
.rooms{padding: 80px 0 120px;display:flex;flex-direction:column;gap:80px}

/* ROOM DETAIL */
.rd{display:flex;gap:64px;align-items:flex-start;max-width:1080px;margin:0 auto;width:100%}
.rd--rev{flex-direction:row-reverse}
.rd__info{display:flex;flex-direction:column;gap:32px;flex:0 0 436px;min-width:0}
.rd__hd{display:flex;flex-direction:column;gap:24px}
.rd__ts{display:flex;flex-direction:column}
.rd__t{margin:0;font-family:'Noto Sans JP',sans-serif;font-size:32px;font-weight:700;line-height:1.7;color:#231f20}
.rd__st{margin:0;font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;line-height:1.7;letter-spacing:1px;color:#a04aac}
.rd__d{font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:700;line-height:1.7;color:#231f20}
.rd__d p{margin:0}
.rd__a{display:flex;flex-direction:column;gap:16px}
.rd__ah{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px;height:65px;background:linear-gradient(to right,#772583,#a04aac);border:0;cursor:pointer;font:inherit;text-align:left}
.rd__at{font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:700;line-height:1.7;color:#fff;white-space:nowrap}
.rd__atg{position:relative;display:block;width:16px;height:16px;flex-shrink:0}
.rd__atg::before,.rd__atg::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:1px;background:#fff;transform:translate(-50%,-50%);transition:transform .25s ease}
.rd__atg::after{transform:translate(-50%,-50%) rotate(90deg)}
.rd__a[aria-expanded="true"] .rd__atg::after{transform:translate(-50%,-50%) rotate(0deg)}
.rd__al{overflow:hidden;max-height:0;font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:700;line-height:1.7;color:#231f20;transition:max-height .3s ease}
.rd__a[aria-expanded="true"] .rd__al{max-height:500px}
.rd__al p{margin:0}
.rd__g{display:flex;flex-direction:column;align-items:flex-end;gap:16px;flex:0 0 580px;min-width:0}
.rd__s{width:100%;aspect-ratio:580/400;overflow:hidden;user-select:none;-webkit-user-select:none}
.rd__tr{display:flex;height:100%;will-change:transform}
.rd__sl{flex:0 0 100%;min-width:0;height:100%}
.rd__sl img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.rd__ds{display:flex;align-items:center;gap:32px}
.rd__dt{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#c1c1c1;cursor:pointer;transition:background .25s ease}
.rd__dt--on{background:#772583}
@media (min-width:768px) and (max-width:1100px){
    .rd,.rd--rev{gap:32px;padding:0 20px}
    .rd__info{flex:1 1 0}
    .rd__g{flex:1.33 1 0}
    .rd__t{font-size:26px}
    .rd__st{font-size:18px}
}
@media (max-width:767px){
    .rooms{padding:48px 0;gap:48px}
    .rd,.rd--rev{flex-direction:column;gap:32px;padding:0 20px}
    .rd__info,.rd__g{flex:none;width:100%}
    .rd__t{font-size:24px}
    .rd__st{font-size:16px}
    .rd__g{align-items:center}
}

/* FOOTER */
.ft{width:100%;background:#772583;padding:56px 0}
.ft__in{max-width:1080px;margin:0 auto;padding:0 40px}
.ft__c{display:flex;flex-direction:column;gap:40px}
.ft__l{display:block;width:240px;height:auto}
.ft__i{display:flex;flex-direction:column;font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:700;line-height:1.7;color:#fff}
.ft__i p{margin:0}
@media (max-width:767px){
    .ft{padding:40px 0}
    .ft__in{padding:0 20px}
    .ft__c{width:100%;gap:24px}
    .ft__l{width:180px}
    .ft__i{font-size:14px}
}