/* 果肉ワークス 共通スタイル（トップから切り出し 2026-10-18） */
:root{
  --ink:#111111; --paper:#F4F1EA; --paper-2:#EAE6DC; --gray:#8A8780; --line:#D6D2C8; --accent:#E0452B;
  --sans:"Inter","Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --max:1100px; --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.3;margin:0}
p{margin:0 0 1em}
html[data-lang="ja"] .en{display:none!important}
html[data-lang="en"] .ja{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(56px,9vw,112px) 0;border-top:1px solid var(--line)}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);margin-bottom:14px}
.section h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:28px}
.lead{font-size:clamp(16px,1.6vw,19px);max-width:46em}

.header{position:sticky;top:0;z-index:20;background:rgba(244,241,234,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.08em;font-size:14px}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:22px;font-size:13px;letter-spacing:.08em}
.nav a{padding:6px 0}
.lang{display:flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden;font-size:12px;letter-spacing:.1em}
.lang button{background:none;border:0;padding:6px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:760px){.nav{display:none}}

.hero{padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,96px)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,5.6vw,68px);letter-spacing:.02em;margin-bottom:22px}
.hero h1 .en{font-family:"Inter",sans-serif;font-weight:700;letter-spacing:-.01em}
.hero .sub{font-size:clamp(15px,1.5vw,18px);color:#333;max-width:36em;margin-bottom:30px}
.hero .mark{justify-self:center;width:min(360px,70vw)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:1px solid var(--ink);border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.04em;transition:.15s}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.hero .sig{margin-top:34px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero .mark{order:-1;width:min(220px,50vw)}}

.works{display:grid;gap:40px}
.work{display:grid;grid-template-columns:minmax(220px,2fr) 3fr;gap:32px;padding:36px 0;border-top:1px solid var(--line)}
.work:first-child{border-top:0;padding-top:0}
.work .media{position:relative;aspect-ratio:3/4;background:var(--paper-2);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.work .media.wide{aspect-ratio:16/10;align-self:start}
.work .media img{width:100%;height:100%;object-fit:cover}
.work .media .play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(transparent 50%,rgba(0,0,0,.55));color:#fff;font-size:12px;letter-spacing:.2em;padding:16px}
.work .num{font-size:12px;letter-spacing:.2em;color:var(--gray)}
.work h3{font-size:clamp(24px,2.8vw,34px);margin:6px 0 2px}
.work h3 .en-title{display:block;font-family:"Inter",sans-serif;font-weight:700;font-size:.55em;letter-spacing:.18em;color:var(--accent);margin-top:4px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.chip{font-size:11px;letter-spacing:.1em;padding:4px 10px;border:1px solid var(--ink);border-radius:999px}
.chip.year{background:var(--ink);color:var(--paper)}
.work .copy{font-family:var(--serif);font-size:clamp(17px,1.8vw,21px);margin-bottom:12px}
.work .synopsis{color:#333;max-width:40em}
.work .credits{font-size:13px;color:var(--gray);margin:12px 0 0;line-height:1.7}
.links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:13px;letter-spacing:.06em}
.links a{border-bottom:1px solid var(--ink);padding-bottom:2px}
.links a.todo{color:var(--gray);border-bottom-style:dashed;cursor:default}
.links a.todo:hover{color:var(--gray)}
@media (max-width:760px){.work{grid-template-columns:1fr;gap:20px}.work .media{max-width:320px}}

.profile{display:grid;grid-template-columns:1fr 1.6fr;gap:48px}
.portrait{aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;max-width:380px}
.portrait .ph{font-size:11px;letter-spacing:.2em;color:var(--gray);text-align:center}
.profile h3{font-size:28px;margin-bottom:4px}
.profile .romaji{font-family:"Inter",sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:20px}
.timeline{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.timeline .y{font-family:"Inter",sans-serif;color:var(--gray);letter-spacing:.05em}
.tools{font-size:13px;color:var(--gray);letter-spacing:.04em}
.subhead{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin:28px 0 10px}
@media (max-width:760px){.profile{grid-template-columns:1fr}.portrait{max-width:260px}}

.credit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 40px}
.credit-grid h3{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:10px}
.credit-grid ul{list-style:none;padding:0;margin:0;font-size:15px}
.credit-grid li{padding:6px 0;border-bottom:1px solid var(--line)}
.credit-grid li small{display:block;color:var(--gray);font-size:12px}

.books{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:40px}
.book{display:grid;grid-template-columns:140px 1fr;gap:20px}
.book img{border:1px solid var(--line)}
.book h3{font-size:22px}
.book .en-title{font-family:"Inter",sans-serif;font-size:12px;letter-spacing:.18em;color:var(--accent)}
.book p{font-size:14px;color:#333;margin:8px 0}
.buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.buy a,.buy div{display:block;padding:22px;border:1px solid var(--ink);background:var(--paper)}
.buy a:hover{border-color:var(--accent)}
.buy .k{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.buy .v{font-family:var(--serif);font-size:20px;margin:6px 0 4px}
.buy .d{font-size:13px;color:#333}
.buy .todo{border-style:dashed;color:var(--gray)}
.note{font-size:12px;color:var(--gray);margin-top:14px}
@media (max-width:760px){.books{grid-template-columns:1fr}.book{grid-template-columns:110px 1fr}}

.sns{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.sns a{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border:1px solid var(--line);background:var(--paper)}
.sns a:hover{border-color:var(--ink)}
.sns .n{font-weight:500;font-size:14px}
.sns .id{font-family:"Inter",sans-serif;font-size:12px;color:var(--gray)}
.sns a.todo{border-style:dashed;color:var(--gray)}

.footer{padding:48px 0 40px;border-top:1px solid var(--ink);font-size:12px;color:var(--gray);letter-spacing:.06em}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
.footer .sig{font-family:"Inter",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}

/* ============================================================
   映写室レイヤー（2026-10-16）
   温かみ（紙・明朝・たまご・朱）はそのまま、映画の道具立てを重ねる。
   参照：コジプロ＝タイトルカードと斜めタグ／TO2KYO2＝四隅HUDと通し番号
         OBF＝黒い上映室への切り替え／Cattleya＝ティッカーと時計とチケット
   ============================================================ */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{
  --night:#171513; --night-line:#36312b; --night-gray:#a39d92; --night-text:#e4dfd4;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.7,0,.2,1);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body{counter-reset:scene}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 紙の粒子：画面全体にうっすら */
body::before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;background-image:var(--noise);opacity:.07;mix-blend-mode:multiply}

/* シーン番号つき見出し */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em}
.section{counter-increment:scene}
.section > .wrap > .eyebrow::before{content:"SC." counter(scene,decimal-leading-zero) " — ";color:var(--accent)}

/* ---------- ティッカー＋時計（Cattleya） ---------- */
.ticker{height:28px;overflow:hidden;background:var(--ink);color:var(--paper);font:500 11px/28px var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.ticker .track{display:inline-flex;will-change:transform;animation:kw-tick 52s linear infinite}
.ticker .grp{display:inline-flex}
.ticker i{font-style:normal;padding:0 1.5em;color:var(--accent)}
.ticker:hover .track{animation-play-state:paused}
@keyframes kw-tick{to{transform:translateX(-50%)}}
.header .wrap{height:60px}
.clock{display:flex;gap:9px;align-items:center;margin:0;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--gray);white-space:nowrap}
.clock time{color:var(--ink);font-variant-numeric:tabular-nums}
.clock .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:kw-blink 1.6s steps(2) infinite}
@keyframes kw-blink{50%{opacity:0}}
@media (max-width:1060px){.clock{display:none}}
/* ナビが増えたので折り返さないように詰める */
.nav{gap:18px}
.nav a,.brand span,.lang button,.clock{white-space:nowrap}
.clock span:last-child{display:none}
@media (max-width:1120px){.clock{display:none}}
@media (max-width:980px){.nav{display:none}}

/* ---------- ヒーロー：タイトルカード（コジプロ）＋スクリーン ---------- */
.hero{position:relative;padding:clamp(44px,6vw,88px) 0 clamp(96px,10vw,136px)}
.hero .wrap{grid-template-columns:1fr 1.08fr;gap:clamp(32px,5vw,72px)}
.titlecard{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 26px;font:800 11.5px/1 "Inter",var(--sans);letter-spacing:.3em;text-transform:uppercase}
.titlecard .box{display:inline-block;border:1.5px solid currentColor;padding:6px 6px 5px 9px}
.titlecard .tc-ja{font-family:var(--sans);font-weight:700;letter-spacing:.2em}
.hero .sig{font-family:var(--mono);letter-spacing:.16em}
.btn::after{content:"→";transition:transform .25s var(--ease)}
.btn:hover::after{transform:translateX(4px)}

.screen{position:relative;margin:0}
.screen-frame{position:relative;display:block;padding:24px 0;background:var(--night);color:var(--paper);border-radius:4px;box-shadow:0 44px 70px -42px rgba(23,21,19,.65)}
.screen-frame:hover{color:var(--paper)}
.screen-frame::before,.screen-frame::after{content:"";position:absolute;left:10px;right:10px;height:24px;background:linear-gradient(90deg,transparent 0 9px,rgba(244,241,234,.8) 9px 21px,transparent 21px) 0 50%/30px 9px repeat-x;animation:kw-run 1.6s linear infinite}
.screen-frame::before{top:0}.screen-frame::after{bottom:0}
@keyframes kw-run{to{background-position:30px 50%}}
.screen-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000}
.screen-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .9s var(--ease);animation:kw-flicker 6s infinite}
.screen-frame:hover .screen-media img{transform:scale(1.06)}
.screen-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 90px rgba(0,0,0,.7)}
.screen-media::after{content:"";position:absolute;inset:-20%;z-index:1;pointer-events:none;background-image:var(--noise);opacity:.24;mix-blend-mode:overlay;animation:kw-grain .5s steps(3) infinite}
@keyframes kw-grain{33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-2%)}}
@keyframes kw-flicker{0%,100%{opacity:1}46%{opacity:.92}47%{opacity:1}81%{opacity:.96}82%{opacity:1}}
.vf{position:absolute;inset:12px;z-index:2;pointer-events:none;--c:rgba(244,241,234,.85);background:
  linear-gradient(var(--c),var(--c)) top left/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top left/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) top right/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top right/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) bottom left/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) bottom right/18px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1.5px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) center/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) center/1px 14px no-repeat}
