body {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央寄せ */
  align-items: center;     /* 左右中央寄せ */
  height: 80vh;
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  background-color: #f5f5f5;
}

.radical {
  font-size: 240px;  /* PC用 */
  font-weight: bold;
}

.name {
  font-size: 70px;   /* PC用 */
  margin-top: 10px;
}

/* ボタン共通 */
#startBtn,
#restartBtn {
  padding: 15px 40px;
  font-size: 32px;
  margin-top: 30px;
  cursor: pointer;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
}

#startBtn:hover,
#restartBtn:hover {
  background-color: #45a049;
}

/* 読み上げ切替 */
.tts-toggle {
  margin-top: 16px;
  font-size: 18px;
  user-select: none;
}
.tts-toggle input {
  transform: scale(1.2);
  margin-right: 8px;
}

/* ====== レスポンシブ調整 ====== */

/* タブレット（1024px以下） */
@media screen and (max-width: 1024px) {
  .radical {
    font-size: 300px;  /* 部首をさらに大きく */
  }
  .name {
    font-size: 90px;
  }
  #startBtn,
  #restartBtn {
    font-size: 40px;
    padding: 20px 50px;
  }
}

/* スマホ（600px以下） */
@media screen and (max-width: 600px) {
  .radical {
    font-size: 200px;  /* スマホで画面幅に合わせる */
  }
  .name {
    font-size: 60px;
  }
  #startBtn,
  #restartBtn {
    font-size: 36px;
    padding: 18px 45px;
  }
  .tts-toggle {
    font-size: 22px;
  }
}