/*
 * story.css - SUDAN STORY ページ
 * Why: /story/ 専用。固定コンテンツのブランディングページ。
 *      デザイン: design/jpg/story_sudan/*（通常時 a / 展開時 b）。
 *      レイアウトは TOP 系と同様にフル幅 + section-inner(0 5vw)。
 *
 * 構成:
 *   1. 変数・ベース
 *   2. ヒーロー
 *   3. イントロ（どんな国 / 違い国バンド / 家畜）
 *   4. 古代文明
 *   5. 戦火
 *   6. ストーリー導入（回転ウォーターマーク）
 *   7. STORY 01 カード + トグル
 *   8. 展開記事（見出し / 2カラム / 引用 / 強調 / 用語 / クロージング / MESSAGE / プロフィール）
 *   9. レスポンシブ（SP）
 */

.page-story {
  --story-pink: var(--color-magenta);
  --story-ink: #111;
  overflow-x: hidden;
  padding-top: var(--header-height);
  color: var(--story-ink);
}

/* SP 専用の <br>: PC では改行しない */
.page-story br.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .page-story br.sp-only {
    display: inline;
  }
}

.page-story p {
  line-height: 1.9;
}

/* 黒文字ユーティリティ（マゼンタ帯上の見出しで一部だけ黒にする用）
   Why: デザインで「遠い国」「戦火」「問題」「人」だけ黒文字。 */
.page-story .is-ink {
  color: var(--story-ink);
}

/* ============================================================
   2. ヒーロー
   ============================================================ */
.story-hero {
  padding-top: clamp(40px, 6vw, 88px);
  /* padding-bottom: clamp(24px, 4vw, 48px); */
}

.story-hero__title {
  font-family: var(--font-en-heading);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  color: var(--color-magenta);
}

.story-hero__sub {
  margin-top: 12px;
  font-weight: 700;
  font-size: var(--fs-sm);
}

/* ============================================================
   3. イントロ
   ============================================================ */
.story-intro {
  position: relative;
}

/* ============================================================
   上段: 左（見出しのみ）＋右（少女写真）の2カラム flex
   Why: デザイン通り少女写真は中段ピンクバンドの右上に重ねる。
        負の margin-bottom で写真を下方へ食い込ませる。
   ============================================================ */
.story-intro__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  padding-top: clamp(16px, 3vw, 40px);
  padding-bottom: 0;
  position: relative;
  z-index: 3;
}

.story-intro__heading {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--story-ink);
}

.story-intro__photo {
  position: relative;
  overflow: hidden;
}

/* 少女写真: .story-intro__top 内で絶対配置し、右上基準で配置。
   height を明示して縦に伸ばし、本文の右側〜羊画像の右側上まで重ねる。
   object-fit: cover で中央の少女＋ロバを保持しつつ container 高に追従。
   SP では下の media query で static に戻す。 */
.story-intro__photo--girl {
  position: absolute;
  top: clamp(30px, 5vw, 150px);
  right: clamp(20px, 5vw, 80px);
  width: clamp(180px, 32vw, 440px);
  height: clamp(300px, 60vw, 880px);
  overflow: hidden;
  z-index: 4;
}

