@charset 'utf-8';

/* 数字で見るNICT
--------------------------------------- */
.page-title .sub-nuvi{
  margin:0 auto 80px;
}
.page-title .sub-nuvi ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width:100%;
  border-top:1px solid #d6d6d6;
  border-left:1px solid #d6d6d6;
}
.page-title .sub-nuvi ul li{
  width:calc(100% / 3);
  height:200px;
  border-bottom:1px solid #d6d6d6;
  border-right:1px solid #d6d6d6;
}
.page-title .sub-nuvi ul li:last-child{display:none;}
.page-title .sub-nuvi ul li a{
  display:block;
  width:100%;
  height:100%;
}
.page-title .sub-nuvi ul li .icon{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width:199px;
  height:130px;
  margin:auto;
}
.page-title .sub-nuvi ul li .ttl{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:69px;
  font-size:18px;
  line-height:1.2;
  color:#000;
  text-align:center;
  background-color:#fff;
  transition:color 200ms, background-color 200ms;
}
.page-title .sub-nuvi ul li a:hover .ttl{
  color:#fff;
  background-color:#009dbf;
}
@media screen and (max-width:1217px){
  .page-title .sub-nuvi{width:96%;}
}
.page-title .sub-nuvi ul li .ttl br{display:none;}
@media screen and (max-width:900px){
  .page-title .sub-nuvi ul li .ttl br{display:block;}
}
@media screen and (max-width:750px){
  .page-title .inner{width:100%;}
  .page-title .sub-nuvi{width:100%;}
  .page-title .sub-nuvi ul li{
    width:calc(100% / 2);
  }
  .page-title .sub-nuvi ul li:last-child{display:block;}
  .page-title .sub-nuvi ul li .ttl{
    font-size:24px;
    transition:none;
  }
  .page-title .sub-nuvi ul li:nth-child(7) .icon{height:120px;}
  .page-title .sub-nuvi ul li:nth-child(7) .ttl{height:79px;}
  .page-title .sub-nuvi ul li a:hover .ttl{
    color:#000;
    background-color:#fff;
  }
}

