@charset "UTF-8";

header{
    display: flex;
    align-items: center;
    width: 100%;
    position: fixed;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.8);
    height: 64px;
    padding: 0 24px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    @media(max-width:480px){
        padding: 0 12px;
    }

    div.inner{
        margin: 0 auto;
        width: 100%;
        max-width: 1040px;
        display: flex;
        justify-content: space-between;

        h1 {
            display: flex;
            align-items: center;

            a{
                padding-left: 48px;
                position: relative;

                &::before{
                    content: '';
                    width: 40px;
                    height: 40px;
                    background: url(img/header-logo.png) center / contain no-repeat;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }
            }
        }
        
        nav{
            @media(max-width:768px){
                display: none;
                position: absolute;
                left: 0;
                top: 64px;
                background-color: rgba(255, 255, 255, 0.8);
            }

            @media(max-width:768px){
                width: 100%;
            }

            ul{
                display: flex;
                gap: 24px;

                @media(max-width:768px){
                    display: block;
                }

                li{
                    letter-spacing: 0.1em;

                    a{
                        transition: .2s;

                        &:hover{
                            color: var(--color-sub);
                        }

                        /* transition: .3s;
                        padding-bottom: 4px;
                        position: relative;

                        &::before{
                            content: '';
                            width: 100%;
                            height: 1px;
                            background: var(--color-primary);
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            transform-origin: right top;
                            transform: scale(0, 1);
                            transition: transform .3s;
                        }

                        &:hover::before{
                            transform-origin: left top;
                            transform: scale(1, 1);
                        } */

                        @media(max-width:768px){
                            display: block;
                            padding: 12px;
                            text-align: center;
                        }
                    }
                }
            }
        }

        a#menu-button {
            display: none;
            text-indent: -9999px; 
            background: url(img/header-sp-menu.svg) center / contain no-repeat;

            &.open {
                background: url(img/header-sp-close.svg) center / contain no-repeat;
            }

            @media(max-width:768px){
                display: block;
                height: 44px;
                width: 44px;
            }
        }
    }
}

