\u5c31\u6d3b\u529b\u8a3a\u65ad \u2013 \u3042\u306a\u305f\u306e\u5b9f\u529b\u3092\u30c1\u30a7\u30c3\u30af<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Use a modern font stack with Japanese support *\/\n body {\n font-family: 'Inter', 'Noto Sans JP', sans-serif;\n }\n\n \/* Custom transition for question changes *\/\n .question-fade-enter {\n opacity: 0;\n transform: translateY(20px);\n }\n .question-fade-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 300ms, transform 300ms;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 min-h-screen py-6 sm:py-8 px-4\">\n\n <div class=\"w-full max-w-3xl mx-auto bg-white\/80 backdrop-blur-sm shadow-xl overflow-hidden\">\n\n <header class=\"relative bg-contain bg-center bg-no-repeat h-80\" style=\"background-image: url('https:\/\/kokoshiro.jp\/note\/wp-content\/uploads\/2025\/07\/ef73d7570530dc31a5c093a5c1741e42.jpg');\">\n <\/header>\n\n <main class=\"p-6 md:p-10\">\n \n <div class=\"mb-4\">\n <div class=\"flex justify-between items-center mb-2\">\n <span class=\"text-sm font-medium text-[#E7843E]\">\u9032\u6357<\/span>\n <span class=\"text-sm font-semibold text-[#E7843E]\" id=\"progress-text\"><\/span>\n <\/div>\n <div class=\"w-full bg-gray-200 rounded-full h-2.5\">\n <div id=\"progress-bar\" class=\"bg-[#E7843E] h-2.5 rounded-full transition-all duration-300 ease-in-out\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"error-message\" class=\"hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative mb-4\" role=\"alert\">\n <strong class=\"font-bold\">\u30a8\u30e9\u30fc: <\/strong>\n <span class=\"block sm:inline\" id=\"error-text\"><\/span>\n <\/div>\n\n <div id=\"questions-container\">\n <\/div>\n\n <div class=\"mt-8 pt-6 border-t border-gray-200 flex flex-col-reverse sm:flex-row items-center gap-4\">\n <button id=\"prev-btn\" onclick=\"prevQuestion()\" class=\"w-full sm:w-auto px-6 py-3 text-center font-semibold text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors duration-200\">\n \u524d\u3078\n <\/button>\n <button id=\"next-btn\" onclick=\"nextQuestion()\" class=\"w-full sm:w-auto sm:ml-auto px-8 py-3 text-center font-semibold text-white bg-[#E7843E] rounded-lg hover:bg-[#D97706] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#E7843E] transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5\">\n \u6b21\u3078\n <\/button>\n <\/div>\n <\/main>\n <\/div>\n\n <script>\n const questions = [\n { q: \"Q1. \u4ed6\u4eba\u304b\u3089\u898b\u305f\u81ea\u5206\u306e\u5f37\u307f\u3068\u3001\u81ea\u5206\u3067\u8003\u3048\u308b\u5f37\u307f\u306b\u30ba\u30ec\u304c\u306a\u3044\u3068\u611f\u3058\u308b\u3002\", name: \"q1\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q2. \u6307\u6458\u3084\u30a2\u30c9\u30d0\u30a4\u30b9\u3092\u524d\u5411\u304d\u306b\u53d7\u3051\u6b62\u3081\u3001\u6b21\u306e\u884c\u52d5\u306b\u6d3b\u304b\u305b\u308b\u3002\", name: \"q2\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q3. \u5fd7\u671b\u696d\u754c\u306e\u7279\u5fb4\u3084\u4ee3\u8868\u7684\u306a\u4f01\u696d\u3092\u8aac\u660e\u3067\u304d\u308b\u3002\", name: \"q3\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\", \"0: \u5fd7\u671b\u696d\u754c\u304c\u307e\u3060\u5b9a\u307e\u3063\u3066\u3044\u306a\u3044\"] },\n { q: \"Q4. \u4f01\u696d\u9078\u3073\u306e\u5224\u65ad\u8ef8\u3092\u8907\u6570\u6301\u3061\u3001\u305d\u308c\u3092\u4eba\u306b\u8aac\u660e\u3067\u304d\u308b\u81ea\u4fe1\u304c\u3042\u308b\u3002\", name: \"q4\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q5. \u30a8\u30f3\u30c8\u30ea\u30fc\u30b7\u30fc\u30c8\u3084\u5c65\u6b74\u66f8\u3092\u6dfb\u524a\u3057\u3066\u3082\u3089\u3044\u3001\u30d6\u30e9\u30c3\u30b7\u30e5\u30a2\u30c3\u30d7\u3057\u3066\u3044\u308b\u3002\", name: \"q5\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q6. \u9762\u63a5\u7df4\u7fd2\u3092\u901a\u3058\u3066\u3001\u81ea\u5206\u306e\u4f1d\u3048\u65b9\u306e\u6539\u5584\u70b9\u3092\u628a\u63e1\u3057\u3066\u3044\u308b\u3002\", name: \"q6\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q7. \u793e\u4f1a\u4eba\u3068\u76f4\u63a5\u8a71\u3057\u305f\u7d4c\u9a13\uff08OB\/OG\u8a2a\u554f\uff09\u3092\u5fd7\u671b\u52d5\u6a5f\u306b\u6d3b\u304b\u3057\u3066\u3044\u308b\u3002\", name: \"q7\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q8. \u5b9f\u969b\u306e\u9078\u8003\uff08\u9762\u63a5\uff09\u3092\u8907\u6570\u56de\u7d4c\u9a13\u3057\u3066\u3044\u308b\u3002\uff08\u8aac\u660e\u4f1a\u9664\u304f\uff09\", name: \"q8\", options: [\"5: 8\u56de\u4ee5\u4e0a\", \"4: 5\u301c7\u56de\", \"3: 3\u301c4\u56de\", \"2: 1\u301c2\u56de\", \"1: 0\u56de\"] },\n { q: \"Q9. SPI\u3084Web\u30c6\u30b9\u30c8\u3067\u82e6\u624b\u5206\u91ce\u3092\u628a\u63e1\u3057\u3001\u514b\u670d\u3059\u308b\u5bfe\u7b56\u3092\u3057\u3066\u3044\u308b\u3002\", name: \"q9\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q10. \u672c\u756a\u306e\u9078\u8003\u3067\u3001\u81ea\u5206\u306e\u5f37\u307f\u3092\u9069\u5207\u306b\u4f1d\u3048\u308b\u6e96\u5099\u304c\u3067\u304d\u3066\u3044\u308b\u3002\", name: \"q10\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q11. A\u5730\u70b9\u304b\u3089B\u5730\u70b9\u307e\u3067\u5f92\u6b6930\u5206\u3002\u5f80\u5fa9\u306b\u304b\u304b\u308b\u6642\u9593\u306f\uff1f\", name: \"q11\", options: [\"30\u5206\", \"45\u5206\", \"60\u5206\", \"90\u5206\", \"\u72b6\u6cc1\u306b\u3088\u308b\"] },\n { q: \"Q12. A\u306fB\u3088\u308a\u901f\u304f\u3001C\u306fB\u3088\u308a\u9045\u3044\u3002\u9806\u4f4d\u306f\uff1f\", name: \"q12\", options: [\"A > B > C\", \"C > A > B\", \"A > C > B\", \"B > C > A\", \"B > A > C\"] },\n { q: \"Q13. 120\u5186\u306e\u30ea\u30f3\u30b43\u500b\u3001\u6d88\u8cbb\u7a0e8%\u8fbc\u307f\u3067\u306e\u7dcf\u984d\u306f\uff1f\", name: \"q13\", options: [\"360\u5186\", \"388\u5186\", \"389\u5186\", \"390\u5186\", \"400\u5186\"] },\n { q: \"Q14. \u9762\u63a5\u3067\u5931\u6557\u3057\u305f\u3068\u611f\u3058\u305f\u3089\u3069\u3046\u3059\u308b\uff1f\", name: \"q14\", options: [\"\u3059\u3050\u306b\u6539\u5584\u70b9\u3092\u632f\u308a\u8fd4\u308b\", \"\u6c17\u306b\u305b\u305a\u6b21\u306b\u9032\u3080\", \"\u76f8\u624b\u306e\u305b\u3044\u306b\u3059\u308b\", \"SNS \u306b\u300c\u6700\u60aa\u3060\u3063\u305f\u300d\u3068\u611a\u75f4\u3092\u66f8\u304f\", \"\u9762\u63a5\u306e\u8a18\u61b6\u3092\u6d88\u3059\u305f\u3081\u306b\u904a\u3073\u306b\u51fa\u304b\u3051\u308b\"] },\n { q: \"Q15. ES\u4f5c\u6210\u3067\u7279\u306b\u91cd\u8981\u3068\u3055\u308c\u308b\u306e\u306f\uff1f\", name: \"q15\", options: [\"\u660e\u78ba\u306a\u30a8\u30d4\u30bd\u30fc\u30c9\u3068\u4e00\u8cab\u3057\u305f\u4e3b\u5f35\", \"\u6d3e\u624b\u306a\u7d4c\u9a13\u3084\u3059\u3054\u3044\u4f53\u9a13\u3092\u66f8\u304f\", \"\u9577\u304f\u66f8\u304f\u3053\u3068\", \"\u5c02\u9580\u7528\u8a9e\u3092\u591a\u7528\u3057\u3066\u8ad6\u7406\u6027\u3092\u5f37\u8abf\u3059\u308b\", \"\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3084\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u83ef\u3084\u304b\u306b\u3059\u308b\"] },\n { q: \"Q16. \u8a71\u3059\u5185\u5bb9\u304c\u3057\u3063\u304b\u308a\u4f1d\u308f\u308b\u3088\u3046\u306b\u3059\u308b\u306b\u306f\uff1f\", name: \"q16\", options: [\"\u8981\u70b9\u3092\u6574\u7406\u3057\u7c21\u6f54\u306b\u8a71\u3059\", \"\u5c02\u9580\u7528\u8a9e\u3092\u591a\u7528\u3059\u308b\", \"\u8a71\u3059\u91cf\u3092\u5897\u3084\u3059\", \"\u5168\u3066\u306e\u7d30\u304b\u3044\u60c5\u5831\u3092\u6f0f\u308c\u306a\u304f\u76db\u308a\u8fbc\u3080\", \"\u9577\u3044\u524d\u7f6e\u304d\u3092\u3057\u3066\u304b\u3089\u672c\u984c\u306b\u5165\u308b\"] },\n { q: \"Q17. \u5fd7\u671b\u52d5\u6a5f\u3067\u91cd\u8981\u306a\u306e\u306f\uff1f\", name: \"q17\", options: [\"\u51fa\u5f35\u3084\u8ee2\u52e4\u306e\u5c11\u306a\u3055\", \"\u5e74\u53ce\u306e\u9ad8\u3055\", \"\u798f\u5229\u539a\u751f\u306e\u5145\u5b9f\u5ea6\", \"\u4f01\u696d\u306e\u7406\u5ff5\u3068\u5c06\u6765\u30d3\u30b8\u30e7\u30f3\u306e\u30de\u30c3\u30c1\u5ea6\", \"\u4f1a\u793e\u306e\u898f\u6a21\u3084\u30d6\u30e9\u30f3\u30c9\u529b\"] },\n { q: \"Q18. Web\u30c6\u30b9\u30c8\u5bfe\u7b56\u3067\u91cd\u8996\u3059\u3079\u304d\u306a\u306e\u306f\uff1f\", name: \"q18\", options: [\"\u30b9\u30d4\u30fc\u30c9\", \"\u7cbe\u5ea6\u3068\u30b9\u30d4\u30fc\u30c9\u306e\u4e21\u7acb\", \"\u30ab\u30f3\", \"\u5236\u9650\u6642\u9593\u3092\u6c17\u306b\u305b\u305a\u3086\u3063\u304f\u308a\u614e\u91cd\u306b\u89e3\u304f\", \"\u3044\u3064\u3082\u540c\u3058\u9806\u5e8f\u3067\u554f\u984c\u3092\u89e3\u304f\u3053\u3068\u306b\u56fa\u57f7\u3059\u308b\"] },\n { q: \"Q19. \u9762\u63a5\u5bfe\u7b56\u3068\u3057\u3066\u6709\u52b9\u306a\u6e96\u5099\u306f\u3069\u308c\uff1f\", name: \"q19\", options: [\"\u8cea\u554f\u5185\u5bb9\u306f\u3059\u3079\u3066\u6697\u8a18\u3057\u3001\u4e38\u6697\u8a18\u3067\u7b54\u3048\u308b\", \"\u3076\u3063\u3064\u3051\u672c\u756a\u3067\u6311\u3080\", \"\u4f01\u696d\u306eHP\u3092\u898b\u305a\u306b\u6311\u6226\u3059\u308b\", \"\u4e8b\u524d\u306b\u8cea\u554f\u3092\u60f3\u5b9a\u3057\u7df4\u7fd2\u3059\u308b\", \"\u9762\u63a5\u524d\u306bSNS\u3067\u4f01\u696d\u540d\u3092\u691c\u7d22\u3057\u3066\u53e3\u30b3\u30df\u3060\u3051\u898b\u308b\"] },\n { q: \"Q20. \u696d\u754c\u7814\u7a76\u3067\u307e\u305a\u78ba\u8a8d\u3059\u3079\u304d\u3053\u3068\u306f\uff1f\", name: \"q20\", options: [\"\u4f01\u696d\u306e\u30ed\u30b4\u30ab\u30e9\u30fc\u3084\u30d6\u30e9\u30f3\u30c9\u30a4\u30e1\u30fc\u30b8\", \"\u696d\u754c\u7279\u6709\u306e\u5c02\u9580\u7528\u8a9e\", \"\u5e83\u544a\u306e\u7a2e\u985e\", \"\u696d\u754c\u306e\u516c\u5f0fSNS\u30d5\u30a9\u30ed\u30ef\u30fc\u6570\", \"\u4e3b\u306a\u4e8b\u696d\u5185\u5bb9\"] },\n { q: \"Q21. \u3042\u306a\u305f\u306e\u6240\u5c5e\u5927\u5b66\u7fa4\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002\", name: \"q21\", options: [\"\u65e7\u5e1d\u5927\u30fb\u65e9\u6176\", \"MARCH\u30fb\u95a2\u95a2\u540c\u7acb\u30fb\u5730\u65b9\u56fd\u516c\u7acb\", \"\u65e5\u6771\u99d2\u5c02\u30fb\u7523\u8fd1\u7532\u9f8d\", \"\u305d\u306e\u4ed6\u306e\u79c1\u7acb\u5927\u5b66\", \"\u5c02\u9580\u30fb\u77ed\u5927\"] },\n { q: \"Q22. \u4e0b\u8a18\u306e\u4e2d\u3067\u7d4c\u9a13\u3057\u3066\u3044\u308b\u3082\u306e\u3092\u3059\u3079\u3066\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\", name: \"q22\", type: \"checkbox\", options: [\"\u9577\u671f\u30a4\u30f3\u30bf\u30fc\u30f3\", \"\u98f2\u98df\u30fb\u63a5\u5ba2\u306a\u3069\u306e\u30a2\u30eb\u30d0\u30a4\u30c8\", \"\u587e\u8b1b\u5e2b\u30fb\u5bb6\u5ead\u6559\u5e2b\", \"\u30b5\u30fc\u30af\u30eb\u3084\u5b66\u751f\u56e3\u4f53\", \"\u7559\u5b66\", \"\u4f53\u80b2\u4f1a\u7cfb\u90e8\u6d3b\", \"\u8d77\u696d\", \"\u305d\u306e\u4ed6\"] },\n { q: \"Q23. \u73fe\u5728\u3001\u9078\u8003\u304c\u9032\u884c\u3057\u3066\u3044\u308b\u4f01\u696d\u306e\u6570\u306f\u3044\u304f\u3064\u3067\u3059\u304b\uff1f\", name: \"q23\", options: [\"0\u793e\uff08\u307e\u3060\u5fdc\u52df\u3057\u3066\u3044\u306a\u3044\uff09\", \"1\u301c3\u793e\", \"4\u301c6\u793e\", \"7\u793e\u4ee5\u4e0a\"] },\n { q: \"Q24. \u73fe\u6642\u70b9\u3067\u5185\u5b9a\uff08\u5185\u3005\u5b9a\uff09\u3092\u7372\u5f97\u3057\u3066\u3044\u307e\u3059\u304b\uff1f\", name: \"q24\", options: [\"\u307e\u3060\u7372\u5f97\u3057\u3066\u3044\u306a\u3044\", \"\u30a4\u30f3\u30bf\u30fc\u30f3\u7d4c\u7531\u306e\u5185\u3005\u5b9a\u3042\u308a\", \"\u672c\u9078\u8003\u3067\u5185\u5b9a1\u793e\u3042\u308a\", \"\u8907\u6570\u793e\u304b\u3089\u5185\u5b9a\u3042\u308a\"] },\n { q: \"Q25. \u5c31\u6d3b\u306e\u9032\u3081\u65b9\u306b\u3069\u308c\u304f\u3089\u3044\u4e0d\u5b89\u3092\u611f\u3058\u3066\u3044\u307e\u3059\u304b\uff1f\", name: \"q25\", options: [\"\u975e\u5e38\u306b\u4e0d\u5b89\", \"\u3084\u3084\u4e0d\u5b89\", \"\u3042\u307e\u308a\u4e0d\u5b89\u306f\u306a\u3044\", \"\u81ea\u4fe1\u304c\u3042\u308b\"] }\n ];\n\n let currentIndex = 0;\n const answers = JSON.parse(localStorage.getItem('jobhuntAnswers')) || {};\n\n const questionsContainer = document.getElementById('questions-container');\n const progressBar = document.getElementById('progress-bar');\n const progressText = document.getElementById('progress-text');\n const prevBtn = document.getElementById('prev-btn');\n const nextBtn = document.getElementById('next-btn');\n const errorMessage = document.getElementById('error-message');\n const errorText = document.getElementById('error-text');\n\n function handleOptionSelect() {\n const item = questions[currentIndex];\n const inputType = item.type || 'radio';\n\n if (inputType === 'radio') {\n setTimeout(() => {\n nextQuestion();\n }, 350); \n }\n }\n\n function renderQuestion() {\n const progressPercentage = ((currentIndex + 1) \/ questions.length) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressText.textContent = `${currentIndex + 1} \/ ${questions.length}`;\n \n errorMessage.classList.add('hidden');\n\n const item = questions[currentIndex];\n const inputType = item.type || 'radio';\n\n let optionsHtml = '';\n item.options.forEach((opt) => {\n const [val, label] = opt.includes(':') ? opt.split(':').map(s => s.trim()) : [opt, opt];\n \n const savedAnswer = answers[item.name];\n let isChecked = false;\n if (inputType === 'checkbox') {\n isChecked = savedAnswer && savedAnswer.includes(val);\n } else {\n isChecked = savedAnswer === val;\n }\n\n optionsHtml += `\n <label class=\"block\">\n <input type=\"${inputType}\" name=\"${item.name}\" value=\"${val}\" class=\"hidden peer\" ${isChecked ? 'checked' : ''} onchange=\"handleOptionSelect()\">\n <div class=\"p-4 md:p-5 rounded-lg border border-gray-300 bg-white cursor-pointer transition-all duration-200 ease-in-out\n hover:bg-orange-50 hover:border-[#E7843E]\n peer-checked:ring-2 peer-checked:ring-[#E7843E] peer-checked:border-[#E7843E] peer-checked:bg-orange-50\">\n <span class=\"font-medium text-gray-800\">${label}<\/span>\n <\/div>\n <\/label>\n `;\n });\n\n const questionHtml = `\n <div id=\"current-question\" class=\"question-fade-enter\">\n <div class=\"toc\"><div id=\"sgb-css-id-1\" style=\"--sgb--custom--bg-color: var(--sgb-main-color);--sgb--custom--radius-type: var(--wp--custom--rounded--small,6px);--sgb--custom--box-radius: 8;\"><\/div><\/div><h2 class=\"text-xl md:text-2xl font-bold text-gray-800 leading-tight mb-8 break-words\">${item.q}<\/h2>\n <div class=\"space-y-4\">${optionsHtml}<\/div>\n <\/div>`;\n \n questionsContainer.innerHTML = questionHtml;\n\n setTimeout(() => {\n const currentQuestionElement = document.getElementById('current-question');\n if (currentQuestionElement) {\n currentQuestionElement.classList.add('question-fade-enter-active');\n }\n }, 10);\n \n updateNavButtons();\n }\n\n function updateNavButtons() {\n prevBtn.classList.toggle('hidden', currentIndex === 0);\n nextBtn.textContent = (currentIndex === questions.length - 1) ? '\u7d50\u679c\u3092\u898b\u308b' : '\u6b21\u3078';\n }\n\n function saveAnswer() {\n const item = questions[currentIndex];\n const inputType = item.type || 'radio';\n const checkedInputs = Array.from(document.querySelectorAll(`input[name=\"${item.name}\"]:checked`));\n\n if (checkedInputs.length === 0) {\n errorText.textContent = '\u3044\u305a\u308c\u304b\u306e\u9078\u629e\u80a2\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002';\n errorMessage.classList.remove('hidden');\n return false;\n }\n\n if (inputType === 'checkbox') {\n answers[item.name] = checkedInputs.map(input => input.value);\n } else {\n answers[item.name] = checkedInputs[0].value;\n }\n\n localStorage.setItem('jobhuntAnswers', JSON.stringify(answers));\n errorMessage.classList.add('hidden');\n return true;\n }\n\n function nextQuestion() {\n if (!saveAnswer()) return;\n\n if (currentIndex === questions.length - 1) {\n goResult();\n return;\n }\n currentIndex++;\n renderQuestion();\n }\n\n function prevQuestion() {\n if (currentIndex > 0) {\n currentIndex--;\n renderQuestion();\n }\n }\n\n function goResult() {\n const baseUrl = 'https:\/\/kokoshiro.jp\/note\/shukatsuryoku-form\/';\n \/\/ Get current query parameters (e.g., ?cta_source=popup)\n const currentQueryString = window.location.search;\n \n \/\/ Redirect to the form page, preserving the original query parameters.\n window.location.href = baseUrl + currentQueryString;\n }\n \n \/\/ Initial render\n renderQuestion();\n <\/script>\n<\/body>\n\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/html><\/div>\n\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":21,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-forfront.php","meta":{"footnotes":""},"class_list":{"0":"post-57624","1":"page","2":"type-page","3":"status-publish","5":"entry"},"_links":{"self":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/comments?post=57624"}],"version-history":[{"count":112,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57624\/revisions"}],"predecessor-version":[{"id":79479,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57624\/revisions\/79479"}],"wp:attachment":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/media?parent=57624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/div>\n\n\n\n\n\n \n \n \u5c31\u6d3b\u529b\u8a3a\u65ad \u2013 \u3042\u306a\u305f\u306e\u5b9f\u529b\u3092\u30c1\u30a7\u30c3\u30af<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Use a modern font stack with Japanese support *\/\n body {\n font-family: 'Inter', 'Noto Sans JP', sans-serif;\n }\n\n \/* Custom transition for question changes *\/\n .question-fade-enter {\n opacity: 0;\n transform: translateY(20px);\n }\n .question-fade-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 300ms, transform 300ms;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 min-h-screen py-6 sm:py-8 px-4\">\n\n <div class=\"w-full max-w-3xl mx-auto bg-white\/80 backdrop-blur-sm shadow-xl overflow-hidden\">\n\n <header class=\"relative bg-contain bg-center bg-no-repeat h-80\" style=\"background-image: url('https:\/\/kokoshiro.jp\/note\/wp-content\/uploads\/2025\/07\/ef73d7570530dc31a5c093a5c1741e42.jpg');\">\n <\/header>\n\n <main class=\"p-6 md:p-10\">\n \n <div class=\"mb-4\">\n <div class=\"flex justify-between items-center mb-2\">\n <span class=\"text-sm font-medium text-[#E7843E]\">\u9032\u6357<\/span>\n <span class=\"text-sm font-semibold text-[#E7843E]\" id=\"progress-text\"><\/span>\n <\/div>\n <div class=\"w-full bg-gray-200 rounded-full h-2.5\">\n <div id=\"progress-bar\" class=\"bg-[#E7843E] h-2.5 rounded-full transition-all duration-300 ease-in-out\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"error-message\" class=\"hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative mb-4\" role=\"alert\">\n <strong class=\"font-bold\">\u30a8\u30e9\u30fc: <\/strong>\n <span class=\"block sm:inline\" id=\"error-text\"><\/span>\n <\/div>\n\n <div id=\"questions-container\">\n <\/div>\n\n <div class=\"mt-8 pt-6 border-t border-gray-200 flex flex-col-reverse sm:flex-row items-center gap-4\">\n <button id=\"prev-btn\" onclick=\"prevQuestion()\" class=\"w-full sm:w-auto px-6 py-3 text-center font-semibold text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors duration-200\">\n \u524d\u3078\n <\/button>\n <button id=\"next-btn\" onclick=\"nextQuestion()\" class=\"w-full sm:w-auto sm:ml-auto px-8 py-3 text-center font-semibold text-white bg-[#E7843E] rounded-lg hover:bg-[#D97706] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#E7843E] transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5\">\n \u6b21\u3078\n <\/button>\n <\/div>\n <\/main>\n <\/div>\n\n <script>\n const questions = [\n { q: \"Q1. \u4ed6\u4eba\u304b\u3089\u898b\u305f\u81ea\u5206\u306e\u5f37\u307f\u3068\u3001\u81ea\u5206\u3067\u8003\u3048\u308b\u5f37\u307f\u306b\u30ba\u30ec\u304c\u306a\u3044\u3068\u611f\u3058\u308b\u3002\", name: \"q1\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q2. \u6307\u6458\u3084\u30a2\u30c9\u30d0\u30a4\u30b9\u3092\u524d\u5411\u304d\u306b\u53d7\u3051\u6b62\u3081\u3001\u6b21\u306e\u884c\u52d5\u306b\u6d3b\u304b\u305b\u308b\u3002\", name: \"q2\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q3. \u5fd7\u671b\u696d\u754c\u306e\u7279\u5fb4\u3084\u4ee3\u8868\u7684\u306a\u4f01\u696d\u3092\u8aac\u660e\u3067\u304d\u308b\u3002\", name: \"q3\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\", \"0: \u5fd7\u671b\u696d\u754c\u304c\u307e\u3060\u5b9a\u307e\u3063\u3066\u3044\u306a\u3044\"] },\n { q: \"Q4. \u4f01\u696d\u9078\u3073\u306e\u5224\u65ad\u8ef8\u3092\u8907\u6570\u6301\u3061\u3001\u305d\u308c\u3092\u4eba\u306b\u8aac\u660e\u3067\u304d\u308b\u81ea\u4fe1\u304c\u3042\u308b\u3002\", name: \"q4\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q5. \u30a8\u30f3\u30c8\u30ea\u30fc\u30b7\u30fc\u30c8\u3084\u5c65\u6b74\u66f8\u3092\u6dfb\u524a\u3057\u3066\u3082\u3089\u3044\u3001\u30d6\u30e9\u30c3\u30b7\u30e5\u30a2\u30c3\u30d7\u3057\u3066\u3044\u308b\u3002\", name: \"q5\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q6. \u9762\u63a5\u7df4\u7fd2\u3092\u901a\u3058\u3066\u3001\u81ea\u5206\u306e\u4f1d\u3048\u65b9\u306e\u6539\u5584\u70b9\u3092\u628a\u63e1\u3057\u3066\u3044\u308b\u3002\", name: \"q6\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q7. \u793e\u4f1a\u4eba\u3068\u76f4\u63a5\u8a71\u3057\u305f\u7d4c\u9a13\uff08OB\/OG\u8a2a\u554f\uff09\u3092\u5fd7\u671b\u52d5\u6a5f\u306b\u6d3b\u304b\u3057\u3066\u3044\u308b\u3002\", name: \"q7\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q8. \u5b9f\u969b\u306e\u9078\u8003\uff08\u9762\u63a5\uff09\u3092\u8907\u6570\u56de\u7d4c\u9a13\u3057\u3066\u3044\u308b\u3002\uff08\u8aac\u660e\u4f1a\u9664\u304f\uff09\", name: \"q8\", options: [\"5: 8\u56de\u4ee5\u4e0a\", \"4: 5\u301c7\u56de\", \"3: 3\u301c4\u56de\", \"2: 1\u301c2\u56de\", \"1: 0\u56de\"] },\n { q: \"Q9. SPI\u3084Web\u30c6\u30b9\u30c8\u3067\u82e6\u624b\u5206\u91ce\u3092\u628a\u63e1\u3057\u3001\u514b\u670d\u3059\u308b\u5bfe\u7b56\u3092\u3057\u3066\u3044\u308b\u3002\", name: \"q9\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q10. \u672c\u756a\u306e\u9078\u8003\u3067\u3001\u81ea\u5206\u306e\u5f37\u307f\u3092\u9069\u5207\u306b\u4f1d\u3048\u308b\u6e96\u5099\u304c\u3067\u304d\u3066\u3044\u308b\u3002\", name: \"q10\", options: [\"5: \u306f\u3044\", \"4: \u3084\u3084\u305d\u3046\u601d\u3046\", \"3: \u3069\u3061\u3089\u3068\u3082\u3044\u3048\u306a\u3044\", \"2: \u3042\u307e\u308a\u305d\u3046\u601d\u308f\u306a\u3044\", \"1: \u3044\u3044\u3048\"] },\n { q: \"Q11. A\u5730\u70b9\u304b\u3089B\u5730\u70b9\u307e\u3067\u5f92\u6b6930\u5206\u3002\u5f80\u5fa9\u306b\u304b\u304b\u308b\u6642\u9593\u306f\uff1f\", name: \"q11\", options: [\"30\u5206\", \"45\u5206\", \"60\u5206\", \"90\u5206\", \"\u72b6\u6cc1\u306b\u3088\u308b\"] },\n { q: \"Q12. A\u306fB\u3088\u308a\u901f\u304f\u3001C\u306fB\u3088\u308a\u9045\u3044\u3002\u9806\u4f4d\u306f\uff1f\", name: \"q12\", options: [\"A > B > C\", \"C > A > B\", \"A > C > B\", \"B > C > A\", \"B > A > C\"] },\n { q: \"Q13. 120\u5186\u306e\u30ea\u30f3\u30b43\u500b\u3001\u6d88\u8cbb\u7a0e8%\u8fbc\u307f\u3067\u306e\u7dcf\u984d\u306f\uff1f\", name: \"q13\", options: [\"360\u5186\", \"388\u5186\", \"389\u5186\", \"390\u5186\", \"400\u5186\"] },\n { q: \"Q14. \u9762\u63a5\u3067\u5931\u6557\u3057\u305f\u3068\u611f\u3058\u305f\u3089\u3069\u3046\u3059\u308b\uff1f\", name: \"q14\", options: [\"\u3059\u3050\u306b\u6539\u5584\u70b9\u3092\u632f\u308a\u8fd4\u308b\", \"\u6c17\u306b\u305b\u305a\u6b21\u306b\u9032\u3080\", \"\u76f8\u624b\u306e\u305b\u3044\u306b\u3059\u308b\", \"SNS \u306b\u300c\u6700\u60aa\u3060\u3063\u305f\u300d\u3068\u611a\u75f4\u3092\u66f8\u304f\", \"\u9762\u63a5\u306e\u8a18\u61b6\u3092\u6d88\u3059\u305f\u3081\u306b\u904a\u3073\u306b\u51fa\u304b\u3051\u308b\"] },\n { q: \"Q15. ES\u4f5c\u6210\u3067\u7279\u306b\u91cd\u8981\u3068\u3055\u308c\u308b\u306e\u306f\uff1f\", name: \"q15\", options: [\"\u660e\u78ba\u306a\u30a8\u30d4\u30bd\u30fc\u30c9\u3068\u4e00\u8cab\u3057\u305f\u4e3b\u5f35\", \"\u6d3e\u624b\u306a\u7d4c\u9a13\u3084\u3059\u3054\u3044\u4f53\u9a13\u3092\u66f8\u304f\", \"\u9577\u304f\u66f8\u304f\u3053\u3068\", \"\u5c02\u9580\u7528\u8a9e\u3092\u591a\u7528\u3057\u3066\u8ad6\u7406\u6027\u3092\u5f37\u8abf\u3059\u308b\", \"\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3084\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u83ef\u3084\u304b\u306b\u3059\u308b\"] },\n { q: \"Q16. \u8a71\u3059\u5185\u5bb9\u304c\u3057\u3063\u304b\u308a\u4f1d\u308f\u308b\u3088\u3046\u306b\u3059\u308b\u306b\u306f\uff1f\", name: \"q16\", options: [\"\u8981\u70b9\u3092\u6574\u7406\u3057\u7c21\u6f54\u306b\u8a71\u3059\", \"\u5c02\u9580\u7528\u8a9e\u3092\u591a\u7528\u3059\u308b\", \"\u8a71\u3059\u91cf\u3092\u5897\u3084\u3059\", \"\u5168\u3066\u306e\u7d30\u304b\u3044\u60c5\u5831\u3092\u6f0f\u308c\u306a\u304f\u76db\u308a\u8fbc\u3080\", \"\u9577\u3044\u524d\u7f6e\u304d\u3092\u3057\u3066\u304b\u3089\u672c\u984c\u306b\u5165\u308b\"] },\n { q: \"Q17. \u5fd7\u671b\u52d5\u6a5f\u3067\u91cd\u8981\u306a\u306e\u306f\uff1f\", name: \"q17\", options: [\"\u51fa\u5f35\u3084\u8ee2\u52e4\u306e\u5c11\u306a\u3055\", \"\u5e74\u53ce\u306e\u9ad8\u3055\", \"\u798f\u5229\u539a\u751f\u306e\u5145\u5b9f\u5ea6\", \"\u4f01\u696d\u306e\u7406\u5ff5\u3068\u5c06\u6765\u30d3\u30b8\u30e7\u30f3\u306e\u30de\u30c3\u30c1\u5ea6\", \"\u4f1a\u793e\u306e\u898f\u6a21\u3084\u30d6\u30e9\u30f3\u30c9\u529b\"] },\n { q: \"Q18. Web\u30c6\u30b9\u30c8\u5bfe\u7b56\u3067\u91cd\u8996\u3059\u3079\u304d\u306a\u306e\u306f\uff1f\", name: \"q18\", options: [\"\u30b9\u30d4\u30fc\u30c9\", \"\u7cbe\u5ea6\u3068\u30b9\u30d4\u30fc\u30c9\u306e\u4e21\u7acb\", \"\u30ab\u30f3\", \"\u5236\u9650\u6642\u9593\u3092\u6c17\u306b\u305b\u305a\u3086\u3063\u304f\u308a\u614e\u91cd\u306b\u89e3\u304f\", \"\u3044\u3064\u3082\u540c\u3058\u9806\u5e8f\u3067\u554f\u984c\u3092\u89e3\u304f\u3053\u3068\u306b\u56fa\u57f7\u3059\u308b\"] },\n { q: \"Q19. \u9762\u63a5\u5bfe\u7b56\u3068\u3057\u3066\u6709\u52b9\u306a\u6e96\u5099\u306f\u3069\u308c\uff1f\", name: \"q19\", options: [\"\u8cea\u554f\u5185\u5bb9\u306f\u3059\u3079\u3066\u6697\u8a18\u3057\u3001\u4e38\u6697\u8a18\u3067\u7b54\u3048\u308b\", \"\u3076\u3063\u3064\u3051\u672c\u756a\u3067\u6311\u3080\", \"\u4f01\u696d\u306eHP\u3092\u898b\u305a\u306b\u6311\u6226\u3059\u308b\", \"\u4e8b\u524d\u306b\u8cea\u554f\u3092\u60f3\u5b9a\u3057\u7df4\u7fd2\u3059\u308b\", \"\u9762\u63a5\u524d\u306bSNS\u3067\u4f01\u696d\u540d\u3092\u691c\u7d22\u3057\u3066\u53e3\u30b3\u30df\u3060\u3051\u898b\u308b\"] },\n { q: \"Q20. \u696d\u754c\u7814\u7a76\u3067\u307e\u305a\u78ba\u8a8d\u3059\u3079\u304d\u3053\u3068\u306f\uff1f\", name: \"q20\", options: [\"\u4f01\u696d\u306e\u30ed\u30b4\u30ab\u30e9\u30fc\u3084\u30d6\u30e9\u30f3\u30c9\u30a4\u30e1\u30fc\u30b8\", \"\u696d\u754c\u7279\u6709\u306e\u5c02\u9580\u7528\u8a9e\", \"\u5e83\u544a\u306e\u7a2e\u985e\", \"\u696d\u754c\u306e\u516c\u5f0fSNS\u30d5\u30a9\u30ed\u30ef\u30fc\u6570\", \"\u4e3b\u306a\u4e8b\u696d\u5185\u5bb9\"] },\n { q: \"Q21. \u3042\u306a\u305f\u306e\u6240\u5c5e\u5927\u5b66\u7fa4\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002\", name: \"q21\", options: [\"\u65e7\u5e1d\u5927\u30fb\u65e9\u6176\", \"MARCH\u30fb\u95a2\u95a2\u540c\u7acb\u30fb\u5730\u65b9\u56fd\u516c\u7acb\", \"\u65e5\u6771\u99d2\u5c02\u30fb\u7523\u8fd1\u7532\u9f8d\", \"\u305d\u306e\u4ed6\u306e\u79c1\u7acb\u5927\u5b66\", \"\u5c02\u9580\u30fb\u77ed\u5927\"] },\n { q: \"Q22. \u4e0b\u8a18\u306e\u4e2d\u3067\u7d4c\u9a13\u3057\u3066\u3044\u308b\u3082\u306e\u3092\u3059\u3079\u3066\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\", name: \"q22\", type: \"checkbox\", options: [\"\u9577\u671f\u30a4\u30f3\u30bf\u30fc\u30f3\", \"\u98f2\u98df\u30fb\u63a5\u5ba2\u306a\u3069\u306e\u30a2\u30eb\u30d0\u30a4\u30c8\", \"\u587e\u8b1b\u5e2b\u30fb\u5bb6\u5ead\u6559\u5e2b\", \"\u30b5\u30fc\u30af\u30eb\u3084\u5b66\u751f\u56e3\u4f53\", \"\u7559\u5b66\", \"\u4f53\u80b2\u4f1a\u7cfb\u90e8\u6d3b\", \"\u8d77\u696d\", \"\u305d\u306e\u4ed6\"] },\n { q: \"Q23. \u73fe\u5728\u3001\u9078\u8003\u304c\u9032\u884c\u3057\u3066\u3044\u308b\u4f01\u696d\u306e\u6570\u306f\u3044\u304f\u3064\u3067\u3059\u304b\uff1f\", name: \"q23\", options: [\"0\u793e\uff08\u307e\u3060\u5fdc\u52df\u3057\u3066\u3044\u306a\u3044\uff09\", \"1\u301c3\u793e\", \"4\u301c6\u793e\", \"7\u793e\u4ee5\u4e0a\"] },\n { q: \"Q24. \u73fe\u6642\u70b9\u3067\u5185\u5b9a\uff08\u5185\u3005\u5b9a\uff09\u3092\u7372\u5f97\u3057\u3066\u3044\u307e\u3059\u304b\uff1f\", name: \"q24\", options: [\"\u307e\u3060\u7372\u5f97\u3057\u3066\u3044\u306a\u3044\", \"\u30a4\u30f3\u30bf\u30fc\u30f3\u7d4c\u7531\u306e\u5185\u3005\u5b9a\u3042\u308a\", \"\u672c\u9078\u8003\u3067\u5185\u5b9a1\u793e\u3042\u308a\", \"\u8907\u6570\u793e\u304b\u3089\u5185\u5b9a\u3042\u308a\"] },\n { q: \"Q25. \u5c31\u6d3b\u306e\u9032\u3081\u65b9\u306b\u3069\u308c\u304f\u3089\u3044\u4e0d\u5b89\u3092\u611f\u3058\u3066\u3044\u307e\u3059\u304b\uff1f\", name: \"q25\", options: [\"\u975e\u5e38\u306b\u4e0d\u5b89\", \"\u3084\u3084\u4e0d\u5b89\", \"\u3042\u307e\u308a\u4e0d\u5b89\u306f\u306a\u3044\", \"\u81ea\u4fe1\u304c\u3042\u308b\"] }\n ];\n\n let currentIndex = 0;\n const answers = JSON.parse(localStorage.getItem('jobhuntAnswers')) || {};\n\n const questionsContainer = document.getElementById('questions-container');\n const progressBar = document.getElementById('progress-bar');\n const progressText = document.getElementById('progress-text');\n const prevBtn = document.getElementById('prev-btn');\n const nextBtn = document.getElementById('next-btn');\n const errorMessage = document.getElementById('error-message');\n const errorText = document.getElementById('error-text');\n\n function handleOptionSelect() {\n const item = questions[currentIndex];\n const inputType = item.type || 'radio';\n\n if (inputType === 'radio') {\n setTimeout(() => {\n nextQuestion();\n }, 350); \n }\n }\n\n function renderQuestion() {\n const progressPercentage = ((currentIndex + 1) \/ questions.length) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressText.textContent = `${currentIndex + 1} \/ ${questions.length}`;\n \n errorMessage.classList.add('hidden');\n\n const item = questions[currentIndex];\n const inputType = item.type || 'radio';\n\n let optionsHtml = '';\n item.options.forEach((opt) => {\n const [val, label] = opt.includes(':') ? opt.split(':').map(s => s.trim()) : [opt, opt];\n \n const savedAnswer = answers[item.name];\n let isChecked = false;\n if (inputType === 'checkbox') {\n isChecked = savedAnswer && savedAnswer.includes(val);\n } else {\n isChecked = savedAnswer === val;\n }\n\n optionsHtml += `\n <label class=\"block\">\n <input type=\"${inputType}\" name=\"${item.name}\" value=\"${val}\" class=\"hidden peer\" ${isChecked ? 'checked' : ''} onchange=\"handleOptionSelect()\">\n <div class=\"p-4 md:p-5 rounded-lg border border-gray-300 bg-white cursor-pointer transition-all duration-200 ease-in-out\n hover:bg-orange-50 hover:border-[#E7843E]\n peer-checked:ring-2 peer-checked:ring-[#E7843E] peer-checked:border-[#E7843E] peer-checked:bg-orange-50\">\n <span class=\"font-medium text-gray-800\">${label}<\/span>\n <\/div>\n <\/label>\n `;\n });\n\n const questionHtml = `\n <div id=\"current-question\" class=\"question-fade-enter\">\n <div class=\"toc\"><div id=\"sgb-css-id-1\" style=\"--sgb--custom--bg-color: var(--sgb-main-color);--sgb--custom--radius-type: var(--wp--custom--rounded--small,6px);--sgb--custom--box-radius: 8;\"><\/div><\/div><h2 class=\"text-xl md:text-2xl font-bold text-gray-800 leading-tight mb-8 break-words\">${item.q}<\/h2>\n <div class=\"space-y-4\">${optionsHtml}<\/div>\n <\/div>`;\n \n questionsContainer.innerHTML = questionHtml;\n\n setTimeout(() => {\n const currentQuestionElement = document.getElementById('current-question');\n if (currentQuestionElement) {\n currentQuestionElement.classList.add('question-fade-enter-active');\n }\n }, 10);\n \n updateNavButtons();\n }\n\n function updateNavButtons() {\n prevBtn.classList.toggle('hidden', currentIndex === 0);\n nextBtn.textContent = (currentIndex === questions.length - 1) ? '\u7d50\u679c\u3092\u898b\u308b' : '\u6b21\u3078';\n }\n\n function saveAnswer() {\n const item = questions[currentIndex];\n const inputType = item.type || 'radio';\n const checkedInputs = Array.from(document.querySelectorAll(`input[name=\"${item.name}\"]:checked`));\n\n if (checkedInputs.length === 0) {\n errorText.textContent = '\u3044\u305a\u308c\u304b\u306e\u9078\u629e\u80a2\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002';\n errorMessage.classList.remove('hidden');\n return false;\n }\n\n if (inputType === 'checkbox') {\n answers[item.name] = checkedInputs.map(input => input.value);\n } else {\n answers[item.name] = checkedInputs[0].value;\n }\n\n localStorage.setItem('jobhuntAnswers', JSON.stringify(answers));\n errorMessage.classList.add('hidden');\n return true;\n }\n\n function nextQuestion() {\n if (!saveAnswer()) return;\n\n if (currentIndex === questions.length - 1) {\n goResult();\n return;\n }\n currentIndex++;\n renderQuestion();\n }\n\n function prevQuestion() {\n if (currentIndex > 0) {\n currentIndex--;\n renderQuestion();\n }\n }\n\n function goResult() {\n const baseUrl = 'https:\/\/kokoshiro.jp\/note\/shukatsuryoku-form\/';\n \/\/ Get current query parameters (e.g., ?cta_source=popup)\n const currentQueryString = window.location.search;\n \n \/\/ Redirect to the form page, preserving the original query parameters.\n window.location.href = baseUrl + currentQueryString;\n }\n \n \/\/ Initial render\n renderQuestion();\n <\/script>\n<\/body>\n\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/html><\/div>\n\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":21,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-forfront.php","meta":{"footnotes":""},"class_list":{"0":"post-57624","1":"page","2":"type-page","3":"status-publish","5":"entry"},"_links":{"self":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/comments?post=57624"}],"version-history":[{"count":112,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57624\/revisions"}],"predecessor-version":[{"id":79479,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57624\/revisions\/79479"}],"wp:attachment":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/media?parent=57624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}