/* SP drawer navigation. Studio's runtime generated this panel (.design-canvas__modal) when the hamburger was tapped. That bundle is not part of the static export, so the export ships the button and both

s but no panel — the hamburger was inert and the nav was unreachable below 540px. The 540px breakpoint is Studio's own SP query: at max-width 540px it hides the desktop

s and reveals the hamburger. Nothing here applies above it, so the PC mock is untouched. The panel is opaque and full-screen, matching the reference build, so there is no backdrop to tap — closing is the X, Escape, or picking a link. Loaded after studio.css. The drawer is appended to , outside .render-canvas, so it inherits none of Studio's resets — every property it relies on is set explicitly. */ .sp-nav, .sp-nav__panel, .sp-nav__head, .sp-nav__list, .sp-nav__link, .sp-nav__cta, .sp-nav__close { box-sizing: border-box; margin: 0; } /* Above the SP breakpoint the drawer does not exist at all. */ .sp-nav { display: none; } html.sp-nav-open, html.sp-nav-open body { overflow: hidden; } @media screen and (max-width: 540px) { .sp-nav { --sp-nav-font: 'Open Sans', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; --sp-nav-ink: #333; --sp-nav-blue: #004fff; position: fixed; inset: 0; z-index: 9999; /* page tops out at z-index 5 */ display: block; visibility: hidden; opacity: 0; /* visibility is held until the fade-out finishes on close, but flips instantly on open — a hidden element cannot take focus, so a transitioned visibility would leave the panel unfocusable on the frame it appears */ transition: opacity 0.22s ease, visibility 0s linear 0.22s; font-family: var(--sp-nav-font); -webkit-font-smoothing: antialiased; } .sp-nav[data-open='true'] { visibility: visible; opacity: 1; transition: opacity 0.22s ease, visibility 0s linear 0s; } .sp-nav__panel { position: absolute; inset: 0; display: flex; flex-direction: column; /* top / side reproduce the header's own offset and gutter, so the panel head lands exactly on top of the header row it replaces -- the top value tracks the header margin-top set in overrides.css */ padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: #fff; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateY(-8px); transition: transform 0.22s ease; } .sp-nav[data-open='true'] .sp-nav__panel { transform: translateY(0); } .sp-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 67px; /* the header row's height — keeps both marks on y=73 */ margin-bottom: 20px; } .sp-nav__logo { display: block; width: 200px; /* same as the header logo, so it does not shift on open */ max-width: 62%; height: auto; } .sp-nav__close { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; /* pulls the 44px target out to the gutter so the X centres on the same point the hamburger icon occupied (x=360) */ margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sp-nav-ink); cursor: pointer; appearance: none; -webkit-appearance: none; } .sp-nav__close svg { display: block; width: 22px; height: 22px; } .sp-nav__list { display: flex; flex-direction: column; padding: 0; list-style: none; } .sp-nav__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; /* 60px row keeps every target well past the 44px minimum */ min-height: 60px; padding: 12px 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); color: var(--sp-nav-ink); font-size: 17px; font-weight: 500; line-height: 1.5; text-decoration: none; letter-spacing: 0.02em; } .sp-nav__link::after { flex: 0 0 auto; color: rgba(0, 0, 0, 0.28); } /* in-page destination: chevron drawn in CSS, so the drawer never depends on the externally hosted Material Icons font */ .sp-nav__link:not([data-external='true'])::after { width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); content: ''; } /* leaves the site: same mark the footer uses for outbound links */ .sp-nav__link[data-external='true']::after { font-size: 15px; line-height: 1; content: '↗'; } .sp-nav__cta { display: flex; align-items: center; justify-content: center; min-height: 56px; margin-top: 32px; padding: 14px 24px; border-radius: 128px; /* same gradient as the hero CTA */ background-image: linear-gradient( rgba(0, 79, 255, 0.7) 0%, rgba(0, 79, 255, 0.8) 52%, rgba(0, 79, 255, 0.7) 100% ); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; } .sp-nav__close:focus-visible, .sp-nav__link:focus-visible, .sp-nav__cta:focus-visible { outline: 2px solid var(--sp-nav-blue); outline-offset: 3px; } } @media screen and (max-width: 540px) and (prefers-reduced-motion: reduce) { .sp-nav, .sp-nav__panel { transition: none; } .sp-nav__panel { transform: none; } }