/**
 * 魂の質問フォーム専用スタイル
 */

.questionnaire-hero {
  position: relative;
  overflow: hidden;
  background: #0f0c29;
  /* フォールバック背景 */
  color: rgba(255, 255, 255, 0.95);
  padding: 0;
  margin-top: 0;
  /* ヘッダーとの隙間を完全に削除 */
  min-height: 70vh;
  display: flex;
  align-items: center;
}

/* 背景画像 */
.questionnaire-hero .hero-background-image {
  position: absolute;
  inset: 0;
  background-image: url('../media/images/start_bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* パララックス効果 */
  opacity: 1;
  z-index: 0;
  animation: heroImageFadeIn 1.5s ease-out;
}

/* グラデーションオーバーレイ（可読性の確保） */
.questionnaire-hero .hero-overlay {
  position: absolute;
  inset: 0;
  /* 左側（テキストエリア）を暗く、右側（パネルエリア）も読みやすく */
  background: linear-gradient(90deg,
      rgba(15, 12, 41, 0.88) 0%,
      rgba(15, 12, 41, 0.82) 40%,
      rgba(15, 12, 41, 0.78) 60%,
      rgba(15, 12, 41, 0.85) 100%),
    /* 上部と下部を少し暗くして、中央の宇宙の球体の明るさを抑える */
    linear-gradient(180deg,
      rgba(15, 12, 41, 0.35) 0%,
      transparent 25%,
      transparent 75%,
      rgba(15, 12, 41, 0.45) 100%);
  z-index: 1;
  pointer-events: none;
}

.questionnaire-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(155, 68, 255, 0.25), transparent 45%),
    radial-gradient(circle at 20% 85%, rgba(255, 115, 70, 0.25), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 2;
}

.questionnaire-hero .container {
  position: relative;
  z-index: 3;
  padding-top: 6rem;
  /* 上部の余白をコンテナ内に移動 */
  padding-bottom: 5rem;
  /* 下部の余白をコンテナ内に移動 */
}

/* 背景画像のフェードインアニメーション */
@keyframes heroImageFadeIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  animation: heroBadgeFadeIn 0.8s ease-out 0.1s both;
}

.hero-title {
  font-family: 'Unbounded', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5),
    0 4px 40px rgba(0, 0, 0, 0.3);
  animation: heroTitleFadeIn 1s ease-out 0.3s both;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 620px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.soul-flare {
  position: absolute;
  right: -6rem;
  top: -4rem;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(245, 130, 32, 0.35) 0%, rgba(245, 130, 32, 0) 60%);
  filter: blur(0px);
  z-index: 0;
}

/* 進捗タイムライン */
.soul-progress-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(17, 16, 24, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}

.soul-progress-track::before {
  content: '';
  position: absolute;
  left: 1.75rem;
  right: 1.75rem;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(245, 130, 32, 0.45));
  z-index: 0;
}

.progress-orb {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  width: 25%;
  min-width: 120px;
}

.progress-orb .orb-index {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(245, 130, 32, 0.2);
}

.progress-orb.active .orb-index,
.progress-orb.completed .orb-index {
  background: linear-gradient(135deg, rgba(245, 130, 32, 0.95), rgba(251, 173, 99, 0.95));
  color: #120f16;
  box-shadow: 0 0 18px rgba(245, 130, 32, 0.45);
}

.progress-orb .orb-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.progress-orb .orb-caption {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.05em;
}

/* フォームコンテナ */
.questionnaire-shell {
  margin-top: 0;
  margin-bottom: 4rem;
  padding-top: 2rem;
}

.questionnaire-panel {
  padding: 2.5rem;
  border-radius: 1.8rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 35px 70px rgba(7, 0, 20, 0.25);
  position: relative;
  overflow: hidden;
}

.questionnaire-panel::after {
  content: '';
  position: absolute;
  inset: -60% 30% auto -50%;
  height: 220px;
  background: radial-gradient(circle, rgba(245, 130, 32, 0.12) 0%, transparent 55%);
  pointer-events: none;
}

.questionnaire-panel h2 {
  font-family: 'Unbounded', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: var(--dark-color);
}

.question-step {
  display: block;
  animation: fadeInUp 0.45s ease;
  margin-top: 0;
  margin-bottom: 0;
}

.question-step:not(:first-of-type) {
  margin-top: 3.5rem;
}

.question-step:first-of-type {
  margin-top: 0;
}


.step-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 0;
  margin-bottom: 2.5rem;
  padding: 1.8rem 2rem;
  border-radius: 1.4rem;
  background: linear-gradient(120deg, rgba(26, 20, 43, 0.85), rgba(14, 11, 28, 0.75));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(11, 4, 24, 0.35);
  backdrop-filter: blur(8px);
  gap: 0.5rem;
}

.step-header .step-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.step-header .step-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  line-height: 1.5;
  margin-top: 0.5rem;
}

.step-caption {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: rgba(245, 130, 32, 0.9);
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 8px rgba(245, 130, 32, 0.3);
  text-transform: uppercase;
}


.question-card {
  border-radius: 1.2rem;
  border: 1px solid rgba(245, 130, 32, 0.14);
  background: rgba(255, 255, 255, 0.92);
  padding: 1.8rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  position: relative;
}

.question-card:last-child {
  margin-bottom: 2.5rem;
}

.question-card::before {
  content: '';
  position: absolute;
  top: 1.1rem;
  left: 1.2rem;
  width: 6px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(245, 130, 32, 0.6), rgba(245, 130, 32, 0));
}

