*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;font-size:14px;line-height:1.7;color:#333;background:#f5f5f0;}

#header{background:#fff;border-bottom:1px solid #ddd;padding:10px 16px;}
#header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
#site-title{font-size:16px;font-weight:bold;color:#333;text-decoration:none;margin-right:8px;white-space:nowrap;}
#site-title:hover{color:#555;}
#nav{display:flex;flex-wrap:wrap;gap:4px;}
#nav a{font-size:13px;padding:4px 10px;border-radius:4px;border:1px solid #ddd;color:#555;text-decoration:none;white-space:nowrap;}
#nav a:hover,#nav a.active{background:#eee;color:#333;}

#sp-wrap{max-width:1100px;margin:8px auto;padding:0 8px;}
#sp-bar{display:none;justify-content:space-between;align-items:center;padding:8px;background:#fff;border:1px solid #ddd;border-radius:6px;}
#sp-label{font-size:13px;color:#999;}
.sp-btn{padding:6px 14px;border:1px solid #ddd;border-radius:4px;font-size:13px;cursor:pointer;background:#fff;color:#555;}
.sp-btn:hover{background:#f0f0eb;}

#main{max-width:1100px;margin:0 auto 12px;padding:0 8px;display:grid;grid-template-columns:180px 1fr 210px;gap:8px;}

.pane{background:#fff;border:1px solid #ddd;border-radius:6px;padding:12px;}
.pane-title{font-size:11px;font-weight:bold;color:#999;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #eee;}

#cat-list{list-style:none;}
#cat-list li{padding:5px 8px;border-radius:4px;cursor:pointer;font-size:13px;color:#555;}
#cat-list li:hover,#cat-list li.active{background:#f0f0eb;color:#333;}
.cat-parent{font-weight:bold;color:#333 !important;}
.cat-child{padding-left:20px !important;font-size:12px !important;}
.cat-child::before{content:"└ ";color:#bbb;}

#article-title{font-size:20px;font-weight:bold;margin-bottom:6px;line-height:1.4;}
#article-meta{font-size:12px;color:#999;margin-bottom:16px;}
#article-meta .tag{display:inline-block;background:#f0f0eb;padding:1px 8px;border-radius:3px;margin-left:6px;font-size:11px;color:#666;}

#article-body{font-size:14px;line-height:1.8;color:#444;}
#article-body h2{font-size:16px;font-weight:bold;margin:20px 0 8px;padding:4px 0 4px 10px;border-left:3px solid #6a9;color:#333;}
#article-body h3{font-size:14px;font-weight:bold;margin:16px 0 6px;color:#333;}
#article-body p{margin-bottom:12px;}
#article-body a{color:#3a7;text-decoration:none;}
#article-body a:hover{text-decoration:underline;}
#article-body img{max-width:100%;height:auto;border-radius:4px;margin:8px auto;display:block;}
#article-body pre{background:#1e1e1e;color:#d4d4d4;padding:14px;border-radius:6px;overflow-x:auto;font-size:12px;font-family:Consolas,Monaco,monospace;line-height:1.5;margin:12px 0;}
#article-body code{font-family:Consolas,Monaco,monospace;font-size:12px;background:#f0f0eb;padding:1px 5px;border-radius:3px;}
#article-body pre code{background:transparent;padding:0;color:inherit;}
#article-body table{width:100%;border-collapse:collapse;margin:12px auto;font-size:13px;}
#article-body table th{background:#f0f0eb;padding:6px 10px;border:1px solid #ddd;font-weight:bold;text-align:left;}
#article-body table td{padding:6px 10px;border:1px solid #ddd;}
#article-body table tr:nth-child(even) td{background:#fafaf8;}
#article-body ul,#article-body ol{margin:8px 0 12px 20px;}
#article-body li{margin-bottom:4px;}
#article-body hr{border:none;border-top:1px solid #eee;margin:16px 0;}
#article-body blockquote{border-left:3px solid #ccc;padding:8px 12px;color:#666;background:#fafaf8;margin:12px 0;}

#sort-bar{display:flex;gap:6px;margin-bottom:10px;}
.sort-btn{font-size:12px;padding:3px 10px;border:1px solid #ddd;border-radius:4px;cursor:pointer;background:#fff;color:#555;}
.sort-btn.active,.sort-btn:hover{background:#f0f0eb;color:#333;}
#article-list{list-style:none;}
#article-list li{padding:7px 0;border-bottom:1px solid #eee;cursor:pointer;}
#article-list li:last-child{border-bottom:none;}
#article-list li:hover .al-title{color:#3a7;text-decoration:underline;}
#article-list li.current .al-title{color:#3a7;font-weight:bold;}
.al-title{font-size:13px;color:#333;line-height:1.4;}
.al-date{font-size:11px;color:#999;margin-top:2px;}

#footer{text-align:center;padding:20px;font-size:12px;color:#999;}
#footer a{color:#999;text-decoration:none;}
#footer a:hover{text-decoration:underline;}

@media(max-width:768px){

#header-inner{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  grid-template-rows:auto;
  align-items:center;
  gap:4px;
}
#nav{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
#header-search{
  grid-column:4;
  grid-row:1;
}

  #header-search input{
  width:120px;
  font-size:11px;
  padding:3px 6px;
}

  #header-search button{
  font-size:11px;
  padding:3px 7px;
}

  #main{grid-template-columns:1fr;}
  
  #pane-left,#pane-right{
    display:none;
    position:fixed;
    top:0;
    width:50%;
    height:100%;
    z-index:8000;
    overflow-y:auto;
    border-radius:0;
    border:none;
    box-shadow:2px 0 10px rgba(0,0,0,0.2);
  }
  #pane-left{
    left:0;
    border-right:1px solid #ddd;
  }
  #pane-right{
    right:0;
    border-left:1px solid #ddd;
    box-shadow:-2px 0 10px rgba(0,0,0,0.2);
  }
  #pane-left.sp-show,#pane-right.sp-show{
    display:block;
  }
  #sp-bar{display:flex;}

  /* 2ペイン（中央）クリックで閉じるオーバーレイ */
  #pane-center.sp-overlay::before{
    content:'';
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.3);
    z-index:7999;
  }
}