/* ============================================
   page-story.css
   Story page styles (JP & EN)
   ============================================ */

.story-icon {
  text-align: center;
  margin-top: 52px;
  margin-bottom: 40px;
}

.story-icon img {
  width: 40px;
  height: auto;
  display: inline-block;
}

.story-body {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: 0.06em;
}

.story-body p {
  margin-bottom: 1.8em;
  text-indent: 0;
}

.story-body p.no-indent {
  text-indent: 0;
}

.story-body .quote {
  text-indent: 2em;
  font-style: normal;
}

.story-date {
  text-align: right;
  margin-top: var(--space-2xl);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
}

.story-photo {
  max-width: 600px;
  margin: 50px auto;
  padding: 0;
}

@media (max-width: 768px) {
  .story-photo {
    max-width: 520px;
    padding: 0 var(--space-lg);
  }
}

.story-photo picture {
  display: block;
  width: 100%;
}

.story-photo img {
  width: 100%;
  aspect-ratio: 939 / 626;
  object-fit: cover;
}