@charset "utf-8";

/* ----------------------------- */
/*3択の質問とラジオボタンを横並び*/

.question {
  display: flex; /*質問とボタンを上下配置にしたければ削除 */
  align-items: center; /* 質問テキストとラジオボタンを垂直方向で中央揃え */
  justify-content: space-between;
  margin-bottom: 20px;
}

.question-text {
  width: 60%; /* 質問テキストの幅を固定 */
  margin-right: 20px; /* ラジオボタンとの間隔を調整 */
  font-size: clamp(16px, 2vw, 18px); /* 画面幅に応じてフォントサイズを動的に調整 */
}

.answer-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8eac4de; /* 背景色 */
  padding: 8px;
  border-radius: 10px; /* 角丸 */
  min-width: 320px; /* ラジオボタンの最低幅を設定 */
  width: 80%; /* 親要素の幅を100%に */
}

.answer-options label {
  flex: 1; /* 各ラベルを均等に広げる */
  font-size: 14px;
  color: #8b5e34; /* テキストの色 */
  cursor: pointer; /* カーソルを指マークにする */
  display: flex; /* ラジオボタンとテキストを横並びに */
  align-items: center; /* ラジオボタンとテキストの垂直位置を揃える */
  padding: 5px; /* クリック範囲を広げるためのパディングを追加 */
  transition: background-color 0.2s ease, box-shadow 0.2s ease; /* ホバー時のトランジション効果 */
  
}





/* レスポンシブデザインのためのメディアクエリ */
@media (max-width: 1200px) {

  /* ラジオボタンを横並びから2段へ */
  .question {
    display: block; /* ブロック表示にして縦並びにする */
    text-align: left; /* 質問テキストは左揃え */
  }


}