.question-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  padding-left: 2.3rem;
  color: var(--dark-color);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.question-card p {
  padding-left: 2.3rem;
  color: rgba(52, 58, 64, 0.75);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.question-subheading {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  display: inline-block;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(245, 130, 32, 0.95);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(245, 130, 32, 0.12);
  border-radius: 999px;
  border: 1px solid rgba(245, 130, 32, 0.25);
  box-shadow: 0 2px 8px rgba(245, 130, 32, 0.15);
}

.question-step:first-of-type .question-subheading:first-of-type {
  margin-top: 0;
}


/* 生年月日フォーム専用スタイル */
.birth-info-form {
  margin-top: 1rem;
}

.birth-info-form .form-label {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.birth-info-form .form-select {
  background-color: rgba(255, 255, 255, 0.95);
  color: #212529;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.75rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: all 0.3s ease;
  min-height: 38px;
  height: auto;
  box-sizing: border-box;
}

.birth-info-form .form-select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 0.25rem rgba(251, 191, 36, 0.25);
  background-color: #fff;
  color: #212529;
}

.birth-info-form .form-select option {
  background-color: #fff;
  color: #212529;
}

.birth-info-form .form-check-label {
  color: #212529;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 0;
  line-height: 1.5;
  margin-left: 0.5rem;
}

.birth-info-form .form-check-input {
  cursor: pointer;
  margin-top: 0;
  margin-right: 0;
  flex-shrink: 0;
}

.birth-info-form .form-check {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 38px;
}

/* チェックボックスコンテナ（時・分の右側）に左マージンを追加 */
.birth-info-form .row.align-items-end>.col-md-auto {
  margin-left: 1rem;
  padding-left: 0;
}

.birth-info-form .form-check-input:checked {
  background-color: #fbbf24;
  border-color: #fbbf24;
}

.birth-info-form .birth-time-input-group {
  transition: all 0.3s ease;
}

.birth-info-form .birth-time-input-group.opacity-50 {
  opacity: 0.7;
}

/* チェックが入ったとき、時・分セレクトボックスを無効化スタイルに */
.birth-info-form .birth-hour.disabled-style,
.birth-info-form .birth-minute.disabled-style,
.birth-info-form .birth-hour:disabled,
.birth-info-form .birth-minute:disabled {
  background-color: #e9ecef !important;
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      rgba(0, 0, 0, 0.08) 10px,
      rgba(0, 0, 0, 0.08) 20px) !important;
  color: #6c757d !important;
  border-color: #adb5bd !important;
  cursor: not-allowed !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  opacity: 0.8 !important;
}

.birth-info-form .birth-time-input-group.opacity-50 .form-label {
  color: #6c757d !important;
  opacity: 0.7;
}

.birth-info-form .birth-hour:disabled,
.birth-info-form .birth-minute:disabled {
  background-color: #e9ecef !important;
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      rgba(0, 0, 0, 0.08) 10px,
      rgba(0, 0, 0, 0.08) 20px) !important;
  color: #6c757d !important;
  border-color: #adb5bd !important;
  cursor: not-allowed !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  opacity: 0.8 !important;
}

.question-card textarea {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(245, 130, 32, 0.25);
  border-radius: 0.75rem;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.question-card textarea:focus {
  border-color: rgba(245, 130, 32, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(245, 130, 32, 0.15);
  outline: none;
  background: rgba(255, 255, 255, 1);
}

.question-card input[type="url"] {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(245, 130, 32, 0.25);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: all 0.3s ease;
}

.question-card input[type="url"]:focus {
  border-color: rgba(245, 130, 32, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(245, 130, 32, 0.15);
  outline: none;
  background: rgba(255, 255, 255, 1);
}

.question-card input[type="url"].is-valid {
  border-color: #28a745;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.98-.98.98.98a.5.5 0 0 0 .7-.7L4.7 5.33l1.26-1.26a.5.5 0 0 0-.7-.7L4 4.63l-1.26-1.26a.5.5 0 0 0-.7.7L3.3 5.33l-1.26 1.26a.5.5 0 0 0 .7.7z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  padding-right: calc(1.5em + 0.75rem);
}

.question-card input[type="url"].is-invalid {
  border-color: #dc3545;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.2.2.2-.2m0 4.8.2-.2-.2-.2'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  padding-right: calc(1.5em + 0.75rem);
}

.question-card .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #dc3545;
}

.question-card input[type="url"].is-invalid~.invalid-feedback,
.question-card input[type="url"].is-invalid~.invalid-feedback {
  display: block;
}

/* アクションエリア */
.step-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.step-action-bar .btn {
  min-width: 180px;
}

/* プレビュー */
.preview-panel {
  position: sticky;
  top: 2rem;
  margin-top: 0;
  padding-top: 0;
}

.preview-panel .soul-preview-card {
  border-radius: 1.4rem;
  background: linear-gradient(160deg, rgba(17, 16, 24, 0.92) 0%, rgba(39, 17, 44, 0.9) 45%, rgba(85, 32, 99, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(7, 0, 20, 0.4);
  color: rgba(255, 255, 255, 0.9);
  padding: 2.2rem;
  overflow: hidden;
  position: relative;
  margin-top: 0;
}

.soul-preview-card .preview-header {
  margin-top: 0;
  margin-bottom: 1.8rem;
  padding-top: 0;
}

.preview-header p {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}

.preview-header h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

/* 扉アニメーション */
.door-container {
  position: relative;
  width: 100%;
  height: 200px;
  margin-top: 0;
  margin-bottom: 1.8rem;
  border-radius: 1rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(20, 15, 35, 0.95), rgba(10, 8, 20, 0.98)),
    linear-gradient(135deg, rgba(15, 12, 41, 0.95), rgba(39, 17, 44, 0.9));
  border: 4px solid rgba(70, 50, 30, 0.8);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.8),
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(120, 90, 60, 0.3);
}

.door-left,
.door-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 2;
  overflow: hidden;
}

.door-left {
  left: 0;
  transform-origin: left;
}

.door-right {
  right: 0;
  transform-origin: right;
}

/* 木製の扉パネル */
.door-panel {
  width: 100%;
  height: 100%;
  background:
    /* 詳細な木目のテクスチャ */
    repeating-linear-gradient(90deg,
      rgba(120, 80, 45, 0.85) 0%,
      rgba(95, 65, 35, 0.92) 1.5%,
      rgba(140, 95, 50, 0.75) 3%,
      rgba(110, 75, 40, 0.88) 4.5%,
      rgba(85, 58, 32, 0.9) 6%,
      rgba(120, 80, 45, 0.85) 7.5%),
    /* 縦方向の木目 */
    repeating-linear-gradient(0deg,
      transparent 0%,
      rgba(70, 48, 28, 0.3) 1%,
      transparent 2%,
      rgba(90, 62, 35, 0.2) 3%,
      transparent 4%),
    /* 木のベース色（より深みのあるグラデーション） */
    linear-gradient(180deg,
      rgba(110, 75, 40, 0.98) 0%,
      rgba(95, 65, 35, 0.95) 20%,
      rgba(85, 58, 32, 0.97) 40%,
      rgba(75, 50, 28, 0.95) 60%,
      rgba(85, 58, 32, 0.97) 80%,
      rgba(110, 75, 40, 0.98) 100%),
    /* 古びた感じのオーバーレイ */
    radial-gradient(ellipse at 25% 35%,
      rgba(100, 70, 40, 0.7) 0%,
      transparent 40%),
    radial-gradient(ellipse at 75% 65%,
      rgba(80, 55, 30, 0.6) 0%,
      transparent 45%),
    radial-gradient(ellipse at 50% 50%,
      rgba(90, 60, 35, 0.4) 0%,
      transparent 60%);
  border-right: 3px solid rgba(50, 35, 20, 0.9);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.6),
    inset 3px 0 15px rgba(0, 0, 0, 0.4),
    inset -3px 0 15px rgba(0, 0, 0, 0.4),
    inset 0 -2px 10px rgba(0, 0, 0, 0.3),
    inset 0 2px 8px rgba(150, 100, 60, 0.2),
    0 0 25px rgba(0, 0, 0, 0.7);
  position: relative;
}

