@charset "UTF-8";
/*** 雪玉（共通） ***/
.snows {
	position: absolute;
	width: 100%;
	height:100%;	
	}

.fallTrigger04smp.snows {
	position: absolute;
	width: 100%;
	height:80%;	
	}

.snows div{
  position: absolute;
  top: 0; /*初期位置*/
  left: 0;
  border-radius: 50%; /*丸型*/
  background: #fff; /*雪の色*/
  opacity: 0.9; /*若干透明に*/
}

/*** 小さい雪玉 ***/
.snows div:nth-child(1){
  width: 10px;
  height: 10px;
  filter: blur(2px); /*ぼかし*/
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    5vw -40px 0 #fff,
    10vw 150px #fff,
    15vw -230px #fff,
    22vw 240px #fff,
    30vw 120px #fff,
    35vw -180px #fff,
    44vw 240px #fff,
    50vw 0 #fff,
    60vw 180px #fff,
    68vw 40px #fff,
    74vw -130px #fff,
    81vw -240px #fff,
    88vw 100px #fff,
    95vw 60px #fff;
    animation: fall 20s linear;/*落下*/
}

/*** 中ぐらいの雪玉 ***/
.snows div:nth-child(2){
  width: 14px;
  height: 14px;
  filter: blur(3px); /*ぼかし*/
  /* ±233pxの範囲で影(複製)を作る */
  box-shadow:
    12vw 5px 0 #fff,
    32vw -100px #fff,
    45vw -180px #fff,
    68vw 40px #fff,
    77vw 65px #fff,
    94vw 230px #fff;
  animation: fall 10s linear; /*落下*/
}

/*** 小さい雪玉 ***/
.slowdown.snows div:nth-child(1){
  width: 10px;
  height: 10px;
  filter: blur(2px); /*ぼかし*/
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    5vw -40px 0 #fff,
    10vw 150px #fff,
    15vw -230px #fff,
    22vw 240px #fff,
    30vw 120px #fff,
    35vw -180px #fff,
    44vw 240px #fff,
    50vw 0 #fff,
    60vw 180px #fff,
    68vw 40px #fff,
    74vw -130px #fff,
    81vw -240px #fff,
    88vw 100px #fff,
    95vw 60px #fff;
    animation: fall 30s linear;/*落下*/
}

/*** 中ぐらいの雪玉 ***/
.slowdown_smp.snows div:nth-child(2){
  width: 14px;
  height: 14px;
  filter: blur(3px); /*ぼかし*/
  /* ±233pxの範囲で影(複製)を作る */
  box-shadow:
    12vw 5px 0 #fff,
    32vw -100px #fff,
    45vw -180px #fff,
    68vw 40px #fff,
    77vw 65px #fff,
    94vw 230px #fff;
  animation: fall 40s linear; /*落下*/
}

/*** 小さい雪玉 ***/
.slowdown_smp.snows div:nth-child(1){
  width: 10px;
  height: 10px;
  filter: blur(2px); /*ぼかし*/
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    5vw -40px 0 #fff,
    10vw 150px #fff,
    15vw -230px #fff,
    22vw 240px #fff,
    30vw 120px #fff,
    35vw -180px #fff,
    44vw 240px #fff,
    50vw 0 #fff,
    60vw 180px #fff,
    68vw 40px #fff,
    74vw -130px #fff,
    81vw -240px #fff,
    88vw 100px #fff,
    95vw 60px #fff;
    animation: fall 40s linear;/*落下*/
}

/*** 中ぐらいの雪玉 ***/
.slowdown.snows div:nth-child(2){
  width: 14px;
  height: 14px;
  filter: blur(3px); /*ぼかし*/
  /* ±233pxの範囲で影(複製)を作る */
  box-shadow:
    12vw 5px 0 #fff,
    32vw -100px #fff,
    45vw -180px #fff,
    68vw 40px #fff,
    77vw 65px #fff,
    94vw 230px #fff;
  animation: fall 30s linear; /*落下*/
}


/*** 落下アニメーション ***/
@keyframes fall{
  0%{
    top: 0;
    opacity: 0.5;
  }
  10% {
    opacity: 1;
  }
  15% {
    opacity: 0.4;
  }
  20% {
    opacity: 0;
  }
  100% {
    top: calc(100% + 250px);
    opacity: 0;
  }
}





