
.hx{margin:28px 0 32px}
.hx-box{border:1px solid var(--line,#d2d2d7);border-top:3px solid #8c1d2f;background:#fff;padding:20px 16px 16px}
.hx-h{font-family:var(--font-display);font-size:0.6rem;font-weight:800;letter-spacing:0.2em;color:#8c1d2f;margin-bottom:4px}
.hx-t{font-size:0.98rem;font-weight:900;line-height:1.5;margin-bottom:16px;color:#1d1d1f}
.hx-n{font-size:0.74rem;color:#6b6b70;line-height:1.7;margin-top:14px;padding-top:11px;border-top:1px solid #eee}
/* ---- 数字 ---- */
.hxn{display:flex;flex-wrap:wrap;margin:26px 0 30px;border-top:1px solid #1d1d1f;border-bottom:1px solid #e5e2e3}
.hxn-i{flex:1 1 33%;min-width:0;padding:14px 10px 13px 0;border-right:1px solid #eeeaec}
.hxn-i:last-child{border-right:none}
.hxn-i+.hxn-i{padding-left:12px}
.hxn-k{font-family:var(--font-display);font-size:0.54rem;font-weight:800;letter-spacing:0.16em;color:#8c1d2f;margin-bottom:5px}
.hxn-v{font-size:1.55rem;font-weight:900;line-height:1.05;letter-spacing:-0.01em;color:#1d1d1f;white-space:nowrap}
.hxn-v small{font-size:0.62rem;font-weight:800;margin-left:2px;color:#1d1d1f}
.hxn-d{font-size:0.66rem;color:#6b6b70;line-height:1.5;margin-top:5px}
@media (max-width:520px){.hxn-i{flex:1 1 50%;border-right:none;border-bottom:1px solid #eeeaec;padding-left:0 !important}
 .hxn-i:nth-child(odd){border-right:1px solid #eeeaec;padding-right:12px}.hxn-i:nth-child(even){padding-left:12px !important}
 .hxn-i:nth-last-child(-n+2){border-bottom:none}.hxn-v{font-size:1.38rem}}
/* ---- 年表 ---- */
.hxt{position:relative;padding:4px 0 4px 0}
.hxt-track{position:absolute;left:66px;top:8px;bottom:8px;width:2px;background:#ece8ea}
.hxt-fill{position:absolute;left:66px;top:8px;width:2px;height:100%;background:linear-gradient(#8c1d2f,#12325c);transform-origin:top;max-height:calc(100% - 16px)}
.hxt-era{position:relative;margin:14px 0 6px 86px;font-family:var(--font-display);font-size:0.56rem;font-weight:800;letter-spacing:0.18em;color:#8a8a8f}
.hxt-era:first-child{margin-top:0}
.hxt-r{position:relative;display:flex;align-items:flex-start;padding:7px 0}
.hxt-y{flex:0 0 56px;text-align:right;font-size:0.7rem;font-weight:900;color:#12325c;padding-top:2px;line-height:1.25;font-variant-numeric:tabular-nums;word-break:break-all}
.hxt-d{position:absolute;left:61px;top:11px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #cfc9cc;transition:all .35s ease;z-index:1}
.hxt-b{flex:1;min-width:0;margin-left:30px;padding-left:0}
.hxt-b b{display:block;font-size:0.86rem;font-weight:900;line-height:1.45}
.hxt-b span{display:block;font-size:0.72rem;color:#6b6b70;line-height:1.6;margin-top:2px}
.hxt-r.key .hxt-b b{color:#8c1d2f}
.hxt-r.on .hxt-d{background:#8c1d2f;border-color:#8c1d2f;box-shadow:0 0 0 4px rgba(140,29,47,.14)}
.hxt-r.key.on .hxt-d{transform:scale(1.25)}
.hx.anim .hxt-r{opacity:.38;transition:opacity .4s ease}
.hx.anim .hxt-r.on{opacity:1}
/* ---- カード ---- */
.hxc{display:flex;flex-wrap:wrap;margin:0 -4px}
.hxc-i{flex:1 1 46%;min-width:140px;margin:4px;border:1px solid #ece8ea;border-radius:6px;padding:12px 12px 11px;background:#fff;position:relative;overflow:hidden}
.hxc-i:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#8c1d2f}
.hxc-k{font-family:var(--font-display);font-size:0.54rem;font-weight:800;letter-spacing:0.16em;color:#8c1d2f;margin-bottom:4px}
.hxc-b{font-size:0.86rem;font-weight:900;line-height:1.45}
.hxc-s{font-size:0.72rem;color:#555;line-height:1.65;margin-top:5px}
.hx.anim .hxc-i{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.hx.anim.on .hxc-i{opacity:1;transform:none}
/* ---- 棒 ---- */
.hxb-r{margin-bottom:12px}
.hxb-l{display:flex;justify-content:space-between;align-items:baseline;font-size:0.78rem;margin-bottom:5px}
.hxb-l b{font-weight:900}
.hxb-l em{font-style:normal;font-weight:900;color:#8c1d2f;font-variant-numeric:tabular-nums}
.hxb-tr{height:12px;border-radius:6px;background:#f1eef0;overflow:hidden}
.hxb-f{height:100%;border-radius:6px;background:#8c1d2f;transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
.hxb-f.alt{background:#12325c}.hxb-f.sub{background:#b8b3b6}
/* ---- 系譜図 ---- */
.hxg svg{width:100%;height:auto;display:block;overflow:visible}
.hxg .ln{fill:none;stroke:#c9c3c6;stroke-width:1.6}
.hxg .ln.hot{stroke:#8c1d2f;stroke-width:2}
.hx.anim .hxg .ln{stroke-dasharray:var(--l,300);stroke-dashoffset:var(--l,300);transition:stroke-dashoffset .8s ease}
.hx.anim.on .hxg .ln{stroke-dashoffset:0}
.hx.anim .hxg .nd{opacity:0;transition:opacity .5s ease}
.hx.anim.on .hxg .nd{opacity:1}
/* ---- 引用 ---- */
.hxq{margin:30px 0;padding:22px 20px 18px;background:#1d1d1f;color:#fff;border-radius:4px;position:relative}
.hxq:before{content:"\201C";position:absolute;left:14px;top:-6px;font-size:3.6rem;line-height:1;color:#8c1d2f;font-family:Georgia,serif}
.hxq p{font-size:1.02rem;font-weight:800;line-height:1.75;margin:6px 0 10px;color:#fff}
.hxq cite{font-style:normal;font-size:0.72rem;color:#b8b3b6}
/* ---- ピラミッド ---- */
.hxp{position:relative;padding:6px 0 2px}
.hxp-r{display:flex;justify-content:center;margin-bottom:5px}
.hxp-b{height:34px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.68rem;font-weight:800;
 white-space:nowrap;overflow:hidden;transform-origin:center;padding:0 6px}
.hxp-b small{font-weight:700;opacity:.8;margin-left:6px;font-size:0.62rem}
.hxp-io{display:flex;justify-content:space-between;margin-top:10px;font-size:0.72rem;font-weight:800}
.hxp-io span:first-child{color:#12325c}.hxp-io span:last-child{color:#8c1d2f}
.hx.anim .hxp-b{transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.hx.anim.on .hxp-b{transform:scaleX(1)}
.hx:not(.anim) .hxt-r.key .hxt-d{background:#8c1d2f;border-color:#8c1d2f}
/* ---- 縦棒 ---- */
.hxv{display:flex;align-items:flex-end;padding:22px 0 0}
.hxv-c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;margin-right:5px}
.hxv-c:last-child{margin-right:0}
.hxv-a{height:170px;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.hxv-v{font-size:0.62rem;font-weight:900;margin-bottom:4px;white-space:nowrap;color:#1d1d1f;font-variant-numeric:tabular-nums}
.hxv-r{width:100%;max-width:34px;background:#8c1d2f;border-radius:3px 3px 0 0;transition:height 1s cubic-bezier(.2,.8,.3,1)}
.hxv-c.old .hxv-r{background:#c9a0a7}
.hxv-c.est .hxv-r{background:#fff;border:2px dashed #8c1d2f;border-bottom:none}
.hxv-c.est .hxv-v{color:#8c1d2f}
.hxv-l{font-size:0.58rem;color:#6b6b70;margin-top:6px;text-align:center;line-height:1.3;min-height:2.6em}
@media (prefers-reduced-motion:reduce){.hx *{transition:none !important;animation:none !important}}
