.story-words-body {
  --story-ink: #173347;
  --story-muted: #5c707d;
  --story-green: #176f5a;
  --story-green-dark: #0f5747;
  --story-line: #d5e2e5;
  --story-surface: #f5faf8;
  min-width: 320px;
  color: var(--story-ink);
  background: #fbfcfc;
}

.story-words-body .story-words-main > .story-words-hero {
  padding-block: clamp(2.25rem, 5vw, 4.75rem) !important;
  border-color: #d7e5e7 !important;
  background:
    radial-gradient(circle at 15% 5%, rgba(111, 190, 168, 0.16), transparent 34%),
    linear-gradient(135deg, #f2f9f7 0%, #fff 70%) !important;
}

.story-words-body .story-words-main > .story-words-hero > .container-xxl,
.story-words-body .story-words-main > .container-xxl,
.story-words-body .story-episode-nav > .container {
  width: min(calc(100% - 2rem), 1180px);
  max-width: 1180px;
}

.story-words-body .story-words-hero h1 {
  max-width: 13em;
  color: var(--story-ink);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 720 !important;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.story-words-body .story-words-hero .lead {
  max-width: 43rem;
  color: var(--story-muted) !important;
  font-size: clamp(1rem, 1.45vw, 1.14rem);
  line-height: 1.9;
}

.story-words-body .story-words-hero .card {
  border: 1px solid rgba(190, 215, 210, 0.85) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 42px rgba(22, 65, 70, 0.09) !important;
}

.story-words-body .story-episode-nav {
  z-index: 1010;
  border-color: #d7e5e7 !important;
  box-shadow: 0 8px 24px rgba(22, 65, 70, 0.05);
}

.story-words-body .story-episode-nav .btn {
  min-height: 38px;
  padding-inline: 0.9rem;
}

.story-words-body .content-section {
  scroll-margin-top: 9rem;
}

.story-words-body #episode-intro > div,
.story-words-body .story-scene-section .card,
.story-words-body #words-summary,
.story-words-body #closing {
  border: 1px solid var(--story-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 15px 42px rgba(22, 62, 70, 0.07) !important;
}

.story-words-body .story-scene-section .card-body {
  padding: clamp(1.25rem, 3.6vw, 3.25rem) !important;
}

.story-words-body .image-box {
  overflow: hidden;
  border-radius: 16px;
  background: #e5efef;
}

.story-words-body .image-box img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.story-words-body .story-scene-section .display-6 {
  color: #163f4a;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 720 !important;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.story-words-body .text-body-secondary {
  color: var(--story-muted) !important;
  line-height: 1.75;
}

.story-words-body .badge {
  padding: 0.48em 0.68em;
  border-radius: 7px !important;
  letter-spacing: 0.01em;
}

.story-words-body .btn {
  min-height: 44px;
  border-radius: 11px;
  font-weight: 680;
}

.story-words-body .btn-sm {
  min-height: 38px;
}

.story-words-body .btn-success {
  border-color: var(--story-green);
  background: var(--story-green);
}

.story-words-body .btn-success:hover,
.story-words-body .btn-success:focus-visible {
  border-color: var(--story-green-dark);
  background: var(--story-green-dark);
}

.story-words-body .btn-outline-success {
  border-color: #75a99e;
  color: var(--story-green-dark);
}

.story-words-body .btn-outline-success:hover,
.story-words-body .btn-outline-success:focus-visible {
  border-color: var(--story-green);
  background: var(--story-green);
  color: #fff;
}

.story-words-body a:focus-visible,
.story-words-body button:focus-visible {
  outline: 3px solid rgba(28, 126, 103, 0.34);
  outline-offset: 3px;
}

.story-words-body [data-tts] {
  position: relative;
}

.story-words-body [data-tts].is-playing {
  border-color: #176b5a;
  background: #e1f4ee;
  color: #104c41;
  box-shadow: 0 0 0 3px rgba(28, 126, 103, 0.16);
}

.story-words-body [data-tts].is-playing::after {
  content: " 再生中";
  font-size: 0.78em;
  font-weight: 700;
}

.story-words-body .collapse > div {
  border-color: #d2e1df !important;
  background: var(--story-surface) !important;
  line-height: 1.7;
}

.story-words-body code {
  color: #185e50;
  font-size: 0.95em;
}

.story-words-body table {
  border-color: #d7e3e4;
}

.story-words-body th {
  background: #eef7f4 !important;
  color: #244c4a;
}

.story-words-body td,
.story-words-body th {
  padding: 0.85rem !important;
  vertical-align: middle;
}

@media (max-width: 767.98px) {
  .story-words-body .story-words-main > .story-words-hero > .container-xxl,
  .story-words-body .story-words-main > .container-xxl,
  .story-words-body .story-episode-nav > .container {
    width: min(calc(100% - 1rem), 1180px);
  }

  .story-words-body .story-words-main > .story-words-hero {
    padding-block: 2rem !important;
  }

  .story-words-body .story-words-hero h1 {
    font-size: clamp(1.85rem, 9vw, 2.35rem);
  }

  .story-words-body .story-scene-section .display-6 {
    font-size: clamp(1.65rem, 7vw, 2.1rem);
  }

  .story-words-body .story-scene-section .d-flex:has(> .btn) {
    align-items: stretch;
  }

  .story-words-body .story-scene-section .d-flex:has(> .btn) > .btn {
    flex: 1 1 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-words-body *,
  .story-words-body *::before,
  .story-words-body *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}