/* ============================================================
   「お気軽にご相談ください！」アニメーション
   ============================================================ */

.service-title-single-line {
    display: block;
    color: var(--white);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    width: 100%;
}

/* スライドインアニメーション（1回だけ） */
.animate-slide-in {
    animation: messagePopIn 0.8s ease-out forwards;
}

/* メッセージ風ポップインアニメーション */
@keyframes messagePopIn {
    0% {
        transform: scale(0.5) translateY(-30px);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* 黄色のハイライト（1文字ずつウェーブ表示） */
.highlight-orange-wave {
    color: #F7E55C;
    display: inline-block;
    text-shadow: 
        0 0 20px rgba(247, 229, 92, 0.8),
        0 0 40px rgba(247, 229, 92, 0.6),
        0 4px 20px rgba(0, 0, 0, 0.6);
}

.highlight-orange-wave span {
    display: inline-block;
    opacity: 0;
    animation: charWave 0.6s ease-out forwards;
}

/* 1文字ずつウェーブ表示アニメーション */
@keyframes charWave {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    50% {
        transform: translateY(-10px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 黄色のハイライト（表示時のみ光る） - 旧スタイル */
.highlight-orange-pulse {
    color: #F7E55C;
    display: inline-block;
    animation: yellowFlash 0.8s ease-out forwards;
    text-shadow: 
        0 0 20px rgba(247, 229, 92, 0.8),
        0 0 40px rgba(247, 229, 92, 0.6),
        0 4px 20px rgba(0, 0, 0, 0.6);
}

/* 黄色フラッシュアニメーション（1回だけ） */
@keyframes yellowFlash {
    0% {
        text-shadow: 
            0 0 0px rgba(247, 229, 92, 0),
            0 0 0px rgba(247, 229, 92, 0),
            0 4px 20px rgba(0, 0, 0, 0.6);
    }
    50% {
        text-shadow: 
            0 0 40px rgba(247, 229, 92, 1),
            0 0 80px rgba(247, 229, 92, 0.8),
            0 0 120px rgba(247, 229, 92, 0.6),
            0 4px 20px rgba(0, 0, 0, 0.6);
    }
    100% {
        text-shadow: 
            0 0 20px rgba(247, 229, 92, 0.8),
            0 0 40px rgba(247, 229, 92, 0.6),
            0 4px 20px rgba(0, 0, 0, 0.6);
    }
}

/* モバイル用改行 */
.mobile-break {
    display: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .mobile-break {
        display: inline;
    }
    
    .service-title-single-line {
        font-size: 22px;
        line-height: 1.8;
        white-space: normal;
        padding: 0 20px;
        text-align: center;
    }
    
    .highlight-orange-pulse {
        display: inline;
    }
}

@media (max-width: 480px) {
    .service-title-single-line {
        font-size: 20px;
        line-height: 1.8;
        white-space: normal;
        padding: 0 15px;
        text-align: center;
    }
}