@charset "UTF-8";

body {
	font:'Noto Sans JP';
    font-size: 18px;
}

header{
	margin:5px 0px 0px 0px;
}

.wrap{
	display:flex;
	flex-direction:low;
	justify-content:flex-start;
	z-index:0;
	background:#000000;
	height:100vh;
}

.m-body {
    /*margin-top:0px;*/
    overflow: hidden;
    height:600px;
    /*height:100vh;*/
}

.container2 {
	position:absolute;
	top:30px;
	left:0px;
		display: flex;
    justify-content: center;
    align-items: center;
	width:1200px;
	height: 100vh;
	/*height:600px;*/
	z-index:0;
	opacity:0.8;
}

canvas {
    display: block;
}

#canvas3{
	    position: absolute;
	    z-index:3;
	/*width:100vw;*/
	/*height:100vh;*/
}
.tx{
	position: absolute;
	top:450px;
	font-size:26px;
	/*font-weight:bold;*/
	z-index:3;
}
/*****************************************************************/
@media only screen and (max-width: 768px) {
	.wrap{			
		width:100%;
  	}
	.wrap > div.container2 {
		width:76%;
	}
}

@media only screen and (min-width:1280px) {
	.wrap > div.container2 {
		width:118%;
	}
	.wrap > div.container2 > p.tx{
		top:590px;	
	}
	#waterCanvas{
		height:118%;
	}
}