.door-right .door-panel {
  border-right: none;
  border-left: 2px solid rgba(60, 40, 20, 0.8);
}

/* 木の節や傷のディテール */
.door-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* 節 */
    radial-gradient(circle at 18% 28%, rgba(50, 35, 20, 0.5) 3px, rgba(50, 35, 20, 0.2) 4px, transparent 6px),
    radial-gradient(circle at 82% 72%, rgba(50, 35, 20, 0.4) 2.5px, rgba(50, 35, 20, 0.15) 3.5px, transparent 5px),
    radial-gradient(circle at 48% 52%, rgba(50, 35, 20, 0.3) 4px, rgba(50, 35, 20, 0.1) 5px, transparent 7px),
    /* 細かい傷や質感 */
    linear-gradient(45deg, transparent 48%, rgba(60, 40, 20, 0.3) 49%, rgba(60, 40, 20, 0.3) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(60, 40, 20, 0.25) 49%, rgba(60, 40, 20, 0.25) 51%, transparent 52%);
  background-size:
    45px 45px,
    38px 38px,
    52px 52px,
    15px 15px,
    12px 12px;
  background-position:
    18% 28%,
    82% 72%,
    48% 52%,
    0 0,
    0 0;
  opacity: 0.7;
  pointer-events: none;
}

/* 補強金具（装飾的な要素） */
.door-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* X字の補強金具 */
    linear-gradient(135deg, transparent 47%, rgba(180, 140, 90, 0.6) 48%, rgba(180, 140, 90, 0.6) 52%, transparent 53%),
    linear-gradient(-135deg, transparent 47%, rgba(180, 140, 90, 0.6) 48%, rgba(180, 140, 90, 0.6) 52%, transparent 53%),
    /* 角の補強 */
    linear-gradient(90deg, rgba(160, 120, 80, 0.7) 0%, transparent 8%),
    linear-gradient(90deg, transparent 92%, rgba(160, 120, 80, 0.7) 100%);
  background-size:
    40% 40%,
    40% 40%,
    100% 15%,
    100% 15%;
  background-position:
    center center,
    center center,
    top,
    bottom;
  opacity: 0.4;
  pointer-events: none;
}

/* 取手 */
.door-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(220, 180, 120, 0.95), rgba(180, 140, 90, 0.9) 50%, rgba(140, 100, 60, 0.85));
  border: 2.5px solid rgba(120, 90, 55, 0.9);
  box-shadow:
    0 0 15px rgba(245, 130, 32, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 0 8px rgba(255, 220, 150, 0.4),
    inset -2px -2px 5px rgba(100, 70, 40, 0.6);
  transform: translateY(-50%);
  z-index: 3;
}

.door-handle-left {
  right: 18px;
}

.door-handle-right {
  left: 18px;
}

.door-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px;
  height: 4px;
  background: linear-gradient(90deg,
      rgba(160, 120, 70, 0.9) 0%,
      rgba(180, 140, 90, 0.95) 30%,
      rgba(200, 160, 100, 0.9) 50%,
      rgba(180, 140, 90, 0.95) 70%,
      rgba(160, 120, 70, 0.9) 100%);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 220, 150, 0.3);
}

.door-handle-left::after {
  right: 16px;
}

.door-handle-right::after {
  left: 16px;
}

/* 段階的な扉の開き（進捗に応じて） */
.door-container[data-progress] .door-left {
  transform: translateX(calc(-50% * var(--door-open, 0)));
}

.door-container[data-progress] .door-right {
  transform: translateX(calc(50% * var(--door-open, 0)));
}

/* 完全に開いた状態（openingクラス） */
.door-container.opening .door-left {
  transform: translateX(-100%);
}

.door-container.opening .door-right {
  transform: translateX(100%);
}

.door-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: 1rem;
}

.door-icon-container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ブラックホール風のリング */
.blackhole-ring {
  position: absolute;
  width: 180%;
  height: 180%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      transparent 20%,
      rgba(0, 0, 0, 0.5) 25%,
      rgba(0, 0, 0, 0.7) 30%,
      rgba(0, 0, 0, 0.85) 35%,
      rgba(0, 0, 0, 0.95) 40%,
      rgba(0, 0, 0, 1) 45%,
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0.98) 55%,
      rgba(0, 0, 0, 0.95) 60%,
      rgba(0, 0, 0, 0.9) 65%,
      rgba(0, 0, 0, 0.8) 70%,
      rgba(0, 0, 0, 0.7) 75%,
      rgba(0, 0, 0, 0.6) 80%,
      rgba(0, 0, 0, 0.4) 85%,
      rgba(0, 0, 0, 0.2) 90%,
      transparent 95%),
    conic-gradient(from 0deg,
      rgba(0, 0, 0, 0.95) 0deg,
      rgba(0, 0, 0, 1) 22.5deg,
      rgba(0, 0, 0, 0.98) 45deg,
      rgba(0, 0, 0, 1) 67.5deg,
      rgba(0, 0, 0, 0.95) 90deg,
      rgba(0, 0, 0, 1) 112.5deg,
      rgba(0, 0, 0, 0.98) 135deg,
      rgba(0, 0, 0, 1) 157.5deg,
      rgba(0, 0, 0, 0.95) 180deg,
      rgba(0, 0, 0, 1) 202.5deg,
      rgba(0, 0, 0, 0.98) 225deg,
      rgba(0, 0, 0, 1) 247.5deg,
      rgba(0, 0, 0, 0.95) 270deg,
      rgba(0, 0, 0, 1) 292.5deg,
      rgba(0, 0, 0, 0.98) 315deg,
      rgba(0, 0, 0, 1) 337.5deg,
      rgba(0, 0, 0, 0.95) 360deg);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 1;
  animation: blackholeRotate 8s linear infinite;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 1),
    0 0 40px rgba(0, 0, 0, 0.9),
    inset 0 0 100px rgba(0, 0, 0, 0.8);
  overflow: visible;
}

