:root {
    --color-black: #000;
    --color-white: #fff;
    --color-red: #970609;
    --color-gray: #4f4f4f;
    --pc-container-width: 31.25vw;
    --breakpoint-mobile: 769px;
    --breakpoint-pc: 768px
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: 100vh;
    background-color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10020;
    transition: opacity 0.5s ease-out
}

#loading-screen.hidden {
    opacity: 0;
    pointer-events: none
}

.loading-text {
    color: var(--color-red);
    width: 11vw;
    font-family: itc-benguiat, serif;
    font-weight: 500;
    opacity: 0;
    animation: loadingBlink 0.05s linear infinite;
    animation-delay: 1s;
    animation-fill-mode: forwards
}

@keyframes loadingBlink {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@media (max-width:769px) {
    .loading-text {
        width: 32vw
    }

    .loading-text {
        padding-bottom: 25vw
    }
}

@media (min-width:768px) {
    .loading-text {
        font-size: 2.5vw
    }
}

#main {
    overflow: hidden;
    position: relative;
    min-height: 100vh
}

#intros {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: 100vh;
    z-index: 0
}

#content-layer {
    position: relative;
    z-index: 2;
    pointer-events: none;
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: 100vh;
    visibility: hidden
}

#header-section {
    width: 100vw;
    height: 10vh;
    background-color: var(--color-black);
    position: -webkit-fixed;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;

    .logo {
        width: 16vw
    }
}

.mv-section {
    width: 85vw;
    padding-top: 28vw;
    margin: 0 auto;

    .mv img {
        width: 100%
    }
}

.hero-section {
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 18vw auto 4vw auto;

    .logo {
        width: 42vw
    }

    .lead {
        margin: 16vw auto;
        text-align: center;

        .lead-block:first-child {
            margin-bottom: 2rem
        }
    }
}

.house-section {
    .title {
        width: 84vw;
        margin: 0 auto;
        margin-bottom: 8vw
    }

    .line {
        width: 1px;
        height: 8vw;
        background-color: var(--color-white);
        margin: 4vw auto
    }

    .date {
        width: 80vw;
        margin: 0 auto;
        margin-top: 4vw;
        margin-bottom: 8vw
    }

    .sub-block {
        width: 80vw;
        margin: 8vw auto 4vw auto;

        .info {
            margin-top: 6vw;

            p .bold {
                font-family: itc-benguiat, serif;
                font-weight: 400;
                font-style: normal
            }
        }
    }

    .annotation {
        width: 80vw;
        margin: 0 auto;

        small {
            display: block
        }
    }
}

.onlinestore-section {
    margin-top: 24vw;

    .title {
        width: 72vw;
        margin: 0 auto;
        margin-bottom: 6vw
    }

    .date {
        width: 60vw;
        margin: 0 auto
    }

    .buttons {
        width: 70vw;
        margin: 10vw auto 12vw auto;

        a.button {
            display: block;
            position: relative;
            overflow: hidden;
            transition: opacity 0.3s ease-out
        }

        a.button:first-child {
            margin-bottom: 6vw
        }

        a.button.va-online {
            aspect-ratio: 930 / 230;
            width: 100%
        }

        a.button.va-online::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../image/va_online_btn.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 1;
            transition: opacity 0.3s ease-out
        }

        a.button.va-online::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../image/va_online_btn_on.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0;
            transition: opacity 0.3s ease-out
        }

        a.button.va-online:hover::before {
            opacity: 0
        }

        a.button.va-online:hover::after {
            opacity: 1
        }

        a.button.jadore {
            aspect-ratio: 930 / 230;
            width: 100%
        }

        a.button.jadore::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../image/jadore_btn.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 1;
            transition: opacity 0.3s ease-out
        }

        a.button.jadore::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../image/jadore_btn_on.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0;
            transition: opacity 0.3s ease-out
        }

        a.button.jadore:hover::before {
            opacity: 0
        }

        a.button.jadore:hover::after {
            opacity: 1
        }
    }
}

.items-section {
    margin-top: 24vw;

    .title {
        width: 30vw;
        margin: 0 auto;
        margin-bottom: 10vw
    }

    .buttons {
        width: 70vw;
        margin: 4vw auto 16vw auto;

        a.button {
            display: block;
            position: relative;
            overflow: hidden;
            transition: opacity 0.3s ease-out
        }

        a.button.view-product {
            aspect-ratio: 930 / 230;
            width: 100%
        }

        a.button.view-product::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../image/view_product_btn.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 1;
            transition: opacity 0.3s ease-out
        }

        a.button.view-product::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../image/view_product_btn_on.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0;
            transition: opacity 0.3s ease-out
        }

        a.button.view-product:hover::before {
            opacity: 0
        }

        a.button.view-product:hover::after {
            opacity: 1
        }
    }
}

