シミュレーターを準備しています...

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"><\/script>
<script>
  tailwind.config = { corePlugins: { preflight: false } }
<\/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"><\/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"><\/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.8.1/prop-types.min.js"><\/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recharts/2.1.12/Recharts.min.js"><\/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.6/babel.min.js"><\/script>

const RechartsObj = window.Recharts.default || window.Recharts;
  const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip: RechartsTooltip, Legend, ResponsiveContainer, AreaChart, Area } = RechartsObj;

const CalculatorIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-blue-600">
      <rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/>
    </svg>
  );

const TrendingUpIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-blue-500">
      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>
    </svg>
  );

const DownloadIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>
    </svg>
  );

const ChevronDownIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 text-slate-500">
      <polyline points="6 9 12 15 18 9"/>
    </svg>
  );

const ChevronUpIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 text-slate-500">
      <polyline points="18 15 12 9 6 15"/>
    </svg>
  );

const InputCard = ({ label, value, onChange, unit, step = 1, min = 0, max = 10000 }) => {
    const handleInputChange = (e) => {
      let val = e.target.value === '' ? '' : Number(e.target.value);
      onChange(val);
    };

return (
      <div className="mb-6">
        <div className="flex justify-between items-end mb-2">
          <label className="block text-sm font-medium text-slate-700 leading-none m-0">{label}</label>
          <div className="flex items-center">
            <input
              type="number"
              value={value === 0 && value.toString() !== "0" ? '' : value}
              onChange={handleInputChange}
              onBlur={handleBlur}
              onFocus={(e) => e.target.select()}
              step={step}
              min={min}
              max={max}
              className="w-24 p-1 text-right border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 outline-none text-slate-700 font-medium bg-white"
              style={{ borderWidth: '1px' }}
            />
            <span className="ml-1 text-sm text-slate-500 w-6">{unit}</span>
          </div>
        </div>
        <input
          type="range"
          value={value === '' ? 0 : value}
          onChange={(e) => onChange(Number(e.target.value))}
          step={step}
          min={min}
          max={max}
          className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
          style={{ accentColor: '#2563eb' }}
        />
      </div>
    );
  };