/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}


/* mv ローディングアニメーション */
body.loaded .mv-anime {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  background: url(/attending/kaigai/christmas/images/bg_mv-anime01.jpg) no-repeat center/cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  animation: mv-anime .5s ease-in-out 7s forwards;
}
.mv-anime.is-second-access {
  animation: none;
  display: none;
}
.mv-anime__square {
  width: 464px;
  height: 451px;
  padding-top: 83px;
  position: relative;
  opacity: 0;
}
body.loaded .mv-anime__square {
  opacity: 1;
}
.mv-anime__square::before {
  content: "";
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 903/904;
  background: url(/attending/kaigai/christmas/images/bg_mv-anime02.png) no-repeat center right/auto 100%;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
}
body.loaded .mv-anime__square::before {
  animation: mv-anime-square 1.2s ease-in-out 4.3s forwards;
}
.mv-anime__border--behind {
  width: 448px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.mv-anime__border--front {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.mv-anime__ttl {
  width: 428px;
  height: auto;
  position: relative;
  z-index: 3;
}
.mv-anime__year {
  width: 210px;
  margin: -64px 0 0 140px;
  position: relative;
  z-index: 3;
}
.mv-anime__illust {
  width: 177px;
  height: 109px;
  position: absolute;
  bottom: 191px;
  right: 0;
  z-index: 4;
  opacity: 0;
  translate: -40px;
}
body.loaded .mv-anime__illust {
  animation: mv-anime-illust 1.2s ease-in-out 3.5s forwards;
}
.mv-anime__txt {
  width: 380px;
  margin: -18px auto 0;
  opacity: 0;
  translate: 0 40px;
  position: relative;
  z-index: 3;
}
body.loaded .mv-anime__txt {
  animation: mv-anime__txt 1.2s ease-in-out 4.3s forwards;
}

@keyframes mv-anime {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}


@keyframes mv-anime-square {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mv-anime-illust {
  0% {
    opacity: 0;
    translate: -40px;
  }
  100% {
    opacity: 1;
    translate: 0;
  }
}

@keyframes mv-anime__txt {
  0% {
    opacity: 0;
    translate: 0 40px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

/* border--behind */
@keyframes mv_anime__border--behind {
  0% {
    stroke-dashoffset: 1281.239990234375px;
    stroke-dasharray: 1281.239990234375px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1281.239990234375px;
  }
}

body.loaded .svg-elem-3 {
  animation: mv_anime__border--behind 4.8s cubic-bezier(.7,.1,.6,1) 0s forwards;
}

/* border--front */

 @keyframes mv_anime__border--front {
  0% {
    stroke-dashoffset: 1273.43994140625px;
    stroke-dasharray: 1273.43994140625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1273.43994140625px;
  }
}

body.loaded .svg-elem-4 {
  animation: mv_anime__border--front 4.8s cubic-bezier(.7,.1,.6,1) 0s forwards;
}


/* christmas */

@keyframes animate-svg-stroke-1 {
  0% {
      stroke-dashoffset: 3100.391845703125px;
      stroke-dasharray: 3100.391845703125px;
  }

  100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 3100.391845703125px;
  }
}
body.loaded .svg-elem-1 {
  animation: animate-svg-stroke-1 1.5s linear .3s both;
}
@keyframes animate-svg-stroke-2 {
  0% {
      stroke-dashoffset: 2004.4423828125px;
      stroke-dasharray: 2004.4423828125px;
  }
  100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 2004.4423828125px;
  }
}
body.loaded .svg-elem-2 {
  animation: animate-svg-stroke-2 1.5s linear .3s both;
}

/* 2025 */
@keyframes animate-svg-stroke-3 {
  0% {
      stroke-dashoffset: 1441.6575927734375px;
      stroke-dasharray: 1441.6575927734375px;
  }
  100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 1441.6575927734375px;
  }
}
body.loaded .svg-anime02-1 {
  animation: animate-svg-stroke-3 0.75s linear 2s both;
}
@keyframes animate-svg-stroke-4 {
  0% {
      stroke-dashoffset: 1009.0827026367188px;
      stroke-dasharray: 1009.0827026367188px;
  }

  100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 1009.0827026367188px;
  }
}
body.loaded .svg-anime02-2 {
  animation: animate-svg-stroke-4 0.75s linear 2s both;
}