{"id":2346,"date":"2025-08-18T11:34:47","date_gmt":"2025-08-18T02:34:47","guid":{"rendered":"https:\/\/career-c.sognoplanning.com\/?page_id=2346"},"modified":"2025-08-18T11:34:49","modified_gmt":"2025-08-18T02:34:49","slug":"%e3%82%b9%e3%83%bc%e3%83%91%e3%83%bc%e7%90%86%e8%ab%96-%e5%af%be%e8%a9%b1%e5%9e%8b%e3%82%ac%e3%82%a4%e3%83%89%e3%80%8c%e4%ba%ba%e7%94%9f%e3%81%ae%e4%b8%ad%e3%81%ae%e3%82%ad%e3%83%a3%e3%83%aa%e3%82%a2","status":"publish","type":"page","link":"https:\/\/career-c.sognoplanning.com\/?page_id=2346","title":{"rendered":"\u30b9\u30fc\u30d1\u30fc\u7406\u8ad6 \u5bfe\u8a71\u578b\u30ac\u30a4\u30c9\u300c\u4eba\u751f\u306e\u4e2d\u306e\u30ad\u30e3\u30ea\u30a2\u3092\u8aad\u307f\u89e3\u304f\u300d"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u30c9\u30ca\u30eb\u30c9\u30fb\u30b9\u30fc\u30d1\u30fc\u7406\u8ad6 \u5bfe\u8a71\u578b\u30ac\u30a4\u30c9<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;700&display=swap\" rel=\"stylesheet\">\n    <!-- Chosen Palette: Calm Harmony -->\n    <!-- Application Structure Plan: A thematic, single-page application with a sticky navigation bar for easy access to key sections. The structure is designed for non-linear exploration, starting with the core concepts, then allowing users to interactively explore the '5 Life Stages' via a clickable timeline and the '14 Propositions' through an accordion interface. The application culminates in a visual, interactive representation of the 'Life-Career Rainbow' to synthesize the theory's key ideas. This structure was chosen to transform a linear text document into an engaging learning tool, allowing users to focus on concepts most relevant to them in any order, enhancing usability and comprehension. -->\n    <!-- Visualization & Content Choices: \n        - Report Info: Trait-and-Factor vs. Super's Theory -> Goal: Compare -> Viz\/Presentation: Side-by-side HTML\/CSS columns -> Interaction: None (static comparison) -> Justification: Clear, direct comparison of foundational ideas. -> Library\/Method: HTML\/Tailwind.\n        - Report Info: 5 Life Stages -> Goal: Organize & Inform -> Viz\/Presentation: Interactive horizontal timeline -> Interaction: Click to reveal detailed descriptions -> Justification: Breaks down a large block of text into manageable, user-triggered segments, preventing information overload. -> Library\/Method: HTML\/Tailwind\/Vanilla JS.\n        - Report Info: 14 Propositions -> Goal: Organize -> Viz\/Presentation: Accordion UI -> Interaction: Click to expand\/collapse thematic groups -> Justification: Organizes a long list into logical, digestible themes, improving scannability. -> Library\/Method: HTML\/Tailwind\/Vanilla JS.\n        - Report Info: Life-Career Rainbow -> Goal: Visualize a complex concept -> Viz\/Presentation: Stacked bar chart -> Interaction: Hover for tooltips -> Justification: Provides an intuitive, memorable visualization of a core, abstract concept, making it easier to understand than text alone. -> Library\/Method: Chart.js.\n    -->\n    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n    <style>\n        body {\n            font-family: 'Noto Sans JP', sans-serif;\n            background-color: #FDFBF8; \/* Warm Neutral Background *\/\n            color: #3f3f46; \/* Zinc 700 *\/\n        }\n        .chart-container {\n            position: relative;\n            width: 100%;\n            max-width: 800px;\n            margin-left: auto;\n            margin-right: auto;\n            height: 300px;\n            max-height: 400px;\n        }\n        @media (min-width: 768px) {\n            .chart-container {\n                height: 400px;\n            }\n        }\n        .nav-link {\n            transition: color 0.3s, border-color 0.3s;\n        }\n        .active-link {\n            color: #0d9488; \/* Teal 600 *\/\n            border-bottom-color: #0d9488;\n        }\n        .stage-btn.active {\n            background-color: #0d9488; \/* Teal 600 *\/\n            color: white;\n        }\n        .accordion-header.open svg {\n            transform: rotate(180deg);\n        }\n    <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n    <header class=\"bg-white\/80 backdrop-blur-lg shadow-sm sticky top-0 z-50\">\n        <nav class=\"container mx-auto px-6 py-3\">\n\n                <div class=\"hidden md:flex space-x-8\">\n                    <a href=\"#intro\" class=\"nav-link text-gray-600 hover:text-teal-600 border-b-2 border-transparent pb-1\">\u306f\u3058\u3081\u306b<\/a>\n                    <a href=\"#pillars\" class=\"nav-link text-gray-600 hover:text-teal-600 border-b-2 border-transparent pb-1\">2\u3064\u306e\u67f1<\/a>\n                    <a href=\"#stages\" class=\"nav-link text-gray-600 hover:text-teal-600 border-b-2 border-transparent pb-1\">5\u3064\u306e\u30e9\u30a4\u30d5\u30b9\u30c6\u30fc\u30b8<\/a>\n                    <a href=\"#propositions\" class=\"nav-link text-gray-600 hover:text-teal-600 border-b-2 border-transparent pb-1\">14\u306e\u547d\u984c<\/a>\n                    <a href=\"#rainbow\" class=\"nav-link text-gray-600 hover:text-teal-600 border-b-2 border-transparent pb-1\">\u307e\u3068\u3081<\/a>\n                <\/div>\n            <\/div>\n        <\/nav>\n    <\/header>\n\n    <main class=\"container mx-auto px-6 py-12\">\n\n        <section id=\"intro\" class=\"mb-20 scroll-mt-20\">\n            <h2 class=\"text-4xl font-bold text-amber-800 mb-4\">\u4eba\u751f\u306e\u4e2d\u306e\u30ad\u30e3\u30ea\u30a2\u3092\u8aad\u307f\u89e3\u304f<\/h2>\n            <p class=\"text-lg max-w-3xl text-gray-700\">\u300c\u81ea\u5206\u306f\u3069\u3093\u306a\u4ed5\u4e8b\u304c\u3057\u305f\u3044\u3093\u3060\u308d\u3046\uff1f\u300d\u591a\u304f\u306e\u4eba\u304c\u62b1\u3048\u308b\u3053\u306e\u554f\u3044\u306b\u3001\u30c9\u30ca\u30eb\u30c9\u30fb\u30b9\u30fc\u30d1\u30fc\u306f\u300c\u30ad\u30e3\u30ea\u30a2\u3068\u306f\u4e00\u751f\u304b\u3051\u3066\u81ea\u5206\u3092\u8868\u73fe\u3057\u3066\u3044\u304f\u65c5\u3067\u3042\u308b\u300d\u3068\u3044\u3046\u8996\u70b9\u3092\u63d0\u793a\u3057\u307e\u3057\u305f\u3002\u3053\u306e\u30ac\u30a4\u30c9\u3067\u306f\u3001\u5f7c\u306e\u7406\u8ad6\u3092\u5bfe\u8a71\u7684\u306b\u63a2\u6c42\u3057\u3001\u30ad\u30e3\u30ea\u30a2\u3068\u3044\u3046\u58ee\u5927\u306a\u7269\u8a9e\u3092\u7406\u89e3\u3059\u308b\u624b\u52a9\u3051\u3092\u3057\u307e\u3059\u3002<\/p>\n        <\/section>\n\n        <section id=\"pillars\" class=\"mb-20 scroll-mt-20\">\n            <h2 class=\"text-3xl font-bold text-teal-700 mb-10\">\u30b9\u30fc\u30d1\u30fc\u7406\u8ad6\u3092\u652f\u3048\u308b2\u3064\u306e\u67f1<\/h2>\n            <div class=\"grid md:grid-cols-2 gap-8 max-w-4xl\">\n                <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-100\">\n                    <h3 class=\"text-2xl font-bold text-amber-800 mb-3\">\u81ea\u5df1\u6982\u5ff5<\/h3>\n                    <p class=\"text-gray-600\">\u300c\u81ea\u5206\u3068\u306f\u3069\u3046\u3044\u3046\u4eba\u9593\u304b\u300d\u3068\u3044\u3046\u30bb\u30eb\u30d5\u30a4\u30e1\u30fc\u30b8\u306e\u3053\u3068\u3002\u4eba\u306f\u3001\u81ea\u5206\u304c\u601d\u3044\u63cf\u304f\u81ea\u5206\u50cf\u306b\u5408\u3063\u305f\u4ed5\u4e8b\u3092\u9078\u3073\u3001\u305d\u306e\u4ed5\u4e8b\u3092\u901a\u3058\u3066\u81ea\u5df1\u6982\u5ff5\u3092\u8868\u73fe\u30fb\u5b9f\u73fe\u3057\u3088\u3046\u3068\u3057\u307e\u3059\u3002\u3053\u308c\u306f\u56fa\u5b9a\u7684\u3067\u306f\u306a\u304f\u3001\u7d4c\u9a13\u3092\u901a\u3058\u3066\u751f\u6daf\u767a\u9054\u3057\u7d9a\u3051\u307e\u3059\u3002<\/p>\n                <\/div>\n                <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-100\">\n                    <h3 class=\"text-2xl font-bold text-amber-800 mb-3\">\u30e9\u30a4\u30d5\u30b9\u30c6\u30fc\u30b8<\/h3>\n                    <p class=\"text-gray-600\">\u30ad\u30e3\u30ea\u30a2\u306f\u4eba\u751f\u3068\u3044\u3046\u9577\u3044\u6642\u9593\u8ef8\u306e\u4e2d\u3067\u3001\u5b63\u7bc0\u304c\u79fb\u308a\u5909\u308f\u308b\u3088\u3046\u306b\u767a\u9054\u3057\u3066\u3044\u304f\u3068\u3044\u3046\u8003\u3048\u65b9\u3002\u5404\u30b9\u30c6\u30fc\u30b8\u306b\u306f\u7279\u6709\u306e\u30c6\u30fc\u30de\u3068\u767a\u9054\u8ab2\u984c\u304c\u5b58\u5728\u3057\u3001\u79c1\u305f\u3061\u306e\u30ad\u30e3\u30ea\u30a2\u306e\u6b69\u307f\u3092\u7406\u89e3\u3059\u308b\u305f\u3081\u306e\u5730\u56f3\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"stages\" class=\"mb-20 scroll-mt-20\">\n            <h2 class=\"text-3xl font-bold text-teal-700 mb-4\">\u30ad\u30e3\u30ea\u30a2\u306e\u5b63\u7bc0\uff1a5\u3064\u306e\u30e9\u30a4\u30d5\u30b9\u30c6\u30fc\u30b8<\/h2>\n            <p class=\"text-gray-600 max-w-3xl mb-10\">\u4eba\u306e\u30ad\u30e3\u30ea\u30a2\u306f\u3001\u4e00\u76f4\u7dda\u306b\u9032\u3080\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u4ee5\u4e0b\u306e\u30b9\u30c6\u30fc\u30b8\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001\u305d\u308c\u305e\u308c\u306e\u5b63\u7bc0\u3067\u76f4\u9762\u3059\u308b\u30c6\u30fc\u30de\u3084\u8ab2\u984c\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n            \n            <div id=\"stage-nav\" class=\"flex flex-wrap justify-start gap-2 md:gap-4 mb-8\">\n                <button data-stage=\"growth\" class=\"stage-btn active w-full sm:w-auto text-sm md:text-base bg-white hover:bg-teal-600 hover:text-white text-teal-700 font-semibold py-2 px-4 border border-teal-500 rounded-full shadow transition-colors duration-300\">1. \u6210\u9577\u6bb5\u968e (\uff5e14\u6b73)<\/button>\n                <button data-stage=\"exploration\" class=\"stage-btn w-full sm:w-auto text-sm md:text-base bg-white hover:bg-teal-600 hover:text-white text-teal-700 font-semibold py-2 px-4 border border-teal-500 rounded-full shadow transition-colors duration-300\">2. \u63a2\u7d22\u6bb5\u968e (15\uff5e24\u6b73)<\/button>\n                <button data-stage=\"establishment\" class=\"stage-btn w-full sm:w-auto text-sm md:text-base bg-white hover:bg-teal-600 hover:text-white text-teal-700 font-semibold py-2 px-4 border border-teal-500 rounded-full shadow transition-colors duration-300\">3. \u78ba\u7acb\u6bb5\u968e (25\uff5e44\u6b73)<\/button>\n                <button data-stage=\"maintenance\" class=\"stage-btn w-full sm:w-auto text-sm md:text-base bg-white hover:bg-teal-600 hover:text-white text-teal-700 font-semibold py-2 px-4 border border-teal-500 rounded-full shadow transition-colors duration-300\">4. \u7dad\u6301\u6bb5\u968e (45\uff5e64\u6b73)<\/button>\n                <button data-stage=\"disengagement\" class=\"stage-btn w-full sm:w-auto text-sm md:text-base bg-white hover:bg-teal-600 hover:text-white text-teal-700 font-semibold py-2 px-4 border border-teal-500 rounded-full shadow transition-colors duration-300\">5. \u89e3\u653e\u6bb5\u968e (65\u6b73\uff5e)<\/button>\n            <\/div>\n\n            <div id=\"stage-content\" class=\"max-w-3xl bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition-opacity duration-500\">\n                <div id=\"growth\" class=\"stage-panel\">\n                    <h3 class=\"text-2xl font-bold text-amber-800 mb-3\">1. \u6210\u9577\u6bb5\u968e (\uff5e14\u6b73\u9803)<\/h3>\n                    <p class=\"text-gray-700\">\u5bb6\u5ead\u3084\u5b66\u6821\u751f\u6d3b\u3092\u901a\u3057\u3066\u3001\u81ea\u5206\u3068\u3044\u3046\u4eba\u9593\u306e\u571f\u53f0\u304c\u4f5c\u3089\u308c\u308b\u6642\u671f\u3067\u3059\u3002\u300c\u91ce\u7403\u9078\u624b\u306b\u306a\u308a\u305f\u3044\u300d\u3068\u3044\u3063\u305f\u7a7a\u60f3\u3084\u904a\u3073\u3092\u901a\u3058\u3066\u3001\u4ed5\u4e8b\u306e\u4e16\u754c\u3078\u306e\u8208\u5473\u30fb\u95a2\u5fc3\u3092\u80b2\u307f\u3001\u81ea\u5df1\u6982\u5ff5\u306e\u57fa\u790e\u3092\u5f62\u6210\u3057\u307e\u3059\u3002<\/p>\n                <\/div>\n                <div id=\"exploration\" class=\"stage-panel hidden\">\n                    <h3 class=\"text-2xl font-bold text-amber-800 mb-3\">2. \u63a2\u7d22\u6bb5\u968e (15\uff5e24\u6b73\u9803)<\/h3>\n                    <p class=\"text-gray-700\">\u30a2\u30eb\u30d0\u30a4\u30c8\u3084\u5b66\u6821\u3067\u306e\u5b66\u3073\u3001\u30a4\u30f3\u30bf\u30fc\u30f3\u30b7\u30c3\u30d7\u306a\u3069\u3092\u901a\u3058\u3066\u3001\u69d8\u3005\u306a\u53ef\u80fd\u6027\u3092\u8a66\u884c\u932f\u8aa4\u3059\u308b\u6642\u671f\u3067\u3059\u3002\u300c\u81ea\u5206\u306b\u306f\u4f55\u304c\u5411\u3044\u3066\u3044\u308b\u3093\u3060\u308d\u3046\uff1f\u300d\u3068\u3001\u81ea\u5df1\u6982\u5ff5\u3092\u73fe\u5b9f\u7684\u306a\u9078\u629e\u80a2\u3068\u7167\u3089\u3057\u5408\u308f\u305b\u3001\u30ad\u30e3\u30ea\u30a2\u306e\u65b9\u5411\u6027\u3092\u63a2\u308a\u307e\u3059\u3002<\/p>\n                <\/div>\n                <div id=\"establishment\" class=\"stage-panel hidden\">\n                    <h3 class=\"text-2xl font-bold text-amber-800 mb-3\">3. \u78ba\u7acb\u6bb5\u968e (25\uff5e44\u6b73\u9803)<\/h3>\n                    <p class=\"text-gray-700\">\u9078\u629e\u3057\u305f\u8077\u696d\u5206\u91ce\u3067\u4e00\u4eba\u524d\u306b\u306a\u308d\u3046\u3068\u596e\u95d8\u3057\u3001\u81ea\u5206\u306e\u30dd\u30b8\u30b7\u30e7\u30f3\u3092\u56fa\u3081\u3066\u3044\u304f\u6642\u671f\u3067\u3059\u3002\u5c02\u9580\u7684\u306a\u30b9\u30ad\u30eb\u3092\u78e8\u304d\u3001\u7d4c\u9a13\u3092\u7a4d\u3080\u3053\u3068\u3067\u30ad\u30e3\u30ea\u30a2\u3092\u5b89\u5b9a\u3055\u305b\u3001\u3088\u308a\u78ba\u56fa\u305f\u308b\u81ea\u5df1\u6982\u5ff5\u3092\u7bc9\u3044\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n                <\/div>\n                <div id=\"maintenance\" class=\"stage-panel hidden\">\n                    <h3 class=\"text-2xl font-bold text-amber-800 mb-3\">4. \u7dad\u6301\u6bb5\u968e (45\uff5e64\u6b73\u9803)<\/h3>\n                    <p class=\"text-gray-700\">\u3053\u308c\u307e\u3067\u306b\u7bc9\u304d\u4e0a\u3052\u305f\u5730\u4f4d\u3084\u5c02\u9580\u6027\u3092\u7dad\u6301\u3057\u3066\u3044\u304f\u6642\u671f\u3067\u3059\u3002\u5927\u304d\u306a\u5909\u5316\u3088\u308a\u3082\u5b89\u5b9a\u3092\u91cd\u8996\u3057\u3001\u65b0\u3057\u3044\u4e16\u4ee3\u306b\u81ea\u5206\u306e\u77e5\u8b58\u3084\u7d4c\u9a13\u3092\u4f1d\u627f\u3057\u3066\u3044\u304f\u5f79\u5272\u3082\u91cd\u8981\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n                <\/div>\n                <div id=\"disengagement\" class=\"stage-panel hidden\">\n                    <h3 class=\"text-2xl font-bold text-amber-800 mb-3\">5. \u89e3\u653e\u6bb5\u968e (65\u6b73\u4ee5\u964d)<\/h3>\n                    <p class=\"text-gray-700\">\u4ed5\u4e8b\u306e\u30da\u30fc\u30b9\u3092\u843d\u3068\u3057\u3001\u3084\u304c\u3066\u5f15\u9000\u3092\u8fce\u3048\u308b\u6642\u671f\u3067\u3059\u3002\u4ed5\u4e8b\u4e2d\u5fc3\u3060\u3063\u305f\u751f\u6d3b\u304b\u3089\u3001\u8da3\u5473\u3084\u5730\u57df\u6d3b\u52d5\u3001\u5bb6\u65cf\u3068\u306e\u6642\u9593\u306a\u3069\u3001\u65b0\u305f\u306a\u5f79\u5272\u3078\u3068\u95a2\u5fc3\u304c\u79fb\u308a\u3001\u65b0\u3057\u3044\u30e9\u30a4\u30d5\u30b9\u30bf\u30a4\u30eb\u3092\u78ba\u7acb\u3057\u307e\u3059\u3002<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"propositions\" class=\"mb-20 scroll-mt-20\">\n            <h2 class=\"text-3xl font-bold text-teal-700 mb-4\">\u7406\u8ad6\u306e\u7d50\u6676\uff1a14\u306e\u547d\u984c<\/h2>\n            <p class=\"text-gray-600 max-w-3xl mb-10\">\u30b9\u30fc\u30d1\u30fc\u306f\u3001\u30ad\u30e3\u30ea\u30a2\u767a\u9054\u306e\u672c\u8cea\u309214\u306e\u547d\u984c\u3068\u3057\u3066\u4f53\u7cfb\u5316\u3057\u307e\u3057\u305f\u3002\u3053\u308c\u3089\u306f\u7406\u8ad6\u306e\u96c6\u5927\u6210\u3067\u3042\u308a\u3001\u4eba\u3092\u652f\u63f4\u3059\u308b\u4e0a\u3067\u306e\u6839\u672c\u7684\u306a\u8003\u3048\u65b9\u3092\u793a\u3057\u3066\u3044\u307e\u3059\u3002\u5404\u30c6\u30fc\u30de\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n            <div id=\"accordion\" class=\"max-w-3xl space-y-4\">\n                <div class=\"accordion-item bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden\">\n                    <div class=\"accordion-header flex justify-between items-center p-5 cursor-pointer\">\n                        <h3 class=\"text-lg font-bold text-amber-800\">\u3010\u500b\u4eba\u5dee\u3068\u591a\u69d8\u6027\u306b\u3064\u3044\u3066\u3011<\/h3>\n                        <svg class=\"w-6 h-6 text-teal-600 transition-transform duration-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n                    <\/div>\n                    <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n                        <p class=\"p-5 pt-0 text-gray-600\">\u4eba\u306f\u80fd\u529b\u3082\u4fa1\u5024\u89b3\u3082\u305d\u308c\u305e\u308c\u9055\u3046\u3002\u3060\u304b\u3089\u3001\u4e00\u4eba\u306b\u5408\u3046\u4ed5\u4e8b\u306f\u4e00\u3064\u3058\u3083\u306a\u3044\u3057\u3001\u4e00\u3064\u306e\u4ed5\u4e8b\u306b\u3082\u3044\u308d\u3093\u306a\u4eba\u304c\u3044\u308b\u3002\u4eba\u3068\u4ed5\u4e8b\u306e\u591a\u69d8\u6027\u3068\u67d4\u8edf\u6027\u3092\u8a8d\u3081\u308b\u3053\u3068\u304c\u51fa\u767a\u70b9\u3067\u3059\u3002<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"accordion-item bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden\">\n                    <div class=\"accordion-header flex justify-between items-center p-5 cursor-pointer\">\n                        <h3 class=\"text-lg font-bold text-amber-800\">\u3010\u81ea\u5df1\u6982\u5ff5\u306e\u5f62\u6210\u3068\u5b9f\u73fe\u306b\u3064\u3044\u3066\u3011<\/h3>\n                        <svg class=\"w-6 h-6 text-teal-600 transition-transform duration-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n                    <\/div>\n                    <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n                        <p class=\"p-5 pt-0 text-gray-600\">\u81ea\u5206\u3089\u3057\u3055\uff08\u81ea\u5df1\u6982\u5ff5\uff09\u306f\u7d4c\u9a13\u306b\u3088\u3063\u3066\u4e00\u751f\u5909\u308f\u308a\u7d9a\u3051\u308b\u3002\u3060\u304b\u3089\u30ad\u30e3\u30ea\u30a2\u9078\u3073\u306f\u7d99\u7d9a\u7684\u306a\u30d7\u30ed\u30bb\u30b9\u3067\u3042\u308a\u3001\u305d\u306e\u4eba\u306e\u6b69\u307f\u306f\u3001\u500b\u4eba\u306e\u7279\u6027\u3068\u80b2\u3063\u305f\u74b0\u5883\u306a\u3069\u306e\u76f8\u4e92\u4f5c\u7528\u3067\u6c7a\u307e\u308a\u307e\u3059\u3002<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"accordion-item bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden\">\n                    <div class=\"accordion-header flex justify-between items-center p-5 cursor-pointer\">\n                        <h3 class=\"text-lg font-bold text-amber-800\">\u3010\u767a\u9054\u3068\u6210\u719f\u306b\u3064\u3044\u3066\u3011<\/h3>\n                        <svg class=\"w-6 h-6 text-teal-600 transition-transform duration-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n                    <\/div>\n                    <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n                        <p class=\"p-5 pt-0 text-gray-600\">\u30ad\u30e3\u30ea\u30a2\u306e\u767a\u9054\u306f\u3001\u5404\u5e74\u4ee3\u306e\u8ab2\u984c\u306b\u3069\u308c\u3060\u3051\u3046\u307e\u304f\u5bfe\u51e6\u3067\u304d\u308b\u304b\uff08\uff1d\u30ad\u30e3\u30ea\u30a2\u6210\u719f\uff09\u306b\u304b\u304b\u3063\u3066\u3044\u308b\u3002\u305d\u3057\u3066\u30ad\u30e3\u30ea\u30a2\u767a\u9054\u3068\u306f\u3001\u7d50\u5c40\u306e\u3068\u3053\u308d\u3001\u81ea\u5206\u3089\u3057\u3055\u3092\u898b\u3064\u3051\u3001\u5b9f\u73fe\u3057\u3066\u3044\u304f\u30d7\u30ed\u30bb\u30b9\u306b\u4ed6\u306a\u308a\u307e\u305b\u3093\u3002<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"accordion-item bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden\">\n                    <div class=\"accordion-header flex justify-between items-center p-5 cursor-pointer\">\n                        <h3 class=\"text-lg font-bold text-amber-800\">\u3010\u73fe\u5b9f\u3068\u306e\u3059\u308a\u5408\u308f\u305b\u3068\u6e80\u8db3\u306b\u3064\u3044\u3066\u3011<\/h3>\n                        <svg class=\"w-6 h-6 text-teal-600 transition-transform duration-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n                    <\/div>\n                    <div class=\"accordion-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n                        <p class=\"p-5 pt-0 text-gray-600\">\u300c\u3053\u3046\u3042\u308a\u305f\u3044\u81ea\u5206\u300d\u3068\u300c\u73fe\u5b9f\u300d\u3092\u3059\u308a\u5408\u308f\u305b\u308b\u306b\u306f\u3001\u5f79\u5272\u306e\u8a66\u884c\u932f\u8aa4\u304c\u5fc5\u8981\u3002\u4ed5\u4e8b\u3084\u4eba\u751f\u306e\u6e80\u8db3\u5ea6\u306f\u3001\u81ea\u5206\u3089\u3057\u3055\u3092\u3069\u308c\u3060\u3051\u8868\u73fe\u3067\u304d\u305f\u304b\u306b\u304b\u304b\u3063\u3066\u3044\u308b\u3002\u591a\u304f\u306e\u4eba\u306b\u3068\u3063\u3066\u4ed5\u4e8b\u306f\u81ea\u5df1\u5b9f\u73fe\u306e\u4e2d\u5fc3\u3067\u3059\u304c\u3001\u305d\u308c\u304c\u5168\u3066\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"rainbow\" class=\"scroll-mt-20\">\n            <h2 class=\"text-3xl font-bold text-teal-700 mb-4\">\u307e\u3068\u3081\uff1a\u30e9\u30a4\u30d5\u30ad\u30e3\u30ea\u30a2\u30fb\u30ec\u30a4\u30f3\u30dc\u30fc<\/h2>\n            <p class=\"text-gray-600 max-w-3xl mb-10\">\u30b9\u30fc\u30d1\u30fc\u306e\u7406\u8ad6\u306f\u3001\u4eba\u751f\u306b\u304a\u3051\u308b\u69d8\u3005\u306a\u5f79\u5272\uff08\u30ed\u30fc\u30eb\uff09\u306e\u7d44\u307f\u5408\u308f\u305b\u3068\u3057\u3066\u30ad\u30e3\u30ea\u30a2\u3092\u6349\u3048\u308b\u300c\u30e9\u30a4\u30d5\u30ad\u30e3\u30ea\u30a2\u30fb\u30ec\u30a4\u30f3\u30dc\u30fc\u300d\u3068\u3044\u3046\u6982\u5ff5\u3078\u3068\u767a\u5c55\u3057\u307e\u3057\u305f\u3002\u4e0b\u306e\u30b0\u30e9\u30d5\u306f\u3001\u4eba\u751f\u306e\u30b9\u30c6\u30fc\u30b8\u306b\u3088\u3063\u3066\u5404\u5f79\u5272\u306e\u91cd\u8981\u6027\u304c\u3069\u3046\u5909\u5316\u3059\u308b\u304b\u3092\u8996\u899a\u5316\u3057\u305f\u3082\u306e\u3067\u3059\u3002<\/p>\n            <div class=\"bg-white p-4 sm:p-8 rounded-xl shadow-lg border border-gray-100\">\n                <div class=\"chart-container\">\n                    <canvas id=\"lifeCareerRainbowChart\"><\/canvas>\n                <\/div>\n                <p class=\"text-xs text-gray-500 mt-4\">\n                    \u6ce8\uff1a\u3053\u306e\u30b0\u30e9\u30d5\u306f\u3001D.E.\u30b9\u30fc\u30d1\u30fc\u304c\u63d0\u5531\u3057\u305f\u300c\u30e9\u30a4\u30d5\u30ad\u30e3\u30ea\u30a2\u30fb\u30ec\u30a4\u30f3\u30dc\u30fc\u300d\u306e\u6982\u5ff5\u3092\u8996\u899a\u7684\u306b\u8868\u73fe\u3057\u305f\u30a4\u30e1\u30fc\u30b8\u3067\u3059\u3002\u3053\u308c\u306f\u3001\u3042\u308b\u671f\u9593\u306b\u4e00\u4eba\u306e\u4eba\u9593\u304c\u8907\u6570\u306e\u5f79\u5272\u3092\u540c\u6642\u306b\u62c5\u3046\u3053\u3068\u3092\u793a\u3057\u3066\u304a\u308a\u3001\u5404\u5f79\u5272\u3078\u306e\u529b\u306e\u6ce8\u304e\u5177\u5408\uff08\u95a2\u4e0e\u5ea6\uff09\u3092\u5408\u8a08\u3059\u308b\u3068100%\u3092\u8d85\u3048\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u5404\u5f79\u5272\u306e\u6bd4\u7387\u306f\u7406\u8ad6\u3092\u8aac\u660e\u3059\u308b\u305f\u3081\u306e\u5178\u578b\u4f8b\u3067\u3042\u308a\u3001\u500b\u4eba\u306b\u3088\u3063\u3066\u7570\u306a\u308a\u307e\u3059\u3002\n                <\/p>\n            <\/div>\n        <\/section>\n\n    <\/main>\n\n    <footer class=\"bg-white mt-20 border-t\">\n        <div class=\"container mx-auto px-6 py-4 text-center text-gray-500\">\n            <p>\u00a9 2025 \u5922\u30ed\u30fc\u30d7\u30ec\u7814\u7a76\u5ba4 All Rights Reserved.<\/p>\n        <\/div>\n    <\/footer>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function () {\n            const stageNav = document.getElementById('stage-nav');\n            const stageContent = document.getElementById('stage-content');\n            const stageButtons = stageNav.querySelectorAll('.stage-btn');\n            const stagePanels = stageContent.querySelectorAll('.stage-panel');\n\n            stageNav.addEventListener('click', (e) => {\n                if (e.target.tagName === 'BUTTON') {\n                    const targetStage = e.target.dataset.stage;\n\n                    stageButtons.forEach(btn => btn.classList.remove('active'));\n                    e.target.classList.add('active');\n\n                    stagePanels.forEach(panel => {\n                        if (panel.id === targetStage) {\n                            panel.classList.remove('hidden');\n                        } else {\n                            panel.classList.add('hidden');\n                        }\n                    });\n                }\n            });\n\n            const accordionItems = document.querySelectorAll('.accordion-item');\n            accordionItems.forEach(item => {\n                const header = item.querySelector('.accordion-header');\n                const content = item.querySelector('.accordion-content');\n                header.addEventListener('click', () => {\n                    const isOpen = header.classList.contains('open');\n                    accordionItems.forEach(i => {\n                        i.querySelector('.accordion-header').classList.remove('open');\n                        i.querySelector('.accordion-content').style.maxHeight = '0px';\n                    });\n                    if (!isOpen) {\n                        header.classList.add('open');\n                        content.style.maxHeight = content.scrollHeight + 'px';\n                    }\n                });\n            });\n\n            const navLinks = document.querySelectorAll('.nav-link');\n            const sections = document.querySelectorAll('main section');\n            window.addEventListener('scroll', () => {\n                let current = '';\n                sections.forEach(section => {\n                    const sectionTop = section.offsetTop;\n                    if (pageYOffset >= sectionTop - 100) {\n                        current = section.getAttribute('id');\n                    }\n                });\n                navLinks.forEach(link => {\n                    link.classList.remove('active-link');\n                    if (link.getAttribute('href').includes(current)) {\n                        link.classList.add('active-link');\n                    }\n                });\n            });\n\n            const ctx = document.getElementById('lifeCareerRainbowChart').getContext('2d');\n            const lifeCareerRainbowChart = new Chart(ctx, {\n                type: 'bar',\n                data: {\n                    labels: ['\u6210\u9577 (\uff5e14)', '\u63a2\u7d22 (15-24)', '\u78ba\u7acb (25-44)', '\u7dad\u6301 (45-64)', '\u89e3\u653e (65\uff5e)'],\n                    datasets: [\n                        { label: '\u5b50\u4f9b', data: [100, 40, 10, 10, 10], backgroundColor: '#fde68a' }, \/\/ Amber 200\n                        { label: '\u5b66\u751f', data: [80, 100, 20, 10, 5], backgroundColor: '#6ee7b7' }, \/\/ Emerald 300\n                        { label: '\u8077\u696d\u4eba', data: [0, 50, 100, 80, 10], backgroundColor: '#38bdf8' }, \/\/ Sky 400\n                        { label: '\u914d\u5076\u8005\/\u89aa', data: [0, 10, 80, 70, 50], backgroundColor: '#f472b6' }, \/\/ Pink 400\n                        { label: '\u5e02\u6c11', data: [5, 10, 20, 30, 40], backgroundColor: '#a78bfa' }, \/\/ Violet 400\n                        { label: '\u4f59\u6687\u4eba', data: [40, 30, 20, 40, 100], backgroundColor: '#fb923c' } \/\/ Orange 400\n                    ]\n                },\n                options: {\n                    maintainAspectRatio: false,\n                    responsive: true,\n                    plugins: {\n                        title: { display: true, text: '\u4eba\u751f\u306e\u5404\u30b9\u30c6\u30fc\u30b8\u306b\u304a\u3051\u308b\u5f79\u5272\u3078\u306e\u95a2\u4e0e\u5ea6\uff08\u30a4\u30e1\u30fc\u30b8\uff09', font: { size: 16 } },\n                        tooltip: {\n                            callbacks: {\n                                label: function(context) {\n                                    let label = context.dataset.label || '';\n                                    if (label) {\n                                        label += ': ';\n                                    }\n                                    label += context.raw + ' (\u95a2\u4e0e\u5ea6)';\n                                    return label;\n                                }\n                            }\n                        }\n                    },\n                    scales: {\n                        x: { stacked: true },\n                        y: { \n                            stacked: true,\n                            max: 300,\n                            title: {\n                                display: true,\n                                text: '\u5f79\u5272\u3078\u306e\u95a2\u4e0e\u5ea6\u306e\u5408\u8a08'\n                            }\n                        }\n                    }\n                }\n            });\n        });\n    <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u30c9\u30ca\u30eb\u30c9\u30fb\u30b9\u30fc\u30d1\u30fc\u7406\u8ad6 \u5bfe\u8a71\u578b\u30ac\u30a4\u30c9 \u306f\u3058\u3081\u306b 2\u3064\u306e\u67f1 5\u3064\u306e\u30e9\u30a4\u30d5\u30b9\u30c6\u30fc\u30b8 14\u306e\u547d\u984c \u307e\u3068\u3081 \u4eba\u751f\u306e\u4e2d\u306e\u30ad\u30e3\u30ea\u30a2\u3092\u8aad\u307f\u89e3\u304f \u300c\u81ea\u5206\u306f\u3069\u3093\u306a\u4ed5\u4e8b\u304c\u3057\u305f\u3044\u3093\u3060\u308d\u3046\uff1f\u300d\u591a\u304f\u306e\u4eba\u304c\u62b1\u3048\u308b\u3053\u306e\u554f\u3044\u306b\u3001\u30c9\u30ca\u30eb\u30c9\u30fb\u30b9\u30fc\u30d1\u30fc\u306f\u300c\u30ad [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"vkexunit_cta_each_option":"","footnotes":""},"class_list":["post-2346","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/career-c.sognoplanning.com\/index.php?rest_route=\/wp\/v2\/pages\/2346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/career-c.sognoplanning.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/career-c.sognoplanning.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/career-c.sognoplanning.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/career-c.sognoplanning.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2346"}],"version-history":[{"count":3,"href":"https:\/\/career-c.sognoplanning.com\/index.php?rest_route=\/wp\/v2\/pages\/2346\/revisions"}],"predecessor-version":[{"id":2349,"href":"https:\/\/career-c.sognoplanning.com\/index.php?rest_route=\/wp\/v2\/pages\/2346\/revisions\/2349"}],"wp:attachment":[{"href":"https:\/\/career-c.sognoplanning.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}