.splash_xxx {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7%;
}

@media screen and (max-width: 750px) {
    .splash_xxx {
        width: 20%;
    }
}

.splash_xxx2 {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
}

@media screen and (max-width: 750px) {
    .splash_xxx2 {
        width: 60%;
    }
}

path {
    fill: none;
    /* 1,塗りの色 */
    stroke: #f1f1f1;
    /* 2,線の色 */
    stroke-dasharray: 2000;
    /* 3,破線の間隔 */
    stroke-dashoffset: 2000;
    /* 4,破線の開始位置 */
    stroke-width: 1;
    /* 5,線の太さ */
    animation: handwriting 4s ease forwards infinite;
    /* 6,名前 時間 タイミング 終了後の状態 */
}

/* --- アニメーション --- */
@keyframes handwriting {
    0% {
        fill: transparent;
        /* 1,塗りの色 */
        stroke-dashoffset: 0;
        /* 4,破線の開始位置 */
    }



    50% {
        fill: #f1f1f1;
        /* 1,塗りの色 */
        stroke-dashoffset: 0;
        /* 4,破線の開始位置 */
    }

    100% {
        fill: #f1f1f1;
        /* 1,塗りの色 */
        stroke-dashoffset: 0;
        /* 4,破線の開始位置 */
    }
}