body{
  font-family: sans-serif;
  background:#f2f6ff;
  margin:0;
  padding:20px;
  text-align:center;
}

.container{
  max-width:600px;
  margin:auto;
}

.hidden{ display:none; }

button{
  padding:10px 20px;
  margin:8px;
  font-size:16px;
  cursor:pointer;
}

#question{
  font-size:28px;
  margin:20px 0;
}

#answerInput{
  font-size:20px;
  padding:10px;
  width:80%;
  margin:20px 0 40px 0;
}

.buttonArea{
  margin-top:30px;
}

#result{
  font-size:20px;
  margin-top:30px;
  min-height:40px;
}

.stats{
  margin:15px 0;
  font-size:16px;
}

.stats span{
  display:block;
  margin:3px 0;
}

#rankingTable {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
}

#rankingTable th,
#rankingTable td {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
}

#rankingTable th {
  background: #eee;
}

#resetRankingBtn {
  margin-top: 15px;
}

#rankingTable td {
  font-size: 14px; /* 全体的に少し小さめ */
  padding: 4px;
}

#rankingTable td small {
  color: #666; /* ジャンル名は少し薄めの色に */
  font-size: 11px;
  line-height: 1.2;
}

/* style.css があれば追加、なければHTMLの <style> 内へ */
#rationaleDisplay {
  margin-top: 15px;
  padding: 10px;
  min-height: 3em; /* 解説がない時も高さを確保してガタつきを防ぐ */
  color: #555;     /* 少しだけ色を薄くすると「豆知識」っぽくなります */
  font-size: 0.9em;
  line-height: 1.5;
  border-top: 1px dashed #ccc; /* 上に点線を入れると区切りが分かりやすい */
}