/* ---- 共通: カテゴリチップ列の上マージン ---- */
.p-column-cats { padding: 40px 0 8px; }

/* ================= 一覧(archive) ================= */
.p-archive { padding: 40px 0 72px; }
.p-archive__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 34px;
  margin-top: 8px;
}
.p-archive__grid .c-column-card { width: 100%; }
.p-archive__grid .c-column-card__title { width: 100%; }
.p-archive__pager {
  text-align: right; margin-top: 40px;
  font-family: var(--font-body); font-weight: 500; font-size: 16px;
  line-height: 30px; letter-spacing: 1px; color: var(--color-ink);
}
.p-archive__pager a { color: var(--color-ink); padding: 0 6px; }
.p-archive__pager a.is-current { color: var(--color-main); font-weight: 700; }

/* ================= 詳細(single) ================= */
.p-article { padding: 32px 0 64px; }
.p-article__inner { max-width: 800px; margin-inline: auto; }
.p-article__divider { width: 100%; height: 1px; background: var(--color-sub); margin-bottom: 40px; }
.p-article__cat {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 100px; height: 28px; padding: 0 12px; border-radius: 14px;
  background: var(--color-gray245);
  font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--color-ink);
}
.p-article__h1 {
  font-family: var(--font-jp); font-weight: 700; font-size: 24px;
  line-height: 40px; letter-spacing: .5px; color: var(--color-ink); margin: 20px 0;
}
.p-article__lead {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
/* 見出し帯（h2に生成り背景） */
.p-article__h2 {
  width: 100%; min-height: 60px; display: flex; align-items: center;
  background: var(--color-bg-soft); padding: 12px 20px; margin: 48px 0 24px;
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  line-height: 30px; color: var(--color-ink);
}
.p-article__block { display: grid; grid-template-columns: 410px 1fr; gap: 28px; align-items: start; }
.p-article__text {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
.p-article__img {
  width: 100%; min-height: 271px; background: var(--color-gray180) center/cover no-repeat;
}
.p-article__body {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
.p-article__li { font-family: var(--font-jp); font-weight: 700; }
/* 本文中のリンク（お問い合わせ導線） */
.p-article__body a, .p-article__lead a, .p-article__text a {
  color: var(--color-main); text-decoration: underline; text-underline-offset: 3px;
}

/* ---- 支給コラム4本（2026-08-22）で足した部品 ---------------------------- */
/* 小見出し＝原稿の ■／数字見出し／太字行。h2の生成り帯より1段軽い扱い */
.p-article__h3 {
  font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 30px;
  color: var(--color-ink); margin: 28px 0 8px;
}
.p-article__label {
  position: relative;
  font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 30px;
  color: var(--color-ink); margin: 32px 0 10px;
  padding-left: 14px;
}
.p-article__label::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 30px;
  background: var(--color-sub); /* 見本実測 #9E9B7C */
}
.p-article__body + .p-article__h3 { margin-top: 24px; }
/* 原稿の ✓POINT 行 */
/* 0831修正・お役立ちコラム2「ポイントの背景色変更」
   見本実測: 帯 800x60・地 #50694B・文字 #FFFFFF 18px/700（左の緑バーは見本に無いので外す） */
.p-article__point {
  display: flex; align-items: center; min-height: 60px;
  background: var(--color-main);
  padding: 12px 20px; margin: 24px 0;
  font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 30px;
  color: var(--color-white);
}
/* 本文中の写真。--pending は「原稿が写真を前提にしているが実写真が未受領」の枠 */
.p-article__figure { margin: 24px 0; }
/* 原稿が「1枚目／2枚目」と書いている箇所は2枚並び。縦位置は中央で揃える。
   縦写真が来ても記事を占領しないよう高さに上限を置き、幅は自動（横写真は上限に当たらない） */
.p-article__figrow { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.p-article__figure--pair .p-article__figrow { grid-template-columns: 1fr 1fr; }
.p-article__figrow img {
  display: block; margin-inline: 0;
  max-width: 100%; max-height: 520px; width: auto; height: auto;
}
.p-article__ph {
  display: flex; align-items: center; justify-content: center;
  /* 実写真が入るまでの仮枠。16:9で全幅にすると空白が記事を支配するので、height を抑えている */
  width: 100%; height: 200px;
  background: var(--color-gray245); border: 1px dashed var(--color-gray180);
  font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--color-gray153);
}
.p-article__caption {
  font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 24px;
  color: var(--color-gray153); margin-top: 8px;
}
.p-steps__note { font-size: 14px; }

/* 工程ステップ×9 */
.p-steps { display: grid; gap: 0; }
.p-steps__item { display: grid; grid-template-columns: 1fr 260px; gap: 28px; padding: 24px 0; align-items: start; }
.p-steps__item--nothumb { grid-template-columns: 1fr; }
.p-steps__num {
  font-family: var(--font-jp); font-weight: 700; font-size: 18px;
  color: var(--color-ink); padding-bottom: 10px;
  border-bottom: 1px solid var(--divider-line); margin-bottom: 14px;
}
.p-steps__text {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
.p-steps__thumb { width: 260px; height: 195px; background: var(--color-gray180) center/cover no-repeat; }

/* 関連する記事 */
.p-related { padding: 8px 0 56px; }
.p-related__title {
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  color: var(--color-ink); margin-bottom: 24px;
}
.p-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.p-related__grid .c-column-card { width: 100%; }
.p-related__grid .c-column-card__title { width: 100%; }

@media (max-width: 900px) {
  .p-archive__grid { grid-template-columns: repeat(2, 1fr); }
  .p-related__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .p-archive__grid { grid-template-columns: 1fr; }
  .p-article__block { grid-template-columns: 1fr; gap: 14px; }
  .p-steps__item { grid-template-columns: 1fr; gap: 12px; }
  .p-steps__thumb { width: 100%; }
}

@media (max-width: 767px) {
  .c-category-tabs__label { display: none; }
  .p-article__h1 { font-size: 18px; line-height: 32px; }
  .p-article__lead,
  .p-article__text,
  .p-article__li { line-height: 26px; }
}


/* ---- 本文の段落（静的版 .p-article__body と同じ） -----------------------
   ⚠️ WordPress 7.1.1 は core/paragraph の出力に class="wp-block-paragraph" を付ける
      （wp eval で実出力を見て確認した）。つまり「クラスが無い段落」は存在しない。
      なので :not([class]) のような書き方ではなく、要素セレクタ p で拾っている。
   🔴 ここだけ :is() ではなく :where() を使う。理由は詳細度をゼロにするため。
      最初 :is(...) p と書いたら (0,1,1) になり、追記位置が後ろなので
      既存の .p-article__point (0,1,0) を上書きしてしまった
      （静的マークアップの ✓POINT から margin 24px・緑地・白文字・18px が消え、
        ハーネスで上下マージンが 24px -> 0 になるのを実測して気づいた）。
      :where() なら (0,0,1) なので、クラスの付いた段落（静的版の .p-article__body /
      .p-article__lead / .p-article__point / .p-article__text、ブロック版の
      .is-style-cb-* ）がすべてこれより強く、素の段落にだけ効く。 */
/* 🔴 2026-09-18（Task 10 で実測して追加）— 既存ケイカル記事の工程ステップだけ除外する
   /column/detail/ の工程ステップ9段は R-18 のとおり core/html ブロックに生HTMLで入れてある。
   装飾の正は下の方にある既存セレクタ .p-steps__*（Task 9 以前からあるもの）で、
   そこへ「素の段落」のこのルールが重なると、静的版では継承していた line-height が
   27px -> 30px に変わる（.p-steps__num は line-height を自分では宣言しておらず、
   継承値はこのルール (0,0,1) に負ける）。実測: 1段あたり +3px、記事全体で
   PC +6px（4269 -> 4275）/ SP +27px。静的版と画素が一致しなくなる。
   除外は :where() の中に入れる＝詳細度は (0,0,1) のまま（上のブロックの理由を壊さない）。
   .p-steps__text は自分で line-height:30px を宣言していて実害は無いが、
   「工程ステップの装飾の正は .p-steps__* だけ」と形をそろえるため一緒に外す。 */
:where(.p-article__inner, .editor-styles-wrapper) p:where(:not(.p-steps__num):not(.p-steps__text)) {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink); margin: 0;
}

/* ---- リード文（静的版 .p-article__lead） ---------------------------------- */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-lead {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink); margin: 0;
}

/* ---- 大見出し（生成り帯・静的版 .p-article__h2） -------------------------- */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-h2 {
  width: 100%; min-height: 60px; display: flex; align-items: center;
  background: var(--color-bg-soft); padding: 12px 20px; margin: 48px 0 24px;
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  line-height: 30px; color: var(--color-ink);
}

/* ---- 小見出し（静的版 .p-article__h3） ------------------------------------ */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-h3 {
  font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 30px;
  color: var(--color-ink); margin: 28px 0 8px;
}
/* 静的版の .p-article__body + .p-article__h3 { margin-top: 24px } の写し。
   静的版の .p-article__body は「本文の段落」と「箇条書きを入れた段落」の両方なので、
   ブロック版では「クラスの無い段落」と「.is-style-cb-list」の2つが対応する。
   ✓POINT とリードは静的版で .p-article__body ではないので、ここから除外する。 */
:is(.p-article__inner, .editor-styles-wrapper)
  :is(p:not(.is-style-cb-point):not(.is-style-cb-lead), .is-style-cb-list) + .is-style-cb-h3 {
  margin-top: 24px;
}

/* ---- まとめラベル（左に線・静的版 .p-article__label） --------------------- */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-label {
  position: relative;
  font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 30px;
  color: var(--color-ink); margin: 32px 0 10px; padding-left: 14px;
}
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-label::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 30px; background: var(--color-sub);
}