.scr{position:absolute;z-index:3;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 2px rgba(0,0,0,.7);font-variant-numeric:tabular-nums}
.scr.tl{top:22px;left:24px}.scr.tr{top:22px;right:24px}.scr.bl{bottom:22px;left:24px}.scr.br{bottom:22px;right:24px}
.rec{color:var(--accent);animation:kw-blink 1.2s steps(2) infinite}
.play-btn{position:absolute;z-index:3;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1.5px solid var(--paper);display:grid;place-items:center;font-size:18px;background:rgba(23,21,19,.35);opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s var(--ease)}
.screen-frame:hover .play-btn,.screen-frame:focus-visible .play-btn{opacity:1;transform:none}
.screen figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:14px;font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}

/* ステッカー（ドラッグで動かせる） */
.sticker{position:absolute;z-index:4;translate:var(--dx,0px) var(--dy,0px);rotate:var(--rot,0deg);filter:drop-shadow(0 10px 14px rgba(23,21,19,.28));transition:rotate .3s var(--ease),scale .3s var(--ease);user-select:none;-webkit-user-select:none}
@media (pointer:fine){
  .sticker{cursor:grab}
  .sticker:hover{rotate:calc(var(--rot,0deg) * .3);scale:1.04}
  .sticker.dragging{cursor:grabbing;scale:1.08;transition:none}
}
.sticker img{pointer-events:none;-webkit-user-drag:none}
.sticker.egg{top:-50px;left:-46px;width:clamp(92px,9vw,118px);aspect-ratio:1;display:block;padding:13px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.sticker.egg img{width:100%;height:100%;object-fit:contain}
.screen .scr.tl{left:84px}
.sticker.ticket{right:-20px;bottom:-62px;width:clamp(200px,20vw,248px)}
.ticket-body{display:grid;grid-template-columns:1fr 48px;background:var(--accent);color:var(--paper);font-family:var(--mono);
  -webkit-mask:radial-gradient(circle 7px at calc(100% - 48px) 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 7px at calc(100% - 48px) 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 7px at calc(100% - 48px) 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 7px at calc(100% - 48px) 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.ticket-main > span{display:block}
.ticket-main{padding:12px 12px 12px 16px}
.ticket-main .k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.ticket-main .d{font:800 34px/1 "Inter",sans-serif;letter-spacing:-.02em;margin:6px 0 5px}
.ticket-main .v{font-size:10.5px;line-height:1.5;letter-spacing:.06em}
.ticket-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-left:1.5px dashed rgba(244,241,234,.75)}
.barcode{width:22px;height:58px;background:repeating-linear-gradient(0deg,var(--paper) 0 2px,transparent 2px 4px,var(--paper) 4px 5px,transparent 5px 8px,var(--paper) 8px 11px,transparent 11px 13px)}
.ticket-stub small{writing-mode:vertical-rl;font-size:9px;letter-spacing:.2em}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr}
  .screen{margin-top:30px}
  .sticker.egg{width:74px;top:-40px;left:-4px}
  .screen .scr.tl{left:80px}
  .screen .scr.tr{display:none}
  .screen figcaption{max-width:calc(100% - 196px);flex-direction:column}
  .sticker.ticket{width:186px;right:-4px;bottom:-70px}
  .ticket-main .d{font-size:27px}
  .hero{padding-bottom:116px}
}

