${monthLabel}

予測使用量: ${usage} kWh

基本料金: ${basicFee.toLocaleString()} 円

従量料金: ${Math.floor(usageFee).toLocaleString()} 円

燃料費調整額: ${Math.floor(fuelAdjustment).toLocaleString()} 円
（${fuelAdjustmentRates[Number(month) - 1]} 円/kWh）

再エネ賦課金: ${Math.floor(renewableCharge).toLocaleString()} 円
（${Number(month) === 1 || Number(month) >= 5 ? 3.49 : 1.4} 円/kWh）

月額合計: ${monthlyTotal.toLocaleString()} 円

`; detailsContainer.innerHTML += monthlyDetailHtml; }); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 229, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 230, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl p-4", __source: { fileName: "", lineNumber: 231, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-gray-800 mb-6 font-noto-sans", __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }, "年間電気料金シミュレーション"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex rounded-lg overflow-hidden border border-gray-200", __source: { fileName: "", lineNumber: 238, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `flex-1 py-2 px-3 text-xs transition-colors duration-200 ease-in-out ${inputMode === "simple" ? "bg-blue-50 text-blue-800 font-medium border-b-2 border-blue-500" : "bg-gray-100 text-gray-500 hover:bg-gray-50"}`, onClick: ()=>handleInputModeChange("simple"), __source: { fileName: "", lineNumber: 239, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block text-center sm:text-sm text-xs", __source: { fileName: "", lineNumber: 247, columnNumber: 21 }, __self: this }, "使用量1ヶ月分でかんたん試算")), /*#__PURE__*/ React.createElement("button", { className: `flex-1 py-2 px-3 text-xs transition-colors duration-200 ease-in-out ${inputMode === "detailed" ? "bg-blue-50 text-blue-800 font-medium border-b-2 border-blue-500" : "bg-gray-100 text-gray-500 hover:bg-gray-50"}`, onClick: ()=>handleInputModeChange("detailed"), __source: { fileName: "", lineNumber: 251, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block text-center sm:text-sm text-xs", __source: { fileName: "", lineNumber: 259, columnNumber: 21 }, __self: this }, "使用量12ヶ月分でしっかり試算")))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-6", __source: { fileName: "", lineNumber: 267, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 269, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, "契約電力の単位"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded-md", value: planType, onChange: (e)=>setPlanType(e.target.value), __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "A", __source: { fileName: "", lineNumber: 278, columnNumber: 19 }, __self: this }, "アンペア (A)"), /*#__PURE__*/ React.createElement("option", { value: "kVA", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, "キロボルトアンペア (kVA)"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, "契約容量"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 287, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 border rounded-md", placeholder: "契約容量を入力", value: contractCapacity, onChange: (e)=>setContractCapacity(e.target.value), __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, "A または kVA")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 300, columnNumber: 13 }, __self: this }, inputMode === "simple" ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, "使用量入力"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-1/2 p-2 border rounded-md", value: selectedMonth, onChange: (e)=>setSelectedMonth(Number(e.target.value)), __source: { fileName: "", lineNumber: 307, columnNumber: 21 }, __self: this }, months.map((month)=>/*#__PURE__*/ React.createElement("option", { key: month.value, value: month.value, __source: { fileName: "", lineNumber: 313, columnNumber: 25 }, __self: this }, month.label))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 w-1/2", __source: { fileName: "", lineNumber: 318, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 border rounded-md", placeholder: "使用量を入力", value: monthlyUsage, onChange: (e)=>setMonthlyUsage(e.target.value), __source: { fileName: "", lineNumber: 319, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 326, columnNumber: 23 }, __self: this }, "kWh")))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, "月別使用量入力"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 335, columnNumber: 19 }, __self: this }, months.map((month)=>/*#__PURE__*/ React.createElement("div", { key: month.value, className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 337, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm w-24", __source: { fileName: "", lineNumber: 341, columnNumber: 25 }, __self: this }, month.label), /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 border rounded-md", placeholder: "使用量", value: monthlyUsages[month.value], onChange: (e)=>setMonthlyUsages((prev)=>({ ...prev, [month.value]: e.target.value })), __source: { fileName: "", lineNumber: 342, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 354, columnNumber: 25 }, __self: this }, "kWh"))))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-6", __source: { fileName: "", lineNumber: 362, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCalculate, className: "bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 363, columnNumber: 13 }, __self: this }, "試算する")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 371, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-center text-gray-800 mb-4", __source: { fileName: "", lineNumber: 372, columnNumber: 13 }, __self: this }, "シミュレーション結果"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 375, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 376, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 377, columnNumber: 17 }, __self: this }, "年間電気料金（概算）"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 378, columnNumber: 17 }, __self: this }, Object.keys(yearlyPrediction).length > 0 ? calculateTotalYearly().toLocaleString() + "円" : "計算結果がここに表示されます")), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDetails(!showDetails), className: "bg-gray-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 385, columnNumber: 17 }, __self: this }, showDetails ? "詳細を隠す" : "詳細を見る")), showDetails && Object.keys(yearlyPrediction).length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 393, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this }, "月別予測使用量と料金"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 397, columnNumber: 19 }, __self: this }, Object.entries(yearlyPrediction).sort(([a], [b])=>{ const aNum = Number(a); const bNum = Number(b); if (aNum === 1) return 1; if (bNum === 1) return -1; return aNum - bNum; }).map(([month, usage])=>{ const monthLabel = months.find((m)=>m.value === Number(month))?.label; const basicFee = Math.floor(planType === "A" ? Math.ceil(Number(contractCapacity) / 10) * 310 : Number(contractCapacity) * 310); const usageFee = calculateUsageFee(usage, planType); const fuelAdjustment = usage * fuelAdjustmentRates[Number(month) - 1]; const renewableCharge = usage * (Number(month) === 1 || Number(month) >= 5 ? 3.49 : 1.4); const monthlyTotal = calculateMonthlyFee(usage, planType, Number(month), contractCapacity); return /*#__PURE__*/ React.createElement("div", { key: month, className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 431, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-semibold text-gray-700", __source: { fileName: "", lineNumber: 435, columnNumber: 29 }, __self: this }, monthLabel), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 438, columnNumber: 29 }, __self: this }, "予測使用量: ", usage, " kWh"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 441, columnNumber: 29 }, __self: this }, "基本料金: ", basicFee.toLocaleString(), " 円"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 444, columnNumber: 29 }, __self: this }, "従量料金: ", Math.floor(usageFee).toLocaleString(), " ", "円"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 448, columnNumber: 29 }, __self: this }, "燃料費調整額:", " ", Math.floor(fuelAdjustment).toLocaleString(), " 円", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 451, columnNumber: 31 }, __self: this }), "（", fuelAdjustmentRates[Number(month) - 1], " ", "円/kWh）"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 454, columnNumber: 29 }, __self: this }, "再エネ賦課金:", " ", Math.floor(renewableCharge).toLocaleString(), " 円", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 457, columnNumber: 31 }, __self: this }), "（", Number(month) === 1 || Number(month) >= 5 ? 3.49 : 1.4, " ", "円/kWh）"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-semibold text-gray-800 mt-2", __source: { fileName: "", lineNumber: 463, columnNumber: 29 }, __self: this }, "月額合計: ", monthlyTotal.toLocaleString(), " 円")); })))))))); }