/* ==========================================================================
   トップページ UI改善 — アニメーション＆インタラクション
   ========================================================================== */

/* --- FV センターサークル 呼吸アニメーション --- */
.fv__court-center-circle {
    animation: courtBreathe 4s ease-in-out infinite;
}

@keyframes courtBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.6; }
}

/* --- FV バッジ改善 — 背景付きで視認性UP --- */
.fv__badge {
    background: rgba(0, 184, 86, 0.12);
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(0, 184, 86, 0.2);
    transition: background var(--transition), border-color var(--transition);
}

.fv__badge:hover {
    background: rgba(0, 184, 86, 0.22);
    border-color: rgba(0, 184, 86, 0.4);
}

/* --- FV キャッチコピー アクセント文字にグロー --- */
.fv__catch-accent {
    text-shadow: 0 0 30px rgba(0, 184, 86, 0.4), 0 0 60px rgba(0, 184, 86, 0.15);
}

/* --- About ポイントカード ホバーリフト --- */
.about__point {
    transition: transform var(--transition), background var(--transition);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.about__point:hover {
    transform: translateX(6px);
    background: var(--color-bg);
}

/* --- Reason ナンバー — ホバーで色付き --- */
.reason__card:hover .reason__number {
    color: var(--color-green);
    transition: color 0.4s ease;
}

/* --- Reason 目玉カード ボーダーアクセント --- */
.reason__card--featured {
    border-left: 3px solid var(--color-green);
}

/* --- キャンペーンバナー シマーエフェクト --- */
.plan__campaign {
    position: relative;
    overflow: hidden;
}

.plan__campaign::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: campaignShimmer 3s ease-in-out infinite;
}

@keyframes campaignShimmer {
    0% { left: -50%; }
    100% { left: 150%; }
}

/* --- おすすめプラン サブトルグロー --- */
.plan__card--popular {
    border-top: 3px solid var(--color-green);
}

.plan__card--popular .plan__badge {
    animation: badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 184, 86, 0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(0, 184, 86, 0.15); }
}

/* --- CTA中間 コート装飾フロートアニメーション --- */
.cta-mid::before {
    animation: ctaFloat 6s ease-in-out infinite;
}

@keyframes ctaFloat {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-55%) scale(1.05); }
}

/* --- 制作の流れ タイムラインマーカー ホバー --- */
.flow__step-number {
    transition: background var(--transition), transform var(--transition);
}

.flow__step:hover .flow__step-number {
    background: var(--color-green);
    transform: scale(1.1);
}

/* --- FAQ クエスチョン アクティブ時の左ボーダー --- */
.faq__item.is-open .faq__question {
    padding-left: 1rem;
    border-left: 2px solid var(--color-green);
}

.faq__question {
    transition: color var(--transition), padding-left 0.3s ease, border-left 0.3s ease;
    border-left: 2px solid transparent;
}

/* --- Contact LINE導線 パルスグロー --- */
.contact__line {
    transition: border-color var(--transition), box-shadow var(--transition);
}

.contact__line:hover {
    border-color: rgba(6, 199, 85, 0.4);
    box-shadow: 0 0 24px rgba(6, 199, 85, 0.12);
}

/* LINEアイコン パルス */
.contact__line-icon {
    animation: lineIconPulse 3s ease-in-out infinite;
}

@keyframes lineIconPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(6, 199, 85, 0); }
}

/* --- Plan カードホバー効果 --- */
.plan__card {
    transition: background var(--transition), transform var(--transition);
}

.plan__card:not(.plan__card--popular):hover {
    background: var(--color-bg);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(27, 42, 74, 0.08);
}

/* --- セクションラベル — ホバーアンダーライン --- */
.section__label {
    position: relative;
    transition: color var(--transition);
}

.section__label::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-green);
    transition: width 0.4s ease;
}

.section:hover .section__label::after {
    width: 100%;
}

/* --- スクロールヒント ホバー効果 --- */
.fv__scroll-hint {
    transition: color var(--transition);
    cursor: pointer;
}

.fv__scroll-hint:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* 404 */
.error-404 {
    text-align: center;
    padding: 4rem 0;
}