@charset "utf-8";
/* ===================================================================
 File Name  : flexani.css
 Style Info : アニメーションスタイル指定
=================================================================== */

/*アニメーション*/
.ani_left {
  position: relative;
  opacity: 0;
  left: -30px;
}
.ani_left.active {
  animation: ani_left 0.8s ease 0.4s 1 forwards;
}
  @keyframes ani_left {
    100% {
      opacity: 1;
      left: 0;
    }
  }

.ani_right {
  position: relative;
  opacity: 0;
  right: -30px;
}
.ani_right.active {
  animation: ani_right 0.8s ease 0.4s 1 forwards;
}
  @keyframes ani_right {
    100% {
      opacity: 1;
      right: 0;
    }
  }

.ani_bottom {
  display: block;
  opacity: 0;
  transform: translateY(120px);
}
.ani_bottom.active {
  animation: ani_bottom 1s cubic-bezier(.3,.61,.36,1) 0s forwards;
}
@keyframes ani_bottom {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  @media screen and (max-width: 999px) {
    .ani_bottom {
      transform: translateY(60px);
    }
  }

.ani_zoom {
  position: relative;
  display: block;
  opacity: 0;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}
.ani_zoom.active {
  -webkit-animation: ani_zoom 1s ease 0.4s 1 forwards;
  animation: ani_zoom 1s ease 0.4s 1 forwards;
}
  @-webkit-keyframes ani_zoom {
    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @keyframes ani_zoom {
    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

.ani_fade {
  position: relative;
  opacity: 0;
}
.ani_fade.active {
  -webkit-animation: ani_fade 1s ease 0.4s 1 forwards;
  animation: ani_fade 1s ease 0.4s 1 forwards;
}
  @-webkit-keyframes ani_fade {
    100% {
      opacity: 1;
    }
  }
  @keyframes ani_fade {
    100% {
      opacity: 1;
    }
  }

.ani_txt {
display: inline-block;
max-width: 100%;
}

.ani_txt .ani_line {
display: inline-block;
position: relative;
overflow: hidden;
clip-path: inset(0 100% 0 0);
will-change: clip-path;
vertical-align: top;
}

.ani_txt .ani_line.is-show {
animation-name: clip-line;
animation-timing-function: linear;
animation-fill-mode: forwards;
}

@keyframes clip-line {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}

.ani_band {
  line-height: 0;
  font-weight: 400;
}
.ani_band span {
  display: inline-block;
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  padding: 0.15em 0.5em;
  line-height: 1;
  font-size: 4rem;
  color: rgba(255,255,255,0);
}
.ani_band span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #2d2d2d;
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
  will-change: transform;
  backface-visibility: hidden;
}
.ani_band span.is-show::before {
  animation: band-fill 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ani_band span.is-show {
  animation: text-fade 0.8s ease 0.45s forwards;
}
  @media screen and (max-width: 999px) {
    .ani_band span {
      padding: 0.8vw 2vw;
      line-height: 1;
      font-size: 5.33vw;
    }
  }

@keyframes band-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes text-fade {
  from { color: rgba(255,255,255,0); }
  to   { color: rgba(255,255,255,1); }
}

.ani_band.is-invert span {
  color: rgba(45,45,45,0);
}
.ani_band.is-invert span::before {
  background: #fff;
}
.ani_band.is-invert span.is-show {
  animation: text-fade-invert 0.8s ease 0.45s forwards;
}

@keyframes text-fade-invert {
  from { color: rgba(45,45,45,0); }
  to   { color: rgba(45,45,45,1); }
}