/* ブログ記事の共通スタイル。正はこのファイル1つ（tools/build-article.js が <link> を張る）。
   以前は記事ごとに同じ<style>を埋めていて、テンプレ更新のたびに世代の違うCSSが混在した
   （2026-08-26時点で3世代・.figや.updの有無がばらばら）。記事側には置かないこと。
   2026-10 の作り直しで assets/wa.css の上に載る形にした（文書のページ＝滑らせない一枚。題と見出しはゴシック＝.gothic）。 */
.art{max-width:720px;margin:0 auto}
.art .meta{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--sub)}
/* 題字の下に細い罫を一本。名乗りは置かず、そのまま本文へ入る */
.art h1{margin-top:14px;padding-bottom:24px;border-bottom:1px solid var(--hair);font-size:clamp(26px,3.6vw,40px);line-height:1.5;text-wrap:balance}
.art h1+p{margin-top:28px}
.art h2{margin-top:52px;padding-left:14px;border-left:3px solid var(--sumi);font-size:clamp(19px,2vw,23px);line-height:1.6}
.art p{margin-top:16px;font-size:17px;line-height:2.05}
/* 記事の当時の数字に付ける現在値の注記。本文より一段引いて置く */
.art .upd{color:var(--sub);font-size:.92em}
.art ul{margin-top:16px;padding:0;list-style:none}
.art li{position:relative;margin-top:10px;padding-left:20px;font-size:17px;line-height:2.05}
/* 行頭の点は小さく。長い行が折り返しても文の頭が揃うようにする */
.art li::before{content:"";position:absolute;left:4px;top:calc(1.025em - 2px);width:5px;height:5px;border-radius:50%;background:var(--sub)}
.art a{color:var(--ai);text-underline-offset:4px;overflow-wrap:anywhere}
/* 図はSVGの実寸で置く。横幅いっぱいに引き伸ばすと図中の文字だけ本文より大きくなる。
   図の枠は絵の幅に合わせる（--figw は build-article.js が viewBox から入れる）。
   図とわかるように、罫線と一段違う地の色で囲む（2026-09-01 MTO様ご指示） */
.art .fig{margin:40px auto 0;width:min(calc(var(--figw,682px) + 38px),100%);padding:20px 18px 16px;border:1px solid var(--hair);background:var(--washi-2)}
.art .fig img{display:block;max-width:100%;height:auto;margin:0 auto}
/* 注記は枠の中に、細い罫で絵と分けて置く。図と注記でひとつの物に見せる */
.art .fig figcaption{margin-top:16px;padding-top:12px;border-top:1px solid var(--hair);font-size:14px;line-height:1.9;color:var(--sub);text-align:left}
/* PC用の図を持つ回（build-article.js が <名前>-wide.svg を見つけたとき）。本文と同じ幅いっぱいに、縦横比で場所を確保する */
.art .fig.wide{width:100%}
.art .fig.wide img{width:100%;height:auto;aspect-ratio:var(--ar-n)}
@media (min-width:740px){.art .fig.wide img{aspect-ratio:var(--ar-w)}}
.art .sign{margin-top:56px;padding:20px 22px;border:1px solid var(--hair);background:var(--paper);font-size:15px;line-height:2}
/* 書き手の所属。売り込まず、名刺の裏くらいの静けさで置く */
.art .who{margin-top:32px;padding-top:18px;border-top:1px solid var(--hair);font-size:14px;line-height:2;color:var(--sub)}
.art .who a{color:var(--body)}
.art .back{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;font-size:15px;font-weight:700;color:var(--ai);text-decoration:none}
.art .back:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.art p,.art li{font-size:16px}}