@charset "UTF-8";


@media (min-width: 769px) {
    /* top
    ---------------------------------------------------------------------------*/
    .l-navi {
        right: 100%;
    }

    #main {
        overflow: hidden;
        opacity: 1;
    }

    #main-inner {
        max-width: 100%;
    }

    #top-inner {
        padding: 0 6%;
    }

    #top-inner section {
        box-sizing: border-box;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
    }

    .shop__footer {
        opacity: 1;
    }

    /* #visual
    ---------------------------------------------------------------------------*/
    #visual .slider-img {
        opacity: 1;
    }

    #visual .slider-img .slick-list {
        left: 0;
        width: 50%;
    }

    #visual .slider-img .inner {
        background-position: center bottom;
    }

    #visual .mask {
        position: fixed;
        top: 0;
        right: 50%;
        background-color: #FFFFFF;
        width: 50%;
        height: 100vh;
        z-index: 100;
    }

    /* #top-mask
    ---------------------------------------------------------------------------*/
    #top-mask {
        overflow: hidden;
        position: fixed;
        top: 0;
        right: 0;
        background-color: #FFFFFF;
        width: 100%;
        height: 100vh;
        z-index: 100;
    }

    #visual + main #top-mask {
        width: 50%;
    }

    #top-mask .logo {
        opacity: 0;
    }

    #top-mask .logo,
    .top-main .logo {
        position: absolute;
        top: 20px;
        right: 50px;
        z-index: 2;
    }

    #top-mask .logo img,
    .top-main .logo img {
        width: auto;
        max-width: 220px;
        height: 55px;
        object-fit: contain;
    }

    #top-mask-img {
        display: none !important;
    }
}

@media (max-width: 768px) {

    /* #top-mask
    ------------------------------------*/
    #top-mask {
        overflow: hidden;
        position: fixed;
        top: 0;
        right: 0;
        background-color: #FFFFFF;
        width: 100%;
        height: 100vh;
        z-index: 100;
    }

    #top-mask .logo {
        opacity: 0;
    }

    #top-mask .logo {
        position: absolute;
        top: 0;
        /* right: calc(100vw - 232px); */
        z-index: 3;
        padding: 8px 16px;
        min-height: 65px;
        display: flex;
        align-items: center;
    }

    #top-mask .logo img {
        width: auto;
        max-width: 200px;
        max-height: 48px;
        height: 48px;
        object-fit: contain;
    }

    #top-mask-img {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }

    #top-mask-img .logo {
        position: absolute;
        top: 0;
        z-index: 3;
        padding: 8px 16px;
        min-height: 65px;
        display: flex;
        align-items: center;
    }

    #top-mask-img .logo img {
        max-width: 200px;
        max-height: 55px;
        height: auto;
        object-fit: contain;
    }

    #top #top-mask-img {
        display: block;
    }

    #top-mask-img .mask__img {
        width: 100%;
        height: 100vh;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #top-mask-img .mask__background {
        width: 100%;
        height: 100vh;
        background-color: #333333;
        background: linear-gradient(223deg, #4E503A 0%, #0E495F 100%);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
    }

    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    #top .btn-nav {
        right: -100px;
    }

    #top .footer__fixed-menu {
        opacity: 0;
    }

    #visual .slider-img {
        display: block !important;
    }

    #visual .slide-vegas {
        display: block !important;
    }
}

/* 軽量モード
------------------------------------*/   
#top__loading {
    width: 100%;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#top__loading img {
    width: 250px;
    height: 250px;
    object-fit: contain;
    opacity: 0;
}

.light_mode#top #mainContents {
    opacity: 0;
}

.light_mode.sp#top #main, 
.light_mode.sp#top #visual, 
.light_mode.sp#top #shopFooter,
.light_mode.sp#top .footer__fixed-menu {
    opacity: 1;
}

@media (max-width: 768px) {
    .light_mode#top #main, 
    .light_mode#top #visual, 
    .light_mode#top #shopFooter,
    .light_mode#top .footer__fixed-menu {
        opacity: 1;
    }
}

/* アニメーションなし
------------------------------------*/   
.none_mode.pc#top .l-navi {
    right: calc(100% - 70px);
}

.none_mode.pc#top .l-navi .inner {
    left: 40px;
    opacity: 1;
}

.none_mode.sp#top #main, 
.none_mode.sp#top #visual, 
.none_mode.sp#top #shopFooter,
.none_mode.sp#top .footer__fixed-menu {
    opacity: 1;
}

.none_mode.sp#top #visual, 
.none_mode.sp#top #visual .list-visual__box img {
    height: calc(100vh - 160px);
}

.none_mode.sp#top #visual .slider-img {
    opacity: 0;
    transition: opacity .3s linear;
}

.none_mode.sp#top #visual .slider-img.slick-initialized {
    opacity: 1;
}

.none_mode.sp#top #spNaviBtn {
    right: 8px;
}

.none_mode.sp#top .btn-tel {
    right: 64px;
    opacity: 1;
}

@media (max-width: 768px) {
    .none_mode#top #main, 
    .none_mode#top #visual, 
    .none_mode#top #shopFooter,
    .none_mode#top .footer__fixed-menu {
        opacity: 1;
    }

    .none_mode#top #visual, 
    .none_mode#top #visual .list-visual__box img {
        height: calc(100vh - 160px);
    }

    .none_mode#top #visual .slider-img {
        opacity: 0;
        transition: opacity .3s linear;
    }
    
    .none_mode#top #visual .slider-img.slick-initialized {
        opacity: 1;
    }
    
    .none_mode#top #spNaviBtn {
        right: 8px;
    }
    
    .none_mode#top .btn-tel {
        right: 64px;
        opacity: 1;
    }
}

@media (min-width: 769px) {
    .none_mode.sp#top .l-navi {
        right: calc(100% - 70px);
    }

    .none_mode.sp#top .l-navi .inner {
        left: 40px;
        opacity: 1;
    }
}