/* Mask Animation */
.mask-bg {
    color: transparent;
    display: inline-block;
    overflow: hidden;
    position: relative;
    transition: color 0ms 450ms;
}

.mask-bg::after {
    background: #21AEB1;
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(0, 100%);
}

.mask-bg.is-animated {
    color: #21AEB1;
}

.mask-bg.is-animated::after {
    animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

/* Keyframe Animations */
@keyframes mask-bg {
    0% {
        transform: translate(0, 101%);
    }
    40%, 60% {
        transform: translate(0, 0%);
    }
    100% {
        transform: translate(0, -100%);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes bounceInUp {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px) scale(1.05);
    }
    80% {
        transform: translateY(5px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes floatInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-25px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(25px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes expandFromCenter {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes fadeInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateY(0);
    }
}

@keyframes bounceSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    60% {
        opacity: 1;
        transform: translateY(-8px);
    }
    80% {
        transform: translateY(3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpFromBottom {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUpFromBottomFaq {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 白丸の上下アニメーション */
@keyframes floatSmall {
    0%, 100% {
        transform: translateY(-50%) translateY(0px);
    }
    50% {
        transform: translateY(-50%) translateY(-6px);
    }
}

@keyframes floatMedium {
    0%, 100% {
        box-shadow: 
            50px 0 0 7.5px rgba(255, 255, 255, 0.75),
            105px 0 0 15px rgba(255, 255, 255, 1);
    }
    50% {
        box-shadow: 
            50px -8px 0 7.5px rgba(255, 255, 255, 0.75),
            105px 0 0 15px rgba(255, 255, 255, 1);
    }
}

@keyframes floatLarge {
    0%, 100% {
        box-shadow: 
            50px 0 0 7.5px rgba(255, 255, 255, 0.75),
            105px 0 0 15px rgba(255, 255, 255, 1);
    }
    50% {
        box-shadow: 
            50px 0 0 7.5px rgba(255, 255, 255, 0.75),
            105px -10px 0 15px rgba(255, 255, 255, 1);
    }
}

@keyframes floatSmallRight {
    0%, 100% {
        transform: translateY(-50%) translateY(0px);
    }
    50% {
        transform: translateY(-50%) translateY(-6px);
    }
}

@keyframes floatMediumRight {
    0%, 100% {
        box-shadow: 
            -50px 0 0 7.5px rgba(255, 255, 255, 0.75),
            -105px 0 0 15px rgba(255, 255, 255, 1);
    }
    50% {
        box-shadow: 
            -50px -8px 0 7.5px rgba(255, 255, 255, 0.75),
            -105px 0 0 15px rgba(255, 255, 255, 1);
    }
}

@keyframes floatLargeRight {
    0%, 100% {
        box-shadow: 
            -50px 0 0 7.5px rgba(255, 255, 255, 0.75),
            -105px 0 0 15px rgba(255, 255, 255, 1);
    }
    50% {
        box-shadow: 
            -50px 0 0 7.5px rgba(255, 255, 255, 0.75),
            -105px -10px 0 15px rgba(255, 255, 255, 1);
    }
}

@keyframes ripple {
    0% {box-shadow: 0 0 0 0 rgba(255, 139, 39, 0.6);}
    70% {box-shadow: 0 0 0 20px rgba(255, 139, 39, 0);}
    100% {box-shadow: 0 0 0 0 rgba(255, 139, 39, 0);}
}

/* ボタンリップルアニメーション */
.cta-button.ripple-active {
    animation: ripple 0.8s ease-out infinite;
}

/* 既存の影を保持しながらリップルを追加 */
.cta-main-button.ripple-active {
    animation: ripple-with-shadow 0.8s ease-out infinite;
}


@keyframes ripple-with-shadow {
    0% {box-shadow: 0 4px 15px rgba(255, 139, 39, 0.3), 0 0 0 0 rgba(255, 139, 39, 0.6);}
    70% {box-shadow: 0 4px 15px rgba(255, 139, 39, 0.3), 0 0 0 20px rgba(255, 139, 39, 0);}
    100% {box-shadow: 0 4px 15px rgba(255, 139, 39, 0.3), 0 0 0 0 rgba(255, 139, 39, 0);}
}