\u672a\u6765\u306e\u5e74\u53ce\u8a3a\u65ad<\/title>\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;700&family=Noto+Sans+JP:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #1A2C47; \/* \u7d3a *\/\n --secondary-color: #E7843E; \/* \u30aa\u30ec\u30f3\u30b8 *\/\n --top-bg-color: #ffe1c8; \/* \u4e0a\u90e8\u80cc\u666f\u8272 *\/\n --bottom-bg-color: #FFFFFF; \/* \u4e0b\u90e8\u80cc\u666f\u8272 (\u767d) *\/\n --text-color: #1A2C47; \/* \u7d3a *\/\n --light-text-color: #FFFFFF; \/* \u767d *\/\n --border-radius: 12px;\n --box-shadow: 0 4px 20px rgba(26, 44, 71, 0.1);\n }\n\n body {\n font-family: 'Noto Sans JP', 'Inter', sans-serif;\n \/* body\u306e\u80cc\u666f\u306f\u8a3a\u65ad\u30a8\u30ea\u30a2\u306e\u5916\u5074\u306a\u306e\u3067\u3001\u5143\u306e\u30af\u30ea\u30fc\u30e0\u8272\u306b\u623b\u3057\u307e\u3059 *\/\n background-color: #FDF3EB;\n color: var(--text-color);\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n\n \/* \u2605\u2605\u2605 \u5909\u66f4\u70b9: \u5168\u4f53\u3092\u56f2\u3080\u767d\u3044\u30ab\u30fc\u30c9 \u2605\u2605\u2605 *\/\n .container {\n background-color: var(--bottom-bg-color); \/* \u5168\u4f53\u3092\u4e00\u65e6\u767d\u306b *\/\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n width: 100%;\n max-width: 800px;\n overflow: hidden; \/* \u89d2\u4e38\u3092\u9069\u7528\u3059\u308b\u305f\u3081 *\/\n text-align: center;\n margin: 0 auto;\n }\n \n .content {\n \/* \u5168\u4f53\u306epadding\u306f\u4e0d\u8981\u306b *\/\n padding: 0;\n }\n\n \/* \u2605\u2605\u2605 \u8ffd\u52a0: \u4e0a\u90e8\uff08\u753b\u50cf\uff09\u30a8\u30ea\u30a2\u306e\u30b9\u30bf\u30a4\u30eb \u2605\u2605\u2605 *\/\n .image-area {\n background-color: var(--top-bg-color);\n padding: 40px 20px;\n }\n \n .quiz-main-image {\n width: 100%;\n max-width: 600px;\n height: auto;\n display: block;\n margin: 0 auto;\n }\n\n \/* \u2605\u2605\u2605 \u8ffd\u52a0: \u4e0b\u90e8\uff08\u8cea\u554f\uff09\u30a8\u30ea\u30a2\u306e\u30b9\u30bf\u30a4\u30eb \u2605\u2605\u2605 *\/\n .quiz-area {\n padding: 40px 60px;\n }\n\n h2 {\n font-size: 1.8rem;\n margin-bottom: 30px;\n line-height: 1.6;\n color: var(--primary-color);\n }\n\n #progress-container {\n width: 100%;\n background-color: #EAE3DC; \n border-radius: 5px;\n margin-bottom: 20px;\n overflow: hidden;\n transition: opacity 0.5s;\n }\n\n #progress-bar {\n width: 0%;\n height: 15px;\n background: var(--secondary-color);\n border-radius: 5px;\n transition: width 0.5s ease-in-out;\n }\n \n #question-counter {\n font-size: 1rem;\n color: var(--primary-color);\n opacity: 0.7;\n margin-top: 5px;\n transition: opacity 0.5s;\n }\n\n .question-block {\n display: none;\n animation: fadeIn 0.5s;\n }\n\n .question-block.active {\n display: block;\n }\n \n .options-container {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n\n .option-btn {\n background-color: var(--bottom-bg-color);\n color: var(--primary-color);\n border: 2px solid var(--primary-color);\n border-radius: var(--border-radius);\n padding: 18px 25px;\n font-size: 1.1rem;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n width: 100%;\n }\n\n .option-btn:hover {\n background-color: var(--primary-color);\n color: var(--light-text-color);\n transform: translateY(-3px);\n box-shadow: 0 4px 10px rgba(26, 44, 71, 0.2);\n }\n\n #show-result-btn {\n background: var(--secondary-color);\n color: var(--light-text-color);\n border: none;\n border-radius: var(--border-radius);\n padding: 18px 40px;\n font-size: 1.2rem;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n display: none;\n margin: 20px auto 0;\n }\n \n #show-result-btn:hover {\n opacity: 0.9;\n box-shadow: 0 4px 15px rgba(231, 132, 62, 0.4);\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <div class=\"content\">\n \n <div class=\"image-area\">\n <img decoding=\"async\" src=\"https:\/\/kokoshiro.jp\/note\/wp-content\/uploads\/2025\/06\/954413e72f5c9774d8a49b57fdd42d3f.png\" alt=\"\u672a\u6765\u306e\u5e74\u53ce\u8a3a\u65ad\" class=\"quiz-main-image\">\n <\/div>\n\n <div class=\"quiz-area\">\n <div id=\"progress-container\">\n <div id=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"question-counter\"><\/div>\n\n <div id=\"questions-wrapper\">\n \n <\/div>\n \n <button id=\"show-result-btn\">\u7d50\u679c\u3092\u898b\u308b<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const quizData = [\n { question: \"\u6b32\u3057\u3044\u3082\u306e\u304c\u3042\u3063\u305f\u3089\u3001\u3069\u3046\u3059\u308b\uff1f\", options: [{ text: \"\u3059\u3050\u8cb7\u3046\uff01\u52e2\u3044\u304c\u5927\u4e8b\", points: 1 }, { text: \"\u5c11\u3057\u60a9\u3093\u3067\u304b\u3089\u8cb7\u3046\", points: 3 }, { text: \"\u8a08\u753b\u7684\u306b\u304a\u91d1\u3092\u8caf\u3081\u3066\u304b\u3089\u8cb7\u3046\", points: 5 }] },\n { question: \"\u6587\u5316\u796d\u3084\u4f53\u80b2\u796d\u3067\u3001\u3042\u306a\u305f\u306f\u3069\u3093\u306a\u5f79\u5272\uff1f\", options: [{ text: \"\u30ea\u30fc\u30c0\u30fc\u3068\u3057\u3066\u7686\u3092\u5f15\u3063\u5f35\u308b\", points: 5 }, { text: \"\u30a2\u30a4\u30c7\u30a2\u3092\u51fa\u3057\u3066\u76db\u308a\u4e0a\u3052\u308b\", points: 4 }, { text: \"\u30b3\u30c4\u30b3\u30c4\u88cf\u65b9\u4f5c\u696d\u3092\u9811\u5f35\u308b\", points: 3 }, { text: \"\u307f\u3093\u306a\u3068\u697d\u3057\u304f\u53c2\u52a0\u3059\u308b\", points: 1 }] },\n { question: \"\u3082\u30571\u5104\u5186\u3042\u3063\u305f\u3089\u3001\u307e\u305a\u4f55\u306b\u4f7f\u3046\uff1f\", options: [{ text: \"\u30d1\u30fc\u30c3\u3068\u597d\u304d\u306a\u3082\u306e\u3092\u8cb7\u3046\", points: 1 }, { text: \"\u4e16\u754c\u4e00\u5468\u65c5\u884c\u306b\u51fa\u308b\", points: 2 }, { text: \"\u5805\u5b9f\u306b\u8caf\u91d1\u30fb\u8cc7\u7523\u904b\u7528\", points: 4 }, { text: \"\u8d77\u696d\u3084\u81ea\u5df1\u6295\u8cc7\u306b\u4f7f\u3046\", points: 5 }] },\n { question: \"\u672a\u77e5\u306e\u98df\u3079\u7269\u304c\u51fa\u3066\u304d\u305f\uff01\", options: [{ text: \"\u597d\u5947\u5fc3\u3067\u3068\u308a\u3042\u3048\u305a\u98df\u3079\u3066\u307f\u308b\", points: 5 }, { text: \"\u4ed6\u306e\u4eba\u306e\u611f\u60f3\u3092\u805e\u3044\u3066\u304b\u3089\u6c7a\u3081\u308b\", points: 3 }, { text: \"\u98df\u3079\u6163\u308c\u305f\u3082\u306e\u3092\u9078\u3076\", points: 1 }] },\n { question: \"\u3042\u306a\u305f\u306e\u90e8\u5c4b\u306e\u72b6\u614b\u306f\uff1f\", options: [{ text: \"\u3044\u3064\u3067\u3082\u4eba\u3092\u547c\u3079\u308b\u304f\u3089\u3044\u7dba\u9e97\", points: 5 }, { text: \"\u7269\u306f\u591a\u3044\u3051\u3069\u6574\u7406\u3055\u308c\u3066\u3044\u308b\", points: 3 }, { text: \"\u3061\u3087\u3063\u3068\u6563\u3089\u304b\u3063\u3066\u3044\u308b\u304b\u3082\u2026\", points: 2 }, { text: \"\u30ab\u30aa\u30b9\uff08\u6df7\u6c8c\uff09\u3068\u3057\u3066\u3044\u308b\", points: 1 }] },\n { question: \"\u7d04\u675f\u306e\u6642\u9593\u3001\u3044\u3064\u3082\u3069\u3046\uff1f\", options: [{ text: \"10\u5206\u524d\u306b\u306f\u5230\u7740\u3057\u3066\u3044\u308b\", points: 5 }, { text: \"\u6642\u9593\u3074\u3063\u305f\u308a\u304f\u3089\u3044\", points: 3 }, { text: \"\u305f\u307e\u306b\u9045\u308c\u3061\u3083\u3046\u2026\u3054\u3081\u3093\u306a\u3055\u3044\uff01\", points: 1 }] },\n { question: \"\u300c\u30cf\u30a4\u30ea\u30b9\u30af\u30fb\u30cf\u30a4\u30ea\u30bf\u30fc\u30f3\u300d\u306a\u8a71\u3001\u3069\u3046\u611f\u3058\u308b\uff1f\", options: [{ text: \"\u30ef\u30af\u30ef\u30af\u3059\u308b\uff01\u6311\u6226\u3057\u305f\u3044\uff01\", points: 5 }, { text: \"\u6016\u3044\u3051\u3069\u3001\u3061\u3087\u3063\u3068\u8208\u5473\u306f\u3042\u308b\", points: 3 }, { text: \"\u81ea\u5206\u306b\u306f\u5411\u3044\u3066\u3044\u306a\u3044\u3068\u601d\u3046\", points: 1 }] },\n { question: \"\u53cb\u9054\u3068\u306e\u65c5\u884c\u3001\u8a08\u753b\u3059\u308b\u306e\u306f\u8ab0\uff1f\", options: [{ text: \"\u7387\u5148\u3057\u3066\u8a08\u753b\u3092\u7acb\u3066\u308b\u306e\u304c\u597d\u304d\", points: 5 }, { text: \"\u307f\u3093\u306a\u306e\u610f\u898b\u3092\u307e\u3068\u3081\u3066\u8abf\u6574\u3059\u308b\", points: 4 }, { text: \"\u8a08\u753b\u306f\u8ab0\u304b\u306b\u304a\u4efb\u305b\u3057\u3061\u3083\u3046\", points: 1 }] },\n { question: \"\u6700\u8fd1\u300c\u3053\u308c\u306f\u6d41\u884c\u308a\u305d\u3046\uff01\u300d\u3068\u601d\u3063\u305f\u3082\u306e\u306f\u3042\u308b\uff1f\", options: [{ text: \"\u3088\u304f\u898b\u3064\u3051\u3066\u3001\u53cb\u9054\u306b\u8a71\u3057\u3066\u308b\", points: 5 }, { text: \"\u6d41\u884c\u3063\u3066\u304b\u3089\u6c17\u3065\u304f\u3053\u3068\u304c\u591a\u3044\", points: 3 }, { text: \"\u6d41\u884c\u306b\u306f\u3042\u307e\u308a\u8208\u5473\u304c\u306a\u3044\", points: 1 }] },\n { question: \"RPG\u3067\u9078\u3076\u30b8\u30e7\u30d6\uff08\u8077\u696d\uff09\u306f\uff1f\", options: [{ text: \"\u4e00\u6483\u5fc5\u6bba\u306e\u30d1\u30ef\u30fc\u3092\u6301\u3064\u300c\u6226\u58eb\u300d\", points: 3 }, { text: \"\u77e5\u7565\u3067\u52dd\u5229\u3092\u5c0e\u304f\u300c\u9b54\u6cd5\u4f7f\u3044\u300d\", points: 4 }, { text: \"\u4e00\u652b\u5343\u91d1\u3092\u72d9\u3046\u300c\u5546\u4eba\u300d\", points: 5 }, { text: \"\u4ef2\u9593\u3092\u7652\u3059\u300c\u50e7\u4fb6\u300d\", points: 2 }] },\n { question: \"\u30a2\u30eb\u30d0\u30a4\u30c8\u306e\u76ee\u7684\u3067\u4e00\u756a\u8fd1\u3044\u306e\u306f\uff1f\", options: [{ text: \"\u793e\u4f1a\u7d4c\u9a13\u3084\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u306e\u305f\u3081\", points: 5 }, { text: \"\u3068\u306b\u304b\u304f\u304a\u91d1\u3092\u7a3c\u3050\u305f\u3081\", points: 3 }, { text: \"\u4ef2\u9593\u3068\u306e\u51fa\u4f1a\u3044\u3084\u697d\u3057\u3055\", points: 2 }, { text: \"\u7279\u306b\u3057\u3066\u3044\u306a\u3044\", points: 1 }] },\n { question: \"\u5c06\u6765\u3001\u6d77\u5916\u3067\u50cd\u304f\u3053\u3068\u306b\u8208\u5473\u306f\u3042\u308b\uff1f\", options: [{ text: \"\u3081\u3061\u3083\u304f\u3061\u3083\u3042\u308b\uff01\u6d3b\u8e8d\u3057\u305f\u3044\uff01\", points: 5 }, { text: \"\u30c1\u30e3\u30f3\u30b9\u304c\u3042\u308c\u3070\u3001\u304f\u3089\u3044\", points: 3 }, { text: \"\u65e5\u672c\u3067\u50cd\u304d\u305f\u3044\", points: 1 }] },\n { question: \"\u3010\u91cd\u8981\u3011\u73fe\u5728\u3001\u30a4\u30f3\u30bf\u30fc\u30f3\u3092\u3057\u3066\u3044\u307e\u3059\u304b\uff1f\", options: [{ text: \"\u9577\u671f\u30fb\u77ed\u671f\u554f\u308f\u305a\u3001\u3084\u3063\u3066\u3044\u308b\", points: 5 }, { text: \"\u8208\u5473\u304c\u3042\u3063\u3066\u3001\u63a2\u3057\u3066\u3044\u308b\u30fb\u8003\u3048\u3066\u3044\u308b\", points: 3 }, { text: \"\u5168\u304f\u8003\u3048\u3066\u3044\u306a\u3044\", points: 1 }] },\n { question: \"\u3010\u91cd\u8981\u3011\u5c06\u6765\u3001\u3069\u3093\u306a\u50cd\u304d\u65b9\u3092\u3057\u305f\u3044\uff1f\", options: [{ text: \"\u8d77\u696d\u5bb6\u30fb\u7d4c\u55b6\u8005\u3068\u3057\u3066\u4e16\u754c\u3092\u5909\u3048\u305f\u3044\", points: 5 }, { text: \"\u5c02\u9580\u8077\uff08\u533b\u8005\u3001\u5f01\u8b77\u58eb\u3001\u30a8\u30f3\u30b8\u30cb\u30a2\u7b49\uff09\u3067\u9053\u3092\u6975\u3081\u305f\u3044\", points: 4 }, { text: \"\u5927\u4f01\u696d\u3084\u6210\u9577\u4f01\u696d\u3067\u30d0\u30ea\u30d0\u30ea\u50cd\u304d\u305f\u3044\", points: 3 }, { text: \"\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u3068\u3057\u3066\u81ea\u7531\u306b\u50cd\u304d\u305f\u3044\", points: 4 }, { text: \"\u516c\u52d9\u54e1\u3068\u3057\u3066\u5b89\u5b9a\u3057\u3066\u50cd\u304d\u305f\u3044\", points: 2 }, { text: \"\u307e\u3060\u5177\u4f53\u7684\u306b\u306f\u6c7a\u307e\u3063\u3066\u3044\u306a\u3044\", points: 1 }] },\n { question: \"\u6700\u5f8c\u306e\u8cea\u554f\uff01\u3042\u306a\u305f\u306e\u5ea7\u53f3\u306e\u9298\u306b\u4e00\u756a\u8fd1\u3044\u306e\u306f\uff1f\", options: [{ text: \"\u6642\u306f\u91d1\u306a\u308a\", points: 5 }, { text: \"\u7d99\u7d9a\u306f\u529b\u306a\u308a\", points: 4 }, { text: \"\u660e\u65e5\u306f\u660e\u65e5\u306e\u98a8\u304c\u5439\u304f\", points: 2 }, { text: \"\u697d\u3057\u3093\u3060\u8005\u52dd\u3061\uff01\", points: 1 }] }\n ];\n\n let currentQuestionIndex = 0;\n let score = 0;\n\n const questionsWrapper = document.getElementById('questions-wrapper');\n const showResultBtn = document.getElementById('show-result-btn');\n const progressBar = document.getElementById('progress-bar');\n const progressContainer = document.getElementById('progress-container');\n const questionCounter = document.getElementById('question-counter');\n\n function saveProgress() {\n const progress = {\n currentQuestionIndex: currentQuestionIndex,\n score: score\n };\n localStorage.setItem('quizProgress', JSON.stringify(progress));\n }\n\n function loadProgress() {\n const savedProgress = localStorage.getItem('quizProgress');\n if (savedProgress) {\n const progress = JSON.parse(savedProgress);\n currentQuestionIndex = progress.currentQuestionIndex;\n score = progress.score;\n return true;\n }\n return false;\n }\n \n function startQuiz() {\n loadProgress();\n if (currentQuestionIndex >= quizData.length) {\n endQuiz();\n return;\n }\n showResultBtn.style.display = 'none';\n progressContainer.style.opacity = '1';\n questionCounter.style.opacity = '1';\n questionsWrapper.innerHTML = '';\n quizData.forEach((quizItem, index) => {\n const questionBlock = document.createElement('div');\n questionBlock.className = 'question-block';\n questionBlock.id = `question-${index}`;\n const questionText = document.createElement('h2');\n questionText.innerHTML = `Q${index + 1}. ${quizItem.question.replace(\/\\n\/g, '<br>')}`;\n const optionsContainer = document.createElement('div');\n optionsContainer.className = 'options-container';\n quizItem.options.forEach(option => {\n const button = document.createElement('button');\n button.className = 'option-btn';\n button.textContent = option.text;\n button.onclick = () => selectOption(option.points);\n optionsContainer.appendChild(button);\n });\n questionBlock.appendChild(questionText);\n questionBlock.appendChild(optionsContainer);\n questionsWrapper.appendChild(questionBlock);\n });\n showQuestion();\n }\n\n function showQuestion() {\n const questionBlocks = document.querySelectorAll('.question-block');\n questionBlocks.forEach(block => block.classList.remove('active'));\n if (currentQuestionIndex < quizData.length) {\n const activeBlock = document.getElementById(`question-${currentQuestionIndex}`);\n activeBlock.classList.add('active');\n }\n updateProgress();\n }\n \n function selectOption(points) {\n score += points;\n currentQuestionIndex++;\n saveProgress();\n if (currentQuestionIndex < quizData.length) {\n showQuestion();\n } else {\n endQuiz();\n }\n }\n \n function updateProgress() {\n const questionNumToShow = (currentQuestionIndex >= quizData.length) ? quizData.length : currentQuestionIndex + 1;\n const progressPercentage = (currentQuestionIndex \/ quizData.length) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n questionCounter.textContent = `\u8cea\u554f ${questionNumToShow} \/ ${quizData.length}`;\n }\n\n function endQuiz() {\n const lastQuestion = document.getElementById(`question-${quizData.length - 1}`);\n if(lastQuestion) {\n lastQuestion.style.display = 'none';\n }\n progressContainer.style.opacity = '0';\n questionCounter.style.opacity = '0';\n showResultBtn.style.display = 'block';\n }\n\n showResultBtn.addEventListener('click', () => {\n \/\/ \u73fe\u5728\u306eURL\u304b\u3089\u30af\u30a8\u30ea\u90e8\u5206\uff08?\u4ee5\u964d\uff09\u3092\u53d6\u5f97\n const query = window.location.search;\n \/\/ \u30af\u30a8\u30ea\u3092\u542b\u3081\u3066\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\n window.location.href = `https:\/\/kokoshiro.jp\/note\/incomecheck_form\/${query}`;\n });\n\n window.onload = startQuiz;\n <\/script>\n<\/body>\n\n<\/html><\/div>\n\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":38,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-forfront.php","meta":{"footnotes":""},"class_list":{"0":"post-64723","1":"page","2":"type-page","3":"status-publish","5":"entry"},"_links":{"self":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/64723","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\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/comments?post=64723"}],"version-history":[{"count":38,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/64723\/revisions"}],"predecessor-version":[{"id":81278,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/64723\/revisions\/81278"}],"wp:attachment":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/media?parent=64723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n \n \u672a\u6765\u306e\u5e74\u53ce\u8a3a\u65ad<\/title>\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;700&family=Noto+Sans+JP:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #1A2C47; \/* \u7d3a *\/\n --secondary-color: #E7843E; \/* \u30aa\u30ec\u30f3\u30b8 *\/\n --top-bg-color: #ffe1c8; \/* \u4e0a\u90e8\u80cc\u666f\u8272 *\/\n --bottom-bg-color: #FFFFFF; \/* \u4e0b\u90e8\u80cc\u666f\u8272 (\u767d) *\/\n --text-color: #1A2C47; \/* \u7d3a *\/\n --light-text-color: #FFFFFF; \/* \u767d *\/\n --border-radius: 12px;\n --box-shadow: 0 4px 20px rgba(26, 44, 71, 0.1);\n }\n\n body {\n font-family: 'Noto Sans JP', 'Inter', sans-serif;\n \/* body\u306e\u80cc\u666f\u306f\u8a3a\u65ad\u30a8\u30ea\u30a2\u306e\u5916\u5074\u306a\u306e\u3067\u3001\u5143\u306e\u30af\u30ea\u30fc\u30e0\u8272\u306b\u623b\u3057\u307e\u3059 *\/\n background-color: #FDF3EB;\n color: var(--text-color);\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n\n \/* \u2605\u2605\u2605 \u5909\u66f4\u70b9: \u5168\u4f53\u3092\u56f2\u3080\u767d\u3044\u30ab\u30fc\u30c9 \u2605\u2605\u2605 *\/\n .container {\n background-color: var(--bottom-bg-color); \/* \u5168\u4f53\u3092\u4e00\u65e6\u767d\u306b *\/\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n width: 100%;\n max-width: 800px;\n overflow: hidden; \/* \u89d2\u4e38\u3092\u9069\u7528\u3059\u308b\u305f\u3081 *\/\n text-align: center;\n margin: 0 auto;\n }\n \n .content {\n \/* \u5168\u4f53\u306epadding\u306f\u4e0d\u8981\u306b *\/\n padding: 0;\n }\n\n \/* \u2605\u2605\u2605 \u8ffd\u52a0: \u4e0a\u90e8\uff08\u753b\u50cf\uff09\u30a8\u30ea\u30a2\u306e\u30b9\u30bf\u30a4\u30eb \u2605\u2605\u2605 *\/\n .image-area {\n background-color: var(--top-bg-color);\n padding: 40px 20px;\n }\n \n .quiz-main-image {\n width: 100%;\n max-width: 600px;\n height: auto;\n display: block;\n margin: 0 auto;\n }\n\n \/* \u2605\u2605\u2605 \u8ffd\u52a0: \u4e0b\u90e8\uff08\u8cea\u554f\uff09\u30a8\u30ea\u30a2\u306e\u30b9\u30bf\u30a4\u30eb \u2605\u2605\u2605 *\/\n .quiz-area {\n padding: 40px 60px;\n }\n\n h2 {\n font-size: 1.8rem;\n margin-bottom: 30px;\n line-height: 1.6;\n color: var(--primary-color);\n }\n\n #progress-container {\n width: 100%;\n background-color: #EAE3DC; \n border-radius: 5px;\n margin-bottom: 20px;\n overflow: hidden;\n transition: opacity 0.5s;\n }\n\n #progress-bar {\n width: 0%;\n height: 15px;\n background: var(--secondary-color);\n border-radius: 5px;\n transition: width 0.5s ease-in-out;\n }\n \n #question-counter {\n font-size: 1rem;\n color: var(--primary-color);\n opacity: 0.7;\n margin-top: 5px;\n transition: opacity 0.5s;\n }\n\n .question-block {\n display: none;\n animation: fadeIn 0.5s;\n }\n\n .question-block.active {\n display: block;\n }\n \n .options-container {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n\n .option-btn {\n background-color: var(--bottom-bg-color);\n color: var(--primary-color);\n border: 2px solid var(--primary-color);\n border-radius: var(--border-radius);\n padding: 18px 25px;\n font-size: 1.1rem;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n width: 100%;\n }\n\n .option-btn:hover {\n background-color: var(--primary-color);\n color: var(--light-text-color);\n transform: translateY(-3px);\n box-shadow: 0 4px 10px rgba(26, 44, 71, 0.2);\n }\n\n #show-result-btn {\n background: var(--secondary-color);\n color: var(--light-text-color);\n border: none;\n border-radius: var(--border-radius);\n padding: 18px 40px;\n font-size: 1.2rem;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n display: none;\n margin: 20px auto 0;\n }\n \n #show-result-btn:hover {\n opacity: 0.9;\n box-shadow: 0 4px 15px rgba(231, 132, 62, 0.4);\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <div class=\"content\">\n \n <div class=\"image-area\">\n <img decoding=\"async\" src=\"https:\/\/kokoshiro.jp\/note\/wp-content\/uploads\/2025\/06\/954413e72f5c9774d8a49b57fdd42d3f.png\" alt=\"\u672a\u6765\u306e\u5e74\u53ce\u8a3a\u65ad\" class=\"quiz-main-image\">\n <\/div>\n\n <div class=\"quiz-area\">\n <div id=\"progress-container\">\n <div id=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"question-counter\"><\/div>\n\n <div id=\"questions-wrapper\">\n \n <\/div>\n \n <button id=\"show-result-btn\">\u7d50\u679c\u3092\u898b\u308b<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const quizData = [\n { question: \"\u6b32\u3057\u3044\u3082\u306e\u304c\u3042\u3063\u305f\u3089\u3001\u3069\u3046\u3059\u308b\uff1f\", options: [{ text: \"\u3059\u3050\u8cb7\u3046\uff01\u52e2\u3044\u304c\u5927\u4e8b\", points: 1 }, { text: \"\u5c11\u3057\u60a9\u3093\u3067\u304b\u3089\u8cb7\u3046\", points: 3 }, { text: \"\u8a08\u753b\u7684\u306b\u304a\u91d1\u3092\u8caf\u3081\u3066\u304b\u3089\u8cb7\u3046\", points: 5 }] },\n { question: \"\u6587\u5316\u796d\u3084\u4f53\u80b2\u796d\u3067\u3001\u3042\u306a\u305f\u306f\u3069\u3093\u306a\u5f79\u5272\uff1f\", options: [{ text: \"\u30ea\u30fc\u30c0\u30fc\u3068\u3057\u3066\u7686\u3092\u5f15\u3063\u5f35\u308b\", points: 5 }, { text: \"\u30a2\u30a4\u30c7\u30a2\u3092\u51fa\u3057\u3066\u76db\u308a\u4e0a\u3052\u308b\", points: 4 }, { text: \"\u30b3\u30c4\u30b3\u30c4\u88cf\u65b9\u4f5c\u696d\u3092\u9811\u5f35\u308b\", points: 3 }, { text: \"\u307f\u3093\u306a\u3068\u697d\u3057\u304f\u53c2\u52a0\u3059\u308b\", points: 1 }] },\n { question: \"\u3082\u30571\u5104\u5186\u3042\u3063\u305f\u3089\u3001\u307e\u305a\u4f55\u306b\u4f7f\u3046\uff1f\", options: [{ text: \"\u30d1\u30fc\u30c3\u3068\u597d\u304d\u306a\u3082\u306e\u3092\u8cb7\u3046\", points: 1 }, { text: \"\u4e16\u754c\u4e00\u5468\u65c5\u884c\u306b\u51fa\u308b\", points: 2 }, { text: \"\u5805\u5b9f\u306b\u8caf\u91d1\u30fb\u8cc7\u7523\u904b\u7528\", points: 4 }, { text: \"\u8d77\u696d\u3084\u81ea\u5df1\u6295\u8cc7\u306b\u4f7f\u3046\", points: 5 }] },\n { question: \"\u672a\u77e5\u306e\u98df\u3079\u7269\u304c\u51fa\u3066\u304d\u305f\uff01\", options: [{ text: \"\u597d\u5947\u5fc3\u3067\u3068\u308a\u3042\u3048\u305a\u98df\u3079\u3066\u307f\u308b\", points: 5 }, { text: \"\u4ed6\u306e\u4eba\u306e\u611f\u60f3\u3092\u805e\u3044\u3066\u304b\u3089\u6c7a\u3081\u308b\", points: 3 }, { text: \"\u98df\u3079\u6163\u308c\u305f\u3082\u306e\u3092\u9078\u3076\", points: 1 }] },\n { question: \"\u3042\u306a\u305f\u306e\u90e8\u5c4b\u306e\u72b6\u614b\u306f\uff1f\", options: [{ text: \"\u3044\u3064\u3067\u3082\u4eba\u3092\u547c\u3079\u308b\u304f\u3089\u3044\u7dba\u9e97\", points: 5 }, { text: \"\u7269\u306f\u591a\u3044\u3051\u3069\u6574\u7406\u3055\u308c\u3066\u3044\u308b\", points: 3 }, { text: \"\u3061\u3087\u3063\u3068\u6563\u3089\u304b\u3063\u3066\u3044\u308b\u304b\u3082\u2026\", points: 2 }, { text: \"\u30ab\u30aa\u30b9\uff08\u6df7\u6c8c\uff09\u3068\u3057\u3066\u3044\u308b\", points: 1 }] },\n { question: \"\u7d04\u675f\u306e\u6642\u9593\u3001\u3044\u3064\u3082\u3069\u3046\uff1f\", options: [{ text: \"10\u5206\u524d\u306b\u306f\u5230\u7740\u3057\u3066\u3044\u308b\", points: 5 }, { text: \"\u6642\u9593\u3074\u3063\u305f\u308a\u304f\u3089\u3044\", points: 3 }, { text: \"\u305f\u307e\u306b\u9045\u308c\u3061\u3083\u3046\u2026\u3054\u3081\u3093\u306a\u3055\u3044\uff01\", points: 1 }] },\n { question: \"\u300c\u30cf\u30a4\u30ea\u30b9\u30af\u30fb\u30cf\u30a4\u30ea\u30bf\u30fc\u30f3\u300d\u306a\u8a71\u3001\u3069\u3046\u611f\u3058\u308b\uff1f\", options: [{ text: \"\u30ef\u30af\u30ef\u30af\u3059\u308b\uff01\u6311\u6226\u3057\u305f\u3044\uff01\", points: 5 }, { text: \"\u6016\u3044\u3051\u3069\u3001\u3061\u3087\u3063\u3068\u8208\u5473\u306f\u3042\u308b\", points: 3 }, { text: \"\u81ea\u5206\u306b\u306f\u5411\u3044\u3066\u3044\u306a\u3044\u3068\u601d\u3046\", points: 1 }] },\n { question: \"\u53cb\u9054\u3068\u306e\u65c5\u884c\u3001\u8a08\u753b\u3059\u308b\u306e\u306f\u8ab0\uff1f\", options: [{ text: \"\u7387\u5148\u3057\u3066\u8a08\u753b\u3092\u7acb\u3066\u308b\u306e\u304c\u597d\u304d\", points: 5 }, { text: \"\u307f\u3093\u306a\u306e\u610f\u898b\u3092\u307e\u3068\u3081\u3066\u8abf\u6574\u3059\u308b\", points: 4 }, { text: \"\u8a08\u753b\u306f\u8ab0\u304b\u306b\u304a\u4efb\u305b\u3057\u3061\u3083\u3046\", points: 1 }] },\n { question: \"\u6700\u8fd1\u300c\u3053\u308c\u306f\u6d41\u884c\u308a\u305d\u3046\uff01\u300d\u3068\u601d\u3063\u305f\u3082\u306e\u306f\u3042\u308b\uff1f\", options: [{ text: \"\u3088\u304f\u898b\u3064\u3051\u3066\u3001\u53cb\u9054\u306b\u8a71\u3057\u3066\u308b\", points: 5 }, { text: \"\u6d41\u884c\u3063\u3066\u304b\u3089\u6c17\u3065\u304f\u3053\u3068\u304c\u591a\u3044\", points: 3 }, { text: \"\u6d41\u884c\u306b\u306f\u3042\u307e\u308a\u8208\u5473\u304c\u306a\u3044\", points: 1 }] },\n { question: \"RPG\u3067\u9078\u3076\u30b8\u30e7\u30d6\uff08\u8077\u696d\uff09\u306f\uff1f\", options: [{ text: \"\u4e00\u6483\u5fc5\u6bba\u306e\u30d1\u30ef\u30fc\u3092\u6301\u3064\u300c\u6226\u58eb\u300d\", points: 3 }, { text: \"\u77e5\u7565\u3067\u52dd\u5229\u3092\u5c0e\u304f\u300c\u9b54\u6cd5\u4f7f\u3044\u300d\", points: 4 }, { text: \"\u4e00\u652b\u5343\u91d1\u3092\u72d9\u3046\u300c\u5546\u4eba\u300d\", points: 5 }, { text: \"\u4ef2\u9593\u3092\u7652\u3059\u300c\u50e7\u4fb6\u300d\", points: 2 }] },\n { question: \"\u30a2\u30eb\u30d0\u30a4\u30c8\u306e\u76ee\u7684\u3067\u4e00\u756a\u8fd1\u3044\u306e\u306f\uff1f\", options: [{ text: \"\u793e\u4f1a\u7d4c\u9a13\u3084\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u306e\u305f\u3081\", points: 5 }, { text: \"\u3068\u306b\u304b\u304f\u304a\u91d1\u3092\u7a3c\u3050\u305f\u3081\", points: 3 }, { text: \"\u4ef2\u9593\u3068\u306e\u51fa\u4f1a\u3044\u3084\u697d\u3057\u3055\", points: 2 }, { text: \"\u7279\u306b\u3057\u3066\u3044\u306a\u3044\", points: 1 }] },\n { question: \"\u5c06\u6765\u3001\u6d77\u5916\u3067\u50cd\u304f\u3053\u3068\u306b\u8208\u5473\u306f\u3042\u308b\uff1f\", options: [{ text: \"\u3081\u3061\u3083\u304f\u3061\u3083\u3042\u308b\uff01\u6d3b\u8e8d\u3057\u305f\u3044\uff01\", points: 5 }, { text: \"\u30c1\u30e3\u30f3\u30b9\u304c\u3042\u308c\u3070\u3001\u304f\u3089\u3044\", points: 3 }, { text: \"\u65e5\u672c\u3067\u50cd\u304d\u305f\u3044\", points: 1 }] },\n { question: \"\u3010\u91cd\u8981\u3011\u73fe\u5728\u3001\u30a4\u30f3\u30bf\u30fc\u30f3\u3092\u3057\u3066\u3044\u307e\u3059\u304b\uff1f\", options: [{ text: \"\u9577\u671f\u30fb\u77ed\u671f\u554f\u308f\u305a\u3001\u3084\u3063\u3066\u3044\u308b\", points: 5 }, { text: \"\u8208\u5473\u304c\u3042\u3063\u3066\u3001\u63a2\u3057\u3066\u3044\u308b\u30fb\u8003\u3048\u3066\u3044\u308b\", points: 3 }, { text: \"\u5168\u304f\u8003\u3048\u3066\u3044\u306a\u3044\", points: 1 }] },\n { question: \"\u3010\u91cd\u8981\u3011\u5c06\u6765\u3001\u3069\u3093\u306a\u50cd\u304d\u65b9\u3092\u3057\u305f\u3044\uff1f\", options: [{ text: \"\u8d77\u696d\u5bb6\u30fb\u7d4c\u55b6\u8005\u3068\u3057\u3066\u4e16\u754c\u3092\u5909\u3048\u305f\u3044\", points: 5 }, { text: \"\u5c02\u9580\u8077\uff08\u533b\u8005\u3001\u5f01\u8b77\u58eb\u3001\u30a8\u30f3\u30b8\u30cb\u30a2\u7b49\uff09\u3067\u9053\u3092\u6975\u3081\u305f\u3044\", points: 4 }, { text: \"\u5927\u4f01\u696d\u3084\u6210\u9577\u4f01\u696d\u3067\u30d0\u30ea\u30d0\u30ea\u50cd\u304d\u305f\u3044\", points: 3 }, { text: \"\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u3068\u3057\u3066\u81ea\u7531\u306b\u50cd\u304d\u305f\u3044\", points: 4 }, { text: \"\u516c\u52d9\u54e1\u3068\u3057\u3066\u5b89\u5b9a\u3057\u3066\u50cd\u304d\u305f\u3044\", points: 2 }, { text: \"\u307e\u3060\u5177\u4f53\u7684\u306b\u306f\u6c7a\u307e\u3063\u3066\u3044\u306a\u3044\", points: 1 }] },\n { question: \"\u6700\u5f8c\u306e\u8cea\u554f\uff01\u3042\u306a\u305f\u306e\u5ea7\u53f3\u306e\u9298\u306b\u4e00\u756a\u8fd1\u3044\u306e\u306f\uff1f\", options: [{ text: \"\u6642\u306f\u91d1\u306a\u308a\", points: 5 }, { text: \"\u7d99\u7d9a\u306f\u529b\u306a\u308a\", points: 4 }, { text: \"\u660e\u65e5\u306f\u660e\u65e5\u306e\u98a8\u304c\u5439\u304f\", points: 2 }, { text: \"\u697d\u3057\u3093\u3060\u8005\u52dd\u3061\uff01\", points: 1 }] }\n ];\n\n let currentQuestionIndex = 0;\n let score = 0;\n\n const questionsWrapper = document.getElementById('questions-wrapper');\n const showResultBtn = document.getElementById('show-result-btn');\n const progressBar = document.getElementById('progress-bar');\n const progressContainer = document.getElementById('progress-container');\n const questionCounter = document.getElementById('question-counter');\n\n function saveProgress() {\n const progress = {\n currentQuestionIndex: currentQuestionIndex,\n score: score\n };\n localStorage.setItem('quizProgress', JSON.stringify(progress));\n }\n\n function loadProgress() {\n const savedProgress = localStorage.getItem('quizProgress');\n if (savedProgress) {\n const progress = JSON.parse(savedProgress);\n currentQuestionIndex = progress.currentQuestionIndex;\n score = progress.score;\n return true;\n }\n return false;\n }\n \n function startQuiz() {\n loadProgress();\n if (currentQuestionIndex >= quizData.length) {\n endQuiz();\n return;\n }\n showResultBtn.style.display = 'none';\n progressContainer.style.opacity = '1';\n questionCounter.style.opacity = '1';\n questionsWrapper.innerHTML = '';\n quizData.forEach((quizItem, index) => {\n const questionBlock = document.createElement('div');\n questionBlock.className = 'question-block';\n questionBlock.id = `question-${index}`;\n const questionText = document.createElement('h2');\n questionText.innerHTML = `Q${index + 1}. ${quizItem.question.replace(\/\\n\/g, '<br>')}`;\n const optionsContainer = document.createElement('div');\n optionsContainer.className = 'options-container';\n quizItem.options.forEach(option => {\n const button = document.createElement('button');\n button.className = 'option-btn';\n button.textContent = option.text;\n button.onclick = () => selectOption(option.points);\n optionsContainer.appendChild(button);\n });\n questionBlock.appendChild(questionText);\n questionBlock.appendChild(optionsContainer);\n questionsWrapper.appendChild(questionBlock);\n });\n showQuestion();\n }\n\n function showQuestion() {\n const questionBlocks = document.querySelectorAll('.question-block');\n questionBlocks.forEach(block => block.classList.remove('active'));\n if (currentQuestionIndex < quizData.length) {\n const activeBlock = document.getElementById(`question-${currentQuestionIndex}`);\n activeBlock.classList.add('active');\n }\n updateProgress();\n }\n \n function selectOption(points) {\n score += points;\n currentQuestionIndex++;\n saveProgress();\n if (currentQuestionIndex < quizData.length) {\n showQuestion();\n } else {\n endQuiz();\n }\n }\n \n function updateProgress() {\n const questionNumToShow = (currentQuestionIndex >= quizData.length) ? quizData.length : currentQuestionIndex + 1;\n const progressPercentage = (currentQuestionIndex \/ quizData.length) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n questionCounter.textContent = `\u8cea\u554f ${questionNumToShow} \/ ${quizData.length}`;\n }\n\n function endQuiz() {\n const lastQuestion = document.getElementById(`question-${quizData.length - 1}`);\n if(lastQuestion) {\n lastQuestion.style.display = 'none';\n }\n progressContainer.style.opacity = '0';\n questionCounter.style.opacity = '0';\n showResultBtn.style.display = 'block';\n }\n\n showResultBtn.addEventListener('click', () => {\n \/\/ \u73fe\u5728\u306eURL\u304b\u3089\u30af\u30a8\u30ea\u90e8\u5206\uff08?\u4ee5\u964d\uff09\u3092\u53d6\u5f97\n const query = window.location.search;\n \/\/ \u30af\u30a8\u30ea\u3092\u542b\u3081\u3066\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\n window.location.href = `https:\/\/kokoshiro.jp\/note\/incomecheck_form\/${query}`;\n });\n\n window.onload = startQuiz;\n <\/script>\n<\/body>\n\n<\/html><\/div>\n\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":38,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-forfront.php","meta":{"footnotes":""},"class_list":{"0":"post-64723","1":"page","2":"type-page","3":"status-publish","5":"entry"},"_links":{"self":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/64723","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\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/comments?post=64723"}],"version-history":[{"count":38,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/64723\/revisions"}],"predecessor-version":[{"id":81278,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/64723\/revisions\/81278"}],"wp:attachment":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/media?parent=64723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}