/* article.css 共通 — 記事ページ（Journal / Stories / Notes）の読みやすさ */
/* 題：日本語を主役に、英語は小さな見出しへ */
.story-hero .en:not(.jp-title) { font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); line-height: 1.6; }
.story-hero .en:not(.jp-title) + .ja { margin-top: 10px; font-family: var(--serif); font-weight: 600; font-size: clamp(27px, 4.6vw, 52px); line-height: 1.45; letter-spacing: 0.04em; color: var(--text); }
.story-hero .en.jp-title + .ja { font-size: clamp(14px, 1.8vw, 18px); letter-spacing: 0.08em; }
.story-hero .fnote { font-size: 11px; line-height: 1.9; }
/* 本文の幅と段落 */
.article-body { max-width: 680px; text-align: left; }
.article-body p { text-align: left; word-break: normal; overflow-wrap: anywhere; line-break: strict; }
/* 頭の一文字を大きくする飾りはやめ、最初の段落を少し大きく */
.article-body p.big-first::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; font-weight: inherit; line-height: inherit; }
.article-body p.big-first { font-size: 1.12em; color: var(--text); }
/* 写真の説明 */
.story-figure figcaption, .article-body figcaption { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; text-transform: none; color: var(--dim); line-height: 1.8; }
/* 映像へのボタン：押せる大きさに */
.watch-film { display: flex; width: 100%; justify-content: flex-start; padding: 16px 20px; font-family: var(--sans); font-size: 14px; letter-spacing: 0.04em; line-height: 1.6; }
.article-nav { font-size: 13px; }

