/* =======================================================================
setting
======================================================================= */
/** PCSP ****/
:root {
  --baseFont: 'Noto Sans JP', sans-serif;
  --titleFont: 'Noto Serif JP', sans-serif;
  
  --hoverTransition: opacity .3s ease;
  --hoverOpacity: .6;
  --spSetSize: (10 * (100vw / 750));
  
  --black: #231815;
  --gray: #574F4C;
  --lightGray: #8A827E;
  --yellow: #FBC51E;
  --bgColor: #F7F4EE;
  --lineColor: #E2DCD0;
  --lineColorSoft: #EEEAE1;
  
  --contentsWidth: 1200px;
  --contentsPadding: 7.2rem;
  
  --sand-mist:#F7F4EE;
  --paper:#FFFFFF;
  --ink:#231815;
  --ink-soft:#574F4C;
  --ink-faint:#726963;
  --line:#E2DCD0;
  --line-soft:#EDE8DE;
  --sand-1:#EFE9DD;
  --sand-2:#E5DBC9;
  --taupe:#B5A995;

  --mincho:"Noto Serif JP","Hiragino Mincho ProN",serif;
  --gothic:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --fs-h1:3.4rem;
  --fs-h2:2.6rem;
  --fs-h3:1.9rem;
  --fs-h4:1.7rem;
  --fs-body:1.6rem;
  --fs-small:1.4rem;
  --fs-min:1.25rem;
  --lh-body:1.9;
  --lh-head:1.5;
}


@media screen and (max-width: 750px) {
  :root {
    --contentsPadding: 1.5rem;

    --fs-h1:2.4rem;
    --fs-h2:1.8rem;
    --fs-h3:1.6rem;
    --fs-h4:1.4rem;
    --fs-body:1.6rem;
    --fs-small:1.2rem;
    --fs-min:1.1rem;
  }
}

/**************************************
common
**************************************/
.bar-row{
  display:grid;
  grid-template-columns:12rem 1fr 5.2rem;
  gap: 1rem;
  align-items:center;
  margin:0.6rem 0;
  font-size:var(--fs-small);
}

.bar-track{
  height:1.8rem;
  background:var(--sand-mist);
  border:1px solid var(--line-soft)
}

.bar{
  display:block;
  height:100%;
  background:var(--sand-2);
}

.bar.em{background:var(--yellow);}

.bar-val{
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--gray);
}

.fig-note{
  font-size:var(--fs-min);
  color:var(--ink-faint);
  margin-top:0.8rem;
}