:root{--paper:#ECEEF1;--ink:#15171C;--mute:#5B6170;--line:#D3D7DE}
*{box-sizing:border-box;margin:0;padding:0}
.ph{display:inline-block}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;background:var(--paper);color:var(--ink);line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid #2B6CFF;outline-offset:3px}
.disp{font-family:"Dela Gothic One","Noto Sans JP",sans-serif;font-weight:400;letter-spacing:.01em}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,40px);background:rgba(236,238,241,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .logo{display:block;text-decoration:none}.bar .logo img{display:block;height:30px;width:auto}
.bar nav{display:flex;gap:clamp(12px,3vw,28px);font-size:14px;font-weight:700}
.bar nav a{text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
.bar nav a:hover,.bar nav a[aria-current]{border-color:currentColor}
@media(max-width:560px){.bar{padding:10px 14px}.bar .logo img{height:24px}.bar nav{gap:11px;font-size:12px}.bar nav a:last-child{display:none}}
.bar nav a,footer a{white-space:nowrap}
/* トップ: 先頭 */
.hero{padding:clamp(36px,7vw,88px) clamp(16px,4vw,40px) 0;overflow:hidden}
.hero h1{font-size:clamp(40px,9.4vw,132px);line-height:1.08;max-width:15em}
.hero p.lead{text-wrap:balance;margin-top:clamp(16px,2.4vw,28px);max-width:34em;font-size:clamp(15px,1.6vw,18px);color:var(--mute)}
.reel{display:flex;gap:clamp(10px,1.6vw,22px);margin-top:clamp(8px,2vw,28px);align-items:flex-end;justify-content:center}
.reel .s{flex:0 0 auto;width:clamp(96px,13vw,208px);border-radius:clamp(14px,2.2vw,30px) clamp(14px,2.2vw,30px) 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 18px 40px rgba(20,24,40,.22);animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.reel .s:nth-child(1){margin-bottom:-6%;animation-delay:.05s}.reel .s:nth-child(2){margin-bottom:6%;animation-delay:.15s}
.reel .s:nth-child(3){margin-bottom:-2%;animation-delay:.25s}.reel .s:nth-child(4){margin-bottom:10%;animation-delay:.35s}
.reel .s:nth-child(5){margin-bottom:-4%;animation-delay:.45s}.reel .s:nth-child(6){margin-bottom:4%;animation-delay:.55s}
@keyframes rise{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
/* トップ: カテゴリ */
.room{position:relative;display:block;text-decoration:none;overflow:hidden;padding:clamp(40px,8vw,112px) clamp(16px,4vw,40px);min-height:clamp(340px,52vw,560px)}
.en{font-family:"Dela Gothic One",sans-serif;font-size:clamp(34px,7.2vw,104px);line-height:1;letter-spacing:.05em;-webkit-text-fill-color:transparent;-webkit-text-stroke:clamp(1.5px,.22vw,3px) currentColor;position:relative;z-index:2}
.room h2{position:relative;z-index:2;font-size:clamp(56px,13vw,200px);line-height:1;margin-top:.06em}
.room .l{position:relative;z-index:2;margin-top:clamp(10px,1.6vw,20px);font-size:clamp(15px,1.7vw,20px);max-width:22em}
.room .ics{display:flex;gap:12px;margin-top:clamp(20px,3vw,36px)}
.room .ics img{width:clamp(44px,6vw,68px);height:clamp(44px,6vw,68px);border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.room .go{position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(24px,5vw,56px);font-weight:700;font-size:clamp(14px,1.5vw,17px);padding:12px 22px;border-radius:99px;border:2px solid currentColor;transition:background .2s,color .2s}
.room:hover .go,.room:focus-visible .go{background:var(--acc);color:var(--bg);border-color:var(--acc)}
.room .pic{position:absolute;right:clamp(16px,6vw,96px);top:clamp(-40px,-2vw,0px);display:flex;gap:clamp(8px,1.4vw,18px);transform:rotate(7deg) translateY(-12%)}
.room .pic img{width:clamp(96px,17vw,240px);border-radius:clamp(12px,2vw,26px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.room .pic img:nth-child(2){transform:translateY(18%)}
.room .pic img:nth-child(3){transform:translateY(-4%)}
@media(max-width:720px){.room .pic{opacity:.34;right:-6vw}.room .go{position:static;display:inline-block;margin-top:20px}}
/* カテゴリのページ */
.chead{padding:clamp(48px,9vw,120px) clamp(16px,4vw,40px) clamp(40px,7vw,88px)}
.chead .crumb{font-size:14px;opacity:.8}.chead .crumb a{text-decoration:none;border-bottom:1px solid currentColor}
.chead h1{font-size:clamp(64px,16vw,240px);line-height:1;margin-top:.12em}
.chead p{margin-top:clamp(12px,2vw,24px);font-size:clamp(16px,2vw,22px);max-width:24em}
.app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(48px,9vw,120px) clamp(16px,4vw,40px);min-height:min(92vh,880px)}
.app.flip .txt{order:2}
.app .head{display:flex;align-items:center;gap:14px}
.app .head img{width:64px;height:64px;border-radius:22%;box-shadow:0 0 0 1px rgba(128,128,128,.3)}
.app .head b{font-size:clamp(18px,2vw,22px);font-weight:700}
.app h2{font-size:clamp(28px,4.2vw,54px);line-height:1.18;margin-top:clamp(18px,3vw,34px)}
.app .lead{margin-top:clamp(14px,2vw,22px);max-width:30em}
.app ul{list-style:none;margin-top:clamp(18px,2.6vw,30px);display:grid;gap:12px;max-width:30em}
.app li{padding-left:20px;position:relative;font-size:15px}
.app li::before{content:"";position:absolute;left:0;top:.82em;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.app .btn{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(24px,3.4vw,40px);padding:15px 28px;border-radius:99px;background:var(--acc);color:var(--accInk);font-weight:700;text-decoration:none;font-size:16px;transition:transform .15s}
.app .btn:hover{transform:translateY(-2px)}
.app .note{margin-top:10px;font-size:13px;color:var(--sub)}
.app .btn.soon{background:transparent;color:var(--acc);border:2px solid var(--acc);cursor:default}
.app .btn.soon:hover{transform:none}
.head .tag{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:99px;background:var(--acc);color:var(--accInk);font-size:12px;font-weight:700;vertical-align:middle}
/* 物語が主役のアプリ（TINSEA FIREWORKS） */
.story{background:var(--bg);color:var(--ink)}
.story .head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}.story .head img{width:64px;height:64px;border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,.18)}.story .head b{font-size:clamp(18px,2vw,22px)}.story .head .tag{margin-left:0}
.story .mincho,.story .narr,.story blockquote{font-family:"Shippori Mincho","Yu Mincho",serif}
.story .open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(56px,9vw,128px) clamp(16px,4vw,40px) clamp(40px,6vw,80px);max-width:1180px;margin:0 auto}
.story .narr{margin-top:clamp(28px,4vw,48px);font-size:clamp(19px,2.3vw,28px);line-height:2.05;font-weight:500}
.story .narr p+p{margin-top:.5em}
.story .narr .who{display:block;font-size:.62em;color:var(--sub);font-family:"Noto Sans JP",sans-serif;font-weight:500;line-height:1.4;margin-top:1.4em}
.story .frame{justify-self:center;width:min(100%,380px);aspect-ratio:540/948;border-radius:clamp(20px,3vw,32px);overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(246,178,90,.25),0 0 90px rgba(246,178,90,.12)}
.story video,.story .frame img{display:block;width:100%;height:100%;object-fit:cover}
.story .synop{max-width:36em;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,4vw,40px) clamp(48px,7vw,96px)}
.story .synop h3{font-size:clamp(24px,3.4vw,40px);line-height:1.4;font-weight:600}
.story .synop p{margin-top:1.1em;font-size:clamp(15px,1.6vw,17px)}
.story .cast{padding:clamp(48px,7vw,96px) clamp(16px,4vw,40px);border-top:1px solid rgba(169,180,203,.18);max-width:1240px;margin:0 auto}
.story .cast>h3{font-size:clamp(22px,3vw,34px);font-weight:600}
.story .cast>p{margin-top:8px;color:var(--sub)}
.story .cast ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px) clamp(14px,2.4vw,32px);margin-top:clamp(24px,4vw,44px);max-width:960px}
@media(max-width:620px){.story .cast ol{grid-template-columns:repeat(2,minmax(0,1fr))}.story .cast blockquote{font-size:14px}}
.story .cast .v{aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#000}
.story .cast small{display:block;margin-top:14px;font-size:12px;color:var(--acc);font-weight:700;letter-spacing:.04em}
.story .cast b{display:block;font-size:17px;margin-top:2px}
.story .cast blockquote{margin-top:8px;font-size:15px;line-height:1.85}
.story .play{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(48px,8vw,112px) clamp(16px,4vw,40px);border-top:1px solid rgba(169,180,203,.18)}
.story .play h3{font-size:clamp(26px,3.8vw,48px);line-height:1.2}
@media(max-width:820px){.story .open,.story .play{grid-template-columns:1fr}.story .frame{width:min(78%,320px)}}
.shots{display:flex;gap:clamp(10px,1.8vw,24px);justify-content:center;align-items:center}
.shots img{width:min(46%,320px);border-radius:clamp(18px,3vw,34px);box-shadow:0 0 0 1px rgba(128,128,128,.28),0 26px 60px rgba(0,0,0,.3)}
.shots img+img{transform:translateY(9%)}
.shots.wide{display:block}
.shots.wide img{width:100%;max-width:none;border-radius:clamp(14px,2vw,24px)}
.shots.wide img+img{display:none}
@media(max-width:820px){.app{grid-template-columns:1fr;min-height:0}.app.flip .txt{order:0}.shots{margin-top:12px}}
.more{padding:clamp(40px,6vw,72px) clamp(16px,4vw,40px);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line)}
.more h3{font-size:clamp(20px,2.6vw,28px)}
.more nav{display:flex;gap:10px;flex-wrap:wrap}
.more nav a{padding:10px 20px;border-radius:99px;border:2px solid var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.more nav a:hover{background:var(--ink);color:var(--paper)}
footer{padding:36px clamp(16px,4vw,40px) 56px;font-size:13px;color:var(--mute);border-top:1px solid var(--line)}
footer a{margin-right:16px}
footer p+p{margin-top:8px}
@media(prefers-reduced-motion:reduce){.reel .s{animation:none}html{scroll-behavior:auto}.app .btn{transition:none}}

/* 動き: transform / opacity / translate だけで動かす（60fps） */
@view-transition{navigation:auto}
.prog{position:fixed;left:0;top:0;height:3px;width:100%;background:#2B6CFF;transform:scaleX(0);transform-origin:0 50%;z-index:30;will-change:transform}
.js .hero h1 .c{display:inline-block;opacity:0;transform:translateY(.55em) rotate(4deg);animation:ch .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*38ms + 120ms)}
@keyframes ch{to{opacity:1;transform:none}}
.js .hero p.lead{opacity:0;animation:fadein .8s ease .85s forwards}
@keyframes fadein{to{opacity:1}}
[data-par]{will-change:translate}
.reel .s,.room .pic img,.shots img{will-change:translate}
.mq{overflow:hidden;border-block:1px solid var(--line);background:#fff;padding:clamp(14px,2vw,22px) 0;position:relative;z-index:3}
.mq .tr{display:flex;width:max-content;will-change:transform}
.mq .it{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);padding-right:clamp(28px,4vw,56px);font-family:"Dela Gothic One",sans-serif;font-size:clamp(20px,3.4vw,40px);white-space:nowrap}
.mq .it img{width:clamp(30px,4vw,46px);height:clamp(30px,4vw,46px);border-radius:22%}
.room .pic img{transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.room:hover .pic img{scale:1.05}
.room .go{transition:background .2s,color .2s,translate .3s cubic-bezier(.2,.8,.2,1)}
.room:hover .go{translate:-6px 0}
.shots{perspective:1100px}
.shots img{transition:transform .25s ease-out;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.shots img+img{transform:translateY(9%) perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
.js .chead h1{overflow:hidden}
.js .chead h1 .c{display:inline-block;transform:translateY(105%);animation:chup .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms + 60ms)}
@keyframes chup{to{transform:none}}
@media(prefers-reduced-motion:reduce){.js .hero h1 .c,.js .chead h1 .c{animation:none;opacity:1;transform:none}.js .hero p.lead{animation:none;opacity:1}.js .rv{opacity:1;transform:none;transition:none}.shots img,.shots img+img{transition:none}}