/* ===============================================
   Footer Styles - PC & SP
   =============================================== */

/* -----------------------------------------------
   Footer Common
   ----------------------------------------------- */
.footer {
    background-color: #272e27;
    width: 100%;
}

.footer_logo {
    width: calc(100vw * 143 / 1400);
    height: calc(100vw * 55 / 1400);
    position: relative;
}

.footer_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* -----------------------------------------------
   Footer PC
   ----------------------------------------------- */
.footer .footer_inner.pc {
    padding: calc(100vw * 60 / 1400) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100vw * 40 / 1400);
}

.footer .footer_inner.pc .footer_content {
    width: calc(100vw * 1200 / 1400);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer .footer_inner.pc .footer_left {
    display: flex;
    flex-direction: column;
    gap: calc(100vw * 40 / 1400);
}

.footer .footer_inner.pc .footer_logo {
    width: calc(100vw * 250 / 1400);
    height: calc(100vw * 61 / 1400);
}

.footer .footer_inner.pc .footer_social {
    display: flex;
    gap: calc(100vw * 32 / 1400);
    align-items: center;
}

.footer .footer_inner.pc .footer_social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100vw * 24 / 1400);
    height: calc(100vw * 24 / 1400);
    transition: opacity 0.3s ease;
}

.footer .footer_inner.pc .footer_social a:hover {
    opacity: 0.7;
}

.footer .footer_inner.pc .footer_social svg {
    width: 100%;
    height: 100%;
}

.footer .footer_inner.pc .footer_right {
    display: flex;
    gap: calc(100vw * 40 / 1400);
    align-items: flex-start;
}

.footer .footer_inner.pc .footer_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(100vw * 24 / 1400) calc(100vw * 32 / 1400);
    width: calc(100vw * 304 / 1400);
}

.footer .footer_inner.pc .footer_nav li {
    width: calc(100vw * 80 / 1400);
}

.footer .footer_inner.pc .footer_nav a {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: calc(100vw * 20 / 1400);
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.02em;
    line-height: normal;
    transition: opacity 0.3s ease;
}

.footer .footer_inner.pc .footer_nav a:hover {
    opacity: 0.7;
}

.footer .footer_inner.pc .footer_contact_btn {
    width: calc(100vw * 218 / 1400);
    height: calc(100vw * 60 / 1400);
    background-color: #bf9443;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * 16 / 1400);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.footer .footer_inner.pc .footer_contact_btn:hover {
    background-color: #a67f38;
}

.footer .footer_inner.pc .footer_contact_btn span {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: calc(100vw * 20 / 1400);
    color: #ffffff;
    letter-spacing: 0.02em;
}

.footer .footer_inner.pc .footer_contact_btn svg {
    width: calc(100vw * 6.749 / 1400);
    height: calc(100vw * 13.499 / 1400);
}

.footer .footer_inner.pc .footer_copyright {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: calc(100vw * 12 / 1400);
    color: #ffffff;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 0;
}

/* -----------------------------------------------
   Footer SP
   ----------------------------------------------- */
@media (max-width: 768px) {
    .footer .footer_inner.sp {
        padding: calc(100vw * 40 / 375);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer .footer_inner.sp .footer_content {
        width: calc(100vw * 295 / 375);
        display: flex;
        flex-direction: column;
        gap: calc(100vw * 80 / 375);
        align-items: center;
    }

    .footer .footer_inner.sp .footer_logo {
        width: calc(100vw * 300 / 375);
        height: calc(100vw * 80 / 375);
        margin: 0 auto;
    }

    .footer .footer_inner.sp .footer_social {
        display: flex;
        gap: calc(100vw * 40 / 375);
        align-items: center;
        justify-content: center;
        margin-top: calc(100vw * 40 / 375);
    }

    .footer .footer_inner.sp .footer_social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100vw * 28.8 / 375);
        height: calc(100vw * 28.8 / 375);
        transition: opacity 0.3s ease;
    }

    .footer .footer_inner.sp .footer_social a:hover {
        opacity: 0.7;
    }

    .footer .footer_inner.sp .footer_social svg {
        width: 100%;
        height: 100%;
    }

    .footer .footer_inner.sp .footer_nav {
        width: 100%;
    }

    .footer .footer_inner.sp .footer_nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: calc(100vw * 20 / 375) calc(100vw * 20 / 375);
        justify-content: start;
    }

    .footer .footer_inner.sp .footer_nav li {
        width: calc(100vw * 80 / 375);
    }

    .footer .footer_inner.sp .footer_nav a {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        font-size: calc(100vw * 18 / 375);
        color: #ffffff;
        text-decoration: none;
        letter-spacing: 0.02em;
        line-height: normal;
        transition: opacity 0.3s ease;
    }

    .footer .footer_inner.sp .footer_nav a:hover {
        opacity: 0.7;
    }

    .footer .footer_inner.sp .footer_contact_btn {
        width: calc(100vw * 200 / 375);
        height: calc(100vw * 50 / 375);
        background-color: #bf9443;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * 16 / 375);
        text-decoration: none;
        transition: background-color 0.3s ease;
        margin-top: calc(100vw * 40 / 375);
    }

    .footer .footer_inner.sp .footer_contact_btn:hover {
        background-color: #a67f38;
    }

    .footer .footer_inner.sp .footer_contact_btn span {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        font-size: calc(100vw * 18 / 375);
        color: #ffffff;
        letter-spacing: 0.02em;
    }

    .footer .footer_inner.sp .footer_contact_btn svg {
        width: calc(100vw * 4.749 / 375);
        height: calc(100vw * 9.499 / 375);
    }

    .footer .footer_inner.sp .footer_copyright {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        font-size: calc(100vw * 11 / 375);
        color: #ffffff;
        letter-spacing: 0.02em;
        text-align: center;
        margin: 0;
        margin-top: calc(100vw * 120 / 375);
        width: 100%;
    }
}