@import url("../assets/base.css");
:root{--y:#e6ff00;--k:#000;--w:#fff;--pink:#ff2e88;
--display:"Bricolage Grotesque",sans-serif;--body:"Zen Kaku Gothic New",sans-serif}
body{background:var(--y);color:var(--k);font:500 16px/1.8 var(--body)}
.site-head{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:28px;padding:8px clamp(16px,3vw,36px);background:var(--y)}
/* ヘッダーは黄色の帯にする（下の黒い紹介の節に重なっても、メニューとロゴが消えないように） */
.logo{font:800 22px/1 var(--display);text-decoration:none;letter-spacing:-.03em}
.gnav ul{display:flex;gap:24px}.gnav a{font:800 15px/1 var(--display);text-decoration:none}
.gnav a:hover,.sns a:hover{text-decoration:underline 3px;text-underline-offset:5px}
.site-head__sns{margin-left:auto;display:flex;gap:16px}
.sns a{font:800 14px/1 var(--display);text-decoration:none}
/* ヒーロー：画面いっぱいの名前（静）、その手前にキャラ、いちばん手前に顔寄りの絵の帯（動）
   重なり：名前 1 < キャラ 2 < 帯 3。帯は作品なので、キャラにも隠させない */
@property --s{syntax:"<number>";inherits:true;initial-value:1}
.hero{--name:clamp(88px,23vw,380px);--pad:clamp(16px,3vw,36px);--side:clamp(0px,19vw,360px);--ease:cubic-bezier(.2,.8,.2,1);position:relative;min-height:100svh;padding:80px var(--pad) 24px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:clamp(12px,1.6vw,24px);overflow:hidden}
.hero__title{grid-area:1/1;justify-self:center;position:relative;z-index:1;padding-bottom:calc(var(--name) * .14)}
.hero__name{margin:0;font:800 var(--name)/.78 var(--display);letter-spacing:-.06em}
/* 名前の下に引く手描きの下線（マーカーで名前を強調する見立て）。字の下の余白だけに描き、字にも帯の絵にもかからない。
   名前と同じ大きさの単位（em）で描くので、どの幅でも同じ位置に来る */
.hero__mark{position:absolute;left:.02em;right:.04em;bottom:0;font-size:var(--name);height:.13em;width:auto;overflow:visible;pointer-events:none;fill:none;stroke:var(--pink);stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
.hero__mark path{stroke-dasharray:1 1.1;stroke-dashoffset:0}
/* キャラは顔（絵の幅の 68% の位置）が右の余白の真ん中に来るように置く（幅 = 高さ 122vh × 834/1200 なので、顔から右端まで約 27vh） */
.hero__chara{position:absolute;z-index:2;right:calc(var(--pad) + var(--side) / 2 - 27vh);bottom:-34vh;height:122vh;width:auto;max-width:none;pointer-events:none}
/* 帯：右の余白はキャラの居場所。帯の高さは画面の残り全部 */
.slices{grid-area:2/1;position:relative;z-index:3;display:flex;gap:8px;min-height:320px;max-height:760px;margin-right:var(--side)}
.slice{--z0:1;--z:1.8;--s:var(--z0);position:relative;flex:1 1 0;min-width:0;overflow:hidden;border:3px solid var(--k);background:var(--k);transition:flex-grow .5s var(--ease),--s .5s var(--ease)}
/* 顔の位置（--fx/--fy、ビルドが img に書く）を軸に、--s 倍に寄せる。
   translate は顔を帯の中央へ動かすが、絵の端が見えない範囲で止める（clamp の上限と下限） */
.slice img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  object-position:var(--fx,50%) var(--fy,30%);transform-origin:var(--fx,50%) var(--fy,30%);scale:var(--s);
  translate:clamp(calc((1 - var(--s)) * (100% - var(--fx,50%))),calc(50% - var(--fx,50%)),calc((var(--s) - 1) * var(--fx,50%)))
            clamp(calc((1 - var(--s)) * (100% - var(--fy,30%))),calc(50% - var(--fy,30%)),calc((var(--s) - 1) * var(--fy,30%)))}
