{"id":88,"date":"2026-04-13T06:14:23","date_gmt":"2026-04-13T06:14:23","guid":{"rendered":"https:\/\/top-white.com\/?page_id=88"},"modified":"2026-04-13T06:28:07","modified_gmt":"2026-04-13T06:28:07","slug":"top8","status":"publish","type":"page","link":"https:\/\/top-white.com\/","title":{"rendered":"TOP8"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n\n\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n\n\n<title>TOP\u30db\u30ef\u30a4\u30c8 | \u6b21\u4e16\u4ee3IT\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3<\/title>\n\n\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700;900&amp;family=Noto+Sans+JP:wght@400;700;900&amp;display=swap\" rel=\"stylesheet\">\n\n\n\n<style>\n        :root {\n            --platinum-glow: rgba(229, 231, 235, 0.8);\n            --glass-bg: rgba(255, 255, 255, 0.5);\n            --glass-border: rgba(255, 255, 255, 0.8);\n        }\n\n        body {\n            font-family: 'Inter', 'Noto Sans JP', sans-serif;\n            background-color: #ffffff;\n            color: #1e293b;\n            overflow-x: hidden;\n            margin: 0;\n        }\n\n        \/* --- 1. \u52d5\u304f\u80cc\u666f\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3 --- *\/\n        .bg-grainy {\n            position: fixed;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            z-index: -10;\n            background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f1f5f9 100%);\n        }\n\n        \/* --- 2. \u5de8\u5927\u306a\u80cc\u666f\u30c6\u30ad\u30b9\u30c8 (\u4fee\u6b63\u306e\u8981) --- *\/\n        .bg-text-wrap {\n            position: fixed;\n            top: 0; left: 0;\n            width: 100vw; height: 100vh;\n            z-index: -5; \/* \u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u80cc\u5f8c *\/\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            pointer-events: none;\n            overflow: hidden;\n        }\n\n        .bg-text-huge {\n            font-size: 35vw; \/* \u753b\u9762\u3092\u8986\u3046\u30b5\u30a4\u30ba *\/\n            font-weight: 900;\n            color: rgba(229, 231, 235, 0.3); \/* \u30d7\u30e9\u30c1\u30ca\u8272\u3067\u8996\u8a8d\u6027\u3092\u78ba\u4fdd *\/\n            -webkit-text-stroke: 1px rgba(203, 213, 225, 0.5); \/* \u8f2a\u90ed\u7dda\u3067\u30c7\u30b6\u30a4\u30f3\u6027\u3092UP *\/\n            white-space: nowrap;\n            letter-spacing: -0.05em;\n            transform: rotate(-10deg);\n            will-change: transform;\n        }\n\n        \/* --- 3. Glassmorphism --- *\/\n        .glass-card {\n            background: var(--glass-bg);\n            backdrop-filter: blur(20px) saturate(160%);\n            -webkit-backdrop-filter: blur(20px) saturate(160%);\n            border: 1px solid var(--glass-border);\n            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);\n        }\n\n        \/* --- 4. \u30d2\u30fc\u30ed\u30fc\u30bb\u30af\u30b7\u30e7\u30f3\u6f14\u51fa --- *\/\n        #canvas-container {\n            position: fixed;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            z-index: -1;\n            pointer-events: none;\n        }\n\n        .hero-title {\n            font-size: clamp(3rem, 10vw, 8rem);\n            font-weight: 900;\n            line-height: 1.1;\n            letter-spacing: -0.04em;\n        }\n\n        \/* --- 5. \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 --- *\/\n        .fade-in-up {\n            opacity: 0;\n            transform: translateY(50px);\n            transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);\n        }\n        .fade-in-up.visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        \/* --- 6. Bento Grid --- *\/\n        .bento-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 2rem;\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        .bento-card {\n            border-radius: 3rem;\n            padding: 3rem;\n            transition: all 0.6s cubic-bezier(0.2, 0, 0, 1);\n        }\n        .bento-card:hover {\n            transform: scale(1.02);\n        }\n\n        @media (max-width: 1024px) {\n            .bento-grid { grid-template-columns: 1fr; }\n            .bg-text-huge { font-size: 50vw; }\n        }\n    <\/style>\n\n\n\n<div class=\"bg-grainy\"><\/div>\n\n\n\n<div class=\"bg-text-wrap\">\n        <div class=\"bg-text-huge\" id=\"parallaxText\">TOP WHITE<\/div>\n    <\/div>\n\n\n\n<div id=\"canvas-container\"><\/div>\n\n\n\n<div class=\"fixed top-10 left-10 z-50\">\n        <div class=\"text-2xl font-black tracking-tighter text-slate-800\">TOP WHITE<\/div>\n    <\/div>\n\n\n\n<main class=\"relative z-10\">\n        <section class=\"min-h-screen flex flex-col items-center justify-center text-center px-6\">\n            <div class=\"fade-in-up\">\n                <p class=\"text-xs font-bold tracking-[0.5em] text-slate-400 uppercase mb-6\">Innovative IT Strategy<\/p>\n                <h1 class=\"hero-title mb-8\">\n                    \u30d3\u30b8\u30cd\u30b9\u3092\u3001<br>\n                    <span class=\"bg-clip-text text-transparent bg-gradient-to-b from-slate-900 to-slate-400\">\u7814\u304e\u6f84\u307e\u305b\u3002<\/span>\n                <\/h1>\n                <p class=\"text-lg md:text-xl text-slate-500 max-w-xl mx-auto mb-12 font-light\">\n                    WEB\u30e1\u30c7\u30a3\u30a2\u30fb\u5e83\u544a\u30fb\u5236\u4f5c\u3092\u7d71\u5408\u3002<br>\n                    \u6700\u5148\u7aef\u306e\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u304c\u3001\u5727\u5012\u7684\u306a\u6210\u9577\u3092\u3082\u305f\u3089\u3057\u307e\u3059\u3002\n                <\/p>\n                <a href=\"#contact\" class=\"inline-block bg-slate-900 text-white px-12 py-5 rounded-full text-lg font-bold shadow-2xl hover:bg-slate-700 transition-all\">\n                    \u7121\u6599\u3067\u6226\u7565\u3092\u76f8\u8ac7\u3059\u308b\n                <\/a>\n            <\/div>\n        <\/section>\n\n        <!-- \u30b5\u30fc\u30d3\u30b9\u30bb\u30af\u30b7\u30e7\u30f3 -->\n        <section class=\"py-40 px-6\">\n            <div class=\"bento-grid\">\n                <div class=\"md:col-span-2 glass-card bento-card h-[500px] flex flex-col justify-end fade-in-up\">\n                    <h3 class=\"text-4xl font-black mb-4\">WEB\u30e1\u30c7\u30a3\u30a2\u904b\u55b6<\/h3>\n                    <p class=\"text-slate-500 max-w-md\">SEO\u3068\u30c7\u30fc\u30bf\u89e3\u6790\u3092\u99c6\u4f7f\u3057\u305f\u81ea\u793e\u30e1\u30c7\u30a3\u30a2\u904b\u55b6\u306e\u30ce\u30a6\u30cf\u30a6\u3092\u3001\u8cb4\u793e\u306e\u8cc7\u7523\u306b\u5909\u3048\u307e\u3059\u3002<\/p>\n                <\/div>\n                <div class=\"glass-card bento-card flex flex-col justify-between fade-in-up\" style=\"transition-delay: 0.1s;\">\n                    <div class=\"w-16 h-16 bg-slate-900 rounded-2xl flex items-center justify-center text-white\">\n                        <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path><\/svg>\n                    <\/div>\n                    <div>\n                        <h3 class=\"text-2xl font-bold mb-2\">\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u5e83\u544a<\/h3>\n                        <p class=\"text-slate-500\">ROAS\u3092\u6975\u9650\u307e\u3067\u9ad8\u3081\u308b\u904b\u7528\u6226\u7565\u3002<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"glass-card bento-card flex flex-col justify-between fade-in-up\" style=\"transition-delay: 0.2s;\">\n                    <div class=\"w-16 h-16 bg-white border border-slate-100 rounded-2xl flex items-center justify-center\">\n                        <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"><\/path><\/svg>\n                    <\/div>\n                    <div>\n                        <h3 class=\"text-2xl font-bold mb-2\">\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u5236\u4f5c<\/h3>\n                        <p class=\"text-slate-500\">\u611f\u6027\u306b\u97ff\u304f\u3001\u6700\u9ad8\u54c1\u8cea\u306e\u30c7\u30b6\u30a4\u30f3\u3002<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"md:col-span-2 glass-card bento-card h-[400px] flex flex-col justify-center items-center text-center fade-in-up\">\n                    <h3 class=\"text-4xl font-black mb-6\">\u6700\u77ed\u5373\u65e5\u5bfe\u5fdc\u3002<\/h3>\n                    <p class=\"text-slate-400 mb-8\">\u30b9\u30d4\u30fc\u30c9\u306f\u4fe1\u983c\u3002\u79c1\u305f\u3061\u306f\u6b62\u307e\u308a\u307e\u305b\u3093\u3002<\/p>\n                    <button class=\"border border-slate-200 px-8 py-3 rounded-full hover:bg-white transition-all\">\u5b9f\u7e3e\u3092\u3082\u3063\u3068\u898b\u308b<\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- CTA -->\n        <section id=\"contact\" class=\"py-60 text-center px-6\">\n            <div class=\"fade-in-up\">\n                <h2 class=\"text-5xl md:text-8xl font-black mb-12\">NEXT STEP.<\/h2>\n                <div class=\"glass-card max-w-4xl mx-auto rounded-[4rem] p-12 md:p-20\">\n                    <p class=\"text-2xl text-slate-500 mb-10\">\u30d3\u30b8\u30cd\u30b9\u306e\u672a\u6765\u3092\u3001\u767d\u7d19\u304b\u3089\u63cf\u304d\u76f4\u3059\u3002<\/p>\n                    <button class=\"bg-slate-900 text-white px-16 py-6 rounded-full text-2xl font-bold hover:scale-105 transition-transform shadow-2xl\">\n                        \u7121\u6599\u76f8\u8ac7\u3092\u4e88\u7d04\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n\n\n\n<footer class=\"py-10 text-center text-slate-300 text-sm tracking-widest uppercase\">\n        \u00a9 2025 TOP WHITE. ALL RIGHTS RESERVED.\n    <\/footer>\n\n\n\n<script>\n        \/\/ --- Three.js (3D Object) ---\n        let scene, camera, renderer, mesh;\n        function initThree() {\n            scene = new THREE.Scene();\n            camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n            renderer.setSize(window.innerWidth, window.innerHeight);\n            renderer.setPixelRatio(window.devicePixelRatio);\n            document.getElementById('canvas-container').appendChild(renderer.domElement);\n\n            const geometry = new THREE.TorusKnotGeometry(1.5, 0.4, 100, 16);\n            const material = new THREE.MeshPhysicalMaterial({\n                color: 0xffffff,\n                metalness: 0.9,\n                roughness: 0.1,\n                wireframe: true,\n                transparent: true,\n                opacity: 0.3\n            });\n            mesh = new THREE.Mesh(geometry, material);\n            scene.add(mesh);\n\n            const light = new THREE.DirectionalLight(0xffffff, 1);\n            light.position.set(5, 5, 5);\n            scene.add(light);\n            scene.add(new THREE.AmbientLight(0xffffff, 0.5));\n\n            camera.position.z = 5;\n        }\n\n        function animate() {\n            requestAnimationFrame(animate);\n            mesh.rotation.x += 0.005;\n            mesh.rotation.y += 0.005;\n            renderer.render(scene, camera);\n        }\n\n        \/\/ --- \u30d1\u30e9\u30e9\u30c3\u30af\u30b9\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 (\u80cc\u666f\u30c6\u30ad\u30b9\u30c8\u7528) ---\n        function handleScroll() {\n            const scrollY = window.scrollY;\n            const parallaxText = document.getElementById('parallaxText');\n            \n            \/\/ \u30c6\u30ad\u30b9\u30c8\u306e\u79fb\u52d5\u91cf\u3092\u8a2d\u5b9a (\u30b9\u30af\u30ed\u30fc\u30eb\u306b\u5408\u308f\u305b\u659c\u3081\u306b\u79fb\u52d5)\n            const moveX = scrollY * 0.2;\n            const moveY = scrollY * 0.05;\n            \n            parallaxText.style.transform = `translate3d(${-moveX}px, ${moveY}px, 0) rotate(-10deg)`;\n        }\n\n        \/\/ --- Intersection Observer (\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3) ---\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) entry.target.classList.add('visible');\n            });\n        }, { threshold: 0.1 });\n\n        window.onload = () => {\n            initThree();\n            animate();\n            document.querySelectorAll('.fade-in-up').forEach(el => observer.observe(el));\n            window.addEventListener('scroll', handleScroll);\n        };\n\n        window.addEventListener('resize', () => {\n            camera.aspect = window.innerWidth \/ window.innerHeight;\n            camera.updateProjectionMatrix();\n            renderer.setSize(window.innerWidth, window.innerHeight);\n        });\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>TOP\u30db\u30ef\u30a4\u30c8 | \u6b21\u4e16\u4ee3IT\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3 TOP WHITE TOP WHITE Innovative IT Strategy \u30d3\u30b8\u30cd\u30b9\u3092\u3001 \u7814\u304e\u6f84\u307e\u305b\u3002 WEB\u30e1\u30c7\u30a3\u30a2\u30fb\u5e83\u544a\u30fb\u5236\u4f5c\u3092\u7d71\u5408\u3002 \u6700\u5148\u7aef\u306e\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u304c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-88","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/pages\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":4,"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/pages\/88\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/pages\/88\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/media?parent=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}