@charset "UTF-8";
/*---------------------------
ローディング画面
-----------------------------*/
#loading {
    background-color: #98a478;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
}

#loading__image {
    width: 400px;
}

/*---------------------------
コンテンツ
-----------------------------*/
.cup {
    position: relative;
    z-index: 10;
}

.cup__image {
    width: 300px;
    position: absolute;
    top: calc(50% - 10px);
    right: calc(50% - 415px);
}

.milktea {
    position: relative;
    z-index: 20;
}

.milktea__image {
    width: 800px;
    position: absolute;
    top: calc(50% - -90px);
    left: calc(50% - 330px);
}

.text__area {
    padding: 50px 0;
    margin: 0 auto;
    position: relative;
    top: 300px;
    z-index: 30;
}

/*---------------------------
足跡
-----------------------------*/
.footprint {
    position: relative;
}

.footprint__image0 {
    position: absolute;
    top: calc(50% - -450px);
    left: calc(50% - 280px);
    transform: rotate(-140deg);
}

.footprint__image1 {
    position: absolute;
    top: calc(50% - -573px);
    left: calc(50% - 260px);
    transform: rotate(-130deg);
}

.footprint__image2 {
    position: absolute;
    top: calc(50% - -650px);
    left: calc(50% - 400px);
    transform: rotate(-140deg);
}

.footprint__image3 {
    position: absolute;
    top: calc(50% - -794px);
    left: calc(50% - 375px);
    transform: rotate(-140deg);
}

.footprint__image4 {
    position: absolute;
    top: calc(50% - -830px);
    left: calc(50% - 500px);
    transform: rotate(-140deg);
}

.footprint__image5 {
    position: absolute;
    top: calc(50% - -948px);
    left: calc(50% - 480px);
    transform: rotate(-140deg);
}

/*---------------------------
ノートPC
-----------------------------*/
@media screen and (max-width: 1280px) {
    /*---------------------------
    コンテンツ
    -----------------------------*/
    .cup__image {
        width: 180px;
        top: calc(50% - -80px);
        /* right: 300px; */
        right: calc(50% - 300px);
    }

    .milktea__image {
        /* top: 120px; */
        top: calc(50% - -128px);
        /* left: 280px; */
        left: calc(50% - 328px);
    }

    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image0 {
        /* top: 450px; */
        top: calc(50% - -450px);
        /* left: 270px; */
        left: calc(50% - 350px);
        transform: rotate(-120deg);
    }

    .footprint__image1 {
        /* top: 530px; */
        top: calc(50% - -570px);
        /* left: 260px; */
        left: calc(50% - 380px);
    }

    .footprint__image2 {
        top: calc(50% - -520px);
        /* top: 520px; */
        /* left: 150px; */
        left: calc(50% - 490px);
        transform: rotate(-120deg);
    }

    .footprint__image3 {
        top: calc(50% - -600px);
        /* top: 600px; */
        /* left: 130px; */
        left: calc(50% - 500px);
        transform: rotate(-120deg);
    }

    .footprint__image4 {
        top: calc(50% - -580px);
        /* top: 580px;
        left: 30px; */
        left: calc(50% - 590px);
        transform: rotate(-120deg);
    }

    .footprint__image5 {
        top: calc(50% - -670px);
        /* top: 670px; */
        /* left: 0; */
        left: calc(50% - 630px);
        transform: rotate(-120deg);
    }

}


/*---------------------------
タブレット
-----------------------------*/
@media screen and (max-width: 768px) {
    /*---------------------------
    コンテンツ
    -----------------------------*/
    .cup__image {
        width: 150px;
        top: calc(50% - -30px);
        /* top: 30px;
        right: 40px; */
        right: calc(50% - 250px);
    }

    .milktea__image {
        width: 570px;
        top: calc(50% - -70px);
        /* top: 70px;
        left: 50px; */
        left: calc(50% - 290px);
    }

    .text__area {
        top: 200px;
    }

    .text__area__item__image {
        width: 50%;
    }

    #text1 {
        width: 35%;
    }

    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image0 {
        width: 40px;
        top: calc(50% - -380px);
        /* top: 310px;
        left: 120px; */
        left: calc(50% - 240px);
        transform: rotate(-165deg);
    }

    .footprint__image1 {
        width: 40px;
        top: calc(50% - -450px);
        /* top: 350px;
        left: 150px; */
        left: calc(50% - 200px);
        transform: rotate(-160deg);
    }

    .footprint__image2 {
        width: 40px;
        top: calc(50% - -500px);
        /* top: 370px;
        left: 90px; */
        left: calc(50% - 280px);
        transform: rotate(-150deg);
    }

    .footprint__image3 {
        width: 40px;
        top: calc(50% - -580px);
        /* top: 430px;
        left: 90px; */
        left: calc(50% - 240px);
        transform: rotate(-130deg);
    }

    .footprint__image4 {
        width: 40px;
        top: calc(50% - -570px);
        /* top: 410px;
        left: 30px; */
        left: calc(50% - 360px);
        transform: rotate(-130deg);
    }

    .footprint__image5 {
        width: 40px;
        top: calc(50% - -660px);
        /* top: 470px; */
        left: 0;
        transform: rotate(-130deg);
    }
}

@media screen and (max-width: 480px) {
    /*---------------------------
    ローディング画面
    -----------------------------*/
    #loading__image {
        width: 300px;
    }

    /*---------------------------
    コンテンツ
    -----------------------------*/
    .cup__image {
        /* top: 5px;
        right: 10px; */
        top: calc(50% - -10px);
        right: calc(50% - 180px);
    }

    .milktea__image {
        width: 300px;
        /* left: 45px; */
        left: calc(50% - 150px);
    }

    .text__area {
        top: 125px;
        /* top: calc(50% - -10px); */
    }

    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image0 {
        width: 30px;
        top: calc(50% - -184px);
        /* top: 184px;
        left: 80px; */
        left: calc(50% - 120px);
        transform: rotate(-160deg);
    }

    .footprint__image1 {
        width: 30px;
        top: calc(50% - -235px);
        /* top: 235px;
        left: 108px; */
        left: calc(50% - 80px);
        transform: rotate(-160deg);
    }

    .footprint__image2 {
        width: 30px;
        top: calc(50% - -265px);
        /* top: 265px;
        left: 60px; */
        left: calc(50% - 150px);
        transform: rotate(-160deg);
    }

    .footprint__image3 {
        width: 30px;
        top: calc(50% - -330px);
        left: calc(50% - 120px);
        /* top: 310px; */
        transform: rotate(-160deg);
    }

    .footprint__image4 {
        width: 30px;
        top: calc(50% - -370px);
        left: calc(50% - 170px);
        /* top: 307px;
        left: 22px; */
        transform: rotate(-130deg);
    }

    .footprint__image5 {
        width: 30px;
        /* top: 355px; */
        top: calc(50% - -460px);
    }

}