.door-icon-container:has(.door-icon-image.visible) .blackhole-ring {
  opacity: 0.9;
}

.door-icon-container.glow-level-1 .blackhole-ring {
  opacity: 0.7;
}

.door-icon-container.glow-level-2 .blackhole-ring {
  opacity: 0.8;
}

.door-icon-container.glow-level-3 .blackhole-ring {
  opacity: 0.85;
}

.door-icon-container.glow-level-4 .blackhole-ring {
  opacity: 0.9;
}

.door-icon-container.glow-level-5 .blackhole-ring {
  opacity: 0.95;
}

.door-icon-container.glow-level-6 .blackhole-ring {
  opacity: 1;
}

@keyframes blackholeRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 星のパーティクル */
.star-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.star-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.door-icon-container:has(.door-icon-image.visible) .star-particle {
  opacity: 1;
}

.star-1 {
  top: 25%;
  left: 30%;
  animation: starSpiral1 6s linear infinite;
}

.star-2 {
  top: 35%;
  left: 20%;
  animation: starSpiral2 7s linear infinite;
  animation-delay: 0.5s;
}

.star-3 {
  top: 45%;
  left: 15%;
  animation: starSpiral3 8s linear infinite;
  animation-delay: 1s;
}

.star-4 {
  top: 55%;
  left: 20%;
  animation: starSpiral4 7.5s linear infinite;
  animation-delay: 1.5s;
}

.star-5 {
  top: 65%;
  left: 30%;
  animation: starSpiral5 6.5s linear infinite;
  animation-delay: 2s;
}

.star-6 {
  top: 55%;
  right: 20%;
  animation: starSpiral6 7s linear infinite;
  animation-delay: 0.3s;
}

.star-7 {
  top: 45%;
  right: 15%;
  animation: starSpiral7 8.5s linear infinite;
  animation-delay: 0.8s;
}

.star-8 {
  top: 35%;
  right: 20%;
  animation: starSpiral8 7.2s linear infinite;
  animation-delay: 1.3s;
}

@keyframes starSpiral1 {
  0% {
    transform: rotate(0deg) translateX(0) rotate(0deg);
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: rotate(360deg) translateX(40px) rotate(-360deg);
    opacity: 0.6;
  }
}

@keyframes starSpiral2 {
  0% {
    transform: rotate(45deg) translateX(0) rotate(-45deg);
    opacity: 0.5;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    transform: rotate(405deg) translateX(45px) rotate(-405deg);
    opacity: 0.5;
  }
}

@keyframes starSpiral3 {
  0% {
    transform: rotate(90deg) translateX(0) rotate(-90deg);
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: rotate(450deg) translateX(50px) rotate(-450deg);
    opacity: 0.7;
  }
}

@keyframes starSpiral4 {
  0% {
    transform: rotate(135deg) translateX(0) rotate(-135deg);
    opacity: 0.6;
  }

  50% {
    opacity: 0.95;
  }

  100% {
    transform: rotate(495deg) translateX(48px) rotate(-495deg);
    opacity: 0.6;
  }
}

@keyframes starSpiral5 {
  0% {
    transform: rotate(180deg) translateX(0) rotate(-180deg);
    opacity: 0.5;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    transform: rotate(540deg) translateX(42px) rotate(-540deg);
    opacity: 0.5;
  }
}

@keyframes starSpiral6 {
  0% {
    transform: rotate(225deg) translateX(0) rotate(-225deg);
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: rotate(585deg) translateX(47px) rotate(-585deg);
    opacity: 0.6;
  }
}

@keyframes starSpiral7 {
  0% {
    transform: rotate(270deg) translateX(0) rotate(-270deg);
    opacity: 0.7;
  }

  50% {
    opacity: 0.95;
  }

  100% {
    transform: rotate(630deg) translateX(52px) rotate(-630deg);
    opacity: 0.7;
  }
}

@keyframes starSpiral8 {
  0% {
    transform: rotate(315deg) translateX(0) rotate(-315deg);
    opacity: 0.5;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    transform: rotate(675deg) translateX(44px) rotate(-675deg);
    opacity: 0.5;
  }
}

/* ランダムな光の線エフェクト */
.flame-rays {
  position: absolute;
  width: 200%;
  height: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.flame-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.door-icon-container:has(.door-icon-image.visible) .flame-ray {
  opacity: 1;
}

.flame-ray-1 {
  width: 2px;
  height: 60px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.9)), transparent);
  transform: translate(-50%, -50%) rotate(15deg) translateY(-40px);
  animation: flameRayFlicker1 2.5s ease-in-out infinite;
  filter: blur(0.5px);
  box-shadow: 0 0 10px var(--glow-color-1, rgba(255, 255, 255, 0.8));
}

.flame-ray-2 {
  width: 1.5px;
  height: 75px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.8)), transparent);
  transform: translate(-50%, -50%) rotate(48deg) translateY(-50px);
  animation: flameRayFlicker2 3s ease-in-out infinite;
  filter: blur(0.5px);
  box-shadow: 0 0 8px var(--glow-color-1, rgba(255, 255, 255, 0.7));
}

.flame-ray-3 {
  width: 2.5px;
  height: 55px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.95)), transparent);
  transform: translate(-50%, -50%) rotate(82deg) translateY(-45px);
  animation: flameRayFlicker3 2.8s ease-in-out infinite;
  filter: blur(0.8px);
  box-shadow: 0 0 12px var(--glow-color-1, rgba(255, 255, 255, 0.9));
}

.flame-ray-4 {
  width: 1.8px;
  height: 70px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.85)), transparent);
  transform: translate(-50%, -50%) rotate(115deg) translateY(-55px);
  animation: flameRayFlicker4 3.2s ease-in-out infinite;
  filter: blur(0.6px);
  box-shadow: 0 0 9px var(--glow-color-1, rgba(255, 255, 255, 0.75));
}

