@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

	Bg

//////////////////////////////////////////////////////////////////////////////// */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
}

@media screen and (max-width: 820px) {
  canvas {
    top: 50%;
    left: 50%;
    aspect-ratio: 1440 / 1840 !important;
    transform: translate(-50%, -50%);
    width: auto!important;
    min-width: 100% !important;
    height: 100% !important;
  }
}

.smBg {
  background: url("../images/smbg_mask.png") no-repeat center center;
  background-size: 103% 100%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  opacity: 1;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}
.smBg .waveLine {
  position: absolute;
}
.smBg .wave01 {
  background: url("../images/smbg_wave_line01.png") no-repeat center center;
  background-size: contain;
  right: 0;
  top: 20vh;
  width: 40%;
  aspect-ratio: 0.6 / 1;
  transform-origin: center center;
  animation: wave01 6s linear 0s infinite, wave03 8s linear 0s infinite;
}
.smBg .wave02 {
  background: url("../images/smbg_wave_line02.png") no-repeat center center;
  background-size: contain;
  left: 0;
  top: 0;
  width: 40%;
  aspect-ratio: 1 / 0.74;
  transform-origin: center center;
  animation: wave01 6s linear 0s infinite, wave03 4s linear 0s infinite;
}
.smBg .wave03 {
  background: url("../images/smbg_wave_line03.png") no-repeat center center;
  background-size: contain;
  left: 0;
  top: 40vh;
  width: 40%;
  aspect-ratio: 0.6 / 1;
  transform-origin: center center;
  animation: wave01 6s linear 0s infinite, wave02 8s linear 0s infinite;
}


@keyframes wave01 {
  0% { opacity: 1;}
  50% { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes wave02 {
  0% { transform: scaleX(1);}
  50% { transform: scaleX(1.4);}
  100% { transform: scaleX(1);}
}
@keyframes wave03 {
  0% { transform: scaleY(1);}
  50% { transform: scaleY(1.2);}
  100% { transform: scaleY(1);}
}