@import url("../assets/base.css");
:root{--y:#ffd400;--k:#151515;--red:#e5242b;--w:#fff;
--pink:#ff2e88;--neon:#e8ff00;--led:var(--neon);
--sign:"M PLUS 1",sans-serif;--dot:"DotGothic16",monospace;
--stripe:repeating-linear-gradient(-45deg,var(--y) 0 22px,var(--k) 22px 44px);
--ease:cubic-bezier(.22,1,.36,1);--head:70px;--gut:clamp(16px,4vw,40px);
/* ピンクのビス：つや＋マイナスの溝 */
--bolt:radial-gradient(circle at 34% 30%,#ffd3e6 0 2px,transparent 3px),linear-gradient(45deg,transparent 41%,#7a0036 41% 59%,transparent 59%),var(--pink)}
body{background:var(--y);color:var(--k);font:500 16px/1.8 var(--sign)}
/* 黄黒の縞は border-image の切り出しを縞の太さにして、斜線のまま見せる */
.site-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;height:var(--head);padding:0 var(--gut);background:var(--k);color:var(--w);border-bottom:10px solid transparent;border-image:var(--stripe) 10}
.site-head :focus-visible{outline-color:var(--neon)}
.logo{font:900 24px/1 var(--sign);color:var(--y);text-decoration:none}
.gnav ul{display:flex;gap:8px}
.gnav a{display:flex;align-items:center;min-height:44px;padding:0 16px;background:var(--w);color:var(--k);font-weight:900;text-decoration:none;border-radius:4px;transition:background-color .16s var(--ease)}
.gnav a:hover{background:var(--y)}
.site-head__sns{margin-left:auto;display:flex;gap:8px}
.sns a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;background:var(--red);color:var(--w);font-weight:900;font-size:13px;text-decoration:none;border-radius:4px;transition:background-color .16s var(--ease),color .16s var(--ease)}
.sns{--sns-mono:#fff;--sns-pixiv:#fff}
.sns a:hover{background:var(--y);color:var(--k);--sns-mono:#000;--sns-pixiv:#0096fa}

/* ヒーロー：ビス留めの看板（少し傾けて貼る）。キャラは顔の寄りで、頭と手が枠の上に飛び出す */
.hero{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto auto;gap:24px 32px;min-height:calc(100svh - var(--head));padding:112px var(--gut) 0;overflow:hidden}
.board{position:relative;grid-row:1/3;border:14px solid var(--k);background:var(--k);min-height:400px;rotate:-1.2deg;animation:clunk .8s var(--ease) both}
.board::after{content:"";position:absolute;inset:6px;z-index:1;border:3px solid var(--w);pointer-events:none}
.board__art{position:absolute;inset:0;overflow:hidden}
.board__art img{position:absolute;left:0;top:-40px;width:100%;height:calc(100% + 120px);max-width:none;object-fit:cover}
/* 枠の下と左右では切り、上だけはみ出させる（T字の切り抜き） */
.board__pop{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:polygon(-60% -300%,160% -300%,160% 0,100% 0,100% 100%,0 100%,0 0,-60% 0)}
.board__chara{position:absolute;left:var(--ax);top:var(--ay);height:var(--zoom);width:auto;max-width:none;translate:calc(var(--fx,50%) * -1) calc(var(--fy,30%) * -1);--ax:62%;--ay:1%;--zoom:340%}
.bolt{position:absolute;z-index:3;width:20px;height:20px;border-radius:50%;background:var(--bolt);border:2px solid var(--k)}
.bolt:nth-of-type(1){left:16px;top:16px}.bolt:nth-of-type(2){right:16px;top:16px}.bolt:nth-of-type(3){left:16px;bottom:16px}.bolt:nth-of-type(4){right:16px;bottom:16px}
/* 回転灯（看板の上に載せる）。光の帯が横切って、少し止まる */
.lamp{position:absolute;z-index:3;left:24px;top:-26px;width:56px;height:12px;background:var(--k);border-radius:2px}
.lamp::before{content:"";position:absolute;left:8px;right:8px;bottom:100%;height:32px;border:3px solid var(--k);border-bottom:0;border-radius:20px 20px 0 0;background:linear-gradient(90deg,transparent 40%,#fff 50%,transparent 60%) 90% 0/300% 100% no-repeat,var(--neon);box-shadow:0 0 18px 2px rgba(232,255,0,.55);animation:sweep 2.4s linear infinite}
.tate{grid-column:2;grid-row:1;align-self:start;margin:0;padding:24px 16px;background:var(--k);outline:2px solid #3c3c3c;outline-offset:-10px;writing-mode:vertical-rl;font:800 clamp(48px,6vw,88px)/1 var(--sign);letter-spacing:.1em;rotate:2.4deg;transform-origin:50% 0}
/* ネオン管の文字（光らせるのはここだけ） */
.tate span{color:#ffd9ea;text-shadow:0 0 2px var(--pink),0 0 8px var(--pink),0 0 20px var(--pink),0 0 36px rgba(255,46,136,.6);animation:neon-on 1s steps(1,end) .5s both}
.tate.is-swing{animation:swing .9s var(--ease)}
.hero__name{grid-column:1;grid-row:3;margin:0 0 8px;font:900 clamp(56px,10vw,150px)/.9 var(--sign);letter-spacing:-.03em}
/* 止まれの形の標識。矢印は指す方向（下）へ動く */
.sign{grid-column:2;grid-row:2/4;align-self:end;justify-self:center;margin-bottom:24px;display:grid;justify-items:center;align-content:start;gap:4px;width:152px;height:132px;padding-top:20px;background:var(--red);color:var(--w);text-decoration:none;clip-path:polygon(0 0,100% 0,50% 100%);font:900 22px/1.15 var(--sign);text-align:center;rotate:-3deg;transition:background-color .16s var(--ease)}
.sign__arrow{width:16px;height:16px;margin-top:4px;border:solid var(--neon);border-width:0 5px 5px 0;rotate:45deg;transition:translate .24s var(--ease)}
.sign:hover,.sign:focus-visible{background:var(--k)}
.sign:hover .sign__arrow,.sign:focus-visible .sign__arrow{translate:0 8px}
/* 電光掲示板：消えている LED の点を地に敷き、文字も点で抜く */
.led{position:relative;grid-column:1/-1;margin:0 calc(var(--gut) * -1);background:radial-gradient(circle,#2b2b20 1px,transparent 1.5px) 0 0/4px 4px,var(--k);overflow:hidden;border-top:10px solid transparent;border-image:var(--stripe) 10}
.led__text{display:flex;margin:0;padding:12px 0;width:max-content;color:var(--led);font:400 24px/1 var(--dot);white-space:nowrap;text-shadow:0 0 6px rgba(232,255,0,.7);-webkit-mask:radial-gradient(circle,#000 1.4px,transparent 1.7px) 0 0/4px 4px;mask:radial-gradient(circle,#000 1.4px,transparent 1.7px) 0 0/4px 4px;animation:led 40s linear infinite}
.led__text>span{padding-left:24px}
.led__text b{margin-left:24px;color:var(--pink);font-weight:400;text-shadow:0 0 6px rgba(255,46,136,.8)}
.led__stop{position:absolute;top:0;right:0;bottom:0;z-index:1;min-width:88px;padding:0 16px;border:0;border-left:4px solid var(--y);background:var(--k);color:var(--neon);font:400 16px/1 var(--dot);transition:background-color .16s var(--ease)}
.led__stop:hover{background:#333}
.led__stop:focus-visible{outline-offset:-7px}
.hero.is-still .led__text,.hero.is-still .lamp::before{animation-play-state:paused}
@keyframes clunk{0%{translate:0 -40px;rotate:-6deg;opacity:0}40%{translate:0 6px;rotate:.8deg;opacity:1}60%{translate:0 -4px;rotate:-2.4deg}80%{translate:0 2px;rotate:-.6deg}100%{translate:0 0;rotate:-1.2deg}}
@keyframes neon-on{0%{color:#4d1631;text-shadow:none}18%{color:#ffd9ea;text-shadow:0 0 2px var(--pink),0 0 8px var(--pink),0 0 20px var(--pink)}30%{color:#4d1631;text-shadow:none}62%{color:#ffd9ea;text-shadow:0 0 2px var(--pink),0 0 8px var(--pink),0 0 20px var(--pink),0 0 36px rgba(255,46,136,.6)}}
@keyframes swing{0%{rotate:2.4deg}25%{rotate:-4deg}50%{rotate:5deg}75%{rotate:1deg}100%{rotate:2.4deg}}
@keyframes sweep{0%{background-position:90% 0,0 0}50%,100%{background-position:10% 0,0 0}}
@keyframes led{to{transform:translateX(-50%)}}

/* 本文 */
.works,.about,.contact{padding:96px var(--gut)}
.works{background:var(--w)}
.sec-title{position:relative;display:inline-flex;align-items:center;margin:0;padding:8px 44px;background:var(--k);color:var(--y);font:900 clamp(36px,5vw,64px)/1.1 var(--sign);border:4px solid var(--k);outline:3px solid var(--y);outline-offset:-10px;rotate:-1.5deg}
.sec-title::before,.sec-title::after{content:"";position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--bolt);border:2px solid var(--k)}
.sec-title::before{left:12px}.sec-title::after{right:12px}
.works__filters{display:grid;gap:12px;margin:32px 0}
.works__kind,.works__genre{display:flex;flex-wrap:wrap;gap:8px}
.works__kind button{padding:8px 24px;border:4px solid var(--k);background:var(--y);font:900 18px/1.2 var(--sign);border-radius:6px}
.works__genre button{padding:4px 16px;border:3px solid var(--k);background:var(--w);font-weight:800;border-radius:6px}
.works__kind button,.works__genre button{transition:background-color .16s var(--ease),color .16s var(--ease)}
.works__genre button:hover{background:var(--y)}
[aria-pressed="true"]{background:var(--red)!important;color:var(--w);border-color:var(--k)}
.works__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:32px 24px}
/* 作品カードは小さな看板：上の2か所をピンクのビスで留め、少しずつ傾けて貼る */
.card__link{position:relative;padding:20px 12px 12px;background:var(--k);border-radius:6px;rotate:-.8deg;transition:background-color .16s var(--ease),rotate .24s var(--ease)}
.card:nth-child(even) .card__link{rotate:.8deg}
.card__link::before,.card__link::after{content:"";position:absolute;top:6px;width:8px;height:8px;border-radius:50%;background:var(--pink)}
.card__link::before{left:50%;margin-left:-28px}.card__link::after{left:50%;margin-left:20px}
.card__link:hover,.card__link:focus-visible{background:var(--red);rotate:0deg}
.card__frame{aspect-ratio:3/4;border:4px solid var(--w)}
.card__tag{display:inline-block;margin-top:12px;padding:0 8px;background:var(--y);color:var(--k);font-size:12px;font-weight:900}
/* 新作のステッカー（ピンク地に黒文字でコントラストを確保） */
.card__new{position:absolute;top:-16px;left:-12px;z-index:1;padding:8px 12px;background:var(--pink);color:var(--k);font:900 14px/1 var(--sign);border:3px solid var(--k);border-radius:4px;rotate:-8deg}
.card__title{display:block;margin-top:4px;color:var(--w);font-weight:900}.card__meta{display:block;color:#bbb;font:400 12px/1.6 var(--dot)}
.works__more{margin-top:40px}
.btn{display:inline-block;padding:16px 28px;background:var(--k);color:var(--y);font:900 18px/1 var(--sign);text-decoration:none;border-radius:6px;box-shadow:0 6px 0 var(--red);transition:translate .12s var(--ease),box-shadow .12s var(--ease)}
.btn:hover{translate:0 3px;box-shadow:0 3px 0 var(--red)}
.btn--ghost{background:var(--w);color:var(--k);border:3px solid var(--k)}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:56px;background:var(--y)}
.about__figure{position:relative;align-self:start;border:12px solid var(--k);background:var(--k);rotate:1deg}
.about__figure::before,.about__figure::after{content:"";position:absolute;z-index:1;top:8px;width:16px;height:16px;border-radius:50%;background:var(--bolt);border:2px solid var(--k)}
.about__figure::before{left:8px}.about__figure::after{right:8px}
.about__name{margin:20px 0 0;font:900 44px/1 var(--sign)}
.about__history{margin:24px 0;display:grid;gap:8px;background:var(--k);padding:16px 20px;border-radius:6px}
.about__history div{display:flex;gap:16px}
.about__history dt{font:400 18px/1.6 var(--dot);color:var(--led)}.about__history dd{margin:0;color:var(--w)}
.contact{background:var(--k);color:var(--w);text-align:center;border-top:14px solid transparent;border-image:var(--stripe) 14}
.contact .sec-title{background:var(--y);color:var(--k);outline-color:var(--k)}
.contact__mail a{font:900 clamp(22px,3.6vw,44px)/1.4 var(--sign);color:var(--y)}
.contact__sns{display:flex;justify-content:center;gap:8px;margin-top:20px}
.site-foot{display:flex;justify-content:space-between;padding:16px var(--gut);background:var(--k);color:#bbb;font:400 13px/1.6 var(--dot)}
@media (max-width:820px){
.gnav{display:none}
.hero{padding-top:72px;column-gap:16px}
.board{grid-column:1/-1;grid-row:1;min-height:320px}
.board__chara{--ax:56%;--ay:2%;--zoom:300%}
.lamp{left:12px}
.tate{grid-row:2;font-size:40px;padding:16px 8px}
.hero__name{grid-row:2;align-self:start}
.sign{grid-row:3;grid-column:1;justify-self:start;width:120px;height:104px;font-size:18px;padding-top:12px}
.about{grid-template-columns:1fr}
.works__grid{grid-template-columns:1fr 1fr;gap:20px 12px}
}
/* 動きを減らす設定：揺れ・点滅・回転・流れる文字を止め、掲示板は折り返して全文を見せる */
@media (prefers-reduced-motion:reduce){
.board,.tate span,.tate.is-swing,.lamp::before,.led__text{animation:none}
.led__text{width:auto;padding-right:16px;line-height:1.6;white-space:normal}
.led__text>span[aria-hidden]{display:none}
.led__stop{display:none}
.sign__arrow,.card__link{transition:none}
}

/* 共通のサイズ（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))}
}