{"id":7,"date":"2026-02-10T10:27:02","date_gmt":"2026-02-10T01:27:02","guid":{"rendered":"http:\/\/www.joiefel.com\/?page_id=7"},"modified":"2026-02-10T10:27:02","modified_gmt":"2026-02-10T01:27:02","slug":"%e3%83%9b%e3%83%bc%e3%83%a0","status":"publish","type":"page","link":"https:\/\/www.joiefel.com\/?page_id=7","title":{"rendered":"\u30db\u30fc\u30e0"},"content":{"rendered":"\n<div class=\"wp-custom-pan-class-wrapper\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Zen+Maru+Gothic:wght@400;700&#038;display=swap\" rel=\"stylesheet\">\n\n    <style>\n        \/* WP\u30c6\u30fc\u30de\u3068\u306e\u5e72\u6e09\u9632\u6b62\u7528\u306e\u72ec\u81ea\u30b9\u30b3\u30fc\u30d7 *\/\n        .wp-custom-pan-class-wrapper {\n            font-family: 'Zen Maru Gothic', sans-serif !important;\n            background-color: #fffaf3;\n            color: #5d4037;\n            overflow-x: hidden;\n            line-height: 1.6;\n        }\n\n        @keyframes float-pan {\n            0% { transform: translateY(0px) rotate(0deg); }\n            50% { transform: translateY(-10px) rotate(5deg); }\n            100% { transform: translateY(0px) rotate(0deg); }\n        }\n\n        .wp-bread-item {\n            position: absolute;\n            cursor: grab;\n            user-select: none;\n            font-size: 4rem;\n            z-index: 10;\n            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));\n            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n            animation: float-pan 3s ease-in-out infinite;\n        }\n\n        .wp-bread-item:active {\n            cursor: grabbing;\n            transform: scale(1.3) rotate(10deg);\n        }\n\n        .hero-gradient {\n            background: radial-gradient(circle at center, #ffedbc 0%, #ffd194 100%);\n            min-height: 500px;\n        }\n\n        \/* WP\u306e\u81ea\u52d5\u6574\u5f62\u306b\u3088\u308b\u4f59\u767d\u3092\u30ea\u30bb\u30c3\u30c8 *\/\n        .wp-custom-pan-class-wrapper p { margin-bottom: 0 !important; }\n        .wp-custom-pan-class-wrapper h2, .wp-custom-pan-class-wrapper h3 { border: none !important; margin: 0 !important; padding: 0 !important; }\n    <\/style>\n\n    <section class=\"relative h-[60vh] flex items-center justify-center overflow-hidden hero-gradient rounded-3xl m-4\">\n        <div id=\"bread-drag-container\" class=\"absolute inset-0\">\n            <div class=\"wp-bread-item\" style=\"top: 15%; left: 10%; animation-delay: 0s;\">\ud83c\udf5e<\/div>\n            <div class=\"wp-bread-item\" style=\"top: 20%; left: 75%; animation-delay: 0.5s;\">\ud83e\udd50<\/div>\n            <div class=\"wp-bread-item\" style=\"top: 60%; left: 15%; animation-delay: 1s;\">\ud83e\udd68<\/div>\n            <div class=\"wp-bread-item\" style=\"top: 70%; left: 80%; animation-delay: 1.5s;\">\ud83e\udd6f<\/div>\n            <div class=\"wp-bread-item\" style=\"top: 10%; left: 50%; animation-delay: 2s;\">\ud83e\udd56<\/div>\n        <\/div>\n        \n        <div class=\"relative z-20 text-center px-6 py-8 bg-white\/40 backdrop-blur-md rounded-[2.5rem] border border-white\/50 shadow-xl max-w-[90%] md:max-w-2xl\">\n            <h2 class=\"text-3xl md:text-5xl font-bold text-orange-900 mb-4 leading-tight\">\n                \u304a\u3046\u3061\u3067 \u307e\u307b\u3046\u306e<br><span class=\"text-orange-600\">\u30d1\u30f3\u3065\u304f\u308a\uff01<\/span>\n            <\/h2>\n            <p class=\"text-base md:text-lg text-orange-800 mb-6 font-bold\">\n                \u30d1\u30f3\u3092\u30de\u30a6\u30b9\u3067\u3064\u304b\u3093\u3067 \u3046\u3054\u304b\u3057\u3066\u307f\u3088\u3046\uff01\n            <\/p>\n            <a href=\"#wp-res-form\" class=\"inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all no-underline\">\n                \u4f53\u9a13\u30ec\u30c3\u30b9\u30f3\u3092\u307f\u308b\n            <\/a>\n        <\/div>\n    <\/section>\n\n    <section class=\"py-16 px-6 max-w-5xl mx-auto\">\n        <div class=\"grid md:grid-cols-3 gap-6\">\n            <div class=\"p-8 bg-white rounded-3xl text-center shadow-sm border border-orange-100\">\n                <div class=\"text-4xl mb-4\">\ud83c\udfe0<\/div>\n                <h4 class=\"font-bold text-orange-900 mb-2\">\u304a\u3046\u3061\u3067\u5b89\u5fc3<\/h4>\n                <p class=\"text-sm text-gray-600\">\u6163\u308c\u305f\u30ad\u30c3\u30c1\u30f3\u3060\u304b\u3089\u3001\u30ea\u30e9\u30c3\u30af\u30b9\u3057\u3066\u53c2\u52a0\u3067\u304d\u307e\u3059\u3002<\/p>\n            <\/div>\n            <div class=\"p-8 bg-white rounded-3xl text-center shadow-sm border border-orange-100\">\n                <div class=\"text-4xl mb-4\">\ud83d\udc69\u200d\ud83c\udf73<\/div>\n                <h4 class=\"font-bold text-orange-900 mb-2\">\u30d7\u30ed\u304c\u6559\u3048\u308b<\/h4>\n                <p class=\"text-sm text-gray-600\">Zoom\u3092\u4f7f\u3063\u3066\u3001\u308f\u304b\u308a\u3084\u3059\u304f\u4e01\u5be7\u306b\u6559\u3048\u307e\u3059\u3002<\/p>\n            <\/div>\n            <div class=\"p-8 bg-white rounded-3xl text-center shadow-sm border border-orange-100\">\n                <div class=\"text-4xl mb-4\">\u2728<\/div>\n                <h4 class=\"font-bold text-orange-900 mb-2\">\u9054\u6210\u611f\u3044\u3063\u3071\u3044<\/h4>\n                <p class=\"text-sm text-gray-600\">\u713c\u304d\u305f\u3066\u30d1\u30f3\u306e\u5473\u306f\u3001\u4e00\u751f\u306e\u601d\u3044\u51fa\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"wp-res-form\" class=\"py-16 bg-orange-100\/50 rounded-[3rem] m-4 px-6\">\n        <div class=\"max-w-xl mx-auto\">\n            <h3 class=\"text-2xl font-bold text-center text-orange-900 mb-8\">\ud83d\udcc5 \u4e88\u7d04\u30d5\u30a9\u30fc\u30e0<\/h3>\n            <form id=\"wp-actual-form\" class=\"bg-white p-8 rounded-3xl shadow-lg space-y-4\">\n                <div>\n                    <label class=\"block text-sm font-bold mb-1\">\u304a\u540d\u524d<\/label>\n                    <input type=\"text\" required class=\"w-full p-3 bg-orange-50 border-none rounded-xl\" placeholder=\"\u30d1\u30f3 \u592a\u90ce\">\n                <\/div>\n                <div>\n                    <label class=\"block text-sm font-bold mb-1\">\u30e1\u30cb\u30e5\u30fc<\/label>\n                    <select class=\"w-full p-3 bg-orange-50 border-none rounded-xl\">\n                        <option>\u306f\u3058\u3081\u3066\u306e\u304f\u307e\u3055\u3093\u30d1\u30f3\uff08\u521d\u7d1a\uff09<\/option>\n                        <option>\u304f\u308b\u304f\u308b\u30a6\u30a4\u30f3\u30ca\u30fc\u30ed\u30fc\u30eb\uff08\u4e2d\u7d1a\uff09<\/option>\n                    <\/select>\n                <\/div>\n                <button type=\"submit\" class=\"w-full bg-orange-500 text-white font-bold py-3 rounded-xl hover:bg-orange-600 transition-colors\">\n                    \u9001\u4fe1\u3059\u308b\n                <\/button>\n            <\/form>\n        <\/div>\n    <\/section>\n\n    <script>\n        (function() {\n            const container = document.getElementById('bread-drag-container');\n            const items = container.querySelectorAll('.wp-bread-item');\n            let activeItem = null;\n            let offset = { x: 0, y: 0 };\n\n            items.forEach(item => {\n                item.addEventListener('mousedown', startDrag);\n                item.addEventListener('touchstart', startDrag, { passive: false });\n            });\n\n            function startDrag(e) {\n                activeItem = e.target;\n                activeItem.style.animation = 'none';\n                const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;\n                const clientY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;\n                const rect = activeItem.getBoundingClientRect();\n                offset.x = clientX - rect.left;\n                offset.y = clientY - rect.top;\n                document.addEventListener('mousemove', onDrag);\n                document.addEventListener('touchmove', onDrag, { passive: false });\n                document.addEventListener('mouseup', endDrag);\n                document.addEventListener('touchend', endDrag);\n            }\n\n            function onDrag(e) {\n                if (!activeItem) return;\n                if (e.type === 'touchmove') e.preventDefault();\n                const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;\n                const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;\n                \/\/ \u30b3\u30f3\u30c6\u30ca\u306e\u76f8\u5bfe\u5ea7\u6a19\u306b\u5909\u63db\n                const containerRect = container.getBoundingClientRect();\n                activeItem.style.left = (clientX - containerRect.left - offset.x) + 'px';\n                activeItem.style.top = (clientY - containerRect.top - offset.y) + 'px';\n            }\n\n            function endDrag() {\n                if (activeItem) activeItem.style.animation = 'float-pan 3s ease-in-out infinite';\n                activeItem = null;\n                document.removeEventListener('mousemove', onDrag);\n                document.removeEventListener('touchmove', onDrag);\n            }\n\n            document.getElementById('wp-actual-form').addEventListener('submit', (e) => {\n                e.preventDefault();\n                alert('\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\u3057\u307e\u3057\u305f\uff01\uff08\u30c7\u30e2\u52d5\u4f5c\uff09');\n                e.target.reset();\n            });\n        })();\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf5e \ud83e\udd50 \ud83e\udd68 \ud83e\udd6f \ud83e\udd56 \u304a\u3046\u3061\u3067 \u307e\u307b\u3046\u306e\u30d1\u30f3\u3065\u304f\u308a\uff01 \u30d1\u30f3\u3092\u30de\u30a6\u30b9\u3067\u3064\u304b\u3093\u3067 \u3046\u3054\u304b\u3057\u3066\u307f\u3088\u3046\uff01 \u4f53\u9a13\u30ec\u30c3\u30b9\u30f3\u3092\u307f\u308b \ud83c\udfe0 \u304a\u3046\u3061\u3067\u5b89\u5fc3 \u6163\u308c\u305f\u30ad\u30c3\u30c1\u30f3\u3060\u304b\u3089\u3001\u30ea\u30e9\u30c3\u30af\u30b9\u3057\u3066\u53c2\u52a0\u3067\u304d\u307e\u3059\u3002 \ud83d\udc69\u200d\ud83c\udf73 \u30d7\u30ed\u304c\u6559\u3048\u308b Zoom\u3092\u4f7f [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.joiefel.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joiefel.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.joiefel.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.joiefel.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joiefel.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":2,"href":"https:\/\/www.joiefel.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/www.joiefel.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/www.joiefel.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}