@import url("../assets/base.css");
:root{--w:#fff;--k:#000;--y:#e8ff00;--pink:#ff2e88;--g:#8a8a8a;
--wide:"Unbounded",sans-serif;--label:"Chakra Petch",sans-serif;--body:"Noto Sans JP",sans-serif;
--ease:cubic-bezier(.7,0,.2,1);
--hazard:repeating-linear-gradient(-45deg,var(--k) 0 6px,var(--y) 0 12px)}
body{background:var(--w);color:var(--k);font:400 15px/1.8 var(--body)}
/* ヘッダー：作戦室の画面の上端の帯（黒）。どの色面の上でも読める */
.site-head{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:24px;height:64px;padding:0 24px;background:var(--k);color:var(--w);--sns-mono:#fff;--sns-pixiv:#fff}
.logo{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:700 20px/1 var(--wide);letter-spacing:.02em;text-decoration:none}
.gnav ul,.site-head__sns{display:flex;gap:4px}
.site-head__sns{margin-left:auto}
.gnav a,.site-head .sns a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:700 13px/1 var(--label);text-decoration:none}
.gnav a:hover,.site-head .sns a:hover{text-decoration:underline 2px var(--y);text-underline-offset:6px}

/* ヒーロー：色面・破片・窓（背景の層＋キャラの層）。絵の上には何も重ねない。
   作戦室らしさは絵の外に置く：右と下の目盛り（ピンクの印が顔の位置を指す）と、枠に吸い付く四隅のカギ形 */
.hero{--plane:var(--k);--ink:var(--w);--shard:var(--y);--shard2:var(--w);--edge:var(--y);
--nm:calc((max(600px,100svh) - 176px) / 6.2);
--zone:100px 80px 116px calc(var(--nm) + 96px);
position:relative;height:max(600px,100svh);overflow:hidden;background:var(--plane);color:var(--ink)}
.hero[data-tone="light"]{--plane:var(--w);--ink:var(--k);--shard:var(--k);--shard2:var(--y);--edge:var(--k)}
.hero[data-tone="acid"]{--plane:var(--y);--ink:var(--k);--shard:var(--k);--shard2:var(--w);--edge:var(--k)}
/* 下端の区切りの帯（蛍光イエロー、右端だけハザード柄） */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:8;height:16px;border-top:2px solid var(--k);background:var(--hazard) right top/240px 100% no-repeat,var(--y)}
.hero__shards{position:absolute;z-index:1;inset:12% 4% 8% 12%;width:84%;height:80%;fill:var(--shard)}
.hero__shards polygon:nth-child(even){fill:var(--shard2)}
.hero[data-shot="2"] .hero__shards{scale:-1 1}
.hero[data-shot="3"] .hero__shards{scale:1 -1}
.hero[data-shot="4"] .hero__shards{scale:-1 -1}
/* 名前は窓の左の列に立てる（窓の左端は --nm から計算するので、文字の大きさが変わっても重ならない） */
.hero__name{position:absolute;z-index:2;left:48px;bottom:56px;margin:0;writing-mode:vertical-rl;rotate:180deg;
font:900 var(--nm)/1 var(--wide);letter-spacing:.02em;color:var(--plane);-webkit-text-stroke:2px var(--ink)}
/* 窓：目盛りと名前の内側の区画（--zone）。背景の層とキャラの層を同じ形（--win）で切る。
   キャラは顔（--fx/--fy）を窓の中の (--px, --py) に置く寄り */
