/* OBA NAVI サイドバー型レイアウト（色は design.css の変数のみ） */
.shell { display: flex; min-height: 100vh; }
.side { width: 240px; flex: none; background: var(--navy); color: #cfd6e4; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .logo { padding: 20px 20px 16px; color: #fff; font-weight: 700; font-size: 18px; line-height: 1.3; }
.side .logo small { display: block; font-weight: 400; font-size: 11px; color: #cfd6e4; }
.side .grp { padding: 14px 20px 4px; font-size: 11px; color: #8d99b3; letter-spacing: .04em; }
.side a, .side .off { display: flex; align-items: center; gap: 8px; margin: 2px 10px; padding: 9px 12px; border-radius: var(--radius-s); color: #cfd6e4; font-size: 14px; text-decoration: none; }
.side a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.side a.on { background: var(--blue); color: #fff; font-weight: 700; }
.side a.sub, .side .off.sub { margin-left: 22px; padding: 7px 12px; font-size: 13px; }
.side a.sub.on { background: rgba(255, 255, 255, .16); }
.side .off { color: #8d99b3; cursor: default; }
.side .off i { margin-left: auto; font-style: normal; font-size: 10px; border: 1px solid #4a5a7e; border-radius: 999px; padding: 0 6px; }
.side .foot { margin-top: auto; padding: 16px 20px; font-size: 11px; color: #8d99b3; border-top: 1px solid var(--navy-2); }
.main { flex: 1; min-width: 0; }
.main .page-main { max-width: 1100px; }
.frame { display: block; width: 100%; height: 100vh; border: 0; background: var(--bg); }
.topbar { display: none; }
@media (max-width: 800px) {
  .shell { flex-direction: column; }
  .side { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 6px; }
  .side .logo { padding: 8px 12px; }
  .side .grp, .side .foot, .side .off { display: none; }
  .side a, .side a.sub { margin: 2px; padding: 7px 10px; font-size: 13px; }
  .frame { height: calc(100vh - 100px); }
}