/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/
/*スクロールダウン全体の場所*/
.scrolldown4 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    top: 850px;
    right: 50%;
    /*矢印の動き1秒かけて永遠にループ*/
    animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove {
    0% {
        top: 800px;
    }

    50% {
        top: 750px;
    }

    100% {
        top: 800px;
    }
}

/*Scrollテキストの描写*/
.scrolldown4 span {
    /*描画位置*/
    position: absolute;
    left: -20px;
    top: 0;
    /*テキストの形状*/
    color: #828282;
    font-size: 15px;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 30px;
    right: -17px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #828282;
    transform: skewX(-31deg);
}

.scrolldown4:after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0px;
    right: -10px;
    /*矢印の形状*/
    width: 1px;
    height: 50px;
    background: #828282;
}

@media screen and (max-width: 450px) {

    /*スクロールダウン全体の場所*/
    .scrolldown4 {
        /*描画位置※位置は適宜調整してください*/
        position: absolute;
        top: 90vh;
        left: 10vw;
        /*矢印の動き1秒かけて永遠にループ*/
        animation: arrowmove 1s ease-in-out infinite;
    }

    /*下からの距離が変化して全体が下→上→下に動く*/
    @keyframes arrowmove {
        0% {
            top: 85vh;
        }

        50% {
            top: 80vh;
        }

        100% {
            top: 85vh;
        }
    }

    /*Scrollテキストの描写*/
    .scrolldown4 span {
        /*描画位置*/
        position: absolute;
        left: -20px;
        top: 0;
        /*テキストの形状*/
        color: #fff;
        font-size: 15px;
        letter-spacing: 0.05em;
        /*縦書き設定*/
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    /* 矢印の描写 */
    .scrolldown4:before {
        content: "";
        /*描画位置*/
        position: absolute;
        top: 30px;
        left: 10px;
        /*矢印の形状*/
        width: 1px;
        height: 20px;
        background: #fff;
        transform: skewX(-31deg);
    }

    .scrolldown4:after {
        content: "";
        /*描画位置*/
        position: absolute;
        top: 0px;
        left: 5px;
        /*矢印の形状*/
        width: 1px;
        height: 50px;
        background: #fff;
    }
}

@media only screen and (max-height: 450px) and (orientation: landscape) {

    /*スクロールダウン全体の場所*/
    .scrolldown4 {
        /*描画位置※位置は適宜調整してください*/
        position: absolute;
        top: 430px;
        right: 50%;
        /*矢印の動き1秒かけて永遠にループ*/
        animation: arrowmove 1s ease-in-out infinite;
    }

    /*下からの距離が変化して全体が下→上→下に動く*/
    @keyframes arrowmove {
        0% {
            top: 430px;
        }

        50% {
            top: 380px;
        }

        100% {
            top: 430px;
        }
    }

    /*Scrollテキストの描写*/
    .scrolldown4 span {
        /*描画位置*/
        position: absolute;
        left: -20px;
        top: 0;
        /*テキストの形状*/
        color: #828282;
        font-size: 15px;
        letter-spacing: 0.05em;
        /*縦書き設定*/
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    /* 矢印の描写 */
    .scrolldown4:before {
        content: "";
        /*描画位置*/
        position: absolute;
        top: 30px;
        right: -17px;
        /*矢印の形状*/
        width: 1px;
        height: 20px;
        background: #828282;
        transform: skewX(-31deg);
    }

    .scrolldown4:after {
        content: "";
        /*描画位置*/
        position: absolute;
        top: 0px;
        right: -10px;
        /*矢印の形状*/
        width: 1px;
        height: 50px;
        background: #828282;
    }

}