/* =========================================================
   ONE MORE MIXXX — official site
   1. 基本設定 / 2. イントロ / 3. ロゴ演出 / 4. メイン
   ========================================================= */

/* ---------- 1. 基本設定 ---------- */
:root{
  --bg:#07040e;
  --fg:#f6f2ff;
  --muted:rgba(226,214,255,.62);
  --accent:#ff45c8;          /* ▼ 差し替え：テーマカラー（マゼンタ） */
  --accent-2:#a259ff;        /* ▼ 差し替え：サブカラー（バイオレット） */
  --accent-3:#e9c9ff;
  --steam:#1b2838;
  --fire:#ff6a3d;            /* CAMPFIRE 用 */
  --fire-2:#e5342b;
  --ease:cubic-bezier(.22,.61,.36,1);
  --rail:88px;               /* 左SNSレールの幅 */
}

*,*::before,*::after{box-sizing:border-box;}
/* ミニバナー → NEWS 個別ページのモーフ遷移（対応ブラウザのみ。news.css 側と対で使う） */
@view-transition{navigation:auto;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* スマホで先頭から下に引っぱった時のブラウザの再読み込み（pull-to-refresh）を止める。
   帰りの「ためて戻る」が同じジェスチャーなので必須（iOS15 など未対応ブラウザは
   main.js の touchmove 側の preventDefault が保険） */
html,body{overscroll-behavior-y:none;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* ムービー中〜縮小が終わるまでページを固定（スクロール操作は遷移の合図に使うだけ） */
body.is-intro{overflow:hidden;touch-action:none;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---------- 0. 右上バー：Steam ロゴ ＋ MENU ---------- */
.topbar{
  position:fixed; z-index:60;
  top:calc(clamp(12px,2vw,24px) + env(safe-area-inset-top));
  right:clamp(12px,2vw,24px);
  display:flex; align-items:center; gap:10px;
}

/* 左上：プラットフォームのロゴ（リンクなし・飾り） */
.brandbar{
  position:fixed; z-index:60;
  top:calc(clamp(18px,2.4vw,34px) + env(safe-area-inset-top));
  left:clamp(18px,2.4vw,34px);
  display:flex; align-items:center; gap:34px;
}
body.is-intro .brandbar{opacity:0;pointer-events:none;}
.brandbar{transition:opacity .6s var(--ease) .15s;}
/* ボタンに見えないよう、ピル（背景・枠）はやめてロゴタイプだけを置く */
.brand{
  display:inline-flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.78);
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.65));
  pointer-events:none; user-select:none;
}
/* ロゴは支給の白ロゴタイプ（Steam = 横長 / Switch 2 = 縦積み）。大きさは高さで揃える */
.brand svg{display:block; width:auto; flex:none;}
.brand--steam svg{height:30px;}
.brand--nintendo svg{height:30px;}   /* 横一列ロゴ（マーク+SWITCH™2）。上下幅は Steam と揃える */

/* プルダウン */
.menu{position:relative;}
.menu__btn{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 14px 0 18px;
  border-radius:999px;
  font-size:11px; letter-spacing:.22em; text-indent:.22em; color:#fff;
  background:rgba(7,4,14,.82);
  border:1px solid rgba(255,255,255,.2);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.menu__btn svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.menu__btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);}
.menu__btn[aria-expanded="true"]{background:rgba(255,69,200,.25);border-color:rgba(255,69,200,.6);}
.menu__btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.menu__btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}

.menu__list{
  position:absolute; right:0; top:calc(100% + 10px);
  min-width:240px;
  margin:0; padding:8px; list-style:none;
  border-radius:16px;
  background:rgba(10,6,18,.94);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  animation:menuIn .28s var(--ease) both;
}
.menu__list[hidden]{display:none;}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.menu__list a{
  display:flex; flex-direction:column; gap:3px;
  padding:11px 16px;
  border-radius:10px;
  transition:background .2s var(--ease);
}
.menu__list span{font-size:12px;font-weight:700;letter-spacing:.2em;color:#fff;}
.menu__list small{font-size:10px;letter-spacing:.08em;color:var(--muted);}
.menu__list a:hover{background:rgba(255,255,255,.08);}
.menu__list a:hover span{color:var(--accent-3);}
.menu__list a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

/* ---------- 2. オープニングムービー ---------- */
/* 全画面オーバーレイ。中に「ロビーの絵をハメた枠」（.intro__zoom）があり、
   ムービー中はモニターの穴が画面いっぱいになる倍率で拡大、終了 or スクロールで
   等倍（本物の .lobby__stage と同じ位置・大きさ）まで縮む → そのまま本物に切り替わる。
   枠の位置と倍率は JS（layoutZoom）が計算して left/top/width/height と transform に入れる */
.intro{
  position:fixed; inset:0; z-index:100;
  overflow:hidden;
  background:#000;
}
.intro__zoom{
  position:absolute;
  transform-origin:0 0;
  will-change:transform;
}
.intro__zoom.is-leaving{transition:transform 1.2s cubic-bezier(.65,0,.2,1);}
.intro__room{                       /* 部屋の絵（中央がくり抜かれている）。動画の上に重ねる */
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  pointer-events:none;
  /* ムービー中は透明（絵のマイクが映像に被るため）。縮み始めると同時に浮かび上がる */
  opacity:0;
  transition:opacity .5s ease;
}
.intro.is-leaving .intro__room{opacity:1;}
.intro__screen{                     /* モニターの穴（.lobby__screen と同じ座標） */
  position:absolute; z-index:1;
  left:28.4375%;  top:25.5556%;
  width:42.8385%; height:40.9722%;
  overflow:hidden;
  background:#000;
}
/* --- モバイル版のイントロ（.intro--mobile は JS が付ける） ---
   枠は画面いっぱい・倍率なし。動画（縦）を画面に敷き詰め、終了 or スクロールで
   clip-path の inset がモニターの矩形まで狭まる（動画は縮まず、見える範囲だけ潰れる）。
   そのあと黒い背景が透けて（.is-reveal）ロビーが徐々に明るく現れる */
.intro--mobile .intro__screen{
  left:0; top:0; width:100%; height:100%;
  clip-path:inset(0);
  transition:clip-path 1s cubic-bezier(.7,0,.3,1);
}
.intro--mobile .intro__room{display:none;}
.intro{transition:background-color .7s ease;}
.intro.is-reveal{background-color:transparent;}

/* 縮み終わったら動画だけをフェードして、本物のモニター（YouTube）に明け渡す */
.intro.is-fading{
  transition:opacity .45s ease;
  opacity:0;
  pointer-events:none;
}
.intro.is-hidden{display:none;}
/* 縮んでいる間は SOUND/SKIP/SCROLL を消す */
.intro__ui,.intro__start{transition:opacity .3s ease;}
.intro.is-leaving .intro__ui,.intro.is-leaving .intro__start{opacity:0;pointer-events:none;}

/* 下中央の SCROLL 誘導 */
.intro__hint{
  position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:9px; letter-spacing:.34em; text-indent:.34em;
  color:rgba(255,255,255,.55);
  animation:hintBob 1.8s ease-in-out infinite;
  pointer-events:none !important;
}
.intro__hint svg{width:16px;height:16px;}
@keyframes hintBob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,5px);}}

/* ムービー中〜縮小中は右上バーも引っ込めておく */
body.is-intro .topbar{opacity:0;pointer-events:none;}
.topbar{transition:opacity .6s var(--ease) .15s;}

.intro__video{
  width:100%; height:100%;
  object-fit:cover;          /* 穴（1.859:1）に 16:9 を敷き詰める。上下を 2% ほど切る */
}
/* 縦長画面の「映像を切らずに見せる」は JS 側（layoutZoom の portrait 分岐）で倍率を変えて対応 */

/* 自動再生ブロック時の START ボタン */
.intro__start{
  position:absolute; inset:0; margin:auto;
  width:180px; height:180px;
  display:grid; place-items:center;
  letter-spacing:.3em; font-size:13px;
}
.intro__start[hidden]{display:none;}
.intro__start-ring{
  position:absolute; inset:0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  animation:pulse 2.4s var(--ease) infinite;
}
.intro__start-label{position:relative;}
@keyframes pulse{
  0%{transform:scale(.86);opacity:1;}
  70%{transform:scale(1.12);opacity:0;}
  100%{opacity:0;}
}

