@charset "UTF-8";
/* ============================================================
   KYOTO COCO CITY：PC版トップMV（光の演出）
   演出マスター：mv-prototype/index-lite.html（見た目・タイミングはマスターと同一。クラス名のみ kc-mv_ に置き換え）
   ・PC（768px以上）のみ表示。SPは従来どおり kc-style.css の2枚クロスフェード
   ・1920x1340 の固定ステージを枠の幅に合わせて丸ごと縮小（座標はFigmaのキャンバス座標のまま）
   ============================================================ */
.kc-mv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff; /* 演出開始前は白 */
}
.kc-mv,
.kc-mv * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.kc-mv img { max-width: none; }
.kc-mv_stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1340px; transform-origin: 0 0; overflow: hidden; }
.kc-mv_world { position: absolute; inset: 0; transform-origin: 872.46px 816.78px; will-change: transform; }
.kc-mv_abs { position: absolute; }
.kc-mv_photo { left: 0; top: 0; width: 1920px; height: 1340px; will-change: filter, opacity; }
.kc-mv_route-final { left: 0; top: 0; width: 1920px; height: 1340px; opacity: 0; }
.kc-mv_fx { position: absolute; left: 0; top: 0; width: 1920px; height: 1340px; pointer-events: none; }

/* 駅光の要素はPCでJSが生成したときだけ存在するので、SPではこの背景画像は読み込まれない */
.kc-mv_st-glow { background-image: url('../img/mv/mv-station.webp'); background-size: 1342px 891.5px; background-repeat: no-repeat; opacity: 0; will-change: opacity, filter; }
.kc-mv_label { opacity: 0; will-change: opacity, transform, filter; }
.kc-mv_label img { position: absolute; display: block; width: auto; height: auto; }

.kc-mv_site { left: 548.01px; top: 620.07px; width: 648.89px; height: 393.42px; opacity: 0; will-change: opacity, filter; }
.kc-mv_site img { display: block; width: 100%; height: 100%; }
.kc-mv_flare { left: 422.46px; top: 366.78px; width: 900px; height: 900px; 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_streak { left: 172.46px; top: 812.78px; width: 1400px; height: 8px; mix-blend-mode: screen; opacity: 0; pointer-events: none; filter: blur(2px);
  background: linear-gradient(90deg, rgba(255,240,200,0) 0%, rgba(255,246,220,.9) 50%, rgba(255,240,200,0) 100%); }

.kc-mv_grad { left: 0; top: 1195.08px; width: 1920px; height: 146.93px; }
.kc-mv_vignette { inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 72% at 45% 60%, rgba(6,14,24,0) 40%, rgba(6,14,24,.78) 100%); }
.kc-mv_warm { inset: 0; pointer-events: none; background: rgb(255,238,205); mix-blend-mode: screen; opacity: 0; }

.kc-mv_logo { left: 541px; top: 44px; width: 838px; height: 188px; opacity: 0; will-change: opacity, transform, filter; }
.kc-mv_logo .kc-mv_part { position: absolute; display: block; }
.kc-mv_logo .kc-mv_halo { left: 0; top: 0; width: 838px; height: 188px; }
.kc-mv_logo .kc-mv_shadow { left: 49.78px; top: 53.35px; width: 740.45px; height: 81.29px; }
.kc-mv_logo .kc-mv_mark { left: 56.82px; top: 59.75px; width: 726.96px; height: 68.37px; }
/* 光のにじみが要素の外で四角く切れないよう、余白(40px)を持たせたラッパーにマスクをかける */
.kc-mv_logo .kc-mv_shine { left: 16.82px; top: 19.75px; width: 806.96px; height: 148.37px; padding: 40px;
  -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_logo .kc-mv_shine img { display: block; width: 726.96px; height: 68.37px;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.95)) drop-shadow(0 0 20px rgba(170,215,255,.85)); }

/* オープニング（ロゴ画面）：Figma「PC_トップ」 白75%のベール＋ロゴマーク＋ロゴタイプ */
/* ベールは最初から不透明：演出開始前（画像読み込み中）は白一色にし、ビネット等の下のレイヤーを見せない。
   演出の1コマ目もベール不透明から始まるため、そのままつながる */
.kc-mv_op-veil { inset: 0; background: #fff; opacity: 1; pointer-events: none; }
.kc-mv_op-halo { left: 660.5px; top: 303.5px; width: 600px; height: 600px; 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_op-mark { left: 820px; top: 463px; width: 281px; height: 281px; opacity: 0; will-change: opacity, transform, filter; }
.kc-mv_op-word { left: 585px; top: 806px; width: 750px; height: 70px; opacity: 0; will-change: opacity, transform, filter, clip-path; }
.kc-mv_op-mark img,
.kc-mv_op-word img { display: block; width: 100%; height: 100%; }

/* JS無効時：完成状態の1枚画像（hero-b-pc.jpg） */
.kc-mv_fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.kc-mv_fallback[hidden] { display: none; }
.kc-mv.is-fallback .kc-mv_stage { display: none; }
.kc-mv_noscript,
.kc-mv_noscript img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }