html, body {
  background-color:lightyellow;
  margin: 0;
  padding: 0;
  text-align: center; /* 横中央配置 */
  font-family: sans-serif;
}

.title {
  margin: 20px 0;
  color: navy;
  font-size: 48px;
  margin-bottom: 0px;
}

#container {
  display: inline-block; /* 中央寄せのブロック */
  /* cursor: pointer; */
}

canvas {
  display: block;
}

div#board {
  position: relative;
  width: 295px;
  height: 295px;
  background-color: sienna;
  margin: 0 auto; /* 横中央に */
  margin-top: -25px;
  cursor: pointer;
}

div.sq {
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: green;
}

div.sq div.disc {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  background-color: white;
}

div#logarea {
  margin: 8px 0;
  padding: 4px;
  border: 1px solid black;
  white-space: pre;
  width: 248px;
  height: 120px;
  overflow-y: scroll;
  margin-left: auto;
  margin-right: auto; /* ログエリアも中央 */
}

#mode {
  background-color: aqua;
  border-width: 3px;
  border-radius: 15px;
  font-size: 22px;   /* お好みで大きさを調整 */
  cursor: pointer;   /* カーソルを手に */
  padding: 4px 0px;  /* ちょっと余白を追加して見やすく */
  margin-top: 10px;
}

#buton input[type="button"] {
  background-color: gold;
  font-size: 20px;   /* 少し大きめ */
  font-weight: bold;
  cursor: pointer;   /* カーソルを手に */
  padding: 5px 10px; /* ボタンの余白 */
  margin: 0 15px; /* 左右に15pxの余白を追加 → ボタン間隔が広がる */
  /* margin-right: 2px;       ボタン間の間隔 */
}

#buton input[type="button"]:hover {
  background-color: lightblue;
  color: navy;
}

#buton input[type="button"] {
  transition: 0.3s;  /* 変化をなめらかに */
  border-radius: 8px; /* 角を丸く */
  border: 1px solid gray;
}

#buton input[type="button"]:hover {
  background-color: navy;
  color: white;
  transform: scale(1.1); /* 少し拡大して強調 */
}

#stone {
    text-align:center;
    font-size: 26px;  /* 追加 */
    margin-top: 10px;
}

#view_tarn {
    color: red;
    font-size: 26px;  
    margin-top: -15px;
}