:root{
  --bg:#ffffff;
  --text:#a9b6c8;
  --muted:#7e8aa0;
  --barH:26px;
  --gap:14px;
  --radius:2px;
  --maxW:560px;
}


/* ======================
   Q8: 勤続年数（.chart）
====================== */
.chartBarWrap{ overflow:hidden; }
.chartCenter{
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}
.chart{
  background: transparent;
  padding: 0;
  width: 100%;
  color: inherit;
}

.chart__head{
  display:flex;
  justify-content:center;
  margin-bottom:50px;
}

.chart__title{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.chart__label{
  font-size:23px;
  font-weight:700;
  color:#111;
  letter-spacing:0.02em;
}

.chart__big{
  font-size:56px;
  letter-spacing:0.02em;
  color:#0c4ea2;
  line-height:1;
  font-weight: 600;
}

.chart__unit{
  font-size:26px;
  font-weight:800;
  color:#111;
  letter-spacing:0.02em;
}

.barChart{
  display:grid;
  gap:var(--gap);
}

.chartRow{
  display:grid;
  grid-template-columns: 180px 1fr;
  align-items:center;
  gap:16px;
}

.chartLabel{
  font-size:20px;
  color:#111;
  white-space:nowrap;
  font-weight: 400;
}

.chartBarWrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.chartBar{
  height:var(--barH);
  width:0;
  border-radius:var(--radius);
  transition: width 900ms cubic-bezier(.2,.8,.2,1);
  will-change: width;
}

.chartValue{
  min-width:64px;
  font-size:23px;
  color:#111;
  font-weight: 600;
}

@media (max-width: 560px){
  :root{ --maxW: 100%; }
  .chartRow{ grid-template-columns: 1fr; gap:4px; }
  .chart__big{ font-size:44px; }
  .chartBarWrap{ gap:10px; }
   .chartBar{
    flex: 0 0 auto;
    width: 0;
       white-space: normal; 
  }
    .chart__head{
  display:flex;
  justify-content:center;
  margin: 10px 0 15px;
}
    .chart__label{
  font-size:20px;
  font-weight:700;
  color:#111;
  letter-spacing:0.02em;
}
    .chart__unit{
  font-size:20px;
  font-weight:800;
  color:#111;
  letter-spacing:0.02em;
}
    .chartLabel{
  font-size:16px;
  color:#111;
  font-weight:500;
  white-space:nowrap;
}
}

@media (prefers-reduced-motion: reduce){
  .chartBar{ transition:none; }
}

/* ======================
   Q5：中央配置
====================== */
#data_q05{
  display:flex;
  flex-direction:column;
}
#data_q05 > h2{ flex:0 0 auto; }

#data_q05 .dataCenter05{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

/* ======================
   Q5：ドーナツ（donut05）
====================== */
.donut05{
  position:relative;
  width:min(480px, 100%);
  aspect-ratio: 1 / 1;
  background:#fff;
  opacity:0;
  transition: opacity 500ms ease;
}
.donut05.is-show{
  opacity:1;
}

.donut05__svg{
  position:absolute;
  inset:0;
  z-index:1;
}
.donut05__overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:3;
}

.donut05__center{
  position:absolute;
  inset: 30% 30%;
  background:#fff;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:4;
}

.donut05__centerLabel{
  font-weight: 500;
    font-size: 23px;
    color: #111;
    letter-spacing: .08em;
}
.donut05__age{
  font-size:43px;
  color:#0c4ea2;
  line-height:1;
  font-weight: 600;
}
.donut05__ageUnit{
  font-size:28px;
  font-weight:900;
  color:#0c4ea2;
  margin-left:3px;
}
.donut05 .pct{
  fill:#fff;
  font-size:26px;
  opacity:0;
  transition: opacity 350ms ease;
  font-weight: 600;
}
.donut05.is-show .pct{
  opacity:1;
}
@media (max-width: 768px){
  .donut05__age{ font-size:30px; }
  .donut05__ageUnit{ font-size:18px; }
    .donut05 .pct{ font-size:26px; }
    
.donut05__centerLabel{
  font-weight: 500;
    font-size: 15px;
    color: #111;
    letter-spacing: .08em;
}
}


/* ======================
   Q12：中央配置
====================== */
#data_q12{
  display:flex;
  flex-direction:column;
}
#data_q12 > h2{ flex:0 0 auto; }

#data_q12 .dataCenter12{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

/* ======================
   Q12：ピザ（pie12）
====================== */
.pie12{
  position:relative;
  width:min(520px, 100%);
  aspect-ratio: 1 / 1;
  background:#fff;

  opacity:0;
  transition: opacity 500ms ease; 
}
.pie12.is-show{
  opacity:1;
}