.flame-ray-5 {
  width: 2.2px;
  height: 65px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.9)), transparent);
  transform: translate(-50%, -50%) rotate(148deg) translateY(-48px);
  animation: flameRayFlicker5 2.7s ease-in-out infinite;
  filter: blur(0.7px);
  box-shadow: 0 0 11px var(--glow-color-1, rgba(255, 255, 255, 0.85));
}

.flame-ray-6 {
  width: 1.6px;
  height: 72px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.8)), transparent);
  transform: translate(-50%, -50%) rotate(182deg) translateY(-52px);
  animation: flameRayFlicker6 3.1s ease-in-out infinite;
  filter: blur(0.5px);
  box-shadow: 0 0 8px var(--glow-color-1, rgba(255, 255, 255, 0.7));
}

.flame-ray-7 {
  width: 2.3px;
  height: 58px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.92)), transparent);
  transform: translate(-50%, -50%) rotate(215deg) translateY(-43px);
  animation: flameRayFlicker7 2.9s ease-in-out infinite;
  filter: blur(0.8px);
  box-shadow: 0 0 12px var(--glow-color-1, rgba(255, 255, 255, 0.88));
}

.flame-ray-8 {
  width: 1.7px;
  height: 68px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.82)), transparent);
  transform: translate(-50%, -50%) rotate(248deg) translateY(-50px);
  animation: flameRayFlicker8 3.3s ease-in-out infinite;
  filter: blur(0.6px);
  box-shadow: 0 0 9px var(--glow-color-1, rgba(255, 255, 255, 0.72));
}

.flame-ray-9 {
  width: 2.1px;
  height: 63px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.88)), transparent);
  transform: translate(-50%, -50%) rotate(281deg) translateY(-46px);
  animation: flameRayFlicker9 2.6s ease-in-out infinite;
  filter: blur(0.7px);
  box-shadow: 0 0 10px var(--glow-color-1, rgba(255, 255, 255, 0.8));
}

.flame-ray-10 {
  width: 1.9px;
  height: 69px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.86)), transparent);
  transform: translate(-50%, -50%) rotate(314deg) translateY(-53px);
  animation: flameRayFlicker10 3s ease-in-out infinite;
  filter: blur(0.6px);
  box-shadow: 0 0 9px var(--glow-color-1, rgba(255, 255, 255, 0.76));
}

.flame-ray-11 {
  width: 2.4px;
  height: 57px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.94)), transparent);
  transform: translate(-50%, -50%) rotate(347deg) translateY(-44px);
  animation: flameRayFlicker11 2.4s ease-in-out infinite;
  filter: blur(0.9px);
  box-shadow: 0 0 13px var(--glow-color-1, rgba(255, 255, 255, 0.9));
}

.flame-ray-12 {
  width: 1.4px;
  height: 74px;
  background: linear-gradient(to bottom, var(--glow-color-1, rgba(255, 255, 255, 0.78)), transparent);
  transform: translate(-50%, -50%) rotate(28deg) translateY(-51px);
  animation: flameRayFlicker12 3.4s ease-in-out infinite;
  filter: blur(0.4px);
  box-shadow: 0 0 7px var(--glow-color-1, rgba(255, 255, 255, 0.68));
}

/* 光の線の点滅アニメーション */
@keyframes flameRayFlicker1 {

  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) rotate(15deg) translateY(-40px) scaleY(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(15deg) translateY(-40px) scaleY(1.2);
  }
}

@keyframes flameRayFlicker2 {

  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) rotate(48deg) translateY(-50px) scaleY(1);
  }

  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) rotate(48deg) translateY(-50px) scaleY(1.15);
  }
}

@keyframes flameRayFlicker3 {

  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) rotate(82deg) translateY(-45px) scaleY(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(82deg) translateY(-45px) scaleY(1.25);
  }
}

@keyframes flameRayFlicker4 {

  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) rotate(115deg) translateY(-55px) scaleY(1);
  }

  50% {
    opacity: 0.95;
    transform: translate(-50%, -50%) rotate(115deg) translateY(-55px) scaleY(1.18);
  }
}

@keyframes flameRayFlicker5 {

  0%,
  100% {
    opacity: 0.65;
    transform: translate(-50%, -50%) rotate(148deg) translateY(-48px) scaleY(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(148deg) translateY(-48px) scaleY(1.22);
  }
}

@keyframes flameRayFlicker6 {

  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) rotate(182deg) translateY(-52px) scaleY(1);
  }

  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) rotate(182deg) translateY(-52px) scaleY(1.16);
  }
}

@keyframes flameRayFlicker7 {

  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) rotate(215deg) translateY(-43px) scaleY(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(215deg) translateY(-43px) scaleY(1.24);
  }
}

@keyframes flameRayFlicker8 {

  0%,
  100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) rotate(248deg) translateY(-50px) scaleY(1);
  }

  50% {
    opacity: 0.92;
    transform: translate(-50%, -50%) rotate(248deg) translateY(-50px) scaleY(1.17);
  }
}

@keyframes flameRayFlicker9 {

  0%,
  100% {
    opacity: 0.63;
    transform: translate(-50%, -50%) rotate(281deg) translateY(-46px) scaleY(1);
  }

  50% {
    opacity: 0.98;
    transform: translate(-50%, -50%) rotate(281deg) translateY(-46px) scaleY(1.21);
  }
}

@keyframes flameRayFlicker10 {

  0%,
  100% {
    opacity: 0.56;
    transform: translate(-50%, -50%) rotate(314deg) translateY(-53px) scaleY(1);
  }

  50% {
    opacity: 0.94;
    transform: translate(-50%, -50%) rotate(314deg) translateY(-53px) scaleY(1.19);
  }
}

