@import url("../assets/base.css");
:root{--ink:#111;--paper:#fff;--mist:#f2f2f2;
--pink:#ff2e88;--yellow:#e8ff00;--sky:#38c6ff;--violet:#9d7bff;--orange:#ff6b2c;
--display:"Syne",sans-serif;--body:"Noto Sans JP",sans-serif;
--ease:cubic-bezier(.76,0,.16,1);
/* 背表紙（PC は左の縦帯、スマホは上の横帯）。本文はその分だけ空ける */
--spine:clamp(96px,8.4vw,128px);--bar:0px}
body{background:var(--paper);color:var(--ink);font:400 15px/1.8 var(--body);padding-left:var(--spine)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* 項目ごとの色（MVイラスト・キャラクターデザイン・キービジュアル・About・Contact の順）。壁・背表紙・チップ・絵（ルーペの網点と縁）で同じ並び */
.wall:nth-child(1),.spine__tint:nth-child(1),.chip:nth-child(1),.art:nth-child(1){--c:var(--pink)}
.wall:nth-child(2),.spine__tint:nth-child(2),.chip:nth-child(2),.art:nth-child(2){--c:var(--yellow)}
.wall:nth-child(3),.spine__tint:nth-child(3),.chip:nth-child(3),.art:nth-child(3){--c:var(--sky)}
.wall:nth-child(4),.spine__tint:nth-child(4),.chip:nth-child(4),.art:nth-child(4){--c:var(--violet)}
.wall:nth-child(5),.spine__tint:nth-child(5),.chip:nth-child(5),.art:nth-child(5){--c:var(--orange)}

/* ===== 背表紙：名前を大きく縦に。色は今の項目の色（panel.js が上から塗り替える） ===== */
.spine{position:fixed;z-index:29;left:0;top:0;width:var(--spine);height:100vh;height:100dvh;border-right:3px solid var(--ink);overflow:hidden}
.spine__tints{position:absolute;inset:0}
.spine__tint,.wall{position:absolute;inset:0;background:var(--c);clip-path:inset(0 0 100% 0)}
.spine__tint.is-on,.wall.is-on{clip-path:none;z-index:1}
.spine__tint.is-in,.wall.is-in{z-index:2}
.spine__name{position:absolute;z-index:3;left:50%;top:24px;translate:-50% 0;margin:0;writing-mode:vertical-rl;
font:800 min(calc(var(--spine) * .9),calc((100dvh - 330px) / 5.95))/1 var(--display);letter-spacing:-.03em;white-space:nowrap}

/* SNS は背表紙の下に縦に並べる（どの節でも見える）。ヘッダーの名前とメニューは背表紙と見本帳が持つので出さない */
.site-head{position:fixed;z-index:30;left:0;bottom:0;width:var(--spine);padding-bottom:20px;display:flex;justify-content:center}
.site-head .logo,.site-head .gnav{display:none}
.site-head__sns{display:flex;flex-direction:column;align-items:center;gap:8px}
/* 公式ロゴは白い無地の台（チップの頭と同じ白と墨の縁）に載せる。背表紙の色が項目ごとに替わっても、台の上は
   いつも明るい地なので、各社の決まりどおり X・Instagram は黒、pixiv は青。乗ると台が墨になり、ロゴはどれも白になる */
.sns a{--sns-mono:#000;--sns-pixiv:#0096fa;width:52px;height:52px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);transition:background-color .15s}
.sns a:hover{--sns-mono:#fff;--sns-pixiv:#fff;background:var(--ink)}

/* ===== トップ：高さのある区間の中で舞台を貼り付け、段が変わるたびに見本帳を1枚めくる ===== */
/* 舞台は絵を下の端まで全面に出し、見本帳の束を左下に重ねる（利用者の指示による「絵の上に UI を重ねない」の例外）。
   束は前の版の 80% の寸法（scale で縮めず寸法を変えて、文字をにじませない）。顔は束の届く範囲（綴じ穴から --L）の外に置く */
.hero{--n:5;--step:6deg;
--L:clamp(352px,38.4vw,688px);--h:calc(var(--L) * .125);--p:calc(var(--h) * .42);
--ox:24px;--oy:24px;--lift:8px;
--big:min(calc(var(--h) * .56),calc((var(--L) - var(--p) * 2 - 40px) / 10.4));--small:clamp(14px,1.12vw,16px);
position:relative;height:calc(var(--n) * 72svh)}
.stage{position:sticky;top:var(--bar);height:calc(100svh - var(--bar));min-height:560px;overflow:hidden;background:var(--paper)}
/* 壁＝項目の色。ふだんは絵に隠れていて、めくる瞬間だけ、出ていく絵と入ってくる絵のすき間に新しい色が見える */
.walls{position:absolute;z-index:0;inset:0}
/* 絵（キャラの層＋背景の層）。舞台のどこを押しても、その項目へ移動する */
.arts{position:absolute;z-index:1;inset:0;overflow:hidden}
.art{position:absolute;inset:0;overflow:hidden;visibility:hidden;cursor:pointer}
.art.is-on{visibility:visible}
/* フォーカスの輪（キャラの層より手前に描く。キーボードで乗っているときだけ） */
.art::after{content:"";position:absolute;z-index:1;inset:0;box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 7px var(--paper);opacity:0}
.art:focus-visible{outline:none}
.art:focus-visible::after{opacity:1}
.art img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none}
.art__bg{inset:0;width:100%;height:100%;object-fit:cover}
/* 寄り：顔（--fx/--fy）を決めた点（--tx/--ty）に合わせ、絵の高さの何倍か（--hh）で置く */
.art__chara{left:var(--tx);top:var(--ty);width:auto;height:var(--hh);translate:calc(var(--fx,50%) * -1) calc(var(--fy,30%) * -1)}
.art:nth-child(1){--tx:60%;--ty:38%;--hh:206%}
.art:nth-child(2){--tx:58%;--ty:32%;--hh:182%}
.art:nth-child(3){--tx:60%;--ty:38%;--hh:182%}
.art:nth-child(4){--tx:62%;--ty:46%;--hh:96%}
.art:nth-child(5){--tx:60%;--ty:34%;--hh:194%}

/* ルーペ（PC のマウスだけ）：絵の上のカーソルを中心に丸いレンズを出し、今の絵を 2.4 倍にして網点で刷った見え方にする。
   印刷の点をルーペで覗いた見立てなので、網点は拡大しても同じ大きさ（レンズに付いている）。明るい所は項目の色の点、暗い所は黒のまま。
   利用者が選んだ「絵の上に UI を重ねない」の例外（文字は入れない・押せない）。中の絵は panel.js が HTML の img から複製する（alt=""・aria-hidden）。
   .arts を大きさの基準にして（cqw・cqh）、レンズの中の絵を舞台と同じ大きさで置く。位置と拡大は panel.js が transform で決める */
.arts{container-type:size}
.loupe{position:absolute;left:0;top:0;width:var(--lens);height:var(--lens);pointer-events:none;visibility:hidden;
--lens:clamp(200px,min(18vw,30vh),260px)}
.loupe.is-on{visibility:inherit}
/* 地は墨（縁の墨の輪とレンズの中の境目に、明るい細い線が出ないように） */
.loupe__lens{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;background:var(--ink);
box-shadow:0 0 0 5px var(--ink),0 0 0 11px var(--c),0 18px 40px rgba(17,17,17,.35)}
.loupe__lens::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--c) 0 36%,transparent 38%) 0 0/9px 9px;mix-blend-mode:multiply}
.loupe__pic{position:absolute;left:0;top:0;width:100cqw;height:100cqh;transform-origin:0 0}
.loupe__pic img{filter:grayscale(1) brightness(1.25) contrast(1.3)}

