/*
 * 納品CSSに足りていないルールを補う。
 *
 * 納品ファイル（basic_2026.css / sub_2026.css ほか）は再納品のたびに丸ごと差し替えたいので
 * 中身を書き換えず、このファイルを最後に読み込んで上書きする。制作会社から直った版が届いたら
 * （docs/cms/07-open-items.md OQ-083・OQ-097）、このファイルと partials/head.blade.php の
 * 読み込み行を消せば納品どおりに戻る。JS 側の cms-overrides.js と同じ方針。
 * 配信URLはリリースごとに分離する。開いたままの旧画面が元の版を参照できるよう、
 * 過去の配布物は保持する（Issue #57）。
 * 公開ページでは同一オリジンの /build/releases/ 経路から読み込む。
 *
 * ⚠ ここに書くのは「納品CSSの不足を補う」ものだけ。デザインを変える指定は置かない。
 */

/* --------------------------------------------------------------------------
 * 1. 画像を添付しない行は、説明が画像の位置まで広がる
 *
 * 要件定義資料 p10 の明示要件。納品CSSは .cont_r を width: calc(50% - 25px) で
 * 固定しており、画像が無い行でも本文が半分の幅に留まって右半分が空く（OQ-013）。
 *
 * :has() ではなくサーバー側で .full を付けている。判定はレンダリング時に確定して
 * いるので、擬似クラスの対応状況に依存させない。
 * -------------------------------------------------------------------------- */
#case .case_post .box .cont_r.full { width: 100%; }

/* --------------------------------------------------------------------------
 * 2. Q&A の「Q.」マークが切れないようにする
 *
 * マークは dt の背景画像（images/cases/icon_q.webp・65×57px）で、納品CSSに
 * min-height が無い。質問文が2行なら dt が背景より高くなるので出るが、1行に
 * 収まると dt が約39pxになり画像の下半分が切れる（OQ-097）。
 *
 * 上の 1 で行が広くなると1行に収まりやすくなるため、必ずセットで当てる。
 * 62px = 背景の高さ57px + background-position の top 5px。
 * -------------------------------------------------------------------------- */
#case .case_post dl.question dt { min-height: 62px; }

@media only screen and (max-width: 768px) {
    /* SP は background-size: 45px auto。57 × 45/65 ≒ 39.5 に top 5px を足す */
    #case .case_post dl.question dt { min-height: 45px; }
}

/* --------------------------------------------------------------------------
 * 3. 事例本文の画像の切り抜き（8/20 納品で解決・打ち消しを撤去した）
 *
 * 納品CSS sub_2026.css:1653 の
 *   #case .case_post .box .pic img { aspect-ratio: 653 / 376; object-fit: cover;}
 * が縦長の写真を切り落としていた（OQ-141）。実測: 400×700 の画像が
 * 713×410 に切り抜かれ、中央だけが見えていた。
 *
 * 2026-08-20 納品でこの行が納品CSSから削除されたため、打ち消しは不要になった。
 * ⚠ 復活していないかは PublicCaseDetailTest の「納品CSSに切り抜き指定が
 *   戻っていない」テストが見張る。この節はその対応関係を残すためのもので、
 *   次の納品まで消さないこと。
 *
 * ⚠ **`width: auto` は残す。** 納品の全称 `img { width: 100% }` が生きているので、
 *   外すと枠いっぱい（712px）まで必ず引き伸ばされて**ぼやける**。
 *   下の 3-b（寄せ）も `width: auto` が前提。
 *
 * ⚠ **縦長の高さ上限（`max-height: 500px`）は 2026-09-05 に外した**（顧客依頼）。
 *   2026-08-21 に「縦長が 713×1247 になって隣の本文との差が余白になる」として入れたが、
 *   ⚠ **その後 8/29 に画像の表示サイズ（100/75/50%）が入り、編集者が行ごとに縮められる**
 *   ようになったため、**自動で縮めるほうが邪魔になった**（縦長が意図せず 500px で頭打ちになる）。
 *
 *   実測（外した後）: 縦長400×700 → **400×700**（原寸）／縦長2000×3000 → 712×1068（枠幅で頭打ち）。
 *   ⚠ **大きい縦長は依然として背が高くなる。** その場合は表示サイズ 75/50% で下げる。
 * -------------------------------------------------------------------------- */
