/* .wave{
    position:relative;
    height:200px;
    line-height: 0;
}
canvas{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
} */

.wave{
    position:relative;
    height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
    /* background: none; */
}
canvas{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
}
#waveCanvas2{
    background: none;
    transform: rotateX( 180deg );
    transform: scale(-1, -1);
    /* 横を200%にして、50%右にずらした方がいい */
}
#waveCanvas4{
    background: none;
    transform: rotateX( 180deg );
}
@media all and (max-width: 500px){
#waveCanvas{
    position: absolute;
    bottom: -5px;
}    
#waveCanvas2{
    position: absolute;
    top:-1%;
} 
#waveCanvas3{
    position: absolute;
    bottom: -5px;
}
#waveCanvas4{
    position: absolute;
    top:-1%;
    /* bottom: 5%; */
}
}