.story-intro__photo--girl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.story-intro__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.story-intro__photo figcaption {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   中段: ピンクバンド（全幅・斜辺デザイン）
   Why: 帯画像は上に右下がり斜辺・下に右上がりカット。本文は左寄せにし、
        右側は少女写真の重なりスペースとして空ける。
   ============================================================ */
.story-intro__band {
  position: relative;
  z-index: 1;
  margin-top: clamp(-24px, -2vw, -8px);
  /* 100% 100% でコンテナに合わせて伸縮。cover だと帯がコンテンツ高を超えた
     ときに右の斜辺が見切れるため、常に全幅表示を優先する。 */
  display: flex;
  align-items: center;
  padding: 21% 0 22%;
  background: url("../../img/top/whatsNew/background_left.png") no-repeat
    center / 107% 100%;
  color: #fff;
}

/* 本文ブロック: 帯の左寄りに置き、右側は少女写真用の空白を残す。
   上位 .story-intro__band が flex column 中央寄せ。 */
.story-intro__band-inner {
  width: 100%;
  padding-right: clamp(180px, 36%, 480px);
}

.story-intro__band-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.story-intro__band-text {
  font-size: var(--fs-sm);
  margin-bottom: 1em;
  max-width: 82ch;
}

/* ============================================================
   下段: 地図＋羊の画像（バンドの下端の斜めカットに食い込ませる）
   ============================================================ */
.story-intro__bottom {
  position: relative;
  margin-top: clamp(-440px, -26vw, -220px);
  margin-bottom: clamp(40px, 6vw, 50px);
  z-index: 2;
}

/* 羊画像は上段の section-inner(0 10vw) と同じ左右余白で右寄せ、
   横幅は本文（最大60ch）＋少女写真（clamp 240〜420px）の合計を超えないよう
   clamp で抑える。右端は少女写真の右端（=10vw インセット）に揃う。 */
.story-intro__photo--goats {
  position: relative;
  width: 100%;
  padding: 0 10vw;
  box-sizing: border-box;
}

.story-intro__photo--goats img {
  width: 100%;
  max-width: clamp(300px, 58vw, 800px);
  margin-left: auto;
  margin-right: 0;
  display: block;
  /* Why: loading="lazy" 未読込時に naturalH=0 で .story-intro__bottom 全体が
     潰れ、地図と羊画像の負マージンを使った重なり配置が崩れる。intrinsic 比率で
     枠を確保。intro_goats.png 960x560。 */
  aspect-ratio: 960 / 560;
}

/* スーダン/アフリカ地図（羊の画像の左下に重ねる）
   right 基準で羊画像の左下に重なるよう配置。 */
.story-intro__map {
  position: absolute;
  left: auto;
  right: clamp(calc(10vw + 280px), 59vw, calc(10vw + 720px));
  bottom: clamp(60px, 8vw, 140px);
  width: clamp(200px, 22vw, 340px);
  height: auto;
  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   4. 古代文明
   ============================================================ */
.story-culture {
  text-align: center;
  padding-block: clamp(8px, 1.5vw, 20px);
}

.story-culture__heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.story-culture__heading .is-accent {
  color: var(--color-magenta);
}

.story-culture__text {
  margin: 0 auto;
  font-size: var(--fs-sm);
  text-align: justify;
  max-width: 120ch;
}

/* ============================================================
   5. 戦火
   ============================================================ */
.story-war {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: 8px;
  padding: clamp(40px, 5vw, 80px) max(5vw, calc((100% - 1200px) / 2))
    clamp(80px, 10vw, 160px);
  /* rail.png: 170% auto で等比維持。上下 padding を 5vw に揃えてどのデスクトップ幅でもバンド内に収まるよう確保 */
  background: url("../../img/story/rail.png") no-repeat left center / 125% auto;
  color: #fff;
}

.story-war__photo {
  overflow: hidden;
  /* PC: grid 列幅いっぱいに広がると写真が縦長になり過ぎて帯の斜辺で
     右下が見切れる。上限を設けてバランスを取る。 */
  max-width: clamp(360px, 38vw, 520px);
  justify-self: center;
}

.story-war__photo img {
  width: 100%;
  height: auto;
  display: block;
  /* Why: culture_women.png 520x693。lazy 時の高さ崩れ防止＋
     grid 中央寄せ整合性の維持。 */
  aspect-ratio: 454 / 734;
  object-fit: cover;
}

.story-war__body {
  padding-top: clamp(48px, 6vw, 96px);
}

.story-war__heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 20px;
}

.story-war__heading .is-mark {
  background: #fff;
  color: var(--color-magenta);
  padding: 0 6px;
}

.story-war__text {
  font-size: var(--fs-sm);
  margin-bottom: 1em;
  max-width: 64ch;
}

/* ============================================================
   6. ストーリー導入
   ============================================================ */
.story-lead {
  position: relative;
  display: block;
  padding: 0 5vw;
  overflow: hidden;
  color: #fff;
  margin-top: -190px;
}

/* 左側の写真が「帯」の役割。全高 cover で大きく、右端はマゼンタへブレンド。
   Why: 画像はセクション幅いっぱいに広げ、テキストを画像の65〜80%ゾーン
        （マゼンタ帯・SUDAN縦文字より左）に absolute で配置する。 */
.story-lead__photo {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Why: children.png は loading="lazy" のためビュー外では naturalH=0 になり、
   セクション高が padding 分（〜96px）まで潰れて body の絶対配置テキストが
   画面外に置き去りになる。intrinsic な比率で枠を確保し、画像が遅延して
   読み込まれてもレイアウトシフトと潰れを防ぐ。 */
.story-lead__photo img {
  aspect-ratio: 4096 / 2487;
}

.story-lead__body {
  position: absolute;
  /* Why: テキストブロックを画像の 50〜78% ゾーンに配置。
          SUDAN 縦文字（画像右端 85%〜）の左に余白を持たせつつ、
          見出しが <br> 位置以外で折れない幅を確保する。 */
  right: calc(clamp(165px, 24vw, 520px) - 150px);
  top: 46%;
  transform: translateY(-50%);
  z-index: 3;
  width: clamp(400px, 34vw, 480px);
  padding: clamp(16px, 2vw, 28px) clamp(14px, 1.8vw, 24px);
  border-radius: 18px 18px 72px 18px;
}

.story-lead__photo img {
  width: 100%;
  height: auto;
  display: block;
  /* border-radius: 26px 26px 120px 26px; */
}

.story-lead__photo figcaption {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #fff;
  font-size: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.story-lead__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 20px;
}

.story-lead__text {
  font-size: var(--fs-sm);
  color: #fff;
  line-height: 2;
}

/* ============================================================
   7. STORY 01 カード
   ============================================================ */
.story-card {
  position: relative;
  margin-top: 8px;
  margin-bottom: 0;
}

.story-card__head {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr minmax(280px, 42%);
  grid-template-areas: "rail intro photo";
  align-items: center;
  gap: 0 clamp(20px, 3vw, 48px);
  padding: clamp(38px, 4.8vw, 77px) 5vw clamp(90px, 11vw, 175px);
  /* マゼンタ帯画像 hash-rail.png を左見切れで使用（デザイン指定）。
     width=auto / height=130% で画像本来のアスペクト比（=斜辺角度）を保ったまま
     head の 1.3倍サイズで表示し、マゼンタ帯を太く見せる。 */
  background: url("../../img/top/hash-rail.png") no-repeat right -32% / auto
    117%;
  color: #fff;
}

/* 左レール: STORY → 縦線 → 01 → MORE を縦に並べる */
.story-card__rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}

.story-card__label {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: var(--font-en-heading);
  font-weight: 900;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: 0.12em;
  /* 白塗り＋マゼンタ縁取り（デザイン: マゼンタ帯上で白、白地でマゼンタ縁が見える） */
  color: #fff;
  -webkit-text-stroke: 1.5px var(--color-magenta);
  paint-order: stroke fill;
}

/* 縦文字STORYと「01」の間の縦線（デザイン準拠） */
.story-card__rail::before {
  content: "";
  width: 1px;
  height: clamp(48px, 7vw, 88px);
  background: #fff;
  order: 1;
}

.story-card__no {
  order: 2;
  font-family: var(--font-en-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  writing-mode: horizontal-tb;
}

.story-card__intro {
  grid-area: intro;
}

.story-card__title {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 20px;
  /* 白塗り＋マゼンタ縁取り（デザイン準拠） */
  color: #fff;
  -webkit-text-stroke: 1.5px var(--color-magenta);
  paint-order: stroke fill;
}

.story-card__lead {
  font-size: var(--fs-sm);
  line-height: 2;
  margin-bottom: 24px;
}

.story-card__name {
  font-family: var(--font-en-ui);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1.5;
}

.story-card__name span {
  display: block;
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: var(--fs-xs);
  opacity: 0.9;
  margin-top: 4px;
}

.story-card__photo {
  grid-area: photo;
  align-self: stretch;
  position: relative;
  border-radius: 14px 14px 80px 14px;
  min-height: 100%;
  bottom: 46px;
  /* PC: grid 列幅いっぱいに広がると写真が大きくなりすぎて帯の斜辺で
     見切れる。比率維持のまま約 70% に縮小。 */
  max-width: clamp(252px, 22vw, 336px);
  justify-self: center;
  translate: 20px 0;
}

.story-card__photo > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border-radius: 14px 14px 80px 14px; */
  /* Why: zein_school.png 919x611。lazy で h=0 時もカード高さを確保。 */
  aspect-ratio: 454 / 790;
}

/* 日本地図（写真の左隣＝テキストエリア側に配置。Figma準拠で写真にほぼ被らない）
   Why: 旧 left:-220 だと地図が写真と 200px 以上重なり、本来テキストエリアの
   背景装飾として置きたい地図が前景化していた。Figma では地図右端 ≒ 写真左端と
   なるよう写真幅相当（≒-32vw）左へ寄せ、写真にほぼ被らない配置にする。 */
.story-card__map {
  position: absolute;
  top: 71%;
  left: clamp(-690px, -48vw, -450px);
  transform: translateY(-53%);
  width: clamp(434px, 48vw, 881px);
  /* 親 .story-card__photo の max-width に縛られないよう明示的に解除 */
  max-width: none;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* トグルボタン（黒丸 MORE / CLOSE） */
.story-card__toggle {
  order: 3;
  margin-top: clamp(12px, 2vw, 28px);
  width: 112px;
  height: 112px;
  border: 0;
  border-radius: 50%;
  background: var(--color-black);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.story-card__toggle:hover {
  transform: scale(1.04);
}

.story-card__toggle-label {
  font-family: var(--font-en-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
}

.story-card__toggle-icon {
  width: 14px;
  height: 14px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-base);
}

.story-card__toggle[aria-expanded="true"] .story-card__toggle-icon {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.story-card__photo-credit {
  font-size: 10px;
  color: #fff;
  text-align: center;
  margin-top: 6px;
  opacity: 0.8;
}

.story-card__toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 5vw, 64px);
}

.story-card__toggle--close {
  margin-top: 0;
}

/* ============================================================
   8. 展開記事
   ============================================================ */
.story-card__panel {
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* .story-article {
  padding-block: clamp(40px, 6vw, 88px);
} */

.story-article__heading {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 40px);
}

.story-article__ja {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
}

.story-article__ja .is-accent {
  color: var(--color-magenta);
}

.story-article__en {
  font-family: var(--font-en-ui);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--story-ink);
  font-size: var(--fs-sm);
  padding-left: clamp(16px, 2vw, 32px);
  border-left: 2px solid var(--color-magenta);
}

.story-article__cols {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(24px, 3vw, 48px);
}

/* テキストのみセクションも img-left と同じカラム構成（1fr 1.5fr）にして、
   テキストの幅・横位置を他の本文と揃える。左列は空のスペース。 */
.story-article__cols--text-only {
  grid-template-columns: 1fr 1.5fr;
}

/* 画像左の2カラムは画像を大きめに（テキストより広く） */
.story-article__cols--img-left {
  grid-template-columns: 1fr 1.5fr;
}

.story-article__cols--text-only .story-article__text {
  grid-column: 2;
  max-width: none;
  margin-left: 0;
}

.story-article__figure {
  /* 角丸は img 側に付与。figcaption を角丸でクリップしないよう figure では
     overflow:hidden しない（キャプション有無に関わらず画像は4隅角丸で統一）。 */
  margin: 0;
}

.story-article__figure img {
  width: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.story-article__figure figcaption {
  font-size: var(--fs-xs);
  color: #777;
  margin-top: 8px;
  text-align: center;
}

.story-article__figure--wide {
  /* PC: 送別会写真は縦長写真(--portrait, 約300px列)と幅を揃えて左に整列。 */
  max-width: 300px;
  margin: 0 0 clamp(24px, 3vw, 48px);
}

/* 縦長画像（school_group）の2カラム: デザイン準拠で画像列を狭く（約300px）、
   本文を右に。縦長が 1.5fr 列いっぱいに広がって高くなりすぎるのを防ぐ。 */
.story-article__cols--portrait {
  grid-template-columns: minmax(0, 300px) 1fr;
}

/* 縦長画像は列幅いっぱい（=約300px）・左寄せ。SP では別途中央寄せ（後述）。 */
.story-article__figure--portrait {
  max-width: 100%;
}

/* 左カラム：制服写真・送別会写真を同じ要素にまとめ縦に並べる（右の本文と1対1）。 */
.story-article__figures {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 40px);
}

.story-article__text p {
  font-size: var(--fs-sm);
  /* 本文は行間を広めに取る（デザイン指定） */
  line-height: 2.2;
  margin-bottom: 1.4em;
}

.story-article__emphasis {
  font-weight: 700;
  font-size: var(--fs-md) !important;
  text-align: center;
  padding: clamp(16px, 2.5vw, 28px) 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* 引用 */
.story-article__quote {
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
  padding: clamp(20px, 3vw, 36px) 0;
  margin: clamp(24px, 4vw, 48px) 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* 中央寄せ強調 */
.story-article__center {
  text-align: center;
  font-size: var(--fs-sm);
  margin: clamp(20px, 3vw, 40px) 0;
}

.story-article__center--rule {
  font-size: var(--fs-md) !important;
  font-weight: 700;
  padding: clamp(16px, 2.5vw, 28px) 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* 用語ボックス（背景グレー・仕切り線は白） */
.story-article__note {
  display: grid;
  grid-template-columns: 220px 1fr;
  margin: clamp(24px, 4vw, 48px) 0;
  margin-left: auto;
  max-width: 760px;
  background: #ececef;
  border: none;
}

.story-article__note-title {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: clamp(20px, 3vw, 32px);
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

.story-article__note-body {
  padding: clamp(20px, 3vw, 32px);
  font-size: var(--fs-sm);
  /* 白い仕切り線 */
  border-left: 3px solid #fff;
}

/* クロージング（背景はデザイン指定画像 story-article-closing.png） */
.story-article__closing {
  position: relative;
  margin: clamp(40px, 6vw, 88px) 0;
  padding: clamp(56px, 9vw, 140px) 5vw;
  text-align: center;
  overflow: hidden;
  border-radius: 8px;
  background: url("../../img/story/story-article-closing.png") center / cover
    no-repeat;
}

.story-article__closing-inner {
  position: relative;
  z-index: 1;
}

.story-article__closing-title {
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  font-weight: 700;
  margin-bottom: clamp(28px, 4vw, 56px);
}

.story-article__closing-inner p {
  font-size: var(--fs-sm);
  margin-bottom: 1.6em;
}

/* MESSAGE */
.story-message {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) 1.2fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin: clamp(40px, 6vw, 80px) 0 clamp(24px, 3vw, 40px);
}

/* MESSAGE の見出し+動画ラッパー。EN見出しをサムネの上辺にかぶせるため基準にする */
.story-message__media {
  position: relative;
  padding-top: 1em;
}

.story-message__en {
  position: absolute;
  /* top: 負値で画像の上辺から少しはみ出させる（小さくするほど深く重なる） */
  top: -0.4em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  font-family: var(--font-en-heading);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--color-magenta);
  white-space: nowrap;
}

.story-message__video {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  max-width: 320px;
  margin: 0 auto;
}

/* クリックで YouTube Short を遅延埋め込みするラッパー。
   Why: ラッパーを 9:16 で固定し、サムネ画像も iframe も同じ枠にフィットさせて
        再生前後のレイアウトシフトを防ぐ。Short は素材自体が 9:16 なので黒帯なし。 */
.story-message__video-wrapper {
  position: relative;
  aspect-ratio: 9 / 16;
  cursor: pointer;
  background: #000;
}

.story-message__video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-message__video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 中央配置のピンク円再生ボタン */
.story-message__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease;
}

.story-message__play svg {
  display: block;
}

.story-message__video-wrapper:hover .story-message__play {
  transform: translate(-50%, -50%) scale(1.1);
}

.story-message__caption {
  margin-top: 16px;
  font-size: var(--fs-xs);
  color: #555;
  text-align: center;
  line-height: 1.7;
}

.story-message__journey-en {
  text-align: center;
  font-family: var(--font-en-heading);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-magenta);
  font-size: var(--fs-lg);
}

.story-message__journey-ja {
  text-align: center;
  font-size: var(--fs-sm);
  margin-bottom: 20px;
}

.story-message__timeline-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(12px, 2vw, 28px);
  padding: 16px 0;
  border-top: 1px solid #e3e3e3;
}

