/* Article-only composition; the approved TOP does not load this stylesheet. */
body.article-detail{--article-header:68px;--body-photo-space:40px;background:var(--paper);color:#262626}
.article-detail .editorial-article{padding-top:calc(var(--article-header) + 20px)}
.article-detail .editorial-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.article-detail .editorial-visual{margin:0 24px 38px;min-width:0}
.article-detail .editorial-main-photo{width:100%;overflow:hidden}
.article-detail .editorial-main-photo picture{display:contents}
.article-detail .editorial-main-photo img{display:block;width:100%;height:auto;object-fit:cover;object-position:var(--position-sp)}
.article-detail .photo-unavailable{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;background:#f0f2f9;color:#777;font:400 12px/1.7 var(--sans);letter-spacing:.1em}
.article-detail .editorial-copy{padding:24px 24px 80px;min-width:0}
.article-detail .editorial-title{font:400 clamp(29px,6.4vw,44px)/1.65 var(--serif);letter-spacing:.015em;margin:0 0 26px;overflow-wrap:anywhere}
.article-detail .editorial-series{font:500 13px/1.85 var(--serif);color:#262626;margin:0 0 22px}
.article-detail .editorial-person{font:400 14px/1.9 var(--sans);margin:0 0 48px;color:#666}
.article-detail .editorial-lead{font:400 calc(17px - 2pt)/1.95 var(--sans);margin:0 0 70px;overflow-wrap:anywhere}
.article-detail .editorial-title,.article-detail .editorial-section h2,.article-detail .editorial-related h2,.article-detail .editorial-lead,.article-detail .editorial-paragraph{text-align:justify;text-justify:inter-ideograph}
.article-detail .editorial-section{margin:0 0 68px}
.article-detail .editorial-section h2{font:500 23px/1.75 var(--serif);letter-spacing:.02em;margin:0 0 26px;overflow-wrap:anywhere}
.article-detail .chapter-number{display:block;font:700 18px/1.5 var(--sans);letter-spacing:.12em;color:#777;margin-bottom:14px}
.article-detail .editorial-paragraph{font:400 calc(17px - 2pt)/1.95 var(--sans);margin:0 0 25px;overflow-wrap:anywhere}
.article-detail .editorial-inline-photo{margin:0}
/* Body media owns its external spacing, including a caption or photo pair.
   Padding prevents collapsed margins from losing the lower gap at section ends. */
.article-detail .editorial-section > :is(.editorial-inline-photo,.editorial-photo-pair){margin-top:0;margin-bottom:0;padding-block:var(--body-photo-space)}
.article-detail .editorial-section > :has(+ :is(.editorial-inline-photo,.editorial-photo-pair)){margin-bottom:0}
.article-detail .editorial-section > :is(.editorial-inline-photo,.editorial-photo-pair) + *{margin-top:0}
.article-detail .editorial-section > :is(.editorial-inline-photo,.editorial-photo-pair) + :is(.editorial-inline-photo,.editorial-photo-pair){padding-top:0}
.article-detail .editorial-section:has(> :is(.editorial-inline-photo,.editorial-photo-pair):last-child){margin-bottom:0}
.article-detail .editorial-section:has(> :is(.editorial-inline-photo,.editorial-photo-pair):last-child) + :is(.editorial-end,.editorial-notes){margin-top:0}
.article-detail .editorial-inline-photo picture{display:contents}
.article-detail .editorial-inline-photo img{width:100%;height:auto;object-fit:contain}
.article-detail .editorial-inline-photo .photo-unavailable{aspect-ratio:4/5}
.article-detail .editorial-inline-photo figcaption{font:400 12px/1.8 var(--sans);color:#777;margin-top:12px}
.article-detail .editorial-end{font:400 13px/1.9 var(--sans);margin-top:56px}
.article-detail .editorial-end p{margin:0}
.article-detail .editorial-section:last-of-type{margin-bottom:0}
.article-detail .editorial-related{padding:40px 24px 60px}
.article-detail .editorial-related h2{font:400 22px var(--serif)}
@media(min-width:760px){body.article-detail{--article-header:95px}}
@media(min-width:1200px){
 body.article-detail{--body-photo-space:56px}
 .article-detail .editorial-article{padding:0}
 /* 写真の列幅は画面の高さから決まるため、縦長のビューポート（縦置きモニタなど）では
    1 列目だけで画面幅を埋めてしまい、本文の列が 0 幅に潰れる。
    例: 1200x1920 では 5vw + 56.25dvh = 1140px となり、列間 60px を引くと本文が残らない。
    写真の幅を 40vw で頭打ちにして必ず本文の居場所を残す。
    16:9 などの横長では min() の左側が選ばれるため、従来と表示は変わらない。 */
 .article-detail .editorial-layout{grid-template-columns:calc(5vw + min(56.25vh,40vw)) minmax(0,1fr);grid-template-columns:calc(5vw + min(56.25dvh,40vw)) minmax(0,1fr);column-gap:clamp(40px,5vw,80px);align-items:start;max-width:1800px;margin:0 auto}
 .article-detail .editorial-visual{position:sticky;top:0;margin:0 0 0 5vw}
 .article-detail .editorial-main-photo{width:min(56.25vh,40vw);width:min(56.25dvh,40vw);height:calc(min(56.25vh,40vw) * 16 / 9);height:calc(min(56.25dvh,40vw) * 16 / 9);aspect-ratio:9/16}
 .article-detail .editorial-main-photo img{height:100%;object-position:var(--position-pc)}
 .article-detail .editorial-copy{width:100%;max-width:680px;padding:calc(var(--article-header) + 80px) 40px 90px;margin:0 auto}
 .article-detail .editorial-title{font-size:36px;line-height:1.65;margin-bottom:28px}
 .article-detail .editorial-series{margin-bottom:28px}
 .article-detail .editorial-person{margin-bottom:64px}
 .article-detail .editorial-lead{margin-bottom:94px}
 .article-detail .editorial-section{margin-bottom:86px}
 .article-detail .editorial-section h2{font-size:25px;margin-bottom:30px}
}
@media(min-width:600px) and (max-width:1199px){
 .article-detail .editorial-visual{width:min(520px,calc(100% - 48px));margin:0 auto 48px}
 .article-detail .editorial-copy{max-width:650px;margin:auto}
}