/*
 * 記事・ツールの2カラム(PC)。本文 約720px + サイドバー 約300px、間 32px。組全体を中央寄せ。
 * 1024px未満は1列(サイドバーは本文の下。「このページのツール」と目次は、本文の上の方の案内があるので、出さない)。
 * 色・形は /shell.css の --sp-*。広告はサイドバーに置かない。
 */
main.has-sidebar { max-width: 1116px; }
.al-grid { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 32px; justify-content: center; align-items: start; }
.al-main { min-width: 0; }
.al-main > .article-hero, .al-main > .av-hero { max-width: none; }
.sidebar { align-self: stretch; display: flex; flex-direction: column; gap: 14px; font-family: var(--sp-font-body); font-size: .9rem; line-height: 1.6; }
.sb-top { flex: 1 1 auto; }
.sb-sticky { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 2px; }
.sb-rest { display: flex; flex-direction: column; gap: 14px; }
.sb-card { padding: 14px 16px; border: 1px solid var(--sp-rule); border-radius: var(--sp-r-card); background: #fff; }
.sb-label { margin: 0 0 8px; color: var(--sp-muted); font-size: .78rem; font-weight: 700; }
.sidebar ul, .sidebar ol { margin: 0; padding: 0; list-style: none; }
.sidebar a { color: var(--sp-text); text-decoration: none; }
.sidebar a:hover { color: var(--sp-indigo-dark); }
.sidebar a:focus-visible { outline: 3px solid var(--sp-indigo); outline-offset: 2px; border-radius: 4px; }

.sb-tool { border: 2px solid #D5DEEC; border-radius: var(--sp-r-card-lg); background: var(--sp-indigo-bg); }
.sb-tool-name { margin: 0 0 2px; font-family: var(--sp-font-head); font-weight: 900; font-size: 1.05rem; color: var(--sp-heading); line-height: 1.45; }
.sb-tool-text { margin: 0 0 12px; color: var(--sp-muted); font-size: .84rem; }
.sidebar .sb-btn { display: flex; align-items: center; justify-content: center; min-height: var(--sp-btn-h); padding: 0 16px; border-radius: var(--sp-r-btn); background: var(--sp-indigo); color: #fff; font-weight: 700; text-align: center; }
.sidebar .sb-btn:hover { background: var(--sp-indigo-dark); color: #fff; }

.sb-toc ol { counter-reset: toc; }
.sb-toc li { counter-increment: toc; }
.sb-toc a { display: block; padding: 4px 8px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; color: var(--sp-muted); font-size: .84rem; }
.sb-toc a::before { content: counter(toc) ". "; }
.sb-toc a:hover { background: var(--sp-gray-bg); }
.sb-toc a.is-current { border-left-color: var(--sp-indigo); background: var(--sp-indigo-bg); color: var(--sp-indigo-dark); font-weight: 700; }

.sb-guides li + li { margin-top: 4px; }
.sb-guides a { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; }
.sb-guides a:hover { background: var(--sp-gray-bg); }
.sb-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--sp-r-icon); background: var(--sp-icon-bg); color: var(--sp-indigo); }

.sb-group { margin: 8px 0 2px; color: var(--sp-heading); font-size: .8rem; font-weight: 700; }
.sb-group:first-of-type { margin-top: 0; }
.sb-tools li a { display: block; padding: 4px 4px; text-decoration: underline; text-underline-offset: 3px; color: var(--sp-indigo); }

@media (max-width: 1023px) {
  .al-grid { display: block; }
  .sidebar { margin-top: 40px; }
  .sb-top { flex: none; }
  .sb-sticky { position: static; max-height: none; overflow: visible; padding: 0; }
  .sb-tool, .sb-toc { display: none; }
}
@media print { .sidebar { display: none !important; } .al-grid { display: block; } }