/* ===================================================
   section-02-question.css
   Section 2: 問いかけ
   =================================================== */

.question {
  position: relative;
  padding: 80px 24px;
  background: linear-gradient(
    180deg,
    #EBF5FF 0%,
    #D4EAFA 50%,
    #B8D8F2 100%
  );
  overflow: hidden;
}

.question__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 40px;
}

/* --- 男性画像 --- */
.question__visual {
  width: 95%;
  max-width: 460px;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 40px 0px 0;
}

/* 大きな円形の背景（濃い青のグラデーション） */
.question__visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(46, 122, 184, 0.4) 0%,
    rgba(26, 90, 138, 0.6) 100%
  );
  z-index: 0;
  box-shadow:
    0 30px 80px rgba(26, 90, 138, 0.4),
    inset 0 0 80px rgba(26, 90, 138, 0.3);
}

/* 細い濃紺の円フレーム */
.question__visual::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 108%;
  padding-bottom: 108%;
  border-radius: 50%;
  border: 2px solid rgba(26, 90, 138, 0.5);
  z-index: 0;
  box-shadow:
    0 0 40px rgba(26, 90, 138, 0.3),
    inset 0 0 30px rgba(26, 90, 138, 0.2);
}

.question__visual img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 25px 50px rgba(26, 90, 138, 0.5));
}

/* 装飾：濃い青の円が浮遊（影のような存在感） */
.question__visual-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.question__visual-deco::before {
  content: '';
  position: absolute;
  top: 8%;
  right: -3%;
  width: 70px;
  height: 70px;
  background: radial-gradient(
    circle,
    rgba(46, 122, 184, 0.7) 0%,
    rgba(26, 90, 138, 0.4) 70%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(2px);
  animation: decoFloat 4s ease-in-out infinite;
}

.question__visual-deco::after {
  content: '';
  position: absolute;
  bottom: 12%;
  left: -5%;
  width: 45px;
  height: 45px;
  background: radial-gradient(
    circle,
    rgba(46, 122, 184, 0.6) 0%,
    rgba(26, 90, 138, 0.3) 70%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(2px);
  animation: decoFloat 4s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes decoFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-15px) scale(1.1);
    opacity: 1;
  }
}

/* --- テキスト --- */
.question__text {
  text-align: center;
  max-width: 600px;
}

.question__lead {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-main);
  margin-bottom: 24px;
  font-weight: 500;
}

/* --- 強調コピー --- */
.question__emphasis {
  font-family: var(--font-jp);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 900;
  line-height: 1.6;
  color: var(--color-blue-5);
  margin: 32px 0;
  position: relative;
  display: inline-block;
}

.question__emphasis::before {
  content: '「';
  font-family: var(--font-display);
  font-size: 1.5em;
  color: var(--color-gold);
  opacity: 0.6;
  position: absolute;
  top: -0.2em;
  left: -0.8em;
}

.question__emphasis::after {
  content: '」';
  font-family: var(--font-display);
  font-size: 1.5em;
  color: var(--color-gold);
  opacity: 0.6;
  position: absolute;
  top: -0.2em;
  right: -0.8em;
}

/* --- タイプライター + 下線アニメーション --- */
.question__typewriter {
  display: inline-block;
  position: relative;
}

.question__typewriter .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.question.is-visible .question__typewriter .char {
  opacity: 1;
  transform: translateY(0);
}

.question.is-visible .question__typewriter .char:nth-child(1)  { transition-delay: 0.3s; }
.question.is-visible .question__typewriter .char:nth-child(2)  { transition-delay: 0.38s; }
.question.is-visible .question__typewriter .char:nth-child(3)  { transition-delay: 0.46s; }
.question.is-visible .question__typewriter .char:nth-child(4)  { transition-delay: 0.54s; }
.question.is-visible .question__typewriter .char:nth-child(5)  { transition-delay: 0.62s; }
.question.is-visible .question__typewriter .char:nth-child(6)  { transition-delay: 0.70s; }
.question.is-visible .question__typewriter .char:nth-child(7)  { transition-delay: 0.78s; }
.question.is-visible .question__typewriter .char:nth-child(8)  { transition-delay: 0.86s; }
.question.is-visible .question__typewriter .char:nth-child(9)  { transition-delay: 0.94s; }
.question.is-visible .question__typewriter .char:nth-child(10) { transition-delay: 1.02s; }
.question.is-visible .question__typewriter .char:nth-child(11) { transition-delay: 1.10s; }

.question.is-visible .question__typewriter .char.dots {
  transition-delay: 1.4s;
  transition-duration: 0.6s;
}

.question__typewriter::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(227, 184, 90, 0.4);
  transition: width 1.2s ease;
}

.question.is-visible .question__typewriter::after {
  width: 100%;
  transition-delay: 2s;
}

.question__closing {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin-top: 16px;
}

/* --- スクロールで現れるアニメーション --- */
.question__visual,
.question__lead,
.question__closing {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.question.is-visible .question__visual {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.question.is-visible .question__lead {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.question.is-visible .question__closing {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* ===================================================
   PC（768px〜）
   =================================================== */
@media (min-width: 768px) {
  .question {
    padding: 140px 48px;
  }

  .question__inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 80px;
  }

  .question__visual {
    flex: 0 0 auto;
    width: 35%;
    max-width: 380px;
  }

  .question__text {
    flex: 0 0 auto;
    max-width: 520px;
    text-align: left;
  }

  .question__lead {
    font-size: 18px;
  }

  .question__emphasis {
    font-size: clamp(28px, 3vw, 40px);
  }

  .question__closing {
    font-size: 17px;
  }
}