﻿/* ==============================
   数字で見るチュチュアンナ セクション追加調整
   - 有給消化率：グラフを削除しテキストのみに変更
   - 有給消化率の下に「平均残業時間」を配置。見出しと値は育児休暇取得率と同様に縦積み・中央寄せ
   - 左下は「平均年齢」「育児休暇取得率」の2段に変更
     （元の3段（120px×3+gap40px=400px）と合計高さが変わらないよう、2段×190px+gap20px=400pxに調整）
   ============================== */
.number .number_body {
    grid-template-rows: 190px 190px 397px 190px 190px;
    grid-template-areas:
    "holiday pto"
    "retention overtime"
    "gender_ratio gender_ratio"
    "age age_group"
    "childcare age_group";
}

.number .number_body .item.pto .item_inner,
.number .number_body .item.overtime .item_inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.number .number_body .item.childcare .item_inner{
    justify-content: center;
}
.number .number_body .item.childcare .text_2col_item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.number .number_body .item.childcare .text_2col_item .count {
    margin-top: 4px;
    color: #999999;
    font-size: 1.4rem;
    font-weight: bold;
}

@media not screen and (min-width: 801px){
    .number .number_body .item.childcare .text_2col_item .count {
        margin-top: 2px;
        font-size: 1.2rem;
    }
    .number .number_body .item.overtime {
        order: 3;
    }
    .number .number_body .item.gender_ratio {
        order: 4;
    }
    .number .number_body .item.age {
        order: 5;
    }
    .number .number_body .item.childcare {
        order: 6;
    }
    .number .number_body .item.age_group {
        order: 7;
    }
}
