.animation-section {
    background-color: darkgray;
    border-top: dimgrey 5px solid;
    border-bottom: dimgrey 5px solid;
}

#animation_area {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

#site_title {
    position: absolute;
    font-size: 3rem;
    animation: titleAnime 3s;
    top: 10%;
    left: 0%;
    width: 100%;
    text-align: center;
    opacity: 1;
}

@keyframes titleAnime {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#moving-image {
    position: absolute;
    width: 100px;
    animation: moveCar 2s;
    top: 140px;
    left: calc(50% - 5px);
    width: 150px;
}

/* 滑らかなS字形の動きを定義 */
@keyframes moveCar {
    0% {
        top: 5px;
        left: calc(50%);
        width: 72px
    }
    25% {
        top: 40px;
        left: calc(50% - 40px);
        width: 79px
    }
    75% {
        top: 80px;
        left: calc(50% + 30px);
        width: 108px
    }
    100% {
        top: 140px;
        left: calc(50% - 5px);
        width: 150px
    }
}

#memo-image {
    position: absolute;
    top: 173px;
    left: calc(50% - 140px);
    width: 100px;
    opacity: 1;
}

#triangular_cone_1 {
    position: absolute;
    TOP: 12px;
    left: calc(50% - 30px);
    width: 20px;
}

#triangular_cone_2 {
    position: absolute;
    bottom: 3px;
    left: calc(50% - 39px);
    width: 40px;
}

@media only screen and (min-width: 768px) {
    #animation_area {
        height: 300px;
    }

    #moving-image {
        position: absolute;
        width: 100px;
        animation: moveCar 3s;
        top: 121px;
        left: calc(50% - 12px);
        width: 250px;
    }

    @keyframes moveCar {
        0% {
            top: 0;
            left: calc(50% - 62px);
            width: 100px
        }
        37% {
            top: 30px;
            left: calc(50% + 38px);
            width: 110px
        }
        65% {
            top: 60px;
            left: calc(50% - 112px);
            width: 150px
        }
        100% {
            top: 121px;
            left: calc(50% - 12px);
            width: 250px
        }
    }

    #memo-image {
        top: 185px;
        left: calc(50% - 278px);
        width: 150px;
    }

    #triangular_cone_1 {
        left: calc(50% - 92px);
        width: 20px;
    }

    #triangular_cone_2 {
        position: absolute;
        top: 216px;
        left: calc(50% - 120px);
        width: 45px;
    }
}