@font-face{font-family:"Site Mincho";src:url("fonts/mincho-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Site Mincho";src:url("fonts/mincho-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Site Sans";src:url("fonts/sans-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Site Sans";src:url("fonts/sans-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Site Display";src:url("fonts/display-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Site Display";src:url("fonts/display-italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
:root{
  --bg:#F2F3F0; --bg2:#E7E9E4; --ink:#1B1E22; --mute:#5C636B; --line:#CBD0CB; --accent:#27496D;
  --serif:"Site Display","Site Mincho","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  --mincho:"Site Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Site Sans","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14171B;--bg2:#1C2026;--ink:#E9EAE6;--mute:#9AA2AA;--line:#2E343B;--accent:#8FB1D6}}
:root[data-theme="dark"]{--bg:#14171B;--bg2:#1C2026;--ink:#E9EAE6;--mute:#9AA2AA;--line:#2E343B;--accent:#8FB1D6}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.85}
html[data-lang="ja"] .en,html[data-lang="en"] .ja{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
header.top{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.mark{font-family:var(--mincho);letter-spacing:.12em;font-size:15px}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.lang button{all:unset;cursor:pointer;padding:6px 16px;font-size:14px;color:var(--mute)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.hero{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,6vw,80px);align-items:start;padding:clamp(48px,10vw,120px) 0 clamp(56px,9vw,110px)}
.hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(52px,10.5vw,132px);line-height:.98;letter-spacing:-.01em}
.hero h1 .ja{font-family:var(--mincho);font-weight:400;letter-spacing:.18em;font-size:clamp(44px,8.5vw,104px)}
.role{margin:28px 0 0;color:var(--mute);max-width:34em}
.vertical{writing-mode:vertical-rl;font-family:var(--mincho);font-size:clamp(20px,2.6vw,30px);line-height:2;letter-spacing:.16em;border-right:1px solid var(--accent);padding-right:22px;margin:0;color:var(--accent);max-height:420px}
.vertical.en{writing-mode:horizontal-tb}
.cta{display:inline-block;margin-top:36px;padding:13px 30px;border:1px solid var(--ink);border-radius:99px;text-decoration:none;font-size:15px;transition:background .2s,color .2s}
.cta:hover{background:var(--ink);color:var(--bg)}

section{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--line)}
.sec{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,5vw,72px)}
h2{margin:0;font-family:var(--mincho);font-weight:600;font-size:clamp(22px,2.6vw,28px);line-height:1.5}
h2 small{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;color:var(--mute);margin-top:4px}
.lead{font-family:var(--mincho);font-size:clamp(20px,2.4vw,26px);line-height:1.8;margin:0 0 32px;max-width:30em}
.strengths{list-style:none;margin:0;padding:0;columns:2;column-gap:48px}
.strengths li{break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--line)}
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.services div{background:var(--bg);padding:28px}
.services h3{margin:0 0 8px;font-family:var(--serif);font-size:26px;font-weight:500}
.services p{margin:0;color:var(--mute);font-size:15.5px}
.clients{margin:36px 0 0;color:var(--mute);font-size:15px}
.clients b{display:block;color:var(--ink);font-weight:500;margin-bottom:6px}
.tl{margin:0;padding:0;list-style:none}
.tl li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.tl time{font-family:var(--serif);font-size:22px;color:var(--accent);white-space:nowrap}
.tl h3{margin:0;font-family:var(--mincho);font-size:19px;font-weight:600}
.tl p{margin:4px 0 0;color:var(--mute);font-size:15.5px}
.band{background:var(--bg2);border-top:0}
.band blockquote{margin:0;font-family:var(--mincho);font-size:clamp(22px,3.2vw,36px);line-height:1.7;max-width:22em}
.band blockquote span.en{font-family:var(--serif);font-style:italic}
footer{padding:48px 0 64px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}

@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .vertical{writing-mode:horizontal-tb;border-right:0;border-left:1px solid var(--accent);padding:0 0 0 16px;max-height:none;line-height:1.8;order:-1}
  .sec{grid-template-columns:1fr}
  .strengths{columns:1}
  .services{grid-template-columns:1fr}
  .tl li{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.hi{margin:0 0 18px;font-family:var(--mincho);color:var(--accent);font-size:18px}
.tag{margin:24px 0 0;font-family:var(--mincho);font-size:clamp(20px,2.4vw,28px);line-height:1.7}
.tag .en{font-family:var(--serif);font-style:italic}
.portrait{margin:0;width:clamp(230px,31vw,380px)}
.portrait img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top;border-radius:2px}
.quick{list-style:none;margin:28px 0 0;padding:0;display:flex;gap:24px;flex-wrap:wrap;font-size:15px}
.quick a{text-decoration:none;border-bottom:1px solid var(--accent)}
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.work figure{margin:0}
.work img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg2)}
.work figcaption{padding:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--mute)}
.work figcaption b{display:block;color:var(--ink);font-weight:500;font-size:15.5px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.duo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.wide{display:block;width:100%;max-height:420px;object-fit:cover}
.me{display:flex;gap:28px;align-items:center;margin-top:8px}
.me img{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:top}
.me b{display:block;font-family:var(--mincho);font-size:22px;font-weight:600}
.me ul{list-style:none;margin:12px 0 0;padding:0;font-size:16px}
.me li{padding:2px 0}
@media (max-width:760px){.portrait{width:72%}.work{grid-template-columns:1fr 1fr}.duo{grid-template-columns:1fr}.me{flex-direction:column;align-items:flex-start}}
@media (max-width:480px){.work{grid-template-columns:1fr}}