#case .case_post .box .pic img {
    width: auto;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
 * 3-b. 枠の中で画像をどちらへ寄せるか（顧客依頼 2026-09-05）
 *
 * ⚠ **枠（`.pic`）は列より広い。** `width:150%; left:-50%` なので、
 *   実測（1440px）で **列 0〜475 に対し 枠 -237〜475**。左配置なら左へ、
 *   右配置なら右へ、237px はみ出す（納品の意図した見せ方）。
 *
 * ⚠ **枠より小さい画像には余りが出る。** その余りをどちら側に落とすかがこの節。
 *   ⚠ **枠いっぱい（712px）の画像では3つとも同じ見え方になる。**
 *
 * ⚠ **2026-08-29 は「本文側へ寄せる」で固定していた**（左配置のみ `margin-left:auto`）。
 *   実測でそのとき本文との距離が 195px → 50px に揃った。
 *   ⚠ **今回その固定を、行ごとに選べるようにした。**
 *
 * ⚠ **「左」は枠の左端ではなく、列（見えている側）の左端。**
 *   ⚠ **枠を基準にすると左と中央が使い物にならない。** 実測（400pxの画像・1440px）:
 *
 *       枠が基準   左   画像 -237〜163  ⚠ **238px が画面の外**（6割が見えない）
 *                  中央 画像  -81〜319  ⚠ **81px が画面の外**
 *       列が基準   左   画像    0〜400     全部見える
 *                  中央 画像   37〜437     全部見える
 *
 * ⚠ **列に合わせるのは `padding` で行う。** はみ出す側に padding を入れると、
 *   中身の箱がちょうど列に重なる（`box-sizing: border-box` は納品の全称指定・basic_2026.css:2）。
 *
 * ⚠ **値は 50%。33.3333% ではない。** ⚠ **パーセントの padding は「自分の幅」ではなく
 *   「親の幅」に対して効く。** 枠は `width:150%; left:-50%` なので、はみ出し分は
 *   **枠の 1/3 だが、親（列）の 50%**。⚠ **33.3333% と書いて実測で気づいた**
 *   （158px しか効かず、画像が 79px 画面の外に残った）。
 *
 * ⚠ **表示サイズには触らない**（2026-09-09 に方針を修正）。
 *   ⚠ **一度は「サイズ指定があれば枠を列に合わせる」形にしたが、それは行き過ぎだった。**
 *   ⚠ **既存17枚（8記事）の画像が 2/3 の大きさになる**ことを、顧客の指摘で実測して知った。
 *   ⚠ **今回直すのは「寄せで大きさが変わる」ことだけ。大きさそのものは動かさない。**
 *
 * ⚠ **やり方: padding を使わない。** padding は枠の中身の箱を縮め、
 *   ⚠ **`max-width: %` の基準を変えてしまう**（それが上記の 2/3 の正体）。
 *   → **画像の左マージンで「列のどこに置くか」を決め、`translateX` で自分の幅ぶん戻す。**
 *
 *       margin-left  … 列の左端 / 中心 / 右端（枠に対する %）
 *       translateX   … 0 / -50% / -100%
 *
 *   ⚠ **`translateX` は自分の幅に対する % なので、サイズごとに書き分けなくてよい。**
 *   ⚠ **`margin-right: auto` は使えない。** 画像が枠より広いとき（75%＝列の112.5%）
 *   auto が 0 になって効かず、右寄せが左寄せと同じ位置になる（実測）。
 *
 * ⚠ **列が枠のどこにあるかは、はみ出す向きで決まる。**
 *   納品CSSは `.cont_l .pic { left:-50% }` としつつ
 *   ⚠ **`.box.re_column .pic { left:0 }` で打ち消している**（sub_2026.css 1670行）。
 *
 *       re_column でない … 枠は左へはみ出す ＝ 列は枠の [33.3333%, 100%]
 *       re_column        … 枠は右へはみ出す ＝ 列は枠の [0, 66.6667%]
 *
 * ⚠ **列より広い画像は寄せない**（2026-09-10 に追加。⚠ **顧客の画面で本文の上に画像が
 *   重なっているのを見て気づいた**）。
 *
 *   ⚠ **列に収まらない画像を列基準で寄せると、はみ出しが本文側へ向く。**
 *   実測（顧客のスクリーンショットから採寸）: 右配置・サイズ100%・右寄せで
 *   ⚠ **画像が 237px＝列幅の半分ぶん本文の上に乗っていた**（幅は 713px のまま）。
 *
 *   ⚠ **これは旧CSSには無かった性質。** 旧CSSは `margin:auto` で「枠の中」を寄せており、
 *   ⚠ **枠いっぱいの画像では auto が 0 になって動かなかった**（だから安全だった）。
 *   ⚠ **列基準に変えたときに、その安全弁を落としてしまった。**
 *
 *   → **列に収まる大きさ（67% 以下）のときだけ寄せを効かせる。**
 *     ⚠ **それより大きいものは、寄せを選んでも既定の位置から動かさない。**
 *     ⚠ **67% は列ちょうど**なので寄せても位置は同じ。実質は 50% と 33% のためのもの。
 *
 *   ⚠ **既知の穴**: 元画像が小さく、サイズ指定が無い（＝クラスが付かない）画像は
 *   ⚠ **列に収まっていても寄せられない。** サイズを 67% 以下にすれば寄せられる。
 *   ⚠ **画像の実寸は CSS から見えない**ので、これ以上は絞り込めない。
 *
 * ⚠ **既定（未指定）の見え方は旧CSSと1つ残らず一致する**（実測）。既存記事は動かない。
 *
 * ⚠ **PC だけ。** 768px 以下は納品CSSが `.pic { width:100% }` にして枠と列を一致させ、
 *   表示サイズ（3-c）も PC 限定なので、⚠ **SP では画像が常に列いっぱい＝寄せる余地が無い。**
 * -------------------------------------------------------------------------- */
@media only screen and (min-width: 769px) {
    /* 既定の位置＝本文側。⚠ 列に収まらない大きさは、寄せを選んでもここから動かさない。 */
    #case .case_post .box:not(.re_column) .pic img {
        margin-left: 100%;
        margin-right: 0;
        transform: translateX(-100%);
    }

    #case .case_post .box.re_column .pic img {
        margin-left: 0;
        margin-right: 0;
    }

    /* 列に収まる大きさのときだけ寄せを効かせる。枠が左へはみ出す ＝ 列は枠の [33.3333%, 100%] */
    #case .case_post .box:not(.re_column) .pic:is(.pic_w67, .pic_w50, .pic_w33).pic_align_left img {
        margin-left: 33.3333%;
        transform: none;
    }

    #case .case_post .box:not(.re_column) .pic:is(.pic_w67, .pic_w50, .pic_w33).pic_align_center img {
        margin-left: 66.6667%;
        transform: translateX(-50%);
    }

    #case .case_post .box:not(.re_column) .pic:is(.pic_w67, .pic_w50, .pic_w33).pic_align_right img {
        margin-left: 100%;
        transform: translateX(-100%);
    }

    /* 枠が右へはみ出す ＝ 列は枠の [0, 66.6667%] */
    #case .case_post .box.re_column .pic:is(.pic_w67, .pic_w50, .pic_w33).pic_align_left img {
        margin-left: 0;
        transform: none;
    }

    #case .case_post .box.re_column .pic:is(.pic_w67, .pic_w50, .pic_w33).pic_align_center img {
        margin-left: 33.3333%;
        transform: translateX(-50%);
    }

    #case .case_post .box.re_column .pic:is(.pic_w67, .pic_w50, .pic_w33).pic_align_right img {
        margin-left: 66.6667%;
        transform: translateX(-100%);
    }
}

