/* * Responsive Styles
 * -------------------------------------------------- */
@media (max-width: 960px) {
    .hero-title {
        font-size: 3.5rem;
        margin-left: 0;
        padding-left: 20px;
    }

    .hero-subtitle {
        font-size: 1.2rem;
        padding-left: 20px;
        text-align: left;
    }

    .hero-container {
        padding-left: 0;
    }

    .hero-background {
        background-image: url('./images/hero_bg_sp.png');
        width: 150%;
        height: 150%;
    }

    .hero-background-layer {
        background: linear-gradient(
            90deg,
            rgba(249, 248, 246, 0.95) 0%,
            rgba(249, 248, 246, 0.5) 30%,
            rgba(249, 248, 246, 0.25) 60%,
            rgba(249, 248, 246, 0.05) 100%
        );
    }
    
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .header-inner {
        padding-left: 0;
        padding-right: 0;
    }

    .nav-list, 
    .header-cta { 
        display: none; 
    }

    .mobile-menu-btn { 
        display: flex;
        position: relative;
        z-index: 9999;
    }

    .site-header {
        padding-left: 0;
        padding-right: 0;
    }

    .blob { 
        opacity: var(--opacity-disabled); 
    }

    .hero-clouds,
    .hero-sparkles {
        opacity: var(--opacity-disabled);
    }

    .philosophy-grid, 
    .business-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .philosophy-visual { 
        order: 2; 
    }

    .visual-wrapper, 
    .business-visual .visual-wrapper {
        height: 300px;
        border-radius: 24px;
    }
    
    .philosophy-content, 
    .business-content {
        padding: 0;
        text-align: center;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .deco-line {
        margin: 0 auto 30px;
    }

    .company-cards {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .company-card:nth-child(3),
    .company-card:nth-child(4) {
        grid-column: 1;
    }

    .company-card {
        padding: 36px 28px;
    }

    .company-card-title {
        font-size: 0.8rem;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .company-card-content {
        font-size: 1.05rem;
        font-weight: 700;
    }

    .company-card-content.long-text {
        font-size: 0.95rem;
        font-weight: 700;
    }

    .company-btn-wrapper {
        margin-top: 50px;
    }

    .company-shape {
        opacity: 0.05;
        filter: blur(20px);
    }

    .company-bg-image {
        height: 100%;
        opacity: 0.3;
    }

    .contact-card {
        padding: 40px 30px;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact-title-wrapper {
        text-align: center;
    }

    .contact-title-wrapper .section-title {
        font-size: 2rem;
    }

    .contact-content {
        text-align: center;
        margin-bottom: 0;
    }

    .contact-card-btn-wrapper {
        justify-content: center;
    }

    .contact-btn {
        padding: 0.7rem 1.8rem;
        font-size: 0.95rem;
    }

    .contact-gear {
        width: 70%;
        opacity: 0.7;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto;
    }

    .footer-nav {
        align-items: center;
    }

    .footer-nav-title {
        text-align: center;
    }

    .footer-nav-list {
        align-items: center;
    }

    .footer-cta {
        align-items: center;
    }

    .footer-cta-text {
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-company-info {
        text-align: center;
    }
}