/* =========================================================
   brandx 記事用スタイル（投稿タイプ post の個別ページ専用・2026-09-02）

   元ファイル: docs/articles/brandx-article.css（BAN作成のデザイン案から起こしたもの）
   宣言の中身は元ファイルのまま。セレクタだけ `body.single-post #article` を
   前置してある。

   【なぜ前置するか】
   元ファイルは h1 / h2 / p / figure のような「素の要素名」で書かれている。
   このまま読み込むと、同じページのヘッダー・フッター・関連記事など
   記事本文の外にある同じ要素まで全部この見た目になってしまう。
   記事の中（GENSENの単一記事テンプレート single.php が出す #article の中）だけに
   効くように閉じ込める。

   【詳細度】
   GENSEN本体は .post_content p / .post_content td など（クラス1＋要素1）で
   本文の既定を決めている。`body.single-post #article` を前に付けると
   ID1つ＋クラス1つ＋要素1つになり、確実にこちらが勝つ。
   h1 だけは本体が #article_header #post_title（ID2つ）で余白を決めているため、
   #post_title を併記してID2つに揃えてある。

   【幅】
   GENSENのこのサイトの本文幅は 1080px（子テーマ style.css の #left_col）で、
   記事の1行としては長すぎる。記事だけ 760px に収める。
   ========================================================= */

/* ---------------------------------------------------------
   記事本文の幅
   --------------------------------------------------------- */
body.single-post #article {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------
   GENSEN本体（css/design-plus.css）の本文既定を、この様式の前提に戻す

   本体は body に line-height:1 を置き、本文だけ .post_content p{2.4} /
   td,th{2.2} で行間を作っている。元のデザイン案にはこの前提が無いため、
   打ち消したうえで記事用の行間を1か所で決める。
   （枠線も本体は td,th に 1px solid #bbb を引くので、ここで消してから
   下の .bx-table 側で必要な線だけ引き直す）
   --------------------------------------------------------- */
body.single-post #article { line-height: 1.8; }
body.single-post #article .post_content p { line-height: 1.8; }
body.single-post #article .post_content td,
body.single-post #article .post_content th { border: 0; line-height: 1.6; }
body.single-post #article .post_content table { margin: 0; }

/* 本体はクラシックエディタの表を <div class="s_table"> で包み、狭い画面では
   white-space:nowrap にして横スクロールさせる（css/design-plus.css・767px以下）。
   記事の表は狭い画面で「実寸」列を隠して画面内に収める作りなので、折り返しを戻す。
   包みの overflow:auto はそのまま残す（万一はみ出したときの逃げ道になるため）。 */
body.single-post #article .post_content .s_table { white-space: normal; }

/* 題名まわりの囲みを外す（2026-09-02）
   本体は #article_header を薄いグレーの枠（padding:30px 39px / border:1px solid #ddd）で
   囲む。この中に入るとH1が本文より左右39px内側に寄り、デザイン案でそろえている
   「H1の金色の縦線と本文の左端が同じ位置」が崩れる。囲みだけ外し、
   カテゴリのラベルと日付はそのまま残す。 */
body.single-post #article #article_header {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

body.single-post #article .post_content { margin-top: 0; }

/* 中身が空なのに場所だけ取っている本体の枠を消す（2026-09-02・本番で実測）

   GENSENは記事の中に次の4つの枠を必ず出す。このサイトはどれも使っていないため、
   中身が空のまま余白（と灰色の帯）だけが残っていた。実測した無駄な空き:
     #single_share_top        高さ0・上50px 下40px … 題名と書き出しの間が87pxも空く原因
     #single_share_bottom     高さ0・上40px 下30px
     #post_meta_bottom        高さ0・上下50px … 高さ50pxの灰色の帯として見えていた
     #previous_next_post_image 高さ0・上50px
   いずれも「中身が入ったときは今までどおり出る」書き方にしてある。
   共有ボタンは中の一覧に li が入ったとき、前後の記事は中身が入ったときに出る。 */
body.single-post #article .single_share:not(:has(li)),
body.single-post #article #post_meta_bottom:not(:has(li)),
body.single-post #article #previous_next_post_image:not(:has(*)) { display: none; }

