
:root{
  --ink:#111111;
  --ink-soft:#111111;
  --paper:#ffffff;
  --line:#e7e7e7;
  --wrap:1320px;
  --gutter:5vw;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  font-weight:400;
  line-height:1.85;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  counter-reset:section-num;
  /* 日本語本文の行末に1〜2文字だけ残る不自然な折り返し（禁則ぶら下がり）を
     ブラウザ側の自動調整で防ぐ。text-wrap は継承されるため、body に一度
     指定するだけでページ全体の本文・説明文・リストなどに効く。
     URL・英単語などは overflow-wrap:break-word でコンテナ幅を超える時のみ
     折り返し、通常の単語区切りは崩さない。 */
  text-wrap:pretty;
  overflow-wrap:break-word;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{
  font-weight:500;margin:0;letter-spacing:.02em;
  /* 見出しは行数が少ないため balance で行の長さを均等化し、1文字だけの
     行や極端に短い最終行を防ぐ。 */
  text-wrap:balance;
}
p{margin:0;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.wrap--wide{max-width:1600px;}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:26px var(--gutter);
  color:var(--ink);
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);
}
.site-header a, .site-header button{color:var(--ink);}
.mark-logo{grid-column:1;justify-self:start;align-self:stretch;display:flex;align-items:center;color:#000;}
.mark-logo svg{display:block;height:78%;width:auto;transition:opacity .3s ease;}
.mark-logo:hover svg{opacity:.6;}
.logo{
  grid-column:2;justify-self:center;
  display:block;
  text-align:center;
  letter-spacing:.02em;
}
.logo-main{
  display:flex;
  justify-content:space-between;
  width:100%;
  font-family:"Jost",sans-serif;
  font-size:clamp(24px, 5vw, 44px);
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
}
.logo small{display:block;font-weight:400;font-size:clamp(9px, 1.4vw, 11px);letter-spacing:.06em;color:var(--ink);margin-top:6px;}

nav.gnav{grid-column:3;justify-self:end;display:flex;gap:0;margin-right:-8px;}
nav.gnav a:not(:first-child)::before{content:"/";margin:0 10px;color:var(--ink-soft);opacity:.5;}
nav.gnav a{
  font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  position:relative;padding-bottom:2px;
  transition:opacity .3s ease;
}
nav.gnav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;
  transition:right .35s cubic-bezier(.2,.7,.2,1);
}
nav.gnav a:hover::after,nav.gnav a.is-active::after{right:0;}
nav.gnav a:hover{opacity:.5;}
nav.gnav a.is-active{opacity:.45;}

.nav-toggle{grid-column:3;justify-self:end;display:none;background:none;border:0;cursor:pointer;padding:12px;margin:-12px;}
.nav-toggle span{display:block;width:22px;height:1px;background:var(--ink);margin:6px 0;transition:transform .3s ease, opacity .3s ease, background .3s ease;}

