:root{--bg-flat: #f2f2f2;--text: #0f172a;--muted: #475569;--card: #ffffff;--line: #e6e7eb;--shadow-soft: 0 18px 48px rgba(15, 23, 42, .08);--shadow-hover: 0 24px 56px rgba(15, 23, 42, .14);--radius-lg: 2rem;--radius-md: 1.25rem}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Plus Jakarta Sans,Noto Sans JP,sans-serif;color:var(--text);background:var(--bg-flat);padding:20px;line-height:1.65;overflow-x:hidden}.shell{width:min(1120px,100%);margin:0 auto}.bento-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:18px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease}@media(hover:hover){.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}}.card-profile,.card-about,.card-social,.card-product{padding:26px}.card-profile{display:flex;flex-direction:column;justify-content:space-between;min-height:290px;position:relative;overflow:hidden}.card-profile:after{content:"";position:absolute;inset:-45% auto auto -20%;width:260px;height:260px;border-radius:999px;background:radial-gradient(circle,rgba(148,163,184,.16),transparent 70%);pointer-events:none;animation:drift 12s ease-in-out infinite}.profile-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.avatar-wrap{width:88px;height:88px;border-radius:999px;overflow:hidden;border:1px solid #dbe7f3;background:#f8fafc;animation:float 6s ease-in-out infinite}.avatar{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}.status-badge{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:999px;padding:7px 12px;white-space:nowrap;animation:breathe 5s ease-in-out infinite}.status-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 #22c55eb3;animation:pulse 1.8s infinite}h1{margin:0;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.02em;line-height:1.1}.role{margin:10px 0 0;font-size:1rem;color:var(--muted);font-weight:600;transition:transform .45s cubic-bezier(.16,1,.3,1),color .35s ease}.card-profile:hover .avatar,.card-profile:focus-within .avatar{transform:scale(1.08)}.card-profile:hover .role,.card-profile:focus-within .role{transform:translate(5px);color:#334155}.card-social{color:#fff;background:linear-gradient(140deg,#07122f,#0a183d 60%,#08112a);display:flex;flex-direction:column;justify-content:space-between;min-height:180px;text-decoration:none;transition:transform .28s ease,box-shadow .28s ease}.card-social:hover,.card-social:focus-visible{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-hover)}.arrow{display:block;margin-left:auto;font-size:1.4rem;color:#93c5fd;transition:transform .3s ease}.card-social:hover .arrow,.card-social:focus-visible .arrow{transform:translate3d(3px,-3px,0)}.social-title{margin:0;font-size:1.15rem;font-weight:700;transition:transform .35s cubic-bezier(.16,1,.3,1)}.social-handle{margin:2px 0 0;color:#cbd5e1;font-size:.95rem;transition:color .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}.card-social:hover .social-title,.card-social:focus-visible .social-title{transform:translate(2px)}.card-social:hover .social-handle,.card-social:focus-visible .social-handle{color:#f1f5f9;transform:translate(2px)}.card-about h2{margin:0;font-size:.78rem;letter-spacing:.11em;color:#64748b}.card-about p{margin:16px 0 0;color:#334155;font-size:.96rem;line-height:1.7;transition:transform .38s cubic-bezier(.16,1,.3,1),color .35s ease}.card-about:hover p,.card-about:focus-within p{transform:translate(4px);color:#1e293b}.card-product{display:flex;flex-direction:column;gap:18px;align-items:stretch}.product-main{min-width:0}.product-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.product-icon{width:36px;height:36px;border-radius:11px;border:1px solid #e2e8f0;box-shadow:0 6px 16px #0f172a1a;background:#fff;transition:transform .38s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}.card-product h2{margin:0;font-size:1.25rem;line-height:1.2}.product-badge{font-size:.66rem;font-weight:800;letter-spacing:.09em;border-radius:999px;border:1px solid #fde68a;background:#fffbeb;color:#b45309;padding:4px 10px;transition:transform .36s cubic-bezier(.16,1,.3,1),background .3s ease}.card-product p{margin:10px 0 0;color:#475569;font-size:.94rem;transition:transform .38s cubic-bezier(.16,1,.3,1)}.card-product:hover .product-main p,.card-product:focus-within .product-main p{transform:translate(3px)}.card-product:hover .product-icon,.card-product:focus-within .product-icon{transform:translateY(-1px) scale(1.05);box-shadow:0 10px 22px #0f172a29}.card-product:hover .product-badge,.card-product:focus-within .product-badge{transform:translateY(-1px);background:#fef3c7}.cta-wrap{display:flex;align-items:stretch}.cta{width:100%;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:var(--radius-md);padding:12px 22px;background:#0f172a;color:#fff;font-weight:700;gap:8px;transition:transform .22s ease,background .22s ease,box-shadow .22s ease;position:relative;overflow:hidden}.cta:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#fff0 32%,#ffffff47 50%,#fff0 66%);transform:translate(-140%);animation:shine 3.4s ease-in-out infinite}.cta:hover,.cta:focus-visible{background:#1e293b;transform:translate(2px);box-shadow:0 14px 28px #0f172a3d}.cta-label{position:relative;z-index:1}.cta-icon{position:relative;z-index:1;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .26s cubic-bezier(.16,1,.3,1)}.cta:hover .cta-icon,.cta:focus-visible .cta-icon{transform:translate(3px)}footer{margin-top:24px;text-align:center}footer p{margin:0;font-size:.78rem;color:#64748b;font-weight:600;letter-spacing:.08em}.reveal{opacity:0;transform:translateY(14px);animation:rise .85s cubic-bezier(.16,1,.3,1) forwards}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}@keyframes rise{to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes drift{0%,to{transform:translateZ(0)}50%{transform:translate3d(18px,-12px,0)}}@keyframes pulse{0%{box-shadow:0 0 #22c55eb3}70%{box-shadow:0 0 0 8px #22c55e00}to{box-shadow:0 0 #22c55e00}}@keyframes breathe{0%,to{transform:translateY(0)}50%{transform:translateY(-1px)}}@keyframes shine{0%{transform:translate(-140%)}46%{transform:translate(160%)}to{transform:translate(160%)}}@media(min-width:780px){body{padding:34px}.bento-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:22px}.card-profile{grid-column:span 2;grid-row:span 2;min-height:420px;padding:36px}.card-social{min-height:0;padding:30px}.card-about{display:flex;flex-direction:column;justify-content:center;padding:30px}.card-product{grid-column:span 3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;padding:14px;gap:8px}.product-main{padding:14px 18px;display:flex;flex-direction:column;justify-content:center}.cta-wrap{padding:10px 8px 6px 0;align-self:center;transform:translateY(4px)}.cta{min-width:210px;border-radius:1.5rem;padding:22px 28px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}