/* --------------------------------------------------------------------------
 * 3-c. 画像の表示サイズを行ごとに選べるようにする（顧客依頼 2026-08-29）
 *
 * ⚠ **元画像は触らない。表示幅だけを変える。**
 *   ⚠ 転送量は減らない（50% でもブラウザは元画像を丸ごと落とす）。
 *
 * ⚠ **縮小だけ。拡大はしない。** `max-width` で上限を下げるだけなので、
 *   元画像が指定より小さければ**そのまま**出る。
 *   ⚠ 上の節で `width: auto` を選んだ理由（引き伸ばすとぼやける）と揃えている。
 *
 * ⚠ **既定（100%）にはクラスを付けない。** 既存記事の JSON には `image_size` が
 *   無いので、**保存し直さなくても今までどおり**になる。
 *
 * ⚠ **PC だけに効かせる。** 768px 以下では納品CSSが `.pic { width:100% }` にして
 *   列幅いっぱいに広げる。そこへ 50% を効かせると**電話で写真が小さくなりすぎる**。
 *   ⚠ **編集者からは「指定したのにスマホで変わらない」に見える**ので、
 *   管理画面の説明文にもその旨を書いてある。
 *
 * ⚠ **数値は「枠に対する幅」。管理画面のラベルもこの数字。**
 *
 *       クラス     枠に対して   列に対して   管理画面のラベル
 *       （無し）      100%        150%        100%（既定・最大）
 *       pic_w83    83.3333%      125%         83%
 *       pic_w75        75%      112.5%        75%
 *       pic_w67    66.6667%      100%         67%（本文の幅と同じ）
 *       pic_w50        50%         75%        50%
 *       pic_w33    33.3333%       50%         33%
 *
 * ⚠ **一度ラベルを「列に対する幅」に振り直しかけた**（2026-09-10）。
 *   ⚠ **100% を超える値が並ぶと「拡大されるのか」と読める**うえ、
 *   ⚠ **顧客が 75% と覚えている12枚が 112.5% と表示されて別物に見える。**
 *   ⚠ **枠基準のまま段階だけ増やすことにした**（池田判断 2026-09-10）。
 *
 * ⚠ **値の意味は動かさない。** 保存済みの `75` を別の割合に読み替えると、
 *   ⚠ **既存12枚の大きさが変わる**（9/9 に一度やって顧客に指摘された。下の 3-b の経緯）。
 *   ⚠ **だから増やしたのは値だけで、既存の3つ（100 / 75 / 50）には触っていない。**
 *
 * ⚠ **既存の 100 / 75 / 50 は選択肢から外せない。** 外すと
 *   **その値で保存された記事が編集画面で「選択なし」になる。**
 *
 * ⚠ **寄せ（3-b）とは独立。** 寄せは margin と translateX で決めており、
 *   ⚠ **画像の幅に依存しない**ので、段階を増やしても寄せの規則は増えない。
 * -------------------------------------------------------------------------- */
@media only screen and (min-width: 769px) {
    #case .case_post .box .pic.pic_w83 img { max-width: 83.3333%; }
    #case .case_post .box .pic.pic_w75 img { max-width: 75%; }
    #case .case_post .box .pic.pic_w67 img { max-width: 66.6667%; }
    #case .case_post .box .pic.pic_w50 img { max-width: 50%; }
    #case .case_post .box .pic.pic_w33 img { max-width: 33.3333%; }
}

/* ==========================================================================
 * CMS が足すマークアップのスタイル
 *
 * 納品コーディングは静的なモックなので「0件」の状態が存在しない。CMS 側で必要に
 * なった要素をここで最低限だけ整える。**納品にある要素の見た目は変えない。**
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 一覧の0件メッセージ
 *
 * .box_list / .helpful_list は flex コンテナなので、素の <p> を入れると
 * flex アイテムとして幅なりに置かれ、無装飾のまま左端に貼り付く（OQ-025）。
 * -------------------------------------------------------------------------- */
.box_list .empty,
.helpful_list .empty {
    width: 100%;
    padding: 60px 20px;
    text-align: center;
    line-height: 180%;
    color: #555;
}

@media only screen and (max-width: 768px) {
    .box_list .empty,
    .helpful_list .empty { padding: 35px 15px; font-size: 87.5%; }
}

/* --------------------------------------------------------------------------
 * 本文エディタの「引用」（OQ-152・暫定）
 *
 * ⚠ 納品CSS全体に `blockquote` の定義が **1行も無い**（実測）。ボタンは既定で
 *   出ているので、押すと保存はされるがブラウザ既定の字下げだけになり、
 *   デザインと無関係な見た目になる。
 *
 * ⚠ **これは暫定。本来は制作会社の担当。** 納品 `sub_2026.css` には
 *   「エディタ用CSS」と明記された節が既にある（1917-1936 お役立ち・2091-2110 メディア）。
 *   引用もそこに入れてもらう（OQ-153）。届いたらこの節を消す。
 *
 * 値は納品の語彙から採っている（`.bg_lb` の #f1f8fd ／ 見出しのアクセント #009ce1）。
 * 新しい色や角丸は持ち込まない。
 * -------------------------------------------------------------------------- */