/* ---------- hero ---------- */
.hero{
  position:relative;height:100vh;min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end;
}
.hero-slides{position:absolute;inset:0;}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.6s ease;
}
.hero-slide.is-active{opacity:1;animation:heroKen 9s ease-out forwards;}
@keyframes heroKen{
  from{transform:scale(1.06);}
  to{transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .hero-slide.is-active{animation:none;}
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.5) 100%);
}
.hero-caption{
  position:relative;z-index:2;color:#fff;padding:0 var(--gutter) 56px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;width:100%;
}
.hero-caption .en{
  font-size:clamp(19px,2.2vw,24px);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.hero-caption .eyebrow{
  display:block;font-family:"Jost",sans-serif;font-size:clamp(11px,1.1vw,13px);
  font-weight:500;letter-spacing:.32em;text-transform:uppercase;opacity:.85;margin-bottom:14px;
}
.hero-caption .jp{font-size:15px;line-height:1.4;letter-spacing:.1em;opacity:.94;max-width:600px;}
.hero-meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:18px;flex-shrink:0;
  font-family:"Jost",sans-serif;color:#fff;
}
.hero-count{font-size:13px;letter-spacing:.1em;opacity:.85;}
.hero-count b{font-weight:500;opacity:1;}
.hero-scroll{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.85;
}
.hero-scroll::after{content:"";width:1px;height:34px;background:rgba(255,255,255,.6);animation:scrollLine 2.2s ease-in-out infinite;}
@keyframes scrollLine{
  0%{transform:scaleY(0);transform-origin:top;}
  50%{transform:scaleY(1);transform-origin:top;}
  50.01%{transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}
@media (max-width:760px){
  .hero-meta{display:none;}
}

.page-hero{
  padding:208px var(--gutter) 56px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.page-hero .eyebrow{font-size:16px;font-weight:500;letter-spacing:.3em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:16px;display:block;}
.page-hero h1{font-size:clamp(36px,5vw,54px);font-weight:500;}
.page-hero .lead{margin:20px 0 0;max-width:840px;color:var(--ink-soft);font-size:20px;}
.page-hero .lead--strong{font-weight:500;color:var(--ink);}
/* lead--roomy: 文ごとの<br>で改行している長文が、PCで1文の途中で
   さらに折り返されないよう幅を広げる。スマホでは触らず、通常の
   max-width:840px（実質は画面幅いっぱい）のままにする。 */
@media (min-width:901px){
  .page-hero .lead--roomy{max-width:1040px;}
}

/* ---------- sections ---------- */
section{padding:88px 0;}
section.tight{padding:52px 0;}
.section-head{margin-bottom:52px;position:relative;counter-increment:section-num;}
.section-head::before{
  content:counter(section-num,decimal-leading-zero);
  position:absolute;top:-.3em;right:0;z-index:0;pointer-events:none;user-select:none;
  font-family:"Jost",sans-serif;font-weight:300;font-size:clamp(56px,8vw,120px);
  line-height:1;color:var(--ink);opacity:.05;
}
.section-head .eyebrow,.section-head h2{position:relative;z-index:1;}
.section-head .eyebrow{font-size:16px;font-weight:500;letter-spacing:.3em;color:var(--ink-soft);text-transform:uppercase;display:block;margin-bottom:14px;}
.section-head h2{font-size:clamp(28px,3.6vw,36px);font-weight:500;}

.intro-block{
  display:grid;grid-template-columns:200px 1fr;gap:64px;align-items:start;
}
.intro-block .num{font-size:16px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);}
.intro-block p{color:var(--ink);font-size:21px;}
.intro-block--stack{grid-template-columns:1fr;gap:20px;}

/* ---------- works grid ---------- */
.works-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,56px) clamp(20px,2.8vw,44px);
  counter-reset:work;
}

#featured-works-grid.works-grid{grid-template-columns:repeat(6,1fr);}
#featured-works-grid .work-card:nth-child(1){grid-column:span 4;}
#featured-works-grid .work-card:nth-child(2){grid-column:span 2;}
#featured-works-grid .work-card:nth-child(3),
#featured-works-grid .work-card:nth-child(4),
#featured-works-grid .work-card:nth-child(5){grid-column:span 2;}
#featured-works-grid .work-card:nth-child(6){grid-column:span 6;}
#featured-works-grid .work-card:nth-child(1) .thumb,
#featured-works-grid .work-card:nth-child(6) .thumb{aspect-ratio:16/9;}
@media (max-width:900px){
  #featured-works-grid.works-grid{grid-template-columns:repeat(2,1fr);}
  #featured-works-grid .work-card{grid-column:span 1 !important;}
  #featured-works-grid .work-card:nth-child(1) .thumb,
  #featured-works-grid .work-card:nth-child(6) .thumb{aspect-ratio:4/3;}
}

