@charset "UTF-8";

/* ------------------------
common
------------------------ */

#section-wrap {
    transition: height .2s linear;
}

#section-wrap .section {
    position: absolute;
    left: 0;
    top: 100vh;
    width: 100%!important;
    height: 100vh;
    transform: translateY(0);
    background-color: #fff;
    transition: height .2s linear;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.section div {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


#section-wrap #section01 {
    top: 0;
    transition: height .2s linear;
}

.section video {
    object-fit: cover;
}

.sec-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: height .2s linear;
    overflow: hidden;
}

.slim-bg {
    position: absolute;
    left: 50%;
    top: 0;
    width: 56vh;
    height: 100vh;
    background-position: right center;
    background-size: cover;
    transform: translateX(-50%);
    transition: height .2s linear;
}

.txt-scroll {
    position: fixed;
    left: 50%;
    bottom: 20px;
    margin-left: -36px;
    z-index: 9;
    width: 72px;
}

#scroll-b {
    opacity: 0;
}

#section-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 1;
    transition: height .2s linear;
}

.item03, .item38, .item04, .item09 {
    opacity: 0;
}

@media only screen and (max-width: 767px) {
    
    #section01, #section01 .slim-bg, #section01 .slim-bg, #section01 .item01 {
        height: 100vh!important;
        transition: height .2s ease;
    }
    
    .txt-scroll {
        margin-left: -29px;
        width: 58px;
    }

}

/* ------------------------
section01
------------------------ */

#section01 .sec-bg {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: height .2s ease;
}

#section01 .item00 {
    overflow: hidden;
    max-width: 100%;
    height: 100vh;
    position: static;
    left: auto;
    top: auto;
    transform: translate(0);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    transition: height .2s ease;
}

#section01 .item00 > div {
    background-image: url(../images/intro/img_intro01.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    transition: height .2s ease;
}

#bt-skip {
    width: 80px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    opacity: 1;
    z-index: 10;
}

#bt-skip:hover img {
    opacity: 0.75;
}

.txt-rough {
    width: 64.0%;
    max-width: 324px;
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%)!important;
    z-index: 2;
}

.txt-elegance {
    width: 90.4%;
    max-width: 458px;
    position: absolute;
    bottom: 82px;
    left: 50%;
    transform: translateX(-50%)!important;
    z-index: 2;
}

.item04 {
    width: 70.8%;
    max-width: 366px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)!important;
    z-index: 2;
}

@media only screen and (max-width: 767px) {
    
    .slim-bg {
        width: 100%;
    }
    
    #bt-skip {
        width: 80px;
        right: 20px;
        bottom: 20px;
    }


}


/* ------------------------
section02
------------------------ */

#section02 .item10 {
    background-image: url(../images/intro/img_intro02.jpg);
}

#section02 .item11 {
    background-image: url(../images/intro/img_intro03.jpg);
}

#section02 .item12 {
    background-image: url(../images/intro/img_intro04.jpg);
}

.item05, .item33 {
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 40.56%;
    max-width: 40.56%;
    height: 100%;
}

.item06, .item34 {
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 28.21%;
    max-height: 28.21%;
}

.item07, .item35 {
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
    width: 40.56%;
    max-width: 40.56%;
    height: 100%;
}

.item08, .item36 {
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 28.21%;
    max-height: 28.21%;
}

.item09 {
    width: 89.47%;
    max-width: 454px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)!important;
}

@media only screen and (max-width: 767px) {

    .item05, .item33 {
        background: #fff;
        position: absolute;
        left: 0;
        top: 0;
        width: 19%;
        max-width: 19%;
        height: 100%;
    }

    .item06, .item34 {
        background: #fff;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 26%;
        max-height: 26%;
    }

    .item07, .item35 {
        background: #fff;
        position: absolute;
        right: 0;
        top: 0;
        width: 19%;
        max-width: 19%;
        height: 100%;
    }

    .item08, .item36 {
        background: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 26%;
        max-height: 26%;
    }
    
}

/* ------------------------
section03
------------------------ */

.sec03-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)!important;
    width: 72%;
    max-width: 364px;
}

.sec-bg.item17 {
    background: #CBBFB6;
}

.sec-bg.item23 {
    background: #A7A39D;
}

.sec-bg.item26 {
    background: #DADBDB;
}

.sec-bg.item28 {
    background: #BCB7AB;
}

.sec-bg.item31 {
    background: #A89D9C;
}

.sec-bg.item24 {
    background-image: url(../images/intro/img_intro09.jpg);
}

.sec-bg.item29 {
    background-image: url(../images/intro/img_intro10.jpg);
}

.sec-bg.item30 {
    background-image: url(../images/intro/img_intro11.jpg);
}

.sec-bg.item37 {
    background-image: url(../images/intro/img_intro12.jpg);
}

.sec-bg video {
    min-width: 100%;
    min-height: 100vh;
    z-index: 1;
}

.item18 {
    width: 47.07%;
    max-width: 261px;
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%)!important;
}

.item21 {
    width: 74.4%;
    max-width: 406px;
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%)!important;
}

.item25 {
    width: 74.4%;
    max-width: 418px;
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%)!important;
}

.item27 {
    width: 94%;
    max-width: 513px;
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%)!important;
}

.item32 {
    width: 87.6%;
    max-width: 480px;
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%)!important;
}

.item37 {
    filter: grayscale(100%);
    transition: filter 1.5s ease-in-out;
}

.item37.color {
    filter: grayscale(0);
}

.item23, .item26, .item28, .item31 {
    opacity: 0;
}


div[style="z-index: 9999;"] {
    display: none!important;
}