@layer sections {
      #nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 40;
        height: 64px;
        pointer-events: none;
        transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
      }

      #nav.is-hidden {
        transform: translateY(-110%);
      }

      #nav .nav__logo {
        position: absolute;
        top: 50%;
        left: var(--space-2);
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--color-2);
        pointer-events: auto;
      }

      #nav .nav__mark {
        width: 32px;
        height: 32px;
        display: block;
        object-fit: contain;
        flex: none;
      }

      #nav .nav__name {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.025em;
        line-height: 1;
        color: var(--color-2);
      }

      #nav .nav__menu {
        position: absolute;
        top: 16px;
        right: var(--space-1);
        pointer-events: auto;
      }

      #nav .menu {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: grid;
        grid-template-rows: auto 1fr auto;
        background: var(--color-1);
        pointer-events: auto;
        overflow-y: auto;
        padding: 18px var(--space-1) 24px 0;
      }

      #nav .menu[hidden] {
        display: none;
      }

      #nav .menu__rule {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--space-3);
        width: 1px;
        background: var(--color-2);
      }

      #nav .menu__top {
        display: flex;
        justify-content: flex-end;
      }

      #nav .menu__list {
        align-self: center;
        display: grid;
        gap: clamp(6px, 1.4vh, 14px);
        padding: 32px 0;
      }

      #nav .menu__list li:nth-child(odd) {
        margin-left: var(--space-2);
      }

      #nav .menu__list li:nth-child(even) {
        margin-left: calc(var(--space-3) + var(--space-4));
      }

      #nav .menu__list li:nth-child(odd) .m-link-3 {
        background-color: var(--color-1);
      }

      #nav .menu__foot {
        margin-left: calc(var(--space-3) + var(--space-4));
        display: grid;
        gap: 4px;
      }
    }