section#page-top{

    section#cover{
        color: #fff;
        height: 100%;
        padding-top: 208px;
        padding-bottom: 120px;
        box-sizing: border-box;
    
        background: linear-gradient(rgba(137, 137, 137, 0.7), rgba(137, 137, 137, 0.7)), 
                    url(img/teaser/teaser-bg.jpg) center / cover no-repeat;
        background-blend-mode: multiply;
    
        @media(max-width:768px){
            padding-top: 184px;
        }
    
        @media(max-width:480px){
            padding-top: 160px;
        }
    
        p.coming-soon{
            margin-top: 120px;
            color: #fff;
            font-size: 4rem;
            text-align: center;
    
            @media(max-width:768px){
                font-size: 3rem;
            }
        
            @media(max-width:480px){
                font-size: 2rem;
            }
        }
    
        div.header{
            padding:  0 12px;
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
    
            h2{
                margin-top: 24px;
                text-indent: -9999px;
                width: 208px;
                height: 224px;
                background: url(img/teaser/logo.svg) center / contain no-repeat;
                
                @media(max-width:768px){
                    width: 184px;
                    height: 100%;
                    aspect-ratio: 298 / 224;
                }
            }
    
            p{
                text-align: center;
                font-size: 1.75rem;
                line-height: 1.25;
                letter-spacing: 0.5em;
    
                @media(max-width:768px){
                    font-size: 1.25rem;
                }
    
                @media(max-width:480px){
                    font-size: 1rem;
                    letter-spacing: 0.4em;
                }
            }
        }
    
        p.grand-open{
            margin-top: 64px;
            padding:  0 12px;
            text-align: center;
            font-size: 2rem;
            line-height: 1.5;
            letter-spacing: 0.2em;
    
            @media(max-width:768px){
                font-size: 1.5rem;
            }
    
            span{
                display: inline-block;
            }
        }
    
        div.slider{
            margin-top: 64px;
            overflow: hidden;
    
            @media(max-width:768px){
                margin-top: 48px;
            }
    
            @media(max-width:480px){
                margin-top: 32px;
            }
    
            div.slider-wrapper{
                display: flex;
                
                ul.slider-list{
                    display: flex;
                    /* gap: 16px; */
                    /* margin-right: 16px; */
                    animation: image-slider 35s infinite linear ;
                    
                    li{
                        width: 336px;
                        margin-left: 20px;
                        
                        @media(max-width:768px){
                            width: 280px;
                        }
            
                        @media(max-width:480px){
                            width: 200px;
                        }
        
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }
    
        p.summary{
            margin-top: 24px ;
            padding:  24px 12px;
            text-align: center;
            font-size: 1.25rem;
            line-height: 1.75;
            letter-spacing: 0.2em;
            background-color: rgba(0 , 0 , 0 , 0.4);
    
            @media(max-width:768px){
                font-size: 1rem;
            }
        }
    
        a.press-release{
            display: block;
            margin: 32px auto 0;
            width: fit-content;
            color: #fff;
            font-size: 1.125rem;
            text-decoration: underline;
            transition: .2s;
    
            &:hover{
                text-decoration: none;
            }
        }
    
        a.reserve{
            margin: 48px auto 0;
            display: block;
            width: fit-content;
            padding: 16px 36px;
            border: 1px solid #fff;
            font-size: 1.125rem;
            position: relative;
            z-index: 1;
            transition: .3s;
            background-color: rgba(255 , 255 , 255 , 0.9);
    
            &:before{
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;

                transform-origin: 100% 50%;
                transform: scaleX(0);
                transition: transform ease .3s;
            }
    
            &:hover{
                background: none;
                color: var(--color-white);
    
                &::before{
                    transform-origin: 0% 50%;
                    transform: scaleX(1);
                }
            }
        }
    }
    
    div#concept{
        background: linear-gradient(rgba(137, 137, 137, 0.8), rgba(137, 137, 137, 0.8)), 
                    url(img/top/concept-bg.jpg) center / cover no-repeat;
        background-blend-mode: multiply;

        padding: 104px 24px;
        color: #fff;
        letter-spacing: 0.2em;
        text-align: center;

        @media(max-width:480px){
            padding: 80px 12px;
        }
    
        p.concept-copy{
            font-size: 2rem;
            line-height: 1.5;

            @media(max-width:768px){
                font-size: 1.75rem;
            }

            @media(max-width:480px){
                font-size: 1.25rem;
            }
        }

        p.concept-summary{
            margin-top: 80px;
            font-size: 1.25rem;
            line-height: 2.5;

            @media(max-width:768px){
                margin-top: 56px;
                font-size: 1rem;
            }

            @media(max-width:480px){
                text-align: left;
                
                span{
                    display: inline;

                    &.break{
                        display: inline-block;
                    }
                }
            }
        }
    }

    section#features{
        background-color: var(--color-beige);
        padding: 104px 24px;

        @media(max-width:480px){
            padding: 80px 12px;
        }

        hgroup{
            h2{
                span{
                    font-size: 3rem;

                    @media(max-width:768px){
                        font-size: 2.5rem;
                    }
                }
            }
        }

        p.lead{
            margin: 40px auto 0;
            max-width: 1040px;
            font-size: 1.25rem;
            line-height: 1.5;
            letter-spacing: 0.1;
            text-align: center;

            @media(max-width:768px){
                font-size: 1rem;
            }

            @media(max-width:480px){
                text-align: left;

                span{
                    display: inline;
                }
            }
        }

        ul.features-list{
            margin: 40px auto 0;
            max-width: 1040px;

            li.features-item{
                margin-top: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;

                @media(max-width:768px){
                    display: block;
                }

                div.list-contents{
                    padding: 40px 24px;
                    background-color: rgba(255 , 255 , 255 , 0.7);
                    height: fit-content;
                    position: relative;
                    z-index: 2;
                    width: 480px;
                    flex-shrink: 0;
                    box-sizing: border-box;

                    @media(max-width:768px){
                        width: 100%;
                        padding: 24px ;
                    }

                    @media(max-width:480px){
                        padding: 24px 12px 16px;
                    }

                    div.list-title{
                        padding-bottom: 16px;
                        display: flex;
                        flex-direction: row-reverse;
                        justify-content: start;
                        align-items: center;

                        h3{
                            margin-left: 16px;
                            font-size: 1.5rem;

                            @media(max-width:480px){
                                font-size: 1.25rem;
                            }
                        }

                        span.point{
                            width: 80px;
                            height: 80px;
                            border-radius: 50%;
                            background-color: var(--color-white);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;

                            @media(max-width:480px){
                                width: 56px;
                                height: 56px;
                            }
                            
                            span.en{
                                color: var(--color-sub);

                                @media(max-width:480px){
                                    font-size: 0.875rem;
                                }
                            }

                            span.num{
                                font-size: 2.5rem;

                                @media(max-width:480px){
                                    font-size: 1.5rem;
                                }
                            }
                        }
                    }

                    p.list-summary{
                        padding-top: 16px;
                        border-top: 1px solid var(--color-primary);
                        line-height: 1.5;
                    }
                }

                img{
                    width: 100%;
                    max-width: 640px;
                    flex-shrink: 1;
                    min-width: 0;

                    @media(max-width:768px){
                        max-width: 100%;
                    }
                }

                &:nth-child(odd){
                    flex-direction: row-reverse;

                    div.list-contents{
                        margin-left: -120px;

                        @media(max-width:960px){
                            margin-left: -240px;
                        }

                        @media(max-width:768px){
                            margin: 0;
                        }
                    }
                }

                &:nth-child(even){
                    div.list-contents{
                        margin-right: -120px;

                        @media(max-width:960px){
                            margin-right: -240px;
                        }

                        @media(max-width:768px){
                            margin: 0;
                        }
                    }
                }

                &:nth-child(5){
                    display: block;

                    div.list-contents{
                        margin: 0;
                        width: 100%;

                        ul.summary-list{
                            margin-top: 24px;

                            li{
                                margin-top: 16px;
                                padding-left: 16px;
                                line-height: 1.5;
                                position: relative;

                                &::before{
                                    content: '⚫︎';
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                }

                                dl{
                                    div{
                                        display: flex;
                                        flex-wrap: wrap;

                                        dd{
                                            padding-left: 40px;
                                            position: relative;

                                            &::before{
                                                content: '▶︎';
                                                position: absolute;
                                                top: 0;
                                                left: 16px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    div.list-yumeguri{

                        div.list-yumeguri-wrapper{
                            position: relative;
                            overflow: hidden;

                            /* &::before{
                                content: '';
                                width: 40px;
                                height: 40px;
                                background: url(img/top/arrow.svg) center / contain no-repeat;
                                position: absolute;
                                top: 50%;
                                left: 16px;
                                z-index: 5;
                                transform: translateY(-50%) rotate(180deg);
                            }

                            &:hover::before{
                                cursor: pointer;
                            }

                            &::after{
                                content: '';
                                width: 40px;
                                height: 40px;
                                background: url(img/top/arrow.svg) center / contain no-repeat;
                                position: absolute;
                                top: 50%;
                                right: 16px;
                                z-index: 5;
                                transform: translateY(-50%);
                            }

                            &:hover::after{
                                cursor: pointer;
                            } */

                            .slider-nav {
                                position: absolute;
                                left: 0;
                                top: 0;
                                right: 0;
                                bottom: 0;

                                ul{
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    right: 0;
                                    bottom: 0;

                                    li {
                                        a {
                                            &.slider-button-left {
                                                display: block;
                                                text-indent: -9999px;
                                                content: '';
                                                width: 40px;
                                                height: 40px;
                                                background: url(img/top/arrow.svg) center / contain no-repeat;
                                                position: absolute;
                                                top: 50%;
                                                left: 16px;
                                                z-index: 5;
                                                transform: translateY(-50%) rotate(180deg);
                                            }
                                            &.slider-button-right {
                                                display: block;
                                                text-indent: -9999px;
                                                content: '';
                                                width: 40px;
                                                height: 40px;
                                                background: url(img/top/arrow.svg) center / contain no-repeat;
                                                position: absolute;
                                                top: 50%;
                                                right: 16px;
                                                z-index: 5;
                                                transform: translateY(-50%);
                                            }
                                        }
                                    }
                                }
                            }


                            @media(max-width:480px){
                                
                                /* &::before{
                                    width: 32px;
                                    height: 32px;
                                    left: 12px;
                                }

                                &::after{
                                    width: 32px;
                                    height: 32px;
                                    right: 12px;
                                } */
                            }

                            ul.top-yumeguri-list{
                                display: flex;
                                /* overflow: scroll; */
                                position: relative;
    
                                li{
                                    min-width: 100%;
                                    position: relative;
    
                                    @media(max-width:480px){
                                        display: flex;
                                        flex-direction: column-reverse;
                                    }
    
                                    dl{
                                        background-color: rgba(15 , 24 , 44 , 0.7);
                                        padding: 24px;
                                        position: absolute;
                                        bottom: 16px;
                                        left: 16px;
                                        color: var(--color-white);
                                        flex-grow: 1;
    
                                        @media(max-width:768px){
                                            background-color: rgba(15 , 24 , 44 , 0.5);
                                            padding: 16px 12px;
                                            bottom: 0;
                                            left: 0;
                                        }
    
                                        @media(max-width:480px){
                                            position: relative;
                                            background-color: rgba(15 , 24 , 44 , 0.9);
                                        }
    
                                        dt{
                                            margin-bottom: 16px;
                                            font-size: 2rem;
    
                                            @media(max-width:768px){
                                                margin-bottom: 12px;
                                                font-size: 1.25rem;
                                            }
                                        }
    
                                        dd{
                                            line-height: 1.5;
    
                                            @media(max-width:768px){
                                                font-size: 0.875rem;
                                            }
                                        }
                                    }
    
                                    img{
                                        width: 100%;
                                        max-width: 100%;
                                    }
                                }
                            }
                        }

                
                        ul.bottom-yumeguri-list{
                            margin-top: 16px;
                            display: flex;
                            overflow: hidden;

                            li{
                                min-width: calc(100% / 5);
                            }
                        }
                    }
                }
            }
        }
    }

    section#rooms{
        padding: 104px 24px;
        background: url(img/top/rooms-bg.jpg) center / cover no-repeat;

        @media(max-width:480px){
            padding: 80px 12px;
        }

        ul.rooms-list{
            margin: 40px auto 0;
            max-width: 1040px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 24px 16px;

            @media(max-width:768px){
                display: block;
            }

            li{
                width: calc((100% - 24px) / 2);

                @media(max-width:768px){
                    width: 100%;
                    margin-top: 24px;
                }

                figure{
                    img{
                        width: 100%;
                        border-radius: 4px;
                    }

                    figcaption{
                        margin-top: 8px;
                        line-height: 1.25;
                    }
                }
            }
        }
    }

    div.bg-image{
        padding: 0 24px 104px;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)),
        url(img/top/facilities-bg.jpg) center / cover no-repeat;

        @media(max-width:480px){
            padding: 0 12px 80px;
        }

        section#facilities{
            padding-top: 104px;

            @media(max-width:480px){
                padding-top: 80px ;
            }

            hgroup{
                h2{
                    color: var(--color-white);
                }
            }

            ul.facilities-list{
                margin: 40px auto 0;
                max-width: 1040px;
                display: flex;
                justify-content: space-between;

                @media(max-width:768px){
                    display: block;
                }

                li{
                    display: flex;
                    flex-direction: column-reverse;
                    justify-content: flex-end;
                    width: calc((100% - 48px) / 3);

                    @media(max-width:768px){
                        width: 100%;
                        margin-top: 24px;
                    }

                    div.list-summary{
                        background-color: rgba(255 , 255 , 255 , 0.9);
                        padding: 24px;
                        border-bottom-left-radius: 4px;
                        border-bottom-right-radius: 4px;
                        flex-grow: 1;

                        @media(max-width:480px){
                            padding: 24px 12px;
                        }

                        h3{
                            font-size: 1.5rem;

                            @media(max-width:480px){
                                font-size: 1.25rem;
                            }
                        }

                        p{
                            margin-top: 16px;
                            line-height: 1.5;
                        }
                    }

                    img{
                        width: 100%;
                        border-top-left-radius: 4px;
                        border-top-right-radius: 4px;
                    }
                }
            }
        }

        section#amenities{
            margin: 40px auto 0;
            padding: 80px 40px;
            max-width: 1040px;
            box-sizing: border-box;
            background-color: rgba(255 , 255 , 255 , 0.9);
            border-radius: 4px;

            @media(max-width:768px){
                padding: 56px 24px;
            }

            @media(max-width:480px){
                padding: 56px 12px;
            }

            dl{
                margin-top: 24px;

                div{
                    padding: 24px 0;
                    border-top: 1px solid var(--color-primary);

                    &:first-child{
                        border: none;
                    }

                    &:last-child{
                        padding-bottom: 0;
                    }

                    dt{
                        padding-left: 24px;
                        font-size: 1.25rem;
                        position: relative;

                        &::before{
                            content: '◆';
                            font-size: 1.25rem;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }

                        @media(max-width:480px){
                            font-size: 1.125rem;
                            line-height: 1.25;

                            &::before{
                                font-size: 1.125rem;
                            }
                        }
                    }

                    dd{
                        margin-top: 16px;
                        line-height: 2;

                        @media(max-width:768px){
                            line-height: 1.5;
                        }
                    }
                }
            }
        }
    }

    section#scenes{
        padding: 104px 24px;
        background: url(img/top/rooms-bg.jpg) center / cover no-repeat;

        @media(max-width:480px){
            padding: 80px 12px;
        }

        ul.scenes-list{
            margin: 40px auto 0;
            max-width: 1040px;
            display: flex;
            justify-content: space-between;

            @media(max-width:768px){
                display: block;
            }

            li{
                display: flex;
                flex-direction: column;
                width: calc((100% - 48px) / 3);

                @media(max-width:768px){
                    width: 100%;
                    margin-top: 32px;
                }

                h3{
                    order: 2;
                    margin-top: 16px;
                    font-size: 1.5rem;

                    @media(max-width:480px){
                        font-size: 1.25rem;
                    }
                }

                p{
                    order: 3;
                    margin-top: 16px;
                    line-height: 1.5;
                }

                img{
                    order: 1;
                    width: 100%;
                    border-radius: 4px;
                }
            }
        }
    }

    section#access{
        padding: 104px 24px;
        background-color: var(--color-black);

        @media(max-width:480px){
            padding: 80px 12px;
        }

        hgroup{

            h2{
                color: var(--color-white);
            }
        }

        div.access-wrapper{
            margin: 40px auto 0;
            max-width: 1040px;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: space-between;

            @media(max-width:768px){
                flex-direction: column-reverse;
            }

            div{
                margin-left: 24px;

                @media(max-width:768px){
                    margin-left: 0;
                    margin-top: 24px;
                }

                p.address{
                    color: var(--color-white);
                    line-height: 1.5;
                }

                p.bus{
                    margin-top: 16px;
                    padding: 24px;
                    background-color: rgba(255 , 255 , 255 , 0.9);
                    line-height: 1.5;
                }
            }

            iframe{
                width: 100%;
                max-width: 640px;
                border-radius: 4px;
                height: 320px;

                @media(max-width:1040px){
                    max-width: 560px;
                }

                @media(max-width:768px){
                    max-width: 100%;
                }
            }
        }
    }

    div.reserve-follow{
        margin: 0 auto ;
        max-width: 1040px;
        padding: 0 12px;
        box-sizing: border-box;
        display: flex;
        position: fixed;
        bottom: 40px;
        right: 12px;
        z-index: 999;
        display: none;

        @media(max-width:480px){
            bottom: 20px;
        }

        a{
            margin-left: auto;
            width: fit-content;
            padding: 16px 56px 16px 40px;
            background-color: var(--color-sub);
            border: ipx solid var(--color-sub);
            border-radius: 40px;
            color: var(--color-white);
            transition: .2s;
            position: relative;

            &::after{
                content: '';
                width: 10px;
                height: 10px;
                background-color: var(--color-white);
                clip-path: polygon(0 0 , 100% 50% , 0 100%);
                position: absolute;
                top: 50%;
                right: 32px;
                transform: translateY(-50%);
            }

            &:hover{
                background-color: #d2af00;
            }
        }
    }
}

footer{
    padding: 104px 24px 40px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)),
    url(img/top/footer-bg.jpg) center / cover no-repeat;

    @media(max-width:480px){
        padding: 80px 12px 40px;
    }

    div#reserve{
        margin: 0 auto ;
        max-width: 1040px;
        padding: 56px 0 40px;
        box-sizing: border-box;
        background-color: rgba(255 , 255 , 255 , 0.9);
        border-radius: 4px;

        div.search-bar{
            margin: 40px auto 0;
            max-width: 560px;

            .search-widget-search-container-bf1818{
                box-shadow:none;
                background: none;
                padding: 0;
            }
        }
    }

    div.info{
        margin: 40px auto 0;
        max-width: 1040px;

        p{
            color: var(--color-white);
            line-height: 2;

            a{
                display: inline;
                color: var(--color-white);
                text-decoration: underline;

                &:hover{
                    text-decoration: none;
                }
            }
        }
    }

    small{
        display: block;
        margin-top: 80px;
        width: 100%;
        text-align: center;
        color: var(--color-white);
        font-size: 0.75rem;
    }

}

@keyframes image-slider {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}