/*--------------アニメーション�@---------------*/
.text-split {
  overflow: hidden;
}
.text-split span {
  display: inline-block;
  min-width: 0.15em;
}
/*-----------------水道施設工事------------------*/
.block--2 .text-split span {
  transform: translateY(100%);
}
.block--2 .is-active .text-split span {
  transform: translateY(0);
  transition: transform cubic-bezier(0.7, 0.2, 0.1, 1) 0.8s;
}
.block--2 .is-active .text-split span:nth-child(1) {
  transition-delay: 0.5s;
}
.block--2 .is-active .text-split span:nth-child(2) {
  transition-delay: 0.58s;
}
.block--2 .is-active .text-split span:nth-child(3) {
  transition-delay: 0.66s;
}
.block--2 .is-active .text-split span:nth-child(4) {
  transition-delay: 0.74s;
}
.block--2 .is-active .text-split span:nth-child(5) {
  transition-delay: 0.82s;
}
.block--2 .is-active .text-split span:nth-child(6) {
  transition-delay: 0.9s;
}
.block--2 .is-active .text-split span:nth-child(7) {
  transition-delay: 0.98s;
}
.block--2 .is-active .text-split span:nth-child(8) {
  transition-delay: 1.06s;
}
.block--2 .is-active .text-split span:nth-child(9) {
  transition-delay: 1.14s;
}
.block--2 .is-active .text-split span:nth-child(10) {
  transition-delay: 1.22s;
}
.block--2 .is-active .text-split span:nth-child(11) {
  transition-delay: 1.3s;
}
.block--2 .is-active .text-split span:nth-child(12) {
  transition-delay: 1.38s;
}
.block--2 .is-active .text-split span:nth-child(13) {
  transition-delay: 1.46s;
}
.block--2 .is-active .text-split span:nth-child(14) {
  transition-delay: 1.54s;
}
.block--2 .is-active .text-split span:nth-child(15) {
  transition-delay: 1.60s;
}
/*---------------------人と水と--------------------*/

.block--1 .text-split span {
  transform: translateY(105%);
}
.block--1 .is-active .text-split span {
  transform: translateY(0);
  transition: transform cubic-bezier(0.7, 0.2, 0.1, 1) 1.2s;
}
.block--1 .is-active .text-split span:nth-child(1) {
  transition-delay: 3.5s;
}
.block--1 .is-active .text-split span:nth-child(2) {
  transition-delay: 3.58s;
}
.block--1 .is-active .text-split span:nth-child(3) {
  transition-delay: 3.66s;
}
.block--1 .is-active .text-split span:nth-child(4) {
  transition-delay: 3.74s;
}
.block--1 .is-active .text-split span:nth-child(5) {
  transition-delay: 3.82s;
}
.block--1 .is-active .text-split span:nth-child(6) {
  transition-delay: 3.9s;
}
.block--1 .is-active .text-split span:nth-child(7) {
  transition-delay: 3.98s;
}
.block--1 .is-active .text-split span:nth-child(8) {
  transition-delay: 4.06s;
}
.block--1 .is-active .text-split span:nth-child(9) {
  transition-delay: 4.14s;
}
/*.block--1 .is-active .text-split span:nth-child(10) {
  transition-delay: 4.22s;
}
.block--1 .is-active .text-split span:nth-child(11) {
  transition-delay: 4.3s;
}
.block--1 .is-active .text-split span:nth-child(12) {
  transition-delay: 4.38s;
}
.block--1 .is-active .text-split span:nth-child(13) {
  transition-delay: 4.46s;
}*/

/*--------------アニメーション�A---------------*/
/*---------------本文文字フェードイン--------------*/
/* 下からフェードイン */
.fadeInUp {
    opacity: 0;
    transform: translateY(200px);
}
/* 上からフェードイン */
.fadeInDown {
    opacity: 0;
    transform: translateY(-100px);
}
/* 右からフェードイン */
.fadeInLeft {
    opacity: 0;
    transform:  translate(-100px, 0);
}
/* 左からフェードイン */
.fadeInRight {
    opacity: 0;
    transform: translateX(100px);
}
/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
/* フェードインさせるクラス */
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/*--------動画前スクロールを促すアニメーション�B---------*/
/* スクロールダウンの位置 */
.scroll {
  position: fixed;
  right: 50%;
  bottom: 16%;
  writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #555;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/*----------タイトルアニメーション�C----------*/
  .animate {
    font-size: 40px;
    margin: 60px 0 20px;
line-height: 40px;/* 追加設定 */
    border-bottom: 2px solid #fff;
  }

  .animate span {
    display: inline-block;
    opacity: 0; /* 初期状態は透明 */
    transform: translate(200px, -100px) scale(2); /* 初期状態のトランスフォーム */
  }

  .animate span:nth-of-type(2) {
    animation-delay: .05s;
  }
  .animate span:nth-of-type(3) {
    animation-delay: .1s;
  }
  .animate span:nth-of-type(4) {
    animation-delay: .15s;
  }
  .animate span:nth-of-type(5) {
    animation-delay: .2s;
  }
  .animate span:nth-of-type(6) {
    animation-delay: .25s;
  }
  .animate span:nth-of-type(7) {
    animation-delay: .3s;
  }
  .animate span:nth-of-type(8) {
    animation-delay: .35s;
  }
  .animate span:nth-of-type(9) {
    animation-delay: .4s;
  }
  .animate span:nth-of-type(10) {
    animation-delay: .45s;
  }
  .animate span:nth-of-type(11) {
    animation-delay: .5s;
  }
  .animate span:nth-of-type(12) {
    animation-delay: .55s;
  }
  .animate span:nth-of-type(13) {
    animation-delay: .6s;
  }
  .animate span:nth-of-type(14) {
    animation-delay: .65s;
  }
  .animate span:nth-of-type(15) {
    animation-delay: .7s;
  }
  .animate span:nth-of-type(16) {
    animation-delay: .75s;
  }
  .animate span:nth-of-type(17) {
    animation-delay: .8s;
  }
  .animate span:nth-of-type(18) {
    animation-delay: .85s;
  }
  .animate span:nth-of-type(19) {
    animation-delay: .9s;
  }
  .animate span:nth-of-type(20) {
    animation-delay: .95s;
  }

  .two span {
    color: #a5cb21;
    color: #555555;
  }

  @keyframes ballDrop {
    60% {
      transform: translate(0, 20px) rotate(-180deg) scale(.5);
    }
    100% {
      transform: translate(0) rotate(0deg) scale(1);
      opacity: 1;
    }
  }

  .animated span {
    animation: ballDrop .3s forwards;
  }
/*----------画像切替アニメーション�D----------*/