:root {
    --brd-loop-duration: 180s;
}

@media screen and (max-width:767px) { /*SP*/

    @keyframes loopLeft {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    @keyframes loopRight {
        0% { transform: translateX(0); }
        100% { transform: translateX(50%); }
    }

    #BRD .BRD_loop_wrap{
        overflow: hidden;
        width: 100vw;
    }

    #BRD .BRD_loop_track_01{
        display: flex;
        width: fit-content;
        animation: loopRight var(--brd-loop-duration) linear infinite;
        transform-origin: 0 0;
    }

    #BRD .BRD_loop_track_02{
        display: flex;
        width: fit-content;
        animation: loopLeft var(--brd-loop-duration) linear infinite;
        transform-origin: 0 0;
    }

    .BRD_loop_track_originR{
        width: 100vw;
        display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
        overflow: hidden;
    }

    .BRD_loop_track_originL{
        width: 100vw;
        display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
        overflow: hidden;
    }

}

@media screen and (min-width:768px) and ( max-width:1300px) { /*TB*/

    @keyframes loopLeft {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    @keyframes loopRight {
        0% { transform: translateX(0); }
        100% { transform: translateX(50%); }
    }

    #BRD .BRD_loop_wrap{
        overflow: hidden;
        width: 100vw;
    }

    #BRD .BRD_loop_track_01{
        display: flex;
        width: fit-content;
        animation: loopRight var(--brd-loop-duration) linear infinite;
        transform-origin: 0 0;
    }

    #BRD .BRD_loop_track_02{
        display: flex;
        width: fit-content;
        animation: loopLeft var(--brd-loop-duration) linear infinite;
        transform-origin: 0 0;
    }

    .BRD_loop_track_originR{
        width: 100vw;
        display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
        overflow: hidden;
    }

    .BRD_loop_track_originL{
        width: 100vw;
        display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
        overflow: hidden;
    }

}

@media screen and (min-width:1301px), print{

    @keyframes loopLeft {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    @keyframes loopRight {
        0% { transform: translateX(0); }
        100% { transform: translateX(50%); }
    }

    #BRD .BRD_loop_wrap{
        overflow: hidden;
        width: 100vw;
    }

    #BRD .BRD_loop_track_01{
        display: flex;
        width: fit-content;
        animation: loopRight var(--brd-loop-duration) linear infinite;
        transform-origin: 0 0;
    }

    #BRD .BRD_loop_track_02{
        display: flex;
        width: fit-content;
        animation: loopLeft var(--brd-loop-duration) linear infinite;
        transform-origin: 0 0;
    }

    .BRD_loop_track_originR{
        width: 100vw;
        display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
        overflow: hidden;
    }

    .BRD_loop_track_originL{
        width: 100vw;
        display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
        overflow: hidden;
    }

}