{"id":7,"date":"2026-08-29T12:39:15","date_gmt":"2026-08-29T03:39:15","guid":{"rendered":"https:\/\/www.boo-life-sim.com\/?p=7"},"modified":"2026-09-01T18:47:51","modified_gmt":"2026-09-01T09:47:51","slug":"%e5%b0%86%e6%9d%a5%e3%81%ae%e8%b3%87%e7%94%a3%e3%81%8c%e3%82%8f%e3%81%8b%e3%82%8b%ef%bc%81","status":"publish","type":"post","link":"https:\/\/www.boo-life-sim.com\/?p=7","title":{"rendered":"\u3000\u3000\u5c06\u6765\u306e\u8cc7\u7523\u304c\u308f\u304b\u308b\uff01"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"asset-sim-wp-wrapper\">\n  <style>\n    .asset-sim-wp-wrapper {\n      --primary: #2563eb;\n      --primary-hover: #1d4ed8;\n      --bg: #f1f5f9;\n      --card-bg: #ffffff;\n      --text: #0f172a;\n      --text-muted: #64748b;\n      --border: #e2e8f0;\n      --success-bg: #ecfdf5;\n      --success-border: #10b981;\n      --success-text: #065f46;\n      --danger-bg: #fef2f2;\n      --danger-border: #ef4444;\n      --danger-text: #991b1b;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n      background-color: var(--bg);\n      color: var(--text);\n      padding: 16px;\n      line-height: 1.5;\n      border-radius: 12px;\n      box-sizing: border-box;\n    }\n    .asset-sim-wp-wrapper * {\n      box-sizing: border-box;\n    }\n    .asset-sim-wp-wrapper .container {\n      max-width: 900px;\n      margin: 0 auto;\n    }\n    .asset-sim-wp-wrapper h1 {\n      text-align: center;\n      font-size: 1.6rem;\n      margin: 10px 0 6px 0;\n      color: var(--text);\n      line-height: 1.3;\n    }\n    .asset-sim-wp-wrapper .disclaimer-top {\n      font-size: 0.75rem;\n      color: var(--text-muted);\n      margin-bottom: 20px;\n      text-align: center;\n    }\n    .asset-sim-wp-wrapper .input-warning-notice {\n      font-size: 0.8rem;\n      color: #b91c1c;\n      background-color: #fef2f2;\n      border: 1px solid #fecaca;\n      padding: 8px 12px;\n      border-radius: 6px;\n      margin-bottom: 12px;\n      text-align: center;\n      font-weight: 600;\n    }\n    .asset-sim-wp-wrapper .card {\n      background: var(--card-bg);\n      border-radius: 12px;\n      padding: 20px;\n      margin-bottom: 20px;\n      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n      border: 1px solid var(--border);\n    }\n    .asset-sim-wp-wrapper .card-title {\n      font-weight: 700;\n      font-size: 1.1rem;\n      margin-bottom: 16px;\n      border-bottom: 2px solid var(--border);\n      padding-bottom: 8px;\n      color: var(--text);\n    }\n    .asset-sim-wp-wrapper .grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 16px;\n    }\n    .asset-sim-wp-wrapper .full-width {\n      grid-column: 1 \/ -1;\n    }\n    @media (max-width: 640px) {\n      .asset-sim-wp-wrapper .grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .asset-sim-wp-wrapper label {\n      display: block;\n      font-size: 0.85rem;\n      font-weight: 600;\n      margin-bottom: 6px;\n      color: #334155;\n    }\n    .asset-sim-wp-wrapper input[type=\"text\"], \n    .asset-sim-wp-wrapper input[type=\"number\"], \n    .asset-sim-wp-wrapper input[type=\"date\"], \n    .asset-sim-wp-wrapper select {\n      width: 100%;\n      padding: 6px 2px;\n      border: 1px solid var(--border);\n      border-radius: 8px;\n      font-size: 0.85rem;\n      background-color: #fff;\n      transition: border-color 0.2s;\n      margin: 0;\n    }\n    .asset-sim-wp-wrapper input:focus, \n    .asset-sim-wp-wrapper select:focus {\n      outline: none;\n      border-color: var(--primary);\n    }\n\n    .asset-sim-wp-wrapper input.bg-income,\n    .asset-sim-wp-wrapper select.bg-income {\n      background-color: #eff6ff !important;\n      border-color: #bfdbfe !important;\n    }\n    .asset-sim-wp-wrapper input.bg-expense,\n    .asset-sim-wp-wrapper select.bg-expense {\n      background-color: #fef2f2 !important;\n      border-color: #fecaca !important;\n    }\n    .asset-sim-wp-wrapper input.bg-asset,\n    .asset-sim-wp-wrapper select.bg-asset {\n      background-color: #fefce8 !important;\n      border-color: #fef08a !important;\n    }\n\n    .asset-sim-wp-wrapper .summary-badges-container {\n      margin-top: 20px;\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 12px;\n    }\n    .asset-sim-wp-wrapper .balance-box {\n      padding: 16px 20px;\n      border-radius: 10px;\n      font-size: 1rem;\n      font-weight: 600;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.02);\n    }\n    .asset-sim-wp-wrapper .balance-box.positive { \n      background-color: var(--success-bg); \n      border: 2px solid var(--success-border);\n      color: var(--success-text); \n    }\n    .asset-sim-wp-wrapper .balance-box.negative { \n      background-color: var(--danger-bg); \n      border: 2px solid var(--danger-border);\n      color: var(--danger-text); \n    }\n    .asset-sim-wp-wrapper .balance-box.invest-info { \n      background-color: #eff6ff; \n      border: 2px solid #3b82f6;\n      color: #1e40af; \n    }\n    .asset-sim-wp-wrapper .balance-title {\n      font-size: 1.15rem;\n      font-weight: 800;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .asset-sim-wp-wrapper .balance-amount {\n      font-size: 1.4rem;\n      color: #047857;\n      text-decoration: underline;\n    }\n    .asset-sim-wp-wrapper .balance-box.negative .balance-amount {\n      color: #b91c1c;\n    }\n    .asset-sim-wp-wrapper .balance-box.invest-info .balance-amount {\n      color: #1d4ed8;\n    }\n    .asset-sim-wp-wrapper .balance-sub {\n      font-size: 0.8rem;\n      font-weight: normal;\n      opacity: 0.9;\n    }\n\n    .asset-sim-wp-wrapper .responsive-table-container {\n      width: 100%;\n      overflow-x: auto;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    .asset-sim-wp-wrapper .responsive-table {\n      width: 100%;\n      border-collapse: collapse;\n      margin-top: 10px;\n      font-size: 0.8rem;\n      table-layout: auto;\n    }\n    .asset-sim-wp-wrapper .responsive-table th, \n    .asset-sim-wp-wrapper .responsive-table td {\n      border: 1px solid var(--border);\n      padding: 6px 3px;\n      text-align: left;\n      white-space: nowrap;\n    }\n    .asset-sim-wp-wrapper .responsive-table th { background-color: #f8fafc; }\n\n    @media (max-width: 640px) {\n      .asset-sim-wp-wrapper .responsive-table, \n      .asset-sim-wp-wrapper .responsive-table tbody, \n      .asset-sim-wp-wrapper .responsive-table tr, \n      .asset-sim-wp-wrapper .responsive-table td {\n        display: block;\n        width: 100%;\n      }\n      .asset-sim-wp-wrapper .responsive-table thead { display: none; }\n      .asset-sim-wp-wrapper .responsive-table tr {\n        margin-bottom: 12px;\n        border: 1px solid var(--border);\n        border-radius: 8px;\n        padding: 8px;\n        background-color: #fff;\n      }\n      .asset-sim-wp-wrapper .responsive-table td {\n        border: none;\n        padding: 4px 0;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        white-space: normal;\n      }\n      .asset-sim-wp-wrapper .responsive-table td::before {\n        content: attr(data-label);\n        font-weight: bold;\n        font-size: 0.8rem;\n        color: var(--text-muted);\n        margin-right: 10px;\n      }\n    }\n\n    .asset-sim-wp-wrapper .btn {\n      background-color: var(--primary);\n      color: white;\n      border: none;\n      padding: 10px 18px;\n      border-radius: 8px;\n      cursor: pointer;\n      font-weight: 600;\n      font-size: 0.95rem;\n      transition: background-color 0.2s;\n      display: inline-block;\n      text-decoration: none;\n    }\n    .asset-sim-wp-wrapper .btn:hover { background-color: var(--primary-hover); }\n    .asset-sim-wp-wrapper .btn-secondary { background-color: #64748b; }\n    .asset-sim-wp-wrapper .btn-secondary:hover { background-color: #475569; }\n    .asset-sim-wp-wrapper .btn-danger { \n      background-color: #ef4444; \n      padding: 6px 8px; \n      font-size: 0.75rem; \n      white-space: nowrap;\n      word-break: keep-all;\n    }\n    .asset-sim-wp-wrapper .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }\n    .asset-sim-wp-wrapper .chart-container { position: relative; height: 350px; width: 100%; }\n\n    .asset-sim-wp-wrapper .checkbox-label {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      cursor: pointer;\n      font-weight: 600;\n      font-size: 0.85rem;\n      user-select: none;\n    }\n    .asset-sim-wp-wrapper .checkbox-label input[type=\"checkbox\"] { width: 16px; height: 16px; cursor: pointer; }\n\n    .asset-sim-wp-wrapper .option-card {\n      border: 1px solid var(--border);\n      border-radius: 10px;\n      padding: 14px 16px;\n      margin-top: 12px;\n      background-color: #f8fafc;\n      transition: all 0.2s;\n    }\n    .asset-sim-wp-wrapper .option-card.active {\n      background-color: #ffffff;\n      border-color: #93c5fd;\n      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.05);\n    }\n    .asset-sim-wp-wrapper .option-content {\n      display: none;\n      margin-top: 12px;\n      padding-top: 12px;\n      border-top: 1px dashed var(--border);\n    }\n    .asset-sim-wp-wrapper .option-card.active .option-content { display: block; }\n    .asset-sim-wp-wrapper .calc-hint { font-size: 0.75rem; color: var(--primary); font-weight: bold; margin-top: 2px; }\n    \n    .asset-sim-wp-wrapper .banner-ad-wrapper {\n      margin-top: 24px;\n      text-align: center;\n    }\n\n    .asset-sim-wp-wrapper .unit-selector {\n      font-size: 0.85rem;\n      font-weight: normal;\n      display: inline-flex;\n      align-items: center;\n      gap: 12px;\n      background: #f8fafc;\n      padding: 4px 12px;\n      border-radius: 6px;\n      border: 1px solid var(--border);\n    }\n    .asset-sim-wp-wrapper .unit-selector label {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      margin: 0;\n      cursor: pointer;\n    }\n\n    .asset-sim-wp-wrapper .period-control-group {\n      display: inline-flex;\n      gap: 8px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n    .asset-sim-wp-wrapper .period-btn-group {\n      display: inline-flex;\n      gap: 4px;\n      background: #f1f5f9;\n      padding: 3px;\n      border-radius: 6px;\n      border: 1px solid var(--border);\n      flex-wrap: wrap;\n    }\n    .asset-sim-wp-wrapper .period-btn {\n      background: transparent;\n      border: none;\n      padding: 4px 10px;\n      font-size: 0.8rem;\n      font-weight: 600;\n      color: var(--text-muted);\n      border-radius: 4px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .asset-sim-wp-wrapper .period-btn.active {\n      background: #ffffff;\n      color: var(--primary);\n      box-shadow: 0 1px 2px rgba(0,0,0,0.1);\n    }\n    .asset-sim-wp-wrapper .custom-period-input {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 0.8rem;\n      color: var(--text-muted);\n      font-weight: 600;\n      background: #f8fafc;\n      padding: 2px 6px;\n      border-radius: 6px;\n      border: 1px solid var(--border);\n    }\n    .asset-sim-wp-wrapper .custom-period-input input[type=\"number\"] {\n      width: 55px !important;\n      padding: 2px 4px !important;\n      font-size: 0.8rem !important;\n      text-align: center;\n    }\n  <\/style>\n\n  <div class=\"container\">\n    <h1>\u8cc7\u7523\u5f62\u6210\uff06\u30e9\u30a4\u30d5\u30d7\u30e9\u30f3\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc<\/h1>\n\n    <div class=\"disclaimer-top\">\n      \u203b\u5f53\u30b5\u30a4\u30c8\u306b\u306f\u30a2\u30d5\u30a3\u30ea\u30a8\u30a4\u30c8\u5e83\u544a\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<br>\n      \u203b\u672c\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u306e\u8a08\u7b97\u7d50\u679c\u306f\u8a66\u7b97\u5024\u3067\u3042\u308a\u3001\u5c06\u6765\u306e\u904b\u7528\u6210\u679c\u3084\u8cc7\u7523\u984d\u3092\u4fdd\u8a3c\u3059\u308b\u3082\u306e\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n    <\/div>\n\n    <!-- \u6ce8\u610f\u66f8\u304d\uff08\u57fa\u672c\u6761\u4ef6\u5165\u529b\u306e\u4e0a\uff09 -->\n    <div class=\"input-warning-notice\">\n      \u26a0\ufe0f \u5165\u529b\u9805\u76ee\u306b\u6f0f\u308c\u304c\u3042\u308b\u3068\u6b63\u5e38\u306b\u30b0\u30e9\u30d5\u304c\u6a5f\u80fd\u3057\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\n    <\/div>\n\n    <!-- 1. \u6761\u4ef6\u30fb\u53ce\u652f\u8a2d\u5b9a -->\n    <div class=\"card\">\n      <div class=\"card-title flex-between\">\n        <span>1. \u57fa\u672c\u6761\u4ef6\u5165\u529b\uff08\u6708\u3005\u306e\u53ce\u652f\u30fb\u8cc7\u7523\u30fb\u9000\u8077\u6642\u671f\u30fb\u5e74\u91d1\u30fb\u8001\u5f8c\u751f\u6d3b\u8cbb\uff09<\/span>\n        <div class=\"unit-selector\">\n          <span>\u91d1\u984d\u5358\u4f4d\uff1a<\/span>\n          <label><input type=\"radio\" name=\"currencyUnit\" value=\"10000\" checked=\"\" onchange=\"changeCurrencyUnit()\"> \u4e07\u5186<\/label>\n          <label><input type=\"radio\" name=\"currencyUnit\" value=\"1000\" onchange=\"changeCurrencyUnit()\"> \u5343\u5186<\/label>\n        <\/div>\n      <\/div>\n      \n      <div class=\"grid\">\n        <!-- \u884c 1 -->\n        <div>\n          <label id=\"lbl_monthlyIncome\">\u6bce\u6708\u306e\u624b\u53d6\u308a\u7d66\u4e0e\uff08\u53ce\u5165\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/label>\n          <input type=\"number\" id=\"monthlyIncome\" class=\"bg-income\" value=\"\" placeholder=\"\u4f8b: 25\" oninput=\"runSimulation()\">\n        <\/div>\n        <div>\n          <label id=\"lbl_bonusIncome\">\u30dc\u30fc\u30ca\u30b9\u624b\u53d6\u308a\u7d66\u4e0e\uff08\u53ce\u5165\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>\/\u56de\u30fb\u5e742\u56de)<\/label>\n          <input type=\"number\" id=\"bonusIncome\" class=\"bg-income\" value=\"\" placeholder=\"\u4f8b: 60\" oninput=\"runSimulation()\">\n        <\/div>\n\n        <!-- \u884c 2 -->\n        <div>\n          <label id=\"lbl_monthlyExpenses\">\u6bce\u6708\u306e\u57fa\u672c\u751f\u6d3b\u8cbb\uff08\u652f\u51fa\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/label>\n          <input type=\"number\" id=\"monthlyExpenses\" class=\"bg-expense\" value=\"\" placeholder=\"\u4f8b: 15\" oninput=\"runSimulation()\">\n        <\/div>\n        <div>\n          <label id=\"lbl_monthlyInvest\">\u6bce\u6708\u306e\u7a4d\u7acb\u6295\u8cc7\u984d\uff08\u652f\u51fa\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/label>\n          <input type=\"number\" id=\"monthlyInvest\" class=\"bg-expense\" value=\"\" placeholder=\"\u4f8b: 5\" oninput=\"runSimulation()\">\n        <\/div>\n\n        <!-- \u884c 3 -->\n        <div>\n          <label id=\"lbl_monthlySavings\">\u6bce\u6708\u306e\u8caf\u91d1\u984d\uff08\u652f\u51fa\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/label>\n          <input type=\"number\" id=\"monthlySavings\" class=\"bg-expense\" value=\"\" placeholder=\"\u4f8b: 4\" oninput=\"runSimulation()\">\n          <div style=\"font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;\">\u203b\u76ee\u6a19\u8caf\u91d1\u984d\u306b\u9054\u3057\u305f\u5834\u5408\u306b\u306f\u81ea\u52d5\u3067\u6295\u8cc7\u306b\u56de\u3057\u307e\u3059<\/div>\n        <\/div>\n        <div>\n          <label id=\"lbl_bonusInvest\">\u30dc\u30fc\u30ca\u30b9\u6295\u8cc7\u984d\uff08\u652f\u51fa\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>\/\u56de\u30fb\u5e742\u56de)<\/label>\n          <input type=\"number\" id=\"bonusInvest\" class=\"bg-expense\" value=\"\" placeholder=\"\u4f8b: 0\" oninput=\"runSimulation()\">\n        <\/div>\n\n        <!-- \u884c 4 -->\n        <div>\n          <label id=\"lbl_simpleAsset\">\u73fe\u5728\u306e\u8caf\u91d1\u984d\uff08\u8cc7\u7523\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/label>\n          <input type=\"number\" id=\"simpleAsset\" class=\"bg-asset\" value=\"\" placeholder=\"\u4f8b: 200\" oninput=\"runSimulation()\">\n        <\/div>\n        <div>\n          <label>\u60f3\u5b9a\u904b\u7528\u5229\u56de\u308a (%)<\/label>\n          <input type=\"number\" id=\"yield\" value=\"\" placeholder=\"\u4f8b: 5.0\" step=\"0.1\" oninput=\"runSimulation()\">\n        <\/div>\n\n        <!-- \u884c 5 -->\n        <div>\n          <label id=\"lbl_targetCash\">\u76ee\u6a19\u8caf\u91d1\u984d (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/label>\n          <input type=\"number\" id=\"targetCash\" value=\"\" placeholder=\"\u4f8b: 500\" oninput=\"runSimulation()\">\n        <\/div>\n        <div>\n          <label>\u7a4d\u7acb\u30fb\u8caf\u84c4\u306e\u958b\u59cb\u5e74 (\u897f\u66a6)<\/label>\n          <input type=\"number\" id=\"investStartYear\" value=\"\" placeholder=\"\u4f8b: 2026\" oninput=\"runSimulation()\">\n          <div style=\"font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;\">\u203b\u7a4d\u7acb\u30fb\u8caf\u91d1\u3092\u958b\u59cb\u3059\u308b\u5e74\u3092\u6307\u5b9a\u3057\u307e\u3059<\/div>\n        <\/div>\n\n        <!-- \u884c 6 -->\n        <div>\n          <label>\u6295\u8cc7\u7d42\u4e86\u5e74 (\u897f\u66a6)<\/label>\n          <input type=\"number\" id=\"investEndYear\" value=\"\" placeholder=\"\u4f8b: 2055\" oninput=\"runSimulation()\">\n          <div style=\"font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;\">\u203b\u3053\u306e\u5e74\u3067\u73fe\u5f79\u6642\u306e\u7a4d\u7acb\u30fb\u8caf\u84c4\u304c\u30b9\u30c8\u30c3\u30d7\u3057\u307e\u3059<\/div>\n        <\/div>\n        <div>\n          <label>\u9000\u8077\u5e74 (\u897f\u66a6)<\/label>\n          <input type=\"number\" id=\"retireYear\" value=\"\" placeholder=\"\u4f8b: 2060\" oninput=\"runSimulation()\">\n          <div style=\"font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;\">\u203b\u3053\u306e\u5e74\u4ee5\u964d\u306f\u8001\u5f8c\u751f\u6d3b\u8cbb\u304c\u9069\u7528\u3055\u308c\u307e\u3059<\/div>\n        <\/div>\n\n        <!-- \u884c 7 -->\n        <div>\n          <label>\u5e74\u91d1\u53d7\u7d66\u958b\u59cb\u5e74 (\u897f\u66a6)<\/label>\n          <input type=\"number\" id=\"pensionStartYearMain\" value=\"\" placeholder=\"\u4f8b: 2061\" oninput=\"runSimulation()\">\n          <div style=\"font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;\">\u203b\u5e74\u91d1\u3092\u53d7\u7d66\u958b\u59cb\u3059\u308b\u897f\u66a6\u3092\u6307\u5b9a\u3057\u307e\u3059<\/div>\n        <\/div>\n        <div>\n          <label id=\"lbl_pensionMonthlyMain\">\u5e74\u91d1\u652f\u7d66\u984d (\u6708\u984d)\uff08\u53ce\u5165\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/label>\n          <input type=\"number\" id=\"pensionMonthlyMain\" class=\"bg-income\" value=\"\" placeholder=\"\u4f8b: 15\" oninput=\"runSimulation()\">\n        <\/div>\n\n        <!-- \u884c 8 -->\n        <div class=\"full-width\">\n          <label id=\"lbl_retireExpenses\">\u8001\u5f8c\u306e\u751f\u6d3b\u8cbb (\u6708\u984d)\uff08\u652f\u51fa\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/label>\n          <input type=\"number\" id=\"retireExpenses\" class=\"bg-expense\" value=\"\" placeholder=\"\u4f8b: 20\" oninput=\"runSimulation()\">\n          <div style=\"font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;\">\u203b\u9000\u8077\u5e74\u4ee5\u964d\u306b\u767a\u751f\u3059\u308b\u60f3\u5b9a\u751f\u6d3b\u8cbb\u3067\u3059<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- \u4f59\u5270\u91d1 \uff06 \u6bce\u6708\u306e\u6295\u8cc7\u5408\u8a08\u30d0\u30c3\u30b8 -->\n      <div class=\"summary-badges-container\">\n        <div id=\"balanceSummary\" class=\"balance-box positive\"><\/div>\n        <div id=\"investSummary\" class=\"balance-box invest-info\"><\/div>\n      <\/div>\n\n      <!-- \u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a -->\n      <div style=\"margin-top: 20px;\">\n        <div style=\"font-weight: 700; font-size: 0.9rem; color: #475569; margin-bottom: 8px;\">\n          \u25bc \u5fc5\u8981\u306b\u5fdc\u3058\u3066\u8ffd\u52a0\u3067\u304d\u308b\u8a73\u7d30\u30aa\u30d7\u30b7\u30e7\u30f3\n        <\/div>\n\n        <!-- \u6295\u8cc7\u7d42\u4e86\u5e74\u4ee5\u964d\u306e\u6295\u8cc7\u8a2d\u5b9a -->\n        <div class=\"option-card\" id=\"optRetireInvestCard\">\n          <label class=\"checkbox-label\" style=\"font-size: 0.95rem;\">\n            <input type=\"checkbox\" id=\"chkRetireInvest\" onchange=\"toggleOption('optRetireInvestCard', this)\">\n            \ud83d\udca1 \u6295\u8cc7\u7d42\u4e86\u5e74\u4ee5\u964d\u306b\u518d\u5ea6\u7a4d\u7acb\u6295\u8cc7\u3092\u8a2d\u5b9a\u3059\u308b\uff08\u652f\u51fa\uff09\n          <\/label>\n          <div class=\"option-content\">\n            <div>\n              <label id=\"lbl_retireMonthlyInvest\">\u6295\u8cc7\u7d42\u4e86\u5e74\u4ee5\u964d\u306e\u6bce\u6708\u306e\u7a4d\u7acb\u984d (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/label>\n              <input type=\"number\" id=\"retireMonthlyInvest\" class=\"bg-expense\" value=\"\" placeholder=\"\u4f8b: 2\" oninput=\"runSimulation()\">\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- \u4fdd\u6709\u682a\u5f0f -->\n        <div class=\"option-card\" id=\"optAssetCard\">\n          <label class=\"checkbox-label\" style=\"font-size: 0.95rem;\">\n            <input type=\"checkbox\" id=\"chkAsset\" onchange=\"toggleOption('optAssetCard', this)\">\n            \ud83d\udcc8 \u4fdd\u6709\u682a\u5f0f\u306e\u60c5\u5831\u3092\u8ffd\u52a0\u3059\u308b\uff08\u8cc7\u7523\uff09\n          <\/label>\n          <div class=\"option-content\">\n            <div class=\"responsive-table-container\">\n              <table class=\"responsive-table\">\n                <thead>\n                  <tr>\n                    <th id=\"th_assetAmount\">\u91d1\u984d (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/th>\n                    <th>\u60f3\u5b9a\u5e74\u5229 (%)<\/th>\n                    <th>\u64cd\u4f5c<\/th>\n                  <\/tr>\n                <\/thead>\n                <tbody id=\"assetTbody\"><\/tbody>\n              <\/table>\n            <\/div>\n            <button class=\"btn btn-secondary\" style=\"margin-top: 10px;\" onclick=\"addAssetRow()\">\uff0b \u682a\u5f0f\u3092\u8ffd\u52a0<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- \u4f4f\u5b85\u30ed\u30fc\u30f3 \/ \u5bb6\u8cc3 -->\n        <div class=\"option-card\" id=\"optHousingCard\">\n          <label class=\"checkbox-label\" style=\"font-size: 0.95rem;\">\n            <input type=\"checkbox\" id=\"chkHousing\" onchange=\"toggleOption('optHousingCard', this)\">\n            \ud83c\udfe0 \u4f4f\u5b85\u30ed\u30fc\u30f3 \/ \u5bb6\u8cc3\u306e\u8ca0\u62c5\u3092\u8ffd\u52a0\u3059\u308b\uff08\u652f\u51fa\uff09\n          <\/label>\n          <div class=\"option-content\">\n            <div class=\"responsive-table-container\">\n              <table class=\"responsive-table\">\n                <thead>\n                  <tr>\n                    <th style=\"min-width: 110px;\">\u533a\u5206<\/th>\n                    <th style=\"min-width: 110px;\">\u5165\u529b\u65b9\u6cd5<\/th>\n                    <th style=\"min-width: 120px;\" id=\"th_housingAmount\">\u6708\u984d \/ \u501f\u5165\u984d (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/th>\n                    <th style=\"min-width: 60px;\">\u5e74\u5229 (%)<\/th>\n                    <th style=\"min-width: 60px;\">\u671f\u9593 (\u5e74)<\/th>\n                    <th style=\"min-width: 65px;\">\u958b\u59cb\u5e74 (\u897f\u66a6)<\/th>\n                    <th style=\"min-width: 45px;\">\u64cd\u4f5c<\/th>\n                  <\/tr>\n                <\/thead>\n                <tbody id=\"housingTbody\"><\/tbody>\n              <\/table>\n            <\/div>\n            <button class=\"btn btn-secondary\" style=\"margin-top: 10px;\" onclick=\"addHousingRow()\">\uff0b \u4f4f\u5c45\u8cbb\u8a2d\u5b9a\u3092\u8ffd\u52a0<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- \u30de\u30a4\u30ab\u30fc\u30ed\u30fc\u30f3 -->\n        <div class=\"option-card\" id=\"optCarCard\">\n          <label class=\"checkbox-label\" style=\"font-size: 0.95rem;\">\n            <input type=\"checkbox\" id=\"chkCar\" onchange=\"toggleOption('optCarCard', this)\">\n            \ud83d\ude97 \u30de\u30a4\u30ab\u30fc\u30ed\u30fc\u30f3\u306e\u8ca0\u62c5\u3092\u8ffd\u52a0\u3059\u308b\uff08\u652f\u51fa\uff09\n          <\/label>\n          <div class=\"option-content\">\n            <div class=\"responsive-table-container\">\n              <table class=\"responsive-table\">\n                <thead>\n                  <tr>\n                    <th style=\"min-width: 110px;\">\u5165\u529b\u65b9\u6cd5<\/th>\n                    <th style=\"min-width: 120px;\" id=\"th_carAmount\">\u6708\u984d \/ \u501f\u5165\u984d (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/th>\n                    <th style=\"min-width: 60px;\">\u5e74\u5229 (%)<\/th>\n                    <th style=\"min-width: 60px;\">\u671f\u9593 (\u5e74)<\/th>\n                    <th style=\"min-width: 65px;\">\u958b\u59cb\u5e74 (\u897f\u66a6)<\/th>\n                    <th style=\"min-width: 45px;\">\u64cd\u4f5c<\/th>\n                  <\/tr>\n                <\/thead>\n                <tbody id=\"carTbody\"><\/tbody>\n              <\/table>\n            <\/div>\n            <button class=\"btn btn-secondary\" style=\"margin-top: 10px;\" onclick=\"addCarRow()\">\uff0b \u30de\u30a4\u30ab\u30fc\u30ed\u30fc\u30f3\u3092\u8ffd\u52a0<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- \u304a\u5b50\u69d8\u30fb\u6559\u80b2\u8cbb -->\n        <div class=\"option-card\" id=\"optChildrenCard\">\n          <label class=\"checkbox-label\" style=\"font-size: 0.95rem;\">\n            <input type=\"checkbox\" id=\"chkChildren\" onchange=\"toggleOption('optChildrenCard', this)\">\n            \ud83d\udc76 \u304a\u5b50\u69d8\uff08\u5150\u7ae5\u624b\u5f53\uff08\u53ce\u5165\uff09\u30fb\u5927\u5b66\u9032\u5b66\u8cbb\uff08\u652f\u51fa\uff09\uff09\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3059\u308b\n          <\/label>\n          <div class=\"option-content\">\n            <div style=\"font-size:0.8rem; color:var(--text-muted); margin-bottom:8px;\">\n              \u203b\u5150\u7ae5\u624b\u5f53\u306e\u652f\u7d66\u984d\u306f\u3001\u7b2c1\u5b50\u30fb\u7b2c2\u5b50\u306f10,000\u5186\u301c15,000\u5186\/\u6708\u3001\u7b2c3\u5b50\u4ee5\u964d\u306f30,000\u5186\/\u6708\u3068\u306a\u308a\u307e\u3059\u3002\n            <\/div>\n            <div style=\"margin-bottom: 10px; max-width: 200px;\">\n              <label>\u5150\u7ae5\u624b\u5f53\u306e\u518d\u6295\u8cc7\u7387 (%)<\/label>\n              <input type=\"number\" id=\"allowanceRate\" value=\"\" placeholder=\"\u4f8b: 100\" min=\"0\" max=\"100\" oninput=\"runSimulation()\">\n            <\/div>\n            <div class=\"responsive-table-container\">\n              <table class=\"responsive-table\">\n                <thead>\n                  <tr>\n                    <th>\u533a\u5206\/\u304a\u540d\u524d<\/th>\n                    <th>\u751f\u5e74\u6708\u65e5<\/th>\n                    <th>\u73fe\u5728\u306e\u652f\u7d66\u984d (\u6708\u984d)\uff08\u53ce\u5165\uff09<\/th>\n                    <th>\u5150\u7ae5\u624b\u5f53\u7dcf\u984d\uff08\u53ce\u5165\uff09<\/th>\n                    <th>\u5927\u5b66\u9032\u5b66<\/th>\n                    <th id=\"th_childCollegeCost\">\u5927\u5b66\u5b66\u8cbb\/\u5e74 (19\u301c22\u6b73)\uff08\u652f\u51fa\uff09 (<span class=\"unit-label\">\u4e07\u5186<\/span>)<\/th>\n                    <th>\u64cd\u4f5c<\/th>\n                  <\/tr>\n                <\/thead>\n                <tbody id=\"childTbody\"><\/tbody>\n              <\/table>\n            <\/div>\n            <button class=\"btn btn-secondary\" style=\"margin-top: 10px;\" onclick=\"addChildRow()\">\uff0b \u304a\u5b50\u69d8\u3092\u8ffd\u52a0<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- \u53d6\u5d29\u3057\u30eb\u30fc\u30eb -->\n        <div class=\"option-card\" id=\"optWithdrawCard\">\n          <label class=\"checkbox-label\" style=\"font-size: 0.95rem;\">\n            <input type=\"checkbox\" id=\"chkWithdraw\" onchange=\"toggleOption('optWithdrawCard', this)\">\n            \ud83d\udcc9 \u5c06\u6765\u306e\u8cc7\u7523\u53d6\u5d29\u3057\u30eb\u30fc\u30eb\u3092\u8ffd\u52a0\u3059\u308b\uff08\u652f\u51fa\uff09\uff08\u751f\u6d3b\u8cbb\u4ee5\u5916\u306e\u5b9a\u984d\u53d6\u5d29\u3057\u306a\u3069\uff09\n          <\/label>\n          <div class=\"option-content\">\n            <div class=\"responsive-table-container\">\n              <table class=\"responsive-table\">\n                <thead>\n                  <tr>\n                    <th>\u958b\u59cb\u5e74 (\u897f\u66a6)<\/th>\n                    <th>\u7d42\u4e86\u5e74 (\u897f\u66a6)<\/th>\n                    <th>\u53d6\u5d29\u3057\u65b9\u6cd5<\/th>\n                    <th id=\"th_withdrawVal\">\u91d1\u984d \/ \u5272\u5408\uff08\u652f\u51fa\uff09<\/th>\n                    <th>\u64cd\u4f5c<\/th>\n                  <\/tr>\n                <\/thead>\n                <tbody id=\"withdrawTbody\"><\/tbody>\n              <\/table>\n            <\/div>\n            <button class=\"btn btn-secondary\" style=\"margin-top: 10px;\" onclick=\"addWithdrawRow()\">\uff0b \u53d6\u5d29\u3057\u30eb\u30fc\u30eb\u3092\u8ffd\u52a0<\/button>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- 2. \u7d50\u679c\u8868\u793a -->\n    <div class=\"card\">\n      <div class=\"card-title flex-between\">\n        <span>2. \u5c06\u6765\u8cc7\u7523\u63a8\u79fb\u7d50\u679c\uff08\u6295\u8cc7\u8cc7\u7523\u30fb\u7d14\u8cc7\u7523\u30fb\u8ca0\u50b5\u6b8b\u9ad8\uff09<\/span>\n        <div style=\"display: flex; gap: 10px; align-items: center; flex-wrap: wrap;\">\n          <div class=\"period-control-group\">\n            <div class=\"period-btn-group\">\n              <button type=\"button\" class=\"period-btn active\" onclick=\"setChartPeriod('all', this)\">\u5168\u671f\u9593<\/button>\n              <button type=\"button\" class=\"period-btn\" onclick=\"setChartPeriod(10, this)\">10\u5e74<\/button>\n              <button type=\"button\" class=\"period-btn\" onclick=\"setChartPeriod(20, this)\">20\u5e74<\/button>\n              <button type=\"button\" class=\"period-btn\" onclick=\"setChartPeriod(30, this)\">30\u5e74<\/button>\n              <button type=\"button\" class=\"period-btn\" onclick=\"setChartPeriod(50, this)\">50\u5e74<\/button>\n              <button type=\"button\" class=\"period-btn\" onclick=\"setChartPeriod(100, this)\">100\u5e74<\/button>\n            <\/div>\n            <div class=\"custom-period-input\">\n              <input type=\"number\" id=\"customPeriodInput\" min=\"1\" max=\"100\" placeholder=\"\u5e74\u6570\" oninput=\"onCustomPeriodChange(this.value)\">\n              <span>\u5e74\u6307\u5b9a<\/span>\n            <\/div>\n          <\/div>\n          <button class=\"btn btn-secondary\" onclick=\"exportCSV()\">CSV\u4fdd\u5b58<\/button>\n        <\/div>\n      <\/div>\n      \n      <!-- \u6ce8\u610f\u66f8\u304d\uff08\u30b0\u30e9\u30d5\u4ed8\u8fd1\uff09 -->\n      <div class=\"input-warning-notice\">\n        \u26a0\ufe0f \u5165\u529b\u9805\u76ee\u306b\u6f0f\u308c\u304c\u3042\u308b\u3068\u6b63\u5e38\u306b\u30b0\u30e9\u30d5\u304c\u6a5f\u80fd\u3057\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\n      <\/div>\n\n      <div class=\"chart-container\">\n        <canvas id=\"resultChart\"><\/canvas>\n      <\/div>\n\n      <!-- \u5e83\u544a\u63b2\u8f09\u7528\u30a8\u30ea\u30a2 -->\n      <div class=\"banner-ad-wrapper\">\n        <a href=\"https:\/\/px.a8.net\/svt\/ejp?a8mat=4BAH9J+4D6GHE+1WP2+1HOVC1\" rel=\"nofollow\">\n        <img loading=\"lazy\" decoding=\"async\" border=\"0\" width=\"250\" height=\"250\" alt=\"\" src=\"https:\/\/www25.a8.net\/svt\/bgt?aid=260829415264&amp;wid=001&amp;eno=01&amp;mid=s00000008903009018000&amp;mc=1\"><\/a>\n        <img loading=\"lazy\" decoding=\"async\" border=\"0\" width=\"1\" height=\"1\" src=\"https:\/\/www11.a8.net\/0.gif?a8mat=4BAH9J+4D6GHE+1WP2+1HOVC1\" alt=\"\">\n        \n        <div style=\"margin-top: 15px;\">\n          <a href=\"https:\/\/rpx.a8.net\/svt\/ejp?a8mat=4BAH9J+4BZL9U+2HOM+5YZ75&amp;rakuten=y&amp;a8ejpredirect=http%3A%2F%2Fhb.afl.rakuten.co.jp%2Fhgc%2F0ea62065.34400275.0ea62066.204f04c0%2Fa26082950829_4BAH9J_4BZL9U_2HOM_5YZ75%3Fpc%3Dhttp%253A%252F%252Fwww.rakuten.co.jp%252F%26m%3Dhttp%253A%252F%252Fm.rakuten.co.jp%252F\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"http:\/\/hbb.afl.rakuten.co.jp\/hsb\/0eb4bbad.93f29c77.0eb4bbaa.95151395\/\" border=\"0\"><\/a>\n          <img loading=\"lazy\" decoding=\"async\" border=\"0\" width=\"1\" height=\"1\" src=\"https:\/\/www17.a8.net\/0.gif?a8mat=4BAH9J+4BZL9U+2HOM+5YZ75\" alt=\"\">\n\n        <div style=\"margin-top: 15px;\">\n          <a href=\"https:\/\/px.a8.net\/svt\/ejp?a8mat=4BAH9L+EDZ52Q+5TH4+601S1\" rel=\"nofollow\">\n<img loading=\"lazy\" decoding=\"async\" border=\"0\" width=\"234\" height=\"60\" alt=\"\" src=\"https:\/\/www29.a8.net\/svt\/bgt?aid=260829417870&amp;wid=001&amp;eno=01&amp;mid=s00000027148001008000&amp;mc=1\"><\/a>\n<img loading=\"lazy\" decoding=\"async\" border=\"0\" width=\"1\" height=\"1\" src=\"https:\/\/www16.a8.net\/0.gif?a8mat=4BAH9L+EDZ52Q+5TH4+601S1\" alt=\"\">\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n  <script>\n    (function() {\n      let chartInstance = null;\n      let currentSelectedPeriod = 'all';\n      const currentYear = new Date().getFullYear();\n\n      function getMultiplier() {\n        const selected = document.querySelector('input[name=\"currencyUnit\"]:checked');\n        return selected ? Number(selected.value) : 10000;\n      }\n\n      window.changeCurrencyUnit = function() {\n        const mult = getMultiplier();\n        const unitText = mult === 10000 ? '\u4e07\u5186' : '\u5343\u5186';\n        document.querySelectorAll('.unit-label').forEach(el => el.innerText = unitText);\n        runSimulation();\n      };\n\n      window.addCarRow = function(mode = 'monthly', amount = '', rate = '', years = '', startYear = '') {\n        const tbody = document.getElementById('carTbody');\n        if (!tbody) return;\n\n        const tr = document.createElement('tr');\n        tr.className = 'car-row';\n        tr.innerHTML = `\n          <td data-label=\"\u5165\u529b\u65b9\u6cd5\">\n            <select class=\"car-mode\" onchange=\"updateCarRowUI(this)\">\n              <option value=\"monthly\" ${mode === 'monthly' ? 'selected' : ''}>\u6708\u984d\u3092\u6307\u5b9a<\/option>\n              <option value=\"calc\" ${mode === 'calc' ? 'selected' : ''}>\u501f\u5165\u984d\u304b\u3089\u8a66\u7b97<\/option>\n            <\/select>\n          <\/td>\n          <td data-label=\"\u91d1\u984d\/\u501f\u5165\u984d\uff08\u652f\u51fa\uff09\">\n            <input type=\"number\" value=\"${amount}\" class=\"car-amount bg-expense\" placeholder=\"\u4f8b: 3\" oninput=\"runSimulation()\">\n            <div class=\"calc-hint\"><\/div>\n          <\/td>\n          <td data-label=\"\u5e74\u5229 (%)\"><input type=\"number\" value=\"${rate}\" step=\"0.1\" class=\"car-rate\" placeholder=\"\u4f8b: 2.0\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u671f\u9593 (\u5e74)\"><input type=\"number\" value=\"${years}\" class=\"car-years\" placeholder=\"\u4f8b: 5\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u958b\u59cb\u5e74 (\u897f\u66a6)\"><input type=\"number\" value=\"${startYear}\" class=\"car-start\" placeholder=\"\u4f8b: 2026\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u64cd\u4f5c\"><button class=\"btn btn-danger\" onclick=\"removeRow(this)\">\u524a\u9664<\/button><\/td>\n        `;\n        tbody.appendChild(tr);\n        updateCarRowUI(tr.querySelector('.car-mode'));\n      };\n\n      window.updateCarRowUI = function(elem) {\n        const tr = elem.closest('tr');\n        const mode = tr.querySelector('.car-mode').value;\n        const rateInput = tr.querySelector('.car-rate');\n        rateInput.disabled = (mode !== 'calc');\n        runSimulation();\n      };\n\n      window.toggleOption = function(cardId, checkbox) {\n        const card = document.getElementById(cardId);\n        if (checkbox.checked) {\n          card.classList.add('active');\n          if (cardId === 'optAssetCard' && document.querySelectorAll('#assetTbody tr').length === 0) {\n            addAssetRow('', '');\n          }\n          if (cardId === 'optHousingCard' && document.querySelectorAll('#housingTbody tr').length === 0) {\n            addHousingRow('loan', 'monthly', '', '', '', '');\n          }\n          if (cardId === 'optCarCard' && document.querySelectorAll('#carTbody tr').length === 0) {\n            addCarRow('monthly', '', '', '', '');\n          }\n          if (cardId === 'optChildrenCard' && document.querySelectorAll('#childTbody tr').length === 0) {\n            addChildRow('', '', '');\n          }\n          if (cardId === 'optWithdrawCard' && document.querySelectorAll('#withdrawTbody tr').length === 0) {\n            addWithdrawRow('', '', 'amount', '');\n          }\n        } else {\n          card.classList.remove('active');\n        }\n        runSimulation();\n      };\n\n      window.addAssetRow = function(val = '', rate = '') {\n        const tbody = document.getElementById('assetTbody');\n        if (!tbody) return;\n        const mult = getMultiplier();\n        const unitText = mult === 10000 ? '\u4e07\u5186' : '\u5343\u5186';\n        const tr = document.createElement('tr');\n        tr.innerHTML = `\n          <td data-label=\"\u91d1\u984d (${unitText})\"><input type=\"number\" class=\"bg-asset\" value=\"${val}\" placeholder=\"\u4f8b: 200\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u60f3\u5b9a\u5e74\u5229 (%)\"><input type=\"number\" value=\"${rate}\" step=\"0.1\" placeholder=\"\u4f8b: 5.0\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u64cd\u4f5c\"><button class=\"btn btn-danger\" onclick=\"removeRow(this)\">\u524a\u9664<\/button><\/td>\n        `;\n        tbody.appendChild(tr);\n        runSimulation();\n      };\n\n      window.addHousingRow = function(category = 'loan', mode = 'monthly', amount = '', rate = '', years = '', startYear = '') {\n        const tbody = document.getElementById('housingTbody');\n        if (!tbody) return;\n\n        const tr = document.createElement('tr');\n        tr.className = 'housing-row';\n        tr.innerHTML = `\n          <td data-label=\"\u533a\u5206\">\n            <select class=\"housing-cat\" onchange=\"updateHousingRowUI(this)\">\n              <option value=\"loan\" ${category === 'loan' ? 'selected' : ''}>\u4f4f\u5b85\u30ed\u30fc\u30f3<\/option>\n              <option value=\"rent\" ${category === 'rent' ? 'selected' : ''}>\u5bb6\u8cc3<\/option>\n            <\/select>\n          <\/td>\n          <td data-label=\"\u5165\u529b\u65b9\u6cd5\">\n            <select class=\"housing-mode\" onchange=\"updateHousingRowUI(this)\">\n              <option value=\"monthly\" ${mode === 'monthly' ? 'selected' : ''}>\u6708\u984d\u3092\u6307\u5b9a<\/option>\n              <option value=\"calc\" ${mode === 'calc' ? 'selected' : ''}>\u501f\u5165\u984d\u304b\u3089\u8a66\u7b97<\/option>\n            <\/select>\n          <\/td>\n          <td data-label=\"\u91d1\u984d\/\u501f\u5165\u984d\uff08\u652f\u51fa\uff09\">\n            <input type=\"number\" value=\"${amount}\" class=\"housing-amount bg-expense\" placeholder=\"\u4f8b: 7\" oninput=\"runSimulation()\">\n            <div class=\"calc-hint\"><\/div>\n          <\/td>\n          <td data-label=\"\u5e74\u5229 (%)\"><input type=\"number\" value=\"${rate}\" step=\"0.01\" class=\"housing-rate\" placeholder=\"\u4f8b: 0.5\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u671f\u9593 (\u5e74)\"><input type=\"number\" value=\"${years}\" class=\"housing-years\" placeholder=\"\u4f8b: 35\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u958b\u59cb\u5e74 (\u897f\u66a6)\"><input type=\"number\" value=\"${startYear}\" class=\"housing-start\" placeholder=\"\u4f8b: 2026\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u64cd\u4f5c\"><button class=\"btn btn-danger\" onclick=\"removeRow(this)\">\u524a\u9664<\/button><\/td>\n        `;\n        tbody.appendChild(tr);\n        updateHousingRowUI(tr.querySelector('.housing-cat'));\n      };\n\n      window.updateHousingRowUI = function(elem) {\n        const tr = elem.closest('tr');\n        const cat = tr.querySelector('.housing-cat').value;\n        const modeSelect = tr.querySelector('.housing-mode');\n        const rateInput = tr.querySelector('.housing-rate');\n\n        if (cat === 'rent') {\n          modeSelect.value = 'monthly';\n          modeSelect.disabled = true;\n          rateInput.disabled = true;\n          rateInput.value = '';\n        } else {\n          modeSelect.disabled = false;\n          rateInput.disabled = (modeSelect.value !== 'calc');\n        }\n        runSimulation();\n      };\n\n      window.addChildRow = function(name = '', date = '', collegeCost = '') {\n        const tbody = document.getElementById('childTbody');\n        if (!tbody) return;\n        const childCount = tbody.querySelectorAll('tr').length + 1;\n        const defaultName = name || `\u7b2c${childCount}\u5b50`;\n\n        const tr = document.createElement('tr');\n        tr.className = 'child-row';\n        tr.innerHTML = `\n          <td data-label=\"\u533a\u5206\/\u540d\u524d\"><input type=\"text\" value=\"${defaultName}\" placeholder=\"\u4f8b: \u7b2c1\u5b50\"><\/td>\n          <td data-label=\"\u751f\u5e74\u6708\u65e5\"><input type=\"date\" value=\"${date}\" class=\"child-date\" onchange=\"runSimulation()\"><\/td>\n          <td data-label=\"\u73fe\u5728\u306e\u652f\u7d66\u984d (\u6708\u984d)\uff08\u53ce\u5165\uff09\"><span class=\"child-allowance-disp\" style=\"font-weight: bold; color: var(--primary);\">0 \u5186<\/span><\/td>\n          <td data-label=\"\u5150\u7ae5\u624b\u5f53\u7dcf\u984d\uff08\u53ce\u5165\uff09\"><span class=\"child-total-disp\" style=\"font-weight: bold; color: var(--primary);\">0 \u4e07\u5186<\/span><\/td>\n          <td data-label=\"\u5927\u5b66\u9032\u5b66\">\n            <label class=\"checkbox-label\" style=\"font-weight:normal;\">\n              <input type=\"checkbox\" class=\"child-college-check\" checked onchange=\"runSimulation()\"> \u3042\u308a\n            <\/label>\n          <\/td>\n          <td data-label=\"\u5927\u5b66\u5b66\u8cbb\/\u5e74\uff08\u652f\u51fa\uff09\"><input type=\"number\" value=\"${collegeCost}\" class=\"child-college-cost bg-expense\" placeholder=\"\u4f8b: 100\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u64cd\u4f5c\"><button class=\"btn btn-danger\" onclick=\"removeRow(this)\">\u524a\u9664<\/button><\/td>\n        `;\n        tbody.appendChild(tr);\n        runSimulation();\n      };\n\n      window.addWithdrawRow = function(start = '', end = '', method = 'amount', val = '') {\n        const tbody = document.getElementById('withdrawTbody');\n        if (!tbody) return;\n        const mult = getMultiplier();\n\n        const tr = document.createElement('tr');\n        tr.innerHTML = `\n          <td data-label=\"\u958b\u59cb\u5e74\"><input type=\"number\" value=\"${start}\" class=\"wd-start\" placeholder=\"\u4f8b: 2060\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u7d42\u4e86\u5e74\"><input type=\"number\" value=\"${end}\" class=\"wd-end\" placeholder=\"\u4f8b: 2080\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u53d6\u5d29\u3057\u65b9\u6cd5\">\n            <select class=\"wd-method\" onchange=\"runSimulation()\">\n              <option value=\"amount\" ${method === 'amount' ? 'selected' : ''}>\u5b9a\u984d (<span class=\"unit-label\">${mult === 10000 ? '\u4e07\u5186' : '\u5343\u5186'}<\/span>\/\u5e74)<\/option>\n              <option value=\"rate\" ${method === 'rate' ? 'selected' : ''}>\u5b9a\u7387 (%\/\u5e74)<\/option>\n            <\/select>\n          <\/td>\n          <td data-label=\"\u91d1\u984d\/\u5272\u5408\uff08\u652f\u51fa\uff09\"><input type=\"number\" value=\"${val}\" class=\"wd-val bg-expense\" placeholder=\"\u4f8b: 120\" oninput=\"runSimulation()\"><\/td>\n          <td data-label=\"\u64cd\u4f5c\"><button class=\"btn btn-danger\" onclick=\"removeRow(this)\">\u524a\u9664<\/button><\/td>\n        `;\n        tbody.appendChild(tr);\n        runSimulation();\n      };\n\n      window.removeRow = function(btn) {\n        btn.closest('tr').remove();\n        runSimulation();\n      };\n\n      function getAllowanceMonthly(age, childOrder) {\n        if (age < 0 || age > 18) return 0;\n        if (childOrder >= 3) return 30000;\n        if (age < 3) return 15000;\n        return 10000;\n      }\n\n      function getAllowanceTotal(childOrder) {\n        if (childOrder >= 3) {\n          return 30000 * 12 * 19;\n        }\n        return (15000 * 36) + (10000 * 192);\n      }\n\n      window.setChartPeriod = function(period, btn) {\n        currentSelectedPeriod = period;\n        document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));\n        if (btn) btn.classList.add('active');\n        document.getElementById('customPeriodInput').value = (period === 'all') ? '' : period;\n        runSimulation();\n      };\n\n      window.onCustomPeriodChange = function(val) {\n        let num = Number(val);\n        if (num > 100) {\n          num = 100;\n          document.getElementById('customPeriodInput').value = 100;\n        }\n        if (val === '' || num <= 0) {\n          currentSelectedPeriod = 'all';\n        } else {\n          currentSelectedPeriod = num;\n        }\n        document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));\n        runSimulation();\n      };\n\n      window.runSimulation = function() {\n        const mult = getMultiplier();\n\n        const monthlyIncome = (Number(document.getElementById('monthlyIncome').value) || 0) * mult;\n        const bonusIncome = (Number(document.getElementById('bonusIncome').value) || 0) * mult;\n        const monthlyExpenses = (Number(document.getElementById('monthlyExpenses').value) || 0) * mult;\n        const monthlySavingsElem = document.getElementById('monthlySavings');\n        const monthlySavings = monthlySavingsElem ? (Number(monthlySavingsElem.value) || 0) * mult : 0;\n        const monthlyInvest = (Number(document.getElementById('monthlyInvest').value) || 0) * mult;\n        const targetCash = (Number(document.getElementById('targetCash').value) || 0) * mult;\n        const yieldRate = (Number(document.getElementById('yield').value) || 0) \/ 100;\n        const bonusInvest = (Number(document.getElementById('bonusInvest').value) || 0) * mult;\n        \n        const investStartYear = Number(document.getElementById('investStartYear').value) || currentYear;\n        const investEndYear = Number(document.getElementById('investEndYear').value) || (currentYear + 30);\n        const retireYear = Number(document.getElementById('retireYear').value) || (currentYear + 35);\n\n        const pensionStartYearMain = Number(document.getElementById('pensionStartYearMain').value) || (currentYear + 35);\n        const pensionMonthlyMain = (Number(document.getElementById('pensionMonthlyMain').value) || 0) * mult;\n        const pensionAnnualMain = pensionMonthlyMain * 12;\n\n        const retireExpensesMonthly = (Number(document.getElementById('retireExpenses').value) || 0) * mult;\n        const retireExpensesAnnual = retireExpensesMonthly * 12;\n\n        const isRetireInvestActive = document.getElementById('chkRetireInvest') ? document.getElementById('chkRetireInvest').checked : false;\n        const retireMonthlyInvest = isRetireInvestActive ? ((Number(document.getElementById('retireMonthlyInvest').value) || 0) * mult) : 0;\n\n        const isAssetActive = document.getElementById('chkAsset').checked;\n        const isHousingActive = document.getElementById('chkHousing').checked;\n        const isCarActive = document.getElementById('chkCar') ? document.getElementById('chkCar').checked : false;\n        const isChildrenActive = document.getElementById('chkChildren').checked;\n        const isWithdrawActive = document.getElementById('chkWithdraw').checked;\n\n        let housingMonthlyTotal = 0;\n        const loansList = []; \n\n        if (isHousingActive) {\n          document.querySelectorAll('#housingTbody tr').forEach(row => {\n            const cat = row.querySelector('.housing-cat').value;\n            const mode = row.querySelector('.housing-mode').value;\n            const rawAmount = Number(row.querySelector('.housing-amount').value) || 0;\n            const amount = rawAmount * mult;\n            const rate = (Number(row.querySelector('.housing-rate').value) || 0) \/ 100;\n            const years = Number(row.querySelector('.housing-years').value) || 0;\n            const start = Number(row.querySelector('.housing-start').value) || currentYear;\n            const hintElem = row.querySelector('.calc-hint');\n\n            if (amount > 0) {\n              let monthlyCost = 0;\n              let principal = 0;\n              if (mode === 'monthly' || cat === 'rent') {\n                monthlyCost = amount;\n                hintElem.innerText = '';\n                if (cat === 'loan') principal = amount * 12 * years;\n              } else {\n                principal = amount;\n                const monthlyRate = rate \/ 12;\n                const totalPayments = years * 12;\n                monthlyCost = monthlyRate === 0 ? amount \/ totalPayments : amount * (monthlyRate * Math.pow(1 + monthlyRate, totalPayments)) \/ (Math.pow(1 + monthlyRate, totalPayments) - 1);\n                const hintValue = mult === 10000 ? Math.round(monthlyCost \/ 10000) : Math.round(monthlyCost \/ 1000);\n                hintElem.innerText = `\u8a66\u7b97\u6708\u984d: \u7d04${hintValue}${mult === 10000 ? '\u4e07\u5186' : '\u5343\u5186'}`;\n              }\n              housingMonthlyTotal += monthlyCost;\n              if (cat === 'loan') loansList.push({ start, years, principal, annualCost: monthlyCost * 12 });\n            } else {\n              hintElem.innerText = '';\n            }\n          });\n        }\n\n        let carMonthlyTotal = 0;\n        if (isCarActive) {\n          document.querySelectorAll('#carTbody tr').forEach(row => {\n            const mode = row.querySelector('.car-mode').value;\n            const rawAmount = Number(row.querySelector('.car-amount').value) || 0;\n            const amount = rawAmount * mult;\n            const rate = (Number(row.querySelector('.car-rate').value) || 0) \/ 100;\n            const years = Number(row.querySelector('.car-years').value) || 0;\n            const start = Number(row.querySelector('.car-start').value) || currentYear;\n            const hintElem = row.querySelector('.calc-hint');\n\n            if (amount > 0) {\n              let monthlyCost = 0;\n              let principal = 0;\n              if (mode === 'monthly') {\n                monthlyCost = amount;\n                principal = amount * 12 * years;\n                hintElem.innerText = '';\n              } else {\n                principal = amount;\n                const monthlyRate = rate \/ 12;\n                const totalPayments = years * 12;\n                monthlyCost = monthlyRate === 0 ? amount \/ totalPayments : amount * (monthlyRate * Math.pow(1 + monthlyRate, totalPayments)) \/ (Math.pow(1 + monthlyRate, totalPayments) - 1);\n                const hintValue = mult === 10000 ? Math.round(monthlyCost \/ 10000 * 10) \/ 10 : Math.round(monthlyCost \/ 1000 * 10) \/ 10;\n                hintElem.innerText = `\u8a66\u7b97\u6708\u984d: \u7d04${hintValue}${mult === 10000 ? '\u4e07\u5186' : '\u5343\u5186'}`;\n              }\n              carMonthlyTotal += monthlyCost;\n              loansList.push({ start, years, principal, annualCost: monthlyCost * 12 });\n            } else {\n              hintElem.innerText = '';\n            }\n          });\n        }\n\n        const totalMonthlyOutflow = monthlyExpenses + housingMonthlyTotal + carMonthlyTotal + monthlyInvest + monthlySavings;\n        const netSurplus = monthlyIncome - totalMonthlyOutflow;\n        \n        const autoSurplusInvest = (netSurplus > 0) ? netSurplus : 0;\n        const totalMonthlyActualInvest = monthlyInvest + autoSurplusInvest;\n\n        const summaryBox = document.getElementById('balanceSummary');\n        const investBox = document.getElementById('investSummary');\n\n        if (netSurplus >= 0) {\n          summaryBox.className = 'balance-box positive';\n          summaryBox.innerHTML = `\n            <div class=\"balance-title\">\ud83d\udca1 \u6bce\u6708\u306e\u4f59\u5270\u91d1\uff1a<span class=\"balance-amount\">+${netSurplus.toLocaleString()} \u5186<\/span><\/div>\n            <div class=\"balance-sub\">\uff08\u624b\u53d6\u308a ${(monthlyIncome).toLocaleString()}\u5186 \u2212 \u751f\u6d3b\u8cbb\u7b49 ${(monthlyExpenses + housingMonthlyTotal + carMonthlyTotal).toLocaleString()}\u5186 \u2212 \u7a4d\u7acb ${(monthlyInvest).toLocaleString()}\u5186 \u2212 \u8caf\u91d1 ${(monthlySavings).toLocaleString()}\u5186\uff09<\/div>\n          `;\n        } else {\n          summaryBox.className = 'balance-box negative';\n          summaryBox.innerHTML = `\n            <div class=\"balance-title\">\u26a0\ufe0f \u6bce\u6708\u306e\u53ce\u652f\uff1a<span class=\"balance-amount\">${netSurplus.toLocaleString()} \u5186\uff08\u8d64\u5b57\uff09<\/span><\/div>\n            <div class=\"balance-sub\">\u203b\u652f\u51fa\u30fb\u7a4d\u7acb\u30fb\u8caf\u91d1\u984d\u306e\u5408\u8a08\u304c\u624b\u53d6\u308a\u7d66\u6599\u3092\u8d85\u3048\u3066\u3044\u307e\u3059\u3002<\/div>\n          `;\n        }\n\n        investBox.innerHTML = `\n          <div class=\"balance-title\">\ud83d\ude80 \u6bce\u6708\u306e\u6295\u8cc7\u5408\u8a08\uff08\u73fe\u5f79\u6642\uff09\uff1a<span class=\"balance-amount\">${totalMonthlyActualInvest.toLocaleString()} \u5186<\/span><\/div>\n          <div class=\"balance-sub\">\uff08\u57fa\u672c\u7a4d\u7acb ${(monthlyInvest).toLocaleString()}\u5186 \uff0b \u4f59\u5270\u91d1\u904b\u7528 ${(autoSurplusInvest).toLocaleString()}\u5186\uff09<\/div>\n          <div class=\"balance-sub\" style=\"color: #1d4ed8; font-weight: 600;\">\u203b\u7a4d\u7acb\u671f\u9593\u4e2d\u306f\u3053\u306e\u6295\u8cc7\u91d1\u984d\u30d9\u30fc\u30b9\u3067\u904b\u7528\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u3057\u3066\u3044\u307e\u3059\u3002<\/div>\n        `;\n\n        let currentNisa = 0;\n        let currentTokutei = 0;\n        let currentCash = (Number(document.getElementById('simpleAsset').value) || 0) * mult;\n        let nisaPrincipal = 0;\n\n        if (isAssetActive) {\n          document.querySelectorAll('#assetTbody tr').forEach(row => {\n            const inputs = row.querySelectorAll('input');\n            const val = (Number(inputs[0].value) || 0) * mult;\n            currentTokutei += val;\n          });\n        }\n\n        const childrenData = [];\n        if (isChildrenActive) {\n          document.querySelectorAll('#childTbody tr').forEach((row, idx) => {\n            const dateVal = row.querySelector('.child-date').value;\n            const goCollege = row.querySelector('.child-college-check').checked;\n            const collegeCost = goCollege ? ((Number(row.querySelector('.child-college-cost').value) || 0) * mult) : 0;\n            const dispElem = row.querySelector('.child-allowance-disp');\n            const totalDispElem = row.querySelector('.child-total-disp');\n            \n            if (dateVal) {\n              const birthYear = new Date(dateVal).getFullYear();\n              const currentAge = currentYear - birthYear;\n              const currentAllowance = getAllowanceMonthly(currentAge, idx + 1);\n              const totalAllowance = getAllowanceTotal(idx + 1);\n\n              if (dispElem) dispElem.innerText = `${currentAllowance.toLocaleString()} \u5186`;\n              if (totalDispElem) totalDispElem.innerText = `${(totalAllowance \/ 10000).toLocaleString()} \u4e07\u5186`;\n\n              childrenData.push({\n                childOrder: idx + 1,\n                birthYear: birthYear,\n                goCollege, collegeCost\n              });\n            } else {\n              if (dispElem) dispElem.innerText = `0 \u5186`;\n              if (totalDispElem) totalDispElem.innerText = `0 \u4e07\u5186`;\n            }\n          });\n        }\n\n        const withdrawRules = [];\n        if (isWithdrawActive) {\n          document.querySelectorAll('#withdrawTbody tr').forEach(row => {\n            const start = Number(row.querySelector('.wd-start').value);\n            const end = Number(row.querySelector('.wd-end').value);\n            const rawVal = Number(row.querySelector('.wd-val').value);\n            const method = row.querySelector('.wd-method').value;\n            const val = method === 'amount' ? rawVal * mult : rawVal;\n            if (start && end && val) {\n              withdrawRules.push({ start, end, method, val });\n            }\n          });\n        }\n\n        const labels = [];\n        const dataInvest = [];\n        const dataCash = [];\n        const dataTotal = [];\n        const dataLiability = [];\n        const dataNetAsset = [];\n\n        const allowanceRate = isChildrenActive ? (Number(document.getElementById('allowanceRate').value) || 0) \/ 100 : 0;\n        const NISA_LIMIT = 18000000;\n\n        let maxEndYear = Math.max(currentYear + 35, investEndYear, retireYear, pensionStartYearMain + 20);\n\n        if (currentSelectedPeriod !== 'all') {\n          maxEndYear = Math.max(maxEndYear, currentYear + Number(currentSelectedPeriod));\n        }\n\n        if (isHousingActive || isCarActive) {\n          loansList.forEach(loan => {\n            maxEndYear = Math.max(maxEndYear, loan.start + loan.years);\n          });\n        }\n\n        if (isWithdrawActive) {\n          withdrawRules.forEach(r => {\n            maxEndYear = Math.max(maxEndYear, r.end);\n          });\n        }\n\n        maxEndYear = Math.min(maxEndYear, currentYear + 100);\n\n        for (let yr = currentYear; yr <= maxEndYear; yr++) {\n          labels.push(`${yr}\u5e74`);\n          if (yr > currentYear) {\n            currentNisa *= (1 + yieldRate);\n            currentTokutei *= (1 + yieldRate);\n\n            const isBeforeRetire = yr < retireYear;\n            const isInvestPeriod = (yr >= investStartYear && yr <= investEndYear);\n\n            if (isBeforeRetire) {\n              if (isInvestPeriod) {\n                const annualIncome = (monthlyIncome * 12) + (bonusIncome * 2);\n                const annualOutflowWithoutInvest = ((monthlyExpenses + housingMonthlyTotal + carMonthlyTotal) * 12) + (bonusInvest * 2);\n                let annualNetSurplus = annualIncome - annualOutflowWithoutInvest - (monthlyInvest * 12);\n                \n                let actualInvest = (monthlyInvest * 12) + (bonusInvest * 2);\n\n                if (isChildrenActive) {\n                  childrenData.forEach(child => {\n                    const age = yr - child.birthYear;\n                    actualInvest += (getAllowanceMonthly(age, child.childOrder) * 12 * allowanceRate);\n                  });\n                }\n\n                if (annualNetSurplus > 0) {\n                  if (targetCash > 0 && currentCash < targetCash) {\n                    let needed = targetCash - currentCash;\n                    if (annualNetSurplus <= needed) {\n                      currentCash += annualNetSurplus;\n                    } else {\n                      currentCash += needed;\n                      actualInvest += (annualNetSurplus - needed);\n                    }\n                  } else {\n                    actualInvest += annualNetSurplus;\n                  }\n                } else {\n                  currentCash += annualNetSurplus;\n                }\n\n                if (actualInvest > 0) {\n                  if (nisaPrincipal < NISA_LIMIT) {\n                    const nisaSpace = NISA_LIMIT - nisaPrincipal;\n                    const toNisa = Math.min(actualInvest, nisaSpace);\n                    const toTokutei = actualInvest - toNisa;\n\n                    currentNisa += toNisa;\n                    nisaPrincipal += toNisa;\n                    currentTokutei += toTokutei;\n                  } else {\n                    currentTokutei += actualInvest;\n                  }\n                }\n              } else {\n                const annualIncome = (monthlyIncome * 12) + (bonusIncome * 2);\n                let annualOutflow = (monthlyExpenses + housingMonthlyTotal + carMonthlyTotal) * 12;\n\n                if (isRetireInvestActive) {\n                  let actualRetireInvest = retireMonthlyInvest * 12;\n                  annualOutflow += actualRetireInvest;\n\n                  if (actualRetireInvest > 0) {\n                    if (nisaPrincipal < NISA_LIMIT) {\n                      const nisaSpace = NISA_LIMIT - nisaPrincipal;\n                      const toNisa = Math.min(actualRetireInvest, nisaSpace);\n                      const toTokutei = actualRetireInvest - toNisa;\n\n                      currentNisa += toNisa;\n                      nisaPrincipal += toNisa;\n                      currentTokutei += toTokutei;\n                    } else {\n                      currentTokutei += actualRetireInvest;\n                    }\n                  }\n                }\n\n                currentCash += (annualIncome - annualOutflow);\n              }\n            } else {\n              let netRetireIncome = 0;\n              if (yr >= pensionStartYearMain && pensionAnnualMain > 0) {\n                netRetireIncome += pensionAnnualMain;\n              }\n\n              let netRetireOutflow = retireExpensesAnnual + ((housingMonthlyTotal + carMonthlyTotal) * 12);\n\n              if (isRetireInvestActive) {\n                let actualRetireInvest = retireMonthlyInvest * 12;\n                netRetireOutflow += actualRetireInvest;\n\n                if (actualRetireInvest > 0) {\n                  if (nisaPrincipal < NISA_LIMIT) {\n                    const nisaSpace = NISA_LIMIT - nisaPrincipal;\n                    const toNisa = Math.min(actualRetireInvest, nisaSpace);\n                    const toTokutei = actualRetireInvest - toNisa;\n\n                    currentNisa += toNisa;\n                    nisaPrincipal += toNisa;\n                    currentTokutei += toTokutei;\n                  } else {\n                    currentTokutei += actualRetireInvest;\n                  }\n                }\n              }\n\n              let retireSurplus = netRetireIncome - netRetireOutflow;\n\n              if (retireSurplus > 0) {\n                if (targetCash > 0 && currentCash < targetCash) {\n                  let needed = targetCash - currentCash;\n                  if (retireSurplus <= needed) {\n                    currentCash += retireSurplus;\n                  } else {\n                    currentCash += needed;\n                    let extraInvest = retireSurplus - needed;\n                    if (nisaPrincipal < NISA_LIMIT) {\n                      const nisaSpace = NISA_LIMIT - nisaPrincipal;\n                      const toNisa = Math.min(extraInvest, nisaSpace);\n                      const toTokutei = extraInvest - toNisa;\n                      currentNisa += toNisa;\n                      nisaPrincipal += toNisa;\n                      currentTokutei += toTokutei;\n                    } else {\n                      currentTokutei += extraInvest;\n                    }\n                  }\n                } else {\n                  if (nisaPrincipal < NISA_LIMIT) {\n                    const nisaSpace = NISA_LIMIT - nisaPrincipal;\n                    const toNisa = Math.min(retireSurplus, nisaSpace);\n                    const toTokutei = retireSurplus - toNisa;\n                    currentNisa += toNisa;\n                    nisaPrincipal += toNisa;\n                    currentTokutei += toTokutei;\n                  } else {\n                    currentTokutei += retireSurplus;\n                  }\n                }\n              } else {\n                currentCash += retireSurplus;\n              }\n            }\n\n            if (isChildrenActive) {\n              childrenData.forEach(child => {\n                const age = yr - child.birthYear;\n                if (child.goCollege && (age >= 19 && age <= 22)) {\n                  currentCash -= child.collegeCost;\n                }\n              });\n            }\n\n            if (currentCash < 0) {\n              let cashDeficit = -currentCash;\n              if (currentTokutei > 0) {\n                let fromTokutei = Math.min(currentTokutei, cashDeficit);\n                currentTokutei -= fromTokutei;\n                cashDeficit -= fromTokutei;\n              }\n              if (cashDeficit > 0 && currentNisa > 0) {\n                let fromNisa = Math.min(currentNisa, cashDeficit);\n                currentNisa -= fromNisa;\n                cashDeficit -= fromNisa;\n              }\n              currentCash = -cashDeficit;\n            }\n\n            if (isWithdrawActive) {\n              let withdrawAmt = 0;\n              const totalInvest = currentNisa + currentTokutei;\n              withdrawRules.forEach(r => {\n                if (yr >= r.start && yr <= r.end) {\n                  withdrawAmt += (r.method === 'amount' ? r.val : totalInvest * (r.val \/ 100));\n                }\n              });\n              if (withdrawAmt > 0) {\n                currentCash -= withdrawAmt;\n              }\n            }\n          }\n\n          let totalLiability = 0;\n          loansList.forEach(loan => {\n            const elapsedYears = yr - loan.start;\n            if (elapsedYears >= 0 && elapsedYears < loan.years) {\n              const remainingRatio = (loan.years - elapsedYears) \/ loan.years;\n              totalLiability += loan.principal * remainingRatio;\n            }\n          });\n\n          const invTotal = Math.round(currentNisa + currentTokutei);\n          const cashTotal = Math.round(currentCash);\n          const grossAsset = invTotal + cashTotal;\n          const liabilityTotal = Math.round(totalLiability);\n          const netAssetTotal = grossAsset - liabilityTotal;\n\n          dataInvest.push(invTotal);\n          dataCash.push(cashTotal);\n          dataTotal.push(grossAsset);\n          dataLiability.push(liabilityTotal);\n          dataNetAsset.push(netAssetTotal);\n        }\n\n        window.lastSimData = { labels, dataTotal, dataInvest, dataCash, dataLiability, dataNetAsset };\n        filterAndRenderChart();\n      };\n\n      function filterAndRenderChart() {\n        const sim = window.lastSimData;\n        if (!sim) return;\n\n        let labels = sim.labels;\n        let dataInvest = sim.dataInvest;\n        let dataNetAsset = sim.dataNetAsset;\n        let dataLiability = sim.dataLiability;\n        let dataCash = sim.dataCash;\n\n        if (currentSelectedPeriod !== 'all') {\n          const limit = Number(currentSelectedPeriod) + 1;\n          labels = labels.slice(0, limit);\n          dataInvest = dataInvest.slice(0, limit);\n          dataNetAsset = dataNetAsset.slice(0, limit);\n          dataLiability = dataLiability.slice(0, limit);\n          dataCash = dataCash.slice(0, limit);\n        }\n\n        renderChart(labels, dataInvest, dataNetAsset, dataLiability, dataCash);\n      }\n\n      function renderChart(labels, dataInvest, dataNetAsset, dataLiability, dataCash) {\n        const chartElem = document.getElementById('resultChart');\n        if (!chartElem) return;\n        const ctx = chartElem.getContext('2d');\n        const mult = getMultiplier();\n        const unitText = mult === 10000 ? '\u4e07\u5186' : '\u5343\u5186';\n\n        if (chartInstance) chartInstance.destroy();\n        chartInstance = new Chart(ctx, {\n          type: 'line',\n          data: {\n            labels: labels,\n            datasets: [\n              {\n                label: '\u7d14\u8cc7\u7523 (\u7dcf\u8cc7\u7523 - \u8ca0\u50b5)',\n                data: dataNetAsset,\n                borderColor: '#8b5cf6',\n                borderWidth: 3,\n                backgroundColor: 'transparent',\n                fill: false,\n                tension: 0.1,\n                order: 1\n              },\n              {\n                label: '\u6295\u8cc7\u8cc7\u7523',\n                data: dataInvest,\n                borderColor: '#2563eb',\n                borderWidth: 2,\n                backgroundColor: 'rgba(37, 99, 235, 0.08)',\n                fill: true,\n                tension: 0.1,\n                order: 2\n              },\n              {\n                label: '\u73fe\u91d1\u8caf\u84c4\u306e\u307f',\n                data: dataCash,\n                borderColor: '#10b981',\n                borderWidth: 2,\n                borderDash: [5, 5],\n                backgroundColor: 'transparent',\n                fill: false,\n                tension: 0.1,\n                order: 3\n              },\n              {\n                label: '\u8ca0\u50b5\u6b8b\u9ad8',\n                data: dataLiability,\n                borderColor: '#ef4444',\n                borderWidth: 2,\n                backgroundColor: 'transparent',\n                fill: false,\n                tension: 0.1,\n                order: 4\n              }\n            ]\n          },\n          options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            scales: {\n              x: { stacked: false },\n              y: {\n                stacked: false,\n                ticks: {\n                  callback: value => (value \/ mult).toLocaleString() + ' ' + unitText\n                }\n              }\n            }\n          }\n        });\n      }\n\n      window.exportCSV = function() {\n        if (!window.lastSimData) return alert('\u5148\u306b\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n        let csvStr = '\u897f\u66a6,\u6295\u8cc7\u8cc7\u7523(\u5186),\u73fe\u91d1\u8caf\u84c4(\u5186),\u5408\u8a08\u8cc7\u7523(\u5186),\u8ca0\u50b5\u6b8b\u9ad8(\u5186),\u7d14\u8cc7\u7523(\u5186)\\n';\n        window.lastSimData.labels.forEach((label, i) => {\n          csvStr += `\"${label}\",${window.lastSimData.dataInvest[i]},${window.lastSimData.dataCash[i]},${window.lastSimData.dataTotal[i]},${window.lastSimData.dataLiability[i]},${window.lastSimData.dataNetAsset[i]}\\n`;\n        });\n        const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csvStr], { type: 'text\/csv;charset=utf-8;' });\n        const a = document.createElement('a');\n        a.href = URL.createObjectURL(blob);\n        a.download = '\u8cc7\u7523\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3.csv';\n        a.click();\n      };\n\n      setTimeout(function() {\n        runSimulation();\n      }, 300);\n    })();\n  <\/script>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<style>\n  .sim-container {\n    max-width: 900px;\n    margin: 20px auto;\n    padding: 24px;\n    background: #ffffff;\n    border-radius: 12px;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.08);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    color: #333;\n  }\n  .sim-title { text-align: center; font-size: 1.8rem; font-weight: bold; margin-bottom: 8px; color: #1a365d; }\n  .sim-notice { font-size: 0.75rem; color: #718096; text-align: center; margin-bottom: 24px; line-height: 1.4; }\n  .sim-section-title { font-size: 1.15rem; font-weight: bold; margin-top: 24px; margin-bottom: 12px; padding-bottom: 4px; border-bottom: 2px solid #e2e8f0; color: #2b6cb0; display: flex; justify-content: space-between; align-items: center; }\n  \n  .sim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }\n  .sim-field { display: flex; flex-direction: column; }\n  .sim-field label { font-size: 0.8rem; font-weight: bold; margin-bottom: 4px; color: #2d3748; }\n  .sim-field input, .sim-field select { padding: 8px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 0.95rem; }\n  .sim-field .sub-note { font-size: 0.7rem; color: #718096; margin-top: 2px; }\n\n  \/* \u53ce\u652f\u30d0\u30ca\u30fc *\/\n  .balance-banner { padding: 12px 16px; border-radius: 8px; margin: 16px 0; font-weight: bold; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }\n  .balance-banner.positive { background-color: #c6f6d5; color: #22543d; }\n  .balance-banner.negative { background-color: #fed7d7; color: #742a2a; }\n  .balance-sub { font-size: 0.8rem; font-weight: normal; }\n\n  \/* \u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u30ab\u30fc\u30c9 *\/\n  .opt-card { background: #fff; border: 1px solid #cbd5e0; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }\n  .opt-header { padding: 12px 16px; background: #f8fafc; font-weight: bold; font-size: 0.95rem; color: #2d3748; cursor: pointer; display: flex; align-items: center; user-select: none; border-bottom: 1px solid transparent; }\n  .opt-card.open .opt-header { border-bottom-color: #e2e8f0; }\n  .opt-header input[type=\"checkbox\"] { width: 18px; height: 18px; margin-right: 10px; cursor: pointer; }\n  .opt-body { padding: 16px; display: none; }\n  .opt-card.open .opt-body { display: block; }\n\n  \/* \u30c6\u30fc\u30d6\u30eb\u30b9\u30bf\u30a4\u30eb *\/\n  .sim-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 0.85rem; }\n  .sim\n","protected":false},"excerpt":{"rendered":"<p>\u8cc7\u7523\u5f62\u6210\uff06\u30e9\u30a4\u30d5\u30d7\u30e9\u30f3\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc \u203b\u5f53\u30b5\u30a4\u30c8\u306b\u306f\u30a2\u30d5\u30a3\u30ea\u30a8\u30a4\u30c8\u5e83\u544a\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002 \u203b\u672c\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u306e\u8a08\u7b97\u7d50\u679c\u306f\u8a66\u7b97\u5024\u3067\u3042\u308a\u3001\u5c06\u6765\u306e\u904b\u7528\u6210\u679c\u3084\u8cc7\u7523\u984d\u3092\u4fdd\u8a3c\u3059\u308b\u3082\u306e\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002 \u26a0\ufe0f \u5165\u529b\u9805\u76ee\u306b\u6f0f\u308c\u304c\u3042\u308b\u3068\u6b63 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[7,9,8,5,3,11,6,4,10],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-14","tag-7","tag-9","tag-8","tag-5","tag-3","tag-11","tag-6","tag-4","tag-10"],"_links":{"self":[{"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":161,"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions\/176"}],"wp:attachment":[{"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boo-life-sim.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}