で包むと、flex アイテムが
figure に移る。そこで「枠は figure が持ち、img は枠に合わせて伸びる」へ
組み替える。ユーザー判断は「モックの枠を保つ」なので 320px は変えない。
本番は左右 50/50 の 2 カラムだが、そちらへは寄せない。
本文画像は縦長（比 0.78〜1.21）と横長（1.74）が混在する。
幅を 320px に固定して height:auto にすると縦長は自然に高くなる。
モックが img に付けていた border-radius / max-width / height:auto は
assets/css/document-form-archives.css 側の .…__img が引き続き当たるので
ここでは figure 側の指定だけを書く。 */
.document-form-archives-detail__figure {
flex-shrink: 0;
width: 320px;
max-width: 100%;
margin: 0;
}
.document-form-archives-detail__figure .document-form-archives-detail__img {
width: 100%;
}
/* 「※クリックすると拡大します」。モックに対応する要素が無いため、
リード文（.…__lead）の指定に合わせて 1 段小さくする。
margin は上下とも明示する。拡大表示のあるページだけ core が
block-library の CSS をインラインで出し、その中の
`.wp-block-image :where(figcaption){margin-top:.5em;margin-bottom:1em}` が
当たるため、指定しないと**拡大表示の有無でキャプションの余白が変わる**
（:where() は詳細度 0 なので上書きできる）。 */
.document-form-archives-detail__caption {
margin-top: 8px;
margin-bottom: 0;
font-family: 'Zen Kaku Gothic New', var(--font_normal);
font-size: 13px;
font-weight: 500;
line-height: 1.7;
color: var(--font_c);
text-align: center;
}
@media (width <= 896px) {
.document-form-archives-detail__figure {
width: 100%;
margin-inline: auto;
}
}
/* 同じ資料の PC 版と SP 版を 2 枚持っている資料の出し分け（slug 1・17）。
移行元は bgb ブロックの class に pc-only / sp-only を付けて出し分けており、
その規則は assets/css/baser-bge-custom.css 等が
`.c-content-main .pc-only{display:none!important}` として持っている。
ただしそれらのファイルは資料詳細ページでは読み込まれず、
.c-content-main も存在しないため、**そのままでは 2 枚が縦に並ぶ**（実測済み）。
境界は移行元と同じ 767/768px にする。テーマ全体の SP 境界は 896px だが、
これは「モックの枠」の話ではなく「どちらの版の絵を見せるか」の話なので、
移行元の出し分け条件をそのまま保つ方が正しい。
896px を使うと 768〜896px の幅で本番と違う版が出る。 */
@media (width <= 767px) {
.document-form-archives-detail__figure.pc-only {
display: none;
}
}
@media (width >= 768px) {
.document-form-archives-detail__figure.sp-only {
display: none;
}
}
/* 資料画像の拡大リンク。オーバーレイ本体は article-lightbox.css。 */
.document-form-archives-detail__lightbox {
display: block;
}
.document-form-archives-detail__lightbox img {
cursor: zoom-in;
}
/* 資料本文の右寄せ段落（_document_sections の align=right）。
移行元は
↑クリックして拡大表示
というインライン style で持っており
（本番 slug 21・22）、これは画像の下に付く「拡大できます」の案内。
インライン style を出力側で復元すると wp_kses の style 検査に依存するので、
意味（右寄せ）だけをクラスで表す。文字サイズは span の style が
そのまま通るので CSS 側では指定しない。 */
.document-form-archives-detail__lead--right {
text-align: right;
}
/* お問い合わせの注釈（.contact-form__note）。
フォームのブロック（lazyblock/form-embed-section）は「注釈」の入力欄を
contact / estimate の両方で出すが、モックには estimate 側にしか注釈が無く
（estimate/index.php の .estimate-form__note のみ）、estimate.css にだけ
スタイルがある。contact.css には .contact-form__note が無いので、
お問い合わせページで注釈を入れると素の になってしまう
（実測: audit/block-assets/derive.py が唯一の未定義クラスとして検出）。
assets/css/ はモックと同一に保つ約束なので、ここへ WordPress 側の追加として
書く。宣言は .estimate-form__note と同じにして、見た目を揃える。 */
.contact-form__note {
margin-top: 40px;
font-family: var(--font_normal);
font-size: 13px;
line-height: 1.8;
text-align: left;
color: var(--font_c);
opacity: .6;
word-break: keep-all;
display: inline-block;
padding-inline: 0 1em;
text-indent: -1em;
}
@media (width <= 896px) {
.contact-form__note {
margin-top: 28px;
}
}