/*スライドイン*/
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
  }
  
  .slide-in-fv-001 {
    animation: slideIn 1s ease-out forwards;
  }


  @keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 初期状態（非表示＆下にズレる） */
.effect-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 表示時に適用されるクラス */
.effect-section.visible {
    animation: fadeInUp 1s ease-out forwards;
}

/*----------

fadeInFigures

-----------*/
@keyframes fadeInFigures {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInFigures01 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 初期状態（非表示 & ちょっと下にズレる） */
.about{
    .figure-01, .figure-02, .figure-03 {
        opacity: 0;
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    /* `.figure-01` の transform: translateX(-50%) を維持したまま適用 */
    .figure-01 {
        transform: translateX(-50%) translateY(30px); /* 初期位置 */
    }
    
    /* `.figure-01` のアニメーション */
    .figure-01.visible {
        animation: fadeInFigures01 0.8s ease-out forwards;
    }
    
    /* `.figure-02` と `.figure-03` は `translateY` だけ適用（X軸はそのまま） */
    .figure-02, .figure-03 {
        transform: translateY(30px); /* 初期位置 */
    }
    
    .figure-02.visible {
        animation: fadeInFigures 0.8s ease-out 0.3s forwards;
    }
    
    .figure-03.visible {
        animation: fadeInFigures 0.8s ease-out 0.6s forwards;
    } 
}


/*----------

Scroll SlideInLeft

----------*/

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 初期状態（非表示 & 左に50pxズレる） */
.slide-in {
    opacity: 0;
    transform: translateX(-250px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* 表示時のクラス */
.slide-in.visible {
    animation: slideInLeft 0.4s ease-out forwards;
}