@charset "UTF-8";
/* s/ash — 全体のスタイル。色は紙・墨と、名刺の水色・ピンク・深い青。顔料の質感は brand-pigment.jpg。
   文字：英字 Archivo（可変幅）、和文 BIZ UDPGothic、記号 JetBrains Mono。 */
:root{
  --paper:#f4f3ec;--paper-2:#e9e8df;--paper-3:#dddcd2;--ink:#111110;--ink-2:#1b1b19;--ink-3:#2a2a27;
  --accent:#69d9ee;--pink:#ff5c84;--blue:#1d44c8;--line:#11111024;--line-d:#ffffff2e;--muted:#5e5e57;--muted-d:#ffffffa8;
  --display:'Archivo','Arial Black',Arial,sans-serif;--jp:'BIZ UDPGothic','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',Meiryo,sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,3.4vw,56px);--head:70px;--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.76,0,.24,1);
  --pigment:url('assets/brand-pigment.jpg');
  color-scheme:light;background:var(--paper);color:var(--ink)
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--head);-webkit-text-size-adjust:100%}
html.case-open,html.menu-open{overflow:hidden}
body{margin:0;font-family:var(--jp);font-size:15px;line-height:1.85;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
ol,ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.ai :focus-visible,.team :focus-visible,.site-footer :focus-visible,.menu :focus-visible,.cf-bar :focus-visible,.cf-teambox :focus-visible,.hero :focus-visible,.cf-zoom :focus-visible{outline-color:var(--accent)}
.pc{display:inline}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:fixed;z-index:400;top:-100px;left:12px;background:var(--ink);color:#fff;padding:12px 16px;font-weight:700}
.skip:focus{top:12px}
[hidden]{display:none!important}
.mark{background:linear-gradient(transparent 58%,var(--accent) 58%);padding:0 .1em}
.hero-copy h1,.hero-lead,.st-ja,.sec-note,.sc-sub,.cf-sub,.cf-summary,.pf-lead,.pf-titles li,.pf-photo figcaption,.cft-text,.cft-detail p,.tp-text,.about-lead,.contact-lead,.ai-body h3,.card-label,.tp-text,.sv-text p,.cf-can li,.cf-process li p,.cf-results li,.pl-copy span,.lv-title span,.ai-foot p,.list-note{word-break:auto-phrase;text-wrap:pretty}

/* ---------- カーソル・進捗・切り替えの帯 ---------- */
.cursor{position:fixed;left:0;top:0;z-index:500;pointer-events:none;opacity:0;transition:opacity .25s}
.has-cursor .cursor{opacity:1}
.cursor-dot{position:fixed;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px #fff;z-index:2;will-change:transform;transition:box-shadow .2s}
.cursor-ring{position:fixed;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);box-shadow:0 0 0 1.5px #ffffffcc,inset 0 0 0 1.5px #ffffffcc;display:flex;align-items:center;justify-content:center;will-change:transform;transition:width .2s var(--ease),height .2s var(--ease),left .2s var(--ease),top .2s var(--ease),border-radius .2s,background .2s,border-color .2s}
.cursor-label{font:800 11px/1 var(--display);font-stretch:118%;letter-spacing:.08em;color:var(--ink);opacity:0;transition:opacity .15s;white-space:nowrap}
/* 押せるもの：輪を大きくして水色に */
.cursor.is-link .cursor-ring{width:46px;height:46px;left:-23px;top:-23px;border-color:var(--ink);background:#69d9ee55}
/* ラベル付き（OPEN・PLAY など）：点はポインタの位置に残し、ラベルは右下に札として出す（押す場所を隠さない） */
.cursor.is-label .cursor-dot{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--accent),0 0 0 6.5px var(--ink)}
.cursor.is-label .cursor-ring{left:16px;top:16px;width:auto;height:30px;padding:0 12px 0 11px;border-radius:999px;background:var(--accent);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.cursor.is-label .cursor-label{opacity:1}
.cursor.is-label.flip-x .cursor-ring{translate:calc(-100% - 32px) 0}
.cursor.is-label.flip-y .cursor-ring{top:-46px}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor [data-cursor]{cursor:none}
.has-cursor input,.has-cursor textarea,.has-cursor select,.has-cursor label{cursor:auto}
.progress{position:fixed;left:0;top:0;z-index:70;height:3px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.cut{position:fixed;inset:0;z-index:300;pointer-events:none;visibility:hidden}
.cut.on{visibility:visible;pointer-events:auto}
.cut i{position:absolute;inset:-10vh -30vw;display:block;will-change:clip-path,transform}
.cut-a{background:var(--ink)}
.cut-b{background:var(--blue) var(--pigment) 50% 50%/cover}
.fly{position:fixed;left:0;top:0;z-index:301;pointer-events:none;overflow:hidden;visibility:hidden;background:#0d0d0c}
.fly.on{visibility:visible}
.fly img,.fly video{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 開幕：闇を斜めに切り裂いて、サイトが現れる ----------
   時間の流れはCSSだけで決める（スクリプトの読み込みが遅くても同じ速さで切れる）。
   切り口はロゴの斜線と同じ角度（62.8度）で画面の中心を通す。煙と星の空は intro.js が WebGL で描く。 */
.intro{position:fixed;inset:0;z-index:600;pointer-events:none;overflow:hidden;animation:intro-safety .01s 1.95s forwards}
html:not(.intro-on) .intro{display:none}
.intro.skip{opacity:0;transition:opacity .22s ease}
@keyframes intro-safety{to{visibility:hidden}}
.intro.hold,.intro.hold .intro-half,.intro.hold .intro-blade,.intro.hold .intro-flash,.intro.hold .intro-gash{animation-play-state:paused!important}
.intro-half{position:absolute;inset:0;overflow:hidden;will-change:transform;background:#040406}
.intro-a{clip-path:polygon(-100vw -80px,calc(50vw + (50vh + 80px) * .5137 + .5px) -80px,calc(50vw - (50vh + 80px) * .5137 + .5px) calc(100vh + 80px),-100vw calc(100vh + 80px));animation:half-a 1.05s cubic-bezier(.7,0,.2,1) .6s forwards}
.intro-b{clip-path:polygon(calc(50vw + (50vh + 80px) * .5137 - .5px) -80px,200vw -80px,200vw calc(100vh + 80px),calc(50vw - (50vh + 80px) * .5137 - .5px) calc(100vh + 80px));animation:half-b 1.05s cubic-bezier(.7,0,.2,1) .6s forwards}
@keyframes half-a{0%{transform:none}13%{transform:translate(1.2vh,-2.3vh)}100%{transform:translate(-88vw,-16vh) rotate(-6deg)}}
@keyframes half-b{0%{transform:none}13%{transform:translate(-1.2vh,2.3vh)}100%{transform:translate(88vw,16vh) rotate(-6deg)}}
.intro-sky{position:absolute;inset:0;width:100%;height:100%;display:block;background:radial-gradient(60% 50% at 30% 40%,#141a3c 0%,#14183a00 70%),radial-gradient(50% 45% at 72% 64%,#22103a 0%,#22103a00 70%),#040406}
.intro.gl .intro-sky{background:#040406}
.intro-face{position:absolute;inset:0;display:grid;place-items:center;animation:intro-shake .2s steps(4) .5s}
@keyframes intro-shake{0%{translate:4px -3px}33%{translate:-4px 3px}66%{translate:2px 1px}100%{translate:0 0}}
.intro-face img{width:clamp(150px,19vw,270px);height:auto;opacity:0;filter:drop-shadow(0 0 22px #69d9ee40);animation:intro-logo .4s steps(1) .02s forwards}
@keyframes intro-logo{0%{opacity:0}20%{opacity:.85}32%{opacity:.15}48%{opacity:1}64%{opacity:.6}76%{opacity:1}100%{opacity:1}}
.intro-tag{position:absolute;left:var(--gutter);bottom:clamp(18px,4vh,40px);margin:0;font:600 10px var(--mono);letter-spacing:.22em;color:#ffffff70}
.intro-blade{position:absolute;left:50%;top:50%;width:3px;height:220vmax;margin:-110vmax 0 0 -1.5px;border-radius:3px;background:#fff;box-shadow:0 0 5px #fff,0 0 14px #69d9ee,0 0 38px #69d9ee,0 0 90px #69d9ee99;transform:rotate(27.2deg) scaleY(0);transform-origin:50% 50%;animation:blade .18s cubic-bezier(.8,0,.2,1) .42s forwards,blade-out .5s ease .72s forwards}
@keyframes blade{to{transform:rotate(27.2deg) scaleY(1)}}
@keyframes blade-out{0%{opacity:1}100%{opacity:0;width:1px}}
.intro-flash{position:absolute;inset:0;background:#fff;opacity:0;mix-blend-mode:overlay;animation:intro-flash .4s ease .52s}
@keyframes intro-flash{0%{opacity:0}18%{opacity:.6}100%{opacity:0}}
.intro-stage{position:absolute;inset:0}
.intro-gash{position:absolute;left:50%;top:50%;width:0;height:170vmax;translate:-50% -50%;rotate:27.2deg;background:var(--blue) var(--pigment) 50% 50%/cover;opacity:0;animation:intro-gash 1.1s cubic-bezier(.7,0,.2,1) .6s forwards}
@keyframes intro-gash{0%{width:0;opacity:1}35%{width:34vmax;opacity:1}100%{width:60vmax;opacity:0}}
html.intro-on .hero-copy{animation-delay:.95s}
html.intro-on .hero-type{animation:intro-in .9s ease .75s both}
html.intro-on .hero-facts{animation:intro-in .9s ease 1.1s both}
@keyframes intro-in{from{opacity:0}to{opacity:1}}

/* ---------- ヘッダー ---------- */
.site-header{position:fixed;inset:0 0 auto;height:var(--head);z-index:60;display:flex;align-items:center;gap:clamp(14px,2vw,30px);padding:0 var(--gutter);color:#fff;pointer-events:none;transition:background .35s,color .35s,border-color .35s}
.site-header>*{pointer-events:auto}
.site-brand{display:flex;align-items:center;gap:14px;flex:none;height:100%}
.site-brand img{height:50px;width:auto}
.logo-ink{display:none!important}
.site-header.solid .logo-ink{display:block!important}.site-header.solid .logo-paper{display:none!important}
.site-header.solid.on-dark .logo-ink{display:none!important}.site-header.solid.on-dark .logo-paper{display:block!important}
.brand-name{font-size:11px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.gnav{display:flex;gap:clamp(14px,1.8vw,30px);margin-left:auto}
.gnav a,.head-cta{display:flex;flex-direction:column;line-height:1.15;position:relative;padding:6px 0}
.gnav b,.head-cta b{font:800 13px/1 var(--display);font-stretch:118%;letter-spacing:.02em;white-space:nowrap}
.gnav span,.head-cta span{font:10px/1.4 var(--jp);opacity:.75;margin-top:4px;white-space:nowrap}
.gnav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.gnav a:hover:after,.gnav a.current:after{transform:scaleX(1);transform-origin:left}
.head-cta{border:1.5px solid currentColor;padding:7px 14px}
.head-cta:hover{background:#fff;color:#000}
.motion-btn{display:flex;align-items:center;gap:8px;font:600 10px var(--mono);letter-spacing:.08em;padding:8px 2px}
.motion-btn i{width:26px;height:14px;border:1.5px solid currentColor;border-radius:9px;position:relative;flex:none}
.motion-btn i:after{content:'';position:absolute;top:2px;left:13px;width:7px;height:7px;border-radius:50%;background:currentColor;transition:left .3s}
.motion-btn[aria-pressed=true] i:after{left:2px}
.motion-btn span{white-space:nowrap}
.menu-btn{display:none;align-items:center;gap:10px;font:800 13px var(--display);font-stretch:118%;padding:10px 0}
.menu-btn i{width:26px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;transition:transform .35s}
.menu-btn[aria-expanded=true] i{transform:rotate(-45deg) scaleY(.2)}
.site-header.solid{background:#f4f3ecf2;color:var(--ink);border-bottom:1px solid var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header.solid .head-cta:hover{background:var(--ink);color:#fff}
.site-header.solid.on-dark{background:#111110f2;color:#fff;border-bottom-color:#ffffff40}
.site-header.solid.on-dark .head-cta:hover{background:#fff;color:var(--ink)}

/* メニュー（スマホ） */
.menu{position:fixed;inset:0;z-index:55;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--head) + 20px) var(--gutter) 30px;overflow:auto}
.menu:before{content:'';position:absolute;width:42vmax;height:160vh;left:58%;top:-30vh;background:var(--blue) var(--pigment) 50% 50%/cover;transform:rotate(22deg);opacity:.85;pointer-events:none}
.menu nav{display:flex;flex-direction:column;gap:0;position:relative}
.menu nav a{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;font:900 clamp(40px,12vw,104px)/.95 var(--display);font-stretch:112%;letter-spacing:-.04em;padding:5px 0;opacity:0;transform:translateY(40px);animation:menu-in .6s var(--ease) forwards}
.menu nav a small{font:600 11px var(--mono);letter-spacing:.06em;color:var(--accent);align-self:flex-start;padding-top:10px}
.menu nav a span{font:700 13px var(--jp);letter-spacing:.05em;opacity:.7;white-space:nowrap}
.menu nav a:nth-child(2){animation-delay:.04s}.menu nav a:nth-child(3){animation-delay:.08s}.menu nav a:nth-child(4){animation-delay:.12s}.menu nav a:nth-child(5){animation-delay:.16s}.menu nav a:nth-child(6){animation-delay:.2s}.menu nav a:nth-child(7){animation-delay:.24s}
.menu-foot{position:relative;margin-top:30px;display:flex;justify-content:space-between;align-items:center;gap:16px;font:11px var(--mono);border-top:1px solid #ffffff40;padding-top:16px}
@keyframes menu-in{to{opacity:1;transform:none}}

/* ---------- ヒーロー ---------- */
.hero{position:relative;min-height:max(100svh,640px);background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 28% 88%,#111110f2 0%,#1111109c 40%,#11111024 72%,#11111000 100%),linear-gradient(180deg,#111110cc 0%,#11111000 24%)}
.hero-wall{position:absolute;inset:-25% -35% -25% -15%;z-index:0;perspective:1300px;pointer-events:none}
.wall-plane{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.6vw,24px);transform:rotateX(50deg) rotateZ(-22deg) translate3d(calc(var(--mx,0) * -40px),calc(var(--my,0) * -30px),0);transform-style:preserve-3d;transition:transform .9s var(--ease)}
.wall-row{display:flex;gap:clamp(12px,1.6vw,24px);width:max-content;animation:wall-x var(--dur,70s) linear infinite;will-change:transform}
.wall-row.rev{animation-direction:reverse}
.wall-row img{height:clamp(120px,17vw,300px);aspect-ratio:16/10;width:auto;object-fit:cover;display:block;filter:saturate(.9) brightness(.8) contrast(1.05);box-shadow:0 30px 50px -20px #000c;background:#222}
@keyframes wall-x{to{transform:translate3d(-50%,0,0)}}
.hero-slash{position:absolute;z-index:1;width:clamp(150px,22vw,380px);height:190%;left:58%;top:-45%;background:var(--blue) var(--pigment) 40% 50%/cover;opacity:.92;mix-blend-mode:screen;animation:slash-sway 11s ease-in-out infinite alternate;pointer-events:none}
@keyframes slash-sway{0%{transform:translate3d(-6vw,0,0) rotate(21deg)}100%{transform:translate3d(6vw,0,0) rotate(30deg)}}
.hero-type{position:absolute;inset:var(--head) 0 0;z-index:2;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(10px,3vh,40px);pointer-events:none;mix-blend-mode:difference;color:#fff;overflow:hidden}
.ht-skew{transform:skewX(var(--skew,0deg));will-change:transform}
.ht-row{display:flex;width:max-content;white-space:nowrap;animation:ht-x var(--dur,30s) linear infinite;will-change:transform}
.ht-row.rev{animation-direction:reverse}
.ht-row span{display:inline-block;font:900 clamp(62px,12.4vw,250px)/.8 var(--display);letter-spacing:-.045em;padding-right:.18em;font-stretch:var(--fs,100%)}
.ht-row.wide{--fs:125%}.ht-row.narrow{--fs:68%}
.ht-row .ht-s{color:var(--accent);font-stretch:100%}
.ht-row:nth-child(2n) .ht-s{color:var(--pink)}
.ht-row .ht-w{transform-origin:50% 60%;animation:ht-breathe 3.6s cubic-bezier(.45,0,.55,1) infinite alternate}
.ht-row .ht-w:nth-of-type(4n+2){animation-delay:-1.2s}.ht-row .ht-w:nth-of-type(4n+3){animation-delay:-2.4s}
@keyframes ht-x{to{transform:translate3d(-50%,0,0)}}
@keyframes ht-breathe{0%{transform:scaleX(.84) skewX(0)}100%{transform:scaleX(1.1) skewX(-6deg)}}
.hero-copy{position:absolute;z-index:4;left:var(--gutter);bottom:clamp(22px,7vh,72px);width:min(680px,calc(100% - 2 * var(--gutter)));background:var(--paper);color:var(--ink);padding:clamp(20px,2.4vw,32px);box-shadow:12px 12px 0 var(--accent);animation:copy-in 1s var(--ease) .25s both}
@keyframes copy-in{from{opacity:0;transform:translateY(40px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
.hero-kicker{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:600 11px var(--mono);letter-spacing:.08em}
.hero-kicker span{background:var(--ink);color:var(--paper);padding:3px 8px;font-family:var(--display);font-weight:900;letter-spacing:-.02em;font-size:13px}
.hero-kicker em{font-style:normal}
.hero-copy h1{font:700 clamp(20px,2.2vw,31px)/1.5 var(--jp);letter-spacing:.01em;margin:0 0 12px}
.hero-lead{margin:0 0 20px;font-size:clamp(14px,1.1vw,16px);line-height:1.9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary,.btn-ghost,.btn-line{display:inline-flex;align-items:center;gap:14px;padding:13px 20px;font-weight:700;font-size:14px;transition:transform .25s,box-shadow .25s,background .25s,color .25s}
.btn-primary{background:var(--ink);color:#fff;box-shadow:6px 6px 0 var(--pink)}
.btn-primary:hover{box-shadow:9px 9px 0 var(--pink)}
.btn-ghost{border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--accent)}
.btn-line{border:1.5px solid currentColor}
.btn-line:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.hero-facts{position:absolute;z-index:4;right:var(--gutter);bottom:clamp(22px,7vh,72px);display:flex;gap:clamp(18px,3vw,46px);margin:0}
.hero-facts div{display:flex;flex-direction:column-reverse}
.hero-facts dt{font:600 10px var(--mono);letter-spacing:.12em;opacity:.8}
.hero-facts dd{margin:0;font:900 clamp(34px,4.2vw,64px)/.9 var(--display);font-stretch:112%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hero.off .wall-row,.hero.off .ht-row,.hero.off .ht-w,.hero.off .hero-slash{animation-play-state:paused}

/* ---------- セクション見出し ---------- */
.section-head{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'no title' 'no note';column-gap:clamp(14px,2vw,30px);align-items:end;padding:clamp(70px,10vw,140px) var(--gutter) clamp(22px,3vw,40px);position:relative}
.sec-no{grid-area:no;align-self:start;margin:0;font:600 12px var(--mono);letter-spacing:.1em;border:1.5px solid currentColor;padding:4px 8px;margin-top:.6em;white-space:nowrap}
.sec-title{grid-area:title;margin:0;display:flex;flex-direction:column;gap:12px}
.st-en{font:900 clamp(46px,9.2vw,172px)/.84 var(--display);font-stretch:118%;letter-spacing:-.055em;text-transform:uppercase;display:block;overflow-wrap:anywhere}
.st-ja{font:700 clamp(15px,1.4vw,20px)/1.5 var(--jp);letter-spacing:.04em}
.sec-note{grid-area:note;margin:14px 0 0;font-size:13px;color:var(--muted);max-width:62ch}
.on-dark .sec-note{color:var(--muted-d)}
.split .ch{display:inline-block;transform:translateY(105%);font-stretch:62%;opacity:0;transition:transform 1s var(--ease),font-stretch 1.2s var(--ease),opacity .6s;transition-delay:calc(var(--i) * 28ms)}
.split .sp{display:inline-block;width:.24em}
.split .w{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.split.in .ch{transform:none;font-stretch:118%;opacity:1}
[data-proximity] .pch{display:inline;font-stretch:var(--px-w,inherit);font-weight:var(--px-g,inherit);transition:font-stretch .25s,font-weight .25s}

/* ---------- WORKS：表示の切り替えと絞り込み ---------- */
.works{position:relative;background:var(--paper)}
.works-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2vw,28px);align-items:center;padding:14px var(--gutter);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.view-switch{display:flex;border:1.5px solid var(--ink);align-self:start;min-height:58px}
.view-switch button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:9px 16px;min-width:92px;line-height:1.1;position:relative;isolation:isolate;transition:color .3s}
.view-switch button+button{border-left:1.5px solid var(--ink)}
.view-switch button:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease)}
.view-switch button[aria-selected=true]{color:#fff}
.view-switch button[aria-selected=true]:before{transform:scaleY(1)}
.view-switch button:hover:not([aria-selected=true]){background:var(--accent)}
.view-switch b{font:900 15px var(--display);font-stretch:118%;letter-spacing:-.01em}
.view-switch span{font:10px var(--jp);opacity:.75;margin-top:3px}
.filters{display:flex;flex-direction:column;gap:6px;min-width:0}
.filter-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;min-width:0}
.fr-label{font:700 11px var(--jp);color:var(--muted);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px;padding:2px 0;min-width:0}
.chip,.chip-more{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 10px;border:1px solid var(--ink);font:700 12px/1.2 var(--jp);white-space:nowrap;transition:background .2s,color .2s,opacity .2s}
.chip-more{border-style:dashed;background:var(--paper);gap:5px}
.chip-more b{font:700 11px var(--mono);letter-spacing:.02em}
.chip-more span{font-size:11px}
.chip-more:hover{background:var(--ink);color:#fff}
.chips.open .chip-more{border-style:solid}
.chip sup{font:600 9px var(--mono);opacity:.7;top:0}
.chip:hover{background:var(--accent)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.chip[aria-pressed=true] sup{color:var(--accent);opacity:1}
.chip.zero{opacity:.32}
.chip.zero:hover{opacity:.7}
.works-count{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.works-count output{font:900 clamp(34px,3.6vw,56px)/.9 var(--display);font-stretch:112%;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.works-count span{font:600 10px var(--mono);letter-spacing:.1em}
.filter-clear{font:700 12px var(--jp);border-bottom:1.5px solid var(--ink);padding:4px 0;margin-left:6px}
.works-views{position:relative;isolation:isolate;overflow:hidden}
.works-views:after{content:'';position:absolute;inset:0 -10%;z-index:30;pointer-events:none;background:var(--blue) var(--pigment) 50% 50%/cover;transform:translateX(-130%) skewX(-14deg);visibility:hidden}
.works-views.wipe:after{visibility:visible;animation:views-wipe .72s var(--ease-io) forwards}
@keyframes views-wipe{0%{transform:translateX(-130%) skewX(-14deg)}100%{transform:translateX(130%) skewX(-14deg)}}
.works-empty{padding:60px var(--gutter);font-weight:700;font-size:15px}
.works-empty button{border-bottom:2px solid var(--ink);font-weight:700;margin-left:8px}

/* ---------- WORKS：立体（LAYERS） ---------- */
.view-layers{display:grid;grid-template-columns:clamp(220px,19vw,300px) minmax(0,1fr)}
.view-layers>*{min-width:0}
.plist{border-right:1px solid var(--ink);padding:18px 0 18px var(--gutter);position:relative}
.plist-items{max-height:calc(clamp(460px,62svh,720px) + 150px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;padding-right:16px}
.pl-item{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) 16px;gap:8px;align-items:start;text-align:left;padding:11px 0;border-top:1px solid var(--line);position:relative;transition:padding .35s var(--ease)}
.pl-item:hover{padding-left:6px}
.pl-no{font:600 10px var(--mono);padding-top:3px}
.pl-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.pl-copy strong{font:800 13px/1.3 var(--display);font-stretch:112%;letter-spacing:-.01em;text-transform:uppercase}
.pl-copy span{font:700 12px/1.5 var(--jp)}
.pl-copy small{font-size:10px;color:var(--muted)}
.pl-arrow{opacity:0;transform:translate(-6px,6px);transition:all .35s var(--ease);font-weight:700}
.pl-item:hover .pl-arrow,.pl-item[aria-current=true] .pl-arrow{opacity:1;transform:none}
.pl-item[aria-current=true]{border-top-color:var(--ink)}
.pl-item[aria-current=true] .pl-no{background:var(--accent);padding:3px 4px;align-self:start;justify-self:start}
.pl-item[aria-current=true]:before{content:'';position:absolute;left:-12px;top:12px;bottom:12px;width:4px;background:var(--ink)}
.stage-col{min-width:0;padding:18px var(--gutter) 18px clamp(10px,1.4vw,22px);position:relative}
.stage{position:relative;height:clamp(440px,60svh,700px);overflow:hidden;isolation:isolate;touch-action:pan-y}
.ghost{position:absolute;right:-2%;top:0;font:900 clamp(250px,39vw,660px)/.85 var(--display);letter-spacing:-.1em;background:var(--pink) var(--pigment) 48% 50%/cover;color:transparent;-webkit-background-clip:text;background-clip:text;opacity:.85;pointer-events:none;white-space:nowrap;will-change:transform;z-index:-2}
.stage-band{position:absolute;width:125%;height:26px;top:63%;left:-10%;background:var(--accent);transform:rotate(-15deg);animation:band-drift 12s ease-in-out infinite alternate;pointer-events:none;z-index:-1}
@keyframes band-drift{0%{transform:translate3d(-35px,65px,0) rotate(-20deg)}100%{transform:translate3d(35px,-65px,0) rotate(-8deg)}}
.exhibit{position:absolute;inset:0;z-index:1;transition:opacity .36s,transform .65s cubic-bezier(.2,.8,.2,1),filter .4s;transform-origin:50% 75%}
.scene{position:absolute;inset:0;transform-origin:0 0;isolation:isolate}
.stage:after{content:'';position:absolute;inset:0 -20%;background:var(--blue) var(--pigment) 60% 50%/cover;z-index:25;pointer-events:none;transform:translateX(-150%) skewX(-12deg);transition:transform .5s var(--ease-io);opacity:.97}
.stage.changing:after{transform:translateX(0) skewX(-12deg)}
.stage.changing .exhibit{opacity:0;transform:translateX(22%) translateY(100px) rotate(-16deg) scale(.64);filter:blur(5px)}
.stage.changing{pointer-events:none}
.stage-hint{position:absolute;left:0;bottom:6px;z-index:5;margin:0;font:11px var(--jp);color:var(--muted);pointer-events:none;display:flex;gap:10px;align-items:center}
.stage-hint span{font:700 10px var(--mono);letter-spacing:.1em;color:var(--ink);background:var(--accent);padding:3px 6px}
.stage-steps{position:absolute;bottom:0;right:0;z-index:30;display:flex;gap:6px}
.stage-steps button{width:44px;height:44px;background:var(--paper);border:1.5px solid var(--ink);font:700 18px var(--display);display:grid;place-items:center;transition:background .2s,transform .2s}
.stage-steps button:hover{background:var(--accent);transform:translateY(-2px)}
/* 面 */
.plane{position:absolute;top:0;left:0;background:#ededE6;box-shadow:0 23px 26px -24px #0009;overflow:hidden;user-select:none;container-type:inline-size;border:1px solid #15151322;cursor:pointer;transition:box-shadow .35s,outline-color .3s;outline:3px solid transparent;outline-offset:-3px;will-change:transform}
.plane:focus-visible{outline-color:var(--accent)}
.plane.hot{box-shadow:0 40px 50px -26px #000c;outline-color:var(--ink)}
.plane-content{height:100%;width:100%;position:relative;overflow:hidden}
.revealing .plane-content{animation:layer-unfold .95s var(--ease) both;animation-delay:calc(var(--layer) * 85ms)}
@keyframes layer-unfold{from{clip-path:inset(0 100% 0 0);opacity:.1;transform:translateY(32px) scale(1.08)}to{clip-path:inset(0);opacity:1;transform:none}}
.layer-label{position:absolute;top:10px;left:10px;z-index:3;font:600 10px var(--mono);letter-spacing:.04em;background:var(--ink);color:#fff;padding:4px 7px}
.layer-tag{position:absolute;top:10px;right:10px;z-index:3;font:700 10px var(--jp);background:var(--paper);color:var(--ink);padding:3px 7px}
.plane-open{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--accent);color:var(--ink);font:800 11px var(--display);font-stretch:112%;letter-spacing:.02em;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .35s var(--ease);pointer-events:none}
.plane.hot .plane-open,.plane:focus-visible .plane-open{opacity:1;transform:none}
.media-wrap .plane-content{background:#0e0e0d}
.media-wrap.tone-light .plane-content{background:#f2f1ea}
.plane-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;transition:transform .8s var(--ease)}
.plane.hot .plane-media{transform:scale(1.04)}
.media-wrap .plane-content:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0000 65%,#0000003a 100%)}
.layer-live{position:absolute;left:10px;bottom:10px;z-index:3;font:600 9px var(--mono);letter-spacing:.1em;color:var(--accent);background:#000b;padding:3px 7px;animation:blink 1.4s steps(2) infinite}
.plane.hot .layer-live{opacity:0}
@keyframes blink{50%{opacity:.35}}
.plane-brain .plane-content{background:radial-gradient(90% 80% at 50% 45%,#16163a 0%,#07070f 70%);color:#fff}
.brain-wrap{position:absolute;inset:0}
.brain-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.brain-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.brain-labels .nl{position:absolute;left:0;top:0;will-change:transform,opacity;transition:opacity .4s}
.brain-labels .nl i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.brain-labels .nl span{position:absolute;left:9px;top:-10px;margin-top:var(--oy,0);white-space:nowrap;font:11px var(--jp);padding:1px 7px;border-radius:9px;background:#05070bcc;border:1px solid currentColor;text-shadow:0 0 8px currentColor}
.brain-labels .nl.flip span{left:auto;right:9px}
.nl.k-issue{color:#ffb531}.nl.k-logic,.nl.k-research{color:#3ef0ff}.nl.k-number{color:#ffd166}.nl.k-say{color:#fff}.nl.k-flag{color:#ff4d6d}.nl.k-decision{color:#5dffb0}.nl.k-person{color:#d7a6ff}.nl.k-memory{color:#a66bff}.nl.k-example{color:#ff3dbe}
.brain-hud{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;pointer-events:none}
.brain-hud b{font:900 clamp(26px,13cqw,64px)/.85 var(--display);font-stretch:112%;letter-spacing:-.05em;display:block}
.brain-state{font:600 9px var(--mono);letter-spacing:.14em;color:var(--accent)}
.brain-line{margin:8px 0 0;font:700 clamp(11px,3.2cqw,15px)/1.6 var(--jp);max-width:36ch;background:#000000a0;padding:6px 9px;border-left:3px solid var(--accent)}
.plane.hot .brain-hud{opacity:0}
.brain-failed .brain-wrap{background:url('assets/works/navi/02-brain.jpg') center/cover}
.text-plane{position:absolute;inset:0;background:var(--accent);color:var(--ink);padding:42px 15px 15px;display:flex;flex-direction:column}
.text-plane h3{font:900 clamp(21px,17cqw,46px)/.88 var(--display);font-stretch:112%;letter-spacing:-.06em;margin:0 0 18px;text-transform:uppercase}
.tp-item{border-top:1px solid #16161570;padding:9px 0}
.tp-item b{font-size:clamp(11px,4.6cqw,15px);line-height:1.5;font-weight:700;display:block}
.tp-item span{font:clamp(8px,3cqw,10px) var(--mono);display:block;margin-top:3px}
.tp-last{font:clamp(8px,3cqw,10px) var(--mono);margin-top:auto;letter-spacing:.02em}
.steps-plane{position:absolute;inset:0;padding:42px 15px 15px;background:var(--paper-3);color:var(--ink)}
.steps-plane h3{font:900 clamp(22px,15cqw,42px)/.9 var(--display);font-stretch:112%;letter-spacing:-.06em;margin:0 0 18px}
.sp-step{border-top:1px solid #a9a99f;padding:8px 0;display:flex;gap:10px;font-size:clamp(11px,4.2cqw,14px);line-height:1.6}
.sp-step i{font:9px var(--mono);color:#55554e;font-style:normal;padding-top:3px}
/* キャプション */
.stage-caption{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:18px 30px;align-items:end;padding:22px 0 6px;border-top:1px solid var(--ink);margin-top:12px}
.sc-head{min-width:0}
.sc-kicker{font:600 11px var(--mono);letter-spacing:.08em;margin-bottom:8px}
.sc-title{font:900 clamp(44px,6.4vw,118px)/.84 var(--display);font-stretch:115%;letter-spacing:-.06em;text-transform:uppercase;overflow-wrap:anywhere;margin:0 0 14px}
.sc-sub{font:700 clamp(14px,1.2vw,17px)/1.7 var(--jp)}
.sc-head.entering{animation:title-enter .75s var(--ease)}
@keyframes title-enter{from{opacity:0;transform:translateY(35px) rotate(3deg);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
.sc-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.sc-tags{display:flex;flex-wrap:wrap;gap:5px}
.sc-tags button,.tag-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border:1px solid var(--ink);font:700 11px/1.4 var(--jp);transition:background .2s,color .2s;background:transparent}
.sc-tags button:before,.tag-btn:before{content:'#';font:600 10px var(--mono);opacity:.55}
.sc-tags button:hover,.tag-btn:hover{background:var(--ink);color:#fff}
.sc-tags .is-field{border-style:dashed}
.sc-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.case-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:52px;padding:12px 18px 12px 20px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;box-shadow:6px 6px 0 var(--accent);transition:box-shadow .25s,background .25s}
.case-cta i{font-style:normal;font-size:20px;color:var(--accent);transition:transform .3s var(--ease)}
.case-cta:hover{box-shadow:9px 9px 0 var(--accent)}
.case-cta:hover i{transform:translate(3px,-3px)}
.sc-status{font-size:11px;color:var(--muted)}
.layer-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ink)}
.layer-nav button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;min-height:46px;text-align:left;transition:background .2s;min-width:0}
.layer-nav button+button{border-left:1px solid var(--ink)}
.layer-nav button b{font:600 10px var(--mono)}
.layer-nav button span{font:700 10px var(--display);font-stretch:110%;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.layer-nav button:hover,.layer-nav button.hot{background:var(--accent)}

/* ---------- WORKS：カード（GRID） ---------- */
.view-grid{padding:clamp(18px,2.4vw,34px) var(--gutter) clamp(30px,4vw,60px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,28px)}
.card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--ink);isolation:isolate;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .35s;opacity:0;translate:0 30px}
.card.in{opacity:1;translate:none;transition:transform .5s var(--ease),box-shadow .35s,opacity .7s var(--ease),translate .8s var(--ease)}
.card:hover{box-shadow:10px 10px 0 var(--ink)}
.card-hit{position:absolute;inset:0;z-index:2}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0d0d0c;border-bottom:1px solid var(--ink)}
.card-media.tone-light{background:#f2f1ea}
.card-media img,.card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .4s}
.card-media video{opacity:0}
.card.playing .card-media video{opacity:1}
.card:hover .card-media img,.card:hover .card-media video{transform:scale(1.06)}
.card-no{position:absolute;left:10px;top:10px;z-index:1;font:600 10px var(--mono);background:var(--ink);color:#fff;padding:4px 7px}
.card-kind{position:absolute;right:10px;top:10px;z-index:1;font:700 10px var(--jp);background:var(--paper);padding:3px 7px}
.card-body{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;flex:1}
.card-body h3{font:900 clamp(24px,2.2vw,34px)/.9 var(--display);font-stretch:115%;letter-spacing:-.05em;text-transform:uppercase}
.card-label{font:700 13px/1.6 var(--jp)}
.card-meta{font:600 10px var(--mono);color:var(--muted);letter-spacing:.04em}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:10px;position:relative;z-index:3}
.card-tags .tag-btn{font-size:10px;padding:3px 7px}
.card-open{position:absolute;right:12px;bottom:12px;z-index:1;font:900 20px var(--display);transition:transform .3s var(--ease)}
.card:hover .card-open{transform:translate(3px,-3px);color:var(--blue)}

/* ---------- WORKS：一覧（LIST） ---------- */
.view-list{padding:clamp(18px,2.4vw,34px) var(--gutter) clamp(30px,4vw,60px)}
.list-note{font-size:12px;color:var(--muted);margin:0 0 16px;max-width:70ch}
.lv-head,.lv-hit{display:grid;grid-template-columns:62px minmax(0,2.3fr) minmax(0,1.2fr) 92px minmax(0,1.6fr) 36px;gap:16px;align-items:center}
.lv-head{font:600 10px var(--mono);letter-spacing:.08em;padding:0 0 8px;border-bottom:2px solid var(--ink)}
.lv>li{border-bottom:1px solid var(--line)}
.lv-hit{width:100%;text-align:left;padding:15px 0;position:relative;isolation:isolate;transition:padding .35s var(--ease),color .3s}
.lv-hit:before{content:'';position:absolute;inset:0 calc(-1 * var(--gutter));background:var(--ink);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.lv-hit:hover,.lv-hit:focus-visible{color:#fff;padding-left:12px}
.lv-hit:hover:before,.lv-hit:focus-visible:before{transform:scaleY(1);transform-origin:top}
.lv-no{font:600 11px var(--mono)}
.lv-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.lv-title b{font:900 clamp(18px,2vw,32px)/.95 var(--display);font-stretch:110%;letter-spacing:-.04em;text-transform:uppercase}
.lv-title span{font:700 13px/1.5 var(--jp)}
.is-arch .lv-title b{font:700 clamp(14px,1.2vw,17px)/1.5 var(--jp);letter-spacing:0;text-transform:none}
.lv-kind{display:inline-block;font:600 9px var(--mono);letter-spacing:.1em;border:1px solid currentColor;padding:1px 5px;margin-right:6px;vertical-align:2px}
.is-case .lv-kind{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.lv-ind{font-size:12px;line-height:1.6}
.lv-year{font:600 11px var(--mono)}
.lv-tags{font-size:11px;line-height:1.7;color:var(--muted)}
.lv-hit:hover .lv-tags,.lv-hit:focus-visible .lv-tags{color:#ffffffb8}
.lv-arrow{font:900 20px var(--display);transition:transform .3s}
.lv-hit:hover .lv-arrow{transform:translate(4px,-4px);color:var(--accent)}
.is-arch .lv-arrow{transition:transform .35s var(--ease)}
.is-arch.open .lv-arrow{transform:rotate(45deg)}
.lv-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.is-arch.open .lv-detail{grid-template-rows:1fr}
.lv-detail>div{overflow:hidden}
.lv-detail-in{display:grid;grid-template-columns:62px minmax(0,1.2fr) minmax(0,1fr);gap:16px;padding:4px 0 20px}
.lv-detail-in p{grid-column:2;font-size:14px;line-height:1.9}
.lv-results{grid-column:3;display:flex;flex-direction:column;gap:6px}
.lv-results li{font-weight:700;font-size:13px;line-height:1.6;padding-left:22px;position:relative}
.lv-results li:before{content:'';position:absolute;left:0;top:.55em;width:12px;height:5px;background:var(--pink)}
.lv-results .lr-label{font:600 10px var(--mono);letter-spacing:.08em;color:var(--muted);padding:0}
.lv-results .lr-label:before{display:none}
.hover-preview{position:fixed;left:0;top:0;width:min(420px,32vw);aspect-ratio:16/10;z-index:40;pointer-events:none;opacity:0;transform:translate3d(var(--x,-999px),var(--y,0),0) scale(.85) rotate(var(--r,-3deg));transition:opacity .25s,scale .35s var(--ease);box-shadow:16px 16px 0 var(--accent);background:#111}
.hover-preview.on{opacity:1}
.hover-preview img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 流れる帯 ---------- */
.kinetic-strip{position:relative;background:var(--ink);color:var(--accent);overflow:hidden;padding:17px 0 11px}
.kinetic-strip:before{content:'';position:absolute;top:0;left:0;right:0;height:7px;background:var(--pink) var(--pigment) 50% 67%/cover}
.strip-skew{will-change:transform}
.strip-track{display:flex;width:max-content;animation:tape 24s linear infinite;will-change:transform}
.strip-track>span{font:900 42px/1 var(--display);font-stretch:118%;letter-spacing:-.03em;white-space:nowrap;padding-right:55px}
.strip-track i{font-style:normal;color:var(--pink);font-weight:400;margin:0 30px}
@keyframes tape{to{transform:translateX(-50%)}}
.reading .strip-track{animation-play-state:paused}

/* ---------- AI ---------- */
.ai{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding-bottom:clamp(60px,8vw,120px)}
.ai:before{content:'';position:absolute;width:26vmax;height:220%;left:-8vmax;top:-60%;background:var(--blue) var(--pigment) 30% 50%/cover;transform:rotate(-18deg);opacity:.42;pointer-events:none;animation:slash-sway 16s ease-in-out infinite alternate}
.ai .section-head{z-index:1}
.ai-ticker{position:relative;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);overflow:hidden;padding:10px 0;margin:0 0 clamp(26px,3vw,44px)}
.ai-ticker-track{display:flex;width:max-content;animation:tape 40s linear infinite reverse;font:600 12px var(--mono);letter-spacing:.14em;color:var(--accent)}
.ai-ticker-track span{padding-right:44px;white-space:nowrap}
.ai-ticker-track span i{font-style:normal;color:#fff;opacity:.5;margin-left:44px}
.ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);padding:0 var(--gutter);position:relative;z-index:1}
.ai-item{position:relative;display:flex;flex-direction:column;border:1px solid var(--line-d);background:#151514;transition:border-color .3s,transform .5s var(--ease);opacity:0;translate:0 40px}
.ai-item.in{opacity:1;translate:none;transition:border-color .3s,transform .5s var(--ease),opacity .7s var(--ease),translate .8s var(--ease)}
.ai-item:hover{border-color:var(--accent)}
.ai-item:nth-child(1){grid-column:span 2}
.ai-item:nth-child(1) .ai-media{aspect-ratio:21/10}
.ai-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b0b0a}
.ai-media img,.ai-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ai-media.portrait img,.ai-media.portrait video{object-position:50% 30%}
.ai-item:hover .ai-media img,.ai-item:hover .ai-media video{transform:scale(1.05)}
.ai-no{position:absolute;left:12px;top:12px;z-index:2;font:900 12px var(--display);font-stretch:118%;letter-spacing:.06em;background:var(--accent);color:var(--ink);padding:4px 8px}
.ai-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ai-body h3{font:700 clamp(16px,1.5vw,21px)/1.5 var(--jp)}
.ai-body p{font-size:13px;line-height:1.85;color:var(--muted-d)}
.ai-body .ai-link{margin-top:auto;padding-top:8px;font:800 12px var(--display);font-stretch:112%;letter-spacing:.04em;color:var(--accent)}
.ai-hit{position:absolute;inset:0;z-index:3}
.ai-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:clamp(26px,3vw,44px) var(--gutter) 0;position:relative;z-index:1}
.ai-foot p{font-size:13px;color:var(--muted-d);max-width:60ch}

/* ---------- SERVICES ---------- */
.services{background:var(--paper);position:relative}
.service-list{padding:0 var(--gutter) clamp(60px,8vw,120px)}
.service-list>li{border-top:1px solid var(--ink)}
.service-list>li:last-child{border-bottom:1px solid var(--ink)}
.sv-head{display:grid;grid-template-columns:70px minmax(0,1fr) auto 46px;gap:18px;align-items:center;width:100%;text-align:left;padding:clamp(16px,2.2vw,30px) 0;position:relative;isolation:isolate;transition:color .3s}
.sv-head:before{content:'';position:absolute;inset:0 calc(-1 * var(--gutter));z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.sv-head:hover:before,.sv-item.open .sv-head:before{transform:scaleY(1);transform-origin:top}
.sv-head:hover,.sv-item.open .sv-head{color:#fff}
.sv-no{font:600 12px var(--mono)}
.sv-name{display:flex;flex-direction:column;gap:6px;min-width:0}
.sv-name b{font:900 clamp(28px,5vw,88px)/.86 var(--display);font-stretch:116%;letter-spacing:-.05em;transition:letter-spacing .5s var(--ease),font-stretch .5s var(--ease)}
.sv-head:hover .sv-name b{letter-spacing:-.025em;font-stretch:125%}
.sv-name span{font:700 clamp(13px,1.2vw,16px) var(--jp);letter-spacing:.06em}
.sv-count{font:600 11px var(--mono);white-space:nowrap}
.sv-plus{width:40px;height:40px;border:1.5px solid currentColor;display:grid;place-items:center;font:700 22px var(--display);transition:transform .4s var(--ease)}
.sv-item.open .sv-plus{transform:rotate(45deg);background:var(--accent);color:var(--ink);border-color:var(--accent)}
.sv-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.sv-item.open .sv-body{grid-template-rows:1fr}
.sv-body>div{overflow:hidden}
.sv-inner{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.25fr);gap:18px 28px;padding:24px 0 34px}
.sv-text{grid-column:2;display:flex;flex-direction:column;gap:16px}
.sv-text p{font-size:15px;line-height:2}
.sv-can{display:flex;flex-wrap:wrap;gap:6px}
.sv-can li{font:700 12px/1.4 var(--jp);background:var(--ink);color:#fff;padding:6px 10px}
.sv-can li:nth-child(3n+1){background:var(--accent);color:var(--ink)}
.sv-works{grid-column:3;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;align-content:start}
.sv-works button{display:flex;flex-direction:column;align-items:stretch;text-align:left;border:1px solid var(--ink);background:var(--paper);transition:transform .3s var(--ease),box-shadow .3s}
.sv-works button:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.sv-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--ink);background:#111}
.sv-thumb img,.sv-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-works span{padding:8px 9px;font:700 11px/1.45 var(--jp)}

/* ---------- TEAM ---------- */
.team{background:var(--ink-2);color:#fff;position:relative;overflow:hidden;padding-bottom:clamp(60px,8vw,110px)}
.team:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.team-body{position:relative;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);grid-template-areas:'cases cases' 'net panel';gap:18px clamp(20px,3vw,44px)}
.team-cases{grid-area:cases;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.tc-label{font:700 11px var(--jp);color:var(--muted-d);white-space:nowrap}
.tc-chips{display:flex;flex-wrap:wrap;gap:5px;padding:2px 0}
.tc-chips::-webkit-scrollbar{display:none}
.tc-chips button{flex:none;font:800 11px var(--display);font-stretch:112%;letter-spacing:.02em;border:1px solid var(--line-d);padding:7px 10px;min-height:32px;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.tc-chips button:hover{border-color:var(--accent)}
.tc-chips button[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.team-net{grid-area:net;position:relative;min-height:clamp(520px,50vw,700px)}
.team-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.team-lines line{stroke:#ffffff26;stroke-width:1;transition:stroke .4s,stroke-width .4s,opacity .4s}
.team-lines line.on{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:6 6;animation:dash 1.2s linear infinite}
.team-lines line.dim{opacity:.25}
@keyframes dash{to{stroke-dashoffset:-24}}
.team-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(110px,11vw,150px);aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;z-index:2;box-shadow:0 0 0 10px #69d9ee22,0 0 0 22px #69d9ee12}
.team-core b{font:900 clamp(24px,2.4vw,34px)/.9 var(--display);font-stretch:118%;letter-spacing:-.05em}
.team-core span{font:700 11px var(--jp)}
.team-roles{position:absolute;inset:0}
.role{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:3}
.role button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 9px;border:1px solid var(--line-d);background:#1f1f1d;min-width:clamp(92px,8vw,118px);max-width:150px;text-align:center;transition:background .25s,color .25s,border-color .25s,transform .35s var(--ease),opacity .3s;animation:role-float 6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.role b{font:800 10px var(--display);font-stretch:118%;letter-spacing:.08em;color:var(--accent)}
.role span{font:700 11.5px/1.35 var(--jp)}
.role button:hover,.role.on button{background:var(--accent);color:var(--ink);border-color:var(--accent);transform:scale(1.08)}
.role button:hover b,.role.on button b{color:var(--ink)}
.role.dim button{opacity:.35}
.role[data-group=strategy] button{border-left:3px solid var(--accent)}
.role[data-group=data] button{border-left:3px solid #9bb4ff}
.role[data-group=creative] button{border-left:3px solid var(--pink)}
.role[data-group=tech] button{border-left:3px solid #5dffb0}
.role[data-group=ops] button{border-left:3px solid #ffd166}
.role button:hover,.team-net:hover .role button{animation-play-state:paused}
.role.pick button{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 0 0 3px var(--accent)}
.role.pick button b{color:var(--blue)}
.team-lines line.pick{stroke:#fff;stroke-width:2.4}
@keyframes role-float{from{translate:0 -4px}to{translate:0 4px}}
.team-panel{grid-area:panel;align-self:center;border-top:2px solid #fff;padding-top:16px;min-height:220px}
.tp-kicker{font:600 10px var(--mono);letter-spacing:.1em;color:var(--accent);margin-bottom:8px}
.tp-title{font:900 clamp(26px,2.6vw,40px)/.92 var(--display);font-stretch:115%;letter-spacing:-.05em;margin-bottom:12px;text-transform:uppercase}
.tp-text{font-size:13px;line-height:1.9;color:var(--muted-d);margin-bottom:14px}
.tp-list{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.tp-list li{font:700 11px var(--jp);border:1px solid var(--line-d);padding:4px 8px}
.tp-open{font:800 12px var(--display);font-stretch:112%;letter-spacing:.04em;border-bottom:2px solid var(--accent);padding-bottom:3px}
.team-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
.team-legend span{font:600 10px var(--mono);letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.team-legend i{width:10px;height:10px;display:block}
.partners{position:relative;padding:clamp(40px,5vw,70px) var(--gutter) 0}
.partners-title{display:flex;align-items:baseline;gap:16px;font:700 15px var(--jp);margin-bottom:14px}
.partners-title span{font:900 clamp(26px,3vw,44px)/.9 var(--display);font-stretch:118%;letter-spacing:-.05em}
.partner-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.partner-list li{border-top:1px solid var(--line-d);padding:14px 0;display:flex;flex-direction:column;gap:4px}
.partner-list b{font-size:15px}
.partner-list span{font-size:12px;color:var(--muted-d)}
.partner-list a{border-bottom:1.5px solid var(--accent);align-self:flex-start}
.partner-list a:hover{color:var(--accent)}

/* ---------- PROFILE ----------
   写真は小さく、目元に名刺の青（顔料）の帯を焼き込んだもの。左に写真と名前、右に本文と経歴。 */
.profile{background:var(--paper);position:relative;overflow:hidden}
.profile-grid{display:grid;grid-template-columns:clamp(220px,22vw,300px) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:start;padding:0 var(--gutter) clamp(80px,10vw,140px)}
.pf-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(var(--head) + 24px)}
.pf-photo{position:relative;width:min(100%,232px);margin:0}
.pf-frame{position:relative;display:block}
.pf-photo .pf-portrait{width:100%;height:auto;aspect-ratio:470/588;object-fit:cover;display:block;background:var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(-2deg) scale(1.04);clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-io),transform 1.2s var(--ease)}
.pf-photo.in .pf-portrait{clip-path:inset(-24px);transform:rotate(-2deg)}
/* 口元に猫のポーちゃん（本人の希望）。写真が開いたあとに貼り付く */
.pf-sticker{position:absolute;left:35.7%;top:57.1%;width:35.7%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:3px 3px 0 var(--ink);z-index:1;opacity:0;transform:rotate(8deg) scale(.3);transition:transform .55s cubic-bezier(.3,1.6,.5,1) .95s,opacity .15s .95s}
.pf-photo.in .pf-sticker{opacity:1;transform:rotate(8deg)}
.pf-photo figcaption{margin-top:14px;font:700 11px/1.5 var(--jp);color:var(--muted);letter-spacing:.02em}
.pf-id{display:flex;flex-direction:column;gap:10px}
.pf-name{font:700 clamp(22px,2.1vw,30px)/1.3 var(--jp);letter-spacing:.06em;display:flex;flex-direction:column;gap:4px}
.pf-name small{font:800 11px var(--display);font-stretch:118%;letter-spacing:.14em;color:var(--muted)}
.pf-titles{display:flex;flex-direction:column;gap:6px}
.pf-titles li{font:700 13px/1.6 var(--jp)}
.pf-likes{margin:0;border-top:2px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.pf-likes dt{font:600 10px var(--mono);letter-spacing:.12em}
.pf-likes dd{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.pf-likes dd span{font:700 12px var(--jp);background:var(--ink);color:#fff;padding:5px 10px;border-radius:999px}
.pf-likes dd span:nth-child(2){background:var(--accent);color:var(--ink)}
.pf-likes dd span:nth-child(3){background:var(--pink);color:var(--ink)}
.pf-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.pf-links a{font-weight:700;font-size:14px;border-bottom:2px solid var(--ink);padding-bottom:2px}
.pf-links a:hover{color:var(--blue)}
.pf-text{display:flex;flex-direction:column;gap:22px;min-width:0}
.pf-lead{font:700 clamp(17px,1.6vw,22px)/1.8 var(--jp);border-left:5px solid var(--ink);padding-left:16px}
.pf-body p{font-size:15px;line-height:2.05;margin-bottom:1em}
.pf-skills{display:flex;flex-wrap:wrap;gap:6px}
.pf-skills li{font:700 12px var(--jp);border:1px solid var(--ink);padding:5px 10px}
.pf-time{border-top:2px solid var(--ink)}
.pf-time li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--line);opacity:0;translate:-20px 0;transition:opacity .6s var(--ease),translate .7s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.pf-time.in li{opacity:1;translate:none}
.pf-time b{font:900 22px/1 var(--display);font-stretch:112%;letter-spacing:-.03em}
.pf-time p{font-size:13.5px;line-height:1.85}
.pf-time li.hl p{font-weight:700}
.pf-time li.hl p span{background:linear-gradient(transparent 55%,var(--accent) 55%)}

/* ---------- COMPANY ---------- */
.company{background:var(--paper-2);position:relative;overflow:hidden}
.company .st-en{font-stretch:125%}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,5vw,90px);padding:0 var(--gutter) clamp(80px,10vw,140px)}
.about-slash{grid-row:span 2;position:relative;min-height:clamp(320px,40vw,620px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(18px,2.4vw,34px)}
.about-slash span{font:900 clamp(40px,7vw,128px)/.82 var(--display);letter-spacing:-.06em;position:relative;z-index:3}
.as-a{font-stretch:62%}
.as-b{font-stretch:125%;align-self:flex-end;color:var(--accent)}
.about-slash i{position:absolute;z-index:1;left:50%;top:-20%;width:clamp(60px,9vw,150px);height:140%;background:var(--blue) var(--pigment) 55% 50%/cover;animation:about-cut 6s var(--ease-io) infinite alternate}
.about-slash img{position:absolute;z-index:2;left:50%;top:50%;width:38%;height:auto;transform:translate(-50%,-50%);opacity:.95}
@keyframes about-cut{0%{transform:translateX(-80%) rotate(24deg)}100%{transform:translateX(-20%) rotate(32deg)}}
.about-text{font-size:15px;line-height:2.1}
.about-text p{margin:0 0 1.3em}
.about-lead{font:700 clamp(19px,1.9vw,27px)/1.6 var(--jp)!important}
.about-lead em{font-style:normal;background:linear-gradient(transparent 58%,var(--accent) 58%)}
.about-lead em+em{background:linear-gradient(transparent 58%,#ff5c8466 58%)}
.company-table{margin:0;border-top:2px solid var(--ink)}
.company-table div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.company-table dt{font:600 11px var(--mono);letter-spacing:.06em;padding-top:4px}
.company-table dd{margin:0;font-size:14px;line-height:1.8;font-weight:700}
.company-table a{border-bottom:1.5px solid var(--accent)}
.company-table .nb{display:inline-block}

/* ---------- CONTACT ---------- */
.contact{background:var(--accent);color:var(--ink);position:relative;overflow:hidden}
.contact:before{content:'';position:absolute;left:-10%;right:-10%;top:0;height:14px;background:var(--pink) var(--pigment) 50% 66%/cover}
.contact-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,90px);padding:clamp(80px,10vw,150px) var(--gutter)}
.contact .sec-no{display:inline-block}
.contact-title{margin:18px 0 26px;font:900 clamp(64px,11vw,210px)/.8 var(--display);font-stretch:125%;letter-spacing:-.06em}
.contact-title .ct-slash{color:#fff;-webkit-text-stroke:2px var(--ink)}
.contact-lead{font:700 clamp(15px,1.4vw,19px)/1.8 var(--jp);margin:0 0 18px;max-width:28em}
.contact-mail{font-size:14px;margin:0}
.contact-mail a{font-weight:700;border-bottom:2px solid var(--ink)}
.contact-form{background:var(--paper);padding:clamp(20px,3vw,40px);box-shadow:14px 14px 0 var(--ink);display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px;padding:0}
.field label b{font:600 9px var(--mono);background:var(--ink);color:#fff;padding:2px 5px;letter-spacing:.06em}
.field input,.field textarea{font:16px/1.6 var(--jp);color:var(--ink);background:#fff;border:1.5px solid var(--ink);padding:12px 14px;border-radius:0;width:100%;transition:box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;box-shadow:5px 5px 0 var(--accent)}
.field [aria-invalid=true]{border-color:#d4204f;box-shadow:5px 5px 0 #ff5c8466}
#cf-topics{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
#cf-topics label{position:relative;font-weight:700;font-size:12px;border:1.5px solid var(--ink);padding:8px 12px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:background .2s}
#cf-topics input{position:absolute;opacity:0;pointer-events:none}
#cf-topics label:has(input:checked){background:var(--ink);color:#fff}
#cf-topics label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.7;cursor:pointer}
.consent input{width:20px;height:20px;accent-color:var(--ink);flex:none;margin-top:2px}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn-submit{display:inline-flex;align-items:center;gap:22px;background:var(--ink);color:#fff;padding:16px 26px;font-weight:700;font-size:15px;box-shadow:6px 6px 0 var(--pink);transition:box-shadow .2s}
.btn-submit:hover{box-shadow:9px 9px 0 var(--pink)}
.btn-submit[disabled]{opacity:.5}
.btn-submit i{font-style:normal}
.form-status{margin:0;font-size:13px;line-height:1.7;flex:1;min-width:200px}
.form-status a{font-weight:700;border-bottom:1.5px solid var(--ink)}

/* ---------- フッター ---------- */
.site-footer{background:var(--ink);color:#fff;overflow:hidden;padding:0 var(--gutter) 22px}
.foot-mark{display:flex;align-items:flex-end;gap:clamp(16px,3vw,50px);padding-top:clamp(40px,6vw,90px)}
.foot-mark img{width:clamp(90px,14vw,230px);height:auto;flex:none;margin-bottom:.4vw}
.foot-word{font:900 clamp(96px,26vw,480px)/.74 var(--display);font-stretch:125%;letter-spacing:-.075em;background:linear-gradient(100deg,#fff 0 55%,var(--accent) 55% 72%,var(--pink) 72%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em;white-space:nowrap}
.foot-word .pch{-webkit-background-clip:text;background-clip:text}
.foot-row{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #ffffff40;padding-top:16px;margin-top:18px;font:600 11px var(--mono)}
.foot-row nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-row a:hover{color:var(--accent)}
.foot-note{opacity:.6}

/* ---------- 事例ファイル（CASE FILE） ---------- */
.case-file{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden}
.case-file[open]{display:block}
.case-file::backdrop{background:transparent}
/* 後ろのページを暗く透かす。押すと閉じる */
.cf-scrim{position:absolute;inset:0;background:#111110b3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* 事例ファイル本体：PCは右からのシート（左に後ろのページが見える）。スマホは下からのシート */
.cf-sheet{position:absolute;top:0;right:0;bottom:0;width:min(1180px,88vw);display:flex;flex-direction:column;background:var(--paper);box-shadow:-30px 0 70px #00000059;border-left:2px solid var(--ink)}
.case-file.enter .cf-sheet{animation:cf-in .5s var(--ease-io)}
.case-file.enter .cf-scrim{animation:cf-fade-in .4s ease}
.case-file.leave .cf-sheet{animation:cf-out .38s var(--ease-io) forwards}
.case-file.leave .cf-scrim{animation:cf-fade-out .38s ease forwards}
@keyframes cf-in{from{transform:translateX(104%)}to{transform:none}}
@keyframes cf-out{from{transform:none}to{transform:translateX(104%)}}
@keyframes cf-fade-in{from{opacity:0}to{opacity:1}}
@keyframes cf-fade-out{from{opacity:1}to{opacity:0}}
.cf-bar{flex:none;height:58px;display:flex;align-items:center;gap:16px;padding:0 var(--gutter);background:var(--ink);color:#fff;font:600 11px var(--mono);letter-spacing:.05em;border-bottom:5px solid var(--accent);position:relative;z-index:3}
.cf-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-nav{display:flex;gap:4px}
.cf-nav button{width:40px;height:40px;border:1px solid #ffffff55;font:700 16px var(--display);display:grid;place-items:center;transition:background .2s,color .2s}
.cf-nav button:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.cf-close{color:var(--ink);background:var(--accent);font:800 14px var(--jp);display:flex;gap:8px;align-items:center;padding:7px 14px 7px 16px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.cf-close span{font-size:20px;line-height:1}
.cf-close:hover{background:#fff}
.case-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.case-body-swap{animation:cf-swap .55s var(--ease)}
@keyframes cf-swap{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.cf-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.cf-hero-media{position:relative;height:min(72svh,760px);background:#0b0b0a}
.cf-hero-media img,.cf-hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.cf-hero-media.fit img,.cf-hero-media.fit video{object-fit:contain}
.cf-hero-media.portrait{display:flex;justify-content:center;background:#0b0b0a}
.cf-hero-media.portrait:before{content:'';position:absolute;inset:-10%;background:var(--bg) center/cover;filter:blur(40px) brightness(.5);transform:scale(1.1)}
.cf-hero-media.portrait img,.cf-hero-media.portrait video{position:relative;width:auto;max-width:100%;height:100%;object-fit:contain}
.cf-hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#11111000 40%,#111110eb 100%);pointer-events:none}
.cf-hero.stack .cf-hero-media{background:#f2f1ea;height:min(64svh,700px);padding:clamp(10px,2vw,28px)}
.cf-hero.stack .cf-hero-media:after{display:none}
.cf-hero.stack .cf-hero-text{position:relative;left:auto;right:auto;bottom:auto;padding:clamp(26px,3.4vw,50px) var(--gutter) clamp(30px,4vw,56px)}
.cf-hero.stack .cf-hero-cap{background:#111110d0;color:#fff}
.cf-hero-type{background:var(--blue) var(--pigment) 50% 50%/cover;display:flex;align-items:center;overflow:hidden}
.cf-hero-type b{font:900 clamp(120px,26vw,460px)/.8 var(--display);font-stretch:125%;letter-spacing:-.07em;color:#ffffff22;white-space:nowrap;animation:ht-x 40s linear infinite}
.cf-hero-text{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(36px,5vw,64px);z-index:2}
.cf-kicker{font:600 11px var(--mono);letter-spacing:.1em;margin:0 0 12px;color:var(--accent)}
.cf-hero-text h2{margin:0;font:900 clamp(48px,10vw,184px)/.82 var(--display);font-stretch:118%;letter-spacing:-.06em;overflow-wrap:anywhere;text-transform:uppercase}
.cf-hero-text h2 .ch{display:inline-block;transform:translateY(105%);animation:cf-ch .8s var(--ease) forwards;animation-delay:calc(.06s + var(--i) * 22ms)}
.cf-hero-text h2 .w{display:inline-block;overflow:hidden;vertical-align:top;white-space:nowrap}
.cf-hero-text h2 .sp{display:inline-block;width:.24em}
@keyframes cf-ch{to{transform:none}}
.cf-sub{margin:16px 0 0;font:700 clamp(15px,1.6vw,22px)/1.6 var(--jp);max-width:40em;opacity:0;animation:cf-fade .7s var(--ease) .28s forwards}
@keyframes cf-fade{to{opacity:1}}
.cf-hero-cap{position:absolute;z-index:2;right:var(--gutter);top:14px;margin:0;max-width:min(460px,60%);font-size:11px;line-height:1.6;background:#000a;padding:6px 10px}
.cf-tagbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:16px var(--gutter);border-bottom:1px solid var(--ink);background:var(--paper)}
.cf-tagbar>span{font:600 10px var(--mono);letter-spacing:.1em;margin-right:6px}
.cf-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,70px);padding:clamp(36px,5vw,80px) var(--gutter)}
.cf-summary{font:700 clamp(16px,1.5vw,21px)/1.95 var(--jp)}
.cf-meta{margin:0;border-top:2px solid var(--ink);align-self:start}
.cf-meta div{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cf-meta dt{font:600 11px var(--mono);padding-top:3px}
.cf-meta dd{margin:0;font-weight:700;font-size:14px}
.cf-sec{padding:0 var(--gutter) clamp(36px,5vw,70px)}
.cf-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 18px;font:700 14px var(--jp)}
.cf-h b{font:900 clamp(26px,3vw,46px)/.9 var(--display);font-stretch:118%;letter-spacing:-.04em}
.cf-can{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}
.cf-can li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;border-top:2px solid var(--ink);padding:14px 0 16px;font-weight:700;font-size:15px;line-height:1.7}
.cf-can li i{font:600 11px var(--mono);font-style:normal;color:var(--muted);padding-top:3px}
.cf-results{display:flex;flex-direction:column;gap:10px}
.cf-results li{font:700 clamp(17px,1.8vw,24px)/1.6 var(--jp);padding-left:clamp(36px,4vw,56px);position:relative}
.cf-results li:before{content:'';position:absolute;left:0;top:.62em;width:clamp(22px,2.6vw,36px);height:8px;background:var(--pink)}
.cf-results li span{background:linear-gradient(transparent 60%,#69d9ee99 60%)}
.cf-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.cf-process li{border-top:2px solid var(--ink);padding:14px 0;display:flex;flex-direction:column;gap:10px}
.cf-process li span{font:600 12px var(--mono);color:var(--muted)}
.cf-process li p{font-size:15px;line-height:1.85;font-weight:700}
.cf-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,40px) clamp(14px,2vw,30px)}
.cf-gallery.has-portrait{grid-template-columns:repeat(3,minmax(0,1fr))}
.cf-fig{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.cf-fig.wide{grid-column:1 / -1}
.cf-frame{position:relative;background:#e3e2d9;overflow:hidden;cursor:zoom-in;box-shadow:0 0 0 1px var(--line);display:block;width:100%}
.cf-fig.tone-dark .cf-frame{background:#0d0d0c}
.cf-frame img,.cf-frame video{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.cf-frame:hover img{transform:scale(1.015)}
.cf-fig.is-video .cf-frame{cursor:pointer}
.cf-fig figcaption{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.75}
.cf-fig figcaption b{font:600 11px var(--mono);letter-spacing:.04em}
.cf-fig figcaption span{color:var(--muted)}
.cf-team{display:flex;flex-wrap:wrap;gap:6px}
.cf-team button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--ink);padding:8px 12px;text-align:left;transition:background .2s,color .2s}
.cf-team button b{font:800 10px var(--display);font-stretch:118%;letter-spacing:.08em;color:var(--blue)}
.cf-team button span{font:700 13px var(--jp)}
.cf-team button:hover{background:var(--ink);color:#fff}
.cf-team button:hover b{color:var(--accent)}
.cf-team-note{font-size:12px;color:var(--muted);margin-top:10px}
.cf-foot{padding:0 var(--gutter) clamp(50px,7vw,100px);display:flex;flex-direction:column;gap:24px}
.cf-note{margin:0;font-size:13px;line-height:1.9;border-left:4px solid var(--accent);padding:6px 0 6px 16px;color:var(--muted);max-width:70em}
.cf-links{display:flex;gap:22px;flex-wrap:wrap;font-weight:700;font-size:14px}
.cf-links a{border-bottom:2px solid var(--ink);padding-bottom:3px}
.cf-links a:hover{color:var(--blue)}
.cf-next{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'s i' 'b i' 't i';text-align:left;background:var(--ink);color:#fff;padding:clamp(20px,3vw,40px);gap:6px 20px;position:relative;overflow:hidden;isolation:isolate;width:100%}
.cf-next:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--blue) var(--pigment) 50% 50%/cover;transform:translateX(-101%);transition:transform .6s var(--ease-io)}
.cf-next:hover:before{transform:none}
.cf-next small{grid-area:s;font:600 11px var(--mono);letter-spacing:.08em}
.cf-next b{grid-area:b;font:900 clamp(34px,6vw,100px)/.86 var(--display);font-stretch:118%;letter-spacing:-.05em;text-transform:uppercase}
.cf-next span{grid-area:t;font-weight:700;font-size:14px}
.cf-next i{grid-area:i;align-self:center;font:900 clamp(40px,6vw,90px) var(--display);font-style:normal}
.cf-zoom{position:absolute;inset:0;z-index:10;background:#0b0b0af2;display:flex;flex-direction:column;padding:56px 16px 16px;animation:cf-fade .3s forwards}
.cf-zoom-close{position:absolute;top:10px;right:16px;color:#fff;font:700 14px var(--jp);display:flex;gap:10px;align-items:center;padding:8px}
.cf-zoom-close span{font-size:22px;line-height:1}
.cf-zoom-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.cf-zoom-stage img,.cf-zoom-stage video{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-out}
.cf-zoom-stage.full{align-items:flex-start;justify-content:flex-start}
.cf-zoom-stage.full img{max-width:none;max-height:none;width:auto}
.cf-zoom-cap{color:#fff;font-size:12px;line-height:1.7;margin-top:12px;text-align:center}

/* ---------- 実績の操作へ戻るボタン（カード・一覧を下まで見たとき） ---------- */
.works-jump{position:fixed;z-index:58;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));translate:-50% 0;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 16px;background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--accent);font:700 12px var(--jp);white-space:nowrap;animation:jump-in .45s var(--ease) both}
.works-jump b{font:900 12px var(--display);font-stretch:118%;letter-spacing:.06em;color:var(--accent)}
.works-jump output{font:600 10px var(--mono);letter-spacing:.06em;opacity:.8;border-left:1px solid #ffffff55;padding-left:10px}
.works-jump i{font-style:normal;font-weight:900}
.works-jump:hover{background:var(--blue)}
@keyframes jump-in{from{opacity:0;translate:-50% 20px}to{opacity:1;translate:-50% 0}}
.case-open .works-jump{display:none}

/* ---------- 事例ファイルの中の体制図 ---------- */
.cf-teambox{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:clamp(18px,3vw,44px);background:var(--ink-2);color:#fff;padding:clamp(16px,2.4vw,32px);overflow:hidden}
.cf-teambox:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.cf-net{grid-area:auto;position:relative;min-height:clamp(420px,40vw,600px)}
.cf-net .team-core{width:clamp(86px,8vw,118px)}
.cf-net .team-core b{font-size:clamp(20px,1.9vw,28px)}
.cf-net .role button{min-width:clamp(84px,7.4vw,112px);padding:5px 8px}
.cf-net .role span{font-size:11px}
.cft-side{position:relative;display:flex;flex-direction:column;gap:14px;align-self:center}
.cft-count{display:flex;align-items:baseline;gap:10px;margin:0}
.cft-count b{font:900 clamp(48px,5vw,76px)/.85 var(--display);font-stretch:118%;letter-spacing:-.05em;color:var(--accent)}
.cft-count span{font:600 11px var(--mono);letter-spacing:.1em}
.cft-text{font-size:13px;line-height:1.9;color:var(--muted-d);margin:0}
.cft-list{display:flex;flex-wrap:wrap;gap:6px}
.cft-list button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:7px 11px;border:1px solid #ffffff55;text-align:left;transition:background .2s,color .2s,border-color .2s;min-height:44px}
.cft-list button b{font:800 10px var(--display);font-stretch:118%;letter-spacing:.08em;color:var(--accent)}
.cft-list button span{font:700 12.5px var(--jp)}
.cft-list button:hover,.cft-list button[aria-pressed=true]{background:#fff;color:var(--ink);border-color:#fff}
.cft-list button:hover b,.cft-list button[aria-pressed=true] b{color:var(--blue)}
.cft-detail:empty{display:none}
.cft-detail{border-top:2px solid var(--accent);padding-top:12px;display:flex;flex-direction:column;gap:8px;animation:cf-fade .35s var(--ease) both}
.cft-detail h4{margin:0;font:700 18px/1.4 var(--jp)}
.cft-detail p{margin:0;font-size:13px;line-height:1.8;color:#ffffffd0}
.cft-detail .cftd-k{font:600 10px var(--mono);letter-spacing:.1em;color:var(--accent)}
.cft-detail ul{display:flex;flex-wrap:wrap;gap:6px}
.cft-detail ul button{font:800 11px var(--display);font-stretch:112%;letter-spacing:.02em;border-bottom:2px solid var(--accent);padding:6px 2px;text-align:left}
.cft-detail ul button span{font:700 11px var(--jp);letter-spacing:0;opacity:.75;margin-left:4px}
.cft-detail ul button:hover{color:var(--accent)}
.cf-teambox .team-legend{margin-top:2px}

/* ---------- 動きを止める ---------- */
.pre-reduced .intro,.reduced .intro{display:none}
.pre-reduced.intro-on .hero-copy{opacity:1}
.reduced *,.reduced *:before,.reduced *:after{animation-play-state:paused!important}
.reduced .hero-copy,.reduced .menu nav a,.pre-reduced .hero-copy{animation:none!important;opacity:1;transform:none;clip-path:none}
.reduced .wall-row,.reduced .ht-row,.reduced .ht-w,.reduced .hero-slash,.reduced .strip-track,.reduced .ai-ticker-track,.reduced .stage-band,.reduced .role button{animation:none!important}
.reduced .split .ch,.reduced .card,.reduced .ai-item,.reduced .pf-time li{transition:none!important;transform:none!important;opacity:1!important;translate:none!important;font-stretch:118%}
.reduced .pf-photo .pf-portrait{transition:none;transform:none;clip-path:none}
.reduced .pf-sticker{transition:none;opacity:1;transform:rotate(8deg)}
.reduced .cf-hero-text h2 .ch{animation:none;transform:none}
.reduced .cf-sub{animation:none;opacity:1}
.reduced .case-file.enter,.reduced .case-file.leave,.reduced .case-body-swap{animation:none}
.reduced .stage:after,.reduced .works-views:after{display:none}
.reduced .plane-media,.reduced .card-media img{transition:none}
.reduced .cursor{display:none}
.reduced .team-lines line.on{animation:none}
.reduced .works-jump,.reduced .cft-detail{animation:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- レスポンシブ ---------- */
@media(max-width:1280px){
  .gnav{gap:14px}
  .brand-name{display:none}
}
@media(max-width:1100px){
  .site-header>.motion-btn{display:none}
  .hero-facts{display:none}
  .works-bar{grid-template-columns:auto minmax(0,1fr);grid-template-areas:'view count' 'filters filters'}
  .view-switch{grid-area:view}.works-count{grid-area:count;justify-self:end}.filters{grid-area:filters}
  .stage-caption{grid-template-columns:1fr}
  .lv-head,.lv-hit{grid-template-columns:52px minmax(0,2fr) minmax(0,1.1fr) 84px 30px}
  .lv-tags,.lv-head span:nth-child(5){display:none}
  .ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-can,.cf-process{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-body{grid-template-columns:1fr;grid-template-areas:'cases' 'net' 'panel'}
  .sv-inner{grid-template-columns:70px minmax(0,1fr)}
  .sv-works{grid-column:2}
  .cf-teambox{grid-template-columns:1fr}
  .cf-net{min-height:clamp(420px,62vw,580px)}
}
@media(max-width:960px){
  :root{--head:60px}
  .gnav,.head-cta{display:none}
  .menu-btn{display:flex;margin-left:auto}
  .site-brand img{height:42px}
  .view-layers{grid-template-columns:1fr}
  .plist{border-right:0;border-bottom:1px solid var(--ink);padding:12px var(--gutter) 10px}
  .plist-items{display:flex;gap:6px;overflow-x:auto;max-height:none;padding:0 0 4px;scrollbar-width:none}
  .plist-items::-webkit-scrollbar{display:none}
  .plist-items>li{flex:none}
  .pl-item{width:auto;grid-template-columns:auto auto;border:1px solid var(--line);padding:8px 10px}
  .pl-item:hover{padding-left:10px}
  .pl-copy span,.pl-copy small,.pl-arrow{display:none}
  .pl-item{min-height:42px;align-items:center}
  .pl-no{padding-top:0}
  .pl-copy strong{white-space:nowrap}
  .pl-item[aria-current=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .pl-item[aria-current=true]:before{display:none}
  .pl-item[aria-current=true] .pl-no{background:var(--accent);color:var(--ink)}
  .stage-col{padding:14px var(--gutter) 10px}
  .about-grid,.contact-inner,.cf-intro,.profile-grid{grid-template-columns:1fr}
  .about-slash{grid-row:auto;min-height:280px}
  .pf-side{position:static;display:grid;grid-template-columns:minmax(130px,190px) minmax(0,1fr);gap:16px 26px;align-items:start}
  .pf-photo{grid-row:span 3;width:100%}
  .pf-id,.pf-likes,.pf-links{grid-column:2}
  .sv-head{grid-template-columns:44px minmax(0,1fr) 40px}
  .sv-count{display:none}
  .sv-inner{grid-template-columns:1fr;padding:10px 0 26px}
  .sv-text,.sv-works{grid-column:1}
  .cf-gallery,.cf-gallery.has-portrait{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hover-preview{display:none}
  .partner-list{grid-template-columns:1fr}
}
@media(max-width:720px){
  body{font-size:14.5px}
  .pc{display:none}
  .hero{min-height:max(100svh,620px)}
  .hero-wall{inset:-30% -80% -10% -60%}
  .ht-row span{font-size:clamp(54px,21vw,120px)}
  .hero-type{padding-top:14px;mix-blend-mode:normal;color:#ffffffe6}
  .hero-copy{left:16px;right:16px;width:auto;bottom:18px;padding:18px 18px 20px;box-shadow:8px 8px 0 var(--accent)}
  .hero-copy h1{font-size:19px}
  .hero-lead{font-size:13.5px;margin-bottom:16px}
  .btn-primary,.btn-ghost{padding:12px 16px;font-size:13px}
  .section-head{grid-template-columns:1fr;grid-template-areas:'no' 'title' 'note';padding-top:64px}
  .sec-no{justify-self:start;margin:0 0 14px}
  .st-en{font-size:clamp(40px,13.4vw,80px)}
  .works-bar{padding:12px 16px;gap:12px}
  .view-switch button{min-width:0;padding:8px 12px}
  .view-switch b{font-size:13px}
  .filter-row{grid-template-columns:1fr;gap:4px}
  .works-count output{font-size:32px}
  .works-count{flex-wrap:wrap;justify-content:flex-end;row-gap:0;column-gap:6px}
  .filter-clear{flex-basis:100%;text-align:right;margin:0;padding:2px 0}
  .chip,.chip-more{min-height:36px;padding:6px 11px}
  .chip sup{font-size:10px}
  .stage{height:min(64svh,480px);min-height:360px}
  .stage-hint{display:none}
  .sc-title{font-size:clamp(40px,13vw,72px)}
  .case-cta{width:100%}
  .layer-nav button{padding:8px 6px}
  .layer-nav button span{font-size:9px}
  .view-grid,.view-list{padding-left:16px;padding-right:16px}
  .grid{grid-template-columns:1fr}
  .lv-head{display:none}
  .lv-hit{grid-template-columns:44px minmax(0,1fr) 26px;gap:10px;padding:14px 0}
  .lv-ind,.lv-year{display:none}
  .lv-title span.lv-meta{display:block!important;font:600 11px var(--mono);color:var(--muted);margin-top:2px}
  .lv-hit:hover .lv-meta{color:#ffffffb8}
  .lv-detail-in{grid-template-columns:1fr;padding:0 0 18px}
  .lv-detail-in p,.lv-results{grid-column:1}
  .strip-track>span{font-size:30px}
  .ai-grid{grid-template-columns:1fr}
  .ai-item:nth-child(1){grid-column:auto}
  .ai-item:nth-child(1) .ai-media{aspect-ratio:16/10}
  .team-net,.cf-net{min-height:0}
  .team-lines,.team-core{display:none}
  .team-roles{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .role{position:static;transform:none}
  .role button,.cf-net .role button{width:100%;min-width:0;min-height:46px;animation:none;align-items:flex-start;text-align:left}
  .role button:hover,.role.on button{transform:none}
  .team-cases{grid-template-columns:1fr;gap:6px}
  .team-body{grid-template-areas:'cases' 'panel' 'net'}
  .tc-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 88%,#0000);-webkit-mask-image:linear-gradient(90deg,#000 88%,#0000)}
  .tc-chips::-webkit-scrollbar{display:none}
  .tc-chips button{min-height:38px}
  .cf-teambox{padding:14px 12px 16px;gap:16px}
  .cft-count b{font-size:46px}
  .pf-side{grid-template-columns:118px minmax(0,1fr);gap:12px 16px}
  .pf-likes,.pf-links{grid-column:1 / -1}
  .pf-photo figcaption{font-size:10px;margin-top:10px}
  .pf-name{font-size:21px}
  .pf-titles li{font-size:12px}
  .company-table div{grid-template-columns:84px 1fr}
  .cf-bar{height:52px;gap:6px}
  .cf-nav button{width:40px;height:40px}
  .cf-close{min-height:44px;padding-left:6px}
  .cf-tagbar .tag-btn{min-height:34px;font-size:12px}
  .menu-btn{min-height:44px}
  .sc-tags button{min-height:34px}
  .card-meta{font-size:11px}
  .card-tags .tag-btn{font-size:11px}
  .works-jump{bottom:calc(12px + env(safe-area-inset-bottom));padding:10px 12px 10px 14px;gap:8px}
  .works-jump span{font-size:11px}
  .cf-hero-media{height:58svh}
  .cf-hero-cap{display:none}
  .cf-hero-text h2{font-size:clamp(40px,13vw,80px)}
  .cf-can,.cf-process{grid-template-columns:1fr}
  .cf-gallery,.cf-gallery.has-portrait{grid-template-columns:1fr}
  .contact-title{font-size:clamp(60px,21vw,120px)}
  .contact-form{box-shadow:8px 8px 0 var(--ink)}
  .foot-row{flex-direction:column;align-items:flex-start}
  .foot-mark{flex-direction:column;align-items:flex-start;gap:10px}
}
.lv-meta{display:none}
@media(hover:none){
  .plane-open{opacity:1;transform:none;position:absolute}.stage-hint{display:none}
  /* 指で触る端末：カードのタグは表示だけにして、どこを押しても事例ファイルが開くようにする */
  .card-tags{pointer-events:none}
  /* 触ったあとにホバーの色が残らないように */
  .chip:hover:not([aria-pressed=true]),.view-switch button:hover:not([aria-selected=true]),.chip-more:hover{background:transparent;color:inherit}
  .lv-hit:hover{color:inherit;padding-left:0}.lv-hit:hover:before{transform:scaleY(0)}.lv-hit:hover .lv-tags{color:var(--muted)}
  .sv-item:not(.open) .sv-head:hover{color:inherit}.sv-item:not(.open) .sv-head:hover:before{transform:scaleY(0)}
  .card:hover{box-shadow:none}.card:hover .card-media img,.card:hover .card-media video{transform:none}
}

/* ---------- 2026-10-03 追加：注記・事例ファイルの末尾・現在地・スマホのカード送り ---------- */
.disclaimer{display:block;margin-top:10px;font-size:11.5px;line-height:1.75;color:var(--muted);padding-left:1.1em;text-indent:-1.1em}
.disclaimer:before{content:'※'}
.foot-disclaimer{margin:0;padding-top:clamp(28px,4vw,48px);font-size:11.5px;line-height:1.8;color:#ffffffa8;max-width:70ch}
.foot-disclaimer:before{content:'※'}
.cf-disclaimer{margin:-10px 0 0;font-size:12px;line-height:1.8;color:var(--muted);padding-left:20px}
.cf-disclaimer:before{content:'※'}
.cf-close-end{display:flex;align-items:center;gap:14px;width:100%;padding:18px 20px;border:1.5px solid var(--ink);background:var(--paper);text-align:left;transition:background .25s,color .25s}
.cf-close-end span{font:600 11px var(--mono);letter-spacing:.12em}
.cf-close-end b{font:700 15px var(--jp);flex:1}
.cf-close-end i{font:900 26px/1 var(--display);font-style:normal;transition:transform .3s var(--ease)}
.cf-close-end:hover{background:var(--ink);color:#fff}
.cf-close-end:hover i{transform:rotate(90deg)}
.hover-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ヘッダーの現在地（ナビが隠れる幅だけ） */
.here{display:none}
@media(max-width:960px){
  .here{display:flex;align-items:baseline;gap:7px;margin:0 0 0 4px;padding-left:12px;border-left:1.5px solid currentColor;opacity:0;translate:-6px 0;transition:opacity .3s,translate .4s var(--ease);pointer-events:none;white-space:nowrap;min-width:0}
  .here.on{opacity:1;translate:none}
  .here b{font:600 10px var(--mono);letter-spacing:.06em;background:var(--accent);color:var(--ink);padding:2px 5px}
  .here span{font:800 13px/1 var(--display);font-stretch:118%;letter-spacing:.02em}
  .here em{font:700 10px var(--jp);font-style:normal;opacity:.7}
  .here.flip span,.here.flip em{animation:here-in .45s var(--ease) both}
}
@keyframes here-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:380px){.here em{display:none}}




/* スマホの実績：最初は注目の2件、残りは ALL のタブで一覧に（2026-10-03 夕） */
.filter-toggle{display:none}
.sp-tabs,.sp-more,.sp-list{display:none}
@media(max-width:720px){
  .works-bar{grid-template-areas:'view count' 'toggle toggle' 'filters filters'}
  .filter-toggle{grid-area:toggle;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:1.5px solid var(--ink);background:var(--paper);text-align:left}
  .filter-toggle b{font:900 12px var(--display);font-stretch:118%;letter-spacing:.06em}
  .filter-toggle span{flex:1;font:700 12px var(--jp);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .filter-toggle i{font:900 18px/1 var(--display);font-style:normal;transition:transform .25s var(--ease)}
  .filter-toggle.active{background:var(--accent)}
  .works-bar.filters-open .filter-toggle i{transform:rotate(45deg)}
  .works-bar .filters{display:none}
  .works-bar.filters-open .filters{display:flex}
  .grid.sp{display:block}
  .grid.sp .sp-tabs{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);margin-bottom:14px}
  .sp-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 12px;min-height:52px;text-align:left;background:var(--paper)}
  .sp-tabs button+button{border-left:1.5px solid var(--ink)}
  .sp-tabs b{font:900 14px/1 var(--display);font-stretch:118%;letter-spacing:.02em}
  .sp-tabs span{font:700 11px/1.3 var(--jp);opacity:.75}
  .sp-tabs [aria-selected=true]{background:var(--ink);color:#fff}
  .sp-tabs [aria-selected=true] span{opacity:.85}
  .sp-tabs button:disabled{opacity:.35}
  .sp-pick{display:grid;gap:16px}
  .grid.sp .sp-more{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;margin-top:16px;padding:14px 16px;background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--accent);text-align:left}
  .sp-more span{font:700 14px var(--jp)}
  .sp-more b{font:900 22px/1 var(--display);font-stretch:118%;color:var(--accent)}
  .sp-more i{font:900 18px var(--display);font-style:normal}
  .grid.sp .sp-list{display:block;list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
  .sp-list li{border-bottom:1px solid var(--line)}
  .sp-row{display:grid;grid-template-columns:104px minmax(0,1fr) 20px;gap:12px;align-items:center;width:100%;padding:10px 0;text-align:left}
  .sp-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#111;border:1px solid var(--ink)}
  .sp-thumb img,.sp-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .sp-thumb video{opacity:0;transition:opacity .4s}
  .sp-row.playing .sp-thumb video{opacity:1}
  .sp-text{display:flex;flex-direction:column;gap:2px;min-width:0}
  .sp-text small{font:600 10px var(--mono);letter-spacing:.06em;color:var(--muted)}
  .sp-text b{font:900 16px/1.05 var(--display);font-stretch:112%;letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
  .sp-text span{font:700 12px/1.45 var(--jp)}
  .sp-text em{font:600 10px var(--mono);font-style:normal;color:var(--muted)}
  .sp-row i{font:900 16px var(--display);font-style:normal}
  .sp-row:active{background:#00000008}
}

/* 事例ファイル：読み進めても「閉じる」が見えるように、右下に出し続ける */
.cf-fab{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:4;display:flex;align-items:center;gap:8px;height:54px;padding:0 20px 0 16px;border-radius:999px;background:var(--ink);color:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--accent);font:800 14px var(--jp);opacity:0;transform:translateY(18px) scale(.94);pointer-events:none;transition:opacity .25s,transform .35s var(--ease),background .2s,color .2s}
.cf-fab i{font:900 24px/1 var(--display);font-style:normal}
.cf-fab.on{opacity:1;transform:none;pointer-events:auto}
.cf-fab:hover{background:var(--accent);color:var(--ink)}
.reduced .cf-fab{transition:none}
@media(max-width:720px){.cf-fab{height:52px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:0 18px 0 14px}.cf-close{padding:7px 12px 7px 14px}}

/* スマホ：下から出るシート。上に後ろのページを少し残し、そこを押しても閉じる */
@media(max-width:720px){
  .cf-sheet{top:40px;left:0;width:100%;border-left:0;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 -20px 50px #00000066}
  .cf-bar{padding-top:6px}
  .cf-bar:before{content:'';position:absolute;top:6px;left:50%;width:38px;height:4px;border-radius:2px;background:#ffffff70;translate:-50% 0}
  @keyframes cf-in{from{transform:translateY(102%)}to{transform:none}}
  @keyframes cf-out{from{transform:none}to{transform:translateY(102%)}}
}
.reduced .case-file.enter .cf-sheet,.reduced .case-file.leave .cf-sheet,.reduced .case-file.enter .cf-scrim,.reduced .case-file.leave .cf-scrim{animation:none}