3\u5206\u3067\u308f\u304b\u308b\uff5c\u81ea\u5206\u306b\u5411\u3044\u3066\u3044\u308bWeb\u306e\u304a\u4ed5\u4e8b\u8a3a\u65ad | DX UP<\/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=Noto+Sans+JP:wght@400;500;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #009688;\n --primary-light: #4DB6AC;\n --primary-dark: #00796B;\n --primary-pale: #E0F2F1;\n --primary-mist: #F1F9F8;\n --accent: #FFD54F;\n --accent-dark: #FFC107;\n --accent-glow: #FFECB3;\n --text-dark: #263238;\n --text-medium: #546E7A;\n --text-light: #78909C;\n --white: #FFFFFF;\n --bg-cream: #FAFAFA;\n --cta-orange: #FF6D00;\n --cta-orange-dark: #E65100;\n --result-a: #009688;\n --result-a-light: #E0F2F1;\n --result-b: #1976D2;\n --result-b-light: #E3F2FD;\n --result-c: #F9A825;\n --result-c-light: #FFF8E1;\n --shadow-soft: 0 4px 20px rgba(0, 150, 136, 0.10);\n --shadow-medium: 0 8px 30px rgba(0, 150, 136, 0.14);\n --shadow-card: 0 2px 12px rgba(0, 150, 136, 0.08);\n --radius-sm: 12px;\n --radius-md: 16px;\n --radius-lg: 24px;\n --radius-xl: 32px;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;\n background: linear-gradient(160deg, #E0F2F1 0%, #B2DFDB 40%, #E0F2F1 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding: 16px;\n color: var(--text-dark);\n line-height: 1.7;\n }\n\n .app {\n width: 100%;\n max-width: 440px;\n background: var(--white);\n border-radius: var(--radius-xl);\n box-shadow: var(--shadow-medium);\n overflow: hidden;\n border: 3px solid var(--primary);\n position: relative;\n }\n\n .app::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 240px;\n background: linear-gradient(180deg, var(--primary-pale) 0%, transparent 100%);\n pointer-events: none;\n z-index: 0;\n }\n\n \/* PC\u75282\u30ab\u30e9\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8 *\/\n .pc-layout {\n display: block;\n }\n\n .pc-left, .pc-right {\n width: 100%;\n }\n\n \/* ===== \u30d8\u30c3\u30c0\u30fc ===== *\/\n .header {\n position: relative; z-index: 1;\n text-align: center;\n padding: 28px 20px 20px;\n }\n\n .mascot {\n font-size: 52px;\n display: inline-block;\n animation: mascotFloat 3s ease-in-out infinite;\n filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));\n }\n @keyframes mascotFloat {\n 0%, 100% { transform: translateY(0) rotate(-2deg); }\n 50% { transform: translateY(-7px) rotate(2deg); }\n }\n\n .header-badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background: linear-gradient(135deg, var(--accent), var(--accent-dark));\n color: var(--text-dark);\n font-size: 12px;\n font-weight: 700;\n padding: 5px 14px;\n border-radius: 20px;\n margin: 14px 0 10px;\n box-shadow: 0 2px 8px rgba(255,193,7,0.25);\n }\n .header-badge::before, .header-badge::after { content: '\u2726'; font-size: 9px; }\n\n .main-title {\n font-size: clamp(20px, 5.5vw, 26px);\n font-weight: 900;\n color: var(--primary-dark);\n line-height: 1.45;\n margin-bottom: 8px;\n }\n .main-title .highlight {\n background: linear-gradient(transparent 60%, var(--accent-glow) 60%);\n }\n\n .sub-title {\n font-size: clamp(12px, 3.5vw, 14px);\n color: var(--text-medium);\n font-weight: 500;\n }\n\n \/* ===== \u30b3\u30f3\u30c6\u30f3\u30c4 ===== *\/\n .content {\n position: relative; z-index: 1;\n padding: 0 20px 28px;\n }\n\n \/* ===== \u30b9\u30bf\u30fc\u30c8\u753b\u9762 ===== *\/\n .start-screen { text-align: center; padding: 12px 0 8px; }\n\n .start-desc {\n font-size: 14px;\n color: var(--text-medium);\n margin-bottom: 20px;\n line-height: 1.8;\n }\n\n .start-features {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-bottom: 24px;\n flex-wrap: wrap;\n }\n\n .feature-tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: var(--primary-pale);\n color: var(--primary-dark);\n font-size: 12px;\n font-weight: 600;\n padding: 7px 13px;\n border-radius: 20px;\n }\n\n .btn-start {\n width: 100%;\n max-width: 280px;\n background: linear-gradient(135deg, var(--accent), var(--accent-dark));\n color: var(--text-dark);\n font-size: 17px;\n font-weight: 700;\n border: none;\n padding: 16px 28px;\n border-radius: 50px;\n cursor: pointer;\n box-shadow: 0 4px 0 #F9A825, 0 6px 16px rgba(255,193,7,0.25);\n transition: all 0.2s cubic-bezier(0.4,0,0.2,1);\n position: relative;\n overflow: hidden;\n }\n .btn-start::after {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n animation: shimmer 2.5s infinite;\n }\n @keyframes shimmer { 100% { left: 100%; } }\n\n .btn-start:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #F9A825, 0 10px 24px rgba(255,193,7,0.35); }\n .btn-start:active { transform: translateY(2px); box-shadow: 0 2px 0 #F9A825; }\n\n .start-note { margin-top: 14px; font-size: 12px; color: var(--text-light); }\n\n \/* ===== \u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc ===== *\/\n .progress-area { margin-bottom: 22px; }\n\n .progress-info {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n .progress-step { font-size: 13px; font-weight: 700; color: var(--primary); }\n .progress-pct { font-size: 13px; font-weight: 600; color: var(--primary-dark); }\n\n .progress-track {\n height: 10px;\n background: var(--primary-pale);\n border-radius: 10px;\n overflow: hidden;\n }\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--primary-light), var(--primary));\n border-radius: 10px;\n transition: width 0.5s cubic-bezier(0.4,0,0.2,1);\n position: relative;\n }\n .progress-fill::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);\n animation: barShine 1.8s infinite;\n }\n @keyframes barShine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n\n \/* ===== \u8cea\u554f\u30ab\u30fc\u30c9 ===== *\/\n .quiz-area { display: none; }\n\n .q-card {\n opacity: 0;\n transform: translateX(24px);\n transition: all 0.35s cubic-bezier(0.4,0,0.2,1);\n }\n .q-card.enter { opacity: 1; transform: translateX(0); }\n .q-card.exit { opacity: 0; transform: translateX(-24px); }\n\n .q-box {\n background: linear-gradient(135deg, var(--primary-pale), #B2DFDB);\n border-radius: var(--radius-md);\n padding: 18px 20px;\n margin-bottom: 18px;\n position: relative;\n }\n .q-box::after {\n content: '';\n position: absolute;\n bottom: -9px; left: 28px;\n border: 10px solid transparent;\n border-top-color: #B2DFDB;\n border-bottom: 0;\n }\n\n .q-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 40px; height: 32px;\n background: var(--primary);\n color: var(--white);\n font-size: 13px;\n font-weight: 700;\n border-radius: 8px;\n padding: 0 10px;\n margin-bottom: 10px;\n }\n\n .q-text {\n font-size: 16px;\n font-weight: 700;\n color: var(--text-dark);\n line-height: 1.6;\n }\n\n \/* ===== \u9078\u629e\u80a2 ===== *\/\n .opts { display: flex; flex-direction: column; gap: 10px; }\n\n .opt-btn {\n display: flex;\n align-items: center;\n gap: 14px;\n width: 100%;\n background: var(--white);\n border: 2px solid #E0E0E0;\n padding: 15px 16px;\n border-radius: var(--radius-sm);\n cursor: pointer;\n font-size: 15px;\n font-weight: 500;\n color: var(--text-dark);\n text-align: left;\n transition: all 0.2s cubic-bezier(0.4,0,0.2,1);\n position: relative;\n overflow: hidden;\n font-family: inherit;\n }\n .opt-btn::before {\n content: '';\n position: absolute; inset: 0;\n background: linear-gradient(135deg, var(--primary-pale), var(--primary-light));\n opacity: 0;\n transition: opacity 0.2s;\n }\n .opt-btn:hover {\n border-color: var(--primary);\n transform: translateY(-2px);\n box-shadow: var(--shadow-card);\n }\n .opt-btn:hover::before { opacity: 0.12; }\n .opt-btn:active { transform: scale(0.98); }\n\n .opt-btn.picked {\n border-color: var(--primary);\n background: var(--primary);\n color: var(--white);\n }\n .opt-btn.picked .opt-key {\n background: var(--white);\n color: var(--primary);\n }\n\n .opt-key {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px; height: 30px;\n background: var(--primary-pale);\n color: var(--primary-dark);\n font-size: 13px;\n font-weight: 700;\n border-radius: 8px;\n flex-shrink: 0;\n position: relative; z-index: 1;\n transition: all 0.2s;\n }\n .opt-btn:hover .opt-key {\n background: var(--primary);\n color: var(--white);\n }\n\n .opt-label { position: relative; z-index: 1; }\n\n \/* ===== \u7d50\u679c\u753b\u9762 ===== *\/\n .result-area { display: none; }\n\n .result-card {\n animation: resultPop 0.6s cubic-bezier(0.4,0,0.2,1);\n }\n @keyframes resultPop {\n from { opacity: 0; transform: scale(0.96) translateY(16px); }\n to { opacity: 1; transform: none; }\n }\n\n .result-top {\n text-align: center;\n padding: 24px 20px 20px;\n border-radius: var(--radius-md);\n margin-bottom: 20px;\n }\n .result-top.type-a { background: linear-gradient(135deg, var(--result-a-light), #B2DFDB); }\n .result-top.type-b { background: linear-gradient(135deg, var(--result-b-light), #BBDEFB); }\n .result-top.type-c { background: linear-gradient(135deg, var(--result-c-light), var(--accent-glow)); }\n\n .result-badge {\n display: inline-block;\n background: rgba(255,255,255,0.7);\n font-size: 13px;\n font-weight: 600;\n padding: 5px 14px;\n border-radius: 20px;\n margin-bottom: 14px;\n }\n .result-top.type-a .result-badge { color: var(--result-a); }\n .result-top.type-b .result-badge { color: var(--result-b); }\n .result-top.type-c .result-badge { color: var(--result-c); }\n\n .result-icon {\n font-size: 56px;\n display: block;\n margin-bottom: 10px;\n animation: iconBounce 0.5s cubic-bezier(0.4,0,0.2,1) 0.3s both;\n }\n @keyframes iconBounce {\n 0% { transform: scale(0); }\n 60% { transform: scale(1.15); }\n 100% { transform: scale(1); }\n }\n\n .result-type {\n font-size: clamp(22px, 6vw, 28px);\n font-weight: 900;\n color: var(--text-dark);\n display: inline-block;\n position: relative;\n }\n .result-type::after {\n content: '';\n position: absolute;\n bottom: 3px; left: -3px; right: -3px;\n height: 10px;\n z-index: -1;\n border-radius: 2px;\n }\n .result-top.type-a .result-type::after { background: rgba(0,150,136,0.18); }\n .result-top.type-b .result-type::after { background: rgba(25,118,210,0.18); }\n .result-top.type-c .result-type::after { background: rgba(249,168,37,0.25); }\n\n .result-body {\n background: var(--bg-cream);\n border-radius: var(--radius-md);\n padding: 22px 20px;\n border: 2px dashed var(--primary-light);\n }\n\n .r-section { margin-bottom: 18px; }\n .r-section:last-child { margin-bottom: 0; }\n\n .r-section-title {\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 14px;\n font-weight: 700;\n color: var(--primary-dark);\n margin-bottom: 8px;\n padding-left: 12px;\n border-left: 4px solid var(--accent);\n }\n\n .r-section-text {\n font-size: 14px;\n color: var(--text-medium);\n line-height: 1.8;\n }\n\n .r-jobs {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 6px;\n }\n .r-job-tag {\n display: inline-block;\n font-size: 13px;\n font-weight: 600;\n padding: 6px 14px;\n border-radius: 20px;\n }\n .type-a .r-job-tag { background: var(--result-a-light); color: var(--result-a); }\n .type-b .r-job-tag { background: var(--result-b-light); color: var(--result-b); }\n .type-c .r-job-tag { background: var(--result-c-light); color: #E65100; }\n\n .r-message {\n text-align: center;\n padding: 14px 18px;\n border-radius: var(--radius-sm);\n font-size: 15px;\n font-weight: 700;\n color: var(--white);\n margin-top: 18px;\n }\n .r-message.type-a { background: linear-gradient(135deg, var(--result-a), var(--primary-dark)); }\n .r-message.type-b { background: linear-gradient(135deg, var(--result-b), #1565C0); }\n .r-message.type-c { background: linear-gradient(135deg, #F9A825, #F57F17); }\n\n \/* ===== CTA ===== *\/\n .cta {\n margin-top: 24px;\n background: linear-gradient(135deg, #E8F5E9, var(--primary-pale));\n border-radius: var(--radius-lg);\n padding: 26px 22px;\n border: 2px solid var(--primary-light);\n text-align: center;\n }\n .cta-emoji { font-size: 36px; margin-bottom: 10px; }\n .cta-title { font-size: 17px; font-weight: 700; color: var(--primary-dark); margin-bottom: 14px; }\n .cta-text { font-size: 14px; color: var(--text-medium); line-height: 1.8; margin-bottom: 18px; text-align: left; }\n .cta-text strong { color: var(--primary-dark); }\n\n .cta-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }\n .cta-chk {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--white);\n padding: 11px 14px;\n border-radius: var(--radius-sm);\n font-size: 14px;\n font-weight: 600;\n color: var(--text-dark);\n }\n .cta-chk-ico {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px; height: 22px;\n background: var(--primary);\n color: var(--white);\n border-radius: 50%;\n font-size: 11px;\n flex-shrink: 0;\n }\n\n .btn-cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n background: linear-gradient(135deg, var(--cta-orange), var(--cta-orange-dark));\n color: var(--white);\n text-decoration: none;\n font-size: 16px;\n font-weight: 700;\n padding: 17px 28px;\n border-radius: 50px;\n box-shadow: 0 4px 0 #BF360C, 0 6px 16px rgba(255,109,0,0.25);\n transition: all 0.2s cubic-bezier(0.4,0,0.2,1);\n position: relative;\n overflow: hidden;\n }\n .btn-cta::after {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);\n animation: shimmer 2.5s infinite;\n }\n .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #BF360C, 0 10px 24px rgba(255,109,0,0.35); }\n .btn-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #BF360C; }\n\n .cta-note { margin-top: 10px; font-size: 12px; color: var(--text-light); }\n\n \/* ===== \u30ea\u30c8\u30e9\u30a4 ===== *\/\n .btn-retry {\n display: block;\n width: 100%;\n margin-top: 14px;\n padding: 13px;\n background: var(--white);\n border: 2px solid var(--primary-light);\n border-radius: var(--radius-sm);\n color: var(--primary);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-family: inherit;\n }\n .btn-retry:hover { background: var(--primary-pale); border-color: var(--primary); }\n\n \/* ===== \u30d5\u30c3\u30bf\u30fc ===== *\/\n .footer {\n text-align: center;\n padding: 14px;\n border-top: 1px solid var(--primary-pale);\n position: relative; z-index: 1;\n }\n .footer-logo { font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: 0.1em; }\n\n \/* ===== \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 ===== *\/\n \n \/* \u30e2\u30d0\u30a4\u30eb\uff08\u301c480px\uff09 *\/\n @media (max-width: 480px) {\n body { padding: 0; }\n .app { border-radius: 0; border-left: none; border-right: none; min-height: 100vh; max-width: 100%; }\n .header { padding: 22px 16px 18px; }\n .content { padding: 0 16px 24px; }\n .mascot { font-size: 44px; }\n .cta { padding: 22px 18px; }\n }\n\n \/* \u30bf\u30d6\u30ec\u30c3\u30c8\uff08481px\u301c1023px\uff09 *\/\n @media (min-width: 481px) and (max-width: 1023px) {\n body { padding: 24px; }\n .app { max-width: 600px; }\n .header { padding: 32px 28px 24px; }\n .content { padding: 0 28px 32px; }\n .main-title { font-size: 28px; }\n .q-text { font-size: 18px; }\n .opt-btn { padding: 18px 20px; font-size: 16px; }\n }\n\n \/* PC\uff081024px\u301c\uff09 *\/\n @media (min-width: 1024px) {\n body {\n padding: 40px;\n align-items: center;\n min-height: 100vh;\n }\n\n .app {\n max-width: 1600px;\n border-radius: var(--radius-xl);\n }\n\n .app::before {\n height: 300px;\n }\n\n .header {\n padding: 48px 60px 36px;\n }\n\n .mascot { font-size: 72px; }\n\n .header-badge { font-size: 14px; padding: 8px 20px; }\n\n .main-title {\n font-size: 36px;\n margin-bottom: 12px;\n }\n\n .sub-title { font-size: 18px; }\n\n .content {\n padding: 0 60px 48px;\n }\n\n \/* \u30b9\u30bf\u30fc\u30c8\u753b\u9762 PC *\/\n .start-screen { padding: 32px 0; }\n\n .start-desc {\n font-size: 18px;\n max-width: 600px;\n margin: 0 auto 28px;\n }\n\n .start-features { gap: 16px; margin-bottom: 36px; }\n\n .feature-tag {\n font-size: 14px;\n padding: 10px 20px;\n }\n\n .btn-start {\n font-size: 20px;\n padding: 20px 48px;\n max-width: 360px;\n }\n\n .start-note { font-size: 14px; margin-top: 20px; }\n\n \/* \u8cea\u554f\u753b\u9762 PC - 2\u30ab\u30e9\u30e0 *\/\n .quiz-area .pc-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n align-items: start;\n }\n\n .progress-area {\n grid-column: 1 \/ -1;\n max-width: 800px;\n margin: 0 auto 32px;\n }\n\n .progress-info { margin-bottom: 12px; }\n .progress-step, .progress-pct { font-size: 15px; }\n .progress-track { height: 12px; }\n\n .q-box {\n padding: 28px 32px;\n margin-bottom: 0;\n }\n\n .q-box::after {\n display: none;\n }\n\n .q-num {\n min-width: 48px;\n height: 40px;\n font-size: 15px;\n margin-bottom: 16px;\n }\n\n .q-text {\n font-size: 22px;\n line-height: 1.7;\n }\n\n .opts { gap: 14px; }\n\n .opt-btn {\n padding: 20px 24px;\n font-size: 17px;\n border-radius: var(--radius-md);\n }\n\n .opt-key {\n width: 36px;\n height: 36px;\n font-size: 15px;\n }\n\n \/* \u7d50\u679c\u753b\u9762 PC - 2\u30ab\u30e9\u30e0 *\/\n .result-card {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n align-items: start;\n }\n\n .result-top {\n grid-column: 1 \/ -1;\n padding: 40px 48px;\n border-radius: var(--radius-lg);\n margin-bottom: 0;\n }\n\n .result-badge { font-size: 15px; padding: 8px 20px; }\n .result-icon { font-size: 80px; }\n .result-type { font-size: 36px; }\n\n .result-body {\n padding: 32px;\n height: 100%;\n }\n\n .r-section { margin-bottom: 24px; }\n .r-section-title { font-size: 16px; margin-bottom: 12px; }\n .r-section-text { font-size: 16px; }\n .r-job-tag { font-size: 15px; padding: 8px 18px; }\n .r-message { font-size: 18px; padding: 18px 24px; }\n\n .cta {\n padding: 36px 32px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .cta-emoji { font-size: 48px; }\n .cta-title { font-size: 20px; margin-bottom: 18px; }\n .cta-text { font-size: 16px; margin-bottom: 24px; }\n .cta-checks { gap: 12px; margin-bottom: 28px; }\n .cta-chk { padding: 14px 18px; font-size: 15px; }\n .cta-chk-ico { width: 26px; height: 26px; font-size: 13px; }\n .btn-cta { font-size: 18px; padding: 20px 36px; }\n .cta-note { font-size: 14px; }\n\n .btn-retry {\n grid-column: 1 \/ -1;\n max-width: 400px;\n margin: 0 auto;\n padding: 16px;\n font-size: 16px;\n }\n\n .footer { padding: 20px; }\n .footer-logo { font-size: 16px; }\n }\n\n \/* \u5927\u578bPC\uff081400px\u301c\uff09 *\/\n @media (min-width: 1400px) {\n .app { max-width: 1600px; }\n \n .header { padding: 56px 80px 44px; }\n .content { padding: 0 80px 56px; }\n \n .main-title { font-size: 42px; }\n .sub-title { font-size: 20px; }\n \n .quiz-area .pc-layout { gap: 64px; }\n .result-card { gap: 48px; }\n \n .q-text { font-size: 26px; }\n .opt-btn { padding: 24px 28px; font-size: 18px; }\n }\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }\n .hidden { display: none !important; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"app\">\n <header class=\"header\">\n <div class=\"mascot\">\ud83d\udc25<\/div>\n <div class=\"header-badge\">3\u5206\u3067\u30b5\u30af\u30c3\u3068\u8a3a\u65ad<\/div>\n <h1 class=\"main-title\">\u81ea\u5206\u306b\u5411\u3044\u3066\u3044\u308b<br><span class=\"highlight\">Web\u306e\u304a\u4ed5\u4e8b<\/span>\u8a3a\u65ad<\/h1>\n <p class=\"sub-title\">\u526f\u696d\uff1f\u8ee2\u8077\uff1f\u30ea\u30b9\u30ad\u30ea\u30f3\u30b0\uff1f<br>\u3042\u306a\u305f\u306e\u6700\u9069\u30eb\u30fc\u30c8\u304c\u898b\u3064\u304b\u308b<\/p>\n <\/header>\n\n <main class=\"content\">\n \n <section id=\"js-start\" class=\"start-screen\">\n <p class=\"start-desc\">\n \u300cWeb\u306e\u4ed5\u4e8b\u3063\u3066\u6c17\u306b\u306a\u308b\u3051\u3069\u3001\u4f55\u304b\u3089\u59cb\u3081\u308c\u3070\uff1f\u300d<br>\n \u4eca\u306e\u72b6\u6cc1\u3084\u6c17\u6301\u3061\u306b\u8fd1\u3044\u3082\u306e\u3092\u9078\u3076\u3060\u3051\u3067\u3001<br>\n <strong>\u3042\u306a\u305f\u306b\u3074\u3063\u305f\u308a\u306e\u30eb\u30fc\u30c8<\/strong>\u304c\u898b\u3064\u304b\u308a\u307e\u3059\u3002\n <\/p>\n <div class=\"start-features\">\n <span class=\"feature-tag\">\ud83d\udcdd \u516810\u554f<\/span>\n <span class=\"feature-tag\">\u23f1 \u7d043\u5206<\/span>\n <span class=\"feature-tag\">\ud83c\udfaf \u6700\u9069\u30eb\u30fc\u30c8\u767a\u898b<\/span>\n <\/div>\n <button class=\"btn-start\" id=\"js-btn-start\">\u8a3a\u65ad\u3092\u30b9\u30bf\u30fc\u30c8\u3059\u308b \u2192<\/button>\n <p class=\"start-note\">\u203b \u767b\u9332\u4e0d\u8981\u30fb\u3059\u3050\u306b\u7d50\u679c\u304c\u308f\u304b\u308a\u307e\u3059<\/p>\n <\/section>\n\n \n <section id=\"js-quiz\" class=\"quiz-area\">\n <div class=\"pc-layout\">\n <div class=\"progress-area\">\n <div class=\"progress-info\">\n <span class=\"progress-step\" id=\"js-pStep\">Q1 \/ 10<\/span>\n <span class=\"progress-pct\" id=\"js-pPct\">10%<\/span>\n <\/div>\n <div class=\"progress-track\">\n <div class=\"progress-fill\" id=\"js-pFill\" style=\"width:10%\"><\/div>\n <\/div>\n <\/div>\n <div class=\"pc-left\" id=\"js-qBox\"><\/div>\n <div class=\"pc-right\" id=\"js-qOpts\"><\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"js-result\" class=\"result-area\">\n <div class=\"result-card\">\n <div class=\"result-top\" id=\"js-rTop\">\n <span class=\"result-badge\" id=\"js-rBadge\">\ud83c\udf89 \u3042\u306a\u305f\u306e\u8a3a\u65ad\u7d50\u679c<\/span>\n <span class=\"result-icon\" id=\"js-rIcon\"><\/span>\n <h2 class=\"result-type\" id=\"js-rType\"><\/h2>\n <\/div>\n\n <div class=\"result-body\" id=\"js-rBody\">\n <div class=\"r-section\">\n <h3 class=\"r-section-title\">\u2728 \u3042\u306a\u305f\u306e\u7279\u5fb4<\/h3>\n <p class=\"r-section-text\" id=\"js-rFeatures\"><\/p>\n <\/div>\n <div class=\"r-section\">\n <h3 class=\"r-section-title\">\ud83d\udcbc \u5411\u3044\u3066\u3044\u308b\u8077\u7a2e<\/h3>\n <div class=\"r-jobs\" id=\"js-rJobs\"><\/div>\n <\/div>\n <div class=\"r-section\">\n <h3 class=\"r-section-title\">\ud83d\udca1 \u304a\u3059\u3059\u3081\u306e\u7406\u7531<\/h3>\n <p class=\"r-section-text\" id=\"js-rReason\"><\/p>\n <\/div>\n <div class=\"r-message\" id=\"js-rMsg\"><\/div>\n <\/div>\n\n <div class=\"cta\">\n <div class=\"cta-emoji\">\ud83c\udf31<\/div>\n <h3 class=\"cta-title\">\u8a3a\u65ad\u3092\u7d42\u3048\u305f\u3042\u306a\u305f\u3078<\/h3>\n <p class=\"cta-text\" id=\"js-ctaText\"><\/p>\n <div class=\"cta-checks\" id=\"js-ctaChecks\"><\/div>\n <a href=\"#\" class=\"btn-cta\" id=\"js-ctaBtn\" target=\"_blank\" rel=\"noopener\"><\/a>\n <p class=\"cta-note\" id=\"js-ctaNote\">\u203b \u53c2\u52a0\u7121\u6599\u30fb\u30aa\u30f3\u30e9\u30a4\u30f3\u958b\u50ac<\/p>\n <\/div>\n\n <button class=\"btn-retry\" id=\"js-btn-retry\">\ud83d\udd04 \u3082\u3046\u4e00\u5ea6\u8a3a\u65ad\u3059\u308b<\/button>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"footer\"><span class=\"footer-logo\">DX UP<\/span><\/footer>\n<\/div>\n\n<script>\n\/* ========== \u30c7\u30fc\u30bf ========== *\/\nconst QS = [\n { q:\"\u4eca\u306e\u4ed5\u4e8b\u306b\u5bfe\u3059\u308b\u6c17\u6301\u3061\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u306a\u3093\u3068\u306a\u304f\u4e0d\u6e80\u3060\u3051\u3069\u3001\u8f9e\u3081\u308b\u307b\u3069\u3058\u3083\u306a\u3044\"},\n {k:\"B\",t:\"\u3067\u304d\u308c\u3070\u65e9\u3081\u306b\u8f9e\u3081\u305f\u3044\"},\n {k:\"C\",t:\"\u4e0d\u6e80\u3082\u3042\u308b\u3051\u3069\u3001\u5c06\u6765\u3082\u4e0d\u5b89\"}\n ]},\n { q:\"\u5b66\u7fd2\u306b\u4f7f\u3048\u308b\u6642\u9593\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u5e73\u65e5\u306e\u591c\u3084\u571f\u65e5\u3092\u6d3b\u7528\u3067\u304d\u308b\"},\n {k:\"B\",t:\"\u30d5\u30eb\u30bf\u30a4\u30e0\u3067\u96c6\u4e2d\u3057\u305f\u3044\"},\n {k:\"C\",t:\"\u307e\u3060\u3088\u304f\u308f\u304b\u3089\u306a\u3044\"}\n ]},\n { q:\"\u53ce\u5165\u304c\u4e00\u6642\u7684\u306b\u4e0b\u304c\u308b\u306e\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u306a\u308b\u3079\u304f\u907f\u3051\u305f\u3044\"},\n {k:\"B\",t:\"\u3042\u308b\u7a0b\u5ea6\u306f\u899a\u609f\u3057\u3066\u3044\u308b\"},\n {k:\"C\",t:\"\u3067\u304d\u308c\u3070\u907f\u3051\u305f\u3044\u3051\u3069\u3001\u691c\u8a0e\u4e2d\"}\n ]},\n { q:\"\u4eca\u306e\u8caf\u91d1\u30fb\u751f\u6d3b\u306e\u4f59\u88d5\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u305d\u3053\u305d\u3053\u4f59\u88d5\u304c\u3042\u308b\"},\n {k:\"B\",t:\"\u6b63\u76f4\u3042\u307e\u308a\u306a\u3044\"},\n {k:\"C\",t:\"\u306a\u3093\u3068\u3082\u8a00\u3048\u306a\u3044\"}\n ]},\n { q:\"Web\u306b\u5bfe\u3059\u308b\u8208\u5473\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u526f\u696d\u3084\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u304c\u76ee\u7684\"},\n {k:\"B\",t:\"\u8ee2\u8077\u30fb\u518d\u5c31\u8077\u304c\u76ee\u7684\"},\n {k:\"C\",t:\"\u306a\u3093\u3068\u306a\u304f\u53ef\u80fd\u6027\u3092\u611f\u3058\u3066\u3044\u308b\"}\n ]},\n { q:\"\u7406\u60f3\u306e\u50cd\u304d\u65b9\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u672c\u696d\uff0b\u30b9\u30ad\u30eb\u3067\u53ce\u5165\u30a2\u30c3\u30d7\u3057\u305f\u3044\"},\n {k:\"B\",t:\"\u65b0\u3057\u3044\u4ed5\u4e8b\u306b\u30ac\u30e9\u30c3\u3068\u5207\u308a\u66ff\u3048\u305f\u3044\"},\n {k:\"C\",t:\"\u307e\u305a\u306f\u8a71\u3092\u805e\u3044\u3066\u304b\u3089\u6c7a\u3081\u305f\u3044\"}\n ]},\n { q:\"\u5b66\u7fd2\u306e\u9032\u3081\u65b9\u306f\u3069\u3063\u3061\u304c\u5408\u3044\u305d\u3046\uff1f\", opts:[\n {k:\"A\",t:\"\u7a7a\u3044\u305f\u6642\u9593\u306b\u30b3\u30c4\u30b3\u30c4\u9032\u3081\u305f\u3044\"},\n {k:\"B\",t:\"\u74b0\u5883\u3092\u5909\u3048\u3066\u4e00\u6c17\u306b\u5b66\u3073\u305f\u3044\"},\n {k:\"C\",t:\"\u30b5\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u306a\u304c\u3089\u9032\u3081\u305f\u3044\"}\n ]},\n { q:\"\u4eca\u3059\u3050\u6c42\u3081\u3066\u3044\u308b\u3082\u306e\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u5c06\u6765\u306e\u9078\u629e\u80a2\u3092\u5897\u3084\u3057\u305f\u3044\"},\n {k:\"B\",t:\"\u4ed5\u4e8b\u305d\u306e\u3082\u306e\u3092\u5909\u3048\u305f\u3044\"},\n {k:\"C\",t:\"\u307e\u305a\u306f\u60c5\u5831\u53ce\u96c6\u3057\u305f\u3044\"}\n ]},\n { q:\"\u81ea\u5df1\u6295\u8cc7\u306b\u304a\u91d1\u3092\u304b\u3051\u308b\u306a\u3089\uff1f\", opts:[\n {k:\"A\",t:\"\u6708\u306b\u6570\u4e07\u5186\u304f\u3089\u3044\u306a\u3089OK\"},\n {k:\"B\",t:\"\u516c\u7684\u306a\u652f\u63f4\u304c\u3042\u308b\u3068\u52a9\u304b\u308b\"},\n {k:\"C\",t:\"\u307e\u305a\u306f\u7121\u6599\u3067\u59cb\u3081\u305f\u3044\"}\n ]},\n { q:\"\u3042\u306a\u305f\u306e\u672c\u97f3\u306b\u8fd1\u3044\u306e\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u8f9e\u3081\u305a\u306b\u30b9\u30ad\u30eb\u3092\u8eab\u306b\u3064\u3051\u305f\u3044\"},\n {k:\"B\",t:\"\u8f9e\u3081\u3066\u3067\u3082\u4eba\u751f\u3092\u5909\u3048\u305f\u3044\"},\n {k:\"C\",t:\"\u307e\u3060\u6c7a\u3081\u304d\u308c\u3066\u3044\u306a\u3044\"}\n ]}\n];\n\nconst RS = {\n A: {\n icon:\"\ud83d\udfe2\",\n type:\"\u50cd\u304d\u306a\u304c\u3089\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u578b\",\n cls:\"type-a\",\n features:\"\u4eca\u306e\u4ed5\u4e8b\u3092\u7d9a\u3051\u306a\u304c\u3089\u3001\u5c06\u6765\u306b\u5099\u3048\u305f\u3044\u30bf\u30a4\u30d7\u3002\\n\u5b89\u5b9a\u3092\u5927\u5207\u306b\u3057\u3064\u3064\u3001\u7740\u5b9f\u306b\u30b9\u30ad\u30eb\u3092\u7a4d\u307f\u4e0a\u3052\u3066\u3044\u3051\u307e\u3059\u3002\",\n jobs:[\"Web\u30de\u30fc\u30b1\u30bf\u30fc\",\"SEO\u30e9\u30a4\u30bf\u30fc\",\"Web\u30c7\u30a3\u30ec\u30af\u30bf\u30fc\u88dc\u4f50\"],\n reason:\"\u672c\u696d\u3092\u6301\u3061\u306a\u304c\u3089\u30b9\u30ad\u30eb\u3092\u78e8\u304f\u3053\u3068\u3067\u3001\u30ad\u30e3\u30ea\u30a2\u306e\u9078\u629e\u80a2\u3092\u7740\u5b9f\u306b\u5e83\u3052\u3066\u3044\u3051\u307e\u3059\u3002\u30ea\u30b9\u30af\u3092\u6291\u3048\u306a\u304c\u3089\u6210\u9577\u3067\u304d\u308b\u306e\u304c\u6700\u5927\u306e\u5f37\u307f\u3067\u3059\u3002\",\n message:\"\ud83d\udc49 \u5b89\u5b9a\u00d7\u6210\u9577\u306e\u4e21\u53d6\u308a\u304c\u3067\u304d\u308b\u4eba\",\n cta:\"\u50cd\u304d\u306a\u304c\u3089\u5b66\u3079\u308b\u30ea\u30b9\u30ad\u30ea\u30f3\u30b0\u30b9\u30af\u30fc\u30eb\u306e<strong>\u7121\u6599\u30bb\u30df\u30ca\u30fc<\/strong>\u3067\u3001\u3042\u306a\u305f\u306b\u5408\u3063\u305f\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u306e\u65b9\u6cd5\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u307f\u307e\u305b\u3093\u304b\uff1f\",\n ctaBtn:\"\u7121\u6599\u30bb\u30df\u30ca\u30fc\u306b\u53c2\u52a0\u3059\u308b \u2192\",\n ctaLink:\"https:\/\/tinyurl.com\/dxupseminar\",\n checks:[\"\u672a\u7d4c\u9a13OK\",\"\u53c2\u52a0\u7121\u6599\u30fb\u30aa\u30f3\u30e9\u30a4\u30f3\u958b\u50ac\",\"\u3042\u306a\u305f\u306b\u5408\u3063\u305f\u5b66\u3073\u65b9\u304c\u898b\u3048\u308b\"]\n },\n B: {\n icon:\"\ud83d\udd35\",\n type:\"\u5b66\u7fd2\u306b\u96c6\u4e2d\u30fb\u8ee2\u8077\u578b\",\n cls:\"type-b\",\n features:\"\u74b0\u5883\u3092\u5909\u3048\u3066\u3001\u4eba\u751f\u3092\u5927\u304d\u304f\u52d5\u304b\u3057\u305f\u3044\u30bf\u30a4\u30d7\u3002\\n\u96c6\u4e2d\u3057\u3066\u5b66\u3076\u3053\u3068\u3067\u4e00\u6c17\u306b\u30ad\u30e3\u30ea\u30a2\u30c1\u30a7\u30f3\u30b8\u3092\u76ee\u6307\u305b\u307e\u3059\u3002\",\n jobs:[\"Web\u30c7\u30b6\u30a4\u30ca\u30fc\",\"\u30a8\u30f3\u30b8\u30cb\u30a2\",\"\u52d5\u753b\u7de8\u96c6\"],\n reason:\"\u96c6\u4e2d\u7684\u306b\u30b9\u30ad\u30eb\u3092\u8eab\u306b\u3064\u3051\u308b\u3053\u3068\u3067\u3001\u77ed\u671f\u9593\u3067\u306e\u30ad\u30e3\u30ea\u30a2\u30c1\u30a7\u30f3\u30b8\u304c\u53ef\u80fd\u3002\u516c\u7684\u306a\u8077\u696d\u8a13\u7df4\u306a\u3089\u3001\u53d7\u8b1b\u6599\u7121\u6599\u30676\u30f6\u6708\u9593\u3057\u3063\u304b\u308a\u5b66\u3079\u307e\u3059\u3002\",\n message:\"\ud83d\udc49 \u899a\u609f\u304c\u6210\u9577\u306e\u30a8\u30f3\u30b8\u30f3\u306b\u306a\u308b\u4eba\",\n cta:\"\u30b9\u30ad\u30eb\u3092\u96c6\u4e2d\u7684\u306b\u8eab\u306b\u3064\u3051\u305f\u3044\u3042\u306a\u305f\u306b\u306f\u3001\u516c\u7684\u306a\u8077\u696d\u8a13\u7df4\u304c\u304a\u3059\u3059\u3081\u3002\u307e\u305a\u306fLP\u3092\u307f\u3066\u307f\u3066\u304f\u3060\u3055\u3044^^\",\n ctaBtn:\"\u516c\u7684\u5236\u5ea6\u3067\u306e\u7121\u6599\u306e\u5b66\u3073\u3068\u306f \u2192\",\n ctaLink:\"https:\/\/www.webmarketing.dxup.jp\/\",\n checks:[\"\u672a\u7d4c\u9a13OK\",\"\u3053\u306e\u4e00\u6b69\u304c\u672a\u6765\u306e\u4e00\u6b69\u306b\u2606\u5f61\",\"\u3042\u306a\u305f\u306b\u5408\u3063\u305f\u5b66\u3073\u65b9\u304c\u898b\u3048\u308b\"]\n },\n C: {\n icon:\"\ud83d\udfe1\",\n type:\"\u60c5\u5831\u53ce\u96c6\u30fb\u3058\u3063\u304f\u308a\u691c\u8a0e\u578b\",\n cls:\"type-c\",\n features:\"\u53ef\u80fd\u6027\u306f\u611f\u3058\u3066\u3044\u308b\u3051\u3069\u3001\u307e\u3060\u8ff7\u3063\u3066\u3044\u308b\u6bb5\u968e\u3002\\n\u307e\u305a\u306f\u5168\u4f53\u50cf\u3092\u77e5\u3063\u3066\u304b\u3089\u52d5\u304d\u305f\u3044\u614e\u91cd\u6d3e\u3067\u3059\u3002\",\n jobs:[\"Web\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\",\"SNS\u904b\u7528\",\"\u751f\u6210AI\u6d3b\u7528\"],\n reason:\"\u3057\u3063\u304b\u308a\u60c5\u5831\u3092\u96c6\u3081\u3066\u304b\u3089\u52d5\u3051\u308b\u5805\u5b9f\u3055\u304c\u5f37\u307f\u3002\u307e\u305a\u306f\u300cWeb\u306e\u4ed5\u4e8b\u3063\u3066\u5b9f\u969b\u3069\u3046\u306a\u306e\uff1f\u300d\u3092\u77e5\u308b\u3053\u3068\u304b\u3089\u59cb\u3081\u3066\u307f\u307e\u3057\u3087\u3046\u3002\",\n message:\"\ud83d\udc49 \u60c5\u5831\u3092\u96c6\u3081\u3066\u304b\u3089\u52d5\u3051\u308b\u3001\u5805\u5b9f\u306a\u4eba\",\n cta:\"\u307e\u3060\u8ff7\u3063\u3066\u3044\u3066\u3082\u5927\u4e08\u592b\u3002<strong>\u7121\u6599\u30bb\u30df\u30ca\u30fc<\/strong>\u3067\u306f\u300cWeb\u306e\u4ed5\u4e8b\u3063\u3066\u5b9f\u969b\u3069\u3046\u306a\u306e\uff1f\u300d\u304c\u308f\u304b\u308a\u307e\u3059\u3002\u307e\u305a\u306f\u6c17\u8efd\u306b\u306e\u305e\u3044\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002\",\n ctaBtn:\"\u7121\u6599\u30bb\u30df\u30ca\u30fc\u306b\u53c2\u52a0\u3059\u308b \u2192\",\n ctaLink:\"https:\/\/tinyurl.com\/dxupseminar\",\n checks:[\"\u672a\u7d4c\u9a13OK\",\"\u53c2\u52a0\u7121\u6599\u30fb\u30aa\u30f3\u30e9\u30a4\u30f3\u958b\u50ac\",\"\u3042\u306a\u305f\u306b\u5408\u3063\u305f\u5b66\u3073\u65b9\u304c\u898b\u3048\u308b\"]\n }\n};\n\n\/* ========== \u72b6\u614b ========== *\/\nlet idx = 0;\nlet sc = {A:0,B:0,C:0};\nlet busy = false;\n\n\/* ========== DOM ========== *\/\nconst $start = document.getElementById('js-start');\nconst $quiz = document.getElementById('js-quiz');\nconst $result = document.getElementById('js-result');\nconst $qBox = document.getElementById('js-qBox');\nconst $qOpts = document.getElementById('js-qOpts');\nconst $pStep = document.getElementById('js-pStep');\nconst $pPct = document.getElementById('js-pPct');\nconst $pFill = document.getElementById('js-pFill');\n\ndocument.getElementById('js-btn-start').addEventListener('click', start);\ndocument.getElementById('js-btn-retry').addEventListener('click', reset);\n\n\/* ========== \u30d5\u30ed\u30fc ========== *\/\nfunction start() {\n $start.classList.add('hidden');\n $quiz.style.display = 'block';\n render();\n}\n\nfunction render() {\n if (idx >= QS.length) { showResult(); return; }\n\n const q = QS[idx];\n const pct = Math.round(((idx + 1) \/ QS.length) * 100);\n $pStep.textContent = `Q${idx+1} \/ ${QS.length}`;\n $pPct.textContent = `${pct}%`;\n $pFill.style.width = `${pct}%`;\n\n \/\/ \u8cea\u554f\u30dc\u30c3\u30af\u30b9\n $qBox.innerHTML = `\n <div class=\"q-card\" id=\"js-card-box\">\n <div class=\"q-box\">\n <span class=\"q-num\">Q${idx+1}<\/span>\n <p class=\"q-text\">${q.q}<\/p>\n <\/div>\n <\/div>\n `;\n\n \/\/ \u9078\u629e\u80a2\n $qOpts.innerHTML = `\n <div class=\"q-card\" id=\"js-card-opts\">\n <div class=\"opts\">\n ${q.opts.map((o,i) => `\n <button class=\"opt-btn\" data-key=\"${o.k}\" style=\"animation: optSlide 0.3s ${i*0.07}s both\">\n <span class=\"opt-key\">${o.k}<\/span>\n <span class=\"opt-label\">${o.t}<\/span>\n <\/button>\n `).join('')}\n <\/div>\n <\/div>\n `;\n\n \/* CSS for staggered slide *\/\n if (!document.getElementById('opt-anim')) {\n const s = document.createElement('style');\n s.id = 'opt-anim';\n s.textContent = `@keyframes optSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}`;\n document.head.appendChild(s);\n }\n\n requestAnimationFrame(() => {\n document.getElementById('js-card-box').classList.add('enter');\n document.getElementById('js-card-opts').classList.add('enter');\n });\n\n \/* bind *\/\n $qOpts.querySelectorAll('.opt-btn').forEach(btn => {\n btn.addEventListener('click', () => pick(btn));\n });\n}\n\nfunction pick(btn) {\n if (busy) return;\n busy = true;\n\n const key = btn.dataset.key;\n sc[key]++;\n btn.classList.add('picked');\n\n const cardBox = document.getElementById('js-card-box');\n const cardOpts = document.getElementById('js-card-opts');\n \n setTimeout(() => {\n cardBox.classList.remove('enter');\n cardBox.classList.add('exit');\n cardOpts.classList.remove('enter');\n cardOpts.classList.add('exit');\n setTimeout(() => { idx++; busy = false; render(); }, 280);\n }, 180);\n}\n\nfunction showResult() {\n $quiz.style.display = 'none';\n $result.style.display = 'block';\n\n let max = 0, rk = 'A';\n for (const k in sc) { if (sc[k] > max) { max = sc[k]; rk = k; } }\n\n const d = RS[rk];\n\n document.getElementById('js-rTop').className = 'result-top ' + d.cls;\n document.getElementById('js-rIcon').textContent = d.icon;\n document.getElementById('js-rType').textContent = d.type;\n document.getElementById('js-rBadge').className = 'result-badge';\n document.getElementById('js-rFeatures').innerHTML = d.features.replace(\/\\n\/g,'<br>');\n document.getElementById('js-rReason').textContent = d.reason;\n\n const msgEl = document.getElementById('js-rMsg');\n msgEl.className = 'r-message ' + d.cls;\n msgEl.textContent = d.message;\n\n const jobsEl = document.getElementById('js-rJobs');\n jobsEl.className = 'r-jobs ' + d.cls;\n jobsEl.innerHTML = d.jobs.map(j => `<span class=\"r-job-tag\">${j}<\/span>`).join('');\n\n document.getElementById('js-ctaText').innerHTML = d.cta;\n\n \/\/ CTA\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8\u3092\u52d5\u7684\u306b\u751f\u6210\n const checksEl = document.getElementById('js-ctaChecks');\n checksEl.innerHTML = d.checks.map(c => `<div class=\"cta-chk\"><span class=\"cta-chk-ico\">\u2713<\/span><span>${c}<\/span><\/div>`).join('');\n\n \/\/ CTA\u30dc\u30bf\u30f3\u3092\u52d5\u7684\u306b\u8a2d\u5b9a\n const ctaBtnEl = document.getElementById('js-ctaBtn');\n ctaBtnEl.href = d.ctaLink;\n ctaBtnEl.textContent = d.ctaBtn;\n\n \/\/ Result B\u306e\u5834\u5408\u306f\u6ce8\u91c8\u3092\u975e\u8868\u793a\n const ctaNoteEl = document.getElementById('js-ctaNote');\n ctaNoteEl.style.display = (rk === 'B') ? 'none' : 'block';\n\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction reset() {\n idx = 0;\n sc = {A:0,B:0,C:0};\n busy = false;\n $result.style.display = 'none';\n $quiz.style.display = 'none';\n $start.classList.remove('hidden');\n $qBox.innerHTML = '';\n $qOpts.innerHTML = '';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>3\u5206\u3067\u308f\u304b\u308b\uff5c\u81ea\u5206\u306b\u5411\u3044\u3066\u3044\u308bWeb\u306e\u304a\u4ed5\u4e8b\u8a3a\u65ad | DX UP \ud83d\udc25 3\u5206\u3067\u30b5\u30af\u30c3\u3068\u8a3a\u65ad \u81ea\u5206\u306b\u5411\u3044\u3066\u3044\u308bWeb\u306e\u304a\u4ed5\u4e8b\u8a3a\u65ad \u526f\u696d\uff1f\u8ee2\u8077\uff1f\u30ea\u30b9\u30ad\u30ea\u30f3\u30b0\uff1f\u3042\u306a\u305f\u306e\u6700\u9069\u30eb\u30fc\u30c8\u304c\u898b\u3064\u304b\u308b \u300cWeb\u306e\u4ed5\u4e8b\u3063\u3066\u6c17\u306b\u306a\u308b\u3051\u3069\u3001\u4f55\u304b\u3089 […]<\/p>\n","protected":false},"author":9,"featured_media":1075,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[65],"tags":[20,13,17,10,16],"_links":{"self":[{"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/posts\/1064"}],"collection":[{"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/comments?post=1064"}],"version-history":[{"count":3,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/posts\/1064\/revisions"}],"predecessor-version":[{"id":1077,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/posts\/1064\/revisions\/1077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/media\/1075"}],"wp:attachment":[{"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/media?parent=1064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/categories?post=1064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/tags?post=1064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1064,"date":"2026-02-06T16:29:31","date_gmt":"2026-02-06T07:29:31","guid":{"rendered":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/?p=1064"},"modified":"2026-03-16T15:17:00","modified_gmt":"2026-03-16T06:17:00","slug":"web%e3%81%ae%e3%81%8a%e4%bb%95%e4%ba%8b%e8%a8%ba%e6%96%ad","status":"publish","type":"post","link":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/web%e3%81%ae%e3%81%8a%e4%bb%95%e4%ba%8b%e8%a8%ba%e6%96%ad\/","title":{"rendered":"Web\u306e\u304a\u4ed5\u4e8b\u8a3a\u65ad"},"content":{"rendered":"\n\n\n\n \n \n 3\u5206\u3067\u308f\u304b\u308b\uff5c\u81ea\u5206\u306b\u5411\u3044\u3066\u3044\u308bWeb\u306e\u304a\u4ed5\u4e8b\u8a3a\u65ad | DX UP<\/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=Noto+Sans+JP:wght@400;500;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #009688;\n --primary-light: #4DB6AC;\n --primary-dark: #00796B;\n --primary-pale: #E0F2F1;\n --primary-mist: #F1F9F8;\n --accent: #FFD54F;\n --accent-dark: #FFC107;\n --accent-glow: #FFECB3;\n --text-dark: #263238;\n --text-medium: #546E7A;\n --text-light: #78909C;\n --white: #FFFFFF;\n --bg-cream: #FAFAFA;\n --cta-orange: #FF6D00;\n --cta-orange-dark: #E65100;\n --result-a: #009688;\n --result-a-light: #E0F2F1;\n --result-b: #1976D2;\n --result-b-light: #E3F2FD;\n --result-c: #F9A825;\n --result-c-light: #FFF8E1;\n --shadow-soft: 0 4px 20px rgba(0, 150, 136, 0.10);\n --shadow-medium: 0 8px 30px rgba(0, 150, 136, 0.14);\n --shadow-card: 0 2px 12px rgba(0, 150, 136, 0.08);\n --radius-sm: 12px;\n --radius-md: 16px;\n --radius-lg: 24px;\n --radius-xl: 32px;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;\n background: linear-gradient(160deg, #E0F2F1 0%, #B2DFDB 40%, #E0F2F1 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding: 16px;\n color: var(--text-dark);\n line-height: 1.7;\n }\n\n .app {\n width: 100%;\n max-width: 440px;\n background: var(--white);\n border-radius: var(--radius-xl);\n box-shadow: var(--shadow-medium);\n overflow: hidden;\n border: 3px solid var(--primary);\n position: relative;\n }\n\n .app::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 240px;\n background: linear-gradient(180deg, var(--primary-pale) 0%, transparent 100%);\n pointer-events: none;\n z-index: 0;\n }\n\n \/* PC\u75282\u30ab\u30e9\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8 *\/\n .pc-layout {\n display: block;\n }\n\n .pc-left, .pc-right {\n width: 100%;\n }\n\n \/* ===== \u30d8\u30c3\u30c0\u30fc ===== *\/\n .header {\n position: relative; z-index: 1;\n text-align: center;\n padding: 28px 20px 20px;\n }\n\n .mascot {\n font-size: 52px;\n display: inline-block;\n animation: mascotFloat 3s ease-in-out infinite;\n filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));\n }\n @keyframes mascotFloat {\n 0%, 100% { transform: translateY(0) rotate(-2deg); }\n 50% { transform: translateY(-7px) rotate(2deg); }\n }\n\n .header-badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background: linear-gradient(135deg, var(--accent), var(--accent-dark));\n color: var(--text-dark);\n font-size: 12px;\n font-weight: 700;\n padding: 5px 14px;\n border-radius: 20px;\n margin: 14px 0 10px;\n box-shadow: 0 2px 8px rgba(255,193,7,0.25);\n }\n .header-badge::before, .header-badge::after { content: '\u2726'; font-size: 9px; }\n\n .main-title {\n font-size: clamp(20px, 5.5vw, 26px);\n font-weight: 900;\n color: var(--primary-dark);\n line-height: 1.45;\n margin-bottom: 8px;\n }\n .main-title .highlight {\n background: linear-gradient(transparent 60%, var(--accent-glow) 60%);\n }\n\n .sub-title {\n font-size: clamp(12px, 3.5vw, 14px);\n color: var(--text-medium);\n font-weight: 500;\n }\n\n \/* ===== \u30b3\u30f3\u30c6\u30f3\u30c4 ===== *\/\n .content {\n position: relative; z-index: 1;\n padding: 0 20px 28px;\n }\n\n \/* ===== \u30b9\u30bf\u30fc\u30c8\u753b\u9762 ===== *\/\n .start-screen { text-align: center; padding: 12px 0 8px; }\n\n .start-desc {\n font-size: 14px;\n color: var(--text-medium);\n margin-bottom: 20px;\n line-height: 1.8;\n }\n\n .start-features {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-bottom: 24px;\n flex-wrap: wrap;\n }\n\n .feature-tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: var(--primary-pale);\n color: var(--primary-dark);\n font-size: 12px;\n font-weight: 600;\n padding: 7px 13px;\n border-radius: 20px;\n }\n\n .btn-start {\n width: 100%;\n max-width: 280px;\n background: linear-gradient(135deg, var(--accent), var(--accent-dark));\n color: var(--text-dark);\n font-size: 17px;\n font-weight: 700;\n border: none;\n padding: 16px 28px;\n border-radius: 50px;\n cursor: pointer;\n box-shadow: 0 4px 0 #F9A825, 0 6px 16px rgba(255,193,7,0.25);\n transition: all 0.2s cubic-bezier(0.4,0,0.2,1);\n position: relative;\n overflow: hidden;\n }\n .btn-start::after {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n animation: shimmer 2.5s infinite;\n }\n @keyframes shimmer { 100% { left: 100%; } }\n\n .btn-start:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #F9A825, 0 10px 24px rgba(255,193,7,0.35); }\n .btn-start:active { transform: translateY(2px); box-shadow: 0 2px 0 #F9A825; }\n\n .start-note { margin-top: 14px; font-size: 12px; color: var(--text-light); }\n\n \/* ===== \u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc ===== *\/\n .progress-area { margin-bottom: 22px; }\n\n .progress-info {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n .progress-step { font-size: 13px; font-weight: 700; color: var(--primary); }\n .progress-pct { font-size: 13px; font-weight: 600; color: var(--primary-dark); }\n\n .progress-track {\n height: 10px;\n background: var(--primary-pale);\n border-radius: 10px;\n overflow: hidden;\n }\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--primary-light), var(--primary));\n border-radius: 10px;\n transition: width 0.5s cubic-bezier(0.4,0,0.2,1);\n position: relative;\n }\n .progress-fill::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);\n animation: barShine 1.8s infinite;\n }\n @keyframes barShine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n\n \/* ===== \u8cea\u554f\u30ab\u30fc\u30c9 ===== *\/\n .quiz-area { display: none; }\n\n .q-card {\n opacity: 0;\n transform: translateX(24px);\n transition: all 0.35s cubic-bezier(0.4,0,0.2,1);\n }\n .q-card.enter { opacity: 1; transform: translateX(0); }\n .q-card.exit { opacity: 0; transform: translateX(-24px); }\n\n .q-box {\n background: linear-gradient(135deg, var(--primary-pale), #B2DFDB);\n border-radius: var(--radius-md);\n padding: 18px 20px;\n margin-bottom: 18px;\n position: relative;\n }\n .q-box::after {\n content: '';\n position: absolute;\n bottom: -9px; left: 28px;\n border: 10px solid transparent;\n border-top-color: #B2DFDB;\n border-bottom: 0;\n }\n\n .q-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 40px; height: 32px;\n background: var(--primary);\n color: var(--white);\n font-size: 13px;\n font-weight: 700;\n border-radius: 8px;\n padding: 0 10px;\n margin-bottom: 10px;\n }\n\n .q-text {\n font-size: 16px;\n font-weight: 700;\n color: var(--text-dark);\n line-height: 1.6;\n }\n\n \/* ===== \u9078\u629e\u80a2 ===== *\/\n .opts { display: flex; flex-direction: column; gap: 10px; }\n\n .opt-btn {\n display: flex;\n align-items: center;\n gap: 14px;\n width: 100%;\n background: var(--white);\n border: 2px solid #E0E0E0;\n padding: 15px 16px;\n border-radius: var(--radius-sm);\n cursor: pointer;\n font-size: 15px;\n font-weight: 500;\n color: var(--text-dark);\n text-align: left;\n transition: all 0.2s cubic-bezier(0.4,0,0.2,1);\n position: relative;\n overflow: hidden;\n font-family: inherit;\n }\n .opt-btn::before {\n content: '';\n position: absolute; inset: 0;\n background: linear-gradient(135deg, var(--primary-pale), var(--primary-light));\n opacity: 0;\n transition: opacity 0.2s;\n }\n .opt-btn:hover {\n border-color: var(--primary);\n transform: translateY(-2px);\n box-shadow: var(--shadow-card);\n }\n .opt-btn:hover::before { opacity: 0.12; }\n .opt-btn:active { transform: scale(0.98); }\n\n .opt-btn.picked {\n border-color: var(--primary);\n background: var(--primary);\n color: var(--white);\n }\n .opt-btn.picked .opt-key {\n background: var(--white);\n color: var(--primary);\n }\n\n .opt-key {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px; height: 30px;\n background: var(--primary-pale);\n color: var(--primary-dark);\n font-size: 13px;\n font-weight: 700;\n border-radius: 8px;\n flex-shrink: 0;\n position: relative; z-index: 1;\n transition: all 0.2s;\n }\n .opt-btn:hover .opt-key {\n background: var(--primary);\n color: var(--white);\n }\n\n .opt-label { position: relative; z-index: 1; }\n\n \/* ===== \u7d50\u679c\u753b\u9762 ===== *\/\n .result-area { display: none; }\n\n .result-card {\n animation: resultPop 0.6s cubic-bezier(0.4,0,0.2,1);\n }\n @keyframes resultPop {\n from { opacity: 0; transform: scale(0.96) translateY(16px); }\n to { opacity: 1; transform: none; }\n }\n\n .result-top {\n text-align: center;\n padding: 24px 20px 20px;\n border-radius: var(--radius-md);\n margin-bottom: 20px;\n }\n .result-top.type-a { background: linear-gradient(135deg, var(--result-a-light), #B2DFDB); }\n .result-top.type-b { background: linear-gradient(135deg, var(--result-b-light), #BBDEFB); }\n .result-top.type-c { background: linear-gradient(135deg, var(--result-c-light), var(--accent-glow)); }\n\n .result-badge {\n display: inline-block;\n background: rgba(255,255,255,0.7);\n font-size: 13px;\n font-weight: 600;\n padding: 5px 14px;\n border-radius: 20px;\n margin-bottom: 14px;\n }\n .result-top.type-a .result-badge { color: var(--result-a); }\n .result-top.type-b .result-badge { color: var(--result-b); }\n .result-top.type-c .result-badge { color: var(--result-c); }\n\n .result-icon {\n font-size: 56px;\n display: block;\n margin-bottom: 10px;\n animation: iconBounce 0.5s cubic-bezier(0.4,0,0.2,1) 0.3s both;\n }\n @keyframes iconBounce {\n 0% { transform: scale(0); }\n 60% { transform: scale(1.15); }\n 100% { transform: scale(1); }\n }\n\n .result-type {\n font-size: clamp(22px, 6vw, 28px);\n font-weight: 900;\n color: var(--text-dark);\n display: inline-block;\n position: relative;\n }\n .result-type::after {\n content: '';\n position: absolute;\n bottom: 3px; left: -3px; right: -3px;\n height: 10px;\n z-index: -1;\n border-radius: 2px;\n }\n .result-top.type-a .result-type::after { background: rgba(0,150,136,0.18); }\n .result-top.type-b .result-type::after { background: rgba(25,118,210,0.18); }\n .result-top.type-c .result-type::after { background: rgba(249,168,37,0.25); }\n\n .result-body {\n background: var(--bg-cream);\n border-radius: var(--radius-md);\n padding: 22px 20px;\n border: 2px dashed var(--primary-light);\n }\n\n .r-section { margin-bottom: 18px; }\n .r-section:last-child { margin-bottom: 0; }\n\n .r-section-title {\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 14px;\n font-weight: 700;\n color: var(--primary-dark);\n margin-bottom: 8px;\n padding-left: 12px;\n border-left: 4px solid var(--accent);\n }\n\n .r-section-text {\n font-size: 14px;\n color: var(--text-medium);\n line-height: 1.8;\n }\n\n .r-jobs {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 6px;\n }\n .r-job-tag {\n display: inline-block;\n font-size: 13px;\n font-weight: 600;\n padding: 6px 14px;\n border-radius: 20px;\n }\n .type-a .r-job-tag { background: var(--result-a-light); color: var(--result-a); }\n .type-b .r-job-tag { background: var(--result-b-light); color: var(--result-b); }\n .type-c .r-job-tag { background: var(--result-c-light); color: #E65100; }\n\n .r-message {\n text-align: center;\n padding: 14px 18px;\n border-radius: var(--radius-sm);\n font-size: 15px;\n font-weight: 700;\n color: var(--white);\n margin-top: 18px;\n }\n .r-message.type-a { background: linear-gradient(135deg, var(--result-a), var(--primary-dark)); }\n .r-message.type-b { background: linear-gradient(135deg, var(--result-b), #1565C0); }\n .r-message.type-c { background: linear-gradient(135deg, #F9A825, #F57F17); }\n\n \/* ===== CTA ===== *\/\n .cta {\n margin-top: 24px;\n background: linear-gradient(135deg, #E8F5E9, var(--primary-pale));\n border-radius: var(--radius-lg);\n padding: 26px 22px;\n border: 2px solid var(--primary-light);\n text-align: center;\n }\n .cta-emoji { font-size: 36px; margin-bottom: 10px; }\n .cta-title { font-size: 17px; font-weight: 700; color: var(--primary-dark); margin-bottom: 14px; }\n .cta-text { font-size: 14px; color: var(--text-medium); line-height: 1.8; margin-bottom: 18px; text-align: left; }\n .cta-text strong { color: var(--primary-dark); }\n\n .cta-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }\n .cta-chk {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--white);\n padding: 11px 14px;\n border-radius: var(--radius-sm);\n font-size: 14px;\n font-weight: 600;\n color: var(--text-dark);\n }\n .cta-chk-ico {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px; height: 22px;\n background: var(--primary);\n color: var(--white);\n border-radius: 50%;\n font-size: 11px;\n flex-shrink: 0;\n }\n\n .btn-cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n background: linear-gradient(135deg, var(--cta-orange), var(--cta-orange-dark));\n color: var(--white);\n text-decoration: none;\n font-size: 16px;\n font-weight: 700;\n padding: 17px 28px;\n border-radius: 50px;\n box-shadow: 0 4px 0 #BF360C, 0 6px 16px rgba(255,109,0,0.25);\n transition: all 0.2s cubic-bezier(0.4,0,0.2,1);\n position: relative;\n overflow: hidden;\n }\n .btn-cta::after {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);\n animation: shimmer 2.5s infinite;\n }\n .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #BF360C, 0 10px 24px rgba(255,109,0,0.35); }\n .btn-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #BF360C; }\n\n .cta-note { margin-top: 10px; font-size: 12px; color: var(--text-light); }\n\n \/* ===== \u30ea\u30c8\u30e9\u30a4 ===== *\/\n .btn-retry {\n display: block;\n width: 100%;\n margin-top: 14px;\n padding: 13px;\n background: var(--white);\n border: 2px solid var(--primary-light);\n border-radius: var(--radius-sm);\n color: var(--primary);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-family: inherit;\n }\n .btn-retry:hover { background: var(--primary-pale); border-color: var(--primary); }\n\n \/* ===== \u30d5\u30c3\u30bf\u30fc ===== *\/\n .footer {\n text-align: center;\n padding: 14px;\n border-top: 1px solid var(--primary-pale);\n position: relative; z-index: 1;\n }\n .footer-logo { font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: 0.1em; }\n\n \/* ===== \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 ===== *\/\n \n \/* \u30e2\u30d0\u30a4\u30eb\uff08\u301c480px\uff09 *\/\n @media (max-width: 480px) {\n body { padding: 0; }\n .app { border-radius: 0; border-left: none; border-right: none; min-height: 100vh; max-width: 100%; }\n .header { padding: 22px 16px 18px; }\n .content { padding: 0 16px 24px; }\n .mascot { font-size: 44px; }\n .cta { padding: 22px 18px; }\n }\n\n \/* \u30bf\u30d6\u30ec\u30c3\u30c8\uff08481px\u301c1023px\uff09 *\/\n @media (min-width: 481px) and (max-width: 1023px) {\n body { padding: 24px; }\n .app { max-width: 600px; }\n .header { padding: 32px 28px 24px; }\n .content { padding: 0 28px 32px; }\n .main-title { font-size: 28px; }\n .q-text { font-size: 18px; }\n .opt-btn { padding: 18px 20px; font-size: 16px; }\n }\n\n \/* PC\uff081024px\u301c\uff09 *\/\n @media (min-width: 1024px) {\n body {\n padding: 40px;\n align-items: center;\n min-height: 100vh;\n }\n\n .app {\n max-width: 1600px;\n border-radius: var(--radius-xl);\n }\n\n .app::before {\n height: 300px;\n }\n\n .header {\n padding: 48px 60px 36px;\n }\n\n .mascot { font-size: 72px; }\n\n .header-badge { font-size: 14px; padding: 8px 20px; }\n\n .main-title {\n font-size: 36px;\n margin-bottom: 12px;\n }\n\n .sub-title { font-size: 18px; }\n\n .content {\n padding: 0 60px 48px;\n }\n\n \/* \u30b9\u30bf\u30fc\u30c8\u753b\u9762 PC *\/\n .start-screen { padding: 32px 0; }\n\n .start-desc {\n font-size: 18px;\n max-width: 600px;\n margin: 0 auto 28px;\n }\n\n .start-features { gap: 16px; margin-bottom: 36px; }\n\n .feature-tag {\n font-size: 14px;\n padding: 10px 20px;\n }\n\n .btn-start {\n font-size: 20px;\n padding: 20px 48px;\n max-width: 360px;\n }\n\n .start-note { font-size: 14px; margin-top: 20px; }\n\n \/* \u8cea\u554f\u753b\u9762 PC - 2\u30ab\u30e9\u30e0 *\/\n .quiz-area .pc-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n align-items: start;\n }\n\n .progress-area {\n grid-column: 1 \/ -1;\n max-width: 800px;\n margin: 0 auto 32px;\n }\n\n .progress-info { margin-bottom: 12px; }\n .progress-step, .progress-pct { font-size: 15px; }\n .progress-track { height: 12px; }\n\n .q-box {\n padding: 28px 32px;\n margin-bottom: 0;\n }\n\n .q-box::after {\n display: none;\n }\n\n .q-num {\n min-width: 48px;\n height: 40px;\n font-size: 15px;\n margin-bottom: 16px;\n }\n\n .q-text {\n font-size: 22px;\n line-height: 1.7;\n }\n\n .opts { gap: 14px; }\n\n .opt-btn {\n padding: 20px 24px;\n font-size: 17px;\n border-radius: var(--radius-md);\n }\n\n .opt-key {\n width: 36px;\n height: 36px;\n font-size: 15px;\n }\n\n \/* \u7d50\u679c\u753b\u9762 PC - 2\u30ab\u30e9\u30e0 *\/\n .result-card {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n align-items: start;\n }\n\n .result-top {\n grid-column: 1 \/ -1;\n padding: 40px 48px;\n border-radius: var(--radius-lg);\n margin-bottom: 0;\n }\n\n .result-badge { font-size: 15px; padding: 8px 20px; }\n .result-icon { font-size: 80px; }\n .result-type { font-size: 36px; }\n\n .result-body {\n padding: 32px;\n height: 100%;\n }\n\n .r-section { margin-bottom: 24px; }\n .r-section-title { font-size: 16px; margin-bottom: 12px; }\n .r-section-text { font-size: 16px; }\n .r-job-tag { font-size: 15px; padding: 8px 18px; }\n .r-message { font-size: 18px; padding: 18px 24px; }\n\n .cta {\n padding: 36px 32px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .cta-emoji { font-size: 48px; }\n .cta-title { font-size: 20px; margin-bottom: 18px; }\n .cta-text { font-size: 16px; margin-bottom: 24px; }\n .cta-checks { gap: 12px; margin-bottom: 28px; }\n .cta-chk { padding: 14px 18px; font-size: 15px; }\n .cta-chk-ico { width: 26px; height: 26px; font-size: 13px; }\n .btn-cta { font-size: 18px; padding: 20px 36px; }\n .cta-note { font-size: 14px; }\n\n .btn-retry {\n grid-column: 1 \/ -1;\n max-width: 400px;\n margin: 0 auto;\n padding: 16px;\n font-size: 16px;\n }\n\n .footer { padding: 20px; }\n .footer-logo { font-size: 16px; }\n }\n\n \/* \u5927\u578bPC\uff081400px\u301c\uff09 *\/\n @media (min-width: 1400px) {\n .app { max-width: 1600px; }\n \n .header { padding: 56px 80px 44px; }\n .content { padding: 0 80px 56px; }\n \n .main-title { font-size: 42px; }\n .sub-title { font-size: 20px; }\n \n .quiz-area .pc-layout { gap: 64px; }\n .result-card { gap: 48px; }\n \n .q-text { font-size: 26px; }\n .opt-btn { padding: 24px 28px; font-size: 18px; }\n }\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }\n .hidden { display: none !important; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"app\">\n <header class=\"header\">\n <div class=\"mascot\">\ud83d\udc25<\/div>\n <div class=\"header-badge\">3\u5206\u3067\u30b5\u30af\u30c3\u3068\u8a3a\u65ad<\/div>\n <h1 class=\"main-title\">\u81ea\u5206\u306b\u5411\u3044\u3066\u3044\u308b<br><span class=\"highlight\">Web\u306e\u304a\u4ed5\u4e8b<\/span>\u8a3a\u65ad<\/h1>\n <p class=\"sub-title\">\u526f\u696d\uff1f\u8ee2\u8077\uff1f\u30ea\u30b9\u30ad\u30ea\u30f3\u30b0\uff1f<br>\u3042\u306a\u305f\u306e\u6700\u9069\u30eb\u30fc\u30c8\u304c\u898b\u3064\u304b\u308b<\/p>\n <\/header>\n\n <main class=\"content\">\n \n <section id=\"js-start\" class=\"start-screen\">\n <p class=\"start-desc\">\n \u300cWeb\u306e\u4ed5\u4e8b\u3063\u3066\u6c17\u306b\u306a\u308b\u3051\u3069\u3001\u4f55\u304b\u3089\u59cb\u3081\u308c\u3070\uff1f\u300d<br>\n \u4eca\u306e\u72b6\u6cc1\u3084\u6c17\u6301\u3061\u306b\u8fd1\u3044\u3082\u306e\u3092\u9078\u3076\u3060\u3051\u3067\u3001<br>\n <strong>\u3042\u306a\u305f\u306b\u3074\u3063\u305f\u308a\u306e\u30eb\u30fc\u30c8<\/strong>\u304c\u898b\u3064\u304b\u308a\u307e\u3059\u3002\n <\/p>\n <div class=\"start-features\">\n <span class=\"feature-tag\">\ud83d\udcdd \u516810\u554f<\/span>\n <span class=\"feature-tag\">\u23f1 \u7d043\u5206<\/span>\n <span class=\"feature-tag\">\ud83c\udfaf \u6700\u9069\u30eb\u30fc\u30c8\u767a\u898b<\/span>\n <\/div>\n <button class=\"btn-start\" id=\"js-btn-start\">\u8a3a\u65ad\u3092\u30b9\u30bf\u30fc\u30c8\u3059\u308b \u2192<\/button>\n <p class=\"start-note\">\u203b \u767b\u9332\u4e0d\u8981\u30fb\u3059\u3050\u306b\u7d50\u679c\u304c\u308f\u304b\u308a\u307e\u3059<\/p>\n <\/section>\n\n \n <section id=\"js-quiz\" class=\"quiz-area\">\n <div class=\"pc-layout\">\n <div class=\"progress-area\">\n <div class=\"progress-info\">\n <span class=\"progress-step\" id=\"js-pStep\">Q1 \/ 10<\/span>\n <span class=\"progress-pct\" id=\"js-pPct\">10%<\/span>\n <\/div>\n <div class=\"progress-track\">\n <div class=\"progress-fill\" id=\"js-pFill\" style=\"width:10%\"><\/div>\n <\/div>\n <\/div>\n <div class=\"pc-left\" id=\"js-qBox\"><\/div>\n <div class=\"pc-right\" id=\"js-qOpts\"><\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"js-result\" class=\"result-area\">\n <div class=\"result-card\">\n <div class=\"result-top\" id=\"js-rTop\">\n <span class=\"result-badge\" id=\"js-rBadge\">\ud83c\udf89 \u3042\u306a\u305f\u306e\u8a3a\u65ad\u7d50\u679c<\/span>\n <span class=\"result-icon\" id=\"js-rIcon\"><\/span>\n <h2 class=\"result-type\" id=\"js-rType\"><\/h2>\n <\/div>\n\n <div class=\"result-body\" id=\"js-rBody\">\n <div class=\"r-section\">\n <h3 class=\"r-section-title\">\u2728 \u3042\u306a\u305f\u306e\u7279\u5fb4<\/h3>\n <p class=\"r-section-text\" id=\"js-rFeatures\"><\/p>\n <\/div>\n <div class=\"r-section\">\n <h3 class=\"r-section-title\">\ud83d\udcbc \u5411\u3044\u3066\u3044\u308b\u8077\u7a2e<\/h3>\n <div class=\"r-jobs\" id=\"js-rJobs\"><\/div>\n <\/div>\n <div class=\"r-section\">\n <h3 class=\"r-section-title\">\ud83d\udca1 \u304a\u3059\u3059\u3081\u306e\u7406\u7531<\/h3>\n <p class=\"r-section-text\" id=\"js-rReason\"><\/p>\n <\/div>\n <div class=\"r-message\" id=\"js-rMsg\"><\/div>\n <\/div>\n\n <div class=\"cta\">\n <div class=\"cta-emoji\">\ud83c\udf31<\/div>\n <h3 class=\"cta-title\">\u8a3a\u65ad\u3092\u7d42\u3048\u305f\u3042\u306a\u305f\u3078<\/h3>\n <p class=\"cta-text\" id=\"js-ctaText\"><\/p>\n <div class=\"cta-checks\" id=\"js-ctaChecks\"><\/div>\n <a href=\"#\" class=\"btn-cta\" id=\"js-ctaBtn\" target=\"_blank\" rel=\"noopener\"><\/a>\n <p class=\"cta-note\" id=\"js-ctaNote\">\u203b \u53c2\u52a0\u7121\u6599\u30fb\u30aa\u30f3\u30e9\u30a4\u30f3\u958b\u50ac<\/p>\n <\/div>\n\n <button class=\"btn-retry\" id=\"js-btn-retry\">\ud83d\udd04 \u3082\u3046\u4e00\u5ea6\u8a3a\u65ad\u3059\u308b<\/button>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"footer\"><span class=\"footer-logo\">DX UP<\/span><\/footer>\n<\/div>\n\n<script>\n\/* ========== \u30c7\u30fc\u30bf ========== *\/\nconst QS = [\n { q:\"\u4eca\u306e\u4ed5\u4e8b\u306b\u5bfe\u3059\u308b\u6c17\u6301\u3061\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u306a\u3093\u3068\u306a\u304f\u4e0d\u6e80\u3060\u3051\u3069\u3001\u8f9e\u3081\u308b\u307b\u3069\u3058\u3083\u306a\u3044\"},\n {k:\"B\",t:\"\u3067\u304d\u308c\u3070\u65e9\u3081\u306b\u8f9e\u3081\u305f\u3044\"},\n {k:\"C\",t:\"\u4e0d\u6e80\u3082\u3042\u308b\u3051\u3069\u3001\u5c06\u6765\u3082\u4e0d\u5b89\"}\n ]},\n { q:\"\u5b66\u7fd2\u306b\u4f7f\u3048\u308b\u6642\u9593\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u5e73\u65e5\u306e\u591c\u3084\u571f\u65e5\u3092\u6d3b\u7528\u3067\u304d\u308b\"},\n {k:\"B\",t:\"\u30d5\u30eb\u30bf\u30a4\u30e0\u3067\u96c6\u4e2d\u3057\u305f\u3044\"},\n {k:\"C\",t:\"\u307e\u3060\u3088\u304f\u308f\u304b\u3089\u306a\u3044\"}\n ]},\n { q:\"\u53ce\u5165\u304c\u4e00\u6642\u7684\u306b\u4e0b\u304c\u308b\u306e\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u306a\u308b\u3079\u304f\u907f\u3051\u305f\u3044\"},\n {k:\"B\",t:\"\u3042\u308b\u7a0b\u5ea6\u306f\u899a\u609f\u3057\u3066\u3044\u308b\"},\n {k:\"C\",t:\"\u3067\u304d\u308c\u3070\u907f\u3051\u305f\u3044\u3051\u3069\u3001\u691c\u8a0e\u4e2d\"}\n ]},\n { q:\"\u4eca\u306e\u8caf\u91d1\u30fb\u751f\u6d3b\u306e\u4f59\u88d5\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u305d\u3053\u305d\u3053\u4f59\u88d5\u304c\u3042\u308b\"},\n {k:\"B\",t:\"\u6b63\u76f4\u3042\u307e\u308a\u306a\u3044\"},\n {k:\"C\",t:\"\u306a\u3093\u3068\u3082\u8a00\u3048\u306a\u3044\"}\n ]},\n { q:\"Web\u306b\u5bfe\u3059\u308b\u8208\u5473\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u526f\u696d\u3084\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u304c\u76ee\u7684\"},\n {k:\"B\",t:\"\u8ee2\u8077\u30fb\u518d\u5c31\u8077\u304c\u76ee\u7684\"},\n {k:\"C\",t:\"\u306a\u3093\u3068\u306a\u304f\u53ef\u80fd\u6027\u3092\u611f\u3058\u3066\u3044\u308b\"}\n ]},\n { q:\"\u7406\u60f3\u306e\u50cd\u304d\u65b9\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u672c\u696d\uff0b\u30b9\u30ad\u30eb\u3067\u53ce\u5165\u30a2\u30c3\u30d7\u3057\u305f\u3044\"},\n {k:\"B\",t:\"\u65b0\u3057\u3044\u4ed5\u4e8b\u306b\u30ac\u30e9\u30c3\u3068\u5207\u308a\u66ff\u3048\u305f\u3044\"},\n {k:\"C\",t:\"\u307e\u305a\u306f\u8a71\u3092\u805e\u3044\u3066\u304b\u3089\u6c7a\u3081\u305f\u3044\"}\n ]},\n { q:\"\u5b66\u7fd2\u306e\u9032\u3081\u65b9\u306f\u3069\u3063\u3061\u304c\u5408\u3044\u305d\u3046\uff1f\", opts:[\n {k:\"A\",t:\"\u7a7a\u3044\u305f\u6642\u9593\u306b\u30b3\u30c4\u30b3\u30c4\u9032\u3081\u305f\u3044\"},\n {k:\"B\",t:\"\u74b0\u5883\u3092\u5909\u3048\u3066\u4e00\u6c17\u306b\u5b66\u3073\u305f\u3044\"},\n {k:\"C\",t:\"\u30b5\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u306a\u304c\u3089\u9032\u3081\u305f\u3044\"}\n ]},\n { q:\"\u4eca\u3059\u3050\u6c42\u3081\u3066\u3044\u308b\u3082\u306e\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u5c06\u6765\u306e\u9078\u629e\u80a2\u3092\u5897\u3084\u3057\u305f\u3044\"},\n {k:\"B\",t:\"\u4ed5\u4e8b\u305d\u306e\u3082\u306e\u3092\u5909\u3048\u305f\u3044\"},\n {k:\"C\",t:\"\u307e\u305a\u306f\u60c5\u5831\u53ce\u96c6\u3057\u305f\u3044\"}\n ]},\n { q:\"\u81ea\u5df1\u6295\u8cc7\u306b\u304a\u91d1\u3092\u304b\u3051\u308b\u306a\u3089\uff1f\", opts:[\n {k:\"A\",t:\"\u6708\u306b\u6570\u4e07\u5186\u304f\u3089\u3044\u306a\u3089OK\"},\n {k:\"B\",t:\"\u516c\u7684\u306a\u652f\u63f4\u304c\u3042\u308b\u3068\u52a9\u304b\u308b\"},\n {k:\"C\",t:\"\u307e\u305a\u306f\u7121\u6599\u3067\u59cb\u3081\u305f\u3044\"}\n ]},\n { q:\"\u3042\u306a\u305f\u306e\u672c\u97f3\u306b\u8fd1\u3044\u306e\u306f\uff1f\", opts:[\n {k:\"A\",t:\"\u8f9e\u3081\u305a\u306b\u30b9\u30ad\u30eb\u3092\u8eab\u306b\u3064\u3051\u305f\u3044\"},\n {k:\"B\",t:\"\u8f9e\u3081\u3066\u3067\u3082\u4eba\u751f\u3092\u5909\u3048\u305f\u3044\"},\n {k:\"C\",t:\"\u307e\u3060\u6c7a\u3081\u304d\u308c\u3066\u3044\u306a\u3044\"}\n ]}\n];\n\nconst RS = {\n A: {\n icon:\"\ud83d\udfe2\",\n type:\"\u50cd\u304d\u306a\u304c\u3089\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u578b\",\n cls:\"type-a\",\n features:\"\u4eca\u306e\u4ed5\u4e8b\u3092\u7d9a\u3051\u306a\u304c\u3089\u3001\u5c06\u6765\u306b\u5099\u3048\u305f\u3044\u30bf\u30a4\u30d7\u3002\\n\u5b89\u5b9a\u3092\u5927\u5207\u306b\u3057\u3064\u3064\u3001\u7740\u5b9f\u306b\u30b9\u30ad\u30eb\u3092\u7a4d\u307f\u4e0a\u3052\u3066\u3044\u3051\u307e\u3059\u3002\",\n jobs:[\"Web\u30de\u30fc\u30b1\u30bf\u30fc\",\"SEO\u30e9\u30a4\u30bf\u30fc\",\"Web\u30c7\u30a3\u30ec\u30af\u30bf\u30fc\u88dc\u4f50\"],\n reason:\"\u672c\u696d\u3092\u6301\u3061\u306a\u304c\u3089\u30b9\u30ad\u30eb\u3092\u78e8\u304f\u3053\u3068\u3067\u3001\u30ad\u30e3\u30ea\u30a2\u306e\u9078\u629e\u80a2\u3092\u7740\u5b9f\u306b\u5e83\u3052\u3066\u3044\u3051\u307e\u3059\u3002\u30ea\u30b9\u30af\u3092\u6291\u3048\u306a\u304c\u3089\u6210\u9577\u3067\u304d\u308b\u306e\u304c\u6700\u5927\u306e\u5f37\u307f\u3067\u3059\u3002\",\n message:\"\ud83d\udc49 \u5b89\u5b9a\u00d7\u6210\u9577\u306e\u4e21\u53d6\u308a\u304c\u3067\u304d\u308b\u4eba\",\n cta:\"\u50cd\u304d\u306a\u304c\u3089\u5b66\u3079\u308b\u30ea\u30b9\u30ad\u30ea\u30f3\u30b0\u30b9\u30af\u30fc\u30eb\u306e<strong>\u7121\u6599\u30bb\u30df\u30ca\u30fc<\/strong>\u3067\u3001\u3042\u306a\u305f\u306b\u5408\u3063\u305f\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u306e\u65b9\u6cd5\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u307f\u307e\u305b\u3093\u304b\uff1f\",\n ctaBtn:\"\u7121\u6599\u30bb\u30df\u30ca\u30fc\u306b\u53c2\u52a0\u3059\u308b \u2192\",\n ctaLink:\"https:\/\/tinyurl.com\/dxupseminar\",\n checks:[\"\u672a\u7d4c\u9a13OK\",\"\u53c2\u52a0\u7121\u6599\u30fb\u30aa\u30f3\u30e9\u30a4\u30f3\u958b\u50ac\",\"\u3042\u306a\u305f\u306b\u5408\u3063\u305f\u5b66\u3073\u65b9\u304c\u898b\u3048\u308b\"]\n },\n B: {\n icon:\"\ud83d\udd35\",\n type:\"\u5b66\u7fd2\u306b\u96c6\u4e2d\u30fb\u8ee2\u8077\u578b\",\n cls:\"type-b\",\n features:\"\u74b0\u5883\u3092\u5909\u3048\u3066\u3001\u4eba\u751f\u3092\u5927\u304d\u304f\u52d5\u304b\u3057\u305f\u3044\u30bf\u30a4\u30d7\u3002\\n\u96c6\u4e2d\u3057\u3066\u5b66\u3076\u3053\u3068\u3067\u4e00\u6c17\u306b\u30ad\u30e3\u30ea\u30a2\u30c1\u30a7\u30f3\u30b8\u3092\u76ee\u6307\u305b\u307e\u3059\u3002\",\n jobs:[\"Web\u30c7\u30b6\u30a4\u30ca\u30fc\",\"\u30a8\u30f3\u30b8\u30cb\u30a2\",\"\u52d5\u753b\u7de8\u96c6\"],\n reason:\"\u96c6\u4e2d\u7684\u306b\u30b9\u30ad\u30eb\u3092\u8eab\u306b\u3064\u3051\u308b\u3053\u3068\u3067\u3001\u77ed\u671f\u9593\u3067\u306e\u30ad\u30e3\u30ea\u30a2\u30c1\u30a7\u30f3\u30b8\u304c\u53ef\u80fd\u3002\u516c\u7684\u306a\u8077\u696d\u8a13\u7df4\u306a\u3089\u3001\u53d7\u8b1b\u6599\u7121\u6599\u30676\u30f6\u6708\u9593\u3057\u3063\u304b\u308a\u5b66\u3079\u307e\u3059\u3002\",\n message:\"\ud83d\udc49 \u899a\u609f\u304c\u6210\u9577\u306e\u30a8\u30f3\u30b8\u30f3\u306b\u306a\u308b\u4eba\",\n cta:\"\u30b9\u30ad\u30eb\u3092\u96c6\u4e2d\u7684\u306b\u8eab\u306b\u3064\u3051\u305f\u3044\u3042\u306a\u305f\u306b\u306f\u3001\u516c\u7684\u306a\u8077\u696d\u8a13\u7df4\u304c\u304a\u3059\u3059\u3081\u3002\u307e\u305a\u306fLP\u3092\u307f\u3066\u307f\u3066\u304f\u3060\u3055\u3044^^\",\n ctaBtn:\"\u516c\u7684\u5236\u5ea6\u3067\u306e\u7121\u6599\u306e\u5b66\u3073\u3068\u306f \u2192\",\n ctaLink:\"https:\/\/www.webmarketing.dxup.jp\/\",\n checks:[\"\u672a\u7d4c\u9a13OK\",\"\u3053\u306e\u4e00\u6b69\u304c\u672a\u6765\u306e\u4e00\u6b69\u306b\u2606\u5f61\",\"\u3042\u306a\u305f\u306b\u5408\u3063\u305f\u5b66\u3073\u65b9\u304c\u898b\u3048\u308b\"]\n },\n C: {\n icon:\"\ud83d\udfe1\",\n type:\"\u60c5\u5831\u53ce\u96c6\u30fb\u3058\u3063\u304f\u308a\u691c\u8a0e\u578b\",\n cls:\"type-c\",\n features:\"\u53ef\u80fd\u6027\u306f\u611f\u3058\u3066\u3044\u308b\u3051\u3069\u3001\u307e\u3060\u8ff7\u3063\u3066\u3044\u308b\u6bb5\u968e\u3002\\n\u307e\u305a\u306f\u5168\u4f53\u50cf\u3092\u77e5\u3063\u3066\u304b\u3089\u52d5\u304d\u305f\u3044\u614e\u91cd\u6d3e\u3067\u3059\u3002\",\n jobs:[\"Web\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\",\"SNS\u904b\u7528\",\"\u751f\u6210AI\u6d3b\u7528\"],\n reason:\"\u3057\u3063\u304b\u308a\u60c5\u5831\u3092\u96c6\u3081\u3066\u304b\u3089\u52d5\u3051\u308b\u5805\u5b9f\u3055\u304c\u5f37\u307f\u3002\u307e\u305a\u306f\u300cWeb\u306e\u4ed5\u4e8b\u3063\u3066\u5b9f\u969b\u3069\u3046\u306a\u306e\uff1f\u300d\u3092\u77e5\u308b\u3053\u3068\u304b\u3089\u59cb\u3081\u3066\u307f\u307e\u3057\u3087\u3046\u3002\",\n message:\"\ud83d\udc49 \u60c5\u5831\u3092\u96c6\u3081\u3066\u304b\u3089\u52d5\u3051\u308b\u3001\u5805\u5b9f\u306a\u4eba\",\n cta:\"\u307e\u3060\u8ff7\u3063\u3066\u3044\u3066\u3082\u5927\u4e08\u592b\u3002<strong>\u7121\u6599\u30bb\u30df\u30ca\u30fc<\/strong>\u3067\u306f\u300cWeb\u306e\u4ed5\u4e8b\u3063\u3066\u5b9f\u969b\u3069\u3046\u306a\u306e\uff1f\u300d\u304c\u308f\u304b\u308a\u307e\u3059\u3002\u307e\u305a\u306f\u6c17\u8efd\u306b\u306e\u305e\u3044\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002\",\n ctaBtn:\"\u7121\u6599\u30bb\u30df\u30ca\u30fc\u306b\u53c2\u52a0\u3059\u308b \u2192\",\n ctaLink:\"https:\/\/tinyurl.com\/dxupseminar\",\n checks:[\"\u672a\u7d4c\u9a13OK\",\"\u53c2\u52a0\u7121\u6599\u30fb\u30aa\u30f3\u30e9\u30a4\u30f3\u958b\u50ac\",\"\u3042\u306a\u305f\u306b\u5408\u3063\u305f\u5b66\u3073\u65b9\u304c\u898b\u3048\u308b\"]\n }\n};\n\n\/* ========== \u72b6\u614b ========== *\/\nlet idx = 0;\nlet sc = {A:0,B:0,C:0};\nlet busy = false;\n\n\/* ========== DOM ========== *\/\nconst $start = document.getElementById('js-start');\nconst $quiz = document.getElementById('js-quiz');\nconst $result = document.getElementById('js-result');\nconst $qBox = document.getElementById('js-qBox');\nconst $qOpts = document.getElementById('js-qOpts');\nconst $pStep = document.getElementById('js-pStep');\nconst $pPct = document.getElementById('js-pPct');\nconst $pFill = document.getElementById('js-pFill');\n\ndocument.getElementById('js-btn-start').addEventListener('click', start);\ndocument.getElementById('js-btn-retry').addEventListener('click', reset);\n\n\/* ========== \u30d5\u30ed\u30fc ========== *\/\nfunction start() {\n $start.classList.add('hidden');\n $quiz.style.display = 'block';\n render();\n}\n\nfunction render() {\n if (idx >= QS.length) { showResult(); return; }\n\n const q = QS[idx];\n const pct = Math.round(((idx + 1) \/ QS.length) * 100);\n $pStep.textContent = `Q${idx+1} \/ ${QS.length}`;\n $pPct.textContent = `${pct}%`;\n $pFill.style.width = `${pct}%`;\n\n \/\/ \u8cea\u554f\u30dc\u30c3\u30af\u30b9\n $qBox.innerHTML = `\n <div class=\"q-card\" id=\"js-card-box\">\n <div class=\"q-box\">\n <span class=\"q-num\">Q${idx+1}<\/span>\n <p class=\"q-text\">${q.q}<\/p>\n <\/div>\n <\/div>\n `;\n\n \/\/ \u9078\u629e\u80a2\n $qOpts.innerHTML = `\n <div class=\"q-card\" id=\"js-card-opts\">\n <div class=\"opts\">\n ${q.opts.map((o,i) => `\n <button class=\"opt-btn\" data-key=\"${o.k}\" style=\"animation: optSlide 0.3s ${i*0.07}s both\">\n <span class=\"opt-key\">${o.k}<\/span>\n <span class=\"opt-label\">${o.t}<\/span>\n <\/button>\n `).join('')}\n <\/div>\n <\/div>\n `;\n\n \/* CSS for staggered slide *\/\n if (!document.getElementById('opt-anim')) {\n const s = document.createElement('style');\n s.id = 'opt-anim';\n s.textContent = `@keyframes optSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}`;\n document.head.appendChild(s);\n }\n\n requestAnimationFrame(() => {\n document.getElementById('js-card-box').classList.add('enter');\n document.getElementById('js-card-opts').classList.add('enter');\n });\n\n \/* bind *\/\n $qOpts.querySelectorAll('.opt-btn').forEach(btn => {\n btn.addEventListener('click', () => pick(btn));\n });\n}\n\nfunction pick(btn) {\n if (busy) return;\n busy = true;\n\n const key = btn.dataset.key;\n sc[key]++;\n btn.classList.add('picked');\n\n const cardBox = document.getElementById('js-card-box');\n const cardOpts = document.getElementById('js-card-opts');\n \n setTimeout(() => {\n cardBox.classList.remove('enter');\n cardBox.classList.add('exit');\n cardOpts.classList.remove('enter');\n cardOpts.classList.add('exit');\n setTimeout(() => { idx++; busy = false; render(); }, 280);\n }, 180);\n}\n\nfunction showResult() {\n $quiz.style.display = 'none';\n $result.style.display = 'block';\n\n let max = 0, rk = 'A';\n for (const k in sc) { if (sc[k] > max) { max = sc[k]; rk = k; } }\n\n const d = RS[rk];\n\n document.getElementById('js-rTop').className = 'result-top ' + d.cls;\n document.getElementById('js-rIcon').textContent = d.icon;\n document.getElementById('js-rType').textContent = d.type;\n document.getElementById('js-rBadge').className = 'result-badge';\n document.getElementById('js-rFeatures').innerHTML = d.features.replace(\/\\n\/g,'<br>');\n document.getElementById('js-rReason').textContent = d.reason;\n\n const msgEl = document.getElementById('js-rMsg');\n msgEl.className = 'r-message ' + d.cls;\n msgEl.textContent = d.message;\n\n const jobsEl = document.getElementById('js-rJobs');\n jobsEl.className = 'r-jobs ' + d.cls;\n jobsEl.innerHTML = d.jobs.map(j => `<span class=\"r-job-tag\">${j}<\/span>`).join('');\n\n document.getElementById('js-ctaText').innerHTML = d.cta;\n\n \/\/ CTA\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8\u3092\u52d5\u7684\u306b\u751f\u6210\n const checksEl = document.getElementById('js-ctaChecks');\n checksEl.innerHTML = d.checks.map(c => `<div class=\"cta-chk\"><span class=\"cta-chk-ico\">\u2713<\/span><span>${c}<\/span><\/div>`).join('');\n\n \/\/ CTA\u30dc\u30bf\u30f3\u3092\u52d5\u7684\u306b\u8a2d\u5b9a\n const ctaBtnEl = document.getElementById('js-ctaBtn');\n ctaBtnEl.href = d.ctaLink;\n ctaBtnEl.textContent = d.ctaBtn;\n\n \/\/ Result B\u306e\u5834\u5408\u306f\u6ce8\u91c8\u3092\u975e\u8868\u793a\n const ctaNoteEl = document.getElementById('js-ctaNote');\n ctaNoteEl.style.display = (rk === 'B') ? 'none' : 'block';\n\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction reset() {\n idx = 0;\n sc = {A:0,B:0,C:0};\n busy = false;\n $result.style.display = 'none';\n $quiz.style.display = 'none';\n $start.classList.remove('hidden');\n $qBox.innerHTML = '';\n $qOpts.innerHTML = '';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>3\u5206\u3067\u308f\u304b\u308b\uff5c\u81ea\u5206\u306b\u5411\u3044\u3066\u3044\u308bWeb\u306e\u304a\u4ed5\u4e8b\u8a3a\u65ad | DX UP \ud83d\udc25 3\u5206\u3067\u30b5\u30af\u30c3\u3068\u8a3a\u65ad \u81ea\u5206\u306b\u5411\u3044\u3066\u3044\u308bWeb\u306e\u304a\u4ed5\u4e8b\u8a3a\u65ad \u526f\u696d\uff1f\u8ee2\u8077\uff1f\u30ea\u30b9\u30ad\u30ea\u30f3\u30b0\uff1f\u3042\u306a\u305f\u306e\u6700\u9069\u30eb\u30fc\u30c8\u304c\u898b\u3064\u304b\u308b \u300cWeb\u306e\u4ed5\u4e8b\u3063\u3066\u6c17\u306b\u306a\u308b\u3051\u3069\u3001\u4f55\u304b\u3089 […]<\/p>\n","protected":false},"author":9,"featured_media":1075,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[65],"tags":[20,13,17,10,16],"_links":{"self":[{"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/posts\/1064"}],"collection":[{"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/comments?post=1064"}],"version-history":[{"count":3,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/posts\/1064\/revisions"}],"predecessor-version":[{"id":1077,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/posts\/1064\/revisions\/1077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/media\/1075"}],"wp:attachment":[{"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/media?parent=1064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/categories?post=1064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xn--q6vw15bczbg0p.com\/knowhow\/wp-json\/wp\/v2\/tags?post=1064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}