.wave{
	position:relative;
	margin-top:-200px;
	height:calc(100vh/4.5);
	width:100%;
	height:200px;
}
.wave canvas{
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	z-index:99;
}



/* その場で */
.fadeIn{
	animation-name:fadeInAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeInAnime{
	from	{opacity: 0;}
	to		{opacity: 1;}
}
/* 下から */
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.fadeInTrigger, .fadeUpTrigger{
    opacity: 0;
}


/*枠線が伸びて出現*/
.lineTrigger{
	position: relative;
	opacity:0;
}
.lineTrigger.lineanime{
	animation-name:lineAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
@keyframes lineAnimeBase{
	from	{opacity: 0;}
	to		{opacity: 1;}
}
.lineTrigger::before, .lineTrigger::after{
	position: absolute;
	content:"";
	width:0;
	height:1px;
	background:#333;
}
.line2::before, .line2::after{
	position: absolute;
	content:"";
	width: 1px;
	height:0;
	background:#333;/* 枠線の色*/
}
.lineTrigger::before {
	top:0;
	left:0;
}
.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards;
}
.line2::before{ 
	top:0;
	right:0;
}
.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards;
}
.lineTrigger::after { 
	bottom:0;
	right:0;
}
.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards;
}
.line2::after{ 
	bottom:0;
	left:0;
}
.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards;
}
@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}
.lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .5s linear 1.5s forwards;
	opacity: 0;
}
@keyframes lineInnerAnime{
	from	{opacity: 0;}
	to		{opacity: 1;}
}


/***********波ボーダー**********/
.linewave{
	display:block;
	width:100%;
	height:30px;
	max-height:30px;
	z-index:1;
	bottom:10px;
	position:absolute;
	left:0px;
	float:left;
}
.linewave use{
	fill:none;
	stroke-width:1px;
}
.parallax1 > use{
	stroke:rgba(213,240,196,0.8);
	animation: move-forever1 10s linear infinite;
	&:nth-child(1) {
		animation-delay: -2s;
	}
}
.parallax2 > use{
	stroke:rgba(175,223,144,0.6);
	animation: move-forever2 8s linear infinite;
	&:nth-child(1) {
		animation-delay: -2s;
	}
}
.parallax3 > use{
	stroke:rgba(136,205,92,0.3);
	animation: move-forever3 6s linear infinite;
	&:nth-child(1) {
		animation-delay: -2s;
	}
}
@keyframes move-forever1 {
	0%		{transform: translate(85px, 0%);}
	100%	{transform: translate(-90px, 0%);}
}
@keyframes move-forever2 {
	0%		{transform: translate(-90px, 0%);}
	100%	{transform: translate(85px, 0%);}
}
@keyframes move-forever3 {
	0%		{transform: translate(85px, 0%);}
	100%	{transform: translate(-90px, 0%);}
}