#process_anime {
    position: relative;
    max-width: 91.4rem;
    &.right {
        margin: auto 0 auto auto;
        .anime_wrap {
            width: 100%;
            aspect-ratio: 914/636;
            background-image: url(../../img/safety/process/animation/base.webp);
            background-size: contain;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
            z-index: 10;

            .front {
                position: relative;
                z-index: 100;
            }
            .animation {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 50;
                .frame {
                    position: absolute;
                    width: 100%;
                    height: auto;
                    top: 0;
                    left: 0;
                    &.frame1 {
                        animation: frame1Anim 1s steps(1) infinite;
                    }
                    &.frame2 {
                        animation: frame2Anim 1s steps(1) infinite;
                    }
                }
            }

            .track {
                width: min(17.07%, 15.6rem);
                aspect-ratio: 156/150;
                position: absolute;
                top: 26.73%;
                left: 0;
                animation: trackAnim 8s infinite;
                z-index: 50;
            }

            .human {
                position: absolute;
                z-index: 30;
                .frame-human {
                    position: absolute;
                    width: 100%;
                    height: auto;
                    top: 0;
                    left: 0;
                    &.frame1 {
                        animation: frame1Anim 1s steps(1) infinite;
                    }
                    &.frame2 {
                        animation: frame2Anim 1s steps(1) infinite;
                    }
                }
                &.human-01 {
                    width: min(2.6259%, 2.4rem);
                    aspect-ratio: 24/50;
                    top: 22.0126%;
                    left: 25.055%;
                    animation: human01Anim 8s infinite;
                }
                &.human-02 {
                    width: min(2.6259%, 2.3rem);
                    aspect-ratio: 23/46;
                    top: 31.447%;
                    left: 16.849%;
                    animation: human02Anim 8s infinite;
                }
            }

            .forklift {
                position: absolute;
                z-index: 40;
                width: min(8.3151%, 7.6rem);
                aspect-ratio: 76/86;
                top: 24.0566%;
                left: 24.398%;
                animation: forklift0Anim 8s infinite;
                .frame-forklift {
                    position: absolute;
                    width: 100%;
                    height: auto;
                    top: 0;
                    left: 0;
                    &.frame1 {
                        animation: forklift1Anim 8s steps(1) infinite;
                    }
                    &.frame2 {
                        animation: forklift2Anim 8s steps(1) infinite;
                    }
                    &.frame3 {
                        animation: forklift3Anim 8s steps(1) infinite;
                    }
                }
            }
        }
        /* 吹き出し スマホ */
        .fukidashi_wrap_sp {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 200;
            .fukidashi {
                position: absolute;
                a {
                    display: block;
                    background-color: var(--color-green-hover);
                    font-size: 2rem;
                    color: #fff;
                    text-align: center;
                    line-height: 2;
                    width: 2em;
                    aspect-ratio: 1/1;
                    border-radius: 999px;
                    &:hover {
                        opacity: 1;
                    }
                }
                &::after {
                    content: "";
                    position: absolute;
                    display: block;
                    width: 1rem;
                    aspect-ratio: 1/1;
                    clip-path: polygon(0 0, 100% 0, 50% 100%);
                    background-color: var(--color-green-hover);
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%, 90%);
                }

                &.video01 {
                    top: 0;
                    left: 68%;
                }
                &.video02 {
                    top: 10%;
                    left: 50%;
                }
                &.video03 {
                    top: 35%;
                    left: 68%;
                }
                &.video04 {
                    top: 40%;
                    left: 28%;
                }
                &.video05 {
                    top: 6%;
                    left: 14%;
                }
            }
        }
    }
    /* 吹き出し */
    .fukidahi_wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 200;
        @media screen and (max-width: 480px) {
            position: static;
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin: 2rem auto;
            padding: 0 3rem;
            box-sizing: border-box;
        }
        .fukidashi {
            position: absolute;
            @media screen and (max-width: 480px) {
                position: static;
            }
            a {
                display: block;
                background-color: var(--color-green-hover);
                font-size: 1.5rem;
                color: #fff;
                text-align: center;
                padding: 0 1em;
                line-height: 3.6;
                border-radius: 0.5em;
            }
            &::after {
                content: "";
                position: absolute;
                display: block;
                width: 1.2rem;
                aspect-ratio: 1/1;
                clip-path: polygon(0 0, 100% 0, 50% 100%);
                background-color: var(--color-green-hover);
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 90%);
            }

            &:hover {
                opacity: 1;

                transform-origin: center bottom;
                transition: transform 0.2s ease-out;
                box-shadow: 0px 0px 17.4px rgba(0, 0, 0, 0.17);
                a {
                    background-color: var(--color-green-other);
                    opacity: 1;
                    transition: transform 0.2s ease-out;
                    transform: scale(110%);
                }
                &::after {
                    background-color: var(--color-green-other);
                    transition: transform 0.2s ease-out;
                }
            }
            @media screen and (max-width: 480px) {
                a {
                    font-size: 1.4rem;
                    padding: 0 1em;
                    line-height: 3;
                }
                &::after {
                    display: none;
                }
                &:hover {
                    a {
                        transform: scale(1);
                        background-color: var(--color-green-hover);
                    }
                }
            }

            &.video01 {
                top: 4.717%;
                left: 62.035%;
            }
            &.video02 {
                top: 18.7107%;
                left: 42.6696%;
            }
            &.video03 {
                top: 40.8805%;
                left: 65.20787%;
            }
            &.video04 {
                top: 46.54088%;
                left: 24.39824%;
            }
            &.video05 {
                top: 12.264%;
                left: 14.442%;
            }
        }
    }
    .float {
        animation: floatAnim 3s ease-in-out infinite;
        @media screen and (max-width: 480px) {
            animation: floatAnim_sp 2s ease-in-out infinite;
        }
        &.delay1 {
            animation-delay: 0s;
        }
        &.delay2 {
            animation-delay: 0.3s;
        }
        &.delay3 {
            animation-delay: 0.5s;
        }
        &.sp-no_float {
            @media screen and (max-width: 480px) {
                animation: none;
            }
        }
    }
}

@keyframes frame1Anim {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes frame2Anim {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes trackAnim {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 0);
    }
    75% {
        transform: translate(-144.74%, 83.67%);
    }
    87.5% {
        transform: translate(-144.74%, 83.67%);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes human01Anim {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    50% {
        transform: translate(-429.177%, 102%);
        opacity: 1;
    }
    51% {
        transform: translate(-429.177%, 102%);
        opacity: 0;
    }

    100% {
        transform: translate(-429.177%, 102%);
        opacity: 0;
    }
}
@keyframes human02Anim {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-369.5652%, -121.739%);
    }
}
@keyframes forklift0Anim {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-93.421%, 45.3488%);
    }
    60% {
        transform: translate(-93.421%, 45.3488%);
    }
    80% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes forklift1Anim {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes forklift2Anim {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes forklift3Anim {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

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

    50% {
        transform: translateY(6px);
    }

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

    50% {
        transform: translateY(3px);
    }

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