/* common */
.sp-only {
    display: block;
}

.pc-only {
    display: none;
}

.small-br {
    display: block;
    height: .5em;
}

body {
    font-family: sans-serif;
    padding-bottom: 20vw;
    /* background: url(./img/bg_sp.png) no-repeat top / cover fixed; */
    color: #fff;
    text-shadow: 1px -1px 2px rgba(0, 0, 0, .9);
}
body:before{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(./img/bg_sp.png) center no-repeat;
    background-size: cover;
}

@media screen and (min-width:768px) {

    /* pc style */
    .sp-only {
        display: none;
    }

    .pc-only {
        display: block;
    }

    body {
        padding-bottom: 8vw;
        /* background-image: url(./img/bg_pc.png); */
    }
    body:before{
        background: url(./img/bg_pc.png) center no-repeat;
    }
    
}

/* top */
.main-title {
    font-size: 12vw;
    text-align: center;
    margin: .5em;
}

.sub-title {
    font-size: 6vw;
    text-align: right;
    margin: .5em;
}

.main-description {
    font-size: 3vw;
    text-align: center;
}

.main-video-wrapper {
    width: 95%;
    margin: 1em auto;
}

.main-video {
    width: 100%;
}

@media screen and (min-width:768px) {

    /* pc style */
    .main-title {
        font-size: 6vw;
    }

    .sub-title {
        font-size: 1.8vw;
    }

    .main-description {
        font-size: 1vw;
    }

    .main-video-wrapper {
        width: 45%;
    }
}

/* look list */
#all.section-wrappper {
    height: 1270vw;
}

.section-title {
    font-size: 6vw;
    text-align: center;
    margin: .5em 0;
}

.look-list-wrapper {
    position: relative;
}

.look-list-container {
    position: absolute;
    /* animation */
    /* animation: scrollAnime linear forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 70%; */
}

/* @keyframes scrollAnime {
    from {
        filter: grayscale(100%);
        padding-top: 30vw;
    }

    to {
        filter: none;
        padding-top: 0;
    }
} */

.look-list-container img {
    width: 100%;
}

.look-list-container.size-L {
    width: 47.33vw;
    height: 71vw;
}

.look-list-container.size-M {
    width: 35.33vw;
    height: 53vw;
}

@media screen and (min-width:768px) {

    /* pc style */
    #all.section-wrappper {
        height: 373vw;
    }

    .section-title {
        font-size: 3vw;
    }

    .look-list-container.size-L {
        width: 23.67vw;
        height: 35.5vw;
    }

    .look-list-container.size-M {
        width: 17.67vw;
        height: 26.5vw;
    }
}


/* look 1 - 40 position */
.look-list-container:nth-child(1) {
    left: 10vw;
    top: 0;
}

.look-list-container:nth-child(2) {
    left: 59vw;
    top: 8vw;
}

.look-list-container:nth-child(3) {
    left: 52vw;
    top: 67vw;
}

.look-list-container:nth-child(4) {
    left: 5vw;
    top: 76vw;
}

.look-list-container:nth-child(5) {
    left: 62vw;
    top: 137vw;
}

.look-list-container:nth-child(6) {
    left: 11vw;
    top: 135vw;
}

.look-list-container:nth-child(7) {
    left: 51vw;
    top: 194vw;
}

.look-list-container:nth-child(8) {
    left: 4vw;
    top: 210vw;
}

.look-list-container:nth-child(9) {
    left: 32vw;
    top: 240vw;
}

.look-list-container:nth-child(10) {
    left: 64vw;
    top: 250vw;
}

.look-list-container:nth-child(11) {
    left: 10vw;
    top: 285vw;
}

.look-list-container:nth-child(12) {
    left: 44vw;
    top: 306vw;
}

.look-list-container:nth-child(13) {
    left: 5vw;
    top: 340vw;
}

.look-list-container:nth-child(14) {
    left: 62vw;
    top: 374vw;
}

.look-list-container:nth-child(15) {
    left: 12vw;
    top: 395vw;
}

.look-list-container:nth-child(16) {
    left: 58vw;
    top: 430vw;
}

.look-list-container:nth-child(17) {
    left: 4vw;
    top: 465vw;
}

.look-list-container:nth-child(18) {
    left: 37vw;
    top: 480vw;
}

.look-list-container:nth-child(19) {
    left: 64vw;
    top: 520vw;
}

.look-list-container:nth-child(20) {
    left: 10vw;
    top: 535vw;
}

.look-list-container:nth-child(21) {
    left: 42vw;
    top: 576vw;
}

.look-list-container:nth-child(22) {
    left: 4vw;
    top: 600vw;
}

.look-list-container:nth-child(23) {
    left: 30vw;
    top: 650vw;
}

.look-list-container:nth-child(24) {
    left: 62vw;
    top: 660vw;
}

.look-list-container:nth-child(25) {
    left: 3vw;
    top: 690vw;
}

.look-list-container:nth-child(26) {
    left: 39vw;
    top: 710vw;
}

.look-list-container:nth-child(27) {
    left: 7vw;
    top: 750vw;
}

.look-list-container:nth-child(28) {
    left: 52vw;
    top: 765vw;
}

