@charset "UTF-8";
.border::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2vw;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), to(#a2d5e6));
  background: linear-gradient(transparent 60%, #a2d5e6);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: border_anim 0.8s linear forwards;
          animation: border_anim 0.8s linear forwards;
}

@-webkit-keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.fadeUp {
  -webkit-animation: fadeUpAnime 0.8s forwards;
          animation: fadeUpAnime 0.8s forwards;
  /* fadeUpAnimeを0.8秒で一回実行 */
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    /* 初めは見えないようにしておく */
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    /* 50px下に動かしておく */
  }
  to {
    opacity: 1;
    /* 可視化する */
    visibility: visible;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    /* 元の位置に戻す */
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    /* 初めは見えないようにしておく */
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    /* 50px下に動かしておく */
  }
  to {
    opacity: 1;
    /* 可視化する */
    visibility: visible;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    /* 元の位置に戻す */
  }
}

/* fadeLeft */
.fadeLeft {
  -webkit-animation: fadeLeftAnime 0.8s forwards;
          animation: fadeLeftAnime 0.8s forwards;
  /* fadeLeftAnimeを0.8秒で一回実行 */
  opacity: 0;
  overflow: hidden;
  visibility: visible;
}

@-webkit-keyframes fadeLeftAnime {
  from {
    opacity: 0;
    /* 初めは見えないようにしておく */
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
    /* 100px右に動かしておく */
  }
  to {
    opacity: 1;
    /* 可視化する */
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /* 元の位置に戻す */
    visibility: visible;
  }
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    /* 初めは見えないようにしておく */
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
    /* 100px右に動かしておく */
  }
  to {
    opacity: 1;
    /* 可視化する */
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /* 元の位置に戻す */
    visibility: visible;
  }
}

/* fadeRight */
.fadeRight {
  -webkit-animation: fadeRightAnime 0.8s forwards;
          animation: fadeRightAnime 0.8s forwards;
  /* fadeRightAnimeを0.8秒で一回実行 */
  opacity: 0;
  overflow: hidden;
  visibility: visible;
}

@-webkit-keyframes fadeRightAnime {
  from {
    opacity: 0;
    /* 初めは見えないようにしておく */
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
    /* 100px左に動かしておく */
  }
  to {
    opacity: 1;
    /* 可視化する */
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /* 元の位置に戻す */
    visibility: visible;
  }
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    /* 初めは見えないようにしておく */
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
    /* 100px左に動かしておく */
  }
  to {
    opacity: 1;
    /* 可視化する */
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /* 元の位置に戻す */
    visibility: visible;
  }
}