/* v8 記事レイアウト 段階 1(2026-10-08)。includes/v8-article-layout.php が対象記事の表示画面でだけ読む。
   範囲は body.single-post.stnv8a-article の記事本文とアイキャッチだけ(トップ・収益ページにはこの body クラスが付かない)。1.0.343 から記事の全部。
   既存の v2/v4/v7・プラグイン inline の規則には詳細度で勝つ(!important は使わない)。文字は変えない(PHP が札と区切りの span を足すだけ)。 */

/* D. 節のリズム: 節の間は広く(罫線 + 余白)、節の中の段落の間は少し詰める(本文の高さを伸ばさないため) */
body.single-post.stnv8a-article .wp-block-post-content{--stnv4-pm:15px} /* v4.css の段落下の余白(1.4em)を変数で詰める(規則そのものは詳細度が高く上書きできない) */
body.single-post.stnv8a-article .wp-block-post-content > p{margin-top:15px}
/* h2 の padding-top と ::before は v7.css が 0!important / display:none!important で固定しているので、
   上の余白は透明な border-top で、罫線はその上端に引いた 1px の背景で作る */
body.single-post.stnv8a-article .wp-block-post-content > h2.stnv8a-h2{margin-top:24px;margin-bottom:12px;border-top:14px solid transparent;background:linear-gradient(var(--stnv2-line,#dbe7f3),var(--stnv2-line,#dbe7f3)) left top/100% 1px no-repeat border-box}
/* アイコンは見出しの 1 行目の頭に置く(2 行目以降は全幅。字下げで行数を増やさない) */
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-h2icon{display:inline-block;width:22px;height:22px;margin-right:6px;vertical-align:-3px;color:var(--stnv2-navy,#0b2545);line-height:0}
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-h2icon svg{display:block;width:22px;height:22px}

/* B. FAQ: Q 札(紺の塗り)と A 札(白地に青の線)。全部見せる */
body.single-post.stnv8a-article .wp-block-post-content > .stnv8a-qa{--stnv4-pm:0px;margin-top:12px;margin-bottom:0;border:1px solid var(--stnv2-line,#dbe7f3);border-radius:8px;background:var(--stnv2-white,#fff)}
body.single-post.stnv8a-article .wp-block-post-content > .stnv8a-qa + .stnv8a-qa{margin-top:10px}
body.single-post.stnv8a-article .wp-block-post-content > .stnv8a-qa + :not(.stnv8a-qa){margin-top:24px}
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-qa p.stnv8a-qa__q,
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-qa p.stnv8a-qa__a{margin:0;padding:8px 12px;font-size:16px;line-height:1.7}
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-qa p.stnv8a-qa__q{border-radius:8px 8px 0 0;background:var(--stnv2-soft,#f4f8fc);color:var(--stnv2-navy,#0b2545)}
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-qa p.stnv8a-qa__a{border-top:1px solid var(--stnv2-line,#dbe7f3)}
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-qa__mark{float:left;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:2px 8px 0 0;border-radius:9999px;background:var(--stnv2-navy,#0b2545);color:var(--stnv2-white,#fff);font:800 13px/1 var(--stnv2-font-num,sans-serif)}
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-qa__mark.stnv8a-qa__mark--a{background:var(--stnv2-white,#fff);color:var(--stnv2-blue-press,#085aa9);box-shadow:inset 0 0 0 1.5px currentColor}

/* E. 画面操作の経路: 札 › 札(カギ括弧と「から」は .stnv2-vh で画面から隠す。読み上げ・コピーには残る) */
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-key{margin:0 1px;padding:1px 6px;border:1px solid var(--stnv2-line,#dbe7f3);border-radius:4px;background:var(--stnv2-soft,#f4f8fc);color:var(--stnv2-navy,#0b2545);font-weight:700;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 15 文字以上の札は、行をまたぐ札(行末で枠が本文の外へ出る)にせず、1 つの箱のまま中で折り返す */
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-key.stnv8a-key--long{display:inline-block;max-width:100%;white-space:normal;vertical-align:top}
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-sep{margin:0 3px;color:var(--stnv2-muted-strong,#526579);font-weight:700}

/* 注意段落: 左に警告色の細い線 + 薄い地(文字はそのまま) */
body.single-post.stnv8a-article .wp-block-post-content > p.stnv8a-note{padding:4px 8px;border-left:3px solid var(--stnv2-amber,#b45309);background:var(--stnv2-warn-bg,#fff7ec)}

/* C. 表の数字: 数字と単位を 1 つの塊に(折り返さない・等幅) */
body.single-post.stnv8a-article .wp-block-post-content .stnv8a-table .stnv8a-num{white-space:nowrap;font-family:var(--stnv2-font-num,sans-serif);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums lining-nums}

/* C. 表のスマホ表示(既存の自動カード化と同じ 768px 以下): 1 列目の値がカードの見出しの札、残りは「ラベル 7em + 値」の 2 列 */
@media (max-width:768px){
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tr{margin:0 0 10px;padding:0;border:1px solid var(--stnv2-line,#dbe7f3);border-radius:8px;background:var(--stnv2-white,#fff);box-shadow:none;overflow:hidden}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > :first-child{margin:0;padding:7px 12px;border-bottom:1px solid var(--stnv2-line,#dbe7f3);background:var(--stnv2-soft,#f4f8fc);color:var(--stnv2-navy,#0b2545);font-size:16px;font-weight:700;line-height:1.5}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > td:first-child::before{content:none}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > td[data-label]:not(:first-child){display:grid;grid-template-columns:7em minmax(0,1fr);column-gap:10px;align-items:baseline;padding:5px 12px;font-size:15px;line-height:1.6}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > td:not([data-label]):not(:first-child){padding:5px 12px;font-size:15px;line-height:1.6}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > td:not(:first-child) + td{border-top:1px solid var(--stnv2-line,#dbe7f3)}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > td[data-label]:not(:first-child)::before{display:block;margin:0;color:var(--stnv2-muted-strong,#526579);font-size:13px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards .stnv8a-cell{display:block;min-width:0;overflow-wrap:anywhere}
  /* 長い値(PHP が 30 文字超に stnv8a-cell--long を付ける)はラベルの下に全幅で(細い列で行数が増えないように) */
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > td.stnv8a-cell--long[data-label]:not(:first-child){display:block}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > td.stnv8a-cell--long[data-label]:not(:first-child)::before{margin-bottom:2px}
  /* 2 列以下かつ 4 行以下の表は本物の表のまま(PHP が stn-service-table-wrap を付けて自動カード化から外している) */
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--keep table{width:100%;min-width:0}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--keep :is(th,td){padding:8px 10px;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
}
/* W12(1.0.395) A5: スマホの表カードで、セルの中身がリンク 1 つだけのとき(844 の「申し込み窓口」など)、押せる範囲を上下 13px ずつ広げて
   44px 以上にする。同じ量の負の margin で行の高さは変えない(表の見た目はそのまま)。899 などリファレンスの固定ページは本体のインライン CSS。
   1.0.396(Codex 反証 1): 広げた範囲が隣のセルのリンクと重ならないよう、カードの最後のセル(下はカードの間の余白)だけにした */
@media (max-width:768px){
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards td:last-child > .stnv8a-cell > a:only-child{display:inline-block;padding:13px 0;margin:-13px 0}
}
@media (max-width:359px){
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > td.stnv8a-cell--mid[data-label]:not(:first-child){display:block}
  body.single-post.stnv8a-article .wp-block-post-content .sn-table-scroll.stnv8a-table--cards tbody tr > td.stnv8a-cell--mid[data-label]:not(:first-child)::before{margin-bottom:2px}
}

/* アイキャッチ(1.0.343): テンプレートの post-featured-image(16:9・cover)。PC は幅 420px で中央、スマホ(768px 以下)は全幅。
   パンくずは PHP が画像の直前に移している(h1 → PR 表記 → パンくず → 画像 → 署名・結論の箱) */
body.single-post.stnv8a-article .sn-single > .wp-block-post-featured-image{max-width:420px;margin:0 auto}
body.single-post.stnv8a-article .sn-single > .wp-block-post-featured-image img{display:block;border-radius:8px}
body.single-post.stnv8a-article .sn-single > .stn-breadcrumbs[data-stnv8] + .wp-block-post-featured-image{margin-top:0}
@media (max-width:768px){
  body.single-post.stnv8a-article .sn-single > .wp-block-post-featured-image{max-width:none;width:100%}
}

/* W12(1.0.395) A1: 結論直後の「スマホの会社で選ぶ光回線の申し込み窓口」(記事 844。includes/v8-traffic.php stn_v8_article_offer_set_html())。
   各枠は素材の描画のまま(PR・注記・リンク先の一文)。枠どうしは細い線で分ける */
body.single-post.stnv8a-article .stnv8-offer-set .stnv8-offer-set__heading{margin:0 0 10px;font-size:16px;font-weight:700;line-height:1.5;text-align:center;color:var(--stnv2-navy,#0b2545)}
body.single-post.stnv8a-article .stnv8-offer-set .stnv8-offer-set__item + .stnv8-offer-set__item{margin-top:14px;padding-top:12px;border-top:1px solid var(--stnv2-line,#dbe7f3)}