@charset "utf-8";
/* =========================================
   NEWバッジ（お知らせ等）のデザイン
========================================= */
.new-badge {
    position: absolute;
    color: #e60000;
    font-size: 1.3rem;
    font-weight: 900;
    font-family: 'Zen Maru Gothic', sans-serif;
    letter-spacing: 0.05em;
    z-index: 10;
    pointer-events: none;
    transform: rotate(-5deg);
    animation: bounceNew 2s infinite;
}

@keyframes bounceNew {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(-5deg); }
    40% { transform: translateY(-4px) rotate(-5deg); }
    60% { transform: translateY(-2px) rotate(-5deg); }
}

.new-badge {
    top: 15px;
    left: 20px;
    font-size: 1.3rem!important;}

@media (min-width: 769px) {
    .lower-header-wrapper .new-badge {
        font-size: 1rem !important; 
        top: 5px;
        left: 5px;
    }
}

@media (min-width: 769px) {
    .nav-item .new-badge {
        top: 5px;
        left: 5px;
        margin-left: 5px;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    a[href="news.html"],
    a[href="./news.html"],
    a[href="/nasvachan/news.html"] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    a[href*="news.html"] img {
        order: 2 !important;
        margin-right: 15px !important;
        margin-left: 10px !important;
    }

    a[href*="news.html"] .btn-text,
    a[href*="news.html"] span:not(.new-badge):not(.nav-icon) {
        order: 3 !important;
        position: static !important;
    }

    .nav-item .new-badge {
        position: static !important; 
        order: 1 !important;
        font-size: 0.9rem !important;
        margin-top: 0 !important;
        margin-left: 20px;
        transform: rotate(-5deg);
        animation: bounceNew 2s infinite;
    }

}

@keyframes bounceNewHorizontal {
    0%, 20%, 50%, 80%, 100% { transform: translateX(0); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(2px); }
}