@charset "utf-8";

/* ----------------------------- */

.stress-check-question-sabtitle {
  font-weight: bold;       /* 太字 */
  color: #2c2c2c;          /* 少し茶色（コーヒー色っぽい） */
  font-size: 22px;         /* 文字サイズ */
  margin: 38px 0;          /* 上下に少し余白 */
  text-decoration: underline; /* 下線を追加 */
}



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

.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: stretch;
  gap: 6px;             /* ボタン間の余白 */
  width: 100%;          /* 全体幅いっぱい */
}

.answer-options input[type="radio"] {
  display: none;        /* ラジオボタンの〇は消す */
}

.answer-options label.option {
  flex: 1;                          /* 均等幅にする */
  text-align: center;
  border-radius: 10px;
  padding: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;    /* 選択前は枠なし */
}

/* 色分け（通常時） */
.answer-options label.orange { background:#ffe8d1; color:#d35400; }
.answer-options label.green  { background:#e6f6e6; color:#2e7d32; }
.answer-options label.blue   { background:#e1f1fa; color:#1565c0; }
.answer-options label.purple { background:#e9e6fa; color:#4527a0; }

/* 選択時に外枠を茶色で目立たせる */
.answer-options input[type="radio"]:checked + label.option {
  border: 2px solid #fa7900;   /* 茶色の枠 */
  box-shadow: 0 0 4px rgba(0,0,0,.1);
}
/* ホバー時 共通 */
.answer-options label.option:hover {
  transform: translateY(-2px);             /* 少し浮かせる */
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1); /* 影だけ濃く */
}

/* 色ごとにホバーしても同じ色を維持 */
.answer-options label.orange:hover { background:#ffe8d1; }
.answer-options label.green:hover  { background:#e6f6e6; }
.answer-options label.blue:hover   { background:#e1f1fa; }
.answer-options label.purple:hover { background:#e9e6fa; }



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

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


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

.answer-options label.option {
  padding: 6px;
  font-size: 10px;
}
}