/* 色見本帳：.deck の原点が綴じ穴。束は絵の手前。めくるチップは綴じ穴を軸に一周して束の後ろへ回る（押せる合図は、絵に乗ると手前のチップが持ち上がること） */
.deck{position:absolute;z-index:2;left:calc(var(--ox) + var(--p));bottom:calc(var(--oy) + var(--h) / 2);width:0;height:0}
.chip{position:absolute;left:calc(var(--p) * -1);top:calc(var(--h) / -2);width:var(--L);height:var(--h);
transform-origin:var(--p) 50%;rotate:calc(var(--step) * var(--k,0) * -1);transition:translate .18s var(--ease);
border:3px solid var(--ink);border-radius:calc(var(--h) * .16);
background:linear-gradient(90deg,var(--paper) 0 calc(var(--p) * 2),var(--ink) 0 calc(var(--p) * 2 + 3px),var(--c) 0);
box-shadow:0 8px 20px rgba(17,17,17,.2)}
.chip[data-pos="0"]{--k:0;z-index:5}.chip[data-pos="1"]{--k:1;z-index:4}.chip[data-pos="2"]{--k:2;z-index:3}
.chip[data-pos="3"]{--k:3;z-index:2}.chip[data-pos="4"]{--k:4;z-index:1}
.chip__link{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:flex-start;
padding:calc(var(--h) * .1) calc(var(--h) * .24) 0 0;border-radius:inherit;text-decoration:none}
.chip__label{font:800 var(--small)/1.2 var(--display);white-space:nowrap;text-decoration:underline 0 transparent;text-underline-offset:5px;transition:text-decoration-color .15s}
/* いちばん上のチップ：今の項目の名前を大きく */
.chip[data-pos="0"] .chip__link{justify-content:flex-start;align-items:center;padding:0 0 0 calc(var(--p) * 2 + 20px)}
.chip[data-pos="0"] .chip__label{font-size:var(--big);letter-spacing:-.02em}
.chip:hover,.chip:focus-within,.stage:has(.art:hover,.art:focus-visible) .chip[data-pos="0"]{translate:0 calc(var(--lift) * -1)}
.chip__link:hover .chip__label{text-decoration:underline 3px var(--ink)}
.chip__link:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.chip:focus-within{z-index:8}   /* キーボードで乗ったチップは束の手前に出して、全体と輪を見せる */
/* 綴じ金具＝自動の切り替えの止める／再開ボタン。めくる絵より前（最初の Tab）に置き、位置だけ綴じ穴に重ねる。
   動きを減らす設定でボタンを隠しても、金具の形は ::after で残す */
