.question {
  width: calc(335 * var(--u));
  margin: auto;
  margin-bottom: calc(40 * var(--u));
}

.question__catch {
  color: #FFF;
  text-align: center;
  font-size: calc(28 * var(--u));
  font-weight: 800;
  line-height: 130%;
  margin-bottom: calc(16 * var(--u));
}

.question__head {
  margin-bottom: calc(40 * var(--u));
}

.question__title {
  color: #FFF;
  text-align: center;
  font-size: calc(36 * var(--u));
  font-weight: 800;
  line-height: 130%;
}

.question__answer {
  margin: auto;
  margin-bottom: calc(40 * var(--u));
}

.question__progress {
  color: #FFF;
  text-align: center;
  font-size: calc(20 * var(--u));
  font-weight: 800;
  line-height: 130%;
}

.question__text {
  color: #FFF;
  text-align: left;
  font-size: calc(20 * var(--u));
  font-weight: 800;
  line-height: 130%;
  margin-bottom: calc(40 * var(--u));
}

.question__answer-poles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(16 * var(--u));
}

.question__answer-pole {
  color: #FFF;
  text-align: center;
  font-size: calc(16 * var(--u));
  font-weight: 800;
  line-height: 130%;
}

/* =============================================
   選択肢
   ラジオ本体は隠して、ラベルの丸をタップ領域にする
   ============================================= */

.question__answer-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.question__answer-item {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}

.question__answer-label {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  color: var(--answer-color, #9aa0a6);
  cursor: pointer;


  transition: background-color .2s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.question__answer-label:active {
  transform: scale(.94);
}

.question__answer-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 選択肢の文言は読み上げ用に残し、視覚的には隠す */
.question__answer-text {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 選択中 */
.question__answer-item.is-selected .question__answer-label {
  background: currentColor;
}

/* ================================================
   位置ごとの色とサイズ（左＝そう思う 〜 右＝そう思わない）
   ================================================ */
.question__answer-item--1,
.question__answer-item--2 {
  --answer-color: #F4BAD3;
}

.question__answer-item--3 {
  --answer-color: #D1D5DC;
}

.question__answer-item--4,
.question__answer-item--5 {
  --answer-color: #AAFFF5;
}

.question__answer-item--1 .question__answer-label {
  max-width: calc(56 * var(--u));
}

.question__answer-item--2 .question__answer-label {
  max-width: calc(48 * var(--u));
}

.question__answer-item--3 .question__answer-label {
  max-width: calc(44 * var(--u));
}

.question__answer-item--4 .question__answer-label {
  max-width: calc(48 * var(--u));
}

.question__answer-item--5 .question__answer-label {
  max-width: calc(56 * var(--u));
}

/* ==========================================
   アラートモーション：横揺れ
   未選択のまま「次の質問へ」を押したとき
   ========================================== */
.question__answer-list.is-shake {
  animation: horizontal-shaking 1s ease-in-out;
}

@keyframes horizontal-shaking {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .question__answer-list.is-shake {
    animation-duration: .01ms;
  }

  .question__answer-label {
    transition: none;
  }
}

/* =============================================
   グレーアウト中のボタン
   ============================================= */
.question__action-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  text-align: center;
  margin-bottom: calc(24 * var(--u));
}

.question__action .button-line {
  padding: calc(16 * var(--u)) calc(4 * var(--u));
  min-width: calc(335px / 2 - 24px);
  width: calc(150 * var(--u));
}

.question__action {
  text-align: center;
}

.button-line[aria-disabled="true"] {
  cursor: default;
}