{"id":665,"date":"2025-06-25T20:22:00","date_gmt":"2025-06-25T11:22:00","guid":{"rendered":"https:\/\/tamani-manabu.com\/?p=665"},"modified":"2025-06-25T20:38:35","modified_gmt":"2025-06-25T11:38:35","slug":"%e3%82%a8%e3%82%b7%e3%82%ab%e3%83%ab%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/tamani-manabu.com\/?p=665","title":{"rendered":"\u30a8\u30b7\u30ab\u30eb\uff1f"},"content":{"rendered":"\n<p>\u30a8\u30b7\u30ab\u30eb\uff1f<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\u30a8\u30b7\u30ab\u30eb\u6d88\u8cbb\u300c\u672a\u6765\u306e\u305f\u3081\u306b\u3067\u304d\u308b\u3061\u3087\u3063\u3068\u30a4\u30a4\u3053\u3068\u300d:\u6d88\u8cbb\u8005\u5e81\" width=\"1140\" height=\"641\" src=\"https:\/\/www.youtube.com\/embed\/8Oytz49rKNU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!-- \n  \u57cb\u3081\u8fbc\u307f\u624b\u9806:\n  1. \u4ee5\u4e0b\u306e<script>\u30bf\u30b0\u3068<link>\u30bf\u30b0\u3092\u3001\u57cb\u3081\u8fbc\u307f\u5148\u306eHTML\u30d5\u30a1\u30a4\u30eb\u306e<head>\u5185\u306b\u30b3\u30d4\u30fc\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n     (\u3059\u3067\u306b\u540c\u3058\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u308b\u5834\u5408\u306f\u4e0d\u8981\u3067\u3059)\n\n\n\n  2. \u3053\u306e\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\uff08<div id=\"ethical-explorer-app\"> \u304b\u3089 <\/div> \u307e\u3067\uff09\u3092\u3001\n     \u57cb\u3081\u8fbc\u307f\u305f\u3044\u5834\u6240\uff08\u901a\u5e38\u306f<body>\u30bf\u30b0\u5185\u306e\u4efb\u610f\u306e\u4f4d\u7f6e\uff09\u306b\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\u3002\n-->\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@300;400;700&#038;display=swap\" rel=\"stylesheet\">\n<!-- Chosen Palette: Earthy Harmony -->\n<!-- Application Structure Plan: \u3053\u306eSPA\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u3092\u300c\u7406\u89e3\u2192\u5171\u611f\u2192\u884c\u52d5\u2192\u63a2\u6c42\u300d\u3068\u3044\u3046\u81ea\u7136\u306a\u5b66\u7fd2\u30d5\u30ed\u30fc\u306b\u5c0e\u304f\u305f\u3081\u306b\u3001\u30c6\u30fc\u30de\u5225\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u69cb\u9020\u3092\u63a1\u7528\u3057\u3066\u3044\u307e\u3059\u30021.\u300c\u30a8\u30b7\u30ab\u30eb\u3068\u306f\uff1f\u300d\u3067\u57fa\u672c\u6982\u5ff5\u3092\u63d0\u793a\u3057\u30012.\u300c\u306a\u305c\u4eca\u3001\u30a8\u30b7\u30ab\u30eb\uff1f\u300d\u3067\u7d71\u8a08\u3068\u4e8b\u4f8b\uff08\u30e9\u30ca\u30fb\u30d7\u30e9\u30b6\uff09\u3092\u7528\u3044\u3066\u7dca\u6025\u6027\u3092\u8a34\u3048\u5171\u611f\u3092\u4fc3\u3057\u307e\u3059\u30023.\u300c\u79c1\u305f\u3061\u304c\u3067\u304d\u308b\u3053\u3068\u300d\u3067\u306f\u3001\u8863\u98df\u4f4f\u306e\u5177\u4f53\u7684\u306a\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30ab\u30fc\u30c9\u3067\u63d0\u793a\u3057\u3001\u884c\u52d5\u3092\u559a\u8d77\u30024.\u300c\u4fe1\u983c\u306e\u3057\u308b\u3057\u300d\u3067\u306f\u8a8d\u8a3c\u30e9\u30d9\u30eb\u3092\u30e2\u30fc\u30c0\u30eb\u3067\u89e3\u8aac\u3057\u3001\u5b9f\u8df5\u7684\u306a\u30c4\u30fc\u30eb\u3092\u63d0\u4f9b\u3002\u6700\u5f8c\u306b5.\u300c\u672a\u6765\u3078\u300d\u3067\u8ab2\u984c\u3068\u5c55\u671b\u3092\u793a\u3057\u307e\u3059\u3002\u3053\u306e\u69cb\u9020\u306f\u3001\u9759\u7684\u306a\u30ec\u30dd\u30fc\u30c8\u3092\u52d5\u7684\u306a\u5b66\u7fd2\u4f53\u9a13\u306b\u5909\u3048\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u60c5\u5831\u3092\u65ad\u7247\u7684\u306b\u6d88\u8cbb\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u4e00\u8cab\u3057\u305f\u30b9\u30c8\u30fc\u30ea\u30fc\u3068\u3057\u3066\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002 -->\n<!-- Visualization & Content Choices: 1. \u30a8\u30b7\u30ab\u30eb\u6d88\u8cbb\u306e\u8a8d\u77e5\u5ea6\u63a8\u79fb (\u60c5\u5831: 2016-2022\u5e74\u306e\u8a8d\u77e5\u5ea6\u30c7\u30fc\u30bf -> \u30b4\u30fc\u30eb: \u5909\u5316\u306e\u53ef\u8996\u5316 -> Viz: Chart.js\u306b\u3088\u308b\u6298\u308c\u7dda\u30b0\u30e9\u30d5 -> \u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3: \u30db\u30d0\u30fc\u3067\u8a73\u7d30\u8868\u793a -> \u7406\u7531: \u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u5909\u5316\u3092\u76f4\u611f\u7684\u306b\u793a\u3059\u306e\u306b\u6700\u9069)\u30022. \u5927\u91cf\u6d88\u8cbb\u306e\u554f\u984c (\u60c5\u5831: \u8863\u985e\u5ec3\u68c4\u91cf\u3001\u5150\u7ae5\u52b4\u50cd\u8005\u6570 -> \u30b4\u30fc\u30eb: \u554f\u984c\u306e\u30a4\u30f3\u30d1\u30af\u30c8\u3092\u4f1d\u3048\u308b -> Viz: HTML\/CSS\u306e\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30ab\u30fc\u30c9 -> \u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3: \u30db\u30d0\u30fc\u3067\u5f37\u8abf -> \u7406\u7531: \u8907\u96d1\u306a\u60c5\u5831\u3092\u30b7\u30f3\u30d7\u30eb\u3067\u8a18\u61b6\u306b\u6b8b\u308a\u3084\u3059\u3044\u8996\u899a\u8981\u7d20\u306b\u5909\u63db)\u30023. \u30a8\u30b7\u30ab\u30eb\u6d88\u8cbb\u306e\u5177\u4f53\u4f8b (\u60c5\u5831: \u8863\u98df\u4f4f\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u30ea\u30b9\u30c8 -> \u30b4\u30fc\u30eb: \u884c\u52d5\u9078\u629e\u80a2\u306e\u63d0\u793a -> Viz: HTML\/CSS\u306e\u30bf\u30d6\/\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u5f0f\u30ab\u30fc\u30c9 -> \u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3: \u30af\u30ea\u30c3\u30af\u3067\u8a73\u7d30\u5c55\u958b -> \u7406\u7531: \u60c5\u5831\u3092\u6574\u7406\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u95a2\u5fc3\u306e\u3042\u308b\u5206\u91ce\u3092\u80fd\u52d5\u7684\u306b\u6df1\u6398\u308a\u3067\u304d\u308b)\u30024. \u8a8d\u8a3c\u30e9\u30d9\u30eb\u30ac\u30a4\u30c9 (\u60c5\u5831: \u8a8d\u8a3c\u30e9\u30d9\u30eb\u306e\u30c6\u30fc\u30d6\u30eb -> \u30b4\u30fc\u30eb: \u5b9f\u7528\u7684\u306a\u53c2\u7167\u30c4\u30fc\u30eb\u63d0\u4f9b -> Viz: HTML\/CSS\u306e\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8+\u30e2\u30fc\u30c0\u30eb -> \u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3: \u30af\u30ea\u30c3\u30af\u3067\u8a73\u7d30\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 -> \u7406\u7531: \u5927\u91cf\u306e\u60c5\u5831\u3092\u30b3\u30f3\u30d1\u30af\u30c8\u306b\u8868\u793a\u3057\u3001\u5fc5\u8981\u306a\u60c5\u5831\u3078\u5373\u5ea7\u306b\u30a2\u30af\u30bb\u30b9\u53ef\u80fd\u306b\u3059\u308b)\u3002 -->\n<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n<style>\n    \/* \u30b9\u30bf\u30a4\u30eb\u304c\u4ed6\u306e\u8981\u7d20\u306b\u5f71\u97ff\u3057\u306a\u3044\u3088\u3046\u306b\u3001\u5168\u3066\u306e\u30bb\u30ec\u30af\u30bf\u306bID\u30b9\u30b3\u30fc\u30d7\u3092\u9069\u7528 *\/\n    #ethical-explorer-app {\n        font-family: 'Noto Sans JP', sans-serif;\n        background-color: #FDFBF8;\n        color: #4B4B4B;\n    }\n    #ethical-explorer-app .bg-primary { background-color: #FDFBF8; }\n    #ethical-explorer-app .bg-secondary { background-color: #F4F1ED; }\n    #ethical-explorer-app .bg-accent { background-color: #8D9B87; }\n    #ethical-explorer-app .text-accent { color: #8D9B87; }\n    #ethical-explorer-app .border-accent { border-color: #8D9B87; }\n    #ethical-explorer-app .btn-primary {\n        background-color: #8D9B87;\n        color: #FFFFFF;\n        transition: background-color 0.3s ease;\n    }\n    #ethical-explorer-app .btn-primary:hover {\n        background-color: #717d6d;\n    }\n    #ethical-explorer-app .nav-link {\n        position: relative;\n        transition: color 0.3s ease;\n        color: #4B4B4B;\n    }\n    #ethical-explorer-app .nav-link:hover {\n        color: #8D9B87;\n    }\n    #ethical-explorer-app .nav-link::after {\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 2px;\n        bottom: -4px;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: #8D9B87;\n        transition: width 0.3s ease;\n    }\n    #ethical-explorer-app .nav-link:hover::after {\n        width: 100%;\n    }\n    #ethical-explorer-app .section-fade-in {\n        opacity: 0;\n        transform: translateY(20px);\n        transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n    }\n    #ethical-explorer-app .section-fade-in.visible {\n        opacity: 1;\n        transform: translateY(0);\n    }\n    #ethical-explorer-app .modal-backdrop {\n        display: none;\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgba(0,0,0,0.5);\n        z-index: 40;\n        opacity: 0;\n        transition: opacity 0.3s ease;\n    }\n    #ethical-explorer-app .modal-content {\n        display: none;\n        position: fixed;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        z-index: 50;\n        opacity: 0;\n        transition: opacity 0.3s ease, transform 0.3s ease;\n    }\n    #ethical-explorer-app .modal-backdrop.show, #ethical-explorer-app .modal-content.show {\n        display: block;\n        opacity: 1;\n    }\n    #ethical-explorer-app .action-card {\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n    }\n    #ethical-explorer-app .action-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    }\n    #ethical-explorer-app .chart-container {\n        position: relative;\n        width: 100%;\n        max-width: 700px;\n        margin-left: auto;\n        margin-right: auto;\n        height: 300px;\n        max-height: 400px;\n    }\n    @media (min-width: 768px) {\n        #ethical-explorer-app .chart-container {\n            height: 400px;\n        }\n    }\n<\/style>\n\n<div id=\"ethical-explorer-app\">\n    <header class=\"bg-primary sticky top-0 z-30 shadow-sm\">\n        <nav class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n            <div class=\"text-2xl font-bold text-accent\">Ethical Explorer<\/div>\n            <div class=\"hidden md:flex space-x-8\">\n                <a href=\"#what-is-ethical\" class=\"nav-link font-medium\">\u30a8\u30b7\u30ab\u30eb\u3068\u306f\uff1f<\/a>\n                <a href=\"#why-now\" class=\"nav-link font-medium\">\u306a\u305c\u4eca\uff1f<\/a>\n                <a href=\"#what-we-can-do\" class=\"nav-link font-medium\">\u79c1\u305f\u3061\u304c\u3067\u304d\u308b\u3053\u3068<\/a>\n                <a href=\"#labels\" class=\"nav-link font-medium\">\u4fe1\u983c\u306e\u3057\u308b\u3057<\/a>\n                <a href=\"#future\" class=\"nav-link font-medium\">\u672a\u6765\u3078<\/a>\n            <\/div>\n            <div class=\"md:hidden\">\n                <button id=\"mobile-menu-button\" class=\"text-gray-700 focus:outline-none\">\n                    <svg class=\"w-6 h-6\" 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=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\n                <\/button>\n            <\/div>\n        <\/nav>\n        <div id=\"mobile-menu\" class=\"hidden md:hidden bg-white py-2\">\n            <a href=\"#what-is-ethical\" class=\"block text-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\">\u30a8\u30b7\u30ab\u30eb\u3068\u306f\uff1f<\/a>\n            <a href=\"#why-now\" class=\"block text-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\">\u306a\u305c\u4eca\uff1f<\/a>\n            <a href=\"#what-we-can-do\" class=\"block text-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\">\u79c1\u305f\u3061\u304c\u3067\u304d\u308b\u3053\u3068<\/a>\n            <a href=\"#labels\" class=\"block text-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\">\u4fe1\u983c\u306e\u3057\u308b\u3057<\/a>\n            <a href=\"#future\" class=\"block text-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\">\u672a\u6765\u3078<\/a>\n        <\/div>\n    <\/header>\n\n    <main>\n        <section id=\"hero\" class=\"bg-secondary\">\n            <div class=\"container mx-auto px-6 py-20 md:py-32 text-center\">\n                <h1 class=\"text-4xl md:text-6xl font-bold text-gray-800 mb-4\">\u30a8\u30b7\u30ab\u30eb\u3092\u306f\u3058\u3081\u3088\u3046\u3002<\/h1>\n                <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\u305d\u308c\u306f\u3001\u4eba\u3001\u793e\u4f1a\u3001\u5730\u7403\u3001\u305d\u3057\u3066\u672a\u6765\u3078\u306e\u601d\u3044\u3084\u308a\u3002\u3042\u306a\u305f\u306e\u9078\u629e\u304c\u3001\u4e16\u754c\u3092\u5909\u3048\u308b\u529b\u306b\u306a\u308b\u3002<\/p>\n            <\/div>\n        <\/section>\n\n        <section id=\"what-is-ethical\" class=\"py-16 md:py-24 section-fade-in\">\n            <div class=\"container mx-auto px-6\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold text-gray-800\">\u30a8\u30b7\u30ab\u30eb\u3068\u306f\uff1f<\/h2>\n                    <p class=\"mt-4 text-gray-600 max-w-2xl mx-auto\">\u300c\u502b\u7406\u7684\u306a\u300d\u3068\u3044\u3046\u610f\u5473\u3092\u6301\u3064\u30a8\u30b7\u30ab\u30eb\u306f\u3001\u5358\u306a\u308b\u8a00\u8449\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u305d\u308c\u306f\u3001\u79c1\u305f\u3061\u306e\u884c\u52d5\u3084\u8003\u3048\u65b9\u306e\u6307\u91dd\u3067\u3059\u3002\u6cd5\u5f8b\u3067\u6c7a\u3081\u3089\u308c\u3066\u3044\u306a\u304f\u3066\u3082\u3001\u8ab0\u3082\u304c\u6b63\u3057\u3044\u3068\u601d\u3048\u308b\u3053\u3068\u306b\u57fa\u3065\u3044\u3066\u884c\u52d5\u3059\u308b\u3053\u3068\u3002\u305d\u308c\u304c\u30a8\u30b7\u30ab\u30eb\u306e\u7b2c\u4e00\u6b69\u3067\u3059\u3002<\/p>\n                <\/div>\n                <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8 text-center\">\n                    <div class=\"bg-white p-8 rounded-lg shadow-sm\">\n                        <div class=\"text-4xl mb-4\">\ud83d\udc65<\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\u4eba\u3078\u306e\u914d\u616e<\/h3>\n                        <p class=\"text-gray-600\">\u88fd\u54c1\u3084\u30b5\u30fc\u30d3\u30b9\u306e\u88cf\u5074\u3067\u50cd\u304f\u4eba\u3005\u306e\u4eba\u6a29\u3084\u52b4\u50cd\u74b0\u5883\u3092\u8003\u3048\u308b\u3053\u3068\u3002<\/p>\n                    <\/div>\n                    <div class=\"bg-white p-8 rounded-lg shadow-sm\">\n                        <div class=\"text-4xl mb-4\">\ud83c\udf0d<\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\u5730\u7403\u74b0\u5883\u3078\u306e\u914d\u616e<\/h3>\n                        <p class=\"text-gray-600\">\u5730\u7403\u306e\u8cc7\u6e90\u3092\u5b88\u308a\u3001\u74b0\u5883\u3078\u306e\u8ca0\u8377\u3092\u6e1b\u3089\u3059\u9078\u629e\u3092\u3059\u308b\u3053\u3068\u3002<\/p>\n                    <\/div>\n                    <div class=\"bg-white p-8 rounded-lg shadow-sm\">\n                        <div class=\"text-4xl mb-4\">\ud83c\udfd8\ufe0f<\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\u5730\u57df\u3078\u306e\u914d\u616e<\/h3>\n                        <p class=\"text-gray-600\">\u81ea\u5206\u306e\u4f4f\u3080\u5730\u57df\u306e\u7523\u696d\u3084\u6587\u5316\u3092\u5fdc\u63f4\u3057\u3001\u6d3b\u6027\u5316\u306b\u8ca2\u732e\u3059\u308b\u3053\u3068\u3002<\/p>\n                    <\/div>\n                    <div class=\"bg-white p-8 rounded-lg shadow-sm\">\n                        <div class=\"text-4xl mb-4\">\ud83e\udd1d<\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\u793e\u4f1a\u3078\u306e\u914d\u616e<\/h3>\n                        <p class=\"text-gray-600\">\u793e\u4f1a\u304c\u62b1\u3048\u308b\u8ab2\u984c\u306e\u89e3\u6c7a\u306b\u3064\u306a\u304c\u308b\u3088\u3046\u306a\u6d88\u8cbb\u3084\u884c\u52d5\u3092\u3059\u308b\u3053\u3068\u3002<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"why-now\" class=\"py-16 md:py-24 bg-secondary section-fade-in\">\n            <div class=\"container mx-auto px-6\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold text-gray-800\">\u306a\u305c\u4eca\u3001\u30a8\u30b7\u30ab\u30eb\u304c\u91cd\u8981\u306a\u306e\u304b\uff1f<\/h2>\n                    <p class=\"mt-4 text-gray-600 max-w-2xl mx-auto\">\u79c1\u305f\u3061\u306e\u4fbf\u5229\u306a\u751f\u6d3b\u306e\u88cf\u5074\u3067\u3001\u5730\u7403\u3068\u793e\u4f1a\u306f\u9759\u304b\u306b\u60b2\u9cf4\u3092\u3042\u3052\u3066\u3044\u307e\u3059\u3002\u898b\u3066\u898b\u306c\u3075\u308a\u306f\u3001\u3082\u3046\u3067\u304d\u307e\u305b\u3093\u3002\u30a8\u30b7\u30ab\u30eb\u306a\u8996\u70b9\u306f\u3001\u3053\u308c\u3089\u306e\u554f\u984c\u306b\u7acb\u3061\u5411\u304b\u3046\u305f\u3081\u306e\u7f85\u91dd\u76e4\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n                <\/div>\n                <div class=\"grid md:grid-cols-2 gap-8 mb-12\">\n                    <div class=\"bg-white p-8 rounded-lg shadow-lg text-center\">\n                        <h3 class=\"text-2xl font-bold text-red-500 mb-2\">\u5e74\u9593\u7d0448\u4e07\u30c8\u30f3\u306e\u8863\u985e\u5ec3\u68c4<\/h3>\n                        <p class=\"text-gray-600 mb-4\">\u65e5\u672c\u3067\u306f\u3001\u6bce\u65e5\u5927\u578b\u30c8\u30e9\u30c3\u30af\u7d04130\u53f0\u5206\u3082\u306e\u307e\u3060\u7740\u3089\u308c\u308b\u670d\u304c\u6368\u3066\u3089\u308c\u3066\u3044\u307e\u3059\u3002\u5927\u91cf\u751f\u7523\u30fb\u5927\u91cf\u6d88\u8cbb\u306e\u30b5\u30a4\u30af\u30eb\u306e\u898b\u76f4\u3057\u304c\u6025\u52d9\u3067\u3059\u3002<\/p>\n                        <div class=\"text-6xl\">\ud83d\udc55<\/div>\n                    <\/div>\n                    <div class=\"bg-white p-8 rounded-lg shadow-lg text-center\">\n                        <h3 class=\"text-2xl font-bold text-blue-500 mb-2\">\u7d041\u51046\u5343\u4e07\u4eba\u306e\u5150\u7ae5\u52b4\u50cd<\/h3>\n                        <p class=\"text-gray-600 mb-4\">\u4e16\u754c\u3067\u306f\u3001\u6559\u80b2\u306e\u6a5f\u4f1a\u3092\u596a\u308f\u308c\u3001\u50cd\u304f\u3053\u3068\u3092\u5f37\u3044\u3089\u308c\u3066\u3044\u308b\u5b50\u3069\u3082\u305f\u3061\u304c\u3044\u307e\u3059\u3002\u5b89\u3055\u306e\u80cc\u666f\u306b\u3042\u308b\u4eba\u6a29\u554f\u984c\u3092\u76f4\u8996\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n                        <div class=\"text-6xl\">\ud83e\udd32<\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"bg-white rounded-lg shadow-lg p-8 section-fade-in\">\n                    <h3 class=\"text-2xl font-bold text-center mb-6\">\u8ee2\u63db\u70b9\uff1a\u30e9\u30ca\u30fb\u30d7\u30e9\u30b6\u306e\u60b2\u5287<\/h3>\n                    <div class=\"md:flex md:items-center\">\n                        <div class=\"md:w-1\/2 md:pr-8\">\n                             <p class=\"text-gray-700 leading-relaxed\">2013\u5e74\u3001\u30d0\u30f3\u30b0\u30e9\u30c7\u30b7\u30e5\u306e\u7e2b\u88fd\u5de5\u5834\u30d3\u30eb\u300c\u30e9\u30ca\u30fb\u30d7\u30e9\u30b6\u300d\u304c\u5d29\u843d\u3057\u30011,100\u4eba\u4ee5\u4e0a\u304c\u72a0\u7272\u3068\u306a\u308a\u307e\u3057\u305f\u3002\u3053\u306e\u4e8b\u6545\u306f\u3001\u79c1\u305f\u3061\u304c\u7740\u308b\u5b89\u4fa1\u306a\u670d\u306e\u88cf\u306b\u96a0\u3055\u308c\u305f\u3001\u975e\u4eba\u9053\u7684\u3067\u5371\u967a\u306a\u52b4\u50cd\u74b0\u5883\u3092\u4e16\u754c\u306b\u77e5\u3089\u3057\u3081\u307e\u3057\u305f\u3002<\/p>\n                             <p class=\"text-gray-700 leading-relaxed mt-4\">\u79c1\u305f\u3061\u306e\u8cfc\u8cb7\u884c\u52d5\u304c\u3001\u9060\u3044\u56fd\u306e\u8ab0\u304b\u306e\u547d\u3068\u7e4b\u304c\u3063\u3066\u3044\u308b\u3002\u3053\u306e\u75db\u307e\u3057\u3044\u73fe\u5b9f\u306f\u3001\u6d88\u8cbb\u8005\u304c\u300c\u5b89\u3055\u300d\u4ee5\u5916\u306e\u4fa1\u5024\u57fa\u6e96\u3092\u6301\u3064\u304d\u3063\u304b\u3051\u3068\u306a\u308a\u3001\u4e16\u754c\u7684\u306a\u30a8\u30b7\u30ab\u30eb\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\u30e0\u30fc\u30d6\u30e1\u30f3\u30c8\u3092\u52a0\u901f\u3055\u305b\u308b\u6b74\u53f2\u7684\u306a\u8ee2\u63db\u70b9\u3068\u306a\u3063\u305f\u306e\u3067\u3059\u3002<\/p>\n                        <\/div>\n                        <div class=\"md:w-1\/2 mt-8 md:mt-0\">\n                             <div class=\"chart-container\">\n                                <canvas id=\"awarenessChart\"><\/canvas>\n                             <\/div>\n                             <p class=\"text-center text-sm text-gray-500 mt-2\">\u65e5\u672c\u306b\u304a\u3051\u308b\u300c\u30a8\u30b7\u30ab\u30eb\u6d88\u8cbb\u300d\u306e\u8a8d\u77e5\u5ea6\u63a8\u79fb<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"what-we-can-do\" class=\"py-16 md:py-24 section-fade-in\">\n            <div class=\"container mx-auto px-6\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold text-gray-800\">\u79c1\u305f\u3061\u304c\u3067\u304d\u308b\u3053\u3068<\/h2>\n                    <p class=\"mt-4 text-gray-600 max-w-2xl mx-auto\">\u30a8\u30b7\u30ab\u30eb\u306f\u3001\u7279\u5225\u306a\u3053\u3068\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u65e5\u3005\u306e\u66ae\u3089\u3057\u306e\u4e2d\u306b\u3042\u308b\u5c0f\u3055\u306a\u9078\u629e\u306e\u7a4d\u307f\u91cd\u306d\u3067\u3059\u3002\u300c\u8863\u30fb\u98df\u30fb\u4f4f\u300d\u306e\u5834\u9762\u3067\u3001\u3042\u306a\u305f\u306b\u3067\u304d\u308b\u3053\u3068\u3092\u898b\u3064\u3051\u3066\u307f\u307e\u305b\u3093\u304b\uff1f<\/p>\n                <\/div>\n\n                <div class=\"grid md:grid-cols-3 gap-8\">\n                    <div class=\"action-card bg-white rounded-lg shadow-lg p-6 text-center cursor-pointer\" data-action=\"food\">\n                        <div class=\"text-5xl mb-4\">\ud83e\udd57<\/div>\n                        <h3 class=\"text-2xl font-bold mb-2\">\u98df<\/h3>\n                        <p class=\"text-gray-600\">\u98df\u3079\u308b\u3053\u3068\u306f\u3001\u751f\u304d\u308b\u3053\u3068\u3002\u98df\u6750\u306e\u9078\u3073\u65b9\u4e00\u3064\u3067\u3001\u74b0\u5883\u3084\u751f\u7523\u8005\u3092\u5fdc\u63f4\u3067\u304d\u307e\u3059\u3002<\/p>\n                    <\/div>\n                    <div class=\"action-card bg-white rounded-lg shadow-lg p-6 text-center cursor-pointer\" data-action=\"clothing\">\n                        <div class=\"text-5xl mb-4\">\ud83d\udc5a<\/div>\n                        <h3 class=\"text-2xl font-bold mb-2\">\u8863<\/h3>\n                        <p class=\"text-gray-600\">\u4e00\u7740\u306e\u670d\u306b\u8fbc\u3081\u3089\u308c\u305f\u7269\u8a9e\u3092\u77e5\u308b\u3053\u3068\u3067\u3001\u304a\u3057\u3083\u308c\u306f\u3082\u3063\u3068\u697d\u3057\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n                    <\/div>\n                    <div class=\"action-card bg-white rounded-lg shadow-lg p-6 text-center cursor-pointer\" data-action=\"lifestyle\">\n                        <div class=\"text-5xl mb-4\">\ud83c\udfe1<\/div>\n                        <h3 class=\"text-2xl font-bold mb-2\">\u4f4f\u30fb\u66ae\u3089\u3057<\/h3>\n                        <p class=\"text-gray-600\">\u6bce\u65e5\u4f7f\u3046\u3082\u306e\u3060\u304b\u3089\u3053\u305d\u3002\u74b0\u5883\u3084\u793e\u4f1a\u306b\u3084\u3055\u3057\u3044\u9078\u629e\u3092\u3002<\/p>\n                    <\/div>\n                <\/div>\n\n                <div id=\"action-details\" class=\"mt-12\"><\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"labels\" class=\"py-16 md:py-24 bg-secondary section-fade-in\">\n            <div class=\"container mx-auto px-6\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold text-gray-800\">\u4fe1\u983c\u306e\u3057\u308b\u3057\uff1a\u8a8d\u8a3c\u30e9\u30d9\u30eb<\/h2>\n                    <p class=\"mt-4 text-gray-600 max-w-2xl mx-auto\">\u8907\u96d1\u306a\u793e\u4f1a\u3067\u3001\u4e00\u3064\u4e00\u3064\u306e\u88fd\u54c1\u306e\u80cc\u666f\u3092\u8abf\u3079\u308b\u306e\u306f\u5927\u5909\u3067\u3059\u3002\u305d\u3093\u306a\u6642\u3001\u7b2c\u4e09\u8005\u6a5f\u95a2\u306b\u3088\u308b\u300c\u8a8d\u8a3c\u30e9\u30d9\u30eb\u300d\u306f\u3001\u79c1\u305f\u3061\u306e\u8ce2\u3044\u9078\u629e\u3092\u52a9\u3051\u3066\u304f\u308c\u308b\u4fe1\u983c\u306e\u76ee\u5370\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n                <\/div>\n                <div id=\"label-grid\" class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6 md:gap-8\">\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"future\" class=\"py-16 md:py-24 section-fade-in\">\n            <div class=\"container mx-auto px-6 text-center\">\n                 <h2 class=\"text-3xl md:text-4xl font-bold text-gray-800 mb-6\">\u30a8\u30b7\u30ab\u30eb\u306a\u672a\u6765\u3078<\/h2>\n                <div class=\"max-w-3xl mx-auto text-left bg-white p-8 rounded-lg shadow-lg\">\n                    <h3 class=\"text-xl font-bold mb-4 text-accent\">\u8ab2\u984c\u3068\u5e0c\u671b<\/h3>\n                    <p class=\"text-gray-700 mb-4\">\u30a8\u30b7\u30ab\u30eb\u306a\u88fd\u54c1\u306f\u4fa1\u683c\u304c\u9ad8\u3044\uff08\u30b0\u30ea\u30fc\u30f3\u30d7\u30ec\u30df\u30a2\u30e0\uff09\u3001\u60c5\u5831\u304c\u5206\u304b\u308a\u306b\u304f\u3044\u3001\u3069\u3053\u3067\u8cb7\u3048\u308b\u304b\u5206\u304b\u3089\u306a\u3044\u3001\u3068\u3044\u3063\u305f\u8ab2\u984c\u306f\u78ba\u304b\u306b\u5b58\u5728\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u300c\u5b8c\u74a7\u306b\u3057\u306a\u304d\u3083\u300d\u3068\u75b2\u308c\u3066\u3057\u307e\u3046\u300cSDGs\u75b2\u308c\u300d\u3092\u611f\u3058\u308b\u4eba\u3082\u3044\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n                    <p class=\"text-gray-700 mb-4\">\u3057\u304b\u3057\u3001\u5b8c\u74a7\u3067\u306a\u304f\u3066\u3082\u5927\u4e08\u592b\u3002\u300c\u3068\u304d\u3069\u304d\u30a8\u30b7\u30ab\u30eb\u300d\u3067\u3082\u3001\u305d\u306e\u4e00\u6b69\u304c\u5927\u5207\u3067\u3059\u3002\u30d6\u30ed\u30c3\u30af\u30c1\u30a7\u30fc\u30f3\u306e\u3088\u3046\u306a\u65b0\u6280\u8853\u304c\u751f\u7523\u306e\u900f\u660e\u6027\u3092\u9ad8\u3081\u3001\u4f01\u696d\u306e\u52aa\u529b\u3084\u653f\u5e9c\u306e\u652f\u63f4\u304c\u3001\u30a8\u30b7\u30ab\u30eb\u306a\u9078\u629e\u3092\u3088\u308a\u8eab\u8fd1\u306a\u3082\u306e\u306b\u3057\u3066\u3044\u304f\u3067\u3057\u3087\u3046\u3002<\/p>\n                    <p class=\"text-gray-700 font-semibold\">\u3042\u306a\u305f\u306e\u5c0f\u3055\u306a\u9078\u629e\u304c\u3001\u4f01\u696d\u3092\u52d5\u304b\u3057\u3001\u793e\u4f1a\u3092\u5909\u3048\u3001\u3088\u308a\u516c\u6b63\u3067\u6301\u7d9a\u53ef\u80fd\u306a\u672a\u6765\u3092\u3064\u304f\u308b\u5927\u304d\u306a\u529b\u306b\u306a\u308a\u307e\u3059\u3002\u3055\u3042\u3001\u3042\u306a\u305f\u3089\u3057\u3044\u4e00\u6b69\u3092\u8e0f\u307f\u51fa\u3057\u3066\u307f\u307e\u305b\u3093\u304b\uff1f<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <footer class=\"bg-gray-800 text-white py-8\">\n        <div class=\"container mx-auto px-6 text-center\">\n            <p>Ethical Explorer<\/p>\n            <p class=\"text-sm text-gray-400 mt-2\">\u3053\u306e\u30da\u30fc\u30b8\u306f\u63d0\u4f9b\u3055\u308c\u305f\u30ec\u30dd\u30fc\u30c8\u306b\u57fa\u3065\u304d\u3001\u6559\u80b2\u76ee\u7684\u3067\u751f\u6210\u3055\u308c\u305f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n        <\/div>\n    <\/footer>\n\n    <div id=\"modal-backdrop\" class=\"modal-backdrop\"><\/div>\n    <div id=\"modal-content\" class=\"modal-content bg-white w-11\/12 md:max-w-2xl rounded-lg shadow-xl p-6 md:p-8\">\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ JS\u306e\u30b9\u30b3\u30fc\u30d7\u3092\u9650\u5b9a\u3059\u308b\u305f\u3081\u306b\u3001\u5373\u6642\u5b9f\u884c\u95a2\u6570\u3067\u56f2\u3080\n    (() => {\n        const initEthicalExplorer = () => {\n            const appContainer = document.getElementById('ethical-explorer-app');\n            if (!appContainer) return;\n\n            const mobileMenuButton = appContainer.querySelector('#mobile-menu-button');\n            const mobileMenu = appContainer.querySelector('#mobile-menu');\n            \n            if(mobileMenuButton) {\n                mobileMenuButton.addEventListener('click', () => {\n                    if(mobileMenu) mobileMenu.classList.toggle('hidden');\n                });\n            }\n\n            appContainer.querySelectorAll('#mobile-menu a').forEach(link => {\n                link.addEventListener('click', () => {\n                    if(mobileMenu) mobileMenu.classList.add('hidden');\n                });\n            });\n\n            const actionData = {\n                food: {\n                    title: '\ud83e\udd57 \u98df\u306b\u95a2\u3059\u308b\u30a2\u30af\u30b7\u30e7\u30f3',\n                    items: [\n                        '**\u98df\u54c1\u30ed\u30b9\u524a\u6e1b**: \u8cb7\u3044\u7269\u524d\u306b\u51b7\u8535\u5eab\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3001\u5fc5\u8981\u306a\u5206\u3060\u3051\u8cfc\u5165\u3002\u300c\u3066\u307e\u3048\u3069\u308a\u300d\u3092\u5fc3\u304c\u3051\u308b\u3002',\n                        '**\u5730\u7523\u5730\u6d88**: \u5730\u5143\u306e\u8fb2\u7523\u7269\u3092\u8cb7\u3046\u3053\u3068\u3067\u3001\u8f38\u9001\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u524a\u6e1b\u3057\u3001\u5730\u57df\u7d4c\u6e08\u3092\u5fdc\u63f4\u3059\u308b\u3002',\n                        '**\u30aa\u30fc\u30ac\u30cb\u30c3\u30af\u3092\u9078\u3076**: \u8fb2\u85ac\u3084\u5316\u5b66\u80a5\u6599\u3092\u6291\u3048\u305f\u8fb2\u7523\u7269\u306f\u3001\u751f\u7523\u8005\u3068\u74b0\u5883\u306e\u5065\u5eb7\u3092\u5b88\u308b\u3002',\n                        '**\u30d5\u30a7\u30a2\u30c8\u30ec\u30fc\u30c9\u88fd\u54c1**: \u30b3\u30fc\u30d2\u30fc\u3084\u30c1\u30e7\u30b3\u3067\u3001\u958b\u767a\u9014\u4e0a\u56fd\u306e\u751f\u7523\u8005\u306b\u516c\u6b63\u306a\u5bfe\u4fa1\u3092\u3002',\n                        '**\u5fdc\u63f4\u6d88\u8cbb**: \u88ab\u707d\u5730\u3084\u56f0\u3063\u3066\u3044\u308b\u4e8b\u696d\u8005\u306e\u7523\u54c1\u3092\u8cfc\u5165\u3057\u3001\u5fa9\u8208\u3092\u652f\u63f4\u3059\u308b\u3002',\n                        '**\u30a2\u30cb\u30de\u30eb\u30a6\u30a7\u30eb\u30d5\u30a7\u30a2**: \u52d5\u7269\u305f\u3061\u304c\u5065\u5eb7\u3067\u30b9\u30c8\u30ec\u30b9\u306a\u304f\u80b2\u3063\u305f\u74b0\u5883\u306e\u755c\u7523\u7269\u3092\u9078\u3076\u3002',\n                    ]\n                },\n                clothing: {\n                    title: '\ud83d\udc5a \u8863\u306b\u95a2\u3059\u308b\u30a2\u30af\u30b7\u30e7\u30f3',\n                    items: [\n                        '**\u7d20\u6750\u3067\u9078\u3076**: \u30aa\u30fc\u30ac\u30cb\u30c3\u30af\u30b3\u30c3\u30c8\u30f3\u3084\u30ea\u30b5\u30a4\u30af\u30eb\u7d20\u6750\u306a\u3069\u3001\u74b0\u5883\u8ca0\u8377\u306e\u5c11\u306a\u3044\u670d\u3092\u9078\u3076\u3002',\n                        '**\u9577\u304f\u5927\u5207\u306b\u7740\u308b**: \u6d41\u884c\u306b\u6d41\u3055\u308c\u305a\u3001\u8cea\u306e\u826f\u3044\u670d\u3092\u9078\u3073\u3001\u4fee\u7406\u3057\u306a\u304c\u3089\u4f7f\u3046\u3002',\n                        '**\u53e4\u7740\u3084\u30ec\u30f3\u30bf\u30eb\u3092\u6d3b\u7528**: \u65b0\u3057\u3044\u3082\u306e\u3092\u8cb7\u3046\u3060\u3051\u3067\u306a\u304f\u3001\u5faa\u74b0\u3055\u305b\u308b\u9078\u629e\u80a2\u3092\u6301\u3064\u3002',\n                        '**\u30a2\u30cb\u30de\u30eb\u30d5\u30ea\u30fc**: \u30ea\u30a2\u30eb\u30d5\u30a1\u30fc\u3092\u907f\u3051\u3001\u52d5\u7269\u5b9f\u9a13\u3092\u884c\u308f\u306a\u3044\u88fd\u54c1\u3092\u9078\u3076\u3002',\n                        '**\u80cc\u666f\u3092\u77e5\u308b**: \u52b4\u50cd\u8005\u306e\u6a29\u5229\u3092\u5b88\u3063\u3066\u3044\u308b\u900f\u660e\u6027\u306e\u9ad8\u3044\u30d6\u30e9\u30f3\u30c9\u3092\u652f\u6301\u3059\u308b\u3002',\n                    ]\n                },\n                lifestyle: {\n                    title: '\ud83c\udfe1 \u4f4f\u30fb\u66ae\u3089\u3057\u306b\u95a2\u3059\u308b\u30a2\u30af\u30b7\u30e7\u30f3',\n                    items: [\n                        '**\u7701\u30a8\u30cd\u3092\u5fc3\u304c\u3051\u308b**: LED\u96fb\u7403\u3084\u7701\u30a8\u30cd\u5bb6\u96fb\u3092\u9078\u3073\u3001\u3053\u307e\u3081\u306b\u7bc0\u96fb\u30fb\u7bc0\u6c34\u3059\u308b\u3002',\n                        '**\u518d\u751f\u53ef\u80fd\u30a8\u30cd\u30eb\u30ae\u30fc**: \u518d\u30a8\u30cd\u3092\u4f9b\u7d66\u3059\u308b\u96fb\u529b\u4f1a\u793e\u3078\u306e\u5207\u308a\u66ff\u3048\u3092\u691c\u8a0e\u3059\u308b\u3002',\n                        '**\u8131\u30d7\u30e9\u30b9\u30c1\u30c3\u30af**: \u30de\u30a4\u30d0\u30c3\u30b0\u30fb\u30de\u30a4\u30dc\u30c8\u30eb\u3092\u6301\u3061\u6b69\u304d\u3001\u4f7f\u3044\u6368\u3066\u3092\u6e1b\u3089\u3059\u3002',\n                        '**\u793e\u4f1a\u7684\u4f01\u696d\u3092\u5fdc\u63f4**: \u969c\u304c\u3044\u3092\u6301\u3064\u4eba\u3005\u304c\u4f5c\u3063\u305f\u88fd\u54c1\u306a\u3069\u3092\u8cfc\u5165\u3057\u3001\u81ea\u7acb\u3092\u652f\u63f4\u3059\u308b\u3002',\n                        '**\u4f1d\u7d71\u5de5\u82b8\u54c1\u3092\u611b\u7528**: \u65e5\u672c\u306e\u8cb4\u91cd\u306a\u6587\u5316\u3084\u6280\u8853\u306e\u7d99\u627f\u3092\u652f\u3048\u308b\u3002',\n                        '**\u5bc4\u4ed8\u3064\u304d\u5546\u54c1**: \u8cb7\u3044\u7269\u3092\u3057\u306a\u304c\u3089\u3001\u793e\u4f1a\u8ca2\u732e\u6d3b\u52d5\u306b\u53c2\u52a0\u3059\u308b\u3002',\n                    ]\n                }\n            };\n            \n            const actionCards = appContainer.querySelectorAll('.action-card');\n            const actionDetailsContainer = appContainer.querySelector('#action-details');\n\n            actionCards.forEach(card => {\n                card.addEventListener('click', () => {\n                    const actionKey = card.dataset.action;\n                    const data = actionData[actionKey];\n\n                    let content = `<div class=\"bg-secondary p-8 rounded-lg\">\n                        <h3 class=\"text-2xl font-bold mb-6\">${data.title}<\/h3>\n                        <ul class=\"space-y-4 text-left\">`;\n                    \n                    data.items.forEach(item => {\n                        const parts = item.split(': ');\n                        content += `<li class=\"flex items-start\">\n                                        <span class=\"text-accent font-bold mr-2 mt-1\">\u2714<\/span>\n                                        <span><strong>${parts[0]}:<\/strong> ${parts[1]}<\/span>\n                                   <\/li>`;\n                    });\n\n                    content += `<\/ul><\/div>`;\n                    if (actionDetailsContainer) {\n                        actionDetailsContainer.innerHTML = content;\n                        actionDetailsContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });\n                    }\n                });\n            });\n\n            const labelData = [\n                { id: 'fairtrade', name: '\u56fd\u969b\u30d5\u30a7\u30a2\u30c8\u30ec\u30fc\u30c9\u8a8d\u8a3c', img: 'https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/5\/5b\/Fair_trade.svg\/240px-Fair_trade.svg.png', desc: '\u958b\u767a\u9014\u4e0a\u56fd\u306e\u751f\u7523\u8005\u3078\u516c\u6b63\u306a\u4fa1\u683c\u3068\u52b4\u50cd\u6761\u4ef6\u3092\u4fdd\u8a3c\u3002\u5150\u7ae5\u52b4\u50cd\u3092\u7981\u6b62\u3057\u3001\u5730\u57df\u306e\u81ea\u7acb\u3092\u652f\u63f4\u3057\u307e\u3059\u3002', products: '\u30b3\u30fc\u30d2\u30fc, \u30ab\u30ab\u30aa, \u30b3\u30c3\u30c8\u30f3\u88fd\u54c1\u306a\u3069' },\n                { id: 'fsc', name: 'FSC\u00ae\u8a8d\u8a3c', img: 'https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/e\/e3\/FSC_logo.svg\/240px-FSC_logo.svg.png', desc: '\u74b0\u5883\u30fb\u793e\u4f1a\u30fb\u7d4c\u6e08\u306e\u57fa\u6e96\u3092\u6e80\u305f\u3057\u305f\u3001\u8cac\u4efb\u3042\u308b\u68ee\u6797\u7ba1\u7406\u304b\u3089\u306e\u6728\u6750\u88fd\u54c1\u3067\u3042\u308b\u3053\u3068\u3092\u793a\u3057\u307e\u3059\u3002', products: '\u7d19\u88fd\u54c1, \u5bb6\u5177, \u5efa\u6750\u306a\u3069' },\n                { id: 'ecomark', name: '\u30a8\u30b3\u30de\u30fc\u30af', img: 'https:\/\/www.ecomark.jp\/images_2016\/logo\/ecomark_logo.png', desc: '\u88fd\u54c1\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u5168\u4f53\uff08\u88fd\u9020\u304b\u3089\u5ec3\u68c4\u307e\u3067\uff09\u3067\u74b0\u5883\u8ca0\u8377\u304c\u5c11\u306a\u3044\u3053\u3068\u3092\u793a\u3059\u65e5\u672c\u306e\u30e9\u30d9\u30eb\u3067\u3059\u3002', products: '\u6587\u623f\u5177, \u5bb6\u96fb, \u65e5\u7528\u54c1\u306a\u3069' },\n                { id: 'jas', name: '\u6709\u6a5fJAS\u30de\u30fc\u30af', img: 'https:\/\/www.maff.go.jp\/j\/jas\/jas_kikaku\/img\/yuuki_mark.gif', desc: '\u8fb2\u85ac\u3084\u5316\u5b66\u80a5\u6599\u306b\u983c\u3089\u305a\u3001\u81ea\u7136\u306e\u529b\u3067\u751f\u7523\u3055\u308c\u305f\u8fb2\u7523\u7269\u30fb\u98df\u54c1\u306e\u8a3c\u3067\u3059\u3002', products: '\u91ce\u83dc, \u52a0\u5de5\u98df\u54c1, \u755c\u7523\u7269\u306a\u3069' },\n                { id: 'rainforest', name: '\u30ec\u30a4\u30f3\u30d5\u30a9\u30ec\u30b9\u30c8\u30fb\u30a2\u30e9\u30a4\u30a2\u30f3\u30b9', img: 'https:\/\/www.rainforest-alliance.org\/wp-content\/uploads\/2020\/07\/RA_Seal_Core_Green_small.png', desc: '\u68ee\u6797\u3084\u751f\u7269\u591a\u69d8\u6027\u3092\u5b88\u308a\u3001\u8fb2\u5bb6\u306e\u66ae\u3089\u3057\u3092\u5411\u4e0a\u3055\u305b\u308b\u6301\u7d9a\u53ef\u80fd\u306a\u8fb2\u696d\u3092\u63a8\u9032\u3057\u307e\u3059\u3002', products: '\u30b3\u30fc\u30d2\u30fc, \u7d05\u8336, \u30d0\u30ca\u30ca\u306a\u3069' },\n                { id: 'msc', name: 'MSC\u300c\u6d77\u306e\u30a8\u30b3\u30e9\u30d9\u30eb\u300d', img: 'https:\/\/www.msc.org\/images\/default-source\/msc-english\/content-blocks\/msc-logo-and-label\/msc-blue-ecolabel-jpeg.jpg?sfvrsn=92e379b_2', desc: '\u6c34\u7523\u8cc7\u6e90\u3068\u74b0\u5883\u306b\u914d\u616e\u3057\u305f\u3001\u6301\u7d9a\u53ef\u80fd\u306a\u6f01\u696d\u3067\u7372\u3089\u308c\u305f\u5929\u7136\u6c34\u7523\u7269\u306e\u8a3c\u3067\u3059\u3002', products: '\u5929\u7136\u9b5a, \u30b7\u30fc\u30d5\u30fc\u30c9\u88fd\u54c1\u306a\u3069' },\n                { id: 'asc', name: 'ASC\u8a8d\u8a3c', img: 'https:\/\/www.asc-aqua.org\/wp-content\/uploads\/2019\/01\/ASC-logo-high-res-300x192.png', desc: '\u74b0\u5883\u3068\u793e\u4f1a\u3078\u306e\u5f71\u97ff\u3092\u6700\u5c0f\u9650\u306b\u6291\u3048\u305f\u3001\u8cac\u4efb\u3042\u308b\u990a\u6b96\u5834\u3067\u80b2\u3066\u3089\u308c\u305f\u6c34\u7523\u7269\u306e\u8a3c\u3067\u3059\u3002', products: '\u30b5\u30fc\u30e2\u30f3, \u30a8\u30d3\u306a\u3069' },\n                { id: 'gots', name: 'GOTS\u8a8d\u8a3c', img: 'https:\/\/global-standard.org\/images\/gots-logo\/GOTS_Logo_Standard_Positive_CMYK.png', desc: '\u539f\u6599\u306e95%\u4ee5\u4e0a\u304c\u30aa\u30fc\u30ac\u30cb\u30c3\u30af\u7e4a\u7dad\u3067\u3001\u88fd\u9020\u5de5\u7a0b\u5168\u4f53\u3082\u74b0\u5883\u30fb\u793e\u4f1a\u57fa\u6e96\u3092\u6e80\u305f\u3059\u7e4a\u7dad\u88fd\u54c1\u306e\u8a3c\u3067\u3059\u3002', products: '\u8863\u985e, \u30bf\u30aa\u30eb, \u5bdd\u5177\u306a\u3069' }\n            ];\n\n            const labelGrid = appContainer.querySelector('#label-grid');\n            const modalBackdrop = appContainer.querySelector('#modal-backdrop');\n            const modalContent = appContainer.querySelector('#modal-content');\n            \n            function openModal(label) {\n                if (!modalContent || !modalBackdrop) return;\n                modalContent.innerHTML = `\n                    <div class=\"flex justify-between items-start\">\n                        <h3 class=\"text-2xl font-bold text-gray-800 mb-4\">${label.name}<\/h3>\n                        <button id=\"close-modal-btn\" class=\"text-gray-500 hover:text-gray-800 text-3xl\">&times;<\/button>\n                    <\/div>\n                    <div class=\"flex flex-col md:flex-row gap-6\">\n                        <div class=\"md:w-1\/3 flex-shrink-0 flex items-center justify-center bg-gray-50 p-4 rounded\">\n                             <img decoding=\"async\" src=\"${label.img}\" alt=\"${label.name}\" class=\"max-h-24 object-contain\" style=\"image-rendering: -webkit-optimize-contrast;\">\n                        <\/div>\n                        <div class=\"md:w-2\/3\">\n                            <p class=\"text-gray-700 mb-4\">${label.desc}<\/p>\n                            <p class=\"text-sm\"><strong>\u4e3b\u306a\u5bfe\u8c61\u88fd\u54c1:<\/strong> ${label.products}<\/p>\n                        <\/div>\n                    <\/div>\n                `;\n                modalBackdrop.classList.add('show');\n                modalContent.classList.add('show');\n                appContainer.querySelector('#close-modal-btn').addEventListener('click', closeModal);\n            }\n\n            function closeModal() {\n                if (!modalContent || !modalBackdrop) return;\n                modalBackdrop.classList.remove('show');\n                modalContent.classList.remove('show');\n            }\n\n            if(labelGrid) {\n                labelData.forEach(label => {\n                    const labelDiv = document.createElement('div');\n                    labelDiv.className = 'bg-white p-4 rounded-lg shadow-sm flex items-center justify-center cursor-pointer transition-transform hover:scale-105';\n                    labelDiv.innerHTML = `<img decoding=\"async\" src=\"${label.img}\" alt=\"${label.name}\" class=\"max-h-20 object-contain\" style=\"image-rendering: -webkit-optimize-contrast;\">`;\n                    labelDiv.addEventListener('click', () => openModal(label));\n                    labelGrid.appendChild(labelDiv);\n                });\n            }\n\n            if(modalBackdrop) {\n                modalBackdrop.addEventListener('click', closeModal);\n            }\n            \n            const initChart = () => {\n                if (typeof Chart === 'undefined') {\n                    setTimeout(initChart, 100);\n                    return;\n                }\n                const awarenessCtx = appContainer.querySelector('#awarenessChart');\n                if (!awarenessCtx) return;\n                \n                new Chart(awarenessCtx.getContext('2d'), {\n                    type: 'line',\n                    data: {\n                        labels: ['2016\u5e74\u5ea6', '2019\u5e74\u5ea6', '2020\u5e74\u5ea6', '2022\u5e74\u5ea6'],\n                        datasets: [{\n                            label: '\u300c\u30a8\u30b7\u30ab\u30eb\u6d88\u8cbb\u300d\u8a8d\u77e5\u5ea6 (%)',\n                            data: [9.9, 15.6, 23.6, 26.9],\n                            borderColor: '#8D9B87',\n                            backgroundColor: 'rgba(141, 155, 135, 0.1)',\n                            borderWidth: 3,\n                            tension: 0.3,\n                            fill: true\n                        }]\n                    },\n                    options: {\n                        responsive: true,\n                        maintainAspectRatio: false,\n                        scales: {\n                            y: {\n                                beginAtZero: true,\n                                max: 30,\n                                ticks: {\n                                    callback: function(value) {\n                                        return value + '%';\n                                    }\n                                }\n                            }\n                        },\n                        plugins: {\n                            legend: {\n                                display: false\n                            },\n                            tooltip: {\n                                callbacks: {\n                                    label: function(context) {\n                                        return '\u8a8d\u77e5\u5ea6: ' + context.parsed.y + '%';\n                                    }\n                                }\n                            }\n                        }\n                    }\n                });\n            };\n\n            initChart();\n\n            const sections = appContainer.querySelectorAll('.section-fade-in');\n            if (typeof IntersectionObserver !== 'undefined') {\n                const observer = new IntersectionObserver((entries) => {\n                    entries.forEach(entry => {\n                        if (entry.isIntersecting) {\n                            entry.target.classList.add('visible');\n                            observer.unobserve(entry.target);\n                        }\n                    });\n                }, { threshold: 0.1 });\n\n                sections.forEach(section => {\n                    observer.observe(section);\n                });\n            }\n\n            appContainer.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n                anchor.addEventListener('click', function (e) {\n                    e.preventDefault();\n                    const targetId = this.getAttribute('href');\n                    const targetElement = appContainer.querySelector(targetId);\n                    if(targetElement) {\n                         targetElement.scrollIntoView({\n                            behavior: 'smooth'\n                        });\n                    }\n                });\n            });\n        };\n        \n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', initEthicalExplorer);\n        } else {\n            initEthicalExplorer();\n        }\n    })();\n<\/script>\n\n\n\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u30a8\u30b7\u30ab\u30eb\uff1f Ethical Explorer \u30a8\u30b7\u30ab\u30eb\u3068\u306f\uff1f \u306a\u305c\u4eca\uff1f&hellip;<\/p>\n","protected":false},"author":1,"featured_media":666,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,31],"tags":[],"class_list":["post-665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-26","category-31"],"_links":{"self":[{"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/posts\/665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=665"}],"version-history":[{"count":3,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/posts\/665\/revisions"}],"predecessor-version":[{"id":670,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/posts\/665\/revisions\/670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/media\/666"}],"wp:attachment":[{"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}