.stage{--r:clamp(44px,calc(var(--p) * 1.1),56px)}
.deck::after{content:"";position:absolute;z-index:6;left:calc(var(--r) / -2);top:calc(var(--r) / -2);width:var(--r);height:var(--r);
border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--paper)}
.rivet{position:absolute;z-index:4;left:calc(var(--ox) + var(--p) - var(--r) / 2);bottom:calc(var(--oy) + var(--h) / 2 - var(--r) / 2);
width:var(--r);height:var(--r);padding:0;border:0;border-radius:50%;background:var(--ink);
box-shadow:0 0 0 3px var(--paper);display:grid;place-items:center;transition:background-color .15s}
.rivet::before{content:"";width:16px;height:18px;background:linear-gradient(90deg,var(--yellow) 0 5px,transparent 0 11px,var(--yellow) 0)}
.rivet[data-state="paused"]::before{width:16px;margin-left:4px;background:var(--yellow);clip-path:polygon(0 0,100% 50%,0 100%)}
.rivet:hover{background:var(--pink)}
.rivet:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* ===== 本文：見出しは綴じ穴のあるチップ。色は見本帳の項目と同じ ===== */
.works,.about,.contact{padding:104px clamp(16px,6vw,96px);scroll-margin-top:var(--bar)}
.sec-title{position:relative;display:inline-block;margin:0;padding:8px 28px 12px 64px;border:3px solid var(--ink);border-radius:16px;
background:var(--pink);font:800 clamp(40px,6vw,88px)/1 var(--display);letter-spacing:-.03em}
.sec-title::before{content:"";position:absolute;left:20px;top:50%;width:24px;height:24px;margin-top:-12px;border:3px solid var(--ink);border-radius:50%;background:var(--paper)}
.about .sec-title{background:var(--violet)}.contact .sec-title{background:var(--orange)}
.works__filters{display:flex;flex-wrap:wrap;gap:12px 32px;margin:40px 0 32px}
.works__kind,.works__genre{display:flex;flex-wrap:wrap;gap:8px}
.works__kind button,.works__genre button{padding:0 16px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);font-weight:700;font-size:14px;transition:background-color .15s,color .15s}
.works__kind button{font:800 16px/1.2 var(--display)}
.works__kind button:hover,.works__genre button:hover{background:var(--mist)}
.works__kind [aria-pressed="true"],.works__genre [aria-pressed="true"]{background:var(--ink);color:var(--yellow)}
.works__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px}
.card__link{position:relative}
.card__frame{aspect-ratio:2/3;border:3px solid var(--ink);border-radius:16px;transition:border-color .15s}
.card__link:hover .card__frame{border-color:var(--pink)}
.card__link:hover .card__title{text-decoration:underline 2px;text-underline-offset:4px}
.card__tag{display:block;margin-top:12px;font:600 13px/1 var(--display)}
.card__new{position:absolute;right:12px;top:12px;padding:4px 8px;border:2px solid var(--ink);border-radius:8px;background:var(--yellow);font:800 12px/1 var(--display)}
.card__title{display:block;margin-top:4px}.card__meta{display:block;font-size:12px;color:#555}
.works__empty{margin:24px 0 0}
.works__more{margin-top:48px}
.btn{padding:0 28px;border:2px solid var(--ink);border-radius:12px;background:var(--ink);color:var(--paper);font:800 16px/1 var(--display);text-decoration:none;transition:background-color .15s,color .15s}
.btn:hover{background:var(--pink);color:var(--ink)}
.btn--ghost{background:var(--yellow);color:var(--ink)}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px;align-items:start;background:var(--mist)}
.about__figure{overflow:hidden;border:3px solid var(--ink);border-radius:16px}
.about__name{margin:24px 0 0;font:800 40px/1 var(--display)}
.about__history{margin:24px 0 32px;display:grid;gap:8px}.about__history div{display:flex;gap:20px}
.about__history dt{font:800 15px/1.8 var(--display)}.about__history dd{margin:0}
.contact__text{margin:24px 0 0}
.contact__mail a{font:800 clamp(24px,4vw,52px)/1.2 var(--display);text-decoration:underline 0 transparent;text-underline-offset:8px;transition:text-decoration-color .15s;overflow-wrap:anywhere}
.contact__mail a:hover{text-decoration:underline 4px var(--pink)}
.contact__sns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.site-foot{display:flex;justify-content:space-between;gap:16px;padding:20px clamp(16px,6vw,96px);background:var(--ink);color:var(--paper);font-size:13px}

