/* 音声編集ページの共通ナビ：寸法・配色・スクロール時の縮小を継承。 */
    .nav { position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:22px 40px; border-bottom:1px solid var(--line-inverse); background:var(--black); transition:padding .3s ease,box-shadow .3s ease; }
    .nav .brand { font-family:var(--bold); font-size:15px; font-weight:700; letter-spacing:.18em; color:var(--white); text-decoration:none; white-space:nowrap; }
    .nav .pills { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    .nav .pill { display:inline-block; border:1px solid var(--white); border-radius:999px; background:var(--white); color:var(--black); font-size:12.5px; font-weight:700; text-decoration:none; padding:8px 16px; white-space:nowrap; }
    .nav .pill:hover { background:var(--gray1); }
    .nav .cta-pill { display:inline-block; border:1px solid var(--blue); border-radius:999px; background:var(--blue); color:var(--white); padding:11px 22px; font-size:13px; font-weight:700; text-decoration:none; box-shadow:0 12px 26px -12px rgba(37,99,214,.55); white-space:nowrap; }
    .nav .cta-pill:hover { background:var(--blue-hi); border-color:var(--blue-hi); }
    .nav .pill,.nav .brand,.nav .cta-pill { transition:padding .3s ease,font-size .3s ease,transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease,color .25s ease; }
    @media(min-width:761px) {
      body.scrolled .nav { padding-top:6px; padding-bottom:6px; box-shadow:0 12px 30px -20px rgba(0,0,0,.22); }
      body.scrolled .nav .pill { padding:4px 12px; font-size:11.5px; }
      body.scrolled .nav .brand { font-size:12.5px; }
      body.scrolled .nav .cta-pill { padding:7px 16px; font-size:12px; }
    }
    .menu-btn { display:none; flex-direction:column; justify-content:center; gap:4px; width:46px; height:40px; padding:9px 11px; background:var(--white); border:1px solid var(--line); border-radius:8px; cursor:pointer; }
    .menu-btn span { display:block; height:2px; background:var(--tx); border-radius:2px; }
    #mnav { display:none; position:fixed; top:0; left:0; right:0; z-index:90; background:var(--white); padding:14px 22px 22px; transform:translateY(-103%); transition:transform .32s cubic-bezier(.22,.61,.36,1); box-shadow:0 30px 60px -30px rgba(0,0,0,.35); border-radius:0 0 16px 16px; max-height:100dvh; overflow-y:auto; }
    #mnav .mhead { display:flex; justify-content:space-between; align-items:center; padding:4px 0 14px; border-bottom:1px solid var(--line); margin-bottom:6px; }
    #mnav .b { font-family:var(--bold); font-weight:700; letter-spacing:.18em; font-size:14px; }
    #mnav .mclose { width:46px; height:40px; border:1px solid var(--line); border-radius:8px; background:var(--white); font-size:16px; color:var(--tx); cursor:pointer; }
    #mnav a { display:block; padding:15px 8px; border-bottom:1px solid var(--line); color:var(--tx); text-decoration:none; font-family:var(--bold); font-weight:700; font-size:15px; }
    #mnav a.cta { background:var(--blue); color:var(--white); border-radius:999px; text-align:center; border-bottom:0; margin-top:16px; padding:14px; }
    


/* The values and interaction states below follow #pg-audio in the main prototype. */
.nav,.ft,#mnav { font-family:var(--sans); line-height:normal; letter-spacing:normal; }
.nav a,.ft a,#mnav a { text-underline-offset:auto; }
.nav .pill:hover,.nav .cta-pill:hover { transform:translateY(-2px); }
.nav a:focus-visible,.ft a:focus-visible,.menu-btn:focus-visible,#mnav :is(a,button):focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.ft { background:var(--black); border-top:1px solid var(--line-inverse); color:#7e7e86; text-align:center; padding:44px 20px; font-size:.78rem; }
.ft .b { color:var(--white); letter-spacing:.2em; font-size:.95rem; font-weight:600; display:block; margin-bottom:10px; text-decoration:none; }
.ft .legal { color:var(--footer-link); text-decoration:underline; }
.ft a,.menu-btn,#mnav button { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease,color .25s ease,opacity .25s ease; }
.ft.shell-reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1); }
.ft.shell-reveal.is-visible { opacity:1; transform:none; }
body.menu-open #mnav { transform:none; }
.menu-btn span { transition:transform .25s ease,opacity .25s ease; }
body.menu-open .menu-btn span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity:0; }
body.menu-open .menu-btn span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
@media(min-width:761px) {
 .nav a:focus-visible { outline:2px solid var(--white); outline-offset:3px; }
}
@media(max-width:760px) {
 .nav { position:relative; top:auto; z-index:10; padding:10px 20px; background:var(--white); border-bottom-color:var(--line); }
 .nav > .pills,.nav > .cta-pill { display:none; }
 .nav .pill { background:transparent; border-color:var(--line); color:var(--tx2); }
 .nav .cta-pill { border:0; }
 .nav .brand { color:var(--tx); }
 .menu-btn { display:flex; }
 #mnav { display:block; }
 .ft a { display:inline-block; padding:12px 10px; }
 .ft .b { display:block; }
}
@media(prefers-reduced-motion:reduce) {
 .nav,.nav a,.ft,.ft a,.menu-btn,.menu-btn span,#mnav,#mnav a,#mnav button { transition:none!important; }
 .nav .pill:hover,.nav .cta-pill:hover { transform:none; box-shadow:none; }
 .ft.shell-reveal { opacity:1; transform:none; }
}