@charset "UTF-8";
.wave-area,.wave2-area {
  position: relative;
}
.wave-inner,.wave2-inner {
  position: absolute;
  width: 100%;
  top: 0;
}
.wave,.wave2 {
  position: relative;
}
.wave::before, .wave::after,
.wave2::before, .wave2::after{
  position: absolute;
  left: 0;
  top: -140px;
  width: 100%;
  height: 140px;
  content: "";
  display: block;
  background-repeat: repeat-x;
  background-size: 200% 100%;
  z-index: 1;
}
.wave::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'>\
        <defs>\
          <linearGradient id='grad' x1='0' y1='0' x2='0' y2='1'>\
            <stop offset='0%' stop-color='rgba(176,220,209,1)'/>\
            <stop offset='100%' stop-color='rgba(176,220,209,1)'/>\
          </linearGradient>\
        </defs>\
        <path fill='url(%23grad)' d='M100,0C75,0,75,15.667,50,15.667S25,0,0,0v100h100V0z'/>\
      </svg>");
  animation: waveMove 12s linear infinite;
}
.wave::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'>\
        <defs>\
          <linearGradient id='grad' x1='0' y1='0' x2='0' y2='1'>\
            <stop offset='0%' stop-color='rgba(150,220,210,0.2)'/>\
            <stop offset='100%' stop-color='rgba(150,220,210,0.2)'/>\
          </linearGradient>\
        </defs>\
        <path fill='url(%23grad)' d='M100,0C75,0,75,15.667,50,15.667S25,0,0,0v100h100V0z'/>\
      </svg>");
  background-position: 50% 0;
  animation: waveMove 8s linear infinite;
}

.wave2::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'>\
        <defs>\
          <linearGradient id='grad' x1='0' y1='0' x2='0' y2='1'>\
            <stop offset='0%' stop-color='rgba(255,246,233,1)'/>\
            <stop offset='100%' stop-color='rgba(255,246,233,1)'/>\
          </linearGradient>\
        </defs>\
        <path fill='url(%23grad)' d='M100,0C75,0,75,15.667,50,15.667S25,0,0,0v100h100V0z'/>\
      </svg>");
  animation: waveMove 12s linear infinite;
}
.wave2::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'>\
        <defs>\
          <linearGradient id='grad' x1='0' y1='0' x2='0' y2='1'>\
            <stop offset='0%' stop-color='rgba(255,246,233,0.2)'/>\
            <stop offset='100%' stop-color='rgba(255,246,2335,0.2)'/>\
          </linearGradient>\
        </defs>\
        <path fill='url(%23grad)' d='M100,0C75,0,75,15.667,50,15.667S25,0,0,0v100h100V0z'/>\
      </svg>");
  background-position: 50% 0;
  animation: waveMove 8s linear infinite;
}


@keyframes waveMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200% 0; /* サイン波が自然に繋がるように動く */
  }
}
@keyframes waveMove2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200% 0; /* サイン波が自然に繋がるように動く */
  }
}