:root{
  --paper:#F5F1E8; --paper2:#EAE3D6;
  --ink:#1F1B17; --sub:#6B6258;
  --accent:#C24632;
  --line:rgba(31,27,23,.14);
  --line-strong:rgba(31,27,23,.24);
  --s4:4px; --s8:8px; --s16:16px; --s24:24px; --s32:32px; --s48:48px; --s64:64px; --s96:96px;
  --pad-x:clamp(20px,5vw,32px); --pad-y:clamp(64px,10vw,96px);
  --hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'%3E%3Cpath d='M3 8 C 34 3, 62 12, 90 6 S 130 4, 157 8' fill='none' stroke='%23C24632' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Zen Kaku Gothic New',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none; transition:color .3s ease;}
a:hover{color:var(--accent);}
::selection{background:var(--accent); color:var(--paper);}
img,canvas,video,svg{display:block; max-width:100%;}
.display{font-family:'Archivo',sans-serif;}
.mincho{font-family:'Shippori Mincho',serif;}
.hand-underline{ background-image:var(--hand); background-repeat:no-repeat; background-position:left bottom; background-size:100% .55em; padding-bottom:.28em; }

/* ---- side rail ---- */
.rail{ position:fixed; top:0; left:0; height:100vh; width:56px; z-index:55; display:none; flex-direction:column; align-items:center; justify-content:space-between; padding:96px 0 32px; pointer-events:none; }
.rail .r-label{ writing-mode:vertical-rl; font-family:'Archivo',sans-serif; font-size:11px; font-weight:600; letter-spacing:.28em; color:var(--sub); text-transform:uppercase; }
.rail .r-track{ position:relative; width:1px; height:38vh; background:var(--line-strong); }
.rail .r-progress{ position:absolute; top:0; left:0; width:1px; height:0; background:var(--accent); }
.rail .r-year{ writing-mode:vertical-rl; font-family:'Archivo',sans-serif; font-size:11px; letter-spacing:.2em; color:var(--sub); }
@media(min-width:1024px){ .rail{ display:flex; } }

/* ---- header ---- */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad-x); border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease;
}
.site-header.scrolled{ background:rgba(245,241,232,.85); border-bottom:1px solid var(--line); }
.wordmark{ font-family:'Archivo',sans-serif; font-weight:800; font-size:16px; letter-spacing:.06em; }
.wordmark .dot{ color:var(--accent); }
.nav-links{ display:flex; flex-direction:row; align-items:center; gap:clamp(16px,2.4vw,32px); }
.nav-links a{ display:flex; align-items:baseline; gap:8px; font-size:13px; letter-spacing:.02em; color:var(--sub); }
.nav-links a .n{ font-family:'Archivo',sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--accent); }
.nav-links a.cta-nav{ color:var(--ink); border:1px solid var(--line-strong); padding:9px 18px; letter-spacing:.04em; }
.nav-links a.cta-nav:hover{ border-color:var(--accent); color:var(--accent); }
.nav-toggle{ display:none; width:40px; height:40px; border:1px solid var(--line-strong); background:none; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; z-index:61; }
.nav-toggle span{ display:block; width:16px; height:1px; background:var(--ink); transition:transform .35s ease, opacity .35s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media(max-width:880px){
  .nav-links{ position:fixed; inset:0; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--s24); padding:clamp(32px,10vw,64px); background:var(--paper); transform:translateX(100%); transition:transform .6s cubic-bezier(.76,0,.24,1); }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:22px; }
  .nav-links a .n{ font-size:14px; }
  .nav-links a.cta-nav{ padding:14px 24px; }
  .nav-toggle{ display:flex; }
}
@media(min-width:1024px){ .site-header{ padding-left:76px; } }

/* ---- hero ---- */
.hero{ position:relative; min-height:100vh; min-height:100svh; padding:clamp(104px,14vh,150px) var(--pad-x) clamp(64px,9vh,96px); overflow:hidden; }
@media(min-width:1024px){ .hero{ padding-left:76px; } }
/* タイポの高さをビューポート基準で抑え、下段(SCROLL / No.00)が最初の1画面の最下部に収まるようにする。
   SVGは 1200x800 (=3:2) なので 幅 = 高さ×1.5。幅を svh で上限すると高さが svh 比で決まる。 */