.specialmenu-section {
    margin-top: 28vw;

    .title {
        width: 74vw;
        margin: 0 auto;
        margin-bottom: 10vw
    }
}

.items-section,
.specialmenu-section {
    .buttons {
        a.button {
            display: block
        }
    }

    .swiper {
        width: 100%;
        padding: 0 10vw 8vw 10vw;
        overflow: visible
    }

    .swiper-wrapper {
        height: auto
    }

    .swiper-slide {
        width: 72vw;
        opacity: .3;
        transition: opacity 0.3s ease-out
    }

    .swiper-slide-active {
        opacity: 1
    }

    .swiper-slide img {
        width: 100%;
        display: block;
        border-radius: 4px;
        transition: filter 0.3s ease-out
    }

    .swiper-slide a:hover img {
        filter: brightness(1.4)
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 8vw;
        height: 8vw;
        margin-top: 0;
        top: 45vw;
        transform: translateY(-50%);
        background-image: url(../image/arrow_short.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center
    }

    .swiper-button-prev:after,
    .swiper-button-next:after {
        content: none
    }

    .swiper-button-prev {
        left: 3vw;
        transform: translateY(-50%) scaleX(-1)
    }

    .swiper-button-next {
        right: 3vw
    }

    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        opacity: .7
    }
}

.aboud-section {
    margin-top: 10vw;
    background: var(--color-black);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 100%);
    padding-top: 40vw;

    .title {
        width: 56vw;
        margin: 0 auto;
        margin-bottom: 6vw
    }

    .poster {
        text-align: center;

        img {
            width: 80vw;
            margin: 4vw 0 6vw 0
        }

        .message {
            font-weight: 400;
            font-size: 1.3rem;
            line-height: 1.3;
            margin: 2vw 0 2vw
        }

        .description {
            width: 80vw;
            margin: 4vw auto;
            text-align: left
        }

        .buttons {
            margin: 4vw 0;

            a.button.netflix {
                display: inline-block;
                position: relative;
                aspect-ratio: 930 / 230;
                width: 80vw
            }

            a.button.netflix::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url(../image/netflix_btn.png);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                opacity: 1;
                transition: opacity 0.3s ease-out
            }

            a.button.netflix::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url(../image/netflix_btn_on.png);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                opacity: 0;
                transition: opacity 0.3s ease-out
            }

            a.button.netflix:hover::before {
                opacity: 0
            }

            a.button.netflix:hover::after {
                opacity: 1
            }
        }
    }

    .youtube {
        display: block;
        text-align: center;
        aspect-ratio: 16 / 9;
        margin: 0 auto;

        iframe {
            width: 100%;
            height: 100%
        }
    }
}

#footer {
    width: 100%;
    background: var(--color-black);
    text-align: center;
    padding: 0 10vw;
    padding-top: 20vw;
    padding-bottom: 10vw;
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 500;
    font-style: normal;

    small {
        font-size: .6rem;
        font-weight: 500;
        display: block
    }
}

@keyframes lineGrow {
    0% {
        height: 0
    }

    50% {
        height: 8vw
    }

    100% {
        height: 0
    }
}

.hero-section>*,
.house-section>*,
.onlinestore-section>*,
.items-section>*,
.specialmenu-section>*,
.aboud-section>* {
    opacity: 0
}

@media (max-width:769px) {
    .pc-sidebar {
        display: none
    }

    .youtube {
        width: 80vw
    }

    .specialmenu-section {
        .lead {
            padding: 0 8vw;
            margin: 0 auto 10vw auto
        }
    }

    .swiper-slide {
        width: 16vw;

        .credit {
            font-size: .65rem;
            padding-top: 3vw
        }
    }
}

