* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background: #fff;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.screen {
  display: none;
  width: min(92vw, 760px);
  text-align: center;
}

.screen.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

h1 {
  margin: 0 0 24px;
  font-size: clamp(34px, 8vw, 58px);
  font-weight: 700;
}

#opening p {
  margin: 0;
  font-size: clamp(18px, 4.8vw, 28px);
  line-height: 1.8;
}

.question-text {
  margin: 0 auto 36px;
  max-width: 700px;
  font-size: clamp(24px, 6vw, 40px);
  line-height: 1.5;
  font-weight: 600;
}

.choices {
  display: flex;
  justify-content: center;
  gap: clamp(48px, 16vw, 120px);
}

.choice {
  border: 2px solid #000;
  background: #fff;
  color: #000;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-size: 42px;
  cursor: pointer;
}

.choice:hover,
.choice:focus-visible,
.choice:active {
  background: #000;
  color: #fff;
}

.response-text {
  margin: 0 auto 36px;
  max-width: 720px;
  font-size: clamp(25px, 6vw, 40px);
  line-height: 1.5;
  font-weight: 600;
}

.closing {
  margin: 0;
  font-size: clamp(17px, 4vw, 24px);
  line-height: 1.8;
}

.hidden {
  visibility: hidden;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* 問題文を少し下から、ふわっと表示 */
#questionScreen.active .question-text {
  animation: questionRise 0.45s ease-out;
}

#questionScreen.active .choices {
  animation: questionRise 0.45s ease-out 0.08s both;
}

@keyframes questionRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}