.hero-type{ position:relative; z-index:2; will-change:transform; width:min(100%,1120px,80svh); margin-left:clamp(-6px,-1vw,-14px); pointer-events:none; }
.hero-type-inner{ will-change:transform; }
.hero-svg{ width:100%; height:auto; overflow:visible; }
.hero-words text{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.02em; }
.hero-words.ink-fill{ fill:var(--ink); }
.hero-words .accentword{ fill:var(--accent); }
.hero-fo{ overflow:visible; }
.hero-fill{ width:1200px; height:780px; background:var(--paper2); }
.hero-sub-wrap{ position:relative; z-index:2; margin-top:clamp(20px,3vh,40px); margin-left:auto; max-width:min(52ch,620px); }
.hero-sub{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:clamp(20px,2.4vw,30px); letter-spacing:.02em; margin:0 0 14px; line-height:1.5; }
.hero-lead{ font-size:clamp(14px,1.5vw,17px); line-height:1.95; color:var(--sub); margin:0; max-width:44ch; }
.hero-thumb{ position:absolute; z-index:1; width:clamp(120px,15vw,210px); aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); background:var(--paper2); will-change:transform; box-shadow:0 1px 0 rgba(31,27,23,.05); }
.hero-thumb::before{ content:""; position:absolute; top:0; left:0; width:150%; height:100%; background:repeating-linear-gradient(118deg,#E6DECF 0 20px,#DED4C2 20px 40px); animation:workDrift 11s linear infinite; }
.hero-thumb video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero-thumb .t-tag{ position:absolute; left:12px; bottom:10px; z-index:2; font-family:'Archivo',sans-serif; font-size:9px; letter-spacing:.16em; color:var(--sub); text-transform:uppercase; }
.hero-thumb:has(video) .t-tag{ color:var(--paper); mix-blend-mode:difference; }
.thumb-a{ top:clamp(84px,12vh,110px); right:clamp(40px,5vw,84px); width:clamp(230px,24vw,306px); }
.thumb-b{ bottom:clamp(16px,2.2vh,24px); left:clamp(220px,18vw,290px); width:clamp(150px,13vw,167px); }
@media(max-width:880px){ .hero-thumb{ display:none; } .hero-sub-wrap{ margin-left:0; } }
.hero-corner{ position:absolute; right:var(--pad-x); bottom:clamp(22px,4vh,36px); z-index:3; text-align:right; }
.hero-corner .no{ display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; letter-spacing:.1em; color:var(--accent); }
.hero-corner .mt{ display:block; font-size:10px; letter-spacing:.2em; color:var(--sub); text-transform:uppercase; margin-top:6px; }
.hero-scroll{ position:absolute; left:var(--pad-x); bottom:clamp(22px,4vh,36px); z-index:3; display:flex; align-items:center; gap:14px; font-family:'Archivo',sans-serif; font-size:10px; letter-spacing:.3em; color:var(--sub); }
@media(min-width:1024px){ .hero-scroll{ left:76px; } }
.hero-scroll .line{ width:52px; height:1px; background:var(--line-strong); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:""; position:absolute; inset:0; background:var(--accent); transform-origin:left; animation:scrollLine 2.2s cubic-bezier(.7,0,.3,1) infinite; }

/* ---- section base ---- */
.section{ position:relative; isolation:isolate; padding:var(--pad-y) var(--pad-x); }
@media(min-width:1024px){ .section{ padding-left:76px; } }
.container{ max-width:1280px; margin:0 auto; width:100%; }
.wm{ position:absolute; z-index:0; font-family:'Archivo',sans-serif; font-weight:900; color:rgba(31,27,23,.045); line-height:.8; letter-spacing:-.03em; pointer-events:none; user-select:none; font-size:clamp(180px,34vw,520px); top:clamp(20px,4vw,60px); right:-.06em; }
.index-label{ display:flex; align-items:center; gap:16px; font-family:'Archivo',sans-serif; font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--sub); }
.index-label .no{ color:var(--accent); }
.index-label .rule{ height:2px; width:44px; background:var(--accent); }
.h-big{ font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(40px,6.4vw,86px); line-height:.98; letter-spacing:-.03em; margin:0; }
.h-mincho{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:clamp(30px,4.4vw,58px); line-height:1.28; letter-spacing:.01em; margin:0; }
.lead{ font-size:clamp(16px,2vw,21px); line-height:1.9; margin:0; text-wrap:pretty; }
.body{ font-size:15px; line-height:1.95; color:var(--sub); text-wrap:pretty; }

/* editorial 2-col with sticky head */
.editorial{ display:grid; grid-template-columns:4fr 7fr; gap:clamp(32px,5vw,72px); position:relative; z-index:1; }
.editorial .col-head{ position:sticky; top:104px; align-self:start; }
@media(max-width:880px){ .editorial{ grid-template-columns:1fr; gap:var(--s32); } .editorial .col-head{ position:static; } }

/* ---- about ---- */
.about-defs{ margin-top:var(--s48); border-top:1px solid var(--line-strong); }
.about-defs .def{ display:grid; grid-template-columns:120px 1fr; gap:clamp(16px,3vw,40px); padding:clamp(20px,2.6vw,28px) 0; border-bottom:1px solid var(--line); }
.about-defs dt{ font-family:'Archivo',sans-serif; font-weight:700; font-size:12px; letter-spacing:.18em; color:var(--accent); }
.about-defs dd{ margin:0; font-size:16px; line-height:1.6; }
.about-defs dd .en{ display:block; font-family:'Archivo',sans-serif; color:var(--sub); font-size:11px; letter-spacing:.1em; margin-top:6px; text-transform:uppercase; }
@media(max-width:520px){ .about-defs .def{ grid-template-columns:1fr; gap:8px; } }

/* ---- what i make ---- */
.make-head{ margin-bottom:clamp(40px,5vw,64px); }
.make-list{ border-top:1px solid var(--line-strong); position:relative; z-index:1; }
.make-row{ position:relative; display:grid; grid-template-columns:90px 1fr; gap:clamp(16px,3vw,40px); padding:clamp(28px,3.4vw,40px) 0; border-bottom:1px solid var(--line); overflow:hidden; transition:padding-left .5s cubic-bezier(.7,0,.2,1); }
.make-row:hover{ padding-left:20px; }
.make-row .rw-wm{ position:absolute; right:0; top:50%; transform:translateY(-50%); font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(90px,13vw,180px); color:rgba(31,27,23,.05); line-height:.8; pointer-events:none; transition:color .4s ease; }
.make-row:hover .rw-wm{ color:rgba(194,70,50,.09); }
.make-row .m-no{ font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; letter-spacing:.08em; color:var(--accent); }
.make-row .m-en{ font-family:'Archivo',sans-serif; font-weight:600; font-size:11px; letter-spacing:.2em; color:var(--sub); text-transform:uppercase; }
.make-row .m-jp{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:clamp(24px,3vw,36px); margin-top:8px; transition:color .3s ease; }
.make-row:hover .m-jp{ color:var(--accent); }
.make-row .m-desc{ max-height:0; opacity:0; overflow:hidden; font-size:15px; line-height:1.85; color:var(--sub); max-width:52ch; transition:max-height .55s cubic-bezier(.6,0,.2,1), opacity .4s ease, margin-top .5s ease; }
.make-row:hover .m-desc{ max-height:140px; opacity:1; margin-top:16px; }
@media(max-width:760px){
  .make-row{ grid-template-columns:1fr; gap:6px; }
  .make-row:hover{ padding-left:10px; }
  .make-row .m-desc{ max-height:none; opacity:1; margin-top:14px; }
}

/* ---- works ---- */
.works-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(40px,5vw,64px); position:relative; z-index:1; }
.works-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px) clamp(24px,4vw,48px); position:relative; z-index:1; }
.works-grid .work-card:nth-child(even){ margin-top:clamp(36px,7vw,96px); }
@media(max-width:760px){ .works-grid{ grid-template-columns:1fr; } .works-grid .work-card:nth-child(even){ margin-top:0; } }
.work-card{ cursor:pointer; }
.work-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper2); border:1px solid var(--line); transition:transform .6s cubic-bezier(.5,0,.2,1); }
.work-media::before{ content:""; position:absolute; top:0; left:0; width:150%; height:100%; background:repeating-linear-gradient(114deg,#EAE3D6 0 24px,#E0D7C6 24px 48px); animation:workDrift 10s linear infinite; }
.work-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0%,rgba(194,70,50,.14) 50%,transparent 100%); transform:translateX(-100%); animation:workSweep 6s ease-in-out infinite; }
.work-media .w-label{ position:absolute; left:18px; bottom:16px; z-index:2; font-family:'Archivo',sans-serif; font-size:11px; letter-spacing:.12em; color:var(--sub); }
.work-media .w-play{ position:absolute; top:16px; left:18px; z-index:2; font-family:'Archivo',sans-serif; font-size:10px; letter-spacing:.22em; color:var(--accent); display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(-4px); transition:opacity .4s ease, transform .4s ease; }
.work-media .w-play::before{ content:""; width:0; height:0; border-left:7px solid var(--accent); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; }
.work-card:hover .work-media{ transform:scale(1.02); }
.work-card:hover .work-media::before{ animation-duration:4s; }
.work-card:hover .w-play{ opacity:1; transform:translateY(0); }
.work-cap{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:16px; }
.work-cap .w-name{ font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(19px,2.1vw,24px); letter-spacing:-.01em; transition:color .3s ease; }
.work-card:hover .w-name{ color:var(--accent); }
.work-cap .w-name .jp{ font-family:'Zen Kaku Gothic New',sans-serif; font-weight:500; font-size:13px; color:var(--sub); margin-left:12px; }
.work-cap .w-no{ font-family:'Archivo',sans-serif; font-weight:700; font-size:12px; letter-spacing:.12em; color:var(--accent); }
.work-cap .w-cat{ font-size:11px; letter-spacing:.14em; color:var(--sub); text-transform:uppercase; margin-top:5px; }

