body {
    position: relative;
    margin: 0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	overflow: hidden;
	height: 100%;
}

image, canvas{

	-ms-user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;

	-webkit-touch-callout: none;
	-webkit-user-drag: none;

}

img{
	zoom:100%;
}

#gameArea {
	position: relative;
//	position: static;
//	top: 600px;
	margin: 0px;
	width: 400px;
	height:400px;
    background-color:rgb(255,255,255);
}

.cls_canvas {
	position: absolute;
}

#id_canvas1 {
    position: absolute;
    z-index: 1;
}

#id_canvas2 {
    position: absolute;
    z-index: 2;
}

#id_canvas3 {
    position: absolute;
    z-index: 3;
}

#loading{
	position:absolute;
	z-index:10;
    visibility : hidden;

	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:40px;
	height:40px;
}

#splash{
	position:absolute;
	z-index:10;

	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:193px;
	height:36px;
}

/* ビューポートのベース */
#viewport {
  width: 100vw;
  height: 100vh;
}

/* 横長のときだけ中央寄せ（水平＋垂直のどちらもセンタリング） */
@media (orientation: landscape) {
  #viewport {
    display: flex;
    align-items: center;   /* 垂直中央 */
    justify-content: center; /* 水平中央 */
  }
}

/* 縦長（既定）：今まで通り。必要なら水平センターだけ入れる */
@media (orientation: portrait) {
  #viewport {
    display: block; /* 従来挙動を維持 */
  }
  //もし縦でも水平センターにしたい場合は以下の1行を有効化
  //#gameArea { margin-left: auto; margin-right: auto; }
  
}