\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u56fd\u969b\u7269\u6d41\u30d5\u30ed\u30fc | \u30d5\u30ec\u30a4\u30c8\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u696d\u52d9\u89e3\u8aac<\/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@300;400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n #flow-page-wrapper {\n font-family: 'Noto Sans JP', sans-serif;\n background-color: #f8f9fa;\n color: #343a40;\n }\n #flow-page-wrapper .tab-button.active {\n border-color: #3b82f6;\n color: #3b82f6;\n font-weight: 600;\n }\n #flow-page-wrapper .flow-step {\n transition: all 0.3s ease;\n cursor: pointer;\n }\n #flow-page-wrapper .flow-step:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n #flow-page-wrapper .flow-arrow {\n font-size: 2rem;\n color: #9ca3af;\n }\n #flow-page-wrapper .modal {\n display: none;\n transition: opacity 0.3s ease;\n }\n #flow-page-wrapper .modal.show {\n display: flex;\n }\n #flow-page-wrapper .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n #flow-page-wrapper .chart-container {\n height: 350px;\n }\n }\n #flow-page-wrapper .three-flows-item:hover .three-flows-icon {\n transform: scale(1.1);\n color: #3b82f6;\n }\n #flow-page-wrapper .three-flows-icon {\n transition: all 0.3s ease;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"flow-page-wrapper\">\n <header class=\"bg-white shadow-sm sticky top-0 z-40\">\n <nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\n <div class=\"text-xl font-bold text-gray-800\">\n <span class=\"text-blue-600\">\u56fd\u969b\u7269\u6d41<\/span>\u306e\u7f85\u91dd\u76e4\n <\/div>\n <div class=\"hidden md:flex space-x-6\">\n <a href=\"#ecosystem\" class=\"text-gray-600 hover:text-blue-600\">\u30d7\u30ec\u30a4\u30e4\u30fc<\/a>\n <a href=\"#workflow\" class=\"text-gray-600 hover:text-blue-600\">\u696d\u52d9\u30d5\u30ed\u30fc<\/a>\n <a href=\"#choices\" class=\"text-gray-600 hover:text-blue-600\">\u6226\u7565\u7684\u9078\u629e<\/a>\n <a href=\"#three-flows\" class=\"text-gray-600 hover:text-blue-600\">\uff13\u3064\u306e\u6d41\u308c<\/a>\n <a href=\"#future\" class=\"text-gray-600 hover:text-blue-600\">\u672a\u6765\u306e\u59ff<\/a>\n <\/div>\n <\/nav>\n <\/header>\n\n <main>\n <section id=\"hero\" class=\"bg-white py-12 md:py-20\">\n <div class=\"container mx-auto px-6 text-center\">\n <h1 class=\"text-3xl md:text-5xl font-bold text-gray-800 mb-4\">\u3088\u3046\u3053\u305d\u3001\u56fd\u969b\u7269\u6d41\u306e\u4e16\u754c\u3078<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u30d3\u30b8\u30cd\u30b9\u306e\u751f\u547d\u7dda\u3067\u3042\u308b\u300c\u30d5\u30ec\u30a4\u30c8\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u300d\u306e\u8907\u96d1\u306a\u696d\u52d9\u3092\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306b\u89e3\u304d\u660e\u304b\u3059\u305f\u3081\u306e\u7f85\u91dd\u76e4\u3067\u3059\u3002\u5404\u30bb\u30af\u30b7\u30e7\u30f3\u3092\u63a2\u7d22\u3057\u3001\u30e2\u30ce\u304c\u56fd\u5883\u3092\u8d8a\u3048\u308b\u4ed5\u7d44\u307f\u3092\u5b66\u3073\u307e\u3057\u3087\u3046\u3002<\/p>\n <\/div>\n <\/section>\n\n <section id=\"ecosystem\" class=\"py-16\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u56fd\u969b\u7269\u6d41\u306e\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u56fd\u969b\u7269\u6d41\u306f\u3001\u591a\u69d8\u306a\u5c02\u9580\u5bb6\uff08\u30d7\u30ec\u30a4\u30e4\u30fc\uff09\u306e\u9023\u643a\u306b\u3088\u3063\u3066\u6210\u308a\u7acb\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-xl font-bold text-blue-600 mb-2\">\u30d5\u30ec\u30a4\u30c8\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc<\/h3>\n <p class=\"text-gray-700\">\u8f38\u9001\u306e\u300c\u5efa\u7bc9\u5bb6\u300d\u3002\u8f38\u9001\u624b\u6bb5\u3092\u6301\u305f\u305a\u3001\u8377\u4e3b\u306e\u4ee3\u7406\u4eba\u3068\u3057\u3066\u6700\u9069\u306a\u8f38\u9001\u30d7\u30e9\u30f3\u3092\u8a2d\u8a08\u30fb\u7ba1\u7406\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-xl font-bold text-blue-600 mb-2\">\u30ad\u30e3\u30ea\u30a2\uff08\u5b9f\u904b\u9001\u4eba\uff09<\/h3>\n <p class=\"text-gray-700\">\u8239\u8236\u3084\u822a\u7a7a\u6a5f\u3092\u4fdd\u6709\u3057\u3001\u5b9f\u969b\u306e\u8f38\u9001\u3092\u62c5\u3046\u8239\u4f1a\u793e\u3084\u822a\u7a7a\u4f1a\u793e\u3067\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-xl font-bold text-blue-600 mb-2\">\u901a\u95a2\u696d\u8005<\/h3>\n <p class=\"text-gray-700\">\u56fd\u5883\u306e\u300c\u756a\u4eba\u300d\u3002\u8f38\u51fa\u5165\u7533\u544a\u306a\u3069\u3001\u6cd5\u7684\u306a\u7a0e\u95a2\u624b\u7d9a\u304d\u3092\u5c02\u9580\u306b\u4ee3\u884c\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-xl font-bold text-blue-600 mb-2\">\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30bf\u30fc<\/h3>\n <p class=\"text-gray-700\">\u8f38\u9001\u3068\u624b\u914d\u3092\u300c\u7d71\u5408\u300d\u3057\u305f\u4e8b\u696d\u8005\u3002\u81ea\u793e\u306e\u822a\u7a7a\u6a5f\u7db2\u3067\u4e00\u8cab\u8f38\u9001\u3092\u63d0\u4f9b\u3057\u307e\u3059 (\u4f8b: FedEx, DHL)\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"workflow\" class=\"py-16 bg-white\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u696d\u52d9\u30d5\u30ed\u30fc\u63a2\u691c<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u8f38\u51fa\u3068\u8f38\u5165\u3001\u305d\u308c\u305e\u308c\u306e\u30d7\u30ed\u30bb\u30b9\u306f\u3069\u306e\u3088\u3046\u306b\u9032\u3080\u306e\u3067\u3057\u3087\u3046\u304b\uff1f\u4e0b\u306e\u30bf\u30d6\u3067\u5207\u308a\u66ff\u3048\u3001\u5404\u30b9\u30c6\u30c3\u30d7\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u8a73\u7d30\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n \n <div class=\"mb-8 border-b border-gray-200\">\n <nav class=\"flex justify-center -mb-px space-x-8\" aria-label=\"Tabs\">\n <button id=\"tab-export-btn\" class=\"tab-button active py-4 px-1 border-b-2 font-medium text-lg border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\">\n \u8f38\u51fa\u30d5\u30ed\u30fc\n <\/button>\n <button id=\"tab-import-btn\" class=\"tab-button py-4 px-1 border-b-2 font-medium text-lg border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\">\n \u8f38\u5165\u30d5\u30ed\u30fc\n <\/button>\n <\/nav>\n <\/div>\n\n <div id=\"tab-export-content\">\n <div class=\"flex flex-col items-center w-full max-w-md mx-auto\">\n <div class=\"flow-step bg-blue-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-1\"><span class=\"font-bold\">1. \u554f\u3044\u5408\u308f\u305b & \u898b\u7a4d<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-blue-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-2\"><span class=\"font-bold\">2. \u30d6\u30c3\u30ad\u30f3\u30b0<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-blue-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-3\"><span class=\"font-bold\">3. \u8ca8\u7269\u96c6\u8377 & \u66f8\u985e\u4f5c\u6210<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-green-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-4\"><span class=\"font-bold\">4. \u8f38\u51fa\u7533\u544a & \u8a31\u53ef<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-green-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-5\"><span class=\"font-bold\">5. \u8239\u7a4d\u307f & \u51fa\u767a<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-green-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-6\"><span class=\"font-bold\">6. B\/L\u767a\u884c & \u8f38\u9001\u7ba1\u7406<\/span><\/div>\n <\/div>\n <\/div>\n \n <div id=\"tab-import-content\" class=\"hidden\">\n <div class=\"flex flex-col items-center w-full max-w-md mx-auto\">\n <div class=\"flow-step bg-purple-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-1\"><span class=\"font-bold\">1. A\/N\u53d7\u9818 & \u66f8\u985e\u6e96\u5099<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-purple-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-2\"><span class=\"font-bold\">2. \u8377\u63da\u3052 & \u30c7\u30d0\u30f3\u30cb\u30f3\u30b0<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-purple-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-3\"><span class=\"font-bold\">3. \u8f38\u5165\u7533\u544a & \u7d0d\u7a0e<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-red-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-4\"><span class=\"font-bold\">4. \u8f38\u5165\u8a31\u53ef<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-red-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-5\"><span class=\"font-bold\">5. D\/O\u5165\u624b<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-red-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-6\"><span class=\"font-bold\">6. \u6700\u7d42\u914d\u9001<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"choices\" class=\"py-16\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u6226\u7565\u7684\u9078\u629e<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8377\u4e3b\u306e\u72b6\u6cc1\u306b\u5fdc\u3058\u3001\u6700\u9069\u306a\u8f38\u9001\u65b9\u6cd5\u3092\u63d0\u6848\u3057\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u4e3b\u8981\u306a\u9078\u629e\u80a2\u3092\u6bd4\u8f03\u3057\u307e\u3059\u3002<\/p>\n \n <div class=\"bg-white p-8 rounded-lg shadow-lg mb-12\">\n <h3 class=\"text-2xl font-bold text-center mb-6\">\u6d77\u4e0a\u8f38\u9001 vs \u822a\u7a7a\u8f38\u9001<\/h3>\n <div class=\"text-center mb-6\">\n <button id=\"sea-btn\" class=\"bg-blue-500 text-white px-4 py-2 rounded-l-md\">\u6d77\u4e0a\u8f38\u9001<\/button>\n <button id=\"air-btn\" class=\"bg-gray-300 text-gray-700 px-4 py-2 rounded-r-md\">\u822a\u7a7a\u8f38\u9001<\/button>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <div class=\"chart-container\">\n <canvas id=\"transportChart\"><\/canvas>\n <\/div>\n <\/div>\n <div id=\"transport-details\">\n <h4 class=\"text-xl font-bold mb-2 text-blue-700\">\u6d77\u4e0a\u8f38\u9001<\/h4>\n <p class=\"text-gray-700\">\u5727\u5012\u7684\u306a\u30b3\u30b9\u30c8\u52b9\u7387\u3068\u8f38\u9001\u80fd\u529b\u304c\u9b45\u529b\u3002\u5927\u91cf\u306e\u8ca8\u7269\u3084\u7dca\u6025\u6027\u306e\u306a\u3044\u5546\u54c1\u306e\u8f38\u9001\u306b\u6700\u9069\u3067\u3059\u304c\u3001\u8f38\u9001\u306b\u306f\u6570\u9031\u9593\u4ee5\u4e0a\u304b\u304b\u308a\u307e\u3059\u3002<\/p>\n <ul class=\"mt-4 space-y-2\">\n <li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u30b3\u30b9\u30c8\u304c\u4f4e\u3044<\/li>\n <li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u5927\u91cf\u30fb\u5927\u578b\u8ca8\u7269\u306b\u5bfe\u5fdc<\/li>\n <li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u30b9\u30d4\u30fc\u30c9\u304c\u9045\u3044<\/li>\n <li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u8ca8\u7269\u640d\u50b7\u30ea\u30b9\u30af\u304c\u6bd4\u8f03\u7684\u9ad8<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 gap-8\">\n <div class=\"bg-white p-8 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-6\">FCL vs LCL<\/h3>\n <p class=\"text-center text-gray-600 mb-6\">\u30b3\u30f3\u30c6\u30ca1\u672c\u3092\u8cb8\u3057\u5207\u308b\u304b(FCL)\u3001\u5c0f\u53e3\u8ca8\u7269\u3092\u6df7\u8f09\u3059\u308b\u304b(LCL)\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n <div class=\"grid grid-cols-2 gap-4 text-center\">\n <div>\n <h4 class=\"font-bold text-lg\">FCL (\u8cb8\u5207)<\/h4>\n <p class=\"text-sm text-gray-600\">\u4ed6\u8ca8\u7269\u306e\u5f71\u97ff\u3092\u53d7\u3051\u305a\u5b89\u5168\u30fb\u8fc5\u901f\u3002\u7269\u91cf\u304c\u591a\u3044\u5834\u5408\u306b\u6709\u5229\u3002<\/p>\n <\/div>\n <div>\n <h4 class=\"font-bold text-lg\">LCL (\u6df7\u8f09)<\/h4>\n <p class=\"text-sm text-gray-600\">\u5c0f\u53e3\u8ca8\u7269\u3092\u5b89\u4fa1\u306b\u8f38\u9001\u53ef\u80fd\u3002\u305f\u3060\u3057\u3001\u640d\u50b7\u3084\u9045\u5ef6\u306e\u30ea\u30b9\u30af\u3082\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"mt-6 chart-container h-48 max-h-48\">\n <canvas id=\"lclChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-xs text-gray-500 mt-2\">LCL\u306e\u8cbb\u7528\u69cb\u6210\uff08\u4e00\u4f8b\uff09<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-6\">\u30cf\u30a6\u30b9B\/L vs \u30de\u30b9\u30bf\u30fcB\/L<\/h3>\n <p class=\"text-center text-gray-600 mb-6\">\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u767a\u884c(\u30cf\u30a6\u30b9)\u304b\u3001\u8239\u4f1a\u793e\u767a\u884c(\u30de\u30b9\u30bf\u30fc)\u304b\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n <table class=\"w-full text-sm text-left\">\n <thead class=\"bg-gray-100\">\n <tr>\n <th class=\"p-2\">\u6bd4\u8f03\u9805\u76ee<\/th>\n <th class=\"p-2 font-bold\">\u30cf\u30a6\u30b9B\/L<\/th>\n <th class=\"p-2 font-bold\">\u30de\u30b9\u30bf\u30fcB\/L<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr class=\"border-b\">\n <td class=\"p-2\">\u767a\u884c\u5143<\/td><td class=\"p-2\">\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc<\/td><td class=\"p-2\">\u8239\u4f1a\u793e<\/td>\n <\/tr>\n <tr class=\"border-b\">\n <td class=\"p-2\">\u30b9\u30d4\u30fc\u30c9<\/td><td class=\"p-2\">\u901f\u3044<\/td><td class=\"p-2\">\u9045\u3044<\/td>\n <\/tr>\n <tr class=\"border-b\">\n <td class=\"p-2\">\u67d4\u8edf\u6027<\/td><td class=\"p-2\">\u9ad8\u3044<\/td><td class=\"p-2\">\u4f4e\u3044<\/td>\n <\/tr>\n <tr>\n <td class=\"p-2\">\u73fe\u5730\u8cbb\u7528<\/td><td class=\"p-2\">\u9ad8\u3044\u50be\u5411<\/td><td class=\"p-2\">\u5b89\u3044\u50be\u5411<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <p class=\"text-xs text-gray-600 mt-4\">L\/C\u6c7a\u6e08\u306a\u3069\u3001\u66f8\u985e\u306e\u8fc5\u901f\u6027\u304c\u6c42\u3081\u3089\u308c\u308b\u5834\u5408\u306f\u30cf\u30a6\u30b9B\/L\u304c\u6709\u5229\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"three-flows\" class=\"py-16 bg-white\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u8cbf\u6613\u3092\u69cb\u6210\u3059\u308b\uff13\u3064\u306e\u6d41\u308c<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u56fd\u969b\u7269\u6d41\u306f\u300c\u30e2\u30ce\u300d\u300c\u30ab\u30df\u300d\u300c\u30ab\u30cd\u300d\u306e\uff13\u3064\u304c\u9023\u52d5\u3057\u3066\u521d\u3081\u3066\u6210\u7acb\u3057\u307e\u3059\u3002\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u3066\u95a2\u4fc2\u6027\u3092\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n <div class=\"relative grid md:grid-cols-3 gap-8 text-center\">\n <div id=\"flow-goods\" class=\"three-flows-item bg-gray-50 p-6 rounded-lg border-2 border-transparent\">\n <div class=\"three-flows-icon text-5xl mb-4 text-gray-500\">\ud83d\ude9a<\/div>\n <h3 class=\"text-2xl font-bold\">\u30e2\u30ce (Goods)<\/h3>\n <p class=\"text-gray-600\">\u8ca8\u7269\u305d\u306e\u3082\u306e\u306e\u7269\u7406\u7684\u306a\u79fb\u52d5\u3002\u5de5\u5834\u304b\u3089\u5009\u5eab\u3078\u3001\u30c8\u30e9\u30c3\u30af\u3001\u8239\u3001\u98db\u884c\u6a5f\u3092\u7d4c\u3066\u5c4a\u3051\u3089\u308c\u307e\u3059\u3002<\/p>\n <\/div>\n <div id=\"flow-docs\" class=\"three-flows-item bg-gray-50 p-6 rounded-lg border-2 border-transparent\">\n <div class=\"three-flows-icon text-5xl mb-4 text-gray-500\">\ud83d\udcc4<\/div>\n <h3 class=\"text-2xl font-bold\">\u30ab\u30df (Documents)<\/h3>\n <p class=\"text-gray-600\">B\/L\u3084\u30a4\u30f3\u30dc\u30a4\u30b9\u306a\u3069\u3001\u6240\u6709\u6a29\u3084\u5185\u5bb9\u3092\u8a3c\u660e\u3059\u308b\u66f8\u985e\u306e\u6d41\u308c\u3002\u3053\u308c\u304c\u306a\u3051\u308c\u3070\u30e2\u30ce\u306f\u52d5\u304d\u307e\u305b\u3093\u3002<\/p>\n <\/div>\n <div id=\"flow-money\" class=\"three-flows-item bg-gray-50 p-6 rounded-lg border-2 border-transparent\">\n <div class=\"three-flows-icon text-5xl mb-4 text-gray-500\">\ud83d\udcb0<\/div>\n <h3 class=\"text-2xl font-bold\">\u30ab\u30cd (Money)<\/h3>\n <p class=\"text-gray-600\">\u5546\u54c1\u4ee3\u91d1\u306e\u6c7a\u6e08\u306e\u6d41\u308c\u3002\u7279\u306bL\/C\u6c7a\u6e08\u3067\u306f\u300c\u30ab\u30df\u300d\u304c\u300c\u30ab\u30cd\u300d\u3092\u76f4\u63a5\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"future\" class=\"py-16\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306e\u672a\u6765\u306e\u59ff<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u74b0\u5883\u306e\u5909\u5316\u306f\u3001\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306e\u5f79\u5272\u3092\u9032\u5316\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n <div class=\"max-w-3xl mx-auto space-y-4\">\n <div class=\"accordion-item bg-white rounded-lg shadow-md\">\n <button class=\"accordion-header w-full text-left p-4 font-semibold text-lg flex justify-between items-center\">\n \u30c7\u30b8\u30bf\u30eb\u30c8\u30e9\u30f3\u30b9\u30d5\u30a9\u30fc\u30e1\u30fc\u30b7\u30e7\u30f3\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\n <\/button>\n <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n <p class=\"p-4 pt-0 text-gray-700\">FAX\u3084\u96fb\u8a71\u304b\u3089\u30af\u30e9\u30a6\u30c9\u3078\u3002\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u8ffd\u8de1\u3001\u30aa\u30f3\u30e9\u30a4\u30f3\u898b\u7a4d\u3082\u308a\u3001\u66f8\u985e\u306e\u4e00\u5143\u7ba1\u7406\u306a\u3069\u3092\u63d0\u4f9b\u3057\u3001\u696d\u52d9\u306e\u900f\u660e\u6027\u3068\u52b9\u7387\u6027\u3092\u98db\u8e8d\u7684\u306b\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"accordion-item bg-white rounded-lg shadow-md\">\n <button class=\"accordion-header w-full text-left p-4 font-semibold text-lg flex justify-between items-center\">\n \u30d7\u30ed\u30a2\u30af\u30c6\u30a3\u30d6\u306a\u30ea\u30b9\u30af\u7ba1\u7406\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\n <\/button>\n <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n <p class=\"p-4 pt-0 text-gray-700\">\u6e2f\u6e7e\u306e\u6df7\u96d1\u3084\u7d1b\u4e89\u306a\u3069\u3001\u4e88\u671f\u305b\u306c\u6df7\u4e71\u3078\u306e\u5bfe\u5fdc\u529b\u304c\u4fa1\u5024\u3068\u306a\u308a\u307e\u3059\u3002\u4ee3\u66ff\u30eb\u30fc\u30c8\u306e\u78ba\u4fdd\u3001\u66f8\u985e\u4e0d\u5099\u306e\u9632\u6b62\u306a\u3069\u3001\u5c02\u9580\u77e5\u8b58\u3067\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3\u3092\u5b88\u308a\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"accordion-item bg-white rounded-lg shadow-md\">\n <button class=\"accordion-header w-full text-left p-4 font-semibold text-lg flex justify-between items-center\">\n \u30b5\u30b9\u30c6\u30ca\u30d3\u30ea\u30c6\u30a3\u3078\u306e\u8ca2\u732e\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\n <\/button>\n <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n <p class=\"p-4 pt-0 text-gray-700\">CO\u2082\u6392\u51fa\u91cf\u306e\u5c11\u306a\u3044\u8f38\u9001\u30e2\u30fc\u30c9\uff08\u30e2\u30fc\u30c0\u30eb\u30b7\u30d5\u30c8\uff09\u306e\u63d0\u6848\u3084\u3001\u8f38\u9001\u52b9\u7387\u306e\u5411\u4e0a\u3092\u901a\u3058\u3066\u3001\u8377\u4e3b\u306eESG\u7d4c\u55b6\u3092\u652f\u63f4\u3059\u308b\u30b3\u30f3\u30b5\u30eb\u30bf\u30f3\u30c8\u3068\u3057\u3066\u306e\u5f79\u5272\u3092\u62c5\u3044\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"bg-gray-800 text-white py-6\">\n <div class=\"container mx-auto px-6 text-center\">\n <p>\u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u63d0\u4f9b\u3055\u308c\u305f\u30ec\u30dd\u30fc\u30c8\u306b\u57fa\u3065\u304d\u751f\u6210\u3055\u308c\u305f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u89e3\u8aac\u3067\u3059\u3002<\/p>\n <\/div>\n <\/footer>\n \n <div id=\"modal-container-for-flow\"><\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n const container = document.getElementById('flow-page-wrapper');\n if (!container) return;\n\n const modalData = {\n 'modal-export-1': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d71\uff1a\u554f\u3044\u5408\u308f\u305b & \u898b\u7a4d\u3082\u308a', content: '\u5168\u3066\u306e\u8f38\u9001\u306f\u8377\u4e3b\u304b\u3089\u306e\u554f\u3044\u5408\u308f\u305b\u3067\u59cb\u307e\u308a\u307e\u3059\u3002\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8ca8\u7269\u8a73\u7d30\u3001\u4ed5\u5411\u5730\u3001\u7d0d\u671f\u306a\u3069\u3092\u30d2\u30a2\u30ea\u30f3\u30b0\u3057\u3001\u6d77\u4e0a\u30fb\u822a\u7a7a\u904b\u8cc3\u3001\u56fd\u5185\u8f38\u9001\u8cbb\u3001\u901a\u95a2\u6599\u306a\u3069\u3092\u542b\u3080\u8a73\u7d30\u306a\u898b\u7a4d\u3082\u308a\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u8907\u6570\u306e\u30ad\u30e3\u30ea\u30a2\u3092\u6bd4\u8f03\u3057\u3001\u6700\u9069\u306a\u4fa1\u683c\u3092\u63d0\u793a\u3067\u304d\u308b\u306e\u304c\u5f37\u307f\u3067\u3059\u3002' },\n 'modal-export-2': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d72\uff1a\u30d6\u30c3\u30ad\u30f3\u30b0\uff08\u8239\u8179\u4e88\u7d04\uff09', content: '\u8377\u4e3b\u304c\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306b\u8f38\u9001\u3092\u6b63\u5f0f\u306b\u4f9d\u983c\u3059\u308b\u3068\u3001\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8239\u4f1a\u793e\u3084\u822a\u7a7a\u4f1a\u793e\u306b\u5bfe\u3057\u3066\u8f38\u9001\u30b9\u30da\u30fc\u30b9\u3092\u4e88\u7d04\u3057\u307e\u3059\u3002\u7279\u306b\u9700\u8981\u304c\u903c\u8feb\u3059\u308b\u6642\u671f\u306b\u306f\u3001\u3053\u306e\u30b9\u30da\u30fc\u30b9\u78ba\u4fdd\u304c\u8f38\u9001\u6210\u529f\u306e\u9375\u3068\u306a\u308a\u307e\u3059\u3002\u540c\u6642\u306b\u30b3\u30f3\u30c6\u30ca\u306e\u624b\u914d\u306a\u3069\u3082\u884c\u3044\u307e\u3059\u3002' },\n 'modal-export-3': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d73\uff1a\u8ca8\u7269\u96c6\u8377 & \u66f8\u985e\u4f5c\u6210', content: '\u8377\u4e3b\u306e\u5de5\u5834\u306a\u3069\u304b\u3089\u8ca8\u7269\u3092\u96c6\u8377\u3057\u3001\u6e2f\u3084\u7a7a\u6e2f\u3078\u8f38\u9001\u3057\u307e\u3059\u3002\u5c0f\u53e3\u8ca8\u7269(LCL)\u306fCFS\u3067\u4ed6\u306e\u8ca8\u7269\u3068\u6df7\u8f09\u3055\u308c\u3001\u30b3\u30f3\u30c6\u30ca1\u672c\u5206\u306e\u8ca8\u7269(FCL)\u306f\u76f4\u63a5CY\u3078\u642c\u5165\u3055\u308c\u307e\u3059\u3002\u8377\u4e3b\u304b\u3089\u30a4\u30f3\u30dc\u30a4\u30b9\u3001\u30d1\u30c3\u30ad\u30f3\u30b0\u30ea\u30b9\u30c8\u3001\u8239\u7a4d\u4f9d\u983c\u66f8(S\/I)\u3092\u53d7\u3051\u53d6\u308a\u3001B\/L\u306a\u3069\u306e\u8f38\u9001\u66f8\u985e\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002' },\n 'modal-export-4': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d74\uff1a\u8f38\u51fa\u7533\u544a & \u8a31\u53ef', content: '\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\uff08\u307e\u305f\u306f\u63d0\u643a\u901a\u95a2\u696d\u8005\uff09\u304c\u3001NACCS\uff08\u96fb\u5b50\u60c5\u5831\u51e6\u7406\u30b7\u30b9\u30c6\u30e0\uff09\u3092\u4f7f\u3044\u3001\u7a0e\u95a2\u306b\u8f38\u51fa\u7533\u544a\u3092\u884c\u3044\u307e\u3059\u3002\u8ca8\u7269\u306eHS\u30b3\u30fc\u30c9\u3092\u7279\u5b9a\u3057\u3001\u7533\u544a\u66f8\u306b\u8a18\u8f09\u3057\u307e\u3059\u3002\u7a0e\u95a2\u306f\u7533\u544a\u5185\u5bb9\u3092\u5be9\u67fb\u3057\u3001\u554f\u984c\u304c\u306a\u3051\u308c\u3070\u8f38\u51fa\u8a31\u53ef\u3092\u51fa\u3057\u307e\u3059\u3002\u5834\u5408\u306b\u3088\u3063\u3066\u306f\u66f8\u985e\u5be9\u67fb\u3084\u73fe\u7269\u691c\u67fb\u304c\u884c\u308f\u308c\u307e\u3059\u3002' },\n 'modal-export-5': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d75\uff1a\u8239\u7a4d\u307f & \u51fa\u767a', content: '\u8f38\u51fa\u8a31\u53ef\u304c\u4e0b\u308a\u305f\u8ca8\u7269\u306f\u3001\u8239\u3084\u98db\u884c\u6a5f\u306b\u642d\u8f09\u3055\u308c\u307e\u3059\u3002FCL\u30b3\u30f3\u30c6\u30ca\u306fCY\uff08\u30b3\u30f3\u30c6\u30ca\u30e4\u30fc\u30c9\uff09\u304b\u3089\u3001LCL\u8ca8\u7269\u306fCFS\uff08\u30b3\u30f3\u30c6\u30ca\u30d5\u30ec\u30a4\u30c8\u30b9\u30c6\u30fc\u30b7\u30e7\u30f3\uff09\u304b\u3089\u672c\u8239\u3078\u3002\u822a\u7a7a\u8ca8\u7269\u306f\u822a\u7a7a\u4f1a\u793e\u306e\u4e0a\u5c4b\u304b\u3089\u98db\u884c\u6a5f\u3078\u642d\u8f09\u3055\u308c\u3001\u4ed5\u5411\u5730\u3078\u5411\u3051\u3066\u51fa\u767a\u3057\u307e\u3059\u3002' },\n 'modal-export-6': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d76\uff1aB\/L\u767a\u884c & \u8f38\u9001\u7ba1\u7406', content: '\u672c\u8239\u51fa\u6e2f\u5f8c\u3001\u8239\u4f1a\u793e\u306f\u30de\u30b9\u30bf\u30fcB\/L\u3092\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306b\u767a\u884c\u3057\u3001\u305d\u308c\u3092\u53d7\u3051\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u304c\u8377\u4e3b\u306b\u5bfe\u3057\u3066\u30cf\u30a6\u30b9B\/L\u3092\u767a\u884c\u3057\u307e\u3059\u3002\u3053\u308c\u306f\u904b\u9001\u5951\u7d04\u306e\u8a3c\u62e0\u3067\u3042\u308a\u3001\u8ca8\u7269\u306e\u53d7\u9818\u66f8\u3067\u3059\u3002\u76ee\u7684\u5730\u5230\u7740\u307e\u3067\u8ca8\u7269\u306e\u52d5\u9759\u3092\u8ffd\u8de1\u3057\u3001\u73fe\u5730\u4ee3\u7406\u5e97\u306b\u8239\u7a4d\u66f8\u985e\u3092\u9001\u4ed8(Pre-alert)\u3057\u3066\u3001\u30b9\u30e0\u30fc\u30ba\u306a\u8f38\u5165\u901a\u95a2\u306e\u6e96\u5099\u3092\u3057\u307e\u3059\u3002' },\n 'modal-import-1': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d71\uff1aA\/N\u53d7\u9818 & \u66f8\u985e\u6e96\u5099', content: '\u8ca8\u7269\u5230\u7740\u524d\u3001\u8f38\u51fa\u5730\u306e\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u304b\u3089\u8239\u7a4d\u66f8\u985e\u304c\u5c4a\u304d\u3001\u73fe\u5730\u306e\u8239\u4f1a\u793e\u306a\u3069\u304b\u3089\u300c\u30a2\u30e9\u30a4\u30d0\u30eb\u30ce\u30fc\u30c6\u30a3\u30b9(A\/N: \u8ca8\u7269\u5230\u7740\u6848\u5185)\u300d\u304c\u767a\u884c\u3055\u308c\u307e\u3059\u3002A\/N\u306b\u306f\u904b\u8cc3\u3084\u8af8\u8cbb\u7528\u306e\u8acb\u6c42\u304c\u8a18\u8f09\u3055\u308c\u3066\u304a\u308a\u3001\u3053\u308c\u304c\u8f38\u5165\u30d7\u30ed\u30bb\u30b9\u958b\u59cb\u306e\u5408\u56f3\u3068\u306a\u308a\u307e\u3059\u3002\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u3053\u308c\u306b\u57fa\u3065\u304d\u8f38\u5165\u901a\u95a2\u306e\u6e96\u5099\u3092\u59cb\u3081\u307e\u3059\u3002' },\n 'modal-import-2': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d72\uff1a\u8377\u63da\u3052 & \u30c7\u30d0\u30f3\u30cb\u30f3\u30b0', content: '\u672c\u8239\u30fb\u822a\u7a7a\u6a5f\u304c\u5230\u7740\u5f8c\u3001\u8ca8\u7269\u304c\u8377\u63da\u3052\u3055\u308c\u307e\u3059\u3002FCL\u30b3\u30f3\u30c6\u30ca\u306fCY\u3078\u3001LCL\u8ca8\u7269\u306fCFS\u3078\u79fb\u9001\u3055\u308c\u307e\u3059\u3002LCL\u8ca8\u7269\u3084\u822a\u7a7a\u8ca8\u7269\u306f\u3001CFS\u3084\u5009\u5eab\u3067\u30b3\u30f3\u30c6\u30ca\u304b\u3089\u53d6\u308a\u51fa\u3055\u308c\uff08\u30c7\u30d0\u30f3\u30cb\u30f3\u30b0\uff09\u3001\u8f38\u5165\u8005\u3054\u3068\u306b\u4ed5\u5206\u3051\u3089\u308c\u307e\u3059\u3002' },\n 'modal-import-3': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d73\uff1a\u8f38\u5165\u7533\u544a & \u7d0d\u7a0e', content: '\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8377\u4e3b\u304b\u3089\u9810\u304b\u3063\u305f\u30a4\u30f3\u30dc\u30a4\u30b9\u3084B\/L\u306b\u57fa\u3065\u304d\u3001\u7a0e\u95a2\u306b\u8f38\u5165\uff08\u7d0d\u7a0e\uff09\u7533\u544a\u3092\u884c\u3044\u307e\u3059\u3002\u7533\u544a\u5185\u5bb9\u306b\u57fa\u3065\u304d\u7b97\u51fa\u3055\u308c\u305f\u95a2\u7a0e\u30fb\u6d88\u8cbb\u7a0e\u3092\u3001\u8377\u4e3b\u306b\u4ee3\u308f\u3063\u3066\u7d0d\u4ed8\u3059\u308b\u624b\u914d\u3092\u3057\u307e\u3059\u3002\u3053\u306e\u7d0d\u4ed8\u304c\u5b8c\u4e86\u3057\u306a\u3044\u3068\u8f38\u5165\u8a31\u53ef\u306f\u4e0b\u308a\u307e\u305b\u3093\u3002' },\n 'modal-import-4': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d74\uff1a\u8f38\u5165\u8a31\u53ef', content: '\u7a0e\u95a2\u304c\u7533\u544a\u5185\u5bb9\u3092\u5be9\u67fb\u3057\u3001\u5fc5\u8981\u3067\u3042\u308c\u3070\u691c\u67fb\u3092\u884c\u3044\u307e\u3059\u3002\u3059\u3079\u3066\u306e\u5be9\u67fb\u304c\u5b8c\u4e86\u3057\u3001\u95a2\u7a0e\u30fb\u6d88\u8cbb\u7a0e\u306e\u7d0d\u4ed8\u3082\u78ba\u8a8d\u3055\u308c\u308b\u3068\u3001\u7a0e\u95a2\u304b\u3089\u300c\u8f38\u5165\u8a31\u53ef\u66f8\u300d\u304c\u767a\u884c\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u3067\u8ca8\u7269\u3092\u56fd\u5185\u306b\u5f15\u304d\u53d6\u308b\u3053\u3068\u304c\u6cd5\u7684\u306b\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002' },\n 'modal-import-5': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d75\uff1aD\/O\u5165\u624b', content: '\u8f38\u5165\u8a31\u53ef\u5f8c\u3001\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8239\u4f1a\u793e\u306bB\/L\u539f\u672c\u3092\u5dee\u3057\u5165\u308c\u3001\u904b\u8cc3\u30fb\u8af8\u8cbb\u7528\u3092\u652f\u6255\u3044\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u8239\u4f1a\u793e\u306f\u300cD\/O\uff08Delivery Order: \u8ca8\u7269\u5f15\u6e21\u6307\u56f3\u66f8\uff09\u300d\u3092\u767a\u884c\u3057\u307e\u3059\u3002\u3053\u306eD\/O\u304c\u3001CY\u3084CFS\u304b\u3089\u8ca8\u7269\u3092\u5f15\u304d\u51fa\u3059\u305f\u3081\u306e\u300c\u9375\u300d\u3068\u306a\u308a\u307e\u3059\u3002' },\n 'modal-import-6': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d76\uff1a\u6700\u7d42\u914d\u9001', content: '\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306fD\/O\u3068\u8f38\u5165\u8a31\u53ef\u66f8\u3092CY\u3084CFS\u306b\u63d0\u793a\u3057\u3066\u8ca8\u7269\u3092\u5f15\u304d\u53d6\u308a\u3001\u624b\u914d\u3057\u305f\u30c8\u30e9\u30c3\u30af\u3067\u8f38\u5165\u8005\u306e\u6307\u5b9a\u3059\u308b\u5de5\u5834\u3084\u5009\u5eab\u307e\u3067\u914d\u9001\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u3082\u3063\u3066\u3001\u4e00\u9023\u306e\u56fd\u969b\u8f38\u9001\u306f\u5b8c\u4e86\u3057\u307e\u3059\u3002' },\n };\n\n function createModal(id, title, content) {\n const modalContainer = container.querySelector('#modal-container-for-flow');\n const modalHTML = `\n <div id=\"${id}\" class=\"modal fixed inset-0 bg-black bg-opacity-50 z-50 justify-center items-center\">\n <div class=\"bg-white rounded-lg shadow-xl p-6 md:p-8 w-11\/12 md:max-w-2xl transform transition-all duration-300 scale-95 opacity-0\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl md:text-2xl font-bold text-gray-800\">${title}<\/h3>\n <button class=\"close-modal text-gray-500 hover:text-gray-800 text-3xl\">×<\/button>\n <\/div>\n <p class=\"text-gray-700\">${content}<\/p>\n <\/div>\n <\/div>`;\n modalContainer.insertAdjacentHTML('beforeend', modalHTML);\n const modal = modalContainer.querySelector(`#${id}`);\n const modalContent = modal.querySelector('.bg-white');\n \n requestAnimationFrame(() => {\n modal.classList.add('show');\n modalContent.classList.remove('scale-95', 'opacity-0');\n modalContent.classList.add('scale-100', 'opacity-100');\n });\n\n modal.querySelector('.close-modal').addEventListener('click', () => closeModal(modal));\n modal.addEventListener('click', (e) => {\n if (e.target === modal) {\n closeModal(modal);\n }\n });\n }\n \n function closeModal(modal) {\n const modalContent = modal.querySelector('.bg-white');\n modalContent.classList.add('scale-95', 'opacity-0');\n modalContent.classList.remove('scale-100', 'opacity-100');\n setTimeout(() => {\n modal.remove();\n }, 300);\n }\n\n container.querySelectorAll('.flow-step').forEach(step => {\n step.addEventListener('click', function() {\n const modalId = this.getAttribute('data-modal');\n const { title, content } = modalData[modalId];\n if (container.querySelector(`#${modalId}`)) return;\n createModal(modalId, title, content);\n });\n });\n\n const tabExportBtn = container.querySelector('#tab-export-btn');\n const tabImportBtn = container.querySelector('#tab-import-btn');\n const tabExportContent = container.querySelector('#tab-export-content');\n const tabImportContent = container.querySelector('#tab-import-content');\n\n tabExportBtn.addEventListener('click', () => {\n tabExportBtn.classList.add('active');\n tabImportBtn.classList.remove('active');\n tabExportContent.classList.remove('hidden');\n tabImportContent.classList.add('hidden');\n });\n\n tabImportBtn.addEventListener('click', () => {\n tabImportBtn.classList.add('active');\n tabExportBtn.classList.remove('active');\n tabImportContent.classList.remove('hidden');\n tabExportContent.classList.add('hidden');\n });\n\n const transportChartCtx = container.querySelector('#transportChart').getContext('2d');\n const seaData = { labels: ['\u30b3\u30b9\u30c8', '\u30b9\u30d4\u30fc\u30c9', '\u8f38\u9001\u80fd\u529b'], datasets: [{ label: '\u6d77\u4e0a\u8f38\u9001', data: [2, 1, 10], backgroundColor: 'rgba(59, 130, 246, 0.6)', borderColor: 'rgba(59, 130, 246, 1)', borderWidth: 1 }] };\n const airData = { labels: ['\u30b3\u30b9\u30c8', '\u30b9\u30d4\u30fc\u30c9', '\u8f38\u9001\u80fd\u529b'], datasets: [{ label: '\u822a\u7a7a\u8f38\u9001', data: [9, 10, 2], backgroundColor: 'rgba(16, 185, 129, 0.6)', borderColor: 'rgba(16, 185, 129, 1)', borderWidth: 1 }] };\n const transportChart = new Chart(transportChartCtx, { type: 'bar', data: seaData, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, suggestedMax: 10, ticks: { display: false } } }, plugins: { legend: { display: false }, tooltip: { enabled: false } } } }); \n \n const transportDetails = container.querySelector('#transport-details');\n const seaBtn = container.querySelector('#sea-btn');\n const airBtn = container.querySelector('#air-btn');\n\n seaBtn.addEventListener('click', () => {\n transportChart.data = seaData;\n transportChart.update();\n transportDetails.innerHTML = `<h4 class=\"text-xl font-bold mb-2 text-blue-700\">\u6d77\u4e0a\u8f38\u9001<\/h4><p class=\"text-gray-700\">\u5727\u5012\u7684\u306a\u30b3\u30b9\u30c8\u52b9\u7387\u3068\u8f38\u9001\u80fd\u529b\u304c\u9b45\u529b\u3002\u5927\u91cf\u306e\u8ca8\u7269\u3084\u7dca\u6025\u6027\u306e\u306a\u3044\u5546\u54c1\u306e\u8f38\u9001\u306b\u6700\u9069\u3067\u3059\u304c\u3001\u8f38\u9001\u306b\u306f\u6570\u9031\u9593\u4ee5\u4e0a\u304b\u304b\u308a\u307e\u3059\u3002<\/p><ul class=\"mt-4 space-y-2\"><li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u30b3\u30b9\u30c8\u304c\u4f4e\u3044<\/li><li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u5927\u91cf\u30fb\u5927\u578b\u8ca8\u7269\u306b\u5bfe\u5fdc<\/li><li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u30b9\u30d4\u30fc\u30c9\u304c\u9045\u3044<\/li><li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u8ca8\u7269\u640d\u50b7\u30ea\u30b9\u30af\u304c\u6bd4\u8f03\u7684\u9ad8<\/li><\/ul>`;\n seaBtn.classList.replace('bg-gray-300', 'bg-blue-500');\n seaBtn.classList.replace('text-gray-700', 'text-white');\n airBtn.classList.replace('bg-blue-500', 'bg-gray-300');\n airBtn.classList.replace('text-white', 'text-gray-700');\n });\n\n airBtn.addEventListener('click', () => {\n transportChart.data = airData;\n transportChart.update();\n transportDetails.innerHTML = `<h4 class=\"text-xl font-bold mb-2 text-emerald-700\">\u822a\u7a7a\u8f38\u9001<\/h4><p class=\"text-gray-700\">\u5727\u5012\u7684\u306a\u30b9\u30d4\u30fc\u30c9\u304c\u6700\u5927\u306e\u5229\u70b9\u3002\u7d0d\u671f\u304c\u53b3\u3057\u3044\u88fd\u54c1\u3001\u9ad8\u4fa1\u54c1\u3001\u751f\u9bae\u98df\u54c1\u306a\u3069\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002\u30b3\u30b9\u30c8\u306f\u9ad8\u304f\u306a\u308a\u307e\u3059\u304c\u3001\u5b89\u5168\u6027\u3082\u9ad8\u3044\u3067\u3059\u3002<\/p><ul class=\"mt-4 space-y-2\"><li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u30b9\u30d4\u30fc\u30c9\u304c\u901f\u3044<\/li><li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u5b89\u5168\u6027\u304c\u9ad8\u3044<\/li><li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u30b3\u30b9\u30c8\u304c\u9ad8\u3044<\/li><li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u8f38\u9001\u80fd\u529b\u306b\u5236\u9650\u3042\u308a<\/li><\/ul>`;\n airBtn.classList.replace('bg-gray-300', 'bg-blue-500');\n airBtn.classList.replace('text-gray-700', 'text-white');\n seaBtn.classList.replace('bg-blue-500', 'bg-gray-300');\n seaBtn.classList.replace('text-white', 'text-gray-700');\n });\n\n const lclChartCtx = container.querySelector('#lclChart').getContext('2d');\n new Chart(lclChartCtx, { type: 'doughnut', data: { labels: ['\u6d77\u4e0a\u904b\u8cc3', 'CFS\u30c1\u30e3\u30fc\u30b8', '\u305d\u306e\u4ed6\u8af8\u8cbb\u7528'], datasets: [{ data: [60, 25, 15], backgroundColor: ['#60a5fa', '#93c5fd', '#bfdbfe'], hoverOffset: 4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12 } } } } });\n\n const accordionItems = container.querySelectorAll('.accordion-item');\n accordionItems.forEach(item => {\n const header = item.querySelector('.accordion-header');\n const content = item.querySelector('.accordion-content');\n const icon = header.querySelector('span');\n header.addEventListener('click', () => {\n const isClosing = content.style.maxHeight;\n accordionItems.forEach(otherItem => {\n otherItem.querySelector('.accordion-content').style.maxHeight = null;\n otherItem.querySelector('.accordion-header span').style.transform = 'rotate(0deg)';\n });\n if (!isClosing) {\n content.style.maxHeight = content.scrollHeight + \"px\";\n icon.style.transform = 'rotate(180deg)';\n }\n });\n });\n \n const flowGoods = container.querySelector('#flow-goods');\n const flowDocs = container.querySelector('#flow-docs');\n const flowMoney = container.querySelector('#flow-money');\n\n flowGoods.addEventListener('mouseenter', () => { flowGoods.classList.add('border-blue-400', 'shadow-lg'); flowDocs.classList.add('border-blue-400'); });\n flowGoods.addEventListener('mouseleave', () => { flowGoods.classList.remove('border-blue-400', 'shadow-lg'); flowDocs.classList.remove('border-blue-400'); });\n flowDocs.addEventListener('mouseenter', () => { flowDocs.classList.add('border-blue-400', 'shadow-lg'); flowGoods.classList.add('border-blue-400'); flowMoney.classList.add('border-blue-400'); });\n flowDocs.addEventListener('mouseleave', () => { flowDocs.classList.remove('border-blue-400', 'shadow-lg'); flowGoods.classList.remove('border-blue-400'); flowMoney.classList.remove('border-blue-400'); });\n flowMoney.addEventListener('mouseenter', () => { flowMoney.classList.add('border-blue-400', 'shadow-lg'); flowDocs.classList.add('border-blue-400'); });\n flowMoney.addEventListener('mouseleave', () => { flowMoney.classList.remove('border-blue-400', 'shadow-lg'); flowDocs.classList.remove('border-blue-400'); });\n\n container.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const targetElement = container.querySelector(this.getAttribute('href'));\n if(targetElement) {\n targetElement.scrollIntoView({ behavior: 'smooth' });\n }\n });\n });\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u56fd\u969b\u7269\u6d41\u30d5\u30ed\u30fc | \u30d5\u30ec\u30a4\u30c8\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u696d\u52d9\u89e3\u8aac \u56fd\u969b\u7269\u6d41\u306e\u7f85\u91dd\u76e4 \u30d7\u30ec\u30a4\u30e4\u30fc \u696d\u52d9\u30d5\u30ed\u30fc \u6226\u7565\u7684\u9078\u629e \uff13\u3064\u306e\u6d41\u308c \u672a\u6765\u306e\u59ff \u3088\u3046\u3053\u305d\u3001\u56fd\u969b\u7269\u6d41\u306e\u4e16\u754c\u3078 \u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u30d3\u30b8\u30cd\u30b9\u306e\u751f\u547d\u7dda […]<\/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-1318","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1318","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=1318"}],"version-history":[{"count":3,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1318\/revisions"}],"predecessor-version":[{"id":1351,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1318\/revisions\/1351"}],"wp:attachment":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1318,"date":"2025-07-02T15:56:42","date_gmt":"2025-07-02T06:56:42","guid":{"rendered":"https:\/\/plus-fwd.com\/?page_id=1318"},"modified":"2025-07-12T22:17:06","modified_gmt":"2025-07-12T13:17:06","slug":"%e5%9b%bd%e9%9a%9b%e7%89%a9%e6%b5%81%e6%a5%ad%e5%8b%99%e3%81%ae%e6%b5%81%e3%82%8c","status":"publish","type":"page","link":"https:\/\/plus-fwd.com\/?page_id=1318","title":{"rendered":"\u56fd\u969b\u7269\u6d41\u696d\u52d9\u306e\u6d41\u308c"},"content":{"rendered":"\n\n\n\n \n \n \u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u56fd\u969b\u7269\u6d41\u30d5\u30ed\u30fc | \u30d5\u30ec\u30a4\u30c8\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u696d\u52d9\u89e3\u8aac<\/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@300;400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n #flow-page-wrapper {\n font-family: 'Noto Sans JP', sans-serif;\n background-color: #f8f9fa;\n color: #343a40;\n }\n #flow-page-wrapper .tab-button.active {\n border-color: #3b82f6;\n color: #3b82f6;\n font-weight: 600;\n }\n #flow-page-wrapper .flow-step {\n transition: all 0.3s ease;\n cursor: pointer;\n }\n #flow-page-wrapper .flow-step:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n #flow-page-wrapper .flow-arrow {\n font-size: 2rem;\n color: #9ca3af;\n }\n #flow-page-wrapper .modal {\n display: none;\n transition: opacity 0.3s ease;\n }\n #flow-page-wrapper .modal.show {\n display: flex;\n }\n #flow-page-wrapper .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n #flow-page-wrapper .chart-container {\n height: 350px;\n }\n }\n #flow-page-wrapper .three-flows-item:hover .three-flows-icon {\n transform: scale(1.1);\n color: #3b82f6;\n }\n #flow-page-wrapper .three-flows-icon {\n transition: all 0.3s ease;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"flow-page-wrapper\">\n <header class=\"bg-white shadow-sm sticky top-0 z-40\">\n <nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\n <div class=\"text-xl font-bold text-gray-800\">\n <span class=\"text-blue-600\">\u56fd\u969b\u7269\u6d41<\/span>\u306e\u7f85\u91dd\u76e4\n <\/div>\n <div class=\"hidden md:flex space-x-6\">\n <a href=\"#ecosystem\" class=\"text-gray-600 hover:text-blue-600\">\u30d7\u30ec\u30a4\u30e4\u30fc<\/a>\n <a href=\"#workflow\" class=\"text-gray-600 hover:text-blue-600\">\u696d\u52d9\u30d5\u30ed\u30fc<\/a>\n <a href=\"#choices\" class=\"text-gray-600 hover:text-blue-600\">\u6226\u7565\u7684\u9078\u629e<\/a>\n <a href=\"#three-flows\" class=\"text-gray-600 hover:text-blue-600\">\uff13\u3064\u306e\u6d41\u308c<\/a>\n <a href=\"#future\" class=\"text-gray-600 hover:text-blue-600\">\u672a\u6765\u306e\u59ff<\/a>\n <\/div>\n <\/nav>\n <\/header>\n\n <main>\n <section id=\"hero\" class=\"bg-white py-12 md:py-20\">\n <div class=\"container mx-auto px-6 text-center\">\n <h1 class=\"text-3xl md:text-5xl font-bold text-gray-800 mb-4\">\u3088\u3046\u3053\u305d\u3001\u56fd\u969b\u7269\u6d41\u306e\u4e16\u754c\u3078<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u30d3\u30b8\u30cd\u30b9\u306e\u751f\u547d\u7dda\u3067\u3042\u308b\u300c\u30d5\u30ec\u30a4\u30c8\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u300d\u306e\u8907\u96d1\u306a\u696d\u52d9\u3092\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306b\u89e3\u304d\u660e\u304b\u3059\u305f\u3081\u306e\u7f85\u91dd\u76e4\u3067\u3059\u3002\u5404\u30bb\u30af\u30b7\u30e7\u30f3\u3092\u63a2\u7d22\u3057\u3001\u30e2\u30ce\u304c\u56fd\u5883\u3092\u8d8a\u3048\u308b\u4ed5\u7d44\u307f\u3092\u5b66\u3073\u307e\u3057\u3087\u3046\u3002<\/p>\n <\/div>\n <\/section>\n\n <section id=\"ecosystem\" class=\"py-16\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u56fd\u969b\u7269\u6d41\u306e\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u56fd\u969b\u7269\u6d41\u306f\u3001\u591a\u69d8\u306a\u5c02\u9580\u5bb6\uff08\u30d7\u30ec\u30a4\u30e4\u30fc\uff09\u306e\u9023\u643a\u306b\u3088\u3063\u3066\u6210\u308a\u7acb\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-xl font-bold text-blue-600 mb-2\">\u30d5\u30ec\u30a4\u30c8\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc<\/h3>\n <p class=\"text-gray-700\">\u8f38\u9001\u306e\u300c\u5efa\u7bc9\u5bb6\u300d\u3002\u8f38\u9001\u624b\u6bb5\u3092\u6301\u305f\u305a\u3001\u8377\u4e3b\u306e\u4ee3\u7406\u4eba\u3068\u3057\u3066\u6700\u9069\u306a\u8f38\u9001\u30d7\u30e9\u30f3\u3092\u8a2d\u8a08\u30fb\u7ba1\u7406\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-xl font-bold text-blue-600 mb-2\">\u30ad\u30e3\u30ea\u30a2\uff08\u5b9f\u904b\u9001\u4eba\uff09<\/h3>\n <p class=\"text-gray-700\">\u8239\u8236\u3084\u822a\u7a7a\u6a5f\u3092\u4fdd\u6709\u3057\u3001\u5b9f\u969b\u306e\u8f38\u9001\u3092\u62c5\u3046\u8239\u4f1a\u793e\u3084\u822a\u7a7a\u4f1a\u793e\u3067\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-xl font-bold text-blue-600 mb-2\">\u901a\u95a2\u696d\u8005<\/h3>\n <p class=\"text-gray-700\">\u56fd\u5883\u306e\u300c\u756a\u4eba\u300d\u3002\u8f38\u51fa\u5165\u7533\u544a\u306a\u3069\u3001\u6cd5\u7684\u306a\u7a0e\u95a2\u624b\u7d9a\u304d\u3092\u5c02\u9580\u306b\u4ee3\u884c\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-md\">\n <h3 class=\"text-xl font-bold text-blue-600 mb-2\">\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30bf\u30fc<\/h3>\n <p class=\"text-gray-700\">\u8f38\u9001\u3068\u624b\u914d\u3092\u300c\u7d71\u5408\u300d\u3057\u305f\u4e8b\u696d\u8005\u3002\u81ea\u793e\u306e\u822a\u7a7a\u6a5f\u7db2\u3067\u4e00\u8cab\u8f38\u9001\u3092\u63d0\u4f9b\u3057\u307e\u3059 (\u4f8b: FedEx, DHL)\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"workflow\" class=\"py-16 bg-white\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u696d\u52d9\u30d5\u30ed\u30fc\u63a2\u691c<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u8f38\u51fa\u3068\u8f38\u5165\u3001\u305d\u308c\u305e\u308c\u306e\u30d7\u30ed\u30bb\u30b9\u306f\u3069\u306e\u3088\u3046\u306b\u9032\u3080\u306e\u3067\u3057\u3087\u3046\u304b\uff1f\u4e0b\u306e\u30bf\u30d6\u3067\u5207\u308a\u66ff\u3048\u3001\u5404\u30b9\u30c6\u30c3\u30d7\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u8a73\u7d30\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n \n <div class=\"mb-8 border-b border-gray-200\">\n <nav class=\"flex justify-center -mb-px space-x-8\" aria-label=\"Tabs\">\n <button id=\"tab-export-btn\" class=\"tab-button active py-4 px-1 border-b-2 font-medium text-lg border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\">\n \u8f38\u51fa\u30d5\u30ed\u30fc\n <\/button>\n <button id=\"tab-import-btn\" class=\"tab-button py-4 px-1 border-b-2 font-medium text-lg border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\">\n \u8f38\u5165\u30d5\u30ed\u30fc\n <\/button>\n <\/nav>\n <\/div>\n\n <div id=\"tab-export-content\">\n <div class=\"flex flex-col items-center w-full max-w-md mx-auto\">\n <div class=\"flow-step bg-blue-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-1\"><span class=\"font-bold\">1. \u554f\u3044\u5408\u308f\u305b & \u898b\u7a4d<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-blue-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-2\"><span class=\"font-bold\">2. \u30d6\u30c3\u30ad\u30f3\u30b0<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-blue-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-3\"><span class=\"font-bold\">3. \u8ca8\u7269\u96c6\u8377 & \u66f8\u985e\u4f5c\u6210<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-green-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-4\"><span class=\"font-bold\">4. \u8f38\u51fa\u7533\u544a & \u8a31\u53ef<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-green-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-5\"><span class=\"font-bold\">5. \u8239\u7a4d\u307f & \u51fa\u767a<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-green-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-export-6\"><span class=\"font-bold\">6. B\/L\u767a\u884c & \u8f38\u9001\u7ba1\u7406<\/span><\/div>\n <\/div>\n <\/div>\n \n <div id=\"tab-import-content\" class=\"hidden\">\n <div class=\"flex flex-col items-center w-full max-w-md mx-auto\">\n <div class=\"flow-step bg-purple-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-1\"><span class=\"font-bold\">1. A\/N\u53d7\u9818 & \u66f8\u985e\u6e96\u5099<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-purple-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-2\"><span class=\"font-bold\">2. \u8377\u63da\u3052 & \u30c7\u30d0\u30f3\u30cb\u30f3\u30b0<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-purple-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-3\"><span class=\"font-bold\">3. \u8f38\u5165\u7533\u544a & \u7d0d\u7a0e<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-red-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-4\"><span class=\"font-bold\">4. \u8f38\u5165\u8a31\u53ef<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-red-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-5\"><span class=\"font-bold\">5. D\/O\u5165\u624b<\/span><\/div>\n <div class=\"flow-arrow text-center my-2\">\u2193<\/div>\n <div class=\"flow-step bg-red-100 p-4 rounded-lg shadow w-full text-center\" data-modal=\"modal-import-6\"><span class=\"font-bold\">6. \u6700\u7d42\u914d\u9001<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"choices\" class=\"py-16\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u6226\u7565\u7684\u9078\u629e<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8377\u4e3b\u306e\u72b6\u6cc1\u306b\u5fdc\u3058\u3001\u6700\u9069\u306a\u8f38\u9001\u65b9\u6cd5\u3092\u63d0\u6848\u3057\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u4e3b\u8981\u306a\u9078\u629e\u80a2\u3092\u6bd4\u8f03\u3057\u307e\u3059\u3002<\/p>\n \n <div class=\"bg-white p-8 rounded-lg shadow-lg mb-12\">\n <h3 class=\"text-2xl font-bold text-center mb-6\">\u6d77\u4e0a\u8f38\u9001 vs \u822a\u7a7a\u8f38\u9001<\/h3>\n <div class=\"text-center mb-6\">\n <button id=\"sea-btn\" class=\"bg-blue-500 text-white px-4 py-2 rounded-l-md\">\u6d77\u4e0a\u8f38\u9001<\/button>\n <button id=\"air-btn\" class=\"bg-gray-300 text-gray-700 px-4 py-2 rounded-r-md\">\u822a\u7a7a\u8f38\u9001<\/button>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <div class=\"chart-container\">\n <canvas id=\"transportChart\"><\/canvas>\n <\/div>\n <\/div>\n <div id=\"transport-details\">\n <h4 class=\"text-xl font-bold mb-2 text-blue-700\">\u6d77\u4e0a\u8f38\u9001<\/h4>\n <p class=\"text-gray-700\">\u5727\u5012\u7684\u306a\u30b3\u30b9\u30c8\u52b9\u7387\u3068\u8f38\u9001\u80fd\u529b\u304c\u9b45\u529b\u3002\u5927\u91cf\u306e\u8ca8\u7269\u3084\u7dca\u6025\u6027\u306e\u306a\u3044\u5546\u54c1\u306e\u8f38\u9001\u306b\u6700\u9069\u3067\u3059\u304c\u3001\u8f38\u9001\u306b\u306f\u6570\u9031\u9593\u4ee5\u4e0a\u304b\u304b\u308a\u307e\u3059\u3002<\/p>\n <ul class=\"mt-4 space-y-2\">\n <li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u30b3\u30b9\u30c8\u304c\u4f4e\u3044<\/li>\n <li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u5927\u91cf\u30fb\u5927\u578b\u8ca8\u7269\u306b\u5bfe\u5fdc<\/li>\n <li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u30b9\u30d4\u30fc\u30c9\u304c\u9045\u3044<\/li>\n <li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u8ca8\u7269\u640d\u50b7\u30ea\u30b9\u30af\u304c\u6bd4\u8f03\u7684\u9ad8<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 gap-8\">\n <div class=\"bg-white p-8 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-6\">FCL vs LCL<\/h3>\n <p class=\"text-center text-gray-600 mb-6\">\u30b3\u30f3\u30c6\u30ca1\u672c\u3092\u8cb8\u3057\u5207\u308b\u304b(FCL)\u3001\u5c0f\u53e3\u8ca8\u7269\u3092\u6df7\u8f09\u3059\u308b\u304b(LCL)\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n <div class=\"grid grid-cols-2 gap-4 text-center\">\n <div>\n <h4 class=\"font-bold text-lg\">FCL (\u8cb8\u5207)<\/h4>\n <p class=\"text-sm text-gray-600\">\u4ed6\u8ca8\u7269\u306e\u5f71\u97ff\u3092\u53d7\u3051\u305a\u5b89\u5168\u30fb\u8fc5\u901f\u3002\u7269\u91cf\u304c\u591a\u3044\u5834\u5408\u306b\u6709\u5229\u3002<\/p>\n <\/div>\n <div>\n <h4 class=\"font-bold text-lg\">LCL (\u6df7\u8f09)<\/h4>\n <p class=\"text-sm text-gray-600\">\u5c0f\u53e3\u8ca8\u7269\u3092\u5b89\u4fa1\u306b\u8f38\u9001\u53ef\u80fd\u3002\u305f\u3060\u3057\u3001\u640d\u50b7\u3084\u9045\u5ef6\u306e\u30ea\u30b9\u30af\u3082\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"mt-6 chart-container h-48 max-h-48\">\n <canvas id=\"lclChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-xs text-gray-500 mt-2\">LCL\u306e\u8cbb\u7528\u69cb\u6210\uff08\u4e00\u4f8b\uff09<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold text-center mb-6\">\u30cf\u30a6\u30b9B\/L vs \u30de\u30b9\u30bf\u30fcB\/L<\/h3>\n <p class=\"text-center text-gray-600 mb-6\">\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u767a\u884c(\u30cf\u30a6\u30b9)\u304b\u3001\u8239\u4f1a\u793e\u767a\u884c(\u30de\u30b9\u30bf\u30fc)\u304b\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n <table class=\"w-full text-sm text-left\">\n <thead class=\"bg-gray-100\">\n <tr>\n <th class=\"p-2\">\u6bd4\u8f03\u9805\u76ee<\/th>\n <th class=\"p-2 font-bold\">\u30cf\u30a6\u30b9B\/L<\/th>\n <th class=\"p-2 font-bold\">\u30de\u30b9\u30bf\u30fcB\/L<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr class=\"border-b\">\n <td class=\"p-2\">\u767a\u884c\u5143<\/td><td class=\"p-2\">\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc<\/td><td class=\"p-2\">\u8239\u4f1a\u793e<\/td>\n <\/tr>\n <tr class=\"border-b\">\n <td class=\"p-2\">\u30b9\u30d4\u30fc\u30c9<\/td><td class=\"p-2\">\u901f\u3044<\/td><td class=\"p-2\">\u9045\u3044<\/td>\n <\/tr>\n <tr class=\"border-b\">\n <td class=\"p-2\">\u67d4\u8edf\u6027<\/td><td class=\"p-2\">\u9ad8\u3044<\/td><td class=\"p-2\">\u4f4e\u3044<\/td>\n <\/tr>\n <tr>\n <td class=\"p-2\">\u73fe\u5730\u8cbb\u7528<\/td><td class=\"p-2\">\u9ad8\u3044\u50be\u5411<\/td><td class=\"p-2\">\u5b89\u3044\u50be\u5411<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <p class=\"text-xs text-gray-600 mt-4\">L\/C\u6c7a\u6e08\u306a\u3069\u3001\u66f8\u985e\u306e\u8fc5\u901f\u6027\u304c\u6c42\u3081\u3089\u308c\u308b\u5834\u5408\u306f\u30cf\u30a6\u30b9B\/L\u304c\u6709\u5229\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"three-flows\" class=\"py-16 bg-white\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u8cbf\u6613\u3092\u69cb\u6210\u3059\u308b\uff13\u3064\u306e\u6d41\u308c<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u56fd\u969b\u7269\u6d41\u306f\u300c\u30e2\u30ce\u300d\u300c\u30ab\u30df\u300d\u300c\u30ab\u30cd\u300d\u306e\uff13\u3064\u304c\u9023\u52d5\u3057\u3066\u521d\u3081\u3066\u6210\u7acb\u3057\u307e\u3059\u3002\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u3066\u95a2\u4fc2\u6027\u3092\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n <div class=\"relative grid md:grid-cols-3 gap-8 text-center\">\n <div id=\"flow-goods\" class=\"three-flows-item bg-gray-50 p-6 rounded-lg border-2 border-transparent\">\n <div class=\"three-flows-icon text-5xl mb-4 text-gray-500\">\ud83d\ude9a<\/div>\n <h3 class=\"text-2xl font-bold\">\u30e2\u30ce (Goods)<\/h3>\n <p class=\"text-gray-600\">\u8ca8\u7269\u305d\u306e\u3082\u306e\u306e\u7269\u7406\u7684\u306a\u79fb\u52d5\u3002\u5de5\u5834\u304b\u3089\u5009\u5eab\u3078\u3001\u30c8\u30e9\u30c3\u30af\u3001\u8239\u3001\u98db\u884c\u6a5f\u3092\u7d4c\u3066\u5c4a\u3051\u3089\u308c\u307e\u3059\u3002<\/p>\n <\/div>\n <div id=\"flow-docs\" class=\"three-flows-item bg-gray-50 p-6 rounded-lg border-2 border-transparent\">\n <div class=\"three-flows-icon text-5xl mb-4 text-gray-500\">\ud83d\udcc4<\/div>\n <h3 class=\"text-2xl font-bold\">\u30ab\u30df (Documents)<\/h3>\n <p class=\"text-gray-600\">B\/L\u3084\u30a4\u30f3\u30dc\u30a4\u30b9\u306a\u3069\u3001\u6240\u6709\u6a29\u3084\u5185\u5bb9\u3092\u8a3c\u660e\u3059\u308b\u66f8\u985e\u306e\u6d41\u308c\u3002\u3053\u308c\u304c\u306a\u3051\u308c\u3070\u30e2\u30ce\u306f\u52d5\u304d\u307e\u305b\u3093\u3002<\/p>\n <\/div>\n <div id=\"flow-money\" class=\"three-flows-item bg-gray-50 p-6 rounded-lg border-2 border-transparent\">\n <div class=\"three-flows-icon text-5xl mb-4 text-gray-500\">\ud83d\udcb0<\/div>\n <h3 class=\"text-2xl font-bold\">\u30ab\u30cd (Money)<\/h3>\n <p class=\"text-gray-600\">\u5546\u54c1\u4ee3\u91d1\u306e\u6c7a\u6e08\u306e\u6d41\u308c\u3002\u7279\u306bL\/C\u6c7a\u6e08\u3067\u306f\u300c\u30ab\u30df\u300d\u304c\u300c\u30ab\u30cd\u300d\u3092\u76f4\u63a5\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"future\" class=\"py-16\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-3xl font-bold text-center mb-2\">\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306e\u672a\u6765\u306e\u59ff<\/h2>\n <p class=\"text-center text-gray-600 mb-12\">\u74b0\u5883\u306e\u5909\u5316\u306f\u3001\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306e\u5f79\u5272\u3092\u9032\u5316\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n <div class=\"max-w-3xl mx-auto space-y-4\">\n <div class=\"accordion-item bg-white rounded-lg shadow-md\">\n <button class=\"accordion-header w-full text-left p-4 font-semibold text-lg flex justify-between items-center\">\n \u30c7\u30b8\u30bf\u30eb\u30c8\u30e9\u30f3\u30b9\u30d5\u30a9\u30fc\u30e1\u30fc\u30b7\u30e7\u30f3\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\n <\/button>\n <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n <p class=\"p-4 pt-0 text-gray-700\">FAX\u3084\u96fb\u8a71\u304b\u3089\u30af\u30e9\u30a6\u30c9\u3078\u3002\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u8ffd\u8de1\u3001\u30aa\u30f3\u30e9\u30a4\u30f3\u898b\u7a4d\u3082\u308a\u3001\u66f8\u985e\u306e\u4e00\u5143\u7ba1\u7406\u306a\u3069\u3092\u63d0\u4f9b\u3057\u3001\u696d\u52d9\u306e\u900f\u660e\u6027\u3068\u52b9\u7387\u6027\u3092\u98db\u8e8d\u7684\u306b\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"accordion-item bg-white rounded-lg shadow-md\">\n <button class=\"accordion-header w-full text-left p-4 font-semibold text-lg flex justify-between items-center\">\n \u30d7\u30ed\u30a2\u30af\u30c6\u30a3\u30d6\u306a\u30ea\u30b9\u30af\u7ba1\u7406\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\n <\/button>\n <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n <p class=\"p-4 pt-0 text-gray-700\">\u6e2f\u6e7e\u306e\u6df7\u96d1\u3084\u7d1b\u4e89\u306a\u3069\u3001\u4e88\u671f\u305b\u306c\u6df7\u4e71\u3078\u306e\u5bfe\u5fdc\u529b\u304c\u4fa1\u5024\u3068\u306a\u308a\u307e\u3059\u3002\u4ee3\u66ff\u30eb\u30fc\u30c8\u306e\u78ba\u4fdd\u3001\u66f8\u985e\u4e0d\u5099\u306e\u9632\u6b62\u306a\u3069\u3001\u5c02\u9580\u77e5\u8b58\u3067\u30b5\u30d7\u30e9\u30a4\u30c1\u30a7\u30fc\u30f3\u3092\u5b88\u308a\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"accordion-item bg-white rounded-lg shadow-md\">\n <button class=\"accordion-header w-full text-left p-4 font-semibold text-lg flex justify-between items-center\">\n \u30b5\u30b9\u30c6\u30ca\u30d3\u30ea\u30c6\u30a3\u3078\u306e\u8ca2\u732e\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\n <\/button>\n <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n <p class=\"p-4 pt-0 text-gray-700\">CO\u2082\u6392\u51fa\u91cf\u306e\u5c11\u306a\u3044\u8f38\u9001\u30e2\u30fc\u30c9\uff08\u30e2\u30fc\u30c0\u30eb\u30b7\u30d5\u30c8\uff09\u306e\u63d0\u6848\u3084\u3001\u8f38\u9001\u52b9\u7387\u306e\u5411\u4e0a\u3092\u901a\u3058\u3066\u3001\u8377\u4e3b\u306eESG\u7d4c\u55b6\u3092\u652f\u63f4\u3059\u308b\u30b3\u30f3\u30b5\u30eb\u30bf\u30f3\u30c8\u3068\u3057\u3066\u306e\u5f79\u5272\u3092\u62c5\u3044\u307e\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"bg-gray-800 text-white py-6\">\n <div class=\"container mx-auto px-6 text-center\">\n <p>\u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u63d0\u4f9b\u3055\u308c\u305f\u30ec\u30dd\u30fc\u30c8\u306b\u57fa\u3065\u304d\u751f\u6210\u3055\u308c\u305f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u89e3\u8aac\u3067\u3059\u3002<\/p>\n <\/div>\n <\/footer>\n \n <div id=\"modal-container-for-flow\"><\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n const container = document.getElementById('flow-page-wrapper');\n if (!container) return;\n\n const modalData = {\n 'modal-export-1': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d71\uff1a\u554f\u3044\u5408\u308f\u305b & \u898b\u7a4d\u3082\u308a', content: '\u5168\u3066\u306e\u8f38\u9001\u306f\u8377\u4e3b\u304b\u3089\u306e\u554f\u3044\u5408\u308f\u305b\u3067\u59cb\u307e\u308a\u307e\u3059\u3002\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8ca8\u7269\u8a73\u7d30\u3001\u4ed5\u5411\u5730\u3001\u7d0d\u671f\u306a\u3069\u3092\u30d2\u30a2\u30ea\u30f3\u30b0\u3057\u3001\u6d77\u4e0a\u30fb\u822a\u7a7a\u904b\u8cc3\u3001\u56fd\u5185\u8f38\u9001\u8cbb\u3001\u901a\u95a2\u6599\u306a\u3069\u3092\u542b\u3080\u8a73\u7d30\u306a\u898b\u7a4d\u3082\u308a\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u8907\u6570\u306e\u30ad\u30e3\u30ea\u30a2\u3092\u6bd4\u8f03\u3057\u3001\u6700\u9069\u306a\u4fa1\u683c\u3092\u63d0\u793a\u3067\u304d\u308b\u306e\u304c\u5f37\u307f\u3067\u3059\u3002' },\n 'modal-export-2': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d72\uff1a\u30d6\u30c3\u30ad\u30f3\u30b0\uff08\u8239\u8179\u4e88\u7d04\uff09', content: '\u8377\u4e3b\u304c\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306b\u8f38\u9001\u3092\u6b63\u5f0f\u306b\u4f9d\u983c\u3059\u308b\u3068\u3001\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8239\u4f1a\u793e\u3084\u822a\u7a7a\u4f1a\u793e\u306b\u5bfe\u3057\u3066\u8f38\u9001\u30b9\u30da\u30fc\u30b9\u3092\u4e88\u7d04\u3057\u307e\u3059\u3002\u7279\u306b\u9700\u8981\u304c\u903c\u8feb\u3059\u308b\u6642\u671f\u306b\u306f\u3001\u3053\u306e\u30b9\u30da\u30fc\u30b9\u78ba\u4fdd\u304c\u8f38\u9001\u6210\u529f\u306e\u9375\u3068\u306a\u308a\u307e\u3059\u3002\u540c\u6642\u306b\u30b3\u30f3\u30c6\u30ca\u306e\u624b\u914d\u306a\u3069\u3082\u884c\u3044\u307e\u3059\u3002' },\n 'modal-export-3': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d73\uff1a\u8ca8\u7269\u96c6\u8377 & \u66f8\u985e\u4f5c\u6210', content: '\u8377\u4e3b\u306e\u5de5\u5834\u306a\u3069\u304b\u3089\u8ca8\u7269\u3092\u96c6\u8377\u3057\u3001\u6e2f\u3084\u7a7a\u6e2f\u3078\u8f38\u9001\u3057\u307e\u3059\u3002\u5c0f\u53e3\u8ca8\u7269(LCL)\u306fCFS\u3067\u4ed6\u306e\u8ca8\u7269\u3068\u6df7\u8f09\u3055\u308c\u3001\u30b3\u30f3\u30c6\u30ca1\u672c\u5206\u306e\u8ca8\u7269(FCL)\u306f\u76f4\u63a5CY\u3078\u642c\u5165\u3055\u308c\u307e\u3059\u3002\u8377\u4e3b\u304b\u3089\u30a4\u30f3\u30dc\u30a4\u30b9\u3001\u30d1\u30c3\u30ad\u30f3\u30b0\u30ea\u30b9\u30c8\u3001\u8239\u7a4d\u4f9d\u983c\u66f8(S\/I)\u3092\u53d7\u3051\u53d6\u308a\u3001B\/L\u306a\u3069\u306e\u8f38\u9001\u66f8\u985e\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002' },\n 'modal-export-4': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d74\uff1a\u8f38\u51fa\u7533\u544a & \u8a31\u53ef', content: '\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\uff08\u307e\u305f\u306f\u63d0\u643a\u901a\u95a2\u696d\u8005\uff09\u304c\u3001NACCS\uff08\u96fb\u5b50\u60c5\u5831\u51e6\u7406\u30b7\u30b9\u30c6\u30e0\uff09\u3092\u4f7f\u3044\u3001\u7a0e\u95a2\u306b\u8f38\u51fa\u7533\u544a\u3092\u884c\u3044\u307e\u3059\u3002\u8ca8\u7269\u306eHS\u30b3\u30fc\u30c9\u3092\u7279\u5b9a\u3057\u3001\u7533\u544a\u66f8\u306b\u8a18\u8f09\u3057\u307e\u3059\u3002\u7a0e\u95a2\u306f\u7533\u544a\u5185\u5bb9\u3092\u5be9\u67fb\u3057\u3001\u554f\u984c\u304c\u306a\u3051\u308c\u3070\u8f38\u51fa\u8a31\u53ef\u3092\u51fa\u3057\u307e\u3059\u3002\u5834\u5408\u306b\u3088\u3063\u3066\u306f\u66f8\u985e\u5be9\u67fb\u3084\u73fe\u7269\u691c\u67fb\u304c\u884c\u308f\u308c\u307e\u3059\u3002' },\n 'modal-export-5': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d75\uff1a\u8239\u7a4d\u307f & \u51fa\u767a', content: '\u8f38\u51fa\u8a31\u53ef\u304c\u4e0b\u308a\u305f\u8ca8\u7269\u306f\u3001\u8239\u3084\u98db\u884c\u6a5f\u306b\u642d\u8f09\u3055\u308c\u307e\u3059\u3002FCL\u30b3\u30f3\u30c6\u30ca\u306fCY\uff08\u30b3\u30f3\u30c6\u30ca\u30e4\u30fc\u30c9\uff09\u304b\u3089\u3001LCL\u8ca8\u7269\u306fCFS\uff08\u30b3\u30f3\u30c6\u30ca\u30d5\u30ec\u30a4\u30c8\u30b9\u30c6\u30fc\u30b7\u30e7\u30f3\uff09\u304b\u3089\u672c\u8239\u3078\u3002\u822a\u7a7a\u8ca8\u7269\u306f\u822a\u7a7a\u4f1a\u793e\u306e\u4e0a\u5c4b\u304b\u3089\u98db\u884c\u6a5f\u3078\u642d\u8f09\u3055\u308c\u3001\u4ed5\u5411\u5730\u3078\u5411\u3051\u3066\u51fa\u767a\u3057\u307e\u3059\u3002' },\n 'modal-export-6': { title: '\u8f38\u51fa\u30b9\u30c6\u30c3\u30d76\uff1aB\/L\u767a\u884c & \u8f38\u9001\u7ba1\u7406', content: '\u672c\u8239\u51fa\u6e2f\u5f8c\u3001\u8239\u4f1a\u793e\u306f\u30de\u30b9\u30bf\u30fcB\/L\u3092\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306b\u767a\u884c\u3057\u3001\u305d\u308c\u3092\u53d7\u3051\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u304c\u8377\u4e3b\u306b\u5bfe\u3057\u3066\u30cf\u30a6\u30b9B\/L\u3092\u767a\u884c\u3057\u307e\u3059\u3002\u3053\u308c\u306f\u904b\u9001\u5951\u7d04\u306e\u8a3c\u62e0\u3067\u3042\u308a\u3001\u8ca8\u7269\u306e\u53d7\u9818\u66f8\u3067\u3059\u3002\u76ee\u7684\u5730\u5230\u7740\u307e\u3067\u8ca8\u7269\u306e\u52d5\u9759\u3092\u8ffd\u8de1\u3057\u3001\u73fe\u5730\u4ee3\u7406\u5e97\u306b\u8239\u7a4d\u66f8\u985e\u3092\u9001\u4ed8(Pre-alert)\u3057\u3066\u3001\u30b9\u30e0\u30fc\u30ba\u306a\u8f38\u5165\u901a\u95a2\u306e\u6e96\u5099\u3092\u3057\u307e\u3059\u3002' },\n 'modal-import-1': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d71\uff1aA\/N\u53d7\u9818 & \u66f8\u985e\u6e96\u5099', content: '\u8ca8\u7269\u5230\u7740\u524d\u3001\u8f38\u51fa\u5730\u306e\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u304b\u3089\u8239\u7a4d\u66f8\u985e\u304c\u5c4a\u304d\u3001\u73fe\u5730\u306e\u8239\u4f1a\u793e\u306a\u3069\u304b\u3089\u300c\u30a2\u30e9\u30a4\u30d0\u30eb\u30ce\u30fc\u30c6\u30a3\u30b9(A\/N: \u8ca8\u7269\u5230\u7740\u6848\u5185)\u300d\u304c\u767a\u884c\u3055\u308c\u307e\u3059\u3002A\/N\u306b\u306f\u904b\u8cc3\u3084\u8af8\u8cbb\u7528\u306e\u8acb\u6c42\u304c\u8a18\u8f09\u3055\u308c\u3066\u304a\u308a\u3001\u3053\u308c\u304c\u8f38\u5165\u30d7\u30ed\u30bb\u30b9\u958b\u59cb\u306e\u5408\u56f3\u3068\u306a\u308a\u307e\u3059\u3002\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u3053\u308c\u306b\u57fa\u3065\u304d\u8f38\u5165\u901a\u95a2\u306e\u6e96\u5099\u3092\u59cb\u3081\u307e\u3059\u3002' },\n 'modal-import-2': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d72\uff1a\u8377\u63da\u3052 & \u30c7\u30d0\u30f3\u30cb\u30f3\u30b0', content: '\u672c\u8239\u30fb\u822a\u7a7a\u6a5f\u304c\u5230\u7740\u5f8c\u3001\u8ca8\u7269\u304c\u8377\u63da\u3052\u3055\u308c\u307e\u3059\u3002FCL\u30b3\u30f3\u30c6\u30ca\u306fCY\u3078\u3001LCL\u8ca8\u7269\u306fCFS\u3078\u79fb\u9001\u3055\u308c\u307e\u3059\u3002LCL\u8ca8\u7269\u3084\u822a\u7a7a\u8ca8\u7269\u306f\u3001CFS\u3084\u5009\u5eab\u3067\u30b3\u30f3\u30c6\u30ca\u304b\u3089\u53d6\u308a\u51fa\u3055\u308c\uff08\u30c7\u30d0\u30f3\u30cb\u30f3\u30b0\uff09\u3001\u8f38\u5165\u8005\u3054\u3068\u306b\u4ed5\u5206\u3051\u3089\u308c\u307e\u3059\u3002' },\n 'modal-import-3': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d73\uff1a\u8f38\u5165\u7533\u544a & \u7d0d\u7a0e', content: '\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8377\u4e3b\u304b\u3089\u9810\u304b\u3063\u305f\u30a4\u30f3\u30dc\u30a4\u30b9\u3084B\/L\u306b\u57fa\u3065\u304d\u3001\u7a0e\u95a2\u306b\u8f38\u5165\uff08\u7d0d\u7a0e\uff09\u7533\u544a\u3092\u884c\u3044\u307e\u3059\u3002\u7533\u544a\u5185\u5bb9\u306b\u57fa\u3065\u304d\u7b97\u51fa\u3055\u308c\u305f\u95a2\u7a0e\u30fb\u6d88\u8cbb\u7a0e\u3092\u3001\u8377\u4e3b\u306b\u4ee3\u308f\u3063\u3066\u7d0d\u4ed8\u3059\u308b\u624b\u914d\u3092\u3057\u307e\u3059\u3002\u3053\u306e\u7d0d\u4ed8\u304c\u5b8c\u4e86\u3057\u306a\u3044\u3068\u8f38\u5165\u8a31\u53ef\u306f\u4e0b\u308a\u307e\u305b\u3093\u3002' },\n 'modal-import-4': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d74\uff1a\u8f38\u5165\u8a31\u53ef', content: '\u7a0e\u95a2\u304c\u7533\u544a\u5185\u5bb9\u3092\u5be9\u67fb\u3057\u3001\u5fc5\u8981\u3067\u3042\u308c\u3070\u691c\u67fb\u3092\u884c\u3044\u307e\u3059\u3002\u3059\u3079\u3066\u306e\u5be9\u67fb\u304c\u5b8c\u4e86\u3057\u3001\u95a2\u7a0e\u30fb\u6d88\u8cbb\u7a0e\u306e\u7d0d\u4ed8\u3082\u78ba\u8a8d\u3055\u308c\u308b\u3068\u3001\u7a0e\u95a2\u304b\u3089\u300c\u8f38\u5165\u8a31\u53ef\u66f8\u300d\u304c\u767a\u884c\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u3067\u8ca8\u7269\u3092\u56fd\u5185\u306b\u5f15\u304d\u53d6\u308b\u3053\u3068\u304c\u6cd5\u7684\u306b\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002' },\n 'modal-import-5': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d75\uff1aD\/O\u5165\u624b', content: '\u8f38\u5165\u8a31\u53ef\u5f8c\u3001\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306f\u8239\u4f1a\u793e\u306bB\/L\u539f\u672c\u3092\u5dee\u3057\u5165\u308c\u3001\u904b\u8cc3\u30fb\u8af8\u8cbb\u7528\u3092\u652f\u6255\u3044\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u8239\u4f1a\u793e\u306f\u300cD\/O\uff08Delivery Order: \u8ca8\u7269\u5f15\u6e21\u6307\u56f3\u66f8\uff09\u300d\u3092\u767a\u884c\u3057\u307e\u3059\u3002\u3053\u306eD\/O\u304c\u3001CY\u3084CFS\u304b\u3089\u8ca8\u7269\u3092\u5f15\u304d\u51fa\u3059\u305f\u3081\u306e\u300c\u9375\u300d\u3068\u306a\u308a\u307e\u3059\u3002' },\n 'modal-import-6': { title: '\u8f38\u5165\u30b9\u30c6\u30c3\u30d76\uff1a\u6700\u7d42\u914d\u9001', content: '\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u306fD\/O\u3068\u8f38\u5165\u8a31\u53ef\u66f8\u3092CY\u3084CFS\u306b\u63d0\u793a\u3057\u3066\u8ca8\u7269\u3092\u5f15\u304d\u53d6\u308a\u3001\u624b\u914d\u3057\u305f\u30c8\u30e9\u30c3\u30af\u3067\u8f38\u5165\u8005\u306e\u6307\u5b9a\u3059\u308b\u5de5\u5834\u3084\u5009\u5eab\u307e\u3067\u914d\u9001\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u3082\u3063\u3066\u3001\u4e00\u9023\u306e\u56fd\u969b\u8f38\u9001\u306f\u5b8c\u4e86\u3057\u307e\u3059\u3002' },\n };\n\n function createModal(id, title, content) {\n const modalContainer = container.querySelector('#modal-container-for-flow');\n const modalHTML = `\n <div id=\"${id}\" class=\"modal fixed inset-0 bg-black bg-opacity-50 z-50 justify-center items-center\">\n <div class=\"bg-white rounded-lg shadow-xl p-6 md:p-8 w-11\/12 md:max-w-2xl transform transition-all duration-300 scale-95 opacity-0\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl md:text-2xl font-bold text-gray-800\">${title}<\/h3>\n <button class=\"close-modal text-gray-500 hover:text-gray-800 text-3xl\">×<\/button>\n <\/div>\n <p class=\"text-gray-700\">${content}<\/p>\n <\/div>\n <\/div>`;\n modalContainer.insertAdjacentHTML('beforeend', modalHTML);\n const modal = modalContainer.querySelector(`#${id}`);\n const modalContent = modal.querySelector('.bg-white');\n \n requestAnimationFrame(() => {\n modal.classList.add('show');\n modalContent.classList.remove('scale-95', 'opacity-0');\n modalContent.classList.add('scale-100', 'opacity-100');\n });\n\n modal.querySelector('.close-modal').addEventListener('click', () => closeModal(modal));\n modal.addEventListener('click', (e) => {\n if (e.target === modal) {\n closeModal(modal);\n }\n });\n }\n \n function closeModal(modal) {\n const modalContent = modal.querySelector('.bg-white');\n modalContent.classList.add('scale-95', 'opacity-0');\n modalContent.classList.remove('scale-100', 'opacity-100');\n setTimeout(() => {\n modal.remove();\n }, 300);\n }\n\n container.querySelectorAll('.flow-step').forEach(step => {\n step.addEventListener('click', function() {\n const modalId = this.getAttribute('data-modal');\n const { title, content } = modalData[modalId];\n if (container.querySelector(`#${modalId}`)) return;\n createModal(modalId, title, content);\n });\n });\n\n const tabExportBtn = container.querySelector('#tab-export-btn');\n const tabImportBtn = container.querySelector('#tab-import-btn');\n const tabExportContent = container.querySelector('#tab-export-content');\n const tabImportContent = container.querySelector('#tab-import-content');\n\n tabExportBtn.addEventListener('click', () => {\n tabExportBtn.classList.add('active');\n tabImportBtn.classList.remove('active');\n tabExportContent.classList.remove('hidden');\n tabImportContent.classList.add('hidden');\n });\n\n tabImportBtn.addEventListener('click', () => {\n tabImportBtn.classList.add('active');\n tabExportBtn.classList.remove('active');\n tabImportContent.classList.remove('hidden');\n tabExportContent.classList.add('hidden');\n });\n\n const transportChartCtx = container.querySelector('#transportChart').getContext('2d');\n const seaData = { labels: ['\u30b3\u30b9\u30c8', '\u30b9\u30d4\u30fc\u30c9', '\u8f38\u9001\u80fd\u529b'], datasets: [{ label: '\u6d77\u4e0a\u8f38\u9001', data: [2, 1, 10], backgroundColor: 'rgba(59, 130, 246, 0.6)', borderColor: 'rgba(59, 130, 246, 1)', borderWidth: 1 }] };\n const airData = { labels: ['\u30b3\u30b9\u30c8', '\u30b9\u30d4\u30fc\u30c9', '\u8f38\u9001\u80fd\u529b'], datasets: [{ label: '\u822a\u7a7a\u8f38\u9001', data: [9, 10, 2], backgroundColor: 'rgba(16, 185, 129, 0.6)', borderColor: 'rgba(16, 185, 129, 1)', borderWidth: 1 }] };\n const transportChart = new Chart(transportChartCtx, { type: 'bar', data: seaData, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, suggestedMax: 10, ticks: { display: false } } }, plugins: { legend: { display: false }, tooltip: { enabled: false } } } }); \n \n const transportDetails = container.querySelector('#transport-details');\n const seaBtn = container.querySelector('#sea-btn');\n const airBtn = container.querySelector('#air-btn');\n\n seaBtn.addEventListener('click', () => {\n transportChart.data = seaData;\n transportChart.update();\n transportDetails.innerHTML = `<h4 class=\"text-xl font-bold mb-2 text-blue-700\">\u6d77\u4e0a\u8f38\u9001<\/h4><p class=\"text-gray-700\">\u5727\u5012\u7684\u306a\u30b3\u30b9\u30c8\u52b9\u7387\u3068\u8f38\u9001\u80fd\u529b\u304c\u9b45\u529b\u3002\u5927\u91cf\u306e\u8ca8\u7269\u3084\u7dca\u6025\u6027\u306e\u306a\u3044\u5546\u54c1\u306e\u8f38\u9001\u306b\u6700\u9069\u3067\u3059\u304c\u3001\u8f38\u9001\u306b\u306f\u6570\u9031\u9593\u4ee5\u4e0a\u304b\u304b\u308a\u307e\u3059\u3002<\/p><ul class=\"mt-4 space-y-2\"><li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u30b3\u30b9\u30c8\u304c\u4f4e\u3044<\/li><li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u5927\u91cf\u30fb\u5927\u578b\u8ca8\u7269\u306b\u5bfe\u5fdc<\/li><li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u30b9\u30d4\u30fc\u30c9\u304c\u9045\u3044<\/li><li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u8ca8\u7269\u640d\u50b7\u30ea\u30b9\u30af\u304c\u6bd4\u8f03\u7684\u9ad8<\/li><\/ul>`;\n seaBtn.classList.replace('bg-gray-300', 'bg-blue-500');\n seaBtn.classList.replace('text-gray-700', 'text-white');\n airBtn.classList.replace('bg-blue-500', 'bg-gray-300');\n airBtn.classList.replace('text-white', 'text-gray-700');\n });\n\n airBtn.addEventListener('click', () => {\n transportChart.data = airData;\n transportChart.update();\n transportDetails.innerHTML = `<h4 class=\"text-xl font-bold mb-2 text-emerald-700\">\u822a\u7a7a\u8f38\u9001<\/h4><p class=\"text-gray-700\">\u5727\u5012\u7684\u306a\u30b9\u30d4\u30fc\u30c9\u304c\u6700\u5927\u306e\u5229\u70b9\u3002\u7d0d\u671f\u304c\u53b3\u3057\u3044\u88fd\u54c1\u3001\u9ad8\u4fa1\u54c1\u3001\u751f\u9bae\u98df\u54c1\u306a\u3069\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002\u30b3\u30b9\u30c8\u306f\u9ad8\u304f\u306a\u308a\u307e\u3059\u304c\u3001\u5b89\u5168\u6027\u3082\u9ad8\u3044\u3067\u3059\u3002<\/p><ul class=\"mt-4 space-y-2\"><li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u30b9\u30d4\u30fc\u30c9\u304c\u901f\u3044<\/li><li class=\"flex items-center\"><span class=\"text-green-500 mr-2\">\u2713<\/span>\u5b89\u5168\u6027\u304c\u9ad8\u3044<\/li><li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u30b3\u30b9\u30c8\u304c\u9ad8\u3044<\/li><li class=\"flex items-center\"><span class=\"text-red-500 mr-2\">\u2717<\/span>\u8f38\u9001\u80fd\u529b\u306b\u5236\u9650\u3042\u308a<\/li><\/ul>`;\n airBtn.classList.replace('bg-gray-300', 'bg-blue-500');\n airBtn.classList.replace('text-gray-700', 'text-white');\n seaBtn.classList.replace('bg-blue-500', 'bg-gray-300');\n seaBtn.classList.replace('text-white', 'text-gray-700');\n });\n\n const lclChartCtx = container.querySelector('#lclChart').getContext('2d');\n new Chart(lclChartCtx, { type: 'doughnut', data: { labels: ['\u6d77\u4e0a\u904b\u8cc3', 'CFS\u30c1\u30e3\u30fc\u30b8', '\u305d\u306e\u4ed6\u8af8\u8cbb\u7528'], datasets: [{ data: [60, 25, 15], backgroundColor: ['#60a5fa', '#93c5fd', '#bfdbfe'], hoverOffset: 4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12 } } } } });\n\n const accordionItems = container.querySelectorAll('.accordion-item');\n accordionItems.forEach(item => {\n const header = item.querySelector('.accordion-header');\n const content = item.querySelector('.accordion-content');\n const icon = header.querySelector('span');\n header.addEventListener('click', () => {\n const isClosing = content.style.maxHeight;\n accordionItems.forEach(otherItem => {\n otherItem.querySelector('.accordion-content').style.maxHeight = null;\n otherItem.querySelector('.accordion-header span').style.transform = 'rotate(0deg)';\n });\n if (!isClosing) {\n content.style.maxHeight = content.scrollHeight + \"px\";\n icon.style.transform = 'rotate(180deg)';\n }\n });\n });\n \n const flowGoods = container.querySelector('#flow-goods');\n const flowDocs = container.querySelector('#flow-docs');\n const flowMoney = container.querySelector('#flow-money');\n\n flowGoods.addEventListener('mouseenter', () => { flowGoods.classList.add('border-blue-400', 'shadow-lg'); flowDocs.classList.add('border-blue-400'); });\n flowGoods.addEventListener('mouseleave', () => { flowGoods.classList.remove('border-blue-400', 'shadow-lg'); flowDocs.classList.remove('border-blue-400'); });\n flowDocs.addEventListener('mouseenter', () => { flowDocs.classList.add('border-blue-400', 'shadow-lg'); flowGoods.classList.add('border-blue-400'); flowMoney.classList.add('border-blue-400'); });\n flowDocs.addEventListener('mouseleave', () => { flowDocs.classList.remove('border-blue-400', 'shadow-lg'); flowGoods.classList.remove('border-blue-400'); flowMoney.classList.remove('border-blue-400'); });\n flowMoney.addEventListener('mouseenter', () => { flowMoney.classList.add('border-blue-400', 'shadow-lg'); flowDocs.classList.add('border-blue-400'); });\n flowMoney.addEventListener('mouseleave', () => { flowMoney.classList.remove('border-blue-400', 'shadow-lg'); flowDocs.classList.remove('border-blue-400'); });\n\n container.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const targetElement = container.querySelector(this.getAttribute('href'));\n if(targetElement) {\n targetElement.scrollIntoView({ behavior: 'smooth' });\n }\n });\n });\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u56fd\u969b\u7269\u6d41\u30d5\u30ed\u30fc | \u30d5\u30ec\u30a4\u30c8\u30d5\u30a9\u30ef\u30fc\u30c0\u30fc\u696d\u52d9\u89e3\u8aac \u56fd\u969b\u7269\u6d41\u306e\u7f85\u91dd\u76e4 \u30d7\u30ec\u30a4\u30e4\u30fc \u696d\u52d9\u30d5\u30ed\u30fc \u6226\u7565\u7684\u9078\u629e \uff13\u3064\u306e\u6d41\u308c \u672a\u6765\u306e\u59ff \u3088\u3046\u3053\u305d\u3001\u56fd\u969b\u7269\u6d41\u306e\u4e16\u754c\u3078 \u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u30d3\u30b8\u30cd\u30b9\u306e\u751f\u547d\u7dda […]<\/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-1318","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1318","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=1318"}],"version-history":[{"count":3,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1318\/revisions"}],"predecessor-version":[{"id":1351,"href":"https:\/\/plus-fwd.com\/index.php?rest_route=\/wp\/v2\/pages\/1318\/revisions\/1351"}],"wp:attachment":[{"href":"https:\/\/plus-fwd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}