/*----------------------------------
	カモメ
----------------------------------*/
.section-up{
	position: absolute;
	width: 100%;
	height: 170px;
	left: 0;
	top: 0;
	display: block;
	z-index: 5;
}
.bird-wrapper {
	position: absolute;
	//left: 166px;
	//bottom: 46px;
	left: 10%;
	top:90px;
	display: block;
	z-index: 8;
	animation: birdFly1 12.0s ease infinite;
	animation-delay: 0.4s;
	animation-direction: alternate;
}
.bird-wrapper.snd {
	//left: 340px;
	//bottom: 65px;
	left: 20%;
	top:150px;
	animation: birdFly1 15.0s ease infinite;
	animation-delay: 3s;
	animation-direction: alternate;
}
.bird-wrapper.trd {
	//left: 420px;
	//bottom: 132px;
	left: 60%;
	top:100px;
	animation: birdFly 8.5s ease infinite;
	animation-delay: 1s;
	animation-direction: normal;
}
@keyframes birdFly {
  0%{ 
		transform: translateY(0);  
  }
  50% { 
		transform: translateY(-40px); 
  }
  100% { 
		transform: translateY(0); 
  }
}
@keyframes birdFly1 {
  0%{ 
		transform: translateX(0) translateY(0);  
  }
/*
  10% { 
		transform: translateX(80px) translateY(-40px); 
  }
  50% { 
		transform: translateX(200px); 
  }
  70% { 
		transform: translateX(250px); 
  }
  90% { 
		transform: translateX(300px); 
  }
*/
  100% { 
		transform: translateX(300px) translateY(-50px); 
  }
}
.left-wing {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 14px;
	height: 14px;
	transform-origin: right bottom;
	animation: wingLeft 0.4s ease infinite;
}
.left-wing span {
	position: absolute;
	right: 0;
	bottom: 0;
	//border: 2px solid #030308;
	border: 2px solid #778899;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	//border-color: #030308 transparent transparent transparent;
	border-color: #778899 transparent transparent transparent;
	transform: translate(4px, 12px) scale(1.3);
}
@keyframes wingLeft {
  0%{ 
		transform: rotate(0);  
  }
  50% { 
		transform: rotate(40deg); 
  }
  100% { 
		transform: rotate(0); 
  }
}
.right-wing {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 14px;
	height: 14px;
	transform-origin: left bottom;
	animation: wingRight 0.4s ease infinite;
}
.right-wing span {
	position: absolute;
	right: 0;
	bottom: 0;
	//border: 2px solid #030308;
	border: 2px solid #778899;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	//border-color: #030308 transparent transparent transparent;
	border-color: #778899 transparent transparent transparent;
	transform: translate(-4px, 12px) scale(1.3);
}
@keyframes wingRight {
  0%{ 
		transform: rotate(0);  
  }
  50% { 
		transform: rotate(-40deg); 
  }
  100% { 
		transform: rotate(0); 
  }
}

/*----------------------------------
	サカナ
----------------------------------*/
.section-down{
	position: absolute;
	width: 100%;
	height: 130px;
	left: 0;
	top: 170px;
	display: block;
	z-index: 6;
	//border-top: 2px solid #030308;
	//background-color: #fee300;
}
.fish-wrapper{
	position: absolute;
	//left: 82px;
	left: 20%;
	bottom: 85px;
	height: 20px;
	width: 54px;
	display: block;
	z-index: 4;
}
.fish-wrapper.right{
	//left: 467px;
	left: 65%;
	bottom: 70px;
}
.fish-wrapper.right .fish-wrap{
	transform: translate(-35px, 60px) rotate(-90deg);  
	animation: moveFish-higher 3.5s linear infinite;
	animation-delay: 1s;
}
.fish-wrap{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 20px;
	width: 54px;
	display: block;
	z-index: 4;
	transform-origin: center center;
	transform: translate(-35px, 60px) rotate(-90deg);  
	animation: moveFish 3.5s linear infinite;
	//animation-delay: 5.5s;
	opacity:0.0;
}
@keyframes moveFish {
	0% { 
		transform: translate(-35px, 60px) rotate(-90deg);
		opacity:0.0;
	}
	5% { 
		transform: translate(20px, 60px) rotate(90deg); 
	}
	45% { 
		transform: translate(20px, 60px) rotate(90deg);
	}
	50% { 
		transform: translate(10px, 10px) rotate(35deg); 
		opacity:0.0;
	}
	58% { 
		transform: translate(0, 0) rotate(0);
		opacity:1.0;
	}
	67% { 
		transform: translate(0, 0) rotate(0);
	}
	75% { 
		transform: translate(-20px, 10px) rotate(-65deg);
		opacity:1.0;
	}
	78% { 
		opacity:0.0;
	}
	80% {  
		transform: translate(-35px, 60px) rotate(-90deg);
	}
	100% {  
		transform: translate(-35px, 60px) rotate(-90deg);
		opacity:0.0;
	}
}
@keyframes moveFish-higher {
	0% { 
		transform: translate(-35px, 60px) rotate(-90deg); 
		opacity:0.0;
	}
	5% { 
		transform: translate(20px, 60px) rotate(90deg); 
	}
	45% { 
		transform: translate(20px, 60px) rotate(90deg); 
	}
	50% { 
		transform: translate(10px, 10px) rotate(35deg); 
		opacity:0.0;
	}
	58% { 
		transform: translate(0, -7px) rotate(0); 
		opacity:1.0;
	}
	67% { 
		transform: translate(0, -7px) rotate(0); 
	}
	75% { 
		transform: translate(-20px, 10px) rotate(-65deg); 
		opacity:1.0;
	}
	78% { 
		opacity:0.0;
	}
	80% {  
		transform: translate(-35px, 60px) rotate(-90deg); 
	}
	100% {  
		transform: translate(-35px, 60px) rotate(-90deg); 
		opacity:0.0;
	}
}
.fish{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 20px;
	width: 54px;
	display: block;
	z-index: 4;
	transform: scale(1, 0.45);
}
.fish span{
	position: absolute;
	left: 0;
	top: 0;
	height: 36px;
	width: 36px;
	//background-color: #fff;
	background-color: #f0e68c;
	border: 4px solid #030308;
	border-top-left-radius: 60%;
	border-bottom-right-radius: 60%;
	border-bottom-left-radius: 53%;
	transform: rotate(45deg);
}

