\u65e5\u672c\u306e\u30c8\u30e9\u30c3\u30af\u5206\u985e\uff1a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u7a4d\u8f09\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 \n <style>\n body { font-family: 'Noto Sans JP', sans-serif; background-color: #F7F7F7; color: #333; }\n .bg-primary { background-color: #003C43; }\n .text-primary { color: #003C43; }\n .bg-secondary { background-color: #135D66; }\n .text-secondary { color: #135D66; }\n .bg-accent { background-color: #E3FEF7; }\n .text-accent { color: #E3FEF7; }\n .border-accent { border-color: #77B0AA; }\n .interactive-card { transition: all 0.3s ease; border: 2px solid transparent; }\n .interactive-card.highlight { border-color: #135D66; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateY(-4px); }\n html { scroll-behavior: smooth; }\n .cargo-tab { transition: all 0.3s ease; border-bottom: 4px solid transparent; }\n .cargo-tab.active { border-bottom-color: #135D66; color: #003C43; font-weight: 700; }\n .pallet { background-color: #77B0AA; border: 1px solid #135D66; color: white; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; }\n .truck-bed { background-color: #E3FEF7; border: 2px dashed #77B0AA; display: grid; gap: 4px; padding: 4px; }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n <header class=\"bg-primary text-white shadow-md sticky top-0 z-50\">\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <h1 class=\"text-xl md:text-2xl font-bold\">\ud83d\ude9a \u65e5\u672c\u306e\u30c8\u30e9\u30c3\u30af\u7a4d\u8f09\u30ac\u30a4\u30c9<\/h1>\n <nav class=\"hidden md:flex space-x-4\">\n <a href=\"#section-simulator\" class=\"nav-link hover:text-accent transition\">\u7a4d\u8f09\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc<\/a>\n <a href=\"#section-unscrambler\" class=\"nav-link hover:text-accent transition\">\u5206\u985e\u306e\u57fa\u790e<\/a>\n <a href=\"#section-bodytypes\" class=\"nav-link hover:text-accent transition\">\u67b6\u88c5\u306e\u7a2e\u985e<\/a>\n <\/nav>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"container mx-auto p-4 sm:p-6 lg:p-8\">\n\n <section id=\"section-intro\" class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-primary mb-4\">\u3069\u306e\u30c8\u30e9\u30c3\u30af\u306b\u3001\u3069\u308c\u3060\u3051\u7a4d\u3081\u308b\uff1f<\/h2>\n <p class=\"max-w-3xl mx-auto text-lg text-gray-700\">\n \u30c8\u30e9\u30c3\u30af\u306e\u300c\u30c8\u30f3\u6570\u300d\u3060\u3051\u3067\u306f\u3001\u5b9f\u969b\u306e\u7a4d\u8f09\u80fd\u529b\u306f\u5206\u304b\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc\u3092\u4f7f\u3048\u3070\u3001\u4e3b\u8981\u306a\u30c8\u30e9\u30c3\u30af\u30af\u30e9\u30b9\u306e\u6700\u5927\u7a4d\u8f09\u91cd\u91cf\u3001\u8377\u53f0\u30b5\u30a4\u30ba\u3001\u305d\u3057\u3066\u6a19\u6e96\u7684\u306a\u30d1\u30ec\u30c3\u30c8\u304c\u4f55\u679a\u7a4d\u3081\u308b\u304b\u3092\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306b\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002\n <\/p>\n <\/section>\n\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8 mb-12\" id=\"section-simulator\">\n <h3 class=\"text-2xl font-bold text-primary mb-2\">\u2460 \u5b9f\u8df5\uff01\u7a4d\u8f09\u5bb9\u91cf\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc<\/h3>\n <p class=\"text-gray-600 mb-6\">\n \u4e0b\u306e\u30bf\u30d6\u304b\u3089\u30c8\u30e9\u30c3\u30af\u306e\u7a2e\u985e\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u8377\u53f0\u306e\u5bf8\u6cd5\u3084\u7a4d\u3081\u308b\u30d1\u30ec\u30c3\u30c8\u306e\u6570\u304c\u3001\u53f3\u5074\u306b\u8996\u899a\u7684\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002\n <\/p>\n \n <div class=\"border-b border-gray-200 mb-6\">\n <nav class=\"-mb-px flex space-x-6\" aria-label=\"Tabs\">\n <button class=\"cargo-tab whitespace-nowrap py-4 px-1 text-lg font-medium text-gray-500\" data-truck=\"light\">\u8efd\u8ca8\u7269<\/button>\n <button class=\"cargo-tab whitespace-nowrap py-4 px-1 text-lg font-medium text-gray-500\" data-truck=\"2t\">2t\u8eca<\/button>\n <button class=\"cargo-tab whitespace-nowrap py-4 px-1 text-lg font-medium text-gray-500 active\" data-truck=\"4t\">4t\u8eca<\/button>\n <button class=\"cargo-tab whitespace-nowrap py-4 px-1 text-lg font-medium text-gray-500\" data-truck=\"10t\">10t\u8eca<\/button>\n <\/nav>\n <\/div>\n\n <div class=\"grid lg:grid-cols-2 gap-8 items-start\">\n <div id=\"truck-info-panel\">\n \n <\/div>\n <div class=\"min-h-[300px] lg:min-h-[400px]\">\n <h4 class=\"font-bold text-secondary text-center mb-2\">\u30d1\u30ec\u30c3\u30c8\u7a4d\u8f09\u30ec\u30a4\u30a2\u30a6\u30c8 (1.1m x 1.1m)<\/h4>\n <div id=\"pallet-visualizer\" class=\"w-full h-full aspect-w-1 aspect-h-1\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8 mb-12\" id=\"section-unscrambler\">\n <h3 class=\"text-2xl font-bold text-primary mb-2\">\u2461 \u5206\u985e\u306e\u57fa\u790e\u77e5\u8b58\uff1a3\u3064\u306e\u8996\u70b9<\/h3>\n <p class=\"text-gray-600 mb-6\">\n \u30c8\u30e9\u30c3\u30af\u3092\u7406\u89e3\u3059\u308b\u306b\u306f\u300c\u8eca\u4e21\u306e\u6cd5\u5f8b\u300d\u300c\u696d\u754c\u306e\u901a\u79f0\u300d\u300c\u904b\u8ee2\u514d\u8a31\u300d\u306e3\u3064\u306e\u8996\u70b9\u304c\u5fc5\u8981\u3067\u3059\u3002\u30ab\u30fc\u30c9\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u308b\u3068\u3001\u5404\u5206\u985e\u304c\u3069\u306e\u3088\u3046\u306b\u95a2\u9023\u3057\u3066\u3044\u308b\u304b\u304c\u308f\u304b\u308a\u307e\u3059\u3002\n <\/p>\n <div class=\"grid md:grid-cols-3 gap-6\">\n <div class=\"classification-column\">\n <h4 class=\"font-bold text-lg text-center mb-4 text-secondary\">A. \u8eca\u4e21\u306e\u6cd5\u5f8b<\/h4>\n <div class=\"space-y-4\">\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"small\"><h5 class=\"font-bold\">\u5c0f\u578b\u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">GVW 5t\u672a\u6e80, \u7a4d\u8f09\u91cf 3t\u672a\u6e80<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"medium\"><h5 class=\"font-bold\">\u4e2d\u578b\u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">GVW 5t~11t\u672a\u6e80, \u7a4d\u8f09\u91cf 6.5t\u672a\u6e80<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"large\"><h5 class=\"font-bold\">\u5927\u578b\u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">GVW 11t\u4ee5\u4e0a, \u7a4d\u8f09\u91cf 6.5t\u4ee5\u4e0a<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"classification-column\">\n <h4 class=\"font-bold text-lg text-center mb-4 text-secondary\">B. \u696d\u754c\u306e\u901a\u79f0<\/h4>\n <div class=\"space-y-4\">\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"small\"><h5 class=\"font-bold\">2t \/ 3t \u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">\u300c\u5c0f\u578b\u300d\u306e\u4ee3\u8868\u683c<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"medium\"><h5 class=\"font-bold\">4t \u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">\u6700\u3082\u4e00\u822c\u7684\u3060\u304c\u3001\u6700\u3082\u8907\u96d1<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"large\"><h5 class=\"font-bold\">10t \u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">\u9577\u8ddd\u96e2\u8f38\u9001\u306e\u4e3b\u529b<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"classification-column\">\n <h4 class=\"font-bold text-lg text-center mb-4 text-secondary\">C. \u904b\u8ee2\u514d\u8a31<\/h4>\n <div class=\"space-y-4\">\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"small\"><h5 class=\"font-bold\">\u6e96\u4e2d\u578b\u514d\u8a31<\/h5><p class=\"text-sm\">GVW 7.5t\u672a\u6e80, \u7a4d\u8f09\u91cf 4.5t\u672a\u6e80<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"medium\"><h5 class=\"font-bold\">\u4e2d\u578b\u514d\u8a31<\/h5><p class=\"text-sm\">GVW 11t\u672a\u6e80, \u7a4d\u8f09\u91cf 6.5t\u672a\u6e80<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"large\"><h5 class=\"font-bold\">\u5927\u578b\u514d\u8a31<\/h5><p class=\"text-sm\">GVW 11t\u4ee5\u4e0a, \u7a4d\u8f09\u91cf 6.5t\u4ee5\u4e0a<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8\" id=\"section-bodytypes\">\n <h3 class=\"text-2xl font-bold text-primary mb-2\">\u2462 \u67b6\u88c5\u306e\u7a2e\u985e\u3068\u7279\u5fb4<\/h3>\n <p class=\"text-gray-600 mb-6\">\n \u30c8\u30e9\u30c3\u30af\u306e\u6a5f\u80fd\u306f\u8377\u53f0\u306e\u5f62\u72b6\uff08\u67b6\u88c5\uff09\u306b\u3088\u3063\u3066\u6c7a\u307e\u308a\u307e\u3059\u3002\u7a4d\u8f09\u91cf\u3068\u4f5c\u696d\u52b9\u7387\u306f\u30c8\u30ec\u30fc\u30c9\u30aa\u30d5\u306e\u95a2\u4fc2\u306b\u3042\u308a\u307e\u3059\u3002\n <\/p>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u5e73\u30dc\u30c7\u30a3<\/h4><p class=\"text-sm\">\u6700\u3082\u8efd\u91cf\u3067\u7a4d\u8f09\u91cf\u3092\u6700\u5927\u5316\u3067\u304d\u307e\u3059\u304c\u3001\u5929\u5019\u306e\u5f71\u97ff\u3092\u53d7\u3051\u3084\u3059\u304f\u3001\u8377\u7269\u306e\u56fa\u5b9a\u306b\u624b\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u30a2\u30eb\u30df\u30d0\u30f3<\/h4><p class=\"text-sm\">\u5929\u5019\u3084\u76d7\u96e3\u304b\u3089\u8377\u7269\u3092\u5b88\u308a\u307e\u3059\u3002\u6c4e\u7528\u6027\u304c\u9ad8\u3044\u3067\u3059\u304c\u3001\u5e73\u30dc\u30c7\u30a3\u3088\u308a\u91cd\u304f\u3001\u8377\u5f79\u306f\u5f8c\u90e8\u304b\u3089\u306e\u307f\u3067\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u30a6\u30a3\u30f3\u30b0<\/h4><p class=\"text-sm\">\u5074\u9762\u304c\u7ffc\u306e\u3088\u3046\u306b\u958b\u304d\u3001\u30d5\u30a9\u30fc\u30af\u30ea\u30d5\u30c8\u3067\u306e\u8377\u5f79\u52b9\u7387\u304c\u5287\u7684\u306b\u5411\u4e0a\u3002\u30d1\u30ec\u30c3\u30c8\u8f38\u9001\u306e\u4e3b\u6d41\u3067\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u51b7\u51cd\u51b7\u8535\u8eca<\/h4><p class=\"text-sm\">\u6e29\u5ea6\u7ba1\u7406\u304c\u53ef\u80fd\u3067\u30b3\u30fc\u30eb\u30c9\u30c1\u30a7\u30fc\u30f3\u306b\u4e0d\u53ef\u6b20\u3002\u51b7\u51cd\u6a5f\u304c\u91cd\u304f\u3001\u7a4d\u8f09\u91cf\u304c\u5927\u5e45\u306b\u6e1b\u5c11\u3057\u307e\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u30af\u30ec\u30fc\u30f3\u4ed8\u304d<\/h4><p class=\"text-sm\">\u91cd\u91cf\u7269\u306e\u81ea\u529b\u3067\u306e\u7a4d\u307f\u964d\u308d\u3057\u304c\u53ef\u80fd\u3002\u30af\u30ec\u30fc\u30f3\u81ea\u4f53\u304c\u91cd\u3044\u305f\u3081\u3001\u7a4d\u8f09\u91cf\u304c\u5927\u304d\u304f\u5236\u7d04\u3055\u308c\u307e\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u30bf\u30f3\u30af\u30ed\u30fc\u30ea\u30fc<\/h4><p class=\"text-sm\">\u6db2\u4f53\u3084\u6c17\u4f53\u3092\u5c02\u9580\u306b\u8f38\u9001\u3002\u7528\u9014\u306f\u9650\u5b9a\u3055\u308c\u307e\u3059\u304c\u3001\u5b89\u5168\u306a\u5927\u91cf\u8f38\u9001\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p><\/div>\n <\/div>\n <\/div>\n\n <\/main>\n \n <footer class=\"bg-primary text-white mt-12 py-6\">\n <div class=\"container mx-auto text-center px-4\">\n <p>© 2024 \u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30c8\u30e9\u30c3\u30af\u7a4d\u8f09\u30ac\u30a4\u30c9.<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n \n const truckSpecData = {\n light: {\n name: '\u8efd\u8ca8\u7269\uff08\u30d0\u30f3\uff09',\n payload: '350kg\u307e\u3067',\n dimensions: '\u9577\u3055180cm \u00d7 \u5e45130cm \u00d7 \u9ad8\u3055120cm',\n pallets: { rows: 0, cols: 0, total: 0 },\n notes: '\u30d1\u30ec\u30c3\u30c8\u5229\u7528\u306f\u4e00\u822c\u7684\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u6bb5\u30dc\u30fc\u30eb(\u5c0f)\u306a\u3089\u7d0446\u500b\u3001\u6a5f\u5185\u6301\u8fbc\u30b5\u30a4\u30ba\u306e\u30b9\u30fc\u30c4\u30b1\u30fc\u30b9\u306a\u3089\u7d0435\u500b\u7a4d\u8f09\u53ef\u80fd\u3067\u3059\u3002'\n },\n '2t': {\n name: '2t\u8eca\uff08\u6a19\u6e96\u30ed\u30f3\u30b0\uff09',\n payload: '2,000kg\u307e\u3067',\n dimensions: '\u9577\u3055430cm \u00d7 \u5e45175cm \u00d7 \u9ad8\u3055200cm',\n pallets: { rows: 3, cols: 1, total: 3 },\n notes: '\u6a19\u6e96\u7684\u306a1.1m\u56db\u65b9\u306e\u30d1\u30ec\u30c3\u30c8\u3092\u7e26\u306b3\u679a\u7a4d\u8f09\u3067\u304d\u307e\u3059\u3002'\n },\n '4t': {\n name: '4t\u8eca\uff08\u6a19\u6e96\u30ef\u30a4\u30c9\uff09',\n payload: '2,500kg\u307e\u3067',\n dimensions: '\u9577\u3055620cm \u00d7 \u5e45210cm \u00d7 \u9ad8\u3055230cm',\n pallets: { rows: 5, cols: 2, total: 10 },\n notes: '\u8377\u53f0\u306e\u5e45\u304c\u5e83\u3044\u305f\u3081\u3001\u30d1\u30ec\u30c3\u30c8\u3092\u6a2a\u306b2\u679a\u4e26\u3079\u30665\u5217\u3001\u5408\u8a0810\u679a\u7a4d\u8f09\u53ef\u80fd\u3067\u3059\u3002'\n },\n '10t': {\n name: '10t\u8eca\uff08\u6a19\u6e96\u30a6\u30a3\u30f3\u30b0\uff09',\n payload: '9,000kg\u307e\u3067',\n dimensions: '\u9577\u3055900cm \u00d7 \u5e45240cm \u00d7 \u9ad8\u3055250cm',\n pallets: { rows: 8, cols: 2, total: 16 },\n notes: '\u9577\u8ddd\u96e2\u8f38\u9001\u306e\u4e3b\u529b\u3002\u30d1\u30ec\u30c3\u30c8\u3092\u6a2a\u306b2\u679a\u4e26\u3079\u30668\u5217\u3001\u5408\u8a0816\u679a\u306e\u5927\u91cf\u8f38\u9001\u304c\u53ef\u80fd\u3067\u3059\u3002'\n }\n };\n\n const infoPanel = document.getElementById('truck-info-panel');\n const visualizer = document.getElementById('pallet-visualizer');\n const tabs = document.querySelectorAll('.cargo-tab');\n\n function updateSimulator(truckKey) {\n const data = truckSpecData[truckKey];\n if (!data) return;\n\n infoPanel.innerHTML = `\n <h4 class=\"text-2xl font-bold text-primary mb-4\">${data.name}<\/h4>\n <div class=\"space-y-3 text-lg\">\n <p><strong class=\"text-secondary w-28 inline-block\">\u6700\u5927\u7a4d\u8f09\u91cf:<\/strong> ${data.payload}<\/p>\n <p><strong class=\"text-secondary w-28 inline-block\">\u8377\u53f0\u5185\u5bf8:<\/strong> ${data.dimensions}<\/p>\n <p><strong class=\"text-secondary w-28 inline-block\">\u30d1\u30ec\u30c3\u30c8\u6570:<\/strong> ${data.pallets.total > 0 ? `${data.pallets.total}\u679a` : '\u5229\u7528\u4e0d\u53ef'}<\/p>\n <\/div>\n <div class=\"mt-6 p-4 bg-accent rounded-lg\">\n <p class=\"font-medium text-primary\">\ud83d\udca1 ${data.notes}<\/p>\n <\/div>\n `;\n\n visualizer.innerHTML = '';\n if (data.pallets.total > 0) {\n const bed = document.createElement('div');\n bed.className = 'truck-bed w-full h-full';\n bed.style.gridTemplateColumns = `repeat(${data.pallets.cols}, 1fr)`;\n bed.style.gridTemplateRows = `repeat(${data.pallets.rows}, 1fr)`;\n \n for (let i = 0; i < data.pallets.total; i++) {\n const pallet = document.createElement('div');\n pallet.className = 'pallet';\n pallet.textContent = `${i + 1}`;\n bed.appendChild(pallet);\n }\n visualizer.appendChild(bed);\n } else {\n visualizer.innerHTML = `<div class=\"flex items-center justify-center h-full bg-gray-100 rounded-lg text-gray-500\">\u30d1\u30ec\u30c3\u30c8\u7a4d\u8f09\u306e\u8868\u793a\u306f\u3042\u308a\u307e\u305b\u3093<\/div>`;\n }\n }\n\n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.classList.remove('active'));\n tab.classList.add('active');\n const truckKey = tab.dataset.truck;\n updateSimulator(truckKey);\n });\n });\n\n updateSimulator('4t');\n\n const classificationColumns = document.querySelectorAll('.classification-column');\n classificationColumns.forEach(column => {\n column.addEventListener('mouseover', (e) => {\n const card = e.target.closest('.interactive-card');\n if (card) {\n const group = card.dataset.group;\n document.querySelectorAll('.interactive-card').forEach(c => c.classList.remove('highlight'));\n document.querySelectorAll(`.interactive-card[data-group=\"${group}\"]`).forEach(c => c.classList.add('highlight'));\n }\n });\n column.addEventListener('mouseout', (e) => {\n document.querySelectorAll('.interactive-card').forEach(c => c.classList.remove('highlight'));\n });\n });\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u65e5\u672c\u306e\u30c8\u30e9\u30c3\u30af\u5206\u985e\uff1a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u7a4d\u8f09\u30ac\u30a4\u30c9 \ud83d\ude9a \u65e5\u672c\u306e\u30c8\u30e9\u30c3\u30af\u7a4d\u8f09\u30ac\u30a4\u30c9 \u7a4d\u8f09\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc \u5206\u985e\u306e\u57fa\u790e \u67b6\u88c5\u306e\u7a2e\u985e \u3069\u306e\u30c8\u30e9\u30c3\u30af\u306b\u3001\u3069\u308c\u3060\u3051\u7a4d\u3081\u308b\uff1f \u30c8\u30e9\u30c3\u30af\u306e\u300c\u30c8\u30f3\u6570\u300d\u3060\u3051\u3067\u306f\u3001\u5b9f\u969b\u306e\u7a4d\u8f09\u80fd\u529b\u306f\u5206\u304b\u308a\u307e\u305b\u3093\u3002\u3053\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-1323","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1323","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=1323"}],"version-history":[{"count":1,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1323\/revisions"}],"predecessor-version":[{"id":1324,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1323\/revisions\/1324"}],"wp:attachment":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1323,"date":"2025-07-02T16:41:07","date_gmt":"2025-07-02T07:41:07","guid":{"rendered":"https:\/\/plus-fwd.com\/?page_id=1323"},"modified":"2025-07-02T16:41:07","modified_gmt":"2025-07-02T07:41:07","slug":"%e3%83%88%e3%83%a9%e3%83%83%e3%82%af%e3%82%b5%e3%82%a4%e3%82%ba","status":"publish","type":"page","link":"https:\/\/plus-fwd.com\/?page_id=1323","title":{"rendered":"\u30c8\u30e9\u30c3\u30af\u30b5\u30a4\u30ba"},"content":{"rendered":"\n\n\n\n \n \n \u65e5\u672c\u306e\u30c8\u30e9\u30c3\u30af\u5206\u985e\uff1a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u7a4d\u8f09\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 \n <style>\n body { font-family: 'Noto Sans JP', sans-serif; background-color: #F7F7F7; color: #333; }\n .bg-primary { background-color: #003C43; }\n .text-primary { color: #003C43; }\n .bg-secondary { background-color: #135D66; }\n .text-secondary { color: #135D66; }\n .bg-accent { background-color: #E3FEF7; }\n .text-accent { color: #E3FEF7; }\n .border-accent { border-color: #77B0AA; }\n .interactive-card { transition: all 0.3s ease; border: 2px solid transparent; }\n .interactive-card.highlight { border-color: #135D66; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateY(-4px); }\n html { scroll-behavior: smooth; }\n .cargo-tab { transition: all 0.3s ease; border-bottom: 4px solid transparent; }\n .cargo-tab.active { border-bottom-color: #135D66; color: #003C43; font-weight: 700; }\n .pallet { background-color: #77B0AA; border: 1px solid #135D66; color: white; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; }\n .truck-bed { background-color: #E3FEF7; border: 2px dashed #77B0AA; display: grid; gap: 4px; padding: 4px; }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n <header class=\"bg-primary text-white shadow-md sticky top-0 z-50\">\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <h1 class=\"text-xl md:text-2xl font-bold\">\ud83d\ude9a \u65e5\u672c\u306e\u30c8\u30e9\u30c3\u30af\u7a4d\u8f09\u30ac\u30a4\u30c9<\/h1>\n <nav class=\"hidden md:flex space-x-4\">\n <a href=\"#section-simulator\" class=\"nav-link hover:text-accent transition\">\u7a4d\u8f09\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc<\/a>\n <a href=\"#section-unscrambler\" class=\"nav-link hover:text-accent transition\">\u5206\u985e\u306e\u57fa\u790e<\/a>\n <a href=\"#section-bodytypes\" class=\"nav-link hover:text-accent transition\">\u67b6\u88c5\u306e\u7a2e\u985e<\/a>\n <\/nav>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"container mx-auto p-4 sm:p-6 lg:p-8\">\n\n <section id=\"section-intro\" class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-primary mb-4\">\u3069\u306e\u30c8\u30e9\u30c3\u30af\u306b\u3001\u3069\u308c\u3060\u3051\u7a4d\u3081\u308b\uff1f<\/h2>\n <p class=\"max-w-3xl mx-auto text-lg text-gray-700\">\n \u30c8\u30e9\u30c3\u30af\u306e\u300c\u30c8\u30f3\u6570\u300d\u3060\u3051\u3067\u306f\u3001\u5b9f\u969b\u306e\u7a4d\u8f09\u80fd\u529b\u306f\u5206\u304b\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc\u3092\u4f7f\u3048\u3070\u3001\u4e3b\u8981\u306a\u30c8\u30e9\u30c3\u30af\u30af\u30e9\u30b9\u306e\u6700\u5927\u7a4d\u8f09\u91cd\u91cf\u3001\u8377\u53f0\u30b5\u30a4\u30ba\u3001\u305d\u3057\u3066\u6a19\u6e96\u7684\u306a\u30d1\u30ec\u30c3\u30c8\u304c\u4f55\u679a\u7a4d\u3081\u308b\u304b\u3092\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306b\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002\n <\/p>\n <\/section>\n\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8 mb-12\" id=\"section-simulator\">\n <h3 class=\"text-2xl font-bold text-primary mb-2\">\u2460 \u5b9f\u8df5\uff01\u7a4d\u8f09\u5bb9\u91cf\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc<\/h3>\n <p class=\"text-gray-600 mb-6\">\n \u4e0b\u306e\u30bf\u30d6\u304b\u3089\u30c8\u30e9\u30c3\u30af\u306e\u7a2e\u985e\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u8377\u53f0\u306e\u5bf8\u6cd5\u3084\u7a4d\u3081\u308b\u30d1\u30ec\u30c3\u30c8\u306e\u6570\u304c\u3001\u53f3\u5074\u306b\u8996\u899a\u7684\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002\n <\/p>\n \n <div class=\"border-b border-gray-200 mb-6\">\n <nav class=\"-mb-px flex space-x-6\" aria-label=\"Tabs\">\n <button class=\"cargo-tab whitespace-nowrap py-4 px-1 text-lg font-medium text-gray-500\" data-truck=\"light\">\u8efd\u8ca8\u7269<\/button>\n <button class=\"cargo-tab whitespace-nowrap py-4 px-1 text-lg font-medium text-gray-500\" data-truck=\"2t\">2t\u8eca<\/button>\n <button class=\"cargo-tab whitespace-nowrap py-4 px-1 text-lg font-medium text-gray-500 active\" data-truck=\"4t\">4t\u8eca<\/button>\n <button class=\"cargo-tab whitespace-nowrap py-4 px-1 text-lg font-medium text-gray-500\" data-truck=\"10t\">10t\u8eca<\/button>\n <\/nav>\n <\/div>\n\n <div class=\"grid lg:grid-cols-2 gap-8 items-start\">\n <div id=\"truck-info-panel\">\n \n <\/div>\n <div class=\"min-h-[300px] lg:min-h-[400px]\">\n <h4 class=\"font-bold text-secondary text-center mb-2\">\u30d1\u30ec\u30c3\u30c8\u7a4d\u8f09\u30ec\u30a4\u30a2\u30a6\u30c8 (1.1m x 1.1m)<\/h4>\n <div id=\"pallet-visualizer\" class=\"w-full h-full aspect-w-1 aspect-h-1\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8 mb-12\" id=\"section-unscrambler\">\n <h3 class=\"text-2xl font-bold text-primary mb-2\">\u2461 \u5206\u985e\u306e\u57fa\u790e\u77e5\u8b58\uff1a3\u3064\u306e\u8996\u70b9<\/h3>\n <p class=\"text-gray-600 mb-6\">\n \u30c8\u30e9\u30c3\u30af\u3092\u7406\u89e3\u3059\u308b\u306b\u306f\u300c\u8eca\u4e21\u306e\u6cd5\u5f8b\u300d\u300c\u696d\u754c\u306e\u901a\u79f0\u300d\u300c\u904b\u8ee2\u514d\u8a31\u300d\u306e3\u3064\u306e\u8996\u70b9\u304c\u5fc5\u8981\u3067\u3059\u3002\u30ab\u30fc\u30c9\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u308b\u3068\u3001\u5404\u5206\u985e\u304c\u3069\u306e\u3088\u3046\u306b\u95a2\u9023\u3057\u3066\u3044\u308b\u304b\u304c\u308f\u304b\u308a\u307e\u3059\u3002\n <\/p>\n <div class=\"grid md:grid-cols-3 gap-6\">\n <div class=\"classification-column\">\n <h4 class=\"font-bold text-lg text-center mb-4 text-secondary\">A. \u8eca\u4e21\u306e\u6cd5\u5f8b<\/h4>\n <div class=\"space-y-4\">\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"small\"><h5 class=\"font-bold\">\u5c0f\u578b\u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">GVW 5t\u672a\u6e80, \u7a4d\u8f09\u91cf 3t\u672a\u6e80<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"medium\"><h5 class=\"font-bold\">\u4e2d\u578b\u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">GVW 5t~11t\u672a\u6e80, \u7a4d\u8f09\u91cf 6.5t\u672a\u6e80<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"large\"><h5 class=\"font-bold\">\u5927\u578b\u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">GVW 11t\u4ee5\u4e0a, \u7a4d\u8f09\u91cf 6.5t\u4ee5\u4e0a<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"classification-column\">\n <h4 class=\"font-bold text-lg text-center mb-4 text-secondary\">B. \u696d\u754c\u306e\u901a\u79f0<\/h4>\n <div class=\"space-y-4\">\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"small\"><h5 class=\"font-bold\">2t \/ 3t \u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">\u300c\u5c0f\u578b\u300d\u306e\u4ee3\u8868\u683c<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"medium\"><h5 class=\"font-bold\">4t \u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">\u6700\u3082\u4e00\u822c\u7684\u3060\u304c\u3001\u6700\u3082\u8907\u96d1<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"large\"><h5 class=\"font-bold\">10t \u30c8\u30e9\u30c3\u30af<\/h5><p class=\"text-sm\">\u9577\u8ddd\u96e2\u8f38\u9001\u306e\u4e3b\u529b<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"classification-column\">\n <h4 class=\"font-bold text-lg text-center mb-4 text-secondary\">C. \u904b\u8ee2\u514d\u8a31<\/h4>\n <div class=\"space-y-4\">\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"small\"><h5 class=\"font-bold\">\u6e96\u4e2d\u578b\u514d\u8a31<\/h5><p class=\"text-sm\">GVW 7.5t\u672a\u6e80, \u7a4d\u8f09\u91cf 4.5t\u672a\u6e80<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"medium\"><h5 class=\"font-bold\">\u4e2d\u578b\u514d\u8a31<\/h5><p class=\"text-sm\">GVW 11t\u672a\u6e80, \u7a4d\u8f09\u91cf 6.5t\u672a\u6e80<\/p><\/div>\n <div class=\"interactive-card bg-accent p-4 rounded-lg cursor-pointer\" data-group=\"large\"><h5 class=\"font-bold\">\u5927\u578b\u514d\u8a31<\/h5><p class=\"text-sm\">GVW 11t\u4ee5\u4e0a, \u7a4d\u8f09\u91cf 6.5t\u4ee5\u4e0a<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8\" id=\"section-bodytypes\">\n <h3 class=\"text-2xl font-bold text-primary mb-2\">\u2462 \u67b6\u88c5\u306e\u7a2e\u985e\u3068\u7279\u5fb4<\/h3>\n <p class=\"text-gray-600 mb-6\">\n \u30c8\u30e9\u30c3\u30af\u306e\u6a5f\u80fd\u306f\u8377\u53f0\u306e\u5f62\u72b6\uff08\u67b6\u88c5\uff09\u306b\u3088\u3063\u3066\u6c7a\u307e\u308a\u307e\u3059\u3002\u7a4d\u8f09\u91cf\u3068\u4f5c\u696d\u52b9\u7387\u306f\u30c8\u30ec\u30fc\u30c9\u30aa\u30d5\u306e\u95a2\u4fc2\u306b\u3042\u308a\u307e\u3059\u3002\n <\/p>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u5e73\u30dc\u30c7\u30a3<\/h4><p class=\"text-sm\">\u6700\u3082\u8efd\u91cf\u3067\u7a4d\u8f09\u91cf\u3092\u6700\u5927\u5316\u3067\u304d\u307e\u3059\u304c\u3001\u5929\u5019\u306e\u5f71\u97ff\u3092\u53d7\u3051\u3084\u3059\u304f\u3001\u8377\u7269\u306e\u56fa\u5b9a\u306b\u624b\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u30a2\u30eb\u30df\u30d0\u30f3<\/h4><p class=\"text-sm\">\u5929\u5019\u3084\u76d7\u96e3\u304b\u3089\u8377\u7269\u3092\u5b88\u308a\u307e\u3059\u3002\u6c4e\u7528\u6027\u304c\u9ad8\u3044\u3067\u3059\u304c\u3001\u5e73\u30dc\u30c7\u30a3\u3088\u308a\u91cd\u304f\u3001\u8377\u5f79\u306f\u5f8c\u90e8\u304b\u3089\u306e\u307f\u3067\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u30a6\u30a3\u30f3\u30b0<\/h4><p class=\"text-sm\">\u5074\u9762\u304c\u7ffc\u306e\u3088\u3046\u306b\u958b\u304d\u3001\u30d5\u30a9\u30fc\u30af\u30ea\u30d5\u30c8\u3067\u306e\u8377\u5f79\u52b9\u7387\u304c\u5287\u7684\u306b\u5411\u4e0a\u3002\u30d1\u30ec\u30c3\u30c8\u8f38\u9001\u306e\u4e3b\u6d41\u3067\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u51b7\u51cd\u51b7\u8535\u8eca<\/h4><p class=\"text-sm\">\u6e29\u5ea6\u7ba1\u7406\u304c\u53ef\u80fd\u3067\u30b3\u30fc\u30eb\u30c9\u30c1\u30a7\u30fc\u30f3\u306b\u4e0d\u53ef\u6b20\u3002\u51b7\u51cd\u6a5f\u304c\u91cd\u304f\u3001\u7a4d\u8f09\u91cf\u304c\u5927\u5e45\u306b\u6e1b\u5c11\u3057\u307e\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u30af\u30ec\u30fc\u30f3\u4ed8\u304d<\/h4><p class=\"text-sm\">\u91cd\u91cf\u7269\u306e\u81ea\u529b\u3067\u306e\u7a4d\u307f\u964d\u308d\u3057\u304c\u53ef\u80fd\u3002\u30af\u30ec\u30fc\u30f3\u81ea\u4f53\u304c\u91cd\u3044\u305f\u3081\u3001\u7a4d\u8f09\u91cf\u304c\u5927\u304d\u304f\u5236\u7d04\u3055\u308c\u307e\u3059\u3002<\/p><\/div>\n <div class=\"p-4 border-l-4 border-accent bg-gray-50 rounded\"><h4 class=\"font-bold\">\u30bf\u30f3\u30af\u30ed\u30fc\u30ea\u30fc<\/h4><p class=\"text-sm\">\u6db2\u4f53\u3084\u6c17\u4f53\u3092\u5c02\u9580\u306b\u8f38\u9001\u3002\u7528\u9014\u306f\u9650\u5b9a\u3055\u308c\u307e\u3059\u304c\u3001\u5b89\u5168\u306a\u5927\u91cf\u8f38\u9001\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p><\/div>\n <\/div>\n <\/div>\n\n <\/main>\n \n <footer class=\"bg-primary text-white mt-12 py-6\">\n <div class=\"container mx-auto text-center px-4\">\n <p>© 2024 \u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30fb\u30c8\u30e9\u30c3\u30af\u7a4d\u8f09\u30ac\u30a4\u30c9.<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n \n const truckSpecData = {\n light: {\n name: '\u8efd\u8ca8\u7269\uff08\u30d0\u30f3\uff09',\n payload: '350kg\u307e\u3067',\n dimensions: '\u9577\u3055180cm \u00d7 \u5e45130cm \u00d7 \u9ad8\u3055120cm',\n pallets: { rows: 0, cols: 0, total: 0 },\n notes: '\u30d1\u30ec\u30c3\u30c8\u5229\u7528\u306f\u4e00\u822c\u7684\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u6bb5\u30dc\u30fc\u30eb(\u5c0f)\u306a\u3089\u7d0446\u500b\u3001\u6a5f\u5185\u6301\u8fbc\u30b5\u30a4\u30ba\u306e\u30b9\u30fc\u30c4\u30b1\u30fc\u30b9\u306a\u3089\u7d0435\u500b\u7a4d\u8f09\u53ef\u80fd\u3067\u3059\u3002'\n },\n '2t': {\n name: '2t\u8eca\uff08\u6a19\u6e96\u30ed\u30f3\u30b0\uff09',\n payload: '2,000kg\u307e\u3067',\n dimensions: '\u9577\u3055430cm \u00d7 \u5e45175cm \u00d7 \u9ad8\u3055200cm',\n pallets: { rows: 3, cols: 1, total: 3 },\n notes: '\u6a19\u6e96\u7684\u306a1.1m\u56db\u65b9\u306e\u30d1\u30ec\u30c3\u30c8\u3092\u7e26\u306b3\u679a\u7a4d\u8f09\u3067\u304d\u307e\u3059\u3002'\n },\n '4t': {\n name: '4t\u8eca\uff08\u6a19\u6e96\u30ef\u30a4\u30c9\uff09',\n payload: '2,500kg\u307e\u3067',\n dimensions: '\u9577\u3055620cm \u00d7 \u5e45210cm \u00d7 \u9ad8\u3055230cm',\n pallets: { rows: 5, cols: 2, total: 10 },\n notes: '\u8377\u53f0\u306e\u5e45\u304c\u5e83\u3044\u305f\u3081\u3001\u30d1\u30ec\u30c3\u30c8\u3092\u6a2a\u306b2\u679a\u4e26\u3079\u30665\u5217\u3001\u5408\u8a0810\u679a\u7a4d\u8f09\u53ef\u80fd\u3067\u3059\u3002'\n },\n '10t': {\n name: '10t\u8eca\uff08\u6a19\u6e96\u30a6\u30a3\u30f3\u30b0\uff09',\n payload: '9,000kg\u307e\u3067',\n dimensions: '\u9577\u3055900cm \u00d7 \u5e45240cm \u00d7 \u9ad8\u3055250cm',\n pallets: { rows: 8, cols: 2, total: 16 },\n notes: '\u9577\u8ddd\u96e2\u8f38\u9001\u306e\u4e3b\u529b\u3002\u30d1\u30ec\u30c3\u30c8\u3092\u6a2a\u306b2\u679a\u4e26\u3079\u30668\u5217\u3001\u5408\u8a0816\u679a\u306e\u5927\u91cf\u8f38\u9001\u304c\u53ef\u80fd\u3067\u3059\u3002'\n }\n };\n\n const infoPanel = document.getElementById('truck-info-panel');\n const visualizer = document.getElementById('pallet-visualizer');\n const tabs = document.querySelectorAll('.cargo-tab');\n\n function updateSimulator(truckKey) {\n const data = truckSpecData[truckKey];\n if (!data) return;\n\n infoPanel.innerHTML = `\n <h4 class=\"text-2xl font-bold text-primary mb-4\">${data.name}<\/h4>\n <div class=\"space-y-3 text-lg\">\n <p><strong class=\"text-secondary w-28 inline-block\">\u6700\u5927\u7a4d\u8f09\u91cf:<\/strong> ${data.payload}<\/p>\n <p><strong class=\"text-secondary w-28 inline-block\">\u8377\u53f0\u5185\u5bf8:<\/strong> ${data.dimensions}<\/p>\n <p><strong class=\"text-secondary w-28 inline-block\">\u30d1\u30ec\u30c3\u30c8\u6570:<\/strong> ${data.pallets.total > 0 ? `${data.pallets.total}\u679a` : '\u5229\u7528\u4e0d\u53ef'}<\/p>\n <\/div>\n <div class=\"mt-6 p-4 bg-accent rounded-lg\">\n <p class=\"font-medium text-primary\">\ud83d\udca1 ${data.notes}<\/p>\n <\/div>\n `;\n\n visualizer.innerHTML = '';\n if (data.pallets.total > 0) {\n const bed = document.createElement('div');\n bed.className = 'truck-bed w-full h-full';\n bed.style.gridTemplateColumns = `repeat(${data.pallets.cols}, 1fr)`;\n bed.style.gridTemplateRows = `repeat(${data.pallets.rows}, 1fr)`;\n \n for (let i = 0; i < data.pallets.total; i++) {\n const pallet = document.createElement('div');\n pallet.className = 'pallet';\n pallet.textContent = `${i + 1}`;\n bed.appendChild(pallet);\n }\n visualizer.appendChild(bed);\n } else {\n visualizer.innerHTML = `<div class=\"flex items-center justify-center h-full bg-gray-100 rounded-lg text-gray-500\">\u30d1\u30ec\u30c3\u30c8\u7a4d\u8f09\u306e\u8868\u793a\u306f\u3042\u308a\u307e\u305b\u3093<\/div>`;\n }\n }\n\n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.classList.remove('active'));\n tab.classList.add('active');\n const truckKey = tab.dataset.truck;\n updateSimulator(truckKey);\n });\n });\n\n updateSimulator('4t');\n\n const classificationColumns = document.querySelectorAll('.classification-column');\n classificationColumns.forEach(column => {\n column.addEventListener('mouseover', (e) => {\n const card = e.target.closest('.interactive-card');\n if (card) {\n const group = card.dataset.group;\n document.querySelectorAll('.interactive-card').forEach(c => c.classList.remove('highlight'));\n document.querySelectorAll(`.interactive-card[data-group=\"${group}\"]`).forEach(c => c.classList.add('highlight'));\n }\n });\n column.addEventListener('mouseout', (e) => {\n document.querySelectorAll('.interactive-card').forEach(c => c.classList.remove('highlight'));\n });\n });\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u65e5\u672c\u306e\u30c8\u30e9\u30c3\u30af\u5206\u985e\uff1a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u7a4d\u8f09\u30ac\u30a4\u30c9 \ud83d\ude9a \u65e5\u672c\u306e\u30c8\u30e9\u30c3\u30af\u7a4d\u8f09\u30ac\u30a4\u30c9 \u7a4d\u8f09\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc \u5206\u985e\u306e\u57fa\u790e \u67b6\u88c5\u306e\u7a2e\u985e \u3069\u306e\u30c8\u30e9\u30c3\u30af\u306b\u3001\u3069\u308c\u3060\u3051\u7a4d\u3081\u308b\uff1f \u30c8\u30e9\u30c3\u30af\u306e\u300c\u30c8\u30f3\u6570\u300d\u3060\u3051\u3067\u306f\u3001\u5b9f\u969b\u306e\u7a4d\u8f09\u80fd\u529b\u306f\u5206\u304b\u308a\u307e\u305b\u3093\u3002\u3053\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-1323","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1323","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=1323"}],"version-history":[{"count":1,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1323\/revisions"}],"predecessor-version":[{"id":1324,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1323\/revisions\/1324"}],"wp:attachment":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}