@charset "UTF-8";

body{
		/*background-color:#666669;*/
}

.bglay{
	width:100%;
	height:100%;
}

canvas {
	/*border: 1px solid black;*/
}

# canvas{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}
	
# body{
	position:absolute;
	top:0;
	left:0;
	}

/**{*/
	/*outline:1px solid red;*/
/*}*/

.wrap{
	position: relative;
}
/****************************************************
		.bg{
  			position: absolute;
			top:0px;
			left:0px;
			width:100%;
			height:550px;
			background-image:url('https://x10s-eyeski.tokyo/xs/images/chokai2.jpg');
			background-position: 0px -190px;
			background-size:cover;
			background-repeat:repeat;
			z-index:1;
		}
		.bg::after{
			content:"";
  			position: absolute;
			z-index:2;
			width:100%;
			height:100%;
			top:0;
			left:0;
		}
		.container{
			position: absolute;
			z-index:0;
			top:240px;
			left:0px;
			background-color:#666669;
			width: 1480px;
			height: 400px;
		}
			.container:before, .container:after {
  			content: "";
  			position: absolute;
  			bottom: 0;
  			right: 0;
  			background-color:#666669;
		}
***********************************************************/
.tori{
	position:absolute;
	top:0%;
	left:0%
	z-index:0;
	/*z-index:2;*/
}

@media only screen and (min-width:1280px) {
	div.bglay{
		width:100%;
		height:100%;
	}
	canvas{
		height:98vh;		/*Daiji*/
	}
}

@media screen and (max-width:768px){
	div.bglay{
		width:100%;
		height:100%;
	}
	canvas{
		height:100vh;
	}
}

/*********************************************/

.bird {
  position: absolute;
  /*width: 7px;*/
  /*height: 7px;*/
  width: 21px;			/*hane*/
  height: 21px;
  transform: rotate(45deg);
  animation: moving 16s linear infinite;
}

.bird.-type_2 {
  animation-delay: 1s;
}
.bird.-type_2:before,
.bird.-type_2:after {
  animation-delay: -2s;
}

.bird.-type_3 {
  animation-delay: 3s;
}

@keyframes moving {
  0% {
    top: 14vh;
    left: 1vw;
  }
  25% {
    top: 22vh;
    left: 23vw
  }
  50% {
    top: 18vh;
    left: 49vw
  }
  75% {
    top: 4vh;
    left: 77vw
  }
  100% {
    top: 1vh;
    left: 101vw;
  }
}

.bird:before, .bird:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  	background-color:#8d3043;			/*#5e3514*/
  transform: rotate(-30deg);
  transform-origin: right bottom;
}

.bird:before {
  width: 100%;
	height:4px;			/*tori-box*/
	border-radius:70% 70% 0% 0%;
  /*height: 1px;*/
  animation: leftWing 8s linear infinite;
}
.bird:after {
  /*width: 1px;*/
  width: 4px;
	border-radius:70% 70% 0% 0%;
  height: 100%;
  animation: rightWing 8s linear infinite;
}

