{"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-24T01:51:43","modified_gmt":"2026-04-24T01:51:43","slug":"top8","status":"publish","type":"page","link":"https:\/\/top-white.com\/index.php\/top8\/","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>TOPwhite<\/title>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700;900&amp;family=Noto+Sans+JP:wght@400;500;700;800;900&amp;display=swap\" rel=\"stylesheet\">\n\n\n\n<style>\n\/* =========================\n   \u57fa\u672c\u8a2d\u5b9a\u30fb\u30ea\u30bb\u30c3\u30c8\n========================= *\/\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Noto Sans JP\", \"Inter\", sans-serif;\n  color: #0f172a;\n  background:\n    radial-gradient(circle at 16% 18%, rgba(255, 232, 184, 0.20), transparent 18%),\n    radial-gradient(circle at 84% 22%, rgba(159, 185, 255, 0.14), transparent 18%),\n    radial-gradient(circle at 78% 76%, rgba(255, 237, 197, 0.16), transparent 20%),\n    linear-gradient(180deg, #f8fbff 0%, #f4f6fb 100%);\n  line-height: 1.7;\n  overflow-x: hidden;\n}\n\nimg {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n:root {\n  --bg: #f7f8fb;\n  --white: #ffffff;\n  --text: #0f172a;\n  --muted: #5b6475;\n  --line: #e7ebf2;\n  --gold: #c9a34a;\n  --gold-deep: #b78726;\n  --gold-soft: #efe2bf;\n  --gold-light: #f8f1de;\n  --blue: #2457ff;\n  --blue-dark: #183ab8;\n  --tech-blue: #1ea7ff;\n  --tech-cyan: #8af5ff;\n  --tech-white: #ecfdff;\n  --tech-magenta: #ff2a85;\n  --tech-purple: #9d4edd;\n  --container: min(1440px, calc(100% - 64px));\n}\n\n\/* \u91cd\u8907\u30d8\u30c3\u30c0\u30fc\u306a\u3069\u3092\u975e\u8868\u793a *\/\n.hero-name-card,\n.hero-top-card,\n.hero-title-card,\n.topwhite-name-card,\n.name-card,\n.hero-duplicate-header,\n.hero-banner-card,\n.site-header,\n.header-inner,\n.site-logo,\n.site-logo-mark,\n.site-logo-text,\n.site-nav {\n  display: none !important;\n}\n\n\/* =========================\n   \u56fa\u5b9a\u80cc\u666f TOPwhite\n========================= *\/\n.site-fixed-bg {\n  position: fixed;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.site-fixed-bg-word-wrap {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.site-fixed-bg-word {\n  position: relative;\n  font-family: \"Inter\", \"Noto Sans JP\", sans-serif;\n  font-size: clamp(140px, 22vw, 420px);\n  font-weight: 900;\n  letter-spacing: -0.08em;\n  line-height: 0.9;\n  white-space: nowrap;\n  user-select: none;\n  color: rgba(214, 226, 255, 0.18);\n  -webkit-text-stroke: 2px rgba(170, 192, 255, 0.52);\n  text-shadow:\n    0 0 1px rgba(255,255,255,0.95),\n    0 0 20px rgba(255,255,255,0.38),\n    0 0 36px rgba(141,168,255,0.14),\n    0 0 60px rgba(201,163,74,0.08);\n  animation: bgWordFloat 8s ease-in-out infinite, bgWordPulse 5s ease-in-out infinite;\n}\n\n.site-fixed-bg-word::before,\n.site-fixed-bg-word::after {\n  content: attr(data-text);\n  position: absolute;\n  inset: 0;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.site-fixed-bg-word::before {\n  color: transparent;\n  -webkit-text-stroke: 2.8px rgba(198,213,255,0.42);\n  filter: blur(1px);\n  animation: bgWordOutlineShift 6s ease-in-out infinite;\n}\n\n.site-fixed-bg-word::after {\n  color: rgba(255,255,255,0.10);\n  filter: blur(18px);\n  transform: scale(1.02);\n  animation: bgWordGlow 4.8s ease-in-out infinite;\n}\n\n.site-fixed-bg-glow {\n  position: absolute;\n  border-radius: 999px;\n  filter: blur(60px);\n  opacity: 0.42;\n}\n\n.site-fixed-bg-glow-1 {\n  width: 360px;\n  height: 360px;\n  left: 10%;\n  top: 20%;\n  background: rgba(255, 226, 170, 0.30);\n  animation: glowMove1 10s ease-in-out infinite;\n}\n\n.site-fixed-bg-glow-2 {\n  width: 430px;\n  height: 430px;\n  right: 8%;\n  bottom: 10%;\n  background: rgba(111, 142, 255, 0.24);\n  animation: glowMove2 12s ease-in-out infinite;\n}\n\n.site-fixed-bg-shine {\n  position: absolute;\n  top: -20%;\n  left: -35%;\n  width: 24%;\n  height: 170%;\n  background: linear-gradient(\n    90deg,\n    rgba(255,255,255,0) 0%,\n    rgba(255,255,255,0.06) 38%,\n    rgba(255,255,255,0.34) 50%,\n    rgba(255,255,255,0.06) 62%,\n    rgba(255,255,255,0) 100%\n  );\n  transform: skewX(-18deg);\n  animation: shineSweep 7s linear infinite;\n}\n\n.site-page {\n  position: relative;\n  z-index: 1;\n}\n\n@keyframes bgWordFloat {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-10px); }\n}\n\n@keyframes bgWordPulse {\n  0%, 100% { opacity: 0.85; }\n  50% { opacity: 1; }\n}\n\n@keyframes bgWordOutlineShift {\n  0%, 100% { transform: translate(0, 0); }\n  50% { transform: translate(4px, -4px); }\n}\n\n@keyframes bgWordGlow {\n  0%, 100% { opacity: 0.45; }\n  50% { opacity: 0.8; }\n}\n\n@keyframes glowMove1 {\n  0%, 100% { transform: translate(0, 0) scale(1); }\n  50% { transform: translate(30px, -20px) scale(1.05); }\n}\n\n@keyframes glowMove2 {\n  0%, 100% { transform: translate(0, 0) scale(1); }\n  50% { transform: translate(-30px, 20px) scale(1.08); }\n}\n\n@keyframes shineSweep {\n  0% { transform: translateX(0) skewX(-18deg); }\n  100% { transform: translateX(650%) skewX(-18deg); }\n}\n\n@keyframes chipFloat {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-8px); }\n}\n\n\/* =========================\n   HERO\n========================= *\/\n.hero {\n  position: relative;\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n\n  \/* \u5909\u66f4\u7b87\u6240\uff1a\u30d8\u30c3\u30c0\u30fc\u30e1\u30cb\u30e5\u30fc\u4e0b\u306e\u4f59\u767d\u3092\u524a\u9664 *\/\n  padding: 0 0 80px;\n\n  background: transparent;\n  overflow: hidden;\n}\n\n.hero::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255,255,255,0.14) 0%,\n    rgba(255,255,255,0.02) 24%,\n    rgba(255,255,255,0.02) 76%,\n    rgba(255,255,255,0.14) 100%\n  );\n  pointer-events: none;\n}\n\n.hero-inner {\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  margin: 0;\n  display: grid;\n  grid-template-columns: 1fr;\n\n  \/* \u5909\u66f4\u7b87\u6240\uff1a\u4e0a\u90e8\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068\u306e\u4f59\u767d\u3092\u8a70\u3081\u308b *\/\n  gap: 0;\n\n  align-items: start;\n}\n\n.hero-copy {\n  position: relative;\n  z-index: 2;\n  width: var(--container);\n  max-width: 980px;\n  margin: 38px auto 0;\n  padding: 34px 34px 30px;\n  border-radius: 34px;\n  background: rgba(255,255,255,0.72);\n  border: 1px solid rgba(201,163,74,0.18);\n  box-shadow: 0 16px 40px rgba(15,23,42,0.06), 0 4px 18px rgba(201,163,74,0.06);\n  backdrop-filter: blur(10px);\n}\n\n.hero-sub {\n  margin: 0 0 18px;\n  font-size: 13px;\n  letter-spacing: 0.20em;\n  text-transform: uppercase;\n  color: #8f7440;\n  font-weight: 800;\n}\n\n.hero h1 {\n  margin: 0 0 28px;\n  font-size: clamp(48px, 5vw, 92px);\n  line-height: 1.04;\n  letter-spacing: -0.04em;\n  font-weight: 900;\n  color: #0b1730;\n}\n\n.hero-text {\n  max-width: 720px;\n  margin: 0 0 34px;\n  font-size: 20px;\n  line-height: 2;\n  color: #334155;\n  font-weight: 600;\n}\n\n.hero-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  margin-bottom: 42px;\n}\n\n.btn {\n  min-width: 220px;\n  min-height: 62px;\n  padding: 0 28px;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  transition: 0.35s ease;\n  border: none;\n  cursor: pointer;\n}\n\n.btn:hover {\n  transform: translateY(-3px);\n}\n\n.btn-primary {\n  color: #fff;\n  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);\n  box-shadow: 0 16px 32px rgba(36,87,255,0.25), 0 0 0 1px rgba(201,163,74,0.14);\n}\n\n.btn-secondary {\n  color: var(--text);\n  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(249,244,232,0.80));\n  border: 1px solid rgba(201,163,74,0.42);\n  box-shadow: 0 10px 24px rgba(201,163,74,0.10), inset 0 1px 0 rgba(255,255,255,0.92);\n  backdrop-filter: blur(10px);\n}\n\n.service-mini-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 18px;\n}\n\n.service-mini-card {\n  position: relative;\n  padding: 26px 22px;\n  border-radius: 28px;\n  background: rgba(255,255,255,0.62);\n  border: 1px solid rgba(201,163,74,0.18);\n  box-shadow: 0 14px 34px rgba(15,23,42,0.05), 0 4px 18px rgba(201,163,74,0.06);\n  backdrop-filter: blur(12px);\n  overflow: hidden;\n}\n\n.service-mini-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 0 auto 0;\n  height: 2px;\n  background: linear-gradient(90deg, rgba(201,163,74,0.06), rgba(201,163,74,0.72), rgba(201,163,74,0.06));\n}\n\n.service-mini-card span {\n  display: block;\n  margin-bottom: 14px;\n  font-size: 12px;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: #9b8141;\n  font-weight: 700;\n}\n\n.service-mini-card h3 {\n  margin: 0;\n  font-size: 27px;\n  line-height: 1.45;\n  font-weight: 800;\n}\n\n\/* =========================\n   HERO VISUAL & CHIPS\n========================= *\/\n.hero-visual {\n  position: relative;\n  z-index: 1;\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n\n  \/* \u5909\u66f4\u7b87\u6240\uff1a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4e0a\u306b\u5bc6\u7740 *\/\n  margin-top: 0;\n}\n\n.visual-card {\n  position: relative;\n  width: 100%;\n  min-height: 860px;\n  padding: 0;\n  border-radius: 0;\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  overflow: hidden;\n}\n\n.floating-chip {\n  position: absolute;\n  z-index: 50;\n  min-height: 58px;\n  padding: 0 28px;\n  display: inline-flex;\n  align-items: center;\n  border-radius: 999px;\n  background: linear-gradient(180deg, rgba(255,249,238,0.90), rgba(248,239,215,0.78));\n  border: 1px solid rgba(201,163,74,0.36);\n  color: #bb9238;\n  font-size: 14px;\n  font-weight: 800;\n  letter-spacing: 0.13em;\n  text-transform: uppercase;\n  box-shadow: 0 10px 28px rgba(201,163,74,0.12), inset 0 1px 0 rgba(255,255,255,0.90);\n  backdrop-filter: blur(8px);\n  animation: chipFloat 5s ease-in-out infinite;\n}\n\n.chip-left {\n  top: 18px;\n  left: 18px;\n}\n\n.chip-right {\n  top: 118px;\n  right: 20px;\n  animation-delay: 1s;\n}\n\n.future-visual-stage {\n  position: absolute;\n  inset: 0;\n  border-radius: 0;\n  overflow: hidden;\n  background: radial-gradient(circle at 50% 50%, #0c0822 0%, #03040a 60%, #000000 100%);\n  perspective: 2000px;\n  box-shadow: inset 0 0 150px rgba(138, 245, 255, 0.1);\n}\n\n.future-visual-stage::before {\n  content: \"\";\n  position: absolute;\n  inset: -50%;\n  background-image: \n    linear-gradient(rgba(30, 167, 255, 0.05) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(30, 167, 255, 0.05) 1px, transparent 1px);\n  background-size: 50px 50px;\n  transform: rotateX(60deg) translateZ(-200px);\n  animation: gridMove 20s linear infinite;\n  pointer-events: none;\n}\n\n@keyframes gridMove {\n  0% { transform: rotateX(60deg) translateZ(-200px) translateY(0); }\n  100% { transform: rotateX(60deg) translateZ(-200px) translateY(50px); }\n}\n\n.binary-rain {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  opacity: 0.15;\n  pointer-events: none;\n  overflow: hidden;\n}\n\n.binary-column {\n  position: absolute;\n  top: -100%;\n  color: #8af5ff;\n  font-family: monospace;\n  font-size: 14px;\n  font-weight: bold;\n  line-height: 1.2;\n  text-align: center;\n  width: 20px;\n  word-wrap: break-word;\n  animation: fall linear infinite;\n  text-shadow: 0 0 5px #1ea7ff;\n}\n\n@keyframes fall {\n  to { transform: translateY(200vh); }\n}\n\n.data-streams {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.stream-line {\n  position: absolute;\n  background: linear-gradient(90deg, transparent, var(--color), #fff, transparent);\n  height: 2px;\n  width: 200px;\n  opacity: 0;\n  animation: streamShoot linear infinite;\n  border-radius: 0;\n  box-shadow: 0 0 10px var(--color), 0 0 20px var(--color);\n}\n\n@keyframes streamShoot {\n  0% { transform: translateX(-100%) scaleX(0.5); opacity: 0; }\n  10% { opacity: 1; }\n  90% { opacity: 1; }\n  100% { transform: translateX(100vw) scaleX(2); opacity: 0; }\n}\n\n.v3d-universe {\n  position: absolute;\n  inset: 0;\n  transform-style: preserve-3d;\n  animation: universeDrift 40s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;\n  z-index: 10;\n}\n\n@keyframes universeDrift {\n  0% { transform: rotateX(8deg) rotateY(-10deg) scale(1.05); }\n  50% { transform: rotateX(-2deg) rotateY(5deg) scale(1); }\n  100% { transform: rotateX(5deg) rotateY(12deg) scale(1.08); }\n}\n\n.v3d-wireframe {\n  position: absolute;\n  inset: -50%;\n  transform-style: preserve-3d;\n  animation: wireRotate 120s linear infinite;\n}\n\n@keyframes wireRotate {\n  0% { transform: rotateY(0deg) rotateZ(0deg) rotateX(10deg); }\n  100% { transform: rotateY(360deg) rotateZ(180deg) rotateX(-10deg); }\n}\n\n.v3d-line {\n  position: absolute;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(138, 245, 255, 0.6), transparent);\n  box-shadow: 0 0 15px rgba(138, 245, 255, 0.8), 0 0 30px rgba(30, 167, 255, 0.5);\n  transform-origin: left center;\n  animation: linePulse 3s infinite alternate;\n}\n\n@keyframes linePulse {\n  0% { opacity: 0.3; }\n  100% { opacity: 1; box-shadow: 0 0 20px rgba(138, 245, 255, 1), 0 0 40px rgba(255, 42, 133, 0.6); }\n}\n\n.v3d-l-1 { top: 30%; left: 10%; width: 60%; transform: rotate3d(1, 1, 0, 45deg) translateZ(-200px); }\n.v3d-l-2 { top: 60%; left: 30%; width: 80%; transform: rotate3d(-1, 1, 0.5, 60deg) translateZ(150px); background: linear-gradient(90deg, transparent, rgba(255, 42, 133, 0.6), transparent); }\n.v3d-l-3 { top: 20%; left: 50%; width: 50%; transform: rotate3d(0, 1, 1, -30deg) translateZ(-300px); }\n.v3d-l-4 { top: 80%; left: 20%; width: 70%; transform: rotate3d(1, 0, 1, 80deg) translateZ(50px); background: linear-gradient(90deg, transparent, rgba(157, 78, 221, 0.6), transparent); }\n.v3d-l-5 { top: 40%; left: 10%; width: 90%; transform: rotate3d(0.5, -1, 0.5, -50deg) translateZ(250px); }\n.v3d-l-6 { top: 70%; left: 40%; width: 60%; transform: rotate3d(1, -0.5, 0, 70deg) translateZ(-100px); }\n.v3d-l-7 { top: 10%; left: -20%; width: 100%; transform: rotate3d(0, 1, 0, 20deg) translateZ(100px); background: linear-gradient(90deg, transparent, rgba(255, 42, 133, 0.5), transparent); }\n.v3d-l-8 { top: 90%; left: 50%; width: 80%; transform: rotate3d(1, 1, -1, -40deg) translateZ(-150px); }\n.v3d-l-9 { top: 50%; left: 20%; width: 60%; transform: rotate3d(1, -1, 1, 30deg) translateZ(200px); }\n.v3d-l-10 { top: 25%; left: 60%; width: 45%; transform: rotate3d(-1, 0, 1, -60deg) translateZ(-50px); background: linear-gradient(90deg, transparent, rgba(157, 78, 221, 0.8), transparent); }\n\n.v3d-node {\n  position: absolute;\n  width: 6px;\n  height: 6px;\n  border-radius: 0;\n  background: #fff;\n  box-shadow: 0 0 20px 6px #8af5ff, 0 0 40px 10px rgba(30, 167, 255, 0.8);\n  animation: nodePulse 1.5s ease-in-out infinite alternate;\n}\n\n.v3d-n-1 { top: 45%; left: 35%; transform: translateZ(-50px) rotate(45deg); }\n.v3d-n-2 { top: 70%; left: 65%; transform: translateZ(120px) rotate(45deg); animation-delay: 0.7s; box-shadow: 0 0 20px 6px #ff2a85; }\n.v3d-n-3 { top: 25%; left: 70%; transform: translateZ(-180px) rotate(45deg); animation-delay: 0.3s; box-shadow: 0 0 20px 6px #9d4edd; }\n.v3d-n-4 { top: 85%; left: 25%; transform: translateZ(80px) rotate(45deg); animation-delay: 1.1s; }\n.v3d-n-5 { top: 15%; left: 40%; transform: translateZ(150px) rotate(45deg); animation-delay: 0.5s; }\n.v3d-n-6 { top: 60%; left: 20%; transform: translateZ(-120px) rotate(45deg); animation-delay: 0.9s; box-shadow: 0 0 20px 6px #ff2a85; }\n\n@keyframes nodePulse {\n  0% { opacity: 0.5; transform: scale(0.8) translateZ(var(--tz)) rotate(45deg); }\n  100% { opacity: 1; transform: scale(1.8) translateZ(var(--tz)) rotate(45deg); }\n}\n\n.v3d-base-container {\n  position: absolute;\n  bottom: -20%;\n  left: 50%;\n  width: 800px;\n  height: 800px;\n  margin-left: -400px;\n  transform-style: preserve-3d;\n  transform: rotateX(75deg) rotateZ(45deg);\n}\n\n.v3d-base-grid {\n  position: absolute;\n  inset: 0;\n  border-radius: 0;\n  border: 2px solid rgba(138, 245, 255, 0.3);\n  background-image:\n    linear-gradient(rgba(30, 167, 255, 0.2) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(30, 167, 255, 0.2) 1px, transparent 1px);\n  background-size: 50px 50px;\n  box-shadow:\n    inset 0 0 100px rgba(30, 167, 255, 0.5),\n    0 0 80px rgba(30, 167, 255, 0.3);\n  transform-style: preserve-3d;\n  animation: gridPulse 4s linear infinite alternate;\n}\n\n@keyframes gridPulse {\n  0% { box-shadow: inset 0 0 50px rgba(30, 167, 255, 0.2), 0 0 40px rgba(30, 167, 255, 0.1); }\n  100% { box-shadow: inset 0 0 100px rgba(30, 167, 255, 0.6), 0 0 80px rgba(30, 167, 255, 0.4); }\n}\n\n.v3d-scanner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(to bottom, transparent, rgba(138, 245, 255, 0.4) 50%, transparent);\n  animation: scanLineCube 4s linear infinite;\n}\n\n@keyframes scanLineCube {\n  0% { transform: translateY(-100%); }\n  100% { transform: translateY(100%); }\n}\n\n.v3d-pillar {\n  position: absolute;\n  width: 12px;\n  height: 400px;\n  background: linear-gradient(to top, rgba(138, 245, 255, 0.9), transparent);\n  box-shadow: 0 0 30px rgba(138, 245, 255, 0.8);\n  transform-origin: bottom center;\n  transform: rotateX(-90deg) translateZ(10px);\n}\n\n.v3d-pillar::before {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  background: rgba(138, 245, 255, 1);\n  transform: rotateX(90deg);\n  transform-origin: bottom;\n}\n\n.v3d-p-1 { top: 30%; left: 40%; animation: pillarGrow 3s ease-in-out infinite alternate; }\n.v3d-p-2 { top: 60%; left: 70%; height: 250px; background: linear-gradient(to top, rgba(255, 42, 133, 0.9), transparent); box-shadow: 0 0 30px rgba(255, 42, 133, 0.8); animation: pillarGrow 4s ease-in-out infinite alternate 1s; }\n.v3d-p-2::before { background: rgba(255, 42, 133, 1); }\n.v3d-p-3 { top: 45%; left: 20%; height: 500px; background: linear-gradient(to top, rgba(157, 78, 221, 0.9), transparent); box-shadow: 0 0 30px rgba(157, 78, 221, 0.8); animation: pillarGrow 3.5s ease-in-out infinite alternate 0.5s; }\n.v3d-p-3::before { background: rgba(157, 78, 221, 1); }\n.v3d-p-4 { top: 75%; left: 40%; height: 300px; background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent); animation: pillarGrow 2.5s ease-in-out infinite alternate 1.5s; }\n.v3d-p-4::before { background: rgba(255, 255, 255, 1); }\n\n@keyframes pillarGrow {\n  0% { transform: rotateX(-90deg) translateZ(10px) scaleY(0.1); opacity: 0; }\n  100% { transform: rotateX(-90deg) translateZ(10px) scaleY(1); opacity: 1; }\n}\n\n.v3d-sphere-net {\n  position: absolute;\n  top: 40%;\n  left: 50%;\n  width: 320px;\n  height: 320px;\n  margin-top: -160px;\n  margin-left: -160px;\n  transform-style: preserve-3d;\n  animation: cubeRotate 25s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;\n  z-index: 20;\n}\n\n@keyframes cubeRotate {\n  0% { transform: rotateY(0deg) rotateX(15deg) rotateZ(0deg); }\n  50% { transform: rotateY(180deg) rotateX(-25deg) rotateZ(20deg); }\n  100% { transform: rotateY(360deg) rotateX(35deg) rotateZ(-20deg); }\n}\n\n.v3d-ring {\n  position: absolute;\n  inset: 0;\n  border-radius: 0;\n  border: 2px solid rgba(138, 245, 255, 0.5);\n  box-shadow: 0 0 20px rgba(30, 167, 255, 0.3), inset 0 0 20px rgba(30, 167, 255, 0.3);\n  transform-style: preserve-3d;\n  background: rgba(30, 167, 255, 0.02);\n}\n\n.v3d-r-x { transform: translateZ(160px); animation: cubeFacePulse 2s infinite alternate; }\n.v3d-r-y { transform: translateZ(-160px); border: 2px dashed rgba(138, 245, 255, 0.6); }\n.v3d-r-z { transform: rotateY(90deg) translateZ(160px); border: 2px solid rgba(255, 42, 133, 0.5); box-shadow: 0 0 30px rgba(255, 42, 133, 0.4); animation: cubeFacePulse 3s infinite alternate-reverse; }\n.v3d-r-c1 { transform: rotateY(-90deg) translateZ(160px); border-color: rgba(157, 78, 221, 0.5); }\n.v3d-r-c2 { transform: rotateX(90deg) translateZ(160px); border-color: rgba(255, 255, 255, 0.3); }\n.v3d-r-lat1 { transform: rotateX(-90deg) translateZ(160px); border-width: 1px; opacity: 0.5; }\n.v3d-r-lat2 { transform: rotateX(45deg) rotateY(45deg) scale(1.2); border-width: 1px; border-color: #8af5ff; opacity: 0.3; }\n\n@keyframes cubeFacePulse {\n  0% { box-shadow: 0 0 10px rgba(138, 245, 255, 0.2); background: rgba(30, 167, 255, 0.01); }\n  100% { box-shadow: 0 0 40px rgba(138, 245, 255, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.5); background: rgba(30, 167, 255, 0.05); }\n}\n\n.v3d-ring-icon {\n  position: absolute;\n  top: -15px;\n  left: 50%;\n  margin-left: -15px;\n  width: 30px;\n  height: 30px;\n  background: rgba(3, 4, 10, 0.9);\n  border: 2px solid #8af5ff;\n  border-radius: 0;\n  box-shadow: 0 0 20px #8af5ff;\n  animation: counterRotateCube 10s linear infinite;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.v3d-ring-icon::before {\n  content: \"\";\n  width: 12px;\n  height: 12px;\n  background: #fff;\n  border-radius: 0;\n  box-shadow: 0 0 10px #fff;\n  animation: flash 0.5s infinite alternate;\n}\n\n@keyframes flash {\n  from { opacity: 0.2; }\n  to { opacity: 1; }\n}\n\n@keyframes counterRotateCube {\n  0% { transform: rotateZ(0deg); }\n  100% { transform: rotateZ(-360deg); }\n}\n\n.v3d-r-z .v3d-ring-icon {\n  border-color: #ff2a85;\n  box-shadow: 0 0 25px #ff2a85;\n  animation-direction: reverse;\n  animation-duration: 15s;\n}\n\n.v3d-core {\n  position: absolute;\n  inset: 100px;\n  background: linear-gradient(135deg, #ffffff 0%, #8af5ff 30%, #1ea7ff 60%, #081e59 100%);\n  border-radius: 0;\n  transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);\n  box-shadow:\n    0 0 80px #1ea7ff,\n    0 0 150px rgba(138, 245, 255, 0.9),\n    inset 0 0 40px #fff;\n  animation: coreBreathCube 1.5s ease-in-out infinite alternate, coreSpinCube 10s linear infinite;\n}\n\n.v3d-core::after {\n  content: \"\";\n  position: absolute;\n  inset: -20px;\n  border-radius: 0;\n  border: 2px solid rgba(255,255,255,0.8);\n  filter: blur(4px);\n  animation: corePulseWaveCube 2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;\n}\n\n@keyframes coreSpinCube {\n  0% { transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg); }\n  100% { transform: rotateX(45deg) rotateY(360deg) rotateZ(45deg); }\n}\n\n@keyframes coreBreathCube {\n  0% { transform: rotateX(45deg) rotateY(var(--ry, 0deg)) rotateZ(45deg) scale(0.85); box-shadow: 0 0 60px #1ea7ff, 0 0 100px rgba(138, 245, 255, 0.5); }\n  100% { transform: rotateX(45deg) rotateY(var(--ry, 0deg)) rotateZ(45deg) scale(1.15); box-shadow: 0 0 120px #1ea7ff, 0 0 200px rgba(138, 245, 255, 1), 0 0 50px #fff; }\n}\n\n@keyframes corePulseWaveCube {\n  0% { transform: scale(0.8); opacity: 1; }\n  100% { transform: scale(2.5); opacity: 0; border-width: 10px; }\n}\n\n.v3d-hud {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 16px 24px;\n  border-radius: 4px;\n  background: linear-gradient(135deg, rgba(5, 12, 35, 0.85), rgba(2, 6, 20, 0.95));\n  border: 1px solid rgba(138, 245, 255, 0.5);\n  border-top: 2px solid #8af5ff;\n  box-shadow:\n    0 20px 50px rgba(0, 0, 0, 0.8),\n    inset 0 0 30px rgba(30, 167, 255, 0.3),\n    0 0 20px rgba(138, 245, 255, 0.2);\n  backdrop-filter: blur(12px);\n  transform-style: preserve-3d;\n  z-index: 30;\n  overflow: hidden;\n}\n\n.v3d-hud::after {\n  content: \"\";\n  position: absolute;\n  top: -50%;\n  left: 0;\n  right: 0;\n  height: 200%;\n  background: linear-gradient(to bottom, transparent, rgba(138, 245, 255, 0.2), transparent);\n  animation: hudScan 3s linear infinite;\n  pointer-events: none;\n}\n\n@keyframes hudScan {\n  0% { transform: translateY(-50%); }\n  100% { transform: translateY(50%); }\n}\n\n.v3d-hud::before {\n  content: \"\";\n  position: absolute;\n  left: 0px;\n  top: 15%;\n  height: 70%;\n  width: 4px;\n  background: #8af5ff;\n  box-shadow: 0 0 15px #8af5ff, 0 0 5px #fff;\n  border-radius: 0;\n}\n\n.v3d-hud-icon {\n  width: 32px;\n  height: 32px;\n  border: 2px solid rgba(138, 245, 255, 0.7);\n  border-radius: 4px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: inset 0 0 10px rgba(138, 245, 255, 0.5);\n}\n\n.v3d-hud-icon::after {\n  content: \"\";\n  width: 12px;\n  height: 12px;\n  background: #8af5ff;\n  border-radius: 2px;\n  box-shadow: 0 0 15px #8af5ff, 0 0 30px #fff;\n  animation: iconFlash 0.8s infinite alternate;\n}\n\n.v3d-hud-text span {\n  display: block;\n  font-size: 11px;\n  color: #8af5ff;\n  letter-spacing: 0.2em;\n  font-weight: 800;\n  margin-bottom: 4px;\n  text-shadow: 0 0 5px rgba(138, 245, 255, 0.5);\n}\n\n.v3d-hud-text strong {\n  display: block;\n  font-size: 16px;\n  color: #fff;\n  font-weight: 900;\n  letter-spacing: 0.08em;\n  text-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(30, 167, 255, 0.8);\n}\n\n.v3d-hud-1 {\n  top: 15%;\n  left: 5%;\n  transform: translateZ(120px) rotateY(20deg);\n  animation: floatH1 4s ease-in-out infinite alternate;\n}\n\n.v3d-hud-2 {\n  top: 55%;\n  left: 2%;\n  transform: translateZ(180px) rotateY(30deg);\n  animation: floatH2 5s ease-in-out infinite alternate;\n}\n\n.v3d-hud-3 {\n  top: 25%;\n  right: 5%;\n  transform: translateZ(140px) rotateY(-25deg);\n  animation: floatH3 4.5s ease-in-out infinite alternate;\n}\n\n.v3d-hud-2 {\n  border-top-color: #ff2a85;\n  box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 30px rgba(255, 42, 133, 0.3), 0 0 20px rgba(255, 42, 133, 0.2);\n}\n\n.v3d-hud-2::before {\n  background: #ff2a85;\n  box-shadow: 0 0 15px #ff2a85, 0 0 5px #fff;\n}\n\n.v3d-hud-2 .v3d-hud-icon {\n  border-color: rgba(255, 42, 133, 0.7);\n  box-shadow: inset 0 0 10px rgba(255, 42, 133, 0.5);\n}\n\n.v3d-hud-2 .v3d-hud-icon::after {\n  background: #ff2a85;\n  box-shadow: 0 0 15px #ff2a85, 0 0 30px #fff;\n}\n\n.v3d-hud-2 .v3d-hud-text span {\n  color: #ff2a85;\n  text-shadow: 0 0 5px rgba(255, 42, 133, 0.5);\n}\n\n.v3d-hud-3 {\n  border-top-color: #9d4edd;\n  box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 30px rgba(157, 78, 221, 0.3), 0 0 20px rgba(157, 78, 221, 0.2);\n}\n\n.v3d-hud-3::before {\n  background: #9d4edd;\n  box-shadow: 0 0 15px #9d4edd, 0 0 5px #fff;\n}\n\n.v3d-hud-3 .v3d-hud-icon {\n  border-color: rgba(157, 78, 221, 0.7);\n  box-shadow: inset 0 0 10px rgba(157, 78, 221, 0.5);\n}\n\n.v3d-hud-3 .v3d-hud-icon::after {\n  background: #9d4edd;\n  box-shadow: 0 0 15px #9d4edd, 0 0 30px #fff;\n}\n\n.v3d-hud-3 .v3d-hud-text span {\n  color: #d7a1f9;\n  text-shadow: 0 0 5px rgba(157, 78, 221, 0.5);\n}\n\n@keyframes floatH1 {\n  0% { transform: translateZ(120px) rotateY(20deg) translateY(0); }\n  100% { transform: translateZ(120px) rotateY(20deg) translateY(-20px); }\n}\n\n@keyframes floatH2 {\n  0% { transform: translateZ(180px) rotateY(30deg) translateY(0); }\n  100% { transform: translateZ(180px) rotateY(30deg) translateY(-25px); }\n}\n\n@keyframes floatH3 {\n  0% { transform: translateZ(140px) rotateY(-25deg) translateY(0); }\n  100% { transform: translateZ(140px) rotateY(-25deg) translateY(-22px); }\n}\n\n.visual-panel {\n  position: absolute;\n  z-index: 50;\n  left: 50%;\n  bottom: 24px;\n  width: min(470px, 86%);\n  transform: translateX(-50%);\n  padding: 34px 30px;\n  border-radius: 20px;\n  background: rgba(255,255,255,0.95);\n  border: 1px solid rgba(201,163,74,0.3);\n  box-shadow: 0 40px 80px rgba(1, 4, 13, 0.7), 0 0 40px rgba(30, 167, 255, 0.3);\n  animation: panelFloat 6.5s ease-in-out infinite;\n  overflow: hidden;\n}\n\n.visual-panel::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 0 auto 0;\n  height: 5px;\n  background: linear-gradient(90deg, #1ea7ff, #8af5ff, #ff2a85, #1ea7ff);\n  background-size: 200% 100%;\n  animation: gradientShift 3s linear infinite;\n}\n\n@keyframes gradientShift {\n  0% { background-position: 100% 0; }\n  100% { background-position: -100% 0; }\n}\n\n.panel-sub {\n  margin: 0 0 18px;\n  font-size: 12px;\n  letter-spacing: 0.20em;\n  color: #2457ff;\n  text-transform: uppercase;\n  font-weight: 800;\n}\n\n.visual-panel h2 {\n  margin: 0 0 18px;\n  font-size: clamp(26px, 2vw, 36px);\n  line-height: 1.4;\n  font-weight: 900;\n  color: #0f172a;\n}\n\n.visual-panel p:last-child {\n  margin: 0;\n  font-size: 16px;\n  line-height: 1.9;\n  color: #4a576c;\n  font-weight: 500;\n}\n\n@keyframes panelFloat {\n  0%, 100% { transform: translateX(-50%) translateY(0); }\n  50% { transform: translateX(-50%) translateY(-8px); }\n}\n\n\/* =========================\n   COMMON\n========================= *\/\n.section {\n  position: relative;\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n  padding: 120px 0;\n  background: transparent;\n}\n\n.section::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: rgba(255,255,255,0.22);\n  backdrop-filter: blur(3px);\n  pointer-events: none;\n}\n\n.section-inner {\n  position: relative;\n  z-index: 2;\n  width: var(--container);\n  margin: 0 auto;\n}\n\n.about-section::before,\n.services-section::before,\n.strength-section::before,\n.contact-section::before {\n  background: rgba(255,255,255,0.18);\n}\n\n.section-label,\n.mini-label,\n.service-no {\n  margin: 0 0 14px;\n  font-size: 13px;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: #b28a36;\n  font-weight: 700;\n}\n\n.section-heading h2,\n.contact-inner h2 {\n  margin: 0 0 20px;\n  font-size: clamp(36px, 3.1vw, 62px);\n  line-height: 1.2;\n  letter-spacing: -0.03em;\n}\n\n.section-desc {\n  max-width: 900px;\n  margin: 0;\n  font-size: 18px;\n  line-height: 1.9;\n  color: #4b5668;\n}\n\n.value-grid,\n.strength-grid {\n  display: grid;\n  gap: 24px;\n  margin-top: 42px;\n}\n\n.value-grid {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.strength-grid {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n.value-card,\n.service-box,\n.strength-card {\n  position: relative;\n  background: rgba(255,255,255,0.74);\n  border: 1px solid rgba(201,163,74,0.18);\n  box-shadow: 0 20px 50px rgba(15,23,42,0.06), 0 0 22px rgba(201,163,74,0.04);\n  border-radius: 30px;\n  backdrop-filter: blur(10px);\n  overflow: hidden;\n}\n\n.value-card::before,\n.service-box::before,\n.strength-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 0 auto 0;\n  height: 2px;\n  background: linear-gradient(90deg, rgba(201,163,74,0.06), rgba(201,163,74,0.58), rgba(201,163,74,0.06));\n}\n\n.value-card,\n.strength-card {\n  padding: 30px;\n}\n\n.service-list {\n  display: grid;\n  gap: 24px;\n  margin-top: 36px;\n}\n\n.service-box {\n  padding: 30px;\n}\n\n.value-no,\n.strength-card span {\n  display: inline-block;\n  margin-bottom: 16px;\n  font-size: 36px;\n  line-height: 1;\n  color: #dbc68f;\n  font-weight: 800;\n}\n\n.value-card h3,\n.service-body h3,\n.strength-card h3 {\n  margin: 0 0 14px;\n  font-size: 28px;\n  line-height: 1.45;\n}\n\n.value-card p:last-child,\n.service-body p,\n.strength-card p {\n  margin: 0;\n  font-size: 17px;\n  line-height: 1.9;\n  color: #4a576c;\n}\n\n.contact-inner {\n  max-width: 980px;\n}\n\n.contact-lead {\n  max-width: 820px;\n  margin: 0 0 28px;\n  font-size: 18px;\n  line-height: 1.95;\n  color: #4b5668;\n}\n\n.contact-form {\n  display: grid;\n  gap: 16px;\n}\n\n.contact-form input,\n.contact-form textarea {\n  width: 100%;\n  padding: 18px 20px;\n  border-radius: 18px;\n  border: 1px solid rgba(201,163,74,0.22);\n  background: rgba(255,255,255,0.86);\n  font: inherit;\n  color: #0f172a;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);\n}\n\n.contact-form textarea {\n  min-height: 180px;\n  resize: vertical;\n}\n\n.site-footer {\n  position: relative;\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n  background: rgba(255,255,255,0.28);\n  border-top: 1px solid rgba(201,163,74,0.14);\n  backdrop-filter: blur(4px);\n}\n\n.footer-inner {\n  width: var(--container);\n  margin: 0 auto;\n  padding: 26px 0;\n}\n\n.footer-inner p {\n  margin: 0;\n  color: #596579;\n  font-size: 14px;\n}\n\n\/* =========================\n   RESPONSIVE\n========================= *\/\n@media (max-width: 1200px) {\n  .value-grid,\n  .strength-grid,\n  .service-mini-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .visual-card {\n    min-height: 800px;\n  }\n\n  .site-fixed-bg-word {\n    font-size: clamp(110px, 24vw, 260px);\n  }\n\n  .v3d-universe {\n    transform: scale(0.85);\n  }\n\n  .v3d-hud-1 { left: 4%; }\n  .v3d-hud-2 { left: 2%; }\n  .v3d-hud-3 { right: 4%; }\n}\n\n@media (max-width: 768px) {\n  :root {\n    --container: calc(100% - 32px);\n  }\n\n  .hero {\n    padding: 0 0 56px;\n  }\n\n  .hero-copy {\n    width: var(--container);\n    margin-top: 28px;\n    padding: 24px 20px;\n    border-radius: 24px;\n  }\n\n  .hero h1 {\n    font-size: 42px;\n    line-height: 1.15;\n  }\n\n  .hero-text,\n  .section-desc,\n  .contact-lead,\n  .value-card p:last-child,\n  .service-body p,\n  .strength-card p,\n  .visual-panel p:last-child {\n    font-size: 15px;\n    line-height: 1.9;\n  }\n\n  .btn {\n    width: 100%;\n    min-width: 100%;\n  }\n\n  .visual-card {\n    min-height: 740px;\n    border-radius: 0;\n  }\n\n  .floating-chip {\n    min-height: 50px;\n    padding: 0 20px;\n    font-size: 12px;\n  }\n\n  .chip-left {\n    top: 12px;\n    left: 12px;\n  }\n\n  .chip-right {\n    top: 76px;\n    right: 12px;\n  }\n\n  .future-visual-stage {\n    border-radius: 0;\n  }\n\n  .v3d-universe {\n    transform: scale(0.6);\n  }\n\n  .v3d-hud {\n    padding: 10px 16px;\n    gap: 10px;\n  }\n\n  .v3d-hud-text span {\n    font-size: 9px;\n  }\n\n  .v3d-hud-text strong {\n    font-size: 13px;\n  }\n\n  .v3d-hud-icon {\n    width: 24px;\n    height: 24px;\n  }\n\n  .v3d-hud-icon::after {\n    width: 8px;\n    height: 8px;\n  }\n\n  .v3d-hud-1 {\n    top: 10%;\n    left: 0%;\n    transform: translateZ(50px) rotateY(10deg);\n  }\n\n  .v3d-hud-2 {\n    top: 50%;\n    left: 0%;\n    transform: translateZ(80px) rotateY(15deg);\n  }\n\n  .v3d-hud-3 {\n    top: 20%;\n    right: 0%;\n    transform: translateZ(60px) rotateY(-15deg);\n  }\n\n  .visual-panel {\n    width: calc(100% - 20px);\n    padding: 24px 20px;\n    border-radius: 16px;\n    bottom: 10px;\n  }\n\n  .visual-panel h2 {\n    font-size: 22px;\n  }\n\n  .service-mini-card h3,\n  .value-card h3,\n  .service-body h3,\n  .strength-card h3 {\n    font-size: 24px;\n  }\n\n  .section {\n    padding: 80px 0;\n  }\n\n  .site-fixed-bg-word {\n    font-size: clamp(72px, 23vw, 140px);\n    -webkit-text-stroke: 1.4px rgba(170,192,255,0.44);\n    color: rgba(214,226,255,0.14);\n  }\n\n  .site-fixed-bg-word::before {\n    -webkit-text-stroke: 2px rgba(198,213,255,0.34);\n  }\n\n  .site-fixed-bg-glow-1 {\n    width: 220px;\n    height: 220px;\n  }\n\n  .site-fixed-bg-glow-2 {\n    width: 260px;\n    height: 260px;\n  }\n}\n<\/style>\n\n\n\n<div class=\"site-fixed-bg\">\n  <div class=\"site-fixed-bg-word-wrap\">\n    <div class=\"site-fixed-bg-word\" data-text=\"TOPwhite\">TOPwhite<\/div>\n  <\/div>\n  <div class=\"site-fixed-bg-glow site-fixed-bg-glow-1\"><\/div>\n  <div class=\"site-fixed-bg-glow site-fixed-bg-glow-2\"><\/div>\n  <div class=\"site-fixed-bg-shine\"><\/div>\n<\/div>\n\n\n\n<div class=\"site-page\">\n\n  <section class=\"hero\">\n    <div class=\"hero-inner\">\n\n      <div class=\"hero-visual\">\n        <div class=\"visual-card\">\n          <div class=\"floating-chip chip-left\">AI TECHNOLOGY VISUAL<\/div>\n          <div class=\"floating-chip chip-right\">GLASSMORPHISM UI<\/div>\n\n          <div class=\"future-visual-stage\">\n            \n            <div class=\"binary-rain\">\n              <div class=\"binary-column\" style=\"left: 10%; animation-duration: 8s; animation-delay: 0s;\">01001011001011<\/div>\n              <div class=\"binary-column\" style=\"left: 25%; animation-duration: 6s; animation-delay: -2s;\">10110010101001<\/div>\n              <div class=\"binary-column\" style=\"left: 45%; animation-duration: 10s; animation-delay: -5s;\">00101110110101<\/div>\n              <div class=\"binary-column\" style=\"left: 60%; animation-duration: 7s; animation-delay: -1s;\">11010100101100<\/div>\n              <div class=\"binary-column\" style=\"left: 80%; animation-duration: 9s; animation-delay: -4s;\">01011010110100<\/div>\n              <div class=\"binary-column\" style=\"left: 95%; animation-duration: 5s; animation-delay: -3s;\">10100101101011<\/div>\n            <\/div>\n\n            <div class=\"data-streams\">\n              <div class=\"stream-line\" style=\"top: 20%; --color: #8af5ff; animation-duration: 3s; animation-delay: 0s;\"><\/div>\n              <div class=\"stream-line\" style=\"top: 45%; --color: #ff2a85; animation-duration: 2s; animation-delay: 1.5s;\"><\/div>\n              <div class=\"stream-line\" style=\"top: 70%; --color: #9d4edd; animation-duration: 4s; animation-delay: 0.5s;\"><\/div>\n              <div class=\"stream-line\" style=\"top: 85%; --color: #1ea7ff; animation-duration: 2.5s; animation-delay: 2s;\"><\/div>\n              <div class=\"stream-line\" style=\"top: 10%; --color: #ffffff; animation-duration: 5s; animation-delay: 1s;\"><\/div>\n            <\/div>\n\n            <div class=\"v3d-universe\">\n\n              <div class=\"v3d-wireframe\">\n                <div class=\"v3d-line v3d-l-1\"><\/div>\n                <div class=\"v3d-line v3d-l-2\"><\/div>\n                <div class=\"v3d-line v3d-l-3\"><\/div>\n                <div class=\"v3d-line v3d-l-4\"><\/div>\n                <div class=\"v3d-line v3d-l-5\"><\/div>\n                <div class=\"v3d-line v3d-l-6\"><\/div>\n                <div class=\"v3d-line v3d-l-7\"><\/div>\n                <div class=\"v3d-line v3d-l-8\"><\/div>\n                <div class=\"v3d-line v3d-l-9\"><\/div>\n                <div class=\"v3d-line v3d-l-10\"><\/div>\n\n                <div class=\"v3d-node v3d-n-1\" style=\"--tz: -50px;\"><\/div>\n                <div class=\"v3d-node v3d-n-2\" style=\"--tz: 120px;\"><\/div>\n                <div class=\"v3d-node v3d-n-3\" style=\"--tz: -180px;\"><\/div>\n                <div class=\"v3d-node v3d-n-4\" style=\"--tz: 80px;\"><\/div>\n                <div class=\"v3d-node v3d-n-5\" style=\"--tz: 150px;\"><\/div>\n                <div class=\"v3d-node v3d-n-6\" style=\"--tz: -120px;\"><\/div>\n              <\/div>\n\n              <div class=\"v3d-base-container\">\n                <div class=\"v3d-base-grid\">\n                  <div class=\"v3d-scanner\"><\/div>\n\n                  <div class=\"v3d-pillar v3d-p-1\"><\/div>\n                  <div class=\"v3d-pillar v3d-p-2\"><\/div>\n                  <div class=\"v3d-pillar v3d-p-3\"><\/div>\n                  <div class=\"v3d-pillar v3d-p-4\"><\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"v3d-sphere-net\">\n                <div class=\"v3d-ring v3d-r-x\">\n                  <div class=\"v3d-ring-icon\"><\/div>\n                <\/div>\n                <div class=\"v3d-ring v3d-r-y\"><\/div>\n                <div class=\"v3d-ring v3d-r-z\">\n                  <div class=\"v3d-ring-icon\"><\/div>\n                <\/div>\n                <div class=\"v3d-ring v3d-r-c1\"><\/div>\n                <div class=\"v3d-ring v3d-r-c2\"><\/div>\n                <div class=\"v3d-ring v3d-r-lat1\"><\/div>\n                <div class=\"v3d-ring v3d-r-lat2\"><\/div>\n                <div class=\"v3d-core\"><\/div>\n              <\/div>\n\n              <div class=\"v3d-hud v3d-hud-1\">\n                <div class=\"v3d-hud-icon\"><\/div>\n                <div class=\"v3d-hud-text\">\n                  <span>DATA STREAM<\/span>\n                  <strong>Realtime Processing<\/strong>\n                <\/div>\n              <\/div>\n\n              <div class=\"v3d-hud v3d-hud-2\">\n                <div class=\"v3d-hud-icon\"><\/div>\n                <div class=\"v3d-hud-text\">\n                  <span>SMART CLOUD<\/span>\n                  <strong>Connected Network<\/strong>\n                <\/div>\n              <\/div>\n\n              <div class=\"v3d-hud v3d-hud-3\">\n                <div class=\"v3d-hud-icon\"><\/div>\n                <div class=\"v3d-hud-text\">\n                  <span>IT SOLUTION<\/span>\n                  <strong>Adaptive System<\/strong>\n                <\/div>\n              <\/div>\n\n            <\/div>\n          <\/div>\n\n          <div class=\"visual-panel\">\n            <p class=\"panel-sub\">NEXT DIGITAL STANDARD<\/p>\n            <h2>\u672a\u6765\u611f\u3068\u4fe1\u983c\u611f\u3092\u4e21\u7acb\u3059\u308b\u3001TOPwhite\u306e\u30c7\u30b8\u30bf\u30eb\u4f53\u9a13\u3002<\/h2>\n            <p>\n              \u898b\u305f\u76ee\u306e\u7f8e\u3057\u3055\u3060\u3051\u3067\u306a\u304f\u3001\u554f\u3044\u5408\u308f\u305b\u7387\u30fb\u4f1d\u308f\u308a\u3084\u3059\u3055\u307e\u3067\u8003\u3048\u305f\n              LP\/\u30b3\u30fc\u30dd\u30ec\u30fc\u30c8\u30b5\u30a4\u30c8\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"hero-copy\">\n        <p class=\"hero-sub\">NEXT DIGITAL STANDARD<\/p>\n\n        <h1>\n          \u4f01\u696d\u306e\u4fa1\u5024\u3092\u3001<br>\n          \u3082\u3063\u3068\u5f37\u304f\u3001<br>\n          \u3082\u3063\u3068\u7f8e\u3057\u304f\u3002\n        <\/h1>\n\n        <p class=\"hero-text\">\n          TOPwhite\u306f\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u5236\u4f5c\u30fb\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u5e83\u544a\u4e8b\u696d\u30fbWEB\u30e1\u30c7\u30a3\u30a2\u904b\u55b6\u3092\u901a\u3057\u3066\u3001\n          \u96c6\u5ba2\u5c0e\u7dda\u304b\u3089\u30d6\u30e9\u30f3\u30c9\u4f53\u9a13\u307e\u3067\u4e00\u8cab\u3057\u3066\u8a2d\u8a08\u3059\u308b\u30c7\u30b8\u30bf\u30eb\u30d1\u30fc\u30c8\u30ca\u30fc\u3067\u3059\u3002\n          \u4f59\u767d\u3092\u6d3b\u304b\u3057\u305f\u4e0a\u8cea\u306a\u30c7\u30b6\u30a4\u30f3\u3068\u3001\u6210\u679c\u306b\u76f4\u7d50\u3059\u308b\u5c0e\u7dda\u8a2d\u8a08\u3067\u3001\n          \u30d3\u30b8\u30cd\u30b9\u306e\u6210\u9577\u3092\u652f\u3048\u307e\u3059\u3002\n        <\/p>\n\n        <div class=\"hero-buttons\">\n          <a href=\"#services\" class=\"btn btn-primary\">\u4e8b\u696d\u5185\u5bb9\u3092\u898b\u308b<\/a>\n          <a href=\"#contact\" class=\"btn btn-secondary\">\u7121\u6599\u3067\u76f8\u8ac7\u3059\u308b<\/a>\n        <\/div>\n\n        <div class=\"service-mini-grid\">\n          <article class=\"service-mini-card\">\n            <span>SERVICE 01<\/span>\n            <h3>\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u5236\u4f5c<\/h3>\n          <\/article>\n\n          <article class=\"service-mini-card\">\n            <span>SERVICE 02<\/span>\n            <h3>\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u5e83\u544a\u4e8b\u696d<\/h3>\n          <\/article>\n\n          <article class=\"service-mini-card\">\n            <span>SERVICE 03<\/span>\n            <h3>WEB\u30e1\u30c7\u30a3\u30a2\u904b\u55b6<\/h3>\n          <\/article>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"section about-section\">\n    <div class=\"section-inner\">\n      <div class=\"section-heading\">\n        <p class=\"section-label\">About<\/p>\n        <h2>\u30c7\u30b6\u30a4\u30f3\u3068\u904b\u7528\u3067\u3001\u6210\u679c\u306e\u6d41\u308c\u3092\u3064\u304f\u308b\u3002<\/h2>\n        <p class=\"section-desc\">\n          \u30d6\u30e9\u30f3\u30c9\u306e\u898b\u305b\u65b9\u3001\u5e83\u544a\u3067\u306e\u5c4a\u3051\u65b9\u3001\u30e1\u30c7\u30a3\u30a2\u306b\u3088\u308b\u84c4\u7a4d\u3002\n          \u305d\u308c\u305e\u308c\u3092\u5206\u65ad\u305b\u305a\u3001\u3072\u3068\u3064\u306e\u6210\u9577\u5c0e\u7dda\u3068\u3057\u3066\u8a2d\u8a08\u3067\u304d\u308b\u306e\u304cTOPwhite\u306e\u5f37\u307f\u3067\u3059\u3002\n        <\/p>\n      <\/div>\n\n      <div class=\"value-grid\">\n        <article class=\"value-card\">\n          <p class=\"mini-label\">VALUE 01<\/p>\n          <span class=\"value-no\">01<\/span>\n          <h3>\u6d17\u7df4\u3055\u308c\u305f\u30d5\u30eb\u30ef\u30a4\u30c9\u8a2d\u8a08<\/h3>\n          <p>\u753b\u9762\u3092\u6700\u5927\u9650\u6d3b\u7528\u3057\u3001\u30d5\u30a1\u30fc\u30b9\u30c8\u30d3\u30e5\u30fc\u3067\u5f37\u304f\u5370\u8c61\u3092\u6b8b\u3059\u69cb\u6210\u306b\u4ed5\u4e0a\u3052\u307e\u3059\u3002<\/p>\n        <\/article>\n\n        <article class=\"value-card\">\n          <p class=\"mini-label\">VALUE 02<\/p>\n          <span class=\"value-no\">02<\/span>\n          <h3>\u6210\u679c\u5fd7\u5411\u306e\u5c0e\u7dda\u8a2d\u8a08<\/h3>\n          <p>\u305f\u3060\u7dba\u9e97\u306a\u3060\u3051\u3067\u306f\u306a\u304f\u3001\u304a\u554f\u3044\u5408\u308f\u305b\u30fb\u96c6\u5ba2\u3078\u3064\u306a\u3052\u308b\u8a2d\u8a08\u3092\u91cd\u8996\u3057\u307e\u3059\u3002<\/p>\n        <\/article>\n\n        <article class=\"value-card\">\n          <p class=\"mini-label\">VALUE 03<\/p>\n          <span class=\"value-no\">03<\/span>\n          <h3>\u5236\u4f5c\u304b\u3089\u904b\u7528\u307e\u3067\u4e00\u6c17\u901a\u8cab<\/h3>\n          <p>\u5236\u4f5c\u30fb\u5e83\u544a\u30fb\u30e1\u30c7\u30a3\u30a2\u904b\u55b6\u3092\u6a2a\u65ad\u3057\u3066\u3001\u4e8b\u696d\u5168\u4f53\u3092\u898b\u636e\u3048\u305f\u652f\u63f4\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n        <\/article>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"section services-section\" id=\"services\">\n    <div class=\"section-inner\">\n      <div class=\"section-heading\">\n        <p class=\"section-label\">Services<\/p>\n        <h2>\u4e8b\u696d\u5185\u5bb9<\/h2>\n      <\/div>\n\n      <div class=\"service-list\">\n        <article class=\"service-box\">\n          <div class=\"service-body\">\n            <p class=\"service-no\">01 \/ WEBSITE PRODUCTION<\/p>\n            <h3>\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u5236\u4f5c<\/h3>\n            <p>\n              \u4f01\u696d\u30b5\u30a4\u30c8\u3001\u30b5\u30fc\u30d3\u30b9\u30b5\u30a4\u30c8\u3001LP\u3001\u63a1\u7528\u30b5\u30a4\u30c8\u307e\u3067\u5e45\u5e83\u304f\u5bfe\u5fdc\u3057\u3001\n              \u30d6\u30e9\u30f3\u30c9\u306e\u5370\u8c61\u3092\u9ad8\u3081\u308b\u30d3\u30b8\u30e5\u30a2\u30eb\u8a2d\u8a08\u3068\u6210\u679c\u306b\u76f4\u7d50\u3059\u308b\u5c0e\u7dda\u8a2d\u8a08\u3092\u4e21\u7acb\u3057\u307e\u3059\u3002\n            <\/p>\n          <\/div>\n        <\/article>\n\n        <article class=\"service-box\">\n          <div class=\"service-body\">\n            <p class=\"service-no\">02 \/ INTERNET ADVERTISING<\/p>\n            <h3>\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u5e83\u544a\u4e8b\u696d<\/h3>\n            <p>\n              Google\u5e83\u544a\u3001SNS\u5e83\u544a\u3001\u5404\u7a2e\u30d7\u30ed\u30e2\u30fc\u30b7\u30e7\u30f3\u65bd\u7b56\u3092\u901a\u3057\u3066\u3001\n              \u96c6\u5ba2\u306e\u6700\u5927\u5316\u3068\u6539\u5584\u30b5\u30a4\u30af\u30eb\u306e\u69cb\u7bc9\u3092\u884c\u3044\u307e\u3059\u3002\n            <\/p>\n          <\/div>\n        <\/article>\n\n        <article class=\"service-box\">\n          <div class=\"service-body\">\n            <p class=\"service-no\">03 \/ WEB MEDIA<\/p>\n            <h3>WEB\u30e1\u30c7\u30a3\u30a2\u904b\u55b6<\/h3>\n            <p>\n              SEO\u8996\u70b9\u3068\u30b3\u30f3\u30c6\u30f3\u30c4\u6226\u7565\u3092\u7d44\u307f\u5408\u308f\u305b\u3001\n              \u9577\u671f\u7684\u306a\u96c6\u5ba2\u8cc7\u7523\u3068\u3057\u3066\u6a5f\u80fd\u3059\u308bWEB\u30e1\u30c7\u30a3\u30a2\u904b\u55b6\u3092\u652f\u63f4\u3057\u307e\u3059\u3002\n            <\/p>\n          <\/div>\n        <\/article>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"section strength-section\">\n    <div class=\"section-inner\">\n      <div class=\"section-heading\">\n        <p class=\"section-label\">Strength<\/p>\n        <h2>TOPwhite\u304c\u9078\u3070\u308c\u308b\u7406\u7531<\/h2>\n      <\/div>\n\n      <div class=\"strength-grid\">\n        <article class=\"strength-card\">\n          <span>01<\/span>\n          <h3>\u30d6\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u8996\u70b9<\/h3>\n          <p>\u4f1a\u793e\u3084\u30b5\u30fc\u30d3\u30b9\u306e\u9b45\u529b\u3092\u6574\u7406\u3057\u3001\u30c7\u30b6\u30a4\u30f3\u3068\u8a00\u8449\u306e\u4e21\u9762\u304b\u3089\u7d71\u4e00\u611f\u3092\u751f\u307f\u51fa\u3057\u307e\u3059\u3002<\/p>\n        <\/article>\n\n        <article class=\"strength-card\">\n          <span>02<\/span>\n          <h3>\u6210\u679c\u91cd\u8996\u306e\u8a2d\u8a08<\/h3>\n          <p>\u898b\u305f\u76ee\u3060\u3051\u3067\u306f\u306a\u304f\u3001\u56de\u904a\u30fb\u554f\u3044\u5408\u308f\u305b\u30fb\u96c6\u5ba2\u5c0e\u7dda\u307e\u3067\u8003\u3048\u3066\u5236\u4f5c\u3057\u307e\u3059\u3002<\/p>\n        <\/article>\n\n        <article class=\"strength-card\">\n          <span>03<\/span>\n          <h3>\u904b\u7528\u3082\u898b\u636e\u3048\u305f\u63d0\u6848<\/h3>\n          <p>\u5236\u4f5c\u5f8c\u306e\u66f4\u65b0\u3057\u3084\u3059\u3055\u3084\u5e83\u544a\u904b\u7528\u307e\u3067\u898b\u8d8a\u3057\u305f\u73fe\u5b9f\u7684\u306a\u8a2d\u8a08\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n        <\/article>\n\n        <article class=\"strength-card\">\n          <span>04<\/span>\n          <h3>\u4e0a\u8cea\u306a\u30d3\u30b8\u30e5\u30a2\u30eb\u8868\u73fe<\/h3>\n          <p>\u5927\u304d\u306a\u4f59\u767d\u3068\u6d17\u7df4\u3055\u308c\u305fUI\u3067\u3001\u4f01\u696d\u306e\u4fe1\u983c\u611f\u3068\u5148\u9032\u6027\u3092\u5370\u8c61\u3065\u3051\u307e\u3059\u3002<\/p>\n        <\/article>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"section contact-section\" id=\"contact\">\n    <div class=\"section-inner contact-inner\">\n      <p class=\"section-label\">Contact<\/p>\n      <h2>TOPwhite\u3068\u3001\u6b21\u306e\u6210\u9577\u5c0e\u7dda\u3092\u3064\u304f\u308b\u3002<\/h2>\n\n      <p class=\"contact-lead\">\n        \u30b3\u30fc\u30dd\u30ec\u30fc\u30c8\u30b5\u30a4\u30c8\u3001LP\u3001\u5e83\u544a\u904b\u7528\u3001WEB\u30e1\u30c7\u30a3\u30a2\u8a2d\u8a08\u307e\u3067\u3002\n        \u4e8b\u696d\u306b\u5408\u308f\u305b\u3066\u6700\u9069\u306a\u5f62\u3092\u3054\u63d0\u6848\u3057\u307e\u3059\u3002\u307e\u305a\u306f\u304a\u6c17\u8efd\u306b\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002\n      <\/p>\n\n      <form class=\"contact-form\">\n        <input type=\"text\" placeholder=\"\u304a\u540d\u524d\">\n        <input type=\"email\" placeholder=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\">\n        <textarea placeholder=\"\u3054\u76f8\u8ac7\u5185\u5bb9\"><\/textarea>\n        <button type=\"submit\" class=\"btn btn-primary\">\u9001\u4fe1\u3059\u308b<\/button>\n      <\/form>\n    <\/div>\n  <\/section>\n\n  <footer class=\"site-footer\">\n    <div class=\"footer-inner\">\n      <p>\u00a9 TOPwhite<\/p>\n    <\/div>\n  <\/footer>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>TOPwhite TOPwhite AI TECHNOLOGY VISUAL GLASSMORPHISM UI 01001011001011 10110010101001 00101110110101 110101001 [&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":38,"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/pages\/88\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/pages\/88\/revisions\/214"}],"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}]}}