.intro__ui{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:clamp(16px,3vw,40px);
  padding-bottom:calc(clamp(16px,3vw,40px) + env(safe-area-inset-bottom));
  pointer-events:none;
}
.intro__ui > *{pointer-events:auto;}

.intro__sound,.intro__skip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  font-size:12px; letter-spacing:.18em;
  color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  transition:color .3s,border-color .3s,background .3s;
}
.intro__sound:hover,.intro__skip:hover{
  color:#fff; border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.08);
}
.intro__sound svg,.intro__skip svg{width:16px;height:16px;fill:currentColor;}
.intro__sound .ico-sound{display:none;}
.intro__sound[aria-pressed="true"] .ico-mute{display:none;}
.intro__sound[aria-pressed="true"] .ico-sound{display:block;}
.intro__sound-icon{display:block;width:16px;height:16px;}

/* ---------- 3. メイン画面 ---------- */
.main{
  position:relative; z-index:1;
  min-height:100svh;
}

/* 背景 */
.bg{position:fixed; inset:0; z-index:-1; background:#000; overflow:hidden;}
.bg__img{
  width:100%; height:100%; object-fit:cover;
  opacity:.5;
  transform:scale(1.08);
  /* ぼかしは画像に焼き込み済み（リアルタイム blur() と常時アニメはスクロールが重くなるので廃止） */
}
.bg__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(115% 85% at 50% 42%, rgba(7,4,14,.05) 0%, rgba(7,4,14,.72) 62%, rgba(7,4,14,.97) 100%),
    linear-gradient(to bottom, rgba(7,4,14,.72), rgba(7,4,14,.18) 38%, rgba(7,4,14,.9));
}
/* ネオンの色被り */
.bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 78%, rgba(255,69,200,.16), transparent 70%),
    radial-gradient(55% 45% at 84% 22%, rgba(162,89,255,.18), transparent 70%);
}

