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

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

/* box2: box1の3s＋0.5s後に開始 → delay: 3.5s */
#box2 {
  opacity: 0;
  transform: translateX(120px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  transition-delay: 1s;
}

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

/* box3: box2の1s＋0.5s後 → delay: 5s */
#box3 {
  opacity: 0;
  transform: translateX(-120px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  transition-delay: 1.5s;
}

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

/* box4: box3の1s＋0.5s後 → delay: 6.5s */
#box4 {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: 2s;
}

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

#f1,
#f2 {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 3s ease-out, transform 3s ease-out;
  transition-delay: 3s; /* 2秒遅らせる */

}

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

#c_kumiko {
  opacity: 0;
  transition: opacity 2s ease-out;
  transition-delay: 2s; /* 2秒遅らせる */

}

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