Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb<\/title>\n <style>\n \/* \u5171\u901a\u30b9\u30bf\u30a4\u30eb *\/\n :root {\n --dark-bg: #1a1a1a;\n --dark-secondary: #252525;\n --dark-header: #2d2d2d;\n --accent-color: #3498db;\n --accent-color-hover: #2980b9;\n --red-accent: #e74c3c;\n --red-accent-hover: #c0392b;\n --text-primary: #f0f0f0;\n --text-secondary: #aaaaaa;\n --border-color: #444;\n --chart-bg: rgba(52, 152, 219, 0.3);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background-color: var(--dark-bg);\n color: var(--text-primary);\n min-height: 100vh;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 15px;\n width: 100%;\n flex: 1;\n }\n \n \/* \u30d8\u30c3\u30c0\u30fc *\/\n .site-header {\n background-color: var(--dark-header);\n padding: 15px 0;\n border-bottom: 2px solid var(--accent-color);\n position: sticky;\n top: 0;\n z-index: 1000;\n }\n \n .header-inner {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 15px;\n max-width: 1400px;\n margin: 0 auto;\n }\n \n .site-title {\n font-size: 1.5rem;\n color: var(--text-primary);\n text-decoration: none;\n margin: 0;\n }\n \n .header-right {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .exchange-rate {\n background-color: rgba(0, 0, 0, 0.3);\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 0.9rem;\n }\n \n \/* \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30bf\u30d6 *\/\n .nav-tabs {\n display: flex;\n border-bottom: 1px solid var(--border-color);\n margin-top: 20px;\n margin-bottom: 20px;\n overflow-x: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) var(--dark-secondary);\n }\n \n .nav-tabs::-webkit-scrollbar {\n height: 6px;\n }\n \n .nav-tabs::-webkit-scrollbar-track {\n background: var(--dark-secondary);\n }\n \n .nav-tabs::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 10px;\n }\n \n .nav-tab {\n padding: 12px 24px;\n cursor: pointer;\n color: var(--text-secondary);\n background-color: transparent;\n border: none;\n font-size: 16px;\n white-space: nowrap;\n transition: all 0.2s ease;\n }\n \n .nav-tab:hover {\n color: var(--text-primary);\n background-color: rgba(255, 255, 255, 0.05);\n }\n \n .nav-tab.active {\n color: var(--accent-color);\n font-weight: bold;\n border-bottom: 3px solid var(--accent-color);\n }\n \n \/* \u30b3\u30f3\u30c6\u30f3\u30c4\u30bb\u30af\u30b7\u30e7\u30f3 *\/\n .content-section {\n display: none;\n padding: 20px 0;\n }\n \n .content-section.active {\n display: block;\n }\n \n \/* \u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30d4\u30ca\u30fc *\/\n .loading-spinner {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100px;\n color: var(--text-secondary);\n }\n \n .spinner {\n border: 4px solid rgba(255, 255, 255, 0.1);\n border-left-color: var(--accent-color);\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: spin 1s linear infinite;\n margin-right: 15px;\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n \/* \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8 *\/\n .error-message {\n background-color: rgba(231, 76, 60, 0.2);\n border: 1px solid var(--red-accent);\n color: var(--text-primary);\n padding: 15px 20px;\n border-radius: 6px;\n margin: 20px 0;\n }\n \n .error-actions {\n margin-top: 10px;\n display: flex;\n gap: 10px;\n }\n \n \/* \u30dc\u30bf\u30f3\u30b9\u30bf\u30a4\u30eb *\/\n .btn {\n padding: 8px 16px;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s;\n }\n \n .btn-primary {\n background-color: var(--accent-color);\n color: white;\n }\n \n .btn-primary:hover {\n background-color: var(--accent-color-hover);\n }\n \n .btn-danger {\n background-color: var(--red-accent);\n color: white;\n }\n \n .btn-danger:hover {\n background-color: var(--red-accent-hover);\n }\n \n \/* \u30d5\u30a3\u30eb\u30bf\u30fc\u30d1\u30cd\u30eb\u5171\u901a *\/\n .filter-panel {\n background-color: var(--dark-secondary);\n padding: 15px;\n border-radius: 6px;\n margin-bottom: 20px;\n }\n \n .filter-section {\n margin-bottom: 15px;\n }\n \n .filter-title {\n font-size: 1rem;\n font-weight: bold;\n margin-bottom: 10px;\n color: var(--text-primary);\n padding-bottom: 5px;\n border-bottom: 1px solid var(--border-color);\n }\n \n .filter-row {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n margin-bottom: 10px;\n }\n \n \/* \u691c\u7d22\u5165\u529b *\/\n .search-input {\n padding: 8px 12px;\n background-color: var(--dark-bg);\n border: 1px solid var(--border-color);\n border-radius: 4px;\n color: var(--text-primary);\n width: 100%;\n max-width: 300px;\n }\n \n \/* \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9 *\/\n .checkbox-group {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n }\n \n .checkbox-item {\n display: flex;\n align-items: center;\n margin-right: 15px;\n }\n \n .checkbox-item input[type=\"checkbox\"] {\n margin-right: 5px;\n accent-color: var(--accent-color);\n }\n \n \/* \u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9 *\/\n .select-input {\n padding: 8px 12px;\n background-color: var(--dark-bg);\n border: 1px solid var(--border-color);\n border-radius: 4px;\n color: var(--text-primary);\n min-width: 150px;\n }\n \n \/* \u30c6\u30fc\u30d6\u30eb\u5171\u901a\u30b9\u30bf\u30a4\u30eb *\/\n .table-container {\n background-color: var(--dark-secondary);\n border-radius: 6px;\n overflow-x: auto;\n position: relative;\n margin-bottom: 20px;\n }\n \n table {\n width: 100%;\n border-collapse: collapse;\n min-width: 800px;\n }\n \n th {\n background-color: var(--dark-header);\n color: var(--text-primary);\n padding: 12px 15px;\n text-align: left;\n position: sticky;\n top: 0;\n z-index: 1;\n white-space: nowrap;\n border-bottom: 1px solid var(--border-color);\n }\n \n td {\n padding: 10px 15px;\n border-bottom: 1px solid var(--dark-header);\n }\n \n tbody tr:hover {\n background-color: rgba(255, 255, 255, 0.05);\n }\n \n \/* \u8239\u60c5\u5831\u30ea\u30b9\u30c8\u56fa\u6709\u30b9\u30bf\u30a4\u30eb *\/\n .ships-section .table-container {\n max-height: 70vh;\n overflow-y: auto;\n }\n \n .ship-image {\n width: 80px;\n height: 50px;\n object-fit: cover;\n border-radius: 4px;\n }\n \n \/* CCU\u30d5\u30a1\u30a4\u30f3\u30c0\u30fc\u56fa\u6709\u30b9\u30bf\u30a4\u30eb *\/\n .ccu-section .table-container {\n max-height: 400px;\n }\n \n .route-display {\n background-color: var(--dark-secondary);\n padding: 20px;\n border-radius: 6px;\n margin-top: 20px;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 20px;\n justify-content: center;\n position: relative;\n }\n \n .route-item {\n text-align: center;\n min-width: 200px;\n }\n \n .route-image {\n width: 180px;\n height: 120px;\n object-fit: cover;\n border-radius: 8px;\n margin-bottom: 10px;\n }\n \n .route-item.warbond .route-image {\n border: 2px solid var(--red-accent);\n }\n \n .route-name {\n font-size: 1.2rem;\n margin-bottom: 5px;\n font-weight: bold;\n }\n \n .route-price {\n color: var(--text-secondary);\n }\n \n .route-arrow {\n font-size: 2rem;\n color: var(--accent-color);\n }\n \n .route-savings {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: var(--red-accent);\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-weight: bold;\n }\n \n .savings-badge {\n background-color: var(--red-accent);\n color: white;\n font-size: 0.7rem;\n padding: 2px 5px;\n border-radius: 3px;\n margin-left: 5px;\n vertical-align: middle;\n }\n \n .positive-value {\n color: #2ecc71;\n font-weight: bold;\n }\n \n .negative-value {\n color: var(--red-accent);\n font-weight: bold;\n }\n \n .zero-value {\n color: var(--text-secondary);\n }\n \n \/* \u62e1\u5927\u7e2e\u5c0f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc *\/\n .zoom-controller {\n position: fixed;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n background-color: rgba(45, 45, 45, 0.85);\n border-radius: 25px;\n padding: 10px 20px;\n display: flex;\n align-items: center;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(5px);\n z-index: 100;\n }\n \n .zoom-out, .zoom-in {\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--dark-header);\n color: var(--text-primary);\n border: none;\n border-radius: 50%;\n font-size: 18px;\n cursor: pointer;\n }\n \n .zoom-slider {\n width: 120px;\n margin: 0 15px;\n }\n \n .zoom-value {\n min-width: 60px;\n text-align: center;\n color: var(--text-primary);\n }\n \n \/* \u30d5\u30c3\u30bf\u30fc *\/\n .site-footer {\n background-color: var(--dark-header);\n padding: 15px 0;\n text-align: center;\n color: var(--text-secondary);\n margin-top: 30px;\n font-size: 0.9rem;\n }\n \n \/* \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 *\/\n @media (max-width: 768px) {\n .header-inner {\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n }\n \n .header-right {\n width: 100%;\n justify-content: space-between;\n }\n \n .filter-row {\n flex-direction: column;\n gap: 10px;\n }\n \n .search-input {\n max-width: 100%;\n }\n \n .route-display {\n flex-direction: column;\n }\n \n .route-arrow {\n transform: rotate(90deg);\n }\n \n .route-savings {\n position: static;\n margin-bottom: 15px;\n text-align: center;\n width: 100%;\n }\n \n .zoom-controller {\n width: 90%;\n }\n \n .ships-section .table-container,\n .ccu-section .table-container {\n max-height: 50vh;\n }\n }\n\n \/* Discord\u52e7\u8a98\u30e1\u30c3\u30bb\u30fc\u30b8 *\/\n .discord-banner {\n background: linear-gradient(135deg, #7289da 0%, #5865F2 100%);\n padding: 10px 20px;\n margin-bottom: 15px;\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(114, 137, 218, 0.3);\n text-align: center;\n }\n \n .discord-banner a {\n color: white;\n text-decoration: underline;\n }\n <\/style>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n<\/head>\n<body>\n <header class=\"site-header\">\n <div class=\"header-inner\">\n <h1 class=\"site-title\">Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb<\/h1>\n <div class=\"header-right\">\n <div class=\"exchange-rate\" id=\"exchange-rate\">1 USD = <span id=\"rate-value\">150.00<\/span> JPY<\/div>\n <button class=\"btn btn-primary\" id=\"refresh-data-btn\">\u30c7\u30fc\u30bf\u3092\u66f4\u65b0<\/button>\n <\/div>\n <\/div>\n <\/header>\n \n <div class=\"container\">\n \n <div class=\"discord-banner\">\n <span style=\"color: white; font-size: 14px; font-weight: bold;\">\u7dcf\u5408\u30b2\u30fc\u30e0\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u7121\u6599Discord\uff1a<a href=\"https:\/\/discord.com\/invite\/FtwZKhZvPD\" target=\"_blank\">https:\/\/discord.com\/invite\/FtwZKhZvPD<\/a> \u3069\u306a\u305f\u3067\u3082\u53c2\u52a0\u6b53\u8fce\uff08<span id=\"current-date\">2025\u5e745\u6708<\/span>\u73fe\u5728\u7d046500\u4eba\u304c\u53c2\u52a0\u4e2d\uff09<\/span>\n <\/div>\n \n \n <div class=\"nav-tabs\">\n <button class=\"nav-tab active\" data-section=\"ships-section\">\u8239\u60c5\u5831\u30ea\u30b9\u30c8<\/button>\n <button class=\"nav-tab\" data-section=\"ccu-section\">CCU\u7d4c\u8def\u30d5\u30a1\u30a4\u30f3\u30c0\u30fc<\/button>\n <button class=\"nav-tab\" data-section=\"help-section\">\u4f7f\u3044\u65b9\u30ac\u30a4\u30c9<\/button>\n <\/div>\n \n \n <div id=\"error-container\" style=\"display: none;\"><\/div>\n \n \n <div id=\"ships-section\" class=\"content-section ships-section active\">\n <div class=\"loading-spinner\" id=\"ships-loading\">\n <div class=\"spinner\"><\/div>\n <span>\u8239\u306e\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u307f\u4e2d…<\/span>\n <\/div>\n \n <div class=\"filter-panel\">\n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u8239\u540d\u3067\u691c\u7d22<\/h3>\n <div class=\"filter-row\">\n <input type=\"text\" id=\"ships-search\" class=\"search-input\" placeholder=\"\u8239\u540d\u3001\u5f79\u5272\u3001\u88fd\u9020\u4f1a\u793e\u306a\u3069...\">\n <button class=\"btn btn-danger\" id=\"ships-reset-btn\">\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u30ea\u30bb\u30c3\u30c8<\/button>\n <\/div>\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u57fa\u672c\u30d5\u30a3\u30eb\u30bf\u30fc<\/h3>\n <div class=\"checkbox-group\">\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-spaceships\" checked>\n <label for=\"show-spaceships\">\u5b87\u5b99\u8239\u3092\u8868\u793a<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-vehicles\" checked>\n <label for=\"show-vehicles\">\u5730\u4e0a\u8eca\u4e21\u3092\u8868\u793a<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-qt-capable\" checked>\n <label for=\"show-qt-capable\">QT\u53ef\u80fd<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-qt-incapable\" checked>\n <label for=\"show-qt-incapable\">QT\u4e0d\u53ef<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u30d5\u30a3\u30eb\u30bf\u30fc<\/h3>\n <div class=\"filter-row\">\n <select id=\"manufacturer-filter\" class=\"select-input\">\n <option value=\"\">\u3059\u3079\u3066\u306e\u88fd\u9020\u4f1a\u793e<\/option>\n <\/select>\n <select id=\"role-filter\" class=\"select-input\">\n <option value=\"\">\u3059\u3079\u3066\u306e\u5f79\u5272<\/option>\n <\/select>\n <select id=\"status-filter\" class=\"select-input\">\n <option value=\"\">\u3059\u3079\u3066\u306e\u88fd\u9020\u72b6\u6cc1<\/option>\n <\/select>\n <select id=\"availability-filter\" class=\"select-input\">\n <option value=\"\">\u3059\u3079\u3066\u306e\u8cfc\u5165\u53ef\u5426<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u8868\u793a\u3059\u308b\u5217<\/h3>\n <div class=\"checkbox-group\" id=\"ships-columns\">\n \n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"table-container\" id=\"ships-table-container\">\n <table id=\"ships-table\">\n <thead>\n <tr id=\"ships-table-header\">\n \n <\/tr>\n <\/thead>\n <tbody id=\"ships-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n \n \n <div class=\"zoom-controller\" id=\"ships-zoom-controller\">\n <button class=\"zoom-out\" id=\"ships-zoom-out\">\u2212<\/button>\n <input type=\"range\" class=\"zoom-slider\" id=\"ships-zoom-slider\" min=\"50\" max=\"150\" value=\"100\">\n <div class=\"zoom-value\" id=\"ships-zoom-value\">100%<\/div>\n <button class=\"zoom-in\" id=\"ships-zoom-in\">\uff0b<\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"ccu-section\" class=\"content-section ccu-section\">\n <div class=\"loading-spinner\" id=\"ccu-loading\">\n <div class=\"spinner\"><\/div>\n <span>CCU\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u307f\u4e2d…<\/span>\n <\/div>\n \n <div class=\"filter-panel\">\n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u8239\u540d\u3067\u691c\u7d22<\/h3>\n <input type=\"text\" id=\"ccu-search\" class=\"search-input\" placeholder=\"From\/To\u8239\u540d\u3092\u5165\u529b...\">\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u30d5\u30a3\u30eb\u30bf\u30fc<\/h3>\n <div class=\"checkbox-group\">\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-saving\">\n <label for=\"show-saving\">\u7bc0\u7d04\u3042\u308a<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-warbond\">\n <label for=\"show-warbond\">Warbond\u306e\u307f<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-negative-saving\">\n <label for=\"show-negative-saving\">\u30de\u30a4\u30ca\u30b9\u5024\u3092\u542b\u3080<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">Pledge\u91d1\u984d\u7bc4\u56f2<\/h3>\n <div class=\"filter-row\">\n <input type=\"number\" id=\"pledge-min\" class=\"search-input\" placeholder=\"\u6700\u5c0f\" value=\"0\" min=\"0\">\n <span>\u301c<\/span>\n <input type=\"number\" id=\"pledge-max\" class=\"search-input\" placeholder=\"\u6700\u5927\" value=\"1000\" min=\"0\">\n <button class=\"btn btn-danger\" id=\"ccu-reset-btn\">\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u30ea\u30bb\u30c3\u30c8<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"table-container\">\n <table id=\"ccu-table\">\n <thead>\n <tr>\n <th>\u753b\u50cf<\/th>\n <th>\u6570\u91cf<\/th>\n <th>From<\/th>\n <th>To<\/th>\n <th>Pledge ($)<\/th>\n <th>\u7bc0\u7d04\u984d ($)<\/th>\n <th>Warbond<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"ccu-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n \n <div class=\"route-display\" id=\"ccu-route-display\">\n <p style=\"text-align: center; color: var(--text-secondary);\">\u4e0a\u306e\u30c6\u30fc\u30d6\u30eb\u304b\u3089CCU\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n <\/div>\n <\/div>\n \n \n <div id=\"help-section\" class=\"content-section help-section\">\n <h2 style=\"margin-bottom: 20px;\">Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb\u306e\u4f7f\u3044\u65b9<\/h2>\n \n <div style=\"background-color: var(--dark-secondary); padding: 20px; border-radius: 6px; margin-bottom: 20px;\">\n <h3 style=\"margin-bottom: 10px;\">\u8239\u60c5\u5831\u30ea\u30b9\u30c8<\/h3>\n <p>Star Citizen\u3067\u5229\u7528\u53ef\u80fd\u306a\u3059\u3079\u3066\u306e\u8239\u3068\u5730\u4e0a\u8eca\u4e21\u306e\u8a73\u7d30\u60c5\u5831\u3092\u95b2\u89a7\u3067\u304d\u307e\u3059\u3002<\/p>\n <ul style=\"margin: 15px 0 15px 20px; line-height: 1.6;\">\n <li><strong>\u691c\u7d22:<\/strong> \u8239\u540d\u3001\u5f79\u5272\u3001\u88fd\u9020\u4f1a\u793e\u306a\u3069\u3067\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3067\u304d\u307e\u3059<\/li>\n <li><strong>\u57fa\u672c\u30d5\u30a3\u30eb\u30bf\u30fc:<\/strong> \u5b87\u5b99\u8239\/\u5730\u4e0a\u8eca\u4e21\u306e\u8868\u793a\u3001QT\u6a5f\u80fd\u306e\u6709\u7121\u3067\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0<\/li>\n <li><strong>\u8868\u793a\u5217\u306e\u9078\u629e:<\/strong> \u8868\u793a\u3057\u305f\u3044\u60c5\u5831\u5217\u306e\u307f\u3092\u9078\u629e\u53ef\u80fd<\/li>\n <li><strong>\u62e1\u5927\u7e2e\u5c0f:<\/strong> \u8868\u793a\u30b5\u30a4\u30ba\u3092\u8abf\u6574\u3057\u3066\u898b\u3084\u3059\u304f\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/li>\n <\/ul>\n <\/div>\n \n <div style=\"background-color: var(--dark-secondary); padding: 20px; border-radius: 6px; margin-bottom: 20px;\">\n <h3 style=\"margin-bottom: 10px;\">CCU\u7d4c\u8def\u30d5\u30a1\u30a4\u30f3\u30c0\u30fc<\/h3>\n <p>Cross-Chassis Upgrade (CCU)\u306e\u6700\u9069\u306a\u7d4c\u8def\u3092\u898b\u3064\u3051\u3066\u7bc0\u7d04\u3059\u308b\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n <ul style=\"margin: 15px 0 15px 20px; line-height: 1.6;\">\n <li><strong>\u691c\u7d22:<\/strong> \u7279\u5b9a\u306e\u8239\u9593\u306eCCU\u3092\u691c\u7d22<\/li>\n <li><strong>\u30d5\u30a3\u30eb\u30bf\u30fc:<\/strong> \u7bc0\u7d04\u984d\u3084Warbond\u3067\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0<\/li>\n <li><strong>\u4fa1\u683c\u7bc4\u56f2:<\/strong> \u4e88\u7b97\u306b\u5408\u308f\u305b\u305fCCU\u3092\u63a2\u305b\u307e\u3059<\/li>\n <li><strong>\u7d4c\u8def\u8868\u793a:<\/strong> \u9078\u629e\u3057\u305fCCU\u306e\u8a73\u7d30\u3092\u8996\u899a\u7684\u306b\u78ba\u8a8d<\/li>\n <\/ul>\n <p><em>\u6ce8\u610f: CCU\u30b7\u30b9\u30c6\u30e0\u306f\u30b2\u30fc\u30e0\u5185\u3067\u5909\u66f4\u3055\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u5e38\u306b\u516c\u5f0f\u60c5\u5831\u3082\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/em><\/p>\n <\/div>\n \n <div style=\"background-color: var(--dark-secondary); padding: 20px; border-radius: 6px;\">\n <h3 style=\"margin-bottom: 10px;\">\u66f4\u65b0\u60c5\u5831<\/h3>\n <p>\u30c7\u30fc\u30bf\u306f\u5b9a\u671f\u7684\u306b\u66f4\u65b0\u3055\u308c\u307e\u3059\u304c\u3001\u6700\u65b0\u306e\u60c5\u5831\u3068\u4e00\u81f4\u3057\u306a\u3044\u5834\u5408\u306f\u300c\u30c7\u30fc\u30bf\u3092\u66f4\u65b0\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n <p style=\"margin-top: 10px;\">\u4e0d\u5177\u5408\u3084\u6a5f\u80fd\u8981\u671b\u306fDiscord\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3067\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <footer class=\"site-footer\">\n <p>© 2025 Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb | \u60c5\u5831\u306f\u53c2\u8003\u7528\u9014\u3067\u3059\u3002\u6b63\u78ba\u306a\u60c5\u5831\u306f<a href=\"https:\/\/robertsspaceindustries.com\/\" target=\"_blank\" style=\"color: var(--accent-color);\">\u516c\u5f0f\u30b5\u30a4\u30c8<\/a>\u3067\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ =====================================\n \/\/ \u521d\u671f\u8a2d\u5b9a\u3068\u5171\u901a\u5909\u6570\n \/\/ =====================================\n \n \/\/ API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8 - \u30c7\u30d7\u30ed\u30a4\u5f8c\u306b\u66f4\u65b0\n const API_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwv5NL-3DvRGuni3JF2r6vvIGTtfve1ZB5YEIyoY-TyGtMyh5RyMIljNLmgWmUuSC4\/exec';\n \n \/\/ \u5171\u901a\u30c7\u30fc\u30bf\n let exchangeRate = 150.00;\n let shipsData = [];\n let ccuData = [];\n let filteredShipsData = [];\n let filteredCcuData = [];\n \n \/\/ \u8239\u60c5\u5831\u30ea\u30b9\u30c8\u306e\u5217\u5b9a\u7fa9\n const shipsColumns = [\n { id: 'select', label: '\u9078\u629e', defaultVisible: true, width: '40px' },\n { id: 'image', label: '\u753b\u50cf', defaultVisible: true, width: '120px' },\n { id: 'name', label: '\u8239\u540d', defaultVisible: true, width: '180px' },\n { id: 'manufacturer', label: '\u88fd\u9020\u4f1a\u793e', defaultVisible: false },\n { id: 'role', label: '\u5f79\u5272', defaultVisible: true },\n { id: 'status', label: '\u88fd\u9020\u72b6\u6cc1', defaultVisible: true },\n { id: 'availability', label: '\u8cfc\u5165\u306e\u53ef\u5426', defaultVisible: true },\n { id: 'qtCapable', label: 'QT\u6a5f\u80fd', defaultVisible: false },\n { id: 'pledge', label: 'Pledge $', defaultVisible: true },\n { id: 'origPledge', label: 'Orig pledge $', defaultVisible: false },\n { id: 'warbond', label: 'Warbond $', defaultVisible: true },\n { id: 'origWarbond', label: 'Orig warbond $', defaultVisible: false },\n { id: 'loaner', label: '\u672a\u5b9f\u88c5\u6642\u4ee3\u66ff\u8239', defaultVisible: true },\n { id: 'ingamePrice', label: '\u30b2\u30fc\u30e0\u5185\u4fa1\u683c', defaultVisible: true },\n { id: 'rentalPrice', label: '\u5e73\u5747\u30ec\u30f3\u30bf\u30eb\u4fa1\u683c\/\u65e5', defaultVisible: true },\n { id: 'length', label: '\u5168\u9577', defaultVisible: true },\n { id: 'width', label: '\u5168\u5e45', defaultVisible: false },\n { id: 'height', label: '\u9ad8\u3055', defaultVisible: false },\n { id: 'cargo', label: 'Cargo', defaultVisible: true },\n { id: 'scmSpeed', label: 'SCM speed', defaultVisible: true },\n { id: 'maxSpeed', label: 'Max speed', defaultVisible: true },\n { id: 'pledgeJpy', label: '\u5186\u4fa1\u683c(Pledge\u5186)', defaultVisible: false }\n ];\n \n \/\/ \u5217\u306e\u8868\u793a\u72b6\u614b\n let columnVisibility = {};\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30fc\u72b6\u614b\u306e\u521d\u671f\u5316\n shipsColumns.forEach(column => {\n columnVisibility[column.id] = column.defaultVisible;\n });\n \n \/\/ \u9078\u629e\u3055\u308c\u305f\u8239ID\u3092\u4fdd\u6301\n let selectedShipIds = [];\n \n \/\/ \u73fe\u5728\u306e\u30ba\u30fc\u30e0\u7387\n let currentZoom = 100;\n \n \/\/ =====================================\n \/\/ \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u95a2\u6570\n \/\/ =====================================\n \n \/\/ \u73fe\u5728\u306e\u65e5\u4ed8\u3092\u8868\u793a\n function updateCurrentDate() {\n const now = new Date();\n const year = now.getFullYear();\n const month = now.getMonth() + 1;\n const dateText = `${year}\u5e74${month}\u6708`;\n document.getElementById('current-date').textContent = dateText;\n }\n \n \/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\n function showError(message, retryFn = null) {\n const errorContainer = document.getElementById('error-container');\n errorContainer.innerHTML = `\n <div class=\"error-message\">\n <p>${message}<\/p>\n ${retryFn ? '<div class=\"error-actions\"><button class=\"btn btn-primary\" id=\"retry-btn\">\u518d\u8a66\u884c<\/button><\/div>' : ''}\n <\/div>\n `;\n errorContainer.style.display = 'block';\n \n if (retryFn) {\n document.getElementById('retry-btn').addEventListener('click', function() {\n errorContainer.style.display = 'none';\n retryFn();\n });\n }\n }\n \n \/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u975e\u8868\u793a\n function hideError() {\n document.getElementById('error-container').style.display = 'none';\n }\n \n \/\/ API\u547c\u3073\u51fa\u3057\u95a2\u6570\uff08\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u4ed8\u304d\uff09\n async function fetchFromApi(action, timeout = 10000) {\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), timeout);\n \n try {\n const response = await fetch(`${API_URL}?action=${action}&nocache=${Date.now()}`, {\n signal: controller.signal,\n mode: 'cors',\n cache: 'no-store'\n });\n \n clearTimeout(timeoutId);\n \n if (!response.ok) {\n throw new Error(`HTTP \u30a8\u30e9\u30fc: ${response.status}`);\n }\n \n return await response.json();\n } catch (error) {\n clearTimeout(timeoutId);\n \n if (error.name === 'AbortError') {\n throw new Error('\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u3057\u307e\u3057\u305f');\n }\n throw error;\n }\n }\n \n \/\/ =====================================\n \/\/ \u30bf\u30d6\u5207\u308a\u66ff\u3048\u6a5f\u80fd\n \/\/ =====================================\n \n \/\/ \u30bf\u30d6\u5207\u308a\u66ff\u3048\n document.querySelectorAll('.nav-tab').forEach(tab => {\n tab.addEventListener('click', function() {\n const targetSection = this.dataset.section;\n \n \/\/ \u30a2\u30af\u30c6\u30a3\u30d6\u30bf\u30d6\u306e\u5909\u66f4\n document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));\n this.classList.add('active');\n \n \/\/ \u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8868\u793a\u5207\u308a\u66ff\u3048\n document.querySelectorAll('.content-section').forEach(section => {\n section.classList.remove('active');\n });\n document.getElementById(targetSection).classList.add('active');\n \n \/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u30ea\u30bb\u30c3\u30c8\n hideError();\n });\n });\n \n \/\/ =====================================\n \/\/ \u30c7\u30fc\u30bf\u53d6\u5f97\u95a2\u9023\n \/\/ =====================================\n \n \/\/ \u521d\u671f\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\n function loadInitialData() {\n Promise.all([\n fetchShipsData(),\n fetchCcuData()\n ]).then(() => {\n \/\/ \u3059\u3079\u3066\u306e\u30c7\u30fc\u30bf\u304c\u8aad\u307f\u8fbc\u307e\u308c\u305f\u3089\u70ba\u66ff\u30ec\u30fc\u30c8\u3092\u66f4\u65b0\n document.getElementById('rate-value').textContent = exchangeRate.toFixed(2);\n }).catch(error => {\n console.error('\u30c7\u30fc\u30bf\u8aad\u307f\u8fbc\u307f\u30a8\u30e9\u30fc:', error);\n showError(`\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f: ${error.message}`, loadInitialData);\n });\n }\n \n \/\/ \u8239\u60c5\u5831\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\n async function fetchShipsData() {\n try {\n document.getElementById('ships-loading').style.display = 'flex';\n \n \/\/ \u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u306e\u5b9a\u7fa9\uff08API\u30a8\u30e9\u30fc\u6642\u7528\uff09\n const backupShipsData = [\n { id: 1, name: \"Aurora MR\", role: \"\u30b9\u30bf\u30fc\u30bf\u30fc\", status: \"\u4f7f\u7528\u53ef\u80fd\", availability: \"\u3044\u3064\u3067\u3082\u8cfc\u5165\u53ef\u80fd\", pledge: \"$45\", manufacturer: \"Roberts Space Industries\", category: \"\u5b87\u5b99\u8239\", qtCapable: true, image: \"https:\/\/media.robertsspaceindustries.com\/bzlyldr76v78c\/source.jpg\" },\n { id: 2, name: \"Mustang Alpha\", role: \"\u30b9\u30bf\u30fc\u30bf\u30fc\", status: \"\u4f7f\u7528\u53ef\u80fd\", availability: \"\u3044\u3064\u3067\u3082\u8cfc\u5165\u53ef\u80fd\", pledge: \"$45\", manufacturer: \"Consolidated Outland\", category: \"\u5b87\u5b99\u8239\", qtCapable: true, image: \"https:\/\/media.robertsspaceindustries.com\/o2kwrn6n9synm\/source.jpg\" },\n { id: 3, name: \"Avenger Titan\", role: \"\u8efd\u8ca8\u7269\/\u6226\u95d8\", status: \"\u4f7f\u7528\u53ef\u80fd\", availability: \"\u3044\u3064\u3067\u3082\u8cfc\u5165\u53ef\u80fd\", pledge: \"$55\", manufacturer: \"Aegis Dynamics\", category: \"\u5b87\u5b99\u8239\", qtCapable: true, image: \"https:\/\/media.robertsspaceindustries.com\/3u3yzdxgx82uv\/source.jpg\" }\n ];\n \n const result = await fetchFromApi('getShips');\n \n if (result.status === 'success' && Array.isArray(result.data) && result.data.length > 0) {\n shipsData = result.data;\n exchangeRate = result.exchangeRate || exchangeRate;\n } else {\n throw new Error('\u8239\u30c7\u30fc\u30bf\u306e\u5f62\u5f0f\u304c\u4e0d\u6b63\u3067\u3059');\n }\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30fc\u9078\u629e\u80a2\u3092\u751f\u6210\n populateFilterOptions();\n \n \/\/ \u5217\u8868\u793a\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u751f\u6210\n generateColumnCheckboxes();\n \n \/\/ \u30c6\u30fc\u30d6\u30eb\u30d8\u30c3\u30c0\u30fc\u3092\u751f\u6210\n generateShipsTableHeader();\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3068\u8868\u793a\n filterShips();\n \n document.getElementById('ships-loading').style.display = 'none';\n } catch (error) {\n console.error('\u8239\u30c7\u30fc\u30bf\u53d6\u5f97\u30a8\u30e9\u30fc:', error);\n \n \/\/ \u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u3092\u4f7f\u7528\n if (shipsData.length === 0) {\n shipsData = backupShipsData;\n \/\/ \u6700\u4f4e\u9650\u306e\u30d5\u30a3\u30eb\u30bf\u30fc\u9078\u629e\u80a2\u3068UI\u3092\u751f\u6210\n populateFilterOptions();\n generateColumnCheckboxes();\n generateShipsTableHeader();\n filterShips();\n }\n \n document.getElementById('ships-loading').style.display = 'none';\n showError(`\u8239\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u304c\u3001\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059: ${error.message}`, fetchShipsData);\n }\n }\n \n \/\/ CCU\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\n async function fetchCcuData() {\n try {\n document.getElementById('ccu-loading').style.display = 'flex';\n \n \/\/ \u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u306e\u5b9a\u7fa9\uff08API\u30a8\u30e9\u30fc\u6642\u7528\uff09\n const backupCcuData = [\n { id: 1, img: 'https:\/\/media.robertsspaceindustries.com\/bzlyldr76v78c\/source.jpg', count: 1, from: 'Retalitor', to: 'C2 Hercules', pledge: 247.51, saving: 0.00, warbond: 0 },\n { id: 2, img: 'https:\/\/media.robertsspaceindustries.com\/o2kwrn6n9synm\/source.jpg', count: 1, from: 'Terrapin', to: 'Corsair', pledge: 33.01, saving: 0.00, warbond: 0 },\n { id: 3, img: 'https:\/\/media.robertsspaceindustries.com\/3u3yzdxgx82uv\/source.jpg', count: 1, from: 'Blade', to: 'Eclipse', pledge: 27.50, saving: 0.00, warbond: 0 },\n { id: 4, img: 'https:\/\/media.robertsspaceindustries.com\/bj11ubfacjfmr\/source.jpg', count: 1, from: 'Freelancer DUR', to: 'F7C-R Hornet Tracker Mk I', pledge: 5.50, saving: 11.00, warbond: 1 }\n ];\n \n const result = await fetchFromApi('getCcuData');\n \n if (result.status === 'success' && Array.isArray(result.data) && result.data.length > 0) {\n ccuData = result.data;\n exchangeRate = result.exchangeRate || exchangeRate;\n } else {\n throw new Error('CCU\u30c7\u30fc\u30bf\u306e\u5f62\u5f0f\u304c\u4e0d\u6b63\u3067\u3059');\n }\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3068\u8868\u793a\n filterCcuData();\n \n document.getElementById('ccu-loading').style.display = 'none';\n } catch (error) {\n console.error('CCU\u30c7\u30fc\u30bf\u53d6\u5f97\u30a8\u30e9\u30fc:', error);\n \n \/\/ \u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u3092\u4f7f\u7528\n if (ccuData.length === 0) {\n ccuData = backupCcuData;\n filterCcuData();\n }\n \n document.getElementById('ccu-loading').style.display = 'none';\n showError(`CCU\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u304c\u3001\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059: ${error.message}`, fetchCcuData);\n }\n }\n \n \/\/ =====================================\n \/\/ \u8239\u60c5\u5831\u30ea\u30b9\u30c8\u95a2\u9023\u6a5f\u80fd\n \/\/ =====================================\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30fc\u9078\u629e\u80a2\u3092\u8a2d\u5b9a\n function populateFilterOptions() {\n \/\/ \u88fd\u9020\u4f1a\u793e\u30d5\u30a3\u30eb\u30bf\u30fc\n const manufacturers = new Set();\n const roles = new Set();\n const statuses = new Set();\n const availabilities = new Set();\n \n shipsData.forEach(ship => {\n if (ship.manufacturer && ship.manufacturer !== '-') manufacturers.add(ship.manufacturer);\n if (ship.role && ship.role !== '-') roles.add(ship.role);\n if (ship.status && ship.status !== '-') statuses.add(ship.status);\n if (ship.availability && ship.availability !== '-') availabilities.add(ship.availability);\n });\n \n \/\/ \u88fd\u9020\u4f1a\u793e\u30d5\u30a3\u30eb\u30bf\u30fc\n const manufacturerFilter = document.getElementById('manufacturer-filter');\n manufacturerFilter.innerHTML = '<option value=\"\">\u3059\u3079\u3066\u306e\u88fd\u9020\u4f1a\u793e<\/option>';\n Array.from(manufacturers).sort().forEach(manufacturer => {\n const option = document.createElement('option');\n option.value = manufacturer;\n option.textContent = manufacturer;\n manufacturerFilter.appendChild(option);\n });\n \n \/\/ \u5f79\u5272\u30d5\u30a3\u30eb\u30bf\u30fc\n const roleFilter = document.getElementById('role-filter');\n roleFilter.innerHTML = '<option value=\"\">\u3059\u3079\u3066\u306e\u5f79\u5272<\/option>';\n Array.from(roles).sort().forEach(role => {\n const option = document.createElement('option');\n option.value = role;\n option.textContent = role;\n roleFilter.appendChild(option);\n });\n \n \/\/ \u88fd\u9020\u72b6\u6cc1\u30d5\u30a3\u30eb\u30bf\u30fc\n const statusFilter = document.getElementById('status-filter');\n statusFilter.innerHTML = '<option value=\"\">\u3059\u3079\u3066\u306e\u88fd\u9020\u72b6\u6cc1<\/option>';\n Array.from(statuses).sort().forEach(status => {\n const option = document.createElement('option');\n option.value = status;\n option.textContent = status;\n statusFilter.appendChild(option);\n });\n \n \/\/ \u8cfc\u5165\u53ef\u5426\u30d5\u30a3\u30eb\u30bf\u30fc\n const availabilityFilter = document.getElementById('availability-filter');\n availabilityFilter.innerHTML = '<option value=\"\">\u3059\u3079\u3066\u306e\u8cfc\u5165\u53ef\u5426<\/option>';\n Array.from(availabilities).sort().forEach(availability => {\n const option = document.createElement('option');\n option.value = availability;\n option.textContent = availability;\n availabilityFilter.appendChild(option);\n });\n }\n \n \/\/ \u5217\u8868\u793a\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u751f\u6210\n function generateColumnCheckboxes() {\n const columnsContainer = document.getElementById('ships-columns');\n columnsContainer.innerHTML = '';\n \n shipsColumns.forEach(column => {\n const checkboxItem = document.createElement('div');\n checkboxItem.className = 'checkbox-item';\n \n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.id = `column-${column.id}`;\n checkbox.checked = columnVisibility[column.id];\n checkbox.addEventListener('change', function() {\n columnVisibility[column.id] = this.checked;\n updateColumnVisibility();\n });\n \n const label = document.createElement('label');\n label.htmlFor = `column-${column.id}`;\n label.textContent = column.label;\n \n checkboxItem.appendChild(checkbox);\n checkboxItem.appendChild(label);\n columnsContainer.appendChild(checkboxItem);\n });\n }\n \n \/\/ \u30c6\u30fc\u30d6\u30eb\u30d8\u30c3\u30c0\u30fc\u3092\u751f\u6210\n function generateShipsTableHeader() {\n const headerRow = document.getElementById('ships-table-header');\n headerRow.innerHTML = '';\n \n shipsColumns.forEach(column => {\n const th = document.createElement('th');\n th.setAttribute('data-column', column.id);\n th.textContent = column.label;\n \n if (column.width) {\n th.style.width = column.width;\n }\n \n \/\/ \u30bd\u30fc\u30c8\u6a5f\u80fd\u306f\u7701\u7565\uff08\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u8ffd\u52a0\uff09\n \n headerRow.appendChild(th);\n });\n \n \/\/ \u5217\u306e\u8868\u793a\/\u975e\u8868\u793a\u3092\u9069\u7528\n updateColumnVisibility();\n }\n \n \/\/ \u5217\u306e\u8868\u793a\/\u975e\u8868\u793a\u3092\u66f4\u65b0\n function updateColumnVisibility() {\n shipsColumns.forEach(column => {\n const cells = document.querySelectorAll(`th[data-column=\"${column.id}\"], td[data-column=\"${column.id}\"]`);\n const isVisible = columnVisibility[column.id];\n \n cells.forEach(cell => {\n if (isVisible) {\n cell.classList.remove('hidden-column');\n } else {\n cell.classList.add('hidden-column');\n }\n });\n });\n }\n \n \/\/ \u8239\u30c7\u30fc\u30bf\u3092\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\n function filterShips() {\n const searchTerm = document.getElementById('ships-search').value.toLowerCase();\n const manufacturerValue = document.getElementById('manufacturer-filter').value;\n const roleValue = document.getElementById('role-filter').value;\n const statusValue = document.getElementById('status-filter').value;\n const availabilityValue = document.getElementById('availability-filter').value;\n \n const showSpaceships = document.getElementById('show-spaceships').checked;\n const showVehicles = document.getElementById('show-vehicles').checked;\n const showQtCapable = document.getElementById('show-qt-capable').checked;\n const showQtIncapable = document.getElementById('show-qt-incapable').checked;\n \n filteredShipsData = shipsData.filter(ship => {\n \/\/ \u30ab\u30c6\u30b4\u30ea\u30d5\u30a3\u30eb\u30bf\u30fc\n if (ship.category === '\u5b87\u5b99\u8239' && !showSpaceships) return false;\n if (ship.category === '\u5730\u4e0a\u8eca\u4e21' && !showVehicles) return false;\n \n \/\/ QT\u6a5f\u80fd\u30d5\u30a3\u30eb\u30bf\u30fc\n if (ship.qtCapable && !showQtCapable) return false;\n if (!ship.qtCapable && !showQtIncapable) return false;\n \n \/\/ \u691c\u7d22\u8a9e\u53e5\n const matchesSearch = \n (ship.name && ship.name.toLowerCase().includes(searchTerm)) ||\n (ship.role && ship.role.toLowerCase().includes(searchTerm)) ||\n (ship.manufacturer && ship.manufacturer.toLowerCase().includes(searchTerm)) ||\n (ship.status && ship.status.toLowerCase().includes(searchTerm)) ||\n (ship.availability && ship.availability.toLowerCase().includes(searchTerm));\n \n \/\/ \u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30d5\u30a3\u30eb\u30bf\u30fc\n const matchesManufacturer = manufacturerValue === '' || ship.manufacturer === manufacturerValue;\n const matchesRole = roleValue === '' || ship.role === roleValue;\n const matchesStatus = statusValue === '' || ship.status === statusValue;\n const matchesAvailability = availabilityValue === '' || ship.availability === availabilityValue;\n \n return matchesSearch && matchesManufacturer && matchesRole && matchesStatus && matchesAvailability;\n });\n \n renderShipsTable();\n }\n \n \/\/ \u8239\u30c7\u30fc\u30bf\u30c6\u30fc\u30d6\u30eb\u3092\u63cf\u753b\n function renderShipsTable() {\n const tableBody = document.getElementById('ships-table-body');\n tableBody.innerHTML = '';\n \n if (filteredShipsData.length === 0) {\n const emptyRow = document.createElement('tr');\n const emptyCell = document.createElement('td');\n emptyCell.colSpan = shipsColumns.length;\n emptyCell.textContent = '\u8868\u793a\u3059\u308b\u8239\u30c7\u30fc\u30bf\u304c\u3042\u308a\u307e\u305b\u3093';\n emptyCell.style.textAlign = 'center';\n emptyCell.style.padding = '20px';\n emptyRow.appendChild(emptyCell);\n tableBody.appendChild(emptyRow);\n return;\n }\n \n filteredShipsData.forEach(ship => {\n const row = document.createElement('tr');\n row.dataset.id = ship.id;\n \n \/\/ \u9078\u629e\u5217\n const selectTd = document.createElement('td');\n selectTd.setAttribute('data-column', 'select');\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selectedShipIds.includes(ship.id);\n checkbox.addEventListener('change', function() {\n if (this.checked) {\n if (!selectedShipIds.includes(ship.id)) {\n selectedShipIds.push(ship.id);\n }\n } else {\n selectedShipIds = selectedShipIds.filter(id => id !== ship.id);\n }\n });\n selectTd.appendChild(checkbox);\n row.appendChild(selectTd);\n \n \/\/ \u753b\u50cf\u5217\n const imageTd = document.createElement('td');\n imageTd.setAttribute('data-column', 'image');\n if (ship.image && ship.image !== '-') {\n const img = document.createElement('img');\n img.className = 'ship-image';\n img.src = ship.image;\n img.alt = ship.name;\n img.loading = 'lazy';\n img.onerror = function() {\n this.src = 'https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg';\n };\n imageTd.appendChild(img);\n } else {\n imageTd.textContent = 'No Image';\n }\n row.appendChild(imageTd);\n \n \/\/ \u6b8b\u308a\u306e\u5217\u3092\u52d5\u7684\u306b\u751f\u6210\n shipsColumns.forEach(column => {\n if (column.id === 'select' || column.id === 'image') return;\n \n const td = document.createElement('td');\n td.setAttribute('data-column', column.id);\n \n if (column.id === 'qtCapable') {\n td.textContent = ship[column.id] ? '\u53ef\u80fd' : '\u4e0d\u53ef';\n } else {\n td.textContent = ship[column.id] || '-';\n }\n \n row.appendChild(td);\n });\n \n tableBody.appendChild(row);\n });\n \n updateColumnVisibility();\n }\n \n \/\/ \u62e1\u5927\u7e2e\u5c0f\u6a5f\u80fd\n function setupZoomController() {\n const zoomSlider = document.getElementById('ships-zoom-slider');\n const zoomValue = document.getElementById('ships-zoom-value');\n const zoomIn = document.getElementById('ships-zoom-in');\n const zoomOut = document.getElementById('ships-zoom-out');\n const tableWrapper = document.getElementById('ships-table-container');\n \n \/\/ \u30b9\u30e9\u30a4\u30c0\u30fc\u5909\u66f4\u6642\n zoomSlider.addEventListener('input', function() {\n currentZoom = parseInt(this.value);\n updateZoom();\n });\n \n \/\/ \u30ba\u30fc\u30e0\u30a4\u30f3\n zoomIn.addEventListener('click', function() {\n currentZoom = Math.min(150, currentZoom + 10);\n zoomSlider.value = currentZoom;\n updateZoom();\n });\n \n \/\/ \u30ba\u30fc\u30e0\u30a2\u30a6\u30c8\n zoomOut.addEventListener('click', function() {\n currentZoom = Math.max(50, currentZoom - 10);\n zoomSlider.value = currentZoom;\n updateZoom();\n });\n \n \/\/ \u30ba\u30fc\u30e0\u66f4\u65b0\u95a2\u6570\n function updateZoom() {\n zoomValue.textContent = `${currentZoom}%`;\n tableWrapper.style.fontSize = `${currentZoom}%`;\n }\n }\n \n \/\/ =====================================\n \/\/ CCU\u30d5\u30a1\u30a4\u30f3\u30c0\u30fc\u95a2\u9023\u6a5f\u80fd\n \/\/ =====================================\n \n \/\/ CCU\u30c7\u30fc\u30bf\u3092\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\n function filterCcuData() {\n const searchTerm = document.getElementById('ccu-search').value.toLowerCase();\n const showSaving = document.getElementById('show-saving').checked;\n const showWarbond = document.getElementById('show-warbond').checked;\n const showNegativeSaving = document.getElementById('show-negative-saving').checked;\n const pledgeMin = parseFloat(document.getElementById('pledge-min').value) || 0;\n const pledgeMax = parseFloat(document.getElementById('pledge-max').value) || Infinity;\n \n filteredCcuData = ccuData.filter(ccu => {\n \/\/ \u691c\u7d22\u8a9e\u53e5\n const matchesSearch = searchTerm === '' || \n ccu.from.toLowerCase().includes(searchTerm) || \n ccu.to.toLowerCase().includes(searchTerm);\n \n \/\/ \u7bc0\u7d04\u30d5\u30a3\u30eb\u30bf\u30fc\n const matchesSaving = !showSaving || ccu.saving > 0;\n \n \/\/ Warbond\u30d5\u30a3\u30eb\u30bf\u30fc\n const matchesWarbond = !showWarbond || ccu.warbond === 1;\n \n \/\/ \u30de\u30a4\u30ca\u30b9\u5024\u30d5\u30a3\u30eb\u30bf\u30fc\n const matchesNegative = showNegativeSaving || ccu.saving >= 0;\n \n \/\/ \u4fa1\u683c\u7bc4\u56f2\n const matchesPledgeRange = ccu.pledge >= pledgeMin && ccu.pledge <= pledgeMax;\n \n return matchesSearch && matchesSaving && matchesWarbond && matchesNegative && matchesPledgeRange;\n });\n \n renderCcuTable();\n }\n \n \/\/ CCU\u30c6\u30fc\u30d6\u30eb\u3092\u63cf\u753b\n function renderCcuTable() {\n const tableBody = document.getElementById('ccu-table-body');\n tableBody.innerHTML = '';\n \n if (filteredCcuData.length === 0) {\n const emptyRow = document.createElement('tr');\n const emptyCell = document.createElement('td');\n emptyCell.colSpan = 7;\n emptyCell.textContent = '\u8868\u793a\u3059\u308bCCU\u30c7\u30fc\u30bf\u304c\u3042\u308a\u307e\u305b\u3093';\n emptyCell.style.textAlign = 'center';\n emptyCell.style.padding = '20px';\n emptyRow.appendChild(emptyCell);\n tableBody.appendChild(emptyRow);\n return;\n }\n \n filteredCcuData.forEach(ccu => {\n const row = document.createElement('tr');\n row.dataset.id = ccu.id;\n \n \/\/ \u7bc0\u7d04\u984d\u306e\u30af\u30e9\u30b9\n let savingClass = 'zero-value';\n if (ccu.saving > 0) {\n savingClass = 'positive-value';\n } else if (ccu.saving < 0) {\n savingClass = 'negative-value';\n }\n \n \/\/ \u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u8a08\u7b97\n let savingPercentage = 0;\n if (ccu.pledge > 0) {\n savingPercentage = Math.round((ccu.saving \/ ccu.pledge) * 100);\n }\n \n \/\/ \u753b\u50cfURL\u304c\u306a\u3044\u5834\u5408\u306e\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\n const imgUrl = ccu.img && ccu.img !== '' \n ? ccu.img \n : 'https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg';\n \n row.innerHTML = `\n <td><img decoding=\"async\" src=\"${imgUrl}\" alt=\"${ccu.from}\" class=\"ship-image\" onerror=\"this.src='https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg'\"><\/td>\n <td>${ccu.count}<\/td>\n <td>${ccu.from}<\/td>\n <td>${ccu.to}<\/td>\n <td>$${ccu.pledge.toFixed(2)}<\/td>\n <td class=\"${savingClass}\">$${ccu.saving.toFixed(2)}${ccu.saving !== 0 ? `<span class=\"percentage\">${savingPercentage}%<\/span>` : ''}<\/td>\n <td>${ccu.warbond ? '\u2713' : ''}<\/td>\n `;\n \n \/\/ \u884c\u30af\u30ea\u30c3\u30af\u6642\u306e\u51e6\u7406\n row.addEventListener('click', function() {\n document.querySelectorAll('#ccu-table tr').forEach(r => r.classList.remove('selected'));\n this.classList.add('selected');\n displayCcuRoute(ccu);\n });\n \n tableBody.appendChild(row);\n });\n }\n \n \/\/ CCU\u7d4c\u8def\u306e\u8868\u793a\n function displayCcuRoute(ccu) {\n const routeDisplay = document.getElementById('ccu-route-display');\n \n \/\/ Warbond\u304b\u3069\u3046\u304b\u306e\u30af\u30e9\u30b9\n const warbondClass = ccu.warbond ? 'warbond' : '';\n \n \/\/ \u7bc0\u7d04\u984d\u306e\u8868\u793a\n const savingsDisplay = ccu.saving !== 0 \n ? `<div class=\"route-savings\">\u7bc0\u7d04\u984d: $${ccu.saving.toFixed(2)} (${Math.round(ccu.saving * exchangeRate).toLocaleString()}\u5186)<\/div>` \n : '<div class=\"route-savings\">\u7bc0\u7d04\u984d: $0.00<\/div>';\n \n \/\/ \u753b\u50cfURL\n const fromImgUrl = ccu.img && ccu.img !== '' \n ? ccu.img \n : 'https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg';\n \n \/\/ \u691c\u7d22\u3057\u3066\u300cto\u300d\u306e\u8239\u306e\u753b\u50cf\u3092\u63a2\u3059\n let toImgUrl = '';\n const toShip = ccuData.find(c => c.from === ccu.to);\n if (toShip && toShip.img) {\n toImgUrl = toShip.img;\n } else {\n toImgUrl = fromImgUrl; \/\/ \u898b\u3064\u304b\u3089\u306a\u3044\u5834\u5408\u306f\u540c\u3058\u753b\u50cf\u3092\u4f7f\u7528\n }\n \n routeDisplay.innerHTML = `\n ${savingsDisplay}\n <div class=\"route-item\">\n <img decoding=\"async\" src=\"${fromImgUrl}\" alt=\"${ccu.from}\" class=\"route-image\" onerror=\"this.src='https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg'\">\n <div class=\"route-name\">${ccu.from}<\/div>\n <div class=\"route-price\">${Math.round(ccu.pledge * exchangeRate).toLocaleString()}\u5186<\/div>\n <\/div>\n \n <div class=\"route-arrow\">\u2192<\/div>\n \n <div class=\"route-item ${warbondClass}\">\n <img decoding=\"async\" src=\"${toImgUrl}\" alt=\"${ccu.to}\" class=\"route-image\" onerror=\"this.src='https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg'\">\n <div class=\"route-name\">${ccu.to}${ccu.warbond ? '<span class=\"savings-badge\">Warbond<\/span>' : ''}<\/div>\n <div class=\"route-price\">Pledge: $${ccu.pledge.toFixed(2)} (${Math.round(ccu.pledge * exchangeRate).toLocaleString()}\u5186)<\/div>\n <\/div>\n `;\n }\n \n \/\/ =====================================\n \/\/ \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u8a2d\u5b9a\n \/\/ =====================================\n \n \/\/ \u8239\u60c5\u5831\u691c\u7d22\u3068\u30d5\u30a3\u30eb\u30bf\u30fc\n document.getElementById('ships-search').addEventListener('input', filterShips);\n document.getElementById('manufacturer-filter').addEventListener('change', filterShips);\n document.getElementById('role-filter').addEventListener('change', filterShips);\n document.getElementById('status-filter').addEventListener('change', filterShips);\n document.getElementById('availability-filter').addEventListener('change', filterShips);\n document.getElementById('show-spaceships').addEventListener('change', filterShips);\n document.getElementById('show-vehicles').addEventListener('change', filterShips);\n document.getElementById('show-qt-capable').addEventListener('change', filterShips);\n document.getElementById('show-qt-incapable').addEventListener('change', filterShips);\n \n \/\/ \u8239\u60c5\u5831\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\n document.getElementById('ships-reset-btn').addEventListener('click', function() {\n document.getElementById('ships-search').value = '';\n document.getElementById('manufacturer-filter').value = '';\n document.getElementById('role-filter').value = '';\n document.getElementById('status-filter').value = '';\n document.getElementById('availability-filter').value = '';\n document.getElementById('show-spaceships').checked = true;\n document.getElementById('show-vehicles').checked = true;\n document.getElementById('show-qt-capable').checked = true;\n document.getElementById('show-qt-incapable').checked = true;\n \n \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u5217\u8868\u793a\u306b\u623b\u3059\n shipsColumns.forEach(column => {\n columnVisibility[column.id] = column.defaultVisible;\n const checkbox = document.getElementById(`column-${column.id}`);\n if (checkbox) checkbox.checked = column.defaultVisible;\n });\n \n updateColumnVisibility();\n filterShips();\n });\n \n \/\/ CCU\u691c\u7d22\u3068\u30d5\u30a3\u30eb\u30bf\u30fc\n document.getElementById('ccu-search').addEventListener('input', filterCcuData);\n document.getElementById('show-saving').addEventListener('change', filterCcuData);\n document.getElementById('show-warbond').addEventListener('change', filterCcuData);\n document.getElementById('show-negative-saving').addEventListener('change', filterCcuData);\n document.getElementById('pledge-min').addEventListener('change', filterCcuData);\n document.getElementById('pledge-max').addEventListener('change', filterCcuData);\n \n \/\/ CCU\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\n document.getElementById('ccu-reset-btn').addEventListener('click', function() {\n document.getElementById('ccu-search').value = '';\n document.getElementById('show-saving').checked = false;\n document.getElementById('show-warbond').checked = false;\n document.getElementById('show-negative-saving').checked = false;\n document.getElementById('pledge-min').value = '0';\n document.getElementById('pledge-max').value = '1000';\n filterCcuData();\n });\n \n \/\/ \u30c7\u30fc\u30bf\u66f4\u65b0\u30dc\u30bf\u30f3\n document.getElementById('refresh-data-btn').addEventListener('click', function() {\n hideError();\n loadInitialData();\n });\n \n \/\/ =====================================\n \/\/ \u521d\u671f\u5316\u51e6\u7406\n \/\/ =====================================\n \n \/\/ \u73fe\u5728\u306e\u65e5\u4ed8\u3092\u8868\u793a\n updateCurrentDate();\n \n \/\/ \u62e1\u5927\u7e2e\u5c0f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\n setupZoomController();\n \n \/\/ \u521d\u671f\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\n loadInitialData();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb 1 USD = 150.00 JPY \u30c7\u30fc\u30bf\u3092\u66f4\u65b0 \u7dcf\u5408\u30b2\u30fc\u30e0\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u7121\u6599Discord\uff1ahttps:\/\/discord.com […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"swell_btn_cv_data":"","footnotes":""},"class_list":["post-1003","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/pages\/1003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1003"}],"version-history":[{"count":66,"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/pages\/1003\/revisions"}],"predecessor-version":[{"id":1106,"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/pages\/1003\/revisions\/1106"}],"wp:attachment":[{"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1003,"date":"2025-05-16T21:32:10","date_gmt":"2025-05-16T12:32:10","guid":{"rendered":"https:\/\/www.samurai2948.com\/?page_id=1003"},"modified":"2025-05-21T22:36:00","modified_gmt":"2025-05-21T13:36:00","slug":"%e8%88%b9%e3%81%ae%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e8%b3%bc%e5%85%a5%e3%83%ab%e3%83%bc%e3%83%88%e6%a4%9c%e7%b4%a2","status":"publish","type":"page","link":"https:\/\/www.samurai2948.com\/?page_id=1003","title":{"rendered":"\u8239\u306e\u304a\u3059\u3059\u3081\u8cfc\u5165\u30eb\u30fc\u30c8\u691c\u7d22"},"content":{"rendered":"\n\n\n\n \n \n Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb<\/title>\n <style>\n \/* \u5171\u901a\u30b9\u30bf\u30a4\u30eb *\/\n :root {\n --dark-bg: #1a1a1a;\n --dark-secondary: #252525;\n --dark-header: #2d2d2d;\n --accent-color: #3498db;\n --accent-color-hover: #2980b9;\n --red-accent: #e74c3c;\n --red-accent-hover: #c0392b;\n --text-primary: #f0f0f0;\n --text-secondary: #aaaaaa;\n --border-color: #444;\n --chart-bg: rgba(52, 152, 219, 0.3);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background-color: var(--dark-bg);\n color: var(--text-primary);\n min-height: 100vh;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 15px;\n width: 100%;\n flex: 1;\n }\n \n \/* \u30d8\u30c3\u30c0\u30fc *\/\n .site-header {\n background-color: var(--dark-header);\n padding: 15px 0;\n border-bottom: 2px solid var(--accent-color);\n position: sticky;\n top: 0;\n z-index: 1000;\n }\n \n .header-inner {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 15px;\n max-width: 1400px;\n margin: 0 auto;\n }\n \n .site-title {\n font-size: 1.5rem;\n color: var(--text-primary);\n text-decoration: none;\n margin: 0;\n }\n \n .header-right {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .exchange-rate {\n background-color: rgba(0, 0, 0, 0.3);\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 0.9rem;\n }\n \n \/* \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30bf\u30d6 *\/\n .nav-tabs {\n display: flex;\n border-bottom: 1px solid var(--border-color);\n margin-top: 20px;\n margin-bottom: 20px;\n overflow-x: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) var(--dark-secondary);\n }\n \n .nav-tabs::-webkit-scrollbar {\n height: 6px;\n }\n \n .nav-tabs::-webkit-scrollbar-track {\n background: var(--dark-secondary);\n }\n \n .nav-tabs::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 10px;\n }\n \n .nav-tab {\n padding: 12px 24px;\n cursor: pointer;\n color: var(--text-secondary);\n background-color: transparent;\n border: none;\n font-size: 16px;\n white-space: nowrap;\n transition: all 0.2s ease;\n }\n \n .nav-tab:hover {\n color: var(--text-primary);\n background-color: rgba(255, 255, 255, 0.05);\n }\n \n .nav-tab.active {\n color: var(--accent-color);\n font-weight: bold;\n border-bottom: 3px solid var(--accent-color);\n }\n \n \/* \u30b3\u30f3\u30c6\u30f3\u30c4\u30bb\u30af\u30b7\u30e7\u30f3 *\/\n .content-section {\n display: none;\n padding: 20px 0;\n }\n \n .content-section.active {\n display: block;\n }\n \n \/* \u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30d4\u30ca\u30fc *\/\n .loading-spinner {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100px;\n color: var(--text-secondary);\n }\n \n .spinner {\n border: 4px solid rgba(255, 255, 255, 0.1);\n border-left-color: var(--accent-color);\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: spin 1s linear infinite;\n margin-right: 15px;\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n \/* \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8 *\/\n .error-message {\n background-color: rgba(231, 76, 60, 0.2);\n border: 1px solid var(--red-accent);\n color: var(--text-primary);\n padding: 15px 20px;\n border-radius: 6px;\n margin: 20px 0;\n }\n \n .error-actions {\n margin-top: 10px;\n display: flex;\n gap: 10px;\n }\n \n \/* \u30dc\u30bf\u30f3\u30b9\u30bf\u30a4\u30eb *\/\n .btn {\n padding: 8px 16px;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s;\n }\n \n .btn-primary {\n background-color: var(--accent-color);\n color: white;\n }\n \n .btn-primary:hover {\n background-color: var(--accent-color-hover);\n }\n \n .btn-danger {\n background-color: var(--red-accent);\n color: white;\n }\n \n .btn-danger:hover {\n background-color: var(--red-accent-hover);\n }\n \n \/* \u30d5\u30a3\u30eb\u30bf\u30fc\u30d1\u30cd\u30eb\u5171\u901a *\/\n .filter-panel {\n background-color: var(--dark-secondary);\n padding: 15px;\n border-radius: 6px;\n margin-bottom: 20px;\n }\n \n .filter-section {\n margin-bottom: 15px;\n }\n \n .filter-title {\n font-size: 1rem;\n font-weight: bold;\n margin-bottom: 10px;\n color: var(--text-primary);\n padding-bottom: 5px;\n border-bottom: 1px solid var(--border-color);\n }\n \n .filter-row {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n margin-bottom: 10px;\n }\n \n \/* \u691c\u7d22\u5165\u529b *\/\n .search-input {\n padding: 8px 12px;\n background-color: var(--dark-bg);\n border: 1px solid var(--border-color);\n border-radius: 4px;\n color: var(--text-primary);\n width: 100%;\n max-width: 300px;\n }\n \n \/* \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9 *\/\n .checkbox-group {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n }\n \n .checkbox-item {\n display: flex;\n align-items: center;\n margin-right: 15px;\n }\n \n .checkbox-item input[type=\"checkbox\"] {\n margin-right: 5px;\n accent-color: var(--accent-color);\n }\n \n \/* \u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9 *\/\n .select-input {\n padding: 8px 12px;\n background-color: var(--dark-bg);\n border: 1px solid var(--border-color);\n border-radius: 4px;\n color: var(--text-primary);\n min-width: 150px;\n }\n \n \/* \u30c6\u30fc\u30d6\u30eb\u5171\u901a\u30b9\u30bf\u30a4\u30eb *\/\n .table-container {\n background-color: var(--dark-secondary);\n border-radius: 6px;\n overflow-x: auto;\n position: relative;\n margin-bottom: 20px;\n }\n \n table {\n width: 100%;\n border-collapse: collapse;\n min-width: 800px;\n }\n \n th {\n background-color: var(--dark-header);\n color: var(--text-primary);\n padding: 12px 15px;\n text-align: left;\n position: sticky;\n top: 0;\n z-index: 1;\n white-space: nowrap;\n border-bottom: 1px solid var(--border-color);\n }\n \n td {\n padding: 10px 15px;\n border-bottom: 1px solid var(--dark-header);\n }\n \n tbody tr:hover {\n background-color: rgba(255, 255, 255, 0.05);\n }\n \n \/* \u8239\u60c5\u5831\u30ea\u30b9\u30c8\u56fa\u6709\u30b9\u30bf\u30a4\u30eb *\/\n .ships-section .table-container {\n max-height: 70vh;\n overflow-y: auto;\n }\n \n .ship-image {\n width: 80px;\n height: 50px;\n object-fit: cover;\n border-radius: 4px;\n }\n \n \/* CCU\u30d5\u30a1\u30a4\u30f3\u30c0\u30fc\u56fa\u6709\u30b9\u30bf\u30a4\u30eb *\/\n .ccu-section .table-container {\n max-height: 400px;\n }\n \n .route-display {\n background-color: var(--dark-secondary);\n padding: 20px;\n border-radius: 6px;\n margin-top: 20px;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 20px;\n justify-content: center;\n position: relative;\n }\n \n .route-item {\n text-align: center;\n min-width: 200px;\n }\n \n .route-image {\n width: 180px;\n height: 120px;\n object-fit: cover;\n border-radius: 8px;\n margin-bottom: 10px;\n }\n \n .route-item.warbond .route-image {\n border: 2px solid var(--red-accent);\n }\n \n .route-name {\n font-size: 1.2rem;\n margin-bottom: 5px;\n font-weight: bold;\n }\n \n .route-price {\n color: var(--text-secondary);\n }\n \n .route-arrow {\n font-size: 2rem;\n color: var(--accent-color);\n }\n \n .route-savings {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: var(--red-accent);\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-weight: bold;\n }\n \n .savings-badge {\n background-color: var(--red-accent);\n color: white;\n font-size: 0.7rem;\n padding: 2px 5px;\n border-radius: 3px;\n margin-left: 5px;\n vertical-align: middle;\n }\n \n .positive-value {\n color: #2ecc71;\n font-weight: bold;\n }\n \n .negative-value {\n color: var(--red-accent);\n font-weight: bold;\n }\n \n .zero-value {\n color: var(--text-secondary);\n }\n \n \/* \u62e1\u5927\u7e2e\u5c0f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc *\/\n .zoom-controller {\n position: fixed;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n background-color: rgba(45, 45, 45, 0.85);\n border-radius: 25px;\n padding: 10px 20px;\n display: flex;\n align-items: center;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(5px);\n z-index: 100;\n }\n \n .zoom-out, .zoom-in {\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--dark-header);\n color: var(--text-primary);\n border: none;\n border-radius: 50%;\n font-size: 18px;\n cursor: pointer;\n }\n \n .zoom-slider {\n width: 120px;\n margin: 0 15px;\n }\n \n .zoom-value {\n min-width: 60px;\n text-align: center;\n color: var(--text-primary);\n }\n \n \/* \u30d5\u30c3\u30bf\u30fc *\/\n .site-footer {\n background-color: var(--dark-header);\n padding: 15px 0;\n text-align: center;\n color: var(--text-secondary);\n margin-top: 30px;\n font-size: 0.9rem;\n }\n \n \/* \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 *\/\n @media (max-width: 768px) {\n .header-inner {\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n }\n \n .header-right {\n width: 100%;\n justify-content: space-between;\n }\n \n .filter-row {\n flex-direction: column;\n gap: 10px;\n }\n \n .search-input {\n max-width: 100%;\n }\n \n .route-display {\n flex-direction: column;\n }\n \n .route-arrow {\n transform: rotate(90deg);\n }\n \n .route-savings {\n position: static;\n margin-bottom: 15px;\n text-align: center;\n width: 100%;\n }\n \n .zoom-controller {\n width: 90%;\n }\n \n .ships-section .table-container,\n .ccu-section .table-container {\n max-height: 50vh;\n }\n }\n\n \/* Discord\u52e7\u8a98\u30e1\u30c3\u30bb\u30fc\u30b8 *\/\n .discord-banner {\n background: linear-gradient(135deg, #7289da 0%, #5865F2 100%);\n padding: 10px 20px;\n margin-bottom: 15px;\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(114, 137, 218, 0.3);\n text-align: center;\n }\n \n .discord-banner a {\n color: white;\n text-decoration: underline;\n }\n <\/style>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n<\/head>\n<body>\n <header class=\"site-header\">\n <div class=\"header-inner\">\n <h1 class=\"site-title\">Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb<\/h1>\n <div class=\"header-right\">\n <div class=\"exchange-rate\" id=\"exchange-rate\">1 USD = <span id=\"rate-value\">150.00<\/span> JPY<\/div>\n <button class=\"btn btn-primary\" id=\"refresh-data-btn\">\u30c7\u30fc\u30bf\u3092\u66f4\u65b0<\/button>\n <\/div>\n <\/div>\n <\/header>\n \n <div class=\"container\">\n \n <div class=\"discord-banner\">\n <span style=\"color: white; font-size: 14px; font-weight: bold;\">\u7dcf\u5408\u30b2\u30fc\u30e0\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u7121\u6599Discord\uff1a<a href=\"https:\/\/discord.com\/invite\/FtwZKhZvPD\" target=\"_blank\">https:\/\/discord.com\/invite\/FtwZKhZvPD<\/a> \u3069\u306a\u305f\u3067\u3082\u53c2\u52a0\u6b53\u8fce\uff08<span id=\"current-date\">2025\u5e745\u6708<\/span>\u73fe\u5728\u7d046500\u4eba\u304c\u53c2\u52a0\u4e2d\uff09<\/span>\n <\/div>\n \n \n <div class=\"nav-tabs\">\n <button class=\"nav-tab active\" data-section=\"ships-section\">\u8239\u60c5\u5831\u30ea\u30b9\u30c8<\/button>\n <button class=\"nav-tab\" data-section=\"ccu-section\">CCU\u7d4c\u8def\u30d5\u30a1\u30a4\u30f3\u30c0\u30fc<\/button>\n <button class=\"nav-tab\" data-section=\"help-section\">\u4f7f\u3044\u65b9\u30ac\u30a4\u30c9<\/button>\n <\/div>\n \n \n <div id=\"error-container\" style=\"display: none;\"><\/div>\n \n \n <div id=\"ships-section\" class=\"content-section ships-section active\">\n <div class=\"loading-spinner\" id=\"ships-loading\">\n <div class=\"spinner\"><\/div>\n <span>\u8239\u306e\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u307f\u4e2d…<\/span>\n <\/div>\n \n <div class=\"filter-panel\">\n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u8239\u540d\u3067\u691c\u7d22<\/h3>\n <div class=\"filter-row\">\n <input type=\"text\" id=\"ships-search\" class=\"search-input\" placeholder=\"\u8239\u540d\u3001\u5f79\u5272\u3001\u88fd\u9020\u4f1a\u793e\u306a\u3069...\">\n <button class=\"btn btn-danger\" id=\"ships-reset-btn\">\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u30ea\u30bb\u30c3\u30c8<\/button>\n <\/div>\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u57fa\u672c\u30d5\u30a3\u30eb\u30bf\u30fc<\/h3>\n <div class=\"checkbox-group\">\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-spaceships\" checked>\n <label for=\"show-spaceships\">\u5b87\u5b99\u8239\u3092\u8868\u793a<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-vehicles\" checked>\n <label for=\"show-vehicles\">\u5730\u4e0a\u8eca\u4e21\u3092\u8868\u793a<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-qt-capable\" checked>\n <label for=\"show-qt-capable\">QT\u53ef\u80fd<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-qt-incapable\" checked>\n <label for=\"show-qt-incapable\">QT\u4e0d\u53ef<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u30d5\u30a3\u30eb\u30bf\u30fc<\/h3>\n <div class=\"filter-row\">\n <select id=\"manufacturer-filter\" class=\"select-input\">\n <option value=\"\">\u3059\u3079\u3066\u306e\u88fd\u9020\u4f1a\u793e<\/option>\n <\/select>\n <select id=\"role-filter\" class=\"select-input\">\n <option value=\"\">\u3059\u3079\u3066\u306e\u5f79\u5272<\/option>\n <\/select>\n <select id=\"status-filter\" class=\"select-input\">\n <option value=\"\">\u3059\u3079\u3066\u306e\u88fd\u9020\u72b6\u6cc1<\/option>\n <\/select>\n <select id=\"availability-filter\" class=\"select-input\">\n <option value=\"\">\u3059\u3079\u3066\u306e\u8cfc\u5165\u53ef\u5426<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u8868\u793a\u3059\u308b\u5217<\/h3>\n <div class=\"checkbox-group\" id=\"ships-columns\">\n \n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"table-container\" id=\"ships-table-container\">\n <table id=\"ships-table\">\n <thead>\n <tr id=\"ships-table-header\">\n \n <\/tr>\n <\/thead>\n <tbody id=\"ships-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n \n \n <div class=\"zoom-controller\" id=\"ships-zoom-controller\">\n <button class=\"zoom-out\" id=\"ships-zoom-out\">\u2212<\/button>\n <input type=\"range\" class=\"zoom-slider\" id=\"ships-zoom-slider\" min=\"50\" max=\"150\" value=\"100\">\n <div class=\"zoom-value\" id=\"ships-zoom-value\">100%<\/div>\n <button class=\"zoom-in\" id=\"ships-zoom-in\">\uff0b<\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"ccu-section\" class=\"content-section ccu-section\">\n <div class=\"loading-spinner\" id=\"ccu-loading\">\n <div class=\"spinner\"><\/div>\n <span>CCU\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u307f\u4e2d…<\/span>\n <\/div>\n \n <div class=\"filter-panel\">\n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u8239\u540d\u3067\u691c\u7d22<\/h3>\n <input type=\"text\" id=\"ccu-search\" class=\"search-input\" placeholder=\"From\/To\u8239\u540d\u3092\u5165\u529b...\">\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">\u30d5\u30a3\u30eb\u30bf\u30fc<\/h3>\n <div class=\"checkbox-group\">\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-saving\">\n <label for=\"show-saving\">\u7bc0\u7d04\u3042\u308a<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-warbond\">\n <label for=\"show-warbond\">Warbond\u306e\u307f<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"show-negative-saving\">\n <label for=\"show-negative-saving\">\u30de\u30a4\u30ca\u30b9\u5024\u3092\u542b\u3080<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"filter-section\">\n <h3 class=\"filter-title\">Pledge\u91d1\u984d\u7bc4\u56f2<\/h3>\n <div class=\"filter-row\">\n <input type=\"number\" id=\"pledge-min\" class=\"search-input\" placeholder=\"\u6700\u5c0f\" value=\"0\" min=\"0\">\n <span>\u301c<\/span>\n <input type=\"number\" id=\"pledge-max\" class=\"search-input\" placeholder=\"\u6700\u5927\" value=\"1000\" min=\"0\">\n <button class=\"btn btn-danger\" id=\"ccu-reset-btn\">\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u30ea\u30bb\u30c3\u30c8<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"table-container\">\n <table id=\"ccu-table\">\n <thead>\n <tr>\n <th>\u753b\u50cf<\/th>\n <th>\u6570\u91cf<\/th>\n <th>From<\/th>\n <th>To<\/th>\n <th>Pledge ($)<\/th>\n <th>\u7bc0\u7d04\u984d ($)<\/th>\n <th>Warbond<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"ccu-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n \n <div class=\"route-display\" id=\"ccu-route-display\">\n <p style=\"text-align: center; color: var(--text-secondary);\">\u4e0a\u306e\u30c6\u30fc\u30d6\u30eb\u304b\u3089CCU\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n <\/div>\n <\/div>\n \n \n <div id=\"help-section\" class=\"content-section help-section\">\n <h2 style=\"margin-bottom: 20px;\">Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb\u306e\u4f7f\u3044\u65b9<\/h2>\n \n <div style=\"background-color: var(--dark-secondary); padding: 20px; border-radius: 6px; margin-bottom: 20px;\">\n <h3 style=\"margin-bottom: 10px;\">\u8239\u60c5\u5831\u30ea\u30b9\u30c8<\/h3>\n <p>Star Citizen\u3067\u5229\u7528\u53ef\u80fd\u306a\u3059\u3079\u3066\u306e\u8239\u3068\u5730\u4e0a\u8eca\u4e21\u306e\u8a73\u7d30\u60c5\u5831\u3092\u95b2\u89a7\u3067\u304d\u307e\u3059\u3002<\/p>\n <ul style=\"margin: 15px 0 15px 20px; line-height: 1.6;\">\n <li><strong>\u691c\u7d22:<\/strong> \u8239\u540d\u3001\u5f79\u5272\u3001\u88fd\u9020\u4f1a\u793e\u306a\u3069\u3067\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3067\u304d\u307e\u3059<\/li>\n <li><strong>\u57fa\u672c\u30d5\u30a3\u30eb\u30bf\u30fc:<\/strong> \u5b87\u5b99\u8239\/\u5730\u4e0a\u8eca\u4e21\u306e\u8868\u793a\u3001QT\u6a5f\u80fd\u306e\u6709\u7121\u3067\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0<\/li>\n <li><strong>\u8868\u793a\u5217\u306e\u9078\u629e:<\/strong> \u8868\u793a\u3057\u305f\u3044\u60c5\u5831\u5217\u306e\u307f\u3092\u9078\u629e\u53ef\u80fd<\/li>\n <li><strong>\u62e1\u5927\u7e2e\u5c0f:<\/strong> \u8868\u793a\u30b5\u30a4\u30ba\u3092\u8abf\u6574\u3057\u3066\u898b\u3084\u3059\u304f\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/li>\n <\/ul>\n <\/div>\n \n <div style=\"background-color: var(--dark-secondary); padding: 20px; border-radius: 6px; margin-bottom: 20px;\">\n <h3 style=\"margin-bottom: 10px;\">CCU\u7d4c\u8def\u30d5\u30a1\u30a4\u30f3\u30c0\u30fc<\/h3>\n <p>Cross-Chassis Upgrade (CCU)\u306e\u6700\u9069\u306a\u7d4c\u8def\u3092\u898b\u3064\u3051\u3066\u7bc0\u7d04\u3059\u308b\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n <ul style=\"margin: 15px 0 15px 20px; line-height: 1.6;\">\n <li><strong>\u691c\u7d22:<\/strong> \u7279\u5b9a\u306e\u8239\u9593\u306eCCU\u3092\u691c\u7d22<\/li>\n <li><strong>\u30d5\u30a3\u30eb\u30bf\u30fc:<\/strong> \u7bc0\u7d04\u984d\u3084Warbond\u3067\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0<\/li>\n <li><strong>\u4fa1\u683c\u7bc4\u56f2:<\/strong> \u4e88\u7b97\u306b\u5408\u308f\u305b\u305fCCU\u3092\u63a2\u305b\u307e\u3059<\/li>\n <li><strong>\u7d4c\u8def\u8868\u793a:<\/strong> \u9078\u629e\u3057\u305fCCU\u306e\u8a73\u7d30\u3092\u8996\u899a\u7684\u306b\u78ba\u8a8d<\/li>\n <\/ul>\n <p><em>\u6ce8\u610f: CCU\u30b7\u30b9\u30c6\u30e0\u306f\u30b2\u30fc\u30e0\u5185\u3067\u5909\u66f4\u3055\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u5e38\u306b\u516c\u5f0f\u60c5\u5831\u3082\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/em><\/p>\n <\/div>\n \n <div style=\"background-color: var(--dark-secondary); padding: 20px; border-radius: 6px;\">\n <h3 style=\"margin-bottom: 10px;\">\u66f4\u65b0\u60c5\u5831<\/h3>\n <p>\u30c7\u30fc\u30bf\u306f\u5b9a\u671f\u7684\u306b\u66f4\u65b0\u3055\u308c\u307e\u3059\u304c\u3001\u6700\u65b0\u306e\u60c5\u5831\u3068\u4e00\u81f4\u3057\u306a\u3044\u5834\u5408\u306f\u300c\u30c7\u30fc\u30bf\u3092\u66f4\u65b0\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n <p style=\"margin-top: 10px;\">\u4e0d\u5177\u5408\u3084\u6a5f\u80fd\u8981\u671b\u306fDiscord\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3067\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <footer class=\"site-footer\">\n <p>© 2025 Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb | \u60c5\u5831\u306f\u53c2\u8003\u7528\u9014\u3067\u3059\u3002\u6b63\u78ba\u306a\u60c5\u5831\u306f<a href=\"https:\/\/robertsspaceindustries.com\/\" target=\"_blank\" style=\"color: var(--accent-color);\">\u516c\u5f0f\u30b5\u30a4\u30c8<\/a>\u3067\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ =====================================\n \/\/ \u521d\u671f\u8a2d\u5b9a\u3068\u5171\u901a\u5909\u6570\n \/\/ =====================================\n \n \/\/ API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8 - \u30c7\u30d7\u30ed\u30a4\u5f8c\u306b\u66f4\u65b0\n const API_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwv5NL-3DvRGuni3JF2r6vvIGTtfve1ZB5YEIyoY-TyGtMyh5RyMIljNLmgWmUuSC4\/exec';\n \n \/\/ \u5171\u901a\u30c7\u30fc\u30bf\n let exchangeRate = 150.00;\n let shipsData = [];\n let ccuData = [];\n let filteredShipsData = [];\n let filteredCcuData = [];\n \n \/\/ \u8239\u60c5\u5831\u30ea\u30b9\u30c8\u306e\u5217\u5b9a\u7fa9\n const shipsColumns = [\n { id: 'select', label: '\u9078\u629e', defaultVisible: true, width: '40px' },\n { id: 'image', label: '\u753b\u50cf', defaultVisible: true, width: '120px' },\n { id: 'name', label: '\u8239\u540d', defaultVisible: true, width: '180px' },\n { id: 'manufacturer', label: '\u88fd\u9020\u4f1a\u793e', defaultVisible: false },\n { id: 'role', label: '\u5f79\u5272', defaultVisible: true },\n { id: 'status', label: '\u88fd\u9020\u72b6\u6cc1', defaultVisible: true },\n { id: 'availability', label: '\u8cfc\u5165\u306e\u53ef\u5426', defaultVisible: true },\n { id: 'qtCapable', label: 'QT\u6a5f\u80fd', defaultVisible: false },\n { id: 'pledge', label: 'Pledge $', defaultVisible: true },\n { id: 'origPledge', label: 'Orig pledge $', defaultVisible: false },\n { id: 'warbond', label: 'Warbond $', defaultVisible: true },\n { id: 'origWarbond', label: 'Orig warbond $', defaultVisible: false },\n { id: 'loaner', label: '\u672a\u5b9f\u88c5\u6642\u4ee3\u66ff\u8239', defaultVisible: true },\n { id: 'ingamePrice', label: '\u30b2\u30fc\u30e0\u5185\u4fa1\u683c', defaultVisible: true },\n { id: 'rentalPrice', label: '\u5e73\u5747\u30ec\u30f3\u30bf\u30eb\u4fa1\u683c\/\u65e5', defaultVisible: true },\n { id: 'length', label: '\u5168\u9577', defaultVisible: true },\n { id: 'width', label: '\u5168\u5e45', defaultVisible: false },\n { id: 'height', label: '\u9ad8\u3055', defaultVisible: false },\n { id: 'cargo', label: 'Cargo', defaultVisible: true },\n { id: 'scmSpeed', label: 'SCM speed', defaultVisible: true },\n { id: 'maxSpeed', label: 'Max speed', defaultVisible: true },\n { id: 'pledgeJpy', label: '\u5186\u4fa1\u683c(Pledge\u5186)', defaultVisible: false }\n ];\n \n \/\/ \u5217\u306e\u8868\u793a\u72b6\u614b\n let columnVisibility = {};\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30fc\u72b6\u614b\u306e\u521d\u671f\u5316\n shipsColumns.forEach(column => {\n columnVisibility[column.id] = column.defaultVisible;\n });\n \n \/\/ \u9078\u629e\u3055\u308c\u305f\u8239ID\u3092\u4fdd\u6301\n let selectedShipIds = [];\n \n \/\/ \u73fe\u5728\u306e\u30ba\u30fc\u30e0\u7387\n let currentZoom = 100;\n \n \/\/ =====================================\n \/\/ \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u95a2\u6570\n \/\/ =====================================\n \n \/\/ \u73fe\u5728\u306e\u65e5\u4ed8\u3092\u8868\u793a\n function updateCurrentDate() {\n const now = new Date();\n const year = now.getFullYear();\n const month = now.getMonth() + 1;\n const dateText = `${year}\u5e74${month}\u6708`;\n document.getElementById('current-date').textContent = dateText;\n }\n \n \/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\n function showError(message, retryFn = null) {\n const errorContainer = document.getElementById('error-container');\n errorContainer.innerHTML = `\n <div class=\"error-message\">\n <p>${message}<\/p>\n ${retryFn ? '<div class=\"error-actions\"><button class=\"btn btn-primary\" id=\"retry-btn\">\u518d\u8a66\u884c<\/button><\/div>' : ''}\n <\/div>\n `;\n errorContainer.style.display = 'block';\n \n if (retryFn) {\n document.getElementById('retry-btn').addEventListener('click', function() {\n errorContainer.style.display = 'none';\n retryFn();\n });\n }\n }\n \n \/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u975e\u8868\u793a\n function hideError() {\n document.getElementById('error-container').style.display = 'none';\n }\n \n \/\/ API\u547c\u3073\u51fa\u3057\u95a2\u6570\uff08\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u4ed8\u304d\uff09\n async function fetchFromApi(action, timeout = 10000) {\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), timeout);\n \n try {\n const response = await fetch(`${API_URL}?action=${action}&nocache=${Date.now()}`, {\n signal: controller.signal,\n mode: 'cors',\n cache: 'no-store'\n });\n \n clearTimeout(timeoutId);\n \n if (!response.ok) {\n throw new Error(`HTTP \u30a8\u30e9\u30fc: ${response.status}`);\n }\n \n return await response.json();\n } catch (error) {\n clearTimeout(timeoutId);\n \n if (error.name === 'AbortError') {\n throw new Error('\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u3057\u307e\u3057\u305f');\n }\n throw error;\n }\n }\n \n \/\/ =====================================\n \/\/ \u30bf\u30d6\u5207\u308a\u66ff\u3048\u6a5f\u80fd\n \/\/ =====================================\n \n \/\/ \u30bf\u30d6\u5207\u308a\u66ff\u3048\n document.querySelectorAll('.nav-tab').forEach(tab => {\n tab.addEventListener('click', function() {\n const targetSection = this.dataset.section;\n \n \/\/ \u30a2\u30af\u30c6\u30a3\u30d6\u30bf\u30d6\u306e\u5909\u66f4\n document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));\n this.classList.add('active');\n \n \/\/ \u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8868\u793a\u5207\u308a\u66ff\u3048\n document.querySelectorAll('.content-section').forEach(section => {\n section.classList.remove('active');\n });\n document.getElementById(targetSection).classList.add('active');\n \n \/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u30ea\u30bb\u30c3\u30c8\n hideError();\n });\n });\n \n \/\/ =====================================\n \/\/ \u30c7\u30fc\u30bf\u53d6\u5f97\u95a2\u9023\n \/\/ =====================================\n \n \/\/ \u521d\u671f\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\n function loadInitialData() {\n Promise.all([\n fetchShipsData(),\n fetchCcuData()\n ]).then(() => {\n \/\/ \u3059\u3079\u3066\u306e\u30c7\u30fc\u30bf\u304c\u8aad\u307f\u8fbc\u307e\u308c\u305f\u3089\u70ba\u66ff\u30ec\u30fc\u30c8\u3092\u66f4\u65b0\n document.getElementById('rate-value').textContent = exchangeRate.toFixed(2);\n }).catch(error => {\n console.error('\u30c7\u30fc\u30bf\u8aad\u307f\u8fbc\u307f\u30a8\u30e9\u30fc:', error);\n showError(`\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f: ${error.message}`, loadInitialData);\n });\n }\n \n \/\/ \u8239\u60c5\u5831\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\n async function fetchShipsData() {\n try {\n document.getElementById('ships-loading').style.display = 'flex';\n \n \/\/ \u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u306e\u5b9a\u7fa9\uff08API\u30a8\u30e9\u30fc\u6642\u7528\uff09\n const backupShipsData = [\n { id: 1, name: \"Aurora MR\", role: \"\u30b9\u30bf\u30fc\u30bf\u30fc\", status: \"\u4f7f\u7528\u53ef\u80fd\", availability: \"\u3044\u3064\u3067\u3082\u8cfc\u5165\u53ef\u80fd\", pledge: \"$45\", manufacturer: \"Roberts Space Industries\", category: \"\u5b87\u5b99\u8239\", qtCapable: true, image: \"https:\/\/media.robertsspaceindustries.com\/bzlyldr76v78c\/source.jpg\" },\n { id: 2, name: \"Mustang Alpha\", role: \"\u30b9\u30bf\u30fc\u30bf\u30fc\", status: \"\u4f7f\u7528\u53ef\u80fd\", availability: \"\u3044\u3064\u3067\u3082\u8cfc\u5165\u53ef\u80fd\", pledge: \"$45\", manufacturer: \"Consolidated Outland\", category: \"\u5b87\u5b99\u8239\", qtCapable: true, image: \"https:\/\/media.robertsspaceindustries.com\/o2kwrn6n9synm\/source.jpg\" },\n { id: 3, name: \"Avenger Titan\", role: \"\u8efd\u8ca8\u7269\/\u6226\u95d8\", status: \"\u4f7f\u7528\u53ef\u80fd\", availability: \"\u3044\u3064\u3067\u3082\u8cfc\u5165\u53ef\u80fd\", pledge: \"$55\", manufacturer: \"Aegis Dynamics\", category: \"\u5b87\u5b99\u8239\", qtCapable: true, image: \"https:\/\/media.robertsspaceindustries.com\/3u3yzdxgx82uv\/source.jpg\" }\n ];\n \n const result = await fetchFromApi('getShips');\n \n if (result.status === 'success' && Array.isArray(result.data) && result.data.length > 0) {\n shipsData = result.data;\n exchangeRate = result.exchangeRate || exchangeRate;\n } else {\n throw new Error('\u8239\u30c7\u30fc\u30bf\u306e\u5f62\u5f0f\u304c\u4e0d\u6b63\u3067\u3059');\n }\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30fc\u9078\u629e\u80a2\u3092\u751f\u6210\n populateFilterOptions();\n \n \/\/ \u5217\u8868\u793a\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u751f\u6210\n generateColumnCheckboxes();\n \n \/\/ \u30c6\u30fc\u30d6\u30eb\u30d8\u30c3\u30c0\u30fc\u3092\u751f\u6210\n generateShipsTableHeader();\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3068\u8868\u793a\n filterShips();\n \n document.getElementById('ships-loading').style.display = 'none';\n } catch (error) {\n console.error('\u8239\u30c7\u30fc\u30bf\u53d6\u5f97\u30a8\u30e9\u30fc:', error);\n \n \/\/ \u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u3092\u4f7f\u7528\n if (shipsData.length === 0) {\n shipsData = backupShipsData;\n \/\/ \u6700\u4f4e\u9650\u306e\u30d5\u30a3\u30eb\u30bf\u30fc\u9078\u629e\u80a2\u3068UI\u3092\u751f\u6210\n populateFilterOptions();\n generateColumnCheckboxes();\n generateShipsTableHeader();\n filterShips();\n }\n \n document.getElementById('ships-loading').style.display = 'none';\n showError(`\u8239\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u304c\u3001\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059: ${error.message}`, fetchShipsData);\n }\n }\n \n \/\/ CCU\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\n async function fetchCcuData() {\n try {\n document.getElementById('ccu-loading').style.display = 'flex';\n \n \/\/ \u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u306e\u5b9a\u7fa9\uff08API\u30a8\u30e9\u30fc\u6642\u7528\uff09\n const backupCcuData = [\n { id: 1, img: 'https:\/\/media.robertsspaceindustries.com\/bzlyldr76v78c\/source.jpg', count: 1, from: 'Retalitor', to: 'C2 Hercules', pledge: 247.51, saving: 0.00, warbond: 0 },\n { id: 2, img: 'https:\/\/media.robertsspaceindustries.com\/o2kwrn6n9synm\/source.jpg', count: 1, from: 'Terrapin', to: 'Corsair', pledge: 33.01, saving: 0.00, warbond: 0 },\n { id: 3, img: 'https:\/\/media.robertsspaceindustries.com\/3u3yzdxgx82uv\/source.jpg', count: 1, from: 'Blade', to: 'Eclipse', pledge: 27.50, saving: 0.00, warbond: 0 },\n { id: 4, img: 'https:\/\/media.robertsspaceindustries.com\/bj11ubfacjfmr\/source.jpg', count: 1, from: 'Freelancer DUR', to: 'F7C-R Hornet Tracker Mk I', pledge: 5.50, saving: 11.00, warbond: 1 }\n ];\n \n const result = await fetchFromApi('getCcuData');\n \n if (result.status === 'success' && Array.isArray(result.data) && result.data.length > 0) {\n ccuData = result.data;\n exchangeRate = result.exchangeRate || exchangeRate;\n } else {\n throw new Error('CCU\u30c7\u30fc\u30bf\u306e\u5f62\u5f0f\u304c\u4e0d\u6b63\u3067\u3059');\n }\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3068\u8868\u793a\n filterCcuData();\n \n document.getElementById('ccu-loading').style.display = 'none';\n } catch (error) {\n console.error('CCU\u30c7\u30fc\u30bf\u53d6\u5f97\u30a8\u30e9\u30fc:', error);\n \n \/\/ \u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u3092\u4f7f\u7528\n if (ccuData.length === 0) {\n ccuData = backupCcuData;\n filterCcuData();\n }\n \n document.getElementById('ccu-loading').style.display = 'none';\n showError(`CCU\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u304c\u3001\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059: ${error.message}`, fetchCcuData);\n }\n }\n \n \/\/ =====================================\n \/\/ \u8239\u60c5\u5831\u30ea\u30b9\u30c8\u95a2\u9023\u6a5f\u80fd\n \/\/ =====================================\n \n \/\/ \u30d5\u30a3\u30eb\u30bf\u30fc\u9078\u629e\u80a2\u3092\u8a2d\u5b9a\n function populateFilterOptions() {\n \/\/ \u88fd\u9020\u4f1a\u793e\u30d5\u30a3\u30eb\u30bf\u30fc\n const manufacturers = new Set();\n const roles = new Set();\n const statuses = new Set();\n const availabilities = new Set();\n \n shipsData.forEach(ship => {\n if (ship.manufacturer && ship.manufacturer !== '-') manufacturers.add(ship.manufacturer);\n if (ship.role && ship.role !== '-') roles.add(ship.role);\n if (ship.status && ship.status !== '-') statuses.add(ship.status);\n if (ship.availability && ship.availability !== '-') availabilities.add(ship.availability);\n });\n \n \/\/ \u88fd\u9020\u4f1a\u793e\u30d5\u30a3\u30eb\u30bf\u30fc\n const manufacturerFilter = document.getElementById('manufacturer-filter');\n manufacturerFilter.innerHTML = '<option value=\"\">\u3059\u3079\u3066\u306e\u88fd\u9020\u4f1a\u793e<\/option>';\n Array.from(manufacturers).sort().forEach(manufacturer => {\n const option = document.createElement('option');\n option.value = manufacturer;\n option.textContent = manufacturer;\n manufacturerFilter.appendChild(option);\n });\n \n \/\/ \u5f79\u5272\u30d5\u30a3\u30eb\u30bf\u30fc\n const roleFilter = document.getElementById('role-filter');\n roleFilter.innerHTML = '<option value=\"\">\u3059\u3079\u3066\u306e\u5f79\u5272<\/option>';\n Array.from(roles).sort().forEach(role => {\n const option = document.createElement('option');\n option.value = role;\n option.textContent = role;\n roleFilter.appendChild(option);\n });\n \n \/\/ \u88fd\u9020\u72b6\u6cc1\u30d5\u30a3\u30eb\u30bf\u30fc\n const statusFilter = document.getElementById('status-filter');\n statusFilter.innerHTML = '<option value=\"\">\u3059\u3079\u3066\u306e\u88fd\u9020\u72b6\u6cc1<\/option>';\n Array.from(statuses).sort().forEach(status => {\n const option = document.createElement('option');\n option.value = status;\n option.textContent = status;\n statusFilter.appendChild(option);\n });\n \n \/\/ \u8cfc\u5165\u53ef\u5426\u30d5\u30a3\u30eb\u30bf\u30fc\n const availabilityFilter = document.getElementById('availability-filter');\n availabilityFilter.innerHTML = '<option value=\"\">\u3059\u3079\u3066\u306e\u8cfc\u5165\u53ef\u5426<\/option>';\n Array.from(availabilities).sort().forEach(availability => {\n const option = document.createElement('option');\n option.value = availability;\n option.textContent = availability;\n availabilityFilter.appendChild(option);\n });\n }\n \n \/\/ \u5217\u8868\u793a\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u751f\u6210\n function generateColumnCheckboxes() {\n const columnsContainer = document.getElementById('ships-columns');\n columnsContainer.innerHTML = '';\n \n shipsColumns.forEach(column => {\n const checkboxItem = document.createElement('div');\n checkboxItem.className = 'checkbox-item';\n \n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.id = `column-${column.id}`;\n checkbox.checked = columnVisibility[column.id];\n checkbox.addEventListener('change', function() {\n columnVisibility[column.id] = this.checked;\n updateColumnVisibility();\n });\n \n const label = document.createElement('label');\n label.htmlFor = `column-${column.id}`;\n label.textContent = column.label;\n \n checkboxItem.appendChild(checkbox);\n checkboxItem.appendChild(label);\n columnsContainer.appendChild(checkboxItem);\n });\n }\n \n \/\/ \u30c6\u30fc\u30d6\u30eb\u30d8\u30c3\u30c0\u30fc\u3092\u751f\u6210\n function generateShipsTableHeader() {\n const headerRow = document.getElementById('ships-table-header');\n headerRow.innerHTML = '';\n \n shipsColumns.forEach(column => {\n const th = document.createElement('th');\n th.setAttribute('data-column', column.id);\n th.textContent = column.label;\n \n if (column.width) {\n th.style.width = column.width;\n }\n \n \/\/ \u30bd\u30fc\u30c8\u6a5f\u80fd\u306f\u7701\u7565\uff08\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u8ffd\u52a0\uff09\n \n headerRow.appendChild(th);\n });\n \n \/\/ \u5217\u306e\u8868\u793a\/\u975e\u8868\u793a\u3092\u9069\u7528\n updateColumnVisibility();\n }\n \n \/\/ \u5217\u306e\u8868\u793a\/\u975e\u8868\u793a\u3092\u66f4\u65b0\n function updateColumnVisibility() {\n shipsColumns.forEach(column => {\n const cells = document.querySelectorAll(`th[data-column=\"${column.id}\"], td[data-column=\"${column.id}\"]`);\n const isVisible = columnVisibility[column.id];\n \n cells.forEach(cell => {\n if (isVisible) {\n cell.classList.remove('hidden-column');\n } else {\n cell.classList.add('hidden-column');\n }\n });\n });\n }\n \n \/\/ \u8239\u30c7\u30fc\u30bf\u3092\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\n function filterShips() {\n const searchTerm = document.getElementById('ships-search').value.toLowerCase();\n const manufacturerValue = document.getElementById('manufacturer-filter').value;\n const roleValue = document.getElementById('role-filter').value;\n const statusValue = document.getElementById('status-filter').value;\n const availabilityValue = document.getElementById('availability-filter').value;\n \n const showSpaceships = document.getElementById('show-spaceships').checked;\n const showVehicles = document.getElementById('show-vehicles').checked;\n const showQtCapable = document.getElementById('show-qt-capable').checked;\n const showQtIncapable = document.getElementById('show-qt-incapable').checked;\n \n filteredShipsData = shipsData.filter(ship => {\n \/\/ \u30ab\u30c6\u30b4\u30ea\u30d5\u30a3\u30eb\u30bf\u30fc\n if (ship.category === '\u5b87\u5b99\u8239' && !showSpaceships) return false;\n if (ship.category === '\u5730\u4e0a\u8eca\u4e21' && !showVehicles) return false;\n \n \/\/ QT\u6a5f\u80fd\u30d5\u30a3\u30eb\u30bf\u30fc\n if (ship.qtCapable && !showQtCapable) return false;\n if (!ship.qtCapable && !showQtIncapable) return false;\n \n \/\/ \u691c\u7d22\u8a9e\u53e5\n const matchesSearch = \n (ship.name && ship.name.toLowerCase().includes(searchTerm)) ||\n (ship.role && ship.role.toLowerCase().includes(searchTerm)) ||\n (ship.manufacturer && ship.manufacturer.toLowerCase().includes(searchTerm)) ||\n (ship.status && ship.status.toLowerCase().includes(searchTerm)) ||\n (ship.availability && ship.availability.toLowerCase().includes(searchTerm));\n \n \/\/ \u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30d5\u30a3\u30eb\u30bf\u30fc\n const matchesManufacturer = manufacturerValue === '' || ship.manufacturer === manufacturerValue;\n const matchesRole = roleValue === '' || ship.role === roleValue;\n const matchesStatus = statusValue === '' || ship.status === statusValue;\n const matchesAvailability = availabilityValue === '' || ship.availability === availabilityValue;\n \n return matchesSearch && matchesManufacturer && matchesRole && matchesStatus && matchesAvailability;\n });\n \n renderShipsTable();\n }\n \n \/\/ \u8239\u30c7\u30fc\u30bf\u30c6\u30fc\u30d6\u30eb\u3092\u63cf\u753b\n function renderShipsTable() {\n const tableBody = document.getElementById('ships-table-body');\n tableBody.innerHTML = '';\n \n if (filteredShipsData.length === 0) {\n const emptyRow = document.createElement('tr');\n const emptyCell = document.createElement('td');\n emptyCell.colSpan = shipsColumns.length;\n emptyCell.textContent = '\u8868\u793a\u3059\u308b\u8239\u30c7\u30fc\u30bf\u304c\u3042\u308a\u307e\u305b\u3093';\n emptyCell.style.textAlign = 'center';\n emptyCell.style.padding = '20px';\n emptyRow.appendChild(emptyCell);\n tableBody.appendChild(emptyRow);\n return;\n }\n \n filteredShipsData.forEach(ship => {\n const row = document.createElement('tr');\n row.dataset.id = ship.id;\n \n \/\/ \u9078\u629e\u5217\n const selectTd = document.createElement('td');\n selectTd.setAttribute('data-column', 'select');\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selectedShipIds.includes(ship.id);\n checkbox.addEventListener('change', function() {\n if (this.checked) {\n if (!selectedShipIds.includes(ship.id)) {\n selectedShipIds.push(ship.id);\n }\n } else {\n selectedShipIds = selectedShipIds.filter(id => id !== ship.id);\n }\n });\n selectTd.appendChild(checkbox);\n row.appendChild(selectTd);\n \n \/\/ \u753b\u50cf\u5217\n const imageTd = document.createElement('td');\n imageTd.setAttribute('data-column', 'image');\n if (ship.image && ship.image !== '-') {\n const img = document.createElement('img');\n img.className = 'ship-image';\n img.src = ship.image;\n img.alt = ship.name;\n img.loading = 'lazy';\n img.onerror = function() {\n this.src = 'https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg';\n };\n imageTd.appendChild(img);\n } else {\n imageTd.textContent = 'No Image';\n }\n row.appendChild(imageTd);\n \n \/\/ \u6b8b\u308a\u306e\u5217\u3092\u52d5\u7684\u306b\u751f\u6210\n shipsColumns.forEach(column => {\n if (column.id === 'select' || column.id === 'image') return;\n \n const td = document.createElement('td');\n td.setAttribute('data-column', column.id);\n \n if (column.id === 'qtCapable') {\n td.textContent = ship[column.id] ? '\u53ef\u80fd' : '\u4e0d\u53ef';\n } else {\n td.textContent = ship[column.id] || '-';\n }\n \n row.appendChild(td);\n });\n \n tableBody.appendChild(row);\n });\n \n updateColumnVisibility();\n }\n \n \/\/ \u62e1\u5927\u7e2e\u5c0f\u6a5f\u80fd\n function setupZoomController() {\n const zoomSlider = document.getElementById('ships-zoom-slider');\n const zoomValue = document.getElementById('ships-zoom-value');\n const zoomIn = document.getElementById('ships-zoom-in');\n const zoomOut = document.getElementById('ships-zoom-out');\n const tableWrapper = document.getElementById('ships-table-container');\n \n \/\/ \u30b9\u30e9\u30a4\u30c0\u30fc\u5909\u66f4\u6642\n zoomSlider.addEventListener('input', function() {\n currentZoom = parseInt(this.value);\n updateZoom();\n });\n \n \/\/ \u30ba\u30fc\u30e0\u30a4\u30f3\n zoomIn.addEventListener('click', function() {\n currentZoom = Math.min(150, currentZoom + 10);\n zoomSlider.value = currentZoom;\n updateZoom();\n });\n \n \/\/ \u30ba\u30fc\u30e0\u30a2\u30a6\u30c8\n zoomOut.addEventListener('click', function() {\n currentZoom = Math.max(50, currentZoom - 10);\n zoomSlider.value = currentZoom;\n updateZoom();\n });\n \n \/\/ \u30ba\u30fc\u30e0\u66f4\u65b0\u95a2\u6570\n function updateZoom() {\n zoomValue.textContent = `${currentZoom}%`;\n tableWrapper.style.fontSize = `${currentZoom}%`;\n }\n }\n \n \/\/ =====================================\n \/\/ CCU\u30d5\u30a1\u30a4\u30f3\u30c0\u30fc\u95a2\u9023\u6a5f\u80fd\n \/\/ =====================================\n \n \/\/ CCU\u30c7\u30fc\u30bf\u3092\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\n function filterCcuData() {\n const searchTerm = document.getElementById('ccu-search').value.toLowerCase();\n const showSaving = document.getElementById('show-saving').checked;\n const showWarbond = document.getElementById('show-warbond').checked;\n const showNegativeSaving = document.getElementById('show-negative-saving').checked;\n const pledgeMin = parseFloat(document.getElementById('pledge-min').value) || 0;\n const pledgeMax = parseFloat(document.getElementById('pledge-max').value) || Infinity;\n \n filteredCcuData = ccuData.filter(ccu => {\n \/\/ \u691c\u7d22\u8a9e\u53e5\n const matchesSearch = searchTerm === '' || \n ccu.from.toLowerCase().includes(searchTerm) || \n ccu.to.toLowerCase().includes(searchTerm);\n \n \/\/ \u7bc0\u7d04\u30d5\u30a3\u30eb\u30bf\u30fc\n const matchesSaving = !showSaving || ccu.saving > 0;\n \n \/\/ Warbond\u30d5\u30a3\u30eb\u30bf\u30fc\n const matchesWarbond = !showWarbond || ccu.warbond === 1;\n \n \/\/ \u30de\u30a4\u30ca\u30b9\u5024\u30d5\u30a3\u30eb\u30bf\u30fc\n const matchesNegative = showNegativeSaving || ccu.saving >= 0;\n \n \/\/ \u4fa1\u683c\u7bc4\u56f2\n const matchesPledgeRange = ccu.pledge >= pledgeMin && ccu.pledge <= pledgeMax;\n \n return matchesSearch && matchesSaving && matchesWarbond && matchesNegative && matchesPledgeRange;\n });\n \n renderCcuTable();\n }\n \n \/\/ CCU\u30c6\u30fc\u30d6\u30eb\u3092\u63cf\u753b\n function renderCcuTable() {\n const tableBody = document.getElementById('ccu-table-body');\n tableBody.innerHTML = '';\n \n if (filteredCcuData.length === 0) {\n const emptyRow = document.createElement('tr');\n const emptyCell = document.createElement('td');\n emptyCell.colSpan = 7;\n emptyCell.textContent = '\u8868\u793a\u3059\u308bCCU\u30c7\u30fc\u30bf\u304c\u3042\u308a\u307e\u305b\u3093';\n emptyCell.style.textAlign = 'center';\n emptyCell.style.padding = '20px';\n emptyRow.appendChild(emptyCell);\n tableBody.appendChild(emptyRow);\n return;\n }\n \n filteredCcuData.forEach(ccu => {\n const row = document.createElement('tr');\n row.dataset.id = ccu.id;\n \n \/\/ \u7bc0\u7d04\u984d\u306e\u30af\u30e9\u30b9\n let savingClass = 'zero-value';\n if (ccu.saving > 0) {\n savingClass = 'positive-value';\n } else if (ccu.saving < 0) {\n savingClass = 'negative-value';\n }\n \n \/\/ \u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u8a08\u7b97\n let savingPercentage = 0;\n if (ccu.pledge > 0) {\n savingPercentage = Math.round((ccu.saving \/ ccu.pledge) * 100);\n }\n \n \/\/ \u753b\u50cfURL\u304c\u306a\u3044\u5834\u5408\u306e\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\n const imgUrl = ccu.img && ccu.img !== '' \n ? ccu.img \n : 'https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg';\n \n row.innerHTML = `\n <td><img decoding=\"async\" src=\"${imgUrl}\" alt=\"${ccu.from}\" class=\"ship-image\" onerror=\"this.src='https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg'\"><\/td>\n <td>${ccu.count}<\/td>\n <td>${ccu.from}<\/td>\n <td>${ccu.to}<\/td>\n <td>$${ccu.pledge.toFixed(2)}<\/td>\n <td class=\"${savingClass}\">$${ccu.saving.toFixed(2)}${ccu.saving !== 0 ? `<span class=\"percentage\">${savingPercentage}%<\/span>` : ''}<\/td>\n <td>${ccu.warbond ? '\u2713' : ''}<\/td>\n `;\n \n \/\/ \u884c\u30af\u30ea\u30c3\u30af\u6642\u306e\u51e6\u7406\n row.addEventListener('click', function() {\n document.querySelectorAll('#ccu-table tr').forEach(r => r.classList.remove('selected'));\n this.classList.add('selected');\n displayCcuRoute(ccu);\n });\n \n tableBody.appendChild(row);\n });\n }\n \n \/\/ CCU\u7d4c\u8def\u306e\u8868\u793a\n function displayCcuRoute(ccu) {\n const routeDisplay = document.getElementById('ccu-route-display');\n \n \/\/ Warbond\u304b\u3069\u3046\u304b\u306e\u30af\u30e9\u30b9\n const warbondClass = ccu.warbond ? 'warbond' : '';\n \n \/\/ \u7bc0\u7d04\u984d\u306e\u8868\u793a\n const savingsDisplay = ccu.saving !== 0 \n ? `<div class=\"route-savings\">\u7bc0\u7d04\u984d: $${ccu.saving.toFixed(2)} (${Math.round(ccu.saving * exchangeRate).toLocaleString()}\u5186)<\/div>` \n : '<div class=\"route-savings\">\u7bc0\u7d04\u984d: $0.00<\/div>';\n \n \/\/ \u753b\u50cfURL\n const fromImgUrl = ccu.img && ccu.img !== '' \n ? ccu.img \n : 'https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg';\n \n \/\/ \u691c\u7d22\u3057\u3066\u300cto\u300d\u306e\u8239\u306e\u753b\u50cf\u3092\u63a2\u3059\n let toImgUrl = '';\n const toShip = ccuData.find(c => c.from === ccu.to);\n if (toShip && toShip.img) {\n toImgUrl = toShip.img;\n } else {\n toImgUrl = fromImgUrl; \/\/ \u898b\u3064\u304b\u3089\u306a\u3044\u5834\u5408\u306f\u540c\u3058\u753b\u50cf\u3092\u4f7f\u7528\n }\n \n routeDisplay.innerHTML = `\n ${savingsDisplay}\n <div class=\"route-item\">\n <img decoding=\"async\" src=\"${fromImgUrl}\" alt=\"${ccu.from}\" class=\"route-image\" onerror=\"this.src='https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg'\">\n <div class=\"route-name\">${ccu.from}<\/div>\n <div class=\"route-price\">${Math.round(ccu.pledge * exchangeRate).toLocaleString()}\u5186<\/div>\n <\/div>\n \n <div class=\"route-arrow\">\u2192<\/div>\n \n <div class=\"route-item ${warbondClass}\">\n <img decoding=\"async\" src=\"${toImgUrl}\" alt=\"${ccu.to}\" class=\"route-image\" onerror=\"this.src='https:\/\/robertsspaceindustries.com\/media\/z2vo2a613vja6r\/store_small\/Ship-Avatar.jpg'\">\n <div class=\"route-name\">${ccu.to}${ccu.warbond ? '<span class=\"savings-badge\">Warbond<\/span>' : ''}<\/div>\n <div class=\"route-price\">Pledge: $${ccu.pledge.toFixed(2)} (${Math.round(ccu.pledge * exchangeRate).toLocaleString()}\u5186)<\/div>\n <\/div>\n `;\n }\n \n \/\/ =====================================\n \/\/ \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u8a2d\u5b9a\n \/\/ =====================================\n \n \/\/ \u8239\u60c5\u5831\u691c\u7d22\u3068\u30d5\u30a3\u30eb\u30bf\u30fc\n document.getElementById('ships-search').addEventListener('input', filterShips);\n document.getElementById('manufacturer-filter').addEventListener('change', filterShips);\n document.getElementById('role-filter').addEventListener('change', filterShips);\n document.getElementById('status-filter').addEventListener('change', filterShips);\n document.getElementById('availability-filter').addEventListener('change', filterShips);\n document.getElementById('show-spaceships').addEventListener('change', filterShips);\n document.getElementById('show-vehicles').addEventListener('change', filterShips);\n document.getElementById('show-qt-capable').addEventListener('change', filterShips);\n document.getElementById('show-qt-incapable').addEventListener('change', filterShips);\n \n \/\/ \u8239\u60c5\u5831\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\n document.getElementById('ships-reset-btn').addEventListener('click', function() {\n document.getElementById('ships-search').value = '';\n document.getElementById('manufacturer-filter').value = '';\n document.getElementById('role-filter').value = '';\n document.getElementById('status-filter').value = '';\n document.getElementById('availability-filter').value = '';\n document.getElementById('show-spaceships').checked = true;\n document.getElementById('show-vehicles').checked = true;\n document.getElementById('show-qt-capable').checked = true;\n document.getElementById('show-qt-incapable').checked = true;\n \n \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u5217\u8868\u793a\u306b\u623b\u3059\n shipsColumns.forEach(column => {\n columnVisibility[column.id] = column.defaultVisible;\n const checkbox = document.getElementById(`column-${column.id}`);\n if (checkbox) checkbox.checked = column.defaultVisible;\n });\n \n updateColumnVisibility();\n filterShips();\n });\n \n \/\/ CCU\u691c\u7d22\u3068\u30d5\u30a3\u30eb\u30bf\u30fc\n document.getElementById('ccu-search').addEventListener('input', filterCcuData);\n document.getElementById('show-saving').addEventListener('change', filterCcuData);\n document.getElementById('show-warbond').addEventListener('change', filterCcuData);\n document.getElementById('show-negative-saving').addEventListener('change', filterCcuData);\n document.getElementById('pledge-min').addEventListener('change', filterCcuData);\n document.getElementById('pledge-max').addEventListener('change', filterCcuData);\n \n \/\/ CCU\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\n document.getElementById('ccu-reset-btn').addEventListener('click', function() {\n document.getElementById('ccu-search').value = '';\n document.getElementById('show-saving').checked = false;\n document.getElementById('show-warbond').checked = false;\n document.getElementById('show-negative-saving').checked = false;\n document.getElementById('pledge-min').value = '0';\n document.getElementById('pledge-max').value = '1000';\n filterCcuData();\n });\n \n \/\/ \u30c7\u30fc\u30bf\u66f4\u65b0\u30dc\u30bf\u30f3\n document.getElementById('refresh-data-btn').addEventListener('click', function() {\n hideError();\n loadInitialData();\n });\n \n \/\/ =====================================\n \/\/ \u521d\u671f\u5316\u51e6\u7406\n \/\/ =====================================\n \n \/\/ \u73fe\u5728\u306e\u65e5\u4ed8\u3092\u8868\u793a\n updateCurrentDate();\n \n \/\/ \u62e1\u5927\u7e2e\u5c0f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\n setupZoomController();\n \n \/\/ \u521d\u671f\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\n loadInitialData();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb Star Citizen \u7d71\u5408\u60c5\u5831\u30dd\u30fc\u30bf\u30eb 1 USD = 150.00 JPY \u30c7\u30fc\u30bf\u3092\u66f4\u65b0 \u7dcf\u5408\u30b2\u30fc\u30e0\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u7121\u6599Discord\uff1ahttps:\/\/discord.com […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"swell_btn_cv_data":"","footnotes":""},"class_list":["post-1003","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/pages\/1003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1003"}],"version-history":[{"count":66,"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/pages\/1003\/revisions"}],"predecessor-version":[{"id":1106,"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=\/wp\/v2\/pages\/1003\/revisions\/1106"}],"wp:attachment":[{"href":"https:\/\/www.samurai2948.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}