/* 左：SNS レール */
.sns{
  position:fixed; left:0; top:0; bottom:0; z-index:20;
  width:var(--rail);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
}
.sns__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.sns__item a{
  position:relative;
  display:flex; align-items:center; gap:12px;
  width:48px; height:48px;
  justify-content:center;
  border-radius:12px;
  color:rgba(255,255,255,.72);
  transition:color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.sns__item svg{width:33px;height:33px;fill:currentColor;flex:none;}  /* 2026-09-07 に 20px→1.65倍。モバイル側は各ブロックで 20px に戻している */
.sns__item a:hover{color:var(--accent-2);background:rgba(255,255,255,.07);transform:translateX(3px);}
.sns__label{
  position:absolute; left:56px;
  white-space:nowrap; font-size:11px; letter-spacing:.16em;
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s, transform .3s;
  pointer-events:none;
}
.sns__item a:hover .sns__label{opacity:1;transform:translateX(0);}
.sns__line{
  width:1px; height:70px;
  background:linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
}

/* ---- CTA ボタン（CAMPFIRE / STEAM）。置き場所は .lobby__cta（ロビーの項を参照） ---- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:14px;
  min-width:260px;
  padding:15px 24px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn__glow{
  position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-18deg);
}
.btn:hover .btn__glow{animation:sheen .9s var(--ease) forwards;}
@keyframes sheen{to{left:130%;}}
.btn__icon{width:28px;height:28px;fill:#fff;flex:none;}
.btn__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1;flex:1 1 auto;}
.btn__sub{font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.62);}
.btn__main{font-size:15px;letter-spacing:.12em;font-weight:700;}
.btn__arrow{width:18px;height:18px;flex:none;transition:transform .4s var(--ease);opacity:.85;}
.btn:hover .btn__arrow{transform:translateX(4px);}

/* CAMPFIRE */
.btn--cf{
  background:linear-gradient(135deg, rgba(255,106,61,.95), rgba(229,52,43,.95));
  border-color:rgba(255,150,110,.5);
}
.btn--cf:hover{border-color:#ffb08e;box-shadow:0 14px 44px -14px rgba(255,106,61,.85);}
.btn--cf .btn__sub{color:rgba(255,255,255,.8);}
.btn--cf .btn__arrow{color:#fff;}

/* STEAM */
.btn--steam{
  background:linear-gradient(135deg, rgba(35,52,72,.92), rgba(12,18,26,.92));
}
.btn--steam:hover{border-color:var(--accent);box-shadow:0 14px 44px -14px rgba(255,69,200,.7);}
.btn--steam .btn__arrow{color:var(--accent);}

/* 右下：もう一度ムービー */
.replay{
  position:fixed; right:clamp(16px,3vw,36px); bottom:clamp(16px,3vw,36px); z-index:20;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px;
  font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  transition:color .3s,border-color .3s,background .3s;
}
.replay:hover{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);}
.replay svg{width:12px;height:12px;fill:currentColor;}

/* 上中央：特徴紹介の先頭で「ためて戻る」ゲージ（出し入れ・量は main.js の initWarp） */
.backgauge{
  position:fixed; z-index:20;
  left:50%; top:84px;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  opacity:0; visibility:hidden;
  transition:opacity .18s var(--ease), visibility .18s;
  pointer-events:none;
}
.backgauge.is-on{opacity:1; visibility:visible;}
.backgauge__label{
  font-size:10px; font-weight:700; letter-spacing:.3em; text-indent:.3em;
  color:rgba(255,255,255,.85);
  text-shadow:0 0 12px rgba(255,69,200,.6);
}
.backgauge__bar{
  width:180px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  overflow:hidden;
}
.backgauge__fill{
  display:block; width:100%; height:100%;
  background:linear-gradient(90deg,#ff45c8,#a259ff);
  box-shadow:0 0 12px rgba(255,69,200,.8);
  transform:scaleX(0); transform-origin:left center;
}

/* ---- 登場アニメーション ----
   ムービー中〜切り替え完了までは隠しておき（body.is-intro）、完了（body.is-main）で順番に出る。
   fill-mode は backwards：終わったあとは通常のスタイル（hover 等）に戻すため */
body.is-intro .lobby__char,
body.is-intro .lobby__cta .btn,
body.is-intro .lobby__edge,
body.is-intro .sns,
body.is-intro .replay{opacity:0;}
body.is-main .lobby__edge--sera{animation:edgeBobL 1.6s ease-in-out 1.6s infinite, cueFade .5s var(--ease) 1.1s backwards;}
body.is-main .lobby__edge--rane{animation:edgeBobR 1.6s ease-in-out 1.6s infinite, cueFade .5s var(--ease) 1.25s backwards;}
@keyframes cueFade{from{opacity:0;}to{opacity:1;}}

body.is-main .lobby__char{animation:charIn .9s var(--ease) .05s backwards;}
body.is-main .lobby__char--rane{animation-delay:.25s;}
body.is-main .lobby__cta .btn{animation:up .8s var(--ease) .55s backwards;}
body.is-main .lobby__cta .btn + .btn{animation-delay:.7s;}
body.is-main .sns{animation:railIn 1s var(--ease) .8s backwards;}
body.is-main .replay{animation:up 1s var(--ease) 1.1s backwards;}
@keyframes charIn{from{opacity:0;transform:translateY(6%);}to{opacity:1;transform:none;}}
@keyframes pop{from{opacity:0;transform:scale(.8);}to{opacity:1;transform:none;}}
@keyframes railIn{from{opacity:0;transform:translateX(-24px);}to{opacity:1;transform:none;}}
@keyframes up{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}


/* =========================================================
   4. 帯（web_obi）＋ ロビー（web_lobby）
   すべての座標は 3840 x 2160 のPSDを % に直したものです
   ========================================================= */
.sections{
  position:relative; z-index:2;
  background:var(--bg);
}

/* ---------- ロビー ---------- */
/* PC: 1画面ぶん（100svh）確保して stage（16:9）を上下中央に。16:9 でない画面では上下が黒くなる
   （こうしないと後ろの特徴紹介の背景がロビーの下から覗く） */
.lobby{
  position:relative;
  width:100%;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  background:#05030a;
}
/* ===== 画面の切り替え =====
   ロビーと特徴紹介は「ページとして連続したスクロール」ではなく、2つの画面。
   body.is-screen-lobby   … ロビーだけ表示（スクロール固定。ホイール下／上スワイプで特徴紹介へ）
   body.is-screen-feature … 特徴紹介だけ表示（普通にスクロール。先頭でホイール上／下スワイプでロビーへ）
   遷移中は body.is-warping でスクロール固定 */
body.is-screen-lobby{overflow:hidden;touch-action:none;}
body.is-screen-lobby .feature{display:none;}
body.is-screen-feature .lobby{display:none;}
body.is-warping{overflow:hidden;touch-action:none;}

/* PC：モニターの中心に向かってズームイン／アウト（倍率・原点は JS） */
.lobby.is-zooming{transition:transform 1s cubic-bezier(.55,0,.85,.3); z-index:10;}      /* 行き：加速 */
.lobby.is-unzooming{transition:transform 1s cubic-bezier(.15,.7,.25,1); z-index:10;}    /* 帰り：減速 */

/* モニターの中で YouTube → bga2 へクロスフェード（遷移の間だけ出る） */
.lobby__screen-bga{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none;
  transition:opacity .5s ease;
}
.lobby__screen-bga.is-on{opacity:1;}
.lobby__screen-bga.is-instant{transition:none;}
/* 切り替わる瞬間の走査線のちらつき */
.lobby__screen-fx{
  position:absolute; inset:0; z-index:4;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0) 0 3px, rgba(255,255,255,.35) 3px 4px);
  opacity:0; pointer-events:none;
}
.lobby__screen-fx.is-on{animation:screenGlitch .5s steps(6) both;}
@keyframes screenGlitch{0%{opacity:0;}20%{opacity:.7;}40%{opacity:.1;}60%{opacity:.5;}100%{opacity:0;}}

/* モバイル：モニター以外を暗くする層（位置は .lobby__screen と同じ。周りは box-shadow で塗る） */
.lobby__dim{
  position:absolute; z-index:5;
  left:36.8333%; top:34.5981%; width:26.3125%; height:23.4219%;
  box-shadow:0 0 0 200vmax #000;
  opacity:0; pointer-events:none;
  transition:opacity .7s ease;
  display:none;                      /* 820px 以下で有効 */
}
.lobby__dim.is-on{opacity:1;}
.lobby__dim.is-instant{transition:none;}

/* 受け渡しの連続性：差し替えた瞬間は、背景動画を「モニターの中と同じ倍率・位置」に transform し、
   見える範囲（clip-path）をモニターの矩形にしておく。そこから窓の比率を保ったまま画面いっぱいへ
   （JS の bgAnimate がフレームごとに clip-path と transform を更新する） */
.feature__bg video{transform-origin:50% 50%; will-change:transform;}
.feature__body{transition:opacity .5s var(--ease);}
.feature.is-warping .feature__body{opacity:0;}

/* PC：ロビーの下中央の SCROLL 誘導 */
.lobby__hint{
  position:absolute; z-index:6;
  left:50%; bottom:clamp(14px,2.4vh,26px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:9px; letter-spacing:.34em; text-indent:.34em;
  color:rgba(255,255,255,.5);
  animation:hintBob 1.8s ease-in-out infinite;
  pointer-events:none;
}
.lobby__hint svg{width:16px;height:16px;}
body.is-intro .lobby__hint{opacity:0;}

/* ---- ロビーの最新NEWSミニバナー（PC=右上 / モバイル=上）。中身は main.js の initNewsTicker が生成 ---- */
.newsticker{
  position:absolute; z-index:7;
  top:calc(clamp(12px,2vw,24px) + 30px);
  left:0; right:0; margin:0 auto;      /* PC は上の真ん中 */
  width:500px;
}
.newsticker[hidden]{display:none;}
/* 横スクロール（スナップ）のカルーセル。自動では切り替えない */
.newsticker__slides{
  display:flex;
  height:125px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  border-radius:16px;
  background:rgba(7,4,14,.78);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 14px 40px rgba(0,0,0,.6);
  transition:border-color .3s;
  scrollbar-width:none;
}
.newsticker__slides::-webkit-scrollbar{display:none;}
.newsticker__slides:hover{border-color:rgba(255,69,200,.55);}
.newsticker__slides a{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:flex; align-items:center; gap:18px;
  padding:12px 18px 12px 12px;
  color:var(--fg); text-decoration:none;
  min-width:0;
}
.newsticker__slides img{
  flex:0 0 auto; width:150px; height:auto;
  aspect-ratio:1520/1000; object-fit:cover; border-radius:10px;
}
.newsticker__text{flex:1 1 auto; min-width:0;}
.newsticker__date{
  display:block; margin-bottom:6px;
  font-size:15px; font-weight:700; letter-spacing:.14em;
  color:var(--accent);
}
.newsticker__title{
  font-size:18px; line-height:1.5; letter-spacing:.03em;
  font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-weight:700;
  color:#e6e6e6;                 /* 白から灰色 10% */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* バナー外側の左右の送りボタン（半透明。モバイルはスワイプなので出さない） */
.newsticker__nav{
  position:absolute; top:62px;                 /* スライド部分（125px）の縦中央 */
  transform:translateY(-50%);
  width:38px; height:38px; padding:0;
  border:1px solid rgba(255,255,255,.3); border-radius:50%;
  background:rgba(7,4,14,.5);
  color:rgba(255,255,255,.85);
  cursor:pointer;
  transition:background .3s, border-color .3s;
}
.newsticker__nav svg{width:18px; height:18px; display:block; margin:0 auto;}
.newsticker__nav:hover{background:rgba(7,4,14,.8); border-color:rgba(255,69,200,.6);}
.newsticker__nav--prev{left:-52px;}
.newsticker__nav--next{right:-52px;}

.newsticker__dots{display:flex; justify-content:center; gap:12px; margin-top:11px;}
.newsticker__dots button{
  width:11px; height:11px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.3); cursor:pointer;
  transition:background .3s, transform .3s;
}
.newsticker__dots button.is-on{background:var(--accent); transform:scale(1.25);}
/* 表示中のスライドだけに遷移名（個別ページの見出し・画像へモーフする） */
.newsticker__slides a.is-active .newsticker__title{view-transition-name:news-title;}
.newsticker__slides a.is-active img{view-transition-name:news-image;}
::view-transition-group(news-title),
::view-transition-group(news-image){animation-duration:.55s;}
body.is-intro .newsticker{opacity:0;}
body.is-main .newsticker{animation:pop .7s var(--ease) 1s backwards;}

/* モニターのカバー：PV のぼかしループ + ロゴ（クリックで YouTube 再生）。
   iframe の上（z:2）、遷移用 bga2（z:3）・走査線（z:4）の下 */
.lobby__cover{
  position:absolute; inset:0; z-index:2;
  display:block; width:100%; height:100%;
  margin:0; padding:0; border:0;
  background:#0a0612;
  cursor:pointer;
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.lobby__cover video{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.lobby__cover::after{             /* ロゴを立たせる薄い暗幕 */
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(5,3,10,.35);
}
.lobby__cover-logo{
  position:absolute; z-index:1;
  left:50%; top:50%;
  width:56%; height:auto;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.75));
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.lobby__cover:hover .lobby__cover-logo{
  transform:translate(-50%,-50%) scale(1.05);
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.95));
}
/* クリック後：カバー全体が 1.1 秒かけて徐々に溶けて YouTube に明け渡す。
   ロゴはふわっと少し拡大しながら消える */
.lobby__cover.is-off{opacity:0; visibility:hidden; pointer-events:none;}
.lobby__cover.is-off .lobby__cover-logo{
  transform:translate(-50%,-50%) scale(1.14);
  transition:transform 1.1s var(--ease), filter 1.1s var(--ease);
}

/* CAMPFIRE / STEAM ボタン。モニターの下（デスクの手前）。
   下端を stage の 78% に合わせる（= stage 下端から 22% 上） */
.lobby__cta{
  position:absolute; z-index:6;
  left:50%; bottom:calc(50% - 28.125vw + 12.375vw);   /* 下端 = stage の 78% */
  transform:translateX(-50%);
  display:flex; justify-content:center;
  gap:clamp(12px,1.6vw,18px);
  width:max-content;
}

.lobby__stage{
  position:relative;
  width:100%;
  aspect-ratio:3840 / 2160;
}

/* 中央モニター：YouTube（16:9に合わせて上下を少し切って敷き詰め） */
.lobby__screen{
  position:absolute; z-index:1;
  left:28.4375%;  top:25.5556%;
  width:42.8385%; height:40.9722%;
  overflow:hidden;
  background:#000;
}
.lobby__screen iframe{
  position:absolute; left:0; top:50%;
  width:100%; height:104.6%;
  transform:translateY(-50%);
  border:0;
  /* YouTube 標準のUI（再生/停止・音量・タイトルからチャンネルへ）をそのまま使う。
     上に乗っている .lobby__art と キャラは pointer-events:none なのでクリックが届く */
}

/* 部屋の絵（中央がくり抜かれている）。<picture> 自体もクリックを通す */
.lobby__stage picture{pointer-events:none;}
.lobby__art{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  pointer-events:none;
}

/* ---------- 椅子のキャラクター（透過動画。クリックで挨拶） ---------- */
/* 箱 = 動画のフレーム全体（キャラの周りに透明な余白がある）。
   箱自体はクリックを通し、::before / ::after の当たり判定だけが反応する。
   こうしないと透明な余白が YouTube のくり抜きに乗ってクリックを吸ってしまう */
.lobby__char{
  position:absolute; z-index:3;
  padding:0; border:0; background:none;
  line-height:0;
  pointer-events:none;
}
.lobby__char video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;           /* 箱の比率は動画と同じにしてあるので歪まない */
  background:transparent;
  transition:opacity .12s linear;
}
.lobby__char-hello{opacity:0;}
.lobby__char.is-hello .lobby__char-idle{opacity:0;}
.lobby__char.is-hello .lobby__char-hello{opacity:1;}
.lobby__char:focus-visible{outline:2px solid var(--accent);outline-offset:-6px;}

