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

/* フワ */

.fade01, .fade02, .fade03, .fade04 {
  opacity: 0;
}
.fade01 { transition: 1.5s all 0.2s ease; }
.fade02 { transition: 1.5s all 0.4s ease; }
.fade03 { transition: 1.5s all 0.7s ease; }
.fade04 { transition: 1.5s 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);
}

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

.move-l01.ac, .move-l02.ac, .move-l03.ac, .move-l04.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); /* 元の高さ位置に戻る */
}



.blur{
    opacity: 0;
    filter: blur(8px);
    transition: 2s all 0s ease;
}
.blur.ac{
    opacity: 1;
    filter: blur(0);
}


/**********************************************
 カバー用アニメーション
**********************************************/
.cover_a, .cover_b, .cover_c, .cover_d {
  opacity: 0;
}
.img-animation_a {
  animation: img-opacity-a 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
	animation-delay: inherit;
}
.img-animation_a::before {
  animation: img-animation-left 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #eb0009;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
	animation-delay: inherit;
}
.img-animation_b {
  animation: img-opacity-b 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}
.img-animation_b::before {
  animation: img-animation-left 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #eb0009;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.img-animation_c {
  animation: img-opacity-c 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}

.img-animation_c::before {
  animation: img-animation-left 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #eb0009;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.img-animation_d {
  animation: img-opacity-d 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}
.img-animation_d::before {
  animation: img-animation-left 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #eb0009;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.img-animation_a,
.img-animation_a::before,
.img-animation_b,
.img-animation_b::before,
.img-animation_c,
.img-animation_c::before,
.img-animation_d,
.img-animation_d::before {
  animation-delay: var(--delay, 0s);
}

@keyframes img-opacity-left {100% {opacity: 1;}}
@keyframes img-opacity-right {100% {opacity: 1;}}
@keyframes img-opacity-a {100% {opacity: 1;}}
@keyframes img-opacity-b {100% {opacity: 1;}}
@keyframes img-opacity-c {100% {opacity: 1;}}
@keyframes img-opacity-d {100% {opacity: 1;}}
@keyframes img-animation-left {100% {transform: translateX(100%);}}
@keyframes img-animation-right {100% {transform: translateX(-100%);}}