.fadein{
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  opacity: 0;
}
.fadein.active{
  opacity: 1;
}
.blur_fadein {
  text-align: center;
  color: transparent;
}
.blur_fadein.active {
  animation: blurFadeIn .6s ease-in forwards;
}
@keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: #000 1px 0px 20px;
  }
  50% {
    opacity: 0.5;
    text-shadow: #000 1px 0px 10px;
  }
  100% {
    opacity: 1;
    text-shadow: #000 0px 0px 0px;
  }
}

.fadein_bottom{
  -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
}
.fadein_bottom.active{
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.fadein_left{
  -webkit-transition: all .7s linear;
  -o-transition: all .7s linear;
  transition: all .7s linear;
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  transform: translateX(-30px);
  opacity: 0;
}
.fadein_left.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
.fadein_right{
  -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transform: translateX(30px);
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
  opacity: 0;
}
.fadein_right.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.change-border01 {
  display: inline-block;
  position: relative;
  padding: .7rem;
}
.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
  background-color: #20C93C;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}
/* 左上へ配置 */
.change-border01::after {
    width: 0px;
    height: 1px;
    top: -1px;
    left: -1px;
}
/* 右下へ配置 */
.change-border01::before {
    width: 0px;
    height: 1px;
    right: -1px;
    bottom: -1px;
}
/* 左下へ配置 */
.change-border01__inner::after {
    width: 1px;
    height: 0px;
    left: -1px;
    bottom: -1px;
}
/* 右上へ配置 */
.change-border01__inner::before {
    width: 1px;
    height: 0px;
    top: -1px;
    right: -1px;
}

.change-border01.active.change-border01::after,
.change-border01.active.change-border01::before {
  width: 100%;
  width: calc(100% + 1px);
}
.change-border01.active > .change-border01__inner::after,
.change-border01.active > .change-border01__inner::before {
  height: 100%;
  height: calc(100% + 1px);
}