@charset "UTF-8";

/* ANIMATION 
========================================= */
.fadeIn,.fadeInRight,.fadeInDown,.fadeInLeft,.fadeInUp{
  opacity:0;
}
.fadeIn.on{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInAnime{
  from { opacity: 0; }
  50%  { opacity:.45;}
  to   { opacity: 1; }
}

.fadeInRight.on{
  animation-name:fadeInRightAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInRightAnime{
  from { opacity: 0; transform: translateX(-10%) ;}
  70%  { opacity: 1;}
  to   { opacity: 1; transform: translateX(0) }
}

.fadeInDown.on{
  animation-name:fadeInDownAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInDownAnime{
  from { opacity: 0; transform: translateY(-5%) ;}
  70%  { opacity: 1;}
  to   { opacity: 1; transform: translateY(0) ;}
}

.fadeInLeft.on{
  animation-name:fadeInLeftAnime;
  animation-duration:.8s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInLeftAnime{
  from { opacity: 0; transform: translateX(10%) ;}
  70%  { opacity: .7;}
  to   { opacity: 1; transform: translateX(0) ;}
}

.fadeInUp.on{
  animation-name:fadeInUpAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  /* animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); */
  opacity:0;
}
@keyframes fadeInUpAnime{
  from { opacity: 0; transform: translateY(20px) ;}
  80%  { opacity: .8;}
  to   { opacity: 1; transform: translateY(0) ;}
}

.fadeInUp-load.on{
  animation-name:fadeInUp-loadAnime;
  animation-duration:.3s;
  animation-fill-mode:forwards;
  /* animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); */
  opacity:0;
}
@keyframes fadeInUp-loadAnime{
  from { opacity: 0; transform: translateY(20px) ;}
  50%  { opacity: .5;}
  to   { opacity: 1; transform: translateY(0) ;}
}

.fadeCoverRight{
  position: relative;
  overflow: hidden;
}
.fadeCoverRight::before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  background-color: rgba(156, 252, 248, .8);
  background-image: linear-gradient( 109.6deg,  rgba(156,252,248,.8) 11.2%, rgba(110,123,251,.8) 91% );
  transform-origin: center right;
  /* mix-blend-mode:hard-light ; */
  opacity: .8;
}
.fadeCoverRight.on::before {
  /* right: -140%; */
  animation-name:fadeCoverRightAnime;
  animation-duration:.5s;
  animation-fill-mode:forwards;
}
@keyframes fadeCoverRightAnime{
  from { width: 0;}
  60%  { width: 90%;transform: scaleX(1)}
  70%  { width: 100%;transform: scaleX(.9)}
  to   { width: 100% ;transform: scaleX(0);}
}

.fadeBlind_ltr,
.fadeBlind_rtl{
  position: relative;
}
.fadeBlind_ltr::after,
.fadeBlind_rtl::after{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  background-color: var(--color-pink);
  width: 100%;
  height:100%;
  z-index: 1;
  transform: scaleX(100%);
  opacity: .6;
}
.fadeBlind_ltr.on::after{
  transform-origin: left;
  animation:fadeBlind_ltr_on .7s forwards;
}
.fadeBlind_rtl.on::after{
  transform-origin: right;
  animation:fadeBlind_ltr_on .7s forwards;
}
@keyframes fadeBlind_ltr_on {
  0% {  transform: scaleX(100%);}
  100% {transform: scaleX(0);}
}

.fadeBlur{
  filter: blur(1em);
  transition: filter .5s;
}
.fadeBlur.on{
  filter: blur(0);
}

.slideUp{
  display: block;
  width: 100%;
  height: fit-content;
  overflow: hidden;
}
.slideUp * {
  display: block;
  transform: translateY(100%);
  transition: transform .5s;
}
.slideUp.on * {
  transform: translateY(0);
}

.slideRight{
  display: block;
  width: 100%;
  height: fit-content;
  overflow: hidden;
}
.slideRight * {
  display: block;
  transform: translateX(-100%);
  transition: transform .3s;
}
.slideRight.on * {
  transform: translateX(0);
}

.delay01s{animation-delay: .1s;}
.delay02s{animation-delay: .2s;}
.delay025s{animation-delay: .25s;}
.delay03s{animation-delay: .3s;}
.delay04s{animation-delay: .4s;}
.delay05s{animation-delay: .5s;}
.delay06s{animation-delay: .6s;}
.delay075s{animation-delay: .75s;}
.delay08s{animation-delay: .8s;}
.delay09s{animation-delay: .9s;}
.delay1s{animation-delay: 1s;}
.delay11s{animation-delay: 1.1s;}
.delay12s{animation-delay: 1.2s;}
.delay13s{animation-delay: 1.3s;}
.delay14s{animation-delay: 1.4s;}
.delay15s{animation-delay: 1.5s;}
.delay16s{animation-delay: 1.6s;}
.delay17s{animation-delay: 1.7s;}
.delay18s{animation-delay: 1.8s;}
.delay19s{animation-delay: 1.9s;}
.delay2s{animation-delay: 2s;}


/* 一文字ずつアニメーション =========================*/
.eachText{ opacity: 0; }
.eachText.on{ opacity: 1; }

.eachText._fade{
  display: block;
  overflow: hidden;
  height: 100%;
  opacity: 0;
}
.eachText._fade span{
  display: inline-block;
  /* transform: translateY(100%); */
  opacity: 0;
}
.eachText._fade.on span{
  animation:eachFade_on .4s cubic-bezier(.74,.22,.58,.84) forwards;
}
@keyframes eachFade_on {
  /* 0% {transform: translateY(100%); opacity: 0;}
  70% {transform: translateY(-5%); opacity: .2;}
  100% {transform: translateY(0); opacity: 1;} */
  0% { opacity: 0;}
  70% { opacity: .4;}
  100% { opacity: 1;}
}

.eachText._move.on{
  animation-name:fadeInUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
/* .eachText._move{
  overflow: hidden;
}
.eachText._move span{
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
} */
/* .eachText._move.on span{
  animation:eachMove_on .3s cubic-bezier(.74,.22,.58,.84) forwards;
}
@keyframes eachMove_on {
  0% {transform: translateY(100%); opacity: 0;}
  70% {transform: translateY(20%); opacity: .1;}
  80% {transform: translateY(-8%); opacity: .5;}
  100% {transform: translateY(0); opacity: 1;}
} */
/* 一文字ずつアニメーション */


/* .delaylist li,.delaylist>div{
  opacity:0;
}
.delaylist.on li,.delaylist.on>div{
  animation-name:fadeInUpAnime;
  animation-duration:.3s;
  animation-fill-mode:forwards;
  opacity:0;
} */