.story-message__timeline-row:last-child {
  border-bottom: 1px solid #e3e3e3;
}

.story-message__timeline dt {
  font-weight: 700;
}

.story-message__timeline dd {
  font-size: var(--fs-sm);
}

/* プロフィール */
.story-profile {
  margin-top: clamp(32px, 4vw, 56px);
}

.story-profile__name {
  font-family: var(--font-en-ui);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: 12px;
}

.story-profile__name span {
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: #555;
  margin-left: 12px;
}

.story-profile__bio {
  font-size: var(--fs-sm);
  color: #333;
}

/* RELATED 上余白（共通カードスタイルは archive.css） */
.page-story .page-single-related {
  margin-top: clamp(48px, 7vw, 96px);
}

.page-story .page-single-related__en {
  line-height: 0.95;
}

/* ============================================================
   中間幅（1075px〜1230px）: story-war 背景を left top / 150% auto に変更
   ============================================================ */
@media (min-width: 1075px) and (max-width: 1230px) {
  .story-war {
    background: url("../../img/story/rail.png") no-repeat left top / 152% auto;
  }
}

/* ============================================================
   中間幅（〜1300px）
   ============================================================ */
@media (max-width: 1300px) {
  .page-story p {
    /* line-height: 1.9; */
  }
  .story-war__text {
    font-size: var(--fs-sm);
    /* margin-bottom: 1em; */
    max-width: 51ch;
  }
}

