/* ============================================================
   WordPress だけで使う CSS：記事詳細の本文（ブロックエディターで書いたものを流す）── 2026-09-22
   ------------------------------------------------------------
   静的ページの記事詳細（page-article.css）は見本の記事に合わせた固定の座標。
   投稿の本文は長さが変わるので、同じ左端（448.2）・同じ幅（720）・同じ文字の大きさ・同じ間隔で、上から順に流す。
   間隔は page-article.css の座標から求めた値（本文の行送り 38、段落→小見出しの罫 69、罫→小見出し 37、
   小見出し→本文 38、本文→写真 57、写真→説明 29、→引用 70、引用→次 79、本文→終わりの罫 77、罫→もどる 38、下の余白 88）。
   これは静的ページには読み込まれない（テーマの functions.php が single のときだけ読む）。
   ============================================================ */
.b-ar-body { height: auto; }
.b-ar-body .band__in { height: auto; padding-bottom: calc(88 * var(--s)); }
.b-ar-body .band__in > * { position: relative; left: auto; top: auto; margin-left: calc(448.2 * var(--s)); }
.ar__flow { display: block; width: calc(720 * var(--s)); padding-top: calc(45 * var(--s)); pointer-events: auto; }
.ar__flow > * { position: static; margin: 0; }

/* 本文の文字：ar__p と同じ（游明朝 16／38、字間 .07em、palt） */
.ar__flow { font-family: var(--ff-jp-body); font-weight: 400; font-size: calc(16 * var(--s)); line-height: calc(38 * var(--s)); letter-spacing: .07em; font-feature-settings: "palt"; color: var(--c-ink); }
.ar__flow p, .ar__flow ul, .ar__flow ol { margin: 0; }
.ar__flow > * + p, .ar__flow > * + ul, .ar__flow > * + ol { margin-top: calc(38 * var(--s)); }
.ar__flow ul, .ar__flow ol { padding-left: 1.5em; }
/* 箇条書きの項目どうしにも、段落と同じあきを取る（2026-09-26 高野様「ジャンルの間に余白を。くっついていて読みづらい」） */
.ar__flow li + li { margin-top: calc(38 * var(--s)); }
.ar__flow a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: .5px; }
.ar__flow strong, .ar__flow b { font-weight: 600; }
.ar__flow hr { border: 0; height: 1px; background: var(--c-ink); transform: scaleY(.5); transform-origin: 0 0; margin: calc(70 * var(--s)) 0; }

/* 小見出し：ar__h2a と同じ（筑紫A 24／24、字間 .1em）。上に 40px の短い罫 */
.ar__flow h2, .ar__flow h3, .ar__flow h4 { position: relative; font-family: var(--ff-jp-display); font-weight: var(--fw-jp-display); font-size: calc(24 * var(--s)); line-height: calc(24 * var(--s)); letter-spacing: .1em; margin: calc(106 * var(--s)) 0 calc(38 * var(--s)); }
.ar__flow h2::before, .ar__flow h3::before, .ar__flow h4::before { content: ""; position: absolute; left: 0; top: calc(-37 * var(--s)); width: calc(40 * var(--s)); height: 1px; background: var(--c-ink); transform: scaleY(.5); transform-origin: 0 0; }
.ar__flow h3, .ar__flow h4 { font-size: calc(20 * var(--s)); line-height: calc(24 * var(--s)); }
.ar__flow > h2:first-child, .ar__flow > h3:first-child { margin-top: calc(37 * var(--s)); }

