body {
    font-family: "M_PLUS_Rounded_1c variant0", "Poppins", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    max-width: 1920px;
    max-height: 1080px;
}


h1 {
    background-color: navy;
    color: white;
    padding: 10px;
    text-align: center;
}

p {
    margin: 0;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    font-size: 2.2vw;
    overflow: hidden;
}

.white {
    color: white;
    position: relative;
    left: -90%;
    z-index: 10000;
}

.back {
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    position: relative;
    z-index: -100;
}

.mobtn {
    width: 38vw;
    position: absolute;
    z-index: 10001;
  top: 0;
  bottom: 0;
  margin: auto 0;
    right: 12%;
}


.curtain-container {
    position: absolute;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    z-index: 10000;
}

.au {
    position: absolute;
    z-index: 100000;
    bottom: 0%;
    width: 200px;

}

.curtain {
    width: 50%;
    height: 100%;
    object-fit: cover;
    transform: translateX(0);
    transition: transform 2s ease-in-out;
}

#curtain1 {
    transform-origin: right;
}

#curtain2 {
    transform-origin: left;
}



@keyframes rotate-anim {
    100% {
        transform: rotate(360deg);
    }
}


.square {
    padding: 2em 2em;
    z-index: 100;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 86%;

    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.eachTextAnime span {
    color: #553333;
    opacity: 0;
    display: inline-block;
}

.eachTextAnime.appeartext span {
    animation: text_anime_on 0.5s ease-out forwards;
}

@keyframes text_anime_on {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*page2左右*/

.momop2,
.otomop2 {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);

}

.momop2 {
    overflow: hidden;
    left: -100%;
    /* 初期位置を画面外左に設定 */
    animation: slideInFromLeft 2s forwards;
    /* アニメーションを指定 */
}

.otomop2 {
    right: -100%;
    /* 初期位置を画面外右に設定 */
    animation: slideInFromRight 3s forwards;
    /* アニメーションを指定 */
}

@keyframes slideInFromLeft {
    to {
        left: 0;
        /* 最終的な位置を画面内に設定 */
    }
}

@keyframes slideInFromRight {
    to {
        right: 10%;
        /* 最終的な位置を画面内に設定 */
    }
}

/*page2左右*/



/*削除するかも項目*/
.bodyfadeout {
    opacity: 0;
}


.anime3 {
    transition: all 1s ease-in;
    margin-left: 110vw;
}

/*削除するかも項目*/



.illusts {
    width: 100%;
    overflow: hidden;
}

.oji1 {
    width: 30vw;
    position: absolute;
    top: 36%;
    left: 17%;
    animation: horizontal1 2s ease-in-out infinite alternate;
    /*2秒（再生時間）　ゆっくり始まってゆっくり終わる（速度）　infinite無限ループ（再生回数）　alternate通常、逆の往復再生を繰り返す（方向）*/
}

.momotaro {
    width: 30vw;
    position: absolute;
    top: 35%;
    left: 10%;
    animation: horizontal1 1s linear infinite alternate;
}

.inu {
    z-index: 20;
    width: 30vw;
    position: absolute;
    top: 60%;
    right: 300px;
    animation: horizontal1 2s ease-in-out infinite alternate;
}

.qinu {
    filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.2));
    z-index: 20;
    width: 30vw;
    position: absolute;
    top: 200%;
    right: 120%;
    animation: horizontal1 2s ease-in-out infinite alternate;
}


.inu4 {
    z-index: 20;
    width: 20vw;
    position: absolute;
    top: 70%;
    right: 300px;
    overflow: hidden;
    animation: horizontal1 2s ease-in-out infinite alternate;
    /*2秒（再生時間）　ゆっくり始まってゆっくり終わる（速度）　infinite無限ループ（再生回数）　alternate通常、逆の往復再生を繰り返す（方向）*/
}


@keyframes horizontal1 {
    0% {
        transform: translateX(-10px);
    }

    50% {
        transform: rotate(4deg)
    }

    /*3コマあります。translateXはX軸（横）に-40px〜40pxで移動。rotateは回転で10deg（10度傾き）　間の動きは自動補完*/
}


.illust2 {
    width: 22vw;
    animation: yurayura 1s linear infinite alternate;
    /*linear一定の速度*/
}

/*ゆらゆらさせつつピョンピョン跳ねさせるのを一気に書けなかったので別で書いて入れ子構造にしています。*/
@keyframes yurayura {

    0% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

/*跳ねるのを親要素にしているのでこちらにpositionを記述*/
.bounce2 {
    position: absolute;
    top: 50%;
    left: 60%;
    animation: bounce1 1s ease-in-out infinite alternate;
}

.kiji {
    z-index: 100;
    width: 30vw;
    position: absolute;
    top: 40%;
    right: 10px;
    animation: bounce1 1s ease-in-out infinite alternate;
}

.qkiji {
    filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.2));
    z-index: 100;
    width: 30vw;
    position: absolute;
    top: 40%;
    right: 10px;
    animation: bounce2 1s ease-in-out infinite alternate;
}

