<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 400">
  <defs><style>text{font-family:'Noto Sans JP','Hiragino Sans',sans-serif;}</style></defs>
  <rect width="760" height="400" fill="#FAFAFA" rx="12"/>

  <!-- Title -->
  <rect x="60" y="12" width="640" height="36" fill="#EDE9FE" rx="8"/>
  <text x="380" y="36" text-anchor="middle" font-size="15" font-weight="700" fill="#1A202C">先入先出法 vs 移動平均法——払出単価の決め方の違い</text>

  <!-- 共通在庫データ -->
  <rect x="180" y="60" width="400" height="28" fill="#F3F4F6" rx="6"/>
  <text x="380" y="79" text-anchor="middle" font-size="11" fill="#374151">【共通データ】4/1 前月繰越 10個 @100円　　4/10 仕入 10個 @120円</text>

  <!-- ── 左：先入先出法 ── -->
  <rect x="16" y="100" width="356" height="30" fill="#7C3AED" rx="6 6 0 0"/>
  <text x="194" y="121" text-anchor="middle" font-size="13" font-weight="700" fill="#fff">先入先出法（FIFO・せんにゅうせんしゅつほう）</text>

  <!-- 在庫積み重ね図 -->
  <!-- 新ロット（上） -->
  <rect x="30" y="140" width="160" height="56" fill="#C4B5FD" rx="6"/>
  <text x="110" y="162" text-anchor="middle" font-size="11" font-weight="700" fill="#4C1D95">4/10 仕入 10個</text>
  <text x="110" y="180" text-anchor="middle" font-size="12" font-weight="700" fill="#4C1D95">@120円 / 個</text>

  <!-- 旧ロット（下） -->
  <rect x="30" y="200" width="160" height="56" fill="#DDD6FE" rx="6"/>
  <text x="110" y="222" text-anchor="middle" font-size="11" font-weight="700" fill="#5B21B6">前月繰越 10個</text>
  <text x="110" y="240" text-anchor="middle" font-size="12" font-weight="700" fill="#5B21B6">@100円 / 個</text>

  <!-- 矢印（下から払い出す） -->
  <line x1="193" y1="228" x2="234" y2="228" stroke="#7C3AED" stroke-width="2"/>
  <polygon points="232,223 232,233 240,228" fill="#7C3AED"/>
  <text x="242" y="218" font-size="10" fill="#5B21B6">古い順に</text>
  <text x="242" y="232" font-size="10" fill="#5B21B6">払い出す</text>

  <!-- 払出ボックス -->
  <rect x="258" y="186" width="108" height="58" fill="#EDE9FE" rx="6" stroke="#7C3AED" stroke-width="1.5"/>
  <text x="312" y="208" text-anchor="middle" font-size="10" font-weight="700" fill="#5B21B6">払出単価</text>
  <text x="312" y="226" text-anchor="middle" font-size="15" font-weight="700" fill="#4C1D95">@100円</text>
  <text x="312" y="242" text-anchor="middle" font-size="10" fill="#5B21B6">古いロットから</text>

  <!-- 説明 -->
  <rect x="30" y="266" width="336" height="56" fill="#F5F3FF" rx="6"/>
  <text x="198" y="285" text-anchor="middle" font-size="11" font-weight="700" fill="#5B21B6">先に仕入れた在庫から先に払い出す</text>
  <text x="198" y="303" text-anchor="middle" font-size="11" fill="#374151">古いロット（@100円）が先に出るため</text>
  <text x="198" y="318" text-anchor="middle" font-size="11" fill="#374151">売上原価が低め → 利益が多めに出る傾向</text>

  <!-- ── 右：移動平均法 ── -->
  <rect x="388" y="100" width="356" height="30" fill="#0369A1" rx="6 6 0 0"/>
  <text x="566" y="121" text-anchor="middle" font-size="13" font-weight="700" fill="#fff">移動平均法（いどうへいきんほう）</text>

  <!-- 在庫混合図 -->
  <!-- 仕入前 -->
  <rect x="402" y="140" width="88" height="56" fill="#BAE6FD" rx="6"/>
  <text x="446" y="162" text-anchor="middle" font-size="11" font-weight="700" fill="#0C4A6E">旧10個</text>
  <text x="446" y="178" text-anchor="middle" font-size="11" fill="#0C4A6E">@100</text>

  <!-- 矢印混ぜる -->
  <line x1="492" y1="168" x2="516" y2="168" stroke="#0369A1" stroke-width="2"/>
  <polygon points="514,163 514,173 522,168" fill="#0369A1"/>

  <!-- 平均計算ボックス -->
  <rect x="524" y="142" width="88" height="52" fill="#075985" rx="6"/>
  <text x="568" y="162" text-anchor="middle" font-size="10" font-weight="700" fill="#fff">新10個</text>
  <text x="568" y="178" text-anchor="middle" font-size="10" fill="#BAE6FD">@120</text>

  <!-- 混合後 -->
  <line x1="614" y1="168" x2="636" y2="168" stroke="#0369A1" stroke-width="2"/>
  <polygon points="634,163 634,173 642,168" fill="#0369A1"/>
  <rect x="642" y="140" width="96" height="56" fill="#0EA5E9" rx="6"/>
  <text x="690" y="158" text-anchor="middle" font-size="10" font-weight="700" fill="#fff">混合 20個</text>
  <text x="690" y="174" text-anchor="middle" font-size="11" font-weight="700" fill="#fff">@110円</text>
  <text x="690" y="190" text-anchor="middle" font-size="9" fill="#E0F2FE">平均単価</text>

  <!-- 計算式 -->
  <rect x="402" y="204" width="336" height="42" fill="#E0F2FE" rx="6"/>
  <text x="570" y="222" text-anchor="middle" font-size="11" fill="#374151">平均単価 ＝（10×100 ＋ 10×120）÷ 20</text>
  <text x="570" y="238" text-anchor="middle" font-size="12" font-weight="700" fill="#0369A1">＝ 2,200 ÷ 20 ＝ 110円 / 個</text>

  <!-- 説明 -->
  <rect x="402" y="266" width="336" height="56" fill="#F0F9FF" rx="6"/>
  <text x="570" y="285" text-anchor="middle" font-size="11" font-weight="700" fill="#0369A1">仕入のたびに平均単価を再計算する</text>
  <text x="570" y="303" text-anchor="middle" font-size="11" fill="#374151">混ぜて平均化するため単価が安定する</text>
  <text x="570" y="318" text-anchor="middle" font-size="11" fill="#374151">計算が多いが、価格変動の影響を均せる</text>

  <!-- 下部まとめ -->
  <rect x="16" y="336" width="728" height="48" fill="#FFF7ED" rx="8" stroke="#FCD34D" stroke-width="1"/>
  <text x="380" y="356" text-anchor="middle" font-size="12" font-weight="700" fill="#92400E">🎯 先入先出法：古い順に払出し→単価は変わらない　移動平均法：仕入のたびに再計算→単価がなだらかに変化</text>
  <text x="380" y="374" text-anchor="middle" font-size="11" fill="#374151">どちらの方法も問題文に指定がある——指示通りの方法で計算してください</text>
</svg>
