:root{--bg:#f5f5f5;--line:#ccc;--w:1200px;--gap:18px;--top:56px;--sb:230px;--ad:300px}
*{box-sizing:border-box}
body{margin:0;font-family:sans-serif;background:var(--bg);color:#111}

.top{position:sticky;top:0;z-index:10;height:var(--top);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px}
.top .back{color:#000;text-decoration:none}
.top .ttl{margin:0 auto;font-weight:700;font-size:18px}

.shell{padding:18px 22px} /* 全体マージン（外側） */
.wrap{max-width:var(--w);margin:0 auto;display:flex;gap:var(--gap);height:calc(100vh - var(--top) - 36px)} /* 36px=上下padding分 */

.sb{width:var(--sb);background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;position:sticky;top:calc(var(--top) + 18px);align-self:flex-start;height:calc(100vh - var(--top) - 36px);overflow:hidden} /* 固定 */
.sb .sb-head{font-weight:700;margin:2px 0 10px}
.sb a{display:block;padding:8px 10px;border-radius:10px;color:#111;text-decoration:none}
.sb a:hover{background:#eee}
.sb a.on{background:#111;color:#fff}

.main{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;overflow-y:auto;padding:24px 28px} /* 中央だけスクロール */
.main h1,.main h2,.main h3{margin:22px 0 10px}
.main p,.main li{line-height:1.85}
.main pre{background:#111;color:#fff;padding:12px;border-radius:10px;overflow:auto}
.main code{font-family:ui-monospace,Menlo,Consolas,monospace}
.main blockquote{border-left:4px solid var(--line);padding:8px 14px;background:#fafafa;border-radius:10px;margin:14px 0}

.ad{width:var(--ad);background:#fff;border:1px solid var(--line);border-radius:12px;position:sticky;top:calc(var(--top) + 18px);align-self:flex-start;height:calc(100vh - var(--top) - 36px);padding:14px}
.ad .box{height:600px;border-radius:10px}
.scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar::-webkit-scrollbar {
    display: none;
}
.main img{
  display:block;
  margin:20px auto;
  max-width:100%;
  height:auto;
  border-radius:12px;
}
@media(max-width:1200px){:root{--w:1000px}}
@media(max-width:1100px){.ad{display:none}}
@media(max-width:820px){
  .wrap{flex-direction:column;height:auto}
  .sb{position:relative;top:auto;height:auto;overflow:visible}
  .main{max-height:none}
}