/* --------------------
    Animation
-------------------- */
/* フェードイン */
.fadeInUp{
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadeInUp.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* フェードイン */
.fadeIn{
    opacity: 0;
    transition: opacity 0.5s;
}

.fadeIn.show {
    opacity: 1;
}

/* 下からスライド - clip-path */
.slideUp{
    overflow: hidden;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); /* 完全に隠れる状態 */
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); /* 完全に隠れる状態 */
    transition: -webkit-clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1), clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1); /* アニメーション設定 */
    will-change: clip-path; /* パフォーマンス最適化 */
}

.slideUp.show{
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 全体を表示 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 全体を表示 */
}

/* 下からスライド　- transform */
.slide02_wrapper{
    overflow: hidden;
}

.slideUp02 {
    opacity: 0; /* 初期状態で非表示 */
    transform: translateY(50px); /* 下にオフセット */
    transition: transform 0.8s ease, opacity 0.8s ease; /* アニメーションの設定 */
}

.slideUp02.show {
    opacity: 1; /* 表示状態 */
    transform: translateY(0); /* 元の位置に移動 */
}

/* ぼかし */
.blur{
    opacity: 0;
    filter: blur(20px);
    transition: filter 0.8s ease, opacity 0.8s ease;
}

.blur.show{
    opacity: 1; /* 表示状態 */
    filter: blur(0); /* ぼかしを解除 */
}


/* --------------------
    Animation delay
-------------------- */

.delay200{
    transition-delay: 0.2s;
}

.delay300{
    transition-delay: 0.3s;
}

.delay400{
    transition-delay: 0.4s;
}

.delay500{
    transition-delay: 0.5s;
}

.delay600{
    transition-delay: 0.6s;
}

.delay700{
    transition-delay: 0.7s;
}

.delay800{
    transition-delay: 0.8s;
}