/* グラフアニメ */

div.box1,
div.box2,
div.box3{
  text-align:center;
  width:200px;
  padding:50px 0;
  margin:100px auto;
  background:#00BCD4;
  color:#fff;
}


.sample{
	background: red;
	height: 300px;
	width: 230px;
  animation: vbar-animation 1 2s;

}
/* Scroll trigger Class */
 .invisible{
 transition: opacity 0.5s ease;
 opacity: 0.0;
}
visible {
	transition: opacity 0.5s ease;
	opacity: 1.0;
}


.graph1 h3,
.graph2 h3,
.graph3 h3 {
	text-align: center;
	margin-bottom: 5px;
	font-size: 30px;
	font-weight: bold;
}

.uriage_2018{
    border: 2px dotted #dad9df;
    margin: 5px auto 20px;
    padding: 10px 20px;
    background: white;
    text-align: center;
}
.uriage_2018 h3{
	font-size: 20px !important;
    font-weight: bold;
    text-align: center;
    color: #439dde;
}
.uriage_2018  span{
    color: #439dde;
}

/* ============  汎用クラス　　＝＝＝＝＝＝＝＝＝*/




.fz18{
	font-size: 18px;

}

.fz24{
	font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
}

.fz30{
	font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
}

.fz36{
	font-size: 36px;
    font-weight: bold;
    line-height: 1.2;
}

.fz44{
	font-size: 44px;
    font-weight: bold;
    line-height: 1.2;
}
.h460{
	height: 460px;
}
.h520{
	height: 520px;
}

.tc{
	text-align: center;
	margin: 0 auto;
}

/* ============  汎用クラス　　＝＝＝＝＝＝＝＝＝*/

.sectionInner{
	background: #eceffe;
	padding: 20px 0px;
	border: 1px solid #dad9de;
	border-radius: 5px;
}

.graphWrap{
	border: 2px solid #dad9df;
	float: left;
	width: 470px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding: 10px 20px;
	background: white;

}
.graphWrap2{
	min-height: 100px;

}

.graphWrap3{
	border: 2px solid #dad9df;
	float: left;
	width: 480px;
	min-height: 80px;
	margin-right: 10px;
	padding:10px 20px;

}
.graphWrap4{
    border: 2px solid #dad9df;
	min-height: 80px;
	margin:5px auto 20px;
	padding:20px 20px;
	background: white;
	width: 978px;
}





.graphWrap h2,
.graphWrap h3,
.graphWrap2 h2,
.graphWrap3 h2,
.graphWrap3 h3,
.graphWrap4 h2,
.graphWrap4 h3{

	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #007bc7;
}
.graphWrap2 h3 {
  font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #439dde;
}
.graphWrap h3{
	font-size: 18px;
	color: #4c4c4c;
}
.kinyu_num{
	color: #1eb9ef !important;
}
.sangyou_num{
	color: #f38b9b !important;
}
.tushin-num{
	color: #eb9a3f;


}
.koukyou_num{
	color: #d46961;
}


/*年度別売上高グラフ*/

.uriage_con{
	display: none;
    position: relative;
    max-width: 600px;
    background: #EEEEEE url(../images/grid.png) center bottom;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    margin: 0 0 40px 50px;

}

[class*=mem] {/* セレクタ名の部分一致 */
  position:absolute;
  top: 0;
  width: 60px;
  left:-35px;
  text-align: right;
}

.mem1 {top:334px;}
.mem2 {top:285px;}
.mem3 {top:236px;}
.mem4 {top:188px;}
.mem5 {top:137px;}
.mem6 {top:84px;}
.mem7 {top:37px;}
.mem8 {top:-33px;}


/*////////////////////////////         社員数増加グラフ ///////////////////////////////*/

.zouka_con{
    position: relative;
    max-width: 600px;
    background: #EEEEEE url(../images/grid.png) center bottom;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    margin: 0 0 40px 55px;

}

.zouka_con [class*=mem] {/* セレクタ名の部分一致 */
  position:absolute;
  top: 0;
  width: 60px;
  left:-35px;
  text-align: right;
}

