/* === プロ品質 花フェードイン実装 === */

/* PC用花設定 (mobile-c.png使用) */
@media (min-width: 769px) {
    .hero::before {
        content: "";
        position: absolute;
        bottom: 50px;
        left: 50px;
        width: 120px;
        height: 120px;
        background: url('top-image/mobile-c.png') no-repeat left bottom;
        background-size: 900px 450px;
        opacity: 0;
        z-index: 15;
        pointer-events: none;
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
        animation: flowerFadeInPC 5.5s ease-out forwards;
        animation-delay: 1.2s;
    }

    .hero::after {
        content: "";
        position: absolute;
        bottom: 50px;
        right: 50px;
        width: 120px;
        height: 120px;
        background: url('top-image/mobile-c.png') no-repeat right bottom;
        background-size: 900px 450px;
        opacity: 0;
        z-index: 15;
        pointer-events: none;
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
        animation: flowerFadeInPC 5.5s ease-out forwards;
        animation-delay: 1.8s;
    }
}



/* モバイル用花設定 (mobile-c.png使用) - ボタン両サイド固定版 */
@media (max-width: 768px) {
    .hero::before {
        content: "";
        position: absolute;
        bottom: 100px;
        left: 20px;
        width: 60px;
        height: 60px;
        background: url('top-image/mobile-c.png') no-repeat left bottom;
        background-size: 500px 250px;
        opacity: 0;
        z-index: 15;
        pointer-events: none;
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
        animation: flowerFadeInMobile 5.5s ease-out forwards;
        animation-delay: 1.3s;
    }

    .hero::after {
        content: "";
        position: absolute;
        bottom: 100px;
        right: 20px;
        width: 60px;
        height: 60px;
        background: url('top-image/mobile-c.png') no-repeat right bottom;
        background-size: 500px 250px;
        opacity: 0;
        z-index: 15;
        pointer-events: none;
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
        animation: flowerFadeInMobile 5.5s ease-out forwards;
        animation-delay: 1.7s;
    }
}

/* PC用プロ品質アニメーション */
@keyframes flowerFadeInPC {

    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.4) rotate(-15deg);
    }

    30% {
        opacity: 0.4;
        transform: translateY(22px) scale(0.7) rotate(-8deg);
    }
    70% {
        opacity: 0.8;
        transform: translateY(6px) scale(0.95) rotate(3deg);
    }
    100% {
        opacity: 0.95;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* モバイル用プロ品質アニメーション */
@keyframes flowerFadeInMobile {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.5) rotate(-12deg);
    }
    35% {
        opacity: 0.4;
        transform: translateY(15px) scale(0.75) rotate(-6deg);
    }
    75% {
        opacity: 0.8;
        transform: translateY(3px) scale(0.95) rotate(2deg);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}