.js-fade,
.js-fade-up,
.js-fade-left,
.js-fade-right {
  opacity: 0;
  transition:
    opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js-fade-up {
  transform: translateY(25px);
}

.js-fade-left {
  transform: translateX(-25px);
}

.js-fade-right {
  transform: translateX(25px);
}

.is-show {
  opacity: 1;
  transform: translate(0, 0);
}

.js-delay-1 { transition-delay: 0.2s; }
.js-delay-2 { transition-delay: 0.4s; }
.js-delay-3 { transition-delay: 0.6s; }
.js-delay-4 { transition-delay: 0.8s; }

/* -----イラストが鈴のように揺れるアニメ------ */
.swing-on-show.is-show {
    animation: bell 1.5s ease-out;
}

@keyframes bell {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(3deg); }
    40%  { transform: rotate(-2.5deg); }
    60%  { transform: rotate(1.5deg); }
    80%  { transform: rotate(-0.8deg); }
    100% { transform: rotate(0deg); }
}