@charset "UTF-8";

body{
	background-color:#000000;
}

.wrap{
	position: relative;
	/*animation: move 8s linear infinite;*/
}

@media screen and (max-width:768px){
	.wrap{
		width:100%;
	}
	.wrap > div.container{
		width:58%;
	}				
	.wrap > div.container > canvas{
		width:500px;
		height:275px;
	}
}

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

.container{
	position: absolute;
	top:0px;
	left:0px;
	background-color:#000000;
	width: 100vw;
	height: 100vh;
	/*transform-style: preserve-3d;*/
  	/*perspective: 380px;*/
	/*transform-origin:bottom right;*/
}

.container:before, .container:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: black;
  /*transform: rotate(-15deg);*/
  /*transform-origin:top right;*/
}

.maru {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ff4081;
    border-radius: 50%;
    animation: moveMaru 3s infinite ease-in-out alternate;
  }

@keyframes moveMaru {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(80px, -80px);
    }
  }
  
.dot {
    position: absolute;
    margin-top:-60px;		/*Daiji*/
    width: 1px;
    height: 1px;
	background:#00CEAF;
    /*background: linear-gradient(45deg, #00CEAF 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #00CEAF 90% 100%);*/
	}
	
.Xtrans{
	position: absolute;
	top:115px;
	left:-300px;
	animation:Xtrans 7200ms forwards 1 ease 38700ms;		//39200
	z-index:3;
}

@keyframes Xtrans{
	from {
    	transform:translateX(0px);
    	opacity:0.2;
    }
	to{
		transform:translateX(820px);
		opacity:0.9;
	}
}

strong{
    font-size:2100%;
    color:#C2FA0B;				/*#ee7600*/
}

.pika{
    font-size: 2100%;
    color:#C2FA0B;
}

strong.kira{
	display:block;
    width:100%;
    height:250px;
    position: relative;
}

strong.kira::before {
  content: '';
  display: block;
  position: absolute;
  top:141px;
  left:0%;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(119deg, rgba(0, 206, 175, 0) 25%, rgba(0, 206, 175, 0.6) 50%, rgba(0, 206, 175, 0) 75%);
}

strong.kira::before {
  -webkit-animation: shine 0.4s;
          animation: shine 0.4s;
}

@keyframes shine {
	0%{
		left:0%;
	}
	50%{
		left:-50%;	
	}
	100%{
		left:0%;
  }
}

@-webkit-keyframes shine {
	0%{
		left:0%;
	}
	50%{
		left:-50%;	
	}
	100%{
		left:0%;
  }
}


/***************************************************************/
@media only screen and (min-width:1280px) {
	.mbl > div.Xtrans{
			top:148px;
		}
	.mbl > div > strong.kira::before {
 			top:113px;
		}

	}
/***************************************************************/
@media only screen and (min-width:1280px) {
	@keyframes Xtrans{
		from{
    			transform:translateX(0px);
    		}
		to{
			transform:translateX(803px);
		}
	}
}