.is-anime.mask {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.is-anime.mask.active {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

.is-anime.mask.slow {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
}

.is-anime.fade {
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.is-anime.fade.active {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}



/* 基本のフェードインとスライドアップ効果 */
.slide-up-fade-in {
    opacity: 0;
    transform: translateY(200px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* アクティブ状態：最終的な表示状態 */
.slide-up-fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

/* スローアニメーション効果 */
.slide-up-fade-in.slow {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* クイックアニメーション効果 */
.slide-up-fade-in.fast {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}