/* 写真：ar__fig と同じ幅 720。高さは写真なり。説明は ar__figcap と同じ（12／12・70%） */
.ar__flow figure { margin: calc(57 * var(--s)) 0 calc(70 * var(--s)); max-width: 100%; }
.ar__flow figure img { display: block; width: 100%; height: auto; background-color: #bababa; }
.ar__flow figure figcaption { margin: calc(29 * var(--s)) 0 0; font-family: var(--ff-jp-body); font-size: calc(12 * var(--s)); line-height: calc(12 * var(--s)); letter-spacing: .07em; opacity: .7; text-align: left; color: var(--c-ink); }
.ar__flow figure + p { margin-top: 0; }
.ar__flow .wp-block-gallery { gap: calc(12 * var(--s)); }

/* 引用：ar__quote と同じ（筑紫A 24／44、字間 .1em）。左に 0.5px の縦罫、文字は 60 右へ */
.ar__flow blockquote { position: relative; margin: calc(70 * var(--s)) 0 calc(79 * var(--s)); padding: 0 0 0 calc(60 * var(--s)); font-family: var(--ff-jp-display); font-weight: var(--fw-jp-display); font-size: calc(24 * var(--s)); line-height: calc(44 * var(--s)); letter-spacing: .1em; border: 0; }
.ar__flow blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--c-ink); transform: scaleX(.5); transform-origin: 0 0; }
.ar__flow blockquote p { margin: 0; }
.ar__flow blockquote p + p { margin-top: 0; }
.ar__flow blockquote cite { display: block; margin-top: calc(12 * var(--s)); font-family: var(--ff-jp-body); font-size: calc(12 * var(--s)); line-height: calc(12 * var(--s)); font-style: normal; opacity: .7; }
.ar__flow blockquote + h2, .ar__flow blockquote + h3 { margin-top: calc(80 * var(--s)); }
.ar__flow figure + h2, .ar__flow figure + h3 { margin-top: calc(106 * var(--s)); }

/* 終わりの罫・一覧へもどる・カテゴリの記事をもっと見る（静的と同じ幅 975・同じ行に左右） */
.b-ar-body .band__in > .ar__end-rule { margin-top: calc(77 * var(--s)); }
.b-ar-body .band__in > .ar__back { margin-top: calc(38 * var(--s)); }
.b-ar-body .band__in > .ar__more { margin-top: calc(-14 * var(--s)); }

/* 見出し・紹介文が長いとき：はみ出さずに折り返す（短いときの位置は静的と同じ） */
.t.ar__h { max-width: calc(975 * var(--s)); white-space: normal; }
.t.ar__lead { max-width: calc(975 * var(--s)); white-space: normal; }
.ar__h .ln, .ar__lead .ln { display: block; }

/* SP（767px 以下）：sp-article.css の本文の値（14／2.0、小見出し 18／1.7、写真の説明 12／1.7、引用は左に 1px の罫） */
@media (max-width: 767px) {
  .b-ar-body .band__in { padding-bottom: 0; }
  .b-ar-body .band__in > * { margin-left: 0; }
  .ar__flow { width: 100%; padding-top: 0; gap: 0; font-size: 14px; line-height: 2.0; text-wrap: pretty; }
  /* 本文は <wbr> を持たないので、keep-all（sp-common.css）ではなく通常の日本語の折り返しにする */
  main.page .band__in .ar__flow, main.page .band__in .ar__flow * { word-break: normal; overflow-wrap: break-word; }
  /* SP だけの改行（<br class="sp-br">）を本文でも効かせる。PC では 03-common.css が消す（2026-09-26 高野様「改行位置を調整して」） */
  main.page .band__in .ar__flow br.sp-br { display: inline; }
  .ar__flow > * + p, .ar__flow > * + ul, .ar__flow > * + ol { margin-top: 24px; }
  .ar__flow li + li { margin-top: 24px; }
  .ar__flow h2, .ar__flow h3, .ar__flow h4 { font-size: 18px; line-height: 1.7; margin: 56px 0 20px; text-wrap: balance; }
  .ar__flow h3, .ar__flow h4 { font-size: 16px; }
  .ar__flow h2::before, .ar__flow h3::before, .ar__flow h4::before { top: -20px; width: 40px; }
  .ar__flow > h2:first-child, .ar__flow > h3:first-child { margin-top: 20px; }
  .ar__flow figure { margin: 32px 0 40px; }
  .ar__flow figure figcaption { margin-top: 12px; font-size: 12px; line-height: 1.7; }
  .ar__flow blockquote { margin: 40px 0 48px; padding-left: 16px; font-size: 18px; line-height: 1.7; }
  .ar__flow blockquote::before { width: 1px; transform: none; }
  .ar__flow hr { margin: 40px 0; }
  .b-ar-body .band__in > .ar__end-rule, .b-ar-body .band__in > .ar__back, .b-ar-body .band__in > .ar__more { margin-top: 0; }
  .t.ar__h, .t.ar__lead { max-width: none; }
}