@charset "utf-8";
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
    position:absolute;
    bottom:0;
    left:50%;
    width: 100%;
    text-align: center;
    z-index: 9;
}

/*Scrollテキストの描写*/
.scrolldown2 a{
    /*描画位置*/
    position: absolute;
    left:0;
    transform: translateX(-25%);
    bottom:100px;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
.scrolldown2_dott:before{
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-6px;
    /*丸の形状*/
    width:15px;
    height:15px;
    border-radius: 50%;
    background:#fff;
    z-index: 9;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
    animation: circlemove 2.6s ease-in-out infinite;
}
/* 丸の描写 */
/*.scrolldown2:before {*/
/*content:"";*/
/*!*描画位置*!*/
/*position: absolute;*/
/*bottom:0;*/
/*left:0;*/
/*!*線の形状*!*/
/*width:2px;*/
/*height: 120px;*/
/*background:#ff8c00;*/
/*z-index: 10;*/
/*}*/

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
    0%{bottom:80px;}
    100%{bottom:-5px;}
}
/* 線の描写 */
.scrolldown2:after{
    content:"";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:0;
    /*線の形状*/
    width:2px;
    height: 90px;
    background:#fff;
    z-index: 8;
}
@media screen and (max-width: 768px) {
    .scrolldown2{
        /*描画位置※位置は適宜調整してください*/
        position:absolute;
        bottom:0;
        left:50%;
        width: 100%;
        text-align: center;
        z-index: 9;
    }
    .scrolldown2 a{
        /*描画位置*/
        position: absolute;
        left:0;
        transform: translateX(-25%);
        bottom:60px;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }
    .scrolldown2 span{
        /*描画位置*/
        position: absolute;
        left:0;
        transform: translateX(-25%);
        bottom:50px;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }
    .scrolldown2_dott:before{
        content: "";
        /*描画位置*/
        position: absolute;
        bottom:0;
        left:-5px;
        /*丸の形状*/
        width:12px;
        height:12px;
        border-radius: 50%;
        z-index: 9;
        /*丸の動き1.6秒かけて透過し、永遠にループ*/
        animation: circlemove 2.6s ease-in-out infinite;
    }
    @keyframes circlemove{
        0%{bottom:45px;}
        100%{bottom:-5px;}
    }
    .scrolldown2:after{
        content:"";
        /*描画位置*/
        position: absolute;
        bottom:0;
        left:0;
        /*線の形状*/
        width:2px;
        height: 50px;
        background:#fff;
        z-index: 8;
    }
}