@keyframes flameRayFlicker11 {

  0%,
  100% {
    opacity: 0.68;
    transform: translate(-50%, -50%) rotate(347deg) translateY(-44px) scaleY(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(347deg) translateY(-44px) scaleY(1.26);
  }
}

@keyframes flameRayFlicker12 {

  0%,
  100% {
    opacity: 0.52;
    transform: translate(-50%, -50%) rotate(28deg) translateY(-51px) scaleY(1);
  }

  50% {
    opacity: 0.88;
    transform: translate(-50%, -50%) rotate(28deg) translateY(-51px) scaleY(1.14);
  }
}

/* 進捗に応じた光の線の色の変化 */
.door-icon-container.glow-level-1 .flame-ray {
  background: linear-gradient(to bottom, rgba(200, 100, 50, 0.9), transparent);
  box-shadow: 0 0 10px rgba(200, 100, 50, 0.8);
}

.door-icon-container.glow-level-2 .flame-ray {
  background: linear-gradient(to bottom, rgba(245, 130, 32, 0.95), transparent);
  box-shadow: 0 0 12px rgba(245, 130, 32, 0.9);
}

.door-icon-container.glow-level-3 .flame-ray {
  background: linear-gradient(to bottom, rgba(255, 180, 60, 1), transparent);
  box-shadow: 0 0 14px rgba(255, 180, 60, 0.95);
}

.door-icon-container.glow-level-4 .flame-ray {
  background: linear-gradient(to bottom, rgba(255, 220, 150, 1), transparent);
  box-shadow: 0 0 16px rgba(255, 220, 150, 1);
}

.door-icon-container.glow-level-5 .flame-ray {
  background: linear-gradient(to bottom, rgba(255, 250, 220, 1), transparent);
  box-shadow: 0 0 18px rgba(255, 250, 220, 1);
}

.door-icon-container.glow-level-6 .flame-ray {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), transparent);
  box-shadow: 0 0 20px rgba(255, 255, 255, 1);
}

/* 魂のグローエフェクト */
.soul-glow {
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(circle,
      var(--glow-color-1, rgba(200, 100, 50, 0.3)) 0%,
      var(--glow-color-2, rgba(220, 140, 80, 0.2)) 30%,
      var(--glow-color-3, rgba(240, 160, 100, 0.15)) 50%,
      transparent 70%);
  opacity: 0;
  animation: soulGlowPulse 2.5s ease-in-out infinite;
  filter: blur(var(--filter-blur, 20px));
  transition: opacity 0.8s ease, transform 0.8s ease, background 0.8s ease, filter 0.8s ease;
  z-index: 2;
}

.door-icon-container:has(.door-icon-image.visible) .soul-glow {
  opacity: calc(var(--glow-intensity, 0.3) * 0.8);
}

.door-icon-container.glow-level-1 .soul-glow {
  opacity: 0.4;
  animation: soulGlowPulse 2.5s ease-in-out infinite;
}

.door-icon-container.glow-level-2 .soul-glow {
  opacity: 0.6;
  animation: soulGlowPulse 2.2s ease-in-out infinite;
}

.door-icon-container.glow-level-3 .soul-glow {
  opacity: 0.8;
  animation: soulGlowPulse 2s ease-in-out infinite;
}

.door-icon-container.glow-level-4 .soul-glow {
  opacity: 1;
  animation: soulGlowPulseBright 1.8s ease-in-out infinite;
}

.door-icon-container.glow-level-5 .soul-glow {
  opacity: 1;
  animation: soulGlowPulseBright 1.5s ease-in-out infinite;
}

.door-icon-container.glow-level-6 .soul-glow {
  opacity: 1;
  animation: soulGlowPulseBrightest 1.2s ease-in-out infinite;
}

@keyframes soulGlowPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: calc(var(--glow-intensity, 0.3) * 0.6);
  }

  50% {
    transform: scale(1.2);
    opacity: calc(var(--glow-intensity, 0.3) * 0.9);
  }
}

@keyframes soulGlowPulseBright {

  0%,
  100% {
    transform: scale(1);
    opacity: calc(var(--glow-intensity, 1) * 0.8);
  }

  50% {
    transform: scale(1.3);
    opacity: calc(var(--glow-intensity, 1) * 1);
  }
}

@keyframes soulGlowPulseBrightest {

  0%,
  100% {
    transform: scale(1);
    opacity: calc(var(--glow-intensity, 1.5) * 0.9);
  }

  50% {
    transform: scale(1.4);
    opacity: calc(var(--glow-intensity, 1.5) * 1.2);
  }
}

/* 光の粒子エフェクト */
.soul-glow-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.soul-glow-particles .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, var(--glow-color-1, rgba(245, 130, 32, 0.9)), transparent);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 3s ease-in-out infinite;
  box-shadow: 0 0 calc(4px * var(--particle-intensity, 1)) var(--glow-color-1, rgba(245, 130, 32, 0.9));
  transition: opacity 0.8s ease, background 0.8s ease, box-shadow 0.8s ease;
}

.door-icon-container:has(.door-icon-image.visible) .soul-glow-particles .particle {
  opacity: calc(var(--particle-intensity, 0.3) * 0.6);
}

.door-icon-container.glow-level-1 .soul-glow-particles .particle {
  opacity: 0.4;
  width: 3px;
  height: 3px;
}

.door-icon-container.glow-level-2 .soul-glow-particles .particle {
  opacity: 0.6;
  width: 4px;
  height: 4px;
}

.door-icon-container.glow-level-3 .soul-glow-particles .particle {
  opacity: 0.8;
  width: 5px;
  height: 5px;
}

.door-icon-container.glow-level-4 .soul-glow-particles .particle {
  opacity: 1;
  width: 6px;
  height: 6px;
}

.door-icon-container.glow-level-5 .soul-glow-particles .particle {
  opacity: 1;
  width: 7px;
  height: 7px;
}

.door-icon-container.glow-level-6 .soul-glow-particles .particle {
  opacity: 1;
  width: 8px;
  height: 8px;
}

.soul-glow-particles .particle:nth-child(1) {
  top: 10%;
  left: 20%;
  animation-delay: 0s;
  animation-duration: 3s;
}

.soul-glow-particles .particle:nth-child(2) {
  top: 30%;
  right: 15%;
  animation-delay: 0.5s;
  animation-duration: 3.5s;
}

.soul-glow-particles .particle:nth-child(3) {
  bottom: 20%;
  left: 25%;
  animation-delay: 1s;
  animation-duration: 2.8s;
}

.soul-glow-particles .particle:nth-child(4) {
  bottom: 15%;
  right: 20%;
  animation-delay: 1.5s;
  animation-duration: 3.2s;
}

.soul-glow-particles .particle:nth-child(5) {
  top: 50%;
  left: 10%;
  animation-delay: 2s;
  animation-duration: 3.3s;
}

.soul-glow-particles .particle:nth-child(6) {
  top: 60%;
  right: 10%;
  animation-delay: 2.5s;
  animation-duration: 2.9s;
}

@keyframes particleFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }

  25% {
    transform: translate(10px, -15px) scale(1.2);
    opacity: 0.9;
  }

  50% {
    transform: translate(-8px, -25px) scale(1.3);
    opacity: 1;
  }

  75% {
    transform: translate(-12px, -15px) scale(1.1);
    opacity: 0.8;
  }
}

