@charset "UTF-8";

/**************************************************/
/* アニメーション */
/**************************************************/
/* 最初に表示される要素用 */
.anime-up {
    animation: up 0.8s ease-in-out;
}
.anime-up-timing02 {
    animation: up02 0.8s ease-in-out;
}
@keyframes up {
  0% {
      transform: translateY(30px);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1.0;
  }
}
@keyframes up02 {
  0% {
      transform: translateY(30px);
      opacity: 0;
  } 
  50% {
      transform: translateY(30px);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1.0;
  }
}

/* スクロールで表示される要素用 */
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}


.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .3s;}
.timing04 {transition-delay: .4s;}
.timing05 {transition-delay: .5s;}
.timing06 {transition-delay: .6s;}


/* 光る */
.anime-kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.anime-kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -50px;
  left: 0;
  width: 10px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
  animation: kiran 10s linear infinite;
}

@keyframes kiran {
  20% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  21% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  22% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  23% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  24% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}