@media (max-width:820px){
/* スマホ：背表紙は上の端に横向きの帯にし、名前と SNS を載せる。舞台はその下から */
:root{--spine:0px;--bar:56px}
body{padding-top:var(--bar)}
.spine{width:100%;height:var(--bar);border-right:0;border-bottom:3px solid var(--ink)}
.spine__name{left:14px;top:50%;translate:0 -50%;writing-mode:horizontal-tb;font-size:min(28px,7.4vw)}
.site-head{left:auto;right:0;bottom:auto;top:0;width:auto;height:var(--bar);padding:0 8px 0 0;align-items:center}
.site-head__sns{flex-direction:row;gap:4px}
.site-head .sns a{width:44px;height:44px;border-radius:10px}
/* 束は前の版の 80%。ほかのチップの文字は 13px より小さくしない */
.hero{--step:10deg;--L:min(calc((100vw - 28px) * .8),336px);--h:52px;--p:22px;--ox:12px;--oy:12px;--lift:8px;--small:13px;height:calc(var(--n) * 70svh)}
.stage{min-height:520px}
.art:nth-child(1){--tx:56%;--ty:32%;--hh:180%}
.art:nth-child(2){--tx:52%;--ty:28%;--hh:162%}
.art:nth-child(3){--tx:52%;--ty:32%;--hh:162%}
.art:nth-child(4){--tx:58%;--ty:40%;--hh:80%}
.art:nth-child(5){--tx:54%;--ty:28%;--hh:174%}
.works__grid{grid-template-columns:1fr 1fr;gap:24px 16px}
.about{grid-template-columns:1fr;gap:32px}
.sec-title{padding:6px 20px 10px 52px}
.sec-title::before{left:16px;width:20px;height:20px;margin-top:-10px}
}

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