<!doctype html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>kanegonia</title><style>:root{--bg0:#00020f;--bg1:#00113a;--bg2:#00307a}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 35%,var(--bg2) 0%,var(--bg1) 55%,var(--bg0) 100%)}.stage{position:fixed;inset:0;isolation:isolate}.shafts{position:absolute;inset:-35%;pointer-events:none;opacity:.2;mix-blend-mode:screen;background:conic-gradient(from 205deg at 55% -10%,rgba(255,255,255,0) 0 10deg,rgba(255,255,255,.1) 10deg 14deg,rgba(255,255,255,0) 14deg 26deg,rgba(255,255,255,.07) 26deg 30deg,rgba(255,255,255,0) 30deg 80deg),radial-gradient(1400px 800px at 55% -10%,rgba(255,255,255,.08),transparent 62%);filter:blur(16px);animation:shafts 18s linear infinite}@keyframes shafts{0%{transform:rotate(-1deg);opacity:.16}50%{transform:rotate(1deg);opacity:.22}100%{transform:rotate(-1deg);opacity:.16}}.bubbles{position:absolute;inset:0;pointer-events:none}.bubble{position:absolute;left:var(--x);bottom:-16vh;width:var(--s);height:var(--s);border-radius:50%;opacity:0;pointer-events:auto;animation:rise var(--t) linear forwards;animation-delay:var(--d)}.motionA,.motionB{position:absolute;inset:0;border-radius:50%}.motionA{animation:swayA var(--swA) ease-in-out infinite}.motionB{animation:swayB var(--swB) ease-in-out infinite}.skin{position:absolute;inset:0;border-radius:50%;opacity:var(--a);background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.5),rgba(255,255,255,0) 50%),radial-gradient(circle at 55% 65%,rgba(200,230,255,.18),rgba(200,230,255,0) 75%);box-shadow:inset 0 0 0 .7px rgba(220,245,255,.22),0 0 22px rgba(180,220,255,.12);filter:blur(var(--blur));mix-blend-mode:screen}.bubble.pop{animation:pop .45s cubic-bezier(.2,.8,.3,1) forwards!important}@keyframes pop{0%{opacity:1;transform:scale(1)}35%{transform:scale(1.45) translateY(-10px)}70%{opacity:.4;transform:scale(1.2) translateY(-28px)}100%{opacity:0;transform:scale(.3) translateY(-46px)}}@keyframes rise{0%{transform:translateY(0) scale(.92);opacity:0}12%{opacity:1}72%{opacity:1}100%{transform:translateY(-140vh) scale(1.1);opacity:0}}@keyframes swayA{0%{transform:translateX(0)}50%{transform:translateX(var(--sxA))}100%{transform:translateX(0)}}@keyframes swayB{0%{transform:translate(0,0)}50%{transform:translate(var(--sxB),var(--fy))}100%{transform:translate(0,0)}}#centerText{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:50}#centerText .ct-title{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;font-weight:650;letter-spacing:.1em;font-size:clamp(20px,4.2vw,52px);line-height:1.1;text-align:center;color:transparent;background:linear-gradient(110deg,rgba(210,240,255,.14) 0%,rgba(230,250,255,.62) 32%,rgba(170,220,255,.40) 55%,rgba(230,250,255,.58) 78%,rgba(210,240,255,.12) 100%);background-size:240% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;text-shadow:0 0 18px rgba(180,220,255,.12),0 0 60px rgba(120,190,255,.07),0 2px 0 rgba(0,0,0,.16);mix-blend-mode:screen;opacity:0;transform:translate3d(0,10px,0) scale(.99);filter:blur(10px);animation:ctReveal 3.2s cubic-bezier(.18,.82,.25,1) .35s forwards,ctShimmer 6.2s ease-in-out 2.1s infinite,ctFloat 9.5s ease-in-out 2.1s infinite}@keyframes ctReveal{0%{opacity:0;transform:translate3d(0,14px,0) scale(.985);filter:blur(12px)}60%{opacity:.85;transform:translate3d(0,0,0) scale(1);filter:blur(1.2px)}100%{opacity:.72;transform:translate3d(0,0,0) scale(1);filter:blur(.45px)}}@keyframes ctShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes ctFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-8px,0) scale(1.01)}}.copyright{position:fixed;right:14px;bottom:12px;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;font-size:10px;letter-spacing:.08em;color:rgba(200,220,255,.22);pointer-events:none;mix-blend-mode:screen;opacity:.5;animation:copyrightDrift 14s ease-in-out infinite}@keyframes copyrightDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}</style></head><body><div id="centerText"><div class="ct-title">kanegonia</div></div><div class="stage"><div class="shafts"></div><div class="bubbles" id="bubbles"></div></div><script>(()=>{const wrap=document.getElementById("bubbles");const rand=(a,b)=>a+Math.random()*(b-a);const lanes=[...Array(10)].map(()=>rand(6,94));function spawn(){const b=document.createElement("div");b.className="bubble";const a=document.createElement("div"),c=document.createElement("div"),d=document.createElement("div");a.className="motionA";c.className="motionB";d.className="skin";c.appendChild(d);a.appendChild(c);b.appendChild(a);wrap.appendChild(b);const size=Math.random()<.85?rand(5.5,22):rand(32,64);b.style.setProperty("--x",lanes[(Math.random()*lanes.length)|0]+"vw");b.style.setProperty("--s",size+"px");b.style.setProperty("--t",rand(16,28)+"s");b.style.setProperty("--d",rand(-.8,0)+"s");b.style.setProperty("--a",rand(.18,.55));b.style.setProperty("--sxA",rand(-90,90)+"px");b.style.setProperty("--sxB",rand(-42,42)+"px");b.style.setProperty("--fy",rand(-12,-6)+"px");b.style.setProperty("--swA",rand(5.5,10)+"s");b.style.setProperty("--swB",rand(4,8)+"s");b.style.setProperty("--blur",rand(.6,1.2)+"px");b.addEventListener("click",e=>{e.stopPropagation();b.classList.add("pop");setTimeout(()=>b.remove(),480);});setTimeout(()=>b.remove(),34000);}for(let i=0;i<42;i++)spawn();setInterval(()=>{for(let i=0;i<3;i++)spawn()},420);})();</script><div class="copyright">Copyright © kanegonia.com All Rights Reserved.</div></body></html>