/*-----------------------------------------------------
アニメーション
-----------------------------------------------------*/
.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;
  &.fadein-left {
    transform: translate(-100px, 0);
  }
  &.fadein-right {
    transform: translate(100px, 0);
  }
  &.fadein-up {
    transform: translate(0, -100px);
  }
  &.fadein-bottom {
    transform: translate(0, 100px);
  }
  &.scrollin {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}
/*共通・要素をキラリ*/
.reflection {
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.reflection::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 2s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
@-webkit-keyframes reflect {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}