:root{
  --white:#FFFFFF;
  --text:#222222;
  --muted:#777777;
  --navy:#22304C;
  --steel:#8195B5;
  --line:#E2E2E2;
  --link:#3D69A8;
  --red:#C43B2E;   /* 赤鉛筆 */
  --max:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  background:var(--white);
  color:var(--text);
  font-family:'Noto Sans JP','Lato',sans-serif;
  font-size:15.5px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link)}
::selection{background:var(--steel);color:#fff}

/* ---------- language toggle ---------- */
html[lang="en"] body{line-height:1.65}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hwrap{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:14px 24px;
}
.brand{text-decoration:none;color:var(--navy)}
.brand .nm{
  font-family:'Lato',sans-serif;font-weight:900;
  font-size:21px;letter-spacing:.01em;line-height:1.2;display:block;
}
.brand .rl{font-size:11px;color:var(--muted);letter-spacing:.06em;display:block}
nav:not(.lang){display:flex;align-items:center;gap:26px;margin-left:auto}
nav:not(.lang) a{
  font-family:'Lato','Noto Sans JP',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);text-decoration:none;
  padding-bottom:2px;border-bottom:2px solid transparent;
}
nav:not(.lang) a:hover{border-bottom-color:var(--steel)}
nav:not(.lang) a:focus-visible,.lang a:focus-visible,a:focus-visible,
.morebtn:focus-visible,.cform input:focus-visible,.cform textarea:focus-visible,.submitbtn:focus-visible{
  outline:2px solid var(--steel);outline-offset:3px;
}
.lang{display:flex;flex-shrink:0;border:1px solid var(--navy);border-radius:2px;overflow:hidden}
.lang a{
  font-family:'Lato',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;
  padding:5px 11px;background:#fff;color:var(--navy);text-decoration:none;line-height:1.6;
}
.lang a:hover{background:#F1F3F7}
.lang a[aria-current="page"]{background:var(--navy);color:#fff}
@media(max-width:820px){
  html{scroll-padding-top:120px}
  .hwrap{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:4px 14px;padding:10px 24px 0;
  }
  .brand{grid-column:1;grid-row:1;min-width:0}
  .lang{grid-column:2;grid-row:1}
  nav:not(.lang){
    grid-column:1 / -1;grid-row:2;min-width:0;margin:0;
    justify-content:space-between;gap:8px;overflow-x:auto;
  }
  nav:not(.lang) a{
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    min-width:44px;min-height:44px;padding:0 2px;
    font-size:10.5px;letter-spacing:.06em;white-space:nowrap;
  }
}
@media(max-width:560px){
  .hwrap{padding:10px 18px 0}
  .brand .nm{font-size:19px}
  .brand .rl{font-size:10px;letter-spacing:0}
}

/* ---------- works: mosaic grid ---------- */
#works{max-width:1288px;margin:0 auto;padding:0 24px}
.grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:calc((min(100vw, 1288px) - 60px)/5);
  grid-auto-flow:dense;
  gap:3px;padding-top:3px;background:var(--white);
}
.sz-s{grid-column:span 1;grid-row:span 1}   /* 1:1 */
.sz-w{grid-column:span 2;grid-row:span 1}   /* 2:1 */
.sz-b{grid-column:span 2;grid-row:span 2}   /* 1:1 大 */
.pos-r.sz-b,.pos-r.sz-w{grid-column:4 / span 2} /* 大きい駒を右側に */
@media(max-width:700px){
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .card{grid-column:span 2 !important;grid-row:auto !important;aspect-ratio:16/9}
  .card:nth-child(n+7){display:none} /* スマホは6作品まで表示、以降は全作品リストへ */
}
.card{position:relative;display:block;overflow:hidden;background:#111}
.card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.card:hover img{transform:scale(1.04)}
.card .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#2A3A5C;
}
.card .ph span{
  font-family:'Lato',sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;
  color:rgba(255,255,255,.6);
}
.card .cat{
  position:absolute;top:0;left:0;z-index:2;
  font-family:'Lato',sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;
  background:var(--navy);color:#fff;padding:5px 13px;
}
.card .ov{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:34px 14px 12px;
  background:linear-gradient(to top,rgba(10,16,30,.94),rgba(10,16,30,.72) 68%,rgba(10,16,30,0));
  color:#fff;
}
.card .ov .t{font-weight:700;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.card .ov .t small{display:block;margin-top:3px;font-weight:400;font-size:11px;color:rgba(255,255,255,.85)}
.card .ov .r{
  font-size:10.5px;line-height:1.5;letter-spacing:.03em;color:#fff;
  max-width:100%;overflow-wrap:anywhere;
}
@media(min-width:701px) and (max-width:1000px){
  .card .ov{padding:24px 10px 9px;gap:4px}
  .card .ov .t{font-size:12px}
  .card .ov .t small{font-size:10px}
}

/* fade-in on scroll */
.card{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}
.card.in{opacity:1;transform:none}
.card.in img{transition:transform .35s ease} /* hover zoom stays snappy */
@media(prefers-reduced-motion:reduce){
  .card{opacity:1;transform:none;transition:none}
}

/* ---------- full works list ---------- */
.morewrap{text-align:center;padding:36px 24px 8px}
.morebtn{
  font-family:'Lato','Noto Sans JP',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  background:#fff;border:1px solid var(--navy);color:var(--navy);
  padding:13px 44px;cursor:pointer;border-radius:2px;
}
.morebtn:hover{background:var(--navy);color:#fff}
.wl{max-width:var(--max);margin:0 auto;padding:26px 24px 40px;display:none}
.wl.open{display:block}
.wl h3{
  font-family:'Lato',sans-serif;font-weight:900;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  margin:36px 0 6px;
}
.wl h3:first-child{margin-top:0}
.wl h3 .jl{
  font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:12px;
  color:var(--muted);letter-spacing:.06em;margin-left:10px;text-transform:none;
}
.wl ul{list-style:none}
.wl li{
  display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:baseline;
  padding:13px 2px;border-bottom:1px solid var(--line);
}
.wl .y{font-family:'Lato',sans-serif;font-weight:700;font-size:12.5px;color:var(--steel)}
.wl .ti{font-weight:700;font-size:14.5px;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.wl .ti a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.wl .ti a:hover{color:var(--link);border-bottom-color:var(--link)}
.wl .ti .mt{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.wl .ro{
  font-size:10.5px;letter-spacing:.05em;color:var(--navy);
  border:1px solid var(--navy);padding:3px 8px;max-width:100%;overflow-wrap:anywhere;
}
@media(max-width:560px){
  .wl li{grid-template-columns:48px 1fr;grid-template-rows:auto auto}
  .wl .ro{grid-column:2;justify-self:start}
}

/* ---------- sections ---------- */
section{max-width:var(--max);margin:0 auto;padding:88px 24px}
section{position:relative;border-top:1px solid var(--navy)}
section::before{ /* 複縦線（楽譜のセクション区切り） */
  content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:var(--navy);
}

/* ---------- statement strip ---------- */
.statement{
  max-width:1288px;margin:0 auto;
  padding:30px 24px 22px;
  display:flex;align-items:center;gap:30px;
}
.statement-copy{flex:0 1 auto;min-width:0}
.st-copy{
  font-weight:700;color:var(--navy);
  font-size:clamp(15px,2.3vw,20px);letter-spacing:.14em;
}
@media(max-width:700px){
  .statement{padding-top:24px;padding-bottom:20px}
  .st-copy{white-space:normal;line-height:1.65}
  .st-staff{display:none}
}
.circled{position:relative;display:inline-block;padding:0 .08em}
.circled svg{
  position:absolute;inset:-18% -14%;width:128%;height:136%;
  overflow:visible;pointer-events:none;
}
.circled path{
  fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400;
  animation:draw 1.1s ease-out .8s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .circled path{animation:none;stroke-dashoffset:0}
}
.st-staff{ /* 五線 */
  flex:1;min-width:48px;height:25px;position:relative;
  background:repeating-linear-gradient(to bottom,#C9CDD6 0 1px,transparent 1px 6px);
  background-size:100% 25px;background-repeat:no-repeat;
}
.st-staff::after{ /* 段末の複縦線 */
  content:"";position:absolute;right:0;top:0;bottom:1px;width:5px;
  border-left:1px solid var(--navy);border-right:1px solid var(--navy);
}

/* ---------- section headings and links ---------- */
.text-link{font-size:12px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.text-link:hover{border-bottom-color:currentColor}
.listen-external{margin-top:12px}
.shead{margin-bottom:44px}
.shead .en-label{
  font-family:'Lato',sans-serif;font-weight:900;
  font-size:24px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);
}
.shead .en-label::after{
  content:"";display:block;width:38px;height:4px;background:var(--steel);
  margin-top:10px;
}

/* ---------- profile ---------- */
.profile{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
@media(max-width:820px){.profile{grid-template-columns:1fr;gap:36px}}
.portrait img{width:100%;display:block}
.pname{margin-bottom:6px;padding-top:10px;line-height:1.4}
.pname ruby{ruby-align:center}
.pname rt{font-size:10px;color:var(--muted);font-weight:400;letter-spacing:.1em;padding-bottom:3px}
.pname .kanji{font-size:26px;font-weight:700;letter-spacing:.04em}
.prole{font-weight:700;font-size:15px;color:var(--navy);margin-bottom:26px;letter-spacing:.03em}
.lead{font-weight:700;font-size:16px;line-height:2;margin-bottom:22px}
.bio{margin-bottom:1.4em;max-width:60ch}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.xlink{
  display:inline-flex;align-items:baseline;gap:10px;
  margin-top:0;padding:12px 22px;
  border:1px solid var(--line);border-radius:2px;
  text-decoration:none;color:var(--text);
}
.xlink:hover{border-color:var(--steel)}
.xlink .lt{font-weight:700;font-size:14.5px}
.xlink .ld{font-size:12px;color:var(--muted)}

/* ---------- listen ---------- */
.listen{width:100%;max-width:720px;margin:0 auto}
.embed-label{
  font-family:'Lato','Noto Sans JP',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin-bottom:10px;
}
.embedbox{border:1px solid var(--line);border-radius:4px;overflow:hidden}
.embedbox iframe{display:block;width:100%;border:0}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:820px){.services{grid-template-columns:1fr}}
.svc{background:#FAFAFA;border-radius:4px;padding:30px 26px}
.svc-link{
  display:inline-block;margin-top:14px;
  font-size:13px;font-weight:700;color:var(--link);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.svc-link:hover{color:var(--navy)}
.svc h3{
  font-size:16.5px;font-weight:700;color:var(--navy);
  margin-bottom:24px;
}
.svc:nth-child(2){--reveal-delay:.15s}
.svc:nth-child(3){--reveal-delay:.3s}
/* The card rises as one piece; its content fades in just after the background. */
.svc.is-observed{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s ease var(--reveal-delay,0s),transform .7s ease var(--reveal-delay,0s);
}
.svc.is-observed .svc-content{
  opacity:0;
  transition:opacity .6s ease calc(var(--reveal-delay,0s) + .1s);
}
.svc.is-observed.is-visible{opacity:1;transform:none}
.svc.is-observed.is-visible .svc-content{opacity:1}
/* Keep the PDF link visible immediately when reached with the keyboard. */
.svc.is-observed:focus-within{opacity:1;transform:none;transition:none}
.svc.is-observed:focus-within .svc-content{opacity:1;transition:none}
@media(max-width:820px){
  /* Stacked cards reveal individually as each enters the viewport. */
  .svc:nth-child(n){--reveal-delay:0s}
}
@media(prefers-reduced-motion:reduce){
  .svc.is-observed{opacity:1;transform:none;transition:none}
  .svc.is-observed .svc-content{opacity:1;transition:none}
}
.svc p{font-size:14px;color:#555;line-height:2}

/* ---------- contact ---------- */
.contact-body{max-width:560px;margin:0 auto}
.contact .fine{font-size:14.5px;color:#555;margin-bottom:30px;text-align:center}
.cform label{
  display:block;font-weight:700;font-size:12.5px;color:var(--navy);
  letter-spacing:.04em;margin-bottom:8px;
}
.cform label .req{color:#C0392B}
.cform input,.cform textarea{
  width:100%;background:#FAFAFA;
  border:1px solid var(--line);border-radius:3px;
  padding:12px 14px;margin-bottom:22px;
  font-family:'Noto Sans JP',sans-serif;font-size:15px;color:var(--text);
}
.cform input:focus,.cform textarea:focus{border-color:var(--steel);background:#fff;outline:none}
.cform input::placeholder,.cform textarea::placeholder{color:#AAA}
.cform textarea{min-height:170px;resize:vertical}
.submitwrap{text-align:center;margin-top:6px}
.submitbtn{
  font-family:'Lato','Noto Sans JP',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--navy);border:1px solid var(--navy);color:#fff;
  padding:14px 52px;cursor:pointer;border-radius:2px;
}
.submitbtn:hover{background:var(--steel);border-color:var(--steel)}
.contact .alt{margin-top:28px;font-size:13px;color:var(--muted);text-align:center}
.privacy{
  max-width:560px;margin:30px auto 0;
  border:1px solid var(--line);border-radius:3px;
}
.privacy summary{
  cursor:pointer;list-style:none;
  padding:13px 18px;
  font-weight:700;font-size:12.5px;letter-spacing:.08em;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;
}
.privacy summary::-webkit-details-marker{display:none}
.privacy summary::after{content:"＋";color:var(--steel);font-weight:400}
.privacy[open] summary::after{content:"−"}
.privacy summary:hover{background:#FAFAFA}
.privacy summary:focus-visible{outline:2px solid var(--steel);outline-offset:-2px}
.privacy-body{
  padding:4px 18px 16px;border-top:1px solid var(--line);
  font-size:12.5px;color:#555;text-align:left;line-height:1.9;
}
.privacy-body p{margin-top:10px}

/* ---------- footer: 終止線 ---------- */
footer{
  position:relative;
  border-top:1px solid var(--navy); /* 細 */
  background:#FAFAFA;
  padding:42px 24px 34px;text-align:center;
}
footer::before{ /* 太 */
  content:"";position:absolute;top:4px;left:0;right:0;height:5px;background:var(--navy);
}
footer .copy{font-size:11px;letter-spacing:.1em;color:var(--muted)}

/* ---------- form status ---------- */
.form-status{margin-top:18px;text-align:center;font-size:14px;font-weight:700;min-height:1.5em}
.form-status.ok{color:var(--navy)}
.form-status.err{color:#C0392B}
.submitbtn[disabled]{opacity:.6;cursor:wait}

/* ---------- remote work (EN): same card style as .svc ---------- */
.remote{margin-top:28px;--reveal-delay:0s}
.remote h3{font-size:16.5px;font-weight:700;color:var(--navy);margin-bottom:24px}
.remote-lead{font-size:14px;color:#555;line-height:2;margin-bottom:20px}
.remote dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}
.remote dt{font-weight:700;font-size:14px;color:var(--navy);margin-bottom:2px}
.remote dd{font-size:14px;color:#555;line-height:2}
@media(max-width:820px){.remote dl{grid-template-columns:1fr;gap:16px}}