@charset "UTF-8";
/* CSS Document */

.jl-hbar{
  --red:#cc0000; --red-bg:#ffdccc; --gray:#bbbbbb;
  --text:#333333; --sub:#666666; --axis:#999999;
  margin:2em 0; color:var(--text); font-family:inherit; line-height:1.6;
}
.jl-hbar *,.jl-hbar *::before,.jl-hbar *::after{box-sizing:border-box}
:where(.jl-hbar) p{margin:0}
.jl-hbar__lead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:22px 0 22px;padding:10px 20px; background:var(--red-bg)}
.jl-hbar__lead-label{font-size:1rem;font-weight:600}
.jl-hbar__lead-value{font-size:2.1rem;font-weight:600;line-height:1.2;color:var(--red)}
.jl-hbar__lead-n{font-size:.85rem;color:var(--sub)}
.jl-hbar__chart{position:relative}
.jl-hbar__chart::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--lw) + 0px);width:1px;background:var(--axis)}
.jl-hbar__chart{--lw:240px}
.jl-hbar__row{display:flex;align-items:center;min-height:48px;padding:4px 0;outline:none}
.jl-hbar__label{flex:0 0 var(--lw);padding-right:0.4em;text-align:right;font-size:.9rem;line-height:1.2}
.jl-hbar__track{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px}
.jl-hbar__fill{position:relative;flex:none;height:32px;background:var(--red);transition:filter .15s}
.jl-hbar__fill--none{background:var(--gray)}
.jl-hbar__num{flex:none;font-size:0.9rem;font-weight:600;white-space:nowrap}
.jl-hbar__sep{height:0;margin:6px 0;border-top:1.5px dashed #bbbbbb}
/* ツールチップ */
.jl-hbar__fill::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  padding:4px 10px;border-radius:6px;background:#333;color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:2
}
.jl-hbar__row:hover .jl-hbar__fill,.jl-hbar__row:focus .jl-hbar__fill{filter:brightness(1.25)}
.jl-hbar__row:hover .jl-hbar__fill::after,.jl-hbar__row:focus .jl-hbar__fill::after{opacity:1}


@media (max-width:600px){
  .jl-hbar__title{font-size:1.1rem}
  .jl-hbar__lead{padding:10px 14px}
  .jl-hbar__lead-value{font-size:1.7rem}
  .jl-hbar__chart{--lw:0px}
  .jl-hbar__chart::before{display:none}
  .jl-hbar__row{flex-wrap:wrap;padding:6px 0}
  .jl-hbar__label{flex:1 0 100%;padding:0 0 4px;text-align:left;font-size:.88rem}
  .jl-hbar__label br{display:none}
  .jl-hbar__fill{height:24px}
  .jl-hbar__num{font-size:.9rem}
}