.hero__stage{position:absolute;inset:var(--zone);z-index:3;filter:drop-shadow(16px 16px 0 var(--edge))}
.hero__shots,.hero__fx,.hero__band{position:absolute;inset:0}
.hero__band{filter:drop-shadow(-12px 0 0 var(--pink)) drop-shadow(12px 0 0 var(--y))}
.shot{position:absolute;inset:0;overflow:hidden;clip-path:var(--win);visibility:hidden}
.shot.is-on{visibility:visible}
.shot__bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.shot__chara{position:absolute;left:var(--px);top:var(--py);width:auto;height:var(--ch);max-width:none;translate:calc(var(--fx,50%) * -1) calc(var(--fy,30%) * -1)}
.shot--1{--win:polygon(12% 0%,92% 0%,100% 10%,100% 100%,22% 100%,12% 84%);--ch:155%;--px:47%;--py:46%}
.shot--2{--win:polygon(0% 2%,66% 2%,80% 24%,80% 100%,6% 100%,0% 86%);--ch:250%;--px:40%;--py:33%}
.shot--3{--win:polygon(24% 0%,100% 0%,90% 100%,14% 100%);--ch:224%;--px:57%;--py:38%}
.shot--4{--win:polygon(4% 14%,100% 0%,100% 88%,4% 100%);--ch:210%;--px:52%;--py:41%}
/* 四隅のカギ形：窓の外接する四角から --gap だけ外（影より外）。腕の幅は --gap より短く、絵の辺の延長に届かない。位置と吸い付きは hero.js */
.hero__lock{--gap:28px}
.hero__lock i{position:absolute;left:0;top:0;z-index:5;width:24px;height:64px;border:0 solid var(--ink);pointer-events:none}
.hero__lock i:nth-child(1){border-width:3px 0 0 3px}
.hero__lock i:nth-child(2){border-width:3px 3px 0 0}
.hero__lock i:nth-child(3){border-width:0 0 3px 3px}
.hero__lock i:nth-child(4){border-width:0 3px 3px 0}
/* 目盛り：窓の右（高さ）と下（横位置）。窓の側に基線、そこから刻み（8px・40px・200px）。
   下地は色面で塗り、破片が後ろを通っても刻みが読める */