.pie12__svg{
  position:absolute;
  inset:0;
  z-index:1;
}
.pie12__overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:3;
}

/* 内側の%文字（白） */
.pie12 svg{ width:100%; height:100%; display:block; }
.pie12 .pct{
  fill:#fff;
  font-size:28px;
  font-weight: 600;
}
@media (max-width: 768px){
  .pie12 .pct{ font-size:26px; }
}




/* ======================
   Q1: ランキング棒（.rankbar）
====================== */
.rankbar{
  width:min(1024px, 100%);
  background:#fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}

.rankbar__item{
  display:grid;
  grid-template-columns: 72px 1fr 360px;
  align-items:center;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid rgba(0,0,0,.04);

  opacity:0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.rankbar__item.is-show{
  opacity:1;
  transform: translateY(0);
}

.rankbar__badge{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
}
.rankbar__badge svg{
  width:64px;
  height:64px;
  display:block;
}

.rankbar__text{
  display:flex;
  align-items:baseline;
  gap:14px;
  min-width:0;
}
.rankbar__reason{
  font-size:26px;
  font-weight:800;
  color:#111;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rankbar__dots{
  flex:1;
  border-bottom:4px dotted rgba(0,0,0,.25);
  transform: translateY(-4px);
}

.rankbar__graph{
  position:relative;
  height:88px;
  background:#cfe3fb;
  overflow:hidden;
}
.rankbar__bar{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  height:100%;
  background:#b8d3f6;
  transition: width 900ms cubic-bezier(.2,.8,.2,1);
  will-change: width;
}
.rankbar__value{
  position:absolute;
  top:50%;
  left:22px;
  transform: translateY(-50%);
  font-size:54px;
  font-weight:900;
  letter-spacing:0.02em;
  color:#143f8f;
  line-height:1;
  pointer-events:none;
}
.rankbar__value small{ font-size:0.75em; margin-left:4px; }

@media (max-width: 768px){
  .rankbar__item{
    grid-template-columns: 58px 1fr;
    grid-template-rows: auto auto;
    gap:12px 14px;
    padding:14px 0;
  }
  .rankbar__graph{ grid-column:1 / -1; height:70px; }
  .rankbar__reason{ font-size:18px; }
  .rankbar__value{ font-size:40px; left:16px; }
  .rankbar__badge svg{ width:54px; height:54px; }
}

@media (prefers-reduced-motion: reduce){
  .rankbar__item{ transition:none; }
  .rankbar__bar{ transition:none; }
}





/* ===================================================
   Q10: 創立（anniv）
   - 1938年創業 + ケーキ + 今年で◯年
   - 画面に入ったらカウントアップ + 画像ポンッ + 「年」スッ
=================================================== */

.anniv{
width: min(420px, 100%);
    margin: 0 auto;
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.anniv__top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.anniv__start{
  font-size:40px;
  letter-spacing:0.02em;
  line-height:1.05;
  color:#111;
  font-weight: 500;
}

.anniv__icon{
  width:110px;
  opacity:0;
  transform: scale(.92);
  transform-origin: center;
}

.anniv__icon img{
  width:100%;
  height:auto;
  display:block;
}

/* 下段 */
.anniv__bottom{
  margin-top: 18px;
  display:flex;
  align-items: baseline;
  gap:16px;
}

.anniv__sub{
  font-size:26px;
  font-weight:900;
  color:#111;
  line-height:1.2;
}

.anniv__main{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.anniv__num{
  font-size:130px;
  color:#1f5ea7;
  line-height:1;
  letter-spacing:0.01em;
  font-weight: 600;
}

.anniv__unit{
  font-size:52px;
  font-weight:900;
  color:#1f5ea7;
  opacity:0;
  transform: translateX(-6px);
}

/* ▼アニメ：表示された状態 */
.anniv.is-show .anniv__icon{
  opacity:1;
  transform: scale(1);
  transition: opacity 350ms ease, transform 650ms cubic-bezier(.2,.9,.2,1);
  animation: anniv-pop 700ms cubic-bezier(.2,.9,.2,1) 1;
}

.anniv.is-show .anniv__unit{
  opacity:1;
  transform: translateX(0);
  transition: opacity 350ms ease 200ms, transform 500ms ease 200ms;
}

@keyframes anniv-pop{
  0%   { transform: scale(.86); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* レスポンシブ */
@media (max-width: 768px){
  .anniv__start{ font-size:23px; }
  .anniv__icon{ width:50px; }
  .anniv__sub{ font-size:22px; }
  .anniv__num{ font-size:100px; }
  .anniv__unit{ font-size:42px; }
    .anniv__bottom{
  margin-top: 18px;
  display:flex;
  align-items: baseline;
  gap:16px;
        margin: 0 0 15px;
}
}

/* 動き軽減 */
@media (prefers-reduced-motion: reduce){
  .anniv__icon,
  .anniv__unit{
    transition:none !important;
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ======================
   Q9: 職種比率（ratio9）
====================== */

.ratio9{
  width: min(900px, 100%);
  background:#fff;
}

.ratio9__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
}

/* ======================
   ▼ デフォルト → 縦積み
====================== */
.ratio9__item{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 20px 20px;
  min-height: 170px;

  opacity:0;
  transition: opacity 500ms ease;
  text-align:center;
}

.ratio9__item.is-show{
  opacity:1;
}

/* ======================
   ▼ 営業職だけ横並びに戻す
====================== */
.ratio9__item--sales{
   grid-column: 1 / -1;
  display:grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 30px;
  text-align:center;
  border-bottom: 2px dotted rgba(0,0,0,.35);
}

/* ======================
   ▼ デザイナー区切り線
====================== */
.ratio9__item--design{
  border-right: 2px dotted rgba(0,0,0,.35);
}
/* 営業職 */
.ratio9__item--sales .ratio9__icon img{
  width: 130px;
  max-width:130px;
}
.ratio9__item--sales .ratio9__label{
  font-size: 28px;
}
.ratio9__item--sales .ratio9__value{
  font-size: 78px;
}


/* アイコン */
.ratio9__icon img{
  width: 100px;
  max-width:100px;
  height:auto;
  display:block;
}

/* テキスト */
.ratio9__label{
  font-size: 23px;
  font-weight: 500;
  margin:0;
  line-height:1.2;
}

.ratio9__value{
  font-size: 64px;
  line-height: 1;
  display:inline-flex;
  align-items:baseline;
  font-weight: 600;
}

.ratio9__unit{
  font-size:.85em;
  margin-left:6px;
}




/* ======================
   ▼ SP
====================== */
@media (max-width: 768px){
  .ratio9__grid{
    grid-template-columns: 1fr;
  }

  /* 全アイテム共通レイアウト */
  .ratio9__item{
    display:grid;
    grid-template-columns: auto 1fr;
    align-items:center;
    column-gap: 14px;

    padding:10px 10px;
    min-height:auto;
    text-align:left;

    border-bottom: 2px dotted rgba(0,0,0,.20);
  }
  .ratio9__item:last-child{
    border-bottom:none;
  }

  /* 営業職だけ特別指定を解除 */
  .ratio9__item--sales{
    grid-column:auto;
    grid-template-columns: auto 1fr;
    border-bottom: 2px dotted rgba(0,0,0,.20);
  }

  /* 縦点線消す */
  .ratio9__item--design{
    border-right:none;
  }

  /* アイコン */
  .ratio9__icon img{
    width:78px; 
    max-width:78px;
  }

  /* メタ */
  .ratio9__meta{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
  }

  /* 職種 */
  .ratio9__label{
    font-size:18px;
  }

  /* ％ */
  .ratio9__value{
    font-size:44px;
    display:flex;
    justify-content:flex-end;
    align-items:baseline;
  }
    
    
    /* 営業職 */
.ratio9__item--sales .ratio9__icon img{
  width: 78px;
  max-width:78px;
}
.ratio9__item--sales .ratio9__label{
  font-size: 18px;
}
.ratio9__item--sales .ratio9__value{
  font-size: 50px;
}
}

/* ======================
   Q11：中央配置（h2下の残りを中央）
====================== */
#data_q11{
  display:flex;
  flex-direction:column;
}
#data_q11 > h2{ flex:0 0 auto; }
#data_q11 > p { flex:0 0 auto; }

#data_q11 .dataCenter11{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

/* ======================
   Q11: 有給取得率（paid11）
====================== */
.paid11{
  position:relative;
  width:min(820px, 100%);
  background:#fff;
  padding: 10px 10px 0;
}

.paid11__icon{
  position:absolute;
  width: 100px;
  height: 100px;
}
.paid11__icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.paid11__icon--tl{ left: 10px; top: 10px; }
.paid11__icon--br{ right: 10px; bottom: 40px; }

.paid11__main{
  text-align:center;
  padding: 10px 0 10px;
}

.paid11__block{ margin: 14px 0; }

.paid11__label{
    font-weight: 400;
    font-size: 23px;
    color: #111;
    letter-spacing: .06em;
}

.paid11__rate{
  margin-top: 6px;
  line-height: 1;
  color:#0c4ea2;
  font-size: 60px;
  font-weight: 600;
}
.paid11__unit{
  font-size:.85em;
  margin-left: 6px;
}

.paid11__foot{
  margin-top: 14px;
  font-weight: 400;
  color:#111;
  letter-spacing:.04em;
}
.paid11__footLabel{
  margin-right: 10px;
  font-size: 23px;
}
.paid11__footNum{
  font-size: 23px;
  margin: 0 4px;
  font-weight: 400;
}
.paid11__footUnit{
  font-size: 23px;
  font-weight: 400;
}

/* フェード表示（他と統一） */
.paid11{
  opacity:0;
 transition: opacity 500ms ease;
}
.paid11.is-show{
  opacity:1;
}

@media (max-width: 768px){
  .paid11__icon{ width: 50px; height: 50px; }
  .paid11__rate{ font-size: 44px; }
  .paid11__label{ font-size: 16px; }

.paid11__footLabel{
  margin-right: 10px;
  font-size: 16px;
}
.paid11__footNum{
  font-size: 16px;
  font-weight: 400;
  margin: 0 4px;
}
.paid11__footUnit{
  font-size: 16px;
  font-weight: 400;
}
}
/* ======================
   Q7：中央配置
====================== */
#data_q07{
  display:flex;
  flex-direction:column;
}
#data_q07 > h2{ flex:0 0 auto; }
#data_q07 > p { flex:0 0 auto; }

#data_q07 .dataCenter07{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
/* ======================
   Q7：中央配置
====================== */
#data_q07{
  display:flex;
  flex-direction:column;
}
#data_q07 > h2{ flex:0 0 auto; }
#data_q07 > p { flex:0 0 auto; }

#data_q07 .dataCenter07{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

/* ======================
   Q7：新卒・中途比率（ratio07）
====================== */
.ratio07{
  width:min(860px, 100%);
  background:#fff;
  padding: 10px 10px 0;

  opacity:0;
  transition: opacity 500ms ease;
}
.ratio07.is-show{
  opacity:1;
}

/* ======================
   ▼ 上段
====================== */
.ratio07__top{
  display:grid;
  grid-template-columns: 120px 120px;
  justify-content:center;
  align-items:center;
  gap: 40px;
  margin-bottom: 18px;
}

.ratio07__person{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
}

.ratio07__person img{
  width: 100px;
  height: 100px;
  object-fit: contain;
  display:block;
}

.ratio07__subLabel{
  font-size: 18px;
  font-weight: 900;
  color:#111;
}

/* コロン */
.ratio07__colon{
  font-size: 44px;
  font-weight: 900;
  color:#111;
  line-height:1;
  text-align:center;
}

/* ======================
   ▼ 数字ライン
====================== */
.ratio07__numbers{
  display:flex;
  justify-content:center;
  align-items: baseline;
  gap: 18px;
   margin: 0 0 20px;
    position: relative;
}

.ratio07__approxLabel{
  position:absolute;
  top:-12px;
  left:80px;
  font-size:16px;
  font-weight:500;
  letter-spacing:.08em;
}
.ratio07__numBlock{
  display:flex;
  align-items: baseline;
  gap: 6px;
}
/*
.ratio07__approx{
  font-weight: 500;
  font-size: 16px;
  letter-spacing:.08em;
}*/

.ratio07__num{
  line-height: 1;
  font-size: 72px;
  font-weight: 600;
}

.ratio07__num--blue{ color:#0c4ea2; }
.ratio07__num--orange{ color:#e2553f; }

/* ======================
   ▼ 下段：割合バー
====================== */
.ratio07__barWrap{
  display:flex;
  width:100%;
  height: 100px;
  overflow:hidden;
}

.ratio07__bar{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;

  width:50%;
  padding:0 22px;

  transition: width 900ms cubic-bezier(.2, .8, .2, 1);
}

.ratio07__bar--blue{ background:#0c4ea2; }
.ratio07__bar--orange{ background:#e2553f; }

.ratio07__barLabel{
  color:#fff;
  font-weight: 500;
  font-size: 20px;
}

.ratio07__barValue{
  color:#fff;
  font-size: 44px;
  line-height:1;
  font-weight: 600;
}

.ratio07__pct{
  font-size:.85em;
  margin-left: 4px;
}

/* ======================
   ▼ SP
====================== */
@media (max-width: 768px){
.ratio07{
  width:min(860px, 100%);
  background:#fff;
  padding: 10px 0 10px;

  opacity:0;
  transition: opacity 500ms ease;
}
  .ratio07__top{
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .ratio07__person img{
    width: 60px;
    height: 60px;
  }

  .ratio07__colon{
    font-size: 28px;
  }

  .ratio07__numbers{
    gap: 24px;
  }


.ratio07__approxLabel{
  position:absolute;
  top:-12px;
  left:10px;
  font-size:16px;
  font-weight:500;
  letter-spacing:.08em;
}    
  .ratio07__num{
    font-size: 48px;
  }

  .ratio07__barWrap{
    height: 70px;
  }
.ratio07__barLabel{
  color:#fff;
  font-weight: 500;
  font-size: 15px;
}
  .ratio07__barValue{
    font-size: 30px;
  }
}
/* ======================
   Q6：中央配置
====================== */
#data_q06{
  display:flex;
  flex-direction:column;
}
#data_q06 > h2{ flex:0 0 auto; }
#data_q06 > p { flex:0 0 auto; }

#data_q06 .dataCenter06{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
/* ======================
   Q6：中央配置
====================== */
#data_q06{
  display:flex;
  flex-direction:column;
}
#data_q06 > h2{ flex:0 0 auto; }
#data_q06 > p { flex:0 0 auto; }

#data_q06 .dataCenter06{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

/* ======================
   Q6：男女比率（ratio06）
====================== */
.ratio06{
  width:min(860px, 100%);
  background:#fff;
  padding: 10px 10px 0;

  opacity:0;
  transition: opacity 500ms ease;
}
.ratio06.is-show{
  opacity:1;
}

/* ======================
   ▼ 上段（アイコン + ：）
====================== */
.ratio06__top{
  display:grid;
  grid-template-columns: 120px 120px;
  justify-content:center;
  align-items:center;
  gap: 40px;
  margin-bottom: 18px;
}

.ratio06__person{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
}

.ratio06__person img{
  width: 100px;
  height: 100px;
  object-fit: contain;
  display:block;
}

.ratio06__subLabel{
  font-size: 18px;
  font-weight: 900;
  color:#111;
}

/* コロン */
.ratio06__colon{
  font-size: 44px;
  font-weight: 900;
  color:#111;
  line-height:1;
  text-align:center;
}

/* ======================
   ▼ 数字ライン（約 + 数字）を左右に
====================== */
.ratio06__numbers{
  display:flex;
  justify-content:center;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 20px;
    position: relative;
}

.ratio06__approxLabel{
  position:absolute;

  top:-12px; 
  left:80px;

  font-size:16px;
  font-weight:500;
  letter-spacing:.08em;
}
.ratio06__numBlock{
  display:flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.ratio06__approx{
  font-weight: 500;
  font-size: 16px;
  letter-spacing:.08em;
  color:#111;
}

.ratio06__num{
  line-height: 1;
  font-size: 72px;
  font-weight: 600;
}

.ratio06__num--blue{ color:#0c4ea2; }
.ratio06__num--orange{ color:#e2553f; }

/* ======================
   ▼ 下段：割合バー
====================== */
.ratio06__barWrap{
  display:flex;
  width:100%;
  height: 100px;
  overflow:hidden;
}

.ratio06__bar{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;

  width:50%;
  padding:0 22px;

  transition: width 900ms cubic-bezier(.2, .8, .2, 1);
  will-change: width;
}

.ratio06__bar--blue{ background:#0c4ea2; }
.ratio06__bar--orange{ background:#e2553f; }

.ratio06__barLabel{
  color:#fff;
  font-size: 20px;
  
  font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.ratio06__barValue{
  color:#fff;
  font-size: 44px;
  line-height:1;
  font-weight: 600;
}

.ratio06__pct{
  font-size:.85em;
  margin-left: 4px;
}

/* ======================
   ▼ SP
====================== */
@media (max-width: 768px){
.ratio06{
  width:min(860px, 100%);
  background:#fff;
  padding: 10px 0 10px;
  opacity:0;
  transition: opacity 500ms ease;
}
  .ratio06__top{
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .ratio06__person img{
    width: 60px;
    height: 60px;
  }

  .ratio06__colon{
    font-size: 28px;
  }

  .ratio06__numbers{
    gap: 24px;
  }

.ratio06__approxLabel{
  position:absolute;

  top:-12px; 
  left:10px;

  font-size:16px;
  font-weight:500;
  letter-spacing:.08em;
}

  .ratio06__num{
    font-size: 48px;
  }

  .ratio06__barWrap{
    height: 70px;
  }
.ratio06__barLabel{
  color:#fff;
  font-weight: 500;
  font-size: 15px;
}
  .ratio06__barValue{
    font-size: 30px;
  }

  .ratio06__subLabel{
    font-size: 16px;
  }
}