@charset "utf-8";
/* ================================================ 
　　　　　　　　　　　　JS動き
================================================ */

/* フワ */

.fade01, .fade02, .fade03, .fade04 {
  opacity: 0;
}
.fade01 { transition: 1.5s all 0s ease; }
.fade02 { transition: 1.8s all 0.4s ease; }
.fade03 { transition: 1.8s all 0.7s ease; }
.fade04 { transition: 1.8s all 0.9s ease; }


.fade01.ac, .fade02.ac, .fade03.ac, .fade04.ac {
  opacity: 1;
}


/*左から右（Right方向） */
.move-r01, .move-r02, .move-r03, .move-r04 {
  opacity: 0;
  transform: translateX(-50px);
transition: opacity 1.3s ease;
}
.move-r01 { transition: 1.2s all 0s ease; }
.move-r02 { transition: 1.2s all 0.4s ease;}
.move-r03 { transition: 1.2s all 0.7s ease; }
.move-r04 { transition: 1.2s all 0.9s ease; }

.move-r01.ac, .move-r02.ac, .move-r03.ac, .move-r04.ac {
  opacity: 1;
  transform: translateX(0);
}




/* 1. 共通の初期状態（下から上に上がる基本設定を一括管理） */
.move-up01, .move-up02, .move-up03, .move-up04 {
  opacity: 0;
  transform: translateY(50px); /* 最初は下に50px下げておく */
  transition-property: all;
  transition-timing-function: ease;
}

/* 2. 個別の時間差（変化する時間: 1.2s は共通なので、遅延時間: delay だけを整理） */
.move-up01 { transition-duration: 1.2s; transition-delay: 0.2s; }
.move-up02 { transition-duration: 1.2s; transition-delay: 0.4s; }
.move-up03 { transition-duration: 1.2s; transition-delay: 0.8s; }
.move-up04 { transition-duration: 1.2s; transition-delay: 1.2s; }

/* 3. アニメーション後の状態（.acがついたとき） */
.move-up01.ac, .move-up02.ac, .move-up03.ac, .move-up04.ac {
  opacity: 1;
  transform: translateY(0); /* 元の高さ位置に戻る */
}