/*

スクロールアニメーション

更新: 2020-06-25

----------
クラス一覧
----------

scrollanimeクラスと合わせて使用

※印は空のdivを挟む必要があります。
  <div class="labeleffect__left scrollanime">
    <div>
      ◆ここに内容を記述◆
    </div>
  </div>

-- フェードイン --
  .fadein
  .fadein__top
  .fadein__right
  .fadein__bottom
  .fadein__left

-- スケールイン --
  .scalein

-- ※ラベルが重なるエフェクト --
  .labeleffect__left
  .labeleffect__right

-- ※スライドイン --
  .slidein__top
  .slidein__right
  .slidein__bottom
  .slidein__left

-- 字間広い→通常 --
  .letter_spacing

-- clip-path --
  .clippath__top
  .clippath__right
  .clippath__bottom
  .clippath__left

-- ディレイ --
0.1秒 ~ 2秒、アニメーションを遅らせることができます。
1 ~ 20の値で指定できます。
末尾にcが付くものは、そのクラスのついた子要素が対象となります。
  .delay-1
  .delay-1c
      ︙
  .delay-20
  .delay-20c


-----------------------------------------------------------*/

:root {
  --scrollanime-color-01: #08C7FF;
  --scrollanime-color-02: #00ADFF;
}

.fadein__left,
.fadein__right,
.fadein__top,
.fadein__bottom {
  -webkit-transition: ease 1.2s 0s;
  transition: ease 1.2s 0s;

  opacity: 0;
}
.active.fadein__left,
.active.fadein__right,
.active.fadein__top,
.active.fadein__bottom {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);

  opacity: 1;
}

.fadein__left {
  -webkit-transform: translate(-12%, 0);
  transform: translate(-12%, 0);
}

.fadein__right {
  -webkit-transform: translate(12%, 0);
  transform: translate(12%, 0);
}

.fadein__top {
  -webkit-transform: translate(0, -12%);
  transform: translate(0, -12%);
}

.fadein__bottom {
  -webkit-transform: translate(0, 12%);
  transform: translate(0, 12%);
}