const AssetDrawdownSim = () => {
    const [startAge, setStartAge] = useState(65);
    const [initialAssets, setInitialAssets] = useState(3000);
    const [baseInvestRatio, setBaseInvestRatio] = useState(60);
    const [returnRate, setReturnRate] = useState(4.0);
    const [withdrawMethod, setWithdrawMethod] = useState('fixedAmount');
    const [withdrawAmount, setWithdrawAmount] = useState(120);
    const [withdrawRate, setWithdrawRate] = useState(4.0);

const [showAgeChanges, setShowAgeChanges] = useState(false);
    const [ageChanges, setAgeChanges] = useState({
      60: { enabled: false, method: 'fixedAmount', amount: 100, rate: 4.0, ratio: 60 },
      65: { enabled: false, method: 'fixedAmount', amount: 100, rate: 4.0, ratio: 50 },
      70: { enabled: false, method: 'fixedAmount', amount: 80, rate: 3.5, ratio: 40 },
      75: { enabled: false, method: 'fixedAmount', amount: 60, rate: 3.0, ratio: 30 },
      80: { enabled: false, method: 'fixedAmount', amount: 40, rate: 2.0, ratio: 20 },
    });

const SIMULATION_YEARS = 50;

const updateAgeChange = (age, field, value) => {
      setAgeChanges(prev => ({
        ...prev,
        [age]: {
          ...prev[age],
          [field]: value
        }
      }));
    };

const simulationData = useMemo(() => {
      const numInitialAssets = Number(initialAssets) || 0;
      const numBaseInvestRatio = Number(baseInvestRatio) || 0;
      const numReturnRate = Number(returnRate) || 0;
      const numWithdrawAmount = Number(withdrawAmount) || 0;
      const numWithdrawRate = Number(withdrawRate) || 0;
      const numStartAge = Number(startAge) || 0;

let currentTotal = numInitialAssets;
      
      let initialRatio = numBaseInvestRatio;
      [60, 65, 70, 75, 80].forEach(ageTarget => {
        if (ageChanges[ageTarget].enabled && numStartAge >= ageTarget) {
          initialRatio = Number(ageChanges[ageTarget].ratio) || 0;
        }
      });

let currentInvested = currentTotal * (initialRatio / 100);
      let currentCash = currentTotal - currentInvested;

const data = [];

data.push({
        year: 0,
        invested: Math.round(currentInvested),
        cash: Math.round(currentCash),
        total: Math.round(currentTotal),
        withdrawal: 0,
        yield: 0,
        isDepleted: false,
      });

for (let i = 1; i <= SIMULATION_YEARS; i++) {
        if (currentTotal <= 0) {
          data.push({
            year: i,
            invested: 0,
            cash: 0,
            total: 0,
            withdrawal: 0,
            yield: 0,
            isDepleted: true,
          });
          continue;
        }

const currentAge = numStartAge + i - 1;

let currentWithdrawMethod = withdrawMethod;
        let currentWithdrawAmount = numWithdrawAmount;
        let currentWithdrawRate = numWithdrawRate;
        let currentRatio = numBaseInvestRatio;

[60, 65, 70, 75, 80].forEach(ageTarget => {
          if (ageChanges[ageTarget].enabled && currentAge >= ageTarget) {
            currentWithdrawMethod = ageChanges[ageTarget].method;
            currentWithdrawAmount = Number(ageChanges[ageTarget].amount) || 0;
            currentWithdrawRate = Number(ageChanges[ageTarget].rate) || 0;
            currentRatio = Number(ageChanges[ageTarget].ratio) || 0;
          }
        });

currentInvested = currentTotal * (currentRatio / 100);
        currentCash = currentTotal - currentInvested;

const annualYield = currentInvested * (numReturnRate / 100);
        currentInvested += annualYield;

let withdrawal = 0;
        if (currentWithdrawMethod === 'fixedAmount') {
          withdrawal = currentWithdrawAmount;
        } else {
          withdrawal = (currentInvested + currentCash) * (currentWithdrawRate / 100);
        }

currentTotal = currentInvested + currentCash;

data.push({
          year: i,
          invested: Math.max(0, Math.round(currentInvested)),
          cash: Math.max(0, Math.round(currentCash)),
          total: Math.max(0, Math.round(currentTotal)),
          withdrawal: Math.round(actualWithdrawal),
          yield: Math.round(annualYield),
          isDepleted: currentTotal <= 0.1,
        });
      }

return data;
    }, [initialAssets, baseInvestRatio, returnRate, withdrawMethod, withdrawAmount, withdrawRate, startAge, ageChanges]);

const dataAt30Years = simulationData.find(d => d.year === 30) || { total: 0 };
    const depletionYear = simulationData.find(d => d.isDepleted)?.year;

const age65Year = 65 - Number(startAge);
    const dataAt65 = age65Year >= 0 && age65Year <= SIMULATION_YEARS ? simulationData.find(d => d.year === age65Year) : null;

const downloadCSV = () => {
      let csvContent = "経過年数,年齢,合計残高(万円),内 運用残高(万円),内 現金残高(万円),運用益(万円),取崩額(万円)\n";

simulationData.forEach(row => {
        const age = Number(startAge) + row.year;
        csvContent += `${row.year},${age},${row.total},${row.invested},${row.cash},${row.yield},${row.withdrawal}\n`;
      });

const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
      const blob = new Blob([bom, csvContent], { type: 'text/csv;charset=utf-8;' });
      
      const link = document.createElement("a");
      const url = URL.createObjectURL(blob);
      link.setAttribute("href", url);
      link.setAttribute("download", "drawdown_simulation.csv");
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    };

const initialInvestedDisplay = Math.round((Number(initialAssets) || 0) * ((Number(baseInvestRatio) || 0) / 100));
    const initialCashDisplay = Math.round((Number(initialAssets) || 0) * (1 - (Number(baseInvestRatio) || 0) / 100));

return (
      <div className="bg-slate-50 p-4 md:p-8 font-sans text-slate-800" style={{ minHeight: '100vh' }}>
        <div className="max-w-6xl mx-auto">
          
          <header className="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b pb-4 border-slate-200">
            <div>
              <h1 className="text-2xl md:text-3xl font-bold text-slate-800 flex items-center gap-3 m-0">
                <CalculatorIcon />
                資産取り崩しシミュレーター
              </h1>
              <p className="text-slate-500 mt-2 text-sm md:text-base m-0">
                運用しながら取り崩した場合の資産寿命をシミュレーションします。
              </p>
            </div>
            <button
              onClick={downloadCSV}
              className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-300 text-slate-700 rounded-lg shadow-sm hover:bg-slate-50 transition font-medium"
              style={{ borderWidth: '1px' }}
            >
              <DownloadIcon />
              CSVで保存
            </button>
          </header>

<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
            
            <div className="lg:col-span-4 space-y-6">
              <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200" style={{ borderWidth: '1px' }}>
                <h2 className="text-lg font-bold mb-4 flex items-center gap-2 text-slate-700 m-0">
                  <TrendingUpIcon />
                  シミュレーション条件
                </h2>

<InputCard 
                  label="当初資産残高 (合計)" 
                  value={initialAssets} 
                  onChange={setInitialAssets} 
                  unit="万円" 
                  min={1000}
                  max={20000}
                  step={10}
                />
                
                <InputCard 
                  label="基本の運用比率" 
                  value={baseInvestRatio} 
                  onChange={setBaseInvestRatio} 
                  unit="%" 
                  min={0}
                  max={100}
                  step={1}
                />
                <p className="text-xs text-slate-400 -mt-5 mb-6 text-right leading-relaxed m-0">
                  ※ 運用残高: {initialInvestedDisplay.toLocaleString()} 万円<br/>
                  ※ 現金残高: {initialCashDisplay.toLocaleString()} 万円
                </p>

<div className="border-t border-slate-100 my-4 pt-4">
                  <label className="block text-sm font-medium text-slate-600 mb-2 m-0">基本の取り崩し方法</label>
                  <div className="grid grid-cols-2 gap-2 mb-4">
                    <button
                      onClick={() => setWithdrawMethod('fixedAmount')}
                      className={`p-2 text-sm rounded-lg border transition ${
                        withdrawMethod === 'fixedAmount'
                          ? 'bg-blue-50 border-blue-500 text-blue-700 font-bold'
                          : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
                      }`}
                      style={{ borderWidth: '1px' }}
                    >
                      定額取り崩し
                    </button>
                    <button
                      onClick={() => setWithdrawMethod('fixedRate')}
                      className={`p-2 text-sm rounded-lg border transition ${
                        withdrawMethod === 'fixedRate'
                          ? 'bg-blue-50 border-blue-500 text-blue-700 font-bold'
                          : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
                      }`}
                      style={{ borderWidth: '1px' }}
                    >
                      定率取り崩し
                    </button>
                  </div>

{withdrawMethod === 'fixedAmount' ? (
                    <InputCard 
                      label="年間取り崩し額" 
                      value={withdrawAmount} 
                      onChange={setWithdrawAmount} 
                      unit="万円" 
                      min={50}
                      max={1000}
                      step={1}
                    />
                  ) : (
                    <InputCard 
                      label="年間取り崩し率" 
                      value={withdrawRate} 
                      onChange={setWithdrawRate} 
                      unit="%" 
                      min={1}
                      max={10}
                      step={0.1}
                    />
                  )}
                </div>

<div className="border-t border-slate-100 my-4 pt-4">
                  <button 
                    className="flex justify-between items-center w-full text-left p-2 rounded-lg hover:bg-slate-50 transition border-none bg-transparent"
                    onClick={() => setShowAgeChanges(!showAgeChanges)}
                  >
                    <span className="block text-sm font-medium text-slate-700">年齢別の設定変更 (オプション)</span>
                    {showAgeChanges ? <ChevronUpIcon /> : <ChevronDownIcon />}
                  </button>
                  
                  {showAgeChanges && (
                    <div className="mt-4 space-y-4">
                      {[60, 65, 70, 75, 80].map(age => (
                        <div key={age} className="border border-slate-200 p-4 rounded-lg bg-slate-50" style={{ borderWidth: '1px' }}>
                          <label className="flex items-center cursor-pointer mb-3 m-0">
                            <input 
                              type="checkbox" 
                              checked={ageChanges[age].enabled} 
                              onChange={(e) => updateAgeChange(age, 'enabled', e.target.checked)}
                              className="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500"
                            />
                            <span className="ml-2 text-sm font-bold text-slate-700">{age}歳以降の設定を変更する</span>
                          </label>
                          
                          {ageChanges[age].enabled && (
                            <div className="mt-4 pl-4 border-l-2 border-blue-200" style={{ borderLeftWidth: '2px' }}>
                               <InputCard 
                                 label={`${age}歳以降の運用比率`}
                                 value={ageChanges[age].ratio}
                                 onChange={(val) => updateAgeChange(age, 'ratio', val)}
                                 unit="%"
                                 min={0}
                                 max={100}
                                 step={1}
                               />
                               <div className="mb-2">
                                 <label className="block text-sm font-medium text-slate-700 mb-1 m-0">{`${age}歳以降の取崩方法`}</label>
                                 <div className="grid grid-cols-2 gap-2 mb-4">
                                    <button
                                      onClick={() => updateAgeChange(age, 'method', 'fixedAmount')}
                                      className={`p-2 text-xs rounded-lg border transition ${
                                        ageChanges[age].method === 'fixedAmount'
                                          ? 'bg-blue-50 border-blue-500 text-blue-700 font-bold'
                                          : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
                                      }`}
                                      style={{ borderWidth: '1px' }}
                                    >
                                      定額
                                    </button>
                                    <button
                                      onClick={() => updateAgeChange(age, 'method', 'fixedRate')}
                                      className={`p-2 text-xs rounded-lg border transition ${
                                        ageChanges[age].method === 'fixedRate'
                                          ? 'bg-blue-50 border-blue-500 text-blue-700 font-bold'
                                          : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
                                      }`}
                                      style={{ borderWidth: '1px' }}
                                    >
                                      定率
                                    </button>
                                  </div>
                               </div>
                               {ageChanges[age].method === 'fixedAmount' ? (
                                 <InputCard 
                                   label={`${age}歳以降の取崩額`}
                                   value={ageChanges[age].amount}
                                   onChange={(val) => updateAgeChange(age, 'amount', val)}
                                   unit="万円"
                                   min={0}
                                   max={1000}
                                   step={1}
                                 />
                               ) : (
                                 <InputCard 
                                   label={`${age}歳以降の取崩率`}
                                   value={ageChanges[age].rate}
                                   onChange={(val) => updateAgeChange(age, 'rate', val)}
                                   unit="%"
                                   min={0}
                                   max={10}
                                   step={0.1}
                                 />
                               )}
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </div>

</div>

{dataAt65 && (
                <div 
                  className={`p-6 rounded-xl shadow-sm border text-center ${dataAt65.total > 0 ? 'bg-emerald-600 text-white' : 'bg-red-50 text-red-800 border-red-200'}`}
                  style={{ borderWidth: '1px', borderColor: dataAt65.total > 0 ? 'transparent' : '#fecaca' }}
                >
                  <h3 className={`text-sm font-medium mb-1 m-0 ${dataAt65.total > 0 ? 'text-emerald-200' : 'text-red-600'}`}>
                    65歳時の資産残高
                  </h3>
                  <div className="text-4xl font-bold mb-2">
                    {dataAt65.total.toLocaleString()}
                    <span className="text-lg font-normal ml-1">万円</span>
                  </div>
                </div>
              )}

<div 
                className={`p-6 rounded-xl shadow-sm border text-center ${dataAt30Years.total > 0 ? 'bg-indigo-600 text-white' : 'bg-red-50 text-red-800 border-red-200'}`}
                style={{ borderWidth: '1px', borderColor: dataAt30Years.total > 0 ? 'transparent' : '#fecaca' }}
              >
                <h3 className={`text-sm font-medium mb-1 m-0 ${dataAt30Years.total > 0 ? 'text-indigo-200' : 'text-red-600'}`}>
                  30年後 ({Number(startAge) + 30}歳) の資産残高
                </h3>
                <div className="text-4xl font-bold mb-2">
                  {dataAt30Years.total.toLocaleString()}
                  <span className="text-lg font-normal ml-1">万円</span>
                </div>
                <div className="text-sm opacity-80 m-0">
                  {depletionYear ? (
                     depletionYear <= 30 ? `${depletionYear}年目に資金が枯渇します` : "30年間資金は維持されます"
                  ) : "30年間資金は維持されます"}
                </div>
              </div>
            </div>

<div className="lg:col-span-8 space-y-6">
              
              <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200" style={{ borderWidth: '1px' }}>
                <h3 className="text-lg font-bold mb-4 text-slate-700 m-0">資産推移グラフ</h3>
                <div className="h-80 w-full" style={{ minHeight: '320px' }}>
                  <ResponsiveContainer width="100%" height="100%">
                    <AreaChart
                      data={simulationData}
                      margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
                    >
                      <defs>
                        <linearGradient id="colorInvested" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.8}/>
                          <stop offset="95%" stopColor="#3b82f6" stopOpacity={0.1}/>
                        </linearGradient>
                        <linearGradient id="colorCash" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor="#94a3b8" stopOpacity={0.8}/>
                          <stop offset="95%" stopColor="#94a3b8" stopOpacity={0.1}/>
                        </linearGradient>
                      </defs>
                      <CartesianGrid strokeDasharray="3 3" vertical={false} />
                      <XAxis 
                        dataKey="year" 
                        label={{ value: '経過年数', position: 'insideBottomRight', offset: -5 }} 
                        tick={{fontSize: 12}}
                      />
                      <YAxis 
                        tickFormatter={(value) => `${value}`}
                        label={{ value: '残高 (万円)', angle: -90, position: 'insideLeft' }} 
                        tick={{fontSize: 12}}
                      />
                      <RechartsTooltip 
                        formatter={(value) => `${value.toLocaleString()} 万円`}
                        labelFormatter={(label) => `${label}年後`}
                        contentStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.95)', borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', color: '#333' }}
                      />
                      <Legend verticalAlign="top" height={36}/>
                      <Area 
                        type="monotone" 
                        dataKey="cash" 
                        name="現金残高" 
                        stackId="1" 
                        stroke="#94a3b8" 
                        fill="url(#colorCash)" 
                      />
                      <Area 
                        type="monotone" 
                        dataKey="invested" 
                        name="運用残高" 
                        stackId="1" 
                        stroke="#3b82f6" 
                        fill="url(#colorInvested)" 
                      />
                    </AreaChart>
                  </ResponsiveContainer>
                </div>
              </div>

<div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 overflow-hidden" style={{ borderWidth: '1px' }}>
                <h3 className="text-lg font-bold mb-4 text-slate-700 m-0">年別シミュレーション詳細</h3>
                <div className="overflow-x-auto max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
                  <table className="w-full text-sm text-left">
                    <thead className="text-xs text-slate-500 uppercase bg-slate-50 sticky top-0 z-10">
                      <tr>
                        <th className="px-4 py-3 font-medium border-b border-slate-200">経過年数</th>
                        <th className="px-4 py-3 font-medium border-b border-slate-200">年齢</th>
                        <th className="px-4 py-3 font-medium text-right border-b border-slate-200">合計残高</th>
                        <th className="px-4 py-3 font-medium text-right bg-blue-50 text-blue-700 border-b border-slate-200">内 運用残高</th>
                        <th className="px-4 py-3 font-medium text-right text-slate-600 border-b border-slate-200">内 現金残高</th>
                        <th className="px-4 py-3 font-medium text-right text-green-700 border-b border-slate-200">運用益</th>
                        <th className="px-4 py-3 font-medium text-right text-red-600 border-b border-slate-200">取崩額</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {simulationData.map((row) => (
                        <tr 
                          key={row.year} 
                          className={`hover:bg-slate-50 transition ${row.year === 30 ? 'bg-yellow-50 font-bold border-l-4 border-l-yellow-400' : 'border-b border-slate-100'}`}
                        >
                          <td className="px-4 py-3 font-medium text-slate-900">
                            {row.year === 0 ? '開始時' : `${row.year}年後`}
                            {row.year === 30 && <span className="ml-2 text-xs bg-yellow-200 text-yellow-800 px-2 py-0.5 rounded-full">CHECK</span>}
                          </td>
                          <td className="px-4 py-3 text-slate-600">
                            {Number(startAge) + row.year}歳
                          </td>
                          <td className={`px-4 py-3 text-right font-bold ${row.total === 0 ? 'text-red-500' : 'text-slate-800'}`}>
                            {row.total.toLocaleString()} <span className="text-xs font-normal text-slate-400">万円</span>
                          </td>
                          <td className="px-4 py-3 text-right text-blue-600 bg-blue-50/30">
                            {row.invested.toLocaleString()}
                          </td>
                          <td className="px-4 py-3 text-right text-slate-500">
                            {row.cash.toLocaleString()}
                          </td>
                          <td className="px-4 py-3 text-right text-green-600">
                            {row.yield > 0 ? `+${row.yield.toLocaleString()}` : '-'}
                          </td>
                          <td className="px-4 py-3 text-right text-red-500">
                            {row.withdrawal > 0 ? `-${row.withdrawal.toLocaleString()}` : '-'}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>

</div>
          </div>
        </div>
      </div>
    );
  };

const root = ReactDOM.createRoot(document.getElementById('asset-sim-root'));
  root.render(<AssetDrawdownSim />);
<\/script>
</body>
</html>