:root{color-scheme:dark;--bg:#080a0d;--panel:#11151b;--line:#333942;--text:#f6f8fb;--muted:#aab3be;--blue:#146dff;font-family:Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:20;background:var(--text);color:var(--bg);padding:.7rem 1rem}
.skip-link:focus{top:1rem}
.site-header{height:84px;padding:0 clamp(24px,5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#000}
.header-brand{font-size:clamp(19px,2vw,27px);font-weight:800;letter-spacing:-.07em;white-space:nowrap}
.header-brand span{font-weight:400}
.header-brand i{display:inline-block;background:var(--blue);width:6px;height:6px;margin-left:8px;vertical-align:middle}
.site-header nav{display:flex;gap:clamp(24px,3vw,48px);font-size:11px;letter-spacing:.16em;font-weight:700}
.site-header nav a,.site-footer a{transition:color .2s}
.site-header nav a:hover,.site-footer a:hover{color:#6ca5ff}
.hero{min-height:min(850px,calc(100svh - 84px));padding:26px clamp(24px,5vw,80px) 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;background:#000}
.hero:before{content:"";position:absolute;width:1px;top:0;bottom:0;left:50%;background:linear-gradient(var(--line),transparent 75%);opacity:.28;pointer-events:none}
.hero-meta,.hero-bottom{display:flex;justify-content:space-between;color:#7c8795;font-size:10px;font-weight:700;letter-spacing:.19em;z-index:1}
.hero-image-wrap{height:clamp(260px,36vw,480px);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.hero-logo{width:min(100%,1020px);height:100%;object-fit:contain}
.hero-copy{width:min(100%,740px);margin:auto 0 64px;z-index:1}
.eyebrow{display:flex;align-items:center;gap:12px;color:#c5d0db;font-size:12px;letter-spacing:.16em;margin:0 0 18px}
.blue-square{display:inline-block;width:8px;height:8px;background:var(--blue)}
.hero h1{font-size:clamp(34px,5vw,66px);line-height:1.3;letter-spacing:-.055em;margin:0 0 20px;font-weight:800}
.hero-copy>p:not(.eyebrow){max-width:630px;font-size:clamp(14px,1.3vw,17px);line-height:1.9;color:var(--muted);margin:0 0 28px}
.text-link{display:inline-flex;gap:22px;align-items:center;border-bottom:1px solid var(--blue);padding-bottom:8px;font-size:14px;font-weight:700}
.text-link span,.work-link span{color:#6ca5ff;font-size:20px;transition:transform .2s}
.text-link:hover span,.work-card:hover .work-link span{transform:translate(4px,-4px)}
.section{display:grid;grid-template-columns:minmax(150px,25%) 1fr;gap:30px;border-top:1px solid var(--line);padding:clamp(70px,9vw,140px) clamp(24px,5vw,80px)}
.section-label{display:flex;gap:18px;color:#98a3b0;font-size:11px;letter-spacing:.16em;font-weight:700;padding-top:12px}
.section-label span:first-child{color:var(--blue)}
.section-body{max-width:1120px}
.section h2{font-size:clamp(36px,5.4vw,76px);line-height:1.18;letter-spacing:-.055em;margin:0 0 34px}
.blue-period{color:var(--blue)}
.profile-role{color:#84aaf2;font-size:11px;font-weight:700;letter-spacing:.18em;margin:0 0 20px}
.about .profile-copy{max-width:720px;font-size:clamp(18px,2.1vw,27px);line-height:1.85;letter-spacing:-.025em;margin:0;color:#d8dde4}
.profile-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:720px;margin-top:46px}
.profile-links a{display:flex;align-items:center;gap:18px;min-width:0;border:1px solid var(--line);background:var(--panel);padding:20px 24px;font-size:14px;font-weight:700;transition:border-color .2s,transform .2s}
.profile-links a:hover{border-color:#5c7292;transform:translateY(-2px)}
.profile-platform{color:#8db4ff;font-size:12px;letter-spacing:.08em;min-width:34px}
.profile-arrow{color:#6ca5ff;font-size:20px;margin-left:auto}
.works{padding-bottom:clamp(100px,12vw,190px)}
.work-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);border:1px solid var(--line);background:var(--panel);min-height:385px;transition:border-color .2s,transform .2s}
.work-card:hover{border-color:#5c7292;transform:translateY(-3px)}
.work-image{background:#111e32;overflow:hidden;min-height:300px}
.work-image img{width:100%;height:100%;object-fit:cover}
.work-content{padding:clamp(25px,3vw,46px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.work-index{color:#89a5d1;letter-spacing:.18em;font-size:11px;font-weight:700}
.work-content h3{font-size:clamp(30px,3vw,44px);letter-spacing:-.05em;margin:0 0 13px}
.work-content p{font-size:15px;line-height:1.85;color:var(--muted);margin:0}
.work-link{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;font-size:13px;font-weight:700}
.site-footer{border-top:1px solid var(--line);padding:55px clamp(24px,5vw,80px) 30px}
.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:end;gap:20px}
.footer-name{font-size:clamp(30px,4vw,50px);font-weight:800;letter-spacing:-.07em}
.footer-top a{font-size:11px;letter-spacing:.12em;font-weight:700}
.footer-bottom{border-top:1px solid var(--line);margin-top:60px;padding-top:22px;color:#8b96a3;font-size:11px;letter-spacing:.08em}
@media(max-width:760px){.site-header{height:72px}.hero{min-height:calc(100svh - 72px)}.hero-image-wrap{height:clamp(230px,55vw,360px)}.hero-copy{margin:auto 0 58px}.hero:before{left:75%}.section{display:block}.section-label{margin-bottom:45px}.work-card{grid-template-columns:1fr}.work-image{min-height:0;aspect-ratio:16/9}.work-content{min-height:315px}.footer-bottom{align-items:start;flex-direction:column;gap:8px}}
@media(max-width:480px){.site-header{padding:0 16px}.site-header nav{gap:11px;font-size:9px}.header-brand{font-size:18px}.hero-meta,.hero-bottom{font-size:8px;letter-spacing:.08em}.hero h1{font-size:34px}.hero-image-wrap{height:240px}.hero-copy{margin:0 0 52px}.hero{min-height:680px}.section h2{font-size:37px}.about .profile-copy{font-size:18px}.profile-links{grid-template-columns:1fr;gap:10px}.profile-links a{padding:16px 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}