.comment blockquote {
    margin: 0 0 25px;
    padding: 20px 25px;
    border-left: 4px solid #009ce1;
    background: #f1f8fd;
}

.comment blockquote > *:last-child { margin-bottom: 0; }

/* 事例の `.comment` は flex（gap:15px）。納品が `p` に対してしているのと同じように、
   下マージンを外して二重に空かないようにする（sub_2026.css の
   `#case .case_post .comment p { margin-bottom: 0 }` に倣う）。 */
#case .case_post .comment blockquote { margin-bottom: 0; }

@media only screen and (max-width: 768px) {
    .comment blockquote { padding: 15px 18px; }
}

/* --------------------------------------------------------------------------
 * 画像の無いカードで NEW バッジが本文に重ならないようにする
 *
 * 納品CSSは
 *   .box_list .box .pic     { position: relative }
 *   .box_list .box .pic .new{ position: absolute; top:0; left:0 }
 * で、バッジは画像の上に重ねる前提。納品コーディングは全カードに画像があるので
 * これで問題にならない。
 *
 * ⚠ CMS ではメイン画像は任意。画像が無いと `.pic` の高さが **0** になり、
 *   絶対配置のバッジ（29px）がそのまま下の `.txt` に垂れて**タグや見出しに重なる**
 *   （実測: 9px 重なり）。
 *
 * 高さを直接指定せず、**画像が無いときだけバッジを通常フローに戻す**。
 * こうすると `.pic` がバッジの高さぶんだけ伸びるので、バッジの寸法が変わっても
 * 数値を追随させる必要がない。
 *
 * 事例・お役立ち・メディアの全カードが同じ `.box_list .box .pic` を使うので
 * ここ1か所で直る。
 * -------------------------------------------------------------------------- */
.box_list .box .pic:not(:has(img)) .new { position: static; }

/* --------------------------------------------------------------------------
 * 一覧カードのカテゴリバッジが3つ以上でも溢れないようにする
 *
 * 納品は**バッジ2つまでしか想定していない**（helpful-info/index.html の18枚は
 * すべて1〜2個、トップは1個）。納品CSSは
 *   .box_list .box .cate      { display:flex; gap:10px }   ← nowrap
 *   .box_list .box .cate span { min-width:90px }           ← 縮まない
 * なので、カード内幅256pxに対し3個で 90*3+20 = 290px となり **34px はみ出す**（実測）。
 * CMS はカテゴリを複数選択で好きなだけ付けられるため、個数は利用者次第。
 *
 * 1〜2個のときは納品の見た目（90px）をそのまま保ち、**3個以上のときだけ**
 * 内容幅に詰める。これで3個は1段に収まり、カードの高さも変わらない。
 * 名前が長い場合や4個以上は flex-wrap が保険として効く。
 *
 * ⚠ 詳細ページ（#helpful .post_head .cate）は枠が1000pxあり3個でも溢れないので触らない。
 * ⚠ NEWS 一覧のカードも同じ .box_list .box .cate を使うので、ここで一緒に直る。
 * -------------------------------------------------------------------------- */
.box_list .box .cate { flex-wrap: wrap; }
.box_list .box .cate:has(span:nth-child(3)) span { min-width: 0; padding: 0 8px; }

/* --------------------------------------------------------------------------
 * NEWS 一覧のカテゴリチップをリンクにする
 *
 * 納品はクライアント側のタブ（`data-tab`）で、tab1 以外の中身はプレースホルダ。
 * ページングと両立しないのでサーバー側の絞り込みにした。見た目は納品の
 * `#news .tag li` のままにするため、<a> を li いっぱいに広げる。
 * -------------------------------------------------------------------------- */
#news .tag li a { display: block; color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
 * ページャの «  ‹  ›  » を押せるようにする
 *
 * `.pager li.first/prev/next/last` は納品CSSに定義があるが、納品HTMLには
 * `li.page` しか無く一度も使われていない。`text-indent: -9999px` が li に
 * 当たっているため、インラインの <a> が可視領域の外に出て押せなかった。
 * -------------------------------------------------------------------------- */
.pager li.first a,
.pager li.prev a,
.pager li.next a,
.pager li.last a { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
 * NEWS の見出しの省略（要件定義資料 p27・2026-09-15 に先方と決定）
 *
 * ⚠ p27 の「枠からオーバーしたら『…』」は PC のワイヤーで、SP の扱いは書かれていなかった。
 *   PC・SP とも 1 行「…」にしていたが、SP では見出しがほぼ全部切れ、その「…」の位置に
 *   でんちゃんが立って目立った（OQ-233）。
 *   → PC は省略を解除（折り返して全文。支給コーディングと同じ）
 *   → SP は 3 行まで表示して以降を「…」（line-clamp）
 * ⚠ 1 行のときのでんちゃんの重なりは支給 CSS 側（sub_2026.css の #news .inner::before・SP）で
 *   bottom: 0 / max-width: 80px に直した（制作会社の指示）。NewsListTitleClampTest が両方を固定する。
 * -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    #news .news_list .box .mid a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}

/* --------------------------------------------------------------------------
 * トップの News: 新着でない行の黄色い空バッジを消す
 *
 * 納品CSS `#toppage .news .cate` は div 自体に background:#fbf038 と 70×22px を
 * 与える。納品HTMLは全行が NEW! の見本なので空の場合が想定されていない。
 * 日付と見出しの列を揃えるため箱の大きさは残し、装飾だけ落とす。
 * -------------------------------------------------------------------------- */
#toppage .news .cate.empty {
    background: none;
    border-radius: 0;
}