.hero__rule{position:absolute;z-index:5;background-color:var(--plane);background-repeat:no-repeat;background-position:0 0;color:var(--ink)}
.hero__rule--y{top:88px;bottom:104px;right:16px;width:24px;
background-image:linear-gradient(currentColor,currentColor),repeating-linear-gradient(180deg,currentColor 0 1px,transparent 0 200px),repeating-linear-gradient(180deg,currentColor 0 1px,transparent 0 40px),repeating-linear-gradient(180deg,currentColor 0 1px,transparent 0 8px);
background-size:2px 100%,100% 100%,12px 100%,6px 100%}
.hero__rule--x{left:calc(var(--nm) + 96px);right:288px;bottom:44px;height:24px;
background-image:linear-gradient(currentColor,currentColor),repeating-linear-gradient(90deg,currentColor 0 1px,transparent 0 200px),repeating-linear-gradient(90deg,currentColor 0 1px,transparent 0 40px),repeating-linear-gradient(90deg,currentColor 0 1px,transparent 0 8px);
background-size:100% 2px,100% 100%,100% 12px,100% 6px}
/* 印：窓の側を指す五角形。目盛りの幅の中だけに描く */
.hero__mark{position:absolute;left:0;top:0;background:var(--pink)}
.hero__rule--y .hero__mark{width:100%;height:14px;translate:0 -7px;clip-path:polygon(0 50%,8px 0,100% 0,100% 100%,8px 100%)}
.hero__rule--x .hero__mark{width:14px;height:100%;translate:-7px 0;clip-path:polygon(50% 0,100% 8px,100% 100%,0 100%,0 8px)}
.hero.is-live .hero__mark{transition:transform .42s var(--ease)}
.hero:not(.is-set) .hero__lock,.hero:not(.is-set) .hero__mark{visibility:hidden}
/* 止める／再開：ボタンの中にゲージ。右と下の目盛りが出会う角に置き、ゲージは下の目盛りの延長に見える */
.hero__ctrl{position:absolute;z-index:7;right:16px;bottom:32px}
.hero__play,.hero__next{position:relative;display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border:2px solid var(--ink);background:var(--k);color:var(--w)}
.hero__play{width:248px}
.hero__play::before,.hero__next::before,.btn::before{content:"";position:absolute;left:-2px;top:-2px;width:20px;height:20px;background:var(--hazard);clip-path:polygon(0 0,100% 0,0 100%)}
.hero__play:hover .hero__icon,.hero__next:hover .hero__icon{color:var(--y)}
.hero__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pink);animation:blink 1s steps(1,end) infinite}
.hero__play[aria-pressed="true"] .hero__dot{animation:none;background:none;box-shadow:inset 0 0 0 2px var(--pink)}
.hero__icon{flex:none;width:12px;height:14px;background:linear-gradient(90deg,currentColor 0 4px,transparent 0 8px,currentColor 0)}
.hero__play[aria-pressed="true"] .hero__icon,.hero__next .hero__icon{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
/* 次の絵へ（動きを減らす設定のときだけ出る）：三角と縦棒 */
.hero__next{width:48px;padding:0 0 0 14px}
.hero__next::after{content:"";position:absolute;left:28px;top:15px;width:3px;height:14px;background:currentColor}
.hero__next:hover::after{background:var(--y)}
.hero__gauge{position:relative;flex:1;height:8px;overflow:hidden;background:#3a3a3a}
.hero__fill{position:absolute;inset:0;background:var(--y);transform:scaleX(0);transform-origin:0 50%}
@keyframes blink{0%{opacity:1}50%{opacity:0}}

/* 作品：左に作品名の行、右は今の行の大きな絵（スマホは絵が上）。絵の面は works-stage.js が各行の img を複製して作る飾り（aria-hidden）。
   左の欄の右端は斜めに切り、縁に黒と蛍光イエローの線（上の帯と同じ黒・黄）。行の罫線も絵の面の下に潜り、その縁で切れて見える */
.works,.about,.contact{padding:120px clamp(16px,6vw,96px)}
.works{--pad:clamp(16px,6vw,96px)}
.sec-title{margin:0;font:700 clamp(28px,4vw,48px)/1 var(--wide);letter-spacing:0}
.sec-title::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.4em;background:var(--y);border:2px solid var(--k);rotate:45deg;vertical-align:.1em}
.works__filters{display:flex;flex-wrap:wrap;gap:12px 32px;margin:32px 0 24px;font-family:var(--label)}
.works__kind,.works__genre{display:flex;flex-wrap:wrap;gap:4px}
.works__kind button,.works__genre button{padding:4px 12px;border:1px solid var(--k);background:var(--w);font:700 13px/1.4 var(--label)}
.works [aria-pressed="true"]{background:var(--k);color:var(--y)}
.works__grid{border-top:2px solid var(--k)}
.card{border-bottom:1px solid var(--k);position:relative}
/* 行：上の段にジャンル・新作・依頼元と年、下の段に大きな作品名。
   今の行（絵の面に出ている行）は、行頭のハザード柄が伸びて文字が右へずれたままになる */
.card__link{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:8px 12px;padding:20px 16px 20px 8px}
.card__link::before{content:"";position:absolute;left:0;top:0;bottom:0;width:24px;background:var(--hazard);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s var(--ease)}
.card__tag,.card__new,.card__title{transition:translate .2s var(--ease)}
.card.is-current .card__link::before{transform:scaleX(1)}
.card.is-current .card__tag,.card.is-current .card__new,.card.is-current .card__title{translate:32px 0}
/* 元の img はリンクの名前（alt）として残し、見た目からは外す。絵は絵の面に複製して出す */
.card__frame{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.card__tag{grid-column:1;grid-row:1;font:700 12px/1 var(--label);color:var(--g)}
.card__new{grid-column:2;grid-row:1;padding:2px 8px;background:var(--k);color:var(--y);font:700 10px/1 var(--label)}
.card__meta{grid-column:3;grid-row:1;justify-self:end;font:500 13px/1 var(--label)}
/* 右の 32px は、今の行で右へずれる分 */
.card__title{grid-column:1/-1;grid-row:2;margin-right:32px;font:900 clamp(20px,2.1vw,30px)/1.2 var(--body)}
/* 絵の面：黒の地 → 黄の線 → 絵の順に重ね、同じ斜めの縁をずらして 2px の黒と 4px の黄を見せる（形は下のメディアクエリ） */
.works__stage{position:sticky;top:64px;z-index:1;background:var(--k)}
.works__stage::before{content:"";position:absolute;inset:0;background:var(--y)}
/* overflow は、横長の絵と押し出した絵がページの横幅・高さを広げないように切る */
.works__pics{position:absolute;overflow:hidden;container-type:size}
.works__pic{position:absolute;inset:0;visibility:hidden}
.works__pic.is-on{visibility:visible}
/* 入ってくる絵の先頭（進む向きの端＝下の端）に付くピンクの帯。止まっているときは面の外にあって見えない */
.works__pic::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px;background:var(--pink)}
/* 縦長の作品：顔の位置を基準に面いっぱいへ（上下を少し切る） */
.works__img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--fx,50%) var(--fy,30%)}
/* 横長の MV：面いっぱいだと左右が大きく切れるので、顔（--fx）を面の真ん中に置いて切る（寄り）。
   端に隙間が出ないよう clamp で止める。translate の % は絵そのものの幅・高さ、cqw・cqh は面の幅・高さ */
