.fade-in-container {
    position: relative;
}

.fade-in-item {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: relative;
}

.fade-in-item.active {
    opacity: 1;
}

.fade-in-left {
    transform: translateX(-20%); /* 左からの移動 */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.fade-in-left.active {
    transform: translateX(0); /* 元の位置に戻す */
}

.fade-in-right {
    transform: translateX(20%); /* 右からの移動 */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.fade-in-right.active {
    transform: translateX(0px); /* 元の位置に戻す */
}

.fade-in-botoom {
    transform: translateY(-5%); /* 下からの移動 */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.fade-in-bottom.active {
    transform: translateY(0); /* 元の位置に戻す */
}

.fade-in-text {
    position: absolute;
    bottom: 0; /* 下からの距離 */
    left: 0; /* 左からの距離 */
    width: 400px; /* 固定幅 */
    height: 50px; /* 固定高さ */
    background: #000000; /* 背景色 */
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    display: flex; /* Flexboxを使用 */
    align-items: center; /* 垂直方向のセンタリング */
    justify-content: center; /* 水平方向のセンタリング */
    overflow: hidden; /* はみ出したテキストを隠す */
    text-overflow: ellipsis; /* はみ出したテキストを省略記号で表示 */
    white-space: nowrap; /* テキストを1行にする */
    font-size: 2rem;
    opacity: 0;
    transition: opacity 1s ease-in-out 0.5s; /* 遅延を追加 */
}

.fade-in-text.right {
    position: absolute;
    bottom: 20px; /* 下からの距離 */
    left: 240px; /* 左からの距離 */
}

.fade-in-text.left {
    position: absolute;
    bottom: 20px; /* 下からの距離 */
    left: -30px; /* 左からの距離 */
}

.fade-in-item.active .fade-in-text {
    opacity: 1;
}

/* 画像のスタイル */
.fade-in-item img {
    width: 600px; /* 指定サイズ */
    height: 360px; /* 指定サイズ */
    object-fit: cover; /* 画像を指定サイズに合わせて切り抜く */
}