/* ---------------------------------------------------------
   ここから下は docs/articles/brandx-article.css と同じ宣言
   --------------------------------------------------------- */

body.single-post #article h1,
body.single-post #article #post_title{font-size:26px;line-height:1.5;border-left:4px solid #A87F2B;padding-left:14px;margin:0 0 8px}
body.single-post #article .lead{color:#8D8271;font-size:15px;margin:0 0 28px}
body.single-post #article h2{font-size:20px;margin:44px 0 12px;padding-bottom:8px;border-bottom:1px solid #E2D9C6;letter-spacing:.5px}
body.single-post #article h3{font-size:16px;margin:26px 0 8px;color:#8A6820}
body.single-post #article p{margin:0 0 14px;font-size:15px}
body.single-post #article .note{font-size:13px;color:#8D8271;margin-top:6px}

/* 型番表
   ---------------------------------------------------------
   基本の様式（枠・角丸・ヘッダー色・折り返し）は bx-table が無くても効くようにする。
   ブロックエディタの表ブロックは <table> や セルの class を保持しないため、
   うっかりブロックに変換されてもレイアウトが崩れないようにするための保険
   （2026-09-03・記事01で実際に class が全部落ちた）。
   束ね（group-first）・サイズ列（size）・実寸列（dim）はクラスが要る。
   本文の表だけを対象にしたいので、ランキング等の埋め込みに入り込まないよう
   .post_content の直下（GENSENの .s_table 包み、表ブロックの figure 包みを含む）に限る。
   --------------------------------------------------------- */
body.single-post #article .bx-table,
body.single-post #article .post_content > table,
body.single-post #article .post_content > .s_table > table,
body.single-post #article .post_content > figure.wp-block-table > table,
body.single-post #article .post_content > .s_table > figure.wp-block-table > table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;margin:12px 0 6px;border:1px solid #E2D9C6;border-radius:12px;overflow:hidden;background:#fff}
body.single-post #article .bx-table th,
body.single-post #article .post_content > table th,
body.single-post #article .post_content > .s_table > table th,
body.single-post #article .post_content > figure.wp-block-table > table th,
body.single-post #article .post_content > .s_table > figure.wp-block-table > table th{background:#EFE9DD;color:#8D8271;font-weight:600;font-size:12px;letter-spacing:1px;text-align:left;padding:10px 12px;border-bottom:1px solid #E2D9C6}
body.single-post #article .bx-table td,
body.single-post #article .post_content > table td,
body.single-post #article .post_content > .s_table > table td,
body.single-post #article .post_content > figure.wp-block-table > table td,
body.single-post #article .post_content > .s_table > figure.wp-block-table > table td{padding:10px 12px;border-bottom:1px solid #F1EBDF;vertical-align:middle}
body.single-post #article .bx-table tr:last-child td,
body.single-post #article .post_content > table tr:last-child td,
body.single-post #article .post_content > .s_table > table tr:last-child td,
body.single-post #article .post_content > figure.wp-block-table > table tr:last-child td,
body.single-post #article .post_content > .s_table > figure.wp-block-table > table tr:last-child td{border-bottom:0}
/* 表ブロックは幅を決め打ちにするので、狭い画面ではみ出さないよう戻す */
body.single-post #article .post_content figure.wp-block-table{margin:0;overflow-x:auto}
body.single-post #article .post_content table.has-fixed-layout{table-layout:auto}
/* 左端が見出し列の表（サイズ・種類・ライン）。
   表ブロックはセルの class を保持しないので、表そのものに付けたクラスと
   構造セレクタ（td:first-child）だけで組み立てる（2026-09-03） */
body.single-post #article .bx-lead td:first-child{font-weight:700;font-size:16px;color:#26332F;width:56px}
body.single-post #article .bx-lead td:first-child small{display:block;font-size:11px;font-weight:400;color:#8D8271;letter-spacing:.5px}
/* 左端が長い名前の表は小さめにする（旧 style="font-size:13px" の置き換え） */
body.single-post #article .bx-lead-sm td:first-child{font-size:13px;width:auto}
/* サイズ別の束ね。続きの行は左端のセルを空にしてあるので、
   「左端が空でない行＝グループの先頭」として区切り線と背景を出す。
   （旧 tr.group-first + td.size.cont の置き換え） */
