@charset "utf-8";
/* CSS Document */
html{margin:0;padding:0}
body{margin:0;padding:0}
.loop1 {
width: 100%;
background-image:url("../images/scroll_01.jpg");
background-size: cover;
background-repeat: repeat-x;
animation: bgloop 20s linear infinite;
}
.loop2 {
width: 100%;
background-image:url("../images/scroll_002.jpg");
background-size: cover;
background-repeat: repeat-x;
animation: bgloop2 20s linear infinite;
}
.nonloop01{margin: 0 auto; height: auto; background-color: rgba(0,0,0,0.5); padding-top: 30px; padding-bottom: 50px;}

@keyframes bgloop {
  from {
      background-position: 0 0;
  }
  to {
      background-position: -1000px 0; /*-1000px部分は画像の横幅と同じ数値*/
  }
}

@keyframes bgloop2 {
  from {
      background-position: 0 0;
  }
  to {
      background-position: 1000px 0; /*-1000px部分は画像の横幅と同じ数値*/
  }
}

@media(min-width:790px){
.lp_01{display: block; width: 600px; margin: 0 auto;}
.nonloop01{width: 600px}
.bt_img {display: block; width: 70%; margin: 0 auto;}
}


@media(max-width:789px){
.lp_01{display: block; width: 100%; margin: 0 auto;}
.nonloop01{width: 100%}
.bt_img {display: block; width: 90%; margin: 0 auto;}
}