:root{
  --ink:#000; --paper:#fff; --mist:#eee; --sub:#9a9a9a;
  --display:"Ubuntu",system-ui,sans-serif;
  --body:"Noto Sans JP",system-ui,sans-serif;
  --gap:clamp(12px,2.4vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* HERO — the art fills the first screen, logo sits over its top edge */
.hero{position:relative;height:100svh;min-height:520px;background:var(--mist);overflow:hidden}
.hero__art{width:100%;height:100%;max-width:1000px;margin:0 auto;object-fit:cover;object-position:50% 38%}
.hero__logo{position:absolute;inset:20px 0 auto;margin:0;z-index:1;display:flex;justify-content:center;pointer-events:none}
.hero__logo img{width:min(calc(100vw - 40px),640px)} /* スマホ：左右に20pxずつ余白を残して、画面幅いっぱいより少し小さく */
@media (min-width:900px){
  /* 元サイトと同じく、イラストを画面幅の約56%で大きく見せる（上下ははみ出してスクロール） */
  .hero{height:auto;min-height:0}
  .hero__art{width:800px;height:auto;margin:0 auto;object-fit:initial} /* 固定サイズ（元データ1000pxより小さく、拡大はしない）。画面幅を変えても絵の大きさは一定で、左右の背景だけが伸び縮みする */
}

/* PROFILE */
.profile{padding:clamp(48px,8vw,96px) var(--gap) clamp(40px,6vw,72px);max-width:1200px;margin:0 auto}
.social{display:flex;justify-content:center;align-items:center;gap:clamp(28px,5vw,56px);margin-bottom:clamp(40px,6vw,64px)}
.social a,.social__icon{display:grid;place-items:center;width:52px;height:52px;opacity:.9;transition:opacity .2s,transform .2s}
.social a:hover{opacity:1;transform:translateY(-2px)}
.social svg{width:40px;height:40px;fill:currentColor}
.social__skrims{width:78px!important;height:70px!important}.social__skrims img{width:78px;filter:invert(1)}
.people{display:grid;gap:clamp(28px,4vw,40px)}
.person h2,.person h3{font-family:var(--display);font-style:italic;font-weight:700;margin:0;display:flex;align-items:center;gap:.35em;line-height:1.1}
.person h2{font-size:clamp(28px,5vw,48px)}
.person h3{font-size:clamp(24px,4.25vw,41px)}
.person p{margin:.3em 0 0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(13px,1.6vw,16px)}
.person--sub{justify-self:end;text-align:left}
.person--sub p{color:#ddd}

/* WORKS */
.works{padding:0 var(--gap) clamp(64px,10vw,120px)}
.works__grid{list-style:none;margin:0 auto;padding:0;max-width:1400px;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:820px){.works__grid{grid-template-columns:repeat(2,1fr)}}
.work a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#151515;outline-offset:3px}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s}
.work__title{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-family:var(--display);font-style:italic;font-weight:500;font-size:14px;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.work a:hover img,.work a:focus-visible img{transform:scale(1.04)}
.work a:hover .work__title,.work a:focus-visible .work__title{opacity:1;transform:none}
@media (hover:none){.work__title{opacity:1;transform:none;font-size:12px;padding:20px 10px 8px}}

/* FOOTER */
.footer{position:relative;text-align:center;padding:clamp(64px,10vw,120px) var(--gap) 48px;border-top:1px solid #1d1d1d}
.footer__sign{width:clamp(90px,12vw,140px);margin:0 auto 28px;filter:invert(1);opacity:.85}
.footer__slogan{margin:0;font-family:var(--display);font-style:italic;font-weight:700;font-size:clamp(28px,5.4vw,56px);line-height:1.25;letter-spacing:.01em}
.footer__copy{margin:28px 0 0;font-size:12px;color:var(--sub)}
.to-top{position:absolute;right:var(--gap);bottom:40px;width:44px;height:44px;display:grid;place-items:center;opacity:.8}
.to-top:hover{opacity:1}
.to-top svg{width:30px;height:30px;fill:currentColor}

/* LIGHTBOX */
.lightbox{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100dvh;background:rgba(0,0,0,.94);color:#fff}
.lightbox::backdrop{background:transparent}
.lightbox[open]{display:grid;place-items:center}
.lightbox__img{max-width:min(92vw,1400px);max-height:84dvh;width:auto;height:auto;object-fit:contain}
.lightbox__title{position:absolute;left:0;right:0;bottom:3dvh;margin:0;text-align:center;font-family:var(--display);font-style:italic;font-weight:500}
.lightbox__btn{position:absolute;background:none;border:0;color:#fff;font-size:44px;line-height:1;width:56px;height:56px;cursor:pointer;opacity:.75}
.lightbox__btn:hover,.lightbox__btn:focus-visible{opacity:1}
.lightbox__close{top:12px;right:12px}
.lightbox__prev{left:8px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:8px;top:50%;transform:translateY(-50%)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* profile icons — about twice the name's cap height, like the original site */
.person h2,.person h3{gap:.4em}
.person h2 img{width:2em;height:2em;flex:none}
.person h3 img{width:2.2em;height:2.2em;flex:none}
.person--main p{padding-left:calc(clamp(28px,5vw,48px) * 2.4)}
.person--sub p{padding-left:calc(clamp(24px,4.25vw,41px) * 2.6)}
@media (max-width:600px){
  .people{text-align:center;gap:44px}
  .person h2,.person h3{justify-content:center}
  .person--main p,.person--sub p{padding-left:0}
  .person--sub{justify-self:center;text-align:center}
  .person h2{font-size:clamp(19px,6.1vw,28px);white-space:nowrap}
  .person h3{font-size:clamp(18px,5.5vw,25px)}
  .person h3 img{width:2.1em;height:2.1em}
}

/* PC: 元サイト（STUDIO版）と同じバランス */
@media (min-width:900px){
  .profile{padding-top:clamp(40px,4.5vw,64px);padding-bottom:clamp(40px,4.5vw,64px)}
  .social{gap:clamp(40px,5.4vw,72px);margin-bottom:clamp(28px,3.2vw,44px)}
  .social a,.social__icon{width:clamp(48px,5.6vw,72px);height:clamp(48px,5.6vw,72px)}
  .social svg{width:100%;height:100%}
  .social__skrims{width:clamp(60px,6.6vw,88px)!important;height:clamp(54px,5.9vw,78px)!important}
  .social__skrims img{width:100%}
  .people{gap:clamp(36px,4.6vw,64px)}
  .person h2,.person h3{font-weight:500;gap:.25em}
  .person h2{font-size:clamp(40px,5.4vw,72px)}
  .person h3{font-size:clamp(38px,5.1vw,68px)}
  .person h2 img{width:1.45em;height:1.45em}
  .person h3 img{width:1.35em;height:1.35em}
  .person--sub p{color:#fff}
  .person p{font-size:clamp(16px,2.15vw,28px);margin-top:.35em;line-height:1.45}
  /* mon-ichi：説明文を名前の下で中央寄せ */
  .person--main{justify-self:start;padding-left:clamp(0px,2vw,32px)}
  .person--main p{padding-left:calc(clamp(40px,5.4vw,72px) * 1.7);text-align:center;margin-top:.5em}
  .person--main p + p{margin-top:0}
  /* NEKO：画面の中央あたりから */
  .person--sub{justify-self:start;margin-left:46%}
  .person--sub p{padding-left:calc(clamp(38px,5.1vw,68px) * 1.6)}
}

/* PC：トップのロゴは左上（元サイトと同じ） */
@media (min-width:900px){
  .hero__logo{inset:50px auto auto 38px;justify-content:flex-start}
  .hero__logo img{width:500px} /* 固定サイズ（添付画像の大きさに合わせた） */
}

/* ===== 問い合わせページ ===== */
[hidden]{display:none!important}
.subhead{padding:20px var(--gap);display:flex;justify-content:flex-start}
.subhead__logo img{width:min(220px,50vw);filter:invert(1)}
.contact{max-width:720px;margin:0 auto;padding:clamp(32px,6vw,72px) var(--gap) clamp(64px,10vw,120px)}
.contact__title{margin:0 0 .4em;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(36px,6vw,64px);line-height:1.1}
.contact__lead{margin:0 0 clamp(28px,4vw,44px);color:#ddd;font-size:15px}
.form__row{display:grid;gap:8px;margin-bottom:22px}
.form label{font-size:14px;font-weight:500}
.form__req{display:inline-block;margin-left:.5em;padding:0 .5em;font-size:11px;line-height:1.7;border:1px solid #666;border-radius:3px;color:#bbb;vertical-align:middle}
.form input,.form textarea{width:100%;padding:12px 14px;font:inherit;font-size:16px;color:#fff;background:#111;border:1px solid #444;border-radius:4px;transition:border-color .2s}
.form textarea{resize:vertical;min-height:180px}
.form input:focus,.form textarea:focus{outline:none;border-color:#fff}
.form .cf-turnstile{margin:6px 0 18px;min-height:65px}
.form__note{margin:0 0 24px;font-size:12px;line-height:1.8;color:#999}
.form__submit{display:block;width:100%;max-width:320px;margin:0 auto;padding:14px 20px;font-family:var(--display);font-style:italic;font-weight:500;font-size:18px;color:#000;background:#fff;border:0;border-radius:999px;cursor:pointer;transition:opacity .2s}
.form__submit:hover{opacity:.85}
.form__submit:disabled{opacity:.5;cursor:wait}
.form__status{min-height:1.6em;margin:16px 0 0;text-align:center;font-size:14px;color:#ccc}
.form__status.is-error{color:#ff8a8a}
.contact__done{text-align:center;padding:40px 0;color:#ddd}
.contact__done-title{margin:0 0 .6em;font-family:var(--display);font-style:italic;font-weight:500;font-size:28px;color:#fff}
.contact__back{display:inline-block;margin-top:24px;padding:10px 28px;border:1px solid #fff;border-radius:999px;text-decoration:none;font-family:var(--display);font-style:italic}
.footer--small{padding:32px var(--gap);border-top:1px solid #1d1d1d}
.footer--small .footer__copy{margin:0}