.kiji4 {
    z-index: 100;
    width: 20vw;
    position: absolute;
    top: 40%;
    right: 10px;
    animation: bounce1 1s ease-in-out infinite alternate;
}

@keyframes bounce2 {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-20px);
    }

    /*translateYはY軸（縦）に10px〜-20pxで移動。*/
}

.saru {
    position: absolute;
    width: 20vw;
    top: 30%;
    right: 250px;
    transform-origin: top;
    animation: pendulum ease-in-out 1.2s infinite alternate;
}

@keyframes pendulum {
    0% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

@keyframes rolling {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }

    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}

#linkContainer {
    opacity: 0;
    /* 初期は非表示 */
    transition: opacity 3s ease-in;
    /* フェードのアニメーションを設定 */
}

.next {
    width: 20vw;
    position: absolute;
    z-index: 10001;
    top: 85%;
    right: 2%;
}

.summon {
    width: 40vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 10001;
    top: 70%;
}

.momowho {
    position: absolute;
    width: 40vw;
    top: 30%;
    overflow: hidden;
}

.walk {
    position: absolute;
    z-index: 10;
    top: 38%;
    left: 45%;
    animation: walk 6s infinite alternate;
}

@keyframes walk {
    0% {
        transform: translateX(100px);
    }

    100% {
        transform: translateX(200px);
    }
}

@keyframes scwalk {
    0% {
        transform: translateX(100px) scale(-1, 1);
    }

    100% {
        transform: translateX(400px) scale(-1, 1);
    }
}

.momotaro3 {
    position: absolute;
    top: 40%;
    left: 5%;
    width: 20vw;
}

.inu3 {
    position: absolute;
    top: 60%;
    left: 37%;
    width: 27vw;
    animation: rolling 2s infinite alternate;
}

.saru3 {
    position: absolute;
    width: 20vw;
    animation: pendulum ease-in-out 1.2s infinite alternate;
}

.saru3a {
    position: absolute;
    left: 40%;
    top: 20%;
    width: 20vw;
    animation: scwalk 2s infinite alternate;
}

.kiji3 {
    position: absolute;
    left: 26%;
    top: 40%;
    width: 20vw;

}


#sc {
    transform: scale(-1, 1);
    animation: scwalk 3s infinite alternate;
}


.oni {
    position: absolute;
    top: 30%;
    right: 10%;
    width: 30vw;
    cursor: pointer;
}

.rotate {
    /* ここに回転のアニメーションを定義する */
    animation: rotateAnimation 1s linear forwards;
}

.shake {
    /* ここに振動のアニメーションを定義する */
    animation: shakeAnimation 0.5s ease-in-out forwards;
}

@keyframes rotateAnimation {
    to {
        transform: rotate(430deg);
    }
}

@keyframes shakeAnimation {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}



#img1 {
    position: absolute;
    width: 30vw;
    top: 60%;
    right: 30%;
    animation: bounce 1.2s ease 0.8s forwards;
}

#img2 {
    position: absolute;
    overflow: hidden;
    z-index: 100;
    width: 30vw;
    top: 40%;
    right: 10%;
    animation: bounce 1.2s ease 1.2s forwards;
}

#img3 {
    position: absolute;
    overflow: hidden;
    width: 20vw;
    top: 30%;
    right: 34%;
    transform-origin: top;
    animation: bounce 1.2s ease 1.6s forwards;
}

#simg1 {
    position: absolute;
    top: 35%;
    left: 10%;
    width: 30vw;
    animation: bounce 1.2s ease 0.8s forwards;
}

#simg2 {
    position: absolute;
    overflow: hidden;
    width: 30vw;
    z-index: 100;
    top: 25%;
    left: 35.7%;
    animation: bounce 1.2s ease 1.2s forwards;
}

#simg3 {
    position: absolute;
    overflow: hidden;
    width: 30vw;
    top: 25%;
    right:10%;
    transform-origin: top;
    animation: bounce 1.2s ease 1.6s forwards;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-90px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(10px);
    }
}



#inuC {
    position: absolute;
    z-index: 1000;
    width: 20vw;
    top: 50%;
    left: 30%;
    animation: move 1s forwards;
    cursor: pointer;
}

#kijiC {
    position: absolute;
    z-index: 1001;
    width: 20vw;
    top: 60%;
    left: 40%;
    animation: move 1s forwards;
    cursor: pointer;
}

#saruC {
    position: absolute;
    z-index: 1001;
    width: 20vw;
    top: 60%;
    left: 40%;
    animation: move 1s forwards;
    cursor: pointer;
}

@keyframes move {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(320px);
    }

    100% {
        transform: translateX(0px);
    }
}

.kemuri {
    position: absolute;
}

.sinu {
    position: absolute;
    top: 20%;
    left: 10%;
}

.ssaru {
    position: absolute;
    top: 10%;
    right: 10%;
}

.skiji {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 10001;
}