.footer-menu {
    .wp-block-navigation__container {
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-auto-flow: column;

        @media (width <=780px) {
            border-top: solid 1px var(--wp--preset--color--dusty-orange-2);
            grid-template-columns: repeat(2, 1fr);
        }

        @media (width > 780px) {
            gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
            justify-content: flex-end;
        }

    }

    .wp-block-navigation-item {
        height: 100%;

        @media (width <=780px) {
            border-bottom: solid 1px var(--wp--preset--color--dusty-orange-2);
            padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
            height: 100%;

            &:nth-child(-n+4) {
                border-right: solid 1px var(--wp--preset--color--dusty-orange-2);
            }
        }
    }

    .wp-block-navigation-item__content {
        position: relative;
        padding-left: 2em;

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 1.5em;
            height: 1.5em;
            background-color: var(--wp--preset--color--dusty-orange);
            border-radius: 50%;
        }

        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0.5em;
            transform: translateY(-50%) rotate(45deg);
            width: 0.35em;
            height: 0.35em;
            border-top: 2px solid var(--wp--preset--color--white);
            border-right: 2px solid var(--wp--preset--color--white);
        }

        &:hover,
        &:focus,
        &:active {
            color: var(--wp--preset--color--dusty-orange) !important;
        }
    }

}

.header-menu_sp {
    .wp-block-navigation__responsive-dialog {
        padding: var(--wp--preset--spacing--30);
        color: var(--wp--preset--color--white) !important;

        &::before {
            content: "";
            position: absolute;
            top: 16px;
            left: var(--wp--preset--spacing--45);
            width: clamp(7.938rem, 6.9rem + 5.19vw, 13.125rem);
            height: auto;
            aspect-ratio: 127 / 36;
            background-image: url("../img/site-logo_sp.png");
            background-size: contain;
            background-repeat: no-repeat;
        }


        &::after {
            /* 円 */
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 183px;
            height: 183px;
            background-color: var(--wp--preset--color--very-light-pink-2);
            border-radius: 50%;
            transform: translate(-30%, 0%);
            opacity: 0.2;
        }

        .wp-block-navigation-item__content {
            position: relative;
            padding-left: 1.8em !important;

            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 1.1em;
                height: 1.1em;
                background-color: var(--wp--preset--color--white);
                border-radius: 50%;
            }

            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 0.35em;
                transform: translateY(-50%) rotate(45deg);
                width: 0.25em;
                height: 0.25em;
                border-top: 1px solid var(--wp--preset--color--dusty-orange);
                border-right: 1px solid var(--wp--preset--color--dusty-orange);
            }
        }
    }

    .wp-block-navigation__container {
        align-items: flex-start !important;
        margin-top: var(--wp--preset--spacing--70);
    }

    .wp-block-navigation__responsive-container-close {
        top: 8px;
        right: 10px;
        background-color: var(--wp--preset--color--white);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: var(--wp--preset--color--dusty-orange);
        display: grid;
        place-items: center;

    }

    .wp-block-navigation__responsive-container-open {
        top: 8px;
        right: 10px;
        background-color: var(--wp--preset--color--dusty-orange);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: var(--wp--preset--color--white);
        display: grid;
        place-items: center;

    }

    .wp-block-navigation__responsive-container {
        overflow: hidden;

        &::before {
            /* 三角形 */
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 259.8px;
            /* 1辺の長さ */
            height: 300px;
            background-color: var(--wp--preset--color--very-light-pink-2);
            opacity: 0.2;

            /* 三角形に切り抜き */
            clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
            z-index: 1;

            transform: translate(66%, 70%);
            rotate: 0;
        }

        &::after {
            /* 四角 */
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 400px;
            height: 400px;
            background-color: var(--wp--preset--color--very-light-pink-2);
            opacity: 0.2;

            z-index: 1;

            transform: translate(70%, -30%);
            rotate: -15deg;
        }
    }
}

.header-menu {
    .wp-block-navigation-item {
        &.current-menu-item {
            color: var(--wp--preset--color--dusty-orange) !important;
        }

        &:hover,
        &:focus,
        &:active {
            color: var(--wp--preset--color--dusty-orange);
        }
    }

    .wp-block-navigation__submenu-container {
        border-radius: 20px;
        border: solid 2px var(--wp--preset--color--white) !important;
        padding: 30px 35px;
        min-width: 250px !important;

        .wp-block-navigation-item__content {
            padding-inline: 2em 0 !important;
            padding-block: 0.75em !important;
            position: relative;
            font-size: 14px !important;

            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 1.5em;
                height: 1.5em;
                background-color: var(--wp--preset--color--dusty-orange);
                border-radius: 50%;
            }

            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 0.5em;
                transform: translateY(-50%) rotate(45deg);
                width: 0.35em;
                height: 0.35em;
                border-top: 2px solid var(--wp--preset--color--white);
                border-right: 2px solid var(--wp--preset--color--white);
            }
        }
    }
}