/* 1行目から44行目まではヒーローセクションの文字、
女性の画像や商品画像のアニメーションを行なっている */

/* アニメーションを遅延させる */
.hero_text {
    animation: blur_fadeIn 1s ease-out forwards;
    opacity: 0; /* 最初は非表示 */
}

.woman_image {
    animation: fade_in_from_bottom 1s ease-out forwards; 
    animation-delay: 0.5s;
    opacity: 0; /* 最初は非表示 */
}

.featured_product_image {
    animation: slide_in_from_left  1s ease-out forwards;
    animation-delay: 1s;
    opacity: 0;
}

/* 文字のぼかしフェードアニメーション */
@keyframes blur_fadeIn {
    from {
        opacity: 0;
        filter: blur(8px); /* 初期状態でぼかしを適用 */
    }
    to {
        opacity: 1;
        filter: blur(0); /* 最終状態でぼかしを解除 */
    }
}

/* 女性の画像が下から上にふわっと出現するアニメーション */
@keyframes fade_in_from_bottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から右にスライドしながらふわっと出現するアニメーション */
@keyframes slide_in_from_left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* スクロールするたびにその要素がふわっとしたから上にフェードインで出現するアニメーション
main.jsで制御している*/
/* スクロールでフェードインするためのCSS */
.fade_in_on_scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade_in_on_scroll.fade_in {
    opacity: 1;
    transform: translateY(0);
}