/* ---- 「・」箇条書き（静的版 strong.p-article__li を br で並べた形） --------
   静的版は p.p-article__body の中に strong.p-article__li（中身は「・項目」）を
   br で並べる。ブロック版は core/list の ul > li。
   「・」はリストマーカーではなく li::before で出す（静的版と同じく行頭の文字として扱い、
   折り返した2行目が左端から始まる＝静的版と同じ挙動にするため）。 */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-list {
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-jp); font-weight: 700; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-list > li { margin: 0; padding: 0; }
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-list > li::before { content: "・"; }
/* 🔴 空のインラインボックスを1つ置く理由（実測にもとづく・2026-09-18）
   静的版の1行は「p の strut（--font-body＝Noto Sans JP）」と
   「strong のインラインボックス（--font-jp＝Yu Gothic）」の合成でできていて、
   line-height を 30px にしていても行の送りは 31px になる（実測: 3項目の箇条書きが
   静的 93px ＝ 31px×3 / ブロック 90px ＝ 30px×3）。
   ブロック版の li はフォントが1つなので 30px ちょうどになり、項目数ぶんズレる。
   そこで、見た目には何も足さない「空のインラインボックス」を --font-body で1つ置き、
   行ボックスを静的版と同じ2フォントの合成にする。
   （CSS2.1 9.4.2 ＝ 中身が空のインラインボックスも行ボックスの高さ計算に参加する）
   🔴 line-height を 31px と書く直し方は採らない。31px は「この2フォントの組み合わせで
      たまたま出る値」なので、フォントが変われば静的版側も変わる。
      形（2フォントの合成）を同じにするほうが、環境が変わっても一致する。
   📌 line-height の割り当ても静的版と同じにする:
      静的版 = 親 p.p-article__body が 30px（SPでも30px）／ strong.p-article__li が
               PC 30px・SP 26px。
      ブロック版 = li（＝文字が入るほう・font-jp）を PC 30px・SP 26px、
                   空のボックス（＝親の strut に相当・font-body）を常に 30px。
      これで行ボックスの中身が静的版と同じ2つになる。 */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-list > li::after {
  content: ""; font-family: var(--font-body); font-weight: 500; line-height: 30px;
}