.work-card{
  background:var(--paper);position:relative;display:block;overflow:hidden;
  counter-increment:work;
}
.work-card .thumb{aspect-ratio:4/3;overflow:hidden;background:#f4f4f4;position:relative;}
.work-card .thumb::before{
  content:counter(work,decimal-leading-zero);
  position:absolute;top:14px;left:16px;z-index:2;
  font-size:12px;font-weight:300;letter-spacing:.1em;color:#fff;mix-blend-mode:difference;
}
.work-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.work-card:hover .thumb img{transform:scale(1.045);}
.work-card .meta{padding:18px 4px 28px;}
.work-card .meta .name{font-size:20px;font-weight:500;letter-spacing:.01em;color:var(--ink);}
.work-card .meta .tag{display:block;margin-top:7px;font-size:16px;font-weight:400;letter-spacing:.1em;color:var(--ink);text-transform:uppercase;}

/* ---------- work detail ---------- */
.work-detail{
  padding:88px 0;border-top:1px solid var(--line);scroll-margin-top:80px;
}
.work-detail:first-of-type{border-top:none;}
.work-detail .figure{margin-bottom:40px;}
.work-detail .figure img{width:100%;}
.work-detail .head{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:30px;
}
.work-detail h1,.work-detail h2{font-size:clamp(28px,3.6vw,36px);font-weight:500;}
.spec-list{font-size:18px;color:var(--ink);letter-spacing:.02em;}
.spec-list div{display:flex;border-bottom:1px solid var(--line);padding:9px 0;}
.spec-list span:first-child{width:180px;flex-shrink:0;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-size:15px;font-weight:300;}
.work-detail .desc{max-width:800px;font-size:20px;color:var(--ink);white-space:pre-line;}

.work-detail--single{border-top:none;padding-top:0;}

.back-link{
  display:inline-block;margin-bottom:44px;font-size:16px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);transition:opacity .3s ease;
}
.back-link:hover{opacity:.55;}

.work-title-block{max-width:800px;margin:0 auto 64px;text-align:left;}
.work-title-block h1,.work-title-block h2{font-size:clamp(30px,4.2vw,40px);font-weight:500;margin-bottom:24px;}
.work-title-block .desc{text-align:left;white-space:pre-line;font-size:20px;color:var(--ink);max-width:700px;margin:0;}

.photo-stream{display:flex;flex-direction:column;gap:56px;}
.photo-frame{margin:0;padding:0;}
.photo-frame img{width:100%;max-width:1080px;height:auto;display:block;margin:0 auto;}

.spec-list--footer{
  max-width:680px;margin:64px auto 0;padding-top:32px;border-top:1px solid var(--line);
}
.photo-credit{
  max-width:680px;margin:18px auto 0;font-size:17px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft);opacity:.75;text-align:right;
}

