@charset "UTF-8";

  body {
    background-color: #f0f0f0;
    text-align: center;
  }
.bg{
  position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:550px;
background-image:url('');
background-size:cover;
background-repeat:repeat;
	z-index:1;
}  
.wraper{
	position:absolute;
	transform: scale(0.8);
	animation: moving 6s linear 10000;
  }
  
canvas {
    /*background-color: white;*/
}

#myCanvas{
	position: relative;
    /*top: 0;*/
    /*left: 0;*/
    z-index: 2;	
}
@keyframes moving {
0% {
    top: 2vh;		/*47*/
    left: -1vw;
  }
5% {
    top: 1vh;		/*47*/
    left: 5vw;
  }
10% {
    top: 2vh;		/*47*/
    left: 10vw;
  }
15% {
    top: 2vh;		/*47*/
    left: 15vw;
  }
20% {
    top: 1vh;		/*47*/
    left: 20vw;
  }
25% {
    top: 1vh;
    left: 25vw
  }
30% {
    top: 2vh;
    left: 30vw
  }
35% {
    top: 3vh;
    left: 35vw
  }
40% {
    top: 2vh;
    left: 40vw
  }  
45% {
    top: 1vh;
    left: 45vw
  }
50% {
    top: 1vh;
    left: 50vw
  }
55% {
    top: 2vh;
    left: 55vw
  }
60% {
    top: 1vh;
    left: 60vw
  }
65% {
    top: 0vh;
    left: 65vw
  }
70% {
    top: 0vh;
    left: 70vw
  }
75% {
    top: 1vh;
    left: 75vw
  }
80% {
    top: 1vh;
    left: 80vw
  }
85% {
    top: 0vh;
    left: 85vw
  }
90% {
    top: 0vh;
    left: 90vw
  }
95% {
    top:0vh;
    left: 95vw
  }
100% {
    top:1vh;			/*47*/
    left: 101vw;
  }
}

.head{
	position: absolute;
	top:9%;
	left:31%;
	width: 80px;
	height: 80px;
	border-radius:50%;
	clip-path: inset(0 0 50% 0);
	z-index: 3;
	background-color:#616B07;		/*#568203*/
}

.LTcircle{							/*Light*/
	position: absolute;
	top:45%;
	left:61%;
	width: 60px;
	height: 60px;
	border-radius:50%;
	clip-path: inset(0 50% 0 0);
	z-index: 3;				/*Daiji*/
		background-color:#CAC873;
    }
.mekki{
	position: absolute;
	top:45%;
	left:64%;
	width: 8px;           /* 線の太さ */
	height: 60px;         /* 線の高さ */
	background-color:#72C6EF;
		z-index: 3;
}
.rider{
	position: absolute;
	top:25%;
	left:30.5%;
	width: 65px;
	height: 150px;			/*165*/
	border-radius: 20px;
	background-color:green;
	/*border: 2px solid #0059b3;*/
	transform: rotate(10deg);
	z-index: 3;
	margin: auto;    
}

