@charset "UTF-8";
/******************/
/* FadeIn */
/******************/
body {
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/******************/
/* 画像スライド */
/******************/
.s_animate .a_slide_img {
  position: relative;
  overflow: hidden;
}

.s_animate .a_slide_img:before {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #fbfbf2;
}

.s_animate.a_active .a_slide_img:before {
  animation: slide_img 1s linear 0s 1 normal;
  animation-fill-mode: forwards;
}

@keyframes slide_img {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(100%);
  }
}

/******************/
/* 下からふわっと（通常） */
/******************/
.a_fade_up.s_animate {
  opacity: 0;
  transform: translateY(50px);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.a_fade_up.s_animate.a_active {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 767px) {
  .a_fade_up.s_animate {
    opacity: 1;
    transform: translateY(0);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }
}

/******************/
/* 下からふわっと（時間差） */
/******************/
.a_list_balloon.s_animate {
  opacity: 0;
}

@keyframes fade_balloon {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

li:first-child .a_list_balloon.s_animate.a_active,
.a_list_balloon.s_animate.a_active:first-child {
  animation: fade_balloon .4s ease-in-out .2s 1 normal forwards;
}

li:nth-child(2) .a_list_balloon.s_animate.a_active,
.a_list_balloon.s_animate.a_active:nth-child(2) {
  animation: fade_balloon .4s ease-in-out .4s 1 normal forwards;
}

li:nth-child(3) .a_list_balloon.s_animate.a_active,
.a_list_balloon.s_animate.a_active:nth-child(3) {
  animation: fade_balloon .4s ease-in-out .6s 1 normal forwards;
}

li:nth-child(4) .a_list_balloon.s_animate.a_active,
.a_list_balloon.s_animate.a_active:nth-child(4) {
  animation: fade_balloon .4s ease-in-out .8s 1 normal forwards;
}

li:nth-child(5) .a_list_balloon.s_animate.a_active,
.a_list_balloon.s_animate.a_active:nth-child(5) {
  animation: fade_balloon .4s ease-in-out .2s 1 normal forwards;
}

li:nth-child(6) .a_list_balloon.s_animate.a_active,
.a_list_balloon.s_animate.a_active:nth-child(6) {
  animation: fade_balloon .4s ease-in-out .4s 1 normal forwards;
}

li:nth-child(7) .a_list_balloon.s_animate.a_active,
.a_list_balloon.s_animate.a_active:nth-child(7) {
  animation: fade_balloon .4s ease-in-out .6s 1 normal forwards;
}

li:nth-child(8) .a_list_balloon.s_animate.a_active,
.a_list_balloon.s_animate.a_active:nth-child(8) {
  animation: fade_balloon .4s ease-in-out .8s 1 normal forwards;
}

@media screen and (max-width: 767px) {
  .a_list_balloon.s_animate {
    opacity: 1;
  }
  .a_list_balloon.s_animate.a_active {
    animation: none !important;
  }
}

.side_scroll_list li:first-child .a_list_balloon.s_animate.a_active,
.side_scroll_list .a_list_balloon.s_animate.a_active:first-child {
  animation: fade_balloon .4s ease-in-out .2s 1 normal forwards;
}

.side_scroll_list li:nth-child(2) .a_list_balloon.s_animate.a_active,
.side_scroll_list .a_list_balloon.s_animate.a_active:nth-child(2) {
  animation: fade_balloon .4s ease-in-out .4s 1 normal forwards;
}

.side_scroll_list li:nth-child(3) .a_list_balloon.s_animate.a_active,
.side_scroll_list .a_list_balloon.s_animate.a_active:nth-child(3) {
  animation: fade_balloon .4s ease-in-out .2s 1 normal forwards;
}

.side_scroll_list li:nth-child(4) .a_list_balloon.s_animate.a_active,
.side_scroll_list .a_list_balloon.s_animate.a_active:nth-child(4) {
  animation: fade_balloon .4s ease-in-out .4s 1 normal forwards;
}