/* ---- process ---- */
.process-head{ margin-bottom:clamp(40px,5vw,64px); position:relative; z-index:1; }
.process-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.8vw,26px); align-items:start; position:relative; z-index:1; }
.p-step{ border-top:2px solid var(--accent); padding-top:20px; }
.process-steps .p-step:nth-child(2){ margin-top:clamp(20px,3vw,40px); }
.process-steps .p-step:nth-child(3){ margin-top:clamp(40px,6vw,80px); }
.process-steps .p-step:nth-child(4){ margin-top:clamp(60px,9vw,120px); }
.process-steps .p-step:nth-child(5){ margin-top:clamp(80px,12vw,160px); }
.p-step .p-no{ font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(30px,3.4vw,48px); color:var(--accent); line-height:.9; letter-spacing:-.02em; }
.p-step .p-en{ font-family:'Archivo',sans-serif; font-weight:600; font-size:11px; letter-spacing:.2em; color:var(--sub); text-transform:uppercase; margin-top:16px; }
.p-step .p-jp{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:clamp(20px,2.2vw,26px); margin:6px 0 12px; }
.p-step .p-desc{ font-size:13.5px; line-height:1.8; color:var(--sub); }
@media(max-width:860px){
  .process-steps{ grid-template-columns:1fr; gap:0; }
  .process-steps .p-step{ margin-top:0 !important; border-top:none; border-bottom:1px solid var(--line); padding:24px 0; display:grid; grid-template-columns:70px 1fr; gap:20px; }
  .process-steps .p-step:first-child{ border-top:2px solid var(--accent); }
  .p-step .p-en{ margin-top:0; }
}

