.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;
    top: 10%;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 1;
}

#jack-image {
    position: absolute;
    top: 130px;
    left: calc(50% - 35px);
    width: 220px;
}

#kukiatsu-image {
    position: absolute;
    top: 135px;
    left: calc(50% - 170px);
    width: 120px;
    opacity: 1;
    animation: stretch 4.1s;
}

@keyframes stretch {
  0%, 100% {
    transform: scaleX(1); /* 初期状態と終了状態は元のサイズ */
  }
  90% {
    transform: scaleX(1.5); /* 幅を1.5倍に伸ばす */
  }
}


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

    #jack-image {
        position: absolute;
        top: 130px;
        left: calc(50% - 5px);
        width: 310px;
    }

    #kukiatsu-image {
        position: absolute;
        top: 145px;
        left: calc(50% - 270px);
        width: 160px;
        opacity: 1;
    }
}