/* NetChai HSK単語習得コース HTML版 共有CSS（PDF教科書デザイン再現・自動生成） */
:root{--blue:#2871b9;--blue-d:#1f5f9e;--orange:#dd8a33;--ink:#1f2937;--mute:#8b929c;--card:#f2f6fb;--rule:#e1e7f0;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#eef1f5;-webkit-font-smoothing:antialiased}
body{font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Yu Gothic",Meiryo,sans-serif;color:var(--ink);line-height:1.7}
.hv-page{max-width:900px;margin:24px auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 30px rgba(40,113,185,.13)}
.hv-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 34px;background:#f4f7fb}
.hv-nav.top{border-bottom:1px solid var(--rule)}
.hv-nav.bottom{border-top:1px solid var(--rule)}
.hv-nav-b{font-size:13.5px;font-weight:700;padding:7px 15px;border-radius:6px;text-decoration:none;white-space:nowrap}
a.hv-nav-b.toc{background:var(--blue);color:#fff}
a.hv-nav-b.toc:hover{background:var(--blue-d)}
a.hv-nav-b.prev,a.hv-nav-b.next{color:var(--blue-d);border:1.5px solid var(--blue);background:#fff}
a.hv-nav-b.prev:hover,a.hv-nav-b.next:hover{background:var(--blue);color:#fff}
.hv-nav-b.disabled{color:#aeb4bd;border:1.5px solid #dde1e7;background:#f3f4f6;cursor:default}
.hv-head{display:flex;align-items:center;gap:16px;padding:18px 34px;border-bottom:3px solid var(--blue)}
.hv-logo{flex-shrink:0;border:2px solid var(--blue);color:var(--blue);font-weight:900;font-size:17px;padding:7px 13px;border-radius:8px}
.hv-head__t{flex:1}
.hv-head__t .main{font-size:17px;font-weight:800;color:var(--ink)}
.hv-head__t .sub{font-size:12.5px;color:var(--mute);font-weight:600;margin-top:3px}
.hv-range{flex-shrink:0;background:var(--blue);color:#fff;font-weight:800;font-size:14px;letter-spacing:.02em;padding:6px 18px;border-radius:999px}
.hv-body{padding:22px 34px 28px}
.hv-item{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:16px 22px 18px;margin:0 0 16px}
.hv-item .no{position:absolute;top:15px;right:20px;color:var(--blue);font-weight:800;font-size:13px}
.hv-wtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hv-item .pinyin{font-family:"Times New Roman",Georgia,serif;font-style:italic;color:var(--orange);font-size:21px;letter-spacing:.02em;font-weight:700}
.hv-item .pos{display:inline-block;background:#f1f2f4;color:#6b7280;font-size:12px;font-weight:700;padding:3px 13px;border-radius:999px;border:1px solid #e3e5e9}
.hv-item .word{font-size:38px;font-weight:900;color:#1a1a1a;letter-spacing:.12em;line-height:1.2;margin:7px 0 13px}
.hv-row{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:start;margin:7px 0;font-size:17px;line-height:1.75}
.hv-tag{display:inline-block;text-align:center;font-size:13px;font-weight:700;padding:4px 11px;border-radius:4px;line-height:1.3;white-space:nowrap}
.hv-row.tr-mean .hv-tag{background:var(--blue);color:#fff}
.hv-row.tr-ex .hv-tag{background:var(--orange);color:#fff}
.hv-row.tr-ja .hv-tag{background:#fff;color:var(--blue);border:1.5px solid var(--blue);padding:2.5px 9px}
.hv-row .txt{color:var(--ink)}
.hv-row .txt .hl{color:var(--blue);font-weight:700}
.hv-foot{padding:14px 34px;border-top:1px solid var(--rule);color:var(--mute);font-weight:600;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;background:#fff}
@media (max-width:640px){.hv-page{margin:0;border-radius:0}.hv-head,.hv-nav,.hv-body,.hv-foot{padding-left:16px;padding-right:16px}.hv-item .word{font-size:30px}.hv-row{grid-template-columns:74px 1fr;font-size:15.5px}}