*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#FCFCFA;color:#161616;font-family:'Zen Kaku Gothic New',sans-serif}
a{color:#161616}
a:hover{color:#6B6B6B}
a:focus-visible{outline:2px solid #161616;outline-offset:3px;border-radius:1px}
img{display:block;height:auto}
h1,h2,p{margin:0}
.page{width:100%;max-width:390px;margin:0 auto}
.hero{min-height:640px;min-height:max(640px,100svh);padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.logo{width:300px;max-width:100%}
.roles{align-self:flex-end;height:400px;writing-mode:vertical-rl;font-size:17px;line-height:2;letter-spacing:.08em}
.menu{display:flex;flex-wrap:wrap;gap:0 24px;font-size:16px}
.menu a{padding:11px 0}
.about{padding:72px 24px 0;font-size:15px;line-height:2;word-break:keep-all;overflow-wrap:anywhere}
.about h1,.about h2{margin-bottom:24px;font-size:15px;font-weight:500}
.about p{margin-bottom:20px}
.about p:last-of-type{margin-bottom:0}
footer{margin:56px 24px 96px;padding-top:24px;border-top:1px solid #161616;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
footer img{width:170px}
footer small{font-size:12px;line-height:1.6}
@media screen and (min-width:768px){
  .menu{position:fixed;left:48px;bottom:40px;flex-direction:column;gap:4px}
  .menu a{padding:6px 0}
  footer{margin:72px 24px 50px}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (forced-colors:active){
  img{background:#fff}
}