body {
  font-size: 1.6rem;
  font-family: "UD デジタル 教科書体 NK-B";
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 横スクロールを防止 */
}

#text-box {
  height: max(40px, 3.5vw);
  line-height: max(40px, 3.5vw);
  font-size: max(20px, 2vw);
  letter-spacing: 0.2vw;
  background-color: antiquewhite;
}

#answer-box {
  width: 40vw;
  height: max(50px, 4vw);
  font-size: max(24px, 3vw);
  letter-spacing: 2vw;
  text-align: end;
}

button {
  width: auto;
  height: auto;
}

td {
  width: max(50px, 3vw);
  height: max(50px, 3vw);
  padding: 0px;
  text-align: center;
  vertical-align: middle;
  border-bottom: dotted gray 1px;
  border-left: dotted gray 1px;
}

.num {
  width: max(50px, 2.8vw);
  height: max(50px, 2.8vw);
  line-height: max(50px, 2.8vw);
  border: solid 1px black;
  border-radius: 10%;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

td .num{
  margin:auto;
}
tr:nth-child(1) td {
  border-top: dotted gray 1px;
}

tr:nth-child(2) td,
tr:nth-child(6) td {
  border-bottom: solid black 1px;
}

td:last-child {
  border-right: dotted gray 1px;
}

tr:nth-child(3) td,
tr:nth-child(5) td,
tr:nth-child(7) td {
  height: 20px;
  font-size: 8px;
}

tr:nth-child(3) div,
tr:nth-child(5) div,
tr:nth-child(7) div {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  margin:auto;
}

/* 便宜上テーブルセルの２列目を非表示にする。*/
td:nth-child(2) {
  width: 0px;
  border-left: none;
  vertical-align: bottom;
}

td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
  width: 0px;
  border-left: none;
  vertical-align: bottom;
}

.diagonal {
  background-image: linear-gradient(
    to right top,
    transparent calc(50% - 0.5px),
    red 50%,
    red calc(50% + 0.5px),
    transparent calc(50% + 1px)
  ) !important;
}

img {
  width: 3vw;
  height: 3vw;
  margin: 0.1vw;
}

#score-pallet {
  max-height: 10vw; /* コイン3段分が表示できる高さ（コイン3vw×3 + 余白） */
  overflow-y: auto; /* 縦方向にスクロール可能にする */
  border: 2px solid #ddd; /* 境界線を追加（エリアを視覚的にわかりやすく） */
  border-radius: 8px; /* 角を丸くする */
  padding: 5px; /* 内側に余白を追加 */
  background-color: #f8f9fa; /* 背景色を薄いグレーに */
  min-height: 4vw; /* 最小高さを設定 */
}

/* タブレット用（iPad等）の最適化 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 1.4rem;
  }

  #text-box {
    height: max(35px, 3vw);
    line-height: max(35px, 3vw);
    font-size: max(18px, 1.8vw);
  }

  td {
    width: max(45px, 2.8vw);
    height: max(45px, 2.8vw);
  }

  .num {
    width: max(45px, 2.6vw);
    height: max(45px, 2.6vw);
    line-height: max(45px, 2.6vw);
  }

  #score-pallet {
    max-height: 10vw; /* タブレットでもコイン3段分を表示 */
  }
}

/* デスクトップ用（1025px以上）の最適化 */
@media screen and (min-width: 1025px) {
  body {
    font-size: 1.4rem;
  }

  #text-box {
    height: 40px;
    line-height: 40px;
    font-size: 22px;
  }

  td {
    width: 50px;
    height: 50px;
  }

  .num {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  img {
    width: 35px;
    height: 35px;
    margin: 2px;
  }

  #score-pallet {
    max-height: 10vw; /* デスクトップでもコイン3段分を表示（vw基準） */
  }
}

@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */

  .btn {
    font-size: 12px;
  }

}