/* ============================================================
   プラン差の打ち消し（60万＝.m-lite ／ 30万＝.m-none）
   作り分けない。上位の器のまま「動き」だけを落とす。
   文字サイズ・余白・配色は変数と共通ルールなので、ここでは一切触らない。
   ============================================================ */

/* ---- 60万 m-lite ------------------------------------------------ */

/* 幕（オープニング）を出さない。JS側は走るが見えない */
.m-lite .opener,
.m-none .opener{display:none!important}
.m-lite body.is-opener-locked,
.m-none body.is-opener-locked{overflow:auto}

/* FVコピー：起き上がり（rotateX）をやめ、下からのフェードだけにする */
.m-lite .cover__copy img{
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
  animation:none!important}
.m-lite .cover.is-revealed .cover__copy img{opacity:1;transform:none}
/* 写真が切り替わるたびにコピーが出直すのを止める（100万だけの挙動） */
.m-lite .cover__copy img{opacity:1;transform:none;transition:none}
.m-lite .cover:not(.is-revealed) .cover__copy img{opacity:1;transform:none}

/* 光の玉：浮かせない（配置は残す） */
.m-lite .cover__balls span,
.m-none .cover__balls span{animation:none!important}

/* スクロール誘導の鳥：動かさない */
.m-lite .cover__scroll-bird,
.m-none .cover__scroll-bird{animation:none!important}

/* 60万のFV：写真は3枚の散らしで固定（切替なし）。
   大フレームは100万と同じ「車庫で話す従業員3人」を使う。 */
/* 写真は index.html 側で state--3 の1枚だけにしてある（状態が1つなら
   trace.js の自動切替は始まらない）。CSSでの出し分けはしない。 */

/* ---- 30万 m-none ----------------------------------------------- */
/* 写真は index.html 側で1つの状態だけにしてある（状態が1つなら自動切替も始まらない）。
   CSSで state を出し分けると、写真の出現が is-active に紐づいているため消える。 */
.m-none .cover__copy img{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
.m-none .rv,.m-none .reveal{opacity:1!important;transform:none!important;transition:none!important}
.m-none .arc-up>.arc{display:none}

/* ---- 60万：ここから下は「演出だけ」を落とす ------------------ */

/* メガメニューは出さない（ハンバーガーの全ページメニューだけにする） */
.m-lite .mm{display:none!important}
.m-lite .hd__trg{cursor:default}

/* 先輩ドライバーの横送り → グリッド */
.m-lite .ts-mem__track{display:grid!important;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);
  transform:none!important;transition:none!important;width:auto!important}
.m-lite .ts-mem__track>*{width:auto!important;min-width:0}
.m-lite .ts-mem__nav,.m-lite .ts-mem__bar{display:none}
@media (max-width:760px){.m-lite .ts-mem__track{grid-template-columns:1fr}}

/* 出現は「フェードのみ」。動く距離をなくす（60万は演出ゼロにしない） */
.m-lite .rv,.m-lite .reveal{transform:none!important}
.m-lite .ts-card{clip-path:none!important}

/* 帯の無限ループ・視差は止める */
.m-lite .project-card__text-loop,.m-lite [data-parallax]{animation:none!important;transform:none!important}

/* ---- 30万 m-none：ここから下は演出を完全に止める ---------------- */

/* ボタンhover（鳥の翻り）を止める。
   ※ この演出は transform だけでなく opacity でも切り替えている。
      a2 を display:none にすると、hover で a1 が opacity:0 になった瞬間に
      矢印が消える（実際にやらかした）。a1 を出したまま止めること。 */
.m-none .ts-btn .arw svg{transition:none!important}
.m-none .ts-btn:hover .arw .a1{transform:none!important;opacity:1!important}
.m-none .ts-btn:hover .arw .a2{opacity:0!important}

/* ヘッダーは1画面目でも溶けない（常時表示）。
   ※ position を変えるとヘッダーが場所を取り、FVが下にずれる（実際にやらかした）。
      位置は触らず、文字色だけ地色向けに戻すこと。 */
.m-none .hd--over:not(.is-scrolled) .hd__nav>a:not(.ts-btn),
.m-none .hd--over:not(.is-scrolled) .hd__has .hd__trg{color:var(--ink)}

/* 面の継ぎ目は直線に（楕円を出さない） */
.m-none .arc-up>.arc{display:none!important}

