/* Simple Mobile Pricing Display */
@media (max-width: 768px) {
    /* Create simple mobile price cards using pure CSS */
    #pricing .container::after {
        content: '';
        display: block;
        clear: both;
    }
    
    /* Add mobile-only price display */
    #pricing .container::before {
        content: '';
        display: block;
        background: #f8f8f8;
        padding: 20px 15px;
        margin: 20px 0;
        border-radius: 10px;
    }
    
    /* Override table display on mobile */
    #pricing table {
        display: none !important;
    }
    
    #pricing .overflow-x-auto {
        display: none !important;
    }
    
    #pricing .mb-16 > h3 {
        display: none !important;
    }
    
    /* Create a simple mobile price display */
    .mobile-simple-pricing {
        display: block !important;
        padding: 1rem;
    }
    
    .mobile-price-category {
        margin-bottom: 2rem;
    }
    
    .mobile-price-category h3 {
        font-size: 1.25rem;
        font-weight: 700;
        color: #2c2c2c;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #a08879;
    }
    
    .mobile-price-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .mobile-price-item {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .mobile-price-item h4 {
        font-size: 1rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .mobile-price-item .detail {
        font-size: 0.875rem;
        color: #6b7280;
        margin-bottom: 0.75rem;
    }
    
    .mobile-price-item .prices {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding-top: 0.75rem;
        border-top: 1px solid #f3f4f6;
    }
    
    .mobile-price-item .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .mobile-price-item .price-label {
        font-size: 0.75rem;
        color: #6b7280;
    }
    
    .mobile-price-item .price-value {
        font-weight: 600;
    }
    
    .mobile-price-item .price-value.normal {
        color: #9ca3af;
        text-decoration: line-through;
        font-size: 0.875rem;
    }
    
    .mobile-price-item .price-value.special {
        color: #a08879;
        font-size: 1.25rem;
        font-weight: 700;
    }
    
    /* 初回価格の行を強調（:has()を使わない方法） */
    .special-price-row {
        background-color: #fef2e5;
        padding: 0.5rem;
        margin: 0 -0.5rem;
        border-radius: 4px;
        position: relative;
    }
    
    /* 初回限定バッジ */
    .first-time-badge {
        display: inline-block;
        background-color: #a08879;
        color: white;
        font-size: 0.625rem;
        font-weight: 700;
        padding: 0.125rem 0.5rem;
        border-radius: 4px;
        margin-left: 0.5rem;
        vertical-align: middle;
    }
    
    .mobile-price-item .price-value.campaign {
        color: #dc2626;
        font-size: 1.125rem;
    }
    
    .campaign-badge {
        display: inline-block;
        background: #ef4444;
        color: white;
        font-size: 0.625rem;
        padding: 0.125rem 0.5rem;
        border-radius: 4px;
        margin-left: 0.5rem;
    }
}

/* Desktop: hide mobile pricing */
@media (min-width: 769px) {
    .mobile-simple-pricing {
        display: none !important;
    }
}