:root{color:#07152f;font-synthesis:none;text-rendering:optimizelegibility;background:#f8fbff;font-family:A-OTF リュウミン Pr6N,A-OTF Ryumin Pr6N,Ryumin Pr6N,Hiragino Mincho ProN,Yu Mincho,YuMincho,Noto Serif JP,serif;line-height:1.8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:#07152f;background:radial-gradient(circle at 87% 8%,#4867ff33,#0000 24rem),radial-gradient(circle at 52% 22%,#77b5ff38,#0000 28rem),linear-gradient(#fff 0%,#f7fbff 48%,#fff 100%);min-width:320px;margin:0}body:before{z-index:-1;pointer-events:none;content:"";background:linear-gradient(120deg,#0000 0 47%,#3d63ff09 48% 52%,#0000 53%),radial-gradient(circle at 78% 20%,#6f8fff1f,#0000 28rem);position:fixed;inset:0}a{color:inherit}main{overflow:hidden}.section-shell,.site-header{width:min(100% - 40px,1120px);margin:0 auto}.site-header{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffb8;border-bottom:1px solid #e0e9ff9e;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;min-height:88px;display:grid;position:fixed;top:0;left:50%;transform:translate(-50%)}.brand{color:#091833;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.brand strong{color:#315cff;font-size:2rem;font-weight:800;line-height:1}.brand span{color:#0b1730;font-size:.82rem;font-weight:700;line-height:1.15}.site-nav{color:#0c1933;justify-content:center;gap:46px;font-size:.88rem;font-weight:700;display:none}.site-nav a{text-decoration:none;position:relative}.site-nav a[aria-current=page]{color:#315cff}.site-nav a[aria-current=page]:after{content:"";background:#315cff;border-radius:999px;height:2px;position:absolute;bottom:-14px;left:0;right:0}.header-contact{color:#fff;background:linear-gradient(135deg,#315cff,#496cff);border-radius:14px;align-items:center;gap:10px;min-height:48px;padding:0 22px;font-size:.88rem;font-weight:800;text-decoration:none;display:none;box-shadow:0 16px 34px #315cff3d}.header-contact:before{content:"✉"}.menu-toggle{background:#ffffffd1;border:1px solid #315cff24;border-radius:14px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:none;box-shadow:0 14px 28px #1c3c821a}.menu-toggle span{background:#315cff;border-radius:999px;width:18px;height:2px;transition:transform .18s,opacity .18s;position:absolute}.menu-toggle span:first-child{transform:translateY(-4px)}.menu-toggle span:last-child{transform:translateY(4px)}.menu-toggle.is-open span:first-child{transform:rotate(45deg)}.menu-toggle.is-open span:last-child{transform:rotate(-45deg)}.hero{grid-template-columns:1fr;align-items:center;gap:48px;min-height:520px;padding:136px 0 84px;display:grid}.hero__content{z-index:2;position:relative}h1,h2,h3,p{margin-top:0}h1{color:#08152f;letter-spacing:0;margin-bottom:0;font-size:clamp(3.3rem,12vw,5.4rem);font-weight:900;line-height:1.18}h1 em{color:#315cff;font-style:normal}.hero-underline{width:min(100%,520px);height:54px;margin:-2px 0 18px;display:block;overflow:visible}.hero-underline__stroke{fill:none;stroke:#315cff;stroke-linecap:round;stroke-linejoin:round;stroke-width:7px;filter:drop-shadow(0 10px 18px #315cff3d);stroke-dasharray:1;stroke-dashoffset:1px;animation:.9s cubic-bezier(.16,1,.3,1) 1.5s forwards drawUnderline}h2{color:#0a1731;letter-spacing:0;margin-bottom:22px;font-size:clamp(1.75rem,4.2vw,2.55rem);font-weight:850;line-height:1.45}h3{color:#0b1730;margin-bottom:12px;font-size:1.08rem;font-weight:850}.hero__note{color:#41506b;margin-bottom:34px;font-size:1rem;font-weight:560}.hero__actions{flex-wrap:wrap;gap:16px;display:flex}.button{color:#315cff;background:#ffffffc7;border:1px solid #315cff1f;border-radius:999px;justify-content:center;align-items:center;gap:10px;min-height:52px;padding:0 24px;font-weight:800;text-decoration:none;transition:transform .18s,box-shadow .18s;display:inline-flex;box-shadow:0 18px 42px #1c3c821a,inset 0 1px #ffffffe6}.button:after{content:"→"}.button:hover{transform:translateY(-2px);box-shadow:0 24px 52px #315cff29}.button--primary{color:#fff;background:linear-gradient(135deg,#315cff,#2457ff);box-shadow:0 20px 44px #315cff42}.button--primary:before{content:"✉"}.hero__visual{min-height:390px;position:relative}.hero__visual:before,.hero__visual:after{pointer-events:none;content:"";position:absolute}.hero__visual:before{opacity:0;filter:blur(.2px);background:radial-gradient(circle at 18% 54%,#fffffff2 0 3px,#0000 4px),radial-gradient(circle at 68% 34%,#ffffffe6 0 2px,#0000 3px),linear-gradient(104deg,#0000 10%,#315cff2e,#0000 72%);border-radius:999px;animation:1.4s cubic-bezier(.16,1,.3,1) .22s both orbitIgnite;inset:36px -18px 28px 18px;transform:rotate(-17deg)scale(.92)}.hero__visual:after{background:linear-gradient(90deg,#0000,#fff,#6f91ff,#0000);border-radius:999px;width:0;height:2px;animation:1.05s cubic-bezier(.16,1,.3,1) .36s both lightTrace;top:42%;left:6%;transform:rotate(-19deg);box-shadow:0 0 26px #315cff6b}.soft-orbit{opacity:0;border:1px solid #5c80ff38;border-radius:50%;animation:1.3s cubic-bezier(.16,1,.3,1) both orbitDraw;position:absolute;transform:rotate(-17deg)}.soft-orbit--one{animation-delay:.12s;inset:22px 12px 54px 18px}.soft-orbit--two{animation-delay:.26s;inset:78px -40px 42px 84px}.glow-ball{opacity:0;background:radial-gradient(circle at 32% 28%,#fff,#a8c7ff 48%,#dce8ff 72%);border-radius:999px;width:112px;height:112px;animation:1s cubic-bezier(.16,1,.3,1) both glowBloom;position:absolute;top:148px;left:22%;transform:scale(.72);box-shadow:0 0 54px #4277ff42,inset -18px -22px 34px #3461ff29}.floating-card{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;will-change:transform, opacity, filter;background:#ffffffbd;border:1px solid #ffffffd6;border-radius:18px;grid-template-columns:36px 1fr;gap:18px;width:min(82%,330px);padding:22px;display:grid;position:absolute;overflow:hidden;box-shadow:0 24px 70px #315cff1f,inset 0 1px #ffffffeb}.floating-card:before{content:"";filter:blur(4px);background:linear-gradient(90deg,#0000,#fffffff2,#0000);width:42%;animation:.98s ease-out both cardSheen;position:absolute;inset:-40% auto -40% -55%;transform:skew(-18deg)}.floating-card span,.floating-card div{z-index:1;position:relative}.floating-card span{color:#315cff;background:#fff;border:1px solid #315cff29;border-radius:999px;place-items:center;width:36px;height:36px;font-size:1.12rem;animation:.72s cubic-bezier(.16,1,.3,1) both iconPop;display:grid}.floating-card strong{color:#08152f;margin-bottom:6px;display:block}.floating-card p{color:#40506d;margin-bottom:0;font-size:.84rem;font-weight:620}.floating-card--top{animation:1s cubic-bezier(.16,1,.3,1) both cardAssembleTop;top:14px;left:20%;transform:rotate(-4deg)}.floating-card--top:before{animation-delay:.98s}.floating-card--top span{animation-delay:.95s}.floating-card--middle{animation:1s cubic-bezier(.16,1,.3,1) both cardAssembleMiddle;top:150px;right:4%}.floating-card--middle:before{animation-delay:1.18s}.floating-card--middle span{animation-delay:1.15s}.floating-card--bottom{animation:1s cubic-bezier(.16,1,.3,1) both cardAssembleBottom;bottom:-26px;right:0}.floating-card--bottom:before{animation-delay:1.38s}.floating-card--bottom span{animation-delay:1.35s}@keyframes orbitDraw{0%{opacity:0;filter:blur(8px);transform:rotate(-17deg)scale(.72)}to{opacity:1;filter:blur();transform:rotate(-17deg)scale(1)}}@keyframes orbitIgnite{0%{opacity:0;transform:rotate(-17deg)scale(.82)}58%{opacity:.86}to{opacity:.46;transform:rotate(-17deg)scale(1)}}@keyframes lightTrace{0%{opacity:0;width:0;transform:translate(-28px)rotate(-19deg)}35%{opacity:1}to{opacity:0;width:92%;transform:translate(46px)rotate(-19deg)}}@keyframes glowBloom{0%{opacity:0;filter:blur(12px);transform:scale(.62)}70%{opacity:1;transform:scale(1.08)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes cardAssembleTop{0%{opacity:0;filter:blur(22px);transform:translate(-260px,150px)rotate(-42deg)scale(.54)}36%{opacity:1;filter:blur(4px);transform:translate(72px,-70px)rotate(16deg)scale(1.1)}68%{opacity:1;filter:blur();transform:translate(-18px,16px)rotate(-8deg)scale(.98)}86%{opacity:1;filter:blur();transform:translate(6px,-5px)rotate(-2deg)scale(1.02)}to{opacity:1;filter:blur();transform:translate(0,0)rotate(-4deg)scale(1)}}@keyframes cardAssembleMiddle{0%{opacity:0;filter:blur(22px);transform:translate(280px,-120px)rotate(38deg)scale(.52)}34%{opacity:1;filter:blur(4px);transform:translate(-90px,52px)rotate(-18deg)scale(1.12)}67%{opacity:1;filter:blur();transform:translate(22px,-18px)rotate(7deg)scale(.98)}86%{opacity:1;filter:blur();transform:translate(-6px,5px)rotate(-2deg)scale(1.02)}to{opacity:1;filter:blur();transform:translate(0,0)rotate(0)scale(1)}}@keyframes cardAssembleBottom{0%{opacity:0;filter:blur(22px);transform:translate(180px,210px)rotate(46deg)scale(.52)}35%{opacity:1;filter:blur(4px);transform:translate(-76px,-82px)rotate(-20deg)scale(1.12)}67%{opacity:1;filter:blur();transform:translate(24px,20px)rotate(8deg)scale(.98)}86%{opacity:1;filter:blur();transform:translate(-7px,-6px)rotate(-2deg)scale(1.02)}to{opacity:1;filter:blur();transform:translate(0,0)rotate(0)scale(1)}}@keyframes cardSheen{0%{opacity:0;transform:translate(0)skew(-18deg)}34%{opacity:.8}to{opacity:0;transform:translate(420%)skew(-18deg)}}@keyframes iconPop{0%{opacity:0;transform:scale(.45)rotate(-18deg)}70%{opacity:1;transform:scale(1.16)rotate(6deg)}to{opacity:1;transform:scale(1)rotate(0)}}.content-section{padding:54px 0}.section-kicker{color:#315cff;align-items:center;gap:8px;margin-bottom:18px;font-size:.86rem;font-weight:800;display:inline-flex}.dot{background:#315cff;border-radius:999px;width:9px;height:9px;display:inline-block;box-shadow:0 0 16px #315cff7a}.about-grid{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffc7;border:1px solid #dce6ffeb;border-radius:28px;gap:24px;padding:clamp(26px,4vw,44px);display:grid;position:relative;box-shadow:0 30px 80px #2d48821a}.about-title{margin-bottom:0}.about-main{align-items:start;gap:32px;display:grid}.about-photo{aspect-ratio:1/1.25;object-fit:cover;object-position:58% 42%;border-radius:14px;width:100%;max-width:250px;box-shadow:0 24px 48px #1e396e29}.about-copy p,.project-copy p,.service-card p,.contact p{color:#40506d;font-size:.93rem;font-weight:560}.signature{color:#315cff;margin-top:8px;font-family:cursive;font-size:1.9rem;display:inline-block;transform:rotate(-6deg)}.about-name{color:#40506d;letter-spacing:0;justify-self:end;margin:-2px 0 0;font-family:Snell Roundhand,Zapfino,Hiragino Mincho ProN,Yu Mincho,YuMincho,Segoe Script,Brush Script MT,cursive;font-size:clamp(1.2rem,2.8vw,1.75rem);font-weight:500;line-height:1.25;transform:rotate(-2deg)}.service-card{background:#ffffffb8;border:1px solid #dde6ffe6;border-radius:18px;padding:24px;box-shadow:0 18px 46px #2d488214}.service-card span,.contact-icon{color:#315cff;background:linear-gradient(135deg,#eef4ff,#fff);border-radius:999px;place-items:center;width:48px;height:48px;font-size:1.28rem;display:grid;box-shadow:inset 0 1px #fff}.work-card{background:radial-gradient(circle at 78% 46%,#6190ff29,#0000 24rem),linear-gradient(135deg,#fff 0%,#edf6ff 100%);border:1px solid #d4e2fff2;border-radius:22px;gap:28px;padding:clamp(26px,4.4vw,48px);display:grid;position:relative;overflow:hidden;box-shadow:0 26px 70px #2d48821a}.project-label{color:#315cff;background:#eaf1ff;border-radius:999px;margin-bottom:16px;padding:7px 14px;font-size:.78rem;font-weight:800;display:inline-flex}.project-achievement{color:#315cff;background:#ffffffb8;border:1px solid #315cff1f;border-radius:999px;align-items:baseline;gap:8px;margin:0 0 18px;padding:9px 15px;display:inline-flex;box-shadow:0 14px 34px #315cff14}.project-achievement strong{font-size:1.28rem;line-height:1}.project-achievement span{color:#40506d;font-size:.86rem;font-weight:800}.project-copy ul{gap:12px;margin:24px 0 28px;padding:0;list-style:none;display:grid}.project-copy li{color:#273753;padding-left:28px;font-size:.92rem;font-weight:700;position:relative}.project-copy li:before{color:#fff;content:"✓";background:#315cff;border-radius:999px;place-items:center;width:16px;height:16px;font-size:.62rem;display:grid;position:absolute;top:.45em;left:0}.project-device-media{min-height:300px;position:relative}.macbook-shot,.iphone-shot{filter:drop-shadow(0 26px 44px #334c7838);height:auto;display:block;position:absolute}.macbook-shot{width:min(100%,680px);bottom:0;right:-4%}.iphone-shot{width:min(23vw,126px);bottom:8px;right:0}.service-grid{gap:20px;display:grid}.service-card p{margin-bottom:0}.service-link{color:#315cff;align-items:center;gap:6px;margin-top:14px;font-size:.82rem;font-weight:800;text-decoration:none;display:inline-flex}.service-link:after{content:"↗";font-size:.78rem}.contact{background:radial-gradient(circle at 88% 20%,#6f5aff24,#0000 18rem),linear-gradient(135deg,#eaf2ff 0%,#f4f7ff 100%);border-radius:22px;align-items:center;gap:24px;margin-top:24px;margin-bottom:28px;padding:clamp(28px,5vw,48px);display:grid;position:relative}.contact h2{margin-bottom:8px;font-size:clamp(1.45rem,3.6vw,2rem)}.contact-actions{flex-wrap:wrap;gap:14px;display:flex}main:after{color:#68758c;content:"UH   Umehide Portfolio        Home        About        Works        Service        Contact        © 2024 Umehide. All rights reserved.";white-space:pre-wrap;width:min(100% - 40px,1120px);margin:0 auto 24px;font-size:.82rem;display:block}@media (width>=760px){.section-shell,.site-header{width:min(100% - 72px,1120px)}.hero{grid-template-columns:.46fr .54fr;padding-top:148px}.about-grid{align-items:start}.about-title{grid-column:1/-1}.about-main{grid-template-columns:250px minmax(0,1fr)}.work-card{grid-template-columns:.42fr .58fr;align-items:center}.project-device-media{min-height:360px}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact{grid-template-columns:auto minmax(0,1fr) auto}}@media (width>=1024px){.site-nav,.header-contact{display:flex}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=1023px){.site-header{grid-template-columns:minmax(0,1fr) auto auto;gap:10px;width:min(100% - 32px,1120px)}.header-contact{min-height:42px;padding:0 16px;display:inline-flex}.menu-toggle{display:inline-flex;position:relative}.site-nav{opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffffff0;border:1px solid #dde6ffeb;border-radius:20px;gap:4px;padding:12px;transition:opacity .18s,transform .18s;display:grid;position:absolute;top:calc(100% + 10px);left:0;right:0;transform:translateY(-8px)scale(.98);box-shadow:0 24px 70px #2d488224}.site-nav.is-open{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.site-nav a{border-radius:14px;padding:13px 14px}.site-nav a[aria-current=page]{background:#eef4ff}.site-nav a[aria-current=page]:after{display:none}.hero__visual{border-radius:24px;overflow:hidden}.soft-orbit--two{inset:78px 8px 42px 84px}}@media (width<=759px){.section-shell{width:min(100% - 32px,1120px)}h1{font-size:clamp(2.9rem,17vw,4.2rem)}h2{font-size:clamp(1.52rem,8vw,2.1rem)}.hero{gap:34px;padding:118px 0 64px}.hero-underline{height:42px;margin-bottom:12px}.hero__note{font-size:.94rem}.hero__actions .button{width:100%}.floating-card{width:100%;margin-bottom:14px;animation:1s cubic-bezier(.16,1,.3,1) both mobileCardReveal;position:relative;inset:auto;transform:none}.soft-orbit,.glow-ball{display:none}.hero__visual{min-height:auto}.about-grid,.work-card,.contact{border-radius:20px}.about-main{gap:22px}.about-photo{max-width:100%}.about-name{overflow-wrap:anywhere;justify-self:start;max-width:100%;transform:none}.project-device-media{min-height:clamp(220px,72vw,330px)}.macbook-shot{width:min(112%,560px);max-width:none;right:-8%}.iphone-shot{width:clamp(74px,24vw,112px);max-width:28%;right:-2%}.service-grid,.contact{grid-template-columns:1fr}.contact-actions .button{width:100%}}@media (width<=380px){.section-shell,.site-header{width:min(100% - 24px,1120px)}.brand{gap:8px}.brand strong{font-size:1.65rem}.brand span{font-size:.72rem}.header-contact{border-radius:12px;min-height:40px;padding:0 11px;font-size:.78rem}.menu-toggle{border-radius:12px;width:40px;height:40px}.about-grid,.work-card,.contact{padding:22px}.project-achievement{border-radius:16px;flex-direction:column;align-items:flex-start;gap:4px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.floating-card,.glow-ball,.soft-orbit{opacity:1;filter:none}.floating-card--top{transform:rotate(-4deg)}.floating-card--middle,.floating-card--bottom{transform:none}.floating-card:before,.hero__visual:before,.hero__visual:after{display:none}.hero-underline__stroke{stroke-dashoffset:0}}@keyframes drawUnderline{0%{opacity:0;stroke-dashoffset:1px}18%{opacity:1}to{opacity:1;stroke-dashoffset:0}}@keyframes mobileCardReveal{0%{opacity:0;filter:blur(18px);transform:translate(-80px,80px)rotate(-16deg)scale(.72)}42%{opacity:1;filter:blur(3px);transform:translate(24px,-22px)rotate(8deg)scale(1.06)}76%{opacity:1;filter:blur();transform:translate(-7px,8px)rotate(-3deg)scale(.99)}to{opacity:1;filter:blur();transform:translate(0,0)scale(1)}}