/* 開幕の幕（opening.js と対）。html.op-on のあいだだけ表示する。
   案は 10 種類（html[data-opening] で地の色を先に決め、opening.js が中身を作る）。
   op-run＝演出開始／op-opening＝星の窓が開いている最中／op-played＝幕を使った */
.opening{display:none}
.op-on{overflow:hidden}
.op-on .opening{display:block;position:fixed;inset:0;z-index:300;overflow:hidden;color:#eef3f7;background:#070d18;cursor:pointer}
.op-skip{position:absolute;z-index:9;right:max(26px,3.2vw);bottom:max(24px,3.4vh);padding:10px 4px;font:10px var(--latin);letter-spacing:.3em;color:#b9c8d6;border-bottom:1px solid #b9c8d655;opacity:0;animation:op-fade .6s ease-out 1.2s forwards}
.op-skip:hover{color:#fff;border-color:#fff}
@keyframes op-fade{to{opacity:1}}
@keyframes op-twinkle{0%,100%{opacity:.2}50%{opacity:.95}}

/* ════════ star：星の窓 ════════ */
.op-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
#op-stars circle{fill:#dfe9f5}
.op-twinkle{animation:op-twinkle 3.2s ease-in-out infinite}
/* 軌跡：尾は薄く残り、頭だけが明るく走り抜ける */
.op-trail,.op-head{fill:none;stroke-linecap:round}
/* 太さは図の単位で持つ（PC でおよそ 1px）。画面の px に固定すると、破線で描く長さの計算が狂って中心から伸びて見える */
.op-trail{stroke-width:.15;stroke-opacity:.36;stroke-dasharray:1;stroke-dashoffset:1}
.op-head{stroke:#fff;stroke-width:.3;stroke-dasharray:.02 1.2;stroke-dashoffset:.02;opacity:0}
.op-head-glow{stroke-width:1.3;stroke-opacity:.42}
.op-run .op-trail{animation:op-trail .78s cubic-bezier(.5,0,.85,.45) var(--d) forwards}
.op-run .op-head{animation:op-head .78s cubic-bezier(.5,0,.85,.45) var(--d) forwards}
/* 交点に灯る星 */
#op-emblem path,#op-emblem circle{fill:none;stroke:#f3f6f8;stroke-width:.3;stroke-linejoin:round}
#op-emblem .op-star{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
#op-emblem .op-star-fill{fill:#fff;stroke:none;opacity:0}
#op-emblem .op-star-inner{opacity:0;stroke-width:.2}
#op-emblem .op-ring{stroke:#d9c7a0;stroke-width:.14;opacity:0;transform-box:fill-box;transform-origin:center}
.op-run #op-emblem .op-star{animation:op-draw .75s cubic-bezier(.6,0,.2,1) .95s forwards}
.op-run #op-emblem .op-star-fill{animation:op-ignite 1.2s ease-out 1.55s forwards}
.op-run #op-emblem .op-star-inner{animation:op-fade .7s ease-out 1.6s forwards}
.op-run #op-emblem .op-ring{animation:op-ring 1.25s cubic-bezier(.2,.7,.2,1) 1.55s forwards}
/* 窓の縁の光。開き始めるまでは出さない（縮尺 0 でも線の太さぶんが点として見えてしまう）*/
.op-rim{fill:none;stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke;transform:scale(0);opacity:0}
.op-rim-glow{stroke:#ffe6b3;stroke-width:9px;stroke-opacity:.26}
.op-opening .op-rim{opacity:1}
/* 題字 */
.op-mark{position:absolute;left:0;right:0;top:calc(50% + clamp(62px,9vh,96px));text-align:center;pointer-events:none}
.op-word{margin:0;font:500 clamp(25px,3vw,42px)/1 Georgia,serif;letter-spacing:.36em;padding-left:.36em;opacity:0}
.op-sub{margin:16px 0 0;font:11px/1 var(--latin);letter-spacing:1.15em;padding-left:1.15em;color:#b9c8d6;opacity:0}
.op-bar{display:block;width:118px;height:1px;margin:26px auto 0;background:#ffffff26;opacity:0}
.op-bar b{display:block;height:100%;background:#d9c7a0;transform:scaleX(.08);transform-origin:left;transition:transform .5s ease-out}
.op-run .op-word{animation:op-word 1.1s cubic-bezier(.2,.7,.2,1) 1.35s forwards}
.op-run .op-sub{animation:op-sub 1s cubic-bezier(.2,.7,.2,1) 1.7s forwards}
.op-run .op-bar{animation:op-fade .6s ease-out 1.55s forwards}
/* 開く：題字と軌跡は先に引き、星そのものが窓になる */
.op-opening .op-mark,.op-opening #op-trails,.op-opening .op-skip{transition:opacity .28s ease-out;opacity:0!important;animation:none}
.op-opening #op-emblem{transition:opacity .3s ease-out .1s;opacity:0}
@keyframes op-trail{to{stroke-dashoffset:0}}
@keyframes op-head{0%{stroke-dashoffset:.02;opacity:0}8%{opacity:1}92%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
@keyframes op-draw{from{opacity:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes op-ignite{0%{opacity:0}18%{opacity:1}100%{opacity:.16}}
@keyframes op-ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(4.6)}}
@keyframes op-word{from{opacity:0;letter-spacing:.7em;padding-left:.7em;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes op-sub{from{opacity:0;letter-spacing:1.8em;padding-left:1.8em}to{opacity:1}}

/* ════════ roll：点呼（かわいい）════════ */
[data-opening=roll].op-on .opening{background:linear-gradient(180deg,#bfe4f7 0%,#e9f7ff 55%,#fff5e2 100%);color:#132333}
[data-opening=roll] .op-skip{color:#132333;border-color:#13233355}
.op-roll{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,4.6vh,46px);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif}
.op-dots i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);opacity:.26;animation:op-float 5s ease-in-out infinite alternate}
.op-badges{position:relative;display:flex;gap:clamp(8px,1.7vw,24px);margin:0;padding:0;list-style:none;--size:clamp(52px,min(11vw,calc(76vw / var(--n))),108px)}
.op-badges li{width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;align-content:center;background:color-mix(in srgb,var(--c) 62%,#fff);border:calc(var(--size)*.055) solid #fff;box-shadow:0 calc(var(--size)*.07) 0 color-mix(in srgb,var(--c) 72%,#132333),0 calc(var(--size)*.17) calc(var(--size)*.3) #13233326;opacity:0}
.op-badges b{font-size:calc(var(--size)*.42);font-weight:900;line-height:1;color:#132333}
.op-badges b[data-len="2"]{font-size:calc(var(--size)*.31)}
.op-badges b[data-len="3"],.op-badges b[data-len="4"]{font-size:calc(var(--size)*.22)}
.op-badges small{font:700 calc(var(--size)*.105)/1 var(--latin);letter-spacing:.14em;margin-top:calc(var(--size)*.07);color:#132333b8}
.op-roll-logo{position:relative;width:min(80vw,600px);opacity:0}
/* 水玉の穴。開くときだけ掛ける（常時だと中心に小さな点が見える）*/
.op-dotting{-webkit-mask-image:radial-gradient(circle,transparent var(--r,0px),#000 calc(var(--r,0px) + 1.5px));mask-image:radial-gradient(circle,transparent var(--r,0px),#000 calc(var(--r,0px) + 1.5px));-webkit-mask-size:104px 104px;mask-size:104px 104px;-webkit-mask-position:center;mask-position:center}
@keyframes op-float{from{transform:translateY(-10px)}to{transform:translateY(12px)}}

/* ════════ flash：フラッシュカット（派手）════════ */
[data-opening=flash].op-on .opening{background:#05070c}
.op-flash{position:absolute;inset:0;overflow:hidden;color:#fff}
.op-flash-wait{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;background:#fff;transform:rotate(45deg);animation:op-twinkle 1s ease-in-out infinite}
.op-flash.is-go .op-flash-wait{display:none}
.op-cut{position:absolute;inset:0;display:none;color:#0b1220}
.op-cut.is-on{display:block}
.op-cut-panel{position:absolute;inset:-6% -22%;background:var(--c)}
.op-cut-face{position:absolute;top:0;bottom:0;width:min(56%,860px);left:calc(50% + var(--side)*19% - min(28%,430px));overflow:hidden;clip-path:polygon(18% 0,100% 0,82% 100%,0 100%)}
.op-cut-face img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.op-cut b{position:absolute;top:44%;left:calc(50% - var(--side)*24%);translate:-50% -50%;font:700 clamp(64px,15vw,270px)/.8 var(--latin);white-space:nowrap;text-shadow:.03em .03em 0 #ffffff66,-.02em 0 0 #00e0ff80,.02em 0 0 #ff3b6b80}
.op-cut span{position:absolute;top:calc(44% + clamp(50px,10vw,170px));left:calc(50% - var(--side)*24%);translate:-50% 0;text-align:center;font:500 clamp(15px,1.7vw,26px) var(--serif);letter-spacing:.32em;white-space:nowrap}
.op-cut small{display:block;margin-top:10px;font:11px var(--latin);letter-spacing:.3em}
.op-lineup{position:absolute;inset:0 -4vw;display:none}
.is-lineup .op-lineup{display:flex}
.op-lineup i{position:relative;flex:1;margin:0 -1.6vw;overflow:hidden;background:var(--c);clip-path:polygon(18% 0,100% 0,82% 100%,0 100%)}
.op-lineup u{position:absolute;inset:0 4px;background-size:cover;background-position:50% 13%;clip-path:polygon(18% 0,100% 0,82% 100%,0 100%)}
.is-slam .op-lineup{filter:brightness(.3) saturate(.6);transition:filter .18s}
.op-slam{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;opacity:0}
.op-slam p{margin:0;font:600 clamp(50px,10.5vw,170px)/1 Georgia,serif;letter-spacing:.06em;text-shadow:0 4px 40px #000}
.op-slam small{margin-top:1.4vw;font:clamp(11px,1.1vw,17px) var(--latin);letter-spacing:1.2em;padding-left:1.2em}
.op-shock{position:absolute;left:50%;top:50%;width:26vmin;height:26vmin;margin:-13vmin;border:3px solid #fff;border-radius:50%;opacity:0}
.op-white{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* ════════ dawn：夜明け（長尺）════════ */
[data-opening=dawn].op-on .opening{background:#03060d}
.op-dawn{position:absolute;inset:0;overflow:hidden;color:#fff}
.op-dawn-stage{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease-out}
.op-dawn.is-go .op-dawn-stage{opacity:1}
.op-night,.op-day,.op-glow{position:absolute;inset:0;background:center/cover no-repeat}
.op-night{background-image:linear-gradient(#02060fa6,#02060f40 45%,#02060f99),url('../assets/island-night.png')}
.op-day{background-image:url('../assets/island-day.png');opacity:0}
.op-glow{background:linear-gradient(0deg,transparent 28%,#ffd9a0d9 50%,#ffb37a70 60%,transparent 80%);mix-blend-mode:screen;opacity:0}
.op-lines{position:absolute;left:8%;right:8%;top:50%}
.op-lines p{position:absolute;left:0;right:0;top:0;translate:0 -50%;margin:0;text-align:center;font:400 clamp(16px,2.1vw,31px)/1.9 var(--serif);letter-spacing:.24em;text-shadow:0 2px 24px #020814,0 0 4px #020814;opacity:0}
.op-dawn-title{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.op-dawn-title img{width:min(72vw,680px);filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 54px #ffffffd0)}
.op-bloom{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#fff 0%,#fffdf6 38%,#fff3d4 100%);opacity:0}

/* ════════ start：号砲（斬新）════════ */
[data-opening=start].op-on .opening{background:#081220}
.op-start{position:absolute;inset:0;overflow:hidden;color:#e9eff4;background:linear-gradient(180deg,#0a1626,#0f2238 60%,#0a1626)}
.op-clock{position:absolute;left:0;right:0;top:14%;margin:0;text-align:center;font:300 clamp(40px,7.4vw,112px)/1 var(--latin);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#e9eff42e;transition:color .12s}
.op-start.is-go .op-clock{color:#fff}
.op-call{position:absolute;left:0;right:0;top:calc(14% + clamp(62px,10.4vw,156px));margin:0;text-align:center;font:500 clamp(12px,1.45vw,20px) var(--latin);letter-spacing:.42em;color:#d9c7a0;opacity:0}
.op-call.is-set{font-size:clamp(30px,4.6vw,64px);letter-spacing:.2em;color:#fff}
.op-call.is-fire{font-size:clamp(40px,7vw,100px);letter-spacing:.1em;color:#fff}
.op-lanes{position:absolute;left:0;right:0;top:46%;bottom:15%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between}
.op-lanes li{display:flex;align-items:center;gap:18px;padding:0 5vw;opacity:0}
.op-lanes b{width:1.2em;font:500 clamp(14px,1.5vw,22px) var(--latin);color:var(--c)}
.op-lanes i{flex:1;height:2px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 24%,transparent));transform-origin:left}
.op-lanes small{font:10px var(--latin);letter-spacing:.3em;color:#b9c8d6}
/* 合図のあと：レーンが破線になって後ろへ流れる */
.op-start.is-go .op-lanes i{height:3px;background:repeating-linear-gradient(90deg,var(--c) 0 120px,transparent 120px 190px);animation:op-lane .2s linear infinite}
@keyframes op-lane{to{background-position:-190px 0}}

/* ════════ voyage：航路 ════════ */
[data-opening=voyage].op-on .opening{background:radial-gradient(120% 90% at 70% 30%,#12324c,#081726 62%,#050d18)}
.op-voyage{position:absolute;inset:0}
.op-chart{position:absolute;inset:0;width:100%;height:100%;display:block}
.op-vy-grid line{stroke:#7fa6c4;stroke-width:.08;opacity:.24}
.op-vy-coast{fill:#16324a;stroke:#7fa6c4;stroke-width:.2;opacity:0;transition:opacity .8s}
.op-vy-compass{opacity:0;transition:opacity .8s .2s}
.op-vy-compass circle,.op-vy-compass path{fill:none;stroke:#9fbdd4;stroke-width:.2}
.op-vy-compass .op-vy-needle{fill:#d9c7a0;stroke:none}
.op-vy-plan,.op-vy-route{fill:none;stroke-linecap:round}
.op-vy-plan{stroke:#9fbdd4;stroke-width:.22;stroke-dasharray:1 1.6;opacity:0;transition:opacity .8s .3s}
.op-vy-route{stroke:#f0dba8;stroke-width:.45;stroke-dasharray:1;stroke-dashoffset:1}
.op-vy-ship{fill:#fff;opacity:0;transition:opacity .4s .4s}
.op-vy-isle path,.op-vy-ping{transform-box:fill-box;transform-origin:center}
.op-vy-isle path{fill:#f6e9c8;transform:scale(.28);opacity:.55;transition:transform .7s cubic-bezier(.2,1.7,.3,1),opacity .4s;filter:drop-shadow(0 0 2px #ffe6b3)}
.op-vy-ping{fill:none;stroke:#f0dba8;stroke-width:.7;opacity:0}
.is-go .op-vy-coast,.is-go .op-vy-compass,.is-go .op-vy-ship{opacity:1}
.is-go .op-vy-plan{opacity:.5}
.is-arrived .op-vy-isle path{transform:scale(1);opacity:1}
.is-arrived .op-vy-ping{animation:op-vy-ping 1.6s ease-out infinite}
.is-arrived .op-vy-ping+.op-vy-ping{animation-delay:.8s}
@keyframes op-vy-ping{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(6)}}
.op-vy-coord{position:absolute;left:max(26px,4vw);top:max(92px,12vh);margin:0;font:11px var(--latin);letter-spacing:.24em;color:#9fbdd4}
.op-vy-coord small{display:block;margin-top:8px;font:10px var(--sans);letter-spacing:.3em;color:#d9c7a0}
.op-vy-dist{position:absolute;left:max(26px,4vw);top:calc(max(92px,12vh) + 62px);margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;transition:opacity .6s}
.op-vy-dist small{flex-basis:100%;font-size:11px;letter-spacing:.24em;color:#9fbdd4}
.op-vy-dist b{font:300 clamp(44px,7vw,96px)/1 var(--latin);font-variant-numeric:tabular-nums}
.op-vy-dist i{font:14px var(--latin);font-style:normal;letter-spacing:.2em}
.op-vy-name{position:absolute;right:max(26px,5vw);bottom:max(64px,10vh);margin:0;text-align:right;font:500 clamp(22px,2.8vw,40px)/1 Georgia,serif;letter-spacing:.3em;opacity:0;transform:translateY(10px);transition:opacity .7s .2s,transform .7s .2s}
.op-vy-name small{display:block;margin-top:10px;font:11px var(--latin);letter-spacing:.6em}
.is-arrived .op-vy-name{opacity:1;transform:none}
.is-arrived .op-vy-dist{opacity:.35}

/* ════════ shutter：シャッター ════════ */
[data-opening=shutter].op-on .opening{background:#04070c}
.op-shutter{position:absolute;inset:0;overflow:hidden}
.op-sh-view{position:absolute;inset:0;background:var(--hero-image) center/cover;filter:blur(26px) brightness(.72);transform:scale(1.16);opacity:0;transition:opacity .5s}
.is-go .op-sh-view{opacity:1}
.op-sh-hud{position:absolute;inset:max(22px,4.5vmin);opacity:0;transition:opacity .5s .15s;color:#f3f5f4;font:11px var(--latin);letter-spacing:.24em;text-shadow:0 1px 6px #000a}
.is-go .op-sh-hud{opacity:1}
.op-sh-hud p{position:absolute;margin:0}
.op-sh-place{left:26px;top:20px}
.op-sh-meta{left:26px;bottom:20px}
.op-sh-date{right:26px;bottom:20px;color:#ffd58a}
.op-sh-corner{position:absolute;left:0;top:0;width:34px;height:34px;border:solid #f3f5f4;border-width:2px 0 0 2px}
.op-sh-corner:nth-child(2){left:auto;right:0;border-width:2px 2px 0 0}
.op-sh-corner:nth-child(3){top:auto;bottom:0;border-width:0 0 2px 2px}
.op-sh-corner:nth-child(4){left:auto;top:auto;right:0;bottom:0;border-width:0 2px 2px 0}
.op-sh-reticle{position:absolute;left:50%;top:50%;width:clamp(90px,13vmin,150px);aspect-ratio:1;translate:-50% -50%;border:1.5px solid currentColor;border-radius:4px;transform:scale(1.5);opacity:.75;transition:transform .5s cubic-bezier(.2,1.5,.3,1),color .2s,opacity .2s,box-shadow .2s}
.op-sh-reticle:before,.op-sh-reticle:after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.op-sh-reticle:before{width:14px;height:1.5px;margin:-.75px 0 0 -7px}
.op-sh-reticle:after{width:1.5px;height:14px;margin:-7px 0 0 -.75px}
.is-go .op-sh-reticle{animation:op-sh-hunt 1.7s ease-in-out .35s}
.is-locked .op-sh-reticle{transform:scale(1);color:#ffd58a;opacity:1;box-shadow:0 0 22px #ffd58a66}
@keyframes op-sh-hunt{0%,100%{transform:scale(1.5)}40%{transform:scale(1.15)}62%{transform:scale(1.36)}}
.op-sh-iris{position:absolute;inset:0;width:100%;height:100%}
.op-sh-iris path{fill:#04070c}

/* ════════ signal：受信 ════════ */
[data-opening=signal].op-on .opening{background:#04080f}
.op-signal{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--latin);color:#bfe9ff}
.op-sg-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff0b 0 1px,transparent 1px 4px);pointer-events:none}
.op-sg-scan:after{content:"";position:absolute;left:0;right:0;top:-22%;height:22%;background:linear-gradient(transparent,#7fd4ff17,transparent);animation:op-sg-roll 3.2s linear infinite}
@keyframes op-sg-roll{to{top:100%}}
.op-sg-wave{position:absolute;left:0;top:50%;width:100%;height:clamp(90px,22vh,200px);translate:0 -50%;overflow:visible;transition:opacity .5s}
.op-sg-wave path{fill:none;stroke:#7fd4ff;stroke-width:1.4px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #7fd4ffb3)}
.op-sg-log{position:absolute;left:max(26px,5vw);bottom:max(64px,11vh);margin:0;font-size:11px;letter-spacing:.3em}
.op-sg-log:after{content:"_";animation:op-twinkle .9s steps(2) infinite}
.op-sg-pct{position:absolute;right:max(26px,5vw);bottom:max(54px,9vh);margin:0}
.op-sg-pct b{font:300 clamp(48px,8vw,110px)/1 var(--latin);font-variant-numeric:tabular-nums}
.op-sg-pct small{margin-left:6px;font-size:16px;letter-spacing:.1em}
.op-sg-title{position:relative;text-align:center;color:#fff;opacity:0}
.op-sg-title p{position:relative;margin:0;font:500 clamp(34px,6.4vw,96px)/1 Georgia,serif;letter-spacing:.3em;padding-left:.3em}
.op-sg-title small{display:block;margin-top:18px;font:clamp(11px,1vw,14px) var(--latin);letter-spacing:.9em;padding-left:.9em}
.is-locked .op-sg-title{opacity:1;animation:op-sg-in .7s steps(1)}
.is-locked .op-sg-title p:before,.is-locked .op-sg-title p:after{content:attr(data-text);position:absolute;inset:0;padding-left:.3em;mix-blend-mode:screen;animation:op-sg-split .7s steps(1) both}
.is-locked .op-sg-title p:before{color:#ff2a6d}
.is-locked .op-sg-title p:after{color:#05d9e8;animation-direction:reverse}
.is-locked .op-sg-wave{opacity:.28}
@keyframes op-sg-in{0%{opacity:0;clip-path:inset(40% 0 42% 0);transform:translateX(-3%)}18%{opacity:1;clip-path:inset(8% 0 62% 0);transform:translateX(2%)}36%{clip-path:inset(55% 0 6% 0);transform:translateX(-1.5%)}54%{clip-path:inset(20% 0 30% 0);transform:translateX(1%)}72%,100%{clip-path:inset(0);transform:none}}
@keyframes op-sg-split{0%{transform:translate(-9px,2px);opacity:.9}30%{transform:translate(7px,-2px);opacity:.9}60%{transform:translate(-4px,1px);opacity:.8}80%{transform:translate(2px,0);opacity:.6}100%{transform:none;opacity:0}}
.op-signal.is-off{animation:op-sg-off .5s ease-in both}
@keyframes op-sg-off{to{filter:brightness(4)}}

/* ════════ album：アルバム ════════ */
[data-opening=album].op-on .opening{background:radial-gradient(90% 80% at 50% 40%,#f4eee3,#e3d9c8 70%,#d3c7b2);color:#132333}
[data-opening=album] .op-skip{color:#132333;border-color:#13233355}
.op-album{position:absolute;inset:0;overflow:hidden}
.op-al-photos{list-style:none;margin:0;padding:0}
.op-al-photos li{position:absolute;left:50%;top:47%;translate:-50% -50%;width:min(15.5vw,25vh);padding:.5vw .5vw 0;background:#fdfdfb;box-shadow:0 14px 30px #4a3d2a47,0 2px 5px #4a3d2a33;opacity:0}
.op-al-photos li:before{content:"";position:absolute;left:31%;top:-11px;width:38%;height:20px;background:color-mix(in srgb,var(--c) 70%,#fff);opacity:.86;transform:rotate(-3deg)}
.op-al-photos img{display:block;width:100%;aspect-ratio:1/1.12;object-fit:cover;object-position:50% 12%}
.op-al-photos span{display:block;padding:.55em 0 .65em;text-align:center;font:500 clamp(10px,1vw,14px) var(--latin);letter-spacing:.3em;color:#3a4a59}
.op-al-main{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(52vw,84vh);padding:.7vw;background:#fdfdfb;box-shadow:0 26px 60px #4a3d2a66;opacity:0}
.op-al-main i{display:block;aspect-ratio:16/10;background:var(--hero-image) center/cover}
@media(max-width:640px){.op-al-photos li{width:27vw;padding:1.3vw 1.3vw 0}.op-al-main{width:86vw;padding:1.6vw}.op-al-main i{aspect-ratio:1/1.25}}

/* ════════ bands：文字の帯 ════════ */
[data-opening=bands].op-on .opening{background:#0b1626}
.op-bands{position:absolute;inset:0;display:flex;flex-direction:column}
.op-band{flex:1;display:flex;align-items:center;overflow:hidden;background:#0b1626;color:#0b1626;-webkit-text-stroke:2.4px #e9eef2;paint-order:stroke fill;transform-origin:50% 0}
.op-band:nth-child(even){transform-origin:50% 100%}
.op-band.is-gold{background:#d9c7a0;color:#132333;-webkit-text-stroke:0}
.op-band.is-names{-webkit-text-stroke:0}
.op-band p{display:flex;flex:none;margin:0;white-space:nowrap;font:700 clamp(40px,min(15.5vh,19vw),170px)/1 var(--latin);letter-spacing:.02em;animation:op-marquee 30s linear infinite}
.op-band:nth-child(even) p{animation-direction:reverse}
.op-band.is-copy p{font-family:var(--serif);font-weight:600;font-size:clamp(34px,min(12.5vh,15vw),140px);letter-spacing:.08em}
.op-band span{display:flex;align-items:center}
.op-band i{font-style:normal;font-size:.4em;margin:0 .7em;color:#d9c7a0;-webkit-text-stroke:0}
.op-band.is-gold i{color:#132333}
@keyframes op-marquee{to{transform:translateX(-50%)}}