.header {
    padding-left: 42px;
}

    .header .text-decoration-none:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
    }

    .header .header-menu {
        display: grid;
        grid-auto-flow: column;
        column-gap: 12px;
    }

        .header .header-menu .btn-link {
            border-radius: unset;
            border-width: 0;
            vertical-align: top;
        }

            .header .header-menu .btn-link:focus-visible {
                box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
            }

    .header .hamburger {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 32px;
        height: 32px;
        cursor: pointer;
        margin: .15rem 0 0 .25rem;
    }

        .header .hamburger span {
            display: block;
            position: absolute;
            width: 24px;
            height: 3px;
            left: 4px;
            background: var(--hamburger-color);
            border-radius: 1.5px;
            -webkit-transition: transform 0.2s, width 0.2s, left 0.2s, top 0.2s;
            transition: transform 0.2s, width 0.2s, left 0.2s, top 0.2s;
        }

        .header .hamburger .menu-line1 {
            top: 8px;
        }

        .header .hamburger .menu-line2 {
            top: 16px;
        }

        .header .hamburger .menu-line3 {
            top: 24px;
        }

        .header .hamburger:hover .menu-line1 {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            width: 16px;
            left: 1px;
            top: 11px;
        }

        .header .hamburger:hover .menu-line3 {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            width: 16px;
            left: 1px;
            top: 21px;
        }

        .header .hamburger.active:hover .menu-line1 {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            width: 16px;
            left: 15px;
            top: 11px;
        }

        .header .hamburger.active:hover .menu-line3 {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            width: 16px;
            left: 15px;
            top: 21px;
        }

        /* タッチ操作のヒットエリアを広げるための疑似要素 */
        .header .hamburger::after {
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            content: "";
            width: 62px;
            height: 62px;
            margin: -41px 0 0 -39px;
        }