/*----------------------------------------------------------------------------------

フッター

----------------------------------------------------------------------------------*/

#footer {
    color: var(--color-primary);
    padding: var(--spacing-3xl) 0 var(--spacing-7xl);
    background: var(--color-secondary);
}

#footer .container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

#footer .logo {
    width: 200px;
}

#footer .footer-nav {
    display: grid;
    gap: var(--spacing-xl);
}

#footer .nav-item h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
}

#footer .nav-item h3 a {
    color: var(--color-primary);
    transition: color 0.3s ease;
}

#footer .nav-item h3 a:hover {
    color: var(--color-accent);
}

#footer .nav-item {
    width: fit-content;
}

#footer .nav-item ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-left: var(--spacing-xs);
}

#footer .nav-item a {
    font-size: var(--font-size-sm);
    transition: color 0.3s ease;
}

#footer .nav-item a:hover {
    color: var(--color-accent);
}

#footer .footer-link {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-primary-30);
}

#footer .footer-link ul {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

#footer .footer-link a {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    transition: color 0.3s ease;
}

#footer .footer-link a:hover {
    color: var(--color-accent);
}

/* 外部リンクアイコンのスタイル */
#footer .footer-link .icon-external-link {
    width: 12px;
    height: 12px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

#footer .footer-link a:hover .icon-external-link {
    opacity: 1;
}

#footer .footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-primary-30);
}

@media screen and (min-width: 768px) {
    #footer .footer-nav {
        grid-template-columns: repeat(2, 1fr);
        justify-content: space-between;
    }

    #footer .logo {
        width: 280px;
    }
}

@media screen and (min-width: 1440px) {
    #footer .container {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    #footer .footer-nav {
        grid-template-columns: repeat(4, 1fr);
    }
}