/* NetChai 成語コース HTML版 共有CSS（自動生成・2026-05-30） */
:root{--cc-blue:#1e3a8a;--cc-blue-d:#15296b;--cc-gold:#eab308;--cc-aqua:#5ec5e8;--cc-aqua-d:#43b3d9;
  --cc-ink:#1f2533;--cc-paper:#eef2f8;--cc-card:#fff;--cc-rule:#e5e7eb;--cc-mute:#6b7280;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cc-paper);-webkit-font-smoothing:antialiased}
body{font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Yu Gothic",Meiryo,sans-serif;color:var(--cc-ink);line-height:1.7}
.cc-page{max-width:880px;margin:28px auto;background:var(--cc-card);border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(0,120,215,.14)}
.cc-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 28px;background:#f6f9fd}
.cc-nav.top{border-bottom:1px solid var(--cc-rule)}
.cc-nav.bottom{border-top:1px solid var(--cc-rule)}
.cc-nav-b{font-size:14px;font-weight:800;padding:8px 16px;border-radius:6px;text-decoration:none;white-space:nowrap}
a.cc-nav-b.toc{background:var(--cc-blue);color:#fff}
a.cc-nav-b.toc:hover{background:var(--cc-blue-d)}
a.cc-nav-b.prev,a.cc-nav-b.next{color:var(--cc-blue-d);border:1.5px solid var(--cc-blue);background:#fff}
a.cc-nav-b.prev:hover,a.cc-nav-b.next:hover{background:var(--cc-blue);color:#fff}
.cc-nav-b.disabled{color:#aeb6bf;border:1.5px solid #d8dde3;background:#f3f4f6;cursor:default}
.cc-head{display:flex;align-items:center;gap:18px;padding:22px 28px;border-bottom:3px solid var(--cc-blue)}
.cc-logo{flex-shrink:0;border:2px solid var(--cc-blue);color:var(--cc-blue);font-weight:900;font-size:18px;padding:8px 14px;border-radius:10px}
.cc-head__t{flex:1}
.cc-head__t .main{font-size:18px;font-weight:900;color:var(--cc-ink)}
.cc-head__t .sub{font-size:13px;color:var(--cc-mute);font-weight:700;margin-top:2px}
.cc-range{flex-shrink:0;background:var(--cc-gold);color:#1e3a8a;font-weight:900;font-size:14px;letter-spacing:.04em;padding:6px 16px;border-radius:999px}
.cc-body{padding:22px 28px 30px}
.cc-item{position:relative;background:#fff;border:1px solid var(--cc-rule);border-left:5px solid var(--cc-blue);border-radius:10px;padding:16px 20px 18px;margin:0 0 16px;box-shadow:0 2px 8px rgba(0,120,215,.06)}
.cc-item .no{position:absolute;top:14px;right:18px;color:var(--cc-blue);font-weight:900;font-size:13px}
.cc-item .pinyin{font-family:"Times New Roman",serif;font-style:italic;color:var(--cc-blue);font-size:18px;letter-spacing:.04em;font-weight:600}
.cc-item .word{font-size:34px;font-weight:900;color:var(--cc-ink);letter-spacing:.1em;line-height:1.25;margin:2px 0 12px}
.cc-row{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;margin:6px 0;font-size:15.5px}
.cc-tag{display:inline-block;text-align:center;color:#fff;font-size:12px;font-weight:800;padding:3px 0;border-radius:5px;line-height:1.4}
.cc-row.tr-mean .cc-tag{background:var(--cc-blue)}
.cc-row.tr-ex .cc-tag{background:#3b5fa8}
.cc-row.tr-ja .cc-tag{background:#7a8aa0}
.cc-row .txt .hl{color:var(--cc-blue);font-weight:800}
.cc-row.tr-ja .txt{color:#33415a}
.cc-foot{padding:14px 28px;background:var(--cc-blue);color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center}
.cc-foot small{font-weight:600;opacity:.9}
@media (max-width:600px){.cc-page{margin:0;border-radius:0}.cc-head{flex-wrap:wrap;gap:10px}.cc-item .word{font-size:28px}.cc-row{grid-template-columns:58px 1fr}.cc-nav{padding:12px 16px;gap:6px}.cc-nav-b{padding:7px 10px;font-size:12.5px}}