@charset "UTF-8";

body{
  margin: 0;
  background: #37b6dd; /* 水色 */
}

/* MVはスクロール尺を作る（ここが“どれだけ演出するか”） */
.mv{
  height: 220vh; /* ここを増やすと演出がゆっくりになる */
}

/* 画面に張り付く舞台 */
.mv-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* 3つ横並び */
.gif-row{
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px;
}

/* 1つの枠 */
.gif-item{
  width: 260px;
}

/* ここをJSが動かす（元サイトと同じくtransform/opacity） */
.un_mv_chara_img{
  will-change: transform, opacity;
}

/* 画像 */
.un_mv_chara_img img{
  display: block;
  width: 100%;
  height: auto;
}

/* 下のセクション（移動先） */
.next{
  min-height: 120vh;
  padding: 80px 18px;
  background: transparent;
  place-items: center; 
  text-align: center; 
}

.next-inner{
  max-width: 720px;
}

.next h2{
  margin: 0 0 18px;
  color: #fff;
}

.next p{
  margin: 0 0 10px;
  color: #fff;
  line-height: 1.8;
}