@media screen and (max-width:480px) {
    .box1 {
        display: inline-block;
        width: 50px;
        height: 150px;
        margin: 0px 0px 0px -250px;
        background: #4b4b4b;
        text-align:center;
        animation: box11 18s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box11 {
        0% { transform:translate( 250px , -250px) skewX(-45deg) ;}
      100% { transform:translate( -170px , 170px) skewX(-45deg);}
       }

       .btn:active span::after {
        display: inline-block;
        width: 50px;
        height: 150px;
        margin: 0px 0px 0px -250px;
        background: #4b4b4b;
        text-align:center;
        animation: box11 58s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box11 {
        0% { transform:translate( 250px , -250px) skewX(-45deg) ;}
      100% { transform:translate(  -170px , 170px) skewX(-45deg);}
       }

       .box2 {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 5px 0;
        margin: 0px 0px 0px -100px;
        background: #4b4b4b;
        text-align:center;
        animation: box22 23s infinite linear;
      }
      @keyframes box22 {
        0% { transform:translate( 500px , -500px) skewX(-45deg);}
      100% { transform:translate(  -0px , 0px) skewX(-45deg);}
      }

      .box3 {
        display: inline-block;
        width: 50px;
        height: 150px;
        padding: 10px 0;
        margin: 0px 0px 0px 5px;
        background: #4b4b4b;
        text-align:center;
        animation: box33 26s  infinite linear;
       }
       @keyframes box33 {
        0% { transform:translate( 800px, -800px) skewX(-45deg);}
        100% { transform:translate( -50px , 50px) skewX(-45deg);}
      }
      /*1行目 終わり*/
      .box4 {
        display: inline-block;
        width: 50px;
        height: 100px;
        padding: 10px 0;
        margin: 0px 0px 0px 30px;
        background: #4b4b4b;
        text-align:center;
        animation: box44 54s linear;
        animation-fill-mode: forwards;
    }
      @keyframes box44 {
        0% { transform:translate( 300px, -300px) skewX(-45deg);}
        100% { transform:translate( -300px , 300px) skewX(-45deg);} 
      }

      .box5 {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 10px 0;
        margin: 0px 0px 0px -80px;
        background: #4b4b4b;
        text-align:center;
        animation: box55 52s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box55 {
        0% { transform:translate( 500px , -500px) skewX(-45deg);}
      100% { transform:translate(  -100px , 100px) skewX(-45deg);}
      }

      .box6 {
        display: inline-block;
        width: 50px;
        height: 100px;
        padding: 10px 0;
        margin: 0px 0px 0px -30px;
        background: #4b4b4b;
        text-align:center;
        animation: box66 54s infinite linear;
       }
       @keyframes box66 {
        0% { transform:translate( 700px , -700px) skewX(-45deg);}
      100% { transform:translate(0px , 0px) skewX(-45deg);}
      } 
      
      .box7 {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 10px 0;
        margin: 0px 0px 0px -75px;
        background: #4b4b4b;
        text-align:center;
        animation: box77 64s infinite linear;
       }
       @keyframes box77 {
        0% { transform:translate( 1000px , -1000px) skewX(-45deg);}
      100% { transform:translate(0px , 0px) skewX(-45deg);}
      }
      /*2行目終わり*/
      .box8 {
        display: inline-block;
        width: 50px;
        height: 350px;
        padding: 10px 0;
        margin: 0px 0px 0px 210px;
        background: #4b4b4b;
        text-align:center;
        animation: box88 24s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box88 {
        0% { transform:translate( -50px , 50px) skewX(-45deg);}
      100% { transform:translate( -400px , 400px) skewX(-45deg);}
      }

      .box9 {
        display: inline-block;
        width: 50px;
        height: 350px;
        padding: 10px 0;
        margin: 0px 0px 0px -50px;
        background: #4b4b4b;
        text-align:center;
        animation: box99 40s  infinite linear;
       }
       @keyframes box99 {
        0% { transform:translate( 600px , -600px) skewX(-45deg);}
      100% { transform:translate( -350px , 350px) skewX(-45deg);}
      }
      /*3行目終わり*/
      .box10 {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 10px 0;
        margin: 0px 0px 0px -150px;
        background: #4b4b4b;
        text-align:center;
        animation: box100 26s  infinite linear;
       }
       @keyframes box100 {
        0% { transform:translate( 450px , -450px) skewX(-45deg);}
      100% { transform:translate( -100px , 100px) skewX(-45deg);}
      }
      /*4行目終わり*/
      .box11 {
        display: inline-block;
        width: 50px;
        height: 200px;
        padding: 10px 0;
        margin: 0px 0px 0px 75px;
        background: #4b4b4b;
        text-align:center;
        animation: box110 27s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box110 {
        0% { transform:translate( 70px , -70px) skewX(-45deg);}
      100% { transform:translate( 560px , -560px) skewX(-45deg);}
      }

      .box12 {
        display: inline-block;
        width: 50px;
        height: 200px;
        padding: 10px 0;
        margin: 0px 0px 0px -50px;
        background: #4b4b4b;
        text-align:center;
        animation: box120 31s infinite linear;
       }
       @keyframes box120 {
        0% { transform:translate( -350px , 350px) skewX(-45deg);}
      100% { transform:translate( 400px , -400px) skewX(-45deg);}
      }

      .box13 {
        display: inline-block;
        width: 50px;
        height: 200px;
        padding: 10px 0;
        margin: 0px 0px 0px -50px;
        background: #4b4b4b;
        text-align:center;
        animation: box130 39s infinite linear;
       }
       @keyframes box130 {
        0% { transform:translate( -800px , 800px) skewX(-45deg);}
      100% { transform:translate( 400px , -400px) skewX(-45deg);}
      }
/*5行目終わり*/
      .box14 {
        display: inline-block;
        width: 50px;
        height: 100px;
        padding: 10px 0;
        margin: 0px 0px 0px 10px;
        background: #4b4b4b;
        text-align:center;
        animation: box140 25s infinite linear;
       }
       @keyframes box140 {
        0% { transform:translate( 350px , -350px) skewX(-45deg);}
      100% { transform:translate( -300px , 300px) skewX(-45deg);}
      }

      .box15 {
        display: inline-block;
        width: 50px;
        height: 100px;
        padding: 10px 0;
        margin: 0px 0px 0px -50px;
        background: #4b4b4b;
        text-align:center;
        animation: box150 32s infinite linear;
       }
       @keyframes box150 {
        0% { transform:translate( 700px , -700px) skewX(-45deg);}
      100% { transform:translate( -300px , 300px) skewX(-45deg);}
      }
/*6行目終わり*/
      .box16 {
        display: inline-block;
        width: 50px;
        height: 300px;
        padding: 10px 0;
        margin: 0px -10px 0px 100px;
        background: #4b4b4b;
        text-align:center;
        animation: box160 20s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box160 {
        0% { transform:translate( -250px , 250px) skewX(-45deg);}
      100% { transform:translate( -550px , 550px) skewX(-45deg);}
      }

      .box17 {
        display: inline-block;
        width: 50px;
        height: 300px;
        padding: 10px 0;
        margin: 0px 0px 0px -40px;
        background: #4b4b4b;
        text-align:center;
        animation: box170 20s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box170 {
        0% { transform:translate( -50px , 50px) skewX(-45deg);}
      100% { transform:translate( -550px , 550px) skewX(-45deg);}
      }

      .box18 {
        display: inline-block;
        width: 50px;
        height: 300px;
        padding: 10px 0;
        margin: 0px 0px 0px -25px;
        background: #4b4b4b;
        text-align:center;
        animation: box180 36s infinite linear;
       }
       @keyframes box180 {
        0% { transform:translate( 700px , -700px) skewX(-45deg);}
      100% { transform:translate( -400px , 400px) skewX(-45deg);}
      }

      .box19 {
        display: inline-block;
        width: 50px;
        height: 300px;
        padding: 10px 0;
        margin: 0px 0px 0px -50px;
        background: #4b4b4b;
        text-align:center;
        animation: box190 36s infinite linear;
       }
       @keyframes box190 {
        0% { transform:translate( 950px , -950px) skewX(-45deg);}
      100% { transform:translate( -300px , 300px) skewX(-45deg);}
      }
      /*7行目終わり*/
      .box20 {
        display: inline-block;
        width: 50px;
        height: 100px;
        padding: 10px 0;
        margin: 0px 0px 0px -50px;
        background: #4b4b4b;
        text-align:center;
        animation: box200 12s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box200 {
        0% { transform:translate( 60px , -60px) skewX(-45deg);}
      100% { transform:translate( -200px , 200px) skewX(-45deg);}
      }

      .box21 {
        display: inline-block;
        width: 50px;
        height: 100px;
        padding: 10px 0;
        margin: 0px 0px 0px -45px;
        background: #4b4b4b;
        text-align:center;
        animation: box210 32s infinite linear;
       }
       @keyframes box210 {
        0% { transform:translate( 800px , -800px) skewX(-45deg);}
      100% { transform:translate( -200px , 200px) skewX(-45deg);}
      }
/*8行目終わり*/
      .box22 {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 10px 0;
        margin: 0px 0px 0px -25px;
        background: #4b4b4b;
        text-align:center;
        animation: box220 20s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box220 {
        0% { transform:translate( 260px , -260px) skewX(-45deg);}
      100% { transform:translate( -200px , 200px) skewX(-45deg);}
      }

      .box23 {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 10px 0;
        margin: 0px 0px 0px -50px;
        background: #4b4b4b;
        text-align:center;
        animation: box230 35s infinite linear;
       }
       @keyframes box230 {
        0% { transform:translate( 900px , -900px) skewX(-45deg);}
      100% { transform:translate( -150px , 150px) skewX(-45deg);}
      }
/*9行目終わり*/
      .box24 {
        display: inline-block;
        width: 50px;
        height: 250px;
        padding: 10px 0;
        margin: 0px 0px 0px 100px;
        background: #4b4b4b;
        text-align:center;
        animation: box240 34s infinite linear;
       }
       @keyframes box240 {
        0% { transform:translate( 450px , -450px) skewX(-45deg);}
      100% { transform:translate( -600px , 600px) skewX(-45deg);}
      }

      .box25 {
        display: inline-block;
        width: 50px;
        height: 250px;
        padding: 10px 0;
        margin: 0px 0px 0px -50px;
        background: #4b4b4b;
        text-align:center;
        animation: box250 39s infinite linear;
       }
       @keyframes box250 {
        0% { transform:translate( 1000px , -1000px) skewX(-45deg);}
      100% { transform:translate( -400px , 400px) skewX(-45deg);}
      }
      /*10行目終わり*/
      .box26 {
        display: inline-block;
        width: 50px;
        height: 150px;
        padding: 10px 0;
        margin: 0px 0px 0px 10px;
        background: #4b4b4b;
        text-align:center;
        animation: box260 12s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box260 {
        0% { transform:translate( -150px , 150px) skewX(-45deg);}
      100% { transform:translate( -350px , 350px) skewX(-45deg);}
      }

      .box27 {
        display: inline-block;
        width: 50px;
        height: 150px;
        padding: 10px 0;
        margin: 0px 0px 0px -50px;
        background: #4b4b4b;
        text-align:center;
        animation: box270 22s infinite linear;
       }
       @keyframes box270 {
        0% { transform:translate( 250px , -250px) skewX(-45deg);}
      100% { transform:translate( -300px , 300px) skewX(-45deg);}
      }
      /*11行目終わり*/
      .box28 {
        display: inline-block;
        width: 50px;
        height: 300px;
        padding: 10px 0;
        margin: 0px 0px 0px 80px;
        background: #4b4b4b;
        text-align:center;
        animation: box280 22s linear;
        animation-fill-mode: forwards;
       }
       @keyframes box280 {
        0% { transform:translate( 50px , -50px) skewX(-45deg);}
      100% { transform:translate( -400px , 400px) skewX(-45deg);}
      } 
      
      .box29 {
        display: inline-block;
        width: 50px;
        height: 100px;
        padding: 10px 0;
        margin: 0px 0px 0px -100px;
        background: #4b4b4b;
        text-align:center;
        animation: box290 30s infinite linear;
       }
       @keyframes box290 {
        0% { transform:translate( 350px , -350px) skewX(-45deg);}
      100% { transform:translate( -300px , 300px) skewX(-45deg);}
      } 
      
      .box30 {
        display: inline-block;
        width: 50px;
        height: 200px;
        padding: 10px 0;
        margin: 0px 0px 0px 125px;
        background: #4b4b4b;
        text-align:center;
        animation: box300 44s infinite linear;
       }
       @keyframes box300 {
        0% { transform:translate( 900px , -900px) skewX(-45deg);}
      100% { transform:translate( -300px , 300px) skewX(-45deg);}
      }

      .box31 {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 10px 0;
        margin: 0px 0px 0px -10px;
        background: #4b4b4b;
        text-align:center;
        animation: box310 17s infinite linear;
       }
       @keyframes box310 {
        0% { transform:translate( 400px , -400px) skewX(-45deg);}
      100% { transform:translate( -0px , 0px) skewX(-45deg);}
      }
}