/* 図鑑 白テーマ (水草)。共通の rva-nav.css の後に読みます。 */

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}

.zk2g summary{color:#2e7d32}
.zk2g summary .cnt{color:#8aa88a}
.zk2g li a .wa{color:#2a5c2a}
.zk2g li a .gk{color:#7a8a7a}
.zk2g li a:hover{background:#eef6ee;border-left-color:#2e7d32}
.zk2g li a:hover .wa{color:#1b5e20}
.zk2g li a.cur{background:#e7f2e7;border-left-color:#2e7d32}
.zk2g li a.cur .wa{color:#1b5e20;font-weight:bold}
.topnav{background:#1b5e20;border-bottom:1px solid #a5d6a7}
.topnav a:hover{background:#2e7d32}
.sch-btn{background:#2e7d32}
.sch{background:#f7fbf7;color:#234}
.sch input{background:#fff;color:#234;border:1px solid #cfe0cf}
.srow{border-bottom:1px solid #e3efe3}
.srow .sn a{color:#1b5e20}
.drawer{background:#fbfdfb;color:#234;border-right:1px solid #dce8dc}
.dw-head{background:#2e7d32}
.drawer a{color:#2a3a2a}
.drawer a:hover{background:#eef6ee;border-left-color:#2e7d32}
.dw-sec{border-bottom:1px solid #e3efe3}
.dw-sec h5{color:#6a8a6a}
/* 白スキンのアコーディオン (カテゴリ menu) */
.drawer details.zk2g summary,.side details.zk2g summary{color:#2e7d32}
.drawer .zk2g li a .wa,.side .zk2g li a .wa{color:#2a5c2a}
.side details.zk2g{border-bottom:1px solid #e3efe3}
.side .zk2g li a:hover{background:#eef6ee;border-left-color:#2e7d32}
.side .zk2g li a:hover .wa{color:#1b5e20}
.side .zk2g li a.cur{background:#e7f2e7;border-left-color:#2e7d32}
.side .zk2g li a.cur .wa{color:#1b5e20;font-weight:bold}
.drawer .zk2g li a:hover{background:#eef6ee;border-left-color:#2e7d32}
.drawer .zk2g li a:hover .wa{color:#1b5e20}
@media (max-width:768px){
 .side{float:none!important;width:100%!important}
 .contents{float:none!important;width:100%!important}
}

@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}