/*
 * crucru 共通メニュー v2（緑）。crucru-admin.css と一緒に読み込む。
 * 構造（768px以上で body を flex、.cross-sidebar／.cs-content／.nav-toptabs）は v1 の nav.css と同じ。
 * 768px未満で body を flex にしないこと（差し込む .nav-header が横幅いっぱいにならなくなる）。
 */
.cross-sidebar{display:none}
@media (min-width:768px){
  body{display:flex}
  .cross-sidebar{display:flex;flex-direction:column;width:232px;flex-shrink:0;box-sizing:border-box;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;padding:18px 12px 16px;background:var(--ca-green);color:#fff;font-family:var(--ca-font)}
}
.cs-brand{display:flex;align-items:center;gap:10px;padding:2px 10px 14px;color:#fff;text-decoration:none}
.cs-brand .ca-icon{width:28px;height:28px}
.cs-bname{display:block;font-size:var(--ca-t-card);font-weight:900;line-height:1.2}
.cs-bsub{display:block;font-size:var(--ca-t-label);line-height:1.3;opacity:.8}
/* グループ名はミントのバッジ＋右に伸びる細い線（どこからどこまでが同じグループか、ひと目で分かるように） */
.cs-group,.nav-drawer-group{display:flex;align-items:center;gap:8px}
.cs-group::after,.nav-drawer-group::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.3)}
.cs-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--ca-mint);color:var(--ca-green-dark);font-size:var(--ca-t-label);font-weight:700;line-height:1.5;letter-spacing:.04em;white-space:nowrap}
.cs-group{padding:16px 8px 6px 8px}
.cs-link{display:flex;align-items:center;gap:10px;margin-bottom:2px;padding:7px 12px;border:2px solid transparent;border-radius:999px;color:#fff;font-size:var(--ca-t-body);line-height:1.4;text-decoration:none}
.cs-link:hover{background:rgba(255,255,255,.14)}
.cs-link.cs-active{background:#fff;border-color:var(--ca-ink);color:var(--ca-ink);font-weight:700}
.cs-link .ca-icon{width:18px;height:18px}
.cs-link .cs-ext{width:13px;height:13px;margin-left:auto;opacity:.7}
.cs-emoji{flex:none;width:18px;text-align:center}
.cs-sep{height:1px;margin:12px 8px;background:rgba(255,255,255,.25)}
.cs-bottom{margin-top:auto;padding-top:4px}
.cs-link:focus-visible,.cs-brand:focus-visible,.nav-drawer-row:focus-visible,.nav-round-btn:focus-visible{outline:3px solid var(--ca-focus);outline-offset:2px}
.cs-content{flex:1;min-width:0;box-sizing:border-box;padding:24px 28px 48px}
@media (max-width:767px){.cs-content{padding:16px 16px 40px}}

/* ---- アプリ内のタブ（768px以上だけ。スマホは全面メニューにまとめる） ---- */
.nav-toptabs{display:none;flex-wrap:wrap;gap:6px;margin-bottom:18px}
@media (min-width:768px){.nav-toptabs{display:flex}}

/* ---- スマホの上の帯 ---- */
.nav-header{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;padding:10px 14px;background:var(--ca-green);color:#fff;font-family:var(--ca-font)}
@media (min-width:768px){.nav-header{display:none}}
.nav-header-title{font-size:var(--ca-t-card);font-weight:700;line-height:1.3}
.nav-header-sub{font-size:var(--ca-t-label);opacity:.85}
.nav-round-btn{display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0;border:2px solid var(--ca-ink);border-radius:50%;background:#fff;color:var(--ca-ink);box-shadow:0 3px 0 var(--ca-green-dark);cursor:pointer}
.nav-round-btn .ca-icon{width:20px;height:20px}
.nav-round-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ca-green-dark)}

/* ---- スマホの全面メニュー ---- */
.nav-drawer{position:fixed;inset:0;z-index:50;overflow-y:auto;box-sizing:border-box;padding:12px 16px 40px;background:var(--ca-green);color:#fff;font-family:var(--ca-font);transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility .2s}
.nav-drawer.open{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){.nav-drawer{transition:none}}
@media (min-width:768px){.nav-drawer{display:none}}
body.nav-open{overflow:hidden}
.nav-drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.nav-drawer-brand{display:flex;align-items:center;gap:8px;font-size:var(--ca-t-card);font-weight:900}
.nav-drawer-brand .ca-icon{width:26px;height:26px}
.nav-drawer-group{padding:18px 6px 6px 10px}
.nav-drawer-row{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;margin-bottom:2px;padding:10px 14px;border:2px solid transparent;border-radius:999px;background:none;color:#fff;font:inherit;font-size:var(--ca-t-card);font-weight:700;text-align:left;text-decoration:none;cursor:pointer}
.nav-drawer-row.active{background:#fff;border-color:var(--ca-ink);color:var(--ca-ink)}
.nav-drawer-row .ca-icon{width:20px;height:20px}
.nav-drawer-row .cs-ext{width:14px;height:14px;margin-left:auto;opacity:.7}
.nav-drawer-sep{height:1px;margin:14px 6px;background:rgba(255,255,255,.25)}

/* ---- 検索（設計書 2026-09-30-portal-navigation-map §7）。PC の左メニュー・スマホの全面メニュー・ポータルのホームで共通 ---- */
.cs-search{position:relative;margin:4px 0 10px}
.cs-search>.ca-icon{position:absolute;left:12px;top:10px;width:16px;height:16px;color:var(--ca-ink-soft);pointer-events:none}
.cs-search-input{width:100%;box-sizing:border-box;padding:7px 12px 7px 34px;border:2px solid transparent;border-radius:999px;background:#fff;color:var(--ca-ink);font:inherit;font-size:var(--ca-t-note);-webkit-appearance:none;appearance:none}
.cs-search-input::placeholder{color:var(--ca-ink-soft)}
.cs-search-input:focus{outline:none;border-color:var(--ca-ink)}
.cs-results{margin-top:6px;padding:4px;border-radius:12px;background:#fff;color:var(--ca-ink)}
.cs-results[hidden]{display:none}
.cs-result{display:block;width:100%;box-sizing:border-box;padding:7px 10px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;font-size:var(--ca-t-note);line-height:1.5;text-align:left;text-decoration:none;cursor:pointer}
.cs-result:hover,.cs-result:focus-visible{background:var(--ca-mint);outline:none}
.cs-result b{display:block;font-weight:700}
.cs-result-sub{display:block;color:var(--ca-ink-soft);font-size:var(--ca-t-label)}
.cs-noresult{margin:0;padding:8px 10px;color:var(--ca-ink-soft);font-size:var(--ca-t-note)}
.nav-drawer .cs-search{margin:0 0 6px}
.nav-drawer .cs-search-input{padding:10px 14px 10px 38px;font-size:var(--ca-t-body)}
.nav-drawer .cs-search>.ca-icon{top:13px;left:14px}
.nav-drawer .cs-result{padding:10px 12px;font-size:var(--ca-t-body)}

/* ---- アプリの行の開閉（▸）と画面の行 ---- */
.cs-app,.nav-drawer-app{display:flex;align-items:center;gap:2px}
.cs-app>.cs-link,.nav-drawer-app>.nav-drawer-row{flex:1;min-width:0;margin-bottom:0}
.cs-app{margin-bottom:2px}
.cs-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer}
.cs-toggle:hover{background:rgba(255,255,255,.14)}
.cs-toggle .ca-icon{width:16px;height:16px;transition:transform .15s}
.cs-toggle[aria-expanded="true"] .ca-icon{transform:rotate(90deg)}
.cs-toggle:focus-visible,.cs-screen:focus-visible,.cs-search-input:focus-visible{outline:3px solid var(--ca-focus);outline-offset:2px}
.nav-drawer-app .cs-toggle{width:40px;height:40px}
.nav-drawer-app .cs-toggle .ca-icon{width:20px;height:20px}
/* よく使う（ピン留めした画面） */
.cs-pins{margin-bottom:2px}
.cs-pin{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;margin-bottom:2px;padding:6px 12px;border:2px solid transparent;border-radius:999px;background:none;color:#fff;font:inherit;font-size:var(--ca-t-note);line-height:1.35;text-align:left;text-decoration:none;cursor:pointer}
.cs-pin:hover{background:rgba(255,255,255,.14)}
.cs-pin .ca-icon{flex-shrink:0;width:18px;height:18px}
.cs-pin-label{display:flex;flex-direction:column;min-width:0}
.cs-pin-label small{font-size:var(--ca-t-label);opacity:.75}
.cs-pin:focus-visible{outline:3px solid var(--ca-focus);outline-offset:2px}
.nav-drawer .cs-pin{padding:9px 14px;font-size:var(--ca-t-body)}
.nav-drawer .cs-pin .ca-icon{width:20px;height:20px}
.cs-screens{margin:0 0 6px 30px}
.cs-screens[hidden]{display:none}
.cs-screen{display:block;width:100%;box-sizing:border-box;margin-bottom:1px;padding:4px 12px;border:2px solid transparent;border-radius:999px;background:none;color:inherit;font:inherit;font-size:var(--ca-t-note);line-height:1.5;text-align:left;text-decoration:none;cursor:pointer;opacity:.92}
.cs-screen:hover{background:rgba(255,255,255,.14);opacity:1}
.cs-screen.is-active{background:#fff;border-color:var(--ca-ink);color:var(--ca-ink);font-weight:700;opacity:1}
.nav-drawer .cs-screens{margin-left:40px}
.nav-drawer .cs-screen{padding:8px 14px;font-size:var(--ca-t-body)}
@media (prefers-reduced-motion:reduce){.cs-toggle .ca-icon{transition:none}}