@charset "UTF-8";

.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

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

@keyframes fadeInDown {
0% {opacity: 0;transform: translateY(-3rem);}
100% {opacity: 1;transform: translateY(0);}
}

@keyframes fadeInLeft {
0% {opacity: 0;transform: translateX(-8rem);}
100% {opacity: 1;transform: translateX(0);}
}

@keyframes fadeInRight {
0% {opacity: 0;transform: translateX(8rem);}
100% {opacity: 1;transform: translateX(0);}
}

@keyframes fadeInUp {
0% {opacity: 0;transform: translateY(3rem);}
100% {opacity: 1;transform: translateY(0);}
}

@keyframes fadeInUp_s {
0% {opacity: 0;transform: translateY(1rem);}
100% {opacity: 1;transform: translateY(0);}
}

@keyframes scale_x_c {
0%{transform: scaleX(0);}
100% {transform: scaleX(1);}
}
@keyframes scale_x_l {
0%{transform: scaleX(0);transform-origin: left;}
100% {transform: scaleX(1);transform-origin: left;}
}
@keyframes scale_x_r {
0%{transform: scaleX(0);transform-origin: right;}
100% {transform: scaleX(1);transform-origin: right;}
}
@keyframes scale_y_t {
0%{transform: scaleY(0);transform-origin: top;}
100% {transform: scaleY(1);transform-origin: top;}
}
@keyframes scale_y_b {
0%{transform: scaleY(0);transform-origin: bottom;}
100% {transform: scaleY(1);transform-origin: bottom;}
}
@keyframes bokashi_img {
0%{filter: blur(8px) brightness(180%);transform: scale(1.07)}
100%{filter: blur(0) brightness(100%);transform: scale(1)}
}
@keyframes img_scale {
0%{transform: scale(1.07);opacity: 0;}
100%{transform: scale(1);opacity: 1;}
}

@keyframes width100 {
0%{opacity: 0;width: 0%;}
100% {opacity: 1;width: 100%;}
}

@keyframes height100 {
0%{opacity: 0;height: 0%;}
100% {opacity: 1;height: 100%;}
}

@keyframes chika {
0% {opacity: 1;}
50% {opacity: 0.9;}
100% {opacity: 1;}
}
/* スクロールのアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* ローディング */
@keyframes spCircRot {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}