.look-list-container:nth-child(29) {
    left: 8vw;
    top: 808vw;
}

.look-list-container:nth-child(30) {
    left: 51vw;
    top: 844vw;
}

.look-list-container:nth-child(31) {
    left: 2vw;
    top: 884vw;
}

.look-list-container:nth-child(32) {
    left: 52vw;
    top: 926vw;
}

.look-list-container:nth-child(33) {
    left: 8vw;
    top: 960vw;
}

.look-list-container:nth-child(34) {
    left: 51vw;
    top: 1003vw;
}

.look-list-container:nth-child(35) {
    left: 4vw;
    top: 1040vw;
}

.look-list-container:nth-child(36) {
    left: 52vw;
    top: 1079vw;
}

.look-list-container:nth-child(37) {
    left: 1vw;
    top: 1115vw;
}

.look-list-container:nth-child(38) {
    left: 50vw;
    top: 1158vw;
}

.look-list-container:nth-child(39) {
    left: 6vw;
    top: 1191vw;
}

@media screen and (min-width:768px) {

    /* pc style */
    .look-list-container:nth-child(1) {
        left: 5vw;
        top: 0;
    }

    .look-list-container:nth-child(2) {
        left: 29vw;
        top: 6vw;
    }

    .look-list-container:nth-child(3) {
        left: 46vw;
        top: 2vw;
    }

    .look-list-container:nth-child(4) {
        left: 71vw;
        top: 0vw;
    }

    .look-list-container:nth-child(5) {
        left: 80vw;
        top: 19vw;
    }

    .look-list-container:nth-child(6) {
        left: 9vw;
        top: 37vw;
    }

    .look-list-container:nth-child(7) {
        left: 31vw;
        top: 35vw;
    }

    .look-list-container:nth-child(8) {
        left: 48vw;
        top: 39vw;
    }

    .look-list-container:nth-child(9) {
        left: 66vw;
        top: 34vw;
    }

    .look-list-container:nth-child(10) {
        left: 2vw;
        top: 80vw;
    }

    .look-list-container:nth-child(11) {
        left: 18vw;
        top: 74vw;
    }

    .look-list-container:nth-child(12) {
        left: 36vw;
        top: 68vw;
    }

    .look-list-container:nth-child(13) {
        left: 58vw;
        top: 62vw;
    }

    .look-list-container:nth-child(14) {
        left: 78vw;
        top: 56vw;
    }

    .look-list-container:nth-child(15) {
        left: 12vw;
        top: 105vw;
    }

    .look-list-container:nth-child(16) {
        left: 34vw;
        top: 110vw;
    }

    .look-list-container:nth-child(17) {
        left: 55vw;
        top: 93vw;
    }

    .look-list-container:nth-child(18) {
        left: 74vw;
        top: 86vw;
    }

    .look-list-container:nth-child(19) {
        left: 7vw;
        top: 143vw;
    }

    .look-list-container:nth-child(20) {
        left: 27vw;
        top: 141vw;
    }

    .look-list-container:nth-child(21) {
        left: 50vw;
        top: 121vw;
    }

    .look-list-container:nth-child(22) {
        left: 71vw;
        top: 113vw;
    }

    .look-list-container:nth-child(23) {
        left: 67vw;
        top: 144vw;
    }

    .look-list-container:nth-child(24) {
        left: 44vw;
        top: 158vw;
    }

    .look-list-container:nth-child(25) {
        left: 81vw;
        top: 164vw;
    }

    .look-list-container:nth-child(26) {
        left: 3vw;
        top: 171vw;
    }

    .look-list-container:nth-child(27) {
        left: 22vw;
        top: 173vw;
    }

    .look-list-container:nth-child(28) {
        left: 60vw;
        top: 173vw;
    }

    .look-list-container:nth-child(29) {
        left: 37vw;
        top: 185vw;
    }

    .look-list-container:nth-child(30) {
        left: 14vw;
        top: 201vw;
    }

    .look-list-container:nth-child(31) {
        left: 69vw;
        top: 210vw;
    }

    .look-list-container:nth-child(32) {
        left: 44vw;
        top: 223vw;
    }

    .look-list-container:nth-child(33) {
        left: 17vw;
        top: 239vw;
    }

    .look-list-container:nth-child(34) {
        left: 42vw;
        top: 259vw;
    }

    .look-list-container:nth-child(35) {
        left: 67vw;
        top: 264vw;
    }

    .look-list-container:nth-child(36) {
        left: 12vw;
        top: 284vw;
    }

    .look-list-container:nth-child(37) {
        left: 36vw;
        top: 297vw;
    }

    .look-list-container:nth-child(38) {
        left: 63vw;
        top: 305vw;
    }

    .look-list-container:nth-child(39) {
        left: 39vw;
        top: 335vw;
    }
}

/* bottom section */
.bottom-letter {
    width: 90%;
    margin: 0 auto;
}

.bottom-logo {
    width: 20%;
    margin: 0 auto;
}

.bottom-section div img {
    width: 100%;
}

@media screen and (min-width:768px) {

    /* pc style */
    .bottom-letter {
        width: 50%;
    }

    .bottom-logo {
        width: 15%;
    }
}