/* ----------------- first Stage */
.dc_container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1000000000;
}

.dc_container .dc_rm_container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    
    /* overflow: hidden; */
}
.dc_container div,
.dc_container img {
    position: absolute;
}

.dc_container div,
.dc_container img {
    position: absolute;
}

.dc_container .stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dc_container .noShow {
    display: none;
}

.dc_container .hide {
    opacity: 0;
    pointer-events: none;
}

.dc_container .center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dc_container .centerLeft {
    left: 50%;
    transform: translate(-50%);
}

.dc_container .centerTop {
    top: 50%;
    transform: translate(0, -50%);
}

.dc_container .bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.dc_container .clickArea {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.dc_container .dc_box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 0.3s ease-in-out;
    overflow-x: hidden;
    scrollbar-width: none;
    /* background-color: rgba(0, 0, 0, 0.1); */
}
.dc_container .dc_box.short {
    overflow: hidden;
}

.dc_container .dc_box.noTransit div,
.dc_container .dc_box.noTransit img {
    transition: none;
}

.dc_container .stage {
    transition: 0.5s ease-in-out;
}
.dc_container .stage.move {
    transform: translate(100%);
}
.dc_container .stage.out {
    transform: translateY(100%);
    transition: none;
}


.dc_container .kielb {
    width: calc(397/640*100%);
    left: calc(124/640*100%);
    top: calc(144/960*100%);
    transform: translate(200%);
}
.dc_container .kielb.in {
    transition: 0.5s ease-in-out;
    transform: translate(0%);
}
.dc_container .manual {
    width: 100%;
    left: 0;
    top: calc(450/960*100%);
    transform: translate(-100%, 50%) scale(0.7);
    opacity: 0;
}
.dc_container .manual.in {
    transition: 0.5s ease-in-out;
    transform: translate(0%);
    opacity: 1;
}
.dc_container .manual.out {
    transition: 0.5s ease-in-out;
    transform: translate(-100%, 50%) scale(0.7);
    opacity: 0;
}
.dc_container .fork {
    width: calc(356/640*100%);
    left: calc(286/640*100%);
    top: calc(461/960*100%);
    transform: translate(100%);
}
.dc_container .fork.in {
    transition: 0.5s ease-in-out;
    transform: translate(0%);
}
.dc_container .fork.noTransit {
    transition: none;
}

.dc_container .secondStage {
    height: calc(3594/640*100vw);
}


.dc_container .logo {
    position: fixed;
    width: calc(640/640*100%);
    top: calc(-7/960*100%);
    pointer-events: none;
}

.dc_container .front {
    width: 100%;
    top: calc(0/960*100%);
}
.dc_container .blue {
    width: 100%;
    top: calc(573/640*100vw);
}
.dc_container .copy {
    width: calc(504/640*100vw);
    left: calc(80/640*100vw);
    top: calc(854/640*100vw);
}


.dc_container .food1 {
    width: 100%;
    top: calc(1065/640*100vw);
}
.dc_container .food2 {
    width: 100%;
    top: calc(1470/640*100vw);
}
.dc_container .txt2 {
    width: 100%;
    top: calc(2220/640*100vw);
}
.dc_container .end {
    width: 100%;
    top: calc(2954/640*100vw);
}
.dc_container .elpise_box {
    width: calc(120/640*100vw);
    height: calc(120/640*100vw);
    left: 5%;
    top: calc(922/640*100vw);
}
.dc_container .elipse {
    width: 100%;
}
.dc_container .arrow {
    width: calc(58/640*100vw);
    transform: translate(-50%, -25%);
}
.arrowMove {
    animation: arrowMove 1s ease-in-out infinite alternate;
}
@keyframes arrowMove {
    0% {transform: translate(-50%, -75%);}
    100% {transform: translate(-50%, -25%);}
}

.dc_container .clickArea {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}




/* ----- media queries */
@media (max-aspect-ratio: 280/481) {
    .dc_container .bg {
        width: auto;
        height: 100%;
    }

    .dc_container .elpise_box {
        left: 50%;
        transform: translate(-50%);
        top: calc(1000/640*100vw);
    }
    
}

@media (max-aspect-ratio: 320/630) {

    .dc_container .elpise_box {
        left: 50%;
        transform: translate(-50%);
        top: calc(1020/640*100vw);
    }
}

@media (min-aspect-ratio: 321/484) {
    .dc_container .secondStage {
        top: -15vw;
    } 

}