<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 380" width="760" height="380">
  <defs>
    <style>text { font-family: 'Noto Sans JP','Hiragino Sans',sans-serif; }</style>
  </defs>
  <rect width="760" height="380" rx="12" fill="#F8FAFC"/>
  <text x="380" y="36" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">お店の基本的な取引——仕入れ・販売・利益の流れ</text>

  <!-- 仕入れ先 box -->
  <rect x="30" y="66" width="170" height="110" rx="10" fill="#FFF7ED" stroke="#FDB97D" stroke-width="2"/>
  <text x="115" y="100" text-anchor="middle" font-size="28" fill="#F97316">🏭</text>
  <text x="115" y="128" text-anchor="middle" font-size="13" font-weight="700" fill="#C2410C">仕入れ先</text>
  <text x="115" y="148" text-anchor="middle" font-size="11" fill="#92400E">（メーカー・卸）</text>

  <!-- 矢印: 仕入れ先→お店 -->
  <polygon points="242,121 230,115 230,127" fill="#64748B"/>
  <line x1="200" y1="121" x2="242" y2="121" stroke="#64748B" stroke-width="2"/>
  <rect x="196" y="88" width="50" height="22" rx="5" fill="#FFEDD5"/>
  <text x="221" y="103" text-anchor="middle" font-size="10.5" font-weight="700" fill="#C2410C">¥100</text>
  <text x="221" y="118" text-anchor="middle" font-size="9" fill="#92400E">仕入れる</text>

  <!-- お店 box (center) -->
  <rect x="246" y="52" width="268" height="140" rx="12" fill="#EFF6FF" stroke="#93C5FD" stroke-width="2.5"/>
  <text x="380" y="88" text-anchor="middle" font-size="32" fill="#3B82F6">🏪</text>
  <text x="380" y="118" text-anchor="middle" font-size="15" font-weight="700" fill="#1E40AF">お店（会社）</text>
  <text x="380" y="138" text-anchor="middle" font-size="11" fill="#1E3A8A">取引を記録して管理する</text>
  <text x="380" y="156" text-anchor="middle" font-size="11" fill="#1E3A8A">← これが「簿記」の役割</text>
  <text x="380" y="178" text-anchor="middle" font-size="10" fill="#94A3B8">（仕入原価¥100 → 売値¥150）</text>

  <!-- 矢印: お店→お客さん -->
  <polygon points="560,121 548,115 548,127" fill="#64748B"/>
  <line x1="514" y1="121" x2="560" y2="121" stroke="#64748B" stroke-width="2"/>
  <rect x="514" y="88" width="50" height="22" rx="5" fill="#DCFCE7"/>
  <text x="539" y="103" text-anchor="middle" font-size="10.5" font-weight="700" fill="#166534">¥150</text>
  <text x="539" y="118" text-anchor="middle" font-size="9" fill="#15803D">売る</text>

  <!-- お客さん box -->
  <rect x="560" y="66" width="170" height="110" rx="10" fill="#F0FDF4" stroke="#86EFAC" stroke-width="2"/>
  <text x="645" y="100" text-anchor="middle" font-size="28" fill="#22C55E">👤</text>
  <text x="645" y="128" text-anchor="middle" font-size="13" font-weight="700" fill="#166534">お客さん</text>
  <text x="645" y="148" text-anchor="middle" font-size="11" fill="#15803D">（消費者）</text>

  <!-- 利益の説明 -->
  <rect x="246" y="212" width="268" height="84" rx="10" fill="#FEFCE8" stroke="#FDE047" stroke-width="2"/>
  <text x="380" y="236" text-anchor="middle" font-size="12" font-weight="700" fill="#713F12">利益（もうけ）の計算</text>
  <text x="380" y="260" text-anchor="middle" font-size="14" font-weight="700" fill="#374151">売上 ¥150 − 仕入 ¥100 ＝ 利益 ¥50</text>
  <text x="380" y="285" text-anchor="middle" font-size="11" fill="#92400E">この「¥50のもうけ」を正確に記録するのが簿記のゴール</text>

  <!-- bottom: 取引の矢印説明 -->
  <rect x="30" y="312" width="700" height="54" rx="8" fill="#F1F5F9" stroke="#CBD5E1" stroke-width="1"/>
  <text x="380" y="332" text-anchor="middle" font-size="11" fill="#475569">💡「取引」とは、<tspan font-weight="700">資産・負債・収益・費用が変化する出来事</tspan>のことです</text>
  <text x="380" y="352" text-anchor="middle" font-size="11" fill="#475569">仕入れ（費用の発生）・売上（収益の発生）・現金の受け取り——どれも「取引」</text>
</svg>