/* --------------------------------------------------------------------------
 * お役立ちのサービスバナー: アップロード画像を枠に収める
 *
 * 納品CSSは .logo_kanna / .logo_photomanager / .logo_manabiba / .logo_connect の
 * 4種にしかサイズを与えていない（logo_pickbuddy すら無い）。要件 p17 は
 * 「画像とURLを指定」＝任意画像なので、既知4種以外は .logo（200px）と
 * SPの `max-width: none` により枠を突き抜ける。
 * 判別クラスを付けた画像だけに効かせ、既知4種の指定は一切触らない。
 * -------------------------------------------------------------------------- */
.service_bana div:nth-child(2) .logo img.logo_upload {
    max-width: 100%;
    height: auto;
}
@media only screen and (max-width: 768px) {
    .service_bana div:nth-child(2) .logo img.logo_upload { max-width: 100%; }
}

/* --------------------------------------------------------------------------
 * お役立ちのサービスバナー: PickBuddy のロゴサイズ（顧客指摘・2026-08-19）
 *
 * 納品CSS sub_2026.css:458-461 は .service_bana に対して kanna / photomanager /
 * manabiba / connect の4種しかサイズを与えておらず、**PickBuddy だけ指定が無い**。
 * その結果 .logo の 200px いっぱいまで伸びて枠を圧迫する。
 * 実測（PC 1280px）: connect 172px / kanna 158px / photomanager 170px /
 * manabiba 116px に対し **pickbuddy だけ 200px**。
 *
 * ⚠ 値は当方の暫定。素材は 650×153（縦横比 4.25）で、他4種の表示高さ 30〜55px の
 *   真ん中あたりに収まるよう KANNA と同じ 79% / 158px を当てた（高さ約37px）。
 *   **本来のサイズは制作会社が決めるもの**なので確認に回す → OQ-144。
 *
 * ⚠ 8/18 納品で `#toppage .service .service_list` の logo_pickbuddy は**新設された**が
 *   （150px）、こちらの `.service_bana` には**依然として無い**。別セレクタなので
 *   流用できない。OQ-144 は開いたまま。
 * -------------------------------------------------------------------------- */
.service_bana div:nth-child(2) .logo_pickbuddy { width: 79%; max-width: 158px; }

@media only screen and (max-width: 768px) {
    /* 他4種のSP値は 122〜200px。PC との比（158→165）を他種に揃えた */
    .service_bana div:nth-child(2) .logo_pickbuddy { width: 165px; }
}

/* --------------------------------------------------------------------------
 * お役立ち: ホワイトペーパーのボタンが無い記事の境目（顧客指摘・2026-08-19）
 *
 * 本文カード（.inner.box_shadow・背景 #fff）の下端と、次の「関連お役立ち情報」
 * （.cont2.bg_w・同じく #fff）が**隙間ゼロで接する**ため、境目が見えず1つの塊に見える。
 * 実測: カード下端 = 次セクション上端（差 0px）、背景はどちらも rgb(255,255,255)。
 *
 * ボタンがある記事では、その帯（実測 293px）に #helpful の背景（水色）が覗いて
 * 境目になっている。無い記事にも同じ役割の余白を与える。
 *
 * ⚠ 80px は納品CSSが本文の下に使っている値（#helpful .post_contents の padding-bottom）。
 *   ボタンの 293px を再現すると、何も無い空白が広すぎる。
 * ⚠ 判定はサーバー側のクラス（:has() を使わない。OQ-013 と同じ方針）。
 * -------------------------------------------------------------------------- */
#helpful .cont1.no_whitepaper { padding-bottom: 80px; }

@media only screen and (max-width: 768px) {
    #helpful .cont1.no_whitepaper { padding-bottom: 40px; }
}

/* --------------------------------------------------------------------------
 * メディア掲載記事: 掲載元URLのバナーが無い記事の境目（顧客指摘・2026-08-21）
 *
 * 上のお役立ちと**まったく同じ型**。実測でも同じで、カード下端＝次セクション上端
 * （差 0px）、背景はどちらも rgb(255,255,255) だった。
 *
 * ⚠ 一覧へ戻るボタンを常に出すようにしたぶん、**下が必ず白いセクションになった**。
 *   それまでは関連が0件だと次セクションごと無く、#media の水色が覗いて境目に
 *   なっていたので、この余白を入れないと**直したつもりで悪化する**。
 *
 * ⚠ 80px / 40px は納品CSS `#media .post_contents` の padding-bottom（PC 80・SP 20）に
 *   合わせた値。SP はお役立ちと揃えて 40px にしている。
 * -------------------------------------------------------------------------- */
#media .cont1.no_source { padding-bottom: 80px; }

@media only screen and (max-width: 768px) {
    #media .cont1.no_source { padding-bottom: 40px; }
}

