@charset "UTF-8";
.infographic {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}
.infographic.type4, .infographic.type7, .infographic.type8, .infographic.type9, .infographic.type10 {
  display: block;
}
.infographic .font1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 3.625rem;
  margin: 0.5rem;
}
.infographic .font2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 5.3125rem;
}
.infographic .font3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 7rem;
}
.infographic .count-up {
  font-weight: bold;
}
.plus-a {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2.8125rem;
  font-weight: 300;
}
.infographic .comma {
  margin: 0;
}
/*画像幅*/
.infographic.type1 img {
  width: 89.8px;
  height: 115px;
  margin: 2.08%;
}
.infographic.type2 img {
  width: 114.33px;
  height: 115px;
  margin: 2.08%;
}
.infographic.type3 .data1-text img {
  width: 116.47px;
  height: 115px;
  margin: 2.08%;
}
.infographic.type3 .data2-text img {
  width: 115px;
  height: 115px;
  margin: 2.08%;
}
.infographic.type4 img {
  width: 116.55px;
  height: 130px;
  margin: 2.08%;
}
.infographic.type5 img {
  width: 65.41px;
  height: 90px;
  margin: 2.08%;
}
.infographic.type6 img {
  width: 155.15px;
  height: 155px;
  margin: 2.08%;
}
.infographic.type7 img {
  width: 79.11px;
  height: 79px;
  margin: 2.08%;
}
.infographic.type8 img {
  width: 166.36px;
  height: 170px;
  margin: 2.08%;
}
.infographic.type9 img {
  width: 191.85px;
  height: 170px;
  margin: 2.08%;
}
.infographic.type10 img {
  width: 170px;
  height: 170px;
  margin: 2.08%;
}
.graph-svg svg {
  transform-origin: center;
  transform: rotate(-90deg);
}
.circle {
  position: relative;
  fill: none;
  stroke-width: 14;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.infographic .data1-text, .infographic .data2-text {
  width: 32%;
  text-align: center;
}
.infographic .graph-svg {
  width: 36%;
}
/*全体 幅調整*/
.infographic.type5 .flex, .infographic.type7 .data1-text, .infographic.type8 .data1-text, .infographic.type9 .data1-text, .infographic.type9 .data2-text, .infographic.type10 .data1-text, .infographic.type10 .data2-text {
  width: 50%;
}
.infographic.type4 .data1-text, .infographic.type4 .data2-text, .infographic.type5 .data1-text,.infographic.type6 .data1-text {
  width: auto;
}
/*全体 縦揃え*/
.infographic.type7 .flex, .infographic.type8 .flex, .infographic.type9 .flex {
  align-items: center;
}
/*男女比*/
/*男*/
.infographic.type1 .data1.is-animated {
  stroke: #ff906d;
  animation: type1data1 2s ease-in-out forwards;
}
@keyframes type1data1 {
  to {
    stroke-dashoffset: 0;
  }
}
.infographic.type1 .data1-text {
  color: #ff906d;
}
/*女*/
.infographic.type1 .data2.is-animated {
  stroke: #518adf;
  animation: type1data2 2s ease-in-out forwards;
}
@keyframes type1data2 {
  to {
    stroke-dashoffset: 30;
  }
}
.infographic.type1 .data2-text {
  color: #518adf;
}
/*出身学校の文理比*/
/*文系*/
.type2 .data1.is-animated {
  stroke: #eb9641;
  animation: type2data1 2s ease-in-out forwards;
}
@keyframes type2data1 {
  to {
    stroke-dashoffset: 0;
  }
}
.infographic.type2 .data1-text {
  color: #eb9641;
}
/*理系*/
.type2 .data2.is-animated {
  stroke: #41a5b5;
  animation: type2data2 2s ease-in-out forwards;
}
@keyframes type2data2 {
  to {
    stroke-dashoffset: 48;
  }
}
.infographic.type2 .data2-text {
  color: #41a5b5;
}
/*営業とSEの割合*/
/*営業*/
.type3 .data1.is-animated {
  stroke: #148cd9;
  animation: type3data1 2s ease-in-out forwards;
}
@keyframes type3data1 {
  to {
    stroke-dashoffset: 0;
  }
}
.infographic.type3 .data1-text {
  color: #148cd9;
}
/*開発*/
.type3 .data2.is-animated {
  stroke: #eca14b;
  animation: type3data2 2s ease-in-out forwards;
}
@keyframes type3data2 {
  to {
    stroke-dashoffset: 13;
  }
}
.infographic.type3 .data2-text {
  color: #eca14b;
}
/*社員の年齢割合*/
/*20代*/
.type4 .data1.is-animated {
  stroke: #ffbd5a;
  animation: type4data1 2s ease-in-out forwards;
}
@keyframes type4data1 {
  to {
    stroke-dashoffset: 0;
  }
}
.infographic.type4 .data1-text {
  color: #ffbd5a;
}
/*30代*/
.type4 .data2.is-animated {
  stroke: #f99945;
  animation: type4data2 2s ease-in-out forwards;
}
@keyframes type4data2 {
  to {
    stroke-dashoffset: 31;
  }
}
.infographic.type4 .data2-text {
  color: #f99945;
}
/*40代*/
.type4 .data3.is-animated {
  stroke: #de8ecc;
  animation: type4data3 2s ease-in-out forwards;
}
@keyframes type4data3 {
  to {
    stroke-dashoffset:54;
  }
}
.infographic.type4 .data3-text {
  color: #de8ecc;
}
/*50代以上*/
.type4 .data4.is-animated {
  stroke: #8782d4;
  animation: type4data4 2s ease-in-out forwards;
}
@keyframes type4data4 {
  to {
    stroke-dashoffset: 70;
  }
}
.infographic.type4 .data4-text {
  color: #8782d4;
}
.infographic.type4 .flex {
  font-size: 1.125rem;
}

.infographic.type4 .item {
	display: block;
}

.infographic.type4 .font1 {
	margin: 0;
}

.infographic.type4 .data1-text,.infographic.type4 .data2-text,.infographic.type4 .data3-text,.infographic.type4 .data4-text {
	margin-right: 0.5rem;
	width: 20%;
	text-align: left;
}

/*産後復旧率の年齢割合*/
.type5 .data1.is-animated {
  stroke: #e67f86;
  animation: type5data1 2s ease-in-out forwards;
}
@keyframes type5data1 {
  to {
    stroke-dashoffset: 0.4;
  }
}
.infographic.type5 .flex {
  width: 100%;
}
.infographic.type5 .data1-text {
  color: #e67f86;
  display: flex;
  align-items: center;
  width: 55%;
}
/*平均年次有給休暇取得日数*/
.type6 .data1.is-animated {
  stroke: #68b385;
  animation: type6data1 2s ease-in-out forwards;
}
.infographic.type6 .flex {
  width: 100%;
}
.infographic.type6 .data1-text {
  color: #68b385;
  font-size: 1.25rem;
  display: flex;
  width: 55%;
  align-items: center;
}
/*入社5年間の離職率*/
/*開始からの位置*/
.type7 .data1.is-animated {
  stroke: #eeeeee;
  animation: type7data1 2s ease-in-out forwards;
}
@keyframes type7data1 {
  to {
    stroke-dashoffset: 0;
  }
}
.type7 .data2.is-animated {
  stroke: #c280b5;
  animation: type7data2 2s ease-in-out forwards;
}
.infographic.type7 .data2-text {
  font-size: 1.0625rem;
  color: #c280b5;
  display: flex;
  width: 55%;
}
/*離職率*/
@keyframes type7data2 {
  to {
    stroke-dashoffset: 0.4;
  }
}
.infographic.type8 .data1-text {
  color: #6878ca;
  text-align: left;
}
.infographic.type9 .data1-text {
  color: #21a4c6;
}
.infographic.type10 .data1-text {
  color: #e79584;
  font-size: 1rem;
  text-align: left;
}

.infographic.type10 .data1-text .annotation {
	text-align: left;
	display: block;
}

@media screen and (max-width: 980px) {
  .infographic {
    align-items: flex-end;
  }
  .infographic {
    font-size: 1.125rem;
    line-height: 2.5rem;
  }
  .infographic .flex {
    display: flex;
    align-items: end;
  }
  .infographic.type4 .flex {
    flex-wrap: wrap;
  }
  .infographic .data1-text, .infographic .data2-text {
    line-height: 3rem;
  }
  .infographic.type4 .data1-text, .infographic.type4 .data2-text, .infographic.type4 .data3-text, .infographic.type4 .data4-text {
    width: 28%;
    line-height: 2.8rem;
	text-align: left;
	margin:0 5%;
    
  }
  .infographic.type4 .font1 {
    margin: 0;
  }
  .infographic.type1 .count-up, .infographic.type2 .count-up, .infographic.type3 .count-up {
    display: block;
  }
  .infographic.type5, .infographic.type6 {
    display: block;
  }
  .infographic.type5 .graph-svg, .infographic.type6 .graph-svg, .infographic.type7 .graph-svg {
    width: 100%;
  }
  .infographic.type7 .flex, .infographic.type5 .flex {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
	
  .infographic.type7 .data2-text, .infographic.type5 .data1-text {
    width: 100%;
    order: 2;
	justify-content: center;
  }
  .infographic.type7 .flex .graph-svg, .infographic.type6 .graph-svg, .infographic.type5 .graph-svg {
    order: 1;
  }
  .infographic.type6 .data1-text .sp-text, .infographic.type5 .data1-text .sp-text {
    width: 154px;
	text-align: left;
  }
	
/*	.infographic.type6 .data1-text .sp-text .data-name {
		line-height: 1.2rem;
		font-size: 1.125rem;
		display: block;
		margin: 1rem 0;
	}*/
	
  .infographic .graph-svg {
    width: 50%;
  }
  .infographic.type8 .data1-text,.infographic.type6 .data1-text {
    width:auto;
  }
  .infographic.type9 .data1-text, .infographic.type10 .data1-text {
    width: auto;
  }

	
  /*画像サイズ調整*/
  .infographic.type1 .data1-text img {
    width: 69px;
    height: 88px;
  }
  .infographic.type1 .data2-text img {
    width: 69px;
    height: 88px;
  }
  .infographic.type2 .data1-text img {
    width: 78px;
    height: 78px;
  }
  .infographic.type2 .data2-text img {
    width: 77px;
    height: 82px;
  }
  .infographic.type3 .data1-text img {
    width: 81px;
    height: 80px;
  }
  .infographic.type3 .data2-text img {
    width: 85px;
    height: 62px;
  }
  .infographic.type4 img {
    width: 90px;
    height: 101px;
  }
  .infographic.type8 img {
    width: 76px;
    height: 78px;
  }
  .infographic.type9 img {
    width: 77px;
    height: 68px;
  }
  .infographic .font2 {
    font-size:5.3125rem;
  }
  .infographic.type8 .font2 {
	font-size:  4.5rem; 
  }
  .infographic.type9 .font2 {
	font-size: 3.625rem; 
  }
  .infographic .font3 {
    font-size: 4.5rem;
  }
  .infographic.type6 img,.infographic.type10 img {
    width: 92px;
    height: 89px;
  }
  .infographic.type10 .data1-text {
    line-height: 2rem;
	width: auto;
  }
  .infographic.type10 .data1-text .annotation {
    font-size: 0.6875rem;
    line-height: 1.2rem;
    display: block;
  }
}