/* 
--------------------------------------- */
.numbers-sect{}
.numbers-sect .wrap{
  padding:50px 0;
}
.numbers-sect .title{
  margin-bottom:50px;
  text-align:center;
}
.numbers-sect .title .ttl{
  font-size:36px;
  font-weight:600;
} 
.numbers-sect .title .date{
  font-size:18px;
}
.numbers-sect .block-graph{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.numbers-sect .block-graph .box-graph{
  width:calc(100% / 3);
  max-width:360px;
}
.numbers-sect .block-graph .box-graph .graph{}

/* 円グラフ */
.numbers-sect .block-graph .box-graph .donut{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 0px;
  justify-content: center;
}
.numbers-sect .block-graph .box-graph canvas{
  max-width: 100%;
  height: 100%;
}
@media screen and (max-width:750px){}

/* 職種ごとの人数
--------------------------------------- */
#section1.numbers-sect{background-color:#eaf0f7;}
.section1.numbers-sect .block-graph .box-graph{
  width:100%;
  height:400px;
}
.section1.numbers-sect .block-graph .box-graph .graph{
  width:100%;
  height:270px;
  margin:0 auto 30px;
}
.section1.numbers-sect .block-graph .box-graph .cap{
  font-weight:600;
  text-align:center;
}
.section1.numbers-sect .block-graph .box-graph .cap .txt{
  font-size:24px;
  line-height:1.2;
}
.section1.numbers-sect .block-graph .box-graph .cap .txt span{
  font-size:60px;
  line-height:1.1;
}
.section1.numbers-sect .block-graph .box-graph1.box-graph .cap .txt span{
  color:#0081cc;
}
.section1.numbers-sect .block-graph .box-graph2.box-graph .cap .txt span{
  color:#009dbf;
}
.section1.numbers-sect .block-graph .box-graph3.box-graph .cap .txt span{
  color:#004ea2;
}
@media screen and (max-width:750px){
  .section1.numbers-sect .block-graph .box-graph{
    height:340px;
  }
  .section1.numbers-sect .block-graph .box-graph1{transform:translateX(-40px);}
  .section1.numbers-sect .block-graph .box-graph2{}
  .section1.numbers-sect .block-graph .box-graph3{transform:translateX(40px);}
  .section1.numbers-sect .block-graph .box-graph .graph{
    height:215px;
    margin:0 auto;
  }
}

/* 男女比 chart
--------------------------------------- */
.section2.numbers-sect{background-color:#fff;}
.section2.numbers-sect .block-graph .box-graph{
  position:relative;
  width:360px;
  height:360px;
}
.section2.numbers-sect .block-graph .box-graph .graph{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
}
.section2.numbers-sect .block-graph .box-graph .graph canvas{}
.section2.numbers-sect .block-graph .box-graph .cap{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  z-index:0;
/*
  transform:translateY(50px);
  opacity:0;
  transition:all 500ms;
}
.section2.numbers-sect .block-graph .box-graph .cap.on{
  transform:translateY(0);
  opacity:1;*/
}
@media screen and (max-width:750px){
  .section2.numbers-sect .block-graph{
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .section2.numbers-sect .block-graph .box-graph{
    margin-bottom:40px;
  }
}

/* 月平均所定外労働時間(#section3) / 平均有給休暇取得日数(#section4)
--------------------------------------- */
.section3.numbers-sect{background-color:#f9f0e3;}
.section3.numbers-sect .block-graph .box-graph{
  width:50%;
  height:50%;
}
.section3.numbers-sect .block-graph .box-graph .graph{
  height:200px;
  margin:0 auto 80px;
}
.section3.numbers-sect .block-graph .box-graph1 .graph{
  width:200px
}
.section3.numbers-sect .block-graph .box-graph2 .graph{
  width:203.5px;
}
.section3.numbers-sect .block-graph .box-graph .cap{
  font-weight:600;
  text-align:center;
}
.section3.numbers-sect .block-graph .box-graph .cap .txt{
  font-size:24px;
  line-height:1.2;
}
.section3.numbers-sect .block-graph .box-graph .cap .txt span{
  font-size:60px;
  line-height:1;
  color:#004ea2;
}
@media screen and (max-width:750px){
  .section3.numbers-sect .block-graph{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width:100%;
  }
  .section3.numbers-sect .block-graph .box-graph{
    width:100%;
    height:initial;
  }
  .section3.numbers-sect .block-graph .box-graph1{
    margin-bottom:110px;
  }
  .section3.numbers-sect .block-graph .box-graph .graph{
    margin-bottom:60px;
  }
}

/* 育児休業取得率（男女別） chart
--------------------------------------- */
.section5.numbers-sect{background-color:#fff;}
.section5.numbers-sect .block-graph .box-graph{
  position:relative;
  width:360px;
  height:360px;
}
.section5.numbers-sect .block-graph .box-graph .graph{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
}
.section5.numbers-sect .block-graph .box-graph .graph canvas{}
.section5.numbers-sect .block-graph .box-graph .cap{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  z-index:0;
/*
  transform:translateY(50px);
  opacity:0;
  transition:all 500ms;
}
.section5.numbers-sect .block-graph .box-graph .cap.on{
  transform:translateY(0);
  opacity:1;*/
}

.section5.numbers-sect .block-graph .box-graph2{
  display:flex;
  justify-content:center;
  align-items:center;
  height:360px;
}
.section5.numbers-sect .block-graph .box-graph2 .img{
  width:58.333%;
  max-width:210px;
  margin:auto;
}
@media screen and (max-width:750px){
  .section5.numbers-sect .block-graph{
    flex-wrap: wrap;
  }
  .section5.numbers-sect .block-graph .box-graph1{
    order:2;
    width:46%;
    margin-right:4%;
  }
  .section5.numbers-sect .block-graph .box-graph2{
    order:1;
    width:100%;
    height:initial;
    margin-bottom:40px;
  }
  .section5.numbers-sect .block-graph .box-graph3{
    order:3;
    width:46%;
    margin-left:4%;
  }
}

/* 役員に占める女性の割合
--------------------------------------- */
.section6.numbers-sect{background-color:#eaf0f7;}
.section6.numbers-sect .block-graph .box-graph{
  width:100%;
  max-width:initial;
}
.section6.numbers-sect .block-graph .box-graph .graph{
  height:initial;
  margin:0 auto 80px;
}
.section6.numbers-sect .block-graph .box-graph .cap{
  font-weight:600;
  text-align:center;
}
.section6.numbers-sect .block-graph .box-graph .cap .txt{
  font-size:24px;
  line-height:1.2;
}
.section6.numbers-sect .block-graph .box-graph .cap .txt span{
  font-size:60px;
  line-height:1;
  color:#0081cc;
}

@media screen and (max-width:750px){
  .section6.numbers-sect .block-graph .box-graph .graph{
    margin-bottom:60px;
  }
}

/* 過去3年間の採用者数（職種別）
--------------------------------------- */
.section7.numbers-sect{background-color:#fff;}
.section7.numbers-sect .block-graph .box-graph{
  width:calc(100% / 4);
  height:initial;
}
.section7.numbers-sect .block-graph .box-graph .graph{
  position:relative;
  width:84.44%;
  max-width:211px;
  height:250px;
  margin:0 auto 20px;
  z-index:0;
}
.section7.numbers-sect .block-graph .box-graph .graph:after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:block;
  width:100%;
  height:250px;
  background:rgba(255,255,255,1);
  z-index:1;
  transition:height 800ms;
}
.section7.numbers-sect .block-graph .box-graph1 .graph:after{transition-delay: 0ms;}
.section7.numbers-sect .block-graph .box-graph2 .graph:after{transition-delay: 200ms;}
.section7.numbers-sect .block-graph .box-graph3 .graph:after{transition-delay: 400ms;}
.section7.numbers-sect .block-graph .box-graph4 .graph:after{transition-delay: 600ms;}
.section7.numbers-sect .block-graph .box-graph .graph.show:after{height:0;}
.section7.numbers-sect .block-graph .box-graph .cap{
  font-weight:600;
  text-align:center;
  line-height:1.2;
}
.section7.numbers-sect .block-graph .box-graph .cap br{display:none;}
@media screen and (max-width:1017px){
  .section7.numbers-sect .block-graph .box-graph .cap br{display:block;}
}
@media screen and (max-width:750px){
  .section7.numbers-sect .block-graph{
    flex-wrap: wrap;
  }
  .section7.numbers-sect .block-graph .box-graph{
    width:50%;
  }
  .section7.numbers-sect .block-graph .box-graph1,
  .section7.numbers-sect .block-graph .box-graph2{margin-bottom:90px;}
  .section7.numbers-sect .block-graph .box-graph3 .graph:after{transition-delay: 0ms;}
  .section7.numbers-sect .block-graph .box-graph4 .graph:after{transition-delay: 200ms;}
  .section7.numbers-sect .block-graph .box-graph .cap{
    font-size:24px;
  }
  .section7.numbers-sect .block-graph .box-graph .cap br{display:none;}
}


/* テレワーク職員比率
--------------------------------------- */
.section8.numbers-sect{background-color:#f9f0e3;}
.section8.numbers-sect .block-graph .box-graph{
  position:relative;
  width:360px;
  height:360px;
}
.section8.numbers-sect .block-graph .box-graph .graph{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
}
.section8.numbers-sect .block-graph .box-graph .graph canvas{}
.section8.numbers-sect .block-graph .box-graph .cap{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  z-index:0;
/*
  transform:translateY(50px);
  opacity:0;
  transition:all 500ms;
}
.section8.numbers-sect .block-graph .box-graph .cap.on{
  transform:translateY(0);
  opacity:1;*/
}

.section8.numbers-sect .block-graph .box-graph2{
  display:flex;
  justify-content:center;
  align-items:center;
}
.section8.numbers-sect .block-graph .box-graph2 .img{
  width:46.666%;
  max-width:168px;
  margin:auto;
}
@media screen and (max-width:750px){
  .section8.numbers-sect .block-graph{
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .section8.numbers-sect .block-graph .box-graph{
    margin-bottom:40px;
  }
  .section8.numbers-sect .block-graph .box-graph2{
    height:initial;
    margin-bottom:90px;
  }
}


/* 外国籍職員比率 chart
--------------------------------------- */
.section9.numbers-sect{background-color:#fff;}
.section9.numbers-sect .block-graph .box-graph{
  position:relative;
  width:50%;
  height:50%
}
.section9.numbers-sect .block-graph .box-graph .graph{
  position:relative;
  width:360px;
  height:360px;
  z-index:1;
}
.section9.numbers-sect .block-graph .box-graph2{
  display:flex;
  justify-content:center;
  align-items:center;
  height:360px;
}
.section9.numbers-sect .block-graph .box-graph2 .img{
  width:168px;
  transform:translateX(-80px);
}
.section9.numbers-sect .block-graph .box-graph .graph canvas{}
.section9.numbers-sect .block-graph .box-graph .cap{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  z-index:0;
/*
  transform:translateY(50px);
  opacity:0;
  transition:all 500ms;
}
.section9.numbers-sect .block-graph .box-graph .cap.on{
  transform:translateY(0);
  opacity:1;*/
}
@media screen and (max-width:1017px){
  .section9.numbers-sect .block-graph .box-graph2 .img{transform:translateX(0);}
}
@media screen and (max-width:750px){
  .section9.numbers-sect .block-graph{
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .section9.numbers-sect .block-graph .box-graph{
    width:360px;
    height:360px;
  }
  .section9.numbers-sect .block-graph .box-graph .graph{
    width:100%;
    height:100%;
  }
  .section9.numbers-sect .block-graph .box-graph{
    margin-bottom:40px;
  }
}