/* ▼ 座る位置の微調整はこの2行（width と height は必ずセットで。
     比率は動画と同じ sera 0.4965 / rane 0.5364 = width% ÷ height%）
   頭の大きさが元の PNG と同じになるよう計算した値に、手で入れてあった下げ幅
   （セラ +5% / ラネ +4%）を足してある */
.lobby__char--sera{left:-6.136%; top:33.044%; width:43.865%; height:88.356%;}
.lobby__char--rane{left:57.025%; top:33.178%; width:46.684%; height:87.028%;}

/* 当たり判定（箱に対する %）。YouTube のくり抜きに重なる部分は外してある */
.lobby__char::before,.lobby__char::after{
  content:""; position:absolute; z-index:1;
  pointer-events:auto; cursor:pointer;
}
.lobby__char--sera::before{left:12%; right:22%; top:2%; bottom:2%;}   /* 右端 = 28.1%（くり抜き 28.44% の手前） */
.lobby__char--sera::after{display:none;}
.lobby__char--rane::before{left:31%; right:5%;  top:2%; bottom:2%;}   /* 左端 = 71.5%（くり抜きの右端） */
.lobby__char--rane::after{left:12%;  right:70%; top:40%; bottom:2%;}  /* くり抜きの下に出ている袖・脚 */

/* ホバーでキャラの輪郭が光る（透過動画なので drop-shadow が輪郭に沿う） */
.lobby__char video{transition:opacity .12s linear, filter .4s var(--ease);}
.lobby__char--sera:hover video{filter:drop-shadow(0 0 22px rgba(255,69,200,.6));}
.lobby__char--rane:hover video{filter:drop-shadow(0 0 22px rgba(162,89,255,.65));}

/* 「CLICK」の合図：頭の上でふわふわ。話しかけたら消える */
.lobby__char-cue{
  position:absolute; z-index:2;
  top:-1%; left:47.6%;
  transform:translate(-50%,-100%);
  display:inline-flex; align-items:center; gap:.45em;
  padding:.5em .95em;
  font-size:clamp(9px,.8vw,28px); font-weight:700;
  letter-spacing:.22em; text-indent:.22em; line-height:1;
  color:#fff;
  background:rgba(7,4,14,.78);
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  box-shadow:0 0 18px rgba(255,69,200,.45);
  white-space:nowrap;
  opacity:0;                     /* 切り替え完了後に cueIn で出る */
  transition:opacity .35s var(--ease);
}
body.is-main .lobby__char:not(.is-met) .lobby__char-cue{
  opacity:1;
  animation:cueIn .5s var(--ease) 1.5s backwards, cueBob 1.6s ease-in-out 2s infinite;
}
@keyframes cueIn{from{opacity:0;transform:translate(-50%,-60%);}to{opacity:1;transform:translate(-50%,-100%);}}
.lobby__char-cue i{              /* 小さなポインタ */
  width:.9em; height:.9em;
  background:currentColor;
  clip-path:polygon(0 0, 100% 48%, 55% 58%, 38% 100%, 0 0);
}
.lobby__char--rane .lobby__char-cue{left:53.5%; box-shadow:0 0 18px rgba(162,89,255,.5);}
@keyframes cueBob{
  0%,100%{transform:translate(-50%,-100%);}
  50%{transform:translate(-50%,calc(-100% - 6px));}
}

