/**  アニメ ************************************************************/


.h2-anime,
.h2-anime-02 {
    opacity: 0;
    transition: opacity .4s, transform .4s;
    transform: translateY(20px);
}

.anime-fuwa {
    opacity: 0;
    animation: image3 1s forwards 1s, image1-2 2.5s infinite ease-in-out;
}

.anime-fuwafuwa {
    opacity: 0;
    animation: image3 1s forwards 1s, image1-2 2s infinite ease-in-out;
}

.anime-fuwafuwafuwa {
    opacity: 0;
    animation: image3 1s forwards 1s, image1-2 1.8s infinite ease-in-out;
}

.anime-left {
    opacity: 0;
    transition: opacity .5s, transform .5s;
    transform: translateX(-30px);
    transition-timing-function: ease-out;
}

.anime-right {
    opacity: 0;
    transition: opacity .5s, transform .5s;
    transform: translate(30px);
    transition-timing-function: ease-out;
}

.anime-up {
    opacity: 0;
    transition: opacity .5s, transform .5s;
    transform: translateY(40px);
    transition-timing-function: ease-out;
}
/**20250313 追記 */
.anime-up-fadeout {
    opacity: 1;
    transition: opacity 3s, transform 3s;
    transform: translate(0);
    transition-timing-function: ease-out;
}

.anime-rotate-in {
    opacity: 0;
    transition: opacity .5s, transform .5s;
    transform: rotateZ(180deg);
    transition-timing-function: ease-out;
}

.fadeout {
    opacity: 0;
    transform: translateY(-100px);
}
/**20250313 追記  end*/

.fadein {
    transform: rotateY(0);
}

.fadein02 {
    opacity: 1;
    transform: translateY(0);
}

.fadein03 {
    opacity: 1;
    transform: translateX(0);
}
.fadein04 {
    opacity: 1;
    transform: rotateZ(0deg);
}

.anime-tu-01,
.anime-tu-02,
.anime-tu-03,
.anime-tu-04,
.anime-zai-02,
.anime-zai-03,
.anime-zai-01 {
    position: relative;
}

.anime-tu-02,
.anime-tu-03,
.anime-zai-02 {
    top: -1rem;
}

.anime-tu-01,
.anime-tu-02,
.anime-tu-03,
.anime-tu-04,
.anime-zai-02,
.anime-zai-03,
.anime-zai-01 {
    opacity: 0;
}

.anime-tu-01,
.anime-zai-01 {
    transition: opacity 1s, transform .8s;
    transform: translate(100%, 100%);
}

.anime-tu-02 {
    transition: opacity 1s, transform 1.2s;
    transform: translate(0%, 100%);
}

.anime-tu-03,
.anime-zai-02 {
    transition: opacity 1s, transform .6s;
    transform: translate(0%, 100%);
}

.anime-tu-04,
.anime-zai-03 {
    transition: opacity 1s, transform 1s;
    transform: translate(-100%, 100%);
}

.fadein04 {
    opacity: 1;
    transform: translate(0, 0);
}

