@font-face {
	font-family: 'japanFont', sans-serif;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
    font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

body {
    box-sizing: border-box;
    font-family: sans-serif;
}

canvas {
    display: block;
    margin: 0 auto;
}

a {
    position: fixed;
    outline: none;
    top: 2px;
}

img {
    height: auto;
    outline: none;
}

#gameArea {
	position: relative;
	margin:0px 0px;
	padding:0px;
}

#loadingArea{
	position:absolute;
	z-index:10;
	margin:auto;
    width: 100%;
    height: auto;
	text-align:center;
}

/* ビューポートのベース */
#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; }
  
}