/* 図鑑 黒テーマ (熱帯魚)。共通の rva-nav.css の後に読みます。 */

.topnav{background:#0d0d0d;border-bottom:1px solid #2e7d32}
.topnav a:hover{background:#1d3b1f}
.sch-btn{background:#2e7d32}
.sch{background:#141414;color:#ddd}
.sch input{background:#1e1e1e;color:#eee;border:1px solid #333}
.srow{border-bottom:1px solid #262626}
.srow .sn{color:#ddd}
.srow .sn a{color:#a5d6a7}
.drawer{background:#181818;color:#ddd}
.drawer a{color:#cfd8cf}
.drawer a:hover{background:#212821;border-left-color:#2e7d32}
.dw-sec{border-bottom:1px solid #2a2a2a}
.dw-sec h5{color:#8fa68f}
.drawer .zk-side{padding:4px 0 10px}
.drawer .zk-side p{margin:10px 16px 2px;font-weight:bold}
.drawer .zk-side p a{display:inline;padding:0;border:none}
.drawer .zk-side>strong,.drawer .zk-side strong{display:block;margin:12px 16px 2px;font-size:.8em;color:#8fa68f}
.drawer .zk-side strong a{display:inline;padding:0;border:none}
.drawer .zk-side ul{list-style:none;margin:0;padding:0}
div[style*="#f4f9f4"]{background:#101810!important;border-color:#2c422d!important;color:#c8d6c8!important}
div[style*="#f4f9f4"] b{color:#a5d6a7}
div[style*="#f4f9f4"] span{color:#7f8f7f!important}
@media (max-width:768px){
 .side{float:none!important;width:100%!important}
 .contents{float:none!important;width:100%!important}
}

details.zk2g{border-bottom:1px solid #262626}
.zk2g summary{cursor:pointer;font-weight:bold;font-size:.83em;color:#8fa68f;padding:9px 4px;list-style:none;display:flex;align-items:center;gap:7px;user-select:none}
.zk2g summary::-webkit-details-marker{display:none}
.zk2g summary::before{content:'▸';color:#2e7d32;transition:transform .15s;flex:none}
details.zk2g[open]>summary::before{transform:rotate(90deg)}
.zk2g summary .cnt{color:#667066;font-weight:normal;font-size:.9em}
.zk2g ul{list-style:none!important;margin:0 0 8px!important;padding:0!important}
.zk2g li{margin:0!important}
.zk2g li a{display:block;padding:5px 8px 6px;text-decoration:none;border-left:3px solid transparent;line-height:1.25;margin:0}
.zk2g li a .wa{display:block;font-size:.86em;color:#339900}
.zk2g li a .gk{display:block;font-size:.72em;color:#7f8f7f;font-style:italic}
.zk2g li a:hover{background:#212821;border-left-color:#2e7d32}
.zk2g li a:hover .wa{color:#66cc66}
.zk2g li a.cur{background:#1d2a1d;border-left-color:#2e7d32}
.zk2g li a.cur .wa{color:#a5d6a7;font-weight:bold}
.drawer .zk2g summary{padding:9px 16px}
.drawer .zk2g li a{padding:5px 20px 6px}
.drawer .zk2g li a .wa{color:#cfd8cf}
.drawer .zk2g li a:hover .wa{color:#fff}
/* トップナビの縦スクロールバー抑止 (overflow-x:auto が縦も auto 化する CSS 仕様の副作用) */
.topnav .ni{overflow-y:hidden}
.topnav .sch-btn{align-self:center;line-height:1.2}

@media (min-width:1200px){
 body{padding-left:0}
 .menu-btn{display:inline-block}
 .dw-close{display:inline-block}
 .drawer{transform:translateX(-102%);box-shadow:2px 0 14px rgba(0,0,0,.25);border-right:none}
 .drawer.open{transform:translateX(0)}
 .overlay{display:block}
}

/* 短い項目だけの一覧 (学名アルファベット A〜W、日本語名 あ〜お 等) は横に並べる
   (2026-07-26 BOSS 指摘「A から Z のところが 1 列で長い / 2 列になってない」)。
   どの一覧が短いかは JS が測って zk2g-mini を付ける。 */
.zk2g ul.zk2g-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:2px}
.zk2g ul.zk2g-half{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:2px}
.zk2g ul.zk2g-half li a{padding:7px 6px;border-left:none;border-radius:5px}
.zk2g ul.zk2g-mini li a{text-align:center;padding:7px 4px;border-left:none;border-radius:5px}
.zk2g ul.zk2g-mini li a .wa{font-size:.9em}