.anime-top-01 {
    animation-name: fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes image1-2 {

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

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

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

    100% {
        opacity: 1;
    }
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadein-left {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.anime-top-02 {
    animation-name: fadeUpAnime02;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime02 {
    from {
        opacity: 0;
        transform: translate(-50%, 50%)rotate(-90deg);
        transform-origin: left bottom;
    }

    to {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
        transform-origin: left bottom;
    }
}

.yureru-s {
    animation: yureru-s 2s infinite;
}

@keyframes yureru-s {
    0% {
        transform: translate(2px, 0px);
    }

    5% {
        transform: translate(-2px, 0px);
    }

    10% {
        transform: translate(2px, 0px);
    }

    15% {
        transform: translate(-2px, 0px);
    }

    20% {
        transform: translate(2px, 0px);
    }

    25% {
        transform: translate(-2px, 0px);
    }

    30% {
        transform: translate(0px, 0px);
    }
}

.yureru-s2 {
    animation: yureru-s2 2s infinite;
}

@keyframes yureru-s2 {
    0% {
        transform: translate(4px, 0px);
    }


    10% {
        transform: translate(-4px, 0px);
    }


    20% {
        transform: translate(4px, 0px);
    }


    30% {
        transform: translate(-4px, 0px);
    }

    40% {
        transform: translate(0px, 0px);
    }
}

.yureru-s-top {
    animation: yureru-s-top 2s infinite;
}

@keyframes yureru-s-top {
    0% {
        transform: translate(-51%, -50%);
    }

    5% {
        transform: translate(-49%, -50%);
    }

    10% {
        transform: translate(-51%, -50%);
    }

    15% {
        transform: translate(-49%, -50%);
    }

    20% {
        transform: translate(-51%, -50%);
    }

    25% {
        transform: translate(-49%, -50%);
    }

    30% {
        transform: translate(-50%, -50%);
    }
}

.yureru-j {
    animation: yureru-j 2s infinite;
}

@keyframes yureru-j {
    0% {
        transform: translate(0px, 2px);
    }

    5% {
        transform: translate(0px, -2px);
    }

    10% {
        transform: translate(0px, 2px);
    }

    15% {
        transform: translate(0px, -2px);
    }

    20% {
        transform: translate(0px, 2px);
    }

    25% {
        transform: translate(0px, -2px);
    }

    30% {
        transform: translate(0px, 0px);
    }
}

.cap-h1-zai-box-zai::after {
    content: "";
    display: block;
    position: absolute;
    background-size: contain;
    background-image: url(/assets/images/area-cp/zai-top-15000-re.svg);
    background-repeat: no-repeat;
    transform: translateY(0%) translateX(-6%);
    width: 16rem;
    height: 12rem;
    top: 2rem;
    right: 0rem;
    animation: yureru-s-zai 5s infinite;
}

@keyframes yureru-s-zai {
    0% {
        transform: translate(100%, 0%);
    }

    5% {
        transform: translate(-6%, 0%);
    }
}

.img-left {
    opacity: 0;
    animation: bounce-in-left2 1s;
    animation-play-state: paused;
}

.img-right {
    opacity: 0;
    animation: bounce-in-right2 1s;
    animation-play-state: paused;
}

.bounse-leri {
    opacity: 1;
    animation-play-state: running;
}

@keyframes bounce-in-left2 {
    0% {
        transform: translateX(-100%);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        transform: translateX(-30px);
        animation-timing-function: ease-in;
    }

    72% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }

    81% {
        transform: translateX(-15px);
        animation-timing-function: ease-in;
    }

    90% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }

    95% {
        transform: translateX(-5px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateX(0);
        animation-timing-function: ease-out;

    }
}

@keyframes bounce-in-right2 {
    0% {
        transform: translateX(100%);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        transform: translateX(30px);
        animation-timing-function: ease-in;
    }

    72% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }

    81% {
        transform: translateX(15px);
        animation-timing-function: ease-in;
    }

    90% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }

    95% {
        transform: translateX(5px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateX(0) !;
        animation-timing-function: ease-out;

    }
}
.fadein {
    transform: rotateY(0);
}

.denden, .denden2, .pyoko {
    transform: translate(0);
    opacity: 0;
    /* 初期状態では見えないようにする */
}

.denden.show {
    transform: translate(0);
    opacity: 1;
    animation: denden 1s both ease-in-out;
}

.denden2, .fadein2.denden2 {
    transform: translate(0);
    opacity: 1;
    animation: denden2 2s infinite ease-in-out;
}

@keyframes denden {
    0% {
        transform: scale(7);
    }
    38% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    55% {
        transform: scale(1.5);
        animation-timing-function: ease-in;
    }
    72% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    81% {
        transform: scale(1.24);
        animation-timing-function: ease-in;
    }
    89% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    95% {
        transform: scale(1.04);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}


@keyframes denden2 {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}
.boyoyon {
    opacity: 0;
}

.fadein.boyoyon, .fadein2.boyoyon {
    transform: translate3d(0, 0, 100px);
    opacity: 1;
    animation: boyoyon 700ms backwards;
}

.fadein.boyoyon .fadein2.boyoyon {
    transform: translate3d(0, 0, 100px);
    opacity: 1;
    animation: boyoyon 700ms backwards;
}

.fadein.boyoyon2, .fadein2.boyoyon2 {
    transform: translate3d(0, 0, 100px);
    opacity: 1;
    animation: boyoyon 700ms backwards;
}
@keyframes boyoyon {
    0%, 20%, 40%, 60%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.1, 0.1, 0.1, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 0, 100px) scale3d(5, 5, 5);
        /* 初めの位置（手前）で小さく */
    }

    20% {
        transform: translate3d(0, 0, 0) scale3d(1.5, 1.5, 1.5);
        /* バウンスのピーク（手前から奥に） */
    }

    40% {
        transform: translate3d(0, 0, 70px) scale3d(0.8, 0.8, 0.8);
        /* 中間の位置（手前に戻る） */
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1);
        /* バウンスのピーク（手前から奥に） */
    }

    80% {
        transform: translate3d(0, 0, 30px) scale3d(0.97, 0.97, 0.97);
        /* 中間の位置（手前に戻る） */
    }

    100% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        /* 最終位置（手前から奥に） */
    }
}
/************アニメ end********************************/