{"id":32496,"date":"2025-03-14T14:47:45","date_gmt":"2025-03-14T05:47:45","guid":{"rendered":"https:\/\/stg.minkabu.jp\/cardloan\/?p=32496"},"modified":"2025-03-17T11:57:05","modified_gmt":"2025-03-17T02:57:05","slug":"simulation","status":"publish","type":"post","link":"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/","title":{"rendered":"\u8fd4\u6e08\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3"},"content":{"rendered":"<!-- \u30ed\u30fc\u30f3\u8a08\u7b97\u6a5f\u306e\u30b3\u30f3\u30c6\u30ca -->\r\n<div id=\"loan-calculator-container\" style=\"max-width: 500px; margin: 0 auto; font-family: sans-serif;\"><\/div>\r\n\r\n<!-- React \u3068 ReactDOM \u306e\u30ed\u30fc\u30c9 -->\r\n<script src=\"https:\/\/unpkg.com\/react@17\/umd\/react.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/react-dom@17\/umd\/react-dom.production.min.js\"><\/script>\r\n\r\n<!-- Babel for JSX -->\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n<!-- \u30b9\u30bf\u30a4\u30eb -->\r\n<style>\r\n  .loan-calc {\r\n    background-color: #f3f4f6;\r\n    padding: 1rem;\r\n    border-radius: 0.5rem;\r\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n  .loan-calc h2 {\r\n    font-size: 1.125rem;\r\n    font-weight: 600;\r\n    border-left: 4px solid #334155;\r\n    padding-left: 0.5rem;\r\n    margin-bottom: 1.5rem;\r\n    color: #1e293b;\r\n  }\r\n  .loan-calc-tabs {\r\n    display: flex;\r\n    margin-bottom: 1rem;\r\n    flex-direction: row;\r\n  }\r\n  .loan-calc-tab {\r\n    flex: 1;\r\n    padding: 0.75rem 0.5rem;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    font-size: 0.9rem;\r\n    line-height: 1.2;\r\n    word-break: break-word;\r\n  }\r\n  .loan-calc-tab-active {\r\n    background-color: #334155;\r\n    color: white;\r\n  }\r\n  .loan-calc-tab-inactive {\r\n    background-color: white;\r\n    color: #334155;\r\n  }\r\n\r\n  \/* \u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u30dc\u30bf\u30f3\u306e hover \u3092\u56fa\u5b9a\u3059\u308b *\/\r\n.simulation-button:hover {\r\n    background: #334155 ; \/* \u5143\u306e\u8272\u3092\u56fa\u5b9a *\/\r\n    color: white ;\r\n    text-shadow: none;\r\n}\r\n\r\n\/* \u30bf\u30d6\u30dc\u30bf\u30f3\u306e hover \u3092\u56fa\u5b9a\u3059\u308b *\/\r\n.loan-calc-tab:hover {\r\n    background: #334155;\r\n    color: white;\r\n    text-shadow: none;\r\n}\r\n\r\n  .loan-calc-form-group {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: space-between;\r\n    margin-bottom: 1rem;\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n  }\r\n  .loan-calc-select, .loan-calc-input {\r\n    border: 1px solid #cbd5e1;\r\n    border-radius: 0.25rem;\r\n    padding: 0.5rem;\r\n    color: #475569;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n    font-size: 16px; \/* \u30e2\u30d0\u30a4\u30eb\u3067\u30d5\u30a9\u30fc\u30e0\u304c\u62e1\u5927\u3055\u308c\u308b\u306e\u3092\u9632\u3050 *\/\r\n  }\r\n  .loan-calc-label {\r\n    color: #334155;\r\n    margin-bottom: 0.5rem;\r\n    width: 100%;\r\n  }\r\n  .loan-calc-input-group {\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n  }\r\n  .loan-calc-unit {\r\n    margin-left: 0.5rem;\r\n    color: #334155;\r\n    white-space: nowrap;\r\n  }\r\n  .loan-calc-button {\r\n    background-color: #334155;\r\n    color: white;\r\n    padding: 0.75rem 1.5rem;\r\n    border-radius: 0.25rem;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    border: none;\r\n    margin: 1.5rem auto;\r\n    width: 100%;\r\n    max-width: 250px;\r\n    font-size: 1rem;\r\n  }\r\n  .loan-calc-button:hover {\r\n    background-color: #1e293b;\r\n  }\r\n  .loan-calc-button:disabled {\r\n    background-color: #94a3b8;\r\n    cursor: not-allowed;\r\n  }\r\n  .loan-calc-result {\r\n    margin-top: 2rem;\r\n  }\r\n  .loan-calc-result-title {\r\n    font-size: 1.125rem;\r\n    font-weight: 600;\r\n    border-left: 4px solid #334155;\r\n    padding-left: 0.5rem;\r\n    margin-bottom: 1rem;\r\n    color: #1e293b;\r\n  }\r\n  .loan-calc-result-box {\r\n    background-color: white;\r\n    padding: 1.5rem;\r\n    border-radius: 0.5rem;\r\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n    margin-bottom: 1rem;\r\n  }\r\n  .loan-calc-result-label {\r\n    color: #334155;\r\n    margin-bottom: 0.5rem;\r\n  }\r\n  .loan-calc-result-value {\r\n    text-align: right;\r\n    font-size: 1.875rem;\r\n    font-weight: 700;\r\n    color: #334155;\r\n  }\r\n  .loan-calc-result-unit {\r\n    font-size: 1rem;\r\n  }\r\n  .loan-calc-reset {\r\n    background-color: #e2e8f0;\r\n    color: #334155;\r\n    padding: 0.5rem 1rem;\r\n    border-radius: 0.25rem;\r\n    cursor: pointer;\r\n    border: none;\r\n    margin: 0 auto;\r\n    display: block;\r\n    font-size: 1rem;\r\n  }\r\n  .loan-calc-reset:hover {\r\n    background-color: #cbd5e1;\r\n  }\r\n  .loan-calc-disclaimer {\r\n    font-size: 0.75rem;\r\n    color: #64748b;\r\n    margin-top: 1.5rem;\r\n    line-height: 1.4;\r\n  }\r\n  .loan-calc-flex {\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n  }\r\n  .loan-calc-info-icon {\r\n    margin-left: 0.5rem;\r\n    background-color: #e2e8f0;\r\n    border-radius: 9999px;\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #334155;\r\n    font-size: 0.875rem;\r\n    flex-shrink: 0;\r\n  }\r\n  \r\n  \/* \u30e2\u30d0\u30a4\u30eb\u5bfe\u5fdc\u306e\u305f\u3081\u306e\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea *\/\r\n  @media (min-width: 640px) {\r\n    .loan-calc-form-group {\r\n      flex-direction: row;\r\n      align-items: center;\r\n    }\r\n    .loan-calc-label {\r\n      width: 34%;\r\n      margin-bottom: 0;\r\n    }\r\n    .loan-calc-input-group {\r\n      width: 64%;\r\n    }\r\n    .loan-calc-select, .loan-calc-input {\r\n      width: 100%;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 -->\r\n<script type=\"text\/babel\">\r\n  const LoanCalculator = () => {\r\n    const [loanAmount, setLoanAmount] = React.useState('');\r\n    const [interestRate, setInterestRate] = React.useState('');\r\n    const [repaymentPeriod, setRepaymentPeriod] = React.useState('');\r\n    const [monthlyPayment, setMonthlyPayment] = React.useState('');\r\n    const [activeTab, setActiveTab] = React.useState('amount');\r\n    const [resultType, setResultType] = React.useState('');\r\n    const [resultValue, setResultValue] = React.useState(0);\r\n    const [showResult, setShowResult] = React.useState(false);\r\n\r\n    \/\/ \u5229\u7528\u53ef\u80fd\u306a\u8cb8\u4ed8\u91d1\u984d\uff0810\u4e07\u5186\u3054\u3068\uff09\u3068\u6307\u5b9a\u91d1\u5229\r\n    const loanAmounts = [];\r\n    for (let i = 10; i <= 500; i += 10) {\r\n      loanAmounts.push(i);\r\n    }\r\n    \r\n    const interestRates = [3.0, 4.7, 7.7, 15.0, 18.0];\r\n\r\n    const calculateRepayment = () => {\r\n  let newResultValue;\r\n\r\n  if (activeTab === 'amount') {\r\n    \/\/ **\u6bce\u6708\u306e\u8fd4\u6e08\u984d\u3092\u6c42\u3081\u308b\u30e2\u30fc\u30c9**\r\n    const principal = parseFloat(loanAmount) * 10000; \/\/ \u4e07\u5186\u3092\u5186\u306b\u5909\u63db\r\n    const annualRate = parseFloat(interestRate) \/ 100;\r\n    const monthlyRate = annualRate \/ 12;\r\n    const totalPayments = parseInt(repaymentPeriod, 10);\r\n\r\n    \/\/ **\u7121\u52b9\u306a\u5165\u529b\u306e\u30c1\u30a7\u30c3\u30af**\r\n    if (isNaN(principal) || isNaN(monthlyRate) || isNaN(totalPayments) || totalPayments <= 0) {\r\n      setResultType('error');\r\n      setResultValue(null);\r\n      setShowResult(true);\r\n      return;\r\n    }\r\n\r\n    \/\/ **\u8fd4\u6e08\u984d\u306e\u8a08\u7b97**\r\n    const x = Math.pow(1 + monthlyRate, totalPayments);\r\n    const denominator = x - 1;\r\n\r\n    \/\/ **\u5206\u6bcd\u304c0\u307e\u305f\u306f\u975e\u5e38\u306b\u5c0f\u3055\u3044\u5834\u5408\u306f\u30a8\u30e9\u30fc**\r\n    if (denominator <= 0) {\r\n      setResultType('error');\r\n      setResultValue(null);\r\n      setShowResult(true);\r\n      return;\r\n    }\r\n\r\n    const monthlyPayment = (principal * monthlyRate * x) \/ denominator;\r\n\r\n    \/\/ **\u8a08\u7b97\u7d50\u679c\u304c NaN \u3084 Infinity \u306e\u5834\u5408\u306f\u30a8\u30e9\u30fc**\r\n    if (!isFinite(monthlyPayment) || isNaN(monthlyPayment)) {\r\n      setResultType('error');\r\n      setResultValue(null);\r\n      setShowResult(true);\r\n      return;\r\n    }\r\n\r\n    newResultValue = Math.round(monthlyPayment);\r\n    setResultType('monthly');\r\n  } else {\r\n    \/\/ **\u8fd4\u6e08\u56de\u6570\u3092\u6c42\u3081\u308b\u30e2\u30fc\u30c9**\r\n    const principal = parseFloat(loanAmount) * 10000; \/\/ \u4e07\u5186\u3092\u5186\u306b\u5909\u63db\r\n    const annualRate = parseFloat(interestRate) \/ 100;\r\n    const monthlyRate = annualRate \/ 12;\r\n    const payment = parseFloat(monthlyPayment) * 1000; \/\/ \u5343\u5186\u3092\u5186\u306b\u5909\u63db\r\n\r\n    \/\/ **\u7121\u52b9\u306a\u5165\u529b\u306e\u30c1\u30a7\u30c3\u30af**\r\n    if (isNaN(principal) || isNaN(monthlyRate) || isNaN(payment) || payment <= 0) {\r\n      setResultType('error');\r\n      setResultValue(null);\r\n      setShowResult(true);\r\n      return;\r\n    }\r\n\r\n    \/\/ **\u6700\u4f4e\u8fd4\u6e08\u984d\u30c1\u30a7\u30c3\u30af**\r\n    let minPaymentRatio = 0;\r\n    if (annualRate >= 0.18) {\r\n      minPaymentRatio = 0.03; \/\/ 3.0%\r\n    } else if (annualRate >= 0.15) {\r\n      minPaymentRatio = 0.02; \/\/ 2.0%\r\n    } else {\r\n      minPaymentRatio = 0.015; \/\/ 1.5%\r\n    }\r\n\r\n    const minPayment = principal * minPaymentRatio;\r\n\r\n    if (payment < minPayment) {\r\n      setResultType('error');\r\n      setResultValue(null);\r\n      setShowResult(true);\r\n      return;\r\n    }\r\n\r\n    \/\/ **\u8fd4\u6e08\u56de\u6570\u306e\u8a08\u7b97**\r\n    const numerator = Math.log(payment \/ (payment - principal * monthlyRate));\r\n    const denominator = Math.log(1 + monthlyRate);\r\n\r\n    \/\/ **\u8a08\u7b97\u7d50\u679c\u304c\u7121\u52b9\u306a\u5834\u5408\u306f\u30a8\u30e9\u30fc**\r\n    if (!isFinite(numerator) || !isFinite(denominator) || isNaN(numerator) || isNaN(denominator)) {\r\n      setResultType('error');\r\n      setResultValue(null);\r\n      setShowResult(true);\r\n      return;\r\n    }\r\n\r\n    const months = Math.ceil(numerator \/ denominator);\r\n\r\n    \/\/ **\u8fd4\u6e08\u56de\u6570\u304c\u7570\u5e38\u5024\u306a\u3089\u30a8\u30e9\u30fc**\r\n    if (isNaN(months) || months <= 0 || months > 500) {\r\n      setResultType('error');\r\n      setResultValue(null);\r\n      setShowResult(true);\r\n      return;\r\n    }\r\n\r\n    newResultValue = months;\r\n    setResultType('period');\r\n  }\r\n\r\n  setResultValue(newResultValue);\r\n  setShowResult(true);\r\n\r\n      \r\n\/\/ \u7d50\u679c\u3078\u30b9\u30af\u30ed\u30fc\u30eb\uff08\u3088\u308a\u4e0a\u90e8\u3082\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u8abf\u6574\uff09\r\nsetTimeout(() => {\r\n  const resultElement = document.querySelector('.loan-calc-result');\r\n  if (resultElement) {\r\n    resultElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n\r\n    \/\/ \u3055\u3089\u306b\u5c11\u3057\u4e0a\u3078\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3001\u4e0a\u306e\u60c5\u5831\u3082\u898b\u3048\u308b\u3088\u3046\u306b\u3059\u308b\r\n    setTimeout(() => {\r\n      window.scrollBy(0, -50); \/\/ 50px \u4e0a\u306b\u30b9\u30af\u30ed\u30fc\u30eb\r\n    }, 200);\r\n  }\r\n}, 100);\r\n    };\r\n\r\n    const resetForm = () => {\r\n      setShowResult(false);\r\n      setLoanAmount('');\r\n      setInterestRate('');\r\n      setRepaymentPeriod('');\r\n      setMonthlyPayment('');\r\n    };\r\n\r\n    return (\r\n      <div className=\"loan-calc\">\r\n        <div className=\"loan-calc-result-title\">\u8fd4\u6e08\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3<\/div>\r\n        \r\n        <div className=\"loan-calc-tabs\">\r\n          <button \r\n            className={`loan-calc-tab ${activeTab === 'amount' ? 'loan-calc-tab-active' : 'loan-calc-tab-inactive'}`}\r\n            onClick={() => {\r\n              setActiveTab('amount');\r\n              setShowResult(false);\r\n            }}\r\n          >\r\n            \u8fd4\u6e08\u91d1\u984d (\u6bce\u56de\u3044\u304f\u3089\u8fd4\u6e08\u3059\u308c\u3070\u3044\u3044\u304b)\r\n          <\/button>\r\n          <button \r\n            className={`loan-calc-tab ${activeTab === 'period' ? 'loan-calc-tab-active' : 'loan-calc-tab-inactive'}`}\r\n            onClick={() => {\r\n              setActiveTab('period');\r\n              setShowResult(false);\r\n            }}\r\n          >\r\n            \u8fd4\u6e08\u671f\u9593 (\u3069\u306e\u304f\u3089\u3044\u306e\u671f\u9593\u8fd4\u6e08\u3059\u308c\u3070\u3044\u3044\u304b)\r\n          <\/button>\r\n        <\/div>\r\n        \r\n        <div style={{ marginTop: '1.5rem' }}>\r\n          <div className=\"loan-calc-form-group\">\r\n            <label className=\"loan-calc-label\">\u501f\u5165\u3054\u5e0c\u671b\u984d<\/label>\r\n            <div className=\"loan-calc-input-group\">\r\n              <select\r\n                value={loanAmount}\r\n                onChange={(e) => {\r\n                  setLoanAmount(e.target.value);\r\n                  setShowResult(false);\r\n                }}\r\n                className=\"loan-calc-select\"\r\n              >\r\n                <option value=\"\">\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/option>\r\n                {loanAmounts.map(amount => (\r\n                  <option key={amount} value={amount}>{amount}<\/option>\r\n                ))}\r\n              <\/select>\r\n              <span className=\"loan-calc-unit\">\u4e07\u5186<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <div className=\"loan-calc-form-group\">\r\n            <div className=\"loan-calc-label loan-calc-flex\">\r\n              <span>\u501f\u5165\u5229\u7387\uff08\u5b9f\u8cea\u5e74\u7387\uff09<\/span>\r\n             \r\n            <\/div>\r\n            <div className=\"loan-calc-input-group\">\r\n              <select\r\n                value={interestRate}\r\n                onChange={(e) => {\r\n                  setInterestRate(e.target.value);\r\n                  setShowResult(false);\r\n                }}\r\n                className=\"loan-calc-select\"\r\n              >\r\n                <option value=\"\">\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/option>\r\n                {interestRates.map(rate => (\r\n                  <option key={rate} value={rate}>{rate}<\/option>\r\n                ))}\r\n              <\/select>\r\n              <span className=\"loan-calc-unit\">%<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          {activeTab === 'amount' ? (\r\n            <div className=\"loan-calc-form-group\">\r\n              <div className=\"loan-calc-label loan-calc-flex\">\r\n                <span>\u3054\u8fd4\u6e08\u56de\u6570<\/span>\r\n                \r\n              <\/div>\r\n              <div className=\"loan-calc-input-group\">\r\n                <input\r\n  type=\"number\"\r\n  min=\"1\" \/\/ \u30de\u30a4\u30ca\u30b9\u306e\u5165\u529b\u3092\u9632\u3050\r\n  value={repaymentPeriod}\r\n  onChange={(e) => {\r\n    let value = parseInt(e.target.value, 10);\r\n    if (isNaN(value) || value < 1) {\r\n      value = 1; \/\/ 1\u672a\u6e80\u306e\u5024\u3092\u81ea\u52d5\u7684\u306b1\u306b\u3059\u308b\r\n    }\r\n    setRepaymentPeriod(value);\r\n    setShowResult(false);\r\n  }}\r\n  className=\"loan-calc-input\"\r\n  placeholder=\"\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\"\r\n\/>\r\n\r\n                <span className=\"loan-calc-unit\">\u56de<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          ) : (\r\n            <div className=\"loan-calc-form-group\">\r\n              <div className=\"loan-calc-label loan-calc-flex\">\r\n                <span>\u6bce\u56de\u306e\u3054\u8fd4\u6e08\u91d1\u984d<\/span>\r\n              \r\n              <\/div>\r\n              <div className=\"loan-calc-input-group\">\r\n                <input\r\n  type=\"number\"\r\n  min=\"1\" \/\/ \u30de\u30a4\u30ca\u30b9\u306e\u5165\u529b\u3092\u9632\u3050\r\n  value={monthlyPayment}\r\n  onChange={(e) => {\r\n    let value = parseInt(e.target.value, 10);\r\n    if (isNaN(value) || value < 1) {\r\n      value = 1; \/\/ 1\u672a\u6e80\u306e\u5024\u3092\u81ea\u52d5\u7684\u306b1\u306b\u3059\u308b\r\n    }\r\n    setMonthlyPayment(value);\r\n    setShowResult(false);\r\n  }}\r\n  className=\"loan-calc-input\"\r\n  placeholder=\"\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\"\r\n\/>\r\n                <span className=\"loan-calc-unit\">\u5343\u5186<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          )}\r\n        <\/div>\r\n        \r\n        <button\r\n          onClick={calculateRepayment}\r\n          className=\"loan-calc-button\"\r\n          disabled={!loanAmount || !interestRate || (activeTab === 'amount' ? !repaymentPeriod : !monthlyPayment)}\r\n        >\r\n          \u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u3059\u308b\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style={{ marginLeft: '0.5rem' }}>\r\n            <path fillRule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clipRule=\"evenodd\" \/>\r\n          <\/svg>\r\n        <\/button>\r\n        \r\n        {showResult && (\r\n  <div className=\"loan-calc-result\">\r\n    <div className=\"loan-calc-result-title\">\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u7d50\u679c<\/div>\r\n\r\n    <div className=\"loan-calc-result-box\">\r\n      {resultType === 'error' ? (\r\n        <p className=\"loan-calc-result-label\" style={{ color: 'red', fontWeight: 'bold' }}>\r\n          \u5927\u5909\u7533\u3057\u8a33\u3054\u3056\u3044\u307e\u305b\u3093\u304c\u3001\u518d\u5ea6\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u3084\u308a\u76f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002\r\n        <\/p>\r\n      ) : resultType === 'monthly' ? (\r\n        <>\r\n          <p className=\"loan-calc-result-label\">\u6bce\u6708\u306e\u3054\u8fd4\u6e08\u91d1\u984d<\/p>\r\n          <p className=\"loan-calc-result-value\">\r\n            {resultValue ? resultValue.toLocaleString() : '\u30a8\u30e9\u30fc'} <span className=\"loan-calc-result-unit\">\u5186<\/span>\r\n          <\/p>\r\n        <\/>\r\n      ) : (\r\n        <>\r\n          <p className=\"loan-calc-result-label\">\u3054\u8fd4\u6e08\u56de\u6570<\/p>\r\n          <p className=\"loan-calc-result-value\">\r\n            {resultValue ? `${resultValue}\u56de` : '\u30a8\u30e9\u30fc'}\r\n          <\/p>\r\n        <\/>\r\n      )}\r\n    <\/div>\r\n\r\n    <button onClick={resetForm} className=\"loan-calc-reset\">\r\n      \u30ea\u30bb\u30c3\u30c8\r\n    <\/button>\r\n            \r\n            <p className=\"loan-calc-disclaimer\">\r\n              \u203b\u3053\u306e\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u3067\u306e\u8a66\u7b97\u7d50\u679c\u306f\u53c2\u8003\u5024\u3067\u3059\u3002\u5b9f\u969b\u306e\u3054\u8fd4\u6e08\u5185\u5bb9\u3068\u306f\u7570\u306a\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001\u3042\u304f\u307e\u3067\u3082\u76ee\u5b89\u3068\u3057\u3066\u3054\u5229\u7528\u304f\u3060\u3055\u3044\u3002\r\n            <\/p>\r\n          <\/div>\r\n        )}\r\n      <\/div>\r\n    );\r\n  };\r\n\r\n  \/\/ ReactDOM\u3092\u4f7f\u7528\u3057\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\r\n  ReactDOM.render(\r\n    <LoanCalculator \/>,\r\n    document.getElementById('loan-calculator-container')\r\n  );\r\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-32496","post","type-post","status-publish","format-standard","hentry","category-card-loan"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u8fd4\u6e08\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3 - \u307f\u3093\u304b\u3076<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u8fd4\u6e08\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3 - \u307f\u3093\u304b\u3076\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/\" \/>\n<meta property=\"og:site_name\" content=\"\u307f\u3093\u304b\u3076 \u30ab\u30fc\u30c9\u30ed\u30fc\u30f3\u6bd4\u8f03\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-14T05:47:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-17T02:57:05+00:00\" \/>\n<meta name=\"author\" content=\"hiranaka\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"hiranaka\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"14\u5206\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u8fd4\u6e08\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3 - \u307f\u3093\u304b\u3076","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"ja_JP","og_type":"article","og_title":"\u8fd4\u6e08\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3 - \u307f\u3093\u304b\u3076","og_url":"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/","og_site_name":"\u307f\u3093\u304b\u3076 \u30ab\u30fc\u30c9\u30ed\u30fc\u30f3\u6bd4\u8f03","article_published_time":"2025-03-14T05:47:45+00:00","article_modified_time":"2025-03-17T02:57:05+00:00","author":"hiranaka","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"hiranaka","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"14\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/#article","isPartOf":{"@id":"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/"},"author":{"name":"hiranaka","@id":"https:\/\/stg.minkabu.jp\/cardloan\/#\/schema\/person\/d924e412af3670e9d592fd8f75f4792e"},"headline":"\u8fd4\u6e08\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3","datePublished":"2025-03-14T05:47:45+00:00","dateModified":"2025-03-17T02:57:05+00:00","mainEntityOfPage":{"@id":"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/"},"wordCount":0,"commentCount":0,"articleSection":["\u30ab\u30fc\u30c9\u30ed\u30fc\u30f3"],"inLanguage":"ja","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/stg.minkabu.jp\/cardloan\/simulation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/","url":"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/","name":"\u8fd4\u6e08\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3 - \u307f\u3093\u304b\u3076","isPartOf":{"@id":"https:\/\/stg.minkabu.jp\/cardloan\/#website"},"datePublished":"2025-03-14T05:47:45+00:00","dateModified":"2025-03-17T02:57:05+00:00","author":{"@id":"https:\/\/stg.minkabu.jp\/cardloan\/#\/schema\/person\/d924e412af3670e9d592fd8f75f4792e"},"breadcrumb":{"@id":"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.minkabu.jp\/cardloan\/simulation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.minkabu.jp\/cardloan\/simulation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/stg.minkabu.jp\/cardloan\/"},{"@type":"ListItem","position":2,"name":"\u8fd4\u6e08\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3"}]},{"@type":"WebSite","@id":"https:\/\/stg.minkabu.jp\/cardloan\/#website","url":"https:\/\/stg.minkabu.jp\/cardloan\/","name":"\u307f\u3093\u304b\u3076 \u30ab\u30fc\u30c9\u30ed\u30fc\u30f3\u6bd4\u8f03","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.minkabu.jp\/cardloan\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/stg.minkabu.jp\/cardloan\/#\/schema\/person\/d924e412af3670e9d592fd8f75f4792e","name":"hiranaka","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/stg.minkabu.jp\/cardloan\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/11c9dc1a31489d53b85d5bc3e9e6c18b595f7ebb96c2711ac5bb34f1a12664f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/11c9dc1a31489d53b85d5bc3e9e6c18b595f7ebb96c2711ac5bb34f1a12664f7?s=96&d=mm&r=g","caption":"hiranaka"},"url":"https:\/\/stg.minkabu.jp\/cardloan\/author\/hiranaka\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/posts\/32496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/comments?post=32496"}],"version-history":[{"count":9,"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/posts\/32496\/revisions"}],"predecessor-version":[{"id":32499,"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/posts\/32496\/revisions\/32499"}],"wp:attachment":[{"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/media?parent=32496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/categories?post=32496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.minkabu.jp\/cardloan\/wp-json\/wp\/v2\/tags?post=32496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}