.works__pic.is-wide .works__img{width:max(100cqw,100cqh * var(--ar));height:max(100cqh,100cqw / var(--ar));object-fit:fill;
translate:clamp(100cqw - 100%,50cqw - var(--fx,50%),0px) clamp(100cqh - 100%,40cqh - var(--fy,30%),0px)}
@media (min-width:821px){
/* PC：左の欄（幅 --lw）の右端を、上が狭く下が広い斜めに切る（--cut だけずれる）。絵の面は斜めの縁から右端まで、画面に貼り付く */
.p02 .works{--lw:max(400px,46vw);--cut:calc(var(--lw) * .12);display:grid;grid-template-columns:var(--lw) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;min-height:100svh;padding:0}
.p02 .works>*{grid-column:1;max-width:none;margin:0 calc(var(--cut) + 32px) 0 var(--pad)}
.p02 .works__head{grid-row:1;padding-top:120px}
.p02 .works__filters{grid-row:2;margin-top:32px;margin-bottom:24px}
.p02 .works__grid{grid-row:3;margin-right:0}
.p02 .works__empty{grid-row:4}
.p02 .works__more{grid-row:5;margin-top:40px;padding-bottom:120px}
/* 罫線は欄の右端まで引き、リンク（押せる所とフォーカスの枠）は斜めの縁の手前で止める */
.card__link{margin-right:calc(var(--cut) + 16px)}
.p02 .works__stage{grid-column:1/-1;grid-row:1/-1;align-self:start;height:calc(100svh - 64px);margin:0 0 0 calc(var(--lw) - var(--cut) - 6px);
clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%)}
.works__stage::before{clip-path:polygon(2px 0,100% 0,100% 100%,calc(var(--cut) + 2px) 100%)}
.works__pics{inset:0 0 0 6px;clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%)}
}
.works__more{margin-top:40px}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border:1px solid var(--k);font:700 14px/1 var(--label);text-decoration:none;background:var(--w)}
.btn::before{left:-1px;top:-1px}
.btn::after{content:"";width:24px;height:1px;background:currentColor}
.btn:hover{background:var(--k);color:var(--w)}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:64px;background:var(--k);color:var(--w);border-top:16px solid var(--y)}
.about .sec-title::before{border-color:var(--w)}
.about__figure{border:1px solid var(--y);padding:12px}
.about__name{margin:24px 0 0;font:900 56px/1 var(--wide);letter-spacing:.06em;color:var(--y)}
.about__history{display:grid;margin:32px 0;border-top:1px solid #444}
.about__history div{display:grid;grid-template-columns:6em 1fr;padding:12px 0;border-bottom:1px solid #444}
.about__history dt{font:700 13px/1.8 var(--label);color:var(--y)}.about__history dd{margin:0}
.about .btn{background:transparent;color:var(--w);border-color:var(--w)}
.about .btn:hover{background:var(--w);color:var(--k)}
.contact__mail a{display:inline-flex;align-items:center;min-height:44px;font:700 clamp(22px,3.4vw,44px)/1.2 var(--wide);text-decoration:none;background:linear-gradient(var(--y),var(--y)) 0 100%/100% 8px no-repeat}
.contact__sns{display:flex;gap:20px;margin-top:24px}
.contact__sns a{display:inline-flex;align-items:center;min-height:44px;font:700 13px/1 var(--label);text-decoration:none}
.contact__sns a:hover{text-decoration:underline 2px;text-underline-offset:6px}
.site-foot{display:flex;justify-content:space-between;align-items:center;padding:8px clamp(16px,6vw,96px);border-top:1px solid var(--k);font:500 12px/1 var(--label)}
.site-foot a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:820px){
.site-head{padding:0 8px;gap:8px}
.gnav{display:none}
/* スマホ：名前は窓の下に横書き。下から ボタン → 名前 → 下の目盛り → 窓。右の目盛りは下の目盛りと角で出会う */
.hero{--nm:12.4vw;--zone:88px 48px calc(140px + var(--nm)) 24px}
.hero__stage{filter:drop-shadow(8px 8px 0 var(--edge))}
.hero__name{left:24px;right:8px;bottom:84px;writing-mode:horizontal-tb;rotate:none;text-align:center}
.hero__ctrl{left:24px;right:8px;bottom:24px}
.hero__play{width:100%}
.hero__next{margin-left:auto}
.hero__lock{--gap:18px}
.hero__lock i{width:14px;height:40px}
.hero__rule--y{top:80px;right:8px;bottom:calc(114px + var(--nm));width:16px;background-size:2px 100%,100% 100%,8px 100%,4px 100%}
.hero__rule--x{left:24px;right:8px;bottom:calc(98px + var(--nm));height:16px;background-size:100% 2px,100% 100%,100% 8px,100% 4px}
.hero__rule--y .hero__mark{height:12px;translate:0 -6px;clip-path:polygon(0 50%,6px 0,100% 0,100% 100%,6px 100%)}
.hero__rule--x .hero__mark{width:12px;translate:-6px 0;clip-path:polygon(50% 0,100% 6px,100% 100%,0 100%,0 6px)}
.shot--1{--win:polygon(4% 0%,92% 0%,100% 6%,100% 96%,16% 100%,0% 88%);--ch:84%;--px:54%;--py:50%}
.shot--2{--win:polygon(0% 4%,82% 0%,100% 16%,100% 100%,0% 100%);--ch:180%;--px:54%;--py:38%}
.shot--3{--win:polygon(14% 0%,100% 0%,88% 100%,0% 100%);--ch:165%;--px:56%;--py:41%}
.shot--4{--win:polygon(0% 12%,100% 0%,100% 88%,0% 100%);--ch:150%;--px:61%;--py:44%}
/* スマホ：絵の面は絞り込みの下で画面の上に貼り付き、下の端を斜めに切る（左が低く右が高い）。
   行はその下を流れ、面の下の端のすぐ下に来た行が今の行になる（works-stage.js）。小さな絵の列は面と役目が重なるのでやめた */
.p02 .works{--cut:40px}
.p02 .works__stage{height:45svh;max-width:none;margin:0 calc(var(--pad) * -1);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}
.works__stage::before{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut) - 2px),0 calc(100% - 2px))}
.works__pics{inset:0 0 6px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}
.card__link{padding:16px 4px 16px 8px}
.card__link::before{width:8px}
.card.is-current .card__tag,.card.is-current .card__new,.card.is-current .card__title{translate:12px 0}
.card__title{margin-right:12px}
.about{grid-template-columns:1fr}
}

/* 共通のサイズ（tools/dev/build_patterns.py の SIZE_CSS） */
.works>*,.contact>*{max-width:1360px;margin-inline:auto}
.about{padding-inline:max(clamp(16px,5vw,64px),calc((100% - 1360px) / 2))}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-block:0;line-height:1.2}
.works__kind button,.works__genre button{line-height:1.2;padding-block:0;display:inline-flex;align-items:center}
.works__kind button{min-height:40px}
.works__genre button{min-height:36px}
.card__title{font-weight:700}
@media (min-width:821px){
  .works__grid:not(.is-list){grid-template-columns:repeat(auto-fill,minmax(max(280px,calc((100% - 96px) / 4)),1fr))}
}