/* --------------------------------------------------------------------------
 * メディア掲載記事: 「掲載元の記事を見る」の幅（顧客指摘・2026-08-21）
 *
 * 納品CSS `#media .media_post .b_more.arrow_l` は **max-width: 580px**。あの枠は
 * お役立ちのホワイトペーパーバナー（「ホワイトページの／ご請求はこちらから」15字）と
 * 同じ寸法で、**バナー用の幅**として作られている。掲載元リンクは9字しかないので、
 * 実測で左右に 178px ずつ余り、間延びして見える。
 *
 * ⚠ 掲載元リンクは**納品コーディングに存在しない要素**（OQ-073 と同じで当方が
 *   既存の部品を借りている）。借り先がバナー枠だったのが原因。
 *
 * ⚠ 430px は納品CSS `.other_cont .b_more.arrow_l` の値。**同じページの下にある
 *   「メディア記事一覧を見る」と同じ幅**になるので、勝手な数字ではない。
 *   実測: 文字 225px に対し矢印まで 103px の余裕（580px→178px／360px は衝突する）。
 * ⚠ SP は納品側で両方とも 298px に揃っているので触らない。
 * ⚠ 上下の padding（100px/120px）は動かさない。あれが本文カードとの境目を作っている。
 * -------------------------------------------------------------------------- */
#media .media_post > .b_more.arrow_l { max-width: 430px; }

/* --------------------------------------------------------------------------
 * 事例詳細の会社情報を <p> から <div> へ移したぶんの書体指定（OQ-112B）
 *
 * RichEditor の出力は <p> を含むので <p> の中に置けない（ブラウザが入れ子を解いて
 * 要素が兄弟に分解される）。ただし納品CSSは `.company p` と**要素で**指定しているため、
 * div にすると書体を失う。納品と同じ値を当て直す。
 * 出典: sub_2026.css の #case .post_head .main_cont .company p 系。
 * -------------------------------------------------------------------------- */
#case .post_head .main_cont .company .company_info { font-size: 87.5%; line-height: 178%; }
#case .post_head .main_cont .company .company_info span { display: block; }
#case .post_head .main_cont .company .company_info p { margin: 0; }
@media only screen and (max-width: 768px) {
    #case .post_head .main_cont .company .company_info { font-size: 75%; }
    #case .post_head .main_cont .company .company_info span { display: inline-block; margin-right: 15px; }
}

/* --------------------------------------------------------------------------
 * 事例の「メディア」ブロック（資料 p5・p7 のブロックB）
 *
 * ⚠ 納品コーディングにこのブロックが無く、#case 配下に対応するCSSも1本も無い（OQ-073）。
 *   器（.set_box .inner）は納品どおりなので、中身の最低限だけをここで持つ。
 *   制作会社から新版が届いたら、この節ごと差し替える。
 * -------------------------------------------------------------------------- */
#case .case_post .set_box .case_media {
    margin-top: 25px;
    text-align: center;
}
#case .case_post .set_box .case_media img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
 * 本文エディタの文字色（旧方式・**新規には使われない**）
 *
 * いまの本文は色そのものを持つ（<span style="color: #FF0000">）ので、公開側に
 * 規則は要らない。ここに残しているのは 2026-08-19 より前に書かれた記事のため。
 *
 * ⚠ 消さないこと。旧記事は色**名**だけを保存しており（<span data-color="navy">）、
 *   この一覧が無いと色が消える。移行コマンド `cms:migrate-editor-colors` を
 *   全環境で流し終えるまでは対で要る。
 * ⚠ 足さないこと。新しい色をここに書いても効かない（管理画面はもう名前を
 *   書き出さない）。方式を変えた経緯は app/Support/EditorColor.php。
 * ========================================================================== */
