@charset "UTF-8";

@keyframes bus-loop_pc {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-50%);
}
}

@keyframes bus-loop_sp {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-50%);
}
}

@media screen and (min-width: 768px) {
.pc{
display: block;
}

.sp{
display: none;
}

.anim_wrap{
position: relative;
width: 100%;
min-width: 1280px;
margin: 0 auto;
}

.anim_wrap .bg_img{
position: relative;
width: 96%;
margin: auto;
z-index: -1;
}

.bus_wrap{
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
overflow: hidden;
}

.bus_track{
display: flex;
width: max-content;
animation: bus-loop_pc 150s linear infinite;
will-change: transform;
}

.bus_set{
display: flex;
flex-shrink: 0;
}

.bus_set img{
display: block;
max-width: none;
flex-shrink: 0;
}

.bus_set img{
width: 5392px;
}
}
@media screen and (max-width: 767px) {
.pc{
display: none;
}

.sp{
display: block;
}

.anim_wrap{
position: relative;
width: 100%;
min-width: 340px;
margin: 30px auto 0;
}

.anim_wrap::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 300%;
height: 8px;
background-image: linear-gradient(270deg, rgba(201, 218, 255, 0.2) 0%, rgba(89, 189, 255, 0.2) 100%);
z-index: -1;
}

.anim_wrap .bg_img{
position: relative;
width: 96%;
margin: auto;
z-index: -1;
}

.bus_wrap{
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
overflow: hidden;
}

.bus_track{
display: flex;
width: max-content;
animation: bus-loop_sp 100s linear infinite;
will-change: transform;
}

.bus_set{
display: flex;
flex-shrink: 0;
}

.bus_set img{
display: block;
flex-shrink: 0;
}

.bus_set img{
width: 2771px;
}

}