/* 🌿 画面全体の見た目を整えるよ */
body {
  font-family: "Noto Sans JP", "Helvetica", sans-serif; /* 読みやすくて落ち着いた文字にするよ */
  background: #b7d0bb; /* 淡いグリーン系 */
  color: #333; /* 文字の色は少し濃いグレーにして読みやすくするよ */
  text-align: center; /* 文字やボタンをまんなかにそろえるよ */
  padding: 30px; /* 画面のまわりにすきまをつけて、ぎゅうぎゅうにならないようにするよ */
  margin: 0; /* 余計な外側のすきまをなくすよ */
}

/* 🏷️ タイトルの見た目をきれいにするよ */
h1 {
  color: #2c3e50; /* 落ち着いた青っぽい色にするよ */
  font-size: 2.2em; /* ちょっと大きめの文字にするよ */
  margin-bottom: 20px; /* タイトルの下にすきまをあけるよ */
}

/* 👻 「非表示」にしたい場所のためのルールだよ */
.hidden {
  display: none !important; /* 見えなくするよ */
}

/* 🎯 ボタンの見た目をシンプルにかっこよくするよ */
button {
  border: none; /* ふちはなしにするよ */
  padding: 12px 24px; /* ボタンの中の余白を広めにとるよ */
  margin: 10px; /* ボタン同士のすきまをあけるよ */
  font-size: 1em; /* 文字の大きさはふつうくらいにするよ */
  border-radius: 8px; /* ボタンのすみを少し丸くするよ */
  background-color: #5c6f7b; /* 落ち着いたブルグレー */
  color: white; /* 文字の色は白にして見やすくするよ */
  cursor: pointer; /* マウスをのせると「指アイコン」に変わるよ */
  transition: background-color 0.3s; /* 色が変わるとき、ゆっくり変化するよ */
}

/* 🖱️ ボタンにマウスをのせたときの見た目だよ */
button:hover {
  background-color: #4a5a65; /* 少し濃い目に変わって、反応がわかりやすくなるよ */
}

/* 🔙 レベル選択にもどるボタンだけ色を変えるよ */
.back-button {
  background-color: #a67c52; /* 落ち着いたブラウン系 */
  color: #fff;               /* 文字は白で見やすく */
  width: 100%;
  max-width: 300px;
  gap: 10px;
}

.back-button:hover {
  background-color: #8c6847; /* ホバー時は少し濃くして反応をわかりやすくするよ */
}

/* 📘 問題文（Q1とか）の見出しの見た目だよ */
h3 {
  color: #34495e; /* ちょっと濃い青でしっかり見せるよ */
  font-size: 1.4em; /* 少し大きめの文字にするよ */
  margin-top: 30px; /* 上とのすきまを広げるよ */
}

/* 📦 クイズを表示する場所の見た目だよ */
#quiz-container {
  max-width: 600px; /* 横幅を広すぎないようにするよ（スマホでも見やすく） */
  margin: auto; /* 真ん中に表示するよ */
  background-color: #e6e6e6; /* 白い背景で読みやすくするよ */
  border-radius: 12px; /* 角をまるくしてやさしい印象にするよ */
  padding: 20px; /* 中の余白をつけて見やすく！ */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* うっすら影をつけて立体感を出すよ */
}

#feedback {
  word-break: break-word; /* ← 解説文が切れないようにするよ */
}

/* 🎯 コース選択ボタンを並べる場所のスタイルだよ */
#start-screen {
  display: flex;
  flex-direction: column; /* ← 縦に並べるよ！ */
  align-items: center;    /* ← ボタンを中央にそろえるよ */
  gap: 10px;              /* ← ボタンの間にすきまをつけるよ */
  margin-top: 20px;
}

.level-button {
  width: 100%;
  max-width: 300px;
}

.course-button {
  width: 100%;
  max-width: 300px;        /* ← 横幅をそろえて見やすくするよ */
}

/* 🎯 コース選択画面のボタンを縦に並べるよ */
#course-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* 🎯 選択肢ボタンを並べる場所のスタイルだよ */
.choices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.choice-btn {
  width: 100%;
  max-width: 300px; /* ← ボタンの横幅をそろえて見やすくするよ */
}

/* 📱 スマホでも見やすくするためのルールだよ */
@media screen and (max-width: 600px) {
  body {
    padding: 20px; /* スマホでは余白を少しせまくするよ */
    font-size: 1.0em;
    background-color: #eeeac9; /* 落ち着いたベージュ */
  }

   /* 🎯 選択肢ボタンを縦に並べるよ（スマホ用） */
  .choices {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #course-buttons,
  #start-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .choice-btn,
  .course-button,
  .back-button{
    width: 90vw; /* 画面幅の90%まで広げるよ */
    max-width: 320px; /* ボタンの横幅をそろえて見やすくするよ */
    margin: 10px 0;
    box-sizing: border-box;
    font-size: 1.2em;
    padding: 12px 24px;
  }

  h1 {
    font-size: 1.4em; /* タイトルの文字を少し小さくするよ */
  }

  h3 {
    font-size: 1.2em; /* 問題文も少し小さくしてバランスをとるよ */
    margin-top: 30px;
    word-break: break-word; /* ← 問題文が切れないようにするよ */
  }

  button {
    width: 100%; /* ボタンを画面いっぱいに広げて押しやすくするよ */
    max-width: 320px; /* でもあんまり広がりすぎないようにするよ */
    font-size: 1.2em; /* 文字の大きさはそのままにするよ */
    margin: 6px 0; /* 上下にすきまをつけて並べるよ */
  }

  #quiz-container {
    max-width: 90vw; /* 画面幅の90%まで広げるよ */
    margin: auto;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    word-wrap: break-word;       /* ← 長い単語も折り返すよ */
    overflow-wrap: break-word;   /* ← 解説文なども切れずに表示するよ */
  }

}