#box1 {
  opacity: 0;
  transition: opacity 3s ease-out;
}

#box1.fade-in {
  opacity: 1;
}
#box2 {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#box2.slide-in {
  opacity: 1;
  transform: translateX(0);
}

#box3 {
  opacity: 0;
  transform: translateX(-100px); /* 左から出てくる */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#box3.slide-in {
  opacity: 1;
  transform: translateX(0);
}

#box4 {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: 1s; /* 1秒遅らせる */
}

#box4.slide-in {
  opacity: 1;
  transform: translateX(0);
}
#f1,
#f2 {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 2s ease-out, transform 3s ease-out;
}

#f1.wipe-in,
#f2.wipe-in {
  opacity: 1;
  transform: translateY(0);
}

#c_kumiko {
  opacity: 0;
  transition: opacity 1s ease-out;
}

#c_kumiko.fade-in {
  opacity: 1;
}