@charset "utf-8";
/* Cool infinite background scrolling animation.
 * Twitter: @kootoopas
 */
/* Exo thin font from Google. */
/* Background data (Original source: https://subtlepatterns.com/grid-me/) */
/* Animations */

@keyframes bga-scrolling-reverse {
  100% {
    background-position: -800px -800px;
  }
}

@keyframes bga-scrolling {
  0% {
   background-position: -800px -800px;
  }
}

@keyframes bgb-scrolling-reverse {
  100% {
    background-position: -600px -600px;
  }
}

@keyframes bgb-scrolling {
  0% {
   background-position: -600px -600px;
  }
}

/* Main styles */
#wrap_side {
  background: url("mat1.png");
  background-attachment: fixed;
  animation: bga-scrolling-reverse 30s infinite;
  animation-timing-function: linear;
}

@media screen and (max-width: 768px) {
#wrap_side {
  /* スマホ用*/
  background: url("mat2.png");
  animation: bgb-scrolling-reverse 20s infinite;
  animation-timing-function: linear;
}
}
@media screen and (max-width: 360px) {
#wrap_side {
  /* スマホ用*/
  background: none;
  animation:none;
}
}