@charset "UTF-8";

body{
	background-color:#000000;
	/*background-color:#341c19;*/
}
/**{*/
	/*outline:1px solid red;*/
/*}*/

.wrap{
	position: relative;
}

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

.container2{
	position: absolute;
	/*z-index:1;*/
	top:10px;			/*60px*/
	left:10px;
	background-color:#000000;
	/*background-color:#341c19;*/
	width: 1240px;
	height: 600px;
	transform:rotate(6deg);
	/*animation: move 65ms linear infinite;*/			//Daiji
}
/*********************************************************
#ch{
      transition: all 500ms 0s ease;
    }
    .on {
      transform: scale(1.0, 1.0) translate(0px, 0px);
	}
    .off {
      transform: scale(1.0, 1.0) translate(0px, 0px);
    }
}
********************************************************************/
.circle{
	position: absolute;
	top: 6%;
	left: 14%;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: #00ff40;
	box-sizing: border-box;
	opacity:0.6;
  	z-index: 1;				/*Daiji*/
}

.circle2{
	position: absolute;
	top: -6%;
	left:58%;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: #00ff40;
	box-sizing: border-box;
	opacity:0.6;
  	z-index: 1;				/*Daiji*/
}

.circle3 {
  	position: absolute;
	top: 17.3%;
	left:17.5%;
	width: 70px;
	height: 35px;
	background-color:black;
	border-bottom-left-radius: 70px;
	border-bottom-right-radius: 70px;
	transform:rotate(-25deg);
      	z-index: 2;				/*Daiji*/
  }
  
.circle4 {
  	position: absolute;
	top: 4.5%;
	left:60.7%;
	width: 70px;
	height: 35px;
	background-color:black;
	border-bottom-left-radius: 70px;
	border-bottom-right-radius: 70px;
	transform:rotate(14deg);
      	z-index: 2;				/*Daiji*/
  }
  
.circle5{
	position: absolute;
	top:12%;
	left:17%;
	width: 70px;
	height: 70px;
	border-radius:50%;
	z-index: 3;				/*Daiji*/
		background-color:#4bb941;
		animation: blink 3200ms infinite;
    }

.circle6{
      position: absolute;
      top: -1%;
      left:61%;
	width: 70px;
	height: 70px;
	border-radius:50%;
	z-index: 3;				/*Daiji*/
      background-color:#4bb941;
      animation: blink 3200ms infinite;
}

@keyframes blink {
      0%, 90% {
		opacity:0;
      }
      95%, 100% {
		transform:scale(1.1,1.1);
		opacity:1;
      }
}
/******************************************************************/
@media screen and (max-width:768px){
	.wrap{
		position:relative;
		width:100%;
	}
	.wrap > div.container2{
		position:absolute;
		/*z-index:1;*/
		top:450px;
		left:0px;
		margin-top:-286px;
		padding-left:86px;
		width:20vw;
		height:20vh;
		transform:scale(0.8,0.8);
	}
	.wrap > div.container2 > canvas{
		width:100vw;
		/*width:500px;*/
		/*height:275px;*/
	}
	.wrap > div.container2 > div.circle{
		width:70px;
		height:58%;
		top: 3vh;
		left:24vw;
	}
	.wrap > div.container2 > div.circle2{
		width:70px;
		height:58%;
		top: -5vh;
		left:70vw;
	}
	.wrap > div.container2 > div.circle3 {
		width: 35px;
		height:18px;
		top: 8.8vh;
		left:27.8vw;
		border-bottom-left-radius: 35px;
		border-bottom-right-radius: 35px;
		transform:rotate(-29deg);
	}
	.wrap > div.container2 > div.circle4 {
		width: 35px;
		height:18px;
		top: 1.7vh;
		left:72.6vw;
		border-bottom-left-radius: 35px;
		border-bottom-right-radius: 35px;
		transform:rotate(14deg);
	}
	.wrap > div.container2 > div.circle5{
		width:70px;
		height:58%;
		top: 3vh;
		left:24vw;
	}
	.wrap > div.container2 > div.circle6{
		width:70px;
		height:58%;
		top: -5vh;
		left:70vw;
	}
	.wrap > button{
		top:78vh;
		left:69vw;
	}
}

/***************************************************************/
@media only screen and (min-width:1280px) {
	.wrap{
		width:100%;
  	}
	.wrap > div.container2{
		width:100%;
		height:130%;
		transform:rotate(6deg);
	}
	.wrap > div.container2 > canvas{
		width:100%;
		height:728px;
		margin-top:-17px;		/*Daiji*/		
	}
	.wrap > div.container2 > div.circle{
		top: 7vh;
	}
	.wrap > div.container2 > div.circle2{
		top: -5vh;
	}
	.wrap > div.container2 > div.circle3{
		width: 70px;
		height:35px;
		top:15.4vh;
		left:16.5vw;
		border-bottom-left-radius: 70px;
		border-bottom-right-radius: 70px;
		transform:rotate(-27.5deg);
	}
	.wrap > div.container2 > div.circle4 {
		width:70px;
		height:35px;
		top:2.2vh;
		left:59vw;
		border-bottom-left-radius: 70px;
		border-bottom-right-radius: 70px;
		transform:rotate(15.5deg);
	}
	.wrap > div.container2 > div.circle5{
		top:11vh;
		left:16vw;
	}
	.wrap > div.container2 > div.circle6{
		top:-2vh;
		left:59.3vw;
	}
	.wrap > button{
		top:78vh;
		left:80vw;
	}
}

button{
	position:absolute;
	top:78vh;
	left:80vw;
	width:150px;
	height:43px;
	font-size:16px;
	color:#ffffff;
	border-radius:30px;
	border:1.5px solid #A7FC00;
	background-color:black;
	z-index: 3;
}