/* ---------- モバイルだけ：左右の端の TAP ボタン ---------- */
/* キャラの顔アイコンの吹き出し（丸アイコン + 画面端＝キャラのいる方向への尻尾） */
.lobby__edge{
  display:none;                     /* 820px 以下で表示 */
  position:absolute; z-index:7;
  top:calc(60% - 16px);             /* モニター直下。1.5倍化（64→96px）前と中心が揃う位置 */
  width:96px; height:96px; padding:0;
  border-radius:50%;
  background:rgba(7,4,14,.85);
  border:3px solid rgba(255,255,255,.65);
  box-shadow:0 0 24px rgba(255,69,200,.45);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.lobby__edge img{
  width:100%; height:100%;
  border-radius:50%; object-fit:cover; display:block;
}
.lobby__edge::after{
  content:""; position:absolute; top:50%; width:16px; height:16px;
  background:rgba(7,4,14,.85);
}
.lobby__edge--sera::after{
  left:-9px;
  transform:translateY(-50%) rotate(45deg);
  border-left:3px solid rgba(255,255,255,.65);
  border-bottom:3px solid rgba(255,255,255,.65);
}
.lobby__edge--rane::after{
  right:-9px;
  transform:translateY(-50%) rotate(45deg);
  border-right:3px solid rgba(255,255,255,.65);
  border-top:3px solid rgba(255,255,255,.65);
}
.lobby__edge--sera{left:16px; animation:edgeBobL 1.6s ease-in-out infinite;}
.lobby__edge--rane{right:16px; animation:edgeBobR 1.6s ease-in-out infinite; box-shadow:0 0 24px rgba(162,89,255,.5);}
@keyframes edgeBobL{0%,100%{transform:translateX(0);}50%{transform:translateX(-5px);}}
@keyframes edgeBobR{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}
/* スライド中は TAP を両方消して、BACK だけ出す */
.lobby.is-pan-sera .lobby__edge,
.lobby.is-pan-rane .lobby__edge{opacity:0;pointer-events:none;}
.lobby__back{
  display:none;                     /* 820px 以下で表示 */
  position:absolute; z-index:9;     /* セリフ（8）より上。隠れると中央に戻れない */
  top:60%;                          /* TAP と同じ高さ（入れ替わって見える） */
  align-items:center; gap:4px;
  padding:9px 12px;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-indent:.2em; line-height:1;
  color:#fff;
  background:rgba(255,69,200,.28);
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  box-shadow:0 0 18px rgba(255,69,200,.45);
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.lobby__back svg{width:14px;height:14px;}
.lobby__back span{text-indent:0;}
.lobby__back-l,.lobby__back-r{display:none;}
.lobby.is-pan-sera .lobby__back{right:10px; opacity:1; pointer-events:auto;}   /* 左を見ている → 右端に「BACK ▶」 */
.lobby.is-pan-sera .lobby__back-r{display:block;}
.lobby.is-pan-rane .lobby__back{left:10px; opacity:1; pointer-events:auto;}    /* 右を見ている → 左端に「◀ BACK」 */
.lobby.is-pan-rane .lobby__back-l{display:block;}

/* ---------- セリフ ---------- */
/* モニター下・デスクの上に出る。幅は stage の 34%、比率は画像と同じ 1641:624。
   中央（left:33%）から、しゃべっている子の側へ 5% 寄せてある */
.lobby__dialog{
  position:absolute; z-index:8;   /* CTA・ロゴ（6）より手前。読めなくなるので下げないこと */
  top:calc(50% - 28.125vw + 35.72vw);     /* stage の 63.5%（モニター下・デスクの上） */
  width:34%; aspect-ratio:1048 / 406;
  background:url("web_seradia.webp") center / 100% 100% no-repeat;
  container-type:inline-size;
  display:flex; align-items:center;
  opacity:0; visibility:hidden;
  transform:scale(.6);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  pointer-events:none;
  will-change:transform, opacity;
}
.lobby__dialog--sera{left:28%; transform-origin:6% 100%;}    /* 尻尾（左下）から膨らむ */
.lobby__dialog--rane{left:38%; transform-origin:94% 100%; background-image:url("web_ranedia.webp");}

/* 出る時：尻尾を支点にポンッと膨らんで、ちょっと跳ねて落ち着く */
.lobby__dialog.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:none;
  animation:dialogPop .55s cubic-bezier(.2,.9,.3,1.25) both;
}
@keyframes dialogPop{
  0%  {opacity:0; transform:scale(.55) translateY(10px);}
  55% {opacity:1; transform:scale(1.06) translateY(-3px);}
  78% {transform:scale(.97) translateY(1px);}
  100%{transform:none;}
}
/* 10秒たつとふわっと縮んで消える（タイマーは initChars。タップで閉じる時は従来どおり即） */
.lobby__dialog.is-closing{animation:dialogOut .45s var(--ease) both;}
@keyframes dialogOut{
  from{opacity:1; transform:none;}
  to  {opacity:0; transform:scale(.82) translateY(10px);}
}

/* 文字は箱より一拍遅れて浮き上がる */
.lobby__dialog p{opacity:0;}
.lobby__dialog.is-open p{animation:dialogText .4s var(--ease) .16s both;}
@keyframes dialogText{
  from{opacity:0; transform:translateY(6px);}
  to  {opacity:1; transform:none;}
}
.lobby__dialog p{
  margin:0; width:100%;
  /* 余白はダイアログ自身の幅基準（% だと stage の幅基準になって箱が縦に伸びる） */
  padding:4.5cqw 5.5cqw;
  font-family:"Hiragino Kaku Gothic StdN","Hiragino Kaku Gothic StdN W8","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-weight:800;
  font-size:1.3vw;               /* cqw 非対応ブラウザ向け */
  font-size:3.9cqw;              /* ダイアログの幅に対して決まる（最長 20 文字が 1 行に収まる値） */
  line-height:1.75; letter-spacing:.04em;
  color:#fff;
  text-shadow:0 0 10px rgba(162,89,255,.35);
}

/* ---------- 特徴紹介（web_bga2.mp4 の上をセクションが流れる） ---------- */
.feature{
  position:relative;
  background:#05030a;        /* 動画が読み込まれるまでのつなぎ */
}

/* 背景：sticky で画面に張り付き、その上を .feature__body が流れる */
.feature__bg{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
}
.feature__bg video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.feature__scrim{                /* 背景がにぎやかなので少し落として文字を立てる */
  position:absolute; inset:0;
  background:rgba(5,3,10,.56);
}

.feature__body{
  position:relative; z-index:1;
  margin-top:-100vh; margin-top:-100svh;
  color:var(--fg);
}

/* ---------- 1画面 = 1セクション ---------- */
.feature__row{
  min-height:100vh; min-height:100svh;
  max-width:1200px;
  margin:0 auto;
  padding:48px clamp(20px,5vw,64px);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(28px,4.5vw,72px);
}

/* メディアは動画・画像・仮置きボックスすべて同じ大きさになる */
.feature__media{
  flex:0 0 min(48%,620px);
  aspect-ratio:16 / 9;
  border-radius:14px;
  overflow:hidden;
  background:#120a20;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.feature__media video,
.feature__media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.feature__media--tbd{           /* 画像未定のプレースホルダ */
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:2px dashed rgba(255,255,255,.32);
  box-shadow:none;
  color:rgba(255,255,255,.5);
  font-size:13px; letter-spacing:.34em; text-indent:.34em;
}

.feature__text{flex:1 1 0; max-width:520px;}
.feature__title{
  margin:0 0 18px;
  font-size:clamp(22px,2.6vw,34px);
  font-weight:700; letter-spacing:.14em;
  line-height:1.4;
}
.feature__title::after{         /* 見出し下のアクセントライン */
  content:"";
  display:block; width:56px; height:4px;
  margin-top:14px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.feature__desc{
  margin:0;
  font-size:clamp(13px,1.15vw,15px);
  line-height:2.1; letter-spacing:.06em;
  color:rgba(246,242,255,.8);
}

/* ---------- キャラクター紹介（#characters） ---------- */
.feature__row--charahead{min-height:0; padding-top:104px; padding-bottom:0;}
.charahead{
  margin:0; text-align:center;
  font-size:clamp(26px,3vw,40px);
  font-weight:700; letter-spacing:.3em; text-indent:.3em;
  line-height:1.2;
}
.charahead small{
  display:block; margin-top:12px;
  font-size:11px; letter-spacing:.44em; text-indent:.44em;
  color:rgba(246,242,255,.5);
}
/* キャラ画像は支給絵のクロップ（976x1088・黒背景は透過処理済み）。
   カード枠なしで絵をそのまま浮かせる */
.feature__media--chara{
  flex-basis:min(40%,470px); aspect-ratio:976/1088;
  background:none; box-shadow:none; border-radius:0;
}
.chara__role{
  margin:0 0 12px;
  font-size:11px; font-weight:700; letter-spacing:.34em; text-indent:.34em;
  color:var(--accent);
}
.chara__role--rane{color:var(--accent-2);}
.chara__name small{
  display:block; margin-top:6px;
  font-size:11px; font-weight:400; letter-spacing:.3em;
  color:rgba(246,242,255,.5);
}
.chara__specs{
  list-style:none;
  margin:0 0 20px; padding:14px 18px;
  display:grid; grid-template-columns:1fr 1fr; gap:8px 20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  font-size:13px; letter-spacing:.04em;
}
.chara__specs-wide{grid-column:1 / -1;}
.chara__specs span{
  display:inline-block; margin-right:10px;
  font-size:10px; letter-spacing:.22em;
  color:rgba(246,242,255,.5);
}
.chara__quote{
  margin:16px 0 0;
  font-size:clamp(12px,1.05vw,14px); letter-spacing:.04em;
  color:var(--accent-3);
  text-shadow:0 0 12px rgba(255,69,200,.35);
}
.chara__quote--rane{text-shadow:0 0 12px rgba(162,89,255,.4);}
/* セリフ行の横の再生ボタン（2026-09-10）。▶ ⇄ ■ は is-playing で切り替え */
.chara__voice{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-left:10px; padding:0;
  vertical-align:middle;
  border-radius:50%;
  color:var(--accent-3); cursor:pointer;
  background:rgba(255,69,200,.16);
  border:1px solid rgba(255,69,200,.55);
  box-shadow:0 0 10px rgba(255,69,200,.25);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.chara__voice svg{width:14px; height:14px; display:block;}
.chara__voice .chara__voice-stop{display:none;}
.chara__voice.is-playing .chara__voice-play{display:none;}
.chara__voice.is-playing .chara__voice-stop{display:block;}
.chara__voice:hover{background:rgba(255,69,200,.35); border-color:var(--accent); transform:scale(1.1);}
.chara__voice--rane{
  background:rgba(162,89,255,.16);
  border-color:rgba(162,89,255,.55);
  box-shadow:0 0 10px rgba(162,89,255,.25);
}
.chara__voice--rane:hover{background:rgba(162,89,255,.35); border-color:var(--accent-2);}

/* ---------- NEWS（#news）：見出し + 一覧。個別ページは news-*.html ---------- */
.feature__row--news{flex-direction:column; justify-content:center; gap:36px;}
.news__list{
  list-style:none;
  width:100%; max-width:760px;
  margin:0; padding:0 14px 72px 0;      /* 右はスクロールバーの逃げ、下はフェードで消える分の余白 */
  display:flex; flex-direction:column; gap:10px;
  /* 記事が増えても伸びないスクロールウィンドウ（3件 + 4件目が見切れる高さ）。
     下端はマスクの透過グラデーションでふわっと消す */
  max-height:500px;
  overflow-y:auto;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;
}
.news__list::-webkit-scrollbar{width:6px;}
.news__list::-webkit-scrollbar-track{background:transparent;}
.news__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28); border-radius:3px;}
.news__list a{
  display:flex; align-items:center; gap:20px;
  padding:12px 20px 12px 12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:var(--fg); text-decoration:none;
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.news__list a:hover{
  border-color:rgba(255,69,200,.6);
  background:rgba(255,255,255,.09);
  transform:translateX(4px);
}
.news__list img{
  flex:0 0 auto;
  width:172px; height:auto;
  aspect-ratio:1520/1000; object-fit:cover;
  border-radius:10px;
}
.news__text{
  flex:1 1 auto;
  display:flex; flex-direction:column; gap:6px;
}
.news__date{
  font-size:13px; font-weight:700; letter-spacing:.16em;
  color:var(--accent);
}
.news__title{
  font-size:17px; letter-spacing:.05em; line-height:1.5;
}
.news__arrow{flex:0 0 auto; width:18px; height:18px; color:var(--accent);}

/* ---------- ストーリー（#story） ---------- */
.feature__media--story{flex-basis:min(38%,440px); aspect-ratio:582/784;}
.story__desc{font-size:clamp(14px,1.3vw,17px); line-height:2.5;}

/* ---------- フッター（特徴紹介の一番下・明るい背景の上） ---------- */
.foot{
  min-height:44vh; min-height:44svh;
  display:flex; align-items:flex-end; justify-content:center;
  padding:26px 0 calc(40px + env(safe-area-inset-bottom));
  text-align:center;
  font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.45);
}

/* ---------- ヒーローを抜けたら固定UIを引っ込める ---------- */
.sns,.replay{transition:opacity .5s var(--ease), visibility .5s;}
/* SNS は特徴紹介でも出したままにする（隠すのは「ムービーを見る」だけ） */
body.is-past-lobby .replay{opacity:0;visibility:hidden;pointer-events:none;}

/* ---------- レスポンシブ ---------- */

/* === 4K などの大画面：px 基準の UI を拡大して、HD と同じ見た目の比率にする ===
   （ボタン・メニュー・ロゴ・セリフ以外の固定 UI は px で組んであるため、
     そのままだと 4K で極端に小さく見える。zoom は layout ごと拡大する） */
@media (min-width:2200px){
  .brandbar,.topbar,.replay,.sns,.lobby__hint,
  .intro__ui,.intro__start,
  .feature__row,.foot{zoom:1.45;}
  /* zoom を掛けると 100svh も 1.45 倍に見えてセクション間が間延びし、
     MENU から飛んだ時の位置もずれるので、min-height は zoom ぶん割って相殺する */
  .feature__row{min-height:calc(100svh / 1.45);}
  /* 見出し帯とその直後の行は 1 画面の高さにしない（中央寄せの余白で
     見出しと内容が離れてしまうため。帯は内容ぶん、直後の行は見出しに密着） */
  .feature__row--charahead{min-height:0;}
  .feature__row--charahead + .feature__row{min-height:0; padding-top:36px;}
  /* % で absolute 配置しているものに zoom を使うと位置が壊れるので transform で拡大 */
  .lobby__cta{transform:translateX(-50%) scale(1.45);transform-origin:bottom center;}
  .backgauge{transform:translateX(-50%) scale(1.45);transform-origin:top center;}
  /* ミニバナーは段階 zoom だと比率が合わないので、フルHD(1920x1080)で見た時の寸法を
     そのまま vw に換算して、どの大画面でもフルHDと同じ見た目の大きさ・位置にする */
  .newsticker{top:2.81vw; width:26.04vw;}   /* 1920 の top 54px / 幅 500px を vw 換算 */
  .newsticker__slides{height:6.51vw; border-radius:.83vw; box-shadow:0 .73vw 2.08vw rgba(0,0,0,.6);}
  .newsticker__slides a{gap:.94vw; padding:.63vw .94vw .63vw .63vw;}
  .newsticker__slides img{width:7.81vw; border-radius:.52vw;}
  .newsticker__date{font-size:.78vw; margin-bottom:.31vw;}
  .newsticker__title{font-size:.94vw;}
  .newsticker__dots{gap:.63vw; margin-top:.57vw;}
  .newsticker__dots button{width:.57vw; height:.57vw;}
  .newsticker__nav{top:3.23vw; width:1.98vw; height:1.98vw;}
  .newsticker__nav svg{width:.94vw; height:.94vw;}
  .newsticker__nav--prev{left:-2.71vw;}
  .newsticker__nav--next{right:-2.71vw;}
}
@media (min-width:3200px){
  .brandbar,.topbar,.replay,.sns,.lobby__hint,
  .intro__ui,.intro__start,
  .feature__row,.foot{zoom:1.95;}
  .feature__row{min-height:calc(100svh / 1.95);}
  .feature__row--charahead{min-height:0;}
  .feature__row--charahead + .feature__row{min-height:0;}
  .lobby__cta{transform:translateX(-50%) scale(1.95);transform-origin:bottom center;}
  .backgauge{transform:translateX(-50%) scale(1.95);transform-origin:top center;}
}

/* === スマホ・タブレット縦（〜820px） === */
/* モバイル = 〜767px、または 768〜820px のうち「タブレットでないもの」
   （マウスあり = 狭い PC ウィンドウ / 高さ 600px 未満 = 横向きスマホ）。
   タブレット（iPad の縦横）は PC 仕様のまま（下の方の専用ブロックで絵だけ高さ基準にする）。
   main.js の MOBILE と必ず同じクエリにすること */
@media (max-width:767px), (min-width:768px) and (max-width:820px) and (hover:hover), (min-width:768px) and (max-width:820px) and (max-height:599px), (hover:none) and (pointer:coarse) and (min-width:768px) and (min-height:600px) and (orientation:portrait){
  :root{--rail:0px;}

  /* ===== モバイルのロビー：絵の上下を画面の端に合わせ、横にはみ出した分はスライドで見る ===== */
  .lobby{height:100vh;height:100svh;}
  .lobby__stage{
    --W:calc(100vh * 1.65574);          /* 絵の幅（4800/2899 = 1.65574） */
    --W:calc(100svh * 1.65574);
    position:absolute; top:0; left:0;
    height:100%; width:auto;
    aspect-ratio:4800 / 2899;
    transform:translateX(calc((100vw - var(--W)) / 2));     /* 中央（モニター）を見せる */
    transition:transform .8s var(--ease);
  }
  /* TAP でその方向へスライド：その子（椅子の中心 = 絵の 25% / 75%）が画面中央に来る。端より外へは行かない */
  .lobby.is-pan-sera .lobby__stage{transform:translateX(min(0px, calc(50vw - var(--W) * 0.25)));}
  .lobby.is-pan-rane .lobby__stage{transform:translateX(max(calc(100vw - var(--W)), calc(50vw - var(--W) * 0.75)));}

  /* モニターの穴（web_lobby_mobile のアルファを実測：x 1768–3031 / y 1003–1682 of 4800×2899。比率 1.86） */
  .lobby__screen{left:36.8333%; top:34.5981%; width:26.3125%; height:23.4219%;}
  .lobby__screen iframe{height:104.6%;}
  .lobby__dim{display:block;}
  .lobby__back{display:inline-flex;}
  .lobby__hint{display:none;}

  /* キャラは左右のスツールに（ほぼ画面外。TAP でスライドして見える）。PC 比で 1.6 倍、足は画面下に少し切れる */
    .lobby__char--sera {
        left: 2.49%;
        top: 32.36%;
        width: 47.33%;
        height: 88.79%;
    }

    .lobby__char--rane {
        left: 48.45%;
        top: 35.22%;
        width: 49.62%;
        height: 86.16%;
    }
  /* 当たり判定（箱に対する %）。1.6 倍にしたので箱がモニターの穴（x 36.8–63.2% / y 34.6–58%）に掛かる分を外す */
  .lobby__char--sera::before{left:10%; right:26%; top:0;   bottom:0;}   /* 右端 = 穴の左端 */
  .lobby__char--sera::after {left:74%; right:8%;  top:26%; bottom:0;}   /* 穴の下に出ている部分 */
  .lobby__char--rane::before{left:28%; right:8%;  top:0;   bottom:0;}   /* 左端 = 穴の右端 */
  .lobby__char--rane::after {left:10%; right:72%; top:24%; bottom:0;}
  .lobby__char-cue{display:none;}                /* 合図は端の顔アイコンに */
  /* 中央表示の間は、端にチラッと見えているキャラをタップしても反応しないようにする
     （話しかけるのは顔アイコンから。寄っている時だけ、その子のタップを有効に戻す） */
  .lobby__char::before,.lobby__char::after{pointer-events:none; cursor:default;}
  .lobby.is-pan-sera .lobby__char--sera::before,
  .lobby.is-pan-sera .lobby__char--sera::after,
  .lobby.is-pan-rane .lobby__char--rane::before,
  .lobby.is-pan-rane .lobby__char--rane::after{pointer-events:auto; cursor:pointer;}                     /* 下の Steam ボタンは CTA と重複するので出さない */
  .lobby__edge{display:inline-flex;}

  /* モニターが小さいのでカバーのロゴは大きめに */
  .lobby__cover-logo{width:74%;}
  /* 最新NEWSミニバナーは上（プラットフォームロゴの下・モニターの上）。大きさは従来の小型のまま。
     タブレットでは横に伸びきらないよう最大幅で止めて中央寄せ */
  .newsticker{
    top:calc(100px + env(safe-area-inset-top));
    left:0; right:0; margin:0 auto;
    width:min(100vw - 28px, 520px);
  }
  .newsticker__slides{height:72px; border-radius:12px;}
  .newsticker__slides a{gap:12px; padding:8px 12px 8px 8px;}
  .newsticker__slides img{width:84px; border-radius:8px;}
  .newsticker__date{font-size:10px; margin-bottom:4px;}
  .newsticker__title{font-size:12px;}
  .newsticker__dots{gap:8px; margin-top:8px;}
  .newsticker__dots button{width:8px; height:8px;}
  .newsticker__nav{display:none;}   /* モバイルはスワイプで送る */
  /* CTA は画面下（SNS バーの上）に、横長ボタンを縦積み。タブレットでは最大幅で止める */
  .lobby__cta{
    position:absolute; left:0; right:0; top:auto;
    bottom:calc(84px + env(safe-area-inset-bottom));
    transform:none; margin:0 auto; padding:0;
    width:min(100vw - 32px, 520px);
    flex-direction:column; gap:8px; z-index:6;
  }
  .lobby__cta .btn{width:100%; flex:none; justify-content:center; padding:12px 14px;}
  /* 左右を見ている間は CTA を消す（セリフと BACK に場所を譲る） */
  .lobby__cta{transition:opacity .35s var(--ease);}
  .lobby.is-pan-sera .lobby__cta,
  .lobby.is-pan-rane .lobby__cta{opacity:0; pointer-events:none;}
  .lobby__cta .btn__sub{font-size:8px;}
  .lobby__cta .btn__main{font-size:12px;}
  .lobby__cta .btn__icon{width:20px;height:20px;}
  .btn{min-width:0;flex:1 1 0;padding:11px 12px;gap:9px;}
  .btn__arrow{display:none;}
  .btn__icon{width:22px;height:22px;}
  .btn__sub{font-size:8px;letter-spacing:.12em;}
  .btn__main{font-size:12px;letter-spacing:.06em;}

  /* セリフは画面の下（SNS バーの上）に。タブレットでは最大幅で止めて中央寄せ */
  .lobby__dialog,.lobby__dialog--sera,.lobby__dialog--rane{
    left:0; right:0; margin:0 auto;
    width:min(92vw, 560px);
    top:auto; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:8;
  }
  .lobby__dialog p{font-size:4cqw; line-height:1.6; padding:3.6cqw 4.5cqw;}
  .btn__icon{width:26px;height:26px;}
  .btn__main{font-size:15px;}

  /* SNS は下部バーに */
  .sns{
    top:auto; bottom:0; left:0; right:0;
    width:100%; height:auto;
    flex-direction:row; justify-content:center;
    padding:10px 0 calc(12px + env(safe-area-inset-bottom));
    gap:0;
    background:linear-gradient(to top, rgba(7,4,14,.96) 40%, transparent);
  }
  .sns__list{flex-direction:row;gap:2px;}
  .sns__item a{width:52px;height:48px;}
  .sns__item svg{width:20px;height:20px;}   /* 下部バーは従来サイズ（1.65倍は PC の左レールだけ） */
  .sns__label{display:none;}
  .sns__line{display:none;}

  /* NEWS 一覧は PC の2倍サイズを元に戻す（サムネ86px・3件 + 4件目見切れ = 296px） */
  .news__list{
    max-height:296px;
    padding:0 10px 56px 0;
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
  }
  .news__list a{gap:16px; padding:10px 16px 10px 10px;}
  .news__list img{width:86px; border-radius:8px;}
  .news__text{gap:3px;}
  .news__date{font-size:11px;}
  .news__title{font-size:14px;}
  .news__arrow{width:15px; height:15px;}

  /* 「ためて戻る」ゲージは画面中央に大きく。後ろは全面の暗幕 + ガウスで動画と分離する
     （backdrop-filter はサイト方針で常用禁止だが、ゲージが出ている一瞬だけなので例外） */
  .backgauge{
    left:0; right:0; top:0; bottom:0;
    transform:none;
    justify-content:center; gap:16px;
    background:rgba(5,3,10,.38);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  .backgauge__label{font-size:14px;}
  .backgauge__bar{width:min(64vw,300px); height:8px;}

  /* スマホ縦ではボタンは出さない（MENU 最上部の「ムービーを見る」項目から再生する） */
  .replay{
    display:none;
    top:calc(12px + env(safe-area-inset-top));
    left:0; right:0; bottom:auto; margin:0 auto;
    width:max-content;
    padding:9px 14px; font-size:10px;
  }
  .topbar{top:calc(12px + env(safe-area-inset-top));right:12px;gap:8px;}
  /* プラットフォームのロゴは PC と同じ横並び（〜360px は Steam のみ） */
  .brandbar{top:calc(14px + env(safe-area-inset-top));left:14px;gap:14px;align-items:center;}
  .brand{gap:6px;}
  .brand--steam svg{height:19px;}
  .brand--nintendo svg{height:19px;}
  .menu__btn{height:36px;padding:0 12px 0 14px;}

  /* --- ロビー --- */

  /* --- 特徴紹介 --- */
  .feature__row{
    flex-direction:column;
    justify-content:center;
    gap:26px;
    padding-top:64px; padding-bottom:64px;
  }
  /* PC は左右交互（DOM 順もページごとに逆）なので、縦積みでは常に「メディア→文章」に揃える */
  .feature__media{flex:0 0 auto; width:min(100%,520px); order:-1;}
  .feature__text{max-width:520px;}
  .feature__title{font-size:20px;}
  .story__desc br{display:none;}   /* 幅が足りないので改行位置は自然に任せる */
  .feature__title::after{margin-top:10px;}

  /* フッターは SNS バーに隠れないよう余白を確保 */
  .foot{padding-bottom:calc(92px + env(safe-area-inset-bottom));}
}

/* === 解像度ラダー（16:9 から縦長へ）②: アスペクト比 1.616〜1.777 は
   PC 絵のまま 10% 拡大して黒帯を消す（穴・キャラは PC のデフォルト座標のまま） === */
@media (min-width:821px) and (max-aspect-ratio:1777/1000) and (min-aspect-ratio:1616/1000){
  .lobby{--pw:calc(100vw * 1.15); --ph:calc(100vw * 1.15 / 1.77778);}
  .lobby__stage{
    width:var(--pw);
    height:var(--ph);
    margin-left:calc((100vw  - var(--pw)) / 2);
    margin-top:calc((100svh - var(--ph)) / 2);
    margin-bottom:calc((100svh - var(--ph)) / 2);
  }
  .lobby__dialog{
    top:calc((100svh - var(--ph)) / 2 + var(--ph) * .635);
    width:calc(var(--pw) * .34);
  }
  .lobby__dialog--sera{left:calc(50% - var(--pw) * .22);}
  .lobby__dialog--rane{left:calc(50% - var(--pw) * .12);}
}

/* === 解像度ラダー ③④: アスペクト比 1.615 以下（iPad 横持ち・PC の縮小/縦長ウィンドウ）は
   仕様は PC のままモバイル絵（4800/2899）に切り替えて 20% 拡大。さらに縦長になったら
   高さフィットで連続的に拡大し、スマホ縦の構図（モニター横幅 ≈ 90%）まで自然に到達する。
   main.js の TABLET_L / picture の source と必ず同じ境界にすること === */
@media (min-width:821px) and (orientation:landscape) and (max-aspect-ratio:1615/1000), (min-width:821px) and (orientation:portrait) and (hover:hover){
  /* stage の実寸: 横幅の 1.38 倍 か「高さフィット +12%」の大きい方（境界 A≈1.34 で連続） */
  .lobby{--sw:max(100vw * 1.38, 100svh * 1.65574 * 1.12); --sh:calc(var(--sw) / 1.65574);}
  .lobby__stage{
    width:var(--sw);
    height:var(--sh);
    margin-left:calc((100vw  - var(--sw)) / 2);   /* 中央寄せ（見切れは左右均等） */
    margin-top:calc((100svh - var(--sh)) / 2);
    margin-bottom:calc((100svh - var(--sh)) / 2);
  }
  /* モニターの穴・キャラの位置と当たり判定はモバイル絵の実測座標 */
  .lobby__screen{left:36.8333%; top:34.5981%; width:26.3125%; height:23.4219%;}
  .lobby__screen iframe{height:104.6%;}
  .lobby__char--sera{left:2.49%; top:32.36%; width:47.33%; height:88.79%;}
  .lobby__char--rane{left:48.45%; top:35.22%; width:49.62%; height:86.16%;}
  .lobby__char--sera::before{left:10%; right:26%; top:0;   bottom:0;}
  .lobby__char--sera::after {left:74%; right:8%;  top:26%; bottom:0;}
  .lobby__char--rane::before{left:28%; right:8%;  top:0;   bottom:0;}
  .lobby__char--rane::after {left:10%; right:72%; top:24%; bottom:0;}
  /* PC イントロの穴もモバイル絵の座標に（main.js の CUT も同じ値に切り替わる） */
  .intro__screen{left:36.8333%; top:34.5981%; width:26.3125%; height:23.4219%;}
  /* セリフは stage 基準（stage の実寸から計算） */
  .lobby__dialog{
    top:calc((100svh - var(--sh)) / 2 + var(--sh) * .635);
    width:calc(var(--sw) * .34);
  }
  .lobby__dialog--sera{left:calc(50% - var(--sw) * .22);}   /* 中心 = stage の 45% */
  .lobby__dialog--rane{left:calc(50% - var(--sw) * .12);}   /* 中心 = stage の 55% */
}



/* === モバイル表示でも横広めの画面（アスペクト比 0.66 以上 = タブレット縦・狭い PC ウィンドウ）は
   キャラが半分見切れて中途半端なので、絵全体を 15% 拡大してほぼ画面外に出す。
   スマホ縦（〜0.56）と横向きスマホ（高さ 600px 未満）は従来どおり === */
@media (max-width:820px) and (min-height:600px) and (min-aspect-ratio:66/100), (hover:none) and (pointer:coarse) and (min-width:768px) and (min-height:600px) and (orientation:portrait) and (min-aspect-ratio:66/100){
  .lobby__stage{
    --W:calc(100svh * 1.65574 * 1.15);
    height:115%;
    top:-7.5svh;
  }
}

/* === 小さいスマホ（〜360px） === */
@media (max-width:360px){
  .brand--nintendo{display:none;}          /* 320px はロゴ1つに */
  .replay{padding:8px 10px;font-size:9px;}
  .menu__btn{height:34px;padding:0 10px 0 12px;font-size:10px;}
  .btn{gap:10px;padding:13px 14px;}
  .btn__sub{font-size:9px;letter-spacing:.14em;}
  .btn__main{font-size:14px;letter-spacing:.06em;}
  .sns__item a{width:46px;}
}

/* === スマホ横向き（画面が低い） === */
@media (orientation:landscape) and (max-height:560px){
  :root{--rail:56px;}
  .btn{padding:9px 10px;}
  .btn__icon{width:22px;height:22px;}
  .btn__main{font-size:13px;}
  .replay{top:auto;left:calc(var(--rail) + 10px);right:auto;bottom:10px;}   /* 左下（SNS レールの右隣） */
  /* 横向きは画面が低く CTA（stage の 83%）が左下の「ムービーを見る」と被るので、従来の 93% のまま */
  .lobby__cta{bottom:calc(50% - 28.125vw + 3.9375vw);}
  .sns{
    left:0;right:auto;top:0;bottom:0;
    width:56px;height:auto;
    flex-direction:column;
    padding:0;
    background:none;
  }
  .sns__list{flex-direction:column;gap:0;}
  .sns__item a{width:44px;height:38px;}
  .sns__item svg{width:20px;height:20px;}   /* 横向きも従来サイズ（38px の箱に 33px は入らない） */
  .sns__line{display:none;}
}

/* ---------- タッチ端末：hover を効かせない ---------- */
@media (hover:none){
  .sns__item a:hover{color:rgba(255,255,255,.72);background:none;transform:none;}
  .sns__item a:hover .sns__label{opacity:0;}
  .chara__voice:hover{background:rgba(255,69,200,.16);border-color:rgba(255,69,200,.55);transform:none;}
  .chara__voice--rane:hover{background:rgba(162,89,255,.16);border-color:rgba(162,89,255,.55);}
  .btn:hover{transform:none;box-shadow:none;}
  .btn--cf:hover{border-color:rgba(255,150,110,.5);}
  .btn--steam:hover{border-color:rgba(255,255,255,.22);}
  .btn:hover .btn__arrow{transform:none;}
  .btn:hover .btn__glow{animation:none;}
  .replay:hover{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.2);background:none;}
  .lobby__cover:hover .lobby__cover-logo{transform:translate(-50%,-50%);filter:drop-shadow(0 4px 22px rgba(0,0,0,.75));}
  .news__list a:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05);transform:none;}
  .intro__sound:hover,.intro__skip:hover{
    color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.28);background:none;
  }
  .lobby__char--sera:hover video,.lobby__char--rane:hover video{filter:none;}
  .lobby__char-cue{font-size:0;}            /* 文字を TAP に差し替える */
  .lobby__char-cue::after{content:"TAP";font-size:clamp(9px,2.6vw,13px);}
  .lobby__char-cue i{display:none;}
  .menu__btn:hover{background:rgba(7,4,14,.66);border-color:rgba(255,255,255,.2);}
  .menu__list a:hover{background:none;}
  .lobby__edge:active{background:rgba(255,69,200,.35);}
  .menu__list a:hover span{color:#fff;}
  /* タップした瞬間のフィードバック */
  .btn:active{transform:scale(.985);}
  .sns__item a:active{background:rgba(255,255,255,.12);}
  .replay:active,.intro__sound:active,.intro__skip:active{background:rgba(255,255,255,.14);}
}

/* ============================================================
   視差効果を減らす設定（prefers-reduced-motion）:
   揺れ・光り・登場などの装飾アニメーションを実質停止し、
   ページ間のモーフ遷移もやめる（main.js 側でムービーも自動スキップ）
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01s !important;
  }
  @view-transition{navigation:none;}
}