@import url('global.css');

body{font-family: var(--font-family); font-size: var(--fs);}
body.active{position: fixed; overflow:hidden;}
h5 a{color:var(--primary);}

.container{width: 100%; max-width: 100%; padding-left: var(--gutter); padding-right: var(--gutter);}

header{position: absolute; left: 0; top: 0; width: 100%; padding: 1.5rem var(--gutter); z-index: 99;}
header .container{position: relative; padding: 0; display: flex; align-items: center; justify-content: space-between;}
header .logo-wrap{display: flex;}
header .logo{width: 10rem;}
header .logo img{max-width: 100%;}
header nav{flex: 1 0 0%; display: flex; align-items: center; justify-content: space-between; height:var(--md); }
header nav a{color: white;}
.page-header .logo-wrap{width: 25%;}
@media(width > 991px){
    .header .logo{position: absolute; left: 0; top: 0;}
    .header .logo, header .logo img{transform-origin: top left;}
}
@media(width < 992px){
    .header .logo-wrap{width: 25%;}
}
@media(width < 768px){
    .page-header .logo-wrap{width: 100%;}
    .header .logo-wrap{width: auto;}
    header .logo{width: 20rem;}
    header nav{background-color: hsl(var(--dark-grey)); overflow: hidden; flex-direction: column; align-items: start; justify-content: center; gap: 5% 0; position: fixed; left: 0; top: 0; width: 100vw; height: 100svh; z-index: 99; padding: 0 var(--gutter);}
    header nav a{display: block; font-size: 3rem; line-height: 1; opacity: 0; transform: translateY(100%); transition-property: transform, opacity;  transition-duration: 0s, 0.35s; transition-delay: 700ms, 0;}
    body.active header nav a{display: block; font-size: 3rem; line-height: 1; opacity: 1; transform: translateY(0); transition: all 700ms cubic-bezier(0.25, 1.05, 0.5, 1);  transition-delay: calc(0.7s);} 
    header .logo{position: relative; z-index: 999; width: 20rem;}
    header nav{opacity: 0 !important; visibility: hidden; transform: translateY(-100%); transition: transform 1s cubic-bezier(0.25, 1.05, 0.5, 1);}
    body.active header nav{opacity: 1 !important; visibility: visible; transform: translateY(0%);}
    body.close header nav{opacity: 1 !important; visibility: visible; transform: translateY(-100%);}
}
.hero-section{height: 100svh; overflow: hidden; position: relative;}
.hero-section img{object-fit:cover; width: 100%; height: 100%;}
.scrollToBottom-link{font-size: var(--fs); color: white; position: absolute; right: var(--gutter); bottom: var(--gutter); display: flex; align-items: center; gap: 1rem; white-space: nowrap; line-height: 1; padding: .5rem 0; border-bottom: .2rem dotted white;}
@keyframes jumpInfinite{
    0% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-5px);
    }
}
.down-arrow{animation: jumpInfinite 1.5s infinite;}

.section{padding: var(--xxl) 0;}
article > :not(:last-child){margin-bottom: 3rem;}
article p{font-size: var(--h5);}

.intro-section{background-color: hsl(var(--light-yellow));}
.intro-title-4827{
    font-size: clamp(3.5rem, 6vw, 5rem);
    color: #8B5A2B;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 400;
}
.intro-desc-5182{
    font-size: var(--fs);
    line-height: 1.8;
}
.intro-section article{max-width: 80%;}
.intro-section article .btn{margin-top: var(--xxl);}
.intro-section figure{aspect-ratio:1.38/1; overflow: hidden;}
.intro-section figure img{width: 100%; height: 100%; object-fit: cover;}
@media(width < 1500px){
    .intro-section article{max-width: 100%;}
    .intro-section article .btn{margin-top: 0;}
}
@media(width > 991px){
    .intro-section figure{order:2;}
}

