@charset "UTF-8";
/* mask なみなみ 上 */
.wave-top {
  --mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 100%,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
@media (max-width: 1023px) {
  .wave-top {
    --mask:
      radial-gradient(30.24px at 50% 42.3px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
      radial-gradient(30.24px at 50% -24.3px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x;
  }
}
@media (max-width: 1023px) and (max-height: 500px) {
  .wave-top {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px 100% repeat-x;
  }
}
@media (max-width: 480px) {
  .wave-top {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px 100% repeat-x;
  }
}

.wave-bottom {
  --mask:
    radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 0/80px 100%,
    radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
@media (max-width: 1023px) {
  .wave-bottom {
    --mask:
      radial-gradient(30.24px at 50% calc(100% - 42.3px), #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
      radial-gradient(30.24px at 50% calc(100% + 24.3px), #0000 99%, #000 101%) 50% calc(100% - 18px)/72px 100% repeat-x;
  }
}
@media (max-width: 1023px) and (max-height: 500px) {
  .wave-bottom {
    --mask:
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px 100% repeat-x;
  }
}
@media (max-width: 480px) {
  .wave-bottom {
    --mask:
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px 100% repeat-x;
  }
}

.wave-top-bottom {
  --mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 51% repeat-x,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px calc(51% - 20px) repeat-x,
    radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 100%/80px 51% repeat-x,
    radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px calc(51% - 20px) repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
@media (max-width: 1023px) {
  .wave-top-bottom {
    --mask:
      radial-gradient(30.24px at 50% 42.3px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 51% repeat-x,
      radial-gradient(30.24px at 50% -24.3px, #0000 99%, #000 101%) 50% 18px/72px calc(51% - 18px) repeat-x,
      radial-gradient(30.24px at 50% calc(100% - 42.3px), #000 99%, #0000 101%) calc(50% - 36px) 100%/72px 51% repeat-x,
      radial-gradient(30.24px at 50% calc(100% + 24.3px), #0000 99%, #000 101%) 50% calc(100% - 18px)/72px calc(51% - 18px) repeat-x;
  }
}
@media (max-width: 1023px) and (max-height: 500px) {
  .wave-top-bottom {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
  }
}
@media (max-width: 480px) {
  .wave-top-bottom {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
  }
}

/*# sourceMappingURL=wave.css.map */