.slice span{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:4px 8px;background:var(--pink);color:var(--k);font:800 13px/1.3 var(--display);opacity:0;translate:0 8px;transition:opacity .15s,translate .3s var(--ease)}
.slice:focus-visible{outline:4px solid var(--pink);outline-offset:2px}
/* 広げる：キーボードのフォーカス、タッチの1回目のタップ（slices.js が .is-open を付ける）、マウスを乗せたとき */
.slice:is(:focus-visible,.is-open){flex-grow:4}
.slice:is(:focus-visible,.is-open) span{opacity:1;translate:0 0;transition-delay:.18s}
@media (hover:hover){
  .slice:hover{flex-grow:4}
  .slice:hover span{opacity:1;translate:0 0;transition-delay:.18s}
  .slices:hover .slice:not(:hover){flex-grow:1;--s:var(--z0)}
  .slices:hover .slice:not(:hover) span{opacity:0;translate:0 8px;transition-delay:0s}
}
/* 登場：帯が下から順に差し込まれ、少し遅れてキャラが上がり、最後に線を引く。約1.5秒で止まる */
@media (prefers-reduced-motion:no-preference){
  .slice:is(:focus-visible,.is-open){--s:var(--z)}
  @media (hover:hover){.slices .slice:hover{--s:var(--z)}}
  .slice{animation:slot .6s var(--ease) backwards}
  .slice:nth-child(2){animation-delay:.07s}.slice:nth-child(3){animation-delay:.14s}
  .slice:nth-child(4){animation-delay:.21s}.slice:nth-child(5){animation-delay:.28s}
  .hero__chara{animation:rise .8s var(--ease) .42s backwards}
  .hero__mark path{animation:draw .6s cubic-bezier(.65,0,.35,1) .9s backwards}
}
@keyframes slot{from{translate:0 calc(100% + 32px)}}
@keyframes rise{from{translate:0 16vh}}
@keyframes draw{from{stroke-dashoffset:1.05}}
:focus-visible{outline-color:var(--pink)}
/* 本文 */
.works,.about,.contact{padding:120px clamp(16px,3vw,36px)}
.sec-title{margin:0;font:800 clamp(56px,10vw,160px)/.85 var(--display);letter-spacing:-.05em}
.sec-lead{margin:16px 0 0;font-weight:700}
.works__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;border-bottom:4px solid var(--k);padding-bottom:16px}
.works__filters{display:flex;flex-wrap:wrap;gap:16px 40px;margin:24px 0 40px}
.works__kind,.works__genre{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;gap:8px;background:var(--y)}
.works__kind button,.works__genre button{position:relative;z-index:1;padding:8px 12px;border:2px solid var(--k);background:transparent;font-weight:700}
.works__kind button{font:800 18px/1.2 var(--display);border-width:3px;padding-inline:16px}
[aria-pressed="true"]{background:var(--k)!important;color:var(--y)}
/* 押している絞り込みの黒い面は、1枚の面（works-rail.js が足す .works__pill）が次のボタンへ滑って描く（参考：yejji.net/works の下線）。
   面は黄色の「差の合成」なので、下の黄色は黒に、黒い字は黄色に、滑っている途中もその場で反転する */
.has-pill [aria-pressed="true"]{background:transparent!important;color:var(--k)}
.works__pill{position:absolute;left:0;top:0;z-index:2;width:100px;background:var(--y);mix-blend-mode:difference;transform-origin:0 0;pointer-events:none}
.is-pill-ready .works__pill{transition:transform .45s cubic-bezier(.16,1,.3,1)}
/* 作品：JS なしとスマホは縦の石垣（段組み）。絵は切らずに縦横比のまま。題などは絵の下に置き、絵に重ねない */
.works__grid{columns:4 280px;column-gap:16px}
.card{break-inside:avoid;margin-bottom:16px}
.card__link{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding-bottom:12px;background:var(--k);color:var(--w)}
.card__frame{flex:0 0 100%;border:3px solid var(--k);background:var(--k)}
.card__img{height:auto;object-fit:contain}
.card__link:hover .card__title{text-decoration:underline 2px;text-underline-offset:4px}
.card__tag{margin:8px 0 0 12px;padding:2px 8px;background:var(--y);color:var(--k);font-size:12px;font-weight:900}
.card__new{margin-top:8px;padding:2px 8px;background:var(--pink);color:var(--k);font:800 12px/1.4 var(--display)}
.card__title{flex:0 0 100%;padding:4px 12px 0;font-weight:900}.card__meta{flex:0 0 100%;padding:0 12px;font-size:12px;opacity:.75}
.works__more{margin-top:40px}
.works__ticks{display:none}
/* PC：横一列（works-rail.js が .is-rail を付ける。参考：yejji.net/works）。
   節の高さ＝画面の高さ＋流す量（--works-h）。中の層（見出し・絞り込み・列・目盛り・ボタン）は全部同じ升目に重ね、
   どれも高さ 100vh で貼り付くので、同時に貼り付いて同時に離れる。層は押せる部品だけが押下を受ける */
