@charset "UTF-8";
/* ============================================================
   KYOTO COCO CITY：SP版トップMV（光の演出）
   演出マスター：mv-prototype/sp/index.html（見た目・タイミングはマスターと同一）
   ・SP（767px以下）のみ表示。PCは kc-mv.css / kc-mv.js
   ・すべて .kc-mv-sp / kc-mv-sp_ で始まる
   390x440 の固定ステージ（Figma SP_トップ の座標）を、枠（.kc-mv-sp）の幅に合わせて丸ごと縮小・拡大
   ============================================================ */
.kc-mv-sp { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.kc-mv-sp, .kc-mv-sp * { box-sizing: border-box; margin: 0; padding: 0; }
.kc-mv-sp img { max-width: none; }
.kc-mv-sp_stage { position: absolute; left: 0; top: 0; width: 390px; height: 440px; transform-origin: 0 0; overflow: hidden; }
.kc-mv-sp_abs { position: absolute; }
.kc-mv-sp_photo { left: 0; top: 0; width: 390px; height: 440px; display: block; }
.kc-mv-sp_fx { position: absolute; left: 0; top: 0; width: 390px; height: 440px; pointer-events: none; }

/* 駅光：Figmaの駅光（白いぼかし）をCSSの放射グラデーションで再現（画像なし） */
.kc-mv-sp_st-glow { border-radius: 50%; opacity: 0; will-change: opacity, transform;
  background: radial-gradient(closest-side, rgba(255,255,255,1) 0%, rgba(255,255,255,.9) 22%, rgba(255,255,255,.35) 58%, rgba(255,255,255,0) 100%); }
.kc-mv-sp_label { opacity: 0; will-change: opacity, transform; }
.kc-mv-sp_label img { display: block; width: 100%; height: 100%; }

.kc-mv-sp_site { left: 55.59px; top: 217.07px; width: 182.42px; height: 110.6px; opacity: 0; will-change: opacity; }
.kc-mv-sp_site img { display: block; width: 100%; height: 100%; }
.kc-mv-sp_site-live { position: absolute; left: 55.59px; top: 194.95px; width: 182.42px; height: 132.72px; pointer-events: none; }
.kc-mv-sp_flare { left: 20.3px; top: 145.9px; width: 253px; height: 253px; border-radius: 50%; mix-blend-mode: screen; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,247,222,.9) 0%, rgba(255,214,140,.45) 14%, rgba(255,200,120,.14) 34%, rgba(255,200,120,0) 58%); }
.kc-mv-sp_streak { left: -50px; top: 270px; width: 394px; height: 3px; mix-blend-mode: screen; opacity: 0; pointer-events: none; filter: blur(1px);
  background: linear-gradient(90deg, rgba(255,240,200,0) 0%, rgba(255,246,220,.9) 50%, rgba(255,240,200,0) 100%); }
.kc-mv-sp_warm { inset: 0; pointer-events: none; background: rgb(255,238,205); mix-blend-mode: screen; opacity: 0; }
/* 下端のグラデ：Figma「グラデ」の色停止をそのままCSSに */
.kc-mv-sp_grad { left: 0; top: 398.37px; width: 390px; height: 42.01px; pointer-events: none;
  background: linear-gradient(to top, #E4EFF0 0%, rgba(229,239,240,.95) 9%, rgba(232,241,242,.82) 26%, rgba(238,245,245,.6) 48%, rgba(246,250,250,.31) 74%, rgba(255,255,255,0) 100%); }

/* 上部ロゴ：PC版と同じ部品。位置・大きさはFigma SP「_レイヤー_1」(299:2339) の実測値
   （影はPC版の比率より少し横長。比率から計算すると影が文字からずれて、くっきりした影に見える） */
.kc-mv-sp_logo { left: 0; top: 20.99px; width: 390px; height: 87px; opacity: 0; will-change: opacity, transform; }
.kc-mv-sp_logo .kc-mv-sp_part { position: absolute; display: block; }
.kc-mv-sp_logo .kc-mv-sp_halo { left: 0; top: 0; width: 390px; height: 87px; }
.kc-mv-sp_logo .kc-mv-sp_shadow { left: 23.164px; top: 24.694px; width: 344.602px; height: 37.612px; }
.kc-mv-sp_logo .kc-mv-sp_mark { left: 26.442px; top: 27.649px; width: 338.325px; height: 31.64px; }
.kc-mv-sp_logo .kc-mv-sp_shine { left: 7.822px; top: 9.029px; width: 375.565px; height: 68.88px; padding: 18.62px;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 45%, #000 55%, transparent 100%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 45%, #000 55%, transparent 100%);
  -webkit-mask-size: 40% 100%; mask-size: 40% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: 0; }
.kc-mv-sp_logo .kc-mv-sp_shine img { display: block; width: 338.325px; height: 31.64px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 9px rgba(170,215,255,.85)); }

/* オープニング（ロゴ画面）：Figma「SP_トップ」 白75%のベール＋ロゴマーク＋ロゴタイプ。
   ベールは最初から不透明（読み込み中は白一色。演出の1コマ目もここから始まる） */
.kc-mv-sp_op-veil { inset: 0; background: #fff; opacity: 1; pointer-events: none; }
.kc-mv-sp_op-halo { left: -18.5px; top: -47.5px; width: 427px; height: 427px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 30%, rgba(255,255,255,0) 65%); }
.kc-mv-sp_op-mark { left: 95px; top: 66px; width: 200px; height: 200px; opacity: 0; will-change: opacity, transform, filter; }
.kc-mv-sp_op-word { left: 45px; top: 296px; width: 300px; height: 28px; opacity: 0; will-change: opacity, transform, clip-path; }
.kc-mv-sp_op-mark img, .kc-mv-sp_op-word img { display: block; width: 100%; height: 100%; }
/* 静止画像：JS無効時（noscript）と、初期化中にエラーが起きたとき（.is-fallback）だけ表示 */
.kc-mv-sp_fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kc-mv-sp_fallback[hidden] { display: none; }
.kc-mv-sp.is-fallback .kc-mv-sp_stage { display: none; }