body.single-post #article .bx-group tbody tr:has(> td:first-child:not(:empty)) > td{border-top:2px solid #A87F2B}
body.single-post #article .bx-group tbody tr:has(> td:first-child:not(:empty)) > td:first-child{background:#EFE9DD}
/* 実寸の列（灰色・数字の幅をそろえる・折り返さない）。何列目かは表のクラスで指定する */
body.single-post #article .bx-dim2 td:nth-child(2),
body.single-post #article .bx-dim3 td:nth-child(3),
body.single-post #article .bx-dim4 td:nth-child(4),
body.single-post #article .bx-dim5 td:nth-child(5){font-variant-numeric:tabular-nums;color:#8D8271;white-space:nowrap}
/* 件数の列（折り返さない・数字の幅をそろえる） */
body.single-post #article .bx-num4 td:nth-child(4),
body.single-post #article .bx-num5 td:nth-child(5){font-variant-numeric:tabular-nums;white-space:nowrap}
/* 型番がたくさん並ぶ列は行間を空ける（旧 style="line-height:2" の置き換え） */
body.single-post #article .bx-lh3 td:nth-child(3){line-height:2}
/* 型番は途中で折り返さない。ただし折り返しを止めるのは「1つの型番」の単位まで。
   記事06の限定の表のように「M44020／M44021／M44022／M43569」と複数を並べたセルは、
   セルごと折り返し禁止にすると表が画面からはみ出す（実測で幅373px・375pxの画面に対して）。
   ショートコードが出すリンク・文字は a / span なので、そこだけ折り返し禁止にすれば、
   直書きの複数併記セルは「／」の後ろで折り返せる。型番そのものは英数字1語なので割れない。
   （2026-09-02・記事06の実測で分けた）
   セルに class を付けなくても効くよう、ショートコードが出す a / span を直接指定する
   （2026-09-03・表ブロックはセルの class を保持しないため） */
body.single-post #article a.bx-model,
body.single-post #article span.bx-model{white-space:nowrap}
body.single-post #article a.bx-model{color:#8A6820;font-weight:700;text-decoration:none;border-bottom:1.5px solid #A87F2B}
body.single-post #article a.bx-model:after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid #A87F2B;border-top:1.5px solid #A87F2B;transform:rotate(45deg);margin-left:6px;vertical-align:middle}
body.single-post #article span.bx-model{color:#26332F;font-weight:700}
/* [bx 型番 gen=old] は「型番＋世代の印」を1組で出す。組の途中で行が割れないようにする */
body.single-post #article .bx-pair{white-space:nowrap;display:inline-block}
body.single-post #article .gen{display:inline-block;font-size:11px;letter-spacing:1px;padding:2px 8px;border-radius:999px;white-space:nowrap}
body.single-post #article .gen-old{background:#F1EBDF;color:#8D8271;border:1px solid #E2D9C6}
body.single-post #article .gen-new{background:#8A6820;color:#FBF8F1}
/* 現行は新型と別の色にする。枠線は付けないので、ピルの大きさは新型と同じまま
   (色だけが変わり、行の折り返しに影響しない・2026-09-03) */
body.single-post #article .gen-cur{background:#26332F;color:#FBF8F1}
body.single-post #article .gen-dis{background:#fff;color:#8D8271;border:1px dashed #8D8271}
/* 型番セルの中の印は上の .bx-model span の色指定のほうが強く、印の文字色が
   打ち消されていた(凡例だけ正しい色で、表の中は濃い色になっていた)。
   現行を墨色にすると文字が背景と同じ色になって消えるため、ここで指定し直す。
   色だけの指定なので、ピルの大きさ・位置・行数は変わらない(2026-09-03) */