/* ============================================================
   中間幅（〜1080px）
   ============================================================ */
@media (max-width: 1080px) {
  .story-war__heading {
    font-size: 1.852vw; /* 20px @ 1080px */
    font-weight: 700;
    margin-bottom: 20px;
  }
  .story-war__text {
    font-size: 0.926vw; /* 10px @ 1080px */
    margin-bottom: 1em;
    max-width: 56ch;
  }
}

/* ============================================================
   中間幅（〜1069px）: イントロ帯の本文ブロック幅を 100% → 94% に絞る
   ============================================================ */
@media (max-width: 1069px) {
  .story-intro__band-inner {
    width: 94%;
  }
}

/* ============================================================
   中間幅（769〜900px）: story-lead のテキストが画像高さに収まらず
   下にはみ出すため、見出し・本文・行間を縮めて画像内に収める。
   ============================================================ */
@media (min-width: 769px) and (max-width: 900px) {
  .story-lead__title {
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    line-height: 1.35;
    margin-bottom: 8px;
  }
  .story-lead__text {
    font-size: clamp(0.7rem, 1.3vw, 0.8rem);
    line-height: 1.55;
  }
}

/* ============================================================
   中間幅（769px〜920px）: 少女写真が本文に被らないよう幅を絞る
   ============================================================ */