/* ---- 記事の部品（要点・取材の記録・映像カード・筆者紹介・出典） ---- */
.article-body .summary, .article-body .fieldnote { margin: 0 0 2.6em; padding: 20px 22px; border: 1px solid var(--a-line, rgba(255,255,255,0.16)); }
.article-body .summary p.label, .article-body .fieldnote p.label { margin: 0 0 10px; font-family: var(--en); font-size: 11px; letter-spacing: 0.16em; color: var(--a-dim, var(--dim)); }
.article-body .summary ul { margin: 0; padding-left: 1.2em; }
.article-body .summary li { margin: 0.4em 0; font-size: 15px; line-height: 1.9; }
.article-body .fieldnote dl { margin: 0; display: grid; grid-template-columns: 5.5em 1fr; gap: 8px 12px; font-family: var(--sans); font-size: 14.5px; line-height: 1.8; }
.article-body .fieldnote dt { color: var(--a-dim, var(--dim)); }
.article-body .fieldnote dd { margin: 0; }
.article-body .film-card { display: block; margin: 2em 0; border: 1px solid var(--a-line, rgba(255,255,255,0.16)); color: inherit; }
.article-body .film-card .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.article-body .film-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-body .film-card .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0,0,0,0.6); border: 1.5px solid rgba(255,255,255,0.9); }
.article-body .film-card .play::after { content: ""; position: absolute; left: 26px; top: 21px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.article-body .film-card .cap { display: block; padding: 14px 18px 16px; font-family: var(--sans); font-size: 15px; line-height: 1.7; }
.article-body .film-card .cap small { display: block; margin-top: 4px; font-size: 12px; color: var(--a-dim, var(--dim)); }
.article-body .author { margin-top: 3.4em; padding-top: 1.8em; border-top: 1px solid var(--a-line, rgba(255,255,255,0.12)); display: flex; gap: 18px; align-items: flex-start; }
.article-body .author img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; flex: none; }
.article-body .author p { margin: 0 0 0.6em; font-family: var(--sans); font-size: 13.5px; line-height: 1.9; }
.article-body .author .name { font-family: var(--serif); font-size: 16px; }
.article-body .related { margin-top: 1.4em; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; }
.article-body .related a, .article-body .sources a { color: var(--a-dim, var(--dim)); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-body .sources { margin-top: 3em; padding-top: 1.6em; border-top: 1px solid var(--a-line, rgba(255,255,255,0.12)); }
.article-body .sources p { font-family: var(--sans); font-size: 12.5px; line-height: 2; color: var(--a-dim, var(--dim)); margin-top: 0.6em; }
@media (max-width: 640px) {
  .story-hero-inner { padding: 150px 22px 44px; }
  .article-body { padding-left: 22px; padding-right: 22px; }
}
.article-body .fieldnote dl, .article-body .summary li, .article-body .author p, .article-body .film-card .cap { font-weight: 400; }
.article-body h2 { font-weight: 600; }
.article-body figure { margin-top: 2.6em; margin-bottom: 2.6em; }
.article-body figure img { display: block; width: 100%; height: auto; }
.article-body figcaption { margin-top: 10px; }
/* 写真を2枚並べる・縦長の写真 */
.article-body figure.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.article-body figure.pair img { aspect-ratio: 4 / 3; object-fit: cover; height: 100%; }
.article-body figure.pair figcaption { grid-column: 1 / -1; }
.article-body figure.tall { max-width: 420px; margin-left: auto; margin-right: auto; }
/* 聖書の言葉 */
.article-body blockquote.scripture { border-left: 0; padding-left: 0; text-align: center; margin: 3em 0 1em; }
.article-body blockquote.scripture .ref { display: block; margin-top: 0.8em; font-family: var(--en); font-size: 12px; letter-spacing: 0.08em; color: var(--a-dim, var(--dim)); }
/* 写真を画面いっぱいに（スマホ） */
@media (max-width: 640px) {
  .article-body figure:not(.tall):not(.pair) { margin-left: -22px; margin-right: -22px; }
  .article-body figure:not(.tall):not(.pair) figcaption { padding: 0 22px; }
}
.article-body .dateline { margin: -1.2em 0 2.2em; font-family: var(--sans); font-size: 12px !important; line-height: 1.8 !important; color: var(--a-dim, var(--dim)) !important; }
.article-body .facts { margin-top: 3.4em; padding: 24px 22px 12px; border: 1px solid var(--a-line, rgba(255,255,255,0.16)); }
.article-body .facts h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body .facts p, .article-body .facts li { font-size: 15px; line-height: 1.9; }
.article-body .facts ul { margin: 0.8em 0; padding-left: 1.2em; }
.article-body .facts a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-body .facts h3 { margin: 1.8em 0 0.4em; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.article-body .facts .note { font-size: 12.5px; color: var(--a-dim, var(--dim)); }
/* C 本文は明るい紙面（題の写真と頭・足は黒のまま） */
body { background: #f3f0e8; }
.site-footer, .cta-float { background: var(--bg); }
.article-body, .story-figure, .article-nav { color: #26241f; }
.article-body p { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 2.0; letter-spacing: 0.03em; color: #2a2823; margin-top: 1.5em; }
.article-body p.big-first { color: #1c1b17; }
.article-body h2 { color: #1c1b17; font-size: 21px; line-height: 1.6; letter-spacing: 0.05em; margin-top: 2.8em; padding-top: 1.2em; border-top: 1px solid rgba(0,0,0,0.14); }
.article-body blockquote { color: #4d6b5a; border-left-color: #4d6b5a; font-size: 18px; line-height: 1.9; }
.story-figure figcaption, .article-body figcaption { color: #6b675d; }
.watch-film { color: #1c1b17; border-color: rgba(0,0,0,0.3); }
.article-nav { border-top-color: rgba(0,0,0,0.14); color: #55524a; }
.article-nav a:hover { color: #000; }
:root { --a-line: rgba(0,0,0,0.16); --a-dim: #6b675d; }
.article-body .summary li, .article-body .fieldnote dd, .article-body .film-card .cap, .article-body .author p { color: #2a2823; }
.article-body .film-card { border-color: rgba(0,0,0,0.16); background: #fff; }