body.single-post #article .bx-model span.gen-old,
body.single-post #article .bx-model span.gen-dis{color:#8D8271}
body.single-post #article .bx-model span.gen-new,
body.single-post #article .bx-model span.gen-cur{color:#FBF8F1}
body.single-post #article .dim{font-variant-numeric:tabular-nums;color:#8D8271;white-space:nowrap}
body.single-post #article .legend{font-size:12px;color:#8D8271;margin:8px 0 0}
body.single-post #article .legend .gen{margin-right:6px}

/* 図解 */
body.single-post #article figure{margin:18px 0 24px;padding:18px 16px 12px;background:#fff;border:1px solid #E2D9C6;border-radius:12px}
body.single-post #article figure svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
body.single-post #article figcaption{font-size:13px;color:#8D8271;margin-top:8px;text-align:center}

/* 確認ポイントの番号
   ---------------------------------------------------------
   ブロック形式では、見出しブロックに bx-step のクラスを付けるだけにして、
   丸い番号はCSSの数え上げ（counter）で出す。本文に番号を書かないので、
   手順を入れ替えても番号は自動で振り直される（2026-09-03）。
   古い形（div.step + div.n）の指定も、しばらく残しておく。
   --------------------------------------------------------- */
body.single-post #article .post_content{counter-reset:bxstep}
body.single-post #article h3.bx-step{counter-increment:bxstep;position:relative;padding-left:46px;min-height:32px;display:flex;align-items:center;margin:22px 0 6px}
body.single-post #article h3.bx-step::before{content:counter(bxstep);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:#8A6820;color:#FBF8F1;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
body.single-post #article h3.bx-step + p{padding-left:46px}
/* 古い形（クラシック時代の手順ブロック） */
body.single-post #article .step{display:flex;gap:14px;align-items:flex-start;margin:18px 0}
body.single-post #article .step .n{flex:0 0 32px;height:32px;border-radius:50%;background:#8A6820;color:#FBF8F1;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
body.single-post #article .step h3{margin:4px 0 6px}

/* スマホ */
@media (max-width:600px){
  body.single-post #article h1,
  body.single-post #article #post_title{font-size:21px}
  /* 狭い画面の詰めも、bx-table が無い表に効かせる（2026-09-03の保険） */
  body.single-post #article .bx-table,
  body.single-post #article .post_content > table,
  body.single-post #article .post_content > .s_table > table,
  body.single-post #article .post_content > figure.wp-block-table > table,
  body.single-post #article .post_content > .s_table > figure.wp-block-table > table{font-size:13px}
  body.single-post #article .bx-table th,
  body.single-post #article .post_content > table th,
  body.single-post #article .post_content > .s_table > table th,
  body.single-post #article .post_content > figure.wp-block-table > table th,
  body.single-post #article .post_content > .s_table > figure.wp-block-table > table th{padding:8px 8px}
  body.single-post #article .bx-table td,
  body.single-post #article .post_content > table td,
  body.single-post #article .post_content > .s_table > table td,
  body.single-post #article .post_content > figure.wp-block-table > table td,
  body.single-post #article .post_content > .s_table > figure.wp-block-table > table td{padding:9px 8px}
  /* 実寸の列を隠すのは「見出しに th-dim が付いている表」だけにする（2026-09-02）。
     記事01の3つ目の表「サイズごとの実寸と用途」は、中身の td に dim は付いているが
     見出しの th には th-dim が付いていない。元の指定のままだと、狭い画面で
     中身だけ消えて見出しが残り、見出しと中身の列がずれる（実測で確認）。
     しかもこの表は実寸そのものが主役なので、消してはいけない列でもある。 */
  body.single-post #article .bx-table:has(.th-dim) .th-dim,
  body.single-post #article .bx-table:has(.th-dim) .dim{display:none}
  /* ブロック形式ではセルに class を付けられないので、
     「何列目が実寸か」を表のクラスで示し、列そのものは nth-child で選ぶ。
     隠すのは bx-hidedim が付いた表だけ。実寸が主役の表（記事01の3つ目など）は
     bx-dim2 だけを付けて隠さない（2026-09-03） */
  body.single-post #article .bx-hidedim.bx-dim3 th:nth-child(3),
  body.single-post #article .bx-hidedim.bx-dim3 td:nth-child(3),
  body.single-post #article .bx-hidedim.bx-dim4 th:nth-child(4),
  body.single-post #article .bx-hidedim.bx-dim4 td:nth-child(4),
  body.single-post #article .bx-hidedim.bx-dim5 th:nth-child(5),
  body.single-post #article .bx-hidedim.bx-dim5 td:nth-child(5){display:none}
  /* 左端の列は「25」「45」のような数字だけでなく、「プチノエ」「ネオノエMM」のような
     種類名が入る記事もある。幅を44pxに固定すると「プチノ／エ」のように途中で折り返して
     崩れるため、中身に必要なぶんだけ取る形にする（2026-09-02・記事06の実測で判明）。
     数字だけの記事では、これまでと同じくらいの幅に収まる。 */
  body.single-post #article .bx-table .size{width:auto;min-width:4em;font-size:15px}
  body.single-post #article .bx-lead td:first-child{width:auto;min-width:4em;font-size:15px}
  body.single-post #article .bx-lead-sm td:first-child{font-size:13px}
  /* 左端の列は、size のクラスが付いていない表でも最低幅を確保する（2026-09-03）。
     記事10の「世代判定」の表は左端の見出しが「製品」でクラスが無く、
     48pxまで潰れて「ジッ／ピー／ウォ／レッ／ト」と5行に割れていた（実測）。
     size 付きの列にも同じ4emがかかるが、値が同じなので幅は変わらない。 */
  body.single-post #article .bx-table thead th:first-child,
  body.single-post #article .bx-table tbody td:first-child,
  body.single-post #article .post_content > table thead th:first-child,
  body.single-post #article .post_content > table tbody td:first-child,
  body.single-post #article .post_content > .s_table > table thead th:first-child,
  body.single-post #article .post_content > .s_table > table tbody td:first-child,
  body.single-post #article .post_content > figure.wp-block-table > table thead th:first-child,
  body.single-post #article .post_content > figure.wp-block-table > table tbody td:first-child{min-width:4em}
}

