:root {
    --footer-logo-width: clamp(140px, 30vw, 192px);
    --footer-info-max-width: 560px;
    --footer-contact-width: 325px;
    --footer-total-height: calc(var(--footer-top-height) + var(--footer-bottom-height));
    --footer-top-height: 240px;
    --footer-bottom-height: 78px;
    --footer-line-color: #4e4e4e;

    --footer-company-info-item-last-child-gap: 20px;
}
#footer {
    & {
        /* background-color: var(--color-main-black); */
        background-color: var(--color-board-02);
        color: var(--color-main-white);

        & .inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            & .footer-top {
                & {
                    display: grid;
                    grid-template-columns: 
                        var(--footer-logo-width)
                        auto 
                        var(--footer-contact-width)
                    ;
                    width: 100%;
                    height: var(--footer-top-height);
                    padding-top: var(--mobile-content-vertical-gap-sm);

                    & .footer-info {
                        & {
                            display: flex;
                            flex-direction: column;
                            gap: 20px;
                            max-width: var(--footer-info-max-width);
                            margin: 0 auto;

                            & .policy-list {
                                display: flex;
                                align-items: center;
                                gap: clamp(15px, 3.508vw, 40px);
                                font-size: var(--font-size-18);
                                font-weight: var(--font-weight-bold);
                            }

                            & .footer-company-info {
                                & {
                                    display: flex;
                                    flex-direction: column;
                                    gap: clamp(5px, 2.34375vw, 15px);
                                    font-size: var(--font-size-16);
                                    color: var(--color-footer-01);
                                }
                                & .footer-company-info-item:last-child {
                                    display: flex;
                                    align-items: center;
                                    gap: var(--footer-company-info-item-last-child-gap);
                                }
                                & .info-item-group {
                                    display: flex;
                                    align-items: center;
                                    gap: 5px;
                                }
                                & .info-item-group:first-child {position: relative;}
                                & .info-item-group:first-child::after {
                                    position: absolute;
                                    right: calc(var(--footer-company-info-item-last-child-gap) / -2);
                                    width: 1px;
                                    height: 80%;
                                    /* background-color: var(--footer-line-color); */
                                    background-color: var(--color-board-04);
                                    content: '';
                                }
                                @media screen and (max-width: 640px) {
                                    & {font-size: var(--font-size-13);}
                                }
                            }
                        }
                        @media screen and (max-width: 1140px) {
                            & {
                                order: 3;
                                align-items: center;
                            }
                        }
                        @media screen and (max-width: 640px) {
                            & .policy-list {font-size: var(--font-size-13);}
                        }
                    }

                    & .footer-contact {
                        & {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            gap: clamp(10px, 3.125vw, 20px);

                            & .footer-sns-list {
                                & {
                                    display: flex;
                                    align-items: center;
                                    gap: 15px;

                                    & a {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 32px;
                                        aspect-ratio: 1/1;
                                        border-radius: 50%;
                                        background-color: var(--color-footer-03);
                                    }
                                }
                            }
                        }

                        & h2 {font-size: var(--font-size-18);}
                        & a.footer-business-phone {
                            font-size: var(--font-footer-business-phone-size);
                            font-weight: var(--font-weight-bold);
                            color: var(--color-main-05);
                        }
                        @media screen and (max-width: 1140px) {
                            & {
                                align-items: center;
                            }
                        }
                    }

                }
                @media screen and (max-width: 1140px) {
                    & {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: clamp(30px, 3.508vw, 40px);
                        height: auto;
                        padding: var(--mobile-content-vertical-gap-sm) 0;
            
                        & .footer-logo {
                            width: var(--footer-logo-width);
            
                            & img {width: 100%;}
                        }
                    }
                }
            }


            & .footer-bottom {
                & {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    height: var(--footer-bottom-height);
                    margin-bottom: var(--simple-reservation-height);
                    border-top: 1px solid var(--color-footer-02);
                    font-size: var(--font-size-14);
                    color: var(--color-footer-01);
                }
                @media screen and (max-width: 640px) {
                    & {
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        gap: clamp(10px, 3.125vw, 20px);
                        height: auto;
                        padding: var(--content-inner-padding) 0;
                        font-size: var(--font-size-13);
                    }
                }
            }
        }
    }
}