%3C!--%20%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%20--%3E%0A%3Cscript%20src%3D%22https%3A%2F%2Fcdn.tailwindcss.com%22%3E%3C%2Fscript%3E%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DNoto%2BSans%2BJP%3Awght%40400%3B700%3B900%26display%3Dswap%22%20rel%3D%22stylesheet%22%3E%0A%0A%3C!--%20%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E5%AE%9A%E7%BE%A9%20--%3E%0A%3Cstyle%3E%0A%20%20%20%20%2F*%20%E8%A8%98%E4%BA%8B%E5%86%85%E3%81%A7%E3%81%AE%E5%BD%B1%E9%9F%BF%E3%82%92%E9%99%90%E5%AE%9A%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%83%A9%E3%83%83%E3%83%91%E3%83%BC%E3%82%AF%E3%83%A9%E3%82%B9%20*%2F%0A%20%20%20%20.chart-container%20%7B%0A%20%20%20%20%20%20%20%20font-family%3A%20'Noto%20Sans%20JP'%2C%20sans-serif%3B%0A%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20padding%3A%201rem%3B%0A%20%20%20%20%20%20%20%20background-color%3A%20%23f8fafc%3B%20%2F*%20bg-slate-50%20*%2F%0A%20%20%20%20%20%20%20%20border-radius%3A%200.5rem%3B%0A%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20.gradient-bg%20%7B%20background%3A%20linear-gradient(135deg%2C%20%23f8fafc%200%25%2C%20%23e2e8f0%20100%25)%3B%20%7D%0A%20%20%20%20%0A%20%20%20%20.glass-panel%20%7B%0A%20%20%20%20%20%20%20%20background%3A%20rgba(255%2C%20255%2C%20255%2C%200.95)%3B%0A%20%20%20%20%20%20%20%20backdrop-filter%3A%20blur(12px)%3B%0A%20%20%20%20%20%20%20%20border%3A%201px%20solid%20rgba(255%2C%20255%2C%20255%2C%200.6)%3B%0A%20%20%20%20%20%20%20%20box-shadow%3A%200%2010px%2030px%20-5px%20rgba(0%2C%200%2C%200%2C%200.08)%2C%200%208px%2010px%20-6px%20rgba(0%2C%200%2C%200%2C%200.01)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%20%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E6%B5%81%E3%82%8C%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%20*%2F%0A%20%20%20%20%40keyframes%20data-flow%20%7B%0A%20%20%20%20%20%20%20%200%25%20%7B%20transform%3A%20translateX(0)%20scale(0.5)%3B%20opacity%3A%200%3B%20%7D%0A%20%20%20%20%20%20%20%2020%25%20%7B%20opacity%3A%201%3B%20transform%3A%20translateX(20px)%20scale(1)%3B%20%7D%0A%20%20%20%20%20%20%20%2080%25%20%7B%20opacity%3A%201%3B%20transform%3A%20translateX(180px)%20scale(1)%3B%20%7D%0A%20%20%20%20%20%20%20%20100%25%20%7B%20transform%3A%20translateX(200px)%20scale(0.5)%3B%20opacity%3A%200%3B%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.data-packet%20%7B%0A%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20animation%3A%20data-flow%202s%20infinite%20linear%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%20%E8%84%88%E5%8B%95%E3%81%99%E3%82%8B%E3%82%88%E3%81%86%E3%81%AA%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E8%A1%A8%E7%8F%BE%20*%2F%0A%20%20%20%20%40keyframes%20pulse-ring%20%7B%0A%20%20%20%20%20%20%20%200%25%20%7B%20transform%3A%20scale(0.8)%3B%20opacity%3A%200.8%3B%20%7D%0A%20%20%20%20%20%20%20%20100%25%20%7B%20transform%3A%20scale(2)%3B%20opacity%3A%200%3B%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.live-indicator%3A%3Abefore%20%7B%0A%20%20%20%20%20%20%20%20content%3A%20''%3B%0A%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20top%3A%200%3B%20left%3A%200%3B%20right%3A%200%3B%20bottom%3A%200%3B%0A%20%20%20%20%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%20%20%20%20%20%20border%3A%202px%20solid%20%23ef4444%3B%0A%20%20%20%20%20%20%20%20animation%3A%20pulse-ring%201.5s%20cubic-bezier(0.215%2C%200.61%2C%200.355%2C%201)%20infinite%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%20%E3%82%B5%E3%83%BC%E3%83%99%E3%82%A4%E5%87%BA%E7%8F%BE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%20*%2F%0A%20%20%20%20%40keyframes%20slide-up%20%7B%0A%20%20%20%20%20%20%20%200%25%20%7B%20transform%3A%20translateY(20px)%3B%20opacity%3A%200%3B%20%7D%0A%20%20%20%20%20%20%20%20100%25%20%7B%20transform%3A%20translateY(0)%3B%20opacity%3A%201%3B%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.survey-pop%20%7B%20animation%3A%20slide-up%200.8s%20ease-out%20forwards%3B%20%7D%0A%0A%20%20%20%20%2F*%20%E6%8A%98%E3%82%8C%E7%B7%9A%E3%82%B0%E3%83%A9%E3%83%95%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%20*%2F%0A%20%20%20%20%40keyframes%20draw-line%20%7B%0A%20%20%20%20%20%20%20%200%25%20%7B%20stroke-dashoffset%3A%20200%3B%20%7D%0A%20%20%20%20%20%20%20%20100%25%20%7B%20stroke-dashoffset%3A%200%3B%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.line-anim%20%7B%0A%20%20%20%20%20%20%20%20stroke-dasharray%3A%20200%3B%0A%20%20%20%20%20%20%20%20animation%3A%20draw-line%203s%20linear%20infinite%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20%2F*%20%E9%80%86%E8%BB%A2%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AE%E5%BC%B7%E8%AA%BF%20*%2F%0A%20%20%20%20%40keyframes%20cross-pulse%20%7B%0A%20%20%20%20%20%20%20%200%25%2C%2080%25%20%7B%20transform%3A%20scale(0)%3B%20opacity%3A%200%3B%20%7D%0A%20%20%20%20%20%20%20%2085%25%20%7B%20transform%3A%20scale(1.2)%3B%20opacity%3A%201%3B%20%7D%0A%20%20%20%20%20%20%20%2090%25%20%7B%20transform%3A%20scale(1)%3B%20opacity%3A%201%3B%20%7D%0A%20%20%20%20%20%20%20%20100%25%20%7B%20transform%3A%20scale(1)%3B%20opacity%3A%200%3B%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20.cross-point%20%7B%20animation%3A%20cross-pulse%203s%20linear%20infinite%3B%20%7D%0A%3C%2Fstyle%3E%0A%0A%3C!--%20%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%A9%E3%83%83%E3%83%91%E3%83%BC%20--%3E%0A%3Cdiv%20class%3D%22chart-container%22%3E%0A%20%20%20%20%3C!--%20%E5%9B%B3%E3%81%AE%E6%9C%AC%E4%BD%93%20--%3E%0A%20%20%20%20%3Cdiv%20class%3D%22w-full%20max-w-5xl%20gradient-bg%20rounded-2xl%20overflow-hidden%20relative%20shadow-2xl%20flex%20flex-col%20items-center%20justify-center%20p-6%20md%3Ap-12%22%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3C!--%20%E8%83%8C%E6%99%AF%E8%A3%85%E9%A3%BE%20--%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20top-0%20left-0%20w-full%20h-full%20overflow-hidden%20opacity-40%20pointer-events-none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20-top-32%20-left-32%20w-96%20h-96%20bg-cyan-200%20rounded-full%20mix-blend-multiply%20filter%20blur-3xl%20opacity-50%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20-bottom-32%20-right-32%20w-96%20h-96%20bg-purple-200%20rounded-full%20mix-blend-multiply%20filter%20blur-3xl%20opacity-50%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20inset-0%22%20style%3D%22background-image%3A%20radial-gradient(%23cbd5e1%201px%2C%20transparent%201px)%3B%20background-size%3A%2020px%2020px%3B%20opacity%3A%200.3%3B%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%3C!--%20%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%A8%E3%83%AA%E3%82%A2%20--%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22z-10%20text-center%20mb-6%20md%3Amb-10%20w-full%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch1%20class%3D%22text-2xl%20md%3Atext-5xl%20font-black%20text-slate-800%20tracking-tight%20mb-2%20md%3Amb-3%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22text-cyan-600%22%3E%E8%87%AA%E7%A4%BE%E3%82%B5%E3%82%A4%E3%83%88%3C%2Fspan%3E%E3%81%AB%E8%A8%AD%E7%BD%AE%E3%81%97%E3%81%A6%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20class%3D%22text-lg%20md%3Atext-3xl%20font-bold%20text-slate-600%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22text-red-500%20inline-flex%20items-center%20gap-2%22%3E%3Cspan%20class%3D%22w-2.5%20h-2.5%20md%3Aw-3%20md%3Ah-3%20bg-red-500%20rounded-full%20animate-pulse%22%3E%3C%2Fspan%3E%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%3C%2Fspan%3E%20%E3%81%A7%E5%9B%9E%E7%AD%94%E5%8F%8E%E9%9B%86%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%3C!--%20%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E4%BF%AE%E6%AD%A3%3A%20md%3Aflex-row%20%E3%82%92%20sm%3Aflex-row%20%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81640px%E4%BB%A5%E4%B8%8A%E3%81%A7%E6%A8%AA%E4%B8%A6%E3%81%B3%E3%81%AB%E3%81%AA%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E8%AA%BF%E6%95%B4%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20scale%E8%AA%BF%E6%95%B4%3A%20%E3%82%B9%E3%83%9E%E3%83%9B(%E7%B8%A6)%E3%81%AF%E7%AD%89%E5%80%8D%E3%80%81%E3%82%BF%E3%83%96%E3%83%AC%E3%83%83%E3%83%88(%E7%8B%AD%E3%81%84%E6%A8%AA)%E3%81%AF%E7%B8%AE%E5%B0%8F%E3%80%81PC(%E5%BA%83%E3%81%84%E6%A8%AA)%E3%81%AF%E7%AD%89%E5%80%8D%20--%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22z-10%20w-full%20max-w-4xl%20flex%20flex-col%20sm%3Aflex-row%20items-center%20justify-center%20gap-8%20sm%3Agap-2%20md%3Agap-16%20scale-100%20sm%3Ascale-%5B0.65%5D%20md%3Ascale-100%20origin-center%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E5%B7%A6%EF%BC%9APC%E3%83%A2%E3%83%8B%E3%82%BF%E3%83%BC%E9%A2%A8%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20flex-col%20items-center%20transform%20transition%20hover%3A-translate-y-1%20duration-300%20relative%20shrink-0%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%83%A2%E3%83%8B%E3%82%BF%E3%83%BC%E6%9C%AC%E4%BD%93%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22relative%20w-72%20md%3Aw-80%20h-48%20md%3Ah-52%20bg-slate-800%20rounded-t-lg%20rounded-b%20shadow-2xl%20overflow-hidden%20border-4%20border-slate-800%20flex%20flex-col%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E7%94%BB%E9%9D%A2%E5%86%85%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%20(%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6)%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-full%20h-full%20bg-slate-50%20relative%20flex%20flex-col%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%90%E3%83%BC%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22h-5%20bg-slate-200%20border-b%20border-slate-300%20flex%20items-center%20px-2%20gap-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-1.5%20h-1.5%20rounded-full%20bg-red-400%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-1.5%20h-1.5%20rounded-full%20bg-yellow-400%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-1.5%20h-1.5%20rounded-full%20bg-green-400%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ml-2%20w-3%2F4%20h-2.5%20bg-white%20rounded%20border%20border-slate-300%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20EC%E3%82%B5%E3%82%A4%E3%83%88%E9%A2%A8%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22p-3%20flex%20gap-3%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-1%2F3%20h-24%20bg-slate-200%20rounded%20animate-pulse%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-2%2F3%20flex%20flex-col%20gap-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-3%2F4%20h-3%20bg-slate-300%20rounded%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-1%2F2%20h-3%20bg-slate-300%20rounded%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-full%20h-12%20bg-slate-100%20rounded%20mt-1%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-1%2F3%20h-6%20bg-blue-500%20rounded%20mt-auto%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%99%E3%82%A4%20(%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97)%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20bottom-2%20right-2%20w-44%20bg-white%20rounded-lg%20shadow-2xl%20border%20border-slate-200%20p-3%20survey-pop%20z-10%20text-%5B9px%5D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20justify-between%20items-start%20mb-2%20border-b%20border-slate-100%20pb-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20class%3D%22font-bold%20text-slate-700%20leading-tight%22%3E%E3%81%93%E3%81%AE%E5%95%86%E5%93%81%E3%82%92%3Cbr%3E%E4%BD%95%E5%87%A6%E3%81%A7%E7%9F%A5%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%81%8B%EF%BC%9F%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22text-slate-300%22%3E%C3%97%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E9%81%B8%E6%8A%9E%E8%82%A2%E3%83%AA%E3%82%B9%E3%83%88%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22space-y-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20items-center%20gap-1.5%20p-1%20bg-pink-50%20rounded%20border%20border-pink-100%20cursor-pointer%20hover%3Abg-pink-100%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-2%20h-2%20rounded-full%20border%20border-pink-500%20bg-white%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22text-slate-600%22%3E%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%20(Instagram)%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20right-4%20animate-ping%20w-1.5%20h-1.5%20bg-pink-400%20rounded-full%20opacity-75%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20items-center%20gap-1.5%20p-1%20hover%3Abg-slate-50%20rounded%20cursor-pointer%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-2%20h-2%20rounded-full%20border%20border-slate-300%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22text-slate-600%22%3EX%20(Twitter)%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20items-center%20gap-1.5%20p-1%20hover%3Abg-slate-50%20rounded%20cursor-pointer%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-2%20h-2%20rounded-full%20border%20border-slate-300%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22text-slate-600%22%3ETikTok%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20items-center%20gap-1.5%20p-1%20hover%3Abg-slate-50%20rounded%20cursor-pointer%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-2%20h-2%20rounded-full%20border%20border-slate-300%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22text-slate-600%22%3EYoutube%20%2F%20%E5%8F%A3%E3%82%B3%E3%83%9F...%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%83%A2%E3%83%8B%E3%82%BF%E3%83%BC%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%89%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-24%20h-8%20bg-gradient-to-b%20from-slate-400%20to-slate-300%20mt-%5B-2px%5D%20z-%5B-1%5D%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22w-32%20h-2%20bg-slate-300%20rounded-full%20shadow-md%20mt-%5B-2px%5D%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%83%A9%E3%83%99%E3%83%AB%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20top-10%20-left-2%20bg-cyan-600%20text-white%20text-%5B10px%5D%20font-bold%20px-2%20py-1%20rounded-r%20shadow-md%20z-20%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20PC%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E4%B8%AD%E5%A4%AE%EF%BC%9A%E3%83%87%E3%83%BC%E3%82%BF%E9%80%9A%E4%BF%A1%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22relative%20w-24%20h-24%20flex%20items-center%20justify-center%20shrink-0%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%83%A9%E3%83%83%E3%83%91%E3%83%BC%EF%BC%88%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%81%A790%E5%BA%A6%E5%9B%9E%E8%BB%A2%E3%80%81sm%E4%BB%A5%E4%B8%8A%E3%81%A70%E5%BA%A6%E3%81%AB%E6%88%BB%E3%81%99%EF%BC%89%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22relative%20w-full%20h-full%20transform%20rotate-90%20sm%3Arotate-0%20flex%20items-center%20justify-center%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20left-0%20top-1%2F2%20-translate-y-1%2F2%20w-full%20h-8%20overflow-hidden%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22data-packet%20left-0%20top-1%20bg-pink-500%20w-2%20h-2%20rounded-full%20shadow-lg%20shadow-pink-500%2F50%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22data-packet%20left-0%20top-1%20bg-pink-500%20w-2%20h-2%20rounded-full%20shadow-lg%20shadow-pink-500%2F50%22%20style%3D%22animation-delay%3A%200.7s%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22data-packet%20left-0%20top-1%20bg-slate-800%20w-2%20h-2%20rounded-full%20shadow-lg%20shadow-slate-500%2F50%22%20style%3D%22animation-delay%3A%201.4s%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%20viewBox%3D%220%200%20100%2020%22%20class%3D%22w-full%20opacity-30%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%2210%22%20x2%3D%22100%22%20y2%3D%2210%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%224%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%EF%BC%88%E9%85%8D%E7%BD%AE%E8%AA%BF%E6%95%B4%3A%20%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%3D%E5%8F%B3%E6%A8%AA%E3%80%81PC%3D%E4%B8%8B%EF%BC%89%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top-1%2F2%20-translate-y-1%2F2%20right-0%20translate-x-2%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sm%3Atop-auto%20sm%3Atranslate-y-0%20sm%3A-bottom-6%20sm%3Aright-auto%20sm%3Aleft-1%2F2%20sm%3Atranslate-x-%5B-50%25%5D%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text-%5B10px%5D%20font-bold%20text-slate-400%20tracking-wider%20bg-white%2F50%20px-1%20rounded%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20SYNC%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E5%8F%B3%EF%BC%9A%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22glass-panel%20rounded-xl%20p-4%20w-72%20md%3Aw-72%20h-60%20flex%20flex-col%20shadow-xl%20border-t-4%20border-pink-500%20transform%20transition%20hover%3A-translate-y-1%20duration-300%20relative%20shrink-0%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20justify-between%20items-center%20mb-3%20border-b%20border-slate-100%20pb-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch3%20class%3D%22text-xs%20font-bold%20text-slate-700%22%3E%E5%95%86%E5%93%81%E3%81%AE%E8%AA%8D%E7%9F%A5%E7%B5%8C%E8%B7%AF%E3%81%AE%E6%8E%A8%E7%A7%BB%3C%2Fh3%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20items-center%20gap-1.5%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22relative%20flex%20h-2%20w-2%20live-indicator%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22animate-ping%20absolute%20inline-flex%20h-full%20w-full%20rounded-full%20bg-red-400%20opacity-75%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22relative%20inline-flex%20rounded-full%20h-2%20w-2%20bg-red-500%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22text-%5B9px%5D%20font-bold%20text-red-500%22%3ELIVE%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A8%E3%83%AA%E3%82%A2%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex-1%20relative%20bg-slate-50%20rounded%20border%20border-slate-100%20p-2%20overflow-hidden%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E5%87%A1%E4%BE%8B%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20top-2%20left-2%20flex%20gap-2%20text-%5B8px%5D%20z-10%20bg-white%2F80%20p-1%20rounded%20backdrop-blur%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20items-center%20gap-1%22%3E%3Cspan%20class%3D%22w-2%20h-1%20bg-pink-500%20rounded-full%22%3E%3C%2Fspan%3EInsta%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20items-center%20gap-1%22%3E%3Cspan%20class%3D%22w-2%20h-1%20bg-slate-700%20rounded-full%22%3E%3C%2Fspan%3EX(Twitter)%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E3%82%B0%E3%83%A9%E3%83%95%E6%8F%8F%E7%94%BB%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%20viewBox%3D%220%200%20200%20120%22%20class%3D%22w-full%20h-full%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%22100%22%20x2%3D%22200%22%20y2%3D%22100%22%20stroke%3D%22%23e2e8f0%22%20stroke-width%3D%221%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%2260%22%20x2%3D%22200%22%20y2%3D%2260%22%20stroke%3D%22%23e2e8f0%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%222%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%2220%22%20x2%3D%22200%22%20y2%3D%2220%22%20stroke%3D%22%23e2e8f0%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%222%22%20%2F%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20X%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2050%20Q%2050%2050%2C%20100%2055%20T%20200%2060%22%20fill%3D%22none%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20class%3D%22line-anim%22%20stroke-dasharray%3D%22210%22%20style%3D%22animation-duration%3A%204s%3B%22%2F%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20Instagram%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%20100%20C%2060%20100%2C%2080%2080%2C%20120%2053%20T%20200%2015%22%20fill%3D%22none%22%20stroke%3D%22%23ec4899%22%20stroke-width%3D%223%22%20class%3D%22line-anim%22%20stroke-dasharray%3D%22220%22%20style%3D%22animation-duration%3A%204s%3B%22%2F%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E4%BA%A4%E5%B7%AE%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20class%3D%22cross-point%22%20style%3D%22transform-origin%3A%20110px%2054px%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2254%22%20r%3D%224%22%20fill%3D%22%23ec4899%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate(90%2C%2030)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2240%22%20height%3D%2214%22%20rx%3D%222%22%20fill%3D%22%23ec4899%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctext%20x%3D%2220%22%20y%3D%2210%22%20font-size%3D%228%22%20fill%3D%22white%22%20text-anchor%3D%22middle%22%20font-weight%3D%22bold%22%3E%E9%80%86%E8%BB%A2%EF%BC%81%3C%2Ftext%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M20%2014%20L24%2018%20L16%2018%20Z%22%20fill%3D%22%23ec4899%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E6%99%82%E9%96%93%E8%BB%B8%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22flex%20justify-between%20text-%5B7px%5D%20text-slate-400%20mt-1%20px-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E10%3A00%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E12%3A00%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E14%3A00%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3ENow%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E9%80%9A%E7%9F%A5%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22absolute%20-right-2%20top-20%20bg-pink-600%20text-white%20text-%5B8px%5D%20px-2%20py-1%20rounded%20shadow-lg%20animate-bounce%22%20style%3D%22animation-duration%3A%202.5s%3B%20animation-delay%3A%202.5s%3B%20opacity%3A%200%3B%20animation-fill-mode%3A%20forwards%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Insta%E6%B5%81%E5%85%A5%E6%80%A5%E5%A2%97%E4%B8%AD!%20%F0%9F%9A%80%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22z-10%20mt-8%20text-slate-400%20text-xs%20font-medium%22%3EPowered%20by%20%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88AI%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%81%AE%E3%80%8C%E3%82%BF%E3%83%8A%E3%82%AB%E3%82%B5%E3%83%B3%E3%80%8D%3C%2Fdiv%3E%0A%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3Eユーザーの声を集めるとき、まず思い浮かぶのは「調査会社のアンケート」を利用するという方も多いのではないでしょうか。もちろん、短期間で数を集めたい市場全体の傾向を知りたいこうした目的では、調査会社のアンケートは有効です。一方で、こんなモヤモヤもありませんか？実際に自社サイトを見ている人の声が聞きたい商品ページを見て迷っている理由を知りたい既存顧客の本音をもっと深く知りたいつまり、調査会社のパネルではなく、自社のWebサイトに来ている“リアルなユーザー”に直接聞きたいというニーズです。マイクロサーベイを使えば、これが驚くほど簡単にできるこの課題をシンプルに解決できるのが、マイクロサーベイです。マイクロサーベイとは、自社のWebサイトやECサイト上に表示できる、短時間で回答できるアンケートのこと。特別な調査環境を用意しなくても、今まさにサイトを訪問しているユーザーから、その場でフィードバックを集められます。既存顧客について、より深く知ることができるマイクロサーベイを使うことで、なぜこのページを見ているのかどこで迷っているのか何が不安で購入に至らなかったのかといった、行動の背景を直接聞くことができます。アクセス解析の数字だけでは分からなかった「なぜ？」の部分が、言葉として見えてきます。商品改善・Webサイト改善につながるフィードバックが集まる集まるのは、「なんとなくの意見」ではありません。商品ページで足りない情報分かりづらい表現比較されているポイントなど、そのまま改善につながるヒントが集まります。その結果、集まった声はそのまま施策に活かすことができ、商品そのものの改善はもちろん、説明不足だったコンテンツの見直しや導線の調整など、Webサイト全体の改善につながり、最終的にはCVR向上といった成果にも結びついていきます。マイクロサーベイを表示する3つの手順「サイトにアンケートを出すのは大変そう」、そう感じるかもしれませんが、実際の手順はシンプルです。マイクロサーベイを作成Webサイトに表示する設定を行うGoogleTag Managerを使いWebサイトに埋め込むこれだけで、自社サイト上にアンケートを表示できます。順番に見ていきましょう。ステップ１：マイクロサーベイの作成タナカさんでは、Webサイトやプロダクト改善に使えるマイクロサーベイ（簡易アンケート）を、目的に応じた方法で作成できます。テンプレートを活用するAIに設問を作成してもらう手動で設問を作成する設問や選択肢を自分で設計することもできますが、テンプレートやAI機能を活用することで、サーベイ作成にかかる時間を大幅に短縮できます。テンプレートを活用した作成方法左メニューの「アンケートテンプレート」から、テンプレート一覧ページを開きます。用途に近いサーベイを選択し、内容を確認してください。必要に応じて設問を修正し、問題なければ「この設問で新規作成」をクリックします。作成後も、目的に合わせて設問内容を調整しながら活用できます。AIを活用した作成方法左メニューの「AIアシスタント」をクリックすると、チャット形式の画面が開きます。チャット欄に、目的や背景を入力するだけで、AIが設問案を生成します。AIにサーベイ作成を指示する（チャット入力例）例①：訪問目的と検討フェーズを知りたい場合私は求人メディアのプロダクトマネージャーです。Webサイト訪問者が、どの転職フェーズ（情報収集／比較検討／応募直前など）にいて、どのような目的で訪問しているのかを把握したいと考えています。マイクロサーベイとして、3問程度のアンケートを作成してください。回答結果は、今後のコンテンツ改善と導線設計に活用する予定です。回答しやすい選択式を中心にしてください。このように指示することで、AIが設問案を自動で作成します。生成された設問は、そのまま利用することも、目的に応じて自由に編集することも可能です。「何を聞けばいいか分からない」状態でも始められ、運用を進めながら聞きたい内容が固まってきた段階で、細かく調整できます。ステップ２：Webサイトに表示する設定を行う次に、作成したマイクロサーベイをWebサイトに表示する設定を行います。タナカさんでは、作成したマイクロサーベイをWeb訪問者に対してどのページで・どのタイミングで表示するかという条件を簡単に指定できます。設定できる内容はシンプルで、表示するサイト（ドメイン）表示する／しないページ表示するタイミング（例：訪問から数秒後）表示頻度（例：1ユーザーにつき1回）といった基本的な項目を選ぶだけです。これにより、「必要なページで」「必要な訪問者に」「適切なタイミングで」マイクロサーベイを表示する運用が可能になります。ステップ3：Google Tag Managerでサイトに埋め込む最後にGoogle Tag Manager（GTM）を利用してサイトに埋め込みます。①サーベイ編集画面の三点マークから「HTMLメール埋め込み設定」を選択、HTMLコードをコピーします。②GTMの「新しいタグを追加」から「カスタムHTML」を選択。③HTML欄に①でコピーしたコードを貼り付けます。④トリガーを設定し（例：All Pages）保存します。⑤公開して反映させます。※設定後は、実際にサイトを確認し、意図したタイミングで表示されているかを必ずチェックしてください。ノーコードトリガーとGTMを組み合わせることで、開発工数を抑えながら、柔軟な表示制御が可能です。パネルがいなくても自社サイトから多くの示唆を得られるマイクロサーベイは、どこで・誰に・いつ表示するかによって、得られる示唆の質が大きく変わります。タナカさんを活用すれば、外部のアンケートパネルに頼ることなく、自社のECやWebサイトを訪問しているユーザーから、実態に即したフィードバックを継続的に収集できます。「アンケートを実施したいが、表示設定が難しそう」「どのページに、どのタイミングで出せばよいか分からない」このような場合でも、まずはシンプルな設定から始めるだけで問題ありません。無理のない運用で、少しずつユーザー理解を深めていくことができます。実際に、人力車で世界一周を目指すガンプ鈴木氏が立ち上げた Just For Fun では、SNSから流入するECサイト訪問者に対してマイクロサーベイを実施しました。その結果、Googleアナリティクスだけでは把握できなかった年齢層や職業、デジタルリテラシーといったリアルなユーザー属性が明らかになり、商品開発や新規施策の検討に活用されています。パネルを使わず、自社ECサイトそのものをリサーチの場として活用した事例です。👉 Just For Funの事例記事はこちら自社サイトには、すでに多くのヒントがあります。まずは小さく聞いてみるところから、ユーザー理解を始めてみてはいかがでしょうか。