/* native dialogのtop layerで、診断や下部固定CTAの上に表示する。 */
.site-menu-bar { position: sticky; top: 0; z-index: 15; background: var(--ink); border-bottom: 1px solid var(--line); }
.site-menu-bar-inner { --maxw: 1080px; display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding-top: env(safe-area-inset-top, 0px); gap: 16px; }
.site-menu-home { font-family: var(--font-serif); font-size: 18px; text-decoration: none; }
.site-menu-slot { flex: none; margin-left: auto; }
.site-menu-toggle, .site-menu-close { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 24px; color: var(--paper); background: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.site-menu-toggle[aria-expanded="true"] { border-color: var(--amber-2); }
.site-menu-dialog { position: fixed; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); left: auto; bottom: auto; z-index: 50; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 24px 24px max(24px, env(safe-area-inset-bottom, 0px)); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); color: var(--paper); background: var(--ink-2); box-shadow: 0 16px 64px rgba(0,0,0,.45); }
.site-menu-dialog:not([open]) { display: none; }
.site-menu-dialog::backdrop { background: rgba(10,12,20,.76); }
.site-menu-open { overflow: hidden; }
.site-menu-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.site-menu-heading h2 { font-size: 20px; }
.site-menu-close { padding: 8px 12px; }
.site-menu-close span { font-size: 22px; }
.site-menu-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.site-menu-links a { display: block; width: 100%; min-height: 56px; padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; text-decoration: none; font-size: 15px; line-height: 24px; }
.site-menu-links a span, .site-menu-links a[aria-current="page"] { color: var(--amber-2); }
.site-menu-note { margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.site-menu-resume { display: block; margin-top: 24px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--amber-2); font-size: 14px; text-align: center; }
.site-menu-cta.btn { display: flex; width: 100%; min-width: 0; margin-top: 24px; padding: 14px 16px; }
.site-menu-resume[hidden], .site-menu-note[hidden], .site-menu-cta[hidden] { display: none; }
.site-menu-fallback { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }
body:not(.site-menu-ready) .site-menu-toggle { display: none; }
.check-head .site-menu-slot + .head-share-wrap { margin-left: 0; }
.check-top { padding-top: env(safe-area-inset-top, 0px); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.about-main { padding-top: 56px; padding-bottom: 64px; }
.about-main > section:not(.type-discover-cta) { max-width: 720px; }
.about-intro h1 + p { margin-top: 24px; }
.about-intro > p:not(.type-eyebrow), .about-section p { line-height: 2; color: var(--paper-2); }
.about-intro .type-common-note { margin-top: 24px; }
.about-section { margin-top: 56px; }
.about-section h2 { margin-bottom: 24px; font-size: 24px; }
.about-section p + p { margin-top: 16px; }
.about-section .text-link { display: inline-block; margin-top: 16px; }
.about-yakou { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 32px; align-items: center; }
.about-yakou img { width: 100%; height: auto; border-radius: 24px; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.about-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.about-comparison article { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ink-2); }
.about-comparison h3 { font-size: 19px; margin: 12px 0 16px; line-height: 1.8; }
.about-comparison .about-stage { color: var(--amber-2); font-size: 13px; }
.about-comparison p { font-size: 14px; }
.about-step-list { display: grid; gap: 12px; margin-top: 24px; }
.about-step-list li { padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); }
.about-step-list h3 { margin-bottom: 8px; font-size: 16px; line-height: 1.8; }
.about-step-list p { font-size: 14px; }
@media (max-width: 480px) { .site-menu-toggle { width: 44px; padding: 0; } .site-menu-toggle > span { display: none; } .check-head { gap: 8px; } .site-menu-dialog { padding: 20px 20px max(20px,env(safe-area-inset-bottom,0px)); } .about-comparison { grid-template-columns: 1fr; } .about-yakou { grid-template-columns: 1fr; gap: 16px; } .about-yakou img { width: 140px; margin: 0; } }