{"id":13202,"date":"2026-02-17T05:28:08","date_gmt":"2026-02-17T05:28:08","guid":{"rendered":"https:\/\/seikaku-type.com\/design\/?post_type=16types&#038;p=13202"},"modified":"2026-02-17T05:28:34","modified_gmt":"2026-02-17T05:28:34","slug":"13202","status":"publish","type":"16types","link":"https:\/\/seikaku-type.com\/design\/16types\/13202\/","title":{"rendered":""},"content":{"rendered":"\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n<style>\n    :root {\n        \/* Soft & Trustworthy Colors *\/\n        --primary-color: #2b5c8a; \/* \u5c11\u3057\u660e\u308b\u304f\u30bd\u30d5\u30c8\u306a\u30cd\u30a4\u30d3\u30fc *\/\n        --primary-light: #eef4f9;\n        --accent-color: #d4b673;  \/* \u512a\u3057\u3044\u30b4\u30fc\u30eb\u30c9 *\/\n        --bg-color: #f7f9fc;      \/* \u9752\u307f\u306e\u3042\u308b\u30af\u30ea\u30a2\u306a\u767d\u30b0\u30ec\u30fc *\/\n        --text-color: #444444;    \/* \u771f\u3063\u9ed2\u3067\u306f\u306a\u304f\u6fc3\u3044\u30b0\u30ec\u30fc *\/\n        --card-bg: #ffffff;\n        --gray-line: #ececec;\n        --chat-max-width: 600px;\n    }\n\n\n    \/* --- Header --- *\/\n    .pct-header {\n        background-color: rgba(255, 255, 255, 0.95);\n        backdrop-filter: blur(5px);\n        padding: 15px 20px;\n        text-align: center;\n        border-bottom: 1px solid rgba(0,0,0,0.03);\n        box-shadow: 0 4px 15px rgba(0,0,0,0.03); \/* \u3075\u3093\u308f\u308a\u3057\u305f\u5f71 *\/\n        z-index: 100;\n        flex-shrink: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n    }\n    .pct-header h2 {\n        margin: 0;\n        font-size: 1rem;\n        color: var(--primary-color);\n        font-weight: 700;\n        letter-spacing: 0.05em;\n    }\n    .pct-progress-bar-container {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 4px;\n        background: transparent;\n    }\n    .pct-progress-bar {\n        height: 100%;\n        background-color: var(--accent-color);\n        width: 0%;\n        transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);\n        border-radius: 0 2px 2px 0;\n    }\n\n    \/* --- Chat Timeline (Scroll Area) --- *\/\n    #pct-chat-timeline {\n        flex: 1;\n        overflow-y: auto;\n        padding: 20px;\n        scroll-behavior: smooth;\n        -webkit-overflow-scrolling: touch;\n        display: flex;\n        flex-direction: column;\n        gap: 24px; \/* \u30e1\u30c3\u30bb\u30fc\u30b8\u9593\u9694\u3092\u5e83\u3052\u3066\u3086\u3063\u305f\u308a\u3068 *\/\n        padding-bottom: 200px; \/* Space for bottom dock *\/\n        max-width: var(--chat-max-width);\n        margin: 0 auto;\n        width: 100%;\n    }\n\n    \/* --- Chat Bubbles --- *\/\n    .pct-msg {\n        display: flex;\n        flex-direction: column;\n        max-width: 92%;\n        animation: slideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n        opacity: 0;\n        transform: translateY(15px);\n    }\n    .pct-msg.bot {\n        align-self: flex-start;\n    }\n    .pct-msg.user {\n        align-self: flex-end;\n        align-items: flex-end;\n    }\n\n    \/* Avatar *\/\n    .pct-avatar {\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        background-color: var(--primary-color);\n        color: #fff;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 14px;\n        font-weight: bold;\n        margin-bottom: 4px;\n        box-shadow: 0 4px 8px rgba(43, 92, 138, 0.2);\n        flex-shrink: 0; \/* \u30a2\u30d0\u30bf\u30fc\u304c\u3064\u3076\u308c\u306a\u3044\u3088\u3046\u306b *\/\n    }\n    .pct-avatar-label {\n        font-size: 0.75rem;\n        color: #999;\n        margin-left: 6px;\n        margin-bottom: 4px;\n    }\n\n    \/* Bubble Styles - Rounder & Softer *\/\n    .pct-bubble {\n        padding: 16px 20px;\n        border-radius: 24px; \/* \u3088\u308a\u4e38\u304f *\/\n        font-size: 0.95rem;\n        line-height: 1.7;\n        position: relative;\n        box-shadow: 0 2px 6px rgba(0,0,0,0.03);\n    }\n    .pct-msg.bot .pct-bubble {\n        background-color: #fff;\n        border-top-left-radius: 4px;\n        color: var(--text-color);\n    }\n    .pct-msg.user .pct-bubble {\n        background-color: var(--primary-color);\n        color: #fff;\n        border-top-right-radius: 4px;\n        box-shadow: 0 4px 12px rgba(43, 92, 138, 0.25);\n    }\n\n    \/* Question Card within Chat *\/\n    .pct-q-card {\n        background: #fff;\n        border-radius: 20px; \/* \u30ab\u30fc\u30c9\u3082\u4e38\u304f *\/\n        padding: 0;\n        overflow: hidden;\n        border: 1px solid rgba(0,0,0,0.03);\n        margin-top: 5px;\n        box-shadow: 0 4px 20px rgba(0,0,0,0.04);\n    }\n    .pct-q-header {\n        background: var(--primary-light);\n        color: var(--primary-color);\n        padding: 8px 16px;\n        font-size: 0.8rem;\n        font-weight: 700;\n        letter-spacing: 1px;\n        text-align: center;\n    }\n    .pct-q-body {\n        padding: 20px 20px 25px;\n    }\n    .pct-q-text {\n        font-weight: 700;\n        font-size: 1.15rem;\n        margin-bottom: 20px;\n        color: var(--primary-color);\n        text-align: center;\n        line-height: 1.5;\n    }\n    .pct-opt-container {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n    .pct-opt-row {\n        display: flex;\n        align-items: flex-start;\n        padding: 14px 16px;\n        background: #fcfcfc;\n        border-radius: 12px;\n        border: 1px solid #f0f0f0;\n        transition: transform 0.2s;\n    }\n    .pct-opt-row:hover {\n        background: #fafafa;\n    }\n    .pct-opt-row.opt-a { border-left: 5px solid #9caebf; } \/* \u30bd\u30d5\u30c8\u306a\u30b0\u30ec\u30fc\u30d6\u30eb\u30fc *\/\n    .pct-opt-row.opt-b { border-left: 5px solid var(--accent-color); }\n    \n    .pct-opt-mark {\n        font-weight: 800;\n        margin-right: 12px;\n        font-size: 1.2rem;\n        line-height: 1.1;\n        margin-top: 1px;\n    }\n    .opt-a .pct-opt-mark { color: #9caebf; }\n    .opt-b .pct-opt-mark { color: var(--accent-color); }\n\n    .pct-opt-desc {\n        font-size: 0.95rem;\n        color: #555;\n    }\n\n    \/* --- Input Dock (Fixed Bottom) --- *\/\n    #pct-input-dock {\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        background: rgba(255, 255, 255, 0.92);\n        backdrop-filter: blur(12px); \/* \u3059\u308a\u30ac\u30e9\u30b9\u52b9\u679c *\/\n        border-top: 1px solid rgba(0,0,0,0.05);\n        padding: 15px 20px 30px; \/* iOS safe area *\/\n        z-index: 200;\n        display: none; \/* Hidden initially *\/\n        flex-direction: column;\n        align-items: center;\n        box-shadow: 0 -10px 30px rgba(0,0,0,0.05);\n        animation: slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n        border-radius: 20px 20px 0 0; \/* \u4e0a\u90e8\u3092\u4e38\u304f *\/\n    }\n    #pct-input-dock.visible {\n        display: flex;\n    }\n\n    .pct-dock-header {\n        font-size: 0.85rem;\n        color: #888;\n        margin-bottom: 16px;\n        display: flex;\n        justify-content: space-between;\n        width: 100%;\n        max-width: 500px;\n        font-weight: 700;\n    }\n\n    \/* Scale Buttons Container *\/\n    .pct-scale-buttons {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        max-width: 500px;\n        position: relative;\n        \/* \u30e2\u30d0\u30a4\u30eb\u3067\u6a2a\u5e45\u304c\u72ed\u3044\u5834\u5408\u3067\u3082\u6298\u308a\u8fd4\u3055\u306a\u3044 *\/\n        flex-wrap: nowrap;\n    }\n    \n    \/* \u30e9\u30a4\u30f3 *\/\n    .pct-scale-buttons::before {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 15px;\n        right: 15px;\n        height: 3px;\n        background: #f0f0f0;\n        z-index: 0;\n        border-radius: 2px;\n    }\n\n    \/* \u30dc\u30bf\u30f3\u5171\u901a\u30b9\u30bf\u30a4\u30eb - flex-shrink: 0 \u3067\u3064\u3076\u308c\u9632\u6b62 *\/\n    .pct-scale-btn {\n        flex-shrink: 0; \/* \u91cd\u8981\uff1a\u7e2e\u5c0f\u3092\u9632\u3050 *\/\n        border-radius: 50%;\n        border: 2px solid transparent;\n        background: #fff;\n        cursor: pointer;\n        z-index: 1;\n        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 0.8rem;\n        font-weight: 700;\n        color: #888;\n        box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n    }\n    \n    \/* Specific Colors *\/\n    .btn-a { border-color: #ced6e0; color: #7f8c8d; }\n    .btn-b { border-color: #e6cea0; color: #bca05d; } \/* \u30a2\u30af\u30bb\u30f3\u30c8\u3088\u308a\u5c11\u3057\u8584\u304f *\/\n    .btn-n { border-color: #f1f2f6; background: #f1f2f6; color: #ccc; }\n\n    \/* Sizes (Default) *\/\n    .btn-lg { width: 52px; height: 52px; font-size: 1rem; }\n    .btn-md { width: 42px; height: 42px; }\n    .btn-sm { width: 34px; height: 34px; }\n    .btn-n  { width: 30px; height: 30px; }\n\n    .pct-scale-btn:active { transform: scale(0.9); }\n    \n    .btn-a:active { background: #dfe4ea; }\n    .btn-b:active { background: #fff5e1; }\n\n    \/* --- Start Button (In Chat) --- *\/\n    .pct-chat-btn {\n        background: var(--primary-color);\n        color: #fff;\n        border: none;\n        padding: 14px 35px;\n        border-radius: 50px;\n        font-weight: 700;\n        font-size: 1rem;\n        cursor: pointer;\n        margin-top: 15px;\n        box-shadow: 0 4px 15px rgba(43, 92, 138, 0.3);\n        align-self: center; \/* \u30bb\u30f3\u30bf\u30fc\u914d\u7f6e *\/\n        transition: transform 0.1s, box-shadow 0.2s;\n    }\n    .pct-chat-btn:hover {\n        box-shadow: 0 6px 20px rgba(43, 92, 138, 0.4);\n        transform: translateY(-2px);\n    }\n    .pct-chat-btn:active { transform: scale(0.96); }\n\n    \/* --- Result Card (In Chat) --- *\/\n    .pct-res-card {\n        background: #fff;\n        border-radius: 24px;\n        padding: 35px 25px;\n        text-align: center;\n        border: 1px solid rgba(0,0,0,0.03);\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        margin: 20px 0;\n        animation: fadeIn 1s ease-out;\n        position: relative;\n        overflow: hidden;\n    }\n    .pct-res-card::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 6px;\n        background: linear-gradient(to right, var(--primary-color), var(--accent-color));\n    }\n    .pct-res-type {\n        font-size: 3.2rem;\n        font-weight: 800;\n        color: var(--primary-color);\n        line-height: 1;\n        margin: 15px 0 5px;\n        letter-spacing: -1px;\n    }\n    .pct-res-sub {\n        font-size: 1.1rem;\n        color: var(--accent-color);\n        font-weight: 700;\n        margin-bottom: 25px;\n        letter-spacing: 0.05em;\n    }\n    .pct-res-desc {\n        text-align: left;\n        font-size: 0.95rem;\n        color: #555;\n        background: #f9fcff;\n        padding: 20px;\n        border-radius: 16px;\n        margin-bottom: 25px;\n        line-height: 1.8;\n    }\n\n    \/* --- Animations --- *\/\n    @keyframes slideIn {\n        to { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes slideUp {\n        from { transform: translateY(100%); opacity: 0; }\n        to { transform: translateY(0); opacity: 1; }\n    }\n    @keyframes fadeIn {\n        from { opacity: 0; }\n        to { opacity: 1; }\n    }\n    \n    \/* Loading Dots *\/\n    .typing-indicator {\n        display: inline-flex;\n        align-items: center;\n        gap: 5px;\n        padding: 14px 20px;\n        background: #fff;\n        border-radius: 20px;\n        border-top-left-radius: 4px;\n        margin-bottom: 10px;\n        box-shadow: 0 2px 5px rgba(0,0,0,0.03);\n    }\n    .typing-dot {\n        width: 7px;\n        height: 7px;\n        background: #d1d1d1;\n        border-radius: 50%;\n        animation: typing 1.4s infinite ease-in-out;\n    }\n    .typing-dot:nth-child(1) { animation-delay: 0s; }\n    .typing-dot:nth-child(2) { animation-delay: 0.2s; }\n    .typing-dot:nth-child(3) { animation-delay: 0.4s; }\n    \n    @keyframes typing {\n        0%, 100% { transform: scale(1); opacity: 0.5; }\n        50% { transform: scale(1.3); opacity: 1; }\n    }\n\n    \/* --- Mobile Optimization --- *\/\n    @media (max-width: 480px) {\n        .pct-header h2 { font-size: 0.9rem; }\n        .pct-avatar { width: 32px; height: 32px; font-size: 12px; }\n        .pct-chat-timeline { padding: 15px; }\n        .pct-bubble { padding: 12px 16px; font-size: 0.9rem; }\n        .pct-res-type { font-size: 2.6rem; }\n        \n        \/* \u30dc\u30bf\u30f3\u30b5\u30a4\u30ba\u306e\u7e2e\u5c0f\uff08\u3064\u3076\u308c\u9632\u6b62\u306e\u305f\u3081\uff09 *\/\n        .btn-lg { width: 44px; height: 44px; font-size: 0.9rem; }\n        .btn-md { width: 38px; height: 38px; }\n        .btn-sm { width: 30px; height: 30px; }\n        .btn-n  { width: 26px; height: 26px; }\n        \n        \/* Dock\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u8abf\u6574 *\/\n        #pct-input-dock { padding: 15px 15px 25px; }\n        .pct-dock-header { font-size: 0.75rem; margin-bottom: 12px; }\n    }\n    \n    \/* \u3055\u3089\u306b\u72ed\u3044\u753b\u9762 (iPhone SE 1st gen\u306a\u3069) *\/\n    @media (max-width: 360px) {\n        .btn-lg { width: 40px; height: 40px; }\n        .btn-md { width: 34px; height: 34px; }\n        .btn-sm { width: 28px; height: 28px; }\n        .btn-n  { width: 24px; height: 24px; }\n    }\n\n<\/style>\n\n<div class=\"pct-header\">\n    <div style=\"width:24px; height:24px; background:var(--primary-color); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:bold;\">B<\/div>\n    <h2>\u30d3\u30b8\u30cd\u30b9\u9069\u6027\u8a3a\u65ad Bot<\/h2>\n    <div class=\"pct-progress-bar-container\">\n        <div id=\"pct-progress\" class=\"pct-progress-bar\"><\/div>\n    <\/div>\n<\/div>\n\n<div id=\"pct-chat-timeline\">\n    <!-- Messages will be appended here -->\n<\/div>\n\n<div id=\"pct-input-dock\">\n    <div class=\"pct-dock-header\">\n        <span>A<\/span>\n        <span>\u3069\u3061\u3089\u306b\u8fd1\u3044\u3067\u3059\u304b\uff1f<\/span>\n        <span style=\"color:var(--accent-color)\">B<\/span>\n    <\/div>\n    <div class=\"pct-scale-buttons\">\n        <div class=\"pct-scale-btn btn-a btn-lg\" onclick=\"handleAnswer(-3)\">\u5927<\/div>\n        <div class=\"pct-scale-btn btn-a btn-md\" onclick=\"handleAnswer(-2)\">\u4e2d<\/div>\n        <div class=\"pct-scale-btn btn-a btn-sm\" onclick=\"handleAnswer(-1)\">\u5c0f<\/div>\n        <div class=\"pct-scale-btn btn-n\" onclick=\"handleAnswer(0)\"><\/div>\n        <div class=\"pct-scale-btn btn-b btn-sm\" onclick=\"handleAnswer(1)\">\u5c0f<\/div>\n        <div class=\"pct-scale-btn btn-b btn-md\" onclick=\"handleAnswer(2)\">\u4e2d<\/div>\n        <div class=\"pct-scale-btn btn-b btn-lg\" onclick=\"handleAnswer(3)\">\u5927<\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/**\n * Data Definition (Same as before)\n *\/\nconst pctData = {\n    phase1: [\n        { id: 1, type: \"SN\", text: \"\u65b0\u30b5\u30fc\u30d3\u30b9\u3084\u5546\u54c1\u3092\u30ea\u30ea\u30fc\u30b9\u3059\u308b\u969b\u3001\u91cd\u8996\u3059\u308b\u306e\u306f\uff1f\", a: \"\u904e\u53bb\u306e\u5b9f\u7e3e\u3084\u30c7\u30fc\u30bf\u304c\u3042\u308a\u3001\u78ba\u5b9f\u306b\u58f2\u308c\u308b\u6839\u62e0\u304c\u3042\u308b\u3082\u306e\", b: \"\u307e\u3060\u5e02\u5834\u306b\u306f\u306a\u3044\u304c\u3001\u5c06\u6765\u7684\u306b\u5316\u3051\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u65ac\u65b0\u306a\u3082\u306e\" },\n        { id: 2, type: \"SN\", text: \"\u65e5\u3005\u306e\u696d\u52d9\u306b\u304a\u3044\u3066\u3001\u5b89\u5fc3\u611f\u3092\u611f\u3058\u308b\u306e\u306f\uff1f\", a: \"\u30de\u30cb\u30e5\u30a2\u30eb\u3084\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304c\u3042\u308a\u3001\u624b\u9806\u901a\u308a\u306b\u9032\u3081\u3089\u308c\u308b\u6642\", b: \"\u81ea\u5206\u306a\u308a\u306e\u5de5\u592b\u3092\u51dd\u3089\u3057\u3001\u30bc\u30ed\u304b\u3089\u5f62\u3092\u4f5c\u3063\u3066\u3044\u308b\u6642\" },\n        { id: 3, type: \"SN\", text: \"\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3078\u306e\u63d0\u6848\u3067\u610f\u8b58\u3057\u3066\u3044\u308b\u3053\u3068\u306f\uff1f\", a: \"\u5177\u4f53\u7684\u3067\u5b9f\u73fe\u53ef\u80fd\u306a\u6570\u5b57\u3084\u30b9\u30b1\u30b8\u30e5\u30fc\u30eb\u3092\u793a\u3059\u3053\u3068\", b: \"\u305d\u306e\u4e8b\u696d\u304c\u76ee\u6307\u3059\u3079\u304d\u7406\u60f3\u3084\u30d3\u30b8\u30e7\u30f3\u3092\u8a9e\u308b\u3053\u3068\" },\n        { id: 4, type: \"TF\", text: \"\u30d3\u30b8\u30cd\u30b9\u4e0a\u306e\u91cd\u8981\u306a\u610f\u601d\u6c7a\u5b9a\u3092\u3059\u308b\u969b\u3001\u512a\u5148\u3059\u308b\u306e\u306f\uff1f\", a: \"\u5229\u76ca\u7387\u3084\u52b9\u7387\u6027\u3068\u3044\u3063\u305f\u3001\u5ba2\u89b3\u7684\u306a\u5408\u7406\u6027\", b: \"\u95a2\u308f\u308b\u4eba\u3005\u306e\u60f3\u3044\u3084\u3001\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306e\u8abf\u548c\" },\n        { id: 5, type: \"TF\", text: \"\u30d1\u30fc\u30c8\u30ca\u30fc\u3084\u5916\u6ce8\u5148\u3078\u306e\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u306b\u3064\u3044\u3066\", a: \"\u54c1\u8cea\u5411\u4e0a\u306e\u305f\u3081\u3001\u6539\u5584\u70b9\u3092\u7387\u76f4\u304b\u3064\u8ad6\u7406\u7684\u306b\u4f1d\u3048\u308b\", b: \"\u76f8\u624b\u306e\u30e2\u30c1\u30d9\u30fc\u30b7\u30e7\u30f3\u3092\u4e0b\u3052\u306a\u3044\u3088\u3046\u3001\u8a00\u3044\u65b9\u3084\u611f\u60c5\u306b\u914d\u616e\u3059\u308b\" },\n        { id: 6, type: \"TF\", text: \"\u4e8b\u696d\u306e\u6210\u529f\u6307\u6a19\u3068\u3057\u3066\u3001\u3088\u308a\u5145\u8db3\u611f\u3092\u5f97\u3089\u308c\u308b\u306e\u306f\uff1f\", a: \"\u76ee\u6a19\u3068\u3057\u305f\u58f2\u4e0a\u3084\u5229\u76ca\u3001\u30bf\u30b9\u30af\u306e\u5b8c\u9042\", b: \"\u9867\u5ba2\u304b\u3089\u306e\u611f\u8b1d\u306e\u58f0\u3084\u3001\u30c1\u30fc\u30e0\u306e\u826f\u597d\u306a\u95a2\u4fc2\u6027\" }\n    ],\n    phase2: {\n        ST: [\n            { id: 7, type: \"EI\", text: \"\u4e8b\u696d\u62e1\u5927\u306e\u305f\u3081\u306e\u884c\u52d5\u3068\u3057\u3066\u3001\u5f97\u610f\u306a\u306e\u306f\uff1f\", a: \"\u4ea4\u6d41\u4f1a\u3084\u30bb\u30df\u30ca\u30fc\u3067\u7a4d\u6975\u7684\u306b\u540d\u523a\u4ea4\u63db\u30fb\u55b6\u696d\u3092\u3059\u308b\", b: \"\u30d6\u30ed\u30b0\u57f7\u7b46\u3084\u5c02\u9580\u77e5\u8b58\u306e\u6574\u7406\u306a\u3069\u3001\u4e00\u4eba\u3067\u8cea\u3092\u9ad8\u3081\u308b\u4f5c\u696d\" },\n            { id: 8, type: \"EI\", text: \"\u30c8\u30e9\u30d6\u30eb\u767a\u751f\u6642\u306e\u5bfe\u5fdc\u30b9\u30bf\u30a4\u30eb\u306f\uff1f\", a: \"\u307e\u305a\u306f\u95a2\u4fc2\u5404\u6240\u306b\u9023\u7d61\u3057\u3001\u52d5\u304d\u306a\u304c\u3089\u89e3\u6c7a\u7b56\u3092\u63a2\u308b\", b: \"\u4e00\u5ea6\u6301\u3061\u5e30\u308a\u3001\u72b6\u6cc1\u3092\u6574\u7406\u30fb\u5206\u6790\u3057\u3066\u304b\u3089\u5bfe\u5fdc\u3059\u308b\" },\n            { id: 9, type: \"EI\", text: \"\u4ed5\u4e8b\u74b0\u5883\u3068\u3057\u3066\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u4e0a\u304c\u308b\u306e\u306f\uff1f\", a: \"\u6d3b\u6c17\u304c\u3042\u308a\u3001\u5e38\u306b\u4eba\u306e\u51fa\u5165\u308a\u3084\u4f1a\u8a71\u304c\u3042\u308b\u5834\u6240\", b: \"\u9759\u5bc2\u3067\u3001\u8ab0\u306b\u3082\u90aa\u9b54\u3055\u308c\u305a\u306b\u96c6\u4e2d\u3067\u304d\u308b\u5834\u6240\" },\n            { id: 10, type: \"JP\", text: \"\u30b9\u30b1\u30b8\u30e5\u30fc\u30eb\u306e\u7ba1\u7406\u65b9\u6cd5\u306f\uff1f\", a: \"\u6708\u6b21\u30fb\u9031\u6b21\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u57cb\u3081\u3001\u8a08\u753b\u901a\u308a\u306b\u9042\u884c\u3057\u305f\u3044\", b: \"\u4f59\u767d\u3092\u6b8b\u3057\u3066\u304a\u304d\u3001\u6025\u306a\u6848\u4ef6\u3084\u6c17\u5206\u306b\u5408\u308f\u305b\u3066\u67d4\u8edf\u306b\u5bfe\u5fdc\u3057\u305f\u3044\" },\n            { id: 11, type: \"JP\", text: \"\u30bf\u30b9\u30af\u306e\u9032\u3081\u65b9\u306f\uff1f\", a: \"\u4e00\u3064\u306e\u6848\u4ef6\u3092\u5b8c\u4e86\u3055\u305b\u3066\u304b\u3089\u3001\u6b21\u306b\u53d6\u308a\u639b\u304b\u308b\", b: \"\u8907\u6570\u306e\u6848\u4ef6\u3092\u4e26\u884c\u3057\u3001\u305d\u306e\u6642\u306e\u30ce\u30ea\u3067\u9032\u3081\u308b\u3082\u306e\u3092\u5909\u3048\u308b\" },\n            { id: 12, type: \"JP\", text: \"\u30ed\u30fc\u30f3\u30c1\u3084\u7de0\u3081\u5207\u308a\u306b\u5bfe\u3057\u3066\", a: \"\u4f59\u88d5\u3092\u6301\u3063\u3066\u65e9\u3081\u306b\u6e96\u5099\u3092\u7d42\u308f\u3089\u305b\u305f\u3044\", b: \"\u30ae\u30ea\u30ae\u30ea\u307e\u3067\u7c98\u3063\u3066\u8cea\u3092\u9ad8\u3081\u305f\u3044\uff08\u8ffd\u3044\u8fbc\u307e\u308c\u3066\u529b\u3092\u767a\u63ee\u3059\u308b\uff09\" }\n        ],\n        SF: [\n            { id: 7, type: \"EI\", text: \"SNS\u767a\u4fe1\u3084\u96c6\u5ba2\u306b\u304a\u3044\u3066\", a: \"\u30e9\u30a4\u30d6\u914d\u4fe1\u3084\u52d5\u753b\u3067\u3001\u81ea\u5206\u306e\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u3092\u5168\u9762\u7684\u306b\u51fa\u3059\", b: \"\u6587\u7ae0\u3084\u5199\u771f\u3067\u4e16\u754c\u89b3\u3092\u4f5c\u308a\u8fbc\u307f\u3001\u5171\u611f\u3057\u3066\u304f\u308c\u308b\u4eba\u3092\u5f85\u3064\" },\n            { id: 8, type: \"EI\", text: \"\u60a9\u307f\u304c\u3042\u308b\u6642\u306e\u89e3\u6d88\u6cd5\u306f\uff1f\", a: \"\u30e1\u30f3\u30bf\u30fc\u3084\u8d77\u696d\u4ef2\u9593\u306b\u8a71\u3057\u3066\u30b9\u30c3\u30ad\u30ea\u3059\u308b\", b: \"\u30ce\u30fc\u30c8\u306b\u66f8\u304d\u51fa\u3057\u305f\u308a\u3001\u4e00\u4eba\u3067\u5185\u7701\u3057\u3066\u6574\u7406\u3059\u308b\" },\n            { id: 9, type: \"EI\", text: \"\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30ef\u30fc\u30af\u3067\u597d\u3080\u306e\u306f\uff1f\", a: \"\u591a\u304f\u306e\u4eba\u3068\u95a2\u308f\u308a\u3001\u30ef\u30a4\u30ef\u30a4\u3068\u9032\u3081\u308b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\", b: \"1\u5bfe1\u3067\u6df1\u304f\u5411\u304d\u5408\u3046\u30b3\u30f3\u30b5\u30eb\u30c6\u30a3\u30f3\u30b0\u3084\u30bb\u30c3\u30b7\u30e7\u30f3\" },\n            { id: 10, type: \"JP\", text: \"\u30bb\u30c3\u30b7\u30e7\u30f3\u3084\u6253\u3061\u5408\u308f\u305b\u306e\u6642\u9593\u7ba1\u7406\", a: \"\u958b\u59cb\u30fb\u7d42\u4e86\u6642\u9593\u3092\u304d\u3063\u3061\u308a\u5b88\u308a\u3001\u67a0\u7d44\u307f\u3092\u7dad\u6301\u3059\u308b\", b: \"\u8a71\u304c\u76db\u308a\u4e0a\u304c\u308c\u3070\u5ef6\u9577\u3059\u308b\u306a\u3069\u3001\u76f8\u624b\u306e\u72b6\u6cc1\u306b\u5408\u308f\u305b\u308b\" },\n            { id: 11, type: \"JP\", text: \"\u4e8b\u52d9\u4f5c\u696d\u3084\u30eb\u30fc\u30c1\u30f3\u30ef\u30fc\u30af\u306f\uff1f\", a: \"\u6bce\u65e5\u6c7a\u307e\u3063\u305f\u6642\u9593\u306b\u30b3\u30c4\u30b3\u30c4\u7247\u4ed8\u3051\u308b\", b: \"\u6e9c\u307e\u3063\u3066\u304b\u3089\u4e00\u6c17\u306b\u7247\u4ed8\u3051\u308b\u304b\u3001\u6c17\u5206\u304c\u4e57\u3063\u305f\u6642\u306b\u3084\u308b\" },\n            { id: 12, type: \"JP\", text: \"\u30b5\u30fc\u30d3\u30b9\u5185\u5bb9\u306e\u6c7a\u5b9a\u306b\u3064\u3044\u3066\", a: \"\u30e1\u30cb\u30e5\u30fc\u8868\u3092\u56fa\u5b9a\u3057\u3001\u4f53\u7cfb\u5316\u3057\u3066\u304a\u304d\u305f\u3044\", b: \"\u76f8\u624b\u306e\u8981\u671b\u306b\u5408\u308f\u305b\u3066\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u308b\u4f59\u5730\u3092\u6b8b\u3057\u305f\u3044\" }\n        ],\n        NT: [\n            { id: 7, type: \"EI\", text: \"\u30a2\u30a4\u30c7\u30a2\u306e\u30d6\u30e9\u30c3\u30b7\u30e5\u30a2\u30c3\u30d7\u65b9\u6cd5\", a: \"\u58c1\u6253\u3061\u76f8\u624b\u3068\u8b70\u8ad6\u3057\u3001\u6279\u5224\u3055\u308c\u308b\u3053\u3068\u3067\u78e8\u304b\u308c\u308b\", b: \"\u5c02\u9580\u66f8\u3092\u8aad\u307f\u8fbc\u307f\u3001\u8133\u5185\u3067\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u91cd\u306d\u308b\" },\n            { id: 8, type: \"EI\", text: \"\u65b0\u898f\u4e8b\u696d\u306e\u7acb\u3061\u4e0a\u3052\u6642\", a: \"\u307e\u305a\u306f\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u3092\u5e02\u5834\u306b\u51fa\u3057\u3001\u53cd\u5fdc\u3092\u898b\u306a\u304c\u3089\u8d70\u308b\", b: \"\u52dd\u7b97\u306e\u3042\u308b\u6226\u7565\u3068\u30ed\u30fc\u30c9\u30de\u30c3\u30d7\u3092\u7df4\u308a\u4e0a\u3052\u3066\u304b\u3089\u52d5\u304f\" },\n            { id: 9, type: \"EI\", text: \"\u60c5\u5831\u53ce\u96c6\u306e\u30b9\u30bf\u30a4\u30eb\", a: \"\u6700\u65b0\u306e\u30d3\u30b8\u30cd\u30b9\u30c8\u30ec\u30f3\u30c9\u3084\u7af6\u5408\u306e\u52d5\u304d\u3092\u5e83\u304f\u6d45\u304f\u8ffd\u3046\", b: \"\u7279\u5b9a\u306e\u5c02\u9580\u5206\u91ce\u3092\u6df1\u6398\u308a\u3057\u3001\u72ec\u81ea\u7406\u8ad6\u3092\u69cb\u7bc9\u3059\u308b\" },\n            { id: 10, type: \"JP\", text: \"\u76ee\u6a19\u8a2d\u5b9a\u306b\u3064\u3044\u3066\", a: \"KPI\u3092\u8a2d\u5b9a\u3057\u3001\u9032\u6357\u3092\u6570\u5024\u3067\u7ba1\u7406\u3057\u3066\u9054\u6210\u3092\u76ee\u6307\u3059\", b: \"\u5927\u304d\u306a\u65b9\u5411\u6027\u306f\u6301\u3064\u304c\u3001\u624b\u6bb5\u306f\u72b6\u6cc1\u306b\u5fdc\u3058\u3066\u5909\u3048\u305f\u3044\" },\n            { id: 11, type: \"JP\", text: \"\u4ed5\u4e8b\u9053\u5177\u3084\u30d5\u30a1\u30a4\u30eb\u6574\u7406\", a: \"\u4f53\u7cfb\u7684\u306b\u30d5\u30a9\u30eb\u30c0\u5206\u3051\u3057\u3001\u3044\u3064\u3067\u3082\u53d6\u308a\u51fa\u305b\u308b\u3088\u3046\u306b\u3059\u308b\", b: \"\u3068\u308a\u3042\u3048\u305a\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u306b\u7f6e\u304f\u306a\u3069\u3001\u81ea\u5206\u6d41\u306e\u914d\u7f6e\u3067\u56de\u3059\" },\n            { id: 12, type: \"JP\", text: \"\u610f\u601d\u6c7a\u5b9a\u306e\u30b9\u30d4\u30fc\u30c9\", a: \"\u5373\u65ad\u5373\u6c7a\u3057\u3001\u6b21\u3005\u3068\u30bf\u30b9\u30af\u3092\u6d88\u5316\u3059\u308b\", b: \"\u3088\u308a\u826f\u3044\u9078\u629e\u80a2\u304c\u306a\u3044\u304b\u3001\u30ae\u30ea\u30ae\u30ea\u307e\u3067\u60c5\u5831\u3092\u63a2\u3059\" }\n        ],\n        NF: [\n            { id: 7, type: \"EI\", text: \"\u30e2\u30c1\u30d9\u30fc\u30b7\u30e7\u30f3\u306e\u6e90\u6cc9\", a: \"\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u5909\u5316\u3092\u76f4\u63a5\u898b\u305f\u308a\u3001\u611f\u8b1d\u3055\u308c\u308b\u3053\u3068\", b: \"\u81ea\u5206\u306e\u5185\u9762\u4e16\u754c\u3084\u7f8e\u610f\u8b58\u304c\u4f5c\u54c1\/\u30b5\u30fc\u30d3\u30b9\u306b\u53cd\u6620\u3055\u308c\u308b\u3053\u3068\" },\n            { id: 8, type: \"EI\", text: \"\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u904b\u55b6\u306b\u304a\u3044\u3066\", a: \"\u81ea\u3089\u304c\u5148\u982d\u306b\u7acb\u3061\u3001\u71b1\u91cf\u3092\u6301\u3063\u3066\u5834\u3092\u76db\u308a\u4e0a\u3052\u308b\", b: \"\u4e00\u6b69\u5f15\u3044\u305f\u4f4d\u7f6e\u304b\u3089\u5168\u4f53\u3092\u898b\u5b88\u308a\u3001\u5b89\u5fc3\u5b89\u5168\u306a\u5834\u3092\u4f5c\u308b\" },\n            { id: 9, type: \"EI\", text: \"\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u306e\u50be\u5411\", a: \"\u5bfe\u8ac7\u3084\u8b1b\u6f14\u306a\u3069\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u5834\u3092\u597d\u3080\", b: \"\u57f7\u7b46\u3084\u5275\u4f5c\u306a\u3069\u3001\u4e00\u4eba\u3067\u4e16\u754c\u89b3\u3092\u7d21\u3050\u6642\u9593\u3092\u597d\u3080\" },\n            { id: 10, type: \"JP\", text: \"\u30d3\u30b8\u30e7\u30f3\u306e\u5b9f\u73fe\u30d7\u30ed\u30bb\u30b9\", a: \"\u9006\u7b97\u601d\u8003\u3067\u30de\u30a4\u30eb\u30b9\u30c8\u30fc\u30f3\u3092\u7f6e\u304d\u3001\u7740\u5b9f\u306b\u9032\u3081\u308b\", b: \"\u300c\u30d4\u30f3\u3068\u6765\u305f\u300d\u76f4\u611f\u306b\u5f93\u3044\u3001\u9053\u306a\u304d\u9053\u3092\u9032\u3080\" },\n            { id: 11, type: \"JP\", text: \"\u30af\u30ed\u30fc\u30b8\u30f3\u30b0\u3084\u5951\u7d04\u6642\", a: \"\u6761\u4ef6\u9762\u3092\u660e\u78ba\u306b\u3057\u3001\u65e9\u3081\u306b\u5408\u610f\u5f62\u6210\u3092\u56f3\u308b\", b: \"\u76f8\u624b\u306e\u6c7a\u65ad\u3092\u5f85\u3061\u3001\u53ef\u80fd\u6027\u3092\u72ed\u3081\u306a\u3044\u3088\u3046\u306b\u3059\u308b\" },\n            { id: 12, type: \"JP\", text: \"\u4e8b\u696d\u306e\u65b9\u5411\u6027\", a: \"\u4e00\u5ea6\u6c7a\u3081\u305f\u30b3\u30f3\u30bb\u30d7\u30c8\u3092\u4e00\u8cab\u3057\u3066\u8cab\u304d\u305f\u3044\", b: \"\u305d\u306e\u6642\u306e\u81ea\u5206\u306e\u8208\u5473\u95a2\u5fc3\u306b\u5408\u308f\u305b\u3066\u5909\u5316\u3055\u305b\u305f\u3044\" }\n        ]\n    }\n};\n\nconst funcQuestions = {\n    \"Te\": { \n        yang: \"\u3010\u6307\u63ee\u5b98\u30e2\u30fc\u30c9\u3011\\n\u5e02\u5834\u3092\u652f\u914d\u3057\u3001\u52b9\u7387\u7684\u306b\u76ee\u6a19\u3092\u9054\u6210\u3059\u308b\u305f\u3081\u306b\u3001\u5468\u56f2\u3092\u7a4d\u6975\u7684\u306b\u52d5\u304b\u3057\u305f\u3044\", \n        yin: \"\u3010\u7ba1\u7406\u8005\u30e2\u30fc\u30c9\u3011\\n\u65e2\u5b58\u306e\u4ed5\u7d44\u307f\u3092\u6700\u9069\u5316\u3057\u3001\u7740\u5b9f\u306b\u5229\u76ca\u304c\u51fa\u308b\u4f53\u5236\u3092\u7dad\u6301\u30fb\u7ba1\u7406\u3057\u305f\u3044\" \n    },\n    \"Fe\": { \n        yang: \"\u3010\u4f1d\u9053\u5e2b\u30e2\u30fc\u30c9\u3011\\n\u5f37\u3044\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u767a\u4fe1\u3057\u3001\u591a\u304f\u306e\u4eba\u3092\u5dfb\u304d\u8fbc\u3093\u3067\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3092\u62e1\u5927\u3057\u305f\u3044\", \n        yin: \"\u3010\u30ab\u30a6\u30f3\u30bb\u30e9\u30fc\u30e2\u30fc\u30c9\u3011\\n\u4e00\u4eba\u3072\u3068\u308a\u306e\u60a9\u307f\u306b\u6df1\u304f\u5bc4\u308a\u6dfb\u3044\u3001\u4fe1\u983c\u95a2\u4fc2\u306b\u57fa\u3065\u3044\u305f\u30b5\u30dd\u30fc\u30c8\u3092\u3057\u305f\u3044\" \n    },\n    \"Ti\": { \n        yang: \"\u3010\u89e3\u6c7a\u8005\u30e2\u30fc\u30c9\u3011\\n\u8ad6\u7406\u7684\u601d\u8003\u3092\u6b66\u5668\u306b\u3001\u8907\u96d1\u306a\u554f\u984c\u3092\u7d20\u65e9\u304f\u3001\u30b9\u30de\u30fc\u30c8\u306b\u89e3\u6c7a\u3057\u305f\u3044\", \n        yin: \"\u3010\u7814\u7a76\u8005\u30e2\u30fc\u30c9\u3011\\n\u72ec\u81ea\u306e\u7406\u8ad6\u3084\u30e1\u30bd\u30c3\u30c9\u3092\u6df1\u304f\u63a2\u6c42\u3057\u3001\u4f53\u7cfb\u5316\u3059\u308b\u3053\u3068\u306b\u6ca1\u982d\u3057\u305f\u3044\" \n    },\n    \"Fi\": { \n        yang: \"\u3010\u8868\u73fe\u8005\u30e2\u30fc\u30c9\u3011\\n\u81ea\u5206\u306e\u611f\u6027\u3084\u4e16\u754c\u89b3\u3092\u3001\u4f5c\u54c1\u3084\u30d6\u30e9\u30f3\u30c9\u3068\u3057\u3066\u4e16\u306e\u4e2d\u306b\u5f37\u304f\u6253\u3061\u51fa\u3057\u305f\u3044\", \n        yin: \"\u3010\u6c42\u9053\u8005\u30e2\u30fc\u30c9\u3011\\n\u81ea\u5206\u81ea\u8eab\u306e\u4fa1\u5024\u89b3\u3084\u7f8e\u5b66\u3092\u5927\u5207\u306b\u3057\u3001\u9759\u304b\u306b\u5b88\u308a\u306a\u304c\u3089\u6d3b\u52d5\u3057\u305f\u3044\" \n    },\n    \"Se\": { \n        yang: \"\u3010\u958b\u62d3\u8005\u30e2\u30fc\u30c9\u3011\\n\u30c1\u30e3\u30f3\u30b9\u304c\u3042\u308c\u3070\u5373\u5ea7\u306b\u884c\u52d5\u3057\u3001\u73fe\u5834\u306e\u6700\u524d\u7dda\u3067\u4f53\u5f53\u305f\u308a\u3067\u6311\u6226\u3057\u305f\u3044\", \n        yin: \"\u3010\u8077\u4eba\u30e2\u30fc\u30c9\u3011\\n\u4e94\u611f\u3092\u7814\u304e\u6f84\u307e\u3057\u3001\u76ee\u306e\u524d\u306e\u4f5c\u696d\u3084\u54c1\u8cea\u306b\u3068\u3053\u3068\u3093\u3053\u3060\u308f\u308a\u305f\u3044\" \n    },\n    \"Si\": { \n        yang: \"\u3010\u5b9f\u52d9\u5bb6\u30e2\u30fc\u30c9\u3011\\n\u904e\u53bb\u306e\u7d4c\u9a13\u3092\u6d3b\u304b\u3057\u3001\u73fe\u5b9f\u7684\u306a\u843d\u3068\u3057\u6240\u3092\u898b\u3064\u3051\u3066\u78ba\u5b9f\u306b\u6210\u679c\u3092\u51fa\u3057\u305f\u3044\", \n        yin: \"\u3010\u5b88\u8b77\u8005\u30e2\u30fc\u30c9\u3011\\n\u4f1d\u7d71\u3084\u3053\u308c\u307e\u3067\u306e\u7d4c\u7def\u3092\u5c0a\u91cd\u3057\u3001\u5b89\u5fc3\u30fb\u5b89\u5b9a\u3057\u305f\u904b\u55b6\u3092\u5b88\u308a\u629c\u304d\u305f\u3044\" \n    },\n    \"Ne\": { \n        yang: \"\u3010\u767a\u660e\u5bb6\u30e2\u30fc\u30c9\u3011\\n\u65b0\u3057\u3044\u53ef\u80fd\u6027\u3092\u6b21\u3005\u3068\u8a66\u3057\u3001\u696d\u754c\u306b\u30a4\u30ce\u30d9\u30fc\u30b7\u30e7\u30f3\uff08\u5909\u9769\uff09\u3092\u8d77\u3053\u3057\u305f\u3044\", \n        yin: \"\u3010\u54f2\u5b66\u8005\u30e2\u30fc\u30c9\u3011\\n\u7269\u4e8b\u306e\u80cc\u5f8c\u306b\u3042\u308b\u610f\u5473\u3084\u3001\u4e00\u898b\u95a2\u4fc2\u306a\u3044\u4e8b\u8c61\u306e\u7e4b\u304c\u308a\u3092\u898b\u51fa\u3057\u305f\u3044\" \n    },\n    \"Ni\": { \n        yang: \"\u3010\u7b56\u58eb\u30e2\u30fc\u30c9\u3011\\n\u672a\u6765\u306e\u30d3\u30b8\u30e7\u30f3\u3092\u63cf\u304d\u3001\u305d\u3053\u306b\u81f3\u308b\u305f\u3081\u306e\u6226\u7565\u3092\u5927\u80c6\u306b\u63a8\u3057\u9032\u3081\u305f\u3044\", \n        yin: \"\u3010\u4e88\u8a00\u8005\u30e2\u30fc\u30c9\u3011\\n\u8c61\u5fb4\u3084\u30a4\u30e1\u30fc\u30b8\u3092\u901a\u3058\u3066\u672c\u8cea\u3092\u6d1e\u5bdf\u3057\u3001\u7cbe\u795e\u7684\u306a\u6c17\u3065\u304d\u3092\u5f97\u305f\u3044\" \n    }\n};\n\nconst typeFuncs = {\n    \"ESTJ\": [\"Te\",\"Si\"], \"ENTJ\": [\"Te\",\"Ni\"], \"ESFJ\": [\"Fe\",\"Si\"], \"ENFJ\": [\"Fe\",\"Ni\"],\n    \"ESTP\": [\"Se\",\"Ti\"], \"ENTP\": [\"Ne\",\"Ti\"], \"ESFP\": [\"Se\",\"Fi\"], \"ENFP\": [\"Ne\",\"Fi\"],\n    \"ISTJ\": [\"Si\",\"Te\"], \"INTJ\": [\"Ni\",\"Te\"], \"ISFJ\": [\"Si\",\"Fe\"], \"INFJ\": [\"Ni\",\"Fe\"],\n    \"ISTP\": [\"Ti\",\"Se\"], \"INTP\": [\"Ti\",\"Ne\"], \"ISFP\": [\"Fi\",\"Se\"], \"INFP\": [\"Fi\",\"Ne\"]\n};\n\nconst subtypeData = {\n    \"Dominant\": { \n        name: \"Dominant Subtype\", \n        label: \"\u30c9\u30df\u30ca\u30f3\u30c8\uff08\u4e3b\u5c0e\u578b\uff09\", \n        color: \"#d32f2f\", \n        desc: \"\u76ee\u6a19\u9054\u6210\u306b\u5411\u3051\u3066\u5468\u56f2\u3092\u727d\u5f15\u3059\u308b\u30ea\u30fc\u30c0\u30fc\u30bf\u30a4\u30d7\u3002\u56f0\u96e3\u306a\u72b6\u6cc1\u3067\u3082\u7a81\u7834\u53e3\u3092\u958b\u304f\u30a8\u30cd\u30eb\u30ae\u30fc\u304c\u3042\u308a\u307e\u3059\u3002\" \n    },\n    \"Creative\": { \n        name: \"Creative Subtype\", \n        label: \"\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6\uff08\u5275\u9020\u578b\uff09\", \n        color: \"#f57c00\", \n        desc: \"\u65b0\u3057\u3044\u30a2\u30a4\u30c7\u30a2\u3084\u72b6\u6cc1\u3078\u306e\u9069\u5fdc\u529b\u306b\u512a\u308c\u305f\u30a4\u30ce\u30d9\u30fc\u30bf\u30fc\u3002\u5e38\u8b58\u306b\u3068\u3089\u308f\u308c\u306a\u3044\u767a\u60f3\u3067\u4e8b\u696d\u3092\u5c55\u958b\u3057\u307e\u3059\u3002\" \n    },\n    \"Normalizing\": { \n        name: \"Normalizing Subtype\", \n        label: \"\u30ce\u30fc\u30de\u30e9\u30a4\u30b8\u30f3\u30b0\uff08\u8abf\u6574\u578b\uff09\", \n        color: \"#1976d2\", \n        desc: \"\u898f\u7bc4\u3092\u5b88\u308a\u3001\u7740\u5b9f\u306b\u7269\u4e8b\u3092\u9032\u3081\u308b\u5b9f\u52d9\u5bb6\u30bf\u30a4\u30d7\u3002\u7d44\u7e54\u3084\u4e8b\u696d\u306e\u57fa\u76e4\u3092\u6574\u3048\u3001\u5b89\u5b9a\u3055\u305b\u308b\u80fd\u529b\u306b\u9577\u3051\u3066\u3044\u307e\u3059\u3002\" \n    },\n    \"Harmonizing\": { \n        name: \"Harmonizing Subtype\", \n        label: \"\u30cf\u30fc\u30e2\u30ca\u30a4\u30b8\u30f3\u30b0\uff08\u8abf\u548c\u578b\uff09\", \n        color: \"#388e3c\", \n        desc: \"\u5168\u4f53\u3092\u898b\u6e21\u3057\u3001\u3064\u306a\u304c\u308a\u3092\u5927\u5207\u306b\u3059\u308b\u7d71\u5408\u8005\u30bf\u30a4\u30d7\u3002\u92ed\u3044\u6d1e\u5bdf\u529b\u3068\u7cbe\u795e\u6027\u3067\u3001\u672c\u8cea\u7684\u306a\u4fa1\u5024\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\" \n    }\n};\n\nfunction getResultText(type, subtype) {\n    const base = `\u3042\u306a\u305f\u306f**${type}**\u306e\u7279\u6027\u3092\u6301\u3061\u3064\u3064\u3001\u30d3\u30b8\u30cd\u30b9\u306b\u304a\u3044\u3066\u306f**${subtypeData[subtype].label}**\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u53d6\u308b\u50be\u5411\u304c\u3042\u308a\u307e\u3059\u3002`;\n    const advice = \"\u3053\u306e\u30bf\u30a4\u30d7\u306f\u3001\u81ea\u5206\u306e\u5f97\u610f\u306a\u9818\u57df\uff08\u653b\u3081\u30fb\u5b88\u308a\u30fb\u5275\u9020\u30fb\u8abf\u548c\uff09\u3092\u7406\u89e3\u3057\u3001\u82e6\u624b\u306a\u90e8\u5206\u306f\u5916\u6ce8\u3084\u30d1\u30fc\u30c8\u30ca\u30fc\u306b\u4efb\u305b\u308b\u3053\u3068\u3067\u3001\u4e8b\u696d\u304c\u98db\u8e8d\u7684\u306b\u52a0\u901f\u3057\u307e\u3059\u3002\";\n    return `${base}\\n\\n${advice}`;\n}\n\n\/**\n * State Management\n *\/\nlet state = {\n    qIndex: 0,\n    scores: { SN:0, TF:0, EI:0, JP:0 }, \n    group: \"\", \n    finalType: \"\", \n    funcScores: { dom: 0, aux: 0 },\n    currentQType: \"\",\n    isTyping: false\n};\n\n\/**\n * Chat Functions\n *\/\n\n\/\/ Initialize - WordPress Compatibility Check\n\/\/ WordPress\u3067\u306fwindow.onload\u304c\u4ed6\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u7af6\u5408\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u305f\u3081\u3001addEventListener\u3092\u4f7f\u7528\nwindow.addEventListener('DOMContentLoaded', function() {\n    addBotMessage(\"\u3053\u3093\u306b\u3061\u306f\u3002\u30d3\u30b8\u30cd\u30b9\u9069\u6027\u8a3a\u65adBot\u3067\u3059\u3002\", 0);\n    addBotMessage(\"\u3042\u306a\u305f\u306e\u6027\u683c\u3068\u884c\u52d5\u30d1\u30bf\u30fc\u30f3\u304b\u3089\u3001\u6700\u9069\u306a\u300c\u4e8b\u696d\u30b9\u30bf\u30a4\u30eb\u300d\u3092\u5206\u6790\u3057\u307e\u3059\u3002\uff08\u6240\u8981\u6642\u9593\uff1a\u7d043\u5206\uff09\", 800);\n    setTimeout(() => {\n        addStartButton();\n    }, 1600);\n});\n\nfunction scrollToBottom() {\n    const el = document.getElementById('pct-chat-timeline');\n    \/\/ \u5c11\u3057\u4f59\u88d5\u3092\u6301\u305f\u305b\u3066\u30b9\u30af\u30ed\u30fc\u30eb\n    setTimeout(() => {\n        el.scrollTop = el.scrollHeight;\n    }, 50);\n}\n\nfunction addBotMessage(text, delay = 0) {\n    state.isTyping = true;\n    showTyping();\n    \n    setTimeout(() => {\n        removeTyping();\n        const timeline = document.getElementById('pct-chat-timeline');\n        \n        const msgDiv = document.createElement('div');\n        msgDiv.className = 'pct-msg bot';\n        \n        \/\/ Avatar + Bubble\n        const avatar = document.createElement('div');\n        avatar.className = 'pct-avatar';\n        avatar.textContent = 'B';\n        \n        const label = document.createElement('div');\n        label.className = 'pct-avatar-label';\n        label.textContent = 'Bot';\n        \n        const bubble = document.createElement('div');\n        bubble.className = 'pct-bubble';\n        bubble.innerHTML = text.replace(\/\\n\/g, '<br>');\n\n        const container = document.createElement('div');\n        container.style.display = 'flex';\n        container.style.flexDirection = 'column';\n        \n        const row = document.createElement('div');\n        row.style.display = 'flex';\n        row.style.alignItems = 'flex-end';\n        row.style.gap = '10px';\n\n        const wrapper = document.createElement('div');\n        wrapper.appendChild(label);\n        wrapper.appendChild(bubble);\n\n        row.appendChild(avatar);\n        row.appendChild(wrapper);\n        container.appendChild(row);\n        \n        msgDiv.appendChild(container);\n        timeline.appendChild(msgDiv);\n        scrollToBottom();\n        state.isTyping = false;\n    }, delay);\n}\n\nfunction addBotCard(qData, delay = 0) {\n    state.isTyping = true;\n    showTyping();\n    \n    setTimeout(() => {\n        removeTyping();\n        const timeline = document.getElementById('pct-chat-timeline');\n        \n        const msgDiv = document.createElement('div');\n        msgDiv.className = 'pct-msg bot';\n        \n        \/\/ Wrapper for alignment\n        const row = document.createElement('div');\n        row.style.display = 'flex';\n        row.style.alignItems = 'flex-end';\n        row.style.gap = '10px';\n        \n        const avatar = document.createElement('div');\n        avatar.className = 'pct-avatar';\n        avatar.textContent = 'B';\n        \n        \/\/ Card Content\n        const card = document.createElement('div');\n        card.className = 'pct-q-card';\n        card.innerHTML = `\n            <div class=\"pct-q-header\">QUESTION ${state.qIndex + 1} \/ 14<\/div>\n            <div class=\"pct-q-body\">\n                <div class=\"pct-q-text\">${qData.text}<\/div>\n                <div class=\"pct-opt-container\">\n                    <div class=\"pct-opt-row opt-a\">\n                        <span class=\"pct-opt-mark\">A<\/span>\n                        <span class=\"pct-opt-desc\">${qData.a.replace(\/\\n\/g, '<br>')}<\/span>\n                    <\/div>\n                    <div class=\"pct-opt-row opt-b\">\n                        <span class=\"pct-opt-mark\">B<\/span>\n                        <span class=\"pct-opt-desc\">${qData.b.replace(\/\\n\/g, '<br>')}<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        `;\n        \n        row.appendChild(avatar);\n        row.appendChild(card);\n        msgDiv.appendChild(row);\n        \n        timeline.appendChild(msgDiv);\n        scrollToBottom();\n        state.isTyping = false;\n        \n        \/\/ Show Inputs\n        setTimeout(() => {\n            document.getElementById('pct-input-dock').classList.add('visible');\n        }, 500);\n        \n    }, delay);\n}\n\nfunction addUserMessage(text) {\n    const timeline = document.getElementById('pct-chat-timeline');\n    const msgDiv = document.createElement('div');\n    msgDiv.className = 'pct-msg user';\n    \n    const bubble = document.createElement('div');\n    bubble.className = 'pct-bubble';\n    bubble.textContent = text;\n    \n    msgDiv.appendChild(bubble);\n    timeline.appendChild(msgDiv);\n    scrollToBottom();\n}\n\nfunction showTyping() {\n    const timeline = document.getElementById('pct-chat-timeline');\n    \/\/ Check if existing\n    if (document.getElementById('pct-typing')) return;\n    \n    const div = document.createElement('div');\n    div.id = 'pct-typing';\n    div.className = 'pct-msg bot';\n    div.innerHTML = `\n        <div style=\"display:flex; gap:10px; align-items:flex-end;\">\n            <div class=\"pct-avatar\">B<\/div>\n            <div class=\"typing-indicator\">\n                <div class=\"typing-dot\"><\/div>\n                <div class=\"typing-dot\"><\/div>\n                <div class=\"typing-dot\"><\/div>\n            <\/div>\n        <\/div>\n    `;\n    timeline.appendChild(div);\n    scrollToBottom();\n}\n\nfunction removeTyping() {\n    const el = document.getElementById('pct-typing');\n    if (el) el.remove();\n}\n\nfunction addStartButton() {\n    const timeline = document.getElementById('pct-chat-timeline');\n    const btn = document.createElement('button');\n    btn.className = 'pct-chat-btn';\n    btn.textContent = '\u8a3a\u65ad\u3092\u958b\u59cb\u3059\u308b';\n    btn.onclick = function() {\n        btn.style.display = 'none'; \/\/ hide button\n        addUserMessage('\u8a3a\u65ad\u3092\u958b\u59cb\u3059\u308b');\n        setTimeout(startDiagnosis, 600);\n    };\n    timeline.appendChild(btn);\n    scrollToBottom();\n}\n\nfunction startDiagnosis() {\n    state.qIndex = 0;\n    renderQuestion();\n}\n\nfunction renderQuestion() {\n    \/\/ Hide Input Dock first\n    document.getElementById('pct-input-dock').classList.remove('visible');\n\n    const idx = state.qIndex;\n    let q = null;\n\n    \/\/ Data Selection Logic (Same as original)\n    if (idx < 6) {\n        q = pctData.phase1[idx];\n    } else if (idx < 12) {\n        if (!state.group) calcPhase1();\n        q = pctData.phase2[state.group][idx - 6];\n    } else {\n        if (!state.finalType) calcPhase2();\n        const funcs = typeFuncs[state.finalType];\n        const target = (idx === 12) ? funcs[0] : funcs[1];\n        const fData = funcQuestions[target];\n        q = {\n            id: idx + 1,\n            type: (idx === 12) ? \"DOM\" : \"AUX\",\n            text: `\u3042\u306a\u305f\u306e\u5f37\u307f\u3067\u3042\u308b\u300c${target}\u300d\u6a5f\u80fd\u3092\u3069\u3046\u4f7f\u3063\u3066\u3044\u307e\u3059\u304b\uff1f`,\n            a: fData.yang,\n            b: fData.yin\n        };\n    }\n    \n    state.currentQType = q.type;\n    \n    \/\/ Progress Bar\n    const percent = ((idx) \/ 14) * 100;\n    document.getElementById('pct-progress').style.width = `${percent}%`;\n\n    \/\/ Add Bot Card\n    addBotCard(q, 800);\n}\n\nfunction handleAnswer(val) {\n    \/\/ Hide dock immediately to prevent double tap\n    document.getElementById('pct-input-dock').classList.remove('visible');\n    \n    \/\/ User Bubble Text\n    let userText = \"\";\n    if (val === -3) userText = \"A\u306b\u975e\u5e38\u306b\u8fd1\u3044\";\n    else if (val === -2) userText = \"A\u306b\u8fd1\u3044\";\n    else if (val === -1) userText = \"\u3069\u3061\u3089\u304b\u3068\u3044\u3048\u3070A\";\n    else if (val === 0) userText = \"\u3069\u3061\u3089\u3068\u3082\u8a00\u3048\u306a\u3044\";\n    else if (val === 1) userText = \"\u3069\u3061\u3089\u304b\u3068\u3044\u3048\u3070B\";\n    else if (val === 2) userText = \"B\u306b\u8fd1\u3044\";\n    else if (val === 3) userText = \"B\u306b\u975e\u5e38\u306b\u8fd1\u3044\";\n    \n    addUserMessage(userText);\n\n    \/\/ Calc Logic\n    const abs = Math.abs(val);\n    \n    if (state.qIndex < 6) {\n        if (state.currentQType === \"SN\") state.scores.SN += val;\n        if (state.currentQType === \"TF\") state.scores.TF += val;\n    } else if (state.qIndex < 12) {\n        if (state.currentQType === \"EI\") state.scores.EI += val;\n        if (state.currentQType === \"JP\") state.scores.JP += val;\n    } else {\n        let score = 0;\n        if (val < 0) score = Math.abs(val); \n        else if (val > 0) score = -Math.abs(val); \n        \n        if (state.qIndex === 12) state.funcScores.dom = score;\n        if (state.qIndex === 13) state.funcScores.aux = score;\n    }\n\n    state.qIndex++;\n    if (state.qIndex < 14) {\n        renderQuestion();\n    } else {\n        setTimeout(showResult, 800);\n    }\n}\n\nfunction calcPhase1() {\n    const s = (state.scores.SN <= 0) ? \"S\" : \"N\";\n    const t = (state.scores.TF <= 0) ? \"T\" : \"F\";\n    if (s === \"S\" && t === \"T\") state.group = \"ST\";\n    else if (s === \"S\" && t === \"F\") state.group = \"SF\";\n    else if (s === \"N\" && t === \"T\") state.group = \"NT\";\n    else if (s === \"N\" && t === \"F\") state.group = \"NF\";\n}\n\nfunction calcPhase2() {\n    const e = (state.scores.EI <= 0) ? \"E\" : \"I\";\n    const j = (state.scores.JP <= 0) ? \"J\" : \"P\";\n    const g = state.group;\n    state.finalType = e + g.charAt(0) + g.charAt(1) + j;\n}\n\nfunction calcSubtype() {\n    const d = state.funcScores.dom;\n    const a = state.funcScores.aux;\n    const isDomYang = d > 0;\n    const isAuxYang = a > 0;\n    \n    if (isDomYang && isAuxYang) return \"Dominant\";\n    if (!isDomYang && isAuxYang) return \"Creative\";\n    if (isDomYang && !isAuxYang) return \"Normalizing\";\n    return \"Harmonizing\";\n}\n\nfunction showResult() {\n    document.getElementById('pct-progress').style.width = '100%';\n    \n    addBotMessage(\"\u8a3a\u65ad\u304a\u75b2\u308c\u69d8\u3067\u3057\u305f\uff01\u5206\u6790\u7d50\u679c\u304c\u51fa\u307e\u3057\u305f\u3002\", 0);\n    \n    const sub = calcSubtype();\n    const type = state.finalType;\n    const subInfo = subtypeData[sub];\n    const desc = getResultText(type, sub);\n\n    \/\/ Create Result Card\n    setTimeout(() => {\n        const timeline = document.getElementById('pct-chat-timeline');\n        \n        const card = document.createElement('div');\n        card.className = 'pct-res-card';\n        card.innerHTML = `\n            <div style=\"font-size:0.8rem; color:#888;\">DIAGNOSTIC RESULT<\/div>\n            <div class=\"pct-res-type\">${type}<\/div>\n            <div class=\"pct-res-sub\" style=\"color:${subInfo.color}\">${subInfo.label}<\/div>\n            <div class=\"pct-res-desc\">\n                ${desc.replace(\/\\n\/g, '<br>')}\n            <\/div>\n            <a href=\"#\" style=\"display:inline-block; background:${subInfo.color}; color:#fff; padding:14px 35px; text-decoration:none; border-radius:50px; font-weight:bold; margin-bottom:10px; box-shadow:0 4px 10px rgba(0,0,0,0.1);\">\u8a73\u7d30\u30ec\u30dd\u30fc\u30c8\u3092\u898b\u308b<\/a>\n            <br>\n            <button onclick=\"location.reload()\" style=\"background:none; border:none; color:#999; text-decoration:underline; margin-top:20px; cursor:pointer;\">\u3082\u3046\u4e00\u5ea6\u8a3a\u65ad\u3059\u308b<\/button>\n        `;\n        \n        timeline.appendChild(card);\n        scrollToBottom();\n    }, 1200);\n}\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>B \u30d3\u30b8\u30cd\u30b9\u9069\u6027\u8a3a\u65ad Bot A \u3069\u3061\u3089\u306b\u8fd1\u3044\u3067\u3059\u304b\uff1f B \u5927 \u4e2d \u5c0f \u5c0f \u4e2d \u5927<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"vkexunit_cta_each_option":"","footnotes":""},"class_list":["post-13202","16types","type-16types","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/seikaku-type.com\/design\/wp-json\/wp\/v2\/16types\/13202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seikaku-type.com\/design\/wp-json\/wp\/v2\/16types"}],"about":[{"href":"https:\/\/seikaku-type.com\/design\/wp-json\/wp\/v2\/types\/16types"}],"author":[{"embeddable":true,"href":"https:\/\/seikaku-type.com\/design\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seikaku-type.com\/design\/wp-json\/wp\/v2\/comments?post=13202"}],"version-history":[{"count":2,"href":"https:\/\/seikaku-type.com\/design\/wp-json\/wp\/v2\/16types\/13202\/revisions"}],"predecessor-version":[{"id":13204,"href":"https:\/\/seikaku-type.com\/design\/wp-json\/wp\/v2\/16types\/13202\/revisions\/13204"}],"wp:attachment":[{"href":"https:\/\/seikaku-type.com\/design\/wp-json\/wp\/v2\/media?parent=13202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}