.scalein {
  -webkit-transition: -webkit-transform ease 1.2s 0s;
  transition: -webkit-transform ease 1.2s 0s;
  transition: transform ease 1.2s 0s;
  transition: transform ease 1.2s 0s, -webkit-transform ease 1.2s 0s;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
.scalein.active {
  -webkit-transform: scale(1);
  transform: scale(1);
}

@-webkit-keyframes flipX {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 0deg);
    transform: rotate3d(0, 1, 0, 0deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

@keyframes flipX {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 0deg);
    transform: rotate3d(0, 1, 0, 0deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

/* バーが左右に流れるアニメーション */
.labeleffect__left,
.labeleffect__right {
  position: relative;

  display: inline-block;
}
.labeleffect__left > *,
.labeleffect__right > * {
  display: block;

  -webkit-transition: opacity 1ms 0.4s, -webkit-transform 0.4s 0.39s;
  transition: opacity 1ms 0.4s, -webkit-transform 0.4s 0.39s;
  transition: opacity 1ms 0.4s, transform 0.4s 0.39s;
  transition: opacity 1ms 0.4s, transform 0.4s 0.39s,
    -webkit-transform 0.4s 0.39s;

  opacity: 0;
}
.labeleffect__left.active > *,
.labeleffect__right.active > * {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);

  opacity: 1;
}
.labeleffect__left::after,
.labeleffect__right::after {
  position: absolute;
  z-index: 1;
  bottom: 0;

  width: 120%;
  height: 100%;

  content: '';
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.labeleffect__left > * {
  -webkit-transform: translateX(-20%);
  transform: translateX(-20%);
}

.labeleffect__left::after {
  right: 0;

  background-color: var(--scrollanime-color-01);
}

.labeleffect__left.active::after {
  -webkit-animation: fillin-left ease 0.4s 0s, fillout-left ease-in 0.2s 0.39s;
  animation: fillin-left ease 0.4s 0s, fillout-left ease-in 0.2s 0.39s;
}

.labeleffect__right > * {
  -webkit-transform: translateX(20%);
  transform: translateX(20%);
}

.labeleffect__right::after {
  left: 0;

  background-color: var(--scrollanime-color-02);
}

.labeleffect__right.active::after {
  -webkit-animation: fillin-right ease 0.4s 0s, fillout-right ease-in 0.2s 0.39s;
  animation: fillin-right ease 0.4s 0s, fillout-right ease-in 0.2s 0.39s;
}

@-webkit-keyframes fillin-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;

    opacity: 1;
  }
  99.999% {
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}

@keyframes fillin-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;

    opacity: 1;
  }
  99.999% {
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}

@-webkit-keyframes fillout-left {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}

@keyframes fillout-left {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}

@-webkit-keyframes fillin-right {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;

    opacity: 1;
  }
  99.999% {
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

@keyframes fillin-right {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;

    opacity: 1;
  }
  99.999% {
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

@-webkit-keyframes fillout-right {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

@keyframes fillout-right {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

@-webkit-keyframes opacity-1 {
  0% {
    opacity: 0;
  }
  99.9%,
  to {
    opacity: 1;
  }
}

@keyframes opacity-1 {
  0% {
    opacity: 0;
  }
  99.9%,
  to {
    opacity: 1;
  }
}

@-webkit-keyframes opacity-0 {
  0% {
    opacity: 1;
  }
  99.9%,
  to {
    opacity: 0;
  }
}

@keyframes opacity-0 {
  0% {
    opacity: 1;
  }
  99.9%,
  to {
    opacity: 0;
  }
}

/* 上下左右からにゅっと出てくる */
.slidein__bottom,
.slidein__top,
.slidein__right,
.slidein__left {
  overflow: hidden;
}
.slidein__bottom > *,
.slidein__top > *,
.slidein__right > *,
.slidein__left > * {
  -webkit-transition: -webkit-transform ease 0.9s;
  transition: -webkit-transform ease 0.9s;
  transition: transform ease 0.9s;
  transition: transform ease 0.9s, -webkit-transform ease 0.9s;
}
.active.slidein__bottom > *,
.active.slidein__top > *,
.active.slidein__right > *,
.active.slidein__left > * {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.slidein__bottom > * {
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

.slidein__top > * {
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
}

.slidein__right > * {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.slidein__left > * {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

/* 字間広いアニメーション */
.letter_spacing {
  -webkit-transition: ease 0.9s;
  transition: ease 0.9s;
  white-space: nowrap;
  letter-spacing: 1.2em;

  opacity: 0;
}
@media (max-width: 485px) {
  .letter_spacing {
    letter-spacing: 0.6em;
  }
}
.letter_spacing.active {
  letter-spacing: 1.4px;

  opacity: 1;
}

/* clip-pathアニメーション */
.clippath__left,
.clippath__right,
.clippath__top,
.clippath__bottom {
  -webkit-transition: cubic-bezier(1, 0, 0, 1) 0.6s;
  transition: cubic-bezier(1, 0, 0, 1) 0.6s;
}
.active.clippath__left,
.active.clippath__right,
.active.clippath__top,
.active.clippath__bottom {
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}
@supports not (
  (-webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%)) or
    (clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%))
) {
  .clippath__left,
  .clippath__right,
  .clippath__top,
  .clippath__bottom {
    -webkit-transition: ease 0.6s;
    transition: ease 0.6s;

    opacity: 0;
  }
  .active.clippath__left,
  .active.clippath__right,
  .active.clippath__top,
  .active.clippath__bottom {
    opacity: 1;
  }
}

.clippath__left {
  -webkit-clip-path: polygon(0% 0, 0 0, 0 100%, 0% 100%);
  clip-path: polygon(0% 0, 0 0, 0 100%, 0% 100%);
}

.clippath__right {
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.clippath__top {
  -webkit-clip-path: polygon(100% 0, 0 0, 0 0%, 100% 0%);
  clip-path: polygon(100% 0, 0 0, 0 0%, 100% 0%);
}

.clippath__bottom {
  -webkit-clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%);
  clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%);
}

.shutters__enter {
  -webkit-transition: ease 0.6s;
  transition: ease 0.6s;

  -webkit-clip-path: polygon(
    20% 0%,
    20% 0%,
    20% 100%,
    40% 100%,
    40% 0%,
    40% 0%,
    40% 100%,
    60% 100%,
    60% 0%,
    60% 0%,
    60% 100%,
    80% 100%,
    80% 0%,
    80% 0%,
    80% 100%,
    100% 100%,
    100% 0%,
    100% 0%,
    100% 100%,
    20% 100%
  );
  clip-path: polygon(
    20% 0%,
    20% 0%,
    20% 100%,
    40% 100%,
    40% 0%,
    40% 0%,
    40% 100%,
    60% 100%,
    60% 0%,
    60% 0%,
    60% 100%,
    80% 100%,
    80% 0%,
    80% 0%,
    80% 100%,
    100% 100%,
    100% 0%,
    100% 0%,
    100% 100%,
    20% 100%
  );
}
.shutters__enter.active {
  -webkit-clip-path: polygon(
    0% 0%,
    20% 0%,
    20% 100%,
    20% 100%,
    20% 0%,
    40% 0%,
    40% 100%,
    40% 100%,
    40% 0%,
    60% 0%,
    60% 100%,
    60% 100%,
    60% 0%,
    80% 0%,
    80% 100%,
    80% 100%,
    80% 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
  clip-path: polygon(
    0% 0%,
    20% 0%,
    20% 100%,
    20% 100%,
    20% 0%,
    40% 0%,
    40% 100%,
    40% 100%,
    40% 0%,
    60% 0%,
    60% 100%,
    60% 100%,
    60% 0%,
    80% 0%,
    80% 100%,
    80% 100%,
    80% 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}

/* delay */
.delay-1 {
  -webkit-transition-delay: 100ms !important;
  transition-delay: 100ms !important;
  -webkit-animation-delay: 100ms !important;
  animation-delay: 100ms !important;
}

.delay-1c > * {
  -webkit-transition-delay: 100ms !important;
  transition-delay: 100ms !important;
  -webkit-animation-delay: 100ms !important;
  animation-delay: 100ms !important;
}

.delay-2 {
  -webkit-transition-delay: 200ms !important;
  transition-delay: 200ms !important;
  -webkit-animation-delay: 200ms !important;
  animation-delay: 200ms !important;
}

.delay-2c > * {
  -webkit-transition-delay: 200ms !important;
  transition-delay: 200ms !important;
  -webkit-animation-delay: 200ms !important;
  animation-delay: 200ms !important;
}

.delay-3 {
  -webkit-transition-delay: 300ms !important;
  transition-delay: 300ms !important;
  -webkit-animation-delay: 300ms !important;
  animation-delay: 300ms !important;
}

.delay-3c > * {
  -webkit-transition-delay: 300ms !important;
  transition-delay: 300ms !important;
  -webkit-animation-delay: 300ms !important;
  animation-delay: 300ms !important;
}

.delay-4 {
  -webkit-transition-delay: 400ms !important;
  transition-delay: 400ms !important;
  -webkit-animation-delay: 400ms !important;
  animation-delay: 400ms !important;
}

.delay-4c > * {
  -webkit-transition-delay: 400ms !important;
  transition-delay: 400ms !important;
  -webkit-animation-delay: 400ms !important;
  animation-delay: 400ms !important;
}

.delay-5 {
  -webkit-transition-delay: 500ms !important;
  transition-delay: 500ms !important;
  -webkit-animation-delay: 500ms !important;
  animation-delay: 500ms !important;
}

.delay-5c > * {
  -webkit-transition-delay: 500ms !important;
  transition-delay: 500ms !important;
  -webkit-animation-delay: 500ms !important;
  animation-delay: 500ms !important;
}

.delay-6 {
  -webkit-transition-delay: 600ms !important;
  transition-delay: 600ms !important;
  -webkit-animation-delay: 600ms !important;
  animation-delay: 600ms !important;
}

.delay-6c > * {
  -webkit-transition-delay: 600ms !important;
  transition-delay: 600ms !important;
  -webkit-animation-delay: 600ms !important;
  animation-delay: 600ms !important;
}

.delay-7 {
  -webkit-transition-delay: 700ms !important;
  transition-delay: 700ms !important;
  -webkit-animation-delay: 700ms !important;
  animation-delay: 700ms !important;
}

.delay-7c > * {
  -webkit-transition-delay: 700ms !important;
  transition-delay: 700ms !important;
  -webkit-animation-delay: 700ms !important;
  animation-delay: 700ms !important;
}

.delay-8 {
  -webkit-transition-delay: 800ms !important;
  transition-delay: 800ms !important;
  -webkit-animation-delay: 800ms !important;
  animation-delay: 800ms !important;
}

.delay-8c > * {
  -webkit-transition-delay: 800ms !important;
  transition-delay: 800ms !important;
  -webkit-animation-delay: 800ms !important;
  animation-delay: 800ms !important;
}

.delay-9 {
  -webkit-transition-delay: 900ms !important;
  transition-delay: 900ms !important;
  -webkit-animation-delay: 900ms !important;
  animation-delay: 900ms !important;
}

.delay-9c > * {
  -webkit-transition-delay: 900ms !important;
  transition-delay: 900ms !important;
  -webkit-animation-delay: 900ms !important;
  animation-delay: 900ms !important;
}

.delay-10 {
  -webkit-transition-delay: 1000ms !important;
  transition-delay: 1000ms !important;
  -webkit-animation-delay: 1000ms !important;
  animation-delay: 1000ms !important;
}

.delay-10c > * {
  -webkit-transition-delay: 1000ms !important;
  transition-delay: 1000ms !important;
  -webkit-animation-delay: 1000ms !important;
  animation-delay: 1000ms !important;
}

.delay-11 {
  -webkit-transition-delay: 1100ms !important;
  transition-delay: 1100ms !important;
  -webkit-animation-delay: 1100ms !important;
  animation-delay: 1100ms !important;
}

.delay-11c > * {
  -webkit-transition-delay: 1100ms !important;
  transition-delay: 1100ms !important;
  -webkit-animation-delay: 1100ms !important;
  animation-delay: 1100ms !important;
}

.delay-12 {
  -webkit-transition-delay: 1200ms !important;
  transition-delay: 1200ms !important;
  -webkit-animation-delay: 1200ms !important;
  animation-delay: 1200ms !important;
}

.delay-12c > * {
  -webkit-transition-delay: 1200ms !important;
  transition-delay: 1200ms !important;
  -webkit-animation-delay: 1200ms !important;
  animation-delay: 1200ms !important;
}

.delay-13 {
  -webkit-transition-delay: 1300ms !important;
  transition-delay: 1300ms !important;
  -webkit-animation-delay: 1300ms !important;
  animation-delay: 1300ms !important;
}

.delay-13c > * {
  -webkit-transition-delay: 1300ms !important;
  transition-delay: 1300ms !important;
  -webkit-animation-delay: 1300ms !important;
  animation-delay: 1300ms !important;
}

.delay-14 {
  -webkit-transition-delay: 1400ms !important;
  transition-delay: 1400ms !important;
  -webkit-animation-delay: 1400ms !important;
  animation-delay: 1400ms !important;
}

.delay-14c > * {
  -webkit-transition-delay: 1400ms !important;
  transition-delay: 1400ms !important;
  -webkit-animation-delay: 1400ms !important;
  animation-delay: 1400ms !important;
}

.delay-15 {
  -webkit-transition-delay: 1500ms !important;
  transition-delay: 1500ms !important;
  -webkit-animation-delay: 1500ms !important;
  animation-delay: 1500ms !important;
}

.delay-15c > * {
  -webkit-transition-delay: 1500ms !important;
  transition-delay: 1500ms !important;
  -webkit-animation-delay: 1500ms !important;
  animation-delay: 1500ms !important;
}

.delay-16 {
  -webkit-transition-delay: 1600ms !important;
  transition-delay: 1600ms !important;
  -webkit-animation-delay: 1600ms !important;
  animation-delay: 1600ms !important;
}

.delay-16c > * {
  -webkit-transition-delay: 1600ms !important;
  transition-delay: 1600ms !important;
  -webkit-animation-delay: 1600ms !important;
  animation-delay: 1600ms !important;
}

.delay-17 {
  -webkit-transition-delay: 1700ms !important;
  transition-delay: 1700ms !important;
  -webkit-animation-delay: 1700ms !important;
  animation-delay: 1700ms !important;
}

.delay-17c > * {
  -webkit-transition-delay: 1700ms !important;
  transition-delay: 1700ms !important;
  -webkit-animation-delay: 1700ms !important;
  animation-delay: 1700ms !important;
}

.delay-18 {
  -webkit-transition-delay: 1800ms !important;
  transition-delay: 1800ms !important;
  -webkit-animation-delay: 1800ms !important;
  animation-delay: 1800ms !important;
}

.delay-18c > * {
  -webkit-transition-delay: 1800ms !important;
  transition-delay: 1800ms !important;
  -webkit-animation-delay: 1800ms !important;
  animation-delay: 1800ms !important;
}

.delay-19 {
  -webkit-transition-delay: 1900ms !important;
  transition-delay: 1900ms !important;
  -webkit-animation-delay: 1900ms !important;
  animation-delay: 1900ms !important;
}

.delay-19c > * {
  -webkit-transition-delay: 1900ms !important;
  transition-delay: 1900ms !important;
  -webkit-animation-delay: 1900ms !important;
  animation-delay: 1900ms !important;
}

.delay-20 {
  -webkit-transition-delay: 2000ms !important;
  transition-delay: 2000ms !important;
  -webkit-animation-delay: 2000ms !important;
  animation-delay: 2000ms !important;
}

.delay-20c > * {
  -webkit-transition-delay: 2000ms !important;
  transition-delay: 2000ms !important;
  -webkit-animation-delay: 2000ms !important;
  animation-delay: 2000ms !important;
}