.zouka_con .mem1 {top:334px;}
.zouka_con .mem2 {top:285px;}
.zouka_con .mem3 {top:236px;}
.zouka_con .mem4 {top:188px;}
.zouka_con .mem5 {top:137px;}
.zouka_con .mem6 {top:84px;}
.zouka_con .mem7 {top:40px;}
.zouka_con .mem8 {top:-30px;}





.zouka_con .nendo{
	position: absolute;
	left: 0px;
	bottom: -5px;

}


.zouka_con [class*=date] {/* セレクタ名の部分一致 */
  position:absolute;
  bottom: 0;
  width: 30px;
  background: #7bec27;
  animation: vbar-animation 1 2s;
}




.zouka_con .date8 {left:345px ; background: linear-gradient(#648849,#7bec27);}

/*////////////////////////////         残業時間グラフ ///////////////////////////////*/
.zangyou_con{
    position: relative;
    height: 206px;
     background: #EEEEEE url(../images/grid.png) center bottom;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    margin: 0 0 40px 28px;

}

.zangyou_con [class*=mem] {/* セレクタ名の部分一致 */
  position:absolute;
  top: 0;
  width: 60px;
  left:-35px;
  text-align: right;
}

.zangyou_con .memori .mem1 {top:200px;}
.zangyou_con .memori .mem2 {top:144px;}
.zangyou_con .memori .mem3 {top:90px;}
.zangyou_con .memori .mem4 {top:43px;}
.zangyou_con .memori .mem5 {top:-24px;}





.zangyou_con .nendo{
	position: absolute;
	left: 0px;
	bottom: -5px;

}


.zangyou_con [class*=date] {/* セレクタ名の部分一致 */
  position:absolute;
  bottom: 0;
  width: 30px;
  font-weight: bold;
  padding: 0 0 0 2px;
  background: #00B4DB;
  animation: vbar-animation 1 2s;
}

 [class*=zangyou_h_],
 [class*=yukyuritu] {
	font-weight: bold;
	opacity: 0;
    animation: zangyou_h_-animation 1s linear 0s forwards;
    animation-delay: 2s;
}




@keyframes zangyou_h_-animation{
  100%{
	  opacity: 1;
  }

}


.zangyou_con .date8 { background: linear-gradient(#0086a2,#1eb9ef);}
/*.zangyou_con .date7 { background: linear-gradient(#00B4DB,#1eb9ef);}*/


.zangyou_con .barchart {
  position: relative;
  height: 210px;
  margin: 0 auto;
  border: solid 5px #ccc;
  background-image: linear-gradient( transparent 98%, rgba(#000, .2) 2%);
  background-size: 10%;
  background-repeat: repeat;
}



/*////////////////////////////         有休休暇取得グラフ ///////////////////////////////*/

.yuukyu_con{
    position: relative;
    max-width: 450px;
    height: 206px;
    background: #EEEEEE url(../images/grid.png) center bottom;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    margin: 0 0 40px 28px;

}

.yuukyu_con [class*=mem] {/* セレクタ名の部分一致 */
  position:absolute;
  top: 0;
  width: 60px;
  left:-35px;
  text-align: right;
}

.yuukyu_con .memori .mem1 {top:200px;}
.yuukyu_con .memori .mem2 {top:144px;}
.yuukyu_con .memori .mem3 {top:90px;}
.yuukyu_con .memori .mem4 {top:43px;}
.yuukyu_con .memori .mem5 {top:-24px;}



.yuukyu_con .nendo{
	position: absolute;
	left: 0px;
	bottom: -5px;

}


.yuukyu_con [class*=date] {/* セレクタ名の部分一致 */
  position:absolute;
  bottom: 0;
  width: 30px;
  font-weight: bold;
  padding: 0 0 0 2px;
  background: #F7971E;
  animation: vbar-animation 1 2s;
}





.yuukyu_con .date8 {background: linear-gradient(#F7971E,#FFD200);}


.yuukyu_con .barchart {
  position: relative;
  height: 210px;
  margin: 0 auto;
  border: solid 5px #ccc;
  background-image: linear-gradient( transparent 98%, rgba(#000, .2) 2%);
  background-size: 10%;
  background-repeat: repeat;
}
.height300{
	height: 300px !important;
}

.min-h250{
	min-height: 250px !important;
}

.min-h335{
	min-height: 335px !important;
}

.min-h490{
	min-height: 490px !important;
}
.min-h517{
	min-height: 517px !important;
}
.min-h200{
	min-height: 200px !important;
}
.seibetu img{
	margin-left: 137px;
}
.men_num{
	color: #46b5fb;
}
.women_num{
	color: #f75b93;


}

/*////////////////////////////     売上グラフ ///////////////////////////////*/



.memori{

}
.barchart {
  position: relative;
  height: 355px;
  margin: 0 auto;
  border: solid 5px #ccc;
  background-image: linear-gradient( transparent 98%, rgba(#000, .2) 2%);
  background-size: 10%;
  background-repeat: repeat;
}
[class*=date] {/* セレクタ名の部分一致 */
  position:absolute;
  bottom: 0;
  width: 30px;
  background: #f78a3c;
  animation: vbar-animation 1 2s;

}


@keyframes vbar-animation{
  0%{
    height: 0px;
  }
  /*100%{
    height: 100%;
  }
  */
}

.uriage_con .nendo{
	position: absolute;
	left: 0px;
	bottom: -5px;

}

 .nendo [class*=mem] {/* セレクタ名の部分一致 */
  position:absolute;
  top: 0;
  width: 70px;
  left:-35px;
  text-align: right;
  font-size: 12px;
}

/* グラフのメモリとラベル */
.nendo .mem2,
.zouka_con .nendo .mem2,
.yuukyu_con .nendo .mem2,
.zangyou_con .nendo .mem2 {
  left: -13px;
}
.nendo .mem3,
.zouka_con .nendo .mem3,
.yuukyu_con .nendo .mem3,
.zangyou_con .nendo .mem3  {
	left: 40px;
}
.nendo .mem4,
.zouka_con .nendo .mem4,
.yuukyu_con .nendo .mem4,
.zangyou_con .nendo .mem4  {
	left:96px;
}
.nendo .mem5,
.zouka_con .nendo .mem5,
.yuukyu_con .nendo .mem5,
.zangyou_con .nendo .mem5  {
	left:154px;
}
.nendo .mem6,
.zouka_con .nendo .mem6,
.yuukyu_con .nendo .mem6,
.zangyou_con .nendo .mem6  {
	left:208px;
}
.nendo .mem7,
.zouka_con .nendo .mem7,
.yuukyu_con .nendo .mem7,
.zangyou_con .nendo .mem7  {
	left:263px;
}
.nendo .mem8,
.zouka_con .nendo .mem8,
.yuukyu_con .nendo .mem8,
.zangyou_con .nendo .mem8 {
  left: 316px;
}

.date2 {
  left: 15px
}

.date3 {
  left: 70px
}

.date4 {
  left: 125px
}

.date5 {
  left: 180px
}

.date6 {
  left: 235px
}

.date7 {
  left: 290px;
}

.date8 {
  left: 345px;
  background: linear-gradient(#f12711, #f78a3c);
}

.date9 {
  left: 345px;
  background: linear-gradient(#f12711, #f78a3c);
}


















/* 売上構成比 円グラフ*/

.circle1 {
    position: relative;
    width: 240px;
    height: 240px;
    background: #4599e3;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    margin: 0 auto;
}

.circle1::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -120px;
    width: 240px;
    height: 240px;
    background: #e07083;
    transform-origin: right 120px;
    z-index: 2;
    animation: uriage-rotate-circle-left1 2s linear forwards;
}

.circle1::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 120px;
    width: 480px;
    height: 480px;
    background: #e07083;
    transform-origin: left 120px;
    z-index: 2;
    animation: uriage-rotate-circle-right 2s linear forwards;
}

.circle3::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -120px;
    width: 240px;
    height: 240px;
    background: green;
    transform-origin: right 120px;
    z-index: 2;
    animation: uriage-rotate-circle-right-two 2s linear  4s forwards;

/*   animation: rotate-circle-right 2s linear forwards;*/
}
.circle4::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -120px;
    width: 240px;
    height: 240px;
    background:  yellow;
    transform-origin: right 120px;
    z-index: 2;
    animation: uriage-rotate-circle-left4 2s linear 6s forwards;
}



.circle1 .circle1-inner {
    position: absolute;
    top: 60px;
    left: 60px;
    width: 120px;
    height: 120px;
    padding-top: 38px;
    background: #fff;
    border-radius: 50%;
    z-index: 4;
}


.circle1 .kinyu,
.circle1 .koukou {
	color: white;
	position: absolute;
	font-weight: bold;
	font-size: 120%;
	z-index: 5;
}


.uriage_ratio{
	display: none;
	opacity: 0;
}
.anim_fadein{
	animation: anim_fade 2s linear  forwards;
}
@keyframes anim_fade{
  0%{
    opacity: 0;
  }
  100%{
   opacity:1;
  }
}


/************************************************/
.graphlabel .kinyu,
.graphlabel .sangyou,
.graphlabel .tushin,
.graphlabel .koukyou {
	color: white;
	position: absolute;
	font-weight: bold;
	font-size: 120%;
	z-index: 1000;
}
.graphlabel .kinyu{
	top:136px;
	left: 153px;

}
.graphlabel .sangyou {
	top: 29px;
	left: 58px;
}
.graphlabel .tushin {
	top: 19px;
	left: 58px;
}
.graphlabel .koukyou {
	top: 9px;
	left: 78px;

}

.uriage_twrap {
  display: flex;
  justify-content: center;
}

.uriage_ttl .l-spacing {
  letter-spacing: 2.0em;
}

.uriage_ttl th {
  font-size: 18px;
}

.uriage_ttl td {
  padding-left: 20px;
  text-align: right;
}


/*売上構成比*/
.circletest::before {
	background: gray;
}
.circletest {
    position: relative;
    width: 250px;
    height:250px;
    background: none;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    margin: 0 auto;
    opacity: 1;
}

.uriage-circle0,
.uriage-circle1,
.uriage-circle2,
.uriage-circle3,
.uriage-circle4 {
    content: "";
    display: block;
    position: absolute;
     /* .circletestのwidthとheightの半分の大きさをleftとtransform-originに設定 */
    top: 0;
    left: 125px;
    width: 250px;
    height: 250px;
    transform-origin: left 125px;
	background: #1eb9ef;
    z-index: 5;
     animation: uriage-rotate-circle-right0 2s linear 0s forwards;
     display: none;
 }

.uriage-circle1 {
	background: #1eb9ef;
    z-index: 10;
    animation: uriage-rotate-circle-right1 2s linear forwards;
 }
 /*
.uriage-circle2 {
	background: #d46961;
    z-index: 9;
    animation: uriage-rotate-circle-right2 2s linear 0s forwards;
    opacity: 0;
 }
 */
 .uriage-circle3 {
	background: #f38b9b;
    z-index: 8;
    animation: uriage-rotate-circle-right3 2s linear 0s forwards;
    opacity: 0;
 }
 /*
  .uriage-circle4 {
	background: #F7971E;
    z-index: 7;
    animation: uriage-rotate-circle-right4 2s linear 0s forwards;
    opacity: 0;
 }
*/


@keyframes uriage-rotate-circle-right0 {
	100%{
		opacity: 1;
		height: 250px;
	}
}
@keyframes uriage-rotate-circle-right1 {
	0%{
		transform: rotate(0.0deg);
	}
	100%{
		/* transform: rotate(163.0deg); */
		transform: rotate(147.0deg);
		 opacity: 1;
	}

}
/*@keyframes uriage-rotate-circle-right2 {
	0%{
		transform: rotate(148.0deg);

	}
	100%{
		transform: rotate(165.0deg);
		 opacity: 1;
	}
}*/

@keyframes uriage-rotate-circle-right3{
	0%{
		transform: rotate(163.0deg);

	}
	100%{
		transform: rotate(180.0deg);
		opacity: 1;


	}
}
/*@keyframes uriage-rotate-circle-right4 {
	0%{
		transform: rotate(175.0deg);
		background: black;
		 opacity: 0;

	}
	100%{
		transform: rotate(180.0deg);
		 opacity: 1;

	}
}
*/

/* 社員の男女比（役員込） 円グラフ*/

.graph_ninzuu_ratio,
.graph_syainsuu,
.graph_nenrei_ratio,
.graph_syussin_kousei,
.zangyou_con,
.yuukyu_con,
.circle3,
.circle5,
.zangyoubox{
	display: none;
}

.circle2 {
    position: relative;
    width: 240px;
    height: 240px;
    background: #46b5fb;

    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    margin: 0 auto;
}

.circle2::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -120px;
    width: 240px;
    height: 240px;
    background: #f75b93;
    transform-origin: right 120px;
    z-index: 2;
    animation: rotate-circle-left 3s linear forwards;
}

.circle2::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 120px;
    width: 480px;
    height: 480px;
    background: #f75b93;
    transform-origin: left 120px;
    z-index: 3;
    animation: rotate-circle-right 3s linear forwards;
}

.circle2 .circle2-inner {
    position: absolute;
    top: 60px;
    left: 60px;
    width: 120px;
    height: 120px;
    padding-top: 38px;
    background: #fff;
    border-radius: 50%;
    z-index: 4;
}
.circle2 .circle2-inner .all{
	top: 29px;
	left: 15px;
	position: absolute;
	z-index: 11;
	color: #4c4c4c;

}
.circle2 .men,
.circle2 .women {
	color: white;
	position: absolute;
	font-weight: bold;
	font-size: 120%;
	z-index: 5;
}
.circle2 .men{
	top:124px;
	left: 191px;
}
.circle2 .women {
	top:70px;
	left: 20px;
}




@keyframes rotate-circle-right {
    0%   {
        transform: rotate(0deg);
        background: #f75b93;
    }
    50%  {
        transform: rotate(180deg);
        background: #f75b93;
    }
    50.001% {
        transform: rotate(360deg);
        background: #46b5fb;

    }
    100% {
        transform: rotate(360deg);
        background: #46b5fb;
    }
}

@keyframes rotate-circle-left {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(0deg); }
    /* 100% { transform: rotate(100deg); } //2024 */
    /* 100% { transform: rotate(85deg); }  // 2025 */
    100% { transform: rotate(83deg); }  /*// 2026*/
    /* 100% { transform: rotate(85deg); } */
}


/*②年齢分布（役員込）　20代73名　30代31名　40代22名　50代12名*/
/* 2025年度 20代　90名　30代　39名　40代　20名　50代以上　21名 */

.em20{
	font-size: 36px;
	font-weight: bold;
	color: #99ba63;
}
.em31{
    font-size: 170px;
    font-weight: bold;
    color: #007bc7;
    line-height: 1.3;
}
.em30{
	font-size: 36px;
	font-weight: bold;
	color: #5b9fcf;
}
.em40{
	font-size: 36px;
	font-weight: bold;
	color: #dfb759;
}
.em50{
	font-size: 36px;
	font-weight: bold;
	color: #a15850;
}

.em20pos{
	position: absolute;
	top: 5px;
	right: 71px;
}
.em31pos{
    position: relative;
    display: inline-block;
}
.em30pos{
	position: absolute;
	top:  110px;
	left: 154px;
}
.em40pos{
	position: absolute;
	top: 207px;
	left: 102px;
}
.em50pos{
	position: absolute;
	top: 322px;
	left: 102px;
}




/*③職種別人数構成（役員除く）　開発本部BS部121名　同本部営業部8名　管理本部5名*/

.graphWrap2 ul{
	width: 1000px;
	margin: 0 auto;
	text-align: center;
	padding: 0 15px;

}

.graphWrap2 ul li{
	float: left;
	width: 32.33%; /* IE11 */
	padding: 20px 10px;
	border: 1px dotted #dad9de;
    font-size: 18px;
    color: #4c4c4c;
   	background: white;

}
.graphWrap2 ul li:nth-child(2){
	margin: 0 14px;
}

.graphWrap4 ul li{
	float: left;
	width: 18%;
	margin-left:22px;
	padding: 20px 10px;
	border: 1px dotted #dad9de;
    font-size: 14px;
    color: #4c4c4c;
   	background: white;
   	height: 125px;
}

.graphWrap4 ul li:nth-child(1){
	margin-left:0px;
}
.kousei0{
	color:#326bc4;
}

.kousei1{
	color:#83c52c;
}

.kousei2{
	color:#985b53;
}
.kousei3{
	color:#9347bb;
}


.side-bargraph{
	position: relative;
	/*margin: 0 0 0 133px; */
	left: 60px;


}
.side-bargraph-inner{
	margin: 0 0 0 5px;
}
.bar{
  max-width: 600px;
  width: 100%;
  margin: 1.5em 1em 1.5em 0;
  color: white;
  padding: 2.0em 0.5em;
  animation: bar-animation 1 3s;
  background: #0091EA;
}
.bar5{
    animation: bar-animation 0.5 3s;
}
.bar span{
  font-size: 130%;
  font-weight: bold;

}

/* 2025年度 20代　90名　30代　39名　40代　20名　50代以上　21名 */
.bar1{
  max-width: 68%;
  background: #83c52c;
}
.bar2{
  max-width: 34%;
  background: #319ad6;
}
.bar3{
  max-width: 20%;
  background: #e8af28;
}
.bar4{
  max-width: 21%;
  background: #b53128;
}

@keyframes bar-animation{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.nendai{
	position: absolute;
	top:23px;
	left: -82px;
}

.nendai [class*=mem] {/* セレクタ名の部分一致 */
  position:absolute;
  top: 0;
  width: 120px;
  text-align: right;
  font-size: 18px;

}
.nendai [class*=mem] img{
  vertical-align: text-bottom;
}
.nendai .mem1 {color:#99ba63; top:-5px;}
.nendai .mem2 {color:#5b9fcf; top:95px;}
.nendai .mem3 {color:#dfb759; top:190px;}
.nendai .mem4 {color:#a15850; top:301px;}
.nendai .mem9 {left: -47px; top: -18px;}


.syushingraph{
  width: 100%;
  margin: 1em 1em 1em 0;
  color: white;
  background: #dad9de;
  height: 106px;
  position: relative;
}

.syushingraph .bar{
  max-width: 600px;
  width: 100%;
  margin: 1em 1em 1em 0;
  color: white;
  padding: 0.25em;
  animation: bar-animation 1 3s;
  background: #0091EA;
}


.syushingraph .fz30{
	line-height: 225%;
}


.syushingraph .bar1{
	position: absolute;
	left:0;
	margin: 0;
	max-width: 59%;
	background: #d4423d;
	height: 106px;
}
.syushingraph .bar2{
	position: absolute;
	right: 0;
	margin: 0;
	max-width: 41%;
	background: #38a0d0;
	height: 106px;
}

@keyframes bar-animation2{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;

  }
}

/* 学部構成 */
.gakubugraph{
  width: 100%;
  margin: 1em 1em 1em 0;
  color: white;
  background: #dad9de;
  height: 100px;
  position: relative;
}

.gakubugraph .bar{
  max-width: 600px;
  width: 100%;
  margin: 1em 1em 1em 0;
  color: white;
  padding: 0.25em;
  animation: bar-animation 1 3s;
  background: #0091EA;
}


.gakubugraph .fz30{
	line-height: 1.7;
}


.gakubugraph .bar1{
	position: absolute;
	left:0;
	margin: 0;
	max-width: 79%;
	background: #d4423d;
	height: 100px;
}
.gakubugraph .bar1 .text_center {
  font-size: 20px;
  font-weight: 700;
}
.gakubugraph .bar2{
	position: absolute;
	right: 0;
	margin: 0;
	max-width: 21%;
	background: #38a0d0;
	height: 100px;
}
.gakubugraph .bar2 .text_center {
  font-size: 15px;
  font-weight: 700;
}

@keyframes bar-animation2{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;

  }
}





/*⑤直近3年の採用者の割合　文系77％：理系33％*/
.saiyou{
	width: 400px;
	margin: 0px auto;
}

.bunkeiWrap{
	float: left;
	margin: 0 20px 0 0;
	padding: 10px 0px 15px 110px;
	background: url(../images/bunkei.png) no-repeat;
	background-size: 50%;
	font-weight: bold;

}
.bunkei{
	color: #d4423d;
}
.bunkei-icon{
	position: absolute;
	top: 64px;
	left: 86px;
}
.rikei-icon{
	position: absolute;
	top: 64px;
	left: 86px;
}
.rikeiWrap{
	float: left;
	padding: 10px 0px 15px 110px;
	background: url(../images/rikei.png) no-repeat;
	background-size:50%;
}
.rikei{
	color: #38a0d0;
}


/*産休休暇取得率ドーナッツグラフ*/
.zangyoubox{
	margin: 32px 10px;
	border: 10px solid orange;
	padding: 20px;
}

.circle3 {
    position: relative;
    width: 160px;
    height: 160px;
    background: #ea9ba9;

    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    margin: 5px auto;
}

.circle3::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -80px;
    width: 160px;
    height: 160px;
    background: #4599e3;
    transform-origin: right 80px;
    z-index: 2;
    animation: sankyu-rotate-circle-left 3s linear forwards;
}

.circle3::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 80px;
    width: 160px;
    height: 160px;
    background: #ea9ba9;
    transform-origin: left 80px;
    z-index: 3;
    animation: sankyu-rotate-circle-right 3s linear forwards;
}

/* 育児休暇取得後復職率ドーナッツグラフ */
.circle5 {
    position: relative;
    width: 160px;
    height: 160px;
    background: #49d52f;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    margin: 5px auto;
}

.circle5::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -80px;
    width: 160px;
    height: 160px;
    background: #eeeeee;
    transform-origin: right 80px;
    z-index: 1;
    animation: circle5-left 3s linear forwards;
}

.circle5::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 80px;
    width: 160px;
    height: 160px;
    background: #49d52f;
    transform-origin: left 80px;
    z-index: 3;
    animation: circle5-right 3s linear forwards;
}



.circle3 .circle3-inner,
.circle5 .circle5-inner{
    position: absolute;
    top: 30px;
    left:30px;
    width: 100px;
    height: 100px;
    padding-top: 25px;
    background: #fff;
    border-radius: 50%;
    letter-spacing: -1px;
    z-index: 4;
    font-weight: bold;
}
.circle3 .men{
	color: white;
	position: absolute;
	font-weight: bold;
	font-size: 120%;
	z-index: 5;
}
.circle3 .men{
	top: 55px;
	left: 12px;
	opacity: 0;
	font-size: 20px;
	font-weight: bold;

}

@keyframes sankyu-rotate-circle-right {
    0%   {
        transform: rotate(0deg);
        background:  #4599e3;
    }
    50%  {
        transform: rotate(180deg);
        background:  #4599e3
    }
    50.001% {
        transform: rotate(360deg);
        background: #ea9ba9;

    }
    100% {
        transform: rotate(360deg);
        background: #ea9ba9;
    }
}

@keyframes sankyu-rotate-circle-left {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

@keyframes circle5-right {
    0%   {
        transform: rotate(0deg);
        background:  #eeeeee;
    }
    50%  {
        transform: rotate(180deg);
        background:  #eeeeee;
    }
    50.001% {
        transform: rotate(360deg);
        background: #49d52f;

    }
    100% {
        transform: rotate(360deg);
        background: #49d52f;
    }
}

@keyframes circle5-left {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(160deg); }
}