@charset "UTF-8";

body{
	background-color:#3457D5;		/*#4C2882*/
		/*background:linear-gradient(0deg ,#3457D5 -6%,#512888 74%);*/
}

.wrap{
	position: relative;
	/*transform-style: preserve-3d;*/
	/*margin-left:-100px;*/
	/*perspective: 380px;*/
	/*transform-origin:center;*/
	/*animation: moveR 6.3s infinite ease-in-out;*/
}

/***************************************************************/
@media only screen and (min-width:1280px) {
	.mbl{
		width:100%;
  	}
	.mbl > div.container{
		width:100%;
		height:130%;
	background:linear-gradient(0deg ,#3457D5 33%,#512888 58%,#3457D5 98%);
	}
	.mbl > div.container > canvas{
		width:100%;
		height:728px;
	background:linear-gradient(0deg ,#3457D5 33%,#512888 58%,#3457D5 98%);
		margin-top:-17px;		/*Daiji*/		
	}
}


@media screen and (max-width:768px){
	.mbl{
		width:100%;
	}
	.mbl > div.container{
		width:58%;
	background:linear-gradient(0deg ,#3457D5 33%,#512888 58%,#3457D5 98%);
	}				
	.mbl > div.container > canvas{
		width:58%;
		height:195px;
	}
}

@keyframes waveZ {
	0% {
        	transform:translateY(0%) skew(-8deg);
			transform: rotateX(6deg);
				transform: translateZ(-4deg);
		transform-origin: 70% 20%;
      }

	28% {
        	transform:translateY(-4%) skew(4deg);
			transform: rotateX(-12deg);
				transform: translateZ(-6deg);
        	transform-origin: 60% 20%;
      }

	50% {
		transform:translateY(0%) skew(-6deg);
			transform: rotateX(-6deg);
				transform: translateZ(-8deg);
		transform-origin: 70% 20%;
      }

	75% {
		transform:translateY(3%) skew(-16deg);
			transform: rotateX(3deg);
				transform: translateZ(-12deg);
		transform-origin: 80% 20%;
      }

	100% {
		transform:translateY(0%) skew(-8deg);			/*-8*/
			transform: rotateX(6deg);
				transform: translateZ(-4deg);
		transform-origin: 70% 20%;
	}
}

@keyframes moveR {
	0% {
		transform: rotate(0deg);
      }
	28% {
		transform: rotate(4deg);
		transform:scaleY(1.3);
      }

	50% {
		transform: rotate(3deg);
		transform:scaleY(1.1);
      }

	75% {
		transform: rotate(6deg);
      }

	100% {
		transform: rotate(0deg);

	}
}

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

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

#canvas2{
    width:100%;
}

.container{
	position: absolute;
	top:60px;
	left:0px;
		/*display:flex;*/
		/*flex-direction:low;*/
		/*justify-content:center;*/
	background:linear-gradient(0deg ,#3457D5 33%,#512888 58%,#3457D5 98%);
			/*background-color:#512888;*/		/*#4C2882*/
	width: 1460px;
	height: 560px;
	/*transform-style: preserve-3d;*/
	/*perspective: 380px;*/
	/*transform-origin:center;*/
	/*animation: waveZ 6.3s infinite ease-in-out;*/
}

.container:before, .container:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	background:linear-gradient(0deg ,#3457D5 33%,#512888 58%,#3457D5 98%);
  		/*background-color:#512888;*/		/*#4C2882-#235BC8*/
	transform: rotate(-15deg);
	transform-origin:top right;
}

.dot {
    position: absolute;
    margin-top:-120px;
    /*margin-left:30px;*/
    width: 2px;
    height: 2px;
    background:#CAC873;
    /*z-index:3;*/
  }