\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad | \u7a7a\u8abf\u7701\u30a8\u30cd.com<\/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&family=Outfit:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ================================================================\n DESIGN TOKENS\n================================================================ *\/\n:root {\n --bg: #F0F0F2; \/* \u5168\u4f53\u80cc\u666f\uff1a\u8584\u30b0\u30ec\u30fc *\/\n --bg-dark: #223a70; \/* \u30d8\u30c3\u30c0\u30fc\u30fb\u30c0\u30fc\u30af\u9762\uff1a\u6fc3\u7d3a *\/\n --bg-card: #FFFFFF; \/* \u30ab\u30fc\u30c9\u30fb\u30dc\u30bf\u30f3\u80cc\u666f\uff1a\u767d *\/\n --ink: #1B2A4A; \/* \u672c\u6587\u30c6\u30ad\u30b9\u30c8\uff1a\u6fc3\u7d3a *\/\n --ink-mid: #4A5568; \/* \u30b5\u30d6\u30c6\u30ad\u30b9\u30c8 *\/\n --ink-light: #9AA3B2; \/* \u8584\u30c6\u30ad\u30b9\u30c8 *\/\n --accent: #1B2A4A; \/* \u30a2\u30af\u30bb\u30f3\u30c8\uff08\u65e7\u30aa\u30ec\u30f3\u30b8\uff09\u2192 \u6fc3\u7d3a *\/\n --accent-hover:#142038; \/* \u30a2\u30af\u30bb\u30f3\u30c8\u30db\u30d0\u30fc\uff1a\u3088\u308a\u6df1\u3044\u6fc3\u7d3a *\/\n --accent-glow: rgba(27,42,74,0.15);\n --accent-tint: rgba(27,42,74,0.06);\n --gold: #1B2A4A; \/* \u30e9\u30f3\u30af1\u8272\uff1a\u6fc3\u7d3a *\/\n --silver: #6B7280;\n --bronze: #92745A;\n --green: #15803D;\n --green-bg: #F0FDF4;\n --green-border:#BBF7D0;\n --orange: #1B2A4A; \/* \u65e7\u30aa\u30ec\u30f3\u30b8\u8b66\u544a\u8272 \u2192 \u6fc3\u7d3a *\/\n --orange-bg: #EEF1F8; \/* \u65e7\u30aa\u30ec\u30f3\u30b8bg \u2192 \u8584\u9752\u30b0\u30ec\u30fc *\/\n --orange-border:#B0BCDA; \/* \u65e7\u30aa\u30ec\u30f3\u30b8border \u2192 \u9752\u30b0\u30ec\u30fc *\/\n --red-bg: #EEF1F8; \/* \u30a8\u30e9\u30fc\u80cc\u666f \u2192 \u8584\u9752\u30b0\u30ec\u30fc *\/\n --red-border: #B0BCDA; \/* \u30a8\u30e9\u30fc\u67a0 \u2192 \u9752\u30b0\u30ec\u30fc *\/\n --border: #D8DCE4; \/* \u67a0\u7dda\uff1a\u30b0\u30ec\u30fc *\/\n --border-focus:#1B2A4A; \/* \u30d5\u30a9\u30fc\u30ab\u30b9\u67a0\uff1a\u6fc3\u7d3a *\/\n --radius-sm: 6px;\n --radius: 10px;\n --radius-lg: 16px;\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);\n --shadow: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);\n --shadow-lg: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);\n --transition: 0.2s cubic-bezier(0.4,0,0.2,1);\n}\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\n\nbody {\n font-family: 'Noto Sans JP', sans-serif;\n background: var(--bg);\n color: var(--ink);\n line-height: 1.7;\n -webkit-font-smoothing: antialiased;\n}\n\n\/* ================================================================\n TOP PAGE ENTRY BLOCK\n================================================================ *\/\n.loss-block {\n background: #FFFFFF;\n border: 1px solid #CCCED4;\n padding: clamp(24px,2vw,48px) clamp(10px,2vw,24px);\n position: relative;\n overflow: hidden;\n}\n\n.loss-block::before { display: none; }\n.loss-block::after { display: none; }\n\n.loss-inner {\n max-width: 700px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n}\n\n.loss-content { grid-column: 1; }\n\n.loss-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: 'Outfit', sans-serif;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #4A5568;\n margin-bottom: 20px;\n}\n\n.loss-eyebrow-dot {\n width: 6px; height: 6px;\n border-radius: 50%;\n background: #4A5568;\n animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%,100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.8); }\n}\n\n.loss-heading {\n font-size: clamp(22px,4vw,36px);\n font-weight: 900;\n color: #1F2937;\n line-height: 1.35;\n margin-bottom: 20px;\n letter-spacing: -0.01em;\n}\n\n.loss-heading em {\n font-style: normal;\n color: #1F2937;\n border-bottom: 2px solid #9AA3B2;\n padding-bottom: 2px;\n}\n\n.loss-body {\n font-size: clamp(13px,2vw,15px);\n color: #4A5568;\n line-height: 1.9;\n margin-bottom: 32px;\n max-width: 540px;\n}\n\n.loss-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 32px;\n}\n\n.loss-meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n font-weight: 500;\n color: #4A5568;\n background: #FFFFFF;\n border: 1px solid #CCCED4;\n border-radius: 100px;\n padding: 5px 12px;\n}\n\n.loss-meta-item svg { opacity: 0.6; color: #4A5568; }\n\n.loss-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: var(--accent);\n color: #fff;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: 0.04em;\n padding: 16px 28px;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 16px rgba(27,42,74,0.30);\n}\n\n.loss-btn:hover {\n background: var(--accent-hover);\n transform: translateY(-2px);\n box-shadow: 0 8px 28px rgba(27,42,74,0.38);\n}\n\n.loss-btn:active { transform: translateY(0); }\n\n.loss-btn-icon {\n width: 28px; height: 28px;\n background: rgba(255,255,255,0.25);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 13px;\n transition: transform var(--transition);\n flex-shrink: 0;\n}\n\n.loss-btn:hover .loss-btn-icon { transform: translateX(3px); }\n\n.loss-note {\n margin-top: 16px;\n font-size: 11px;\n color: #9AA3B2;\n letter-spacing: 0.03em;\n}\n\n@media (max-width: 768px) {\n .loss-btn { width: 100%; justify-content: center; }\n}\n\n\/* ================================================================\n SHINDAN APP \u2014 OVERLAY\n================================================================ *\/\n#shindan-app {\n display: none;\n position: fixed;\n inset: 0;\n background: var(--bg);\n z-index: 9999;\n overflow: hidden;\n}\n\n#shindan-app.active { display: flex; flex-direction: column; }\n\n\/* ---- Header ---- *\/\n.sd-header {\n background: var(--bg-dark);\n padding: 0 20px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n position: relative;\n z-index: 10;\n}\n\n.sd-header-left {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.sd-header-logo {\n font-family: 'Outfit', sans-serif;\n font-size: 13px;\n font-weight: 700;\n color: rgba(255,255,255,0.9);\n letter-spacing: 0.03em;\n}\n\n.sd-header-sep {\n width: 1px; height: 14px;\n background: rgba(255,255,255,0.15);\n}\n\n.sd-header-sub {\n font-size: 11px;\n color: rgba(255,255,255,0.4);\n letter-spacing: 0.05em;\n}\n\n.sd-close-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n background: rgba(255,255,255,0.08);\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: var(--radius-sm);\n color: rgba(255,255,255,0.7);\n font-size: 12px;\n font-family: 'Noto Sans JP', sans-serif;\n font-weight: 500;\n padding: 7px 14px;\n cursor: pointer;\n transition: var(--transition);\n letter-spacing: 0.03em;\n min-height: 36px; \/* \u30bf\u30c3\u30c1\u30bf\u30fc\u30b2\u30c3\u30c8\u78ba\u4fdd *\/\n}\n\n.sd-close-btn:hover {\n background: rgba(255,255,255,0.14);\n color: rgba(255,255,255,0.95);\n}\n\n\/* ---- Progress bar (sticky top) ---- *\/\n.sd-progress-wrap {\n background: var(--bg-dark);\n padding: 0 20px 14px;\n flex-shrink: 0;\n}\n\n.sd-step-dots {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 10px;\n}\n\n.sd-step-dot {\n height: 4px;\n border-radius: 2px;\n background: rgba(255,255,255,0.15);\n transition: all 0.4s ease;\n flex: 1;\n}\n\n.sd-step-dot.done { background: #1B2A4A; }\n.sd-step-dot.active { background: #6B82B0; }\n\n.sd-progress-label {\n font-size: 11px;\n color: rgba(255,255,255,0.4);\n letter-spacing: 0.06em;\n}\n\n\/* ---- Scrollable body ---- *\/\n.sd-scroll {\n flex: 1;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n}\n\n.sd-body {\n max-width: 680px;\n margin: 0 auto;\n padding: 36px 20px 100px;\n}\n\n\n\n<div class=\"sd-next-step\" id=\"next-step-box\">\n <div class=\"sd-next-label\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n \u304a\u3059\u3059\u3081\u306e\u6b21\u306e\u4e00\u6b69\n <\/div>\n <p class=\"sd-next-text\" id=\"next-step-text\"><\/p>\n <a id=\"next-step-btn\" href=\"#\" style=\"display:inline-block;margin-top:14px;padding:10px 22px;background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.3);border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;letter-spacing:0.04em;\">\u8a73\u3057\u304f\u898b\u308b<\/a>\n<\/div>\n\n\n\n\/* \u30b9\u30de\u30db bottom safe area *\/\n@supports (padding-bottom: env(safe-area-inset-bottom)) {\n .sd-body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }\n}\n\n\/* ================================================================\n INTRO SCREEN\n================================================================ *\/\n.sd-intro { animation: fadeUp 0.4s ease forwards; }\n\n.sd-intro-icon {\n width: 56px; height: 56px;\n background: rgba(27,42,74,0.07);\n border: 1.5px solid rgba(27,42,74,0.15);\n border-radius: var(--radius-lg);\n display: flex; align-items: center; justify-content: center;\n font-size: 26px;\n margin-bottom: 20px;\n}\n\n.sd-intro-title {\n font-size: clamp(24px,5vw,34px);\n font-weight: 900;\n color: var(--ink);\n line-height: 1.25;\n margin-bottom: 14px;\n letter-spacing: -0.02em;\n}\n\n.sd-intro-title span {\n color: #1B2A4A;\n}\n\n.sd-intro-desc {\n font-size: 14px;\n color: var(--ink-mid);\n line-height: 1.85;\n margin-bottom: 28px;\n max-width: 500px;\n}\n\n.sd-intro-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 32px;\n}\n\n.sd-intro-chip {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n font-weight: 600;\n color: var(--ink-mid);\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: 100px;\n padding: 6px 14px;\n box-shadow: var(--shadow-sm);\n}\n\n.sd-intro-start {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--accent);\n color: #fff;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 16px;\n font-weight: 700;\n padding: 17px 32px;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n box-shadow: 0 4px 16px rgba(27,42,74,0.25);\n letter-spacing: 0.03em;\n width: 100%;\n max-width: 360px;\n justify-content: center;\n}\n\n.sd-intro-start:hover {\n background: var(--accent-hover);\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(27,42,74,0.32);\n}\n\n.sd-intro-divider {\n border: none;\n border-top: 1px solid var(--border);\n margin: 32px 0;\n}\n\n.sd-intro-disclaimer {\n font-size: 11.5px;\n color: var(--ink-light);\n line-height: 1.7;\n padding: 14px 16px;\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n border-left: 3px solid #1B2A4A;\n}\n\n\/* ================================================================\n QUIZ SCREEN\n================================================================ *\/\n.sd-question { display: none; }\n.sd-question.active {\n display: block;\n animation: fadeUp 0.3s ease forwards;\n}\n\n@keyframes fadeUp {\n from { opacity: 0; transform: translateY(14px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.sd-q-eyebrow {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.sd-q-num {\n font-family: 'Outfit', sans-serif;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.15em;\n color: #1B2A4A;\n background: rgba(27,42,74,0.08);\n border: 1px solid rgba(27,42,74,0.18);\n border-radius: 4px;\n padding: 3px 10px;\n}\n\n.sd-q-type {\n font-size: 11px;\n color: var(--ink-light);\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 4px;\n padding: 3px 10px;\n}\n\n.sd-q-title {\n font-size: clamp(17px,3.5vw,22px);\n font-weight: 800;\n color: var(--ink);\n line-height: 1.4;\n margin-bottom: 24px;\n letter-spacing: -0.01em;\n}\n\n\/* ---- Options grid ---- *\/\n.sd-options {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));\n gap: 8px;\n margin-bottom: 8px;\n}\n\n\/* Q1\u306f\u65bd\u8a2d\u540d\u304c\u77ed\u3044\u306e\u30673\u5217\u307e\u3067\u5e83\u3052\u308b *\/\n.sd-options.q1-grid {\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));\n}\n\n.sd-option { position: relative; }\n\n.sd-option input {\n position: absolute;\n opacity: 0;\n width: 1px; height: 1px;\n pointer-events: none;\n}\n\n.sd-option-label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 13px 14px;\n background: #FFFFFF;\n border: 1.5px solid #D8DCE4;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n font-size: 13px;\n font-weight: 500;\n color: var(--ink-mid);\n line-height: 1.4;\n user-select: none;\n min-height: 48px;\n -webkit-tap-highlight-color: transparent;\n}\n\n\/* \u30ab\u30b9\u30bf\u30e0\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u30fb\u30e9\u30b8\u30aa *\/\n.sd-option-label::before {\n content: '';\n width: 18px; height: 18px;\n min-width: 18px;\n border: 1.5px solid #D8DCE4;\n border-radius: 4px;\n background: #F0F0F2;\n transition: var(--transition);\n display: flex; align-items: center; justify-content: center;\n}\n\n.sd-option input[type=\"radio\"] + .sd-option-label::before {\n border-radius: 50%;\n}\n\n\/* \u9078\u629e\u6e08\u307f\u72b6\u614b *\/\n.sd-option input:checked + .sd-option-label {\n border-color: #1B2A4A;\n background: rgba(27,42,74,0.05);\n color: #1B2A4A;\n box-shadow: 0 0 0 3px rgba(27,42,74,0.10);\n}\n\n.sd-option input:checked + .sd-option-label::before {\n background: #1B2A4A;\n border-color: #1B2A4A;\n box-shadow: inset 0 0 0 3px rgba(255,255,255,0.85);\n}\n\n\/* \u30db\u30d0\u30fc *\/\n@media (hover: hover) {\n .sd-option-label:hover {\n border-color: #1B2A4A;\n background: rgba(27,42,74,0.03);\n color: #1B2A4A;\n transform: translateY(-1px);\n box-shadow: var(--shadow-sm);\n }\n}\n\n\/* ---- Error ---- *\/\n.sd-error-msg {\n display: none;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n font-weight: 600;\n color: #1B2A4A;\n margin: 8px 0 0;\n padding: 10px 14px;\n background: #EEF1F8;\n border: 1px solid #B0BCDA;\n border-radius: var(--radius-sm);\n}\n\n.sd-error-msg.show { display: flex; }\n\n\/* ---- Navigation ---- *\/\n.sd-nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-top: 28px;\n}\n\n.sd-nav-left { flex: 1; }\n.sd-nav-right { flex: 1; display: flex; justify-content: flex-end; }\n\n.sd-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 0.04em;\n padding: 14px 24px;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n min-height: 50px;\n -webkit-tap-highlight-color: transparent;\n}\n\n.sd-btn-primary {\n background: var(--accent);\n color: #fff;\n box-shadow: 0 3px 10px rgba(27,42,74,0.22);\n}\n\n.sd-btn-primary:hover {\n background: var(--accent-hover);\n transform: translateY(-1px);\n box-shadow: 0 6px 18px rgba(27,42,74,0.30);\n}\n\n.sd-btn-primary:active { transform: translateY(0); }\n\n.sd-btn-ghost {\n background: transparent;\n color: var(--ink-mid);\n border: 1.5px solid var(--border);\n}\n\n.sd-btn-ghost:hover {\n border-color: var(--ink-mid);\n color: var(--ink);\n background: rgba(0,0,0,0.02);\n}\n\n\/* \u30b9\u30de\u30db\uff1a\u30ca\u30d3\u30dc\u30bf\u30f3\u3092\u7e26\u306b *\/\n@media (max-width: 480px) {\n .sd-nav {\n flex-direction: column-reverse;\n gap: 10px;\n }\n .sd-nav-left, .sd-nav-right { flex: unset; width: 100%; }\n .sd-btn { width: 100%; }\n}\n\n\/* ================================================================\n RESULT SCREEN\n================================================================ *\/\n.sd-result { display: none; }\n.sd-result.active {\n display: block!important;\n animation: fadeUp 0.4s ease forwards;\n}\n\n\/* \u7d50\u679c\u30d8\u30c3\u30c0\u30fc *\/\n.sd-result-header {\n margin-bottom: 28px;\n}\n\n.sd-result-eyebrow {\n font-family: 'Outfit', sans-serif;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.18em;\n color: var(--ink-light);\n text-transform: uppercase;\n margin-bottom: 8px;\n}\n\n.sd-result-title {\n font-size: clamp(20px, 4vw, 28px);\n font-weight: 900;\n color: var(--ink);\n line-height: 1.3;\n letter-spacing: -0.02em;\n margin-bottom: 6px;\n}\n\n.sd-result-sub {\n font-size: 13px;\n color: var(--ink-light);\n}\n\n\/* \u7d50\u679c\u30ab\u30fc\u30c9 *\/\n.sd-result-cards {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 24px;\n}\n\n.sd-result-card {\n background: var(--bg-card);\n border: 1.5px solid var(--border);\n border-radius: var(--radius);\n padding: 20px 22px;\n position: relative;\n overflow: hidden;\n transition: box-shadow var(--transition);\n}\n\n.sd-result-card:hover { box-shadow: var(--shadow); }\n\n\/* \u30e9\u30f3\u30af\u5225\u5de6\u30dc\u30fc\u30c0\u30fc *\/\n.sd-result-card::before {\n content: '';\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 4px;\n}\n\n.sd-result-card.rank-1 { border-color: rgba(27,42,74,0.3); background: rgba(27,42,74,0.02); }\n.sd-result-card.rank-1::before { background: var(--accent); }\n.sd-result-card.rank-2::before { background: var(--silver); }\n.sd-result-card.rank-3::before { background: var(--bronze); }\n\n\/* \u30ab\u30fc\u30c9\u30d8\u30c3\u30c0\u30fc\u884c *\/\n.sd-card-top {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n flex-wrap: wrap;\n}\n\n.sd-rank-badge {\n font-family: 'Outfit', sans-serif;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.1em;\n padding: 3px 10px;\n border-radius: 100px;\n}\n\n.rank-1 .sd-rank-badge { background: rgba(27,42,74,0.10); color: #1B2A4A; }\n.rank-2 .sd-rank-badge { background: rgba(107,114,128,0.1); color: var(--silver); }\n.rank-3 .sd-rank-badge { background: rgba(146,116,90,0.1); color: var(--bronze); }\n\n.sd-card-name {\n font-size: 16px;\n font-weight: 800;\n color: var(--ink);\n flex: 1;\n}\n\n.sd-severity-badge {\n font-size: 11px;\n font-weight: 700;\n padding: 4px 12px;\n border-radius: 100px;\n letter-spacing: 0.03em;\n white-space: nowrap;\n}\n\n.sev-low { background: #EEF2FA; color: #3D5A8A; border: 1px solid #B8C8E4; }\n.sev-mid { background: #E4EAF5; color: #1B3870; border: 1px solid #9AAED4; }\n.sev-high { background: #D8E1F2; color: #1B2A4A; border: 1px solid #7A96C8; font-weight: 800; }\n\n\/* \u30b9\u30b3\u30a2\u30d0\u30fc *\/\n.sd-score-track {\n height: 5px;\n background: var(--border);\n border-radius: 3px;\n overflow: hidden;\n margin-bottom: 12px;\n}\n\n.sd-score-fill {\n height: 100%;\n border-radius: 3px;\n width: 0%;\n transition: width 1s cubic-bezier(0.4,0,0.2,1) 0.2s;\n}\n\n.rank-1 .sd-score-fill { background: linear-gradient(90deg, #1B2A4A, #3D5A99); }\n.rank-2 .sd-score-fill { background: var(--silver); }\n.rank-3 .sd-score-fill { background: var(--bronze); }\n\n.sd-card-desc {\n font-size: 13px;\n color: var(--ink-mid);\n line-height: 1.8;\n}\n\n\/* Next Step *\/\n.sd-next-step {\n background: var(--bg-dark);\n border-radius: var(--radius);\n padding: 22px 24px;\n margin-bottom: 28px;\n position: relative;\n overflow: hidden;\n}\n\n.sd-next-step a {\n display: block;\n text-align: center;\n}\n\n\n.sd-next-step::after {\n content: '';\n position: absolute;\n top: -30px; right: -30px;\n width: 120px; height: 120px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(61,90,153,0.90), transparent 70%);\n pointer-events: none;\n}\n\n.sd-next-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.18em;\n color: rgba(255,255,255,0.55);\n text-transform: uppercase;\n margin-bottom: 10px;\n}\n\n.sd-next-text {\n font-size: 15px;\n font-weight: 600;\n color: rgba(255,255,255,0.9);\n line-height: 1.7;\n}\n\n.sd-next-text a {\n display: block;\n text-align: center;\n}\n\n\/* CTA \u30bb\u30af\u30b7\u30e7\u30f3 *\/\n.sd-cta {\n border-top: 1px solid var(--border);\n padding-top: 28px;\n}\n\n.sd-cta-btns {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n@media (max-width: 480px) {\n .sd-cta-btns { grid-template-columns: 1fr; }\n}\n\n.sd-cta-primary {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: var(--accent);\n color: #fff;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 14px;\n font-weight: 700;\n padding: 16px 20px;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n letter-spacing: 0.03em;\n box-shadow: 0 3px 10px rgba(27,42,74,0.22);\n min-height: 52px;\n}\n\n.sd-cta-primary:hover {\n background: var(--accent-hover);\n transform: translateY(-1px);\n box-shadow: 0 6px 18px rgba(27,42,74,0.30);\n}\n\n.sd-cta-secondary {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: var(--bg-card);\n color: var(--ink);\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 14px;\n font-weight: 700;\n padding: 16px 20px;\n border: 1.5px solid var(--border);\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n letter-spacing: 0.03em;\n min-height: 52px;\n}\n\n.sd-cta-secondary:hover {\n border-color: var(--ink);\n background: var(--ink);\n color: #fff;\n}\n\n.sd-cta-note {\n font-size: 12px;\n color: var(--ink-light);\n line-height: 1.85;\n border-left: 3px solid #1B2A4A;\n padding-left: 14px;\n margin-bottom: 20px;\n}\n\n.sd-retry-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n background: none;\n border: none;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 13px;\n color: var(--ink-light);\n cursor: pointer;\n padding: 12px;\n transition: color var(--transition);\n -webkit-tap-highlight-color: transparent;\n}\n\n.sd-retry-btn:hover { color: var(--ink); }\n\n.sd-cta {\n border-top: 1px solid var(--border);\n padding-top: 28px;\n display: none; \/* \u2190 \u8ffd\u52a0 *\/\n}\n\n.sd-result.active .sd-cta {\n display: block; \/* \u2190 \u8ffd\u52a0 *\/\n}\n\n\n\/* ================================================================\n SHARED UTILITIES\n================================================================ *\/\n.hidden { display: none !important; }\n<\/style>\n<\/head>\n<body>\n\n\n <\/div>\n <button class=\"loss-btn\" onclick=\"openShindan()\">\n \u7c21\u6613\u30ed\u30b9\u8a3a\u65ad\u3092\u306f\u3058\u3081\u308b\n <span class=\"loss-btn-icon\">\u2192<\/span>\n <\/button>\n <p class=\"loss-note\">\u203b\u672c\u8a3a\u65ad\u306f\u7c21\u6613\u7684\u306a\u4eee\u5224\u5b9a\u3067\u3059\u3002\u8a73\u7d30\u306a\u78ba\u8a8d\u306b\u306f\u3001\u73fe\u5834\u6761\u4ef6\u30fb\u904b\u7528\u72b6\u6cc1\u30fb\u8a2d\u5099\u72b6\u6cc1\u306e\u78ba\u8a8d\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n\n<div id=\"shindan-app\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad\">\n\n \n <div class=\"sd-header\">\n <div class=\"sd-header-left\">\n <span class=\"sd-header-logo\">\u7a7a\u8abf\u7701\u30a8\u30cd.com<\/span>\n <span class=\"sd-header-sep\"><\/span>\n <span class=\"sd-header-sub\">\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad<\/span>\n <\/div>\n <button class=\"sd-close-btn\" onclick=\"closeShindan()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n \u9589\u3058\u308b\n <\/button>\n <\/div>\n\n \n <div class=\"sd-progress-wrap\" id=\"sd-progress-wrap\" style=\"display:none;\">\n <div class=\"sd-step-dots\">\n <div class=\"sd-step-dot\" id=\"dot-1\"><\/div>\n <div class=\"sd-step-dot\" id=\"dot-2\"><\/div>\n <div class=\"sd-step-dot\" id=\"dot-3\"><\/div>\n <div class=\"sd-step-dot\" id=\"dot-4\"><\/div>\n <\/div>\n <span class=\"sd-progress-label\" id=\"sd-progress-label\">\u8cea\u554f 1 \/ 4<\/span>\n <\/div>\n\n \n <div class=\"sd-scroll\">\n <div class=\"sd-body\">\n\n \n <div id=\"sd-intro\" class=\"sd-intro\">\n <div class=\"sd-intro-icon\">\ud83c\udf21\ufe0f<\/div>\n <h1 class=\"sd-intro-title\">3\u5206\u3067\u308f\u304b\u308b<br><span>\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad<\/span><\/h1>\n <p class=\"sd-intro-desc\">\n \u4ee5\u4e0b\u306e\u8cea\u554f\u306b\u304a\u7b54\u3048\u3044\u305f\u3060\u304f\u3053\u3068\u3067\u3001\u73fe\u5834\u3067\u8d77\u304d\u3066\u3044\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u7a7a\u8abf\u30ed\u30b9\u3092\u4eee\u5224\u5b9a\u3057\u307e\u3059\u3002\n \u7d50\u679c\u306f\u3001\u5236\u5fa1\u30fb\u7a7a\u6c17\u74b0\u5883\u30fb\u5916\u4e71\u5e72\u6e09\u30fb\u8a2d\u5099\u52a3\u5316\u30fb\u904b\u7528\u30fb\u8a2d\u5099\u69cb\u6210\u306a\u3069\u306e\u8996\u70b9\u304b\u3089\u8868\u793a\u3057\u307e\u3059\u3002\n <\/p>\n <div class=\"sd-intro-chips\">\n <span class=\"sd-intro-chip\">\u23f1 \u6240\u8981\u6642\u9593 \u7d043\u5206<\/span>\n <span class=\"sd-intro-chip\">\ud83d\udccb \u51684\u554f\u30fb\u9078\u629e\u5f0f<\/span>\n <span class=\"sd-intro-chip\">\ud83d\udd12 \u767b\u9332\u30fb\u5165\u529b\u4e0d\u8981<\/span>\n <span class=\"sd-intro-chip\">\ud83d\udcca 6\u5206\u985e\u3067\u7d50\u679c\u8868\u793a<\/span>\n <\/div>\n <button class=\"sd-intro-start\" onclick=\"startQuiz()\">\n \u8a3a\u65ad\u3092\u306f\u3058\u3081\u308b\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <hr class=\"sd-intro-divider\">\n <p class=\"sd-intro-disclaimer\">\n \u203b\u672c\u8a3a\u65ad\u306f\u7c21\u6613\u7684\u306a\u4eee\u5224\u5b9a\u3067\u3059\u3002\u5b9f\u969b\u306e\u73fe\u5834\u3067\u306f\u8907\u5408\u7684\u306a\u8981\u56e0\u304c\u7d61\u307f\u5408\u3046\u305f\u3081\u3001\u8a73\u7d30\u306a\u6539\u5584\u63d0\u6848\u306b\u306f\u73fe\u5834\u8abf\u67fb\u30fb\u8a2d\u5099\u78ba\u8a8d\u30fb\u904b\u7528\u72b6\u6cc1\u306e\u30d2\u30a2\u30ea\u30f3\u30b0\u304c\u5fc5\u8981\u3067\u3059\u3002\n <\/p>\n <\/div>\n\n \n <div id=\"sd-quiz\" style=\"display:none;\">\n\n \n <div class=\"sd-question\" id=\"q1\">\n <div class=\"sd-q-eyebrow\">\n <span class=\"sd-q-num\">Q 01<\/span>\n <span class=\"sd-q-type\">\u5358\u4e00\u9078\u629e<\/span>\n <\/div>\n <p class=\"sd-q-title\">\u3042\u306a\u305f\u306e\u73fe\u5834\u306b<br>\u8fd1\u3044\u3082\u306e\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044<\/p>\n <div class=\"sd-options q1-grid\" id=\"q1-options\"><\/div>\n <div class=\"sd-error-msg\" id=\"q1-error\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n 1\u3064\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\n <\/div>\n <div class=\"sd-nav\">\n <div class=\"sd-nav-left\"><\/div>\n <div class=\"sd-nav-right\">\n <button class=\"sd-btn sd-btn-primary\" onclick=\"goNext(1)\">\n \u6b21\u3078\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sd-question\" id=\"q2\">\n <div class=\"sd-q-eyebrow\">\n <span class=\"sd-q-num\">Q 02<\/span>\n <span class=\"sd-q-type\">\u8907\u6570\u9078\u629e\u53ef<\/span>\n <\/div>\n <p class=\"sd-q-title\">\u73fe\u5728\u3001\u3069\u306e\u3088\u3046\u306a\u3053\u3068\u306b<br>\u56f0\u3063\u3066\u3044\u307e\u3059\u304b<\/p>\n <div class=\"sd-options\" id=\"q2-options\"><\/div>\n <div class=\"sd-error-msg\" id=\"q2-error\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n 1\u3064\u4ee5\u4e0a\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\n <\/div>\n <div class=\"sd-nav\">\n <div class=\"sd-nav-left\">\n <button class=\"sd-btn sd-btn-ghost\" onclick=\"goPrev(2)\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg>\n \u623b\u308b\n <\/button>\n <\/div>\n <div class=\"sd-nav-right\">\n <button class=\"sd-btn sd-btn-primary\" onclick=\"goNext(2)\">\n \u6b21\u3078\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sd-question\" id=\"q3\">\n <div class=\"sd-q-eyebrow\">\n <span class=\"sd-q-num\">Q 03<\/span>\n <span class=\"sd-q-type\">\u8907\u6570\u9078\u629e\u53ef<\/span>\n <\/div>\n <p class=\"sd-q-title\">\u7a7a\u8abf\u306e\u4f7f\u3044\u65b9\u306b\u3064\u3044\u3066<br>\u8fd1\u3044\u3082\u306e\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044<\/p>\n <div class=\"sd-options\" id=\"q3-options\"><\/div>\n <div class=\"sd-error-msg\" id=\"q3-error\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n 1\u3064\u4ee5\u4e0a\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\n <\/div>\n <div class=\"sd-nav\">\n <div class=\"sd-nav-left\">\n <button class=\"sd-btn sd-btn-ghost\" onclick=\"goPrev(3)\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg>\n \u623b\u308b\n <\/button>\n <\/div>\n <div class=\"sd-nav-right\">\n <button class=\"sd-btn sd-btn-primary\" onclick=\"goNext(3)\">\n \u6b21\u3078\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sd-question\" id=\"q4\">\n <div class=\"sd-q-eyebrow\">\n <span class=\"sd-q-num\">Q 04<\/span>\n <span class=\"sd-q-type\">\u8907\u6570\u9078\u629e\u53ef<\/span>\n <\/div>\n <p class=\"sd-q-title\">\u73fe\u5834\u306e\u72b6\u614b\u3068\u3057\u3066<br>\u6c17\u306b\u306a\u308b\u3082\u306e\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044<\/p>\n <div class=\"sd-options\" id=\"q4-options\"><\/div>\n <div class=\"sd-error-msg\" id=\"q4-error\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n 1\u3064\u4ee5\u4e0a\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\n <\/div>\n <div class=\"sd-nav\">\n <div class=\"sd-nav-left\">\n <button class=\"sd-btn sd-btn-ghost\" onclick=\"goPrev(4)\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg>\n \u623b\u308b\n <\/button>\n <\/div>\n <div class=\"sd-nav-right\">\n <button class=\"sd-btn sd-btn-primary\" onclick=\"showResult()\">\n \u8a3a\u65ad\u7d50\u679c\u3092\u898b\u308b\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n<div id=\"sd-result\" class=\"sd-result\">\n <div class=\"sd-result-header\">\n <p class=\"sd-result-eyebrow\">Diagnosis Result<\/p>\n <h2 class=\"sd-result-title\" id=\"result-title\">\u3042\u306a\u305f\u306e\u73fe\u5834\u306b\u6f5c\u3080<br>\u7a7a\u8abf\u30ed\u30b9\u306e\u50be\u5411<\/h2>\n <p class=\"sd-result-sub\">\u30b9\u30b3\u30a2\u306e\u9ad8\u3044\u9806\u306b\u4e0a\u4f4d3\u5206\u985e\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059<\/p>\n <\/div>\n\n <div class=\"sd-result-cards\" id=\"result-cards\"><\/div>\n\n <div class=\"sd-next-step\" id=\"next-step-box\">\n <div class=\"sd-next-label\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n \u304a\u3059\u3059\u3081\u306e\u6b21\u306e\u4e00\u6b69\n <\/div>\n <p class=\"sd-next-text\" id=\"next-step-text\"><\/p>\n <a id=\"next-step-btn\" href=\"#\" style=\"display:none;margin-top:14px;padding:10px 22px;background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.3);border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;letter-spacing:0.04em;\">\u30de\u30f3\u30ac\u3067\u5236\u5fa1\u7cfb\u30ed\u30b9\u3092\u898b\u308b<\/a>\n <\/div>\n\n <div class=\"sd-cta\">\n <div class=\"sd-cta-btns\">\n <a href=\"https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b\/\" class=\"sd-cta-primary\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><\/svg>\n \u8a73\u3057\u304f\u76f8\u8ac7\u3059\u308b\n <\/a>\n <a href=\"https:\/\/xn--ickxd208wu5c9w0a.com\/%e7%9c%81%e3%82%a8%e3%83%8d%e5%8f%af%e8%a6%96%e5%8c%96%e3%82%ac%e3%82%a4%e3%83%89-3\/\" class=\"sd-cta-secondary\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\n \u30b5\u30fc\u30e2\uff0bAI\u8a3a\u65ad\u3092\u898b\u308b\n <\/a>\n <\/div>\n <p class=\"sd-cta-note\">\n \u7c21\u6613\u8a3a\u65ad\u306f\u5165\u53e3\u3067\u3059\u3002\u5b9f\u969b\u306e\u73fe\u5834\u3067\u306f\u3001\u5916\u6c17\u30fb\u63db\u6c17\u30fb\u4eba\u306e\u52d5\u304d\u30fb\u5185\u90e8\u767a\u71b1\u30fb\u6c17\u6d41\u30fb\u904b\u7528\u6761\u4ef6\u306a\u3069\u304c\u91cd\u306a\u3063\u3066\u640d\u5931\u304c\u751f\u307e\u308c\u307e\u3059\u3002\n \u53ef\u8996\u5316\u304b\u3089\u640d\u5931\u8981\u56e0\u306e\u78ba\u8a8d\u3001\u6539\u5584\u8a2d\u8a08\u30fb\u691c\u8a3c\u307e\u3067\u3054\u4e00\u7dd2\u306b\u6574\u7406\u3044\u305f\u3057\u307e\u3059\u3002\n <\/p>\n <button class=\"sd-retry-btn\" onclick=\"restartShindan()\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"1 4 1 10 7 10\"\/><path d=\"M3.51 15a9 9 0 102.13-9.36L1 10\"\/><\/svg>\n \u3082\u3046\u4e00\u5ea6\u8a3a\u65ad\u3059\u308b\n <\/button>\n <\/div>\n\n<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<script>\n\/* ================================================================\n \u8a3a\u65ad\u30c7\u30fc\u30bf\u5b9a\u7fa9\n \u3053\u3053\u3092\u7de8\u96c6\u3059\u308b\u3053\u3068\u3067\u8cea\u554f\u30fb\u9078\u629e\u80a2\u30fb\u30b9\u30b3\u30a2\u30fb\u8aac\u660e\u6587\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\n================================================================ *\/\n\nconst CATEGORIES = {\n C: { name: '\u5236\u5fa1\u7cfb\u30ed\u30b9' },\n A: { name: '\u7a7a\u6c17\u74b0\u5883\u7cfb\u30ed\u30b9' },\n I: { name: '\u5916\u4e71\u30fb\u5e72\u6e09\u7cfb\u30ed\u30b9' },\n D: { name: '\u8a2d\u5099\u52a3\u5316\u7cfb\u30ed\u30b9' },\n O: { name: '\u904b\u7528\u7cfb\u30ed\u30b9' },\n S: { name: '\u8a2d\u5099\u69cb\u6210\u7cfb\u30ed\u30b9' }\n};\n\nconst PRIORITY = ['A','C','I','D','O','S']; \/\/ \u540c\u70b9\u6642\u306e\u512a\u5148\u9806\n\nconst CATEGORY_DESC = {\n C: '\u8a2d\u5b9a\u6e29\u5ea6\u30fb\u904b\u8ee2\u6642\u9593\u30fb\u7acb\u3061\u4e0a\u3052\u30fb\u7121\u4eba\u6642\u9593\u5e2f\u306e\u904b\u8ee2\u306a\u3069\u3001\u7a7a\u8abf\u306e\u4f7f\u3044\u65b9\u3084\u5236\u5fa1\u65b9\u6cd5\u306b\u8d77\u56e0\u3059\u308b\u30ed\u30b9\u304c\u7591\u308f\u308c\u307e\u3059\u3002\u6bd4\u8f03\u7684\u7740\u624b\u3057\u3084\u3059\u3044\u6539\u5584\u304c\u898b\u3064\u304b\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002',\n A: '\u6e29\u5ea6\u30e0\u30e9\u30fb\u6c17\u6d41\u306e\u504f\u308a\u30fb\u51b7\u6c17\u3060\u307e\u308a\u30fb\u6696\u6c17\u3060\u307e\u308a\u306a\u3069\u306b\u3088\u308a\u3001\u6295\u5165\u3057\u305f\u30a8\u30cd\u30eb\u30ae\u30fc\u304c\u5feb\u9069\u6027\u306b\u5341\u5206\u5909\u63db\u3055\u308c\u3066\u3044\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002',\n I: '\u63db\u6c17\u30fb\u51fa\u5165\u53e3\u30fb\u7a93\u30fb\u65e5\u5c04\u30fb\u5468\u8fba\u8a2d\u5099\u306a\u3069\u306e\u5f71\u97ff\u3067\u3001\u7a7a\u8abf\u304c\u672c\u6765\u4ee5\u4e0a\u306e\u8ca0\u8377\u3092\u53d7\u3051\u3066\u3044\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002',\n D: '\u6c5a\u308c\u30fb\u4fdd\u5b88\u4e0d\u8db3\u30fb\u8a2d\u5099\u52a3\u5316\u30fb\u5ba4\u5916\u6a5f\u307e\u308f\u308a\u306e\u6761\u4ef6\u306a\u3069\u306b\u3088\u308a\u3001\u672c\u6765\u306e\u6027\u80fd\u3092\u5341\u5206\u767a\u63ee\u3067\u304d\u3066\u3044\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002',\n O: '\u55b6\u696d\u6642\u9593\u30fb\u5728\u5ba4\u72b6\u6cc1\u30fb\u30ec\u30a4\u30a2\u30a6\u30c8\u30fb\u64cd\u4f5c\u30eb\u30fc\u30eb\u306a\u3069\u3068\u7a7a\u8abf\u306e\u4f7f\u3044\u65b9\u304c\u5408\u3063\u3066\u3044\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002',\n S: '\u8a2d\u5099\u5bb9\u91cf\u30fb\u7cfb\u7d71\u306e\u5206\u3051\u65b9\u30fb\u914d\u7f6e\u30fb\u65b9\u5f0f\u306a\u3069\u3001\u69cb\u6210\u9762\u306b\u8d77\u56e0\u3059\u308b\u30ed\u30b9\u304c\u542b\u307e\u308c\u3066\u3044\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002'\n};\n\nconst NEXT_STEP = {\n C: '\u904b\u8ee2\u6642\u9593\u3068\u8a2d\u5b9a\u6e29\u5ea6\u306e\u898b\u76f4\u3057\u304b\u3089\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002',\n A: '\u6e29\u5ea6\u30e0\u30e9\u3084\u6c17\u6d41\u306e\u504f\u308a\u306e\u53ef\u8996\u5316\u304b\u3089\u59cb\u3081\u3066\u304f\u3060\u3055\u3044\u3002',\n I: '\u63db\u6c17\u3084\u958b\u53e3\u90e8\u3084\u5468\u8fba\u8a2d\u5099\u3068\u306e\u5e72\u6e09\u78ba\u8a8d\u304c\u6709\u52b9\u3067\u3059\u3002',\n D: '\u5185\u90e8\u72b6\u614b\u3084\u4fdd\u5b88\u72b6\u6cc1\u3084\u5ba4\u5916\u6a5f\u307e\u308f\u308a\u306e\u6761\u4ef6\u78ba\u8a8d\u304c\u6709\u52b9\u3067\u3059\u3002',\n O: '\u73fe\u5834\u306e\u4f7f\u3044\u65b9\u3068\u64cd\u4f5c\u30eb\u30fc\u30eb\u3068\u5728\u5ba4\u5b9f\u614b\u306e\u6574\u7406\u304c\u6709\u52b9\u3067\u3059\u3002',\n S: '\u8a2d\u5099\u306e\u5206\u3051\u65b9\u3084\u80fd\u529b\u3084\u914d\u7f6e\u3092\u542b\u3081\u305f\u78ba\u8a8d\u304c\u6709\u52b9\u3067\u3059\u3002'\n};\n\n\nconst NEXT_STEP_LINKS = {\n C: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e5%88%b6%e5%be%a1%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n A: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e7%a9%ba%e6%b0%97%e7%92%b0%e5%a2%83%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n I: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e5%a4%96%e4%b9%b1%e3%83%bb%e5%b9%b2%e6%b8%89%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n D: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e8%a8%ad%e5%82%99%e5%8a%a3%e5%8c%96%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n O: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e9%81%8b%e7%94%a8%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n S: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e8%a8%ad%e5%82%99%e6%a7%8b%e6%88%90%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n};\n\nconst NEXT_STEP_BTN_LABEL = {\n C: '\u30de\u30f3\u30ac\u3067\u5236\u5fa1\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n A: '\u30de\u30f3\u30ac\u3067\u7a7a\u6c17\u74b0\u5883\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n I: '\u30de\u30f3\u30ac\u3067\u5916\u4e71\u30fb\u5e72\u6e09\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n D: '\u30de\u30f3\u30ac\u3067\u8a2d\u5099\u52a3\u5316\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n O: '\u30de\u30f3\u30ac\u3067\u904b\u7528\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n S: '\u30de\u30f3\u30ac\u3067\u8a2d\u5099\u69cb\u6210\u7cfb\u30ed\u30b9\u3092\u898b\u308b'\n};\n\n\nfunction getSeverity(score) {\n if (score >= 12) return { text: '\u5f37\u304f\u7591\u308f\u308c\u307e\u3059', cls: 'sev-high' };\n if (score >= 8) return { text: '\u53ef\u80fd\u6027\u304c\u9ad8\u3044\u3067\u3059', cls: 'sev-mid' };\n return { text: '\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059', cls: 'sev-low' };\n}\n\n\/* ---- \u30b9\u30b3\u30a2\u30c7\u30fc\u30bf ---- *\/\nconst Q1_OPTIONS = [\n { label: '\u30aa\u30d5\u30a3\u30b9', scores: { C:2, A:1, O:2, S:1 } },\n { label: '\u5c0f\u58f2\u5e97\u8217', scores: { C:1, A:2, I:2, O:1 } },\n { label: '\u98f2\u98df\u5e97', scores: { I:3, A:2, D:1 } },\n { label: '\u30b9\u30fc\u30d1\u30fc\u30de\u30fc\u30b1\u30c3\u30c8', scores: { I:3, A:2, D:2, S:1 } },\n { label: '\u5de5\u5834\u30fb\u5009\u5eab', scores: { A:2, I:2, S:3, D:1 } },\n { label: '\u30ac\u30bd\u30ea\u30f3\u30b9\u30bf\u30f3\u30c9', scores: { I:3, A:1, D:1 } },\n { label: '\u533b\u7642\u30fb\u4ecb\u8b77\u65bd\u8a2d', scores: { C:2, A:2, O:2 } },\n { label: '\u5bbf\u6cca\u65bd\u8a2d', scores: { C:2, O:2, S:1, D:1 } },\n { label: '\u5b66\u6821\u30fb\u516c\u5171\u65bd\u8a2d', scores: { C:1, O:2, S:2 } },\n { label: '\u305d\u306e\u4ed6', scores: { C:1, A:1, I:1, D:1, O:1, S:1 } }\n];\n\nconst Q2_OPTIONS = [\n { label: '\u96fb\u6c17\u4ee3\u304c\u9ad8\u3044', scores: { C:2, D:2, O:1 } },\n { label: '\u6691\u3044\u30fb\u5bd2\u3044\u3068\u3044\u3046\u58f0\u304c\u591a\u3044', scores: { A:3, C:1 } },\n { label: '\u5834\u6240\u306b\u3088\u3063\u3066\u52b9\u304d\u65b9\u304c\u9055\u3046', scores: { A:3, S:2 } },\n { label: '\u8a2d\u5b9a\u6e29\u5ea6\u3092\u3088\u304f\u5909\u66f4\u3057\u3066\u3044\u308b', scores: { C:3, O:2 } },\n { label: '\u63db\u6c17\u3092\u3059\u308b\u3068\u52b9\u304d\u304c\u60aa\u304f\u306a\u308b', scores: { I:3, C:1 } },\n { label: '\u51fa\u5165\u53e3\u4ed8\u8fd1\u3060\u3051\u6691\u3044\u30fb\u5bd2\u3044', scores: { I:3, A:1 } },\n { label: '\u53a8\u623f\u30fb\u30b7\u30e7\u30fc\u30b1\u30fc\u30b9\u30fb\u767a\u71b1\u8a2d\u5099\u306a\u3069\u306e\u5f71\u97ff\u304c\u3042\u308b', scores: { I:3, A:2 } },\n { label: '\u55b6\u696d\u524d\u5f8c\u306e\u904b\u8ee2\u304c\u9577\u3044\u6c17\u304c\u3059\u308b', scores: { C:3, O:2 } },\n { label: '\u4eba\u304c\u3044\u306a\u3044\u6642\u9593\u3082\u904b\u8ee2\u3057\u3066\u3044\u308b', scores: { O:3, C:2 } },\n { label: '\u8a2d\u5099\u304c\u53e4\u304f\u52b9\u7387\u304c\u843d\u3061\u3066\u3044\u308b\u6c17\u304c\u3059\u308b', scores: { D:3, S:1 } },\n { label: '\u4f55\u304c\u539f\u56e0\u304b\u308f\u304b\u3089\u306a\u3044', scores: { A:1, C:1, I:1, D:1, O:1, S:1 } }\n];\n\nconst Q3_OPTIONS = [\n { label: '\u8907\u6570\u4eba\u304c\u7a7a\u8abf\u3092\u64cd\u4f5c\u3057\u3066\u3044\u308b', scores: { C:3, O:2 } },\n { label: '\u73fe\u5834\u5224\u65ad\u3067\u8a2d\u5b9a\u6e29\u5ea6\u3092\u5909\u3048\u308b\u3053\u3068\u304c\u591a\u3044', scores: { C:3, O:2 } },\n { label: '\u55b6\u696d\u6642\u9593\u30fb\u7a3c\u50cd\u6642\u9593\u304c\u9577\u3044', scores: { O:2, C:1, D:1 } },\n { label: '\u4eba\u306e\u51fa\u5165\u308a\u304c\u591a\u3044', scores: { I:3, A:1 } },\n { label: '\u5b63\u7bc0\u3067\u60a9\u307f\u304c\u5927\u304d\u304f\u5909\u308f\u308b', scores: { A:2, I:2, C:1 } },\n { label: '\u30ec\u30a4\u30a2\u30a6\u30c8\u5909\u66f4\u5f8c\u3001\u7a7a\u8abf\u8a2d\u5b9a\u3092\u898b\u76f4\u3057\u3066\u3044\u306a\u3044', scores: { O:3, S:2, A:1 } },\n { label: '\u63db\u6c17\u3092\u5f37\u3081\u3066\u304b\u3089\u52b9\u304d\u304c\u5909\u308f\u3063\u305f', scores: { I:3, C:1 } },\n { label: '\u4e00\u90e8\u3060\u3051\u6691\u3044\u30fb\u5bd2\u3044\u30a8\u30ea\u30a2\u304c\u3042\u308b', scores: { A:3, S:2 } },\n { label: '\u7acb\u3061\u4e0a\u3052\u6642\u306b\u4e00\u6c17\u306b\u8ca0\u8377\u304c\u304b\u304b\u308b', scores: { C:3, D:1 } },\n { label: '24\u6642\u9593\u904b\u8ee2\u307e\u305f\u306f\u305d\u308c\u306b\u8fd1\u3044\u904b\u8ee2\u304c\u3042\u308b', scores: { O:2, D:2, C:1 } }\n];\n\nconst Q4_OPTIONS = [\n { label: '\u5439\u51fa\u53e3\u306e\u8fd1\u304f\u306f\u5bd2\u3044\u304c\u3001\u96e2\u308c\u308b\u3068\u6691\u3044', scores: { A:3, S:2 } },\n { label: '\u5929\u4e95\u4ed8\u8fd1\u3068\u8db3\u5143\u3067\u4f53\u611f\u304c\u9055\u3046', scores: { A:3, I:1 } },\n { label: '\u51fa\u5165\u53e3\u3084\u7a93\u307e\u308f\u308a\u306e\u5f71\u97ff\u304c\u5927\u304d\u3044', scores: { I:3, A:1 } },\n { label: '\u5ba4\u5916\u6a5f\u307e\u308f\u308a\u306e\u74b0\u5883\u304c\u3088\u304f\u306a\u3044\u6c17\u304c\u3059\u308b', scores: { D:3, I:1 } },\n { label: '\u30d5\u30a3\u30eb\u30bf\u30fc\u3084\u5185\u90e8\u6e05\u6383\u306e\u72b6\u6cc1\u304c\u6c17\u306b\u306a\u308b', scores: { D:3, O:1 } },\n { label: '\u51b7\u623f\u306f\u52b9\u304f\u304c\u6e7f\u3063\u307d\u3044', scores: { A:2, D:2 } },\n { label: '\u6696\u623f\u306f\u52b9\u304f\u304c\u306e\u307c\u305b\u308b\u30fb\u8db3\u5143\u304c\u5bd2\u3044', scores: { A:3 } },\n { label: '\u4e00\u90e8\u8a2d\u5099\u3068\u306e\u5e72\u6e09\u304c\u898b\u3048\u308b', scores: { I:3, S:1 } },\n { label: '\u7a7a\u8abf\u306f\u52d5\u3044\u3066\u3044\u308b\u304c\u5feb\u9069\u3068\u306f\u8a00\u3048\u306a\u3044', scores: { A:2, C:1, D:1 } },\n { label: '\u80fd\u529b\u4e0d\u8db3\u306a\u306e\u304b\u4f7f\u3044\u65b9\u306e\u554f\u984c\u306a\u306e\u304b\u5206\u304b\u3089\u306a\u3044', scores: { S:2, C:1, O:1 } }\n];\n\n\/* ================================================================\n \u30a2\u30d7\u30ea\u72b6\u614b\n================================================================ *\/\nlet currentQ = 0;\nconst answers = { q1: null, q2: [], q3: [], q4: [] };\n\n\/* ================================================================\n \u521d\u671f\u5316\n================================================================ *\/\ndocument.addEventListener('DOMContentLoaded', () => {\n renderOptions('q1-options', Q1_OPTIONS, 'radio', 'q1');\n renderOptions('q2-options', Q2_OPTIONS, 'checkbox', 'q2');\n renderOptions('q3-options', Q3_OPTIONS, 'checkbox', 'q3');\n renderOptions('q4-options', Q4_OPTIONS, 'checkbox', 'q4');\n});\n\nfunction renderOptions(containerId, options, type, name) {\n const container = document.getElementById(containerId);\n container.innerHTML = options.map((opt, i) => `\n <label class=\"sd-option\">\n <input type=\"${type}\" name=\"${name}\" value=\"${i}\" aria-label=\"${opt.label}\">\n <span class=\"sd-option-label\">${opt.label}<\/span>\n <\/label>\n `).join('');\n}\n\n\/* ================================================================\n \u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u958b\u9589\n================================================================ *\/\nfunction openShindan() {\n const app = document.getElementById('shindan-app');\n app.classList.add('active');\n document.body.style.overflow = 'hidden';\n \/\/ \u30d5\u30a9\u30fc\u30ab\u30b9\u30c8\u30e9\u30c3\u30d7\u7528\n app.querySelector('.sd-close-btn').focus();\n}\n\nfunction closeShindan() {\n document.getElementById('shindan-app').classList.remove('active');\n document.body.style.overflow = '';\n}\n\n\/* ================================================================\n \u30af\u30a4\u30ba\u958b\u59cb\u30fb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\n================================================================ *\/\nfunction startQuiz() {\n document.getElementById('sd-intro').style.display = 'none';\n document.getElementById('sd-quiz').style.display = 'block';\n document.getElementById('sd-progress-wrap').style.display = 'block';\n showQuestion(1);\n}\n\nfunction showQuestion(n) {\n document.querySelectorAll('.sd-question').forEach(el => el.classList.remove('active'));\n document.getElementById('q' + n).classList.add('active');\n currentQ = n;\n updateProgress(n);\n \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30c8\u30c3\u30d7\n const scroll = document.querySelector('.sd-scroll');\n if (scroll) scroll.scrollTop = 0;\n}\n\nfunction updateProgress(n) {\n for (let i = 1; i <= 4; i++) {\n const dot = document.getElementById('dot-' + i);\n dot.className = 'sd-step-dot';\n if (i < n) dot.classList.add('done');\n if (i === n) dot.classList.add('active');\n }\n document.getElementById('sd-progress-label').textContent = `\u8cea\u554f ${n} \/ 4`;\n}\n\nfunction goNext(n) {\n if (!validate(n)) return;\n saveAnswers(n);\n if (n < 4) showQuestion(n + 1);\n else showResult();\n}\n\nfunction goPrev(n) {\n showQuestion(n - 1);\n}\n\n\/* ================================================================\n \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\n================================================================ *\/\nfunction validate(n) {\n const errorEl = document.getElementById('q' + n + '-error');\n const valid = n === 1\n ? !!document.querySelector('input[name=\"q1\"]:checked')\n : document.querySelectorAll(`input[name=\"q${n}\"]:checked`).length > 0;\n errorEl.classList.toggle('show', !valid);\n return valid;\n}\n\n\/* ================================================================\n \u56de\u7b54\u4fdd\u5b58\n================================================================ *\/\nfunction saveAnswers(n) {\n if (n === 1) {\n const checked = document.querySelector('input[name=\"q1\"]:checked');\n answers.q1 = checked ? parseInt(checked.value) : null;\n } else {\n const checked = document.querySelectorAll(`input[name=\"q${n}\"]:checked`);\n answers['q' + n] = Array.from(checked).map(el => parseInt(el.value));\n }\n}\n\n\/* ================================================================\n \u30b9\u30b3\u30a2\u96c6\u8a08\n================================================================ *\/\nfunction calcScores() {\n const totals = { C:0, A:0, I:0, D:0, O:0, S:0 };\n if (answers.q1 !== null) {\n const s = Q1_OPTIONS[answers.q1].scores;\n for (const k in s) totals[k] += s[k];\n }\n [{ arr: answers.q2, opts: Q2_OPTIONS },\n { arr: answers.q3, opts: Q3_OPTIONS },\n { arr: answers.q4, opts: Q4_OPTIONS }].forEach(({ arr, opts }) => {\n arr.forEach(idx => {\n const s = opts[idx].scores;\n for (const k in s) totals[k] += s[k];\n });\n });\n return totals;\n}\n\nfunction rankCategories(totals) {\n return Object.keys(totals).sort((a, b) => {\n if (totals[b] !== totals[a]) return totals[b] - totals[a];\n return PRIORITY.indexOf(a) - PRIORITY.indexOf(b);\n });\n}\n\n\/* ================================================================\n \u7d50\u679c\u8868\u793a\n================================================================ *\/\nfunction showResult() {\n if (!validate(4)) return;\n saveAnswers(4);\n\n const totals = calcScores();\n const ranked = rankCategories(totals);\n const top3 = ranked.slice(0, 3);\n const maxScore = Math.max(...Object.values(totals), 1);\n\n \/\/ \u9032\u6357\u30d0\u30fc\u3092\u975e\u8868\u793a\n document.getElementById('sd-progress-wrap').style.display = 'none';\n document.getElementById('sd-quiz').style.display = 'none';\n\n const resultEl = document.getElementById('sd-result');\n resultEl.classList.add('active');\n\n \/\/ \u30ab\u30fc\u30c9\u751f\u6210\n const rankLabels = ['1\u4f4d', '2\u4f4d', '3\u4f4d'];\n const cardsHtml = top3.map((cat, i) => {\n const rank = i + 1;\n const score = totals[cat];\n const sev = getSeverity(score);\n const pct = Math.round((score \/ maxScore) * 100);\n return `\n <div class=\"sd-result-card rank-${rank}\">\n <div class=\"sd-card-top\">\n <span class=\"sd-rank-badge\">${rankLabels[i]}<\/span>\n <span class=\"sd-card-name\">${CATEGORIES[cat].name}<\/span>\n <span class=\"sd-severity-badge ${sev.cls}\">${sev.text}<\/span>\n <\/div>\n <div class=\"sd-score-track\">\n <div class=\"sd-score-fill\" style=\"width:0%\" data-pct=\"${pct}\"><\/div>\n <\/div>\n <p class=\"sd-card-desc\">${CATEGORY_DESC[cat]}<\/p>\n <\/div>\n `;\n }).join('');\n\n document.getElementById('result-cards').innerHTML = cardsHtml;\n document.getElementById('next-step-text').textContent = NEXT_STEP[top3[0]];\n\n\n\n\/\/ \u2193 \u3053\u306e\u4e0b\u306b\u30dc\u30bf\u30f3\u306e\u51e6\u7406\u3092\u8ffd\u52a0\nconst btn = document.getElementById('next-step-btn');\nbtn.href = NEXT_STEP_LINKS[top3[0]];\nbtn.textContent = NEXT_STEP_BTN_LABEL[top3[0]]; \/\/ \u2190 \u8ffd\u52a0\nbtn.style.display = 'inline-block';\n\n\n\n \/\/ \u30b9\u30b3\u30a2\u30d0\u30fc\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\n requestAnimationFrame(() => {\n setTimeout(() => {\n document.querySelectorAll('.sd-score-fill').forEach(el => {\n el.style.width = el.dataset.pct + '%';\n });\n }, 120);\n });\n\n \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30c8\u30c3\u30d7\n const scroll = document.querySelector('.sd-scroll');\n if (scroll) scroll.scrollTop = 0;\n}\n\n\/* ================================================================\n \u30ea\u30bb\u30c3\u30c8\n================================================================ *\/\nfunction restartShindan() {\n answers.q1 = null; answers.q2 = []; answers.q3 = []; answers.q4 = [];\n document.querySelectorAll('#shindan-app input').forEach(el => el.checked = false);\n document.querySelectorAll('.sd-error-msg').forEach(el => el.classList.remove('show'));\n document.getElementById('sd-result').classList.remove('active');\n document.getElementById('sd-intro').style.display = 'block';\n document.getElementById('sd-progress-wrap').style.display = 'none';\ndocument.getElementById('next-step-btn').style.display = 'none'; \/\/\n}\n\n\n\n\/* ================================================================\n \u30ad\u30fc\u30dc\u30fc\u30c9\n================================================================ *\/\ndocument.addEventListener('keydown', e => {\n if (e.key === 'Escape') closeShindan();\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad | \u7a7a\u8abf\u7701\u30a8\u30cd.com \u7c21\u6613\u30ed\u30b9\u8a3a\u65ad\u3092\u306f\u3058\u3081\u308b \u2192 \u203b\u672c\u8a3a\u65ad\u306f\u7c21\u6613\u7684\u306a\u4eee\u5224\u5b9a\u3067\u3059\u3002\u8a73\u7d30\u306a\u78ba\u8a8d\u306b\u306f\u3001\u73fe\u5834\u6761\u4ef6\u30fb\u904b\u7528\u72b6\u6cc1\u30fb\u8a2d\u5099\u72b6\u6cc1\u306e\u78ba\u8a8d\u304c\u5fc5\u8981\u3067\u3059\u3002 \u7a7a\u8abf\u7701\u30a8\u30cd.com \u7c21\u6613\u30ed\u30b9\u8a3a\u65ad \u9589\u3058\u308b \u8cea\u554f 1 \/ 4 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_lightning_design_setting":[],"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gepa-japan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26"}],"version-history":[{"count":6,"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":275,"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions\/275"}],"wp:attachment":[{"href":"https:\/\/gepa-japan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":26,"date":"2026-04-29T14:01:59","date_gmt":"2026-04-29T05:01:59","guid":{"rendered":"https:\/\/gepa-japan.org\/?page_id=26"},"modified":"2026-05-06T11:54:01","modified_gmt":"2026-05-06T02:54:01","slug":"heem-%e7%b0%a1%e6%98%93%e3%83%ad%e3%82%b9%e8%a8%ba%e6%96%ad","status":"publish","type":"page","link":"https:\/\/gepa-japan.org\/?page_id=26","title":{"rendered":"HEEM \u7c21\u6613\u30ed\u30b9\u8a3a\u65ad"},"content":{"rendered":"\n\n\n\n\n\n\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad | \u7a7a\u8abf\u7701\u30a8\u30cd.com<\/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&family=Outfit:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ================================================================\n DESIGN TOKENS\n================================================================ *\/\n:root {\n --bg: #F0F0F2; \/* \u5168\u4f53\u80cc\u666f\uff1a\u8584\u30b0\u30ec\u30fc *\/\n --bg-dark: #223a70; \/* \u30d8\u30c3\u30c0\u30fc\u30fb\u30c0\u30fc\u30af\u9762\uff1a\u6fc3\u7d3a *\/\n --bg-card: #FFFFFF; \/* \u30ab\u30fc\u30c9\u30fb\u30dc\u30bf\u30f3\u80cc\u666f\uff1a\u767d *\/\n --ink: #1B2A4A; \/* \u672c\u6587\u30c6\u30ad\u30b9\u30c8\uff1a\u6fc3\u7d3a *\/\n --ink-mid: #4A5568; \/* \u30b5\u30d6\u30c6\u30ad\u30b9\u30c8 *\/\n --ink-light: #9AA3B2; \/* \u8584\u30c6\u30ad\u30b9\u30c8 *\/\n --accent: #1B2A4A; \/* \u30a2\u30af\u30bb\u30f3\u30c8\uff08\u65e7\u30aa\u30ec\u30f3\u30b8\uff09\u2192 \u6fc3\u7d3a *\/\n --accent-hover:#142038; \/* \u30a2\u30af\u30bb\u30f3\u30c8\u30db\u30d0\u30fc\uff1a\u3088\u308a\u6df1\u3044\u6fc3\u7d3a *\/\n --accent-glow: rgba(27,42,74,0.15);\n --accent-tint: rgba(27,42,74,0.06);\n --gold: #1B2A4A; \/* \u30e9\u30f3\u30af1\u8272\uff1a\u6fc3\u7d3a *\/\n --silver: #6B7280;\n --bronze: #92745A;\n --green: #15803D;\n --green-bg: #F0FDF4;\n --green-border:#BBF7D0;\n --orange: #1B2A4A; \/* \u65e7\u30aa\u30ec\u30f3\u30b8\u8b66\u544a\u8272 \u2192 \u6fc3\u7d3a *\/\n --orange-bg: #EEF1F8; \/* \u65e7\u30aa\u30ec\u30f3\u30b8bg \u2192 \u8584\u9752\u30b0\u30ec\u30fc *\/\n --orange-border:#B0BCDA; \/* \u65e7\u30aa\u30ec\u30f3\u30b8border \u2192 \u9752\u30b0\u30ec\u30fc *\/\n --red-bg: #EEF1F8; \/* \u30a8\u30e9\u30fc\u80cc\u666f \u2192 \u8584\u9752\u30b0\u30ec\u30fc *\/\n --red-border: #B0BCDA; \/* \u30a8\u30e9\u30fc\u67a0 \u2192 \u9752\u30b0\u30ec\u30fc *\/\n --border: #D8DCE4; \/* \u67a0\u7dda\uff1a\u30b0\u30ec\u30fc *\/\n --border-focus:#1B2A4A; \/* \u30d5\u30a9\u30fc\u30ab\u30b9\u67a0\uff1a\u6fc3\u7d3a *\/\n --radius-sm: 6px;\n --radius: 10px;\n --radius-lg: 16px;\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);\n --shadow: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);\n --shadow-lg: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);\n --transition: 0.2s cubic-bezier(0.4,0,0.2,1);\n}\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\n\nbody {\n font-family: 'Noto Sans JP', sans-serif;\n background: var(--bg);\n color: var(--ink);\n line-height: 1.7;\n -webkit-font-smoothing: antialiased;\n}\n\n\/* ================================================================\n TOP PAGE ENTRY BLOCK\n================================================================ *\/\n.loss-block {\n background: #FFFFFF;\n border: 1px solid #CCCED4;\n padding: clamp(24px,2vw,48px) clamp(10px,2vw,24px);\n position: relative;\n overflow: hidden;\n}\n\n.loss-block::before { display: none; }\n.loss-block::after { display: none; }\n\n.loss-inner {\n max-width: 700px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n}\n\n.loss-content { grid-column: 1; }\n\n.loss-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: 'Outfit', sans-serif;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #4A5568;\n margin-bottom: 20px;\n}\n\n.loss-eyebrow-dot {\n width: 6px; height: 6px;\n border-radius: 50%;\n background: #4A5568;\n animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%,100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.8); }\n}\n\n.loss-heading {\n font-size: clamp(22px,4vw,36px);\n font-weight: 900;\n color: #1F2937;\n line-height: 1.35;\n margin-bottom: 20px;\n letter-spacing: -0.01em;\n}\n\n.loss-heading em {\n font-style: normal;\n color: #1F2937;\n border-bottom: 2px solid #9AA3B2;\n padding-bottom: 2px;\n}\n\n.loss-body {\n font-size: clamp(13px,2vw,15px);\n color: #4A5568;\n line-height: 1.9;\n margin-bottom: 32px;\n max-width: 540px;\n}\n\n.loss-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 32px;\n}\n\n.loss-meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n font-weight: 500;\n color: #4A5568;\n background: #FFFFFF;\n border: 1px solid #CCCED4;\n border-radius: 100px;\n padding: 5px 12px;\n}\n\n.loss-meta-item svg { opacity: 0.6; color: #4A5568; }\n\n.loss-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: var(--accent);\n color: #fff;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: 0.04em;\n padding: 16px 28px;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 16px rgba(27,42,74,0.30);\n}\n\n.loss-btn:hover {\n background: var(--accent-hover);\n transform: translateY(-2px);\n box-shadow: 0 8px 28px rgba(27,42,74,0.38);\n}\n\n.loss-btn:active { transform: translateY(0); }\n\n.loss-btn-icon {\n width: 28px; height: 28px;\n background: rgba(255,255,255,0.25);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 13px;\n transition: transform var(--transition);\n flex-shrink: 0;\n}\n\n.loss-btn:hover .loss-btn-icon { transform: translateX(3px); }\n\n.loss-note {\n margin-top: 16px;\n font-size: 11px;\n color: #9AA3B2;\n letter-spacing: 0.03em;\n}\n\n@media (max-width: 768px) {\n .loss-btn { width: 100%; justify-content: center; }\n}\n\n\/* ================================================================\n SHINDAN APP \u2014 OVERLAY\n================================================================ *\/\n#shindan-app {\n display: none;\n position: fixed;\n inset: 0;\n background: var(--bg);\n z-index: 9999;\n overflow: hidden;\n}\n\n#shindan-app.active { display: flex; flex-direction: column; }\n\n\/* ---- Header ---- *\/\n.sd-header {\n background: var(--bg-dark);\n padding: 0 20px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n position: relative;\n z-index: 10;\n}\n\n.sd-header-left {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.sd-header-logo {\n font-family: 'Outfit', sans-serif;\n font-size: 13px;\n font-weight: 700;\n color: rgba(255,255,255,0.9);\n letter-spacing: 0.03em;\n}\n\n.sd-header-sep {\n width: 1px; height: 14px;\n background: rgba(255,255,255,0.15);\n}\n\n.sd-header-sub {\n font-size: 11px;\n color: rgba(255,255,255,0.4);\n letter-spacing: 0.05em;\n}\n\n.sd-close-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n background: rgba(255,255,255,0.08);\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: var(--radius-sm);\n color: rgba(255,255,255,0.7);\n font-size: 12px;\n font-family: 'Noto Sans JP', sans-serif;\n font-weight: 500;\n padding: 7px 14px;\n cursor: pointer;\n transition: var(--transition);\n letter-spacing: 0.03em;\n min-height: 36px; \/* \u30bf\u30c3\u30c1\u30bf\u30fc\u30b2\u30c3\u30c8\u78ba\u4fdd *\/\n}\n\n.sd-close-btn:hover {\n background: rgba(255,255,255,0.14);\n color: rgba(255,255,255,0.95);\n}\n\n\/* ---- Progress bar (sticky top) ---- *\/\n.sd-progress-wrap {\n background: var(--bg-dark);\n padding: 0 20px 14px;\n flex-shrink: 0;\n}\n\n.sd-step-dots {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 10px;\n}\n\n.sd-step-dot {\n height: 4px;\n border-radius: 2px;\n background: rgba(255,255,255,0.15);\n transition: all 0.4s ease;\n flex: 1;\n}\n\n.sd-step-dot.done { background: #1B2A4A; }\n.sd-step-dot.active { background: #6B82B0; }\n\n.sd-progress-label {\n font-size: 11px;\n color: rgba(255,255,255,0.4);\n letter-spacing: 0.06em;\n}\n\n\/* ---- Scrollable body ---- *\/\n.sd-scroll {\n flex: 1;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n}\n\n.sd-body {\n max-width: 680px;\n margin: 0 auto;\n padding: 36px 20px 100px;\n}\n\n\n\n<div class=\"sd-next-step\" id=\"next-step-box\">\n <div class=\"sd-next-label\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n \u304a\u3059\u3059\u3081\u306e\u6b21\u306e\u4e00\u6b69\n <\/div>\n <p class=\"sd-next-text\" id=\"next-step-text\"><\/p>\n <a id=\"next-step-btn\" href=\"#\" style=\"display:inline-block;margin-top:14px;padding:10px 22px;background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.3);border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;letter-spacing:0.04em;\">\u8a73\u3057\u304f\u898b\u308b<\/a>\n<\/div>\n\n\n\n\/* \u30b9\u30de\u30db bottom safe area *\/\n@supports (padding-bottom: env(safe-area-inset-bottom)) {\n .sd-body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }\n}\n\n\/* ================================================================\n INTRO SCREEN\n================================================================ *\/\n.sd-intro { animation: fadeUp 0.4s ease forwards; }\n\n.sd-intro-icon {\n width: 56px; height: 56px;\n background: rgba(27,42,74,0.07);\n border: 1.5px solid rgba(27,42,74,0.15);\n border-radius: var(--radius-lg);\n display: flex; align-items: center; justify-content: center;\n font-size: 26px;\n margin-bottom: 20px;\n}\n\n.sd-intro-title {\n font-size: clamp(24px,5vw,34px);\n font-weight: 900;\n color: var(--ink);\n line-height: 1.25;\n margin-bottom: 14px;\n letter-spacing: -0.02em;\n}\n\n.sd-intro-title span {\n color: #1B2A4A;\n}\n\n.sd-intro-desc {\n font-size: 14px;\n color: var(--ink-mid);\n line-height: 1.85;\n margin-bottom: 28px;\n max-width: 500px;\n}\n\n.sd-intro-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 32px;\n}\n\n.sd-intro-chip {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n font-weight: 600;\n color: var(--ink-mid);\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: 100px;\n padding: 6px 14px;\n box-shadow: var(--shadow-sm);\n}\n\n.sd-intro-start {\n display: flex;\n align-items: center;\n gap: 10px;\n background: var(--accent);\n color: #fff;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 16px;\n font-weight: 700;\n padding: 17px 32px;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n box-shadow: 0 4px 16px rgba(27,42,74,0.25);\n letter-spacing: 0.03em;\n width: 100%;\n max-width: 360px;\n justify-content: center;\n}\n\n.sd-intro-start:hover {\n background: var(--accent-hover);\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(27,42,74,0.32);\n}\n\n.sd-intro-divider {\n border: none;\n border-top: 1px solid var(--border);\n margin: 32px 0;\n}\n\n.sd-intro-disclaimer {\n font-size: 11.5px;\n color: var(--ink-light);\n line-height: 1.7;\n padding: 14px 16px;\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n border-left: 3px solid #1B2A4A;\n}\n\n\/* ================================================================\n QUIZ SCREEN\n================================================================ *\/\n.sd-question { display: none; }\n.sd-question.active {\n display: block;\n animation: fadeUp 0.3s ease forwards;\n}\n\n@keyframes fadeUp {\n from { opacity: 0; transform: translateY(14px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.sd-q-eyebrow {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.sd-q-num {\n font-family: 'Outfit', sans-serif;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.15em;\n color: #1B2A4A;\n background: rgba(27,42,74,0.08);\n border: 1px solid rgba(27,42,74,0.18);\n border-radius: 4px;\n padding: 3px 10px;\n}\n\n.sd-q-type {\n font-size: 11px;\n color: var(--ink-light);\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 4px;\n padding: 3px 10px;\n}\n\n.sd-q-title {\n font-size: clamp(17px,3.5vw,22px);\n font-weight: 800;\n color: var(--ink);\n line-height: 1.4;\n margin-bottom: 24px;\n letter-spacing: -0.01em;\n}\n\n\/* ---- Options grid ---- *\/\n.sd-options {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));\n gap: 8px;\n margin-bottom: 8px;\n}\n\n\/* Q1\u306f\u65bd\u8a2d\u540d\u304c\u77ed\u3044\u306e\u30673\u5217\u307e\u3067\u5e83\u3052\u308b *\/\n.sd-options.q1-grid {\n grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));\n}\n\n.sd-option { position: relative; }\n\n.sd-option input {\n position: absolute;\n opacity: 0;\n width: 1px; height: 1px;\n pointer-events: none;\n}\n\n.sd-option-label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 13px 14px;\n background: #FFFFFF;\n border: 1.5px solid #D8DCE4;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n font-size: 13px;\n font-weight: 500;\n color: var(--ink-mid);\n line-height: 1.4;\n user-select: none;\n min-height: 48px;\n -webkit-tap-highlight-color: transparent;\n}\n\n\/* \u30ab\u30b9\u30bf\u30e0\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u30fb\u30e9\u30b8\u30aa *\/\n.sd-option-label::before {\n content: '';\n width: 18px; height: 18px;\n min-width: 18px;\n border: 1.5px solid #D8DCE4;\n border-radius: 4px;\n background: #F0F0F2;\n transition: var(--transition);\n display: flex; align-items: center; justify-content: center;\n}\n\n.sd-option input[type=\"radio\"] + .sd-option-label::before {\n border-radius: 50%;\n}\n\n\/* \u9078\u629e\u6e08\u307f\u72b6\u614b *\/\n.sd-option input:checked + .sd-option-label {\n border-color: #1B2A4A;\n background: rgba(27,42,74,0.05);\n color: #1B2A4A;\n box-shadow: 0 0 0 3px rgba(27,42,74,0.10);\n}\n\n.sd-option input:checked + .sd-option-label::before {\n background: #1B2A4A;\n border-color: #1B2A4A;\n box-shadow: inset 0 0 0 3px rgba(255,255,255,0.85);\n}\n\n\/* \u30db\u30d0\u30fc *\/\n@media (hover: hover) {\n .sd-option-label:hover {\n border-color: #1B2A4A;\n background: rgba(27,42,74,0.03);\n color: #1B2A4A;\n transform: translateY(-1px);\n box-shadow: var(--shadow-sm);\n }\n}\n\n\/* ---- Error ---- *\/\n.sd-error-msg {\n display: none;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n font-weight: 600;\n color: #1B2A4A;\n margin: 8px 0 0;\n padding: 10px 14px;\n background: #EEF1F8;\n border: 1px solid #B0BCDA;\n border-radius: var(--radius-sm);\n}\n\n.sd-error-msg.show { display: flex; }\n\n\/* ---- Navigation ---- *\/\n.sd-nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-top: 28px;\n}\n\n.sd-nav-left { flex: 1; }\n.sd-nav-right { flex: 1; display: flex; justify-content: flex-end; }\n\n.sd-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 0.04em;\n padding: 14px 24px;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n min-height: 50px;\n -webkit-tap-highlight-color: transparent;\n}\n\n.sd-btn-primary {\n background: var(--accent);\n color: #fff;\n box-shadow: 0 3px 10px rgba(27,42,74,0.22);\n}\n\n.sd-btn-primary:hover {\n background: var(--accent-hover);\n transform: translateY(-1px);\n box-shadow: 0 6px 18px rgba(27,42,74,0.30);\n}\n\n.sd-btn-primary:active { transform: translateY(0); }\n\n.sd-btn-ghost {\n background: transparent;\n color: var(--ink-mid);\n border: 1.5px solid var(--border);\n}\n\n.sd-btn-ghost:hover {\n border-color: var(--ink-mid);\n color: var(--ink);\n background: rgba(0,0,0,0.02);\n}\n\n\/* \u30b9\u30de\u30db\uff1a\u30ca\u30d3\u30dc\u30bf\u30f3\u3092\u7e26\u306b *\/\n@media (max-width: 480px) {\n .sd-nav {\n flex-direction: column-reverse;\n gap: 10px;\n }\n .sd-nav-left, .sd-nav-right { flex: unset; width: 100%; }\n .sd-btn { width: 100%; }\n}\n\n\/* ================================================================\n RESULT SCREEN\n================================================================ *\/\n.sd-result { display: none; }\n.sd-result.active {\n display: block!important;\n animation: fadeUp 0.4s ease forwards;\n}\n\n\/* \u7d50\u679c\u30d8\u30c3\u30c0\u30fc *\/\n.sd-result-header {\n margin-bottom: 28px;\n}\n\n.sd-result-eyebrow {\n font-family: 'Outfit', sans-serif;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.18em;\n color: var(--ink-light);\n text-transform: uppercase;\n margin-bottom: 8px;\n}\n\n.sd-result-title {\n font-size: clamp(20px, 4vw, 28px);\n font-weight: 900;\n color: var(--ink);\n line-height: 1.3;\n letter-spacing: -0.02em;\n margin-bottom: 6px;\n}\n\n.sd-result-sub {\n font-size: 13px;\n color: var(--ink-light);\n}\n\n\/* \u7d50\u679c\u30ab\u30fc\u30c9 *\/\n.sd-result-cards {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 24px;\n}\n\n.sd-result-card {\n background: var(--bg-card);\n border: 1.5px solid var(--border);\n border-radius: var(--radius);\n padding: 20px 22px;\n position: relative;\n overflow: hidden;\n transition: box-shadow var(--transition);\n}\n\n.sd-result-card:hover { box-shadow: var(--shadow); }\n\n\/* \u30e9\u30f3\u30af\u5225\u5de6\u30dc\u30fc\u30c0\u30fc *\/\n.sd-result-card::before {\n content: '';\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 4px;\n}\n\n.sd-result-card.rank-1 { border-color: rgba(27,42,74,0.3); background: rgba(27,42,74,0.02); }\n.sd-result-card.rank-1::before { background: var(--accent); }\n.sd-result-card.rank-2::before { background: var(--silver); }\n.sd-result-card.rank-3::before { background: var(--bronze); }\n\n\/* \u30ab\u30fc\u30c9\u30d8\u30c3\u30c0\u30fc\u884c *\/\n.sd-card-top {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n flex-wrap: wrap;\n}\n\n.sd-rank-badge {\n font-family: 'Outfit', sans-serif;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.1em;\n padding: 3px 10px;\n border-radius: 100px;\n}\n\n.rank-1 .sd-rank-badge { background: rgba(27,42,74,0.10); color: #1B2A4A; }\n.rank-2 .sd-rank-badge { background: rgba(107,114,128,0.1); color: var(--silver); }\n.rank-3 .sd-rank-badge { background: rgba(146,116,90,0.1); color: var(--bronze); }\n\n.sd-card-name {\n font-size: 16px;\n font-weight: 800;\n color: var(--ink);\n flex: 1;\n}\n\n.sd-severity-badge {\n font-size: 11px;\n font-weight: 700;\n padding: 4px 12px;\n border-radius: 100px;\n letter-spacing: 0.03em;\n white-space: nowrap;\n}\n\n.sev-low { background: #EEF2FA; color: #3D5A8A; border: 1px solid #B8C8E4; }\n.sev-mid { background: #E4EAF5; color: #1B3870; border: 1px solid #9AAED4; }\n.sev-high { background: #D8E1F2; color: #1B2A4A; border: 1px solid #7A96C8; font-weight: 800; }\n\n\/* \u30b9\u30b3\u30a2\u30d0\u30fc *\/\n.sd-score-track {\n height: 5px;\n background: var(--border);\n border-radius: 3px;\n overflow: hidden;\n margin-bottom: 12px;\n}\n\n.sd-score-fill {\n height: 100%;\n border-radius: 3px;\n width: 0%;\n transition: width 1s cubic-bezier(0.4,0,0.2,1) 0.2s;\n}\n\n.rank-1 .sd-score-fill { background: linear-gradient(90deg, #1B2A4A, #3D5A99); }\n.rank-2 .sd-score-fill { background: var(--silver); }\n.rank-3 .sd-score-fill { background: var(--bronze); }\n\n.sd-card-desc {\n font-size: 13px;\n color: var(--ink-mid);\n line-height: 1.8;\n}\n\n\/* Next Step *\/\n.sd-next-step {\n background: var(--bg-dark);\n border-radius: var(--radius);\n padding: 22px 24px;\n margin-bottom: 28px;\n position: relative;\n overflow: hidden;\n}\n\n.sd-next-step a {\n display: block;\n text-align: center;\n}\n\n\n.sd-next-step::after {\n content: '';\n position: absolute;\n top: -30px; right: -30px;\n width: 120px; height: 120px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(61,90,153,0.90), transparent 70%);\n pointer-events: none;\n}\n\n.sd-next-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.18em;\n color: rgba(255,255,255,0.55);\n text-transform: uppercase;\n margin-bottom: 10px;\n}\n\n.sd-next-text {\n font-size: 15px;\n font-weight: 600;\n color: rgba(255,255,255,0.9);\n line-height: 1.7;\n}\n\n.sd-next-text a {\n display: block;\n text-align: center;\n}\n\n\/* CTA \u30bb\u30af\u30b7\u30e7\u30f3 *\/\n.sd-cta {\n border-top: 1px solid var(--border);\n padding-top: 28px;\n}\n\n.sd-cta-btns {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n@media (max-width: 480px) {\n .sd-cta-btns { grid-template-columns: 1fr; }\n}\n\n.sd-cta-primary {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: var(--accent);\n color: #fff;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 14px;\n font-weight: 700;\n padding: 16px 20px;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n letter-spacing: 0.03em;\n box-shadow: 0 3px 10px rgba(27,42,74,0.22);\n min-height: 52px;\n}\n\n.sd-cta-primary:hover {\n background: var(--accent-hover);\n transform: translateY(-1px);\n box-shadow: 0 6px 18px rgba(27,42,74,0.30);\n}\n\n.sd-cta-secondary {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n background: var(--bg-card);\n color: var(--ink);\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 14px;\n font-weight: 700;\n padding: 16px 20px;\n border: 1.5px solid var(--border);\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n letter-spacing: 0.03em;\n min-height: 52px;\n}\n\n.sd-cta-secondary:hover {\n border-color: var(--ink);\n background: var(--ink);\n color: #fff;\n}\n\n.sd-cta-note {\n font-size: 12px;\n color: var(--ink-light);\n line-height: 1.85;\n border-left: 3px solid #1B2A4A;\n padding-left: 14px;\n margin-bottom: 20px;\n}\n\n.sd-retry-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n background: none;\n border: none;\n font-family: 'Noto Sans JP', sans-serif;\n font-size: 13px;\n color: var(--ink-light);\n cursor: pointer;\n padding: 12px;\n transition: color var(--transition);\n -webkit-tap-highlight-color: transparent;\n}\n\n.sd-retry-btn:hover { color: var(--ink); }\n\n.sd-cta {\n border-top: 1px solid var(--border);\n padding-top: 28px;\n display: none; \/* \u2190 \u8ffd\u52a0 *\/\n}\n\n.sd-result.active .sd-cta {\n display: block; \/* \u2190 \u8ffd\u52a0 *\/\n}\n\n\n\/* ================================================================\n SHARED UTILITIES\n================================================================ *\/\n.hidden { display: none !important; }\n<\/style>\n<\/head>\n<body>\n\n\n <\/div>\n <button class=\"loss-btn\" onclick=\"openShindan()\">\n \u7c21\u6613\u30ed\u30b9\u8a3a\u65ad\u3092\u306f\u3058\u3081\u308b\n <span class=\"loss-btn-icon\">\u2192<\/span>\n <\/button>\n <p class=\"loss-note\">\u203b\u672c\u8a3a\u65ad\u306f\u7c21\u6613\u7684\u306a\u4eee\u5224\u5b9a\u3067\u3059\u3002\u8a73\u7d30\u306a\u78ba\u8a8d\u306b\u306f\u3001\u73fe\u5834\u6761\u4ef6\u30fb\u904b\u7528\u72b6\u6cc1\u30fb\u8a2d\u5099\u72b6\u6cc1\u306e\u78ba\u8a8d\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n\n<div id=\"shindan-app\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad\">\n\n \n <div class=\"sd-header\">\n <div class=\"sd-header-left\">\n <span class=\"sd-header-logo\">\u7a7a\u8abf\u7701\u30a8\u30cd.com<\/span>\n <span class=\"sd-header-sep\"><\/span>\n <span class=\"sd-header-sub\">\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad<\/span>\n <\/div>\n <button class=\"sd-close-btn\" onclick=\"closeShindan()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n \u9589\u3058\u308b\n <\/button>\n <\/div>\n\n \n <div class=\"sd-progress-wrap\" id=\"sd-progress-wrap\" style=\"display:none;\">\n <div class=\"sd-step-dots\">\n <div class=\"sd-step-dot\" id=\"dot-1\"><\/div>\n <div class=\"sd-step-dot\" id=\"dot-2\"><\/div>\n <div class=\"sd-step-dot\" id=\"dot-3\"><\/div>\n <div class=\"sd-step-dot\" id=\"dot-4\"><\/div>\n <\/div>\n <span class=\"sd-progress-label\" id=\"sd-progress-label\">\u8cea\u554f 1 \/ 4<\/span>\n <\/div>\n\n \n <div class=\"sd-scroll\">\n <div class=\"sd-body\">\n\n \n <div id=\"sd-intro\" class=\"sd-intro\">\n <div class=\"sd-intro-icon\">\ud83c\udf21\ufe0f<\/div>\n <h1 class=\"sd-intro-title\">3\u5206\u3067\u308f\u304b\u308b<br><span>\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad<\/span><\/h1>\n <p class=\"sd-intro-desc\">\n \u4ee5\u4e0b\u306e\u8cea\u554f\u306b\u304a\u7b54\u3048\u3044\u305f\u3060\u304f\u3053\u3068\u3067\u3001\u73fe\u5834\u3067\u8d77\u304d\u3066\u3044\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u7a7a\u8abf\u30ed\u30b9\u3092\u4eee\u5224\u5b9a\u3057\u307e\u3059\u3002\n \u7d50\u679c\u306f\u3001\u5236\u5fa1\u30fb\u7a7a\u6c17\u74b0\u5883\u30fb\u5916\u4e71\u5e72\u6e09\u30fb\u8a2d\u5099\u52a3\u5316\u30fb\u904b\u7528\u30fb\u8a2d\u5099\u69cb\u6210\u306a\u3069\u306e\u8996\u70b9\u304b\u3089\u8868\u793a\u3057\u307e\u3059\u3002\n <\/p>\n <div class=\"sd-intro-chips\">\n <span class=\"sd-intro-chip\">\u23f1 \u6240\u8981\u6642\u9593 \u7d043\u5206<\/span>\n <span class=\"sd-intro-chip\">\ud83d\udccb \u51684\u554f\u30fb\u9078\u629e\u5f0f<\/span>\n <span class=\"sd-intro-chip\">\ud83d\udd12 \u767b\u9332\u30fb\u5165\u529b\u4e0d\u8981<\/span>\n <span class=\"sd-intro-chip\">\ud83d\udcca 6\u5206\u985e\u3067\u7d50\u679c\u8868\u793a<\/span>\n <\/div>\n <button class=\"sd-intro-start\" onclick=\"startQuiz()\">\n \u8a3a\u65ad\u3092\u306f\u3058\u3081\u308b\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <hr class=\"sd-intro-divider\">\n <p class=\"sd-intro-disclaimer\">\n \u203b\u672c\u8a3a\u65ad\u306f\u7c21\u6613\u7684\u306a\u4eee\u5224\u5b9a\u3067\u3059\u3002\u5b9f\u969b\u306e\u73fe\u5834\u3067\u306f\u8907\u5408\u7684\u306a\u8981\u56e0\u304c\u7d61\u307f\u5408\u3046\u305f\u3081\u3001\u8a73\u7d30\u306a\u6539\u5584\u63d0\u6848\u306b\u306f\u73fe\u5834\u8abf\u67fb\u30fb\u8a2d\u5099\u78ba\u8a8d\u30fb\u904b\u7528\u72b6\u6cc1\u306e\u30d2\u30a2\u30ea\u30f3\u30b0\u304c\u5fc5\u8981\u3067\u3059\u3002\n <\/p>\n <\/div>\n\n \n <div id=\"sd-quiz\" style=\"display:none;\">\n\n \n <div class=\"sd-question\" id=\"q1\">\n <div class=\"sd-q-eyebrow\">\n <span class=\"sd-q-num\">Q 01<\/span>\n <span class=\"sd-q-type\">\u5358\u4e00\u9078\u629e<\/span>\n <\/div>\n <p class=\"sd-q-title\">\u3042\u306a\u305f\u306e\u73fe\u5834\u306b<br>\u8fd1\u3044\u3082\u306e\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044<\/p>\n <div class=\"sd-options q1-grid\" id=\"q1-options\"><\/div>\n <div class=\"sd-error-msg\" id=\"q1-error\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n 1\u3064\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\n <\/div>\n <div class=\"sd-nav\">\n <div class=\"sd-nav-left\"><\/div>\n <div class=\"sd-nav-right\">\n <button class=\"sd-btn sd-btn-primary\" onclick=\"goNext(1)\">\n \u6b21\u3078\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sd-question\" id=\"q2\">\n <div class=\"sd-q-eyebrow\">\n <span class=\"sd-q-num\">Q 02<\/span>\n <span class=\"sd-q-type\">\u8907\u6570\u9078\u629e\u53ef<\/span>\n <\/div>\n <p class=\"sd-q-title\">\u73fe\u5728\u3001\u3069\u306e\u3088\u3046\u306a\u3053\u3068\u306b<br>\u56f0\u3063\u3066\u3044\u307e\u3059\u304b<\/p>\n <div class=\"sd-options\" id=\"q2-options\"><\/div>\n <div class=\"sd-error-msg\" id=\"q2-error\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n 1\u3064\u4ee5\u4e0a\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\n <\/div>\n <div class=\"sd-nav\">\n <div class=\"sd-nav-left\">\n <button class=\"sd-btn sd-btn-ghost\" onclick=\"goPrev(2)\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg>\n \u623b\u308b\n <\/button>\n <\/div>\n <div class=\"sd-nav-right\">\n <button class=\"sd-btn sd-btn-primary\" onclick=\"goNext(2)\">\n \u6b21\u3078\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sd-question\" id=\"q3\">\n <div class=\"sd-q-eyebrow\">\n <span class=\"sd-q-num\">Q 03<\/span>\n <span class=\"sd-q-type\">\u8907\u6570\u9078\u629e\u53ef<\/span>\n <\/div>\n <p class=\"sd-q-title\">\u7a7a\u8abf\u306e\u4f7f\u3044\u65b9\u306b\u3064\u3044\u3066<br>\u8fd1\u3044\u3082\u306e\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044<\/p>\n <div class=\"sd-options\" id=\"q3-options\"><\/div>\n <div class=\"sd-error-msg\" id=\"q3-error\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n 1\u3064\u4ee5\u4e0a\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\n <\/div>\n <div class=\"sd-nav\">\n <div class=\"sd-nav-left\">\n <button class=\"sd-btn sd-btn-ghost\" onclick=\"goPrev(3)\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg>\n \u623b\u308b\n <\/button>\n <\/div>\n <div class=\"sd-nav-right\">\n <button class=\"sd-btn sd-btn-primary\" onclick=\"goNext(3)\">\n \u6b21\u3078\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"sd-question\" id=\"q4\">\n <div class=\"sd-q-eyebrow\">\n <span class=\"sd-q-num\">Q 04<\/span>\n <span class=\"sd-q-type\">\u8907\u6570\u9078\u629e\u53ef<\/span>\n <\/div>\n <p class=\"sd-q-title\">\u73fe\u5834\u306e\u72b6\u614b\u3068\u3057\u3066<br>\u6c17\u306b\u306a\u308b\u3082\u306e\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044<\/p>\n <div class=\"sd-options\" id=\"q4-options\"><\/div>\n <div class=\"sd-error-msg\" id=\"q4-error\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n 1\u3064\u4ee5\u4e0a\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\n <\/div>\n <div class=\"sd-nav\">\n <div class=\"sd-nav-left\">\n <button class=\"sd-btn sd-btn-ghost\" onclick=\"goPrev(4)\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/svg>\n \u623b\u308b\n <\/button>\n <\/div>\n <div class=\"sd-nav-right\">\n <button class=\"sd-btn sd-btn-primary\" onclick=\"showResult()\">\n \u8a3a\u65ad\u7d50\u679c\u3092\u898b\u308b\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n<div id=\"sd-result\" class=\"sd-result\">\n <div class=\"sd-result-header\">\n <p class=\"sd-result-eyebrow\">Diagnosis Result<\/p>\n <h2 class=\"sd-result-title\" id=\"result-title\">\u3042\u306a\u305f\u306e\u73fe\u5834\u306b\u6f5c\u3080<br>\u7a7a\u8abf\u30ed\u30b9\u306e\u50be\u5411<\/h2>\n <p class=\"sd-result-sub\">\u30b9\u30b3\u30a2\u306e\u9ad8\u3044\u9806\u306b\u4e0a\u4f4d3\u5206\u985e\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059<\/p>\n <\/div>\n\n <div class=\"sd-result-cards\" id=\"result-cards\"><\/div>\n\n <div class=\"sd-next-step\" id=\"next-step-box\">\n <div class=\"sd-next-label\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n \u304a\u3059\u3059\u3081\u306e\u6b21\u306e\u4e00\u6b69\n <\/div>\n <p class=\"sd-next-text\" id=\"next-step-text\"><\/p>\n <a id=\"next-step-btn\" href=\"#\" style=\"display:none;margin-top:14px;padding:10px 22px;background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.3);border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;letter-spacing:0.04em;\">\u30de\u30f3\u30ac\u3067\u5236\u5fa1\u7cfb\u30ed\u30b9\u3092\u898b\u308b<\/a>\n <\/div>\n\n <div class=\"sd-cta\">\n <div class=\"sd-cta-btns\">\n <a href=\"https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b\/\" class=\"sd-cta-primary\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><\/svg>\n \u8a73\u3057\u304f\u76f8\u8ac7\u3059\u308b\n <\/a>\n <a href=\"https:\/\/xn--ickxd208wu5c9w0a.com\/%e7%9c%81%e3%82%a8%e3%83%8d%e5%8f%af%e8%a6%96%e5%8c%96%e3%82%ac%e3%82%a4%e3%83%89-3\/\" class=\"sd-cta-secondary\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\n \u30b5\u30fc\u30e2\uff0bAI\u8a3a\u65ad\u3092\u898b\u308b\n <\/a>\n <\/div>\n <p class=\"sd-cta-note\">\n \u7c21\u6613\u8a3a\u65ad\u306f\u5165\u53e3\u3067\u3059\u3002\u5b9f\u969b\u306e\u73fe\u5834\u3067\u306f\u3001\u5916\u6c17\u30fb\u63db\u6c17\u30fb\u4eba\u306e\u52d5\u304d\u30fb\u5185\u90e8\u767a\u71b1\u30fb\u6c17\u6d41\u30fb\u904b\u7528\u6761\u4ef6\u306a\u3069\u304c\u91cd\u306a\u3063\u3066\u640d\u5931\u304c\u751f\u307e\u308c\u307e\u3059\u3002\n \u53ef\u8996\u5316\u304b\u3089\u640d\u5931\u8981\u56e0\u306e\u78ba\u8a8d\u3001\u6539\u5584\u8a2d\u8a08\u30fb\u691c\u8a3c\u307e\u3067\u3054\u4e00\u7dd2\u306b\u6574\u7406\u3044\u305f\u3057\u307e\u3059\u3002\n <\/p>\n <button class=\"sd-retry-btn\" onclick=\"restartShindan()\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"1 4 1 10 7 10\"\/><path d=\"M3.51 15a9 9 0 102.13-9.36L1 10\"\/><\/svg>\n \u3082\u3046\u4e00\u5ea6\u8a3a\u65ad\u3059\u308b\n <\/button>\n <\/div>\n\n<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<script>\n\/* ================================================================\n \u8a3a\u65ad\u30c7\u30fc\u30bf\u5b9a\u7fa9\n \u3053\u3053\u3092\u7de8\u96c6\u3059\u308b\u3053\u3068\u3067\u8cea\u554f\u30fb\u9078\u629e\u80a2\u30fb\u30b9\u30b3\u30a2\u30fb\u8aac\u660e\u6587\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\n================================================================ *\/\n\nconst CATEGORIES = {\n C: { name: '\u5236\u5fa1\u7cfb\u30ed\u30b9' },\n A: { name: '\u7a7a\u6c17\u74b0\u5883\u7cfb\u30ed\u30b9' },\n I: { name: '\u5916\u4e71\u30fb\u5e72\u6e09\u7cfb\u30ed\u30b9' },\n D: { name: '\u8a2d\u5099\u52a3\u5316\u7cfb\u30ed\u30b9' },\n O: { name: '\u904b\u7528\u7cfb\u30ed\u30b9' },\n S: { name: '\u8a2d\u5099\u69cb\u6210\u7cfb\u30ed\u30b9' }\n};\n\nconst PRIORITY = ['A','C','I','D','O','S']; \/\/ \u540c\u70b9\u6642\u306e\u512a\u5148\u9806\n\nconst CATEGORY_DESC = {\n C: '\u8a2d\u5b9a\u6e29\u5ea6\u30fb\u904b\u8ee2\u6642\u9593\u30fb\u7acb\u3061\u4e0a\u3052\u30fb\u7121\u4eba\u6642\u9593\u5e2f\u306e\u904b\u8ee2\u306a\u3069\u3001\u7a7a\u8abf\u306e\u4f7f\u3044\u65b9\u3084\u5236\u5fa1\u65b9\u6cd5\u306b\u8d77\u56e0\u3059\u308b\u30ed\u30b9\u304c\u7591\u308f\u308c\u307e\u3059\u3002\u6bd4\u8f03\u7684\u7740\u624b\u3057\u3084\u3059\u3044\u6539\u5584\u304c\u898b\u3064\u304b\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002',\n A: '\u6e29\u5ea6\u30e0\u30e9\u30fb\u6c17\u6d41\u306e\u504f\u308a\u30fb\u51b7\u6c17\u3060\u307e\u308a\u30fb\u6696\u6c17\u3060\u307e\u308a\u306a\u3069\u306b\u3088\u308a\u3001\u6295\u5165\u3057\u305f\u30a8\u30cd\u30eb\u30ae\u30fc\u304c\u5feb\u9069\u6027\u306b\u5341\u5206\u5909\u63db\u3055\u308c\u3066\u3044\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002',\n I: '\u63db\u6c17\u30fb\u51fa\u5165\u53e3\u30fb\u7a93\u30fb\u65e5\u5c04\u30fb\u5468\u8fba\u8a2d\u5099\u306a\u3069\u306e\u5f71\u97ff\u3067\u3001\u7a7a\u8abf\u304c\u672c\u6765\u4ee5\u4e0a\u306e\u8ca0\u8377\u3092\u53d7\u3051\u3066\u3044\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002',\n D: '\u6c5a\u308c\u30fb\u4fdd\u5b88\u4e0d\u8db3\u30fb\u8a2d\u5099\u52a3\u5316\u30fb\u5ba4\u5916\u6a5f\u307e\u308f\u308a\u306e\u6761\u4ef6\u306a\u3069\u306b\u3088\u308a\u3001\u672c\u6765\u306e\u6027\u80fd\u3092\u5341\u5206\u767a\u63ee\u3067\u304d\u3066\u3044\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002',\n O: '\u55b6\u696d\u6642\u9593\u30fb\u5728\u5ba4\u72b6\u6cc1\u30fb\u30ec\u30a4\u30a2\u30a6\u30c8\u30fb\u64cd\u4f5c\u30eb\u30fc\u30eb\u306a\u3069\u3068\u7a7a\u8abf\u306e\u4f7f\u3044\u65b9\u304c\u5408\u3063\u3066\u3044\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002',\n S: '\u8a2d\u5099\u5bb9\u91cf\u30fb\u7cfb\u7d71\u306e\u5206\u3051\u65b9\u30fb\u914d\u7f6e\u30fb\u65b9\u5f0f\u306a\u3069\u3001\u69cb\u6210\u9762\u306b\u8d77\u56e0\u3059\u308b\u30ed\u30b9\u304c\u542b\u307e\u308c\u3066\u3044\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002'\n};\n\nconst NEXT_STEP = {\n C: '\u904b\u8ee2\u6642\u9593\u3068\u8a2d\u5b9a\u6e29\u5ea6\u306e\u898b\u76f4\u3057\u304b\u3089\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002',\n A: '\u6e29\u5ea6\u30e0\u30e9\u3084\u6c17\u6d41\u306e\u504f\u308a\u306e\u53ef\u8996\u5316\u304b\u3089\u59cb\u3081\u3066\u304f\u3060\u3055\u3044\u3002',\n I: '\u63db\u6c17\u3084\u958b\u53e3\u90e8\u3084\u5468\u8fba\u8a2d\u5099\u3068\u306e\u5e72\u6e09\u78ba\u8a8d\u304c\u6709\u52b9\u3067\u3059\u3002',\n D: '\u5185\u90e8\u72b6\u614b\u3084\u4fdd\u5b88\u72b6\u6cc1\u3084\u5ba4\u5916\u6a5f\u307e\u308f\u308a\u306e\u6761\u4ef6\u78ba\u8a8d\u304c\u6709\u52b9\u3067\u3059\u3002',\n O: '\u73fe\u5834\u306e\u4f7f\u3044\u65b9\u3068\u64cd\u4f5c\u30eb\u30fc\u30eb\u3068\u5728\u5ba4\u5b9f\u614b\u306e\u6574\u7406\u304c\u6709\u52b9\u3067\u3059\u3002',\n S: '\u8a2d\u5099\u306e\u5206\u3051\u65b9\u3084\u80fd\u529b\u3084\u914d\u7f6e\u3092\u542b\u3081\u305f\u78ba\u8a8d\u304c\u6709\u52b9\u3067\u3059\u3002'\n};\n\n\nconst NEXT_STEP_LINKS = {\n C: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e5%88%b6%e5%be%a1%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n A: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e7%a9%ba%e6%b0%97%e7%92%b0%e5%a2%83%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n I: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e5%a4%96%e4%b9%b1%e3%83%bb%e5%b9%b2%e6%b8%89%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n D: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e8%a8%ad%e5%82%99%e5%8a%a3%e5%8c%96%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n O: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e9%81%8b%e7%94%a8%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n S: 'https:\/\/xn--ickxd208wu5c9w0a.com\/%e3%83%9e%e3%83%b3%e3%82%ac%e3%81%a7%e8%a6%8b%e3%82%8b%e8%a8%ad%e5%82%99%e6%a7%8b%e6%88%90%e7%b3%bb%e3%83%ad%e3%82%b9\/',\n};\n\nconst NEXT_STEP_BTN_LABEL = {\n C: '\u30de\u30f3\u30ac\u3067\u5236\u5fa1\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n A: '\u30de\u30f3\u30ac\u3067\u7a7a\u6c17\u74b0\u5883\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n I: '\u30de\u30f3\u30ac\u3067\u5916\u4e71\u30fb\u5e72\u6e09\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n D: '\u30de\u30f3\u30ac\u3067\u8a2d\u5099\u52a3\u5316\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n O: '\u30de\u30f3\u30ac\u3067\u904b\u7528\u7cfb\u30ed\u30b9\u3092\u898b\u308b',\n S: '\u30de\u30f3\u30ac\u3067\u8a2d\u5099\u69cb\u6210\u7cfb\u30ed\u30b9\u3092\u898b\u308b'\n};\n\n\nfunction getSeverity(score) {\n if (score >= 12) return { text: '\u5f37\u304f\u7591\u308f\u308c\u307e\u3059', cls: 'sev-high' };\n if (score >= 8) return { text: '\u53ef\u80fd\u6027\u304c\u9ad8\u3044\u3067\u3059', cls: 'sev-mid' };\n return { text: '\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059', cls: 'sev-low' };\n}\n\n\/* ---- \u30b9\u30b3\u30a2\u30c7\u30fc\u30bf ---- *\/\nconst Q1_OPTIONS = [\n { label: '\u30aa\u30d5\u30a3\u30b9', scores: { C:2, A:1, O:2, S:1 } },\n { label: '\u5c0f\u58f2\u5e97\u8217', scores: { C:1, A:2, I:2, O:1 } },\n { label: '\u98f2\u98df\u5e97', scores: { I:3, A:2, D:1 } },\n { label: '\u30b9\u30fc\u30d1\u30fc\u30de\u30fc\u30b1\u30c3\u30c8', scores: { I:3, A:2, D:2, S:1 } },\n { label: '\u5de5\u5834\u30fb\u5009\u5eab', scores: { A:2, I:2, S:3, D:1 } },\n { label: '\u30ac\u30bd\u30ea\u30f3\u30b9\u30bf\u30f3\u30c9', scores: { I:3, A:1, D:1 } },\n { label: '\u533b\u7642\u30fb\u4ecb\u8b77\u65bd\u8a2d', scores: { C:2, A:2, O:2 } },\n { label: '\u5bbf\u6cca\u65bd\u8a2d', scores: { C:2, O:2, S:1, D:1 } },\n { label: '\u5b66\u6821\u30fb\u516c\u5171\u65bd\u8a2d', scores: { C:1, O:2, S:2 } },\n { label: '\u305d\u306e\u4ed6', scores: { C:1, A:1, I:1, D:1, O:1, S:1 } }\n];\n\nconst Q2_OPTIONS = [\n { label: '\u96fb\u6c17\u4ee3\u304c\u9ad8\u3044', scores: { C:2, D:2, O:1 } },\n { label: '\u6691\u3044\u30fb\u5bd2\u3044\u3068\u3044\u3046\u58f0\u304c\u591a\u3044', scores: { A:3, C:1 } },\n { label: '\u5834\u6240\u306b\u3088\u3063\u3066\u52b9\u304d\u65b9\u304c\u9055\u3046', scores: { A:3, S:2 } },\n { label: '\u8a2d\u5b9a\u6e29\u5ea6\u3092\u3088\u304f\u5909\u66f4\u3057\u3066\u3044\u308b', scores: { C:3, O:2 } },\n { label: '\u63db\u6c17\u3092\u3059\u308b\u3068\u52b9\u304d\u304c\u60aa\u304f\u306a\u308b', scores: { I:3, C:1 } },\n { label: '\u51fa\u5165\u53e3\u4ed8\u8fd1\u3060\u3051\u6691\u3044\u30fb\u5bd2\u3044', scores: { I:3, A:1 } },\n { label: '\u53a8\u623f\u30fb\u30b7\u30e7\u30fc\u30b1\u30fc\u30b9\u30fb\u767a\u71b1\u8a2d\u5099\u306a\u3069\u306e\u5f71\u97ff\u304c\u3042\u308b', scores: { I:3, A:2 } },\n { label: '\u55b6\u696d\u524d\u5f8c\u306e\u904b\u8ee2\u304c\u9577\u3044\u6c17\u304c\u3059\u308b', scores: { C:3, O:2 } },\n { label: '\u4eba\u304c\u3044\u306a\u3044\u6642\u9593\u3082\u904b\u8ee2\u3057\u3066\u3044\u308b', scores: { O:3, C:2 } },\n { label: '\u8a2d\u5099\u304c\u53e4\u304f\u52b9\u7387\u304c\u843d\u3061\u3066\u3044\u308b\u6c17\u304c\u3059\u308b', scores: { D:3, S:1 } },\n { label: '\u4f55\u304c\u539f\u56e0\u304b\u308f\u304b\u3089\u306a\u3044', scores: { A:1, C:1, I:1, D:1, O:1, S:1 } }\n];\n\nconst Q3_OPTIONS = [\n { label: '\u8907\u6570\u4eba\u304c\u7a7a\u8abf\u3092\u64cd\u4f5c\u3057\u3066\u3044\u308b', scores: { C:3, O:2 } },\n { label: '\u73fe\u5834\u5224\u65ad\u3067\u8a2d\u5b9a\u6e29\u5ea6\u3092\u5909\u3048\u308b\u3053\u3068\u304c\u591a\u3044', scores: { C:3, O:2 } },\n { label: '\u55b6\u696d\u6642\u9593\u30fb\u7a3c\u50cd\u6642\u9593\u304c\u9577\u3044', scores: { O:2, C:1, D:1 } },\n { label: '\u4eba\u306e\u51fa\u5165\u308a\u304c\u591a\u3044', scores: { I:3, A:1 } },\n { label: '\u5b63\u7bc0\u3067\u60a9\u307f\u304c\u5927\u304d\u304f\u5909\u308f\u308b', scores: { A:2, I:2, C:1 } },\n { label: '\u30ec\u30a4\u30a2\u30a6\u30c8\u5909\u66f4\u5f8c\u3001\u7a7a\u8abf\u8a2d\u5b9a\u3092\u898b\u76f4\u3057\u3066\u3044\u306a\u3044', scores: { O:3, S:2, A:1 } },\n { label: '\u63db\u6c17\u3092\u5f37\u3081\u3066\u304b\u3089\u52b9\u304d\u304c\u5909\u308f\u3063\u305f', scores: { I:3, C:1 } },\n { label: '\u4e00\u90e8\u3060\u3051\u6691\u3044\u30fb\u5bd2\u3044\u30a8\u30ea\u30a2\u304c\u3042\u308b', scores: { A:3, S:2 } },\n { label: '\u7acb\u3061\u4e0a\u3052\u6642\u306b\u4e00\u6c17\u306b\u8ca0\u8377\u304c\u304b\u304b\u308b', scores: { C:3, D:1 } },\n { label: '24\u6642\u9593\u904b\u8ee2\u307e\u305f\u306f\u305d\u308c\u306b\u8fd1\u3044\u904b\u8ee2\u304c\u3042\u308b', scores: { O:2, D:2, C:1 } }\n];\n\nconst Q4_OPTIONS = [\n { label: '\u5439\u51fa\u53e3\u306e\u8fd1\u304f\u306f\u5bd2\u3044\u304c\u3001\u96e2\u308c\u308b\u3068\u6691\u3044', scores: { A:3, S:2 } },\n { label: '\u5929\u4e95\u4ed8\u8fd1\u3068\u8db3\u5143\u3067\u4f53\u611f\u304c\u9055\u3046', scores: { A:3, I:1 } },\n { label: '\u51fa\u5165\u53e3\u3084\u7a93\u307e\u308f\u308a\u306e\u5f71\u97ff\u304c\u5927\u304d\u3044', scores: { I:3, A:1 } },\n { label: '\u5ba4\u5916\u6a5f\u307e\u308f\u308a\u306e\u74b0\u5883\u304c\u3088\u304f\u306a\u3044\u6c17\u304c\u3059\u308b', scores: { D:3, I:1 } },\n { label: '\u30d5\u30a3\u30eb\u30bf\u30fc\u3084\u5185\u90e8\u6e05\u6383\u306e\u72b6\u6cc1\u304c\u6c17\u306b\u306a\u308b', scores: { D:3, O:1 } },\n { label: '\u51b7\u623f\u306f\u52b9\u304f\u304c\u6e7f\u3063\u307d\u3044', scores: { A:2, D:2 } },\n { label: '\u6696\u623f\u306f\u52b9\u304f\u304c\u306e\u307c\u305b\u308b\u30fb\u8db3\u5143\u304c\u5bd2\u3044', scores: { A:3 } },\n { label: '\u4e00\u90e8\u8a2d\u5099\u3068\u306e\u5e72\u6e09\u304c\u898b\u3048\u308b', scores: { I:3, S:1 } },\n { label: '\u7a7a\u8abf\u306f\u52d5\u3044\u3066\u3044\u308b\u304c\u5feb\u9069\u3068\u306f\u8a00\u3048\u306a\u3044', scores: { A:2, C:1, D:1 } },\n { label: '\u80fd\u529b\u4e0d\u8db3\u306a\u306e\u304b\u4f7f\u3044\u65b9\u306e\u554f\u984c\u306a\u306e\u304b\u5206\u304b\u3089\u306a\u3044', scores: { S:2, C:1, O:1 } }\n];\n\n\/* ================================================================\n \u30a2\u30d7\u30ea\u72b6\u614b\n================================================================ *\/\nlet currentQ = 0;\nconst answers = { q1: null, q2: [], q3: [], q4: [] };\n\n\/* ================================================================\n \u521d\u671f\u5316\n================================================================ *\/\ndocument.addEventListener('DOMContentLoaded', () => {\n renderOptions('q1-options', Q1_OPTIONS, 'radio', 'q1');\n renderOptions('q2-options', Q2_OPTIONS, 'checkbox', 'q2');\n renderOptions('q3-options', Q3_OPTIONS, 'checkbox', 'q3');\n renderOptions('q4-options', Q4_OPTIONS, 'checkbox', 'q4');\n});\n\nfunction renderOptions(containerId, options, type, name) {\n const container = document.getElementById(containerId);\n container.innerHTML = options.map((opt, i) => `\n <label class=\"sd-option\">\n <input type=\"${type}\" name=\"${name}\" value=\"${i}\" aria-label=\"${opt.label}\">\n <span class=\"sd-option-label\">${opt.label}<\/span>\n <\/label>\n `).join('');\n}\n\n\/* ================================================================\n \u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u958b\u9589\n================================================================ *\/\nfunction openShindan() {\n const app = document.getElementById('shindan-app');\n app.classList.add('active');\n document.body.style.overflow = 'hidden';\n \/\/ \u30d5\u30a9\u30fc\u30ab\u30b9\u30c8\u30e9\u30c3\u30d7\u7528\n app.querySelector('.sd-close-btn').focus();\n}\n\nfunction closeShindan() {\n document.getElementById('shindan-app').classList.remove('active');\n document.body.style.overflow = '';\n}\n\n\/* ================================================================\n \u30af\u30a4\u30ba\u958b\u59cb\u30fb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\n================================================================ *\/\nfunction startQuiz() {\n document.getElementById('sd-intro').style.display = 'none';\n document.getElementById('sd-quiz').style.display = 'block';\n document.getElementById('sd-progress-wrap').style.display = 'block';\n showQuestion(1);\n}\n\nfunction showQuestion(n) {\n document.querySelectorAll('.sd-question').forEach(el => el.classList.remove('active'));\n document.getElementById('q' + n).classList.add('active');\n currentQ = n;\n updateProgress(n);\n \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30c8\u30c3\u30d7\n const scroll = document.querySelector('.sd-scroll');\n if (scroll) scroll.scrollTop = 0;\n}\n\nfunction updateProgress(n) {\n for (let i = 1; i <= 4; i++) {\n const dot = document.getElementById('dot-' + i);\n dot.className = 'sd-step-dot';\n if (i < n) dot.classList.add('done');\n if (i === n) dot.classList.add('active');\n }\n document.getElementById('sd-progress-label').textContent = `\u8cea\u554f ${n} \/ 4`;\n}\n\nfunction goNext(n) {\n if (!validate(n)) return;\n saveAnswers(n);\n if (n < 4) showQuestion(n + 1);\n else showResult();\n}\n\nfunction goPrev(n) {\n showQuestion(n - 1);\n}\n\n\/* ================================================================\n \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\n================================================================ *\/\nfunction validate(n) {\n const errorEl = document.getElementById('q' + n + '-error');\n const valid = n === 1\n ? !!document.querySelector('input[name=\"q1\"]:checked')\n : document.querySelectorAll(`input[name=\"q${n}\"]:checked`).length > 0;\n errorEl.classList.toggle('show', !valid);\n return valid;\n}\n\n\/* ================================================================\n \u56de\u7b54\u4fdd\u5b58\n================================================================ *\/\nfunction saveAnswers(n) {\n if (n === 1) {\n const checked = document.querySelector('input[name=\"q1\"]:checked');\n answers.q1 = checked ? parseInt(checked.value) : null;\n } else {\n const checked = document.querySelectorAll(`input[name=\"q${n}\"]:checked`);\n answers['q' + n] = Array.from(checked).map(el => parseInt(el.value));\n }\n}\n\n\/* ================================================================\n \u30b9\u30b3\u30a2\u96c6\u8a08\n================================================================ *\/\nfunction calcScores() {\n const totals = { C:0, A:0, I:0, D:0, O:0, S:0 };\n if (answers.q1 !== null) {\n const s = Q1_OPTIONS[answers.q1].scores;\n for (const k in s) totals[k] += s[k];\n }\n [{ arr: answers.q2, opts: Q2_OPTIONS },\n { arr: answers.q3, opts: Q3_OPTIONS },\n { arr: answers.q4, opts: Q4_OPTIONS }].forEach(({ arr, opts }) => {\n arr.forEach(idx => {\n const s = opts[idx].scores;\n for (const k in s) totals[k] += s[k];\n });\n });\n return totals;\n}\n\nfunction rankCategories(totals) {\n return Object.keys(totals).sort((a, b) => {\n if (totals[b] !== totals[a]) return totals[b] - totals[a];\n return PRIORITY.indexOf(a) - PRIORITY.indexOf(b);\n });\n}\n\n\/* ================================================================\n \u7d50\u679c\u8868\u793a\n================================================================ *\/\nfunction showResult() {\n if (!validate(4)) return;\n saveAnswers(4);\n\n const totals = calcScores();\n const ranked = rankCategories(totals);\n const top3 = ranked.slice(0, 3);\n const maxScore = Math.max(...Object.values(totals), 1);\n\n \/\/ \u9032\u6357\u30d0\u30fc\u3092\u975e\u8868\u793a\n document.getElementById('sd-progress-wrap').style.display = 'none';\n document.getElementById('sd-quiz').style.display = 'none';\n\n const resultEl = document.getElementById('sd-result');\n resultEl.classList.add('active');\n\n \/\/ \u30ab\u30fc\u30c9\u751f\u6210\n const rankLabels = ['1\u4f4d', '2\u4f4d', '3\u4f4d'];\n const cardsHtml = top3.map((cat, i) => {\n const rank = i + 1;\n const score = totals[cat];\n const sev = getSeverity(score);\n const pct = Math.round((score \/ maxScore) * 100);\n return `\n <div class=\"sd-result-card rank-${rank}\">\n <div class=\"sd-card-top\">\n <span class=\"sd-rank-badge\">${rankLabels[i]}<\/span>\n <span class=\"sd-card-name\">${CATEGORIES[cat].name}<\/span>\n <span class=\"sd-severity-badge ${sev.cls}\">${sev.text}<\/span>\n <\/div>\n <div class=\"sd-score-track\">\n <div class=\"sd-score-fill\" style=\"width:0%\" data-pct=\"${pct}\"><\/div>\n <\/div>\n <p class=\"sd-card-desc\">${CATEGORY_DESC[cat]}<\/p>\n <\/div>\n `;\n }).join('');\n\n document.getElementById('result-cards').innerHTML = cardsHtml;\n document.getElementById('next-step-text').textContent = NEXT_STEP[top3[0]];\n\n\n\n\/\/ \u2193 \u3053\u306e\u4e0b\u306b\u30dc\u30bf\u30f3\u306e\u51e6\u7406\u3092\u8ffd\u52a0\nconst btn = document.getElementById('next-step-btn');\nbtn.href = NEXT_STEP_LINKS[top3[0]];\nbtn.textContent = NEXT_STEP_BTN_LABEL[top3[0]]; \/\/ \u2190 \u8ffd\u52a0\nbtn.style.display = 'inline-block';\n\n\n\n \/\/ \u30b9\u30b3\u30a2\u30d0\u30fc\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\n requestAnimationFrame(() => {\n setTimeout(() => {\n document.querySelectorAll('.sd-score-fill').forEach(el => {\n el.style.width = el.dataset.pct + '%';\n });\n }, 120);\n });\n\n \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30c8\u30c3\u30d7\n const scroll = document.querySelector('.sd-scroll');\n if (scroll) scroll.scrollTop = 0;\n}\n\n\/* ================================================================\n \u30ea\u30bb\u30c3\u30c8\n================================================================ *\/\nfunction restartShindan() {\n answers.q1 = null; answers.q2 = []; answers.q3 = []; answers.q4 = [];\n document.querySelectorAll('#shindan-app input').forEach(el => el.checked = false);\n document.querySelectorAll('.sd-error-msg').forEach(el => el.classList.remove('show'));\n document.getElementById('sd-result').classList.remove('active');\n document.getElementById('sd-intro').style.display = 'block';\n document.getElementById('sd-progress-wrap').style.display = 'none';\ndocument.getElementById('next-step-btn').style.display = 'none'; \/\/\n}\n\n\n\n\/* ================================================================\n \u30ad\u30fc\u30dc\u30fc\u30c9\n================================================================ *\/\ndocument.addEventListener('keydown', e => {\n if (e.key === 'Escape') closeShindan();\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u7c21\u6613\u30ed\u30b9\u8a3a\u65ad | \u7a7a\u8abf\u7701\u30a8\u30cd.com \u7c21\u6613\u30ed\u30b9\u8a3a\u65ad\u3092\u306f\u3058\u3081\u308b \u2192 \u203b\u672c\u8a3a\u65ad\u306f\u7c21\u6613\u7684\u306a\u4eee\u5224\u5b9a\u3067\u3059\u3002\u8a73\u7d30\u306a\u78ba\u8a8d\u306b\u306f\u3001\u73fe\u5834\u6761\u4ef6\u30fb\u904b\u7528\u72b6\u6cc1\u30fb\u8a2d\u5099\u72b6\u6cc1\u306e\u78ba\u8a8d\u304c\u5fc5\u8981\u3067\u3059\u3002 \u7a7a\u8abf\u7701\u30a8\u30cd.com \u7c21\u6613\u30ed\u30b9\u8a3a\u65ad \u9589\u3058\u308b \u8cea\u554f 1 \/ 4 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_lightning_design_setting":[],"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gepa-japan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26"}],"version-history":[{"count":6,"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":275,"href":"https:\/\/gepa-japan.org\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions\/275"}],"wp:attachment":[{"href":"https:\/\/gepa-japan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}