/* ---- ✓POINT（静的版 .p-article__point） -----------------------------------
   🔴 静的版は「✓」が本文に文字として入っている。
      ブロック版は書く人が毎回 ✓ を打たなくて済むよう ::before で出す。
      ✓ が二重に出ないこと＝本文側に ✓ を書かないことが前提。 */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-point {
  /* 🔴 静的版は display:flex だが、ブロック版は flex にしない（2026-09-18 実測で判明）。
     flex にすると ::before の「✓」が独立したフレックスアイテムになり、
     本文が2行に折り返したときに ✓ が1行目の頭ではなく「2行の縦中央」へ動く
     （SP 390px で ✓POINT1 が2行になり、静的版と 27,500画素の差になった）。
     flex の役目は「1行のときに 60px の帯の中で縦中央に置く」ことだけなので、
     block ＋ align-content:center に置き換える。これなら ::before は行内に残る。
     箱の寸法は静的版と同じ計算になる:
       高さ = max(60, 24 + 行の高さ)   1行 60px / 2行 84px
       文字の上端 = 12 + max(0, (60-24-行の高さ)/2)   1行 15px / 2行 12px
     ⚠️ align-content を block コンテナに効かせられない古いブラウザでは、
        1行のときに文字が 15px ではなく 12px の位置に出る（3pxだけ上）。
        帯の高さ・幅・色は変わらないので、崩れではなく微差に留まる。 */
  display: block; align-content: center; min-height: 60px;
  background: var(--color-main); padding: 12px 20px; margin: 24px 0;
  font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 30px;
  color: var(--color-white);
}
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-point::before { content: "✓"; }