/* @media (min-width: 769px) and (max-width: 920px) {
  .story-intro__photo--girl {
    width: 26vw;
  }
} */

/* ============================================================
   9. レスポンシブ（SP）
   ============================================================ */
@media (max-width: 768px) {
  /* SP: 上段を縦並びに変更 */
  .story-intro__top {
    flex-direction: column;
    gap: 16px;
  }

  .story-intro__left {
    width: 100%;
  }

  /* SP: 少女写真は縦並び時に中央寄せ。PC の absolute / 固定 height をリセット。
     z-index で次に来るピンク帯より前面に出し、デザイン準拠で写真下端が帯に
     めり込む形を作る。align-self: center で flex 親 (align-items:flex-start)
     を上書きして横方向中央に揃える。inset を auto に戻さないと PC の
     top/right の値（30px / 20px）が relative でも効いて -20px 横ズレする。 */
  .story-intro__photo--girl {
    position: relative;
    inset: auto;
    z-index: 2;
    flex: none;
    align-self: center;
    width: clamp(270px, 82vw, 360px);
    height: auto;
    margin-inline: auto;
  }

  .story-intro__photo--girl img {
    height: auto;
    object-fit: initial;
  }

  /* SP: バンドはSP用斜め帯画像を100%100%で全面表示（cover だと rail の斜辺が
     クロップされて崩れる）。PC で本文を右に寄せていた band-inner の右パディングは
     SP では不要なのでリセット。rail.png 下辺の斜め切れで最終行が欠けないよう
     下パディングを上より大きく取る。少女写真と帯上端を重ねるため
     margin-top を大きめの負値で引き上げる。 */
  /* 左端は viewport の外まで見切れさせて帯が画面外へ続いている印象に。
     page-story が overflow-x: hidden なのではみ出しは安全。
     少女写真の下半分が帯に重なるよう margin-top を大きめの負値で
     引き上げ、本文が写真と被らないよう padding-top を厚めに確保。
     背景は `auto 100%`（高さ基準・横は比率維持）で rail.png 本来の
     斜辺角度を保持。超過分は左右見切れさせる。padding を厚めにして
     帯全体を一回り大きくする。 */
  .story-intro__band {
    margin-top: clamp(-260px, -71vw, -180px);
    margin-left: clamp(-30px, 0vw, 0px);
    width: calc(100% + clamp(16px, 6vw, 30px));
    padding: clamp(250px, 76vw, 271px) clamp(32px, 24vw, 83px)
      clamp(120px, 22vw, 140px) clamp(32px, 9vw, 56px);
    background: url("../../img/story/sp/rail.png") no-repeat right top / 117%
      99%;
    border-radius: 0;
    text-align: center;
  }

  .story-intro__band-inner {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* SP: 羊の群れ写真はピンク帯の下端（斜め切れ）にめり込ませる。
     z-index を上げて帯より前面に。 */
  .story-intro__bottom {
    position: relative;
    z-index: 2;
    margin-top: clamp(-140px, -27vw, -80px);
    margin-bottom: clamp(32px, 8vw, 64px);
  }

  .story-intro__photo--goats {
    max-width: 100%;
  }

  .story-intro__photo--goats img {
    width: clamp(180px, 72vw, 300px);
    margin-inline: auto;
  }

  /* 地図は羊画像の右下に重ねる */
  .story-intro__map {
    position: absolute;
    left: auto;
    right: clamp(-18px, -3vw, 8px);
    bottom: clamp(20px, 6vw, 60px);
    width: clamp(120px, 34vw, 170px);
  }

  /* SP: 背景 rail.png は 100%100% で引き伸ばすと斜辺角度が縦長コンテナで
     潰れて違和感が出る。比率維持の `auto 100%` で高さ基準に拡大し、
     超過分は左右見切れさせて本来の角度を保つ。位置は中央寄せで両端を均等に
     見せる。下部 padding は最終行が斜辺で欠けないよう多めに確保。 */
  /* セクション自体を左を空けて右へ寄せ、右端を viewport 外まで見切れさせる
     （イントロ帯が左に見切れるのと対称に）。page-story が overflow-x:hidden
     なのではみ出し安全。 */
  /* セクションは右へ見切れているため、左右パディングを左小・右大の非対称に
     して content（写真・本文）の中央が viewport 中央付近に来るよう補正。
     さらに margin-left を負値にして帯自体を viewport 左端まで届かせ、
     その分 padding-left で content 位置をキープする。 */
  .story-war {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: clamp(24px, 0vw, 53px) clamp(56px, 19vw, 88px)
      clamp(85px, 22vw, 192px) clamp(56px, 24vw, 110px);
    margin-left: clamp(-50px, -12vw, -20px);
    margin-right: clamp(-30px, -6vw, -16px);
    /* viewport 内に見える左端で rail.png の本来の角丸を見せるため left top に配置。
       右側は viewport 外まで見切れるので切れて構わない。 */
    background: url("../../img/story/sp/rail.png") no-repeat left top / auto
      100%;
    border-radius: 0;
  }

  /* SP: 写真は帯の斜辺で見切れない幅に縮める。 */
  .story-war__photo {
    margin-right: 0;
    width: clamp(220px, 70vw, 231px);
  }

  /* SP: max-width:1080px の vw 指定が SP まで効いて文字が極小（~7px/3px）
     になるのを打ち消す。デザイン準拠のサイズへ復帰。 */
  .story-war__heading {
    font-size: 1.4rem;
    margin-bottom: 16px;
  }

  .story-war__text {
    font-size: var(--fs-sm);
    max-width: none;
  }

  /* SP: PC のグリッド整合用 padding-top（48〜96px）が縦積み時に
     写真と見出しの間を無駄に広げてしまうのでリセット。
     テキストブロック全体を写真より少し右に寄せる（デザイン微調整）。 */
  .story-war__body {
    padding-top: 0;
    padding-left: 5px;
  }

  /* SPはSP用合成画像 sp/children.png（上=マゼンタ文字エリア / 下=子ども写真）を使い、
     PC同様にテキストを画像上部のマゼンタへ重ねる。デザインJPG準拠で
     左右に白の余白を残し、角丸のカード調にする。 */
  .story-lead {
    display: block;
    background: none;
    border-radius: 0;
    padding: 0 5vw;
    margin-top: 0;
  }

  .story-lead__photo {
    transform: none;
    width: 100%;
  }

  /* SP: <picture> の srcset で sp/children.png（1401x3267 縦長）へ切替わる */
  .story-lead__photo img {
    aspect-ratio: 1401 / 3267;
  }

  .story-lead__photo::after {
    content: none;
  }

  .story-lead__body {
    position: absolute;
    inset: 0 auto auto 0;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: clamp(100px, 30vw, 150px) 11vw 0;
    border-radius: 0;
  }

  .story-lead__title {
    font-size: clamp(1.3rem, 5.4vw, 1.7rem);
    margin-bottom: 18px;
  }

  /* STORY カード（SP）: 左レール(STORY/線/01) + 右に見出し・写真を縦積み。
     日本地図は非表示、写真は縦長で主役、MORE は写真下端の中央に重ねる。
     --photo-half は写真の高さの約半分（写真 width=min(74%,340px)・aspect 4/5）。
     写真の負マージン・MOREボタン位置・パネル余白をこの変数で連動させる。 */
  .story-card {
    --photo-half: clamp(110px, 36vw, 190px);
  }

  /* 帯（rail.png）は左端が下まで不透明（左99%・右79%の斜め帯）。写真を head 内に
     収めると左下が必ずマゼンタに乗るため、写真下半分は head の箱の外へ出す。
     padding-bottom を 0 にし、写真に負マージンを与えて head 下端＝写真中央にする。
     セクションは左を見切れ＋右に空き（戦火の対称）。背景は auto 100% で
     斜辺角度を保つ。イントロ帯／戦火帯と同じ要領で padding を厚くして
     マゼンタ帯全体を大きく見せる。 */
  .story-card__head {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "rail intro"
      "rail photo";
    gap: clamp(28px, 6vw, 48px) 16px;
    align-items: start;
    /* 戦火セクション同様、左右ともに viewport 外まで見切れさせる。
       padding-left でコンテンツの開始位置を制御。padding-right を厚めにして
       テキスト・写真が rail.png の斜辺で見切れないよう右側を絞る。 */
    padding: clamp(80px, 18vw, 120px) clamp(56px, 18vw, 90px) 0
      clamp(32px, 12vw, 60px);
    margin-left: clamp(-30px, -6vw, -16px);
    margin-right: clamp(-30px, -6vw, -16px);
    /* viewport 内に見える右端で rail.png の本来の角丸を見せるため right top に配置。
       左側は viewport 外まで見切れるので切れて構わない。 */
    background: url("../../img/story/sp/rail.png") no-repeat right top / 107%
      100%;
    border-radius: 0;
    /* SP: 帯を下げてタイトルを帯上端から飛び出させる */
    margin-top: 46px;
  }

  /* SP: タイトル（intro）を帯上端より上にせり出させる */
  .story-card__intro {
    margin-top: -90px;
    position: relative;
    z-index: 3;
  }

  .story-card__rail {
    align-self: stretch;
    justify-content: flex-start;
    /* 写真をフル幅中央に置くため、レール（STORY/01）は写真の上に重ねる。
       position は付けない（toggle の絶対配置基準を __head に保つため）。 */
    z-index: 2;
    /* SP: タイトル上端までレールを引き上げる */
    margin-top: -90px;
  }

  /* STORY と 01 を上下に離す（線は短めに固定し、レール全体が
     マゼンタ帯内に収まるようにする）。 */
  .story-card__rail::before {
    flex: 0 0 auto;
    height: clamp(377px, 77vw, 365px);
    min-height: 0;
  }

  /* SP: 日本地図は非表示 */
  .story-card__map {
    display: none;
  }

  /* SP: 写真は MORE ボタンと同じくセクション中央寄せ。
     負マージン(-photo-half)で grid トラックを縮め、下半分を head の外
     （白地）へはみ出させる → head 下端が写真の中央になる。
     PC の bottom:46px / align-self:stretch をリセットしないと写真が
     テキスト側にせり上がり名前と重なる。
     grid-column を全幅(1/-1)にして justify-self:center でレールを
     含めたカード全体の中央に配置する。 */
  .story-card__photo {
    grid-column: 1 / -1;
    justify-self: center;
    align-self: start;
    width: 74%;
    max-width: 340px;
    position: relative;
    bottom: auto;
    z-index: 1;
    margin-bottom: calc(-1 * var(--photo-half));
    /* border-radius: 14px 14px 70px 14px;
    aspect-ratio: 4 / 5; */
    min-height: 0;
  }

  /* SP: MORE は写真下端に重ねる。head 下端＝写真中央なので、そこから
     photo-half 下＝写真下端。ボタン中央を写真下端の少し上に置く。
     z-index で写真より前面に。 */
  .story-card__toggle:not(.story-card__toggle--close) {
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--photo-half) - 36px);
    transform: translateX(-50%);
    margin: 0;
    width: 92px;
    height: 92px;
    z-index: 5;
  }

  /* hover時も中央寄せ(translateX)を維持したまま拡大する（右ズレ防止） */
  .story-card__toggle:not(.story-card__toggle--close):hover {
    transform: translateX(-50%) scale(1.04);
  }

  /* SP: 写真下半分が head の外へ photo-half ぶん出るので、後続パネルに余白を
     確保（折り畳み時も margin は効くので次セクションとの重なりを防ぐ）。 */
  .story-card__panel {
    margin-top: calc(var(--photo-half) + 24px);
  }

  .story-article__heading {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .story-article__en {
    border-left: 0;
    padding-left: 20px;
  }

  .story-article__cols,
  .story-article__cols--img-left,
  .story-article__cols--portrait {
    grid-template-columns: 1fr;
  }

  .story-article__cols {
    gap: 0;
  }

  /* SP: 送別会画像と縦長画像は対の見た目に統一（約67%幅・中央寄せ・キャプション下）。
     デザイン準拠で、どちらも主張しすぎない揃ったサイズにする。 */
  .story-article__figure--wide,
  .story-article__figure--portrait {
    max-width: 67%;
    margin-inline: auto;
  }

  .story-article__quote,
  .story-article__center--rule {
    max-width: 100%;
  }

  .story-article__note {
    grid-template-columns: 1fr;
  }

  .story-article__note-body {
    border-left: 0;
    border-top: 1.5px solid #111;
  }

  .story-message {
    grid-template-columns: 1fr;
  }

  .story-message__timeline-row {
    grid-template-columns: 88px 1fr;
  }

  .story-profile__name span {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}

@media (min-width: 1600px) {
  .story-war {
    padding-top: clamp(40px, 6vw, 100px);
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: clamp(89px, 19vw, 150px);
  }

  .story-war__photo {
    width: 80%;
    max-width: clamp(416px, 33vw, 541px);
    justify-self: center;
  }

  .page-story .page-single-related__heading.section-inner,
  .page-story .page-single-related__grid.section-inner {
    padding-left: 140px;
    padding-right: 140px;
  }

  .story-card__head {
    padding-bottom: 204px;
  }

  .story-intro__photo--girl {
    top: clamp(20px, 1vw, 40px);
    left: auto;
    right: clamp(80px, 20vw, 320px);
    width: clamp(440px, 32vw, 640px);
    height: clamp(880px, 60vw, 1200px);
  }
}

/* 810px以下: story-card__lead の margin-bottom を縮小 */
@media (min-width: 768px) and(max-width: 810px) {
  .story-card__lead {
    margin-bottom: 10px;
  }
}

/* 1050px〜1250px: 少女写真が帯テキストに被るため右余白を拡張 */
@media (min-width: 1050px) and (max-width: 1250px) {
  .story-intro__band-inner {
    padding-right: 41%;
  }
}

/* story-card__photo: 560px以下でひと回り小さく */
@media (max-width: 560px) {
  .story-card__photo {
    width: 64%;
    max-width: 300px;
  }
}