.pat {
  height:150px;
	/*margin-bottom:10px;*/
  background-color:#004953;
  opacity: 1;
  background: linear-gradient(135deg, #004953 25%, transparent 25%) -8px 0/
      16px 16px,
    linear-gradient(225deg, #B18B55 25%, transparent 25%) -8px 0/ 16px 16px,		/*Khaki*/
    linear-gradient(315deg, #6E6339 25%, transparent 25%) 0px 0/ 16px 16px,			/*olive*/
    linear-gradient(45deg, #004225 25%, #004953 25%) 0px 0/ 16px 16px;				/*British Racing Green*/
}
    
.hand{
	position: absolute;
	top:40%;
	left:55%;
	width: 36px;
	height: 36px;
	border-radius:50%;
	z-index: 3;				/*Daiji*/
	background-color:#fff450;
    }
.accel{
	position: absolute;
	top:40%;
	left:55%;
	width: 36px;
	height: 36px;
	border-radius:50%;
	clip-path: inset(0 0 50% 0);
	background-color:#FCAF17;
	z-index: 3;				/*Daiji*/
	animation-name:accel-anim;
	animation-duration:0.5s;
	animation-timing-function:linear;
	animation-delay: 0s;
	animation-iteration-count:10000;
    }
@keyframes accel-anim {
	0%{
	  transform: rotate(70deg);
	}
	50% {
	  transform: rotate(-20deg);
	}
  100% {
	  transform: rotate(70deg);
	}
}    
.engine{
	position: absolute;
	top:57%;
	left:42%;
	width: 60px;
	height: 110px;
	background-color: #758492;
	transform: rotate(13deg);
	z-index:1;
}
.mission{
	position: absolute;
	top:73%;
	left:38%;
    width: 100px;
    height: 50px;
    border-radius: 50px;
    background: #A0C298;
    box-sizing: border-box;
}

.hosei{
	position: absolute;
	top:49%;
	left:29%;
	width: 53px;
	height: 38px;
	border-radius:50%;
	transform: rotate(26deg);
	z-index:3;				/*Daiji*/
		background-color:#0070BB;	
}
.lamp{
		position: absolute;
	top:48%;
	left:5%;
	width: 20px;
	height: 30px;
	transform: rotate(13deg);
	/*border-radius:50%;*/
	z-index:3;				/*Daiji*/
		background-color:red;	
}

.brake{
		position: absolute;
	top:70%;
	left:63.5%;
	width: 20px;
	height: 30px;
	transform: rotate(26deg);
	border-radius:20px;
	z-index:3;				/*Daiji*/
		background-color:gray;	
}

.smoke{
  position: absolute;
  top:59%;
  left:-110px;
  /*bottom: -370px;*/				/*対象のheightと微調節*/
  margin: auto;
  width: 120px;
  height: 45px;
  border-radius: 50%;
  clip-path: ellipse(60% 40% at 50% 50%);
  background:#C0C0C0;
  filter: blur(6px);
	/*transform: rotate(18deg);*/
	animation-name:smoke-anim;
	animation-duration:2.5s;			/*12*/
	animation-timing-function:ease-in-out;		/*linear*/
	animation-delay: 0s;
	animation-iteration-count: 10000;
}

@keyframes smoke-anim {
  0%{
	transform: scale(1);
	opacity:0.9;
	filter: blur(10px);
	  transform: rotate(18deg);
	}
  10% {
	transform: scale(1.2);
	filter: blur(10px);
	  transform: rotate(18deg);
	  	opacity:0.1;
	}
20%{
	transform: scale(1);
	opacity:0.9;
	filter: blur(10px);
	  transform: rotate(18deg);
	}
30% {
	transform: scale(1.2);
	filter: blur(10px);
	  transform: rotate(18deg);
	opacity:0.1;
	}
40%{
	transform: scale(1);
	opacity:0.9;
	filter: blur(10px);
	  transform: rotate(18deg);
	}
 50% {
	transform: scale(1.2);
	filter: blur(10px);
	  transform: rotate(18deg);
	opacity:0.1;
	}
60%{
	transform: scale(1);
	opacity:0.9;
	filter: blur(10px);
	  transform: rotate(18deg);
	}
70% {
	transform: scale(1.2);
	filter: blur(10px);
	  transform: rotate(18deg);
	opacity:0.1;
	}
80%{
	transform: scale(1);
	opacity:0.9;
	filter: blur(10px);
	  transform: rotate(18deg);
	}
90% {
	transform: scale(1.2);
	filter: blur(10px);
	  transform: rotate(18deg);
	opacity:0.1;
	}
100%{
	transform: scale(1);
	opacity:0.9;
	filter: blur(10px);
	  transform: rotate(18deg);
	}
}

.backmount{
	
}

@media screen and (max-width:768px){
	.wraper{
		transform: scale(0.6);
	}
}