.room-section{background-color: hsl(var(--primary));}
.rooms-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter);}
.rooms-images{padding: var(--xxl) 0;}
.rooms-images > :not(:last-child){padding-bottom: 1rem;}
.rooms-image-block > :not(:last-child){margin-bottom: 1rem;}
.rooms-content-block{padding: var(--lg) 0; min-height: 100svh; max-width: 65rem;}
.rooms-content-block{display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--xs);}
.rooms-content-block div > :not(:last-child){margin-bottom: var(--sm);}
.rooms-content-block p:first-child{color: white; text-transform: uppercase; font-size: var(--fs);} 
.rooms-content-block h5{color: white;}
.rooms-content-block ul li{border-top: .1rem solid white; border-bottom: .1rem solid white; opacity: 40%;}
.rooms-content-block ul li:not(:first-child){margin-top: -.1rem;}
.rooms-content-block ul li span{transition: 500ms;}
.rooms-content-block ul li.active{opacity: 1;}
.rooms-content-block ul li.active a span{transform:translateX(var(--sm));}
.rooms-content-block ul li a{text-transform: uppercase; font-size: var(--fs); color: white; display: flex; align-items: center; min-height: 6rem;}
@media(width < 991px){
    .rooms-grid{grid-template-columns: 1fr; gap: 0;}
    .rooms-content-block{max-width: 100%; min-height: auto; padding: var(--gutter) 0;}
    .rooms-content-block div {width:100%;}
    .rooms-content-block ul{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 1rem 1.5rem; width: 100%; overflow: auto;}
    .rooms-content-block ul li{border: none; opacity: 40%;}
    .rooms-content-block ul li a{min-height: auto; padding: 1rem 0; white-space: nowrap;}
    .rooms-content-block p, .rooms-content-block h5, .rooms-content-block .btn{display: none;}
    .rooms-images{padding-top: 0;}
    .rooms-content-block ul li.active a span{transform:none;}
    .rooms-content-block.active{background: linear-gradient(180deg, rgba(0,0,0,0.645737762878589) 0%, rgba(0,0,0,0) 100%);}
}
@media(width < 576px){
    .rooms-content-block ul li a{font-size: 1.4rem; padding: .8rem 0;}
    .rooms-content-block{padding: 2rem 0;}
}
@media(width < 481px){
    .rooms-content-block ul{gap: 1rem;}
    .rooms-content-block ul li a{font-size: 1.2rem; padding: .4rem 0;}
}

.apartment-section {
    background-color: #877e98;
}
.apartment-section article > :not(:last-child){margin-bottom: var(--lg);}
.apartment-section article p, .apartment-section article h5{color: white;}
.apartment-section article h5{max-width: 120rem;}
.apartment-section article p{font-size: var(--fs); text-transform: uppercase;}
.staff-desc-3941{
    text-transform: none;
    font-size: var(--fs);
    line-height: 1.8;
    text-align: left;
    color: white;
}
.apartment-content:not(:last-child){margin-bottom: var(--lg);}
.apartment-section figure{aspect-ratio:2.4/1; overflow: hidden;}
.apartment-section figure img{object-fit: cover; width: 100%; height: 100%;}
@media(width < 1200px){
    .apartment-section article > :not(:last-child){margin-bottom: var(--xs);}
}

.single-article-section{display: flex; align-items: center; min-height: 35rem; position: relative; z-index: 1;}
.single-article-section article{text-align: center; max-width: 120rem; margin-inline: auto;}

.image-zoom-section{background-color: hsl(var(--light-yellow)); position: relative;}
.image-zoom-section figure{width: 100%; height: 100svh; overflow: hidden;}
.image-zoom-section figure img{object-fit: cover; width: 100%; height: 100%; transform-origin:center center ;}
.image-zoom-section .btn{position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); z-index: 9;}
.image-zoom-section .btn.btn-dark-grey{background-color: hsl(var(--dark-grey)); color: white;}

footer{min-height: 75svh; padding: var(--lg) 0; background-color: hsl(var(--dark-grey)); display: flex; align-items: flex-end;}
footer .container{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--xs);}
footer .footer-logo img{width:clamp(18rem, 60rem, 25vw);}
footer .container ul li{display: flex;}
footer .container ul li:not(:last-child){margin-bottom: 2rem;}
footer .container ul li a{line-height: 1; font-size: var(--fs); color: white; transition: 300ms; white-space: nowrap;}
footer .container ul li span{line-height: 1; font-size: var(--fs); color: white; transition: 300ms; white-space: nowrap;}
footer .container ul li a:hover{color: hsl(var(--secondary));}
@media(width < 768px){
    footer{min-height: auto;}
    footer .container{display: block;}
    footer .container > :not(:last-child){margin-bottom: var(--md);}
    footer .container ul li:not(:last-child){margin-bottom: 1rem;}
    .image-zoom-section figure{height: 50svh;}
}

main{background-color: hsl(var(--light-yellow));}

