:root{--navy:#142a43;--blue:#3d6c9b;--muted:#687580;--line:#dce2e7;--paper:#f7f8fa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--navy);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.85;font-size:15px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #638bb5;outline-offset:5px}button{border:0}img{max-width:100%;display:block}header{height:104px;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 5.5%;max-width:1600px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:16px;font-size:33px;font-family:Georgia,serif;letter-spacing:-3px}.brand>span{font-family:Arial,sans-serif;letter-spacing:2px;font-size:12px;font-weight:600}.brand small{display:block;font-size:8px;color:var(--muted);letter-spacing:2.6px;margin-top:1px}nav{display:flex;align-items:center;gap:34px;font-size:13px}.nav-contact{border-bottom:1px solid var(--navy);padding:10px 0}.nav-contact span{margin-left:25px}.hero{max-width:1600px;margin:auto;padding:88px 5.5% 0;display:grid;grid-template-columns:1.03fr 1fr;gap:0 35px;overflow:hidden;background:linear-gradient(115deg,#fff 58%,#f3f6f9 58%)}.eyebrow{font-family:Arial,sans-serif;letter-spacing:2.9px;font-size:11px;font-weight:600;margin:0 0 26px}.hero h1{font-size:clamp(30px,3.15vw,48px);line-height:1.65;letter-spacing:.02em;margin:0 0 26px;font-weight:600}.blue{color:var(--blue)}.intro{font-size:14px;line-height:2.1;color:#5b6875;margin:0 0 30px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:46px;background:var(--navy);color:white;padding:14px 25px;font-size:13px;border-radius:2px}.primary:hover{background:#305575}.hero-tags{display:flex;gap:18px;font-size:10px;letter-spacing:.03em;color:var(--muted);margin:27px 0 55px}.hero-art{position:relative;min-height:460px;align-self:center}.orbit{position:absolute;width:370px;height:370px;border:1px solid #d2dce5;border-radius:50%;top:3px;right:25px}.orbit:before{content:"";position:absolute;inset:22px;border:1px dashed #d2dce5;border-radius:50%}.browser-frame{position:absolute;top:48px;left:0;width:92%;background:white;border:1px solid #d3dce4;border-radius:8px;overflow:hidden;box-shadow:0 20px 40px #152c4314;transform:rotate(-4deg)}.window-bar{height:25px;background:#fff;border-bottom:1px solid #e8ebee;display:flex;align-items:center;gap:4px;padding:0 10px}.window-bar i{width:4px;height:4px;background:#b8c5d0;border-radius:50%}.window-bar>span{font:8px Arial;color:#7c8894;margin:auto}.phone-frame{position:absolute;right:4%;top:145px;width:32%;border:5px solid #1d2730;border-radius:22px;overflow:hidden;box-shadow:0 15px 30px #172b4326;transform:rotate(6deg)}.art-caption{position:absolute;bottom:10px;left:10px;font:9px Arial;letter-spacing:2px;display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;background:#8f9e82;border-radius:50%}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:23px 0;font-size:10px;color:var(--muted);letter-spacing:1.2px}.hero-bottom span:last-child{font-family:Arial}.section{padding:95px 5.5%;max-width:1600px;margin:auto}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}.section-heading .eyebrow{margin-bottom:12px}h2{font-size:30px;font-weight:600;line-height:1.7;letter-spacing:.03em;margin:0}.section-heading h2 span{color:#6487a7}.section-heading>p{font-size:12px;color:var(--muted);margin:0 0 5px}.work-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:36px}.filters{display:flex;gap:25px}.filters button{padding:11px 0 17px;background:transparent;color:#7a858e;font-size:12px;border-bottom:2px solid transparent}.filters button.active{color:var(--navy);border-bottom-color:var(--navy)}.filters button span{font-size:9px;margin-left:6px}.count{color:var(--muted);font-size:10px}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px 36px}.work-card[hidden]{display:none}.work-visual{width:100%;height:330px;position:relative;overflow:hidden;text-align:left;border-radius:3px}.visual-index{position:absolute;top:23px;left:25px;font:9px Arial;letter-spacing:2.1px;z-index:2}.view{position:absolute;bottom:17px;right:18px;background:#ffffffee;padding:6px 13px;border-radius:2px;font-size:10px;z-index:2}.work-visual img{transition:transform .4s}.work-visual:hover img{transform:translateY(-6px)}.line-visual{background:#ebe9e1}.line-heading{position:absolute;left:9%;top:41%;font-family:serif;font-size:35px;letter-spacing:5px;color:#69725a}.line-heading small{display:block;font:8px Arial;letter-spacing:1.4px;margin-top:9px}.line-visual>img{width:34%;position:absolute;right:12%;top:49px;border:5px solid #fdfcf9;border-radius:14px;box-shadow:0 8px 30px #514c3226}.web-visual{background:#e6edf3}.mini-browser{position:absolute;width:85%;top:68px;left:7.5%;border:1px solid #ced9e1;box-shadow:0 10px 25px #1b35451a;border-radius:4px;overflow:hidden}.driver-visual{background:#242525;color:#dec997}.driver-visual>img{width:61%;position:absolute;right:19%;top:55px;box-shadow:0 0 25px #0005}.dispatch-visual{background:#372530;color:#e3d0b0}.dispatch-visual>img{width:86%;position:absolute;right:7%;top:61px;box-shadow:0 0 25px #0004}.card-body{padding-top:20px}.meta{display:flex;align-items:center;gap:14px;font-size:10px;color:var(--muted)}.badge{font-size:9px;padding:2px 8px;border:1px solid #d9dee2;border-radius:3px;color:#65717c}.badge.public{border-color:#c3d5ca;color:#577663;background:#f5f9f6}h3{font-size:19px;font-weight:600;line-height:1.6;margin:12px 0 9px}h3 button{background:none;padding:0;text-align:left}.card-body>p{font-size:12px;color:var(--muted);line-height:1.9;margin:0 0 15px}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags>span{font-size:9px;background:#f1f4f6;padding:3px 9px;border-radius:2px;color:#6a7884}.project-url{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:17px;padding-top:10px;font:11px Arial;color:#3e6387}.works-note{margin-top:35px;color:var(--muted);font-size:10px;line-height:1.9}.about{background:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:70px}.about-title h2{font-size:30px}.name{font-size:18px;margin-top:42px}.name small{display:block;font:9px Arial;letter-spacing:2px;color:var(--muted);margin-top:5px}.about-copy .lead{font-size:21px;line-height:1.8;margin:0 0 25px;color:var(--navy)}.about-copy p{font-size:12px;color:var(--muted);margin:0 0 18px;line-height:2.1}dl{font-size:11px;margin-top:30px}dl>div{display:grid;grid-template-columns:120px 1fr;padding:14px 0;border-top:1px solid var(--line);gap:10px}dt{font-weight:600}dd{margin:0;color:var(--muted)}.contact{text-align:center;background:var(--navy);color:white;padding-top:75px;padding-bottom:75px}.contact .eyebrow{color:#a7bdcf;margin-bottom:20px}.contact h2{font-size:32px}.contact p{font-size:12px;color:#bdcbd5;line-height:2;margin:22px 0}.contact-link{display:inline-flex;gap:75px;border-bottom:1px solid #a6bacb;padding:12px 0;font-size:15px}.contact-domain{display:block;margin-top:15px;font:10px Arial;color:#9cb0c0}footer{max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:35px 5.5%;font-size:10px}footer p{font:9px Arial;color:var(--muted)}footer .brand{font-size:28px}footer .brand>span{font-size:9px}footer .brand small{font-size:7px}.mobile-break{display:none}.skip{position:fixed;top:-100px;left:10px;background:white;padding:10px;z-index:20}.skip:focus{top:10px}dialog{width:min(1120px,94vw);max-height:90vh;border:0;padding:0;border-radius:6px;color:var(--navy);box-shadow:0 30px 100px #0005}dialog::backdrop{background:#102034b8;backdrop-filter:blur(4px)}.dialog-top{position:sticky;top:0;background:white;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:16px 27px;border-bottom:1px solid var(--line);font:10px Arial;letter-spacing:2px}.dialog-top button{background:#eff3f6;padding:8px 15px;border-radius:3px;font-size:12px;letter-spacing:0}.dialog-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:35px}.dialog-content h2{font-size:25px;margin-bottom:20px}.dialog-content .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:14px}.dialog-content p,.dialog-content li{font-size:12px;line-height:2;color:#64717c}.dialog-content h3{font-size:13px;margin-top:25px}.dialog-content ul{padding-left:18px}.dialog-content li{margin-bottom:9px}.dialog-content figure{margin:0;background:#f1f3f4;padding:15px;align-self:start;border-radius:4px}.dialog-content figure img{width:100%}.dialog-content figcaption{font-size:10px;color:var(--muted);padding-top:12px;line-height:1.8}.detail-note{background:#f0f4f6;padding:14px}.literal-url{word-break:break-all}.dialog-content .primary{margin-top:12px}a:hover{color:#597b9d}.primary:hover,.contact-link:hover{color:white}@media(min-width:1500px){.hero-art{min-height:500px}.work-visual{height:390px}}@media(max-width:950px){.hero{padding-top:60px;grid-template-columns:1.1fr 1fr;gap:15px}.hero-art{min-height:350px}.hero h1{font-size:30px}.hero-tags{gap:10px;font-size:9px}.orbit{width:260px;height:260px}.phone-frame{width:38%;top:110px}.art-caption{font-size:7px;letter-spacing:1px;bottom:0}.work-visual{height:270px}.section{padding-top:70px;padding-bottom:70px}.about{gap:35px}.about-title h2{font-size:26px}header{height:85px}nav{gap:22px}.dialog-content{gap:25px;padding:25px}}@media(max-width:640px){html{scroll-padding-top:20px}header{height:79px;padding:0 6%}.brand{font-size:29px;gap:11px}.brand>span{font-size:9px;letter-spacing:1.5px}.brand small{font-size:6px;letter-spacing:1.6px}nav{gap:20px;font-size:11px}.nav-contact{display:none}.hero{padding:43px 6% 0;display:flex;flex-direction:column;background:linear-gradient(145deg,#fff 52%,#f3f6f9 52%)}.hero .eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:23px}.hero h1{font-size:clamp(25px,7.1vw,34px);line-height:1.7;margin-bottom:19px;letter-spacing:0}.intro{font-size:12px;line-height:2;margin-bottom:25px}.primary{font-size:12px;padding:12px 21px;gap:55px}.hero-tags{font-size:9px;gap:15px;margin:23px 0 0}.hero-art{align-self:stretch;min-height:355px;margin-top:20px}.browser-frame{top:37px;width:88%}.phone-frame{top:108px;width:30%;right:6%;border-width:4px;border-radius:17px}.orbit{right:25px;width:270px;height:270px}.art-caption{bottom:13px;font-size:7px}.hero-bottom{width:100%;font-size:8px;letter-spacing:0;padding:20px 0}.section{padding:57px 6%}.section-heading{display:block;margin-bottom:25px}.section-heading .eyebrow{font-size:9px;margin-bottom:12px}.section-heading h2{font-size:26px}.section-heading>p{font-size:11px;margin-top:16px}.work-toolbar{margin-bottom:25px}.filters{gap:18px;flex-wrap:wrap}.filters button{font-size:10px;padding:9px 0 12px}.count{font-size:9px}.work-grid{grid-template-columns:1fr;gap:36px}.work-visual{height:280px}.line-visual>img{width:33%;right:14%;top:40px}.line-heading{font-size:30px;left:10%}.visual-index{font-size:8px;top:19px;left:20px}.view{font-size:9px}.mini-browser{top:60px}.card-body{padding-top:17px}h3{font-size:17px}.card-body>p{font-size:11px}.meta{font-size:9px}.works-note{font-size:9px;margin-top:27px}.about{display:block}.about-title .eyebrow{font-size:9px}.about-title h2{font-size:26px}.name{margin:24px 0 32px;font-size:17px}.about-copy .lead{font-size:20px}.about-copy p{font-size:12px}dl>div{grid-template-columns:95px 1fr;font-size:10px}.contact h2{font-size:25px}.contact p{font-size:11px}.mobile-break{display:block}.contact-link{font-size:13px;gap:60px}footer{padding:25px 6%;flex-wrap:wrap;gap:20px}footer .brand{width:100%;font-size:27px}footer .brand>span{font-size:9px}footer p{margin:0}.dialog-content{display:flex;flex-direction:column;padding:24px;gap:25px}.dialog-content h2{font-size:22px}.dialog-top{padding:13px 20px}.dialog-content figure{width:100%}.dialog-content figure img{max-width:600px;margin:auto}dialog{max-height:93vh;width:94vw}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work-visual img{transition:none}}
img{height:auto}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.secondary,.text-link{font-size:13px;border-bottom:1px solid #95a9bb;padding:6px 0}.skills-overview{background:var(--paper);padding-top:58px;padding-bottom:58px}.skills-overview .section-heading{margin-bottom:20px}.skills-intro{max-width:720px;color:#5b6875;font-size:14px;line-height:2}.skill-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}.skill-shortcuts>a{display:flex;align-items:center;gap:14px;padding:20px;background:white;border:1px solid var(--line);font-size:13px}.skill-shortcuts>a>span:last-child{margin-left:auto}.skill-number{font:12px Arial;letter-spacing:1px;color:var(--blue)}.breadcrumb{display:inline-block;font-size:12px;margin-bottom:38px;color:#526d85}.skills-page{max-width:1280px;padding-top:42px}.skills-page>.eyebrow{margin-bottom:15px}.skills-page h1{font-size:clamp(26px,3vw,40px);line-height:1.6;margin:0 0 22px}.skill-page-nav{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 48px}.skill-page-nav>a{padding:10px 15px;background:var(--paper);border:1px solid var(--line);font-size:12px}.skill-page-nav span{color:var(--blue);font:11px Arial;margin-right:10px}.skill-detail{display:grid;grid-template-columns:155px minmax(0,1fr);gap:30px;border-top:1px solid var(--line);padding:42px 0;scroll-margin-top:24px}.skill-label .skill-number{font-size:28px}.skill-label p{font-size:11px;color:var(--muted);margin:8px 0}.skill-content h2{font-size:24px}.skill-content ul{padding-left:22px;margin:24px 0 30px}.skill-content li{font-size:14px;line-height:2;margin-bottom:12px;padding-left:3px}.skill-content li::marker{color:var(--blue)}.related-works{background:var(--paper);padding:22px 26px}.related-works h3{font-size:12px;letter-spacing:.05em;margin:0 0 14px}.related-links{display:flex;gap:10px;flex-wrap:wrap}.related-links a{display:flex;gap:24px;align-items:center;justify-content:space-between;background:white;border:1px solid var(--line);padding:11px 15px;font-size:12px}.relation-note{font-size:12px;color:#5b6875;line-height:1.9;max-width:650px;margin:0 0 16px}.skills-message{background:var(--navy);padding:28px 34px;color:white;font-size:14px;line-height:2}.skills-message p{margin:0 0 14px}.skills-message p:last-child{margin-bottom:0}.skills-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:32px}nav [aria-current=page]{color:var(--blue);border-bottom:1px solid var(--blue)}
@media(max-width:950px){header nav{gap:18px}.skill-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-detail{grid-template-columns:120px minmax(0,1fr);gap:20px}}
@media(max-width:640px){header{height:auto;min-height:79px;flex-wrap:wrap;padding-top:17px;padding-bottom:14px;gap:16px}header nav{width:100%;justify-content:space-between;gap:15px;font-size:11px}header .nav-contact{display:inline;padding:0;border:0}header .nav-contact span{margin-left:4px}.hero-actions{gap:17px}.hero-actions .primary{gap:22px}.secondary{font-size:12px}.skills-overview{padding-top:42px;padding-bottom:42px}.skills-overview h2{font-size:23px}.skills-overview .text-link{display:inline-block;margin-top:16px;font-size:12px}.skills-intro{font-size:12px}.skill-shortcuts{grid-template-columns:1fr;gap:9px;margin-top:22px}.skill-shortcuts>a{padding:16px;font-size:12px}.skills-page{padding-top:27px}.breadcrumb{margin-bottom:28px}.skills-page h1{font-size:26px}.skill-page-nav{display:grid;grid-template-columns:1fr;width:100%;gap:8px;margin:26px 0 32px}.skill-page-nav>a{font-size:12px;padding:11px 14px}.skill-detail{grid-template-columns:1fr;gap:13px;padding:30px 0}.skill-label{display:flex;align-items:center;gap:16px}.skill-label .skill-number{font-size:22px}.skill-label p{margin:0}.skill-content h2{font-size:21px}.skill-content ul{margin:20px 0 24px;padding-left:20px}.skill-content li{font-size:13px;line-height:1.95;margin-bottom:13px}.related-works{padding:19px 17px}.related-links{flex-direction:column}.related-links a{font-size:12px;gap:12px}.relation-note{font-size:11px}.skills-message{padding:23px;font-size:13px}.skills-bottom{gap:19px}.skills-bottom .primary{gap:24px}}