.wrap{
  height: 100vh;
  background: linear-gradient(-45deg, rgba(1, 24, 26, 0.4),rgba(17, 66, 99, 0.6));
  }

  .blinking{
    animation: flash 3s linear infinite;
  }
  .blinking-f{
    animation: flash 0.3s linear infinite;
  }

  @keyframes flash {
    0%,100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  .wave{
  position:relative;
  height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
  }
  canvas{
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
  }

  .your-video-section::before,
  .your-video-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 150px;  /* この値を変更してぼかしの高さを調整 */
    z-index: 20;
  }

  .your-video-section::before {
    top: 0;
    background: linear-gradient(to bottom, white, rgba(255,255,255,0));
  }

  .your-video-section::after {
    bottom: 0;
    background: linear-gradient(to top, white, rgba(255,255,255,0));
  }