/* =========================================
   アニメーションの初期状態（非表示）
========================================= */
.contents__list-num,
.contents__list-title-box,
.contents__body {
    opacity: 0;
    transform: translateX(-30px); /* 左に30pxずらしておく */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.contents__list-bg {
    opacity: 0;
    transition: opacity .6s ease; /* 「ふわっと」させるため少し長めに設定 */
}

/* =========================================
   アニメーション発火時（画面に入った状態）
========================================= */
/* 1番目：番号 */
.contents__list-item.is-active .contents__list-num {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

/* 2番目：タイトルボックス */
.contents__list-item.is-active .contents__list-title-box {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s; /* 0.2秒遅らせる */
}

/* 3番目：本文 */
.contents__list-item.is-active .contents__body {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s; /* 0.4秒遅らせる */
}

/* 4番目：背景画像（ふわっと） */
.contents__list-item.is-active .contents__list-bg {
    opacity: 1;
    transition-delay: 0.8s; /* 0.6秒遅らせる */
}