/* ---- 本文中のリンク（静的版 .p-article__body a / .p-article__lead a / .p-article__text a）----
   静的版は ✓POINT の中のリンクを対象にしていないので、こちらも ✓POINT を除く。 */
:is(.p-article__inner, .editor-styles-wrapper)
  :is(p:not(.is-style-cb-point), .is-style-cb-list) a {
  color: var(--color-main); text-decoration: underline; text-underline-offset: 3px;
}

/* ---- 写真＋キャプション 1枚（静的版 .p-article__figure） -------------------
   静的版は figure > span.p-article__figrow > img ＋ figcaption。
   ブロック版（core/image）は figure > img ＋ figcaption で、間の span が無い。
   図版の寸法規則（max-height 520px・幅自動・左揃え）は figrow ではなく img に付いているので、
   そのまま img に移せば同じになる。
   コア側: .wp-block-image img{box-sizing:border-box;height:auto;max-width:100%;vertical-align:bottom} (0,2,0)
           .wp-block-image :where(figcaption){margin-bottom:1em;margin-top:.5em} (0,1,0)
           :where(figure){margin:0 0 1em} (0,0,0)  ← Task 7 申し送りの figure 余白 */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-figure { margin: 24px 0; }
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-figure img {
  display: block; margin-inline: 0;
  max-width: 100%; max-height: 520px; width: auto; height: auto;
}
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-figure figcaption {
  font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 24px;
  color: var(--color-gray153); margin: 8px 0 0; text-align: left;
}

/* ---- 写真2枚並び（静的版 .p-article__figure--pair） ------------------------
   静的版は figure > span.p-article__figrow(grid 1fr 1fr / gap16 / align-items:center) > img×2
   ＋ figcaption(margin-top 8px)。
   ブロック版（core/gallery）は figure.wp-block-gallery > figure.wp-block-image×2 ＋ figcaption。

   🔴 このサイトは global-styles を dequeue しているので、コアのレイアウトCSS
      （.is-layout-flex{display:flex} 等）が読み込まれない。つまりギャラリーは
      こちらで display:flex を書かないと縦に積まれる。ここで全部指定する。

   コア側の詳細度（wp-includes/blocks/gallery/style.min.css を読んで数えた）:
     figure.wp-block-gallery.has-nested-images{align-items:normal}                       (0,2,1)
     .wp-block-gallery.has-nested-images figcaption{flex-basis:100%;…;text-align:center} (0,2,1)
     .wp-block-gallery.has-nested-images figure.wp-block-image{display:flex;flex-grow:1} (0,2,2)
     .wp-block-gallery.has-nested-images figure.wp-block-image img{…}                    (0,3,2)
     .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)    (1,3,1)
     .wp-block-gallery.has-nested-images:not(.is-cropped)
       figure.wp-block-image:not(#individual-image){margin-bottom:auto;margin-top:0}     (1,4,1) ← 一番強い
   こちらはそれぞれ1段上を取る。 */
:is(.p-article__inner, .editor-styles-wrapper) figure.is-style-cb-figpair.has-nested-images {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 16px; row-gap: 8px; margin: 24px 0;
}
:is(.p-article__inner, .editor-styles-wrapper)
  figure.wp-block-gallery.is-style-cb-figpair.has-nested-images
  figure.wp-block-image:not(#individual-image) {
  margin: 0; width: calc(50% - 8px); flex-grow: 0; display: block;
}
:is(.p-article__inner, .editor-styles-wrapper)
  .is-style-cb-figpair.has-nested-images figure.wp-block-image img {
  display: block; margin-inline: 0;
  max-width: 100%; max-height: 520px; width: auto; height: auto;
}
:is(.p-article__inner, .editor-styles-wrapper)
  figure.is-style-cb-figpair.has-nested-images > figcaption {
  flex-basis: 100%; flex-grow: 0; margin: 0; padding: 0; position: static;
  background: none; color: var(--color-gray153); text-shadow: none;
  font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 24px;
  text-align: left;
}

