/*--------------------
　HEADER/FOOTER　
--------------------*/
/*---------- HEADER ----------*/
header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    inset-block-start: 0;
    inset-inline: 0;
    animation: header-bg linear both;
    animation-timeline: scroll();
    animation-range: 0 100px;
}

@keyframes header-bg {
    from {
        background-color: transparent;
    }

    to {
        background-color: rgba(255, 255, 255, 0.95);
    }
}

.headerWrapper {
    .headerWrapper__inner {
        width: 100%;
        min-width: 100%;
        padding-block: 24px !important;
        padding-inline: 50px;

        @media screen and (max-width: 999px) {
            padding-block: 20px !important;
            padding-inline: 20px;
        }
    }

    .headerWrapper__logo {
        align-items: center;
        gap: 20px;

        @media screen and (max-width: 999px) {
            gap: 12px;
        }
    }

    .headerWrapper__eraberuLogo {
        display: flex;
        align-items: center;
        border-right: 1px solid var(--wp--preset--color--gray);
        padding-right: 20px;

        @media screen and (max-width: 999px) {
            padding-right: 12px;
        }

        img {
            width: inherit;
            height: 28px;
            object-fit: contain;

            @media screen and (max-width: 999px) {
                height: 18px;
            }
        }
    }

    .headerWrapper__originLogo {
        display: flex;
        align-items: center;

        img {
            width: inherit;
            height: 16px;
            object-fit: contain;

            @media screen and (max-width: 999px) {
                height: 12px;
            }
        }
    }

    .headerWrapper__nav {
        column-gap: 20px;

        .wp-block-navigation__responsive-container-content {
            @media screen and (max-width: 999px) {
                gap: 20px;
            }
        }

        .wp-block-navigation__container {
            column-gap: 24px;

            @media screen and (max-width: 999px) {
                width: 100%;
                padding-block: 20px;
                border-top: 1px solid var(--wp--preset--color--gray-2);
            }
        }

        .wp-block-navigation-item {

            @media screen and (max-width: 999px) {
                width: 100%;
                padding-bottom: 20px;
                border-bottom: 1px solid var(--wp--preset--color--gray-2);
            }
        }

        .wp-block-navigation-item__content {
            color: var(--wp--preset--color--charcoal-gray);
            font-weight: var(--wp--custom--typography--font-weight--bold);
            letter-spacing: 0.1em;

            &:where(.wp-site-blocks :focus) {
                outline-style: none;
            }
        }
    }

    .headerWrapper__button {
        .wp-block-button__link {
            letter-spacing: 0.15em;
            min-width: 150px;
            height: 60px;

            @media screen and (max-width: 999px) {
                height: 56px;
            }
        }
    }
}

/*---------- FOOTER ----------*/
footer {
    margin: 0;
}

.footerWrapper {
    @media screen and (max-width: 999px) {
        padding-inline: 20px;
    }

    .footerWrapper__contents {
        align-items: stretch;
        gap: 50px;

        @media screen and (max-width: 999px) {
            flex-direction: column;
        }
    }

    .footerWrapper__about {
        flex-basis: auto;
        width: 38%;

        @media screen and (max-width: 999px) {
            width: 100%;
        }
    }

    .footerWrapper__logo {
        width: 300px;
        margin: 0 auto;
    }

    .footerWrapper__adress {
        padding-inline: 40px;
        padding-block-start: 20px;
        margin-block-start: 20px;
        border-top: 1px dashed var(--wp--preset--color--gray);

        @media screen and (max-width: 999px) {
            padding-inline: 24px;
        }
    }

    .footerWrapper__num {
        padding-inline: 40px;
        padding-block-start: 20px;
        margin-block-start: 20px;
        border-top: 1px dashed var(--wp--preset--color--gray);

        @media screen and (max-width: 999px) {
            padding-inline: 24px;
        }
    }

    .footerWrapper__content {
        width: 62%;
        justify-content: space-between;

        @media screen and (max-width: 999px) {
            width: 100%;
        }
    }

    .footerWrapper__siteMap {
        width: 100%;
        column-gap: 24px;

        @media screen and (max-width: 999px) {
            column-gap: 12px;
        }
    }

    .footerWrapper__item {
        flex-grow: 1;
        gap: 20px;

        @media screen and (max-width: 999px) {
            flex: 1;
        }
    }

    .footerWrapper__itemList {
        row-gap: 16px;

        @media screen and (max-width: 999px) {
            gap: 12px;
        }
    }

    .footerWrapper__itemTitle {
        font-family: var(--wp--preset--font-family--outfit);
        white-space: nowrap;
    }

    .footerWrapper__area {
        width: 100%;
        padding-block: 8px;
        border-radius: 4px;
        justify-content: center;
        background-repeat: no-repeat;

        @media screen and (max-width: 999px) {
            gap: 12px;
            padding-inline: 16px;
        }
    }

    .footerWrapper__areaIcon {
        line-height: 1.2;
        background-color: var(--wp--preset--color--white-80);
        width: 70px;
        min-width: 70px;
        height: 70px;
        min-height: 70px;
        border-radius: 35px;
        align-items: center;
        justify-content: center;
        gap: 4px;

        img {
            width: 20px;
        }
    }

    .footerWrapper__areaText {
        gap: 4px;
    }

    .footerWrapper__bottom {
        padding-top: 20px;
        margin-block-start: 40px;
        border-top: 1px solid var(--wp--preset--color--gray);
    }
}