.video-card{
  display:block;position:relative;max-width:1080px;margin:0 auto 56px;overflow:hidden;background:#000;
}
.video-card img{width:100%;height:auto;display:block;opacity:.88;transition:opacity .3s ease;}
.video-card:hover img{opacity:1;}
.video-card__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
}
.video-card__play::after{
  content:"";width:0;height:0;margin-left:6px;
  border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:22px solid #111;
}
.work-video{display:block;width:100%;max-width:1080px;margin:0 auto 56px;background:#000;}

/* ---------- philosophy / about ---------- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
.principle{background:var(--paper);padding:40px 32px;}
.principle .idx{color:var(--ink-soft);font-size:16px;font-weight:300;letter-spacing:.24em;margin-bottom:18px;display:block;}
.principle p{font-size:21px;color:var(--ink);}

.keywords{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;}
.keywords span{
  padding:0 0 4px;font-size:18px;letter-spacing:.12em;color:var(--ink);border-bottom:1px solid var(--ink);
}

.profile-table{width:100%;border-collapse:collapse;font-size:19.5px;}
.profile-table tr{border-bottom:1px solid var(--line);}
.profile-table th,.profile-table td{text-align:left;padding:17px 10px;font-weight:400;vertical-align:top;}
.profile-table th{width:200px;color:var(--ink-soft);letter-spacing:.1em;font-size:15.5px;font-weight:300;text-transform:uppercase;}
.profile-table td.tbd{color:var(--ink);}

.typology-list{display:flex;flex-wrap:wrap;gap:20px 24px;margin-top:8px;}
.typology-list li{list-style:none;border-top:1px solid var(--line);padding-top:14px;font-size:18.5px;letter-spacing:.04em;color:var(--ink);width:272px;white-space:nowrap;}

.member-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:8px;}
.member{background:var(--paper);padding:40px 32px;}
.member h3{font-size:22px;font-weight:500;letter-spacing:.04em;margin-bottom:16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.member .member-role{font-size:14px;font-weight:300;letter-spacing:.08em;color:var(--ink-soft);}
.member p{font-size:18.5px;line-height:1.9;color:var(--ink);}
.member-sub{margin-top:48px;}
.member-sub h4{font-size:16px;font-weight:500;letter-spacing:.12em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.member-sub ul{list-style:none;}
.member-sub li{font-size:18px;letter-spacing:.02em;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line);}
.member-sub li:last-child{border-bottom:0;}
.member-sub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-top:48px;}
.member-sub-grid .member-sub{margin-top:0;}

/* ---------- process ---------- */
.process-list{counter-reset:step;}
.process-step{
  display:grid;grid-template-columns:64px 1fr;align-items:start;
  column-gap:28px;row-gap:8px;
  max-width:680px;margin:0 auto;text-align:left;
  padding:38px 0;border-top:1px solid var(--line);
}
.process-step:last-child{border-bottom:1px solid var(--line);}
.process-step > div{display:contents;}
.process-step .step-no{
  grid-column:1;grid-row:1/3;
  font-size:30px;line-height:1;color:var(--ink-soft);letter-spacing:.02em;font-weight:300;
}
.process-step h3{grid-column:2;grid-row:1;font-size:22px;line-height:1.3;font-weight:500;letter-spacing:.02em;}
.process-step p{grid-column:2;grid-row:2;color:var(--ink);font-size:19.5px;}

/* ---------- contact form ---------- */
.contact-form{max-width:640px;margin:0 auto;}
.form-row{
  margin-bottom:28px;text-align:left;
  border-bottom:1px solid var(--ink);padding:0 0 12px;transition:border-color .3s ease;
}
.form-row:focus-within{border-color:var(--ink-soft);}
.form-row label{
  display:block;font-size:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:12px;
}
.form-row label .req{
  display:inline-block;margin-left:10px;padding:1px 7px;font-size:13.5px;letter-spacing:.05em;
  color:var(--ink);border:1px solid var(--ink);text-transform:none;vertical-align:middle;
}
.form-row input,.form-row select,.form-row textarea{
  display:block;width:100%;padding:0;border:0;
  background:transparent;font:inherit;font-size:19px;color:var(--ink);text-align:left;
  border-radius:0;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;}
.form-row textarea{resize:vertical;line-height:1.8;min-height:140px;}
.form-row input::placeholder,.form-row textarea::placeholder{color:#808080;opacity:1;}
.form-row select option[value=""]{color:var(--ink-soft);}
.form-row select:has(option[value=""]:checked){color:var(--ink-soft);}
.form-row select{
  appearance:none;-webkit-appearance:none;background-color:transparent;text-align:left;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:calc(100% - 8px) center, calc(100% - 2px) center;background-size:6px 6px;background-repeat:no-repeat;
  padding-right:28px;cursor:pointer;
}
.form-row select option{text-align:left;}
.form-row--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.btn-primary{
  display:inline-block;padding:18px 52px;background:var(--ink);color:#fff;border:0;cursor:pointer;
  font:inherit;font-size:16px;letter-spacing:.2em;text-transform:uppercase;transition:opacity .3s ease;
}
.btn-primary:hover{opacity:.72;}

.form-notice{
  max-width:640px;margin-bottom:40px;padding:18px 22px;font-size:19.5px;letter-spacing:.02em;
  border:1px solid var(--line);
}
.form-notice--ok{border-color:var(--ink);color:var(--ink);}
.form-notice--error{border-color:#b3554a;color:#b3554a;}

/* ---------- cta / footer ---------- */
.cta-strip{
  background:var(--ink);color:#fff;text-align:left;padding:96px var(--gutter);
}
.cta-strip .en,.cta-strip p{max-width:700px;}
.cta-strip .en{font-size:clamp(26px,3.4vw,36px);font-weight:500;margin-bottom:20px;letter-spacing:.01em;}
.cta-strip a.btn{
  display:inline-block;margin-top:16px;padding:17px 42px;border:1px solid rgba(255,255,255,.4);
  font-size:16px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.cta-strip a.btn:hover{background:#fff;color:var(--ink);border-color:#fff;}

.site-footer{padding:48px var(--gutter) 36px;border-top:1px solid var(--line);}
/* フッターは ロゴ行 → リンク行 を縦に積み、画面の中央に揃える */
.footer-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  text-align:center;
}
.footer-inner .footer-links{justify-content:center;align-items:baseline;}
.footer-inner .logo{font-size:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 24px;font-size:19px;font-weight:500;letter-spacing:.1em;color:var(--ink-soft);}
.footer-links a{transition:opacity .3s ease;}
.footer-links a:hover{opacity:.5;}
.footer-copy{width:100%;margin-top:26px;font-size:15px;font-weight:300;color:var(--ink);letter-spacing:.04em;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}


/* ===========================================================================
   繝ｬ繧ｹ繝昴Φ繧ｷ繝厄ｼ医せ繝槭・繝医ヵ繧ｩ繝ｳ繝ｻ繧ｿ繝悶Ξ繝・ヨ・・   繝悶Ξ繝ｼ繧ｯ繝昴う繝ｳ繝医・螟ｧ縺阪＞鬆・↓1邂・園縺ｸ縺ｾ縺ｨ繧√※縺・ｋ
   =========================================================================== */

/* ---- ~900px・ヘッダーがハンバーガーメニューに切り替わる ----
   nav.gnav は .site-header（display:grid）の grid item のため、
   grid-column/justify-self を明示的に解除しないと、position:fixed
   にしても一部ブラウザ（WebKit系）で fixed 要素の包含ブロックが
   グリッドトラック（3列目＝右側）に引きずられ、画面右側だけに
   メニューが表示され左側に元ページが透けて見えるバグが起きる。
   → grid-column/justify-self を unset にし、幅・高さも viewport
   基準（inset:0 / width:100% / height:100dvh）で明示指定することで、
   グリッドの影響を受けずに常にフルスクリーンになるようにしている。 */
@media (max-width:900px){
  nav.gnav{
    grid-column:unset;justify-self:unset;margin-right:0;
    position:fixed;inset:0;
    width:100%;height:100vh;height:100dvh;
    max-width:none;box-sizing:border-box;
    background:var(--ink);color:#fff;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:clamp(26px,6vh,44px);
    padding:88px 24px 40px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    z-index:150;
    transform:translateY(-100%);transition:transform .4s ease;
  }
  nav.gnav a{
    font-size:19px;color:#fff;text-align:center;
    max-width:100%;white-space:nowrap;
  }
  nav.gnav a:not(:first-child)::before{content:none;margin:0;}
  nav.gnav.is-open{transform:translateY(0);}
  nav.gnav a.is-active{
    color:#9a9a9a;opacity:1;
    text-decoration:underline;text-underline-offset:6px;
  }
  nav.gnav a.is-active::after{content:none;}
  .nav-toggle{display:block;position:relative;z-index:200;}
  body.nav-open{overflow:hidden;}
  body.nav-open .nav-toggle span{background:#fff;}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .works-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---- ~800px ---- */
@media (max-width:800px){
  .intro-block{grid-template-columns:1fr;gap:20px;}
  .principles{grid-template-columns:1fr;}
}

/* ---- ~760px・壹せ繝槭・繝医ヵ繧ｩ繝ｳ蜈ｨ闊ｬ・井ｽ咏區繝ｻ譁・ｭ励し繧､繧ｺ繧堤ｸｮ蟆擾ｼ・---- */
@media (max-width:760px){
  section{padding:44px 0;}
  .page-hero{padding:120px var(--gutter) 32px;}
  .intro-block{gap:16px;}

  body{letter-spacing:0;}

  .logo-main{font-size:23px;justify-content:center;gap:1.5px;}
  .logo small{font-size:7.5px;letter-spacing:.01em;margin-top:6px;}

  .mark-logo svg{height:14.66px;}

  .hero-caption .en{font-size:11px;letter-spacing:.03em;margin-bottom:6px;}
  .hero-caption .jp{font-size:12px;line-height:1.4;letter-spacing:0;}

  .page-hero .eyebrow{font-size:10px;letter-spacing:.08em;margin-bottom:8px;}
  .page-hero h1{font-size:19px;}
  .page-hero .lead{font-size:13px;margin-top:10px;}

  .section-head{margin-bottom:24px;}
  .section-head .eyebrow{font-size:10px;letter-spacing:.08em;margin-bottom:6px;}
  .section-head h2{font-size:17px;}

  .intro-block .num{font-size:10px;letter-spacing:.06em;}
  .intro-block p{font-size:13px;}

  .work-detail .head{grid-template-columns:1fr;}

  .work-card .thumb::before{font-size:8px;}
  .work-card .meta{padding:8px 2px 14px;}
  .work-card .meta .name{font-size:13px;}
  .work-card .meta .tag{font-size:10px;letter-spacing:.02em;margin-top:4px;}

  .work-detail h1,.work-detail h2{font-size:17px;}
  .spec-list{font-size:12px;}
  .spec-list span:first-child{width:100px;font-size:10px;letter-spacing:.02em;}
  .work-detail .desc{font-size:13px;}
  .back-link{font-size:10px;letter-spacing:.02em;margin-bottom:22px;}
  .photo-credit{font-size:10px;font-weight:400;}
  .work-title-block{margin-bottom:32px;}
  .work-title-block h1,.work-title-block h2{font-size:18px;}
  .work-title-block .desc{font-size:13px;}

  .typology-list li{width:auto;white-space:normal;}

  .principle{padding:20px 16px;}
  .principle .idx{font-size:10px;letter-spacing:.06em;margin-bottom:8px;}
  .principle p{font-size:13px;}
  .keywords{gap:10px;}
  .keywords span{font-size:11px;}
  .profile-table{font-size:12px;}
  .profile-table th{font-size:10px;}
  .typology-list li{font-size:12px;}

  .member-grid{gap:1px;}
  .member{padding:18px 14px;}
  .member h3{font-size:14px;gap:6px;margin-bottom:8px;}
  .member .member-role{font-size:9px;}
  .member p{font-size:11.5px;line-height:1.7;}
  .member-sub{margin-top:24px;}
  .member-sub h4{font-size:10px;letter-spacing:.06em;margin-bottom:10px;padding-bottom:6px;}
  .member-sub li{font-size:11.5px;padding:6px 0;}
  .member-sub-grid{gap:14px;margin-top:24px;}

  .process-step{padding:18px 0;}
  .process-step .step-no{font-size:17px;}
  .process-step h3{font-size:14px;}
  .process-step p{font-size:12px;}

  .form-row label{font-size:10px;letter-spacing:.02em;margin-bottom:6px;}
  .form-row label .req{font-size:8px;}
  .form-row input,.form-row select,.form-row textarea{font-size:16px;}
  .btn-primary{font-size:11px;letter-spacing:.04em;padding:13px 34px;}
  .form-notice{font-size:12px;}

  .cta-strip{padding:40px var(--gutter);}
  .cta-strip .en{font-size:15px;}
  .cta-strip a.btn{font-size:10px;letter-spacing:.03em;padding:12px 26px;}

  .footer-inner .logo{font-size:10px;}
  .footer-links{font-size:10px;letter-spacing:.01em;gap:8px 14px;}
  .footer-copy{font-size:10px;}
}

/* ---- ~600px・壼ｰ丞梛繧ｹ繝槭・繝医ヵ繧ｩ繝ｳ ---- */
@media (max-width:600px){
  .hero{height:100svh;min-height:460px;}

  .profile-table th,.profile-table td{display:block;width:auto;padding:4px 0;}
  .profile-table th{padding-top:16px;}
  .profile-table tr{display:block;}

  .process-step{grid-template-columns:40px 1fr;column-gap:16px;}
}

/* ---- ~560px ---- */
@media (max-width:560px){
  .works-grid{grid-template-columns:1fr;gap:44px;}
}

/* ---------- JP / EN 言語切替 ---------- */
html.is-en .l-ja{display:none !important;}
html:not(.is-en) .l-en{display:none !important;}
.lang-switch{
  display:inline-flex;align-items:center;gap:7px;margin-left:30px;
  font-family:"Jost",sans-serif;font-size:13px;font-weight:500;letter-spacing:.06em;
}
.lang-switch button{
  background:none;border:0;border-bottom:1px solid transparent;border-radius:0;
  padding:0 0 1px;margin:0;font:inherit;color:inherit;cursor:pointer;
  opacity:.35;transition:opacity .3s ease;
}
.lang-switch button:hover{opacity:.75;}
.lang-switch button.is-current{opacity:1;border-bottom-color:currentColor;cursor:default;}
.lang-switch .lang-sep{opacity:.35;}
/* フッターの切替は隣のリンクと同じ書体・サイズ・ベースラインに揃える */
.lang-switch--sp{display:none;}
.lang-switch--footer{margin-left:0;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;align-items:baseline;}
/* マウスでクリックした時の黒い枠は出さない（キーボード操作時の枠は残す） */
.lang-switch button:focus:not(:focus-visible){outline:none;}
/* 英語は語が長くなるため、手がける領域のリストは折り返しを許可 */
html.is-en .typology-list li{white-space:normal;}
/* PCのヘッダー: JP/EN を HOME・WORKS… の上の行に右寄せで配置し、太字にする。
   サイズは 13px の1.5倍（19.5px）をさらに0.9倍した 17.55px。「/」の両脇に余白は入れない（gap:0）。 */
/*   リンク行は元の1行レイアウトのまま（折り返さない）にするため、切替は絶対配置でリンク行の真上に置く。
     margin-top で リンク行＋切替 のまとまりがヘッダーの上下中央に来るように下げている。 */
@media (min-width:901px){
  nav.gnav{position:relative;margin-top:28px;}
  nav.gnav .lang-switch{
    position:absolute;right:0;bottom:100%;margin:0 0 4px;
    font-size:17.55px;font-weight:700;gap:0;line-height:1.2;white-space:nowrap;
  }
}
@media (max-width:900px){
  /* スマホ: JP/EN はメニューの中ではなくヘッダーに常時表示（☰ の真上に右寄せ、太字、「/」の両脇の余白なし）。
     ☰ を少し下げて、JP/EN と ☰ のまとまりがヘッダーの上下中央に来るようにしている。
     メニューを開いた時も ☰(×) と同じく最前面に出し、白文字にする。 */
  nav.gnav .lang-switch{display:none;}
  .lang-switch--sp{
    display:inline-flex;position:absolute;z-index:201; /* ☰ ボタンの当たり判定より前面に置き、JP/EN のタップを確実に拾う */
    right:var(--gutter);top:calc(50% - 23px);
    margin:0;font-size:13px;font-weight:700;gap:0;line-height:1.2;white-space:nowrap;
  }
  .lang-switch--sp button{position:relative;}
  .lang-switch--sp button::before{content:"";position:absolute;inset:-10px -5px -4px;} /* タップしやすいよう当たり判定を広げる（下は ☰ に被らない範囲） */
  .nav-toggle{top:13px;}
  body.nav-open .lang-switch--sp{color:#fff;}
}

.page{display:none;opacity:0;transition:opacity .5s ease;}
.page.is-in{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .page{transition:none;}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.work-card .thumb .thumb-video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.work-card:hover .thumb .thumb-video{transform:scale(1.045);}
