.site-footer {
    background: var(--color-background);
width: min(100% - 32px, var(--container));
    margin-inline: auto;
    height: 100%;

    display: grid;
    grid-template-rows: 3fr 1fr;
    /* 縦に2分割 */
    grid-template-columns: 2fr 3fr;
    /* 横2分割の下準備 */
}



.footer-left {
    grid-row: 1;
    /* 1行目 */
    grid-column: 1;
    /* 1列目 */


    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-left p{
    padding-left: 3rem;
}


.footer-right {
    display: flex;
    flex-direction: column;
    gap: 48px;
}


.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
}

.footer-nav>li a{
    color: var(--color-on-background);
}

.footer-nav>li a:hover {
    color: var(--color-primary);
}


.sns-info {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    width: 100%;
    height: 3rem;
}

.sns-info img {
    width: 32px;
    height: auto;
}


.legal-info {
    grid-column: 1 / -1;
    /* 1列目から最後まで */


    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

.privacy {
    font-size: smaller;
}



@media (max-width: 768px) {

    .site-footer {
            background: var(--color-background);
            padding: 2rem 0;
    
            display: grid;
            grid-template-rows: 1fr;
            /* 縦に2分割 */
            grid-template-columns: 1fr;
            
            gap: 24px;
        }
        
        
}