/* saiko — v4.css（site.css の上に重ねる：育つロゴ／回る左上ロゴ／レール／カーソル／ピンKV・帯／ワンポイント動画／リビール初期状態） */
.mark{position:relative;height:min(calc(100vh - 70px),900px);min-height:480px;display:flex;align-items:center;justify-content:center}
.mark svg{width:min(62vw,720px);height:auto;color:var(--ink);overflow:visible;cursor:default;transform-origin:50% 60%;display:block}
@media(max-width:900px){.mark{height:min(54vh,460px);min-height:300px}.mark svg{width:78vw}}
.scroll-ind{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-ind:after{content:"";width:1px;height:34px;background:var(--ink);opacity:.5;transform-origin:top;animation:sline 2.2s cubic-bezier(.645,.045,.355,1) infinite}
@keyframes sline{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:900px){.scroll-ind{display:none}}
/* 左上ロゴ：常に回る輪 */
.hd .logo{display:block;padding:8px 0}
.hd .logo .word{display:inline-block;position:relative;white-space:nowrap}
.hd .logo .word span{display:inline-block;will-change:transform,opacity}
.hd.scrolled{box-shadow:0 1px 0 var(--line)}
/* KV：写真層＋影＋動画 */
.kv{position:relative;height:min(92vh,880px);min-height:520px;overflow:hidden;background:#141413;color:#fff}
.kv .kv-media{position:absolute;inset:0;will-change:transform;transform-origin:50% 60%}
.kv .kv-media img,.kv .kv-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kv .kv-media video{opacity:0;transition:opacity 1.2s ease}
.kv .kv-media video.ready{opacity:1}
.kv .shade{position:absolute;inset:0;background:#0d0d0c;opacity:0;pointer-events:none}
/* 参照世界のKV：樹を右・影を左に置くため左右反転／文字の足元に薄い暗がり */
@media(min-width:641px){.kv .kv-media img,.kv .kv-media video{transform:scaleX(-1)}}
.kv:after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none;z-index:1}
.kv .kv-meta{z-index:2}.kv-latest{z-index:3}
@media(max-width:900px){.kv{height:min(82vh,700px);min-height:0}}
/* 帯 */
.band{position:relative;overflow:hidden}
.band .media{position:absolute;inset:0;transform-origin:50% 50%}
.band .media img,.band .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .media video{opacity:0;transition:opacity 1.2s}
.band .media video.ready{opacity:1}
.band .in{z-index:2}.band .kv-meta{z-index:2}
.band .ln{display:block}
/* 見出しの字が昇る */
.h-jp.split .ln{display:block;overflow:hidden;line-height:1.6;padding-bottom:.08em;margin-bottom:-.08em}
.h-jp.split .lni{display:block}
.h-jp.split .ch{display:inline-block;will-change:transform}
/* リビールの初期状態（GSAPが上書き）。JS無しでも見える */
.rv{opacity:1;transform:none;transition:none}
.rv img{filter:none;transition:none}
.no-js .rv{clip-path:none}
/* 左のレール（スクロールスパイ） */
#rail{position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:35;display:none;flex-direction:column;gap:10px;opacity:0;transition:opacity .6s ease;pointer-events:none}
#rail.on{opacity:1;pointer-events:auto}
#rail a{position:relative;display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);padding-left:14px;transition:color .4s}
#rail a:before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--ink);transform:translateY(-50%) scale(0);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
#rail a.on{color:var(--ink)}
#rail a.on:before{transform:translateY(-50%) scale(1)}
#rail a .n{font-family:var(--wm);font-size:11px;letter-spacing:.04em;color:var(--mute)}
#rail a.on .n{color:var(--ink)}
#rail:before{content:"";position:absolute;left:1.5px;top:-24px;bottom:-24px;width:1px;background:var(--line)}
@media(min-width:1180px){#rail{display:flex}}
/* タブ帯：格子を見ている間はヘッダー下に留まる */
.tabs{position:sticky;top:70px;background:rgba(255,255,255,.97);z-index:20;padding-top:6px}
@media(max-width:900px){.tabs{top:60px}}
/* 商品カードのワンポイント動画 */
.item .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
@media(hover:hover){.item:hover .ph video{opacity:1}}
/* カーソル */
.cur{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:none}
body.has-cur .cur{display:block}
body.has-cur,body.has-cur a,body.has-cur button{cursor:none}
.cur .dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--ink);transition:transform .3s,opacity .3s}
.cur .ring{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(34,34,34,.55);display:flex;align-items:center;justify-content:center;transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),left .35s,top .35s,background .35s,border-color .35s}
.cur .ring i{font-style:normal;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .3s}
.cur.link .ring{width:48px;height:48px;left:-24px;top:-24px;border-color:rgba(34,34,34,.9)}
.cur.link .dot{transform:scale(.5)}
.cur.view .ring{width:64px;height:64px;left:-32px;top:-32px;background:rgba(34,34,34,.88);border-color:transparent}
.cur.view .ring i{opacity:1}
.cur.view .dot{opacity:0}
/* 動画の上の粒子は薄く */
.kv .grain{z-index:1}