@media (min-width:768px) {
    #main {
        width: var(--pc-container-width);
        margin: 0 auto;
        position: relative;
        background: rgba(0, 0, 0, .7)
    }

    #intros {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0
    }

    #content-layer {
        width: 100%;
        margin: 0 auto
    }

    #header-section {
        width: var(--pc-container-width);
        left: 50%;
        transform: translateX(-50%);
        height: 7vh;
        background-color: var(--color-black);
        position: -webkit-fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10010;

        .logo {
            width: 4vw
        }
    }

    .mv-section {
        width: calc(var(--pc-container-width) * 0.85);
        padding-top: 7.5vw
    }

    .hero-section {
        width: calc(var(--pc-container-width) * 0.9);
        margin: 6vw auto 2.08vw auto;

        .logo {
            width: 16vw
        }

        .lead {
            margin: 4.17vw auto
        }
    }

    .house-section {
        .title {
            width: calc(var(--pc-container-width) * 0.84);
            margin-bottom: 3.13vw;
        }

        .line {
            height: 60px;
            margin: 1.56vw auto
        }

        .date {
            width: calc(var(--pc-container-width) * 0.8);
            margin-top: 1.56vw;
            margin-bottom: 3.13vw
        }

        .sub-block {
            width: calc(var(--pc-container-width) * 0.8);
            margin: 3.13vw auto 1.56vw auto;

            .info {
                margin-top: 2.34vw
            }
        }

        .annotation {
            width: calc(var(--pc-container-width) * 0.8)
        }
    }

    .onlinestore-section {
        margin-top: 9.38vw;

        .title {
            width: calc(var(--pc-container-width) * 0.72);
            margin-bottom: 2.34vw
        }

        .date {
            width: calc(var(--pc-container-width) * 0.6)
        }

        .buttons {
            width: calc(var(--pc-container-width) * 0.7);
            margin: 3.91vw auto 4.69vw auto;

            a.button:first-child {
                margin-bottom: 2.34vw
            }

            a.button.va-online,
            a.button.jadore {
                aspect-ratio: 930 / 230;
                width: 100%
            }
        }
    }

    .items-section {
        margin-top: 10vw;

        .title {
            width: 9.5vw;
            margin: 0 auto;
            margin-bottom: 3vw
        }

        .buttons {
            width: calc(var(--pc-container-width) * 0.7);
            margin: 0 auto;
            margin-top: 4vw;

            a.button:first-child {
                margin-bottom: 2.34vw
            }

            a.button.view-product {
                aspect-ratio: 930 / 230;
                width: 100%
            }
        }
    }

    .specialmenu-section {
        margin-top: 10vw;

        .title {
            width: 22vw;
            margin: 0 auto
        }

        .lead {
            padding: 2vw
        }
    }

    .items-section,
    .specialmenu-section {
        .swiper {
            width: 100%;
            padding: 0 5vw 1vw 5vw
        }

        .swiper-slide {
            width: 22vw;

            .credit {
                font-size: .8rem;
                padding-top: 1vw
            }
        }

        .swiper-button-prev,
        .swiper-button-next {
            width: 2.5vw;
            height: 2.5vw;
            background-image: url(../image/arrow_short.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center
        }

        .swiper-button-prev:after,
        .swiper-button-next:after {
            content: none
        }

        .swiper-button-prev {
            left: 1.5vw;
            top: 13.5vw;
            transform: translateY(-50%) scaleX(-1)
        }

        .swiper-button-next {
            right: 1.5vw;
            top: 13.5vw
        }
    }

    .aboud-section {
        margin-top: 5vw;
        padding-top: 4vw;

        .title {
            width: calc(var(--pc-container-width) * 0.56);
            margin-bottom: 2.34vw
        }

        .poster {
            img {
                width: calc(var(--pc-container-width) * 0.8);
                margin: 1.56vw 0 2.34vw 0
            }

            .description {
                width: calc(var(--pc-container-width) * 0.8);
                margin: 1.56vw auto
            }

            .buttons {
                margin: 1.56vw 0;

                a.button.netflix {
                    aspect-ratio: 930 / 230;
                    width: calc(var(--pc-container-width) * 0.8)
                }
            }
        }

        .youtube {
            width: calc(var(--pc-container-width) * 0.8)
        }
    }

    #footer {
        padding: 0 5vw;
        padding-top: 7.81vw;
        padding-bottom: 3.91vw
    }

    @keyframes lineGrow {
        0% {
            height: 0
        }

        50% {
            height: 60px
        }

        100% {
            height: 0
        }
    }

    .pc-sidebar {
        display: block;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10005;
        pointer-events: auto
    }

    .pc-sidebar-left {
        left: 11%;
        width: 12vw
    }

    .sidebar-logo {
        width: 100%
    }

    .pc-sidebar-right {
        right: 12%;
        text-align: center
    }

    .pc-sidebar-right.inactive {
        pointer-events: none
    }

    .pc-sidebar-right.inactive a {
        opacity: .7
    }

    .pc-sidebar-right:hover {
        opacity: 1
    }

    .pc-sidebar-right ul {
        list-style: none;
        padding: 0;
        margin: 0
    }

    .pc-sidebar-right li {
        margin-bottom: 3vw;
        line-height: 1.2
    }

    .pc-sidebar-right li,
    .pc-sidebar-right a {
        color: var(--color-gray);
        text-decoration: none;
        font-size: 1.2rem;
        font-family: itc-benguiat, serif;
        font-weight: 500;
        transition: color 0.3s
    }

    .pc-sidebar-right a:hover {
        color: var(--color-white)
    }

    .pc-sidebar-right a.active {
        color: var(--color-white)
    }
}