@keyframes leftWing {
  0%   { transform: rotate(-30deg); }
  2%   { transform: rotate(-110deg); }
  4%   { transform: rotate(-30deg); }
  6%   { transform: rotate(-110deg); }
  8%   { transform: rotate(-30deg); }
  10%  { transform: rotate(-110deg); }
   12%   { transform: rotate(-30deg); }
  14%   { transform: rotate(-110deg); }
  16%   { transform: rotate(-30deg); }
  18%   { transform: rotate(-110deg); }
  20%   { transform: rotate(-30deg); }
  22%  { transform: rotate(-110deg); }
   24%   { transform: rotate(-30deg); }
  26%   { transform: rotate(-110deg); }
  28%   { transform: rotate(-30deg); }
  30%   { transform: rotate(-110deg); }
  32%   { transform: rotate(-30deg); }
  34%  { transform: rotate(-110deg); }
   36%   { transform: rotate(-30deg); }
  38%   { transform: rotate(-110deg); }
  40%   { transform: rotate(-30deg); }
  42%   { transform: rotate(-110deg); }
  44%   { transform: rotate(-30deg); }
  46%  { transform: rotate(-110deg); }
   48%   { transform: rotate(-30deg); }
  50%   { transform: rotate(-110deg); }
  52%   { transform: rotate(-30deg); }
  54%   { transform: rotate(-110deg); }
  56%   { transform: rotate(-30deg); }
  58%  { transform: rotate(-110deg); }
   60%   { transform: rotate(-30deg); }
  62%   { transform: rotate(-110deg); }
  64%   { transform: rotate(-30deg); }
  66%   { transform: rotate(-110deg); }
  68%   { transform: rotate(-30deg); }
  70%  { transform: rotate(-110deg); }
  72%  { transform: rotate(-30deg); }
  74%  { transform: rotate(-40deg); }
  76%  { transform: rotate(-50deg); }
  78%  { transform: rotate(-60deg); }
  80%  { transform: rotate(-70deg); }
  82%  { transform: rotate(-80deg); }
  84%  { transform: rotate(-30deg); }
  86%  { transform: rotate(-110deg); }
  88%  { transform: rotate(-30deg); }
  90%  { transform: rotate(-110deg); }
  92%  { transform: rotate(-30deg); }
  94%  { transform: rotate(-110deg); }
  96%  { transform: rotate(-30deg); }
  98%  { transform: rotate(-110deg); }
  100% { transform: rotate(-30deg); }
}

@keyframes rightWing {
  0%   { transform: rotate(30deg); }
  2%   { transform: rotate(110deg); }
  4%   { transform: rotate(30deg); }
  6%   { transform: rotate(110deg); }
  8%   { transform: rotate(30deg); }
  10%  { transform: rotate(110deg); }
   12%   { transform: rotate(30deg); }
  14%   { transform: rotate(110deg); }
  16%   { transform: rotate(30deg); }
  18%   { transform: rotate(110deg); }
  20%   { transform: rotate(30deg); }
  22%  { transform: rotate(110deg); }
   24%   { transform: rotate(30deg); }
  26%   { transform: rotate(110deg); }
  28%   { transform: rotate(30deg); }
  30%   { transform: rotate(110deg); }
  32%   { transform: rotate(30deg); }
  34%  { transform: rotate(110deg); }
   36%   { transform: rotate(30deg); }
  38%   { transform: rotate(110deg); }
  40%   { transform: rotate(30deg); }
  42%   { transform: rotate(110deg); }
  44%   { transform: rotate(30deg); }
  46%  { transform: rotate(110deg); }
   48%   { transform: rotate(30deg); }
  50%   { transform: rotate(110deg); }
  52%   { transform: rotate(30deg); }
  54%   { transform: rotate(110deg); }
  56%   { transform: rotate(30deg); }
  58%  { transform: rotate(110deg); }
   60%   { transform: rotate(30deg); }
  62%   { transform: rotate(110deg); }
  64%   { transform: rotate(30deg); }
  66%   { transform: rotate(110deg); }
  68%   { transform: rotate(30deg); }
  70%  { transform: rotate(110deg); }
  72%  { transform: rotate(30deg); }
  74%  { transform: rotate(40deg); }
  76%  { transform: rotate(50deg); }
  78%  { transform: rotate(60deg); }
  80%  { transform: rotate(70deg); }
  82%  { transform: rotate(80deg); }
  84%  { transform: rotate(30deg); }
  86%  { transform: rotate(110deg); }
  88%  { transform: rotate(30deg); }
  90%  { transform: rotate(110deg); }
  92%  { transform: rotate(30deg); }
  94%  { transform: rotate(110deg); }
  96%  { transform: rotate(30deg); }
  98%  { transform: rotate(110deg); }
  100% { transform: rotate(30deg); }
}