/* ----- Scroll action ----- */
.effect-action {
  opacity: 0;
  transition: all 1.5s 0.5s;
}

.effect-action.effect_scroll {
  opacity: 1;
}

/* ----- Scroll slide_left ----- */
.effect-slide_left {
  opacity: 0;
  transform: translatex(-200px);
  transition: all 1.5s 0.5s;
}

.effect-slide_left.effect_scroll {
  opacity: 1;
  transform: translatex(0);
}

/* ----- Scroll slide_right ----- */
.effect-slide_right {
  opacity: 0;
  transform: translatex(200px);
  transition: all 1.5s 0.5s;
}

.effect-slide_right.effect_scroll {
  transform: translatex(0);
  opacity: 1;
}

/* ----- Scroll fade_up ----- */
.effect-fade_up {
  opacity: 0;
  transform: translatey(40px);
  transition: all 1.0s 0.3s;
}

.effect-fade_up.effect_scroll {
  opacity: 1;
  transform: translatey(0);
}

/* ----- Scroll fade_down ----- */
.effect-fade_down {
  opacity: 0;
  transform: translatey(-100px);
  transition: all 1.5s 0.5s;
}

.effect-fade_down.effect_scroll {
  opacity: 1;
  transform: translatey(0);
}

/* ----- Scroll windmil ----- */
.effect-windmil {
  transform: rotate(0deg);
  transition: all 1.5s 0.5s;
}

.effect-windmil.effect_scroll {
  transform: rotate(360deg);
}

/* ----- Scroll small ----- */
.effect-small {
  /* 親要素に overflow: hidden; 付ける */
  transform: scale(1.2, 1.2);
  transition: all 1.5s 0.5s;
}

.effect-small.effect_scroll {
  opacity: 1;
  transform: scale(1, 1);
}

/* ----- Scroll large ----- */
.effect-large {
  /* 親要素に overflow: hidden; 付ける */
  opacity: 0;
  transform: scale(0.7, 0.7);
  transition: all 1.2s 1s;
}

.effect-large.effect_scroll {
  opacity: 1;
  transform: scale(1, 1);
}