/* ---- h2直後の「本文＋写真」2カラム（静的版 .p-article__block） -------------
   静的版は div.p-article__block > p.p-article__text ＋ span.p-article__img（背景画像 cover）。
   ブロック版はパターン cb/article-lead ＝ group(.is-style-cb-block) >
     paragraph(.is-style-cb-text)  … 左の本文
     image(.is-style-cb-blockimg)  … 右の写真

   🔴 左カラムを「段落1つ」にした理由（実測にもとづく判断・2026-09-18）
      最初は左カラムを group にして、本文の段落と core/list を並べる形にした。
      ところが SP（390px）で静的版より 5px 低くなった。原因を測ったところ、
      静的版の箇条書きは「font-body の p の中に font-jp の strong」という
      フォントの違う入れ子で、行の送りが 26px ではなく 27px になっていた
      （strong の top を実測: 245 -> 299 -> 326 -> 353 ＝ 27px刻み。
        ブロック版の li は 241 -> 293 -> 319 -> 345 ＝ 26px刻み）。
      行ボックスの高さは「行の strut（親の font）」と「中身の inline box（strong の font）」の
      和で決まるので、DOM の形が違うと同じ line-height でも高さが変わる。
      ＝ 箇条書きを ul に置き換えた時点で、この2カラムだけは一致しない。
      なので、ここは静的版と同じ形（1つの段落＋インラインの strong）にして、
      CSS も p / strong の2段で当てる。
      ⚠️ .p-article__body の中の箇条書き（単独の「・」リスト）は line-height 30px で、
         そちらは ul に置き換えても一致する（PC/SP とも実測で差0）。違うのはこの2カラムだけ。 */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-block {
  display: grid; grid-template-columns: 410px 1fr; column-gap: 28px; row-gap: 0;
  align-items: start;
}
/* 左カラムは何個あっても1列目に積む。写真だけ2列目の1行目に固定する。 */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-block > * { grid-column: 1; margin: 0; }
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-block > .is-style-cb-blockimg {
  grid-column: 2; grid-row: 1;
}
/* 静的版が本文と箇条書きを br br（＝空行1行）でつないでいるのと同じ間隔 */
:is(.p-article__inner, .editor-styles-wrapper)
  .is-style-cb-block > * + *:not(.is-style-cb-blockimg) { margin-top: 30px; }

/* 左の本文＝静的版 p.p-article__text、その中の強調＝静的版 strong.p-article__li */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-text {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink); margin: 0;
}
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-text strong {
  font-family: var(--font-jp); font-weight: 700;
}

/* 右の写真＝静的版 span.p-article__img（width:100% / min-height:271px / background center/cover）。
   🔴 ここは core/image（img 要素）ではなく core/group の「背景画像」を使う。
      理由は実測。img に object-fit:cover を当てても寸法は完全に一致するが、
      画素が一致しない（縮小の補間が背景画像と img で違う）。
      実測 2026-09-18・fireproofing-renovation-casestudy PC・写真領域 362x271 = 98,102画素:
        img + object-fit:cover … 可視差分(>4) 13,408画素・最大チャンネル差 73
        （1画素ずらして測り直しても悪化するだけ＝ズレではなく補間の差）
        group + background-image … 同じ描画経路なので差0（下の検証で確認）
      静的版が背景画像で描いている以上、ブロック側も背景画像で描くのが唯一一致する形。
   📌 WordPress が inline style で出すのは background-image と background-size だけ
      （wp eval で実出力を確認）。色・位置・繰り返しはここで指定する。 */
:is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-blockimg {
  margin: 0; width: 100%; min-height: 271px;
  background-color: var(--color-gray180);
  background-position: center; background-repeat: no-repeat; background-size: cover;
}

/* ---- SP（静的版の @media (max-width:767px) に対応する分だけ） -------------- */
@media (max-width: 767px) {
  /* 静的版: .p-article__lead / .p-article__text / .p-article__li は line-height 26px。
     .p-article__body は 30px のまま（静的CSSの該当ブロックを1語ずつ突き合わせて確認した）。 */
  :is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-lead { line-height: 26px; }
  :is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-text,
  :is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-text strong { line-height: 26px; }
  /* 静的版 .p-article__li の SP 行高。空のボックス（li::after）は 30px のまま＝親の strut 相当 */
  :is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-list { line-height: 26px; }
  /* 静的版 .p-article__block は SP で1カラム・gap 14px */
  :is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-block { grid-template-columns: 1fr; }
  :is(.p-article__inner, .editor-styles-wrapper) .is-style-cb-block > .is-style-cb-blockimg {
    grid-column: 1; grid-row: auto; margin-top: 14px;
  }
  :is(.p-article__inner, .editor-styles-wrapper)
    .is-style-cb-block > * + *:not(.is-style-cb-blockimg) { margin-top: 26px; }
}