html {
  background-color: #F7AD2E;
  background-attachment: fixed;
}

#index {
  margin: 0;
  padding: 0;
  background-color: #F7AD2E;
  background-attachment: fixed;
}

html,body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #F7AD2E;
}

h1 {
  float: left;
  padding: 10px 0 0 30px;
  display: block;
  position: relative; z-index: 1;
  font-size: 0;
}
#btn1 {
  border-top: 4.76px solid #ffffff;
  border-right: 4.76px solid transparent;
  border-bottom: 4.76px solid transparent;
  border-left: 4.76px solid #ffffff;
}
@media screen and (min-width:480px) {

 .box1 {
  display: inline-block;
  width: 220px;
  height: 400px;
  margin: 0px 0px 0px 0px;
  background: #000000;
  text-align:center;
  animation: box11 22s linear;
  animation-fill-mode: forwards;
 }
 @keyframes box11 {
  0% { transform:translate( 200px , -200px) skewX(-45deg) ;}
100% { transform:translate(  -500px , 500px) skewX(-45deg);}
 }

 .btn:active span::after {
  display: inline-block;
  width: 220px;
  height: 400px;
  margin: 0px 0px 0px 0px;
  background: #000000;
  text-align:center;
  animation: box11 42s linear;
  animation-fill-mode: forwards;
 }

.box2 {
  display: inline-block;
  width: 220px;
  height: 100px;
  padding: 5px 0;
  margin: 0px 0px 0px -365px;
  background: #000000;
  text-align:center;
  animation: box22 34s infinite linear;
}
@keyframes box22 {
  0% { transform:translate( 900px , -900px) skewX(-45deg);}
100% { transform:translate( -400px , 400px) skewX(-45deg);}
}

 .box3 {
  display: inline-block;
  width: 220px;
  height: 400px;
  padding: 10px 0;
  margin: 0px 0px 0px -65px;
  background: #000000;
  text-align:center;
  animation: box33 40s infinite linear;
 }
 @keyframes box33 {
  0% { transform:translate( 1500px, -1500px) skewX(-45deg);}
  100% { transform:translate( -500px , 500px) skewX(-45deg);}
}
/*1行目終わり*/

.box4 {
  display: inline-block;
  width: 220px;
  height: 200px;
  padding: 10px 0;
  margin: 0px 0px 0px 130px;
  background: #000000;
  text-align:center;
  animation: box44 22s linear;
  animation-fill-mode: forwards
}
@keyframes box44 {
  0% { transform:translate( -200px, 200px) skewX(-45deg);}
  100% { transform:translate( -800px , 800px) skewX(-45deg);} 
}
 .box5 {
  display: inline-block;
  width: 220px;
  height: 200px;
  padding: 10px 0;
  margin: 0px 0px 0px -250px;
  background: #000000;
  text-align:center;
  animation: box55 26s linear;
  animation-fill-mode: forwards
 }
 @keyframes box55 {
  0% { transform:translate( 400px , -400px) skewX(-45deg);}
100% { transform:translate(  -700px , 700px) skewX(-45deg);}
}

 .box6 {
  display: inline-block;
  width: 220px;
  height: 200px;
  padding: 10px 0;
  margin: 0px 0px 0px -200px;
  background: #000000;
  text-align:center;
  animation: box66 42s infinite linear;
 }
 @keyframes box66 {
  0% { transform:translate( 1500px , -1500px) skewX(-45deg);}
100% { transform:translate( -1200px , 1200px) skewX(-45deg);}
}

 .box7 {
  display: inline-block;
  width: 220px;
  height: 200px;
  padding: 10px 0;
  margin: 0px 0px 0px -220px;
  background: #000000;
  text-align: center;
  animation: box77 42s infinite linear;
 }
 @keyframes box77 {
  0% { transform:translate(2000px , -2000px) skewX(-45deg);}
100% { transform:translate(-700px , 700px) skewX(-45deg);}
}
/*2行目終わり*/

 .box8 {
  display: inline-block;
  width: 220px;
  height: 500px;
  padding: 10px 0;
  margin: 0px 0px 0px 370px;
  background: #000000;
  text-align:center;
  animation: box88 24s linear;
  animation-fill-mode: forwards
 }
 @keyframes box88 {
  0% { transform:translate( -600px , 600px) skewX(-45deg);}
100% { transform:translate( -1200px , 1200px) skewX(-45deg);}
}

 .box9 {
  display: inline-block;
  width: 220px;
  height: 500px;
  padding: 10px 0;
  margin: 0px 0px 0px -500px;
  vertical-align: middle;
  background: #000000;
  text-align:center;
  animation: box99 35s infinite linear;
 }
 @keyframes box99 {
  0% { transform:translate( 1200px , -1200px) skewX(-45deg);}
100% { transform:translate( -1000px , 1000px) skewX(-45deg);}
}

.box10 {
  display: inline-block;
  width: 220px;
  height: 500px;
  padding: 10px 0;
  margin: 0px 0px 0px -220px;
  vertical-align: middle;
  background: #000000;
  text-align:center;
  animation: box100 50s infinite linear;
 }
 @keyframes box100 {
  0% { transform:translate( 2300px , -2300px) skewX(-45deg);}
100% { transform:translate(  -800px , 800px) skewX(-45deg);}
}
/*3行目終わり*/

.box11 {
  display: inline-block;
  width: 220px;
  height: 100px;
  padding: 10px 0;
  margin: 0px 0px 0px 0px;
  vertical-align: middle;
  background: #000000;
  text-align:center;
  animation: box110 25s infinite linear;
 }
 @keyframes box110 {
  0% { transform:translate( 800px , -800px) skewX(-45deg);}
100% { transform:translate(  -650px , 650px) skewX(-45deg);}
}
.box12 {
  display: inline-block;
  width: 220px;
  height: 100px;
  padding: 10px 0;
  margin: 0px 0px 0px -220px;
  vertical-align: middle;
  background: #000000;
  text-align:center;
  animation: box120 32s infinite linear;
 }
 @keyframes box120 {
  0% { transform:translate( 1600px , -1600px) skewX(-45deg);}
100% { transform:translate(  -600px , 600px) skewX(-45deg);}
}
/*4行目終わり*/

.box13 {
  display: inline-block;
  width: 220px;
  height: 400px;
  padding: 10px 0;
  margin: 0px 0px 0px 0px;
  vertical-align: middle;
  background: #000000;
  text-align:center;
  animation: box130 20s linear;
  animation-fill-mode: forwards
 }
 @keyframes box130 {
  0% { transform:translate( 300px , -300px) skewX(-45deg);}
100% { transform:translate(  800px , -800px) skewX(-45deg);}
}

.box14 {
  display: inline-block;
  width: 220px;
  height: 400px;
  padding: 10px 0;
  margin: 0px 0px 0px -220px;
  vertical-align: middle;
  background: #000000;
  text-align:center;
  animation: box140 32s infinite linear;
 }
 @keyframes box140 {
  0% { transform:translate( -800px , 800px) skewX(-45deg);}
100% { transform:translate(  1000px , -1000px) skewX(-45deg);}
}
/*5行目終わり*/

.box15 {
  display: inline-block;
  width: 220px;
  height: 200px;
  padding: 10px 0;
  margin: 0px 0px 0px 220px;
  vertical-align: middle;
  background: #ffffff;
  text-align:center;
  animation: box150 32s infinite linear;
 }
 @keyframes box150 {
  0% { transform:translate( 800px , -800px) skewX(-45deg);}
100% { transform:translate(  -1500px , 1500px) skewX(-45deg);}
}

.box16 {
  display: inline-block;
  width: 220px;
  height: 200px;
  padding: 10px 0;
  margin: 0px 0px 0px 1170px;
  vertical-align: middle;
  background: #000000;
  text-align:center;
  animation: box160 32s infinite linear;
 }
 @keyframes box160 {
  0% { transform:translate( 1800px , -1800px) skewX(-45deg);}
100% { transform:translate(  -500px , 500px) skewX(-45deg);}
}
 
 
}