見積太郎で作ったシミュレーターに、
画像やイラストを追加する方法

＝＝＝見積太郎・画像追加用／生成AI向け仕様＝＝＝

添付された var PRODUCTS = [ ... ]; の既存構造と計算ロジックを維持し、画像表示に必要な指定だけを追加してください。
出力は修正後の var PRODUCTS = [ ... ]; の完全なコード全文とし、省略記号や不要な説明コメントは入れないでください。

【共通ルール】
- 画像は表示用です。price / monthly / unit / taxRate 等の計算項目を画像用に追加しないでください。
- 既存の id / kind / pricing / rules / visible_if / options / taxRate / 割引条件を変更しないでください。
- URL指定の画像はURLをそのまま使用してください。
- sample.jpg のようなファイル名だけの場合は img/sample.jpg としてください。
- ユーザーが希望していない見出し・説明文・キャプションを勝手に追加しないでください。
- image_alt は短く自然な代替テキストにしてください。

【商品全体の最初の説明文（intro）の下に1枚表示する場合】
product直下に以下を使用できます。
intro_image
intro_image_alt
intro_image_caption
intro_image_align: 'left' | 'center' | 'right'
intro_image_size: 'wide'
intro_image_max_width: 数値(px)
intro_image_margin_top: 数値(px)
intro_image_margin_right: 数値(px)
intro_image_margin_bottom: 数値(px)
intro_image_margin_left: 数値(px)

ユーザーが位置・大きさ・余白を特に指定しない場合：
- intro画像は中央寄せ
- 通常サイズ（CSS側の標準幅）
- intro文がある場合は上14px、下28pxの標準余白

【通常sectionに1枚表示する場合】
対象sectionに以下を使用できます。
image
image_alt
image_caption または caption
image_align: 'left' | 'center' | 'right'
image_size: 'wide'
image_max_width: 数値(px)
image_margin_top: 数値(px)
image_margin_right: 数値(px)
image_margin_bottom: 数値(px)
image_margin_left: 数値(px)

ユーザーが位置・大きさ・余白を特に指定しない場合：
- 1枚画像は通常サイズ（現行CSSでは最大約420px）
- 中央寄せ
- 標準の上下余白を使用

【1枚を2枚分くらいの幅で大きく表示】
image_size:'wide'
intro画像なら intro_image_size:'wide'
現行の標準では最大1040px相当まで拡大します。

任意の最大幅を指定する場合：
image_max_width: 900
intro画像なら intro_image_max_width: 900
max_width の指定が size:'wide' より優先されます。

【複数画像】
images: [
  { src:'img/a.jpg', alt:'画像A' },
  { src:'img/b.jpg', alt:'画像B' }
],
image_columns: 2

同じsection内で image と images は併用しないでください。
特に指定がない場合、PCでは2列を基本とし、スマートフォンでは1列表示になります。

【通常section内の表示位置】
image_position:'below_label'
  → ラベル直下・説明文より上

image_position:'below_help'
  → 説明文の下・入力欄や選択肢の上

image_position:'after_text'
  → info本文の下

通常sectionで image_position 未指定の場合：
- info は本文の下
- quantity / single / multi / qoptions はラベル直下

【対象項目の前・後、STEP冒頭・末尾へ画像だけを置く場合】
画像だけの kind:'info' section を追加してください。
ユーザーが希望していない限り label / title / help / desc / text / caption は付けないでください。

例：
{
  kind: 'info',
  id: 'target_image',
  image: 'img/sample.jpg',
  image_alt: '参考画像'
}

【自然文の解釈】
「左寄せ」→ image_align:'left'
「右寄せ」→ image_align:'right'
「2枚分くらいの幅」「横いっぱいに大きく」→ image_size:'wide'
「幅900pxくらい」→ image_max_width:900
「上を10px空ける」→ image_margin_top:10
「右を20px空ける」→ image_margin_right:20
「下を30px空ける」→ image_margin_bottom:30
「左を20px空ける」→ image_margin_left:20

intro画像の場合は、それぞれ intro_image_* のキーを使用してください。

【最終確認】
- 画像追加以外の文言・価格・計算条件を変更していないこと
- 既存画像を重複追加していないこと
- URL画像を勝手に img/ パスへ変えていないこと
- ファイル名だけの画像は img/ から始まる相対パスにしていること
- ユーザーが希望していないラベルやキャプションを追加していないこと
- 完全な var PRODUCTS = [ ... ]; を出力すること

＝＝＝ここまで＝＝＝