.footer {
    color: var(--color-white);
    background-color: var(--color-medium-brown-2);
}

.footer-inner {
    width: 92%;
    max-width: 1200px;
    padding: 2.5rem 0;
    margin: 0 auto;

    @media (width >= 768px){
        padding: 7.5rem 0;
    }
}

.footer-catch-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.5rem;;

    .footer-catch-logo-text-image {
        width: 100px;
        height: auto;

        @media (width >= 768px){
            width: 135px;
        }
    }

    .footer-catch-container-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;

        @media (width >= 768px){
            margin-top: 1.25rem;
        }

        .en-label {
            font-size: 1rem;
        }

        .ja-label {
            font-size: var(--text-ja-18);

            @media (width >= 768px) {
                font-size: var(--text-ja-24);
            }
        }
    }
}

.footer-nav {
    display: grid;
    grid-template-columns: 1fr;

    @media (width >= 768px){
        grid-template-rows: repeat(5,1fr);
        grid-template-columns: 66.7% auto auto;
    }
}

.footer-sns-list {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;

    @media (width >= 768px){
        grid-row: 1;
        grid-column:  1;
        justify-content: flex-start;
    }
}

.footer-sns-list-item {
    width: 48px;
    height: auto;

    @media (width >= 768px){
        width: 56px;
    }

    img {
        width: 100%;
        height: auto;
    }
}

.footer-nav-link-container {
    display:flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
    text-align: center;
    
    @media (width >= 768px){
        grid-row: span 5;
        grid-column:  1;
        align-self: flex-end;
        text-align: left;
    }
}

.footer-nav-link-list {
    display: grid;
    grid-template: 'home flow' 'about news' 'studio faq' 'column contact' 'program recruit' 'price online-store' 'privacy loive' 'company surf-fit' 'terms redys-gym' '. nobee' / 1fr 1fr;
    gap: 1rem 2%;
    margin-top: 1.25rem;
    text-align: left;
    
    @media (width >= 768px){
        grid-template: 'home column flow contact' 'about program news recruit' 'studio price faq online-store' 'company privacy terms loive' 'surf-fit redys-gym nobee .' / 1fr 1fr 1fr 1fr;
    }

    .footer-nav-link-list-item-home {
        grid-area: home;
    }

    .footer-nav-link-list-item-about {
        grid-area: about;
    }

    .footer-nav-link-list-item-studio {
        grid-area: studio;
    }

    .footer-nav-link-list-item-program {
        grid-area: program;
    }

    .footer-nav-link-list-item-price {
        grid-area: price;
    }

    .footer-nav-link-list-item-news {
        grid-area: news;
    }

    .footer-nav-link-list-item-faq {
        grid-area: faq;
    }

    .footer-nav-link-list-item-column {
        grid-area: column;
    }

    .footer-nav-link-list-item-contact {
        grid-area: contact;
    }

    .footer-nav-link-list-item-online-store {
        grid-area: online-store;
    }

    .footer-nav-link-list-item-privacy {
        grid-area: privacy;
    }

    .footer-nav-link-list-item-loive {
        grid-area: loive;
    }

    .footer-nav-link-list-item-company {
        grid-area: company;
    }

    .footer-nav-link-list-item-terms {
        grid-area: terms;
    }

    .footer-nav-link-list-item-surf-fit {
        grid-area: surf-fit;
    }

    .footer-nav-link-list-item-redys-gym {
        grid-area: redys-gym;
    }

    .footer-nav-link-list-item-nobee {
        grid-area: nobee;
    }
    
}

.footer-nav-link-list-item {
    font-size: var(--text-ja-15);

    @media (1200px >= width >= 768px){
        zoom: 0.75;
    }

    &.sub {
        color: var(--color-brown);
    }
}

.footer-contact-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: fit-content;
    margin: 0 auto;
    margin-top: 2rem;

    @media (width >= 768px){
        grid-row:  1 / -1;
        grid-column:  3;
        place-self: flex-start flex-end;
        margin-top: 0;
    }
}

.footer-contact-button {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    background-color: #594E43;

    @media ( 1000px >= width >= 768px){
        zoom: 0.75;
    }

    &:hover {
        background-color: #7A6E62;
        opacity: 1;
    }

    .sub-label {
        font-size: 1.125rem;
        font-weight: 600;

    }

    .main-label {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:1.5rem;
        letter-spacing: 0;

        &.number {
            font-size: 1.75rem;
        }
    }

    .note {
        margin: auto;
        margin-left: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
    }
}

.bottom-image-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;

    @media (width >= 768px){
        height: 400px;
    }

    .top-button {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 110px;
        height: 70px;
        transform: translate(-50%, -50%);

        @media (width >= 768px){
            width: 166px;
            height: 105px;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .bottom-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom;
    }
}

#chatplusview #eye_catcher .button-hide {
    display: none;
}

#chatplusview.closed.headless #outline #eye_catcher {
    right: -28px !important;
    bottom: calc(20px * var(--zoom)) !important;

    @media (width >= 768px){
        bottom: calc(30px) !important;
        right: -22px !important;
    }
}