@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Noto Sans JP";src:url(fonts/noto-sans-jp.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--k:#0A0A0A;--w:#fff;--b:#0A0A0A;--g:#EDEDED;--pad:clamp(20px,3.9vw,56px);--hd:72px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--w);color:var(--k);font-family:"Noto Sans JP",system-ui,sans-serif;font-weight:500;font-size:17px;line-height:1.85;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0;padding:0}
.giant{font-family:"Archivo",sans-serif;font-weight:900;font-stretch:85%;letter-spacing:-.03em;line-height:.8}
.mono{font-family:"Space Mono","Noto Sans JP",monospace;font-weight:700;letter-spacing:.06em}
.label{font-size:13px;letter-spacing:.14em;color:var(--b);margin-bottom:22px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp{display:none}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--k);color:#fff;padding:8px 14px}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--k);outline-offset:4px}

/* Spawn Software 案12「白紙から、生み出す。」 白・黒だけ。写真は色つき（2026-10-22 決定。--b は旧アクセント色の名残で、いまは黒）。ボタンは黒地白文字→ホバーで反転、リンクは下線、フォーカスは太い黒（黒地では白）の枠。フォントは assets/fonts（ローカル、SIL OFL 1.1） */
/* header */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hd);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:var(--w);border-bottom:2px solid var(--k)}
.logo{display:block;line-height:0}.logo img{display:block;height:56px;width:auto}
.gnav{display:flex;gap:8px}.gnav a{font-size:15px;font-weight:800;padding:7px 18px;border:2px solid var(--k);border-radius:999px;line-height:1.5;transition:background .2s,color .2s}
.gnav a:hover{background:var(--k);color:#fff}.gnav .pill{background:var(--k);border-color:var(--k);color:#fff}.gnav .pill:hover{background:#fff;color:var(--k);border-color:var(--k)}
.menu-btn{display:none;font-size:13px;background:var(--k);color:#fff;border:0;border-radius:999px;padding:9px 18px;cursor:pointer}
.sp-menu{position:fixed;z-index:59;top:var(--hd);left:0;right:0;bottom:0;background:var(--k);color:#fff;padding:40px var(--pad);display:flex;flex-direction:column}
.sp-menu[hidden]{display:none}.sp-menu a{font-size:30px;font-weight:900;padding:16px 0;border-bottom:1px solid #333;display:flex;gap:18px;align-items:baseline}.sp-menu .mono{font-size:13px;color:#9A9A9A}

/* hero */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;background:var(--w);padding-top:var(--hd)}
.belt{position:absolute;z-index:1;top:-30%;right:-4%;width:62%;height:160%;display:flex;gap:22px;transform:rotate(-12deg) translateY(calc(var(--hp,0)*-18vh));pointer-events:none}
.col{flex:1;min-width:0}
.lane{animation:up 46s linear infinite}
.c2 .lane{animation-name:down;animation-duration:54s}.c3 .lane{animation-duration:40s}
@keyframes up{to{transform:translateY(-50%)}}@keyframes down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.cd{margin:0 0 22px;border:2px solid var(--k);background:var(--w);overflow:hidden;position:relative}
.cd.ph{aspect-ratio:3/4}.cd.ph.wide{aspect-ratio:4/5}
.cd img{width:100%;height:100%;object-fit:cover}
.cd.code{background:var(--k);color:#fff;padding:22px 20px;font-size:14px;line-height:1.8}.cd.code pre{margin:0;white-space:pre-wrap;font:inherit}
.cd.plus{background:var(--b);aspect-ratio:1;display:grid;place-items:center}.cd.plus span{font-family:Archivo;font-weight:900;color:#fff;font-size:min(13vw,190px);line-height:1}
.cd.type{aspect-ratio:1;display:grid;place-items:center}.cd.type span{font-family:Archivo;font-weight:900;font-stretch:85%;font-size:min(10vw,150px);line-height:1;letter-spacing:-.04em}
.dict{position:absolute;z-index:3;left:var(--pad);top:calc(var(--hd) + 6vh);max-width:36%}
.dict-h{font-size:15px}.dict-h span{color:#666;font-weight:700}.dict-h em{font-style:normal;color:var(--b)}
.dict-jp{font-weight:900;font-size:clamp(34px,4.3vw,66px);line-height:1.18;letter-spacing:-.02em;margin:14px 0 18px}
.dict-en{font-size:13px;color:#555;line-height:1.7}
.caret{display:inline-block;width:.42em;height:.9em;background:var(--b);vertical-align:-.08em;margin-left:.08em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.vcopy{position:absolute;z-index:3;right:var(--pad);top:calc(var(--hd) + 6vh);writing-mode:vertical-rl;font-weight:900;font-size:22px;letter-spacing:.3em;background:var(--w);border:2px solid var(--k);padding:16px 9px}
.hero-word{position:absolute;z-index:4;left:0;right:0;bottom:.01em;text-align:center;font-size:28.6vw;white-space:nowrap;color:var(--k);-webkit-text-stroke:.07em #fff;paint-order:stroke fill;transform-origin:50% 100%;transform:translateY(calc(var(--hp,0)*8vh)) scale(calc(1 + var(--hp,0)*.12))}
.hw{display:inline-block}
.scroll{position:absolute;z-index:3;left:var(--pad);bottom:calc(24vw + 26px);font-size:12px;letter-spacing:.2em;display:flex;align-items:center;gap:10px}
.scroll span{display:block;width:44px;height:2px;background:var(--k);transform-origin:left;animation:sl 1.8s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sl{0%{transform:scaleX(0)}50%{transform:scaleX(1);transform-origin:left}50.1%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* hero entrance */
/* ヒーローの巨大 SPAWN は、オープニングの SVG が着地した瞬間に（同じ位置・形で）出す。ほかの要素は着地に合わせて順に出す */
/* 完全な 0 にすると描画が後回しになり、着地の瞬間に間に合わないので .01 にしておく（見た目は透明） */
.js:not(.still):not(.ready) .hero-word .hw{opacity:.01}
.js:not(.still) .dict,.js:not(.still) .vcopy,.js:not(.still) .belt .col,.js:not(.still) .hero .scroll,.js:not(.still) .hero-note,.js:not(.still) .p-index .hd{opacity:.01;transition:opacity .7s .1s,transform 1s cubic-bezier(.16,1,.3,1)}
.js:not(.still) .belt .col{transform:translateY(14vh)}
.js:not(.still) .dict{transform:translateY(16px)}
.js.hero-in .dict,.js.hero-in .vcopy,.js.hero-in .belt .col,.js.hero-in .hero .scroll,.js.hero-in .hero-note,.js.hero-in .p-index .hd,
.js.ready .dict,.js.ready .vcopy,.js.ready .belt .col,.js.ready .hero .scroll,.js.ready .hero-note,.js.ready .p-index .hd{opacity:1;transform:none}
.js.hero-in .p-index .hd{transition-delay:0s}.js.hero-in .belt .c1{transition-delay:.05s}.js.hero-in .belt .c2{transition-delay:.15s}.js.hero-in .belt .c3{transition-delay:.25s}
.js.hero-in .dict{transition-delay:.2s}.js.hero-in .vcopy{transition-delay:.3s}.js.hero-in .hero .scroll,.js.hero-in .hero-note{transition-delay:.45s}

/* message */
.msg{padding:18vh var(--pad) 10vh;position:relative}
.catch{font-weight:900;font-size:clamp(58px,15vw,236px);line-height:1.02;letter-spacing:-.05em}
.catch .ln{display:block;overflow:hidden;padding-bottom:.04em}.catch .ln>span{display:inline-block}
.catch em{font-style:normal;color:var(--b)}
.catch-en{font-size:clamp(13px,1.2vw,17px);letter-spacing:.32em;margin-top:28px}
.js:not(.still) .catch .ln>span{transform:translateY(108%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.js:not(.still) .catch .ln:nth-child(2)>span{transition-delay:.12s}
.catch.in .ln>span{transform:none!important}
.msg-body{display:grid;grid-template-columns:5fr 6fr;gap:7vw;margin-top:14vh;align-items:start}
.msg-fig{position:sticky;top:calc(var(--hd) + 32px)}
.msg-img{overflow:hidden;aspect-ratio:4/5;border:2px solid var(--k);clip-path:inset(calc((1 - var(--mp,1))*14%) 0 0 0)}
.msg-img img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.3 - var(--mp,1)*.3))}
figcaption{font-size:11px;letter-spacing:.12em;margin-top:10px;color:#555}
.statement{position:relative;padding-top:4vh}
.st{font-weight:800;font-size:clamp(22px,2.5vw,38px);line-height:1.6;margin-bottom:11vh;letter-spacing:.01em}
.js:not(.still) .st{opacity:.12;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.16,1,.3,1)}
.js .st.in{opacity:1;transform:none}
.st.strong{font-size:clamp(24px,2.7vw,44px);line-height:1.5;font-weight:900;margin-bottom:4vh}
.st.strong{background:linear-gradient(transparent 72%,rgba(10,10,10,.12) 72%);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.doodle{position:absolute;fill:none;stroke:var(--b);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.doodle path{stroke-dasharray:420;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1)}
.js:not(.still) .doodle path{stroke-dashoffset:420}.js .doodle.in path{stroke-dashoffset:0}
.d1{width:96px;right:0;top:-40px}.d2{width:220px;left:0;bottom:-90px}

/* process */
.proc{position:relative;border-top:2px solid var(--k);border-bottom:2px solid var(--k);background:var(--w)}
.pin{padding:10vh 0}
.track{display:flex;flex-direction:column;gap:12vh;padding:0 var(--pad)}
.pn{display:grid;grid-template-columns:1.1fr 1fr;gap:3.4vw;align-items:stretch}
.pn-img{border:2px solid var(--k);overflow:hidden;min-height:0}
.pn-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.pn.on .pn-img img{transform:scale(1)}
.pn-tx{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6px}
.pn-n{font-size:22px;color:var(--b);letter-spacing:0;margin-bottom:auto;font-family:"Space Mono";font-weight:700}
.pn-w{font-size:clamp(70px,10.5vw,170px);color:transparent;-webkit-text-stroke:2px var(--k);transition:color .6s;margin-bottom:28px}
.pn.on .pn-w{color:var(--k)}
.pn h3{font-weight:900;font-size:clamp(30px,3.3vw,52px);line-height:1.2;margin-bottom:14px}
.pn-tx p:last-child{font-size:17px;max-width:30em}
.pn-0{display:flex;flex-direction:column;justify-content:center}
.pn0-w{font-size:clamp(64px,15vh,170px);line-height:.84}.pn0-w .b{color:var(--b)}
.pbar{display:none}
.js:not(.still) .pin{position:sticky;top:0;height:100vh;overflow:hidden;padding:calc(var(--hd) + 7vh) 0 9vh;display:flex;align-items:stretch}
.js:not(.still) .track{flex-direction:row;gap:4vw;height:100%;will-change:transform;transform:translate3d(calc(var(--tx,0)*-1px),0,0)}
.js:not(.still) .pn{flex:0 0 76vw;height:100%}
.js:not(.still) .pn-0{flex:0 0 46vw}
.js:not(.still) .pbar{display:block;position:absolute;left:var(--pad);right:var(--pad);bottom:4vh;height:4px;background:var(--g)}
.pbar i{display:block;height:100%;background:var(--k);width:calc(var(--pp,0)*100%)}

/* make */
.make{padding:16vh var(--pad) 14vh}
.sec-head{margin-bottom:7vh}.sec-jp{font-weight:900;font-size:clamp(40px,5vw,76px);line-height:1.15;letter-spacing:-.02em}.sec-lead{margin-top:14px;font-size:18px}
.rows{list-style:none;border-top:2px solid var(--k)}
.row a{position:relative;display:grid;grid-template-columns:72px 1fr minmax(300px,430px);align-items:center;gap:24px;padding:3.2vw 18px;border-bottom:2px solid var(--k);isolation:isolate}
.row a::before{content:"";position:absolute;inset:0;background:var(--k);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.3,1);z-index:-1}
.row a:hover::before{transform:scaleY(1)}.row a:hover{color:#fff}
.r-n{font-size:14px;color:var(--b)}
.r-w{font-size:clamp(56px,9.4vw,150px);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.row a:hover .r-w{transform:translateX(18px)}
.r-tx{font-size:15.5px;line-height:1.8}.r-tx b{display:block;font-size:20px;font-weight:900;margin-bottom:6px;line-height:1.5}
.r-img{position:absolute;right:36%;top:50%;width:260px;aspect-ratio:4/3;border:2px solid #fff;overflow:hidden;pointer-events:none;opacity:0;transform:translateY(-50%) scale(.92);transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1);z-index:2}
.r-img img{width:100%;height:100%;object-fit:cover}
.row a:hover .r-img{opacity:1;transform:translateY(-50%)}
.js:not(.still) .row{opacity:0;transform:translateX(8vw);transition:opacity .7s,transform 1s cubic-bezier(.16,1,.3,1)}
.js .row.in{opacity:1;transform:none}

/* band */
.band{background:var(--k);padding:12vh 0 8vh;overflow:hidden;position:relative;isolation:isolate}
.strip{display:flex;gap:18px;width:max-content}
.strip img{height:clamp(170px,30vh,300px);aspect-ratio:4/3;object-fit:cover;border:2px solid #fff}
.s-a{transform:translateX(calc(var(--bp,.5)*-34vw))}
.s-b{transform:translateX(calc(-30vw + var(--bp,.5)*30vw))}
.band-w{font-size:12.6vw;white-space:nowrap;color:#fff;display:flex;justify-content:center;gap:.14em;align-items:center;margin:5vh 0 4vh;line-height:.8}
.band-w .x{font-size:.55em;color:#8A8A8A}
.band-note{color:#888;font-size:11px;text-align:center;margin-top:5vh;letter-spacing:.2em}

/* works */
.works{background:var(--k);color:#fff;padding:12vh var(--pad) 14vh;border-top:1px solid #222}
.works .label{color:#9A9A9A}
.w-in{display:grid;grid-template-columns:5fr 7fr;gap:5vw;align-items:center}
.w-tx p{font-size:17px;margin-top:22px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 30px}.tags li{font-size:12px;border:1.5px solid #fff;border-radius:999px;padding:5px 14px;letter-spacing:.04em}
.more{display:inline-block;font-weight:900;border-bottom:3px solid currentColor;padding-bottom:4px;transition:border-bottom-color .15s}
.more:hover{border-bottom-color:transparent}
.w-shots{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}.w-shots .shot-m{grid-column:1/-1}
.w-shots figure{margin:0}.w-shots img{display:block;width:100%;height:auto;border:2px solid #fff;background:#fff}
.w-shots figcaption{display:flex;gap:8px;margin-top:8px;font-size:11px;letter-spacing:.08em;color:#aaa;line-height:1.5}.w-shots figcaption .n{color:#fff}
.w-note{font-size:11px;color:#777;margin-top:7vh;letter-spacing:.12em}

/* company */
.company{padding:16vh var(--pad) 14vh}
.co{max-width:1100px;border-top:2px solid var(--k)}
.co div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:24px 0;border-bottom:2px solid var(--k)}
.co dt{font-weight:800;color:#555;font-size:15px}.co dd{font-weight:800;font-size:19px;line-height:1.7}

/* cta */
.cta{position:relative;background:var(--b);color:#fff;padding:14vh var(--pad) 16vh;overflow:hidden;isolation:isolate}
.cta .label{color:#fff}
.cta-ink{position:absolute;z-index:-1;right:-4%;top:-6%;width:min(54vw,820px);mix-blend-mode:multiply;opacity:.9}
.cta-w{font-size:clamp(64px,14vw,230px);line-height:.84}.cta-w>span{display:block}.cta-w .b{color:transparent;-webkit-text-stroke:.022em #fff}
.js:not(.still) .cta-w>span{opacity:0;transform:translateY(60px);transition:opacity .7s,transform 1s cubic-bezier(.16,1,.3,1)}
.js:not(.still) .cta-w>span:nth-child(2){transition-delay:.1s}.js:not(.still) .cta-w>span:nth-child(3){transition-delay:.2s}
.cta-w.in>span{opacity:1!important;transform:none!important}
.cta-tx{margin-top:9vh;max-width:680px}
.cta h2{font-weight:900;font-size:clamp(28px,3.4vw,50px);line-height:1.35;margin-bottom:16px}
.cta-tx p{font-size:17px;margin-bottom:30px}
.mail{display:inline-block;font-family:Archivo;font-weight:900;font-stretch:90%;font-size:clamp(24px,3.9vw,58px);letter-spacing:-.01em;border-bottom:4px solid #fff;line-height:1.2;padding-bottom:4px;white-space:nowrap;transition:color .2s,border-color .2s}
.mail:hover{border-bottom-color:transparent}

/* footer */
.ft{background:var(--w)}
.ft-w{font-size:28.6vw;text-align:center;line-height:.78;padding-top:4vw;overflow:hidden}
.ft-in{display:grid;grid-template-columns:1.2fr 2fr auto;gap:30px;align-items:end;padding:36px var(--pad) 40px;border-top:2px solid var(--k);margin-top:2vw;font-size:14px}
.co-n b{display:block;font-size:14px;margin-bottom:6px}.ft-in ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:700}.ft-in a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.copy{font-size:12px}

/* intro */
#intro{display:none}
.js:not(.still) #intro{animation:ihide 0s 6s forwards;display:block;position:fixed;inset:0;z-index:100;background:var(--w);overflow:hidden;cursor:pointer}
.i-grid{position:absolute;inset:0;background-image:linear-gradient(#0000000d 1px,transparent 1px),linear-gradient(90deg,#0000000d 1px,transparent 1px);background-size:80px 80px;background-position:center;opacity:0;animation:fi .5s .05s forwards}
@keyframes fi{to{opacity:1}}
.i-shapes i{position:absolute;left:50%;top:50%;width:min(10vw,110px);aspect-ratio:1;background:var(--k);transform:translate(-50%,-50%) scale(0);animation:pop .42s cubic-bezier(.3,1.6,.5,1) forwards,gather .4s .95s cubic-bezier(.7,0,.3,1) forwards}
.i-shapes .s1{border-radius:50%;--x:-26vw;--y:-18vh;animation-delay:.1s,.95s}
.i-shapes .s2{clip-path:polygon(50% 0,100% 100%,0 100%);--x:22vw;--y:-22vh;animation-delay:.22s,.95s}
.i-shapes .s3{background:var(--b);--x:28vw;--y:16vh;animation-delay:.34s,.95s}
.i-shapes .s4{background:transparent;border:6px solid var(--k);--x:-22vw;--y:20vh;animation-delay:.46s,.95s}
@keyframes pop{from{transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(0) rotate(-40deg)}to{transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1) rotate(0)}}
@keyframes gather{from{transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1)}to{transform:translate(-50%,-50%) scale(0) rotate(90deg)}}
.i-word{position:absolute;left:50%;top:50%;width:min(94vw,1400px);transform:translate(-50%,-50%);overflow:visible}
@keyframes draw{to{stroke-dashoffset:0}}
.i-meta{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:flex;gap:24px;font-size:13px}
.i-count{color:var(--b)}
.i-skip{position:absolute;right:var(--pad);bottom:22px;background:none;border:2px solid var(--k);border-radius:999px;padding:6px 16px;font-size:12px;cursor:pointer;color:var(--k)}
/* つなぎ：go＝方眼・カウンタを消して文字を塗り終わりにそろえる／fly＝背景を透かしながら文字を運ぶ／gone＝着地後に SVG をフェード */
/* 白い背景は ::before の別レイヤーにして、つなぎでは opacity だけを動かす（毎コマ塗り直しにならないように）。
   ごくわずかに透かしておくのは、下のヒーローを先に描画させておくため（見た目は白） */
.js:not(.still) #intro{background:none}
.js:not(.still) #intro::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.995);transition:opacity .5s .08s}
#intro.go{pointer-events:none}
#intro.go .i-grid,#intro.go .i-meta,#intro.go .i-skip{animation:none;opacity:0;transition:opacity .25s}
#intro.go .i-shapes{opacity:0;transition:opacity .2s}
#intro.fly::before{opacity:0}
#intro.gone .i-word{opacity:0;transition:opacity .15s linear}
#intro.gone.now .i-word{transition:none}
/* 2回目以降（短縮版）。intro-seen は head の中で付くので、JS の読み込み前から完成形で出る */
#intro.quick .i-shapes,.intro-seen #intro .i-shapes{display:none}

/* still / reduced */
.still .lane,.still .caret,.still .scroll span{animation:none}

/* responsive */
@media (max-width:1080px){
  .gnav a{padding:6px 12px;font-size:14px}
  .row a{grid-template-columns:56px 1fr 300px}
}
@media (max-width:860px){
  :root{--hd:70px}
  .gnav{display:none}.menu-btn{display:block}.logo img{height:54px}
  .sp{display:inline}
  .hero{min-height:620px}
  .belt{width:120%;right:-38%;top:-10%;gap:14px;opacity:1}
  .cd{margin-bottom:14px}.cd.code{font-size:11px;padding:14px}
  .dict{max-width:none;right:var(--pad);top:calc(var(--hd) + 22px)}
  .dict-jp{font-size:clamp(34px,10vw,52px);margin:8px 0 10px}
  .dict .dict-h,.dict .dict-jp,.dict .dict-en{background:var(--w);display:table;padding:2px 8px 4px;margin-left:-8px}
  .dict-jp{padding:4px 8px 6px!important}
  .vcopy{display:none}
  .hero-word{font-size:28.6vw;bottom:-.01em}
  .scroll{bottom:calc(26vw + 18px);background:var(--w);padding:4px 8px;margin-left:-8px}
  .msg{padding-top:12vh}
  .msg-body{grid-template-columns:1fr;gap:6vh;margin-top:8vh}
  .msg-fig{position:relative;top:0}
  .msg-img{aspect-ratio:4/3}
  .st{margin-bottom:6vh}
  .d1{width:64px;top:-30px}
  .js:not(.still) .pin{padding:calc(var(--hd) + 4vh) 0 8vh}
  .js:not(.still) .pn{flex:0 0 84vw;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:18px}
  .js:not(.still) .pn-0{flex:0 0 74vw}
  .pn{grid-template-columns:1fr}
  .pn-img{aspect-ratio:auto}
  .still .pn-img,html:not(.js) .pn-img{aspect-ratio:4/3}
  .pn-n{margin-bottom:8px;font-size:15px}
  .pn-w{font-size:17vw;margin-bottom:12px;-webkit-text-stroke-width:1.5px}
  .pn h3{font-size:28px;margin-bottom:6px}.pn-tx p:last-child{font-size:15px;line-height:1.75}
  .pn0-w{font-size:19vw}
  .row a{grid-template-columns:1fr;gap:8px;padding:28px 4px}
  .r-w{font-size:16vw}.r-tx b{font-size:18px}
  .r-img{position:relative;right:auto;top:auto;width:100%;aspect-ratio:16/9;opacity:1;transform:none!important;border-color:var(--k);margin-top:8px}
  .row a:hover .r-w{transform:none}
  .row a:hover::before{transform:scaleY(0)}.row a:hover{color:inherit}
  .band-w{font-size:12.6vw}
  .w-in{grid-template-columns:1fr;gap:8vh}
  .co div{grid-template-columns:1fr;gap:2px;padding:16px 0}
  .co dd{font-size:17px}
  .cta-ink{width:110vw;right:-40vw;top:auto;bottom:-10%}
  .cta-w{font-size:15vw}
  .mail{font-size:5.9vw;border-bottom-width:3px}
  .scroll{display:none}
  .ft-in{grid-template-columns:1fr}
}
@keyframes ihide{to{visibility:hidden;pointer-events:none}}

/* ===== 共通部品（案12・全ページ） ===== */
picture{display:block}
.cd picture,.pn-img picture,.msg-img picture,.r-img picture,.pc picture,.pfig-in picture{width:100%;height:100%}
.strip picture{flex:none}
.gnav a[aria-current=page]{background:var(--k);color:#fff}
.gnav .pill[aria-current=page]{background:var(--k);border-color:var(--k)}
.sp-menu a[aria-current=page]{color:#9A9A9A}
.sp-menu{overflow-y:auto}
.hero-note{position:absolute;z-index:3;right:var(--pad);top:calc(var(--hd) + 6vh + 300px);font-size:10px;color:#777;letter-spacing:.14em;background:#fff;padding:2px 6px}
.pin{position:relative}.pnote{display:none}
.js:not(.still) .pnote{display:block;position:absolute;right:var(--pad);bottom:calc(4vh + 12px);font-size:10px;color:#777;letter-spacing:.14em}
.st-body{font-size:17px;line-height:2;max-width:34em;margin-top:9vh;color:#333}
.r-more{display:block;margin-top:8px;font-weight:900;font-size:14px}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:16px;border:2px solid var(--k);border-radius:999px;padding:13px 26px;line-height:1.4;transition:background .2s,color .2s,border-color .2s}
.btn-p{background:var(--k);color:#fff}.btn-p:hover{background:#fff;color:var(--k);border-color:var(--k)}
.btn-g{background:#fff}.btn-g:hover{background:var(--k);color:#fff}
.btn-w{background:#fff;border-color:#fff;color:var(--k)}.btn-w:hover{background:var(--k);border-color:#fff;color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cta-more{margin-top:34px}
.text-link{font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em;transition:text-decoration-thickness .15s}.text-link:hover{text-decoration-thickness:5px}
.more-l{margin-top:34px;font-size:17px}
.hl{color:var(--b)}
.tbd{display:inline-block;background:var(--k);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px;line-height:1.6;vertical-align:.1em}
.note{font-size:14px;color:#555;line-height:1.85;margin-top:14px}
.mt{margin-top:22px}
.reveal{transition:opacity .8s,transform 1s cubic-bezier(.16,1,.3,1)}
.js:not(.still) .reveal{opacity:0;transform:translateY(44px)}
.js .reveal.in{opacity:1;transform:none}
.sh{margin-bottom:7vh}.sh .sec-lead{max-width:44em}
.sec-jp.long{font-size:clamp(30px,3.6vw,56px)}
/* ticker */
.ticker{background:var(--k);color:#fff;padding:12px 0;overflow:hidden;border-bottom:2px solid var(--k)}
.marquee{overflow:hidden;white-space:nowrap}.mq-track{display:inline-flex;animation:mq 30s linear infinite}
.mq-t{font-family:Archivo;font-weight:900;font-stretch:85%;font-size:26px;letter-spacing:.06em;padding-right:20px}.mq-t b{color:#8A8A8A;font-weight:900}
@keyframes mq{to{transform:translateX(-50%)}}
.still .mq-track{animation:none}

/* 写真（生成画像）＋注記 */
.pfig{margin-top:30px}.pfig-in{border:2px solid var(--k);overflow:hidden;aspect-ratio:4/3}
.pfig-in img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.pfig:hover .pfig-in img{transform:scale(1)}

/* ===== 下層ページの見出し ===== */
.phero{position:relative;padding-top:var(--hd);overflow:hidden;isolation:isolate;border-bottom:2px solid var(--k);background:#fff}
.ph-stage{position:relative;padding-top:5vh}
.ph-top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:0 var(--pad)}
.ph-top .label{margin:0;font-size:14px}
.crumb{font-size:13px;font-weight:700;background:#fff;padding:2px 8px}.crumb a{border-bottom:1.5px solid}
.ph-cards{position:absolute;z-index:1;top:0;right:3%;width:min(46%,640px);height:100%;pointer-events:none}
.ph-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:start;padding-top:calc(5vh + 48px)}
.pc{position:relative;border:2px solid var(--k);background:#fff;overflow:hidden;margin:0;aspect-ratio:3/4}
.pc img{width:100%;height:100%;object-fit:cover}
.ph-note{position:absolute;right:0;top:calc(100% - 30px);font-size:10px;color:#777;letter-spacing:.14em;display:none}
.pword{position:relative;z-index:4;margin:24vh 0 0;padding:0 var(--pad);font-size:min(calc((100vw - 2 * var(--pad)) / var(--w)),30vw);white-space:nowrap;color:var(--k);-webkit-text-stroke:.07em #fff;paint-order:stroke fill;overflow:hidden;padding-top:.08em;line-height:.82}
.hw{display:inline-block}
.js:not(.still) .pword .hw{transform:translateY(110%);transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s}
.js.ready .pword .hw{transform:none}
.ph-low{position:relative;z-index:4;background:#fff;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:end;padding:4.5vh var(--pad) 7vh;border-top:2px solid var(--k)}
.ph-low h1{font-weight:900;font-size:clamp(36px,5vw,78px);line-height:1.15;letter-spacing:-.02em}
.ph-low .lead{font-size:18px;line-height:1.9;font-weight:700}
.ph-low::after{content:"PHOTO ／ イメージ";position:absolute;right:var(--pad);top:-26px;font-family:"Space Mono","Noto Sans JP",monospace;font-weight:700;font-size:10px;letter-spacing:.14em;color:#777;background:#fff;padding:2px 6px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.jump a{display:inline-flex;gap:8px;align-items:baseline;border:2px solid var(--k);border-radius:999px;padding:6px 16px;font-weight:800;font-size:14px;transition:background .2s,color .2s}
.jump a b{font-family:"Space Mono";color:var(--b);font-size:12px}.jump a:hover{background:var(--k);color:#fff}
.phero.calm .pword{margin-top:20vh}
.phero.nf .pword{margin-top:14vh}
.phero.nf .ph-cards{width:min(38%,520px)}

/* ===== セクション ===== */
.sec{padding:14vh var(--pad);border-bottom:2px solid var(--k)}
.sec.dark{background:var(--k);color:#fff;border-color:#222}.sec.dark .label{color:#9A9A9A}
/* 事業内容 */
.bz{padding:13vh var(--pad);border-bottom:2px solid var(--k)}
.bz-head{display:flex;align-items:flex-end;gap:2vw;border-bottom:2px solid var(--k);padding-bottom:3vh;margin-bottom:8vh}
.bz-n{font-size:16px;color:var(--b);padding-bottom:1.2vw}
.bz-w{font-size:min(calc((100vw - 2 * var(--pad) - 80px) / var(--w)),16vw);color:var(--k);transition:color .9s .2s}
.js:not(.still) .bz-head .bz-w{color:transparent;-webkit-text-stroke:2px var(--k)}
.js .bz-head.in .bz-w{color:var(--k)}
.bz-grid{display:grid;grid-template-columns:5fr 7fr;gap:6vw;align-items:start}
.bz-side{position:sticky;top:calc(var(--hd) + 30px)}
.bz-side h2{font-weight:900;font-size:clamp(30px,3.3vw,50px);line-height:1.3;letter-spacing:-.01em}
.bz-main>p{font-size:17px;line-height:2.05;margin-bottom:16px}
.h4{font-weight:900;font-size:21px;margin:8vh 0 18px;padding-top:16px;border-top:2px solid var(--k);display:flex;gap:12px;align-items:baseline}
.h4::before{content:"";width:12px;height:12px;background:var(--b);flex:none;transform:translateY(-2px)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;background:var(--k);border:2px solid var(--k);margin:28px 0 6px}
.fact{background:#fff;padding:20px 22px}.fact dt{font-family:"Space Mono","Noto Sans JP",monospace;font-weight:700;font-size:12px;color:var(--b);letter-spacing:.08em;margin-bottom:6px}
.fact dd{font-weight:900;font-size:20px;line-height:1.5}
.facts.big .fact{padding:28px 26px}.facts.big .fact dd{font-size:22px}
.flow{list-style:none;counter-reset:fl;border-top:1.5px solid #ccc}
.flow li{counter-increment:fl;display:grid;grid-template-columns:76px 1fr;column-gap:14px;padding:18px 0;border-bottom:1.5px solid #ccc;align-items:baseline}
.flow li::before{content:counter(fl,decimal-leading-zero);grid-row:span 2;font-family:Archivo;font-weight:900;font-stretch:85%;font-size:44px;line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--b)}
.flow strong{font-weight:900;font-size:18px}.flow span{font-size:16px;line-height:1.85}
.dots{list-style:none}.dots li{position:relative;padding:7px 0 7px 22px;font-size:16.5px;line-height:1.8}
.dots li::before{content:"";position:absolute;left:0;top:1.05em;width:9px;height:9px;background:var(--b)}
.gfx-sub{margin-top:14vh;padding-top:10vh;border-top:2px solid var(--k)}
/* グラフィック作例 */
.gfx{padding:14vh var(--pad);border-top:2px solid var(--k)}
.gnote{font-size:12px;letter-spacing:.1em;margin-top:16px;color:#555}
.gfx-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px}.gf.g1,.gf.g4{grid-column:span 5}.gf.g2,.gf.g3{grid-column:span 7}
.gf .art{border:2px solid var(--k);overflow:hidden;background:#fff;transition:box-shadow .35s,transform .35s}
.gf img{width:100%;height:auto;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.gf:hover .art{box-shadow:14px 14px 0 var(--b);transform:translate(-4px,-4px)}.gf:hover img{transform:scale(1.035)}
.gf figcaption{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--k);padding:14px 2px 12px}.gf .gno{color:var(--b);font-size:13px}.gf b{font-size:18px;font-weight:900}
.gf .gtag{margin-left:auto;font-size:12px;font-weight:700;border:1.5px solid var(--k);border-radius:999px;padding:2px 10px;white-space:nowrap;line-height:1.6}
/* トップの進め方 */
.approach{padding:14vh var(--pad);border-top:2px solid var(--k)}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--k)}
.step{display:grid;grid-template-columns:auto 1fr;column-gap:26px;padding:4.5vh 3vw 4.5vh 0;border-bottom:2px solid var(--k)}
.step:nth-child(odd){border-right:2px solid var(--k)}.step:nth-child(even){padding-left:3vw}
.step .n{grid-row:span 2;font-size:clamp(64px,7vw,110px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--k);transition:color .3s}
.step:hover .n{color:var(--b);-webkit-text-stroke-color:var(--b)}
.step h3{font-weight:900;font-size:clamp(20px,1.8vw,26px);line-height:1.45;margin-bottom:10px}.step p{font-size:16px;line-height:1.9}
.company .co{max-width:none}
/* 実績 */
.sys{display:grid;grid-template-columns:1fr 1fr;gap:12vh 5vw}
.sys-card.wide{grid-column:1/-1}
.shots{position:relative}.shots.has-zoom{margin-bottom:9%}
.shot{border:2px solid var(--k);background:#fff;overflow:hidden}
.shot .bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:2px solid var(--k);background:#fff}
.shot .bar i{width:10px;height:10px;border-radius:50%;border:2px solid var(--k)}.shot .bar i:first-child{background:var(--b);border-color:var(--b)}
.shot .bar span{flex:1;height:12px;margin-left:10px;background:#EDEDED;border-radius:999px;max-width:50%}
.shot img{width:100%;height:auto}
.zoom{position:absolute;right:-3%;bottom:-11%;width:44%;border:2px solid var(--k);background:#fff;box-shadow:10px 10px 0 var(--b);margin:0;transform:translateY(calc(var(--zp,0)*-30px))}
.zoom.tall{width:32%}.zoom img{width:100%;height:auto}
.sys-card.wide .zoom{width:40%}
.sys-txt{margin-top:34px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline}
.sys-n{font-size:14px;color:var(--b);grid-row:span 3}
.sys-txt .tag{font-size:12px;letter-spacing:.1em;color:#555}
.sys-txt h3{font-weight:900;font-size:clamp(22px,2vw,30px);line-height:1.4;margin:4px 0 8px}
.sys-txt p{font-size:16px;line-height:1.9}
.sys-card.wide .sys-txt{max-width:56%}
.shot-note{margin-top:14px;font-size:14px;color:#555}
.ai{position:relative;overflow:hidden}
.bigword{position:absolute;left:0;top:7vh;white-space:nowrap;font-size:14vw;color:transparent;-webkit-text-stroke:1.5px #333;pointer-events:none;transform:translateX(calc(var(--xp,0)*-40vw))}
.ai .sh,.ai-list,.ai-after{position:relative}
.ai .sh{padding-top:14vw}
.ai-list{list-style:none;border-top:1px solid #333;margin-bottom:6vh}
.ai-list li{display:flex;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid #333;font-weight:900;font-size:clamp(22px,2.6vw,40px);line-height:1.35}
.ai-list b{font-size:14px;color:#9A9A9A;flex:none}
.ai-after{font-size:17px}
.tech-list{border-top:2px solid var(--k)}
.tech-row{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:24px 0;border-bottom:2px solid var(--k)}
.tech-row dt{font-weight:900;font-size:18px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}.chips li{border:1.5px solid var(--k);border-radius:999px;padding:4px 14px;font-size:14px;font-weight:700;line-height:1.6}
.tech-note{font-size:14.5px;color:#555;margin-top:10px}
/* 会社概要 */
.info{width:100%;border-collapse:collapse;border-top:2px solid var(--k)}
.info th,.info td{text-align:left;vertical-align:top;padding:24px 0;border-bottom:2px solid var(--k)}
.info th{width:220px;font-weight:800;color:#555;font-size:15px;padding-right:20px}
.info td{font-weight:700;font-size:18px;line-height:1.85}
.info ol{padding-left:1.4em;font-size:16px}.info ol li{padding:2px 0}
.profile{display:grid;grid-template-columns:1fr 1.6fr;gap:6vw;align-items:start}
.who{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--k);padding-top:22px}
.who span{font-weight:800;font-size:15px}.who b{font-weight:900;font-size:clamp(44px,5.6vw,88px);line-height:1.1;letter-spacing:.02em}
.who .en{color:var(--b);font-size:12px;letter-spacing:.2em}
.pr-body p{font-size:17px;line-height:2.05;margin-bottom:18px}
/* お問い合わせ */
.mailcard{position:relative;overflow:hidden;isolation:isolate;background:var(--b);color:#fff;padding:9vh 5vw 8vh;border:2px solid var(--k)}
.mc-ink{position:absolute;z-index:-1;right:-6%;top:-20%;width:min(46vw,620px);mix-blend-mode:multiply;opacity:.85}
.mailcard .lbl{font-size:13px;letter-spacing:.14em;margin-bottom:22px}
.mc-mail{display:inline-block;font-family:Archivo;font-weight:900;font-stretch:90%;font-size:clamp(26px,4.6vw,72px);line-height:1.15;border-bottom:4px solid #fff;padding-bottom:6px;white-space:nowrap}
.mc-mail:hover{border-bottom-color:transparent}
.mc-sub{margin-top:22px;font-size:16px;font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin-top:10vh}
.box{border-top:2px solid var(--k);padding-top:22px}.box h2,.box h3{font-weight:900;font-size:clamp(22px,2vw,28px);margin-bottom:16px;line-height:1.4}
/* プライバシー */
.prose{max-width:820px}
.prose>p{font-size:16.5px;line-height:2.05;margin-bottom:14px}
.prose h2{display:flex;gap:16px;align-items:baseline;font-weight:900;font-size:clamp(21px,2vw,26px);margin:8vh 0 18px;padding-top:18px;border-top:2px solid var(--k)}
.prose h2 .mono{font-size:14px;color:var(--b)}
/* 404 */
.nf .ph-low h1{font-size:clamp(30px,3.6vw,56px)}

@media (max-width:1080px){
  .sys-card.wide .sys-txt{max-width:none}
}
@media (max-width:860px){
  .hero-note{display:none}
  .ph-cards,.phero.nf .ph-cards{width:auto;left:var(--pad);right:var(--pad);gap:8px;padding-top:calc(5vh + 40px)}
  .pword{margin-top:30vh}
  .phero.calm .pword,.phero.nf .pword{margin-top:26vh}
  .crumb{display:none}
  .ph-low{grid-template-columns:1fr;gap:12px;padding:4vh var(--pad) 6vh}
  .ph-low .lead{font-size:16px}
  .ph-low::after{top:-24px}
  .mq-t{font-size:20px}
  .sec,.bz,.gfx,.approach{padding:10vh var(--pad)}
  .bz-head{margin-bottom:5vh;gap:10px}
  .bz-grid{grid-template-columns:1fr;gap:5vh}
  .bz-side{position:relative;top:0}
  .bz-main>p{font-size:16px;line-height:1.95}
  .flow li{grid-template-columns:52px 1fr}.flow li::before{font-size:32px}
  .gfx-grid{grid-template-columns:1fr;gap:34px}.gf.g1,.gf.g2,.gf.g3,.gf.g4{grid-column:auto}.gf b{font-size:16px}.gf figcaption{gap:10px;flex-wrap:wrap}
  .steps{grid-template-columns:1fr}.step,.step:nth-child(even){padding:28px 0;border-right:0}.step:nth-child(odd){border-right:0}
  .sys{grid-template-columns:1fr;gap:10vh}
  .zoom{right:-2%;bottom:-14%}
  .tech-row{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .info th,.info td{display:block;width:auto;padding:0;border:0}
  .info tr{display:block;padding:16px 0;border-bottom:2px solid var(--k)}
  .info th{margin-bottom:4px}.info td{font-size:16.5px}
  .profile{grid-template-columns:1fr;gap:4vh}
  .pr-body p{font-size:16px;line-height:1.95}
  .mailcard{padding:6vh 6vw}
  .mc-mail{font-size:5vw;border-bottom-width:3px}
  .mailcard .mc-ink{opacity:.5}
  .mc-ink{width:90vw;right:-30vw;top:auto;bottom:-20%}
  .two{grid-template-columns:1fr;gap:6vh;margin-top:7vh}
  .ai-list li{gap:14px}
  .btn{font-size:15px;padding:12px 22px}
}
.still .pn-w,html:not(.js) .pn-w{color:var(--k)}
main{overflow-x:clip}.works{overflow:hidden}
p,h1,h2,h3,li,dd,td{text-wrap:pretty}
.cta-ink{top:auto;bottom:-16%;right:-8%;width:min(44vw,680px)}
@media (min-width:861px){.ph-low{grid-template-columns:minmax(0,1.25fr) 1fr}}
@media (max-width:860px){.ph-low::after{top:auto;bottom:10px}}
.phero.calm .ph-low h1{font-size:clamp(32px,4vw,62px)}

/* ===== お問い合わせフォーム ===== */
.cf-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:5vw;align-items:start;margin-bottom:12vh}
.cf-side{position:sticky;top:calc(var(--hd) + 24px)}
.cf-h{font-weight:900;font-size:clamp(34px,4vw,60px);line-height:1.12;letter-spacing:-.02em;margin:14px 0 20px}
.cf-lead{font-size:15px;line-height:1.9}.cf-lead strong{font-weight:900;word-break:break-all}
.cf-steps{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px;font-size:12px;letter-spacing:.06em}
.cf-steps li{border:2px solid var(--k);border-radius:999px;padding:6px 12px 6px 6px;display:flex;align-items:center;gap:8px;font-weight:700}
.cf-steps span{background:var(--k);color:#fff;border-radius:999px;padding:2px 7px;font-size:11px}
.cf-steps li:last-child span{background:var(--b)}
.cf-alt{margin-top:22px;font-size:14px}
.cf-main{position:relative;min-width:0}
.cform{border:2px solid var(--k);background:#fff;padding:clamp(22px,3.2vw,48px);box-shadow:10px 10px 0 var(--k)}
.cf-legend{font-size:13px;margin-bottom:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.cf-row{margin:0 0 24px;min-width:0}
fieldset.cf-row{border:0;padding:0}
.cf-l{display:flex;align-items:center;gap:10px;font-weight:900;font-size:15px;margin-bottom:10px;padding:0}
.cf-tag{display:inline-block;font-size:11px;font-weight:700;line-height:1;padding:5px 9px;border-radius:999px;background:var(--g);color:var(--k);letter-spacing:.04em}
.cf-tag.req{background:var(--b);color:#fff}
.cf-in{display:block;width:100%;font:inherit;font-size:17px;line-height:1.6;color:var(--k);background:#fff;border:2px solid var(--k);border-radius:14px;padding:13px 16px;transition:box-shadow .15s,border-color .15s;-webkit-appearance:none;appearance:none}
.cf-in::placeholder{color:#9a9a9a}
.cf-in:hover{box-shadow:4px 4px 0 var(--g)}
.cf-in:focus{outline:3px solid var(--k);outline-offset:3px;border-color:var(--k);box-shadow:5px 5px 0 var(--k)}
.cf-ta{min-height:200px;resize:vertical}
.cf-in[aria-invalid=true]{border-color:#D7261E;box-shadow:5px 5px 0 #D7261E22}
.cf-err{margin-top:8px;color:#C21E17;font-size:14px;font-weight:700;display:flex;gap:6px;align-items:flex-start}
.cf-err::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:#C21E17;color:#fff;font-size:12px;line-height:18px;text-align:center;font-weight:900;margin-top:2px}
.cf-err[hidden]{display:none}
.cf-sub{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.cf-sub .cf-err{margin-right:auto}
.cf-count{margin-top:8px;margin-left:auto;font-size:12px;color:#666;white-space:nowrap}.cf-count.over{color:#C21E17}
.cf-pills{display:flex;flex-wrap:wrap;gap:10px}
.cf-pill{position:relative;cursor:pointer}
.cf-pill input{position:absolute;opacity:0;width:1px;height:1px}
.cf-pill span{display:inline-block;border:2px solid var(--k);border-radius:999px;padding:11px 20px;font-weight:700;font-size:15px;line-height:1.4;transition:background .15s,color .15s}
.cf-pill:hover span{background:var(--g)}
.cf-pill input:checked+span{background:var(--k);color:#fff}
.cf-pill input:checked+span::before{content:"";display:inline-block;width:.5em;height:.5em;background:var(--b);border-radius:50%;margin-right:.5em;vertical-align:.1em}
.cf-pill input:focus-visible+span{outline:3px solid var(--k);outline-offset:3px}
.cf-agree{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px;cursor:pointer;flex-wrap:wrap}
.cf-agree input{position:absolute;opacity:0;width:1px;height:1px}
.cf-box{flex:none;width:26px;height:26px;border:2px solid var(--k);border-radius:8px;background:#fff;display:grid;place-items:center;transition:background .15s}
.cf-agree input:checked+.cf-box{background:var(--b);border-color:var(--b)}
.cf-agree input:checked+.cf-box::after{content:"";width:11px;height:6px;border:solid #fff;border-width:0 0 3px 3px;transform:translateY(-2px) rotate(-45deg)}
.cf-agree input:focus-visible+.cf-box{outline:3px solid var(--k);outline-offset:3px}
.cf-agree input[aria-invalid=true]+.cf-box{border-color:#D7261E}
.cf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px;padding-top:26px;border-top:2px solid var(--k)}
.cf-submit{display:inline-flex;align-items:center;gap:14px;font:inherit;font-weight:900;font-size:clamp(18px,1.6vw,22px);background:var(--k);color:#fff;border:2px solid var(--k);border-radius:999px;padding:18px 34px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.cf-submit:hover{background:#fff;color:var(--k);border-color:var(--k)}
.cf-submit:hover .cf-arr{transform:translateX(5px)}
.cf-submit:focus-visible{outline:3px solid var(--k);outline-offset:4px}
.cf-arr{font-family:Archivo;transition:transform .2s}
.cf-spin{display:none;width:18px;height:18px;border:3px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:cfspin .8s linear infinite}
@keyframes cfspin{to{transform:rotate(360deg)}}
.cform.is-sending .cf-submit{background:#555;border-color:#555;cursor:progress}
.cform.is-sending .cf-arr{display:none}.cform.is-sending .cf-spin{display:inline-block}
.cf-status{font-size:14px;font-weight:700}
.cf-msg{display:none;border:2px solid var(--k);padding:clamp(24px,3.2vw,44px);margin-bottom:28px;background:#fff}
.cf-msg:focus{outline:none}
.cf-msg-h{font-weight:900;font-size:clamp(20px,2vw,26px);margin-bottom:12px}
.cf-msg p+p{margin-top:10px}.cf-msg .btns{margin-top:20px}
.cf-small{font-size:13px;color:#555}
.cf-fail{border-color:#C21E17;box-shadow:8px 8px 0 #C21E17}.cf-fail .cf-msg-h{color:#C21E17}
.cf-mail{background:var(--g);box-shadow:8px 8px 0 var(--b)}
.cf-done{background:var(--b);color:#fff;box-shadow:10px 10px 0 var(--k);overflow:hidden}
.cf-done .label{color:#fff}.cf-done .cf-small{color:#ffffffd0}.cf-done a{color:#fff}
.cf-big{font-family:Archivo;font-weight:900;font-stretch:85%;font-size:clamp(56px,9vw,140px);line-height:.9;letter-spacing:-.02em;margin:14px 0 22px}
.cf-done h3{font-weight:900;font-size:clamp(22px,2.2vw,30px);margin-bottom:10px}
.cf-main.st-failed .cf-fail,.cf-main.st-mail .cf-mail,.cf-main.st-done .cf-done{display:block}
.cf-main.st-done .cform{display:none}
#sent:target,#failed:target{display:block}
#sent:target~.cform{display:none}
.cf-nojs{border:2px dashed var(--k);padding:16px 20px;margin-bottom:20px;font-size:14px;font-weight:700}
html:not(.js) .cf-off .cf-actions{display:none}
.cf-turnstile{min-height:65px}
@media (max-width:860px){
  .cf-wrap{grid-template-columns:1fr;gap:5vh;margin-bottom:9vh}
  .cf-side{position:static}
  .cf-h br{display:none}
  .cf-grid{grid-template-columns:1fr}
  .cform{box-shadow:6px 6px 0 var(--k);padding:22px 18px}
  .cf-pills{flex-direction:column;align-items:stretch}.cf-pill span{display:block}
  .cf-actions{flex-direction:column;align-items:stretch}
  .cf-submit{justify-content:center;width:100%}
  .cf-msg{box-shadow:6px 6px 0 var(--k)}
}
@media (prefers-reduced-motion:reduce){.cf-spin{animation-duration:2s}}
.cf-big{word-spacing:.18em}
.cf-sub{flex-wrap:wrap}.cf-sub .cf-err{order:2;flex-basis:100%;margin-right:0}
/* ご依頼者（個人／法人・団体）のセグメント */
.cf-seg{display:inline-grid;grid-template-columns:1fr 1fr;border:2px solid var(--k);border-radius:999px;padding:4px;gap:4px;background:linear-gradient(var(--k),var(--k)) center/2px 46% no-repeat #fff;min-width:min(100%,420px)}
.cf-seg-i{position:relative;cursor:pointer;display:block}
.cf-seg-i input{position:absolute;opacity:0;width:1px;height:1px}
.cf-seg-i span{display:flex;align-items:center;justify-content:center;gap:.5em;border-radius:999px;padding:12px 22px;font-weight:900;font-size:16px;line-height:1.3;white-space:nowrap;transition:background .15s,color .15s}
.cf-seg-i:hover span{background:var(--g)}
.cf-seg-i input:checked+span{background:var(--k);color:#fff}
.cf-seg-i input:checked+span::before{content:"";width:.55em;height:.55em;background:var(--b);border-radius:50%}
.cf-seg-i input:focus-visible+span{outline:3px solid var(--k);outline-offset:3px}
.cf-who.is-invalid .cf-seg{border-color:#D7261E;box-shadow:5px 5px 0 #D7261E22}
.cf-orgrow[hidden]{display:none}
.cf-orgrow.js-on{border-left:6px solid var(--b);padding-left:18px;animation:cforg .25s ease-out}
@keyframes cforg{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cf-note{margin-top:8px;font-size:13px;color:#555}
.cf-orgrow.js-on .cf-note{display:none}
@media (max-width:860px){.cf-seg{display:grid;width:100%;min-width:0}.cf-seg-i span{padding:12px 10px}.cf-orgrow.js-on{padding-left:14px}}
@media (prefers-reduced-motion:reduce){.cf-orgrow.js-on{animation:none}}
html.js .cf-orgrow:not(.js-on){display:none}
/* contact 左列：PCでついてくる列＋斜めの写真カードと大きな英字（スマホでは出さない） */
.cf-side{position:sticky;top:calc(var(--hd) + 28px);container-type:inline-size}
.cf-visual{position:relative;margin-top:clamp(28px,5vh,56px);padding:0 4% 0 2%}
.cf-card{position:relative;width:100%;margin:0}
.cf-card-in{border:2px solid var(--k);overflow:hidden;aspect-ratio:4/3;background:var(--g)}
.cf-card-in picture{display:block;width:100%;height:100%}
.cf-card-in img{width:100%;height:100%;object-fit:cover}
.cf-card figcaption{position:absolute;top:14px;left:14px;z-index:1;background:var(--k);color:#fff;padding:5px 9px;font-size:10px;letter-spacing:.08em;line-height:1.2}
.cf-hello{position:relative;z-index:2;margin:16px 0 0;text-align:right;font-size:clamp(48px,25cqw,128px);display:flex;flex-direction:column;align-items:flex-end;gap:.04em;pointer-events:none}
.cf-hello span:first-child{color:transparent;-webkit-text-stroke:2px var(--k);margin-right:.55em}
.cf-hello span:last-child{color:var(--k);-webkit-text-stroke:.06em #fff;paint-order:stroke fill}
.cf-hello b{font-weight:inherit;color:var(--b)}
@media (max-height:780px) and (min-width:861px){.cf-card{width:66%}.cf-hello{font-size:clamp(44px,20cqw,104px);margin-top:16px}}
@media (max-width:860px){.cf-side{position:static;container-type:normal}.cf-visual{display:none}}

/* ---------- ロゴ S2b（2026-10-22）：巨大 SPAWN は assets/spawn-word.svg（白フチ込み）。色は白黒だけ ---------- */
.hero-word .hw-svg img{display:block;width:94vw;height:auto;margin:0 auto}
.ft-w{line-height:0;padding:4vw 0 0;overflow:hidden}.ft-w img{display:block;width:94vw;height:auto;margin:0 auto -1.2vw}
.cta .label,.mailcard .label{color:#fff}
.cta-ink,.mc-ink{mix-blend-mode:screen;filter:invert(1);opacity:.22}
/* オープニング：S2b の形を一筆書き（pathLength=1）→ 塗り → 白フチを出してヒーローへ運ぶ */
.i-word{height:auto}
.i-word .s2b-ol{fill-opacity:0}
.i-word .s2b-ink{fill:var(--k);fill-opacity:0;stroke:var(--k);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .75s .75s cubic-bezier(.6,0,.3,1) forwards,fillin2 .3s 1.38s forwards}
@keyframes fillin2{to{fill-opacity:1;stroke-width:0}}
#intro.go .i-word .s2b-ink,#intro.quick .i-word .s2b-ink,.intro-seen #intro .i-word .s2b-ink{animation:none;fill-opacity:1;stroke-dashoffset:0;stroke-width:0}
#intro.go .i-word .s2b-ol,#intro.quick .i-word .s2b-ol,.intro-seen #intro .i-word .s2b-ol{fill-opacity:1}

/* 黒地の上では、フォーカス枠を白に */
.cta :focus-visible,.sec.dark :focus-visible,.works :focus-visible,.mailcard :focus-visible,.sp-menu :focus-visible,.cf-done :focus-visible,.menu-btn[aria-expanded=true]:focus-visible{outline-color:#fff}
/* スマホのメニュー：「プライバシーポリシー」が1行に収まる大きさに */
@media (max-width:420px){.sp-menu a{font-size:23px}}
/* トップのヒーロー SPAWN は今の約65%にして左下に置く（重く見えないよう写真を多く見せる。2026-10-22 決定） */
.hero-word{text-align:left}.hero-word .hw-svg img{width:61vw;margin:0 0 0 var(--pad)}
.scroll{bottom:calc(15vw + 30px)}
@media (max-width:860px){.hero-word .hw-svg img{width:66vw;margin-left:var(--pad)}.scroll{bottom:calc(17vw + 22px)}}
/* ご予算の目安：開発・制作のご相談（「その他」以外）を選んだときだけ出す。会社名欄と同じく左に黒い線 */
.cf-budget[hidden]{display:none}
html.js .cf-budget{border-left:6px solid var(--b);padding-left:18px;animation:cforg .25s ease-out}
html.js .cf-budget .cf-note{margin-top:8px}
html:not(.js) .cf-budget .cf-tag{display:none}
.cf-kinds.is-invalid .cf-pill span{border-color:#D7261E}
@media (max-width:860px){html.js .cf-budget{padding-left:14px}}
@media (prefers-reduced-motion:reduce){html.js .cf-budget{animation:none}}
@keyframes pc-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.js .pc{animation:pc-in .6s cubic-bezier(.22,1,.36,1) both}
.js .pc.c2{animation-delay:.1s}
.js .pc.c3{animation-delay:.2s}
@media (prefers-reduced-motion:reduce){.js .pc{animation:none}}
.still .pc{animation:none}
/* 開発実績：事例ブロック（CASE 01, 02…） */
.case{border-top:2px solid var(--k)}
.case-sys{margin-top:12vh;padding-top:8vh;border-top:1px solid var(--k)}
.case-sh{margin-bottom:7vh}
.case-sh .label{margin-bottom:14px}
.case-h3{font-size:clamp(24px,2.6vw,34px);font-weight:900;line-height:1.3}
/* 開発実績：AIチャットボット搭載バッジ */
.sys-txt .tag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ai-badge{display:inline-block;font-weight:700;font-size:11px;letter-spacing:.08em;line-height:1;color:#fff;background:var(--k);padding:5px 8px 4px;white-space:nowrap}