.common_anime_slide {
  transition: opacity 1s ease, transform 1s ease;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  opacity: 0;
}
.common_anime_slide.add {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.common_anime_fade {
  transition: opacity 1s ease;
  opacity: 0;
}
.common_anime_fade.add {
  opacity: 1;
}

.headerBasic,
.navi_wrap {
  transition: top 0.5s ease, box-shadow 0.5s ease;
}
.navi_wrap {
  position: fixed;
  top: 80px;
}
.navi_wrap.add {
  top: 0;
}

@media screen and (min-width: 640px) {
  .headerBasic.add {
    top: -80px;
    box-shadow: 0 0 0 transparent;
  }
}
@media screen and (max-width: 640px) {
  .nav_button {
    position: absolute;
    z-index: 15;
    top: 3%;
    right: 3%;
    width: 14%;
  }
  .navi_wrap_sp.add .nav_button {
    position: fixed;
    top: 3%;
  }
}

.nav_button.active .open {
  display: none;
}
.nav_button .close {
  display: none;
}
.nav_button.active .close {
  display: block;
}

.navi_sp {
  transition: transform 0.5s ease;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.navi_sp.active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.main_anime01 {
  -webkit-animation: mainAnime_slide 1s ease 0.5s forwards;
  animation: mainAnime_slide 1s ease 0.5s forwards;
  opacity: 0;
}
.main_anime02 {
  -webkit-animation: mainAnime_slide 1s ease 1s forwards;
  animation: mainAnime_slide 1s ease 1s forwards;
  opacity: 0;
}
.main_anime03 {
  -webkit-animation: mainAnime_navi 1s ease 1.5s forwards;
  animation: mainAnime_navi 1s ease 1.5s forwards;
  opacity: 0;
}
.main_anime04 {
  -webkit-animation: mainAnime_navi 1s ease 2s forwards;
  animation: mainAnime_navi 1s ease 2s forwards;
  opacity: 0;
}
@-webkit-keyframes mainAnime_slide {
  0% {
    -webkit-transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes mainAnime_navi {
  0% {
    -webkit-transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}
@keyframes mainAnime_slide {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes mainAnime_navi {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.feeling_anime_txt01 {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 0;
  filter: blur(1px);
}
.feeling_anime_txt02,
.feeling_anime_txt03 {
  opacity: 0;
}
.feeling_txt.add .feeling_anime_txt01 {
  -webkit-animation: feelingAnime_blur 1s ease 0s forwards;
  animation: feelingAnime_blur 1s ease 0s forwards;
}
.feeling_txt.add .feeling_anime_txt02 {
  -webkit-animation: feelingAnime_fade 1s ease 0.5s forwards;
  animation: feelingAnime_fade 1s ease 0.5s forwards;
}
.feeling_txt.add .feeling_anime_txt03 {
  -webkit-animation: feelingAnime_fade 1s ease 1s forwards;
  animation: feelingAnime_fade 1s ease 1s forwards;
}
@-webkit-keyframes feelingAnime_blur {
  0% {
    -webkit-transform: scale(1.05);
    opacity: 0;
    filter: blur(1px);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
@-webkit-keyframes feelingAnime_fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes feelingAnime_blur {
  0% {
    transform: scale(1.05);
    opacity: 0;
    filter: blur(1px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes feelingAnime_fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.feeling_txt .open {
  display: none;
}
.feeling_txt .close {
  display: block;
}
.feeling_txt.active .open {
  display: block;
}
.feeling_txt.active .close {
  display: none;
}

.step_anime01,
.step_anime02,
.step_anime03,
.step_anime04 {
  opacity: 0;
}
.step_pic.add .step_anime01 {
  -webkit-animation: stepAnime_fade 1s ease 1s forwards;
  animation: stepAnime_fade 1s ease 1s forwards;
}
.step_pic.add .step_anime02 {
  -webkit-animation: stepAnime_fade 1s ease 1.2s forwards;
  animation: stepAnime_fade 1s ease 1.2s forwards;
}
.step_pic.add .step_anime03 {
  -webkit-animation: stepAnime_fade 1s ease 1.4s forwards;
  animation: stepAnime_fade 1s ease 1.4s forwards;
}
.step_pic.add .step_anime04 {
  -webkit-animation: stepAnime_fade 1s ease 1.6s forwards;
  animation: stepAnime_fade 1s ease 1.6s forwards;
}
@keyframes stepAnime_fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.secret_anime_right {
  transition: opacity 1s ease, transform 1s ease;
  -webkit-transform: translateX(80px);
  transform: translateX(80px);
  opacity: 0;
}
.secret_anime_left {
  transition: opacity 1s ease, transform 1s ease;
  -webkit-transform: translateX(-80px);
  transform: translateX(-80px);
  opacity: 0;
}
.secret_anime_right.add,
.secret_anime_left.add {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}