* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    background-color: #f5f5f5;
}

.container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    background-color: white;
}

.lp-image {
    width: 100%;
    height: auto;
    display: block;
}

/* LINE登録ボタンの共通スタイル */
.line-button {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    max-width: 100%;
    animation: extremeMotion 2s ease-in-out infinite;
}
.line-button:hover {
    transform: translateX(-50%) scale(1.15);
    filter: brightness(1.2);
    animation-play-state: paused;
}

.line-button:active {
    transform: translateX(-50%) scale(1.05);
    filter: brightness(0.9);
}

/* 激しいモーション：浮遊＋脈打ち＋回転＋左右振動＋光る効果 */
@keyframes extremeMotion {
    0% {
        transform: translateX(-50%) translateY(0px) rotate(0deg) translateX(0px) scale(1);
        filter: drop-shadow(0 8px 20px rgba(0, 195, 0, 0.4)) brightness(1);
        box-shadow: 0 0 10px rgba(0, 195, 0, 0.3), 0 0 20px rgba(0, 195, 0, 0.2);
    }
    12.5% {
        transform: translateX(-50%) translateY(-15px) rotate(2deg) translateX(5px) scale(1.08);
        filter: drop-shadow(0 15px 30px rgba(0, 195, 0, 0.6)) brightness(1.1);
        box-shadow: 0 0 15px rgba(0, 195, 0, 0.4), 0 0 30px rgba(0, 195, 0, 0.3);
    }
    25% {
        transform: translateX(-50%) translateY(-25px) rotate(0deg) translateX(0px) scale(1.12);
        filter: drop-shadow(0 20px 40px rgba(0, 195, 0, 0.8)) brightness(1.15);
        box-shadow: 0 0 20px rgba(0, 195, 0, 0.5), 0 0 40px rgba(0, 195, 0, 0.4);
    }
    37.5% {
        transform: translateX(-50%) translateY(-15px) rotate(-2deg) translateX(-5px) scale(1.08);
        filter: drop-shadow(0 15px 30px rgba(0, 195, 0, 0.6)) brightness(1.1);
        box-shadow: 0 0 15px rgba(0, 195, 0, 0.4), 0 0 30px rgba(0, 195, 0, 0.3);
    }
    50% {
        transform: translateX(-50%) translateY(-30px) rotate(0deg) translateX(0px) scale(1.15);
        filter: drop-shadow(0 25px 50px rgba(0, 195, 0, 1)) brightness(1.2);
        box-shadow: 0 0 25px rgba(0, 195, 0, 0.6), 0 0 50px rgba(0, 195, 0, 0.5), 0 0 75px rgba(0, 195, 0, 0.3);
    }
    62.5% {
        transform: translateX(-50%) translateY(-15px) rotate(2deg) translateX(5px) scale(1.08);
        filter: drop-shadow(0 15px 30px rgba(0, 195, 0, 0.6)) brightness(1.1);
        box-shadow: 0 0 15px rgba(0, 195, 0, 0.4), 0 0 30px rgba(0, 195, 0, 0.3);
    }
    75% {
        transform: translateX(-50%) translateY(-25px) rotate(0deg) translateX(0px) scale(1.12);
        filter: drop-shadow(0 20px 40px rgba(0, 195, 0, 0.8)) brightness(1.15);
        box-shadow: 0 0 20px rgba(0, 195, 0, 0.5), 0 0 40px rgba(0, 195, 0, 0.4);
    }
    87.5% {
        transform: translateX(-50%) translateY(-15px) rotate(-2deg) translateX(-5px) scale(1.08);
        filter: drop-shadow(0 15px 30px rgba(0, 195, 0, 0.6)) brightness(1.1);
        box-shadow: 0 0 15px rgba(0, 195, 0, 0.4), 0 0 30px rgba(0, 195, 0, 0.3);
    }
    100% {
        transform: translateX(-50%) translateY(0px) rotate(0deg) translateX(0px) scale(1);
        filter: drop-shadow(0 8px 20px rgba(0, 195, 0, 0.4)) brightness(1);
        box-shadow: 0 0 10px rgba(0, 195, 0, 0.3), 0 0 20px rgba(0, 195, 0, 0.2);
    }
}

/* 各ボタンの個別配置 */
/* 1つ目のボタン（上部） */
.line-button-1 {
    top: 26%;
    left: 50%;
    width: 390px;
    height: auto;
    animation-delay: 0s;
}

/* 2つ目のボタン（中部） */
.line-button-2 {
    top: 59%;
    left: 50%;
    width: 390px;
    height: auto;
    animation-delay: 0.3s;
}

/* 3つ目のボタン（下部1） */
.line-button-3 {
    top: 93%;
    left: 50%;
    width: 390px;
    height: auto;
    animation-delay: 0.6s;
}

/* スマートフォン対応 */
@media (max-width: 768px) {
    .line-button {
        width: 325px;
        animation: extremeMotionMobile 2.5s ease-in-out infinite;
    }
    
    /* スマホでも激しいアニメーション */
    @keyframes extremeMotionMobile {
        0% {
            transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
            filter: drop-shadow(0 6px 15px rgba(0, 195, 0, 0.4)) brightness(1);
        }
        20% {
            transform: translateX(-50%) translateY(-12px) rotate(1.5deg) scale(1.06);
            filter: drop-shadow(0 12px 25px rgba(0, 195, 0, 0.6)) brightness(1.1);
        }
        40% {
            transform: translateX(-50%) translateY(-18px) rotate(0deg) scale(1.1);
            filter: drop-shadow(0 15px 35px rgba(0, 195, 0, 0.8)) brightness(1.15);
        }
        60% {
            transform: translateX(-50%) translateY(-12px) rotate(-1.5deg) scale(1.06);
            filter: drop-shadow(0 12px 25px rgba(0, 195, 0, 0.6)) brightness(1.1);
        }
        80% {
            transform: translateX(-50%) translateY(-20px) rotate(0deg) scale(1.12);
            filter: drop-shadow(0 18px 40px rgba(0, 195, 0, 0.9)) brightness(1.2);
        }
        100% {
            transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
            filter: drop-shadow(0 6px 15px rgba(0, 195, 0, 0.4)) brightness(1);
        }
    }
}