/* メインビジュアル */

.hero-right {
    width: 50vw;
    bottom: 0;
    /* position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); */
}

.mv00 {
    background-image: url(img/augtop.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* position: absolute;
    top: 0;
    left: 0; */
    z-index: 1;
    width: 50%;
    height: 90%;
}

.mv01 {
    background-image: url(img/augtop_001.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 50%;
    height: 90%;
    animation-delay: 0.5s;
}

.mv02 {
    background-image: url(img/augtop_002.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 50%;
    height: 90%;
    animation-delay: 1s;
}

.mv03 {
    background-image: url(img/augtop_003.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 8;
    width: 50%;
    height: 90%;
    animation-delay: 1.5s;
}

.mv04 {
    background-image: url(img/augtop_004.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 7;
    width: 50%;
    height: 90%;
    animation-delay: 2s;
}

.mv05 {
    background-image: url(img/augtop_005.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 6;
    width: 50%;
    height: 90%;
    animation-delay: 2.5s;
}

.mv06 {
    background-image: url(img/augtop_006.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 50%;
    height: 90%;
    animation-delay: 3s;
    bottom: 0;
}

.hero-left {
    z-index: 20;
}


@media (max-width: 1024px) {

    .mv00,.mv01,.mv02,.mv03,.mv04,.mv05,.mv06  {
        width: 90%;
        height: 80vh;
        bottom: 0;
    }
  }


@media (max-width: 768px) {

    #header {
        height: 1%;
        padding: 0;
    }
    .reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .hero-right {
        width: 80%;
    }

    .mv00,.mv01,.mv02,.mv03,.mv04,.mv05,.mv06  {
        width: 100%;
        height: 40vh;
        bottom: 0;
    }

    .reco{
        width: 100%;
    }

  }