{"id":2786,"date":"2025-08-29T09:52:50","date_gmt":"2025-08-29T00:52:50","guid":{"rendered":"https:\/\/sognoplanning.com\/?p=2786"},"modified":"2025-08-29T09:52:50","modified_gmt":"2025-08-29T00:52:50","slug":"45%e6%ad%b3%e3%81%8b%e3%82%89%e3%81%ae%e6%88%a6%e7%95%a5%e7%9a%84%e8%bb%a2%e8%81%b7%e3%82%ac%e3%82%a4%e3%83%89","status":"publish","type":"post","link":"https:\/\/sognoplanning.com\/?p=2786","title":{"rendered":"45\u6b73\u304b\u3089\u306e\u6226\u7565\u7684\u8ee2\u8077\u30ac\u30a4\u30c9"},"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>\u30ad\u30e3\u30ea\u30a2\u3092\u518d\u52a0\u901f\u3055\u305b\u308b\uff1a45\u6b73\u304b\u3089\u306e\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u8ee2\u8077\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;500;700&#038;display=swap\" rel=\"stylesheet\">\n    <!-- Chosen Palette: Warm Neutrals with a Deep Blue Accent -->\n    <!-- Application Structure Plan: A task-oriented, four-step SPA design (\"\u5e02\u5834\u4fa1\u5024\u306e\u518d\u8a8d\u8b58\", \"\u30ad\u30e3\u30ea\u30a2\u8cc7\u7523\u306e\u53ef\u8996\u5316\", \"\u8ee2\u8077\u6226\u7565\u306e\u7acb\u6848\", \"\u9078\u8003\u5bfe\u7b56\u306e\u5b9f\u8df5\"). This structure transforms the linear text into an interactive dashboard, guiding the user through a strategic process from understanding their value to winning an offer. The focus is on practical tools (AI coach, interactive forms) and actionable insights, empowering mid-career professionals to take control of their career trajectory. -->\n    <!-- Visualization & Content Choices: \n        1. Market Value (Report Ch.1) -> Goal: Inform\/Motivate -> Viz: Dynamic stat cards & Bar Chart -> Interaction: Hover tooltips -> Justification: Visual data is more impactful for showing the high demand for experienced managers and specialists. -> Library: Chart.js.\n        2. Self-Analysis (Report Ch.2) -> Goal: Guide\/Organize -> Viz: Tabbed interactive component (PAR form, AI Coach, Priorities Radar Chart) -> Interaction: User input, button clicks, sliders updating a chart -> Justification: Converts abstract concepts into practical, personalized tools for self-discovery. -> Library: Vanilla JS, Chart.js.\n        3. Strategy (Report Ch.3) -> Goal: Compare\/Inform -> Viz: Interactive filterable cards -> Interaction: Click to filter channels by objective -> Justification: More engaging and goal-oriented than a static table, helping users choose the right path. -> Library: Vanilla JS.\n        4. Interview Prep (Report Ch.4) -> Goal: Prepare\/Practice -> Viz: Accordion-style Q&A simulator -> Interaction: Click to reveal interviewer's intent and answer framework -> Justification: Promotes active learning and builds confidence for critical interview situations. -> Library: Vanilla 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: #f9f9f7;\n            color: #1e293b;\n        }\n        .chart-container {\n            position: relative;\n            width: 100%;\n            max-width: 600px;\n            margin-left: auto;\n            margin-right: auto;\n            height: 350px;\n            max-height: 400px;\n        }\n        .nav-link {\n            transition: all 0.3s ease;\n            border-bottom: 2px solid transparent;\n        }\n        .nav-link.active, .nav-link:hover {\n            border-bottom-color: #1e40af;\n            color: #1e40af;\n        }\n        .tab-button.active {\n            background-color: #1e40af;\n            color: white;\n        }\n        .strategy-filter.active {\n            background-color: white;\n            color: #1e40af;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .btn-primary {\n            background-color: #1e40af;\n            color: white;\n            transition: background-color 0.3s ease, transform 0.3s ease;\n        }\n        .btn-primary:hover {\n            background-color: #1c3a94;\n        }\n    <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n    <header class=\"bg-white\/90 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"flex justify-end items-center py-4\">\n                <nav class=\"hidden md:flex space-x-6\">\n                    <a href=\"#section1\" class=\"nav-link text-slate-600 font-medium py-2\">\u5e02\u5834\u4fa1\u5024\u306e\u518d\u8a8d\u8b58<\/a>\n                    <a href=\"#section2\" class=\"nav-link text-slate-600 font-medium py-2\">\u30ad\u30e3\u30ea\u30a2\u8cc7\u7523\u306e\u53ef\u8996\u5316<\/a>\n                    <a href=\"#section3\" class=\"nav-link text-slate-600 font-medium py-2\">\u8ee2\u8077\u6226\u7565\u306e\u7acb\u6848<\/a>\n                    <a href=\"#section4\" class=\"nav-link text-slate-600 font-medium py-2\">\u9078\u8003\u5bfe\u7b56\u306e\u5b9f\u8df5<\/a>\n                <\/nav>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12\">\n\n        <section class=\"text-center mb-16\">\n            <h2 class=\"text-3xl md:text-4xl font-bold text-slate-900 mb-4\">\u30ad\u30e3\u30ea\u30a2\u306e\u5c90\u8def\u3092\u3001\u6700\u5927\u306e\u597d\u6a5f\u306b\u5909\u3048\u308b<\/h2>\n            <p class=\"max-w-3xl mx-auto text-slate-600 text-lg\">45\u6b73\u304b\u3089\u306e\u30ad\u30e3\u30ea\u30a2\u306f\u505c\u6ede\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u6df1\u523b\u306a\u4eba\u6750\u4e0d\u8db3\u3092\u80cc\u666f\u306b\u3001\u3042\u306a\u305f\u306e\u7d4c\u9a13\u3068\u30ea\u30fc\u30c0\u30fc\u30b7\u30c3\u30d7\u306f\u4eca\u3001\u304b\u3064\u3066\u306a\u3044\u307b\u3069\u6c42\u3081\u3089\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30ac\u30a4\u30c9\u306f\u3001\u3042\u306a\u305f\u306e\u5e02\u5834\u4fa1\u5024\u3092\u6700\u5927\u5316\u3057\u3001\u30ad\u30e3\u30ea\u30a2\u3092\u518d\u52a0\u901f\u3055\u305b\u308b\u305f\u3081\u306e\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u8a2d\u8a08\u56f3\u3067\u3059\u3002<\/p>\n        <\/section>\n\n        <!-- Section 1: \u5e02\u5834\u4fa1\u5024\u306e\u518d\u8a8d\u8b58 -->\n        <section id=\"section1\" class=\"py-12 scroll-mt-20\">\n            <div class=\"text-center mb-12\">\n                <h2 class=\"text-3xl font-bold text-slate-900\">1. \u5e02\u5834\u4fa1\u5024\u306e\u518d\u8a8d\u8b58<\/h2>\n                <p class=\"mt-3 text-lg text-slate-600 max-w-2xl mx-auto\">\u300c\u5e74\u9f62\u306e\u58c1\u300d\u306f\u904e\u53bb\u306e\u5e38\u8b58\u3067\u3059\u3002\u30c7\u30fc\u30bf\u304c\u793a\u3059\u901a\u308a\u3001\u63a1\u7528\u5e02\u5834\u306e\u4e3b\u5f79\u306f\u7d4c\u9a13\u8c4a\u5bcc\u306a\u30df\u30c9\u30eb\u4e16\u4ee3\u3078\u3068\u30b7\u30d5\u30c8\u3057\u3066\u3044\u307e\u3059\u3002\u4f01\u696d\u304c\u3042\u306a\u305f\u306e\u7d4c\u9a13\u306b\u6295\u8cc7\u3059\u308b\u7406\u7531\u3092\u7406\u89e3\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n            <\/div>\n            <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n                <div class=\"bg-white p-6 rounded-lg shadow-md\">\n                    <h3 class=\"text-xl font-bold text-center text-slate-800 mb-4\">\u30df\u30c9\u30eb\u4e16\u4ee3\u306b\u6c42\u3081\u3089\u308c\u308b\u5f79\u5272<\/h3>\n                    <div class=\"chart-container\" style=\"height: 300px;\">\n                        <canvas id=\"demandChart\"><\/canvas>\n                    <\/div>\n                <\/div>\n                <div class=\"space-y-6\">\n                    <div class=\"bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-800\">\n                        <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u4f01\u696d\u304c\u6c42\u3081\u308b5\u3064\u306e\u6226\u7565\u7684\u4fa1\u5024<\/h3>\n                        <ul class=\"mt-2 text-slate-600 list-none space-y-2\">\n                            <li class=\"flex items-start\"><span class=\"text-blue-800 mr-2 font-bold\">\u2713<\/span><span><strong>\u30de\u30cd\u30b8\u30e1\u30f3\u30c8\u80fd\u529b:<\/strong> \u5373\u6226\u529b\u3068\u3057\u3066\u7d44\u7e54\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u529b\u3002<\/span><\/li>\n                            <li class=\"flex items-start\"><span class=\"text-blue-800 mr-2 font-bold\">\u2713<\/span><span><strong>\u554f\u984c\u89e3\u6c7a\u80fd\u529b:<\/strong> \u8907\u96d1\u306a\u8ab2\u984c\u306b\u5bfe\u3057\u3001\u7d4c\u9a13\u306b\u57fa\u3065\u3044\u305f\u7684\u78ba\u306a\u89e3\u6c7a\u7b56\u3092\u5c0e\u304f\u529b\u3002<\/span><\/li>\n                            <li class=\"flex items-start\"><span class=\"text-blue-800 mr-2 font-bold\">\u2713<\/span><span><strong>\u6307\u5c0e\u529b:<\/strong> \u6b21\u4e16\u4ee3\u3092\u80b2\u6210\u3057\u3001\u7d44\u7e54\u306e\u6301\u7d9a\u7684\u6210\u9577\u3092\u4fc3\u3059\u529b\u3002<\/span><\/li>\n                            <li class=\"flex items-start\"><span class=\"text-blue-800 mr-2 font-bold\">\u2713<\/span><span><strong>\u4eba\u8108\u3068\u4ea4\u6e09\u529b:<\/strong> \u65b0\u305f\u306a\u30d3\u30b8\u30cd\u30b9\u30c1\u30e3\u30f3\u30b9\u3092\u5275\u51fa\u3059\u308b\u529b\u3002<\/span><\/li>\n                            <li class=\"flex items-start\"><span class=\"text-blue-800 mr-2 font-bold\">\u2713<\/span><span><strong>\u4e8b\u696d\u3092\u4fef\u77b0\u3059\u308b\u8996\u5ea7:<\/strong> \u7d4c\u55b6\u8996\u70b9\u3067\u6700\u9069\u306a\u610f\u601d\u6c7a\u5b9a\u3092\u4e0b\u3059\u529b\u3002<\/span><\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 2: \u30ad\u30e3\u30ea\u30a2\u8cc7\u7523\u306e\u53ef\u8996\u5316 -->\n        <section id=\"section2\" class=\"py-12 scroll-mt-20\">\n            <div class=\"text-center mb-12\">\n                <h2 class=\"text-3xl font-bold text-slate-900\">2. \u30ad\u30e3\u30ea\u30a2\u8cc7\u7523\u306e\u53ef\u8996\u5316<\/h2>\n                <p class=\"mt-3 text-lg text-slate-600 max-w-2xl mx-auto\">\u3042\u306a\u305f\u306e\u30ad\u30e3\u30ea\u30a2\u306f\u7121\u5f62\u306e\u8cc7\u7523\u3067\u3059\u3002\u6700\u65b0\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u3044\u3001\u305d\u306e\u4fa1\u5024\u3092\u5ba2\u89b3\u7684\u306b\u68da\u5378\u3057\u3057\u3001\u8ab0\u306b\u3067\u3082\u4f1d\u308f\u308b\u300c\u6b66\u5668\u300d\u3078\u3068\u8ee2\u63db\u3055\u305b\u307e\u3057\u3087\u3046\u3002<\/p>\n            <\/div>\n            <div class=\"bg-white rounded-lg shadow-md overflow-hidden\">\n                <div class=\"p-6\">\n                    <div class=\"flex border-b border-slate-200\">\n                        <button data-tab=\"tab1\" class=\"tab-button flex-1 py-3 px-2 text-sm md:text-base font-medium text-slate-600 transition active\">\u5b9f\u7e3e\u306e\u8a00\u8a9e\u5316<\/button>\n                        <button data-tab=\"tab2\" class=\"tab-button flex-1 py-3 px-2 text-sm md:text-base font-medium text-slate-600 transition\">AI\u30ad\u30e3\u30ea\u30a2\u30b3\u30fc\u30c1<\/button>\n                        <button data-tab=\"tab3\" class=\"tab-button flex-1 py-3 px-2 text-sm md:text-base font-medium text-slate-600 transition\">\u30ad\u30e3\u30ea\u30a2\u306e\u7f85\u91dd\u76e4<\/button>\n                    <\/div>\n                    <div class=\"mt-6\">\n                        <div id=\"tab1\" class=\"tab-content\">\n                            <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u5b9f\u7e3e\u306e\u8a00\u8a9e\u5316 (PAR\u30e1\u30bd\u30c3\u30c9)<\/h3>\n                            <p class=\"text-slate-600 mb-4\">\u3042\u306a\u305f\u306e\u7d4c\u9a13\u3092\u300c\u8ab2\u984c\u300d\u300c\u884c\u52d5\u300d\u300c\u6210\u679c\u300d\u306e3\u70b9\u3067\u6574\u7406\u3057\u3001\u5177\u4f53\u7684\u306a\u30d3\u30b8\u30cd\u30b9\u30a4\u30f3\u30d1\u30af\u30c8\u3068\u3057\u3066\u63d0\u793a\u3057\u307e\u3059\u3002\u6210\u679c\u306f\u6570\u5024\u3067\u793a\u3059\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n                            <div class=\"space-y-4\">\n                                <div>\n                                    <label class=\"font-semibold text-slate-700\">P: Problem (\u8ab2\u984c\u30fb\u72b6\u6cc1)<\/label>\n                                    <input type=\"text\" placeholder=\"\u4f8b: \u62c5\u5f53\u90e8\u9580\u306e\u58f2\u4e0a\u304c2\u671f\u9023\u7d9a\u3067\u76ee\u6a19\u672a\u9054\u3067\u3001\u30c1\u30fc\u30e0\u306e\u58eb\u6c17\u3082\u4f4e\u4e0b\u3057\u3066\u3044\u305f\u3002\" class=\"block w-full mt-1 p-2 border border-slate-300 rounded-md focus:ring-blue-500 focus:border-blue-500\">\n                                <\/div>\n                                <div>\n                                    <label class=\"font-semibold text-slate-700\">A: Action (\u3042\u306a\u305f\u306e\u884c\u52d5)<\/label>\n                                    <input type=\"text\" placeholder=\"\u4f8b: \u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u305f\u55b6\u696d\u6226\u7565\u3092\u7acb\u6848\u3057\u3001\u9031\u6b21\u306e1on1\u3092\u5c0e\u5165\u3057\u305f\u3002\" class=\"block w-full mt-1 p-2 border border-slate-300 rounded-md focus:ring-blue-500 focus:border-blue-500\">\n                                <\/div>\n                                <div>\n                                    <label class=\"font-semibold text-slate-700\">R: Result (\u6210\u679c)<\/label>\n                                    <input type=\"text\" placeholder=\"\u4f8b: \u534a\u5e74\u3067\u58f2\u4e0a\u3092\u524d\u5e74\u6bd4120%\u306b\u56de\u5fa9\u3055\u305b\u3001\u96e2\u8077\u7387\u30925%\u4f4e\u4e0b\u3055\u305b\u305f\u3002\" class=\"block w-full mt-1 p-2 border border-slate-300 rounded-md focus:ring-blue-500 focus:border-blue-500\">\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div id=\"tab2\" class=\"tab-content hidden\">\n                             <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u3042\u306a\u305f\u306eAI\u30ad\u30e3\u30ea\u30a2\u30b3\u30fc\u30c1<\/h3>\n                            <p class=\"text-slate-600 mb-4\">\u8077\u52d9\u7d4c\u6b74\u306e\u8981\u7d04\u3092\u8cbc\u308a\u4ed8\u3051\u3001\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002ChatGPT\u306a\u3069\u306e\u751f\u6210AI\u306b\u30b3\u30d4\u30fc\uff06\u30da\u30fc\u30b9\u30c8\u3057\u3066\u4f7f\u3048\u308b\u3001\u81ea\u5df1\u5206\u6790\u3092\u6df1\u3081\u308b\u305f\u3081\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n                            <textarea id=\"ai-input\" rows=\"5\" class=\"w-full p-2 border border-slate-300 rounded-md focus:ring-blue-500 focus:border-blue-500\" placeholder=\"\u3053\u3053\u306b\u8077\u52d9\u7d4c\u6b74\u306e\u8981\u7d04\u3092\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044...\"><\/textarea>\n                            <div class=\"flex space-x-4 mt-4\">\n                                <button id=\"prompt1-btn\" class=\"flex-1 bg-blue-800 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-900 transition\">\u5e02\u5834\u4fa1\u5024\u5206\u6790\u30d7\u30ed\u30f3\u30d7\u30c8\u751f\u6210<\/button>\n                                <button id=\"prompt2-btn\" class=\"flex-1 bg-slate-600 text-white font-bold py-2 px-4 rounded-md hover:bg-slate-700 transition\">\u5b9f\u7e3e\u30a4\u30f3\u30d1\u30af\u30c8\u5411\u4e0a\u30d7\u30ed\u30f3\u30d7\u30c8\u751f\u6210<\/button>\n                            <\/div>\n                            <div id=\"ai-output-container\" class=\"hidden mt-4 bg-slate-50 p-4 rounded-md\">\n                                <h4 class=\"font-bold text-slate-800\">\u751f\u6210\u3055\u308c\u305f\u30d7\u30ed\u30f3\u30d7\u30c8:<\/h4>\n                                <pre id=\"ai-output\" class=\"text-sm text-slate-700 whitespace-pre-wrap bg-slate-100 p-3 rounded-md mt-2\"><\/pre>\n                                <button id=\"copy-btn\" class=\"mt-2 bg-gray-200 text-slate-800 text-sm py-1 px-3 rounded-md hover:bg-gray-300\">\u30b3\u30d4\u30fc<\/button>\n                            <\/div>\n                        <\/div>\n                        <div id=\"tab3\" class=\"tab-content hidden\">\n                            <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u30ad\u30e3\u30ea\u30a2\u5f8c\u534a\u6226\u306e\u7f85\u91dd\u76e4<\/h3>\n                            <p class=\"text-slate-600 mb-4\">\u5e74\u53ce\u3084\u5f79\u8077\u3060\u3051\u3067\u306a\u304f\u3001\u3042\u306a\u305f\u304c\u672c\u5f53\u306b\u5927\u5207\u306b\u3057\u305f\u3044\u4fa1\u5024\u89b3\u3092\u898b\u3064\u3081\u76f4\u3057\u307e\u3057\u3087\u3046\u3002\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u52d5\u304b\u3057\u3066\u3001\u3042\u306a\u305f\u306e\u7406\u60f3\u306e\u50cd\u304d\u65b9\u3092\u53ef\u8996\u5316\u3057\u307e\u3059\u3002<\/p>\n                            <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n                                <div id=\"sliders-container\" class=\"space-y-4\">\n                                    <div><label class=\"font-medium\">\u5e74\u53ce\u30fb\u5f85\u9047<\/label><input type=\"range\" class=\"w-full\" min=\"0\" max=\"100\" value=\"50\"><\/div>\n                                    <div><label class=\"font-medium\">\u30ef\u30fc\u30af\u30e9\u30a4\u30d5\u30d0\u30e9\u30f3\u30b9<\/label><input type=\"range\" class=\"w-full\" min=\"0\" max=\"100\" value=\"50\"><\/div>\n                                    <div><label class=\"font-medium\">\u793e\u4f1a\u8ca2\u732e\u30fb\u3084\u308a\u304c\u3044<\/label><input type=\"range\" class=\"w-full\" min=\"0\" max=\"100\" value=\"50\"><\/div>\n                                    <div><label class=\"font-medium\">\u88c1\u91cf\u30fb\u81ea\u5df1\u6210\u9577<\/label><input type=\"range\" class=\"w-full\" min=\"0\" max=\"100\" value=\"50\"><\/div>\n                                    <div><label class=\"font-medium\">\u5c02\u9580\u6027\u306e\u767a\u63ee<\/label><input type=\"range\" class=\"w-full\" min=\"0\" max=\"100\" value=\"50\"><\/div>\n                                <\/div>\n                                <div class=\"chart-container\" style=\"height: 300px;\">\n                                    <canvas id=\"prioritiesRadarChart\"><\/canvas>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 3: \u8ee2\u8077\u6226\u7565\u306e\u7acb\u6848 -->\n        <section id=\"section3\" class=\"py-12 scroll-mt-20\">\n            <div class=\"text-center mb-12\">\n                <h2 class=\"text-3xl font-bold text-slate-900\">3. \u8ee2\u8077\u6226\u7565\u306e\u7acb\u6848<\/h2>\n                <p class=\"mt-3 text-lg text-slate-600 max-w-2xl mx-auto\">\u81ea\u5df1\u5206\u6790\u304c\u3067\u304d\u305f\u3089\u3001\u6b21\u306f\u884c\u52d5\u3067\u3059\u3002\u3042\u306a\u305f\u306e\u30ad\u30e3\u30ea\u30a2\u30ec\u30d9\u30eb\u3068\u76ee\u7684\u306b\u5408\u3063\u305f\u30c1\u30e3\u30cd\u30eb\u3092\u6226\u7565\u7684\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u304c\u6210\u529f\u306e\u9375\u3067\u3059\u3002<\/p>\n            <\/div>\n            <div class=\"flex justify-center space-x-2 md:space-x-4 mb-8 bg-slate-100 p-2 rounded-full\">\n                <button data-filter=\"all\" class=\"strategy-filter active py-2 px-4 rounded-full font-semibold\">\u3059\u3079\u3066<\/button>\n                <button data-filter=\"high-class\" class=\"strategy-filter text-slate-600 py-2 px-4 rounded-full font-semibold\">\u30cf\u30a4\u30af\u30e9\u30b9<\/button>\n                <button data-filter=\"market-value\" class=\"strategy-filter text-slate-600 py-2 px-4 rounded-full font-semibold\">\u5e02\u5834\u4fa1\u5024\u6e2c\u5b9a<\/button>\n                <button data-filter=\"network\" class=\"strategy-filter text-slate-600 py-2 px-4 rounded-full font-semibold\">\u4eba\u8108\u6d3b\u7528<\/button>\n            <\/div>\n            <div id=\"strategy-grid\" class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n                <div class=\"strategy-card bg-white p-6 rounded-lg shadow-md\" data-tags='[\"high-class\"]'>\n                    <h3 class=\"text-xl font-bold text-slate-800\">\u30cf\u30a4\u30af\u30e9\u30b9\u8ee2\u8077\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8<\/h3>\n                    <p class=\"mt-2 text-slate-600\">\u7d4c\u55b6\u5c64\u3084\u7ba1\u7406\u8077\u306e\u975e\u516c\u958b\u6c42\u4eba\u304c\u8c4a\u5bcc\u3002\u30d7\u30ed\u306e\u30b5\u30dd\u30fc\u30c8\u3067\u6226\u7565\u7684\u306b\u30ad\u30e3\u30ea\u30a2\u30a2\u30c3\u30d7\u3002<\/p>\n                <\/div>\n                <div class=\"strategy-card bg-white p-6 rounded-lg shadow-md\" data-tags='[\"market-value\"]'>\n                    <h3 class=\"text-xl font-bold text-slate-800\">\u30b9\u30ab\u30a6\u30c8\u578b\u8ee2\u8077\u30b5\u30a4\u30c8<\/h3>\n                    <p class=\"mt-2 text-slate-600\">\u7d4c\u6b74\u767b\u9332\u3067\u4f01\u696d\u304b\u3089\u76f4\u63a5\u30aa\u30d5\u30a1\u30fc\u3002\u81ea\u8eab\u306e\u5e02\u5834\u4fa1\u5024\u3092\u5ba2\u89b3\u7684\u306b\u628a\u63e1\u3067\u304d\u308b\u3002<\/p>\n                <\/div>\n                <div class=\"strategy-card bg-white p-6 rounded-lg shadow-md\" data-tags='[\"network\"]'>\n                    <h3 class=\"text-xl font-bold text-slate-800\">\u30ea\u30d5\u30a1\u30e9\u30eb\uff08\u4eba\u8108\uff09<\/h3>\n                    <p class=\"mt-2 text-slate-600\">\u5143\u540c\u50da\u3084\u53d6\u5f15\u5148\u304b\u3089\u306e\u7d39\u4ecb\u3002\u4fe1\u983c\u304c\u5f37\u529b\u306a\u63a8\u85a6\u72b6\u3068\u306a\u308a\u3001\u6c7a\u5b9a\u7387\u304c\u9ad8\u3044\u3002<\/p>\n                <\/div>\n                <div class=\"strategy-card bg-white p-6 rounded-lg shadow-md\" data-tags='[\"market-value\", \"network\"]'>\n                    <h3 class=\"text-xl font-bold text-slate-800\">\u30cf\u30ed\u30fc\u30ef\u30fc\u30af<\/h3>\n                    <p class=\"mt-2 text-slate-600\">\u5730\u57df\u306b\u6839\u5dee\u3057\u305f\u512a\u826f\u4f01\u696d\u306e\u6c42\u4eba\u3002\u516c\u7684\u30b5\u30dd\u30fc\u30c8\u3067\u6d3b\u52d5\u306e\u57fa\u790e\u3092\u56fa\u3081\u308b\u3002<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 4: \u9078\u8003\u5bfe\u7b56\u306e\u5b9f\u8df5 -->\n        <section id=\"section4\" class=\"py-12 scroll-mt-20\">\n            <div class=\"text-center mb-12\">\n                <h2 class=\"text-3xl font-bold text-slate-900\">4. \u9078\u8003\u5bfe\u7b56\u306e\u5b9f\u8df5<\/h2>\n                <p class=\"mt-3 text-lg text-slate-600 max-w-2xl mx-auto\">\u3042\u306a\u305f\u306e\u7d4c\u9a13\u306f\u6700\u5927\u306e\u6b66\u5668\u3067\u3059\u3002\u305d\u306e\u4fa1\u5024\u3092\u7684\u78ba\u306b\u4f1d\u3048\u3001\u63a1\u7528\u62c5\u5f53\u8005\u306e\u300c\u8a00\u8449\u306b\u3055\u308c\u306a\u3044\u61f8\u5ff5\u300d\u306b\u5148\u56de\u308a\u3057\u3066\u7b54\u3048\u308b\u6e96\u5099\u3092\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n            <\/div>\n            <div class=\"grid md:grid-cols-2 gap-8\">\n                <div class=\"bg-white p-6 rounded-lg shadow-md\">\n                    <h3 class=\"text-xl font-bold text-slate-800 mb-4\">\u5b9f\u7e3e\u306e\u30b9\u30c8\u30fc\u30ea\u30fc\u5316<\/h3>\n                    <div class=\"space-y-4\">\n                        <div>\n                            <h4 class=\"font-semibold text-slate-700\">Before (\u696d\u52d9\u306e\u7f85\u5217)<\/h4>\n                            <p class=\"text-sm text-slate-500 p-3 bg-slate-50 rounded-md mt-1\">\u55b6\u696d\u90e8\u9577\uff08\u90e8\u4e0b15\u540d\u3001\u4e88\u7b975\u5104\u5186\uff09\u3068\u3057\u3066\u3001\u30c1\u30fc\u30e0\u306e\u751f\u7523\u6027\u309220%\u5411\u4e0a\u3055\u305b\u305f\u3002<\/p>\n                        <\/div>\n                        <div>\n                            <h4 class=\"font-semibold text-blue-800\">After (\u4fa1\u5024\u306e\u63d0\u793a)<\/h4>\n                            <p class=\"text-sm text-slate-800 p-3 bg-blue-50 rounded-md mt-1\">\u696d\u7e3e\u304c\u4f38\u3073\u60a9\u3093\u3067\u3044\u305f\u55b6\u696d\u90e8\uff0815\u540d\u3001\u4e88\u7b975\u5104\u5186\uff09\u306e\u90e8\u9577\u3068\u3057\u3066\u3001\u30c7\u30fc\u30bf\u5206\u6790\u306b\u57fa\u3065\u304fKPI\u30de\u30cd\u30b8\u30e1\u30f3\u30c8\u3068\u30b3\u30fc\u30c1\u30f3\u30b0\u578b1on1\u3092\u5c0e\u5165\u3002\u7d44\u7e54\u5909\u9769\u3092\u4e3b\u5c0e\u3057\u30011\u5e74\u3067\u751f\u7523\u6027\u309220%\u5411\u4e0a\u3055\u305b\u904e\u53bb\u6700\u9ad8\u306e\u58f2\u4e0a\u3092\u9054\u6210\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"bg-white p-6 rounded-lg shadow-md\">\n                    <h3 class=\"text-xl font-bold text-slate-800 mb-4\">\u9762\u63a5\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc<\/h3>\n                    <div class=\"space-y-3\" id=\"faq-container\">\n                        <div class=\"faq-item border-b border-slate-200 pb-2\">\n                            <button class=\"faq-question w-full text-left font-semibold text-slate-700 flex justify-between items-center py-2\">\n                                <span>\u5e74\u4e0b\u306e\u4e0a\u53f8\u306e\u4e0b\u3067\u50cd\u3051\u307e\u3059\u304b\uff1f<\/span>\n                                <span class=\"transform transition-transform duration-300 text-blue-800 text-xl\">+<\/span>\n                            <\/button>\n                            <div class=\"faq-answer hidden mt-2 text-slate-600 text-sm\">\n                                <p><strong class=\"text-slate-800\">\u610f\u56f3:<\/strong> \u5e74\u529f\u5e8f\u5217\u610f\u8b58\u304c\u5f37\u304f\u3001\u6271\u3044\u306b\u304f\u3044\u4eba\u6750\u3067\u306f\u306a\u3044\u304b\u3002<\/p>\n                                <p class=\"mt-1\"><strong class=\"text-blue-800\">\u56de\u7b54\u306e\u9aa8\u5b50:<\/strong> \u5e74\u9f62\u3067\u306f\u306a\u304f\u300c\u5f79\u5272\u300d\u3092\u5c0a\u91cd\u3059\u308b\u59ff\u52e2\u3092\u793a\u3059\u3002\u300c\u4e0a\u53f8\u306e\u65b0\u3057\u3044\u8996\u70b9\u300d\u3068\u300c\u81ea\u5206\u306e\u7d4c\u9a13\u300d\u306e\u76f8\u4e57\u52b9\u679c\u3092\u524d\u5411\u304d\u306b\u4f1d\u3048\u308b\u3002<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"faq-item border-b border-slate-200 pb-2\">\n                            <button class=\"faq-question w-full text-left font-semibold text-slate-700 flex justify-between items-center py-2\">\n                                <span>\u65b0\u3057\u3044\u74b0\u5883\u306b\u9069\u5fdc\u3067\u304d\u307e\u3059\u304b\uff1f<\/span>\n                                <span class=\"transform transition-transform duration-300 text-blue-800 text-xl\">+<\/span>\n                            <\/button>\n                            <div class=\"faq-answer hidden mt-2 text-slate-600 text-sm\">\n                                <p><strong class=\"text-slate-800\">\u610f\u56f3:<\/strong> \u904e\u53bb\u306e\u6210\u529f\u4f53\u9a13\u306b\u56fa\u57f7\u3057\u3001\u5b66\u7fd2\u610f\u6b32\u304c\u306a\u3044\u306e\u3067\u306f\u306a\u3044\u304b\u3002<\/p>\n                                <p class=\"mt-1\"><strong class=\"text-blue-800\">\u56de\u7b54\u306e\u9aa8\u5b50:<\/strong> \u307e\u305a\u306f\u8b19\u865a\u306b\u5b66\u3076\u59ff\u52e2\u3092\u898b\u305b\u308b\u3002\u305d\u306e\u4e0a\u3067\u3001\u81ea\u8eab\u306e\u7d4c\u9a13\u304c\u8ca2\u732e\u3067\u304d\u308b\u90e8\u5206\u3092\u63d0\u6848\u3059\u308b\u610f\u6b32\u3092\u793a\u3059\u3002<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"faq-item\">\n                            <button class=\"faq-question w-full text-left font-semibold text-slate-700 flex justify-between items-center py-2\">\n                                <span>\u306a\u305c\u4eca\u3001\u8ee2\u8077\u3092\uff1f<\/span>\n                                <span class=\"transform transition-transform duration-300 text-blue-800 text-xl\">+<\/span>\n                            <\/button>\n                            <div class=\"faq-answer hidden mt-2 text-slate-600 text-sm\">\n                                <p><strong class=\"text-slate-800\">\u610f\u56f3:<\/strong> \u30cd\u30ac\u30c6\u30a3\u30d6\u306a\u7406\u7531\u3067\u306e\u9000\u8077\u3067\u306f\u306a\u3044\u304b\u3002<\/p>\n                                <p class=\"mt-1\"><strong class=\"text-blue-800\">\u56de\u7b54\u306e\u9aa8\u5b50:<\/strong> \u524d\u8077\u3078\u306e\u611f\u8b1d\u3092\u8ff0\u3079\u3064\u3064\u3001\u30ad\u30e3\u30ea\u30a2\u5f8c\u534a\u6226\u306b\u5411\u3051\u305f\u300c\u65b0\u305f\u306a\u6311\u6226\u300d\u3068\u3044\u3046\u30dd\u30b8\u30c6\u30a3\u30d6\u306a\u52d5\u6a5f\u3092\u8a9e\u308b\u3002<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- CTA Section -->\n        <section id=\"cta\" class=\"py-16 bg-blue-50 rounded-2xl\">\n            <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n                <h2 class=\"text-2xl md:text-3xl font-bold text-slate-900\">\u30ad\u30e3\u30ea\u30a2\u3068\u30de\u30cd\u30fc\u306e\u5c02\u9580\u5bb6\u306b\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044<\/h2>\n                <p class=\"mt-4 text-lg text-slate-600\">\n                    45\u6b73\u304b\u3089\u306e\u30ad\u30e3\u30ea\u30a2\u30d7\u30e9\u30f3\u306f\u3001\u30e9\u30a4\u30d5\u30d7\u30e9\u30f3\u3068\u5bc6\u63a5\u306b\u9023\u643a\u3057\u307e\u3059\u3002\u5c02\u9580\u5bb6\u306e\u8996\u70b9\u3092\u53d6\u308a\u5165\u308c\u3001\u3042\u306a\u305f\u306e\u30ad\u30e3\u30ea\u30a2\u3068\u30de\u30cd\u30fc\u306e\u672a\u6765\u3092\u4e00\u7dd2\u306b\u8a2d\u8a08\u3057\u307e\u305b\u3093\u304b\uff1f\n                <\/p>\n                <a href=\"https:\/\/sognoplanning.com\/?page_id=2752\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"mt-8 inline-block btn-primary px-10 py-4 rounded-full font-bold text-lg shadow-lg transform hover:scale-105\">\n                    \u30e9\u30a4\u30d5\u30d7\u30e9\u30f3\u76f8\u8ac7\u5ba4\u306b\u7533\u8fbc\u3080\n                <\/a>\n            <\/div>\n        <\/section>\n\n    <\/main>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Demand Chart\n            const demandCtx = document.getElementById('demandChart').getContext('2d');\n            new Chart(demandCtx, {\n                type: 'bar',\n                data: {\n                    labels: ['\u4e8b\u696d\u958b\u767a', '\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u7ba1\u7406', '\u7d44\u7e54\u30de\u30cd\u30b8\u30e1\u30f3\u30c8', 'DX\u63a8\u9032', '\u5c02\u9580\u6280\u8853'],\n                    datasets: [{\n                        label: '\u4f01\u696d\u304b\u3089\u306e\u9700\u8981\u30ec\u30d9\u30eb',\n                        data: [85, 95, 90, 80, 75],\n                        backgroundColor: 'rgba(30, 64, 175, 0.6)',\n                        borderColor: 'rgba(30, 64, 175, 1)',\n                        borderWidth: 1\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    indexAxis: 'y',\n                    scales: { x: { beginAtZero: true, max: 100 } },\n                    plugins: { legend: { display: false } }\n                }\n            });\n\n            \/\/ Tab functionality\n            const tabButtons = document.querySelectorAll('.tab-button');\n            const tabContents = document.querySelectorAll('.tab-content');\n            let prioritiesChart;\n\n            tabButtons.forEach(button => {\n                button.addEventListener('click', () => {\n                    tabButtons.forEach(btn => btn.classList.remove('active'));\n                    button.classList.add('active');\n                    const tabId = button.getAttribute('data-tab');\n                    tabContents.forEach(content => {\n                        content.classList.toggle('hidden', content.id !== tabId);\n                    });\n                    if (tabId === 'tab3' && !prioritiesChart) {\n                        initRadarChart();\n                    }\n                });\n            });\n\n            \/\/ AI Coach\n            const aiInput = document.getElementById('ai-input');\n            const prompt1Btn = document.getElementById('prompt1-btn');\n            const prompt2Btn = document.getElementById('prompt2-btn');\n            const aiOutputContainer = document.getElementById('ai-output-container');\n            const aiOutput = document.getElementById('ai-output');\n            const copyBtn = document.getElementById('copy-btn');\n\n            prompt1Btn.addEventListener('click', () => generatePrompt(1));\n            prompt2Btn.addEventListener('click', () => generatePrompt(2));\n            \n            function generatePrompt(type) {\n                const userText = aiInput.value.trim();\n                if (!userText) {\n                    alert('\u307e\u305a\u3001\u8077\u52d9\u7d4c\u6b74\u306e\u8981\u7d04\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n                    return;\n                }\n                let promptText = '';\n                if (type === 1) {\n                    promptText = `\u3042\u306a\u305f\u306f\u30c8\u30c3\u30d7\u30af\u30e9\u30b9\u306e\u30d8\u30c3\u30c9\u30cf\u30f3\u30bf\u30fc\u3067\u3059\u3002\u4ee5\u4e0b\u306e\u79c1\u306e\u7d4c\u6b74\u3092\u5206\u6790\u3057\u3001(1)\u5373\u6226\u529b\u3068\u306a\u308b\u3067\u3042\u308d\u3046\u30c8\u30c3\u30d73\u306e\u5c02\u9580\u30b9\u30ad\u30eb\u3001(2)\u30ea\u30fc\u30c0\u30fc\u30b7\u30c3\u30d7\u307e\u305f\u306f\u30de\u30cd\u30b8\u30e1\u30f3\u30c8\u306b\u304a\u3051\u308b\u79c1\u306e\u969b\u7acb\u3063\u305f\u80fd\u529b\u3001(3)\u73fe\u5728\u306e\u5e02\u5834\u3067\u7279\u306b\u9700\u8981\u304c\u9ad8\u3044\u3068\u8003\u3048\u3089\u308c\u308b\u30dd\u30fc\u30bf\u30d6\u30eb\u30b9\u30ad\u30eb\u3001\u3092\u5177\u4f53\u7684\u306b\u7279\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3055\u3089\u306b\u3001\u3053\u308c\u3089\u306e\u5f37\u307f\u3092\u6d3b\u304b\u305b\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u696d\u754c\u3084\u8077\u52d9\u30923\u3064\u63d0\u6848\u3057\u3066\u304f\u3060\u3055\u3044\u3002\\n\\n\u79c1\u306e\u7d4c\u6b74\uff1a\\n${userText}`;\n                } else {\n                    promptText = `\u3042\u306a\u305f\u306f\u30d7\u30ed\u306e\u7d4c\u55b6\u30b3\u30f3\u30b5\u30eb\u30bf\u30f3\u30c8\u3067\u3059\u3002\u4ee5\u4e0b\u306e\u79c1\u304c\u8a18\u8ff0\u3057\u305f\u30de\u30cd\u30b8\u30e1\u30f3\u30c8\u7d4c\u9a13\u3092\u3001\u3088\u308a\u7d4c\u55b6\u5c64\u306b\u97ff\u304f\u3001\u6226\u7565\u7684\u3067\u30a4\u30f3\u30d1\u30af\u30c8\u306e\u3042\u308b\u8868\u73fe\u306b\u66f8\u304d\u63db\u3048\u3066\u304f\u3060\u3055\u3044\u3002\u7279\u306b\u3001\u4e8b\u696d\u3078\u306e\u8ca2\u732e\u5ea6\u3084\u7d44\u7e54\u5909\u9769\u306e\u89b3\u70b9\u3092\u5f37\u8abf\u3057\u3066\u304f\u3060\u3055\u3044\u3002\\n\\n\u5143\u306e\u6587\u7ae0\uff1a\\n${userText}`;\n                }\n                aiOutput.textContent = promptText;\n                aiOutputContainer.classList.remove('hidden');\n            }\n\n            copyBtn.addEventListener('click', () => {\n                navigator.clipboard.writeText(aiOutput.textContent).then(() => {\n                    copyBtn.textContent = '\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\uff01';\n                    setTimeout(() => { copyBtn.textContent = '\u30b3\u30d4\u30fc'; }, 2000);\n                });\n            });\n\n            \/\/ Strategy Filter\n            const filterButtons = document.querySelectorAll('.strategy-filter');\n            const strategyCards = document.querySelectorAll('.strategy-card');\n            filterButtons.forEach(button => {\n                button.addEventListener('click', () => {\n                    filterButtons.forEach(btn => btn.classList.remove('active'));\n                    button.classList.add('active');\n                    const filter = button.dataset.filter;\n                    strategyCards.forEach(card => {\n                        const tags = JSON.parse(card.dataset.tags || '[]');\n                        card.style.display = (filter === 'all' || tags.includes(filter)) ? '' : 'none';\n                    });\n                });\n            });\n\n            \/\/ FAQ Accordion\n            const faqItems = document.querySelectorAll('.faq-item');\n            faqItems.forEach(item => {\n                const question = item.querySelector('.faq-question');\n                const answer = item.querySelector('.faq-answer');\n                const icon = question.querySelector('span:last-child');\n                question.addEventListener('click', () => {\n                    const isHidden = answer.classList.contains('hidden');\n                    answer.classList.toggle('hidden');\n                    icon.textContent = isHidden ? '-' : '+';\n                });\n            });\n            \n            \/\/ Radar Chart for Priorities\n            const sliders = document.querySelectorAll('#sliders-container input[type=\"range\"]');\n            \n            function getSliderValues() {\n                return Array.from(sliders).map(slider => slider.value);\n            }\n\n            function initRadarChart() {\n                const radarCtx = document.getElementById('prioritiesRadarChart').getContext('2d');\n                prioritiesChart = new Chart(radarCtx, {\n                    type: 'radar',\n                    data: {\n                        labels: ['\u5e74\u53ce\u30fb\u5f85\u9047', '\u30ef\u30fc\u30af\u30e9\u30a4\u30d5\u30d0\u30e9\u30f3\u30b9', '\u793e\u4f1a\u8ca2\u732e\u30fb\u3084\u308a\u304c\u3044', '\u88c1\u91cf\u30fb\u81ea\u5df1\u6210\u9577', '\u5c02\u9580\u6027\u306e\u767a\u63ee'],\n                        datasets: [{\n                            label: '\u512a\u5148\u5ea6',\n                            data: getSliderValues(),\n                            backgroundColor: 'rgba(30, 64, 175, 0.2)',\n                            borderColor: 'rgba(30, 64, 175, 1)',\n                            borderWidth: 2,\n                            pointBackgroundColor: 'rgba(30, 64, 175, 1)',\n                        }]\n                    },\n                    options: {\n                        responsive: true,\n                        maintainAspectRatio: false,\n                        scales: { r: { beginAtZero: true, max: 100, ticks: { stepSize: 25 } } },\n                        plugins: { legend: { display: false } }\n                    }\n                });\n            }\n\n            sliders.forEach(slider => {\n                slider.addEventListener('input', () => {\n                    if (prioritiesChart) {\n                        prioritiesChart.data.datasets[0].data = getSliderValues();\n                        prioritiesChart.update();\n                    }\n                });\n            });\n\n            \/\/ Smooth scrolling & active nav link\n            const navLinks = document.querySelectorAll('.nav-link');\n            const sections = document.querySelectorAll('section[id]');\n            \n            function onScroll() {\n                let current = '';\n                sections.forEach(section => {\n                    const sectionTop = section.offsetTop;\n                    if (pageYOffset >= sectionTop - 60) {\n                        current = section.getAttribute('id');\n                    }\n                });\n\n                navLinks.forEach(link => {\n                    link.classList.toggle('active', link.getAttribute('href').substring(1) === current);\n                });\n            }\n            \n            window.addEventListener('scroll', onScroll);\n            navLinks.forEach(link => {\n                link.addEventListener('click', e => {\n                    e.preventDefault();\n                    document.querySelector(link.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });\n                });\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u30ad\u30e3\u30ea\u30a2\u3092\u518d\u52a0\u901f\u3055\u305b\u308b\uff1a45\u6b73\u304b\u3089\u306e\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u8ee2\u8077\u30ac\u30a4\u30c9 \u5e02\u5834\u4fa1\u5024\u306e\u518d\u8a8d\u8b58 \u30ad\u30e3\u30ea\u30a2\u8cc7\u7523\u306e\u53ef\u8996\u5316 \u8ee2\u8077\u6226\u7565\u306e\u7acb\u6848 \u9078\u8003\u5bfe\u7b56\u306e\u5b9f\u8df5 \u30ad\u30e3\u30ea\u30a2\u306e\u5c90\u8def\u3092\u3001\u6700\u5927\u306e\u597d\u6a5f\u306b\u5909\u3048\u308b 45\u6b73\u304b\u3089\u306e\u30ad\u30e3\u30ea\u30a2\u306f\u505c\u6ede\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u6df1\u523b&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2789,"comment_status":"closed","ping_status":"open","sticky":false,"template":"single-full.php","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-2786","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-uncategorized","8":"article"},"_links":{"self":[{"href":"https:\/\/sognoplanning.com\/index.php?rest_route=\/wp\/v2\/posts\/2786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sognoplanning.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sognoplanning.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sognoplanning.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sognoplanning.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2786"}],"version-history":[{"count":3,"href":"https:\/\/sognoplanning.com\/index.php?rest_route=\/wp\/v2\/posts\/2786\/revisions"}],"predecessor-version":[{"id":2790,"href":"https:\/\/sognoplanning.com\/index.php?rest_route=\/wp\/v2\/posts\/2786\/revisions\/2790"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sognoplanning.com\/index.php?rest_route=\/wp\/v2\/media\/2789"}],"wp:attachment":[{"href":"https:\/\/sognoplanning.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sognoplanning.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sognoplanning.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}