\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30b3\u30f3\u30c6\u30ca\u30fb\u30ac\u30a4\u30c9<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n \n \n \n <style>\n body { font-family: 'Noto Sans JP', sans-serif; }\n .chart-container { position: relative; width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; height: 350px; max-height: 50vh; }\n .active-tab { border-color: #0284c7; color: #0284c7; background-color: #f0f9ff; }\n .inactive-tab { border-color: transparent; color: #475569; }\n .section-icon { font-size: 2.5rem; line-height: 1; }\n .smooth-scroll { scroll-behavior: smooth; }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 smooth-scroll\">\n\n <header class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-50 shadow-sm\">\n <div class=\"container mx-auto px-4\">\n <div class=\"flex justify-between items-center py-4\">\n <h1 class=\"text-xl md:text-2xl font-bold text-sky-700\">\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30b3\u30f3\u30c6\u30ca\u30fb\u30ac\u30a4\u30c9<\/h1>\n <nav class=\"hidden md:flex space-x-6 text-sm font-medium\">\n <a href=\"#selector\" class=\"text-slate-600 hover:text-sky-700 transition-colors\">\u30b3\u30f3\u30c6\u30ca\u9078\u629e<\/a>\n <a href=\"#details\" class=\"text-slate-600 hover:text-sky-700 transition-colors\">\u8a73\u7d30\u6bd4\u8f03<\/a>\n <a href=\"#japan-rule\" class=\"text-slate-600 hover:text-sky-700 transition-colors\">\u56fd\u5185\u898f\u5236<\/a>\n <a href=\"#risk\" class=\"text-slate-600 hover:text-sky-700 transition-colors\">\u30ea\u30b9\u30af\u7ba1\u7406<\/a>\n <\/nav>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"container mx-auto p-4 md:p-8\">\n\n \n <section id=\"selector\" class=\"mb-16 text-center\">\n <h2 class=\"text-3xl font-bold mb-2\">\u6700\u9069\u306a\u30b3\u30f3\u30c6\u30ca\u3092\u898b\u3064\u3051\u308b<\/h2>\n <p class=\"text-slate-600 mb-8 max-w-2xl mx-auto\">\u8f38\u9001\u3059\u308b\u8ca8\u7269\u306e\u6700\u3082\u91cd\u8981\u306a\u5236\u7d04\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u6700\u9069\u306a\u30b3\u30f3\u30c6\u30ca\u30bf\u30a4\u30d7\u3068\u3001\u305d\u306e\u4e3b\u306a\u7279\u5fb4\u3092\u5373\u5ea7\u306b\u63d0\u6848\u3057\u307e\u3059\u3002<\/p>\n \n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto\" id=\"constraint-selector\">\n <button data-type=\"weight\" class=\"p-6 bg-white rounded-lg shadow hover:shadow-lg hover:-translate-y-1 transition-all duration-300\">\n <div class=\"text-4xl mb-2\">\u2696\ufe0f<\/div>\n <div class=\"font-bold text-lg\">\u91cd\u91cf<\/div>\n <div class=\"text-sm text-slate-500\">\u9ad8\u5bc6\u5ea6\u306a\u8ca8\u7269<\/div>\n <\/button>\n <button data-type=\"volume\" class=\"p-6 bg-white rounded-lg shadow hover:shadow-lg hover:-translate-y-1 transition-all duration-300\">\n <div class=\"text-4xl mb-2\">\ud83d\udce6<\/div>\n <div class=\"font-bold text-lg\">\u5bb9\u7a4d<\/div>\n <div class=\"text-sm text-slate-500\">\u8efd\u91cf\u3067\u304b\u3055\u3070\u308b\u8ca8\u7269<\/div>\n <\/button>\n <button data-type=\"temperature\" class=\"p-6 bg-white rounded-lg shadow hover:shadow-lg hover:-translate-y-1 transition-all duration-300\">\n <div class=\"text-4xl mb-2\">\u2744\ufe0f<\/div>\n <div class=\"font-bold text-lg\">\u6e29\u5ea6<\/div>\n <div class=\"text-sm text-slate-500\">\u8981\u6e29\u5ea6\u7ba1\u7406<\/div>\n <\/button>\n <button data-type=\"dimensions\" class=\"p-6 bg-white rounded-lg shadow hover:shadow-lg hover:-translate-y-1 transition-all duration-300\">\n <div class=\"text-4xl mb-2\">\ud83d\udccf<\/div>\n <div class=\"font-bold text-lg\">\u5bf8\u6cd5<\/div>\n <div class=\"text-sm text-slate-500\">\u30b5\u30a4\u30ba\u8d85\u904e\u8ca8\u7269<\/div>\n <\/button>\n <\/div>\n\n <div id=\"recommendation\" class=\"mt-8 p-8 bg-sky-50 border border-sky-200 rounded-lg max-w-4xl mx-auto hidden text-left\">\n \n <\/div>\n <\/section>\n\n \n <section id=\"details\" class=\"mb-16\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold mb-2\">\u30b3\u30f3\u30c6\u30ca\u8a73\u7d30\u6bd4\u8f03<\/h2>\n <p class=\"text-slate-600 max-w-3xl mx-auto\">\u3053\u3053\u3067\u306f\u3001\u4e3b\u8981\u306a\u30b3\u30f3\u30c6\u30ca\u306e\u7a2e\u985e\u3054\u3068\u306e\u8a73\u7d30\u306a\u4ed5\u69d8\u3001\u6700\u9069\u306a\u7528\u9014\u3001\u305d\u3057\u3066\u6700\u3082\u91cd\u8981\u306a\u300c\u8a2d\u8a08\u4e0a\u306e\u6700\u5927\u7a4d\u8f09\u91cf\u300d\u3068\u300c\u65e5\u672c\u306e\u6cd5\u5f8b\u3067\u5b9a\u3081\u3089\u308c\u305f\u5b9f\u904b\u9001\u91cd\u91cf\u300d\u306e\u5dee\u3092\u8996\u899a\u7684\u306b\u6bd4\u8f03\u3067\u304d\u307e\u3059\u3002<\/p>\n <\/div>\n\n <div class=\"border-b border-slate-300 mb-6\">\n <div id=\"tabs-container\" class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n \n <\/div>\n <\/div>\n \n <div id=\"tab-content\" class=\"bg-white p-6 rounded-lg shadow-inner\">\n \n <\/div>\n <\/section>\n\n \n <section id=\"japan-rule\" class=\"mb-16 bg-white p-6 md:p-8 rounded-lg shadow-lg\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold mb-2 text-red-600\">\u6700\u91cd\u8981\u77e5\u8b58\uff1a\u65e5\u672c\u306e\u300c\u91cd\u91cf\u5236\u9650\u306e\u58c1\u300d<\/h2>\n <p class=\"text-slate-600 max-w-3xl mx-auto\">\u30b3\u30f3\u30c6\u30ca\u306e\u30c9\u30a2\u306b\u8a18\u8f09\u3055\u308c\u305f\u6700\u5927\u7a4d\u8f09\u91cf\uff08Max Payload\uff09\u306f\u3001\u65e5\u672c\u56fd\u5185\u306e\u9678\u4e0a\u8f38\u9001\u3067\u306f\u9069\u7528\u3055\u308c\u307e\u305b\u3093\u3002\u9053\u8def\u30a4\u30f3\u30d5\u30e9\u4fdd\u8b77\u306e\u305f\u3081\u3001\u6cd5\u5f8b\u3067\u5b9a\u3081\u3089\u308c\u305f\u8eca\u4e21\u7dcf\u91cd\u91cf\u3068\u8ef8\u91cd\u306e\u5236\u9650\u304c\u512a\u5148\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u300c\u30da\u30a4\u30ed\u30fc\u30c9\u30fb\u30ae\u30e3\u30c3\u30d7\u300d\u306e\u7406\u89e3\u306f\u3001\u4e88\u671f\u305b\u306c\u30b3\u30b9\u30c8\u3084\u8f38\u9001\u9045\u5ef6\u3092\u9632\u3050\u305f\u3081\u306b\u4e0d\u53ef\u6b20\u3067\u3059\u3002<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-5 gap-8 items-center\">\n <div class=\"md:col-span-3\">\n <div class=\"chart-container\">\n <canvas id=\"japanRuleChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"md:col-span-2\">\n <h3 class=\"font-bold text-lg mb-4\">\u30b7\u30e3\u30fc\u30b7\u306e\u7a2e\u985e\u3067\u7a4d\u8f09\u53ef\u80fd\u91cd\u91cf\u304c\u5909\u308f\u308b<\/h3>\n <p class=\"text-sm text-slate-600 mb-4\">\u30b3\u30f3\u30c6\u30ca\u3092\u904b\u3076\u30c8\u30ec\u30fc\u30e9\u30fc\u306e\u8eca\u8ef8\u6570\uff082\u8ef8\u304b3\u8ef8\u304b\uff09\u306b\u3088\u3063\u3066\u3001\u6cd5\u7684\u306b\u8a31\u5bb9\u3055\u308c\u308b\u30b3\u30f3\u30c6\u30ca\u7dcf\u91cd\u91cf\uff08\u30b3\u30f3\u30c6\u30ca\u81ea\u91cd\uff0b\u8ca8\u7269\u91cd\u91cf\uff09\u304c\u5909\u308f\u308a\u307e\u3059\u3002\u4e0b\u306e\u30dc\u30bf\u30f3\u3067\u30b7\u30e3\u30fc\u30b7\u3092\u9078\u629e\u3057\u3001\u7a4d\u3081\u308b\u8ca8\u7269\u91cd\u91cf\u306e\u5909\u5316\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n <div class=\"flex space-x-2 mb-6\" id=\"chassis-selector\">\n <button data-chassis=\"2-axle\" class=\"flex-1 p-3 text-sm font-semibold rounded-md transition-colors bg-sky-600 text-white\">2\u8ef8\u30b7\u30e3\u30fc\u30b7<\/button>\n <button data-chassis=\"3-axle\" class=\"flex-1 p-3 text-sm font-semibold rounded-md transition-colors bg-white text-slate-700 border border-slate-300\">3\u8ef8\u30b7\u30e3\u30fc\u30b7<\/button>\n <\/div>\n <div id=\"chassis-info\" class=\"p-4 bg-slate-100 rounded-md text-sm\">\n \n <\/div>\n <div class=\"mt-6 p-4 bg-red-50 border-l-4 border-red-500 text-red-700\">\n <h4 class=\"font-bold\">\u5371\u967a\uff1a\u8ef8\u91cd\u8d85\u904e\uff08\u7247\u8377\uff09<\/h4>\n <p class=\"text-sm\">\u8ca8\u7269\u306e\u7dcf\u91cd\u91cf\u304c\u5236\u9650\u5185\u3067\u3082\u3001\u30b3\u30f3\u30c6\u30ca\u5185\u3067\u91cd\u91cf\u304c\u504f\u308b\u3068\u7279\u5b9a\u306e\u8eca\u8ef8\u306b\u304b\u304b\u308b\u91cd\u3055\u304c10\u30c8\u30f3\u3092\u8d85\u3048\u3001\u6a2a\u8ee2\u4e8b\u6545\u3084\u9053\u8def\u640d\u50b7\u306e\u539f\u56e0\u3068\u306a\u308a\u307e\u3059\u3002\u5747\u7b49\u306a\u7a4d\u4ed8\u3051\u306f\u8377\u4e3b\u306e\u91cd\u8981\u306a\u8cac\u4efb\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"risk\" class=\"mb-8\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold mb-2\">\u5b9f\u8df5\u7684\u904b\u7528\u3068\u30ea\u30b9\u30af\u7ba1\u7406<\/h2>\n <p class=\"text-slate-600 max-w-3xl mx-auto\">\u5b89\u5168\u306a\u8f38\u9001\u306e\u5b9f\u73fe\u3001\u30b3\u30b9\u30c8\u306e\u6700\u9069\u5316\u3001\u305d\u3057\u3066\u52b9\u679c\u7684\u306a\u7269\u6d41\u624b\u914d\u306e\u305f\u3081\u306e\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow\">\n <div class=\"flex items-center mb-4\">\n <div class=\"section-icon mr-4 text-sky-600\">\ud83d\udd17<\/div>\n <h3 class=\"text-xl font-bold\">\u5b89\u5168\u78ba\u4fdd\u306e\u539f\u5247<\/h3>\n <\/div>\n <ul class=\"list-disc list-inside text-slate-600 space-y-2 text-sm\">\n <li><strong>\u9069\u5207\u306a\u56fa\u7e1b (\u30e9\u30c3\u30b7\u30f3\u30b0):<\/strong> \u8ca8\u7269\u3068\u30b3\u30f3\u30c6\u30ca\u3092\u4e00\u4f53\u5316\u3055\u305b\u3001\u8f38\u9001\u4e2d\u306e\u63fa\u308c\u306b\u3088\u308b\u79fb\u52d5\u3092\u9632\u3050\u3002\u5c02\u9580\u6280\u8853\u304c\u5fc5\u8981\u3002<\/li>\n <li><strong>\u91cd\u5fc3\u7ba1\u7406:<\/strong> \u91cd\u3044\u3082\u306e\u3092\u4e0b\u306b\u3001\u8efd\u3044\u3082\u306e\u3092\u4e0a\u306b\u3002\u91cd\u5fc3\u3092\u4f4e\u304f\u3001\u4e2d\u5fc3\u306b\u4fdd\u3064\u3053\u3068\u304c\u6a2a\u8ee2\u9632\u6b62\u306e\u9375\u3002<\/li>\n <li><strong>\u8377\u91cd\u5206\u6563:<\/strong> \u91cd\u91cf\u7269\u306f\u6577\u677f\u306a\u3069\u3067\u5e8a\u9762\u3078\u306e\u8377\u91cd\u3092\u5747\u7b49\u306b\u5206\u6563\u3055\u305b\u308b\u3002<\/li>\n <li><strong>\u5c02\u9580\u5bb6\u306e\u6d3b\u7528:<\/strong> \u9ad8\u4fa1\u306a\u8ca8\u7269\u3084\u7279\u6b8a\u8f38\u9001\u3067\u306f\u3001\u8ca8\u7269\u691c\u67fb\u54e1 (\u30b5\u30fc\u30d9\u30a4\u30e4\u30fc) \u306e\u8d77\u7528\u304c\u30ea\u30b9\u30af\u3092\u5927\u5e45\u306b\u8efd\u6e1b\u3059\u308b\u3002<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow\">\n <div class=\"flex items-center mb-4\">\n <div class=\"section-icon mr-4 text-sky-600\">\ud83d\udcb0<\/div>\n <h3 class=\"text-xl font-bold\">\u30b3\u30b9\u30c8\u69cb\u9020\u306e\u7406\u89e3<\/h3>\n <\/div>\n <ul class=\"list-disc list-inside text-slate-600 space-y-2 text-sm\">\n <li><strong>\u30b5\u30fc\u30c1\u30e3\u30fc\u30b8:<\/strong> \u904b\u8cc3\u306f\u57fa\u672c\u6599\u91d1\u3060\u3051\u3067\u306a\u304f\u3001\u71c3\u6599\u30fb\u70ba\u66ff\u30fb\u6e2f\u6e7e\u6df7\u96d1\u306a\u3069\u306e\u5272\u5897\u6599\u91d1 (\u30b5\u30fc\u30c1\u30e3\u30fc\u30b8) \u304c\u52a0\u7b97\u3055\u308c\u308b\u3002<\/li>\n <li><strong>\u96a0\u308c\u305f\u30b3\u30b9\u30c8:<\/strong> \u7121\u6599\u4fdd\u7ba1\u671f\u9593\u8d85\u904e\u306b\u3088\u308b\u30c7\u30de\u30ec\u30fc\u30b8\/\u30c7\u30a3\u30c6\u30f3\u30b7\u30e7\u30f3\u6599\u306f\u9ad8\u984d\u306b\u306a\u308a\u304c\u3061\u3002<\/li>\n <li><strong>\u7dcf\u8f38\u9001\u30b3\u30b9\u30c8 (Total Landed Cost):<\/strong> \u898b\u7a4d\u3082\u308a\u306f\u57fa\u672c\u904b\u8cc3\u3060\u3051\u3067\u306a\u304f\u3001\u5168\u3066\u306e\u8cbb\u7528\u3092\u542b\u3081\u305f\u7dcf\u984d\u3067\u6bd4\u8f03\u3059\u308b\u3002<\/li>\n <li><strong>\u9045\u5ef6\u30b3\u30b9\u30c8 (Cost of Delay):<\/strong> \u7d0d\u671f\u9045\u5ef6\u306f\u8ca9\u58f2\u6a5f\u4f1a\u306e\u640d\u5931\u3084\u9055\u7d04\u91d1\u306a\u3069\u3001\u83ab\u5927\u306a\u7d4c\u6e08\u7684\u640d\u5931\u3092\u751f\u3080\u53ef\u80fd\u6027\u304c\u3042\u308b\u3002<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow\">\n <div class=\"flex items-center mb-4\">\n <div class=\"section-icon mr-4 text-sky-600\">\ud83d\ude9a<\/div>\n <h3 class=\"text-xl font-bold\">\u8f38\u9001\u624b\u914d\u306e\u8981\u70b9<\/h3>\n <\/div>\n <ul class=\"list-disc list-inside text-slate-600 space-y-2 text-sm\">\n <li><strong>\u30d1\u30fc\u30c8\u30ca\u30fc\u9078\u5b9a:<\/strong> \u8ca8\u7269\u306e\u7279\u6027\u306b\u5408\u3063\u305f\u5c02\u9580\u6027\u3068\u7d4c\u9a13\u3092\u6301\u3064\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u3092\u9078\u3076\u3053\u3068\u304c\u6210\u529f\u306e\u9375\u3002<\/li>\n <li><strong>\u65e9\u671f\u4e88\u7d04:<\/strong> \u7279\u6b8a\u30b3\u30f3\u30c6\u30ca (\u30ea\u30fc\u30d5\u30a1\u30fc\u3001\u30aa\u30fc\u30d7\u30f3\u30c8\u30c3\u30d7\u7b49) \u306f\u6570\u304c\u5c11\u306a\u3044\u305f\u3081\u3001\u65e9\u3081\u306e\u4e88\u7d04\u304c\u4e0d\u53ef\u6b20\u3002<\/li>\n <li><strong>\u6b63\u78ba\u306a\u60c5\u5831\u63d0\u4f9b:<\/strong> \u8ca8\u7269\u306e\u6b63\u78ba\u306a\u5bf8\u6cd5\u30fb\u91cd\u91cf\u30fb\u91cd\u5fc3\u4f4d\u7f6e\u306a\u3069\u306e\u60c5\u5831\u304c\u3001\u624b\u914d\u3092\u30b9\u30e0\u30fc\u30ba\u306b\u9032\u3081\u308b\u305f\u3081\u306b\u5fc5\u8981\u3002<\/li>\n <li><strong>\u66f8\u985e\u306e\u6b63\u78ba\u6027:<\/strong> \u8239\u8377\u8a3c\u5238\u3084\u30a4\u30f3\u30dc\u30a4\u30b9\u306e\u8a18\u8f09\u30df\u30b9\u306f\u3001\u901a\u95a2\u3067\u306e\u9045\u5ef6\u3068\u8ffd\u52a0\u8cbb\u7528\u306b\u76f4\u7d50\u3059\u308b\u3002<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"bg-slate-800 text-slate-300 py-6 mt-16\">\n <div class=\"container mx-auto px-4 text-center text-sm\">\n <p>\u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u300c\u6d77\u4e0a\u30b3\u30f3\u30c6\u30ca\u306e\u80fd\u529b\u3068\u7279\u6027\u306b\u95a2\u3059\u308b\u5305\u62ec\u7684\u5206\u6790\u300d\u30ec\u30dd\u30fc\u30c8\u3092\u57fa\u306b\u4f5c\u6210\u3055\u308c\u305f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30ac\u30a4\u30c9\u3067\u3059\u3002<\/p>\n <p class=\"mt-2\">© 2025 Interactive Container Guide. All rights reserved.<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n const appData = {\n recommendations: {\n weight: {\n title: \"\u63a8\u5968: 20\u30d5\u30a3\u30fc\u30c8 \u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\",\n icon: \"\u2696\ufe0f\",\n text: \"\u5bb9\u7a4d\u306b\u5bfe\u3057\u3066\u8a31\u5bb9\u3055\u308c\u308b\u6700\u5927\u7a4d\u8f09\u91cd\u91cf\u304c\u5927\u304d\u3044\u305f\u3081\u3001\u6a5f\u68b0\u90e8\u54c1\u3001\u91d1\u5c5e\u88fd\u54c1\u3001\u5316\u5b66\u54c1\u539f\u6599\u306a\u3069\u3001\u5bc6\u5ea6\u304c\u9ad8\u304f\u91cd\u3044\u8ca8\u7269\u306e\u8f38\u9001\u306b\u6700\u9069\u3067\u3059\u3002\u305f\u3060\u3057\u3001\u65e5\u672c\u306e\u56fd\u5185\u9678\u9001\u3067\u306f3\u8ef8\u30b7\u30e3\u30fc\u30b7\u3067\u3082\u8ca8\u7269\u91cd\u91cf\u306e\u4e0a\u9650\u304c\u7d0421.7\u30c8\u30f3\u306b\u5236\u9650\u3055\u308c\u308b\u70b9\u306b\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002\",\n link: \"20-dry\"\n },\n volume: {\n title: \"\u63a8\u5968: 40\u30d5\u30a3\u30fc\u30c8 \u30c9\u30e9\u30a4 \/ \u30cf\u30a4\u30ad\u30e5\u30fc\u30d6\u30b3\u30f3\u30c6\u30ca\",\n icon: \"\ud83d\udce6\",\n text: \"20\u30d5\u30a3\u30fc\u30c8\u306e\u7d042\u500d\u306e\u5bb9\u7a4d\u3092\u6301\u3061\u3001\u30a2\u30d1\u30ec\u30eb\u3001\u5bb6\u5177\u3001\u96d1\u8ca8\u306a\u3069\u3001\u8efd\u91cf\u3067\u304b\u3055\u3070\u308b\u8ca8\u7269\u306e\u8f38\u9001\u30b3\u30b9\u30c8\u52b9\u7387\u3092\u6700\u5927\u5316\u3057\u307e\u3059\u3002\u80cc\u306e\u9ad8\u3044\u8ca8\u7269\u3084\u6bb5\u7a4d\u307f\u304c\u53ef\u80fd\u306a\u5834\u5408\u306f\u3001\u3055\u3089\u306b\u5bb9\u7a4d\u306e\u5927\u304d\u3044\u30cf\u30a4\u30ad\u30e5\u30fc\u30d6(HC)\u304c\u6700\u9069\u3067\u3059\u3002\",\n link: \"40-dry\"\n },\n temperature: {\n title: \"\u63a8\u5968: \u30ea\u30fc\u30d5\u30a1\u30fc\u30b3\u30f3\u30c6\u30ca\",\n icon: \"\u2744\ufe0f\",\n text: \"\u30b3\u30f3\u30c6\u30ca\u81ea\u4f53\u304c\u51b7\u51cd\u30fb\u51b7\u8535\u6a5f\u80fd\u3092\u6301\u3061\u3001\u751f\u9bae\u98df\u54c1\u3001\u533b\u85ac\u54c1\u3001\u5316\u6210\u54c1\u306a\u3069\u53b3\u5bc6\u306a\u6e29\u5ea6\u7ba1\u7406\u304c\u5fc5\u8981\u306a\u8ca8\u7269\u3092\u8f38\u9001\u3057\u307e\u3059\u3002-25\u2103\u304b\u3089+25\u2103\u307e\u3067\u306e\u7cbe\u5bc6\u306a\u6e29\u5ea6\u5236\u5fa1\u304c\u53ef\u80fd\u3067\u3001\u30b3\u30fc\u30eb\u30c9\u30c1\u30a7\u30fc\u30f3\u306e\u7dad\u6301\u306b\u4e0d\u53ef\u6b20\u3067\u3059\u3002\",\n link: \"reefer\"\n },\n dimensions: {\n title: \"\u63a8\u5968: \u30aa\u30fc\u30d7\u30f3\u30c8\u30c3\u30d7 \/ \u30d5\u30e9\u30c3\u30c8\u30e9\u30c3\u30af\u30b3\u30f3\u30c6\u30ca\",\n icon: \"\ud83d\udccf\",\n text: \"\u30b3\u30f3\u30c6\u30ca\u306e\u5bf8\u6cd5\u3092\u8d85\u3048\u308b\u8ca8\u7269\u306e\u305f\u3081\u306e\u7279\u6b8a\u30b3\u30f3\u30c6\u30ca\u3067\u3059\u3002\u80cc\u306e\u9ad8\u3044\u8ca8\u7269\u306f\u5c4b\u6839\u304c\u958b\u304f\u300c\u30aa\u30fc\u30d7\u30f3\u30c8\u30c3\u30d7\u300d\u3001\u5e45\u3084\u9ad8\u3055\u3092\u8d85\u3048\u308b\u8ca8\u7269\u306f\u58c1\u306e\u306a\u3044\u300c\u30d5\u30e9\u30c3\u30c8\u30e9\u30c3\u30af\u300d\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\u30af\u30ec\u30fc\u30f3\u8377\u5f79\u3068\u5c02\u9580\u7684\u306a\u56fa\u7e1b\u304c\u5fc5\u9808\u3067\u3059\u3002\",\n link: \"open-top\"\n }\n },\n containers: {\n \"20-dry\": {\n name: \"20' \u30c9\u30e9\u30a4\",\n description: \"\u9ad8\u5bc6\u5ea6\u30fb\u91cd\u91cf\u8ca8\u7269\u306e\u8f38\u9001\u306b\u304a\u3051\u308b\u6a19\u6e96\u30b3\u30f3\u30c6\u30ca\u3002\u30b3\u30f3\u30d1\u30af\u30c8\u3055\u3068\u5805\u7262\u6027\u304c\u7279\u5fb4\u3067\u3059\u3002\",\n specs: [\n { label: \"\u5185\u5bb9\u7a4d\", value: \"\u7d04 33 m\u00b3\" },\n { label: \"\u5e73\u5747\u81ea\u91cd\", value: \"\u7d04 2,300 kg\" },\n { label: \"\u6700\u9069\u306a\u8ca8\u7269\", value: \"\u6a5f\u68b0\u3001\u91d1\u5c5e\u3001\u539f\u6599\" },\n ],\n payload: { design: 28180, legal: 21700 },\n notes: \"\u65e5\u672c\u306e\u56fd\u5185\u898f\u5236\uff083\u8ef8\u30b7\u30e3\u30fc\u30b7\uff09\u3067\u306f\u3001\u5b9f\u904b\u9001\u53ef\u80fd\u306a\u8ca8\u7269\u91cd\u91cf\u306f\u7d0421,700kg\u304c\u4e0a\u9650\u3068\u306a\u308a\u307e\u3059\u3002\u8a2d\u8a08\u4e0a\u306e\u6700\u5927\u7a4d\u8f09\u91cf\u3068\u306e\u5dee\u304c\u6700\u3082\u5927\u304d\u3044\u30bf\u30a4\u30d7\u3067\u3059\u3002\"\n },\n \"40-dry\": {\n name: \"40' \u30c9\u30e9\u30a4\",\n description: \"\u8efd\u91cf\u30fb\u5bb9\u7a4d\u5927\u306e\u8ca8\u7269\u306e\u8f38\u9001\u52b9\u7387\u3092\u9ad8\u3081\u308b\u305f\u3081\u306e\u30b3\u30f3\u30c6\u30ca\u300220\u30d5\u30a3\u30fc\u30c8\u306e\u7d042\u500d\u306e\u5bb9\u7a4d\u3092\u6301\u3061\u307e\u3059\u3002\",\n specs: [\n { label: \"\u5185\u5bb9\u7a4d\", value: \"\u7d04 67 m\u00b3\" },\n { label: \"\u5e73\u5747\u81ea\u91cd\", value: \"\u7d04 3,800 kg\" },\n { label: \"\u6700\u9069\u306a\u8ca8\u7269\", value: \"\u30a2\u30d1\u30ec\u30eb\u3001\u5bb6\u5177\u3001\u96d1\u8ca8\" },\n ],\n payload: { design: 26680, legal: 26680 },\n notes: \"\u6700\u5927\u7a4d\u8f09\u91cf\u306f20\u30d5\u30a3\u30fc\u30c8\u306e2\u500d\u3067\u306f\u306a\u304f\u3001\u30b3\u30f3\u30c6\u30ca\u7dcf\u91cd\u91cf\u306e\u4e0a\u9650\uff08\u7d0430.48\u30c8\u30f3\uff09\u306b\u3088\u3063\u3066\u5236\u9650\u3055\u308c\u307e\u3059\u3002\u65e5\u672c\u306e3\u8ef8\u30b7\u30e3\u30fc\u30b7\u3067\u306e\u9678\u9001\u4e0a\u9650\u3068\u307b\u307c\u4e00\u81f4\u3057\u307e\u3059\u3002\"\n },\n \"40-hc\": {\n name: \"40' \u30cf\u30a4\u30ad\u30e5\u30fc\u30d6\",\n description: \"\u6a19\u6e96\u306e40\u30d5\u30a3\u30fc\u30c8\u30b3\u30f3\u30c6\u30ca\u3088\u308a\u9ad8\u3055\u3092\u7d0430cm\u9ad8\u304f\u3057\u3001\u5bb9\u7a4d\u3092\u3055\u3089\u306b\u5897\u3084\u3057\u305f\u30bf\u30a4\u30d7\u3067\u3059\u3002\",\n specs: [\n { label: \"\u5185\u5bb9\u7a4d\", value: \"\u7d04 76 m\u00b3 (+13%)\" },\n { label: \"\u5e73\u5747\u81ea\u91cd\", value: \"\u7d04 3,900 kg\" },\n { label: \"\u6700\u9069\u306a\u8ca8\u7269\", value: \"\u80cc\u306e\u9ad8\u3044\u8ca8\u7269\u3001\u6bb5\u7a4d\u307f\u53ef\u80fd\u306a\u8efd\u91cf\u54c1\" },\n ],\n payload: { design: 26580, legal: 26580 },\n notes: \"\u9ad8\u3055\u304c\u5897\u3059\u305f\u3081\u3001\u5185\u9678\u8f38\u9001\u30eb\u30fc\u30c8\u3084\u65bd\u8a2d\u306e\u9ad8\u3055\u5236\u9650\uff08\u6a4b\u3001\u30c8\u30f3\u30cd\u30eb\u3001\u5009\u5eab\u306e\u8ed2\u5148\uff09\u306b\u62b5\u89e6\u3057\u306a\u3044\u304b\u4e8b\u524d\u306e\u78ba\u8a8d\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002\"\n },\n \"reefer\": {\n name: \"\u30ea\u30fc\u30d5\u30a1\u30fc\",\n description: \"\u51b7\u51cd\u30fb\u51b7\u8535\u6a5f\u80fd\u3092\u5099\u3048\u3001\u53b3\u5bc6\u306a\u6e29\u5ea6\u7ba1\u7406\u304c\u5fc5\u8981\u306a\u8ca8\u7269\uff08\u751f\u9bae\u98df\u54c1\u3001\u533b\u85ac\u54c1\u306a\u3069\uff09\u3092\u8f38\u9001\u3057\u307e\u3059\u3002\",\n specs: [\n { label: \"\u6e29\u5ea6\u7bc4\u56f2\", value: \"-25\u2103 ~ +25\u2103\" },\n { label: \"\u7279\u5fb4\", value: \"\u65ad\u71b1\u69cb\u9020\u3001T-Floor\u3001CA\u6a5f\u80fd\" },\n { label: \"\u6ce8\u610f\u70b9\", value: \"\u5185\u5bf8\u304c\u72ed\u3044\u3001\u30b3\u30b9\u30c8\u9ad8\" },\n ],\n payload: { design: 26000, legal: 25000 },\n notes: \"\u51b7\u51cd\u6a5f\u30e6\u30cb\u30c3\u30c8\u3068\u539a\u3044\u65ad\u71b1\u6750\u306e\u305f\u3081\u3001\u5185\u5bf8\u304c\u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\u3088\u308a\u5c0f\u3055\u304f\u3001\u81ea\u91cd\u3082\u91cd\u304f\u306a\u308a\u307e\u3059\u3002\u8239\u4e0a\u3084\u9678\u9001\u4e2d\u306e\u96fb\u6e90\u4f9b\u7d66\u304c\u5fc5\u9808\u3067\u3042\u308a\u3001\u30b3\u30fc\u30eb\u30c9\u30c1\u30a7\u30fc\u30f3\u5168\u4f53\u306e\u7ba1\u7406\u304c\u91cd\u8981\u3067\u3059\u3002\"\n },\n \"open-top\": {\n name: \"\u30aa\u30fc\u30d7\u30f3\u30c8\u30c3\u30d7\",\n description: \"\u5c4b\u6839\u304c\u958b\u653e\u53ef\u80fd\u3067\u3001\u30af\u30ec\u30fc\u30f3\u306b\u3088\u308b\u4e0a\u90e8\u304b\u3089\u306e\u8377\u5f79\u304c\u5fc5\u8981\u306a\u80cc\u306e\u9ad8\u3044\u8ca8\u7269\uff08\u5de5\u4f5c\u6a5f\u68b0\u306a\u3069\uff09\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002\",\n specs: [\n { label: \"\u8377\u5f79\u65b9\u6cd5\", value: \"\u30af\u30ec\u30fc\u30f3\uff08\u4e0a\u90e8\u304b\u3089\uff09\" },\n { label: \"\u5c4b\u6839\u69cb\u9020\", value: \"\u9632\u6c34\u30b7\u30fc\u30c8\uff08\u30bf\u30fc\u30dd\u30ea\u30f3\uff09\" },\n { label: \"\u6ce8\u610f\u70b9\", value: \"\u8377\u5f79\u6642\u306e\u5929\u5019\u5f71\u97ff\u3001\u5b8c\u5168\u306a\u5bc6\u9589\u6027\u306f\u306a\u3044\" },\n ],\n payload: { design: 28000, legal: 21000 },\n notes: \"\u8377\u4e3b\u3068\u7d0d\u5165\u5148\u306e\u4e21\u65b9\u3067\u30af\u30ec\u30fc\u30f3\u8a2d\u5099\u304c\u5229\u7528\u53ef\u80fd\u3067\u3042\u308b\u3053\u3068\u304c\u524d\u63d0\u3068\u306a\u308a\u307e\u3059\u3002\u30bf\u30fc\u30dd\u30ea\u30f3\u30ab\u30d0\u30fc\u306f\u9632\u6c34\u3067\u3059\u304c\u3001\u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\u307b\u3069\u306e\u5bc6\u9589\u6027\u306f\u3042\u308a\u307e\u305b\u3093\u3002\"\n },\n \"flat-rack\": {\n name: \"\u30d5\u30e9\u30c3\u30c8\u30e9\u30c3\u30af\",\n description: \"\u5c4b\u6839\u3082\u5074\u58c1\u3082\u306a\u304f\u3001\u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u30fb\u9ad8\u3055\u3092\u8d85\u3048\u308b\u5bf8\u6cd5\u8d85\u904e\u8ca8\u7269\uff08\u5efa\u8a2d\u6a5f\u68b0\u3001\u8eca\u4e21\u306a\u3069\uff09\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002\",\n specs: [\n { label: \"\u69cb\u9020\", value: \"\u5e8a\u3068\u524d\u5f8c\u306e\u58c1\u306e\u307f\" },\n { label: \"\u6700\u91cd\u8981\u4e8b\u9805\", value: \"\u8ca8\u7269\u306e\u56fa\u7e1b\uff08\u30e9\u30c3\u30b7\u30f3\u30b0\uff09\" },\n { label: \"\u30b3\u30b9\u30c8\", value: \"OOG\u30b5\u30fc\u30c1\u30e3\u30fc\u30b8\uff08\u9ad8\u984d\uff09\" },\n ],\n payload: { design: 40000, legal: 25000 },\n notes: \"\u8f38\u9001\u306e\u6210\u5426\u306f\u5c02\u9580\u7684\u306a\u30e9\u30c3\u30b7\u30f3\u30b0\u6280\u8853\u306b\u61f8\u304b\u3063\u3066\u3044\u307e\u3059\u3002\u306f\u307f\u51fa\u3057\u305f\u8ca8\u7269\u304c\u8239\u4e0a\u306e\u4ed6\u306e\u30b3\u30f3\u30c6\u30ca\u30b9\u30da\u30fc\u30b9\u3092\u5360\u6709\u3059\u308b\u305f\u3081\u3001\u9ad8\u984d\u306a\u5272\u5897\u6599\u91d1\uff08OOG\u30b5\u30fc\u30c1\u30e3\u30fc\u30b8\uff09\u304c\u767a\u751f\u3057\u307e\u3059\u3002\"\n }\n },\n japanRule: {\n '2-axle': {\n '20-dry': { total: 20320, tare: 2300 },\n '40-dry': { total: 24000, tare: 3800 }\n },\n '3-axle': {\n '20-dry': { total: 24000, tare: 2300 },\n '40-dry': { total: 30480, tare: 3800 }\n }\n }\n };\n\n let payloadChart = null;\n let japanRuleChart = null;\n let activeChassis = '2-axle';\n\n \/\/ Interactive Selector Logic\n const selector = document.getElementById('constraint-selector');\n const recommendationDiv = document.getElementById('recommendation');\n selector.addEventListener('click', (e) => {\n const button = e.target.closest('button');\n if (button && button.dataset.type) {\n const type = button.dataset.type;\n const data = appData.recommendations[type];\n recommendationDiv.innerHTML = `\n <div class=\"flex flex-col md:flex-row items-center text-center md:text-left\">\n <div class=\"text-6xl mr-0 mb-4 md:mr-6 md:mb-0\">${data.icon}<\/div>\n <div>\n <h3 class=\"font-bold text-xl text-sky-800 mb-2\">${data.title}<\/h3>\n <p class=\"text-slate-700\">${data.text}<\/p>\n <\/div>\n <\/div>`;\n recommendationDiv.classList.remove('hidden');\n \n \/\/ Highlight selected button\n Array.from(selector.children).forEach(child => {\n child.classList.remove('ring-2', 'ring-sky-500');\n });\n button.classList.add('ring-2', 'ring-sky-500');\n }\n });\n\n \/\/ Tabs Logic\n const tabsContainer = document.getElementById('tabs-container');\n const tabContent = document.getElementById('tab-content');\n Object.keys(appData.containers).forEach((key, index) => {\n const container = appData.containers[key];\n const tabButton = document.createElement('button');\n tabButton.id = `${key}-tab`;\n tabButton.className = `flex-grow md:flex-grow-0 px-4 py-3 border-b-2 font-medium text-sm transition-colors duration-300 ${index === 0 ? 'active-tab' : 'inactive-tab'}`;\n tabButton.textContent = container.name;\n tabButton.setAttribute('role', 'tab');\n tabButton.setAttribute('aria-controls', `${key}-content`);\n tabButton.setAttribute('aria-selected', index === 0 ? 'true' : 'false');\n \n tabButton.addEventListener('click', () => {\n setActiveTab(key);\n });\n\n tabsContainer.appendChild(tabButton);\n });\n \n function setActiveTab(key) {\n \/\/ Update tab buttons\n const allTabs = tabsContainer.querySelectorAll('button');\n allTabs.forEach(tab => {\n if (tab.id === `${key}-tab`) {\n tab.classList.remove('inactive-tab');\n tab.classList.add('active-tab');\n tab.setAttribute('aria-selected', 'true');\n } else {\n tab.classList.remove('active-tab');\n tab.classList.add('inactive-tab');\n tab.setAttribute('aria-selected', 'false');\n }\n });\n \n \/\/ Update content\n const data = appData.containers[key];\n tabContent.innerHTML = `\n <div id=\"${key}-content\" role=\"tabpanel\" aria-labelledby=\"${key}-tab\">\n <div class=\"grid md:grid-cols-2 gap-8 items-start\">\n <div>\n <h3 class=\"text-2xl font-bold mb-4\">${data.name}<\/h3>\n <p class=\"text-slate-600 mb-6\">${data.description}<\/p>\n <div class=\"grid grid-cols-2 gap-4 text-sm mb-6\">\n ${data.specs.map(spec => `\n <div class=\"bg-slate-100 p-3 rounded-md\">\n <div class=\"font-semibold text-slate-500\">${spec.label}<\/div>\n <div class=\"font-bold text-lg text-sky-700\">${spec.value}<\/div>\n <\/div>\n `).join('')}\n <\/div>\n <div class=\"mt-4 p-4 bg-amber-50 border-l-4 border-amber-400 text-amber-800 text-sm\">\n <h4 class=\"font-bold mb-1\">\u91cd\u8981\u30dd\u30a4\u30f3\u30c8<\/h4>\n <p>${data.notes}<\/p>\n <\/div>\n <\/div>\n <div>\n <h4 class=\"text-lg font-semibold text-center mb-2\">\u30da\u30a4\u30ed\u30fc\u30c9\u30fb\u30ae\u30e3\u30c3\u30d7\uff1a\u8a2d\u8a08\u5024 vs \u5b9f\u904b\u9001\u91cd\u91cf<\/h4>\n <div class=\"chart-container\" style=\"height: 300px;\">\n <canvas id=\"payloadChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>`;\n\n renderPayloadChart(data.payload.design, data.payload.legal);\n }\n\n function renderPayloadChart(designPayload, legalPayload) {\n const ctx = document.getElementById('payloadChart').getContext('2d');\n if(payloadChart) {\n payloadChart.destroy();\n }\n payloadChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['\u8a2d\u8a08\u4e0a\u306e\u6700\u5927\u7a4d\u8f09\u91cf', '\u56fd\u5185\u6cd5\u898f\u4e0a\u306e\u4e0a\u9650'],\n datasets: [{\n label: '\u8ca8\u7269\u91cd\u91cf (kg)',\n data: [designPayload, legalPayload],\n backgroundColor: ['#64748b', '#0ea5e9'],\n borderColor: ['#475569', '#0284c7'],\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n indexAxis: 'y',\n scales: {\n x: {\n beginAtZero: true,\n ticks: {\n callback: function(value) { return value \/ 1000 + 't' }\n }\n }\n },\n plugins: {\n legend: { display: false },\n tooltip: {\n callbacks: {\n label: function(context) {\n return ` ${context.raw.toLocaleString()} kg`;\n }\n }\n }\n }\n }\n });\n }\n\n \/\/ Japan Rule Chart Logic\n const chassisSelector = document.getElementById('chassis-selector');\n const chassisInfo = document.getElementById('chassis-info');\n\n chassisSelector.addEventListener('click', (e) => {\n const button = e.target.closest('button');\n if (button && button.dataset.chassis) {\n activeChassis = button.dataset.chassis;\n \/\/ Update buttons style\n Array.from(chassisSelector.children).forEach(child => {\n child.classList.remove('bg-sky-600', 'text-white');\n child.classList.add('bg-white', 'text-slate-700', 'border', 'border-slate-300');\n });\n button.classList.add('bg-sky-600', 'text-white');\n button.classList.remove('bg-white', 'text-slate-700', 'border', 'border-slate-300');\n renderJapanRuleChart();\n }\n });\n\n function renderJapanRuleChart() {\n const ctx = document.getElementById('japanRuleChart').getContext('2d');\n const data = appData.japanRule[activeChassis];\n const labels = [\"20' \u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\", \"40' \u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\"];\n const tareWeights = [data['20-dry'].tare, data['40-dry'].tare];\n const cargoWeights = [data['20-dry'].total - data['20-dry'].tare, data['40-dry'].total - data['40-dry'].tare];\n\n const info20ft = data['20-dry'];\n const info40ft = data['40-dry'];\n \n chassisInfo.innerHTML = `\n <p><strong>${activeChassis === '2-axle' ? '2\u8ef8' : '3\u8ef8'}\u30b7\u30e3\u30fc\u30b7\u306e\u5834\u5408:<\/strong><\/p>\n <ul class=\"list-disc list-inside mt-2\">\n <li><strong>20ft:<\/strong> \u8ca8\u7269 <span class=\"font-bold text-sky-700\">${(info20ft.total - info20ft.tare).toLocaleString()}kg<\/span>\u307e\u3067<\/li>\n <li><strong>40ft:<\/strong> \u8ca8\u7269 <span class=\"font-bold text-sky-700\">${(info40ft.total - info40ft.tare).toLocaleString()}kg<\/span>\u307e\u3067<\/li>\n <\/ul>`;\n\n if (japanRuleChart) {\n japanRuleChart.destroy();\n }\n japanRuleChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [\n {\n label: '\u8ca8\u7269\u91cd\u91cf',\n data: cargoWeights,\n backgroundColor: '#0ea5e9',\n },\n {\n label: '\u30b3\u30f3\u30c6\u30ca\u81ea\u91cd',\n data: tareWeights,\n backgroundColor: '#64748b',\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n stacked: true,\n ticks: {\n callback: function(value) { return value \/ 1000 + 't' }\n },\n title: { display: true, text: '\u30b3\u30f3\u30c6\u30ca\u7dcf\u91cd\u91cf' }\n },\n y: {\n stacked: true,\n }\n },\n plugins: {\n legend: { position: 'bottom' },\n tooltip: {\n callbacks: {\n label: function(context) {\n const datasetLabel = context.dataset.label || '';\n const value = context.raw.toLocaleString();\n return `${datasetLabel}: ${value} kg`;\n }\n }\n }\n }\n }\n });\n }\n\n \/\/ Initial render\n setActiveTab('20-dry');\n renderJapanRuleChart();\n \/\/ Set initial active state for chassis selector\n chassisSelector.querySelector(`[data-chassis=\"${activeChassis}\"]`).click();\n\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30b3\u30f3\u30c6\u30ca\u30fb\u30ac\u30a4\u30c9 \u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30b3\u30f3\u30c6\u30ca\u30fb\u30ac\u30a4\u30c9 \u30b3\u30f3\u30c6\u30ca\u9078\u629e \u8a73\u7d30\u6bd4\u8f03 \u56fd\u5185\u898f\u5236 \u30ea\u30b9\u30af\u7ba1\u7406 \u6700\u9069\u306a\u30b3\u30f3\u30c6\u30ca\u3092\u898b\u3064\u3051\u308b \u8f38\u9001\u3059\u308b\u8ca8\u7269\u306e\u6700\u3082\u91cd\u8981\u306a\u5236\u7d04\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u6700\u9069\u306a\u30b3\u30f3\u30c6\u30ca\u30bf\u30a4\u30d7\u3068\u3001\u305d\u306e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-294","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=294"}],"version-history":[{"count":6,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions"}],"predecessor-version":[{"id":1305,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions\/1305"}],"wp:attachment":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":294,"date":"2023-10-26T12:55:34","date_gmt":"2023-10-26T03:55:34","guid":{"rendered":"https:\/\/plus-fwd.com\/?page_id=294"},"modified":"2025-06-30T18:42:33","modified_gmt":"2025-06-30T09:42:33","slug":"%e3%82%b3%e3%83%b3%e3%83%86%e3%83%8a%e3%82%b5%e3%82%a4%e3%82%ba","status":"publish","type":"page","link":"https:\/\/plus-fwd.com\/?page_id=294","title":{"rendered":"CONTAINER SIZE & CAPACITY"},"content":{"rendered":"\n\n\n\n \n \n \u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30b3\u30f3\u30c6\u30ca\u30fb\u30ac\u30a4\u30c9<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n \n \n \n <style>\n body { font-family: 'Noto Sans JP', sans-serif; }\n .chart-container { position: relative; width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; height: 350px; max-height: 50vh; }\n .active-tab { border-color: #0284c7; color: #0284c7; background-color: #f0f9ff; }\n .inactive-tab { border-color: transparent; color: #475569; }\n .section-icon { font-size: 2.5rem; line-height: 1; }\n .smooth-scroll { scroll-behavior: smooth; }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 smooth-scroll\">\n\n <header class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-50 shadow-sm\">\n <div class=\"container mx-auto px-4\">\n <div class=\"flex justify-between items-center py-4\">\n <h1 class=\"text-xl md:text-2xl font-bold text-sky-700\">\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30b3\u30f3\u30c6\u30ca\u30fb\u30ac\u30a4\u30c9<\/h1>\n <nav class=\"hidden md:flex space-x-6 text-sm font-medium\">\n <a href=\"#selector\" class=\"text-slate-600 hover:text-sky-700 transition-colors\">\u30b3\u30f3\u30c6\u30ca\u9078\u629e<\/a>\n <a href=\"#details\" class=\"text-slate-600 hover:text-sky-700 transition-colors\">\u8a73\u7d30\u6bd4\u8f03<\/a>\n <a href=\"#japan-rule\" class=\"text-slate-600 hover:text-sky-700 transition-colors\">\u56fd\u5185\u898f\u5236<\/a>\n <a href=\"#risk\" class=\"text-slate-600 hover:text-sky-700 transition-colors\">\u30ea\u30b9\u30af\u7ba1\u7406<\/a>\n <\/nav>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"container mx-auto p-4 md:p-8\">\n\n \n <section id=\"selector\" class=\"mb-16 text-center\">\n <h2 class=\"text-3xl font-bold mb-2\">\u6700\u9069\u306a\u30b3\u30f3\u30c6\u30ca\u3092\u898b\u3064\u3051\u308b<\/h2>\n <p class=\"text-slate-600 mb-8 max-w-2xl mx-auto\">\u8f38\u9001\u3059\u308b\u8ca8\u7269\u306e\u6700\u3082\u91cd\u8981\u306a\u5236\u7d04\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u6700\u9069\u306a\u30b3\u30f3\u30c6\u30ca\u30bf\u30a4\u30d7\u3068\u3001\u305d\u306e\u4e3b\u306a\u7279\u5fb4\u3092\u5373\u5ea7\u306b\u63d0\u6848\u3057\u307e\u3059\u3002<\/p>\n \n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto\" id=\"constraint-selector\">\n <button data-type=\"weight\" class=\"p-6 bg-white rounded-lg shadow hover:shadow-lg hover:-translate-y-1 transition-all duration-300\">\n <div class=\"text-4xl mb-2\">\u2696\ufe0f<\/div>\n <div class=\"font-bold text-lg\">\u91cd\u91cf<\/div>\n <div class=\"text-sm text-slate-500\">\u9ad8\u5bc6\u5ea6\u306a\u8ca8\u7269<\/div>\n <\/button>\n <button data-type=\"volume\" class=\"p-6 bg-white rounded-lg shadow hover:shadow-lg hover:-translate-y-1 transition-all duration-300\">\n <div class=\"text-4xl mb-2\">\ud83d\udce6<\/div>\n <div class=\"font-bold text-lg\">\u5bb9\u7a4d<\/div>\n <div class=\"text-sm text-slate-500\">\u8efd\u91cf\u3067\u304b\u3055\u3070\u308b\u8ca8\u7269<\/div>\n <\/button>\n <button data-type=\"temperature\" class=\"p-6 bg-white rounded-lg shadow hover:shadow-lg hover:-translate-y-1 transition-all duration-300\">\n <div class=\"text-4xl mb-2\">\u2744\ufe0f<\/div>\n <div class=\"font-bold text-lg\">\u6e29\u5ea6<\/div>\n <div class=\"text-sm text-slate-500\">\u8981\u6e29\u5ea6\u7ba1\u7406<\/div>\n <\/button>\n <button data-type=\"dimensions\" class=\"p-6 bg-white rounded-lg shadow hover:shadow-lg hover:-translate-y-1 transition-all duration-300\">\n <div class=\"text-4xl mb-2\">\ud83d\udccf<\/div>\n <div class=\"font-bold text-lg\">\u5bf8\u6cd5<\/div>\n <div class=\"text-sm text-slate-500\">\u30b5\u30a4\u30ba\u8d85\u904e\u8ca8\u7269<\/div>\n <\/button>\n <\/div>\n\n <div id=\"recommendation\" class=\"mt-8 p-8 bg-sky-50 border border-sky-200 rounded-lg max-w-4xl mx-auto hidden text-left\">\n \n <\/div>\n <\/section>\n\n \n <section id=\"details\" class=\"mb-16\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold mb-2\">\u30b3\u30f3\u30c6\u30ca\u8a73\u7d30\u6bd4\u8f03<\/h2>\n <p class=\"text-slate-600 max-w-3xl mx-auto\">\u3053\u3053\u3067\u306f\u3001\u4e3b\u8981\u306a\u30b3\u30f3\u30c6\u30ca\u306e\u7a2e\u985e\u3054\u3068\u306e\u8a73\u7d30\u306a\u4ed5\u69d8\u3001\u6700\u9069\u306a\u7528\u9014\u3001\u305d\u3057\u3066\u6700\u3082\u91cd\u8981\u306a\u300c\u8a2d\u8a08\u4e0a\u306e\u6700\u5927\u7a4d\u8f09\u91cf\u300d\u3068\u300c\u65e5\u672c\u306e\u6cd5\u5f8b\u3067\u5b9a\u3081\u3089\u308c\u305f\u5b9f\u904b\u9001\u91cd\u91cf\u300d\u306e\u5dee\u3092\u8996\u899a\u7684\u306b\u6bd4\u8f03\u3067\u304d\u307e\u3059\u3002<\/p>\n <\/div>\n\n <div class=\"border-b border-slate-300 mb-6\">\n <div id=\"tabs-container\" class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n \n <\/div>\n <\/div>\n \n <div id=\"tab-content\" class=\"bg-white p-6 rounded-lg shadow-inner\">\n \n <\/div>\n <\/section>\n\n \n <section id=\"japan-rule\" class=\"mb-16 bg-white p-6 md:p-8 rounded-lg shadow-lg\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold mb-2 text-red-600\">\u6700\u91cd\u8981\u77e5\u8b58\uff1a\u65e5\u672c\u306e\u300c\u91cd\u91cf\u5236\u9650\u306e\u58c1\u300d<\/h2>\n <p class=\"text-slate-600 max-w-3xl mx-auto\">\u30b3\u30f3\u30c6\u30ca\u306e\u30c9\u30a2\u306b\u8a18\u8f09\u3055\u308c\u305f\u6700\u5927\u7a4d\u8f09\u91cf\uff08Max Payload\uff09\u306f\u3001\u65e5\u672c\u56fd\u5185\u306e\u9678\u4e0a\u8f38\u9001\u3067\u306f\u9069\u7528\u3055\u308c\u307e\u305b\u3093\u3002\u9053\u8def\u30a4\u30f3\u30d5\u30e9\u4fdd\u8b77\u306e\u305f\u3081\u3001\u6cd5\u5f8b\u3067\u5b9a\u3081\u3089\u308c\u305f\u8eca\u4e21\u7dcf\u91cd\u91cf\u3068\u8ef8\u91cd\u306e\u5236\u9650\u304c\u512a\u5148\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u300c\u30da\u30a4\u30ed\u30fc\u30c9\u30fb\u30ae\u30e3\u30c3\u30d7\u300d\u306e\u7406\u89e3\u306f\u3001\u4e88\u671f\u305b\u306c\u30b3\u30b9\u30c8\u3084\u8f38\u9001\u9045\u5ef6\u3092\u9632\u3050\u305f\u3081\u306b\u4e0d\u53ef\u6b20\u3067\u3059\u3002<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-5 gap-8 items-center\">\n <div class=\"md:col-span-3\">\n <div class=\"chart-container\">\n <canvas id=\"japanRuleChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"md:col-span-2\">\n <h3 class=\"font-bold text-lg mb-4\">\u30b7\u30e3\u30fc\u30b7\u306e\u7a2e\u985e\u3067\u7a4d\u8f09\u53ef\u80fd\u91cd\u91cf\u304c\u5909\u308f\u308b<\/h3>\n <p class=\"text-sm text-slate-600 mb-4\">\u30b3\u30f3\u30c6\u30ca\u3092\u904b\u3076\u30c8\u30ec\u30fc\u30e9\u30fc\u306e\u8eca\u8ef8\u6570\uff082\u8ef8\u304b3\u8ef8\u304b\uff09\u306b\u3088\u3063\u3066\u3001\u6cd5\u7684\u306b\u8a31\u5bb9\u3055\u308c\u308b\u30b3\u30f3\u30c6\u30ca\u7dcf\u91cd\u91cf\uff08\u30b3\u30f3\u30c6\u30ca\u81ea\u91cd\uff0b\u8ca8\u7269\u91cd\u91cf\uff09\u304c\u5909\u308f\u308a\u307e\u3059\u3002\u4e0b\u306e\u30dc\u30bf\u30f3\u3067\u30b7\u30e3\u30fc\u30b7\u3092\u9078\u629e\u3057\u3001\u7a4d\u3081\u308b\u8ca8\u7269\u91cd\u91cf\u306e\u5909\u5316\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n <div class=\"flex space-x-2 mb-6\" id=\"chassis-selector\">\n <button data-chassis=\"2-axle\" class=\"flex-1 p-3 text-sm font-semibold rounded-md transition-colors bg-sky-600 text-white\">2\u8ef8\u30b7\u30e3\u30fc\u30b7<\/button>\n <button data-chassis=\"3-axle\" class=\"flex-1 p-3 text-sm font-semibold rounded-md transition-colors bg-white text-slate-700 border border-slate-300\">3\u8ef8\u30b7\u30e3\u30fc\u30b7<\/button>\n <\/div>\n <div id=\"chassis-info\" class=\"p-4 bg-slate-100 rounded-md text-sm\">\n \n <\/div>\n <div class=\"mt-6 p-4 bg-red-50 border-l-4 border-red-500 text-red-700\">\n <h4 class=\"font-bold\">\u5371\u967a\uff1a\u8ef8\u91cd\u8d85\u904e\uff08\u7247\u8377\uff09<\/h4>\n <p class=\"text-sm\">\u8ca8\u7269\u306e\u7dcf\u91cd\u91cf\u304c\u5236\u9650\u5185\u3067\u3082\u3001\u30b3\u30f3\u30c6\u30ca\u5185\u3067\u91cd\u91cf\u304c\u504f\u308b\u3068\u7279\u5b9a\u306e\u8eca\u8ef8\u306b\u304b\u304b\u308b\u91cd\u3055\u304c10\u30c8\u30f3\u3092\u8d85\u3048\u3001\u6a2a\u8ee2\u4e8b\u6545\u3084\u9053\u8def\u640d\u50b7\u306e\u539f\u56e0\u3068\u306a\u308a\u307e\u3059\u3002\u5747\u7b49\u306a\u7a4d\u4ed8\u3051\u306f\u8377\u4e3b\u306e\u91cd\u8981\u306a\u8cac\u4efb\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"risk\" class=\"mb-8\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold mb-2\">\u5b9f\u8df5\u7684\u904b\u7528\u3068\u30ea\u30b9\u30af\u7ba1\u7406<\/h2>\n <p class=\"text-slate-600 max-w-3xl mx-auto\">\u5b89\u5168\u306a\u8f38\u9001\u306e\u5b9f\u73fe\u3001\u30b3\u30b9\u30c8\u306e\u6700\u9069\u5316\u3001\u305d\u3057\u3066\u52b9\u679c\u7684\u306a\u7269\u6d41\u624b\u914d\u306e\u305f\u3081\u306e\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow\">\n <div class=\"flex items-center mb-4\">\n <div class=\"section-icon mr-4 text-sky-600\">\ud83d\udd17<\/div>\n <h3 class=\"text-xl font-bold\">\u5b89\u5168\u78ba\u4fdd\u306e\u539f\u5247<\/h3>\n <\/div>\n <ul class=\"list-disc list-inside text-slate-600 space-y-2 text-sm\">\n <li><strong>\u9069\u5207\u306a\u56fa\u7e1b (\u30e9\u30c3\u30b7\u30f3\u30b0):<\/strong> \u8ca8\u7269\u3068\u30b3\u30f3\u30c6\u30ca\u3092\u4e00\u4f53\u5316\u3055\u305b\u3001\u8f38\u9001\u4e2d\u306e\u63fa\u308c\u306b\u3088\u308b\u79fb\u52d5\u3092\u9632\u3050\u3002\u5c02\u9580\u6280\u8853\u304c\u5fc5\u8981\u3002<\/li>\n <li><strong>\u91cd\u5fc3\u7ba1\u7406:<\/strong> \u91cd\u3044\u3082\u306e\u3092\u4e0b\u306b\u3001\u8efd\u3044\u3082\u306e\u3092\u4e0a\u306b\u3002\u91cd\u5fc3\u3092\u4f4e\u304f\u3001\u4e2d\u5fc3\u306b\u4fdd\u3064\u3053\u3068\u304c\u6a2a\u8ee2\u9632\u6b62\u306e\u9375\u3002<\/li>\n <li><strong>\u8377\u91cd\u5206\u6563:<\/strong> \u91cd\u91cf\u7269\u306f\u6577\u677f\u306a\u3069\u3067\u5e8a\u9762\u3078\u306e\u8377\u91cd\u3092\u5747\u7b49\u306b\u5206\u6563\u3055\u305b\u308b\u3002<\/li>\n <li><strong>\u5c02\u9580\u5bb6\u306e\u6d3b\u7528:<\/strong> \u9ad8\u4fa1\u306a\u8ca8\u7269\u3084\u7279\u6b8a\u8f38\u9001\u3067\u306f\u3001\u8ca8\u7269\u691c\u67fb\u54e1 (\u30b5\u30fc\u30d9\u30a4\u30e4\u30fc) \u306e\u8d77\u7528\u304c\u30ea\u30b9\u30af\u3092\u5927\u5e45\u306b\u8efd\u6e1b\u3059\u308b\u3002<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow\">\n <div class=\"flex items-center mb-4\">\n <div class=\"section-icon mr-4 text-sky-600\">\ud83d\udcb0<\/div>\n <h3 class=\"text-xl font-bold\">\u30b3\u30b9\u30c8\u69cb\u9020\u306e\u7406\u89e3<\/h3>\n <\/div>\n <ul class=\"list-disc list-inside text-slate-600 space-y-2 text-sm\">\n <li><strong>\u30b5\u30fc\u30c1\u30e3\u30fc\u30b8:<\/strong> \u904b\u8cc3\u306f\u57fa\u672c\u6599\u91d1\u3060\u3051\u3067\u306a\u304f\u3001\u71c3\u6599\u30fb\u70ba\u66ff\u30fb\u6e2f\u6e7e\u6df7\u96d1\u306a\u3069\u306e\u5272\u5897\u6599\u91d1 (\u30b5\u30fc\u30c1\u30e3\u30fc\u30b8) \u304c\u52a0\u7b97\u3055\u308c\u308b\u3002<\/li>\n <li><strong>\u96a0\u308c\u305f\u30b3\u30b9\u30c8:<\/strong> \u7121\u6599\u4fdd\u7ba1\u671f\u9593\u8d85\u904e\u306b\u3088\u308b\u30c7\u30de\u30ec\u30fc\u30b8\/\u30c7\u30a3\u30c6\u30f3\u30b7\u30e7\u30f3\u6599\u306f\u9ad8\u984d\u306b\u306a\u308a\u304c\u3061\u3002<\/li>\n <li><strong>\u7dcf\u8f38\u9001\u30b3\u30b9\u30c8 (Total Landed Cost):<\/strong> \u898b\u7a4d\u3082\u308a\u306f\u57fa\u672c\u904b\u8cc3\u3060\u3051\u3067\u306a\u304f\u3001\u5168\u3066\u306e\u8cbb\u7528\u3092\u542b\u3081\u305f\u7dcf\u984d\u3067\u6bd4\u8f03\u3059\u308b\u3002<\/li>\n <li><strong>\u9045\u5ef6\u30b3\u30b9\u30c8 (Cost of Delay):<\/strong> \u7d0d\u671f\u9045\u5ef6\u306f\u8ca9\u58f2\u6a5f\u4f1a\u306e\u640d\u5931\u3084\u9055\u7d04\u91d1\u306a\u3069\u3001\u83ab\u5927\u306a\u7d4c\u6e08\u7684\u640d\u5931\u3092\u751f\u3080\u53ef\u80fd\u6027\u304c\u3042\u308b\u3002<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow\">\n <div class=\"flex items-center mb-4\">\n <div class=\"section-icon mr-4 text-sky-600\">\ud83d\ude9a<\/div>\n <h3 class=\"text-xl font-bold\">\u8f38\u9001\u624b\u914d\u306e\u8981\u70b9<\/h3>\n <\/div>\n <ul class=\"list-disc list-inside text-slate-600 space-y-2 text-sm\">\n <li><strong>\u30d1\u30fc\u30c8\u30ca\u30fc\u9078\u5b9a:<\/strong> \u8ca8\u7269\u306e\u7279\u6027\u306b\u5408\u3063\u305f\u5c02\u9580\u6027\u3068\u7d4c\u9a13\u3092\u6301\u3064\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u3092\u9078\u3076\u3053\u3068\u304c\u6210\u529f\u306e\u9375\u3002<\/li>\n <li><strong>\u65e9\u671f\u4e88\u7d04:<\/strong> \u7279\u6b8a\u30b3\u30f3\u30c6\u30ca (\u30ea\u30fc\u30d5\u30a1\u30fc\u3001\u30aa\u30fc\u30d7\u30f3\u30c8\u30c3\u30d7\u7b49) \u306f\u6570\u304c\u5c11\u306a\u3044\u305f\u3081\u3001\u65e9\u3081\u306e\u4e88\u7d04\u304c\u4e0d\u53ef\u6b20\u3002<\/li>\n <li><strong>\u6b63\u78ba\u306a\u60c5\u5831\u63d0\u4f9b:<\/strong> \u8ca8\u7269\u306e\u6b63\u78ba\u306a\u5bf8\u6cd5\u30fb\u91cd\u91cf\u30fb\u91cd\u5fc3\u4f4d\u7f6e\u306a\u3069\u306e\u60c5\u5831\u304c\u3001\u624b\u914d\u3092\u30b9\u30e0\u30fc\u30ba\u306b\u9032\u3081\u308b\u305f\u3081\u306b\u5fc5\u8981\u3002<\/li>\n <li><strong>\u66f8\u985e\u306e\u6b63\u78ba\u6027:<\/strong> \u8239\u8377\u8a3c\u5238\u3084\u30a4\u30f3\u30dc\u30a4\u30b9\u306e\u8a18\u8f09\u30df\u30b9\u306f\u3001\u901a\u95a2\u3067\u306e\u9045\u5ef6\u3068\u8ffd\u52a0\u8cbb\u7528\u306b\u76f4\u7d50\u3059\u308b\u3002<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"bg-slate-800 text-slate-300 py-6 mt-16\">\n <div class=\"container mx-auto px-4 text-center text-sm\">\n <p>\u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u300c\u6d77\u4e0a\u30b3\u30f3\u30c6\u30ca\u306e\u80fd\u529b\u3068\u7279\u6027\u306b\u95a2\u3059\u308b\u5305\u62ec\u7684\u5206\u6790\u300d\u30ec\u30dd\u30fc\u30c8\u3092\u57fa\u306b\u4f5c\u6210\u3055\u308c\u305f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30ac\u30a4\u30c9\u3067\u3059\u3002<\/p>\n <p class=\"mt-2\">© 2025 Interactive Container Guide. All rights reserved.<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n const appData = {\n recommendations: {\n weight: {\n title: \"\u63a8\u5968: 20\u30d5\u30a3\u30fc\u30c8 \u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\",\n icon: \"\u2696\ufe0f\",\n text: \"\u5bb9\u7a4d\u306b\u5bfe\u3057\u3066\u8a31\u5bb9\u3055\u308c\u308b\u6700\u5927\u7a4d\u8f09\u91cd\u91cf\u304c\u5927\u304d\u3044\u305f\u3081\u3001\u6a5f\u68b0\u90e8\u54c1\u3001\u91d1\u5c5e\u88fd\u54c1\u3001\u5316\u5b66\u54c1\u539f\u6599\u306a\u3069\u3001\u5bc6\u5ea6\u304c\u9ad8\u304f\u91cd\u3044\u8ca8\u7269\u306e\u8f38\u9001\u306b\u6700\u9069\u3067\u3059\u3002\u305f\u3060\u3057\u3001\u65e5\u672c\u306e\u56fd\u5185\u9678\u9001\u3067\u306f3\u8ef8\u30b7\u30e3\u30fc\u30b7\u3067\u3082\u8ca8\u7269\u91cd\u91cf\u306e\u4e0a\u9650\u304c\u7d0421.7\u30c8\u30f3\u306b\u5236\u9650\u3055\u308c\u308b\u70b9\u306b\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002\",\n link: \"20-dry\"\n },\n volume: {\n title: \"\u63a8\u5968: 40\u30d5\u30a3\u30fc\u30c8 \u30c9\u30e9\u30a4 \/ \u30cf\u30a4\u30ad\u30e5\u30fc\u30d6\u30b3\u30f3\u30c6\u30ca\",\n icon: \"\ud83d\udce6\",\n text: \"20\u30d5\u30a3\u30fc\u30c8\u306e\u7d042\u500d\u306e\u5bb9\u7a4d\u3092\u6301\u3061\u3001\u30a2\u30d1\u30ec\u30eb\u3001\u5bb6\u5177\u3001\u96d1\u8ca8\u306a\u3069\u3001\u8efd\u91cf\u3067\u304b\u3055\u3070\u308b\u8ca8\u7269\u306e\u8f38\u9001\u30b3\u30b9\u30c8\u52b9\u7387\u3092\u6700\u5927\u5316\u3057\u307e\u3059\u3002\u80cc\u306e\u9ad8\u3044\u8ca8\u7269\u3084\u6bb5\u7a4d\u307f\u304c\u53ef\u80fd\u306a\u5834\u5408\u306f\u3001\u3055\u3089\u306b\u5bb9\u7a4d\u306e\u5927\u304d\u3044\u30cf\u30a4\u30ad\u30e5\u30fc\u30d6(HC)\u304c\u6700\u9069\u3067\u3059\u3002\",\n link: \"40-dry\"\n },\n temperature: {\n title: \"\u63a8\u5968: \u30ea\u30fc\u30d5\u30a1\u30fc\u30b3\u30f3\u30c6\u30ca\",\n icon: \"\u2744\ufe0f\",\n text: \"\u30b3\u30f3\u30c6\u30ca\u81ea\u4f53\u304c\u51b7\u51cd\u30fb\u51b7\u8535\u6a5f\u80fd\u3092\u6301\u3061\u3001\u751f\u9bae\u98df\u54c1\u3001\u533b\u85ac\u54c1\u3001\u5316\u6210\u54c1\u306a\u3069\u53b3\u5bc6\u306a\u6e29\u5ea6\u7ba1\u7406\u304c\u5fc5\u8981\u306a\u8ca8\u7269\u3092\u8f38\u9001\u3057\u307e\u3059\u3002-25\u2103\u304b\u3089+25\u2103\u307e\u3067\u306e\u7cbe\u5bc6\u306a\u6e29\u5ea6\u5236\u5fa1\u304c\u53ef\u80fd\u3067\u3001\u30b3\u30fc\u30eb\u30c9\u30c1\u30a7\u30fc\u30f3\u306e\u7dad\u6301\u306b\u4e0d\u53ef\u6b20\u3067\u3059\u3002\",\n link: \"reefer\"\n },\n dimensions: {\n title: \"\u63a8\u5968: \u30aa\u30fc\u30d7\u30f3\u30c8\u30c3\u30d7 \/ \u30d5\u30e9\u30c3\u30c8\u30e9\u30c3\u30af\u30b3\u30f3\u30c6\u30ca\",\n icon: \"\ud83d\udccf\",\n text: \"\u30b3\u30f3\u30c6\u30ca\u306e\u5bf8\u6cd5\u3092\u8d85\u3048\u308b\u8ca8\u7269\u306e\u305f\u3081\u306e\u7279\u6b8a\u30b3\u30f3\u30c6\u30ca\u3067\u3059\u3002\u80cc\u306e\u9ad8\u3044\u8ca8\u7269\u306f\u5c4b\u6839\u304c\u958b\u304f\u300c\u30aa\u30fc\u30d7\u30f3\u30c8\u30c3\u30d7\u300d\u3001\u5e45\u3084\u9ad8\u3055\u3092\u8d85\u3048\u308b\u8ca8\u7269\u306f\u58c1\u306e\u306a\u3044\u300c\u30d5\u30e9\u30c3\u30c8\u30e9\u30c3\u30af\u300d\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\u30af\u30ec\u30fc\u30f3\u8377\u5f79\u3068\u5c02\u9580\u7684\u306a\u56fa\u7e1b\u304c\u5fc5\u9808\u3067\u3059\u3002\",\n link: \"open-top\"\n }\n },\n containers: {\n \"20-dry\": {\n name: \"20' \u30c9\u30e9\u30a4\",\n description: \"\u9ad8\u5bc6\u5ea6\u30fb\u91cd\u91cf\u8ca8\u7269\u306e\u8f38\u9001\u306b\u304a\u3051\u308b\u6a19\u6e96\u30b3\u30f3\u30c6\u30ca\u3002\u30b3\u30f3\u30d1\u30af\u30c8\u3055\u3068\u5805\u7262\u6027\u304c\u7279\u5fb4\u3067\u3059\u3002\",\n specs: [\n { label: \"\u5185\u5bb9\u7a4d\", value: \"\u7d04 33 m\u00b3\" },\n { label: \"\u5e73\u5747\u81ea\u91cd\", value: \"\u7d04 2,300 kg\" },\n { label: \"\u6700\u9069\u306a\u8ca8\u7269\", value: \"\u6a5f\u68b0\u3001\u91d1\u5c5e\u3001\u539f\u6599\" },\n ],\n payload: { design: 28180, legal: 21700 },\n notes: \"\u65e5\u672c\u306e\u56fd\u5185\u898f\u5236\uff083\u8ef8\u30b7\u30e3\u30fc\u30b7\uff09\u3067\u306f\u3001\u5b9f\u904b\u9001\u53ef\u80fd\u306a\u8ca8\u7269\u91cd\u91cf\u306f\u7d0421,700kg\u304c\u4e0a\u9650\u3068\u306a\u308a\u307e\u3059\u3002\u8a2d\u8a08\u4e0a\u306e\u6700\u5927\u7a4d\u8f09\u91cf\u3068\u306e\u5dee\u304c\u6700\u3082\u5927\u304d\u3044\u30bf\u30a4\u30d7\u3067\u3059\u3002\"\n },\n \"40-dry\": {\n name: \"40' \u30c9\u30e9\u30a4\",\n description: \"\u8efd\u91cf\u30fb\u5bb9\u7a4d\u5927\u306e\u8ca8\u7269\u306e\u8f38\u9001\u52b9\u7387\u3092\u9ad8\u3081\u308b\u305f\u3081\u306e\u30b3\u30f3\u30c6\u30ca\u300220\u30d5\u30a3\u30fc\u30c8\u306e\u7d042\u500d\u306e\u5bb9\u7a4d\u3092\u6301\u3061\u307e\u3059\u3002\",\n specs: [\n { label: \"\u5185\u5bb9\u7a4d\", value: \"\u7d04 67 m\u00b3\" },\n { label: \"\u5e73\u5747\u81ea\u91cd\", value: \"\u7d04 3,800 kg\" },\n { label: \"\u6700\u9069\u306a\u8ca8\u7269\", value: \"\u30a2\u30d1\u30ec\u30eb\u3001\u5bb6\u5177\u3001\u96d1\u8ca8\" },\n ],\n payload: { design: 26680, legal: 26680 },\n notes: \"\u6700\u5927\u7a4d\u8f09\u91cf\u306f20\u30d5\u30a3\u30fc\u30c8\u306e2\u500d\u3067\u306f\u306a\u304f\u3001\u30b3\u30f3\u30c6\u30ca\u7dcf\u91cd\u91cf\u306e\u4e0a\u9650\uff08\u7d0430.48\u30c8\u30f3\uff09\u306b\u3088\u3063\u3066\u5236\u9650\u3055\u308c\u307e\u3059\u3002\u65e5\u672c\u306e3\u8ef8\u30b7\u30e3\u30fc\u30b7\u3067\u306e\u9678\u9001\u4e0a\u9650\u3068\u307b\u307c\u4e00\u81f4\u3057\u307e\u3059\u3002\"\n },\n \"40-hc\": {\n name: \"40' \u30cf\u30a4\u30ad\u30e5\u30fc\u30d6\",\n description: \"\u6a19\u6e96\u306e40\u30d5\u30a3\u30fc\u30c8\u30b3\u30f3\u30c6\u30ca\u3088\u308a\u9ad8\u3055\u3092\u7d0430cm\u9ad8\u304f\u3057\u3001\u5bb9\u7a4d\u3092\u3055\u3089\u306b\u5897\u3084\u3057\u305f\u30bf\u30a4\u30d7\u3067\u3059\u3002\",\n specs: [\n { label: \"\u5185\u5bb9\u7a4d\", value: \"\u7d04 76 m\u00b3 (+13%)\" },\n { label: \"\u5e73\u5747\u81ea\u91cd\", value: \"\u7d04 3,900 kg\" },\n { label: \"\u6700\u9069\u306a\u8ca8\u7269\", value: \"\u80cc\u306e\u9ad8\u3044\u8ca8\u7269\u3001\u6bb5\u7a4d\u307f\u53ef\u80fd\u306a\u8efd\u91cf\u54c1\" },\n ],\n payload: { design: 26580, legal: 26580 },\n notes: \"\u9ad8\u3055\u304c\u5897\u3059\u305f\u3081\u3001\u5185\u9678\u8f38\u9001\u30eb\u30fc\u30c8\u3084\u65bd\u8a2d\u306e\u9ad8\u3055\u5236\u9650\uff08\u6a4b\u3001\u30c8\u30f3\u30cd\u30eb\u3001\u5009\u5eab\u306e\u8ed2\u5148\uff09\u306b\u62b5\u89e6\u3057\u306a\u3044\u304b\u4e8b\u524d\u306e\u78ba\u8a8d\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002\"\n },\n \"reefer\": {\n name: \"\u30ea\u30fc\u30d5\u30a1\u30fc\",\n description: \"\u51b7\u51cd\u30fb\u51b7\u8535\u6a5f\u80fd\u3092\u5099\u3048\u3001\u53b3\u5bc6\u306a\u6e29\u5ea6\u7ba1\u7406\u304c\u5fc5\u8981\u306a\u8ca8\u7269\uff08\u751f\u9bae\u98df\u54c1\u3001\u533b\u85ac\u54c1\u306a\u3069\uff09\u3092\u8f38\u9001\u3057\u307e\u3059\u3002\",\n specs: [\n { label: \"\u6e29\u5ea6\u7bc4\u56f2\", value: \"-25\u2103 ~ +25\u2103\" },\n { label: \"\u7279\u5fb4\", value: \"\u65ad\u71b1\u69cb\u9020\u3001T-Floor\u3001CA\u6a5f\u80fd\" },\n { label: \"\u6ce8\u610f\u70b9\", value: \"\u5185\u5bf8\u304c\u72ed\u3044\u3001\u30b3\u30b9\u30c8\u9ad8\" },\n ],\n payload: { design: 26000, legal: 25000 },\n notes: \"\u51b7\u51cd\u6a5f\u30e6\u30cb\u30c3\u30c8\u3068\u539a\u3044\u65ad\u71b1\u6750\u306e\u305f\u3081\u3001\u5185\u5bf8\u304c\u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\u3088\u308a\u5c0f\u3055\u304f\u3001\u81ea\u91cd\u3082\u91cd\u304f\u306a\u308a\u307e\u3059\u3002\u8239\u4e0a\u3084\u9678\u9001\u4e2d\u306e\u96fb\u6e90\u4f9b\u7d66\u304c\u5fc5\u9808\u3067\u3042\u308a\u3001\u30b3\u30fc\u30eb\u30c9\u30c1\u30a7\u30fc\u30f3\u5168\u4f53\u306e\u7ba1\u7406\u304c\u91cd\u8981\u3067\u3059\u3002\"\n },\n \"open-top\": {\n name: \"\u30aa\u30fc\u30d7\u30f3\u30c8\u30c3\u30d7\",\n description: \"\u5c4b\u6839\u304c\u958b\u653e\u53ef\u80fd\u3067\u3001\u30af\u30ec\u30fc\u30f3\u306b\u3088\u308b\u4e0a\u90e8\u304b\u3089\u306e\u8377\u5f79\u304c\u5fc5\u8981\u306a\u80cc\u306e\u9ad8\u3044\u8ca8\u7269\uff08\u5de5\u4f5c\u6a5f\u68b0\u306a\u3069\uff09\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002\",\n specs: [\n { label: \"\u8377\u5f79\u65b9\u6cd5\", value: \"\u30af\u30ec\u30fc\u30f3\uff08\u4e0a\u90e8\u304b\u3089\uff09\" },\n { label: \"\u5c4b\u6839\u69cb\u9020\", value: \"\u9632\u6c34\u30b7\u30fc\u30c8\uff08\u30bf\u30fc\u30dd\u30ea\u30f3\uff09\" },\n { label: \"\u6ce8\u610f\u70b9\", value: \"\u8377\u5f79\u6642\u306e\u5929\u5019\u5f71\u97ff\u3001\u5b8c\u5168\u306a\u5bc6\u9589\u6027\u306f\u306a\u3044\" },\n ],\n payload: { design: 28000, legal: 21000 },\n notes: \"\u8377\u4e3b\u3068\u7d0d\u5165\u5148\u306e\u4e21\u65b9\u3067\u30af\u30ec\u30fc\u30f3\u8a2d\u5099\u304c\u5229\u7528\u53ef\u80fd\u3067\u3042\u308b\u3053\u3068\u304c\u524d\u63d0\u3068\u306a\u308a\u307e\u3059\u3002\u30bf\u30fc\u30dd\u30ea\u30f3\u30ab\u30d0\u30fc\u306f\u9632\u6c34\u3067\u3059\u304c\u3001\u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\u307b\u3069\u306e\u5bc6\u9589\u6027\u306f\u3042\u308a\u307e\u305b\u3093\u3002\"\n },\n \"flat-rack\": {\n name: \"\u30d5\u30e9\u30c3\u30c8\u30e9\u30c3\u30af\",\n description: \"\u5c4b\u6839\u3082\u5074\u58c1\u3082\u306a\u304f\u3001\u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u30fb\u9ad8\u3055\u3092\u8d85\u3048\u308b\u5bf8\u6cd5\u8d85\u904e\u8ca8\u7269\uff08\u5efa\u8a2d\u6a5f\u68b0\u3001\u8eca\u4e21\u306a\u3069\uff09\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002\",\n specs: [\n { label: \"\u69cb\u9020\", value: \"\u5e8a\u3068\u524d\u5f8c\u306e\u58c1\u306e\u307f\" },\n { label: \"\u6700\u91cd\u8981\u4e8b\u9805\", value: \"\u8ca8\u7269\u306e\u56fa\u7e1b\uff08\u30e9\u30c3\u30b7\u30f3\u30b0\uff09\" },\n { label: \"\u30b3\u30b9\u30c8\", value: \"OOG\u30b5\u30fc\u30c1\u30e3\u30fc\u30b8\uff08\u9ad8\u984d\uff09\" },\n ],\n payload: { design: 40000, legal: 25000 },\n notes: \"\u8f38\u9001\u306e\u6210\u5426\u306f\u5c02\u9580\u7684\u306a\u30e9\u30c3\u30b7\u30f3\u30b0\u6280\u8853\u306b\u61f8\u304b\u3063\u3066\u3044\u307e\u3059\u3002\u306f\u307f\u51fa\u3057\u305f\u8ca8\u7269\u304c\u8239\u4e0a\u306e\u4ed6\u306e\u30b3\u30f3\u30c6\u30ca\u30b9\u30da\u30fc\u30b9\u3092\u5360\u6709\u3059\u308b\u305f\u3081\u3001\u9ad8\u984d\u306a\u5272\u5897\u6599\u91d1\uff08OOG\u30b5\u30fc\u30c1\u30e3\u30fc\u30b8\uff09\u304c\u767a\u751f\u3057\u307e\u3059\u3002\"\n }\n },\n japanRule: {\n '2-axle': {\n '20-dry': { total: 20320, tare: 2300 },\n '40-dry': { total: 24000, tare: 3800 }\n },\n '3-axle': {\n '20-dry': { total: 24000, tare: 2300 },\n '40-dry': { total: 30480, tare: 3800 }\n }\n }\n };\n\n let payloadChart = null;\n let japanRuleChart = null;\n let activeChassis = '2-axle';\n\n \/\/ Interactive Selector Logic\n const selector = document.getElementById('constraint-selector');\n const recommendationDiv = document.getElementById('recommendation');\n selector.addEventListener('click', (e) => {\n const button = e.target.closest('button');\n if (button && button.dataset.type) {\n const type = button.dataset.type;\n const data = appData.recommendations[type];\n recommendationDiv.innerHTML = `\n <div class=\"flex flex-col md:flex-row items-center text-center md:text-left\">\n <div class=\"text-6xl mr-0 mb-4 md:mr-6 md:mb-0\">${data.icon}<\/div>\n <div>\n <h3 class=\"font-bold text-xl text-sky-800 mb-2\">${data.title}<\/h3>\n <p class=\"text-slate-700\">${data.text}<\/p>\n <\/div>\n <\/div>`;\n recommendationDiv.classList.remove('hidden');\n \n \/\/ Highlight selected button\n Array.from(selector.children).forEach(child => {\n child.classList.remove('ring-2', 'ring-sky-500');\n });\n button.classList.add('ring-2', 'ring-sky-500');\n }\n });\n\n \/\/ Tabs Logic\n const tabsContainer = document.getElementById('tabs-container');\n const tabContent = document.getElementById('tab-content');\n Object.keys(appData.containers).forEach((key, index) => {\n const container = appData.containers[key];\n const tabButton = document.createElement('button');\n tabButton.id = `${key}-tab`;\n tabButton.className = `flex-grow md:flex-grow-0 px-4 py-3 border-b-2 font-medium text-sm transition-colors duration-300 ${index === 0 ? 'active-tab' : 'inactive-tab'}`;\n tabButton.textContent = container.name;\n tabButton.setAttribute('role', 'tab');\n tabButton.setAttribute('aria-controls', `${key}-content`);\n tabButton.setAttribute('aria-selected', index === 0 ? 'true' : 'false');\n \n tabButton.addEventListener('click', () => {\n setActiveTab(key);\n });\n\n tabsContainer.appendChild(tabButton);\n });\n \n function setActiveTab(key) {\n \/\/ Update tab buttons\n const allTabs = tabsContainer.querySelectorAll('button');\n allTabs.forEach(tab => {\n if (tab.id === `${key}-tab`) {\n tab.classList.remove('inactive-tab');\n tab.classList.add('active-tab');\n tab.setAttribute('aria-selected', 'true');\n } else {\n tab.classList.remove('active-tab');\n tab.classList.add('inactive-tab');\n tab.setAttribute('aria-selected', 'false');\n }\n });\n \n \/\/ Update content\n const data = appData.containers[key];\n tabContent.innerHTML = `\n <div id=\"${key}-content\" role=\"tabpanel\" aria-labelledby=\"${key}-tab\">\n <div class=\"grid md:grid-cols-2 gap-8 items-start\">\n <div>\n <h3 class=\"text-2xl font-bold mb-4\">${data.name}<\/h3>\n <p class=\"text-slate-600 mb-6\">${data.description}<\/p>\n <div class=\"grid grid-cols-2 gap-4 text-sm mb-6\">\n ${data.specs.map(spec => `\n <div class=\"bg-slate-100 p-3 rounded-md\">\n <div class=\"font-semibold text-slate-500\">${spec.label}<\/div>\n <div class=\"font-bold text-lg text-sky-700\">${spec.value}<\/div>\n <\/div>\n `).join('')}\n <\/div>\n <div class=\"mt-4 p-4 bg-amber-50 border-l-4 border-amber-400 text-amber-800 text-sm\">\n <h4 class=\"font-bold mb-1\">\u91cd\u8981\u30dd\u30a4\u30f3\u30c8<\/h4>\n <p>${data.notes}<\/p>\n <\/div>\n <\/div>\n <div>\n <h4 class=\"text-lg font-semibold text-center mb-2\">\u30da\u30a4\u30ed\u30fc\u30c9\u30fb\u30ae\u30e3\u30c3\u30d7\uff1a\u8a2d\u8a08\u5024 vs \u5b9f\u904b\u9001\u91cd\u91cf<\/h4>\n <div class=\"chart-container\" style=\"height: 300px;\">\n <canvas id=\"payloadChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>`;\n\n renderPayloadChart(data.payload.design, data.payload.legal);\n }\n\n function renderPayloadChart(designPayload, legalPayload) {\n const ctx = document.getElementById('payloadChart').getContext('2d');\n if(payloadChart) {\n payloadChart.destroy();\n }\n payloadChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['\u8a2d\u8a08\u4e0a\u306e\u6700\u5927\u7a4d\u8f09\u91cf', '\u56fd\u5185\u6cd5\u898f\u4e0a\u306e\u4e0a\u9650'],\n datasets: [{\n label: '\u8ca8\u7269\u91cd\u91cf (kg)',\n data: [designPayload, legalPayload],\n backgroundColor: ['#64748b', '#0ea5e9'],\n borderColor: ['#475569', '#0284c7'],\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n indexAxis: 'y',\n scales: {\n x: {\n beginAtZero: true,\n ticks: {\n callback: function(value) { return value \/ 1000 + 't' }\n }\n }\n },\n plugins: {\n legend: { display: false },\n tooltip: {\n callbacks: {\n label: function(context) {\n return ` ${context.raw.toLocaleString()} kg`;\n }\n }\n }\n }\n }\n });\n }\n\n \/\/ Japan Rule Chart Logic\n const chassisSelector = document.getElementById('chassis-selector');\n const chassisInfo = document.getElementById('chassis-info');\n\n chassisSelector.addEventListener('click', (e) => {\n const button = e.target.closest('button');\n if (button && button.dataset.chassis) {\n activeChassis = button.dataset.chassis;\n \/\/ Update buttons style\n Array.from(chassisSelector.children).forEach(child => {\n child.classList.remove('bg-sky-600', 'text-white');\n child.classList.add('bg-white', 'text-slate-700', 'border', 'border-slate-300');\n });\n button.classList.add('bg-sky-600', 'text-white');\n button.classList.remove('bg-white', 'text-slate-700', 'border', 'border-slate-300');\n renderJapanRuleChart();\n }\n });\n\n function renderJapanRuleChart() {\n const ctx = document.getElementById('japanRuleChart').getContext('2d');\n const data = appData.japanRule[activeChassis];\n const labels = [\"20' \u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\", \"40' \u30c9\u30e9\u30a4\u30b3\u30f3\u30c6\u30ca\"];\n const tareWeights = [data['20-dry'].tare, data['40-dry'].tare];\n const cargoWeights = [data['20-dry'].total - data['20-dry'].tare, data['40-dry'].total - data['40-dry'].tare];\n\n const info20ft = data['20-dry'];\n const info40ft = data['40-dry'];\n \n chassisInfo.innerHTML = `\n <p><strong>${activeChassis === '2-axle' ? '2\u8ef8' : '3\u8ef8'}\u30b7\u30e3\u30fc\u30b7\u306e\u5834\u5408:<\/strong><\/p>\n <ul class=\"list-disc list-inside mt-2\">\n <li><strong>20ft:<\/strong> \u8ca8\u7269 <span class=\"font-bold text-sky-700\">${(info20ft.total - info20ft.tare).toLocaleString()}kg<\/span>\u307e\u3067<\/li>\n <li><strong>40ft:<\/strong> \u8ca8\u7269 <span class=\"font-bold text-sky-700\">${(info40ft.total - info40ft.tare).toLocaleString()}kg<\/span>\u307e\u3067<\/li>\n <\/ul>`;\n\n if (japanRuleChart) {\n japanRuleChart.destroy();\n }\n japanRuleChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [\n {\n label: '\u8ca8\u7269\u91cd\u91cf',\n data: cargoWeights,\n backgroundColor: '#0ea5e9',\n },\n {\n label: '\u30b3\u30f3\u30c6\u30ca\u81ea\u91cd',\n data: tareWeights,\n backgroundColor: '#64748b',\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n stacked: true,\n ticks: {\n callback: function(value) { return value \/ 1000 + 't' }\n },\n title: { display: true, text: '\u30b3\u30f3\u30c6\u30ca\u7dcf\u91cd\u91cf' }\n },\n y: {\n stacked: true,\n }\n },\n plugins: {\n legend: { position: 'bottom' },\n tooltip: {\n callbacks: {\n label: function(context) {\n const datasetLabel = context.dataset.label || '';\n const value = context.raw.toLocaleString();\n return `${datasetLabel}: ${value} kg`;\n }\n }\n }\n }\n }\n });\n }\n\n \/\/ Initial render\n setActiveTab('20-dry');\n renderJapanRuleChart();\n \/\/ Set initial active state for chassis selector\n chassisSelector.querySelector(`[data-chassis=\"${activeChassis}\"]`).click();\n\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30b3\u30f3\u30c6\u30ca\u30fb\u30ac\u30a4\u30c9 \u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30b3\u30f3\u30c6\u30ca\u30fb\u30ac\u30a4\u30c9 \u30b3\u30f3\u30c6\u30ca\u9078\u629e \u8a73\u7d30\u6bd4\u8f03 \u56fd\u5185\u898f\u5236 \u30ea\u30b9\u30af\u7ba1\u7406 \u6700\u9069\u306a\u30b3\u30f3\u30c6\u30ca\u3092\u898b\u3064\u3051\u308b \u8f38\u9001\u3059\u308b\u8ca8\u7269\u306e\u6700\u3082\u91cd\u8981\u306a\u5236\u7d04\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u6700\u9069\u306a\u30b3\u30f3\u30c6\u30ca\u30bf\u30a4\u30d7\u3068\u3001\u305d\u306e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-294","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=294"}],"version-history":[{"count":6,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions"}],"predecessor-version":[{"id":1305,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions\/1305"}],"wp:attachment":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}