.door-icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.3);
  filter: drop-shadow(0 0 calc(25px * var(--glow-intensity, 0.3)) var(--glow-color-1, rgba(245, 130, 32, 0.7))) drop-shadow(0 0 calc(10px * var(--glow-intensity, 0.3)) var(--glow-color-2, rgba(251, 173, 99, 0.5)));
  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
  position: relative;
  z-index: 3;
}

.door-icon-image.visible {
  opacity: 1;
  transform: scale(1);
  animation: doorIconPulse 3s ease-in-out infinite;
}

.door-icon-image.bright {
  animation: doorIconPulseBrightest 1.2s ease-in-out infinite;
}

.door-icon-container.glow-level-1 .door-icon-image.visible {
  filter:
    drop-shadow(0 0 calc(20px * var(--glow-intensity, 0.4)) var(--glow-color-1, rgba(200, 100, 50, 0.4))) drop-shadow(0 0 calc(8px * var(--glow-intensity, 0.4)) var(--glow-color-2, rgba(220, 140, 80, 0.3)));
  animation: doorIconPulse 3s ease-in-out infinite;
}

.door-icon-container.glow-level-2 .door-icon-image.visible {
  filter:
    drop-shadow(0 0 calc(25px * var(--glow-intensity, 0.6)) var(--glow-color-1, rgba(245, 130, 32, 0.5))) drop-shadow(0 0 calc(12px * var(--glow-intensity, 0.6)) var(--glow-color-2, rgba(251, 173, 99, 0.4))) drop-shadow(0 0 calc(6px * var(--glow-intensity, 0.6)) var(--glow-color-3, rgba(255, 200, 120, 0.3)));
  animation: doorIconPulse 2.5s ease-in-out infinite;
}

.door-icon-container.glow-level-3 .door-icon-image.visible {
  filter:
    drop-shadow(0 0 calc(30px * var(--glow-intensity, 0.8)) var(--glow-color-1, rgba(255, 180, 60, 0.7))) drop-shadow(0 0 calc(18px * var(--glow-intensity, 0.8)) var(--glow-color-2, rgba(255, 200, 100, 0.6))) drop-shadow(0 0 calc(10px * var(--glow-intensity, 0.8)) var(--glow-color-3, rgba(255, 220, 140, 0.5)));
  animation: doorIconPulseBright 2.2s ease-in-out infinite;
}

.door-icon-container.glow-level-4 .door-icon-image.visible {
  filter:
    drop-shadow(0 0 calc(35px * var(--glow-intensity, 1)) var(--glow-color-1, rgba(255, 220, 150, 0.9))) drop-shadow(0 0 calc(25px * var(--glow-intensity, 1)) var(--glow-color-2, rgba(255, 240, 180, 0.8))) drop-shadow(0 0 calc(15px * var(--glow-intensity, 1)) var(--glow-color-3, rgba(255, 250, 200, 0.7)));
  animation: doorIconPulseBright 1.8s ease-in-out infinite;
}

.door-icon-container.glow-level-5 .door-icon-image.visible {
  filter:
    drop-shadow(0 0 calc(40px * var(--glow-intensity, 1.2)) var(--glow-color-1, rgba(255, 250, 220, 1))) drop-shadow(0 0 calc(30px * var(--glow-intensity, 1.2)) var(--glow-color-2, rgba(255, 255, 240, 0.95))) drop-shadow(0 0 calc(20px * var(--glow-intensity, 1.2)) var(--glow-color-3, rgba(255, 255, 255, 0.9))) drop-shadow(0 0 calc(10px * var(--glow-intensity, 1.2)) rgba(255, 255, 255, 0.6));
  animation: doorIconPulseBright 1.5s ease-in-out infinite;
}

.door-icon-container.glow-level-6 .door-icon-image.visible {
  filter:
    drop-shadow(0 0 calc(50px * var(--glow-intensity, 1.5)) var(--glow-color-1, rgba(255, 255, 255, 1))) drop-shadow(0 0 calc(40px * var(--glow-intensity, 1.5)) var(--glow-color-2, rgba(255, 255, 255, 1))) drop-shadow(0 0 calc(30px * var(--glow-intensity, 1.5)) var(--glow-color-3, rgba(255, 250, 240, 1))) drop-shadow(0 0 calc(20px * var(--glow-intensity, 1.5)) rgba(255, 255, 255, 0.8)) drop-shadow(0 0 calc(10px * var(--glow-intensity, 1.5)) rgba(255, 255, 255, 0.6));
  animation: doorIconPulseBrightest 1.2s ease-in-out infinite;
}