[data-color="black"]       { color: #000000; }  /* 黒 */
[data-color="darkgray"]    { color: #333333; }  /* 濃いグレー */
[data-color="gray"]        { color: #767676; }  /* グレー */
[data-color="lightgray"]   { color: #bcbcbc; }  /* 薄いグレー */
[data-color="navy"]        { color: #0039a7; }  /* 紺 */
[data-color="darknavy"]    { color: #1f3b8f; }  /* 濃い紺 */
[data-color="blue"]        { color: #009ce1; }  /* 水色 */
[data-color="lightblue"]   { color: #86c4ed; }  /* 薄い水色 */
[data-color="red"]         { color: #ff0000; }  /* 赤 */
[data-color="darkred"]     { color: #c00000; }  /* 濃い赤 */
[data-color="orange"]      { color: #ff8c00; }  /* オレンジ */
[data-color="yellow"]      { color: #fef100; }  /* 黄 */
[data-color="green"]       { color: #2e7d32; }  /* 緑 */
[data-color="lightgreen"]  { color: #7cb342; }  /* 黄緑 */
[data-color="purple"]      { color: #6a3fa0; }  /* 紫 */
[data-color="pink"]        { color: #e91e63; }  /* 桃 */

/* ==========================================================================
 * 本文リストの行間
 *
 * ⚠ エディタ（TipTap）は箇条書きの項目を必ず <li><p>…</p></li> にする。素の
 *   <li>あ</li> を読み込ませても <p> を挿入する（実測）。一方 #helpful / #media /
 *   #news では p の下マージンが生きているため、項目ごとに余白が入って間延びする。
 *   シーダー由来の古い記事は素の <li> なので差が出る＝「広くなることがある」の正体。
 *
 * ⚠ p ごと消さない。<li> の中の p だけを対象にする（本文の段落間の余白は要る）。
 * ========================================================================== */
.comment li > p { margin-bottom: 0; }
/* ⚠ 表のセルも同じ。エディタはセルの中身も <p> で包むので、そのままだと
   セル内テキストの下に1行ぶんの余白が入る（納品CSSに td p の指定は無い）。 */
.comment td > p,
.comment th > p { margin-bottom: 0; }

/* ==========================================================================
 * SP のパンくずを左寄せにする（池田判断 2026-08-24・OQ-173）
 *
 * ⚠ **これは納品デザインからの意図的なズレ。**
 *   納品は SP のとき、お役立ち詳細とメディア詳細**だけ**パンくずを中央寄せにする
 *   （sub_2026.css:1961 と :2135。どちらも `@media (max-width:768px)` の中）。
 *   事例詳細・一覧系・NEWS・FAQ には同じ指定が無く、元から左寄せ。
 *   **2種だけ中央になるのを揃える**のがここの目的。
 *
 * ⚠ 納品差し替えで上の2行が消えたら、この打ち消しも不要になる。そのときは
 *   BreadcrumbAlignTest が「打ち消す相手が居ない」ことを教える。
 *
 * ⚠ **2行目はぶら下がる。** タイトルの改行（<br>）は <li> の中の改行なので、
 *   折り返した行は容器の左端ではなく**最終項目の左端**から始まる（実測 141px）。
 *   容器の左端に揃えたい場合は最終項目を独立行にする必要があり（flex-basis:100%）、
 *   そのぶん1行ぶん背が高くなる。ここでは採らない（案1・池田判断）。
 * ========================================================================== */
@media only screen and (max-width: 768px) {
    #helpful .post_head .breadcrumb,
    #media .post_head .breadcrumb { justify-content: flex-start; }
}

/* ==========================================================================
 * 本文の画像を横に並べる（OQ-175）
 *
 * ⚠ 止めているのは納品CSSの**全称指定**（basic_2026.css:38）。
 *
 *     img { display: block; width: 100%; height: auto; }
 *
 *   `display: block` なので、幅を縮めても**必ず改行する**。実測で 240px の2枚が
 *   同じ x のまま y だけ 794 → 1004 と縦に積まれた。
 *
 * ⚠ **エディタ側は元から対応している。** Filament は画像を `inline: true`
 *   （group: inline）で積んでおり、**段落の中に画像を複数入れられる**。
 *   足りないのは公開側の見た目だけ。
 *
 * ⚠ **全画像を inline-block にはしない。** 既存記事の画像がすべて
 *   「中央寄せの単独行」から変わってしまう。**段落にクラスが付いたときだけ**効かせる。
 *
 * ⚠ **セレクタの詳細度に注意。** 納品側は `#helpful .post_contents .comment img`
 *   （id＋3クラス）で `max-width: 500px` を掛けており、`.comment p.img_row img`
 *   では**負ける**（実測。上限が効かず2枚が折り返した）。id 付きの列を並べて勝たせる。
 *
 * 実測（本文幅 645px / PC）:
 *   幅指定あり 240px ×2 → x=384, 640 の同じ行
 *   幅指定なし        ×2 → 392px ずつに収まって同じ行
 * ========================================================================== */
.comment p.img_row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: flex-start;
}
#helpful .post_contents .comment p.img_row img,
#media .post_contents .comment p.img_row img,
.comment p.img_row img {
    display: inline-block;
    margin: 0;
    /* ⚠ `width: auto` と対で使う。全称の `width: 100%` が生きているため、
       max-width だけでは枠いっぱいまで引き伸ばされる（OQ-165 と同じ理屈）。 */
    width: auto;
    max-width: calc(50% - 8px);
    /* ⚠ **`!important` が要る。** エディタでリサイズした画像は
       `style="width: 400px; height: 267px"` を持つ（ImageExtension が両方書く）。
       上の max-width は**幅だけ**を縮めるので、インラインの height が据え置かれて
       **縦横比が崩れる**（実測: 400×267 → 392×267。比率 1.470 / 本来 1.498）。
       ⚠ インラインの指定に勝つ手段は `!important` しかない。
       ⚠ 高さを本人の指定より優先して自動にするのは意図どおり。横並びで幅が
       変わる以上、高さは幅に追随させるのが正しい。 */
    height: auto !important;
}

/* ⚠ SP では縦に戻す。実測で幅375pxのとき1枚あたり222pxまで縮み、
   写真の判別が苦しい。納品の表（th/td を display:block にする）と同じ考え方。 */
@media only screen and (max-width: 768px) {
    .comment p.img_row { display: block; }
    #helpful .post_contents .comment p.img_row img,
    #media .post_contents .comment p.img_row img,
    .comment p.img_row img {
        /* ⚠ ここも `!important`。SP は幅を 100% に戻すので、リサイズ時の
           インライン width/height の両方に勝つ必要がある。高さを外さないと
           PC と同じ理由で縦横比が崩れる。 */
        width: 100% !important;
        max-width: 500px;
        height: auto !important;
        margin: 0 auto 15px;
    }
}

/* ==========================================================================
 * 導入事例 詳細のタイトルを小さくする（顧客指摘 2026-08-29）
 *
 * ⚠ **長いタイトルの記事が入るようになった。** 納品は 262.5%（＝42px）で、
 *   `.txt` の幅が max-width:550px（1300px 以下では 42%）しかないため、
 *   長いタイトルが何行にも折り返して画像に食い込む。
 *
 * ⚠ **セレクタは納品と同じにしてある。** 詳細度で勝つ必要はなく、
 *   cms-overrides.css が sub_2026.css より後に読まれることで勝つ（head.blade.php）。
 *
 * ⚠ **PC だけにしたいので、SP を戻す指定が要る**（顧客指摘 2026-09-05）。
 *
 *   ⚠ **ここに「メディアクエリの指定が後に読まれるので SP は動かない」と書いていたのは誤り。**
 *   ⚠ **メディアクエリは詳細度を上げない。** 詳細度が同じなら**後から読まれた側が勝つ**ので、
 *   上の1本が納品の `@media (max-width:768px) { … 125% }` まで上書きしていた。
 *   ⚠ **実測: SP のタイトルが 20px → 38px（1.9倍）**。2026-08-29 から 09-05 まで
 *   顧客のスマホでそうなっていた。
 *
 *   ⚠ **確かめ方を間違えた。** PC 幅でだけ見て「効いた」と判断した。
 *   ⚠ **打ち消しは、当てた側と当てていない側の両方の幅で測ること。**
 * ========================================================================== */
#case .post_head .main_cont h1 {
    /* 262.5%（42px）→ 237.5%（38px）。基準は body の 16px（basic_2026.css）。 */
    font-size: 237.5%;
}
@media only screen and (max-width: 768px) {
    /* ⚠ 納品（sub_2026.css:1501）の値へ戻す。上の1本が届いてしまうため。 */
    #case .post_head .main_cont h1 { font-size: 125%; }
}

/* ==========================================================================
 * サービスバナーを挟むと段落の余白が消える（顧客指摘 2026-08-29）
 *
 * ⚠ **納品CSSが隣接セレクタで余白を作っている。**
 *
 *     #case .case_post .box + .box { margin-top: 70px; }      PC
 *     #case .case_post .box + .box { margin-top: 30px; }      SP
 *
 *   ⚠ **`.box` と `.box` の「間」に `.service_bana` が入ると隣接でなくなり、
 *   上下の余白がまとめて消える。** Q&A の行を続けて置き、その間にバナーを挟んだ
 *   ときに顧客が気づいた。
 *
 * ⚠ **`.service_bana` 自身は `margin: auto`（左右中央寄せ）だけ**で、
 *   上下のマージンを1つも持っていない（sub_2026.css:412）。
 *
 * ⚠ **バナー側に余白を持たせて塞ぐ。** 納品の 70px / 30px と同じ値にして、
 *   バナーが有っても無くても段落の間隔が変わらないようにする。
 *   ⚠ **`.box + .box` を書き換えない。** バナーを挟まない既存記事に影響が出る。
 * ========================================================================== */
#case .case_post .box + .service_bana,
#case .case_post .service_bana + .box,
#case .case_post .service_bana + .service_bana {
    margin-top: 70px;
}

@media only screen and (max-width: 768px) {
    #case .case_post .box + .service_bana,
    #case .case_post .service_bana + .box,
    #case .case_post .service_bana + .service_bana {
        margin-top: 30px;
    }
}

/* ==========================================================================
 * 目次のボタンから文字がはみ出す（顧客指摘 2026-09-05）
 *
 * ⚠ **納品CSSがボタンの高さを固定している**（`sub_2026.css:264` PC 52px ／ `:291` SP 37px）。
 *   高さと `line-height` を数値で決め打ちしているので、
 *   ⚠ **見出しが長くて2行になると、2行目がボタンの枠の下へ出る。**
 *
 *   実測（375px・「DEN-UPを浸透させるために」）
 *     ボタン 37px ／ 中身 47px ／ ⚠ **はみ出し 20px**
 *
 * ⚠ **`overflow` では直さない。** 切ると見出しが読めなくなる。伸ばす。
 *
 * ⚠ **高さは `min-height` に置き換える。** 1行のボタンはこれまでと同じ高さのままで、
 *   2行になったものだけ背が高くなる。
 *
 * ⚠ **`line-height` の決め打ちを外すので、代わりに flex で中央に置く。**
 *   納品は `line-height` を高さより数px小さくすることで縦中央に見せていた
 *   （52/48・37/32）。可変にするとその手が使えない。
 *
 * ⚠ **矢印（`::after`）は絶対配置で `top:0; bottom:0; margin:auto`** なので、
 *   高さが変わっても縦中央に留まる。右の余白（`padding-right`）もそのまま効く。
 *
 * ⚠ **PC も同じ作り。** 幅が広いぶん出にくいだけなので、まとめて塞ぐ。
 *   ⚠ **はみ出していなかったボタンの見え方は変わらない**（`min-height` が元の値）。
 * ========================================================================== */
ul.anchor_box li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 52px;
    line-height: 1.35;
    padding-top: 6px;
    padding-bottom: 6px;
}

@media only screen and (max-width: 768px) {
    ul.anchor_box li a {
        min-height: 37px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* ==========================================================================
 * お役立ち: 記事の動画（YouTube）— リード文の下・目次の上（2026-09-17・池田決定）
 *
 * 支給コーディングには、お役立ち情報の動画の型が無い
 * （事例の .set_box.movie .youtube は #case .case_post の中だけに効く）。
 * 旧サイト（den-up.jp/helpful-info/05/）と同じく、枠なし・全幅・16:9 にする。
 *
 * ⚠ iframe に width / height の属性は持たせていない。比率はここの aspect-ratio で決める
 *   （この節が効かないと、ブラウザ既定の 300×150 の枠になる）。
 * ⚠ メイン画像もリード文も無い記事では、動画が .inner の先頭に来る。そのときは上の余白を 0 にする
 *   （.inner の padding に足され、PC で 80px 空くため）。:first-child は詳細度が高いので SP の節より前でも効く。
 * ⚠ 見た目は先方の確認待ち（枠を事例に揃える・制作会社に型を出してもらう、の可能性あり）。
 * ========================================================================== */
#helpful .helpful_video {
    margin-top: 40px;
}

#helpful .helpful_video:first-child {
    margin-top: 0;
}

#helpful .helpful_video iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

@media only screen and (max-width: 768px) {
    #helpful .helpful_video {
        margin-top: 20px;
    }
}