/* 出現アニメは一切なし */
.m-none .rv,.m-none .reveal,.m-none .ts-card{
  opacity:1!important;transform:none!important;transition:none!important;clip-path:none!important}

/* 先輩ドライバーの横送り → 縦積み（m-lite と同じ扱いを m-none にも） */
.m-none .ts-mem__track{display:grid!important;grid-template-columns:1fr;gap:clamp(16px,2vw,28px);
  transform:none!important;transition:none!important;width:auto!important}
.m-none .ts-mem__track>*{width:auto!important;min-width:0}
.m-none .ts-mem__nav,.m-none .ts-mem__bar{display:none}

/* Scroll Down の円は回さない */
.m-none .cover__scroll,.m-none .cover__scroll-wrap,.m-none .cover__scroll-bird{
  animation:none!important;transform:none!important}
.m-none .cover__scroll-bird{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)!important}

/* ============================================================
   追補（2026-08-21）
   ・トップの先輩ドライバーを「3枚並びのカード」にする
   ・その下に「もっと見る」ボタンを置く
   ・30万の先輩3人を横並びにする
   ・30万のFV写真は最初から出す（アニメーションなし）
   ============================================================ */

/* --- 先輩ドライバー（トップ）：横送り → 3枚並び ---------------
   ※ .ts-slide は width:100vw の固定なので、track に grid を掛けても効かない。
      rail を grid にして、slide 側の幅を解くこと（1人しか見えない不具合の原因）。 */
.m-lite .ts-mem__track,.m-none .ts-mem__track{
  display:block!important;overflow:visible!important;width:var(--page)!important;margin:0 auto!important;
  scroll-snap-type:none!important}
.m-lite .ts-mem__rail,.m-none .ts-mem__rail{
  display:grid!important;width:auto!important;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,34px)}
.m-lite .ts-slide,.m-none .ts-slide{width:auto!important;min-width:0;scroll-snap-align:none}
.m-lite .ts-slide__link,.m-none .ts-slide__link{
  display:flex!important;flex-direction:column;gap:clamp(14px,1.5vw,22px)}
.m-lite .ts-slide__tx,.m-none .ts-slide__tx{padding:0!important;order:2}
.m-lite .ts-slide__ph,.m-none .ts-slide__ph{order:1;aspect-ratio:1.24;border-radius:4px}
.m-lite .ts-slide__h,.m-none .ts-slide__h{font-size:clamp(18px,1.5vw,23px)}
.m-lite .ts-slide__no,.m-none .ts-slide__no{margin-top:6px}
.m-lite .ts-slide__arw,.m-none .ts-slide__arw{width:44px;height:44px;margin-top:clamp(14px,1.4vw,20px)}
@media (max-width:900px){
  .m-lite .ts-mem__rail,.m-none .ts-mem__rail{grid-template-columns:1fr;gap:40px}
  .m-lite .ts-slide__ph,.m-none .ts-slide__ph{aspect-ratio:1.3}
}

/* --- 「もっと見る」ボタン（横送りがないぶんの導線） ------------- */
.ts-mem__more{position:relative;z-index:3;width:var(--page);margin:clamp(30px,3.2vw,48px) auto 0;
  display:flex;justify-content:center}

/* --- 30万：先輩は横に並べる（縦積みをやめる） -------------------
   ※ .b-faces--3 は .b-faces と同じ詳細度。--3 を後に書かないと2列に負ける。 */
.m-none .b-faces{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:760px){.m-none .b-faces{grid-template-columns:1fr!important}}
.m-none .b-faces--3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:900px){.m-none .b-faces--3{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){.m-none .b-faces--3{grid-template-columns:1fr!important}}

/* --- 30万：FVの写真は最初から出す（円が開く演出をしない） --------
   写真は .cover.is-revealed（JSが付ける）で clip-path が開く作りなので、
   開いた状態を固定して transition を消す。位置や大きさは触らない。 */
.m-none .cover__state{transition:none!important}
.m-none .cover__photo-mask{clip-path:circle(49.7%)!important;transition:none!important}
.m-none .cover__shadow{transform:translate(9px,14px) scale(.97)!important;transition:none!important}
.m-none .cover__balls span{transform:scale(1)!important}
.m-none .cover__arc,.m-none .cover__photo,.m-none .cover__photo img{transition:none!important;animation:none!important}