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

  <text x="400" y="30" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">売掛金 vs 買掛金——借方・貸方の増減マップ</text>

  <!-- 売掛金 ─────────────────────── -->
  <rect x="16" y="52" width="368" height="38" rx="10" fill="#93C5FD"/>
  <text x="200" y="72" text-anchor="middle" font-size="13.5" font-weight="700" fill="#fff">売掛金（うりかけきん）</text>
  <text x="200" y="86" text-anchor="middle" font-size="9.5" fill="#EFF6FF">資産（ざいさん）— 後でもらえる権利</text>

  <line x1="16" y1="90" x2="384" y2="90" stroke="#93C5FD" stroke-width="1.5"/>
  <line x1="200" y1="90" x2="200" y2="254" stroke="#93C5FD" stroke-width="1.5"/>

  <rect x="16" y="90" width="184" height="22" fill="#DBEAFE"/>
  <text x="108" y="106" text-anchor="middle" font-size="11" font-weight="700" fill="#1D4ED8">借方（左）</text>
  <rect x="200" y="90" width="184" height="22" fill="#EFF6FF"/>
  <text x="292" y="106" text-anchor="middle" font-size="11" font-weight="700" fill="#6B7280">貸方（右）</text>

  <rect x="20" y="116" width="176" height="72" rx="8" fill="#DBEAFE"/>
  <text x="108" y="138" text-anchor="middle" font-size="12" font-weight="700" fill="#1D4ED8">売上時に増える ↑</text>
  <text x="108" y="155" text-anchor="middle" font-size="10.5" fill="#374151">仕訳：売掛金／売上</text>
  <text x="108" y="178" text-anchor="middle" font-size="9.5" fill="#4B5563">後でもらえる権利が発生</text>

  <rect x="204" y="116" width="176" height="72" rx="8" fill="#EFF6FF"/>
  <text x="292" y="138" text-anchor="middle" font-size="12" font-weight="700" fill="#0369A1">回収時に減る ↓</text>
  <text x="292" y="155" text-anchor="middle" font-size="10.5" fill="#374151">仕訳：現金／売掛金</text>
  <text x="292" y="178" text-anchor="middle" font-size="9.5" fill="#4B5563">現金を受け取り権利が消える</text>

  <rect x="20" y="194" width="360" height="26" rx="8" fill="#BFDBFE"/>
  <text x="200" y="212" text-anchor="middle" font-size="11" font-weight="700" fill="#1D4ED8">残高 ＝ まだ回収できていない売上代金</text>

  <!-- 買掛金 ─────────────────────── -->
  <rect x="416" y="52" width="368" height="38" rx="10" fill="#F9A8D4"/>
  <text x="600" y="72" text-anchor="middle" font-size="13.5" font-weight="700" fill="#fff">買掛金（かいかけきん）</text>
  <text x="600" y="86" text-anchor="middle" font-size="9.5" fill="#FCE7F3">負債（ふさい）— 後で払わないといけない義務</text>

  <line x1="416" y1="90" x2="784" y2="90" stroke="#F9A8D4" stroke-width="1.5"/>
  <line x1="600" y1="90" x2="600" y2="254" stroke="#F9A8D4" stroke-width="1.5"/>

  <rect x="416" y="90" width="184" height="22" fill="#FCE7F3"/>
  <text x="508" y="106" text-anchor="middle" font-size="11" font-weight="700" fill="#6B7280">借方（左）</text>
  <rect x="600" y="90" width="184" height="22" fill="#FDF2F8"/>
  <text x="692" y="106" text-anchor="middle" font-size="11" font-weight="700" fill="#9D174D">貸方（右）</text>

  <rect x="420" y="116" width="176" height="72" rx="8" fill="#FCE7F3"/>
  <text x="508" y="138" text-anchor="middle" font-size="12" font-weight="700" fill="#9D174D">支払時に減る ↓</text>
  <text x="508" y="155" text-anchor="middle" font-size="10.5" fill="#374151">仕訳：買掛金／現金</text>
  <text x="508" y="178" text-anchor="middle" font-size="9.5" fill="#4B5563">現金を払い義務が消える</text>

  <rect x="604" y="116" width="176" height="72" rx="8" fill="#FDF2F8"/>
  <text x="692" y="138" text-anchor="middle" font-size="12" font-weight="700" fill="#DB2777">仕入時に増える ↑</text>
  <text x="692" y="155" text-anchor="middle" font-size="10.5" fill="#374151">仕訳：仕入／買掛金</text>
  <text x="692" y="178" text-anchor="middle" font-size="9.5" fill="#4B5563">後で払う義務が発生</text>

  <rect x="420" y="194" width="360" height="26" rx="8" fill="#F9A8D4"/>
  <text x="600" y="212" text-anchor="middle" font-size="11" font-weight="700" fill="#831843">残高 ＝ まだ支払っていない仕入代金</text>

  <!-- VS -->
  <circle cx="400" cy="160" r="20" fill="#F0FFF4" stroke="#86EFAC" stroke-width="2"/>
  <text x="400" y="165" text-anchor="middle" font-size="12" font-weight="700" fill="#166534">VS</text>

  <!-- まとめ -->
  <rect x="16" y="236" width="768" height="166" rx="14" fill="#F0FDF4" stroke="#86EFAC" stroke-width="2"/>
  <text x="400" y="260" text-anchor="middle" font-size="13" font-weight="700" fill="#166534">🎯 まとめ：2つの科目の正体</text>

  <rect x="30" y="272" width="340" height="118" rx="10" fill="#DBEAFE"/>
  <text x="200" y="294" text-anchor="middle" font-size="13" font-weight="700" fill="#1D4ED8">売掛金（資産）</text>
  <text x="200" y="314" text-anchor="middle" font-size="10.5" fill="#374151">商品を売ったのに</text>
  <text x="200" y="332" text-anchor="middle" font-size="10.5" fill="#374151">まだお金をもらっていない状態</text>
  <text x="200" y="352" text-anchor="middle" font-size="11" font-weight="700" fill="#1D4ED8">売るたびに増え、回収で消える</text>
  <text x="200" y="372" text-anchor="middle" font-size="9.5" fill="#4B5563">売掛金 → 借方（左）に記入で増加</text>

  <rect x="430" y="272" width="340" height="118" rx="10" fill="#FCE7F3"/>
  <text x="600" y="294" text-anchor="middle" font-size="13" font-weight="700" fill="#9D174D">買掛金（負債）</text>
  <text x="600" y="314" text-anchor="middle" font-size="10.5" fill="#374151">商品を買ったのに</text>
  <text x="600" y="332" text-anchor="middle" font-size="10.5" fill="#374151">まだお金を払っていない状態</text>
  <text x="600" y="352" text-anchor="middle" font-size="11" font-weight="700" fill="#9D174D">買うたびに増え、支払いで消える</text>
  <text x="600" y="372" text-anchor="middle" font-size="9.5" fill="#4B5563">買掛金 → 貸方（右）に記入で増加</text>
</svg>