/* ---- contact ---- */
.contact{ background:var(--paper2); }
.contact-inner{ max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.contact h2{ font-family:'Shippori Mincho',serif; font-weight:800; font-size:clamp(34px,5.4vw,72px); line-height:1.18; letter-spacing:.01em; margin:0 0 clamp(32px,5vw,48px); }
.contact h2 .accent{ color:var(--accent); }
.cta-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.cta{ display:inline-flex; align-items:center; gap:12px; background:var(--accent); color:var(--paper); padding:18px 32px; font-weight:700; font-size:15px; letter-spacing:.03em; transition:background .3s ease, transform .3s ease; }
.cta:hover{ background:#a63a29; color:var(--paper); transform:translateY(-2px); }
.cta::after{ content:"→"; font-family:'Archivo',sans-serif; }
.cta-ghost{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line-strong); color:var(--ink); padding:18px 28px; font-size:15px; letter-spacing:.03em; transition:border-color .3s ease, color .3s ease; }
.cta-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.contact-note{ margin-top:clamp(28px,4vw,40px); font-size:13px; letter-spacing:.04em; color:var(--sub); }

/* ---- footer ---- */
.site-footer{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; padding:clamp(40px,6vw,64px) var(--pad-x); border-top:1px solid var(--line); }
@media(min-width:1024px){ .site-footer{ padding-left:76px; } }
.site-footer .fm{ font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; letter-spacing:.06em; }
.site-footer .fm .dot{ color:var(--accent); }
.site-footer .fnav{ display:flex; gap:24px; font-size:12px; letter-spacing:.12em; color:var(--sub); text-transform:uppercase; }
.site-footer .fc{ font-family:'Archivo',sans-serif; font-size:12px; letter-spacing:.08em; color:var(--sub); }

@keyframes scrollLine{ 0%{transform:scaleX(0); transform-origin:left;} 45%{transform:scaleX(1); transform-origin:left;} 55%{transform:scaleX(1); transform-origin:right;} 100%{transform:scaleX(0); transform-origin:right;} }
@keyframes workDrift{ 0%{transform:translateX(0);} 100%{transform:translateX(-16.66%);} }
@keyframes workSweep{ 0%{transform:translateX(-100%);} 60%{transform:translateX(100%);} 100%{transform:translateX(100%);} }

@media(prefers-reduced-motion:reduce){
  .hero-fo{ display:none; }
  .work-media::before, .work-media::after, .hero-thumb::before, .hero-scroll .line::after{ animation:none !important; }
}

/* intro curtain (built by JS) */
.intro-overlay{ position:fixed; inset:0; z-index:200; display:flex; pointer-events:none; }
.intro-panel{ flex:1; background:var(--paper2); }
.intro-panel:not(:last-child){ border-right:1px solid rgba(31,27,23,.06); }