{"id":13,"date":"2026-03-11T09:01:42","date_gmt":"2026-03-11T09:01:42","guid":{"rendered":"https:\/\/top-white.com\/?page_id=13"},"modified":"2026-04-27T07:02:21","modified_gmt":"2026-04-27T07:02:21","slug":"top","status":"publish","type":"page","link":"https:\/\/top-white.com\/","title":{"rendered":"TOP"},"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\/* =========================\n   HERO\n========================= *\/\n.hero {\n  position: relative;\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n  padding: 0 0 80px;\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  gap: 0;\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\n========================= *\/\n.hero-visual {\n  position: relative;\n  z-index: 1;\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\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\/* --- \u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u30ad\u30e3\u30c3\u30c1\u30b3\u30d4\u30fc\uff08\u4e2d\u592e\u5bc4\u305b\u3001\u30c6\u30fc\u30de\u30b9\u30bf\u30a4\u30eb\u30ea\u30bb\u30c3\u30c8\uff09 --- *\/\n.hero-overlay-copy {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 45;\n  text-align: center; \/* \u6587\u5b57\u3092\u4e2d\u592e\u63c3\u3048\u306b *\/\n  width: 100%; \/* \u6a2a\u5e45\u3092\u3044\u3063\u3071\u3044\u306b\u53d6\u3063\u3066\u4e2d\u592e\u306b\u914d\u7f6e\u3057\u3084\u3059\u304f\u3059\u308b *\/\n  pointer-events: none;\n}\n\n.hero-overlay-main {\n  font-size: clamp(46px, 6vw, 100px);\n  line-height: 1.3;\n  color: #0b1730;\n  font-weight: 900;\n  letter-spacing: 0.05em;\n  margin: 0;\n  \/* WP\u30c6\u30fc\u30de\u7b49\u306b\u3088\u308b\u4e0d\u8981\u306a\u67a0\u30fb\u80cc\u666f\u8272\u306a\u3069\u3092\u5f37\u5236\u30ea\u30bb\u30c3\u30c8 *\/\n  background: transparent !important;\n  border: none !important;\n  padding: 0 !important;\n  \/* \u767d\u80cc\u666f\u306b\u8ca0\u3051\u306a\u3044\u3088\u3046\u5149\u5f69\u52b9\u679c\u306f\u7dad\u6301 *\/\n  text-shadow: \n    0 4px 20px rgba(255, 255, 255, 1),\n    0 0 40px rgba(255, 255, 255, 0.9),\n    0 0 10px rgba(255, 255, 255, 0.8);\n}\n\/* --------------------------------------------------- *\/\n\n\/* =========================\n   3D\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\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%, #ffffff 0%, #eef2f9 50%, #d8e2f0 100%);\n  perspective: 1000px;\n  box-shadow: inset 0 0 100px rgba(36, 87, 255, 0.1);\n}\n\n.future-visual-stage::before {\n  content: \"\";\n  position: absolute;\n  inset: -100%;\n  background-image: \n    linear-gradient(rgba(36, 87, 255, 0.15) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(36, 87, 255, 0.15) 1px, transparent 1px);\n  background-size: 60px 60px;\n  transform: rotateX(70deg) translateZ(-200px);\n  animation: gridMoveFast 3s linear infinite;\n  pointer-events: none;\n}\n\n@keyframes gridMoveFast {\n  0% { transform: rotateX(70deg) translateZ(-200px) translateY(0); }\n  100% { transform: rotateX(70deg) translateZ(-200px) translateY(60px); }\n}\n\n.data-streams {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  perspective: 1000px;\n}\n\n.stream-line {\n  position: absolute;\n  background: linear-gradient(90deg, transparent, var(--color), var(--color), transparent);\n  height: 3px;\n  width: 300px;\n  box-shadow: 0 0 15px var(--color), 0 0 30px var(--color);\n  border-radius: 0;\n  animation: streamShootWarp var(--dur, 3s) ease-in infinite;\n  animation-delay: var(--del, 0s);\n}\n\n@keyframes streamShootWarp {\n  0% { transform: translateX(-100vw) translateZ(-2000px) scaleX(0.5); opacity: 0; }\n  20% { opacity: 0.8; }\n  80% { opacity: 1; }\n  100% { transform: translateX(100vw) translateZ(1000px) scaleX(3); opacity: 0; }\n}\n\n.v3d-universe {\n  position: absolute;\n  inset: 0;\n  transform-style: preserve-3d;\n  animation: universeDriftLight 20s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;\n  z-index: 10;\n}\n\n@keyframes universeDriftLight {\n  0% { transform: rotateX(8deg) rotateY(-8deg) scale(1.05); }\n  50% { transform: rotateX(-4deg) rotateY(4deg) scale(1.1); }\n  100% { transform: rotateX(6deg) rotateY(10deg) scale(1.15); }\n}\n\n.v3d-wireframe {\n  position: absolute;\n  inset: -50%;\n  transform-style: preserve-3d;\n  animation: wireRotateFast 40s linear infinite;\n}\n\n@keyframes wireRotateFast {\n  0% { transform: rotateY(0deg) rotateZ(0deg); }\n  100% { transform: rotateY(360deg) rotateZ(180deg); }\n}\n\n.v3d-line {\n  position: absolute;\n  height: 2px;\n  background: linear-gradient(90deg, transparent, rgba(30, 167, 255, 0.8), rgba(36, 87, 255, 1), transparent);\n  box-shadow: 0 0 15px rgba(30, 167, 255, 0.5), 0 0 30px rgba(36, 87, 255, 0.3);\n  transform-origin: left center;\n  animation: warpDrive var(--dur) ease-in infinite;\n  animation-delay: var(--del);\n}\n\n.v3d-line::before,\n.v3d-line::after {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0;\n  width: 100%; height: 100%;\n  background: inherit;\n  box-shadow: inherit;\n}\n.v3d-line::before { transform: rotateZ(25deg) translateY(100px) translateZ(-100px); opacity: 0.6; }\n.v3d-line::after { transform: rotateZ(-15deg) translateY(-80px) translateZ(150px); opacity: 0.4; }\n\n@keyframes warpDrive {\n  0% { transform: translateZ(-3000px) rotate3d(var(--rx), var(--ry), var(--rz), var(--deg)) scaleX(0.1); opacity: 0; }\n  20% { opacity: 0.6; }\n  80% { opacity: 1; transform: translateZ(500px) rotate3d(var(--rx), var(--ry), var(--rz), var(--deg)) scaleX(1); }\n  100% { transform: translateZ(2000px) rotate3d(var(--rx), var(--ry), var(--rz), var(--deg)) scaleX(2); opacity: 0; }\n}\n\n.v3d-l-1 { --dur: 4.5s; --del: 0s;   --rx: 1; --ry: 1; --rz: 0; --deg: 45deg; top: 30%; left: 10%; width: 60%; }\n.v3d-l-2 { --dur: 5.5s; --del: -1s;  --rx: -1; --ry: 1; --rz: 0.5; --deg: 60deg; top: 60%; left: 30%; width: 80%; background: linear-gradient(90deg, transparent, rgba(255, 42, 133, 0.7), transparent); box-shadow: 0 0 15px rgba(255, 42, 133, 0.4); }\n.v3d-l-3 { --dur: 3.8s; --del: -2.5s;--rx: 0; --ry: 1; --rz: 1; --deg: -30deg; top: 20%; left: 50%; width: 50%; }\n.v3d-l-4 { --dur: 6.2s; --del: -0.5s;--rx: 1; --ry: 0; --rz: 1; --deg: 80deg; top: 80%; left: 20%; width: 70%; background: linear-gradient(90deg, transparent, rgba(157, 78, 221, 0.7), transparent); box-shadow: 0 0 15px rgba(157, 78, 221, 0.4); }\n.v3d-l-5 { --dur: 5.0s; --del: -3s;  --rx: 0.5; --ry: -1; --rz: 0.5; --deg: -50deg; top: 40%; left: 10%; width: 90%; }\n.v3d-l-6 { --dur: 4.2s; --del: -4s;  --rx: 1; --ry: -0.5; --rz: 0; --deg: 70deg; top: 70%; left: 40%; width: 60%; }\n.v3d-l-7 { --dur: 3.5s; --del: -1.5s;--rx: 0; --ry: 1; --rz: 0; --deg: 20deg; top: 10%; left: -20%; width: 100%; background: linear-gradient(90deg, transparent, rgba(255, 42, 133, 0.6), transparent); }\n.v3d-l-8 { --dur: 6.8s; --del: -5s;  --rx: 1; --ry: 1; --rz: -1; --deg: -40deg; top: 90%; left: 50%; width: 80%; }\n.v3d-l-9 { --dur: 4.7s; --del: -2s;  --rx: 1; --ry: -1; --rz: 1; --deg: 30deg; top: 50%; left: 20%; width: 60%; }\n.v3d-l-10{ --dur: 5.3s; --del: -3.5s;--rx: -1; --ry: 0; --rz: 1; --deg: -60deg; top: 25%; left: 60%; width: 45%; background: linear-gradient(90deg, transparent, rgba(157, 78, 221, 0.8), transparent); }\n\n.v3d-node {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  border-radius: 50%;\n  box-shadow: 0 0 15px 4px #1ea7ff, 0 0 30px 8px rgba(36, 87, 255, 0.6);\n  animation: warpDriveNode var(--dur) ease-in infinite;\n  animation-delay: var(--del);\n}\n\n.v3d-node::before,\n.v3d-node::after {\n  content: \"\"; position: absolute; width: 100%; height: 100%;\n  background: inherit; box-shadow: inherit; border-radius: 50%;\n}\n.v3d-node::before { transform: translate3d(120px, -80px, -200px) scale(0.8); }\n.v3d-node::after { transform: translate3d(-100px, 150px, 100px) scale(0.6); }\n\n@keyframes warpDriveNode {\n  0% { transform: translateZ(-3000px) rotate(45deg) scale(0.1); opacity: 0; }\n  20% { opacity: 0.8; }\n  80% { opacity: 1; transform: translateZ(500px) rotate(45deg) scale(1); }\n  100% { transform: translateZ(2000px) rotate(45deg) scale(3); opacity: 0; }\n}\n\n.v3d-n-1 { --dur: 4.2s; --del: 0s;   top: 45%; left: 35%; }\n.v3d-n-2 { --dur: 5.5s; --del: -2s;  top: 70%; left: 65%; box-shadow: 0 0 15px 4px #ff2a85; }\n.v3d-n-3 { --dur: 3.8s; --del: -1s;  top: 25%; left: 70%; box-shadow: 0 0 15px 4px #9d4edd; }\n.v3d-n-4 { --dur: 6.0s; --del: -4s;  top: 85%; left: 25%; }\n.v3d-n-5 { --dur: 4.8s; --del: -3s;  top: 15%; left: 40%; }\n.v3d-n-6 { --dur: 5.2s; --del: -1.5s;top: 60%; left: 20%; box-shadow: 0 0 15px 4px #ff2a85; }\n\n.v3d-base-container {\n  position: absolute;\n  bottom: -40%;\n  left: 50%;\n  width: 800px;\n  height: 800px;\n  margin-left: -400px;\n  transform-style: preserve-3d;\n  transform: rotateX(75deg) rotateZ(45deg) translateZ(100px);\n}\n\n.v3d-base-grid {\n  position: absolute;\n  inset: 0;\n  border-radius: 0;\n  border: 2px solid rgba(36, 87, 255, 0.2);\n  background-image:\n    linear-gradient(rgba(36, 87, 255, 0.1) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(36, 87, 255, 0.1) 1px, transparent 1px);\n  background-size: 50px 50px;\n  box-shadow: inset 0 0 100px rgba(36, 87, 255, 0.2), 0 0 80px rgba(36, 87, 255, 0.1);\n  transform-style: preserve-3d;\n  animation: gridScroll 2s linear infinite;\n}\n\n@keyframes gridScroll {\n  0% { background-position: 0 0; }\n  100% { background-position: 50px 50px; }\n}\n\n.v3d-scanner {\n  position: absolute;\n  top: 0; left: 0; width: 100%; height: 100%;\n  background: linear-gradient(to bottom, transparent, rgba(30, 167, 255, 0.3) 50%, transparent);\n  animation: scanLineCube 3s linear infinite;\n}\n\n.v3d-pillar {\n  position: absolute;\n  width: 12px;\n  height: 400px;\n  background: linear-gradient(to top, rgba(36, 87, 255, 0.7), transparent);\n  box-shadow: 0 0 30px rgba(36, 87, 255, 0.5);\n  transform-origin: bottom center;\n  transform: rotateX(-90deg) translateZ(10px);\n}\n.v3d-pillar::before {\n  content: \"\"; position: absolute; bottom: 0; left: 0; width: 100%; height: 12px;\n  background: rgba(36, 87, 255, 0.9);\n  transform: rotateX(90deg); transform-origin: bottom;\n}\n\n.v3d-p-1 { top: 30%; left: 40%; animation: pillarGrowFast 2.5s 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.7), transparent); box-shadow: 0 0 30px rgba(255, 42, 133, 0.5); animation: pillarGrowFast 3s ease-in-out infinite alternate 1s; }\n.v3d-p-2::before { background: rgba(255, 42, 133, 0.9); }\n.v3d-p-3 { top: 45%; left: 20%; height: 500px; background: linear-gradient(to top, rgba(157, 78, 221, 0.7), transparent); box-shadow: 0 0 30px rgba(157, 78, 221, 0.5); animation: pillarGrowFast 2.8s ease-in-out infinite alternate 0.5s; }\n.v3d-p-3::before { background: rgba(157, 78, 221, 0.9); }\n.v3d-p-4 { top: 75%; left: 40%; height: 300px; background: linear-gradient(to top, rgba(30, 167, 255, 0.7), transparent); animation: pillarGrowFast 2s ease-in-out infinite alternate 1.5s; }\n.v3d-p-4::before { background: rgba(30, 167, 255, 0.9); }\n\n@keyframes pillarGrowFast {\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%; left: 50%;\n  width: 320px; height: 320px;\n  margin-top: -160px; margin-left: -160px;\n  transform-style: preserve-3d;\n  transform: translateZ(-800px);\n  animation: coreRotate 30s linear infinite;\n  z-index: 5;\n}\n\n@keyframes coreRotate {\n  0% { transform: translateZ(-800px) rotateY(0deg) rotateX(20deg); }\n  100% { transform: translateZ(-800px) rotateY(360deg) rotateX(-10deg); }\n}\n\n.v3d-ring {\n  position: absolute;\n  inset: 0;\n  border-radius: 0;\n  border: 2px solid rgba(30, 167, 255, 0.3);\n  box-shadow: 0 0 20px rgba(30, 167, 255, 0.2), inset 0 0 20px rgba(30, 167, 255, 0.1);\n  transform-style: preserve-3d;\n  background: rgba(30, 167, 255, 0.02);\n}\n\n.v3d-r-x { transform: translateZ(160px); animation: cubeFacePulseLight 2s infinite alternate; }\n.v3d-r-y { transform: translateZ(-160px); border: 2px dashed rgba(36, 87, 255, 0.4); }\n.v3d-r-z { transform: rotateY(90deg) translateZ(160px); border: 2px solid rgba(255, 42, 133, 0.3); box-shadow: 0 0 30px rgba(255, 42, 133, 0.2); animation: cubeFacePulseLight 3s infinite alternate-reverse; }\n.v3d-r-c1 { transform: rotateY(-90deg) translateZ(160px); border-color: rgba(157, 78, 221, 0.3); }\n.v3d-r-c2 { transform: rotateX(90deg) translateZ(160px); border-color: rgba(30, 167, 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: #1ea7ff; opacity: 0.3; }\n\n@keyframes cubeFacePulseLight {\n  0% { box-shadow: 0 0 10px rgba(30, 167, 255, 0.1); background: transparent; }\n  100% { box-shadow: 0 0 40px rgba(30, 167, 255, 0.4), 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; left: 50%;\n  margin-left: -15px;\n  width: 30px; height: 30px;\n  background: rgba(255, 255, 255, 0.9);\n  border: 2px solid #1ea7ff;\n  border-radius: 0;\n  box-shadow: 0 0 20px #1ea7ff;\n  animation: counterRotateCube 10s linear infinite;\n  display: flex; align-items: center; justify-content: center;\n}\n\n.v3d-ring-icon::before {\n  content: \"\"; width: 12px; height: 12px;\n  background: #2457ff; border-radius: 0;\n  box-shadow: 0 0 10px #2457ff;\n  animation: flash 0.5s infinite alternate;\n}\n\n.v3d-r-z .v3d-ring-icon {\n  border-color: #ff2a85; box-shadow: 0 0 25px #ff2a85;\n  animation-direction: reverse; animation-duration: 15s;\n}\n\n.v3d-core {\n  position: absolute;\n  inset: 100px;\n  background: linear-gradient(135deg, #ffffff 0%, #c4e1ff 30%, #8af5ff 60%, #1ea7ff 100%);\n  border-radius: 0;\n  transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);\n  box-shadow: 0 0 50px #1ea7ff, 0 0 120px rgba(30, 167, 255, 0.8), inset 0 0 40px #fff;\n  animation: coreBreathCubeLight 1.5s ease-in-out infinite alternate, coreSpinCube 10s linear infinite;\n}\n\n.v3d-core::after {\n  content: \"\"; position: absolute; inset: -20px;\n  border-radius: 0; border: 2px solid rgba(255,255,255,0.9);\n  filter: blur(4px);\n  animation: corePulseWaveCube 2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;\n}\n\n@keyframes coreBreathCubeLight {\n  0% { transform: rotateX(45deg) rotateY(var(--ry, 0deg)) rotateZ(45deg) scale(0.85); box-shadow: 0 0 40px #1ea7ff, 0 0 80px rgba(30, 167, 255, 0.4); }\n  100% { transform: rotateX(45deg) rotateY(var(--ry, 0deg)) rotateZ(45deg) scale(1.15); box-shadow: 0 0 80px #1ea7ff, 0 0 150px rgba(30, 167, 255, 0.9), 0 0 30px #fff; }\n}\n\n\/* =========================\n   \u6fc0\u3057\u304f\u52d5\u304f\u30c7\u30fc\u30bf\u30af\u30e9\u30b9\u30bf\u30fc\n========================= *\/\n.v3d-data-cluster {\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  transform-style: preserve-3d;\n  z-index: 30;\n}\n\n.cluster-1 { top: 15%; left: 8%; animation: clusterWarp 3s infinite cubic-bezier(0.2, 0.8, 0.4, 1); animation-delay: 0s; }\n.cluster-2 { top: 55%; left: 5%; animation: clusterWarp 4s infinite cubic-bezier(0.2, 0.8, 0.4, 1); animation-delay: -1.5s; }\n.cluster-3 { top: 20%; right: 8%; animation: clusterWarp 3.5s infinite cubic-bezier(0.2, 0.8, 0.4, 1); animation-delay: -0.8s; }\n.cluster-4 { top: 65%; right: 12%; animation: clusterWarp 4.5s infinite cubic-bezier(0.2, 0.8, 0.4, 1); animation-delay: -2.5s; }\n.cluster-5 { top: 40%; left: 40%; animation: clusterWarp 2.5s infinite cubic-bezier(0.2, 0.8, 0.4, 1); animation-delay: -0.4s; }\n\n@keyframes clusterWarp {\n  0% { transform: translateZ(-3000px) rotateX(0deg) rotateY(0deg) scale(0.1); opacity: 0; }\n  30% { opacity: 1; }\n  70% { opacity: 1; }\n  100% { transform: translateZ(1500px) rotateX(1080deg) rotateY(720deg) scale(3.5); opacity: 0; }\n}\n\n.cluster-ring {\n  position: absolute;\n  inset: 0;\n  border: 3px dashed rgba(36, 87, 255, 0.8);\n  border-radius: 50%;\n  animation: spinRing 0.8s linear infinite;\n  box-shadow: 0 0 20px rgba(36, 87, 255, 0.5), inset 0 0 10px rgba(36, 87, 255, 0.3);\n}\n\n.cluster-core {\n  position: absolute;\n  inset: 40px;\n  background: #1ea7ff;\n  border-radius: 50%;\n  box-shadow: 0 0 40px #1ea7ff, 0 0 80px rgba(255,255,255,0.9);\n  animation: corePulseViolent 0.3s alternate infinite;\n}\n\n.cluster-orbit {\n  position: absolute;\n  inset: -30px;\n  border: 2px solid rgba(255, 42, 133, 0.5);\n  border-radius: 50%;\n  animation: spinOrbit 1.2s linear infinite reverse;\n}\n\n.cluster-orbit::before,\n.cluster-orbit::after {\n  content: '';\n  position: absolute;\n  width: 12px; height: 12px;\n  background: inherit;\n  border-radius: 50%;\n  box-shadow: 0 0 20px currentColor;\n}\n.cluster-orbit::before { top: -6px; left: 50%; margin-left: -6px; background: #ff2a85; color: #ff2a85; }\n.cluster-orbit::after { bottom: -6px; left: 50%; margin-left: -6px; background: #1ea7ff; color: #1ea7ff; }\n\n@keyframes spinRing {\n  0% { transform: rotateZ(0deg) rotateX(60deg) rotateY(0deg); }\n  100% { transform: rotateZ(360deg) rotateX(60deg) rotateY(360deg); }\n}\n\n@keyframes spinOrbit {\n  0% { transform: rotateZ(0deg) rotateY(60deg) rotateX(0deg); }\n  100% { transform: rotateZ(360deg) rotateY(60deg) rotateX(360deg); }\n}\n\n@keyframes corePulseViolent {\n  0% { transform: scale(0.5); opacity: 0.6; filter: hue-rotate(0deg); }\n  100% { transform: scale(1.8); opacity: 1; filter: hue-rotate(45deg); }\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\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    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  \/* --- \u30b9\u30de\u30db\u6642\u306e\u30ad\u30e3\u30c3\u30c1\u30b3\u30d4\u30fc\u5fae\u8abf\u6574 --- *\/\n  .hero-overlay-copy {\n    width: 100%;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n  }\n\n  .hero-overlay-main {\n    font-size: clamp(32px, 8vw, 48px);\n  }\n  \/* --------------------------------------------------- *\/\n\n  .future-visual-stage {\n    border-radius: 0;\n  }\n\n  .v3d-universe {\n    transform: scale(0.6);\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\n          <div class=\"future-visual-stage\">\n            \n            <div class=\"data-streams\">\n              <div class=\"stream-line\" style=\"top: 20%; --color: #1ea7ff; --dur: 3s; --del: 0s;\"><\/div>\n              <div class=\"stream-line\" style=\"top: 45%; --color: #8af5ff; --dur: 2s; --del: 1.5s;\"><\/div>\n              <div class=\"stream-line\" style=\"top: 70%; --color: #2457ff; --dur: 4s; --del: 0.5s;\"><\/div>\n              <div class=\"stream-line\" style=\"top: 85%; --color: #1ea7ff; --dur: 2.5s; --del: 2s;\"><\/div>\n              <div class=\"stream-line\" style=\"top: 10%; --color: #ffffff; --dur: 5s; --del: 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\"><\/div>\n                <div class=\"v3d-node v3d-n-2\"><\/div>\n                <div class=\"v3d-node v3d-n-3\"><\/div>\n                <div class=\"v3d-node v3d-n-4\"><\/div>\n                <div class=\"v3d-node v3d-n-5\"><\/div>\n                <div class=\"v3d-node v3d-n-6\"><\/div>\n              <\/div>\n\n              <div class=\"v3d-base-container\">\n                <div class=\"v3d-base-grid\">\n                  <div class=\"v3d-scanner\"><\/div>\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-data-cluster cluster-1\">\n                <div class=\"cluster-ring\"><\/div>\n                <div class=\"cluster-core\"><\/div>\n                <div class=\"cluster-orbit\"><\/div>\n              <\/div>\n              <div class=\"v3d-data-cluster cluster-2\">\n                <div class=\"cluster-ring\" style=\"border-color: rgba(255, 42, 133, 0.8);\"><\/div>\n                <div class=\"cluster-core\" style=\"background: #ff2a85; box-shadow: 0 0 40px #ff2a85, 0 0 80px #fff;\"><\/div>\n                <div class=\"cluster-orbit\" style=\"border-color: rgba(30, 167, 255, 0.5);\"><\/div>\n              <\/div>\n              <div class=\"v3d-data-cluster cluster-3\">\n                <div class=\"cluster-ring\" style=\"border-color: rgba(157, 78, 221, 0.8);\"><\/div>\n                <div class=\"cluster-core\" style=\"background: #9d4edd; box-shadow: 0 0 40px #9d4edd, 0 0 80px #fff;\"><\/div>\n                <div class=\"cluster-orbit\" style=\"border-color: rgba(138, 245, 255, 0.5);\"><\/div>\n              <\/div>\n              <div class=\"v3d-data-cluster cluster-4\">\n                <div class=\"cluster-ring\" style=\"border-color: rgba(138, 245, 255, 0.8);\"><\/div>\n                <div class=\"cluster-core\" style=\"background: #ffffff; box-shadow: 0 0 40px #8af5ff, 0 0 80px #fff;\"><\/div>\n                <div class=\"cluster-orbit\" style=\"border-color: rgba(255, 42, 133, 0.5);\"><\/div>\n              <\/div>\n              <div class=\"v3d-data-cluster cluster-5\">\n                <div class=\"cluster-ring\"><\/div>\n                <div class=\"cluster-core\"><\/div>\n                <div class=\"cluster-orbit\"><\/div>\n              <\/div>\n\n            <\/div>\n          <\/div>\n          \n          <!-- \u30ad\u30e3\u30c3\u30c1\u30b3\u30d4\u30fc\uff08\u6587\u7ae0\u5909\u66f4\u3001\u4e2d\u592e\u914d\u7f6e\u30013\u884c\u306b\u5206\u5272\u3001\u30c6\u30fc\u30de\u30b9\u30bf\u30a4\u30eb\u7121\u52b9\u5316\uff09 -->\n          <div class=\"hero-overlay-copy\">\n            <div class=\"hero-overlay-main\">\u552f\u4e00\u7121\u4e8c\u306e\u4fa1\u5024\u3092\u3001<br>WEB\u306e\u529b\u3067\u5f37\u304f\u3001<br>\u7f8e\u3057\u304f\u3001\u6210\u679c\u3078\u3002<\/div>\n          <\/div>\n\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 \u552f\u4e00\u7121\u4e8c\u306e\u4fa1\u5024\u3092\u3001WEB\u306e\u529b\u3067\u5f37\u304f\u3001\u7f8e\u3057\u304f\u3001\u6210\u679c\u3078\u3002 NEXT DIGITAL STANDARD \u4f01\u696d\u306e\u4fa1\u5024\u3092\u3001 \u3082\u3063\u3068\u5f37\u304f\u3001 \u3082\u3063\u3068\u7f8e\u3057\u304f\u3002 TOPwhite\u306f\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u5236\u4f5c\u30fb\u30a4 [&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-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/pages\/13","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=13"}],"version-history":[{"count":50,"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions\/223"}],"wp:attachment":[{"href":"https:\/\/top-white.com\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}