.page-banner-section{height: 65svh; overflow: hidden;}
.page-banner-section img{object-fit: cover; width: 100%; height: 100%;}

.intro-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter);}
.page-headding{line-height: 1; position: relative;}
.page-headding span{transform-origin: left top;}
@media(width < 992px){
    .intro-grid{grid-template-columns: 1fr;}
}

.rooms-slider-grid{display: grid; grid-template-columns: 80rem 1fr; justify-content: space-between; gap: calc(var(--gutter) * 2);} 
.rooms-slider-grid-column{min-width: 0;}
.rooms-slider-wrap{position: relative; overflow: hidden;}
.rooms-slider .swiper-slide figure{overflow: hidden; aspect-ratio: 1.4/1;}
.rooms-slider .swiper-slide figure img{object-fit: cover; width: 100%; height: 100%;}
.rooms-slider-wrap .slider-arrows{position: absolute; right: var(--gutter); bottom: var(--gutter); z-index: 99;}
.slider-arrows{width: 15rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.slider-arrows .slider-arrow{cursor: pointer;}
.slider-arrow img{max-width: 5.5rem;}
.swiper-notification{display: none;}
.rooms-slider-grid-content{display: flex; flex-direction: column; justify-content: space-between;}
.rooms-slider-grid-content article{max-width: 80rem;}
.rooms-slider-grid-content > :not(:last-child){margin-bottom: var(--gutter);}
.facilities {padding-top:var(--xxl);}
.facilities li{display: flex; align-items: center; gap: 1rem;}
.facilities li:not(:last-child){margin-bottom: 2rem;}
.facilities li span{flex-shrink: 0; width: var(--fs-md);}
.facilities li span img{max-width: 100%;}
.facilities li p{font-size: var(--fs-md);}
@media(width < 1500px){
    .rooms-slider-grid{grid-template-columns: 35rem 1fr;} 
}
@media(width > 1199px){
    .rooms-slider-grid-column{order:2;} 
}
@media(width < 1200px){
    .rooms-slider-grid{grid-template-columns: 1fr;} 
    .rooms-slider-grid-content article{max-width: 100%;}
    .slider-arrows{width: 10rem;}
    .slider-arrow img{max-width: 3.5rem;}
}
@media(width < 992px){
    .facilities {
        padding-top: var(--md);
    }
}

.page-articles {display:flex; flex-direction:column; gap:var(--md);}
.page-aricle-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--gutter) * 2);}
.page-aricle-grid figure{aspect-ratio:1/1; overflow: hidden;}
.page-aricle-grid figure img{object-fit: cover; width: 100%; height: 100%;}
.page-aricle-grid-content{display: flex; flex-direction: column; justify-content: space-between;}
.page-aricle-grid-content > :not(:last-child){margin-bottom: var(--gutter);}
@media(width < 1200px){
    .page-aricle-grid{grid-template-columns: 1fr;}   
}

.images-slider .swiper-slide{width: auto;}
.image-slider-section .image-slider-content{max-width: 70%;}
.image-slider-content:not(:last-child){margin-bottom: var(--lg);}
@media(width < 1200px){
    .image-slider-section .image-slider-content{max-width: 100%;}
}

.booking-section{min-height: 70svh; display: flex; align-items: center; position: relative; isolation: isolate; overflow: hidden;}
.booking-section-bg{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150vw; height: 150vw; border-radius: 100%; background-color: transparent; z-index: -1;}
.booking-section .container{text-align: center;}
.booking-section .btn{width: 100%; max-width: 50rem;}
.booking-section .btn:not(:first-child){margin-top: var(--lg);}

.contact-block > :not(:last-child){margin-bottom: var(--xl);}

/* Map Section 7294 */
.map-section-7294{
    position: relative;
    width: 100%;
}
.map-container-7294{
    width: 100%;
    height: 50rem;
    filter: grayscale(100%);
}
.map-container-7294 iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media(width < 768px){
    .map-container-7294{
        height: 40rem;
    }
}
@media(width < 480px){
    .map-container-7294{
        height: 35rem;
    }
}
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PC: topmv.mp4 / スマホ: topmv-sp.mp4 の切り替え */
.hero-video-sp {
    display: none;
}
.hero-video-pc {
    display: block;
}
@media (max-width: 767px) {
    .hero-video-sp {
        display: block;
    }
    .hero-video-pc {
        display: none;
    }
}