@keyframes doorIconPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes doorIconPulseBright {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes doorIconPulseBrightest {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* 進捗表示 */
.progress-section {
  margin-top: 0;
  margin-bottom: 1.8rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.progress-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.05em;
}

.progress-percentage {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(245, 130, 32, 0.95);
  text-shadow: 0 0 10px rgba(245, 130, 32, 0.4);
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(245, 130, 32, 0.95), rgba(251, 173, 99, 0.95));
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 15px rgba(245, 130, 32, 0.5);
  width: 0%;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.progress-step {
  flex: 1;
  min-width: 60px;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.progress-step.active {
  background: rgba(245, 130, 32, 0.25);
  border-color: rgba(245, 130, 32, 0.5);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 10px rgba(245, 130, 32, 0.3);
}

.progress-step.completed {
  background: rgba(245, 130, 32, 0.4);
  border-color: rgba(245, 130, 32, 0.7);
  color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 15px rgba(245, 130, 32, 0.4);
}

.progress-step.completed::before {
  content: '✓ ';
  margin-right: 0.25rem;
}

/* 励ましメッセージ */
.motivation-message {
  background: linear-gradient(135deg, rgba(245, 130, 32, 0.15), rgba(251, 173, 99, 0.1));
  border-radius: 1rem;
  padding: 1.4rem;
  margin-top: 0;
  margin-bottom: 1.8rem;
  border: 1px solid rgba(245, 130, 32, 0.3);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all 0.4s ease;
  animation: messageFadeIn 0.5s ease;
}

.motivation-message.celebration {
  background: linear-gradient(135deg, rgba(245, 130, 32, 0.3), rgba(251, 173, 99, 0.2));
  border-color: rgba(245, 130, 32, 0.5);
  box-shadow: 0 0 25px rgba(245, 130, 32, 0.3);
  animation: celebrationPulse 0.6s ease;
}

.message-icon {
  font-size: 1.5rem;
  color: rgba(245, 130, 32, 0.9);
  flex-shrink: 0;
  animation: iconFloat 3s ease-in-out infinite;
}

.message-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

@keyframes messageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes celebrationPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

@keyframes iconFloat {

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

  50% {
    transform: translateY(-5px);
  }
}

/* 現在の章情報 */
.current-chapter {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.4rem;
  margin-top: 0;
  margin-bottom: 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chapter-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

.chapter-header i {
  color: rgba(245, 130, 32, 0.8);
}

.chapter-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.5rem;
}

.chapter-question-count {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* 入力統計 */
.input-stats {
  display: flex;
  gap: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 1.5rem;
  padding-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(245, 130, 32, 0.95);
  text-shadow: 0 0 10px rgba(245, 130, 32, 0.3);
}

/* 成功モーダル */
#submissionSuccessModal .modal-content {
  border-radius: 1.6rem;
  background: linear-gradient(160deg, rgba(17, 16, 24, 0.94), rgba(85, 32, 99, 0.92));
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#submissionSuccessModal .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#submissionSuccessModal .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* アニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroBadgeFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 992px) {
  .questionnaire-hero {
    min-height: auto;
  }

  .questionnaire-hero .container {
    padding-top: 4rem;
    padding-bottom: 3.5rem;
  }

  .questionnaire-hero .hero-background-image {
    background-attachment: scroll;
    /* モバイルではパララックス無効 */
  }

  .questionnaire-hero .hero-overlay {
    /* モバイルでは全体的に少し暗く */
    background: linear-gradient(90deg,
        rgba(15, 12, 41, 0.92) 0%,
        rgba(15, 12, 41, 0.88) 100%);
  }

  .questionnaire-shell {
    margin-top: 0;
    padding-top: 1.5rem;
  }

  .question-step:not(:first-of-type) {
    margin-top: 2.5rem;
  }

  .question-guide {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .soul-progress-track {
    flex-direction: column;
    align-items: stretch;
  }

  .soul-progress-track::before {
    display: none;
  }

  .progress-orb {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.1rem;
    width: 100%;
  }

  .questionnaire-panel {
    padding: 2rem;
  }

  .preview-panel {
    position: static;
    margin-top: 3rem;
    padding-top: 0;
  }

  .preview-panel .soul-preview-card {
    margin-top: 0;
  }
}

@media (max-width: 575.98px) {
  .questionnaire-hero .container {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }

  .hero-title {
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
  }
}

.question-guide {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.question-guide-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 1.6rem;
  padding: 2.5rem;
  box-shadow: 0 24px 60px rgba(12, 0, 25, 0.18);
  border: 1px solid rgba(15, 12, 30, 0.06);
}

.question-guide-card h2 {
  font-family: 'Unbounded', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #2b203b;
}

.question-guide-card p {
  font-size: 1rem;
  color: rgba(31, 24, 45, 0.82);
}

.guide-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.guide-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.96rem;
  color: rgba(31, 34, 38, 0.8);
}

.guide-list i {
  color: #f58120;
  margin-top: 0.25rem;
}

.step-action-bar {
  margin-top: 2.5rem;
}

/* 送信ボタンコンテナ */
.submit-button-container {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 0;
  padding-top: 1.8rem;
  padding-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 送信ボタン */
.preview-submit-btn {
  position: relative;
  width: 100%;
  padding: 1.25rem 2rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f58120 0%, #ff6b35 50%, #f58120 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(245, 130, 32, 0.3);
  z-index: 1;
}

.preview-submit-btn:disabled {
  background: linear-gradient(135deg, #666 0%, #888 50%, #666 100%);
  background-size: 200% 200%;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  animation: none;
}

.preview-submit-btn.enabled {
  animation: buttonPulse 2s ease-in-out infinite, buttonGradient 3s ease infinite;
  box-shadow: 0 6px 30px rgba(245, 130, 32, 0.5), 0 0 40px rgba(245, 130, 32, 0.3);
}

.preview-submit-btn.enabled:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(245, 130, 32, 0.6), 0 0 60px rgba(245, 130, 32, 0.4);
}

.preview-submit-btn.enabled:active {
  transform: translateY(0);
  box-shadow: 0 4px 20px rgba(245, 130, 32, 0.4);
}

/* ボタンのグローエフェクト */
.btn-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  animation: glowPulse 2s ease-in-out infinite;
}

.preview-submit-btn.enabled .btn-glow {
  opacity: 1;
}

/* ボタンのコンテンツ */
.btn-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.btn-content i {
  font-size: 1.3rem;
  animation: gemRotate 3s ease-in-out infinite;
}

.preview-submit-btn.enabled .btn-content i {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

/* パーティクルエフェクト */
.btn-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.btn-particles .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 2s ease-in-out infinite;
}

.preview-submit-btn.enabled .btn-particles .particle {
  opacity: 1;
}

.btn-particles .particle:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.btn-particles .particle:nth-child(2) {
  top: 30%;
  right: 20%;
  animation-delay: 0.4s;
}

.btn-particles .particle:nth-child(3) {
  bottom: 30%;
  left: 30%;
  animation-delay: 0.8s;
}

.btn-particles .particle:nth-child(4) {
  bottom: 20%;
  right: 30%;
  animation-delay: 1.2s;
}

.btn-particles .particle:nth-child(5) {
  top: 50%;
  left: 50%;
  animation-delay: 1.6s;
}

/* ツールチップ */
.submit-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.25rem;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 0.9rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: tooltipPulse 2s ease-in-out infinite;
}

.submit-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.9);
}

/* アニメーション */
@keyframes buttonPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

@keyframes buttonGradient {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes gemRotate {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
  }

  75% {
    transform: rotate(-5deg);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(-30px) translateX(10px);
    opacity: 0;
  }
}

@keyframes tooltipPulse {

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

  50% {
    transform: translateX(-50%) translateY(-3px);
  }
}

@media (max-width: 991.98px) {
  .question-guide-card {
    padding: 2rem;
  }

  .step-header {
    padding: 1.5rem 1.6rem;
    margin-bottom: 2rem;
  }

  .step-header .step-title {
    font-size: 1.35rem;
  }

  .question-card {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .question-card:last-child {
    margin-bottom: 2rem;
  }
}