@media (min-width:821px){
.works.is-rail{--pad:clamp(16px,3vw,36px);--stage-top:72px;--title:clamp(56px,min(10vw,14vh),160px);display:grid;grid-template:100% / 100%;height:var(--works-h,100vh);padding:0}
.works.is-rail>*{grid-area:1/1;position:sticky;top:0;z-index:2;height:100vh;max-width:none;margin:0;pointer-events:none}
.works.is-rail :is(button,a,.works__tick){pointer-events:auto}
.works.is-rail .works__head{display:block;border:0;padding:var(--stage-top) var(--pad) 0}
.works.is-rail .sec-title{font-size:var(--title);padding-bottom:8px;border-bottom:4px solid var(--k)}
/* お仕事／趣味は見出しの行の右端（線の上）、ジャンルは線の下 */
.works.is-rail .works__filters{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:24px;padding:calc(var(--stage-top) + var(--title) * .85 - 40px) var(--pad) 0}
.works.is-rail .works__kind{align-self:flex-end}
.works.is-rail .works__grid{z-index:1;overflow:clip;columns:auto;pointer-events:auto;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.works.is-dragging .works__grid{cursor:grabbing}
.works.is-rail .works__grid::before{content:"";position:absolute;inset:0;background:var(--y);opacity:0;transition:opacity .3s}
.works.is-rail .card{position:absolute;left:0;top:0;margin:0;transform-origin:0 0;will-change:transform}
.works.is-rail .card__link{display:block;width:100%;height:100%;padding:0;background:none;cursor:zoom-in}
.works.is-rail .card__frame{width:100%;height:100%}
.works.is-rail .card__img{height:100%}
/* 一覧は絵だけ見せる。題などは読み上げでは読める（display:none にしない） */
.works.is-rail :is(.card__tag,.card__title,.card__meta){position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.works.is-rail .card__new{position:absolute;left:0;bottom:calc(100% + 6px);margin:0}
.works.is-rail .card__link:focus-visible{outline:0}
.works.is-rail .card__link:hover .card__title{text-decoration:none}
.works.is-rail .card__link:focus-visible .card__frame{outline:4px solid var(--pink);outline-offset:4px}
.works.is-rail .works__more{display:flex;justify-content:flex-end;align-items:flex-end;padding:0 var(--pad) 28px}
.works.is-rail .works__empty{display:grid;place-items:center;font-weight:700}
.works.is-rail .works__ticks{display:flex;align-items:flex-end;padding:0 var(--pad) 28px}
.works__tick{display:flex;justify-content:center;align-items:flex-end;width:44px;height:44px;cursor:pointer}
.works__tick span{width:3px;height:10px;background:var(--k);transform-origin:50% 100%}
.works__tick.is-current span{background:var(--pink)}
/* 全面の表示：黄色の幕が手前に来て、今の絵が画面の高さいっぱい。題・ジャンル・依頼主と年は絵の左下の余白に */
.works:is(.is-full,.is-closing) .works__grid{z-index:30}
.works.is-full .works__grid{cursor:auto;touch-action:none}
.works.is-full .works__grid::before{opacity:1}
.works.is-full .card.is-current .card__link{display:flex;flex-wrap:wrap;align-content:flex-end;align-items:center;gap:8px;width:var(--iw);height:calc(100% + var(--ib));margin-left:calc(-1 * var(--ox));color:var(--k);cursor:zoom-out}
.works.is-full .card.is-current .card__frame{position:absolute;inset:0}
.works.is-full .card.is-current :is(.card__tag,.card__new,.card__title,.card__meta){position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
.works.is-full .card.is-current :is(.card__tag,.card__new){padding:2px 8px}
.works.is-full .card.is-current .card__tag{background:var(--k);color:var(--y);font-size:13px}
.works.is-full .card.is-current .card__title{flex:0 0 100%;padding:0;font-size:clamp(20px,2vw,28px);line-height:1.3}
.works.is-full .card.is-current .card__meta{flex:0 0 100%;padding:0;font-size:14px;opacity:1}
}
.btn{display:inline-block;padding:16px 32px;background:var(--k);color:var(--y);font:800 18px/1 var(--display);text-decoration:none}
.btn:hover{background:var(--pink);color:var(--w)}
.btn--ghost{background:transparent;color:var(--k);border:3px solid var(--k)}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:48px;background:var(--k);color:var(--y)}
.about__figure{border:3px solid var(--y)}
.about__name{margin:24px 0 0;font:800 40px/1 var(--display)}
.about__text{max-width:36em;color:var(--w)}
.about__history{display:grid;gap:4px;margin:24px 0}.about__history div{display:grid;grid-template-columns:5em 1fr;border-top:1px solid var(--y);padding-top:8px}
.about__history dd{margin:0;color:var(--w)}
.about .btn--ghost{color:var(--y);border-color:var(--y)}
.contact__text{font-weight:700;font-size:18px}
.contact__mail a{font:800 clamp(28px,5vw,64px)/1.1 var(--display);letter-spacing:-.03em;text-decoration:none;border-bottom:6px solid var(--k)}
.contact__mail a:hover{color:var(--pink);border-color:var(--pink)}
.contact__sns{display:flex;gap:24px;margin-top:32px}
.contact__sns a{font-size:22px}
.site-foot{display:flex;justify-content:space-between;padding:16px clamp(16px,3vw,36px);border-top:4px solid var(--k);font-weight:700;font-size:13px}
@media (max-width:820px){
.gnav{display:none}
.hero{--name:28vw;padding-top:72px;grid-template-rows:auto auto 1fr}
.hero__chara{height:70vh;bottom:-40vh;right:-12%}
.slices{margin-right:0;height:58svh;min-height:300px;gap:4px}
.slice span{left:8px;bottom:8px;max-width:calc(100% - 16px);font-size:12px}
.works__grid{columns:2;column-gap:12px}
.card{margin-bottom: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))}
}