{"id":80,"date":"2026-02-24T21:48:50","date_gmt":"2026-02-24T12:48:50","guid":{"rendered":"https:\/\/www.ksform.co.jp\/?page_id=80"},"modified":"2026-05-09T13:06:14","modified_gmt":"2026-05-09T04:06:14","slug":"top-page","status":"publish","type":"page","link":"https:\/\/www.ksform.co.jp\/","title":{"rendered":"TOP Page"},"content":{"rendered":"\n<!-- \n  \u3010WordPress\u56fa\u5b9a\u30da\u30fc\u30b8\u7528\u30b3\u30fc\u30c9\uff1a\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3011\n  \u30ed\u30b4\u30fbSNS\u30ea\u30f3\u30af\u30fb\u6307\u5b9a\u4f4d\u7f6e\u3078\u306e\u753b\u50cf\u8ffd\u52a0\u7248\uff08\u30e1\u30a4\u30f3\u30ed\u30b4\u30b5\u30a4\u30ba\u3092\u3055\u3089\u306b\u62e1\u5927\uff09\n-->\n<div id=\"ksform-modern-wrapper\">\n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    fontFamily: {\n                        sans: ['\"Noto Sans JP\"', 'sans-serif'],\n                    },\n                    colors: {\n                        'nuance': '#93a3b1',\n                        'natural': '#d2b48c',\n                    }\n                }\n            }\n        }\n    <\/script>\n    \n    <!-- Google Fonts -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700&#038;display=swap\" rel=\"stylesheet\">\n    \n    <!-- Three.js -->\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n\n    <style>\n        #ksform-modern-wrapper {\n            background-color: #f8f7f4;\n            background-image: \n                linear-gradient(rgba(147, 163, 177, 0.1) 1px, transparent 1px),\n                linear-gradient(90deg, rgba(147, 163, 177, 0.1) 1px, transparent 1px);\n            background-size: 40px 40px;\n            font-family: 'Noto Sans JP', sans-serif;\n            color: #334155;\n            position: relative;\n            overflow: hidden;\n            padding-bottom: 4rem;\n        }\n\n        .glass-card {\n            background: rgba(255, 255, 255, 0.75);\n            backdrop-filter: blur(12px);\n            -webkit-backdrop-filter: blur(12px);\n            border: 1px solid rgba(255, 255, 255, 0.9);\n            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.04);\n            border-radius: 1.5rem;\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n        }\n\n        .bento-grid {\n            display: grid;\n            grid-template-columns: repeat(12, 1fr);\n            gap: 1.5rem;\n            max-width: 80rem;\n            margin: 0 auto;\n            padding: 3rem 1.5rem;\n        }\n\n        .interactive-card:hover {\n            transform: translateY(-4px);\n            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);\n        }\n\n        .img-zoom-container {\n            overflow: hidden;\n            border-radius: 1.5rem 1.5rem 0 0;\n        }\n        .img-zoom {\n            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        }\n        .interactive-card:hover .img-zoom {\n            transform: scale(1.05);\n        }\n\n        .fade-up {\n            opacity: 0;\n            transform: translateY(40px);\n            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n        .fade-up.is-visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .btn-arrow {\n            transition: transform 0.3s ease;\n        }\n        a:hover .btn-arrow {\n            transform: translateX(4px);\n        }\n\n        \/* Float Animation for Mark Image *\/\n        @keyframes floating {\n            0% { transform: translateY(0px); }\n            50% { transform: translateY(-15px); }\n            100% { transform: translateY(0px); }\n        }\n        .float-mark {\n            animation: floating 5s ease-in-out infinite;\n        }\n\n        .sns-icon {\n            transition: all 0.3s ease;\n            background: rgba(255, 255, 255, 0.8);\n        }\n        .sns-icon:hover {\n            transform: scale(1.1);\n            background: #fff;\n            color: #d2b48c;\n        }\n    <\/style>\n\n    <main class=\"bento-grid\">\n        \n        <!-- 1. \u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb \/ Hero Section -->\n        <div class=\"glass-card fade-up col-span-12 lg:col-span-8 row-span-2 relative overflow-hidden flex flex-col justify-end min-h-[500px] p-8 lg:p-12\">\n            <div id=\"three-canvas-container\" class=\"absolute inset-0 z-0 opacity-100 pointer-events-none\"><\/div>\n            \n            <div class=\"absolute top-8 right-8 md:top-12 md:right-12 z-20 hidden md:block\">\n                <img decoding=\"async\" src=\"https:\/\/www.ksform.co.jp\/images\/markpng.png\" alt=\"K'sForm \u30de\u30fc\u30af\" class=\"w-32 md:w-48 h-auto object-contain opacity-90 float-mark\">\n            <\/div>\n            \n            <div class=\"relative z-10 max-w-2xl\">\n                <!-- \u30ed\u30b4\u306e\u30b5\u30a4\u30ba\u3092 h-16 md:h-20 \u304b\u3089 h-20 md:h-24 \u306b\u3055\u3089\u306b\u62e1\u5927 -->\n                <img decoding=\"async\" src=\"https:\/\/ksform.co.jp\/images\/logo.png\" alt=\"\u682a\u5f0f\u4f1a\u793eK'sForm \u30ed\u30b4\" class=\"h-20 md:h-24 w-auto mb-6 object-contain drop-shadow-sm\">\n                \n                <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6 text-slate-800 tracking-tight\">\n                    \u7a7a\u9593\u3092\u3001<br>\n                    <span class=\"text-natural\">\u30bf\u30a4\u30eb<\/span>\u3067\u7f8e\u3057\u304f\u5f69\u308b\u3002\n                <\/h1>\n                <p class=\"text-lg text-slate-600 mb-8 leading-relaxed font-medium\">\n                    \u5343\u8449\u770c\u5e02\u5ddd\u5e02\u3092\u62e0\u70b9\u306b\u3001\u5168\u56fd\u3069\u3053\u3078\u3067\u3082\u99c6\u3051\u3064\u3051\u307e\u3059\u3002<br>\n                    \u30bf\u30a4\u30eb\u5c4b\u6b7430\u5e74\u3001\u5916\u69cb\u5c4b\u6b7415\u5e74\u306e\u78ba\u304b\u306a\u6280\u8853\u529b\u3002\n                <\/p>\n                <div class=\"flex flex-wrap items-center gap-6\">\n                    <a href=\"#contact\" class=\"inline-flex items-center justify-center px-6 py-3 bg-slate-800 text-white font-medium rounded-xl hover:bg-slate-700 transition-colors shadow-lg hover:shadow-xl\">\n                        \u3054\u76f8\u8ac7\u30fb\u304a\u554f\u3044\u5408\u308f\u305b\n                        <svg class=\"w-4 h-4 ml-2 btn-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\n                    <\/a>\n                    \n                    <div class=\"flex gap-3\">\n                        <a href=\"https:\/\/www.facebook.com\/ksform.nakamura\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"sns-icon w-12 h-12 flex items-center justify-center rounded-full shadow-sm border border-white text-slate-600\" title=\"Facebook\">\n                            <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1V12h3l-.5 3H13v6.8c4.56-.93 8-4.96 8-9.8z\"\/><\/svg>\n                        <\/a>\n                        <a href=\"https:\/\/www.instagram.com\/ksform.nakamura\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"sns-icon w-12 h-12 flex items-center justify-center rounded-full shadow-sm border border-white text-slate-600\" title=\"Instagram\">\n                            <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"><\/line><\/svg>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 2. \u5185\u88c5\u30bf\u30a4\u30eb\u5de5\u4e8b -->\n        <a href=\"https:\/\/www.ksform.co.jp\/?page_id=84\" class=\"glass-card interactive-card fade-up col-span-12 md:col-span-6 lg:col-span-4 row-span-1 flex flex-col cursor-pointer\" style=\"transition-delay: 0.1s;\">\n            <div class=\"img-zoom-container h-48 relative\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1584622650111-993a426fbf0a?auto=format&#038;fit=crop&#038;q=80&#038;w=800\" alt=\"\u5185\u88c5\u30bf\u30a4\u30eb\u5de5\u4e8b\" class=\"img-zoom w-full h-full object-cover\">\n                <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n                <h3 class=\"absolute bottom-4 left-6 text-white text-xl font-bold tracking-wide\">\u5185\u88c5\u30bf\u30a4\u30eb\u5de5\u4e8b<\/h3>\n            <\/div>\n            <div class=\"p-6 flex-1 flex flex-col justify-between\">\n                <p class=\"text-slate-600 text-sm leading-relaxed mb-4\">\n                    \u30ad\u30c3\u30c1\u30f3\u3001\u30d0\u30b9\u30eb\u30fc\u30e0\u3001\u30ea\u30d3\u30f3\u30b0\u306a\u3069\u3002\u6a5f\u80fd\u6027\u3068\u30c7\u30b6\u30a4\u30f3\u6027\u3092\u4e21\u7acb\u3055\u305b\u305f\u4e0a\u8cea\u306a\u5c4b\u5185\u7a7a\u9593\u3092\u5275\u308a\u51fa\u3057\u307e\u3059\u3002\n                <\/p>\n                <span class=\"text-slate-800 font-semibold text-sm flex items-center group\">\n                    \u8a73\u7d30\u3092\u898b\u308b\n                    <svg class=\"w-4 h-4 ml-1 btn-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"><\/path><\/svg>\n                <\/span>\n            <\/div>\n        <\/a>\n\n        <!-- 3. \u5916\u88c5\u30bf\u30a4\u30eb\u5de5\u4e8b -->\n        <a href=\"https:\/\/www.ksform.co.jp\/?page_id=87\" class=\"glass-card interactive-card fade-up col-span-12 md:col-span-6 lg:col-span-4 row-span-1 flex flex-col cursor-pointer\" style=\"transition-delay: 0.2s;\">\n            <div class=\"img-zoom-container h-48 relative\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?auto=format&#038;fit=crop&#038;q=80&#038;w=800\" alt=\"\u5916\u88c5\u30bf\u30a4\u30eb\u5de5\u4e8b\" class=\"img-zoom w-full h-full object-cover\">\n                <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n                <h3 class=\"absolute bottom-4 left-6 text-white text-xl font-bold tracking-wide\">\u5916\u88c5\u30bf\u30a4\u30eb\u5de5\u4e8b<\/h3>\n            <\/div>\n            <div class=\"p-6 flex-1 flex flex-col justify-between\">\n                <p class=\"text-slate-600 text-sm leading-relaxed mb-4\">\n                    \u4f4f\u5b85\u306e\u5916\u58c1\u3084\u30a2\u30d7\u30ed\u30fc\u30c1\u306a\u3069\u3002\u5efa\u7269\u306e\u9854\u3068\u306a\u308b\u5916\u88c5\u3092\u3001\u8010\u4e45\u6027\u3068\u7f8e\u3057\u3055\u3092\u6301\u3064\u30bf\u30a4\u30eb\u3067\u4ed5\u4e0a\u3052\u307e\u3059\u3002\n                <\/p>\n                <span class=\"text-slate-800 font-semibold text-sm flex items-center group\">\n                    \u8a73\u7d30\u3092\u898b\u308b\n                    <svg class=\"w-4 h-4 ml-1 btn-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"><\/path><\/svg>\n                <\/span>\n            <\/div>\n        <\/a>\n\n        <!-- 4. \u4f1a\u793e\u7d39\u4ecb -->\n        <div class=\"glass-card fade-up col-span-12 lg:col-span-6 row-span-1 p-8 lg:p-10 flex flex-col justify-center relative overflow-hidden\" style=\"transition-delay: 0.3s;\">\n            <h2 class=\"text-2xl font-bold mb-4 text-slate-800 border-l-4 border-natural pl-4\">\u8077\u4eba\u96c6\u56e3 K&#8217;sForm<\/h2>\n            <p class=\"text-slate-600 leading-loose\">\n                <strong>\u30bf\u30a4\u30eb\u5c4b\u6b7430\u5e74\uff01 \u5916\u69cb\u5c4b\u6b7415\u5e74\uff01<\/strong><br>\n                \u5de6\u5b98\u3001\u9020\u6210\u306a\u3069\u3082\u5e45\u5e83\u304f\u624b\u639b\u3051\u3066\u304a\u308a\u307e\u3059\u3002<br>\n                \u78ba\u304b\u306a\u6280\u8853\u3092\u6301\u3063\u305f\u8077\u4eba\u304c\u3001\u65e5\u672c\u5168\u56fd\u3069\u3053\u3078\u3067\u3082\u99c6\u3051\u3064\u3051\u307e\u3059\uff01\n            <\/p>\n        <\/div>\n\n        <!-- 5. \u4f1a\u793e\u6982\u8981 -->\n        <div class=\"glass-card fade-up col-span-12 lg:col-span-6 row-span-1 p-8 lg:p-10 flex flex-col md:flex-row gap-8\" style=\"transition-delay: 0.4s;\">\n            <div class=\"flex-1\">\n                <h2 class=\"text-2xl font-bold mb-6 text-slate-800 flex items-center\">\n                    \u4f1a\u793e\u6982\u8981\n                <\/h2>\n                <dl class=\"grid grid-cols-1 sm:grid-cols-3 gap-x-4 gap-y-4 text-sm text-slate-700\">\n                    <dt class=\"font-semibold text-slate-500 sm:col-span-1 border-b border-slate-200\/50 pb-2 text-xs uppercase tracking-wider\">\u793e\u540d<\/dt>\n                    <dd class=\"sm:col-span-2 border-b border-slate-200\/50 pb-2 font-bold text-slate-800 text-lg md:text-xl leading-tight\">\u682a\u5f0f\u4f1a\u793eK\u2019sForm<\/dd>\n                    \n                    <dt class=\"font-semibold text-slate-500 sm:col-span-1 border-b border-slate-200\/50 pb-2 text-xs uppercase tracking-wider\">\u8a2d\u7acb\u5e74<\/dt>\n                    <dd class=\"sm:col-span-2 border-b border-slate-200\/50 pb-2 text-slate-800\">\u5e73\u621024\u5e741\u6708<\/dd>\n                    \n                    <dt class=\"font-semibold text-slate-500 sm:col-span-1 border-b border-slate-200\/50 pb-2 text-xs uppercase tracking-wider\">\u6240\u5728\u5730<\/dt>\n                    <dd class=\"sm:col-span-2 border-b border-slate-200\/50 pb-2 text-slate-800\">\u3012272-0836 \u5343\u8449\u770c\u5e02\u5ddd\u5e02\u5317\u56fd\u52061\u4e01\u76ee\uff0d6\uff0d9<\/dd>\n                    \n                    <dt class=\"font-semibold text-slate-500 sm:col-span-1 border-b border-slate-200\/50 pb-2 text-xs uppercase tracking-wider\">\u5343\u8449\u770c\u77e5\u4e8b\u8a31\u53ef<\/dt>\n                    <dd class=\"sm:col-span-2 border-b border-slate-200\/50 pb-2 text-slate-800\">\u7b2c58577\u53f7<\/dd>\n                    \n                    <dt class=\"font-semibold text-slate-500 sm:col-span-1 border-b border-slate-200\/50 pb-2 text-xs uppercase tracking-wider\">\u4ee3\u8868\u53d6\u7de0\u5f79<\/dt>\n                    <dd class=\"sm:col-span-2 border-b border-slate-200\/50 pb-2 text-slate-800\">\u4e2d\u6751 \u8ce2\u53f8<\/dd>\n                    \n                    <dt class=\"font-semibold text-slate-500 sm:col-span-1 border-b border-slate-200\/50 pb-2 text-xs uppercase tracking-wider\">\u4e3b\u306a\u8cc7\u683c<\/dt>\n                    <dd class=\"sm:col-span-2 border-b border-slate-200\/50 pb-2 text-slate-800\">\u4e8c\u7d1a\u5efa\u7bc9\u58eb \/ \u4e8c\u7d1a\u30a8\u30af\u30b9\u30c6\u30ea\u30a2\u30d7\u30e9\u30f3\u30ca\u30fc<\/dd>\n                <\/dl>\n            <\/div>\n        <\/div>\n\n        <!-- 6. \u304a\u554f\u3044\u5408\u308f\u305b -->\n        <div id=\"contact\" class=\"glass-card fade-up col-span-12 p-8 lg:p-12 text-center mt-4\" style=\"transition-delay: 0.5s;\">\n            <h2 class=\"text-3xl font-bold mb-4 text-slate-800\">\u304a\u554f\u3044\u5408\u308f\u305b<\/h2>\n            <p class=\"text-slate-600 mb-8 max-w-2xl mx-auto\">\u65bd\u5de5\u306b\u95a2\u3059\u308b\u3054\u76f8\u8ac7\u3001\u304a\u898b\u7a4d\u308a\u306e\u3054\u4f9d\u983c\u306a\u3069\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n            <div class=\"max-w-3xl mx-auto text-left bg-white\/50 p-6 md:p-8 rounded-2xl border border-white\/80 shadow-sm\">\n                \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f34-o1\" lang=\"ja\" dir=\"ltr\" data-wpcf7-id=\"34\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F80#wpcf7-f34-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"\u30b3\u30f3\u30bf\u30af\u30c8\u30d5\u30a9\u30fc\u30e0\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"34\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"ja\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f34-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u304a\u540d\u524d\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"5\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"\u30e1\u30c3\u30bb\u30fc\u30b8\u5185\u5bb9\" name=\"your-message\"><\/textarea><\/span><br \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"\u9001\u4fe1\u3059\u308b\" \/>\n<\/p><p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"_wpcf7_ak_\"><label>&#916;<textarea name=\"_wpcf7_ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"_wpcf7_ak_js\" value=\"180\"\/><script>\ndocument.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );\n<\/script>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n            <\/div>\n        <\/div>\n    <\/main>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", () => {\n            const container = document.getElementById('three-canvas-container');\n            if (container) {\n                const scene = new THREE.Scene();\n                const camera = new THREE.PerspectiveCamera(35, container.clientWidth \/ container.clientHeight, 0.1, 1000);\n                camera.position.set(3, 1, 8); \n\n                const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\n                renderer.setSize(container.clientWidth, container.clientHeight);\n                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n                container.appendChild(renderer.domElement);\n\n                const geometry = new THREE.BoxGeometry(2.2, 2.2, 2.2);\n                const material = new THREE.MeshPhysicalMaterial({  \n                    color: 0xe5dace, \n                    metalness: 0.05,\n                    roughness: 0.2,\n                    transmission: 0.3,\n                    thickness: 1.5,\n                    clearcoat: 0.8,\n                    clearcoatRoughness: 0.2\n                });\n                const cube = new THREE.Mesh(geometry, material);\n                scene.add(cube);\n\n                const edges = new THREE.EdgesGeometry(geometry);\n                const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.6 });\n                const line = new THREE.LineSegments(edges, lineMaterial);\n                cube.add(line);\n\n                const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);\n                scene.add(ambientLight);\n\n                const spotLight = new THREE.SpotLight(0xfff5e6, 1.2); \n                spotLight.position.set(10, 10, 10);\n                scene.add(spotLight);\n\n                let mouseX = 0, mouseY = 0;\n                document.addEventListener('mousemove', (e) => {\n                    const rect = container.getBoundingClientRect();\n                    mouseX = (e.clientX - rect.left) \/ rect.width * 2 - 1;\n                    mouseY = -((e.clientY - rect.top) \/ rect.height * 2 - 1);\n                });\n\n                function animate() {\n                    requestAnimationFrame(animate);\n                    cube.rotation.x += 0.002;\n                    cube.rotation.y += 0.003;\n                    cube.position.x += (mouseX * 1.5 - cube.position.x) * 0.03;\n                    cube.position.y += (mouseY * 1.0 - cube.position.y) * 0.03;\n                    renderer.render(scene, camera);\n                }\n                animate();\n\n                window.addEventListener('resize', () => {\n                    camera.aspect = container.clientWidth \/ container.clientHeight;\n                    camera.updateProjectionMatrix();\n                    renderer.setSize(container.clientWidth, container.clientHeight);\n                });\n            }\n\n            const observer = new IntersectionObserver((entries) => {\n                entries.forEach(entry => {\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add('is-visible');\n                    }\n                });\n            }, { rootMargin: '0px 0px -50px 0px' });\n            document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n        });\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u7a7a\u9593\u3092\u3001 \u30bf\u30a4\u30eb\u3067\u7f8e\u3057\u304f\u5f69\u308b\u3002 \u5343\u8449\u770c\u5e02 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ksform.co.jp\/index.php?rest_route=\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ksform.co.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ksform.co.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ksform.co.jp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ksform.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=80"}],"version-history":[{"count":19,"href":"https:\/\/www.ksform.co.jp\/index.php?rest_route=\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/www.ksform.co.jp\/index.php?rest_route=\/wp\/v2\/pages\/80\/revisions\/124"}],"wp:attachment":[{"href":"https:\/\/www.ksform.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}