/* ===========================================================
   記事の中に貼ったランキングの商品カード（2026-09-03）
   -----------------------------------------------------------
   記事本文用の指定がカードにも掛かり、縦に間延びしていた。実測での内訳:
     ・#article h3 { font-size:16px; margin:26px 0 8px } … 商品名が16pxになり上に26px空く
     ・#article { line-height:1.8 } の継承 … 属性・価格の行が26〜29pxに伸びる
   どちらも「#article を含む指定」なので、クラスだけの指定（.brandx-item-card …）では
   打ち消せない。ここで同じ強さにして、検索結果の値へ戻す。
   値は本番の商品一覧（/item/）から実測して写したもの。
   カードの中だけが対象で、記事本文の見出し・行間は変えていない。
   =========================================================== */
body.single-post #article .brandx-item-card{line-height:1.5}
body.single-post #article .brandx-item-card > a{display:block;padding:0 0 12px;text-decoration:none}
body.single-post #article .brandx-item-card .brandx-item-thumb{line-height:14px}
body.single-post #article .brandx-item-card .brandx-item-title{
	font-size:13px;line-height:19.5px;font-weight:700;margin:0;padding:10px 12px 4px}
body.single-post #article .brandx-item-card .brandx-item-attrs{
	font-size:11px;line-height:11px;margin:0;padding:0 12px 4px}
body.single-post #article .brandx-item-card .brandx-item-price{
	font-size:12px;line-height:12px;margin:0;padding:0 12px}
body.single-post #article .brandx-item-card .brandx-item-price strong{font-size:14px;line-height:14px}
body.single-post #article .brandx-item-card .brandx-change-card{
	font-size:11px;line-height:15.4px;margin:0;padding:4px 12px 0}
/* ランキングの見出しも、記事のh2の飾り（下線・上の余白）を受けないようにする */
body.single-post #article .brandx-ranking{margin:24px 0}
body.single-post #article .brandx-ranking .brandx-ranking-heading{
	margin:0 0 12px;padding:0;border:0}