@charset "utf-8";


/* ----------------------------- */
/*5択の質問・ラジオボタンのラベルが　「←　　→」この使仕様
/* 質問コンテナ */
.question {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左列を固定幅、右列を自動幅に */
  align-items: center;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  width: 100%;
}

/* 質問文のスタイル */
.question-text {
  font-size: 16px;
  color: #333;
  text-align: left;
  white-space: nowrap; /* 折り返しを防止 */
  margin-right: 20px; /* 質問と回答エリアの間の余白 */
}

/* 回答オプション全体のスタイル */
.answer-options-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 上段の「よく当てはまる ←→ 全く当てはまらない」のスタイル */
.response-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 300px; /* ラベルの最大幅を設定 */
  font-size: 14px;
  color: #8b5e34;
  margin-bottom: 5px;
  text-align: center;
}

/* ラジオボタンの配置 */
.answer-options {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 300px; /* ラジオボタンの最大幅を設定 */
  background-color: #f8eac4de; /* 背景色 */
  padding: 8px;
  border-radius: 10px; /* 角丸 */
}

/* ラジオボタンのスタイル */
.answer-options input[type="radio"] {
  margin: 0 10px;
  cursor: pointer;
}


@media (max-width: 1200px) {

  /* ラジオボタンを横並びから2段へ */
  .question {
    text-align: left; /* 質問テキストは左揃え */
  }
}