@charset "UTF-8";
.c-wave {
    height: 119px;
    margin-top: -100px;
    position: relative;
    z-index: 10;
    background-color: #fff;
    mask-repeat: repeat-x;
    mask-image: url(../img/mask_image_01.svg);
    mask-size: 1500px auto;
    mask-position: left top;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-image: url(../img/mask_image_01.svg);
    -webkit-mask-size: 1500px auto;
    -webkit-mask-position: left top;
    -webkit-animation: move 10s linear infinite;
    animation: move 10s linear infinite;
}

.c-wave2 {
    height: 120px;
    margin-top: -122px;
    position: relative;
    z-index: 10;
    background-color: #fff;
    mask-repeat: repeat-x;
    mask-image: url(../img/mask_image_02.svg);
    mask-size: 1500px auto;
    mask-position: left top;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-image: url(../img/mask_image_02.svg);
    -webkit-mask-size: 1500px auto;
    -webkit-mask-position: left top;
    -webkit-animation: move2 10s linear infinite;
    animation: move2 10s linear infinite;
}

.c-wave3 {
    height: 438px;
    margin-top: -100px;
    position: relative;
    z-index: 10;
    background-repeat: no-repeat;
    background-size: cover;
    mask-repeat: repeat-x;
    mask-image: url(../img/mask_image_03.svg);
    mask-size: 1500px auto;
    mask-position: left top;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-image: url(../img/mask_image_03.svg);
    -webkit-mask-position: left top;
    -webkit-animation: move 10s linear infinite;
    animation: move 10s linear infinite;
    
}


@-webkit-keyframes move {
    0% {
        -webkit-mask-position: 0 top;
        mask-position: 0 top
    }
    to {
        -webkit-mask-position: -1500px top;
        mask-position: -1500px top
    }
}

@keyframes move {
    0% {
        -webkit-mask-position: 0 top;
        mask-position: 0 top
    }
    to {
        -webkit-mask-position: -1500px top;
        mask-position: -1500px top
    }
}

@-webkit-keyframes move2 {
    0% {
        -webkit-mask-position: 0 top;
        mask-position: 0 top
    }
    to {
        -webkit-mask-position: -1500px top;
        mask-position: -1500px top
    }
}

@keyframes move2 {
    0% {
        -webkit-mask-position: 0 top;
        mask-position: 0 top
    }
    to {
        -webkit-mask-position: -1500px top;
        mask-position: -1500px top
    }
}

canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}