{"id":3455,"date":"2026-01-22T08:07:22","date_gmt":"2026-01-22T08:07:22","guid":{"rendered":"https:\/\/zekno.co.jp\/Audible\/?page_id=3455"},"modified":"2026-01-22T08:07:23","modified_gmt":"2026-01-22T08:07:23","slug":"aptitude-test","status":"publish","type":"page","link":"https:\/\/zekno.co.jp\/Audible\/aptitude-test\/","title":{"rendered":"\u3010\u7121\u6599\u3011Audible\uff08\u30aa\u30fc\u30c7\u30a3\u30d6\u30eb\uff09\u9069\u6027\u8a3a\u65ad\u30101\u5206\u3067\u8a3a\u65ad\u5b8c\u4e86\uff01\u3011"},"content":{"rendered":"\n<!-- Tailwind CSS (\u30c7\u30b6\u30a4\u30f3\u7528) -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<!-- \u8a3a\u65ad\u30c4\u30fc\u30eb\u57cb\u3081\u8fbc\u307f\u7528\u30b3\u30f3\u30c6\u30ca -->\n<div id=\"audible-diagnostic-app\" class=\"w-full max-w-md mx-auto my-8 bg-white rounded-3xl shadow-xl overflow-hidden font-sans text-slate-800\">\n    <!-- \u30b3\u30f3\u30c6\u30f3\u30c4\u306fJavaScript\u306b\u3088\u3063\u3066\u3053\u3053\u306b\u63cf\u753b\u3055\u308c\u307e\u3059 -->\n    <div class=\"p-8 text-center\">\n        <p>\u8aad\u307f\u8fbc\u307f\u4e2d&#8230;<\/p>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    \/\/ --- \u30a2\u30a4\u30b3\u30f3\u5b9a\u7fa9 (SVG) ---\n    const icons = {\n        clock: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-12 h-12 text-orange-500 mb-4 mx-auto\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>`,\n        bookOpen: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-12 h-12 text-orange-500 mb-4 mx-auto\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"><\/path><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"><\/path><\/svg>`,\n        batteryCharging: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-12 h-12 text-orange-500 mb-4 mx-auto\"><path d=\"M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19\"><\/path><line x1=\"23\" y1=\"13\" x2=\"23\" y2=\"11\"><\/line><polyline points=\"11 6 7 12 13 12 9 18\"><\/polyline><\/svg>`,\n        checkCircle: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-12 h-12 text-orange-500 mb-4 mx-auto\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg>`,\n        headphones: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-12 h-12 text-orange-500 mb-4 mx-auto\"><path d=\"M3 18v-6a9 9 0 0 1 18 0v6\"><\/path><path d=\"M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z\"><\/path><\/svg>`,\n        headphonesWhite: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-16 h-16 mx-auto mb-4 animate-bounce\"><path d=\"M3 18v-6a9 9 0 0 1 18 0v6\"><\/path><path d=\"M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z\"><\/path><\/svg>`,\n        chevronRight: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>`,\n        checkCircleSmall: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-50 group-hover:opacity-100 transition-opacity\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg>`,\n        star: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#fbbf24\" stroke=\"#fbbf24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-yellow-400\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>`,\n        rotateCcw: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"1 4 1 10 7 10\"><\/polyline><path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\"><\/path><\/svg>`,\n        library: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-cyan-600\"><path d=\"m16 6 4 14\"><\/path><path d=\"M12 6v14\"><\/path><path d=\"M8 8v12\"><\/path><path d=\"M4 4v16\"><\/path><\/svg>`,\n        checkList: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-cyan-500 mt-0.5 flex-shrink-0\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg>`,\n        bookOpenCyan: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"80\" height=\"80\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-20 h-20 text-cyan-600 mx-auto mb-4\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"><\/path><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"><\/path><\/svg>`,\n        smartphone: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-cyan-500\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"><\/line><\/svg>`\n    };\n\n    \/\/ --- \u72b6\u614b\u7ba1\u7406 ---\n    const state = {\n        step: 'intro', \/\/ intro, quiz, calculating, result\n        currentQuestionIndex: 0,\n        score: 0\n    };\n\n    \/\/ --- \u8cea\u554f\u30c7\u30fc\u30bf ---\n    const questions = [\n        { id: 1, text: \"\u901a\u52e4\u30fb\u901a\u5b66\u3001\u5bb6\u4e8b\u3084\u904b\u52d5\u306a\u3069\u300c\u8033\u3060\u3051\u7a7a\u3044\u3066\u3044\u308b\u6642\u9593\u300d\u306f\u3042\u308a\u307e\u3059\u304b\uff1f\", icon: icons.clock },\n        { id: 2, text: \"\u300c\u672c\u3092\u8aad\u307f\u305f\u3044\u3051\u308c\u3069\u3001\u5fd9\u3057\u304f\u3066\u8aad\u3080\u6642\u9593\u304c\u306a\u3044\u300d\u3068\u611f\u3058\u308b\u3053\u3068\u306f\u3042\u308a\u307e\u3059\u304b\uff1f\", icon: icons.bookOpen },\n        { id: 3, text: \"\u30b9\u30de\u30db\u3084PC\u306e\u4f7f\u3044\u3059\u304e\u3067\u3001\u76ee\u306e\u75b2\u308c\uff08\u773c\u7cbe\u75b2\u52b4\uff09\u3092\u611f\u3058\u308b\u3053\u3068\u306f\u3042\u308a\u307e\u3059\u304b\uff1f\", icon: icons.batteryCharging },\n        { id: 4, text: \"\u500d\u901f\u518d\u751f\u306a\u3069\u3092\u6d3b\u7528\u3057\u3066\u3001\u52b9\u7387\u3088\u304f\u30a4\u30f3\u30d7\u30c3\u30c8\u3084\u52c9\u5f37\u3092\u3057\u305f\u3044\u3067\u3059\u304b\uff1f\", icon: icons.checkCircle },\n        { id: 5, text: \"\u30e9\u30b8\u30aa\u3084\u30dd\u30c3\u30c9\u30ad\u30e3\u30b9\u30c8\u3001YouTube\u306e\u300c\u805e\u304d\u6d41\u3057\u300d\u304c\u597d\u304d\u3067\u3059\u304b\uff1f\", icon: icons.headphones }\n    ];\n\n    const appContainer = document.getElementById('audible-diagnostic-app');\n\n    \/\/ --- \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u95a2\u6570 ---\n    function render() {\n        appContainer.innerHTML = '';\n\n        if (state.step === 'intro') {\n            appContainer.innerHTML = `\n                <div class=\"bg-gradient-to-r from-orange-400 to-yellow-500 p-8 text-center text-white\">\n                    ${icons.headphonesWhite}\n                    <h1 class=\"text-2xl font-bold mb-2\">Audible\u9069\u6027\u8a3a\u65ad<\/h1>\n                    <p class=\"text-sm opacity-90\">\u305f\u3063\u305f5\u554f\u3067\u3001\u3042\u306a\u305f\u304c\u300c\u8074\u304f\u8aad\u66f8\u300d\u306b\u5411\u3044\u3066\u3044\u308b\u304bAI\u304c\u8a3a\u65ad\u3057\u307e\u3059\u3002<\/p>\n                <\/div>\n                <div class=\"p-8\">\n                    <div class=\"bg-orange-50 rounded-xl p-4 mb-6 border border-orange-100\">\n                        <p class=\"text-gray-700 text-sm leading-relaxed text-center\">\n                            \u300c\u8aad\u66f8\u306e\u6642\u9593\u304c\u53d6\u308c\u306a\u3044...\u300d<br\/>\n                            \u300c\u76ee\u304c\u75b2\u308c\u308b...\u300d<br\/>\n                            \u305d\u3093\u306a\u60a9\u307f\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f<br\/>\n                            \u3042\u306a\u305f\u306e\u30e9\u30a4\u30d5\u30b9\u30bf\u30a4\u30eb\u3068\u306e\u76f8\u6027\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\uff01\n                        <\/p>\n                    <\/div>\n                    <button id=\"btn-start\" class=\"w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-full shadow-lg transform transition hover:scale-105 flex items-center justify-center gap-2\">\n                        \u7121\u6599\u3067\u8a3a\u65ad\u30b9\u30bf\u30fc\u30c8 ${icons.chevronRight}\n                    <\/button>\n                <\/div>\n            `;\n            document.getElementById('btn-start').addEventListener('click', () => {\n                state.step = 'quiz';\n                render();\n            });\n\n        } else if (state.step === 'quiz') {\n            const q = questions[state.currentQuestionIndex];\n            const progress = ((state.currentQuestionIndex + 1) \/ questions.length) * 100;\n            \n            appContainer.innerHTML = `\n                <div class=\"min-h-[500px] flex flex-col\">\n                    <!-- Progress Bar -->\n                    <div class=\"w-full bg-gray-100 h-2\">\n                        <div class=\"bg-orange-500 h-2 transition-all duration-300\" style=\"width: ${progress}%\"><\/div>\n                    <\/div>\n                    <div class=\"flex-1 p-8 flex flex-col items-center justify-center\" id=\"quiz-content\">\n                        <div class=\"text-center mb-8 animate-fade-in\">\n                            <span class=\"inline-block bg-orange-100 text-orange-600 text-xs font-bold px-3 py-1 rounded-full mb-4\">\n                                QUESTION ${q.id} \/ 5\n                            <\/span>\n                            <div class=\"flex justify-center\">${q.icon}<\/div>\n                            <h2 class=\"text-xl font-bold text-gray-800 leading-relaxed\">${q.text}<\/h2>\n                        <\/div>\n                        <div class=\"space-y-4 w-full animate-fade-in\">\n                            <button id=\"btn-yes\" class=\"w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-xl shadow-md transition-all transform active:scale-95 flex items-center justify-between group\">\n                                <span>\u306f\u3044<\/span> ${icons.checkCircleSmall}\n                            <\/button>\n                            <button id=\"btn-no\" class=\"w-full bg-white border-2 border-gray-200 hover:bg-gray-50 text-gray-600 font-bold py-4 px-6 rounded-xl transition-all transform active:scale-95 flex items-center justify-between\">\n                                <span>\u3044\u3044\u3048 \/ \u3069\u3061\u3089\u3067\u3082\u306a\u3044<\/span>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            `;\n            \n            \/\/ \u30af\u30a4\u30ba\u56de\u7b54\u6642\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068\u9077\u79fb\n            const handleAnswer = (isYes) => {\n                const points = isYes ? 20 : 0;\n                state.score += points;\n                \n                const contentDiv = document.getElementById('quiz-content');\n                contentDiv.style.opacity = '0';\n                contentDiv.style.transform = 'translateX(20px)';\n                contentDiv.style.transition = 'all 0.3s';\n\n                setTimeout(() => {\n                    if (state.currentQuestionIndex < questions.length - 1) {\n                        state.currentQuestionIndex++;\n                        render();\n                    } else {\n                        state.step = 'calculating';\n                        render();\n                        setTimeout(() => {\n                            state.step = 'result';\n                            render();\n                        }, 1500);\n                    }\n                }, 300);\n            };\n\n            document.getElementById('btn-yes').addEventListener('click', () => handleAnswer(true));\n            document.getElementById('btn-no').addEventListener('click', () => handleAnswer(false));\n\n        } else if (state.step === 'calculating') {\n            appContainer.innerHTML = `\n                <div class=\"min-h-[500px] flex items-center justify-center p-4\">\n                    <div class=\"text-center\">\n                        <div class=\"animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-orange-500 mx-auto mb-4\"><\/div>\n                        <p class=\"text-gray-600 font-bold animate-pulse\">\u76f8\u6027\u3092\u5206\u6790\u4e2d...<\/p>\n                    <\/div>\n                <\/div>\n            `;\n\n        } else if (state.step === 'result') {\n            const isAudibleType = state.score >= 60;\n            const finalPercentage = state.score;\n            \n            \/\/ \u5186\u30b0\u30e9\u30d5\u8a08\u7b97\n            const radius = 88;\n            const circumference = 2 * Math.PI * radius;\n            const offset = circumference * (1 - finalPercentage \/ 100);\n\n            \/\/ \u30c6\u30fc\u30de\u30ab\u30e9\u30fc\u8a2d\u5b9a\n            const headerBg = isAudibleType ? 'bg-slate-800' : 'bg-indigo-900';\n            const headerText = isAudibleType ? 'text-orange-400' : 'text-cyan-400';\n            const strokeColor = isAudibleType ? '#f97316' : '#f97316'; \/\/ \u30b2\u30fc\u30b8\u306e\u8272\u306f\u5e38\u306b\u30aa\u30ec\u30f3\u30b8\uff08or \u8abf\u6574\u53ef\uff09\n            \n            let resultHTML = '';\n\n            if (isAudibleType) {\n                \/\/ Audible\u5411\u304d\u306eHTML\n                resultHTML = `\n                    <div class=\"relative w-48 h-48 mx-auto mb-6 flex items-center justify-center\">\n                        <svg class=\"w-full h-full transform -rotate-90\">\n                            <circle cx=\"96\" cy=\"96\" r=\"88\" fill=\"transparent\" stroke=\"#f3f4f6\" stroke-width=\"12\"><\/circle>\n                            <circle cx=\"96\" cy=\"96\" r=\"88\" fill=\"transparent\" stroke=\"#f97316\" stroke-width=\"12\"\n                                stroke-dasharray=\"${circumference}\" stroke-dashoffset=\"${offset}\" stroke-linecap=\"round\"\n                                class=\"transition-all duration-1000 ease-out\"><\/circle>\n                        <\/svg>\n                        <div class=\"absolute inset-0 flex flex-col items-center justify-center\">\n                            <span class=\"text-5xl font-black text-slate-800 tracking-tighter\">${finalPercentage}<span class=\"text-2xl\">%<\/span><\/span>\n                            <span class=\"text-xs font-bold text-orange-500 bg-orange-100 px-2 py-1 rounded-full mt-1\">Audible\u5411\u304d<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"mb-8\">\n                        <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u3042\u306a\u305f\u306fAudible\u5411\u304d\u3067\u3059\uff01<\/h3>\n                        <p class=\"text-sm text-gray-600 leading-relaxed text-left bg-orange-50 p-4 rounded-lg border border-orange-100\">\n                            <span class=\"font-bold text-orange-500\">\u89e3\u8aac\uff1a<\/span><br\/>\n                            \u3042\u306a\u305f\u306f\u9699\u9593\u6642\u9593\u3092\u6709\u52b9\u6d3b\u7528\u3057\u305f\u3044\u610f\u6b32\u304c\u9ad8\u304f\u3001\u8033\u304b\u3089\u306e\u5b66\u7fd2\u52b9\u7387\u304c\u975e\u5e38\u306b\u9ad8\u3044\u30bf\u30a4\u30d7\u3067\u3059\u3002Audible\u3092\u4f7f\u3048\u3070\u3001\u4eca\u306e\u751f\u6d3b\u30ea\u30ba\u30e0\u3092\u5909\u3048\u305a\u306b\u3001\u5e74\u9593\u6570\u5341\u518a\u306e\u672c\u3092\u8aad\u7834\u3067\u304d\u308b\u30dd\u30c6\u30f3\u30b7\u30e3\u30eb\u304c\u3042\u308a\u307e\u3059\u3002\n                        <\/p>\n                    <\/div>\n                    <div class=\"space-y-4\">\n                        <a href=\"https:\/\/www.amazon.co.jp\/hz\/audible\/mlp?ie=UTF8&#038;_encoding=UTF8&#038;ASIN=B077S36G2Z&#038;linkCode=ll2&#038;tag=audible043-22&#038;linkId=7ee4e64b91b7910c55967315f641a0b1&#038;language=ja_JP&#038;ref_=as_li_ss_tl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block w-full group relative\">\n                            <div class=\"absolute -inset-0.5 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-200\"><\/div>\n                            <button class=\"relative w-full bg-gradient-to-b from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700 text-white font-bold py-4 px-6 rounded-lg shadow-md flex flex-col items-center justify-center transition-all transform active:scale-95\">\n                                <span class=\"text-xs text-yellow-100 mb-1\">\uff3c 30\u65e5\u9593\u7121\u6599\u3067\u8074\u304d\u653e\u984c \uff0f<\/span>\n                                <span class=\"text-lg flex items-center gap-2\">\u7121\u6599\u3067Audible\u3092\u4f53\u9a13\u3059\u308b ${icons.chevronRight}<\/span>\n                            <\/button>\n                        <\/a>\n                        <a href=\"https:\/\/zekno.co.jp\/Audible\/audible-review\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block w-full\">\n                            <button class=\"w-full bg-white border-2 border-slate-200 hover:border-slate-400 text-slate-600 font-bold py-3 px-6 rounded-lg shadow-sm transition-colors flex items-center justify-center gap-2 text-sm\">\n                                ${icons.star} Audible\u306e\u8a55\u5224\u30fb\u53e3\u30b3\u30df\u3092\u898b\u308b\n                            <\/button>\n                        <\/a>\n                    <\/div>\n                `;\n            } else {\n                \/\/ Kindle Unlimited\u5411\u304d\u306eHTML\n                resultHTML = `\n                    <div class=\"relative w-full mb-6\">\n                        <div class=\"bg-gradient-to-br from-cyan-50 to-blue-50 p-6 rounded-2xl border border-cyan-100\">\n                            ${icons.bookOpenCyan}\n                            <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u3042\u306a\u305f\u306f<span class=\"text-cyan-600\">\u300c\u8aad\u3080\u8aad\u66f8\u300d<\/span>\u6d3e\u304b\u3082\uff1f<\/h3>\n                            <p class=\"text-sm text-gray-600 leading-relaxed text-left bg-white p-4 rounded-lg border border-cyan-100 shadow-sm\">\n                                <span class=\"font-bold text-cyan-600\">\u89e3\u8aac\uff1a<\/span><br\/>\n                                \u97f3\u58f0\u5b66\u7fd2\u3088\u308a\u3082\u3001\u81ea\u5206\u306e\u30da\u30fc\u30b9\u3067\u3058\u3063\u304f\u308a\u6587\u5b57\u3084\u56f3\u89e3\u3092\u76ee\u3067\u898b\u3066\u8aad\u3080\u30b9\u30bf\u30a4\u30eb\u304c\u5408\u3063\u3066\u3044\u308b\u3088\u3046\u3067\u3059\u3002<br\/><br\/>\n                                \u305d\u3093\u306a\u3042\u306a\u305f\u306b\u306f\u3001\u6708\u984d980\u5186\u3067500\u4e07\u518a\u4ee5\u4e0a\u304c\u8aad\u307f\u653e\u984c\u306e<a href=\"https:\/\/amzn.to\/4i3Rwok\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"font-bold text-cyan-600 underline hover:text-cyan-800 transition-colors\">Kindle Unlimited<\/a>\u304c\u65ad\u7136\u304a\u3059\u3059\u3081\u3067\u3059\uff01\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"mb-8 text-left\">\n                        <h4 class=\"font-bold text-slate-700 mb-3 flex items-center gap-2\">${icons.library} Kindle Unlimited\u306e\u30e1\u30ea\u30c3\u30c8<\/h4>\n                        <ul class=\"space-y-2 text-sm text-gray-600\">\n                            <li class=\"flex items-start gap-2\">${icons.checkList} <span>\u30d3\u30b8\u30cd\u30b9\u66f8\u3001\u5c0f\u8aac\u3001\u30b3\u30df\u30c3\u30af\u3001\u96d1\u8a8c\u306a\u3069<span class=\"font-bold text-slate-700\">500\u4e07\u518a\u4ee5\u4e0a\u304c\u8aad\u307f\u653e\u984c<\/span><\/span><\/li>\n                            <li class=\"flex items-start gap-2\">${icons.checkList} <span>\u30b9\u30de\u30db\u3001\u30bf\u30d6\u30ec\u30c3\u30c8\u3001PC\u3001Kindle\u7aef\u672b\u306a\u3069<span class=\"font-bold text-slate-700\">\u597d\u304d\u306a\u7aef\u672b\u3067\u697d\u3057\u3081\u308b<\/span><\/span><\/li>\n                            <li class=\"flex items-start gap-2\">${icons.checkList} <span>\u540c\u6642\u306b20\u518a\u307e\u3067\u4fdd\u5b58\u53ef\u80fd\u3002<span class=\"font-bold text-slate-700\">\u30aa\u30d5\u30e9\u30a4\u30f3\u3067\u3082\u8aad\u3081\u308b<\/span><\/span><\/li>\n                        <\/ul>\n                    <\/div>\n                    <div class=\"space-y-4\">\n                        <a href=\"https:\/\/amzn.to\/4i3Rwok\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block w-full group relative\">\n                            <div class=\"absolute -inset-0.5 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-200\"><\/div>\n                            <button class=\"relative w-full bg-gradient-to-b from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-4 px-6 rounded-lg shadow-md flex flex-col items-center justify-center transition-all transform active:scale-95\">\n                                <span class=\"text-xs text-cyan-100 mb-1\">\uff3c 30\u65e5\u9593\u7121\u6599\u4f53\u9a13\u5b9f\u65bd\u4e2d \uff0f<\/span>\n                                <span class=\"text-lg flex items-center gap-2\">\u7121\u6599\u3067Kindle Unlimited\u3092\u8a66\u3059 ${icons.chevronRight}<\/span>\n                            <\/button>\n                        <\/a>\n                        <a href=\"https:\/\/zekno.co.jp\/Audible\/kindle-unlimited-service\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block w-full\">\n                            <button class=\"w-full bg-white border-2 border-slate-200 hover:border-slate-400 text-slate-600 font-bold py-3 px-6 rounded-lg shadow-sm transition-colors flex items-center justify-center gap-2 text-sm\">\n                                ${icons.smartphone} Kindle Unlimited\u306e\u8a73\u7d30\u3092\u898b\u308b\n                            <\/button>\n                        <\/a>\n                    <\/div>\n                `;\n            }\n\n            appContainer.innerHTML = `\n                <div class=\"${headerBg} text-white p-6 text-center transition-colors duration-500\">\n                    <h2 class=\"text-lg font-bold ${headerText}\">\u8a3a\u65ad\u7d50\u679c<\/h2>\n                    <p class=\"text-sm text-gray-300\">${isAudibleType ? '\u3042\u306a\u305f\u306eAudible\u9069\u6027\u5ea6\u306f...' : '\u3042\u306a\u305f\u306b\u304a\u3059\u3059\u3081\u306e\u30b5\u30fc\u30d3\u30b9\u306f...'}<\/p>\n                <\/div>\n                <div class=\"p-6 text-center\">\n                    ${resultHTML}\n                    <div class=\"mt-6 flex flex-col items-center gap-2\">\n                        <p class=\"text-xs text-gray-400\">\u203b \u7121\u6599\u671f\u9593\u4e2d\u306b\u89e3\u7d04\u3059\u308c\u3070\u6599\u91d1\u306f\u4e00\u5207\u304b\u304b\u308a\u307e\u305b\u3093<\/p>\n                        <button id=\"btn-reset\" class=\"flex items-center gap-1 text-sm font-medium transition-colors mt-2 ${isAudibleType ? 'text-gray-400 hover:text-orange-500' : 'text-gray-400 hover:text-cyan-500'}\">\n                            ${icons.rotateCcw} \u3082\u3046\u4e00\u5ea6\u8a3a\u65ad\u3059\u308b\n                        <\/button>\n                    <\/div>\n                <\/div>\n            `;\n            \n            document.getElementById('btn-reset').addEventListener('click', () => {\n                state.score = 0;\n                state.currentQuestionIndex = 0;\n                state.step = 'intro';\n                render();\n            });\n        }\n    }\n\n    \/\/ \u521d\u56de\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\n    render();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u8aad\u307f\u8fbc\u307f\u4e2d&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":"","_wp_rev_ctl_limit":""},"class_list":["post-3455","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zekno.co.jp\/Audible\/wp-json\/wp\/v2\/pages\/3455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zekno.co.jp\/Audible\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zekno.co.jp\/Audible\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zekno.co.jp\/Audible\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zekno.co.jp\/Audible\/wp-json\/wp\/v2\/comments?post=3455"}],"version-history":[{"count":5,"href":"https:\/\/zekno.co.jp\/Audible\/wp-json\/wp\/v2\/pages\/3455\/revisions"}],"predecessor-version":[{"id":3460,"href":"https:\/\/zekno.co.jp\/Audible\/wp-json\/wp\/v2\/pages\/3455\/revisions\/3460"}],"wp:attachment":[{"href":"https:\/\/zekno.co.jp\/Audible\/wp-json\/wp\/v2\/media?parent=3455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}