/* ---------- 作品：通し番号（TO2KYO2）と斜めタグ（コジプロ） ---------- */
#works{position:relative;overflow:hidden;padding-bottom:0}
.vtext{position:absolute;top:110px;left:clamp(6px,1vw,20px);margin:0;writing-mode:vertical-rl;font:800 clamp(88px,8vw,124px)/1 "Inter",sans-serif;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px #cbc5b8;white-space:nowrap;pointer-events:none;user-select:none;translate:0 var(--vt,0px)}
@media (max-width:1420px){.vtext{display:none}}
.reel{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-variant-numeric:tabular-nums}
.reel-k{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.reel-n{font:300 clamp(46px,5.4vw,76px)/1 "Inter",sans-serif;letter-spacing:-.04em}
.reel-t{font:400 15px/1 var(--mono);color:var(--gray)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tag{display:inline-block;padding:5px 16px 4px 14px;font:500 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--paper);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.tag.red{background:var(--accent)}
/* 画像だけをワイプで出す（枠に clip-path をかけると交差判定が0になるため） */
html.js .work .media[data-reveal] img{clip-path:inset(100% 0 0 0);transform:scale(1.14);transition:clip-path 1.1s var(--ease),transform 1.5s var(--ease)}
html.js .work .media[data-reveal].in img{clip-path:inset(0 0 0 0);transform:none}

/* ---------- 上映室（OBF）：旗艦作品だけ黒地に ---------- */
.screening{position:relative;margin-top:clamp(56px,8vw,96px);padding:0 0 clamp(64px,8vw,104px);background:var(--night);color:var(--paper)}
.slate{height:16px;margin-bottom:clamp(40px,6vw,72px);background:repeating-linear-gradient(-45deg,var(--paper) 0 12px,var(--night) 12px 24px)}
.scene-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin:0 0 clamp(28px,4vw,44px);padding-bottom:16px;border-bottom:1px solid var(--night-line);font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--night-gray)}
.scene-bar b{color:var(--accent);font-weight:500;animation:kw-blink 1.2s steps(2) infinite}
.screening .work{border-top:0;padding:0}
.screening .work h3{color:var(--paper)}
.screening .work .copy,.screening .work .synopsis{color:var(--night-text)}
.screening .work .credits,.screening .reel-k,.screening .reel-t{color:var(--night-gray)}
.screening .chip{border-color:rgba(244,241,234,.6)}
.screening .chip.year{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.screening .tag{background:var(--paper);color:var(--ink)}
.screening .tag.red{background:var(--accent);color:var(--paper)}
.screening .links a{border-color:var(--paper)}
.screening .links a:hover{color:var(--accent);border-color:var(--accent)}
.screening .links a.todo,.screening .links a.todo:hover{color:var(--night-gray);border-color:var(--night-gray)}
.screening .work .media{border-color:var(--night-line);background:#000}

/* ---------- 作品の表紙：2:3 の書影を切らずに見せる ---------- */
.work .media:not(.wide){aspect-ratio:2/3}

/* ---------- プロフィール：写真はフィルムのプリント風 ---------- */
.portrait{display:block;aspect-ratio:auto;max-width:420px;margin:0;padding:10px 10px 0;background:#fbf9f4;border:1px solid var(--line);box-shadow:0 18px 30px -22px rgba(23,21,19,.45);rotate:-1.2deg}
.portrait img{width:100%;height:auto}
.portrait figcaption{display:flex;justify-content:space-between;padding:10px 2px 12px;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}

/* ---------- NEWS：出展・展示の記録（上映スケジュール風） ---------- */
.news-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.news-item{display:grid;grid-template-columns:96px 150px 1fr auto;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.news-item .thumb{width:96px;aspect-ratio:3/4;object-fit:cover;background:var(--paper-2);border:1px solid var(--line)}
.news-item .thumb.none{display:grid;place-items:center;font:500 10px/1.4 var(--mono);letter-spacing:.14em;color:var(--gray);text-align:center}
.news-date{font:500 13px/1.5 var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.news-date small{display:block;color:var(--gray);font-size:11px;letter-spacing:.14em}
.news-item .tags{margin:8px 0 0}
.news-body h3{font-size:clamp(18px,2vw,22px);margin:0 0 6px}
.news-body p{margin:0;font-size:14px;color:#333}
.news-body .where{font:400 12px/1.6 var(--mono);color:var(--gray);margin-bottom:6px}
.news-body a{border-bottom:1px solid currentColor}
.news-booth{text-align:right;min-width:110px}
.news-booth small{display:block;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.news-booth b{font:300 clamp(30px,3.6vw,44px)/1 "Inter","Noto Sans JP",sans-serif;letter-spacing:-.02em}
.news-item.next{background:linear-gradient(90deg,rgba(224,69,43,.07),transparent 70%)}
.news-item.next .news-booth b{color:var(--accent);font-weight:500}
@media (max-width:860px){
  .news-item{grid-template-columns:80px 1fr;gap:6px 16px;align-items:start}
  .news-item .thumb{width:80px;grid-row:span 3}
  .news-booth{text-align:left}
  .news-booth b{font-size:28px}
}

/* チケットはリンク */
a.sticker.ticket{display:block;color:var(--paper)}
a.sticker.ticket:hover{color:var(--paper)}
.timeline .y{font-family:var(--mono);font-size:12.5px}
.tools{font-family:var(--mono);font-size:12px}

/* ---------- クレジット：エンドロール ---------- */
.section.dark{background:var(--night);color:var(--paper);border-top:0}
.section.dark .eyebrow{color:var(--night-gray)}
.section.dark .lead{color:var(--night-text)}
.endroll{text-align:center}
.endroll .lead{margin:0 auto}
.endroll .credit-grid{grid-template-columns:1fr;max-width:620px;margin:clamp(40px,6vw,64px) auto 0;gap:clamp(36px,5vw,56px)}
.endroll .credit-grid h3{font:500 11px/1 var(--mono);letter-spacing:.24em;color:var(--accent);margin-bottom:16px}
.endroll .credit-grid ul{font-family:var(--serif);font-size:clamp(16px,1.6vw,19px)}
.endroll .credit-grid li{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:baseline;padding:5px 0;border:0;text-align:left}
.endroll .credit-grid li small{order:-1;text-align:right;font:400 11.5px/1.7 var(--mono);letter-spacing:.04em;color:var(--night-gray)}
@media (max-width:520px){.endroll .credit-grid li{gap:14px}}

/* ---------- 書籍：チケット ---------- */
.buy > a,.buy > div{position:relative;padding:22px 84px 22px 22px;border:1.5px solid var(--ink);background:var(--paper);transition:background .25s,color .25s,border-color .25s;
  -webkit-mask:radial-gradient(circle 8px at calc(100% - 62px) 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 8px at calc(100% - 62px) 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 8px at calc(100% - 62px) 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 8px at calc(100% - 62px) 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.buy > a::before,.buy > div::before{content:"";position:absolute;top:14px;bottom:14px;right:62px;border-left:1.5px dashed currentColor;opacity:.55}
.buy > a::after,.buy > div::after{content:"";position:absolute;right:20px;top:50%;width:22px;height:56%;translate:0 -50%;opacity:.85;background:repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 8px,currentColor 8px 11px,transparent 11px 13px)}
.buy > div:first-child{background:var(--ink);color:var(--paper)}
.buy > div:first-child .k{color:var(--night-gray)}
.buy > div:first-child .d{color:var(--night-text)}
.buy .k{font-family:var(--mono)}
.buy a:not(.todo):hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.buy a:not(.todo):hover .k,.buy a:not(.todo):hover .d{color:inherit}
.buy .todo{border-style:dashed}

/* ---------- リンク ---------- */
.sns a{transition:background .2s,color .2s,border-color .2s}
.sns a:not(.todo):hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sns a:not(.todo):hover .id{color:var(--night-gray)}
.sns .id{font-family:var(--mono)}

/* ---------- フッター：つづく ---------- */
.footer{background:var(--night);color:var(--night-gray);border-top:0;padding:clamp(72px,10vw,128px) 0 36px;text-align:center}
.footer .wrap{display:block}
.fin{margin:0 0 22px;font-family:var(--serif);font-size:clamp(28px,4vw,48px);color:var(--paper)}
.footer .titlecard{justify-content:center;color:var(--paper);margin-bottom:clamp(48px,7vw,80px)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;border-top:1px solid var(--night-line);text-align:left}
.foot-row p{margin:0}
.rewind{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--paper);border:1px solid var(--night-line);border-radius:999px;padding:10px 14px}
.rewind:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- HUD（TO2KYO2） ---------- */
.hud-fixed{position:fixed;left:18px;bottom:18px;z-index:30;display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:999px;background:rgba(23,21,19,.88);color:var(--paper);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px);pointer-events:none;opacity:0;translate:0 8px;transition:opacity .4s,translate .4s}
.hud-fixed.on{opacity:1;translate:0 0}
.hud-bar{position:relative;width:64px;height:3px;overflow:hidden;background:rgba(244,241,234,.2)}
.hud-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:900px){.hud-fixed{display:none}}

/* ---------- ローディング：カウントダウン・リーダー ---------- */
.loader{display:none}
html.intro body{overflow:hidden}
html.intro .loader{display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);font-family:var(--mono);clip-path:inset(0 0 0 0);transition:clip-path .75s var(--ease)}
html.intro .loader::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--noise);opacity:.09;mix-blend-mode:multiply}
.loader.out{clip-path:inset(0 0 100% 0)!important}
.ld{position:absolute;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.ld.tl{top:22px;left:24px}.ld.tc{top:22px;left:50%;translate:-50% 0}.ld.tr{top:22px;right:24px}
.ld.bl{bottom:22px;left:24px}.ld.bc{bottom:22px;left:50%;translate:-50% 0}.ld.br{bottom:22px;right:24px}
.leader{position:relative;width:min(62vw,280px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--ink);background:linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat}
.leader::before{content:"";position:absolute;inset:9%;border-radius:50%;border:1.5px solid var(--ink)}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(224,69,43,.24) var(--a),transparent 0);animation:kw-sweep .5s linear infinite;transition:opacity .3s}
@keyframes kw-sweep{to{--a:360deg}}
.count{position:relative;z-index:1;padding:0 .12em;background:var(--paper);font:800 clamp(72px,14vw,128px)/1 "Inter",sans-serif;font-variant-numeric:tabular-nums;transition:opacity .3s}
.ld-logo{position:absolute;inset:20%;z-index:2;display:grid;place-items:center;padding:10%;border-radius:50%;background:var(--paper);opacity:0;scale:.6;transition:opacity .35s,scale .5s var(--ease)}
.leader.done .count,.leader.done .sweep{opacity:0}
.leader.done .ld-logo{opacity:1;scale:1}
.ld-skip{position:absolute;bottom:56px;left:50%;translate:-50% 0;background:none;border:0;cursor:pointer;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.ld-skip:hover{color:var(--accent)}


/* ---------- 作品：映画館のロビーに3枚のポスター（2026-10-18） ---------- */
.lobby{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px);margin-top:clamp(28px,4vw,44px)}
.poster{display:flex;flex-direction:column;background:#fbf9f4;border:1px solid var(--line);color:var(--ink);box-shadow:0 18px 30px -24px rgba(23,21,19,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.poster:nth-child(1){--tilt:-.8deg}.poster:nth-child(2){--tilt:.6deg}.poster:nth-child(3){--tilt:-.5deg}
.poster:hover{transform:translateY(-6px) rotate(var(--tilt));box-shadow:0 30px 44px -26px rgba(23,21,19,.6);color:var(--ink)}
.poster-frame{position:relative;display:block;aspect-ratio:1/1.414;margin:10px 10px 0;overflow:hidden;background:#111}
.poster-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.poster:hover .poster-frame img{transform:scale(1.04)}
.p-fa .poster-frame{background:radial-gradient(120% 90% at 50% 100%,#fff 0%,#CFE6F0 50%,#7fa9cf 100%)}
.p-fa .poster-frame img{object-fit:cover;object-position:center top;padding:0}
.p-fa .poster-frame img.poster-sticker{position:absolute;right:6%;top:9%;width:30%;height:auto;padding:0;object-fit:contain;rotate:10deg;filter:drop-shadow(0 8px 10px rgba(23,21,19,.3))}
.poster-reel{position:absolute;left:10px;top:10px;padding:5px 14px 4px 10px;font:500 10.5px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;background:var(--ink);color:var(--paper);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.poster-flag{position:absolute;right:0;bottom:16px;padding:6px 12px 5px 16px;font:500 10.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;background:var(--accent);color:#fff;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%)}
.poster-body{display:grid;gap:8px;padding:16px 16px 18px}
.poster-title{font:700 clamp(22px,2.3vw,30px)/1.2 var(--serif)}
.poster-title em{display:block;margin-top:4px;font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.22em}
.p-td .poster-title em{color:#E3262B}.p-cr .poster-title em{color:#7a9600}.p-fa .poster-title em{color:#2F56D6}
.poster-media{font:400 11.5px/1.6 var(--mono);color:var(--gray)}
.poster-copy{font:500 15px/1.6 var(--serif)}
.poster-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.poster-cta{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.poster:hover .poster-cta{color:var(--accent)}
@media (max-width:900px){.lobby{grid-template-columns:1fr;max-width:460px}}

/* ---------- ヒーローのスクリーン：トレイラーを自動再生（消音・ループ） ---------- */
.screen-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;animation:kw-flicker 6s infinite}
.screen-frame{cursor:default}
.snd{z-index:4;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid rgba(244,241,234,.6);border-radius:999px;background:rgba(23,21,19,.55);cursor:pointer;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);backdrop-filter:blur(3px);transition:background .2s,border-color .2s}
.snd::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--night-gray)}
.snd:hover{border-color:var(--paper);background:rgba(23,21,19,.75)}
.snd .snd-on{display:none}
.snd[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.snd[aria-pressed="true"]::before{background:#fff;animation:kw-blink 1.2s steps(2) infinite}
.snd[aria-pressed="true"] .snd-on{display:inline}
.snd[aria-pressed="true"] .snd-off{display:none}
.screen figcaption a{border-bottom:1px solid currentColor}
.screen figcaption a:hover{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.screen-media video{animation:none}}

.hero-cite{margin:-10px 0 22px;font:500 11.5px/1.6 var(--mono);letter-spacing:.08em;color:var(--gray)}

/* ---------- 出現アニメーション ---------- */
html.js [data-reveal]:not([data-reveal="wipe"]){opacity:0;translate:0 18px;transition:opacity .9s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s)}
html.js [data-reveal].in{opacity:1;translate:0 0}

/* ---------- 動きを減らす設定の人には止める ---------- */
@media (prefers-reduced-motion:reduce){
  .ticker .track,.screen-frame::before,.screen-frame::after,.screen-media img,.screen-media::after,.rec,.clock .dot,.scene-bar b,.sweep{animation:none!important}
  html.js [data-reveal]{opacity:1!important;translate:none!important;transition:none!important}
  html.js .work .media[data-reveal] img{clip-path:none!important;transform:none!important;transition:none!important}
  .vtext{translate:none!important}
}

/* ---------- クレジットのSNSリンク（X / IG）・2026-10-19 ---------- */
.sns-set{display:inline-flex;gap:4px;margin-left:8px;vertical-align:2px;white-space:nowrap}
.sns-btn{display:inline-block;min-width:22px;padding:3px 5px 2px;border:1px solid currentColor;border-radius:3px;font:500 9.5px/1 var(--mono);letter-spacing:.06em;text-align:center;opacity:.55;transition:opacity .2s,background .2s,color .2s,border-color .2s}
.sns-btn:hover,.sns-btn:focus-visible{opacity:1;background:var(--ip,var(--accent));border-color:var(--ip,var(--accent));color:#fff}
.titlecard .tc-label{letter-spacing:.14em}
.hero .sub .ja{word-break:auto-phrase}

/* ---------- 出展・展示：お品書きビューア（2026-10-20） ---------- */
.thumb-btn{position:relative;display:block;padding:0;border:0;background:none;cursor:zoom-in;font:inherit;color:inherit}
.thumb-btn .thumb{display:block;transition:transform .4s var(--ease),box-shadow .4s}
.thumb-btn:hover .thumb,.thumb-btn:focus-visible .thumb{transform:translateY(-3px) rotate(-1.2deg);box-shadow:0 14px 22px -14px rgba(23,21,19,.6)}
.thumb-btn .pages{position:absolute;right:-6px;bottom:-6px;padding:4px 6px 3px;background:var(--ink);color:var(--paper);font:500 9.5px/1 var(--mono);letter-spacing:.1em}
.news-body .menu-link{margin-top:10px}
.menu-link button{padding:0 0 2px;border:0;border-bottom:1px solid currentColor;background:none;font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink);cursor:pointer}
.menu-link button small{margin:0 2px;color:var(--gray);font-size:10.5px}
.menu-link button:hover{color:var(--accent)}
@media (max-width:760px){.news-item .thumb-btn{grid-row:span 3}}
html.mlb-open{overflow:hidden}
.menu-lb{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#0e0d0c;color:var(--paper);display:none}
.menu-lb[open]{display:grid;grid-template-rows:auto 1fr auto}
.menu-lb::backdrop{background:rgba(14,13,12,.7)}
.mlb-head{display:flex;align-items:center;gap:16px;padding:14px clamp(14px,3vw,28px);font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.mlb-t{flex:1;margin:0;display:flex;gap:12px;align-items:center;min-width:0}
.mlb-k{padding:4px 7px 3px;background:var(--accent);color:#fff}
.mlb-title{text-transform:none;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlb-n{margin:0;font-variant-numeric:tabular-nums;color:var(--night-gray)}
.mlb-n b{color:var(--paper);font-weight:500}
.mlb-close{width:40px;height:40px;border:1px solid rgba(244,241,234,.35);border-radius:50%;background:none;color:var(--paper);font-size:22px;line-height:1;cursor:pointer}
.mlb-close:hover{background:var(--paper);color:var(--ink)}
.mlb-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 clamp(56px,7vw,90px)}
.mlb-img{max-width:100%;max-height:calc(100dvh - 170px);object-fit:contain;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);opacity:1;transition:opacity .25s}
.mlb-img.loading{opacity:0}
.mlb-arrow{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border:1px solid rgba(244,241,234,.4);border-radius:50%;background:rgba(14,13,12,.5);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.mlb-arrow.prev{left:clamp(6px,2vw,24px)}.mlb-arrow.next{right:clamp(6px,2vw,24px)}
.mlb-arrow:hover{background:var(--accent);border-color:var(--accent)}
.mlb-arrow[hidden]{display:none}
.mlb-strip{list-style:none;display:flex;justify-content:center;gap:10px;margin:0;padding:12px 16px 16px;overflow-x:auto}
.mlb-strip button{display:block;padding:0;border:0;background:none;cursor:pointer;outline:2px solid transparent;outline-offset:3px;opacity:.5;transition:opacity .2s,outline-color .2s}
.mlb-strip img{display:block;height:64px;width:auto}
.mlb-strip button:hover{opacity:.85}
.mlb-strip button[aria-current="true"]{opacity:1;outline-color:var(--accent)}
.mlb-strip[hidden]{display:none}
@media (max-width:640px){.mlb-stage{padding:0 8px}.mlb-img{max-height:calc(100dvh - 150px)}.mlb-arrow{width:38px;height:38px;margin-top:-19px;font-size:19px}.mlb-strip img{height:48px}}

/* ---------- 出展・展示：横スクロールの年表（2026-10-20） ---------- */
.tl{--k:1;--card:400px;--zone:300px;position:relative;margin-top:8px}
.tl-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px}
.tl-hint{margin:0;font:500 11px/1.4 var(--mono);letter-spacing:.1em;color:var(--gray)}
.tl-btns{display:flex;gap:8px}
.tl-go{width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;background:none;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.tl-go:hover{background:var(--ink);color:var(--paper)}
.tl-go:disabled{opacity:.25;cursor:default;background:none;color:var(--ink)}
.tl-scroller{position:relative;overflow-x:auto;overflow-y:hidden;margin:0 calc(var(--gutter,20px) * -1);padding:0 var(--gutter,20px);cursor:grab;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.tl-scroller.dragging{cursor:grabbing;user-select:none}
.tl-scroller.dragging *{pointer-events:none}
.tl-scroller:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.tl-track{position:relative;list-style:none;margin:0;padding:0;width:calc(var(--w) * var(--k));height:calc(var(--zone) * 2 + 44px)}
.tl-axis{position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--ink)}
.tl-axis::after{content:"";position:absolute;right:0;top:-4px;border-left:9px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
.tl-year{position:absolute;top:50%;left:calc(var(--x) * var(--k));transform:translateY(-50%);padding:5px 9px 4px;background:var(--ink);color:var(--paper);font:500 12px/1 var(--mono);letter-spacing:.14em;z-index:2}
.tl-item{position:absolute;left:calc(var(--x) * var(--k));top:0;bottom:0;width:var(--card)}
.tl-dot{position:absolute;left:-6px;top:calc(50% - 6px);width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);z-index:2}
.tl-item::before{content:"";position:absolute;left:0;width:1px;background:var(--ink);height:26px}
.tl-item.up::before{bottom:50%}
.tl-item.down::before{top:50%}
.tl-card{position:absolute;left:0;width:100%;display:flex;gap:16px;padding:14px;background:var(--paper);border:1px solid var(--line);transition:border-color .2s,transform .3s var(--ease),box-shadow .3s}
.tl-item.up .tl-card{bottom:calc(50% + 26px)}
.tl-item.down .tl-card{top:calc(50% + 26px)}
.tl-card:hover{border-color:var(--ink);box-shadow:0 18px 26px -20px rgba(23,21,19,.55)}
.tl-item.up .tl-card:hover{transform:translateY(-3px)}
.tl-item.down .tl-card:hover{transform:translateY(3px)}
.tl-thumb{position:relative;flex:0 0 168px;align-self:flex-start;display:block;padding:0;border:0;background:var(--paper-2);font:inherit;color:inherit}
.tl-thumb img{display:block;width:168px;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line)}
button.tl-thumb{cursor:zoom-in}
.tl-thumb .pages{position:absolute;right:-5px;bottom:-5px;padding:3px 5px 2px;background:var(--ink);color:var(--paper);font:500 9.5px/1 var(--mono);letter-spacing:.1em}
.tl-thumb.none{width:168px;aspect-ratio:3/4;display:grid;place-items:center;border:1px dashed var(--line);font:500 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--gray)}
.tl-body{flex:1;min-width:0}
.tl-date{margin:0 0 4px;font:500 12px/1.4 var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tl-date small{color:var(--gray);font-size:10px;letter-spacing:.14em;margin-left:2px}
.tl-date .tag{margin-left:4px;vertical-align:1px;padding:3px 10px 2px 9px;font-size:9.5px}
.tl-body h3{margin:0 0 4px;font-size:16px;line-height:1.35}
.tl-where{margin:0 0 6px;font:400 10.5px/1.5 var(--mono);color:var(--gray)}
.tl-desc{margin:0;font-size:12px;line-height:1.65;color:#333}
.tl-desc a{border-bottom:1px solid currentColor}
.tl-foot{display:flex;margin:10px 0 0}
.tl-booth{font:300 22px/1 "Inter","Noto Sans JP",sans-serif;letter-spacing:-.01em}
.tl-booth small{display:block;margin-bottom:4px;font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.tl-menu{padding:0 0 2px;border:0;border-bottom:1px solid currentColor;background:none;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink);cursor:pointer;white-space:nowrap}
.tl-menu small{color:var(--gray);font-size:10px}
.tl-menu:hover{color:var(--accent)}
.tl-item.next .tl-card{border-color:var(--accent);background:linear-gradient(90deg,rgba(224,69,43,.07),transparent 80%),var(--paper)}
.tl-item.next .tl-dot{background:var(--accent);border-color:var(--accent)}
.tl-item.next .tl-dot::after{content:"";position:absolute;inset:-6px;border:1.5px solid var(--accent);border-radius:50%;animation:kw-ping 1.8s ease-out infinite}
.tl-item.next::before{background:var(--accent)}
.tl-item.next .tl-booth{color:var(--accent);font-weight:500}
@keyframes kw-ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.7);opacity:0}}
.tl-now{position:absolute;top:50%;left:calc(var(--x) * var(--k));transform:translate(-50%,-50%);z-index:3;padding:4px 8px 3px;border:1.5px solid var(--accent);background:var(--paper);color:var(--accent);font:500 10px/1 var(--mono);letter-spacing:.14em;white-space:nowrap}
.tl-now::before{content:"";position:absolute;left:50%;bottom:100%;height:14px;border-left:1.5px dashed var(--accent)}
@media (max-width:760px){.tl{--k:.78;--card:312px;--zone:300px}.tl-card{gap:12px;padding:12px}.tl-thumb,.tl-thumb img,.tl-thumb.none{flex-basis:118px;width:118px}.tl-hint{font-size:10.5px}.tl-go{width:36px;height:36px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.tl-item.next .tl-dot::after{animation:none}}

/* ビューア：映像（展示の記録） */
.mlb-vid{max-width:100%;max-height:calc(100dvh - 170px);background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.mlb-vid[hidden],.mlb-img[hidden]{display:none}
.mlb-strip .is-vid{position:relative}
.mlb-strip .is-vid::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;text-shadow:0 1px 6px rgba(0,0,0,.8);background:rgba(0,0,0,.25)}
@media (max-width:640px){.mlb-vid{max-height:calc(100dvh - 150px)}}

/* =========================================================
   シネマ・オープニング（2026-10-21）
   パソコン：ヒーローを画面に固定し、全画面の映像がスクロールでフィルム枠に縮む（--p：0→1）
   スマホ：映像を一番上に大きく置き、標語を重ねる
   ========================================================= */
.cine{--p:1}
.cine-over,.cine-mtitle{display:none}
.ticket-main .cd[hidden]{display:none}
.ticket-main .cd{margin-top:8px;padding-top:7px;border-top:1px dashed rgba(244,241,234,.6);font:700 12px/1 var(--mono);letter-spacing:.12em}
.sticker.ticket{width:clamp(230px,23vw,300px)}
.ticket-main .d{font-size:clamp(34px,3.3vw,44px)}

html.cine-on .cine{height:calc(100svh + 115svh);padding:0}
html.cine-on .cine-stage{position:sticky;top:var(--hh,88px);height:calc(100svh - var(--hh,88px));display:flex;align-items:center;overflow:hidden}
html.cine-on .cine-stage > .wrap{width:100%;padding-bottom:64px}
html.cine-on .cine .screen-frame{position:relative;z-index:5;transform-origin:0 0;transform:var(--ft,none);will-change:transform;border-radius:calc(4px * var(--p))}
html.cine-on .cine .screen-frame::before,html.cine-on .cine .screen-frame::after,
html.cine-on .cine .screen-media .scr{opacity:clamp(0,calc(var(--p) * 4 - 3),1)}
html.cine-on .cine .wrap > div:first-child{opacity:clamp(0,calc(var(--p) * 2.4 - 1.25),1);transform:translateY(calc((1 - var(--p)) * 40px))}
html.cine-on .cine .sticker,html.cine-on .cine .screen figcaption{opacity:clamp(0,calc(var(--p) * 5 - 4),1)}
html.cine-full .cine .sticker,html.cine-full .cine .screen-media .scr,html.cine-full .cine .wrap > div:first-child{pointer-events:none}

html.cine-on .cine-over{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;color:#fff}
.cine-bar{position:absolute;left:0;right:0;height:calc(10svh * (1 - var(--p)));background:#000}
.cine-bar.t{top:0}.cine-bar.b{bottom:0}
.cine-title{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(10svh + 4svh);margin:0;font:700 clamp(56px,10.6vw,180px)/1 var(--serif);letter-spacing:.01em;text-shadow:0 6px 48px rgba(0,0,0,.45);opacity:clamp(0,calc(1 - var(--p) * 4.5),1);transform:translateY(calc(var(--p) * -80px))}
.cine-title .en{font-family:"Inter",sans-serif;font-weight:800;letter-spacing:-.02em}
.cine-hud{position:absolute;margin:0;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;opacity:clamp(0,calc(1 - var(--p) * 3.5),1);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.cine-hud.tl{top:calc(10svh + 22px);left:var(--gutter)}
.cine-hud.tr{top:calc(10svh + 22px);right:var(--gutter)}
.cine-hud.br{right:var(--gutter);bottom:calc(10svh + 4svh + 6px)}
.cine-arrow{display:inline-block;margin-left:6px;animation:cine-bob 1.6s ease-in-out infinite}
@keyframes cine-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* スマホ・低い画面：固定しない。映像を一番上に大きく、標語を重ねる */
@media (max-width:899px){
  .cine{padding-top:0;overflow-x:clip}
  .cine .screen{order:-1;margin:0 calc(var(--gutter) * -1) 116px}
  .cine .screen figcaption{display:none}
  .cine .sticker.ticket{right:12px;bottom:-104px}
  .cine .screen-frame{border-radius:0}
  .cine .screen-media{aspect-ratio:auto;height:min(64svh,560px)}
  .cine-mtitle{display:block;position:absolute;left:18px;right:18px;bottom:58px;z-index:3;margin:0;color:#fff;font:700 clamp(40px,12.5vw,72px)/1.02 var(--serif);text-shadow:0 4px 30px rgba(0,0,0,.5);pointer-events:none}
  .cine-mtitle .en{font-family:"Inter",sans-serif;font-weight:800}
  .cine .screen .scr.bl,.cine .screen .scr.tl{display:none}
  .cine .sticker.egg{top:auto;bottom:-86px;left:18px}
  .cine .wrap > div:first-child h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
}
@media (prefers-reduced-motion:reduce){.cine-arrow{animation:none}}

/* =========================================================
   横幅を使うレイアウト（2026-10-21）
   画像・映像は画面の端まで（.bleed）、文章は読める幅（.wrap のまま）
   ========================================================= */
html,body{overflow-x:clip}
.bleed{margin-left:calc(50% - var(--vw,100vw) / 2) !important;margin-right:calc(50% - var(--vw,100vw) / 2) !important}

/* ---- 想像力三部作：3枚を端から端まで。乗せた作品が広がってループ映像 ---- */
#works .vtext{z-index:0}
#works .lobby.bleed{position:relative;z-index:1;display:flex;gap:3px;height:clamp(520px,82vh,880px);margin-top:clamp(32px,4vw,56px);background:#0d0c0b}
#works .poster{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border:0;background:#111;color:#fff;box-shadow:none;transform:none;transition:flex-grow .8s var(--ease)}
#works .poster:hover{transform:none;box-shadow:none;color:#fff}
#works .poster::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:3;background:var(--c)}
#works .p-td{--c:#E3262B}#works .p-cr{--c:#C6F200}#works .p-fa{--c:#2F56D6}
#works .poster-frame{position:absolute;inset:0;margin:0;aspect-ratio:auto;background:#111}
#works .p-fa .poster-frame{background:radial-gradient(120% 90% at 50% 100%,#fff 0%,#CFE6F0 50%,#7fa9cf 100%)}
#works .poster-frame > img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
#works .poster:hover .poster-frame > img:first-child{transform:scale(1.04)}
#works .poster-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s;z-index:1}
#works .poster.playing .poster-vid{opacity:1}
#works .poster-frame::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 26%,transparent 42%,rgba(0,0,0,.88) 100%)}
#works .poster-reel{z-index:3;left:clamp(14px,1.6vw,24px);top:clamp(16px,1.8vw,26px)}
#works .poster-flag{z-index:3}
#works .poster-sticker{z-index:2}
#works .poster-body{position:absolute;left:0;right:0;bottom:0;z-index:3;gap:10px;padding:clamp(20px,2.4vw,40px);color:#fff}
#works .poster-title{font-size:clamp(28px,2.9vw,52px);line-height:1.1;text-shadow:0 2px 20px rgba(0,0,0,.4)}
#works .p-td .poster-title em{color:#ff6b6e}#works .p-cr .poster-title em{color:#C6F200}#works .p-fa .poster-title em{color:#9DB8FF}
#works .poster-media{color:rgba(255,255,255,.72)}
#works .poster-copy{font-size:clamp(15px,1.25vw,19px)}
#works .poster-foot{border-top-color:rgba(255,255,255,.28)}
#works .poster-cta{color:#fff}
#works .poster:hover .poster-cta{color:var(--c)}
#works .poster .tag:not(.red){background:#fff;color:#111}
@media (hover:hover) and (min-width:901px){
  #works .lobby.bleed:hover .poster{flex-grow:.82}
  #works .lobby.bleed .poster:hover,#works .lobby.bleed .poster:focus-visible{flex-grow:1.9}
}
@media (max-width:900px){
  #works .lobby.bleed{flex-direction:column;height:auto;max-width:none}
  #works .poster{flex:none;height:min(118vw,560px)}
}

/* ---- 小説：見開きで左右半分ずつ。表紙の世界（グレーの紙＋帯） ---- */
#books .books.bleed{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:clamp(28px,4vw,52px);margin-bottom:clamp(32px,4vw,56px);background:#111}
#books .book{display:flex;flex-direction:column;gap:0;background:#d6d5d0;overflow:hidden}
#books .b-cr{background:#d3d2cd}
#books .book-in{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,3.4vw,64px);align-items:center;padding:clamp(48px,5.5vw,96px) clamp(28px,4.5vw,88px)}
#books .book-art{width:140px;zoom:1.5}
#books .book-art > img{box-shadow:0 26px 36px -20px rgba(0,0,0,.5)}
#books .book-txt h3{font-size:clamp(30px,2.8vw,48px);margin:0}
#books .book-txt .en-title{color:#111;margin:4px 0 14px}
#books .b-td .book-txt .en-title{color:#C4121A}
#books .book-txt p{font-size:clamp(14px,1vw,16px);color:#222;max-width:30em}
.book-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px !important}
#books .book-obi{margin:0;padding:clamp(16px,1.8vw,26px) clamp(28px,4.5vw,88px);font:900 clamp(26px,2.8vw,48px)/1.1 var(--serif);color:#111}
#books .b-td .book-obi{background:#D9161C}
#books .b-cr .book-obi{background:#B7F01E}
@media (min-width:1500px){#books .book-art{zoom:1.85}}
@media (max-width:1100px){#books .book-art{zoom:1.25}}
@media (max-width:900px){
  #books .books.bleed{grid-template-columns:1fr}
  #books .book-in{grid-template-columns:auto minmax(0,1fr);padding:40px var(--gutter) 32px;gap:24px}
  #books .book-art{zoom:1}
  #books .book-obi{padding:16px var(--gutter)}
}
@media (max-width:520px){
  #books .book-in{grid-template-columns:1fr;justify-items:start}
  #books .book-art{zoom:1.3;margin:10px 0 0 30px}
}

/* ---- 出展・展示：年表を画面の端まで ---- */
.tl-scroller{margin-left:calc(50% - var(--vw,100vw) / 2) !important;margin-right:calc(50% - var(--vw,100vw) / 2) !important;padding-left:var(--gutter,20px) !important;padding-right:var(--gutter,20px) !important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3vw,#000 calc(100% - 3vw),transparent);mask-image:linear-gradient(90deg,transparent,#000 3vw,#000 calc(100% - 3vw),transparent)}
@media (min-width:1600px){.tl{--k:1.12;--card:450px}.tl-thumb,.tl-thumb img,.tl-thumb.none{flex-basis:190px;width:190px}}
#works .p-cr .poster-frame > img:first-child,#works .p-fa .poster-frame > img:first-child{height:124%;object-position:50% 0}
/* 年表の線は画面の左端から（途切れて見えないように） */
.tl-axis{left:calc(var(--gutter,20px) * -1)}
.tl-axis::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ink)}