{"id":87,"date":"2025-05-01T02:52:35","date_gmt":"2025-04-30T17:52:35","guid":{"rendered":"https:\/\/tok-ltd.co.jp\/service\/?page_id=87"},"modified":"2025-07-08T17:36:18","modified_gmt":"2025-07-08T08:36:18","slug":"simulator","status":"publish","type":"page","link":"https:\/\/tok-ltd.co.jp\/service\/simulator\/","title":{"rendered":"\u5916\u58c1\u5857\u88c5\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc"},"content":{"rendered":"\n<style>\n    body {\n      font-family: \"Arial\", sans-serif;\n      line-height: 1.6;\n      margin: auto;\n      background: #fff;\n      font-size: 1.1rem;\n    }\n    .input-group {\n      margin-bottom: 1.5rem;\n    }\n    label {\n      display: block;\n      margin-bottom: 0.5rem;\n      font-weight: bold;\n    }\n    input[type=\"number\"] {\n      padding: 0.5rem;\n      font-size: 1.1rem;\n      width: 100%;\n      max-width: 150px;\n    }\n    select {\n      padding: 0.5rem;\n      font-size: 1.1rem;\n    }\n    button {\n      display: block;\n      text-align: center;\n      vertical-align: middle;\n      text-decoration: none;\n      width: 80%;\n      margin: auto;\n      padding: 1rem 4rem;\n      font-weight: bold;\n      border: 2px solid #27acd9;\n      color: #27acd9;\n      background: #fff;\n      transition: 0.5s;\n      cursor: pointer;\n    }\n    button:hover {\n      color: #fff;\n      background: #27acd9;\n    }\n    table {\n      width: 100%;\n      margin-top: 2rem;\n      border-collapse: collapse;\n  border: none; \/* \u8868\u5168\u4f53\u306e\u67a0\u3092\u6d88\u3059 *\/\n    }\n    th, td {\n      text-align: left;\n  padding: 0.5rem;\n  border-top: none;\n  border-left: none !important;\n  border-right: none !important;\n  border-bottom: 1px solid #ccc; \/* \u6a2a\u306e\u7f6b\u7dda\u306e\u307f\u8868\u793a *\/\n    }\n    .summary {\n      background: #f0fdf4;\n      padding: 1rem;\n      margin-top: 1rem;\n    }\n    .loan {\n      display: flex;\n      gap: 2rem;\n      margin-top: 1rem;\n      flex-wrap: wrap;\n    }\n    .loan-box {\n      border: 1px solid #ccc;\n      padding: 1rem;\n      flex: 1;\n      background: #fff8dc;\n      text-align: center;\n    }\n    .loan-box .amount {\n      color: red;\n      font-size: 1.5rem;\n      font-weight: bold;\n    }\n.form-image-wrapper {\n  display: flex;\n  gap: 2rem;\n  align-items: flex-start;\n  margin-top: 2rem;\n  flex-wrap: wrap;\n}\n\n.form-image {\n  flex: 1;\n  min-width: 280px;\n  max-width: 400px;\n}\n\n.form-image img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n.form-box {\n  flex: 1;\n  min-width: 300px;\n}\n\n\/* \u30b9\u30de\u30db\u8868\u793a\u3067\u306f\u7e26\u4e26\u3073 *\/\n@media screen and (max-width: 768px) {\n  .form-image-wrapper {\n    flex-direction: column;\n    align-items: center;\n  }\n  .form-box {\n    width: 100%;\n  }\n}\n#result {\n  max-width: 100%;\n  width: 100%;\n  margin-top: 2rem;\n}\n  <\/style>\n<div class=\"form-image-wrapper\">\n  <div class=\"form-image\">\n    <img decoding=\"async\" src=\"https:\/\/tok-ltd.co.jp\/service\/wp-content\/uploads\/2025\/07\/image_2025_7_8.png\" alt=\"\u8aac\u660e\u753b\u50cf\" \/>\n  <\/div>\n  <div class=\"form-box\">\n<h2>\u25a0 \u4e0b\u8a18\u9805\u76ee\u3092\u3054\u5165\u529b\u304f\u3060\u3055\u3044<\/h2>\n  <div class=\"input-group\">\n    <label for=\"floor\">\u968e\u6570<\/label>\n    <input type=\"number\" id=\"floor\" value=\"2\" min=\"0\" step=\"1\" \/>\n  <\/div>\n  <div class=\"input-group\">\n    <label for=\"eave\">\u8ed2\u4e0b\u9ad8\u3055\uff08m\uff09<\/label>\n    <input type=\"number\" id=\"eave\" value=\"3\" min=\"0\" step=\"0.1\" \/>\n  <\/div>\n  <div class=\"input-group\">\n    <label for=\"roof\">\u8ed2\u4e0a\u9ad8\u3055\uff08m\uff09<\/label>\n    <input type=\"number\" id=\"roof\" value=\"2\" min=\"0\" step=\"0.1\" \/>\n  <\/div>\n  <div class=\"input-group\">\n    <label for=\"length\">\u4f4f\u5b85\u306e\u9577\u3055\uff08m\uff09<\/label>\n    <input type=\"number\" id=\"length\" value=\"8\" min=\"0\" step=\"0.1\" \/>\n  <\/div>\n  <div class=\"input-group\">\n    <label for=\"width\">\u4f4f\u5b85\u306e\u5e45\uff08m\uff09<\/label>\n    <input type=\"number\" id=\"width\" value=\"5.5\" min=\"0\" step=\"0.1\" \/>\n  <\/div>\n  <div class=\"input-group\">\n    <label for=\"slope\">\u5c4b\u6839\u306e\u52fe\u914d\u4fc2\u6570<\/label>\n    <select id=\"slope\">\n      <option value=\"1.0\">\u5e73\u3089\uff081.0\uff09<\/option>\n      <option value=\"1.05\">\u7de9\u3084\u304b\uff081.05\uff09<\/option>\n      <option value=\"1.15\">\u6a19\u6e96\uff081.15\uff09<\/option>\n      <option value=\"1.3\" selected>\u6025\u306a\u5c4b\u6839\uff081.3\uff09<\/option>\n    <\/select>\n  <\/div>  <\/div>\n\n  <button onclick=\"calculate()\">\u304a\u898b\u7a4d\u308a\u3092\u8a08\u7b97\u3059\u308b<\/button>\n  <div id=\"result\"><\/div>\n<script>\n    function calculate() {\n      const floors = parseFloat(document.getElementById('floor').value);\n      const eave = parseFloat(document.getElementById('eave').value);\n      const roof = parseFloat(document.getElementById('roof').value);\n      const length = parseFloat(document.getElementById('length').value);\n      const width = parseFloat(document.getElementById('width').value);\n      const slope = parseFloat(document.getElementById('slope').value);\n      const nonPaint = 5 * floors;\n\n      const totalHeight = eave * floors + roof;\n      const perimeter = 2 * (length + width);\n      const roofArea = length * width * slope;\n      const gableArea = width * roof * 2;\n      const wallArea = perimeter * totalHeight + gableArea - nonPaint;\n      const scaffoldArea = (perimeter + 4) * totalHeight;\n\n      const unit = {\n        scaffold: 790,\n        roof: 2100,\n        wall: 1900,\n        coat: 210000,\n        extra: 60000,\n      };\n\n      const estimate = {\n        scaffold: Math.round(scaffoldArea * unit.scaffold),\n        roof: Math.round(roofArea * unit.roof),\n        wall: Math.round(wallArea * unit.wall),\n        coat: unit.coat,\n        extra: unit.extra\n      };\n\n      const subtotal = estimate.scaffold + estimate.roof + estimate.wall + estimate.coat + estimate.extra;\n      const tax = Math.floor(subtotal * 0.1);\n      const total = subtotal + tax;\n\n      const monthlyRate = 0.014 \/ 12;\n      const monthly5 = Math.max(0, Math.round((total * monthlyRate) \/ (1 - Math.pow(1 + monthlyRate, -60))));\n      const monthly7 = Math.max(0, Math.round((total * monthlyRate) \/ (1 - Math.pow(1 + monthlyRate, -84))));\n\n      document.getElementById('result').innerHTML = `\n        <h2>\u25a0 \u6982\u7b97\u898b\u7a4d\u66f8<\/h2>\n        <table>\n          <tr><th>\u5de5\u4e8b\u540d<\/th><th>\u6570\u91cf<\/th><th>\u5358\u4fa1<\/th><th>\u91d1\u984d<\/th><\/tr>\n          <tr><td>\u8db3\u5834\u5de5\u4e8b<\/td><td>${scaffoldArea.toFixed(0)}\u33a1<\/td><td>\u00a5${unit.scaffold}<\/td><td>\u00a5${estimate.scaffold.toLocaleString()}<\/td><\/tr>\n          <tr><td>\u5c4b\u6839\u5857\u88c5<\/td><td>${roofArea.toFixed(0)}\u33a1<\/td><td>\u00a5${unit.roof}<\/td><td>\u00a5${estimate.roof.toLocaleString()}<\/td><\/tr>\n          <tr><td>\u5916\u58c1\u5857\u88c5<\/td><td>${wallArea.toFixed(0)}\u33a1<\/td><td>\u00a5${unit.wall}<\/td><td>\u00a5${estimate.wall.toLocaleString()}<\/td><\/tr>\n          <tr><td>\u30b3\u30fc\u30ad\u30f3\u30b0\u30fb\u4ed8\u5e2f\u5857\u88c5<\/td><td>1\u5f0f<\/td><td>-<\/td><td>\u00a5${unit.coat.toLocaleString()}<\/td><\/tr>\n          <tr><td>\u96e8\u6a0b\u30fb\u8ed2\u5929\u7b49<\/td><td>1\u5f0f<\/td><td>-<\/td><td>\u00a5${unit.extra.toLocaleString()}<\/td><\/tr>\n        <\/table>\n        <div class=\"summary\">\n          <p>\u5c0f\u8a08\uff1a\u00a5${subtotal.toLocaleString()}<\/p>\n          <p>\u6d88\u8cbb\u7a0e\uff0810%\uff09\uff1a\u00a5${tax.toLocaleString()}<\/p>\n          <p><strong>\u5408\u8a08\uff08\u7a0e\u8fbc\uff09\uff1a\u00a5${total.toLocaleString()}<\/strong><\/p>\n        <\/div>\n<h2>\u5927\u962a\u4fe1\u7528\u91d1\u5eab \u30ea\u30d5\u30a9\u30fc\u30e0\u30ed\u30fc\u30f3\uff08\u91d1\u52291.4%\uff09\u3092\u5229\u7528\u3059\u308b\u3068<\/h2>\n        <div class=\"loan\">\n\n          <div class=\"loan-box\">\n            <div>5\u5e74\uff0860\u56de\u6255\u3044\uff09<\/div>\n            <div class=\"amount\">\u6708\u3005 \u7d04${monthly5.toLocaleString()}\u5186<\/div>\n          <\/div>\n          <div class=\"loan-box\">\n            <div>7\u5e74\uff0884\u56de\u6255\u3044\uff09<\/div>\n            <div class=\"amount\">\u6708\u3005 \u7d04${monthly7.toLocaleString()}\u5186<\/div>\n          <\/div>\n        <\/div>\n      `;\n    }\n  <\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"\u25a0 \u4e0b\u8a18\u9805\u76ee\u3092\u3054\u5165\u529b\u304f\u3060\u3055\u3044 \u968e\u6570 \u8ed2\u4e0b\u9ad8\u3055\uff08m\uff09 \u8ed2\u4e0a\u9ad8\u3055\uff08m\uff09 \u4f4f\u5b85\u306e\u9577\u3055\uff08m\uff09 \u4f4f\u5b85\u306e\u5e45\uff08m\uff09 \u5c4b\u6839\u306e\u52fe\u914d\u4fc2\u6570 \u5e73\u3089\uff081.0\uff09\u7de9\u3084\u304b\uff081.05\uff09\u6a19\u6e96\uff081.15\uff09\u6025\u306a\u5c4b\u6839\uff081.3\uff09 \u304a\u898b\u7a4d\u308a\u3092\u8a08\u7b97\u3059\u308b","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-87","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tok-ltd.co.jp\/service\/wp-json\/wp\/v2\/pages\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tok-ltd.co.jp\/service\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tok-ltd.co.jp\/service\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tok-ltd.co.jp\/service\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tok-ltd.co.jp\/service\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":14,"href":"https:\/\/tok-ltd.co.jp\/service\/wp-json\/wp\/v2\/pages\/87\/revisions"}],"predecessor-version":[{"id":203,"href":"https:\/\/tok-ltd.co.jp\/service\/wp-json\/wp\/v2\/pages\/87\/revisions\/203"}],"wp:attachment":[{"href":"https:\/\/tok-ltd.co.jp\/service\/wp-json\/wp\/v2\/media?parent=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}