/* animation */
/* 雪のアニメーション */
.snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 10px;
  /*初期位置*/
  position: absolute;
  z-index: 9999;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}
/* 親 */

.animation-text {
  overflow: hidden !important;
  /* display: flex !important; */
  /* justify-content: center !important; */
  /* align-items: center !important; */
  text-align: left;
  text-transform: uppercase !important;
  opacity: 0;
  
}

.animation-text.is-active {
  --y: 0;
  opacity: 1;
}

.animation-text.is-active.title-first-letter span:first-child {
  font-size: 120%;
  color: var(--cl-bg-primary);
  border-bottom: 3px solid var(--cl-bg-primary);
}
.animation-text.is-active.title-first-letter.light span:first-child {
  font-size: 120%;
  color: var(--cl-text-accent);
  border-bottom: 3px solid var(--cl-bg-secondary);
}

.animation-text-always {
  overflow: hidden !important;
  /* display: flex !important; */
  /* justify-content: center !important; */
  /* align-items: center !important; */
  text-align: left;
  text-transform: uppercase !important;
  opacity: 0;
  vertical-align: middle;
}

.animation-text-always.is-active {
  --y: 0;
  opacity: 1;
}
.animation-text-always.is-active.title-first-letter span:first-child {
  font-size: 120%;
  color: var(--cl-bg-primary);
  border-bottom: 3px solid var(--cl-bg-primary);
}

.char {
  display: inline-block !important;
  transform: translateY(var(--y, 300%)) !important;
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1) !important;
  transition-delay: calc(0.1s * var(--char-index)) !important;
  overflow: hidden;
  padding-right: 5px;
}





.fade-in-text {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-out, transform 2s ease-out;
  transition-delay: calc(var(--delay) * 1.5s);
  text-align: center;
  padding-bottom:24px;
}

.fade-in-text.visible {
  opacity: 1;
  transform: translateY(0);
}

.hover-text {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/* 1文字ずつのspanに対して設定される */
/* .hover-text-main span {
  line-height: 1em; 
  display: inline-block;
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
} */

.hover-text-main span {
  display: inline-block;
  line-height: 1em;             /* 文字箱の高さを一定化 */
  vertical-align: text-bottom;  /* baselineのブレを抑える（baseline/ bottom でも可） */
  transition:  opacity 0.4s ease;
}