.fish span:nth-child(2){
	position: absolute;
	left: 39px;
	top: 16px;
	height: 4px;
	width: 13px;
	background-color: #030308;
	border: none;
	border-radius: 0;
	transform-origin: left center;
	transform: rotate(45deg);
	animation: fishTail-bottom 3.5s linear infinite;
}
.fish-wrapper.right .fish span:nth-child(2){
	animation-delay: 1s;
}
@keyframes fishTail-bottom {
	0% { 
		transform: rotate(45deg);
		left: 39px;
		top: 16px;
	}
	59% { 
		transform: rotate(45deg);
		left: 39px;
		top: 16px;
	}
	60% { 
		transform: rotate(25deg);
		left: 37px;
		top: 15px;
	}
	61% { 
		transform: rotate(25deg);
		left: 37px;
		top: 15px;
	}
	62% { 
		transform: rotate(45deg);
		left: 39px;
		top: 16px;
	}
	64% { 
		transform: rotate(45deg);
		left: 39px;
		top: 16px;
	}
	65% { 
		transform: rotate(25deg);
		left: 37px;
		top: 15px;
	}
	66% { 
		transform: rotate(25deg);
		left: 37px;
		top: 15px;
	}
	67% { 
		transform: rotate(45deg);
		left: 39px;
		top: 16px;
	}
	100% {  
		transform: rotate(45deg);
		left: 39px;
		top: 16px;
	}
}
.fish span:nth-child(3){
	position: absolute;
	left: 39px;
	top: 16px;
	height: 4px;
	width: 13px;
	background-color: #030308;
	border: none;
	border-radius: 0;
	transform-origin: left center;
	transform: rotate(-45deg);
	animation: fishTail-top 3.5s linear infinite;
}
.fish-wrapper.right .fish span:nth-child(3){
	animation-delay: 1s;
}
@keyframes fishTail-top {
	0% { 
		transform: rotate(-45deg);
		left: 39px;
		top: 16px;
	}
	59% { 
		transform: rotate(-45deg);
		left: 39px;
		top: 16px;
	}
	60% { 
		transform: rotate(-25deg);
		left: 37px;
		top: 17px;
	}
	61% { 
		transform: rotate(-25deg);
		left: 37px;
		top: 17px;
	}
	62% { 
		transform: rotate(-45deg);
		left: 39px;
		top: 16px;
	}
	64% { 
		transform: rotate(-45deg);
		left: 39px;
		top: 16px;
	}
	65% { 
		transform: rotate(-25deg);
		left: 37px;
		top: 17px;
	}
	66% { 
		transform: rotate(-25deg);
		left: 37px;
		top: 17px;
	}
	67% { 
		transform: rotate(-45deg);
		left: 39px;
		top: 16px;
	}
	100% {  
		transform: rotate(-45deg);
		left: 39px;
		top: 16px;
	}
}
.fish span:nth-child(4){
	position: absolute;
	left: 9px;
	top: 14px;
	height: 7px;
	width: 4px;
	background-color: #030308;
	border: none;
	border-radius: 50%;
	transform-origin: center center;
	transform: rotate(0);
	animation: fishEye 3.5s linear infinite;
}
.fish-wrapper.right .fish span:nth-child(4){
	animation-delay: 1s;
}
@keyframes fishEye {
	0% { 
		height: 7px; 
		top: 14px;
	}
	59% { 
		height: 7px; 
		top: 14px;
	}
	60% { 
		height: 0; 
		top: 17px;
	}
	61% { 
		height: 7px; 
		top: 14px;
	}
	64% { 
		height: 7px; 
		top: 14px;
	}
	65% { 
		height: 0; 
		top: 17px;
	}
	66% { 
		height: 7px; 
		top: 14px;
	}
	100% {  
		height: 7px; 
		top: 14px;
	}
}

/*----------------------------------
	波
----------------------------------*/
	.footer_wave {
		position:absolute; 
		left:0;
		//bottom: 0;
		top:200px;
		width:100%;
		height:100px;
		//border:3px solid #ff0000;
	}
	.parallax > use {
	    animation: move-forever 12s linear infinite;
	}
	.parallax > use:nth-child(1) {
	    animation-delay: -2s;
	}
	.parallax > use:nth-child(2) {
	    animation-delay: -2s;
	    animation-duration: 5s;
	}
	.parallax > use:nth-child(3) {
	    animation-delay: -4s;
	    animation-duration: 3s;
	}
	.editorial {
	    display: block;
	    width: 100%;
	    //height: 3em;
	    //max-height: 100vh;
	    height: 100px;
	    margin: 0;
	    bottom: 0px;
		opacity:0.7;
	}
	@media (max-width: 50em) {
	    .editorial {
	        //height: 10vw;
		    height: 100px;
	    }
	}
	@keyframes move-forever {
	    0% {
	        transform: translate(-90px, 0%);
	    }
	    100% {
	        transform: translate(85px, 0%);
	    }
	}