canvas {
  display: block;
}

.canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

@media screen and (min-width: 1px) and (max-width: 750px) {
  .canvas {
    display: none;
  }

}

@media screen and (min-width: 751px) and (max-width: 1024px) {

  body,
  html {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .webp .bg {
    background-image: url(../img/common/bg.webp);
  }

  .no-webp .bg {
    background-image: url(../img/common/bg.jpg);
  }
}

@media screen and (min-width: 1025px) {

  body,
  html {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .webp .bg {
    background-image: url(../img/common/pc-bg.webp);
  }

  .no-webp .bg {
    background-image: url(../img/common/pc-bg.jpg);
  }
}