<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">簿記の流れ——3ステップで理解する</text>

  <!-- Step 1 -->
  <rect x="30" y="60" width="210" height="224" rx="10" fill="#EFF6FF" stroke="#93C5FD" stroke-width="2"/>
  <rect x="30" y="60" width="210" height="38" rx="10" fill="#3B82F6"/>
  <rect x="30" y="86" width="210" height="12" fill="#3B82F6"/>
  <text x="135" y="84" text-anchor="middle" font-size="13" font-weight="700" fill="#fff">STEP 1　取引をメモ</text>
  <text x="135" y="120" text-anchor="middle" font-size="30" fill="#3B82F6">✏️</text>
  <text x="135" y="154" text-anchor="middle" font-size="12" font-weight="700" fill="#1E40AF">仕訳（しわけ）</text>
  <text x="135" y="174" text-anchor="middle" font-size="11" fill="#374151">取引が起きるたびに</text>
  <text x="135" y="192" text-anchor="middle" font-size="11" fill="#374151">「何が増えて何が減ったか」</text>
  <text x="135" y="210" text-anchor="middle" font-size="11" fill="#374151">を決まったルールで記録</text>
  <!-- sample shiwake -->
  <rect x="50" y="224" width="170" height="44" rx="6" fill="#DBEAFE"/>
  <text x="135" y="242" text-anchor="middle" font-size="10.5" fill="#1D4ED8">（例）現金¥150を受け取った</text>
  <text x="135" y="260" text-anchor="middle" font-size="10.5" fill="#1D4ED8">現金150 ／ 売上150</text>

  <!-- arrow 1→2 -->
  <polygon points="272,172 258,166 258,178" fill="#64748B"/>
  <line x1="240" y1="172" x2="272" y2="172" stroke="#64748B" stroke-width="2"/>
  <text x="256" y="162" text-anchor="middle" font-size="9" fill="#64748B">集計</text>

  <!-- Step 2 -->
  <rect x="275" y="60" width="210" height="224" rx="10" fill="#F0FDF4" stroke="#86EFAC" stroke-width="2"/>
  <rect x="275" y="60" width="210" height="38" rx="10" fill="#22C55E"/>
  <rect x="275" y="86" width="210" height="12" fill="#22C55E"/>
  <text x="380" y="84" text-anchor="middle" font-size="13" font-weight="700" fill="#fff">STEP 2　科目ごとに整理</text>
  <text x="380" y="120" text-anchor="middle" font-size="30" fill="#22C55E">📊</text>
  <text x="380" y="154" text-anchor="middle" font-size="12" font-weight="700" fill="#166534">総勘定元帳（T字）</text>
  <text x="380" y="174" text-anchor="middle" font-size="11" fill="#374151">「現金」「売上」など勘定科目</text>
  <text x="380" y="192" text-anchor="middle" font-size="11" fill="#374151">ごとに仕訳を集計。</text>
  <text x="380" y="210" text-anchor="middle" font-size="11" fill="#374151">期末の残高を算出する。</text>
  <!-- T字 mini -->
  <rect x="300" y="224" width="160" height="44" rx="6" fill="#DCFCE7"/>
  <line x1="380" y1="224" x2="380" y2="268" stroke="#22C55E" stroke-width="1.5"/>
  <text x="340" y="242" text-anchor="middle" font-size="10" fill="#166534">借方</text>
  <text x="420" y="242" text-anchor="middle" font-size="10" fill="#166534">貸方</text>
  <text x="340" y="258" text-anchor="middle" font-size="10" fill="#166534">＋300</text>
  <text x="420" y="258" text-anchor="middle" font-size="10" fill="#166534">△150</text>

  <!-- arrow 2→3 -->
  <polygon points="518,172 504,166 504,178" fill="#64748B"/>
  <line x1="485" y1="172" x2="518" y2="172" stroke="#64748B" stroke-width="2"/>
  <text x="502" y="162" text-anchor="middle" font-size="9" fill="#64748B">まとめ</text>

  <!-- Step 3 -->
  <rect x="520" y="60" width="210" height="224" rx="10" fill="#FFF7ED" stroke="#FDB97D" stroke-width="2"/>
  <rect x="520" y="60" width="210" height="38" rx="10" fill="#F97316"/>
  <rect x="520" y="86" width="210" height="12" fill="#F97316"/>
  <text x="625" y="84" text-anchor="middle" font-size="13" font-weight="700" fill="#fff">STEP 3　報告書を作る</text>
  <text x="625" y="120" text-anchor="middle" font-size="30" fill="#F97316">📋</text>
  <text x="625" y="154" text-anchor="middle" font-size="12" font-weight="700" fill="#C2410C">財務諸表（決算書）</text>
  <text x="625" y="174" text-anchor="middle" font-size="11" fill="#374151">1年分の仕訳をまとめて</text>
  <text x="625" y="192" text-anchor="middle" font-size="11" fill="#374151">「損益計算書（P/L）」と</text>
  <text x="625" y="210" text-anchor="middle" font-size="11" fill="#374151">「貸借対照表（B/S）」を作成</text>
  <!-- mini labels -->
  <rect x="540" y="224" width="170" height="44" rx="6" fill="#FFEDD5"/>
  <text x="625" y="243" text-anchor="middle" font-size="10.5" fill="#C2410C">P/L → 儲けはいくらか</text>
  <text x="625" y="260" text-anchor="middle" font-size="10.5" fill="#C2410C">B/S → 財産はいくらあるか</text>

  <!-- bottom -->
  <rect x="30" y="302" width="700" height="62" rx="8" fill="#F1F5F9" stroke="#CBD5E1" stroke-width="1"/>
  <text x="380" y="322" text-anchor="middle" font-size="11" fill="#475569">💡 簿記の勉強では、この3ステップを逆順にたどることで理解が深まります</text>
  <text x="380" y="342" text-anchor="middle" font-size="11" fill="#475569">「財務諸表（ゴール）を先にイメージ → 元帳の仕組みを理解 → 仕訳ルールを覚える」</text>
  <text x="380" y="358" text-anchor="middle" font-size="10" fill="#94A3B8">ゴールが見えてから作業手順を学ぶと、なぜこのルールが必要なのかが分かりやすい</text>
</svg>
