/* LESS Document */
body {
  background: url(../img/bg_company_stats_pc.webp) repeat right 0;
}
@media screen and (max-width: 767px) {
  body {
    background: url(../img/bg_company_stats_sp.webp) repeat center 0;
  }
}
body::before {
  content: none;
}
/*+++++++++++++++++++++++++++++++++++++++++++
	pageHeader
+++++++++++++++++++++++++++++++++++++++++++ */
.pageHeader hgroup {
  padding-left: 240px;
}
@media screen and (max-width: 767px) {
  .pageHeader hgroup {
    padding-left: 24vw;
  }
}
.pageHeader hgroup p {
  color: #F17900;
}
.pageHeader hgroup p span {
  top: -24px;
  left: -164px;
}
@media screen and (max-width: 767px) {
  .pageHeader hgroup p span {
    top: -7vw;
    left: -18vw;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	棒グラフ
+++++++++++++++++++++++++++++++++++++++++++ */
.grafBar_item {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0;
}
.grafBar_item dt {
  min-width: 100px;
  text-align: right;
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .grafBar_item dt {
    min-width: 20vw;
    font-size: 4vw;
  }
}
.grafBar_item dd {
  flex: 1;
  position: relative;
}
.grafBar_item dd::before {
  content: '';
  display: block;
  width: 0;
  height: 24px;
  background: #F17900;
  border-radius: 0 50px 50px 0;
}
.grafBar_item dd .num {
  line-height: 1.2;
  font-size: 2rem;
  font-weight: 500;
  white-space: nowrap;
  position: absolute;
  top: 0px;
  opacity: 0;
}
@media screen and (max-width: 1023px) {
  .grafBar_item dd .num {
    font-size: clamp(1px, 4vw, 2rem);
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	円グラフ
+++++++++++++++++++++++++++++++++++++++++++ */
.graf_start .graf ul {
  animation: opacity 1s 1.2s forwards;
}
.graf {
  position: relative;
}
.graf ul {
  opacity: 0;
}
.graf ul li {
  position: absolute;
  font-weight: bold;
  font-size: 2rem;
}
@media screen and (max-width: 1023px) {
  .graf ul li {
    font-size: clamp(1px, 3.2vw, 12rem);
  }
}
.graf ul li .num {
  font-size: 8.4rem;
  font-weight: bold;
}
@media screen and (max-width: 1023px) {
  .graf ul li .num {
    font-size: clamp(1px, 4.8vw, 8.4rem);
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	opacity
+++++++++++++++++++++++++++++++++++++++++++ */
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	dataArea
+++++++++++++++++++++++++++++++++++++++++++ */
.dataArea {
  margin: 0 0 30px;
}
@media screen and (max-width: 767px) {
  .dataArea {
    margin-bottom: 20px;
  }
}
.dataArea.col2 {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 30px;
  flex-wrap: wrap;
}
@media screen and (max-width: 1023px) {
  .dataArea.col2 {
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .dataArea.col2 {
    gap: 20px;
  }
}
.dataArea.col2 > .dataItem {
  width: calc(50% - 15px);
}
@media screen and (max-width: 1023px) {
  .dataArea.col2 > .dataItem {
    width: 100%;
    max-width: 768px;
  }
}
.dataArea.col3 {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 30px;
  flex-wrap: wrap;
}
@media screen and (max-width: 1023px) {
  .dataArea.col3 {
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .dataArea.col3 {
    gap: 20px;
  }
}
.dataArea.col3 .dataItem {
  width: calc(100% / 3 - 20px);
}
@media screen and (max-width: 1023px) {
  .dataArea.col3 .dataItem {
    width: 100%;
    max-width: 768px;
  }
}
.dataArea.col3 h2 {
  font-size: 2.8rem;
}
@media screen and (max-width: 767px) {
  .dataArea.col3 h2 {
    font-size: 5.6vw;
  }
}
.dataArea.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 76px 184px auto;
  grid-template-areas: "left1 right1" "left1 right2" "left2 right2" "left2 right3";
}
@media screen and (max-width: 1023px) {
  .dataArea.grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 768px;
    margin: 0 auto 30px;
  }
}
@media screen and (max-width: 767px) {
  .dataArea.grid {
    gap: 20px;
    margin-bottom: 20px;
  }
}
.dataArea_img {
  flex: 1;
  text-align: left;
}
@media screen and (max-width: 1023px) {
  .dataArea_img {
    display: none;
  }
}
.dataArea h2 {
  margin: 0 0 10px;
  text-align: center;
  font-size: 3.6rem;
}
@media screen and (max-width: 767px) {
  .dataArea h2 {
    font-size: 7.2vw;
  }
}
.dataArea h2 span {
  font-weight: 400;
}
.dataArea p {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .dataArea p {
    font-size: 3.6vw;
  }
}
.dataArea img {
  pointer-events: none;
}
/*+++++++++++++++++++++++++++++++++++++++++++
	num
+++++++++++++++++++++++++++++++++++++++++++ */
.num {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 8.8rem;
  font-weight: bold;
  color: #F17900;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .num {
    font-size: 16vw;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q1
+++++++++++++++++++++++++++++++++++++++++++ */
#q1 .q1_data {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0px;
  justify-content: center;
  line-height: 1;
}
#q1 .q1_data .counter {
  width: 200px;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #q1 .q1_data .counter {
    width: 40vw;
  }
}
#q1 .q1_data_img {
  margin-right: 20px;
}
#q1 .q1_data_text {
  align-self: flex-end;
  font-size: 3.6rem;
  font-weight: bold;
  position: relative;
  top: -10px;
}
@media screen and (max-width: 767px) {
  #q1 .q1_data_text {
    font-size: 7.2vw;
    top: -5vw;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q2
+++++++++++++++++++++++++++++++++++++++++++ */
#q2 .graf {
  width: 192px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #q2 .graf {
    margin: 30px auto;
  }
}
#q2 .graf canvas {
  position: relative;
}
@media screen and (max-width: 767px) {
  #q2 .graf canvas {
    left: -10px;
  }
}
#q2 .graf img {
  margin: auto;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #q2 .graf img {
    left: -20px;
  }
}
#q2 .graf ul li {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  flex-direction: column;
  line-height: 1.2;
}
#q2 .graf ul li[data-name="男性"] {
  padding: 0 10px 0 50px;
  bottom: 0;
  right: -130px;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="男性"] {
    padding: 0;
    right: -18vw;
    bottom: -20px;
  }
}
#q2 .graf ul li[data-name="男性"]::before {
  content: '';
  display: block;
  width: 160px;
  height: 2px;
  background: #F69525;
  position: absolute;
  bottom: 30px;
  left: 0;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="男性"]::before {
    content: none;
  }
}
#q2 .graf ul li[data-name="男性"] .q2_text {
  order: 1;
  color: #F69525;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="男性"] .q2_text {
    font-size: clamp(1px, 4vw, 2rem);
  }
}
#q2 .graf ul li[data-name="男性"] .q2_data {
  font-size: 2.8rem;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="男性"] .q2_data {
    font-size: clamp(1px, 5.6vw, 2.8rem);
  }
}
#q2 .graf ul li[data-name="男性"] .q2_data .num {
  color: #F69525;
  font-size: 6.4rem;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="男性"] .q2_data .num {
    font-size: clamp(1px, 12vw, 6.4rem);
  }
}
#q2 .graf ul li[data-name="女性"] {
  padding: 0 50px 0 10px;
  top: 0;
  left: -120px;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="女性"] {
    padding: 0;
    top: -30px;
    left: -17vw;
  }
}
#q2 .graf ul li[data-name="女性"]::before {
  content: '';
  display: block;
  width: 160px;
  height: 2px;
  background: #DA5F1D;
  position: absolute;
  top: 30px;
  left: 0;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="女性"]::before {
    content: none;
  }
}
#q2 .graf ul li[data-name="女性"] .q2_text {
  color: #DA5F1D;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="女性"] .q2_text {
    font-size: clamp(1px, 4vw, 2rem);
  }
}
#q2 .graf ul li[data-name="女性"] .q2_data {
  font-size: 2.8rem;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="女性"] .q2_data {
    font-size: clamp(1px, 5.6vw, 2.8rem);
  }
}
#q2 .graf ul li[data-name="女性"] .q2_data .num {
  color: #DA5F1D;
  font-size: 6.4rem;
}
@media screen and (max-width: 767px) {
  #q2 .graf ul li[data-name="女性"] .q2_data .num {
    font-size: clamp(1px, 12vw, 6.4rem);
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q3
+++++++++++++++++++++++++++++++++++++++++++ */
#q3 .q3_data {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 3px;
  justify-content: center;
  max-width: max-content;
  align-items: baseline;
  margin: 0 auto 25px;
  line-height: 1;
  font-size: 3.6rem;
  font-weight: bold;
  border-bottom: #E5E5E5 5px solid;
}
@media screen and (max-width: 767px) {
  #q3 .q3_data {
    font-size: 7.2vw;
  }
}
#q3 .q3_data .num {
  width: 190px;
  color: #F69525;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #q3 .q3_data .num {
    width: 38vw;
  }
}
#q3 ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 50px;
  justify-content: center;
}
#q3 ul li {
  text-align: center;
}
#q3 ul li img {
  margin: 0 auto 15px;
}
#q3 ul li .q3_data {
  margin-bottom: 0;
  font-size: 2rem;
  border: none;
}
@media screen and (max-width: 767px) {
  #q3 ul li .q3_data {
    font-size: 4vw;
  }
}
#q3 ul li .q3_data .num {
  width: 86px;
  color: #DA5F1D;
  font-size: 4rem;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #q3 ul li .q3_data .num {
    width: 17vw;
    font-size: 8vw;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q4
+++++++++++++++++++++++++++++++++++++++++++ */
#q4.graf_start .grafBar_item dd .num {
  animation: opacity 1s 1.2s forwards;
}
#q4.graf_start .grafBar_item dd[data-label="20代"]::before {
  animation: graf4_a 1s forwards;
  background: #F6BF25;
}
#q4.graf_start .grafBar_item dd[data-label="30代"]::before {
  animation: graf4_b 1s forwards;
  background: #CDAF5C;
}
#q4.graf_start .grafBar_item dd[data-label="40代"]::before {
  animation: graf4_c 1s forwards;
  background: #CDAF5C;
}
#q4.graf_start .grafBar_item dd[data-label="50代"]::before {
  animation: graf4_d 1s forwards;
  background: #CDAF5C;
}
#q4.graf_start .grafBar_item dd[data-label="60代"]::before {
  animation: graf4_e 1s forwards;
  background: #CDAF5C;
}
#q4 .grafBar {
  max-width: 320px;
}
@media screen and (max-width: 1023px) {
  #q4 .grafBar {
    max-width: none;
    padding-right: 150px;
  }
}
@media screen and (max-width: 767px) {
  #q4 .grafBar_item dt {
    min-width: 15vw;
  }
}
#q4 .grafBar_item dd {
  max-width: 420px;
  width: 0%;
}
@media screen and (max-width: 1023px) {
  #q4 .grafBar_item dd {
    max-width: none;
  }
}
#q4 .grafBar_item dd .num {
  color: #333;
}
@media screen and (max-width: 767px) {
  #q4 .grafBar_item dd .num {
    top: 12%;
  }
}
#q4 .grafBar_item dd .num strong {
  color: #F6BF25;
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  #q4 .grafBar_item dd .num strong {
    font-size: 6.4vw;
  }
}
#q4 .grafBar_item dd[data-label="20代"]::before {
  height: 30px;
}
#q4 .grafBar_item dd[data-label="20代"] .num {
  top: -3px;
  left: calc(100% + 12px);
}
@media screen and (max-width: 767px) {
  #q4 .grafBar_item dd[data-label="20代"] .num {
    top: -1.5vw;
  }
}
#q4 .grafBar_item dd[data-label="30代"] .num {
  left: calc(46% + 12px);
}
#q4 .grafBar_item dd[data-label="40代"] .num {
  left: calc(38.3% + 12px);
}
#q4 .grafBar_item dd[data-label="50代"] .num {
  left: calc(15.2% + 12px);
}
#q4 .grafBar_item dd[data-label="60代"] .num {
  left: calc(2.4% + 12px);
}
#q4 img {
  position: absolute;
  right: 62px;
  bottom: 75px;
}
@media screen and (max-width: 767px) {
  #q4 img {
    max-width: 128px;
    width: 16vw;
    right: 10px;
    bottom: 10px;
  }
}
@keyframes graf4_a {
  100% {
    width: 100%;
  }
}
@keyframes graf4_b {
  100% {
    width: 46%;
  }
}
@keyframes graf4_c {
  100% {
    width: 38.3%;
  }
}
@keyframes graf4_d {
  100% {
    width: 15.2%;
  }
}
@keyframes graf4_e {
  100% {
    width: 2.4%;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q5
+++++++++++++++++++++++++++++++++++++++++++ */
#q5 ul {
  max-width: 500px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #q5 ul {
    margin: 0;
  }
}
#q5 ul li {
  margin: 0 0 5px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  #q5 ul li {
    font-size: 4.8vw;
  }
}
#q5 ul li .num {
  width: 240px;
  padding-right: 10px;
  text-align: right;
  font-size: 4.8rem;
  color: #F6BF25;
}
@media screen and (max-width: 767px) {
  #q5 ul li .num {
    width: 48vw;
    font-size: 9.6vw;
  }
}
#q5 img {
  position: absolute;
  right: 35px;
  bottom: 75px;
}
@media screen and (max-width: 767px) {
  #q5 img {
    max-width: 112px;
    width: 16vw;
    right: 10px;
    bottom: 10px;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q6
+++++++++++++++++++++++++++++++++++++++++++ */
#q6 h2 {
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #q6 h2 {
    margin-bottom: 1em;
  }
}
#q6 .q6_data {
  text-align: center;
  font-weight: bold;
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  #q6 .q6_data {
    font-size: 6.4vw;
  }
}
#q6 .q6_data .num {
  width: 58px;
  color: #F2CC08;
}
@media screen and (max-width: 767px) {
  #q6 .q6_data .num {
    width: 12vw;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q7
+++++++++++++++++++++++++++++++++++++++++++ */
#q7 h2 {
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #q7 h2 {
    margin-bottom: 1em;
  }
}
#q7 .q7_data {
  text-align: center;
  font-weight: bold;
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  #q7 .q7_data {
    font-size: 6.4vw;
  }
}
#q7 .q7_data .num {
  color: #F2CC08;
}
#q7 .q7_data .num_y {
  width: 110px;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #q7 .q7_data .num_y {
    width: 22vw;
  }
}
#q7 .q7_data .num_m {
  width: 58px;
}
@media screen and (max-width: 767px) {
  #q7 .q7_data .num_m {
    width: 12vw;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q8
+++++++++++++++++++++++++++++++++++++++++++ */
#q8 .q8_data {
  text-align: center;
  font-weight: bold;
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  #q8 .q8_data {
    font-size: 6.4vw;
  }
}
#q8 .q8_data .num {
  width: 110px;
  color: #F2CC08;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #q8 .q8_data .num {
    width: 22vw;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q9
+++++++++++++++++++++++++++++++++++++++++++ */
#q9.dataItem {
  grid-area: left1;
}
#q9 .graf {
  width: 192px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #q9 .graf {
    margin: 50px auto;
  }
}
#q9 .graf canvas {
  position: relative;
}
@media screen and (max-width: 767px) {
  #q9 .graf canvas {
    left: -10px;
  }
}
#q9 .graf img {
  margin: auto;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #q9 .graf img {
    left: -20px;
  }
}
#q9 .graf ul li {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 3px;
  flex-direction: column;
  line-height: 1.2;
}
#q9 .graf ul li[data-label="45分以内"] {
  padding: 0 10px 0 50px;
  top: 0;
  right: -130px;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分以内"] {
    padding: 0;
    top: -40px;
    right: -16vw;
  }
}
#q9 .graf ul li[data-label="45分以内"]::before {
  content: '';
  display: block;
  width: 160px;
  height: 21px;
  background: url(../img/bg_q9_line_a.png) no-repeat;
  position: absolute;
  top: 26px;
  left: 0;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分以内"]::before {
    content: none;
  }
}
#q9 .graf ul li[data-label="45分以内"] .q9_text {
  color: #9FAC76;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分以内"] .q9_text {
    font-size: clamp(1px, 3.6vw, 1.8rem);
  }
}
#q9 .graf ul li[data-label="45分以内"] .q9_data {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分以内"] .q9_data {
    font-size: clamp(1px, 4vw, 2rem);
  }
}
#q9 .graf ul li[data-label="45分以内"] .q9_data .num {
  color: #9FAC76;
  font-size: 4.8rem;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分以内"] .q9_data .num {
    font-size: clamp(1px, 9.6vw, 4.8rem);
  }
}
#q9 .graf ul li[data-label="45分～1時間"] {
  padding: 0 10px 0 50px;
  bottom: -30px;
  right: -130px;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分～1時間"] {
    padding: 0;
    bottom: -40px;
    right: -17vw;
  }
}
#q9 .graf ul li[data-label="45分～1時間"]::before {
  content: '';
  display: block;
  width: 156px;
  height: 15px;
  background: url(../img/bg_q9_line_b.png) no-repeat;
  position: absolute;
  top: 15px;
  left: 15px;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分～1時間"]::before {
    content: none;
  }
}
#q9 .graf ul li[data-label="45分～1時間"] .q9_text {
  color: #9FAC76;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分～1時間"] .q9_text {
    font-size: clamp(1px, 3.6vw, 1.8rem);
  }
}
#q9 .graf ul li[data-label="45分～1時間"] .q9_data {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分～1時間"] .q9_data {
    font-size: clamp(1px, 4vw, 2rem);
  }
}
#q9 .graf ul li[data-label="45分～1時間"] .q9_data .num {
  color: #9FAC76;
  font-size: 4.8rem;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="45分～1時間"] .q9_data .num {
    font-size: clamp(1px, 9.6vw, 4.8rem);
  }
}
#q9 .graf ul li[data-label="1時間以上"] {
  padding: 0 50px 0 10px;
  top: 0;
  left: -120px;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="1時間以上"] {
    padding: 0;
    top: -20px;
    left: -17vw;
  }
}
#q9 .graf ul li[data-label="1時間以上"]::before {
  content: '';
  display: block;
  width: 160px;
  height: 2px;
  background: #B3D540;
  position: absolute;
  top: 30px;
  left: 0;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="1時間以上"]::before {
    content: none;
  }
}
#q9 .graf ul li[data-label="1時間以上"] .q9_text {
  color: #B3D540;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="1時間以上"] .q9_text {
    font-size: clamp(1px, 3.6vw, 2.4rem);
  }
}
#q9 .graf ul li[data-label="1時間以上"] .q9_data {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="1時間以上"] .q9_data {
    font-size: clamp(1px, 4vw, 2rem);
  }
}
#q9 .graf ul li[data-label="1時間以上"] .q9_data .num {
  color: #B3D540;
  font-size: 6.4rem;
}
@media screen and (max-width: 767px) {
  #q9 .graf ul li[data-label="1時間以上"] .q9_data .num {
    font-size: clamp(1px, 9.6vw, 4.8rem);
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q10
+++++++++++++++++++++++++++++++++++++++++++ */
#q10.dataItem {
  grid-area: right1;
}
#q10.graf_start .q10_graf_bar {
  animation: graf10_bar 1s forwards;
}
#q10 .q10_graf {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 424px;
  margin: 0 auto;
}
@media screen and (max-width: 1023px) {
  #q10 .q10_graf {
    max-width: none;
  }
}
#q10 .q10_graf_label_a {
  font-weight: bold;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  #q10 .q10_graf_label_a {
    font-size: 4vw;
  }
}
#q10 .q10_graf_label_a .num {
  color: #9FAC76;
  font-size: 4.8rem;
  width: 58px;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #q10 .q10_graf_label_a .num {
    width: 12vw;
    font-size: 9.6vw;
  }
}
#q10 .q10_graf_label_b {
  font-weight: bold;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  #q10 .q10_graf_label_b {
    font-size: 4.8vw;
  }
}
#q10 .q10_graf_label_b .num {
  color: #B3D540;
  font-size: 7.2rem;
  width: 80px;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #q10 .q10_graf_label_b .num {
    font-size: 14.4vw;
    width: 16vw;
  }
}
#q10 .q10_graf_bar {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 3px;
  width: 0;
  height: 38px;
  margin: 0 auto;
  position: relative;
}
#q10 .q10_graf_bar::before,
#q10 .q10_graf_bar::after {
  content: '';
  display: block;
  height: 100%;
}
#q10 .q10_graf_bar::before {
  width: 23%;
  background: #9FAC76;
}
#q10 .q10_graf_bar::after {
  width: 77%;
  background: #B3D540;
}
@keyframes graf10_bar {
  100% {
    width: 100%;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q11
+++++++++++++++++++++++++++++++++++++++++++ */
#q11.dataItem {
  grid-area: left2;
}
#q11.graf_start ul li .circle {
  animation: circleScale 1s forwards;
}
#q11.graf_start ul li strong {
  animation: opacity 1s 1.2s forwards;
}
#q11 ul {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 350px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #q11 ul {
    max-width: 340px;
    margin: 30px auto;
  }
}
#q11 ul li {
  position: absolute;
}
#q11 ul li .circle {
  content: '';
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #FFF;
  width: 100%;
  height: 100%;
  background: #589972;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scale(0);
}
@media screen and (max-width: 767px) {
  #q11 ul li .circle {
    font-size: 1.4rem;
  }
}
#q11 ul li[data-label="エンジニア"] {
  width: 203px;
  height: 203px;
  top: 70px;
  left: 120px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="エンジニア"] {
    width: 152px;
    height: 152px;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
  }
}
#q11 ul li[data-label="エンジニア"] .circle {
  background: #2BD56F;
  font-size: 3.2rem;
}
#q11 ul li[data-label="エンジニア"] strong {
  padding: 0 0 0 30px;
  font-size: 2.4rem;
  color: #2BD56F;
  right: -120px;
  bottom: 50px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="エンジニア"] strong {
    padding: 0;
    right: 15px;
    bottom: -40px;
  }
}
#q11 ul li[data-label="エンジニア"] strong::before {
  width: 150px;
  height: 19px;
  background: url(../img/bg_q10_line_a.png) no-repeat;
  position: absolute;
  bottom: 0px;
  left: 0;
}
#q11 ul li[data-label="エンジニア"] .num {
  font-size: 6.4rem;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="エンジニア"] .num {
    font-size: 4.8rem;
  }
}
#q11 ul li[data-label="テクニカルリード"] {
  width: 68px;
  height: 68px;
  top: 35px;
  left: 45px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="テクニカルリード"] {
    left: 10px;
  }
}
#q11 ul li[data-label="テクニカルリード"] strong {
  padding: 0 0 0 10px;
  right: -126px;
  top: -32px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="テクニカルリード"] strong {
    padding: 0;
    right: auto;
    left: 0;
  }
}
#q11 ul li[data-label="テクニカルリード"] strong::before {
  width: 164px;
  height: 13px;
  background: url(../img/bg_q10_line_b.png) no-repeat;
  position: absolute;
  bottom: -10px;
  left: 0;
}
#q11 ul li[data-label="管理職"] {
  width: 68px;
  height: 68px;
  top: 20px;
  right: 100px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="管理職"] {
    right: 5%;
  }
}
#q11 ul li[data-label="管理職"] strong {
  padding: 0 0 0 15px;
  right: -58px;
  bottom: 6px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="管理職"] strong {
    padding: 0;
    right: 0;
    top: -30px;
    bottom: auto;
  }
}
#q11 ul li[data-label="管理職"] strong::before {
  width: 76px;
  height: 19px;
  background: url(../img/bg_q10_line_c.png) no-repeat;
  position: absolute;
  bottom: -10px;
  left: 0;
}
#q11 ul li[data-label="ルーキー"] {
  width: 81px;
  height: 81px;
  bottom: 14px;
  left: 78px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="ルーキー"] {
    width: 60px;
    height: 60px;
    left: 10%;
  }
}
#q11 ul li[data-label="ルーキー"] strong {
  padding: 0 30px 0 5px;
  left: -78px;
  top: -28px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="ルーキー"] strong {
    padding: 0;
    left: 0;
    top: auto;
    bottom: -30px;
  }
}
#q11 ul li[data-label="ルーキー"] strong::before {
  width: 99px;
  height: 12px;
  background: url(../img/bg_q10_line_d.png) no-repeat;
  position: absolute;
  bottom: -10px;
  left: 0;
}
#q11 ul li[data-label="ミドルエンジニア"] {
  width: 81px;
  height: 81px;
  bottom: -10px;
  right: 152px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="ミドルエンジニア"] {
    width: 61px;
    height: 61px;
    right: 10px;
    bottom: 30px;
  }
}
#q11 ul li[data-label="ミドルエンジニア"] strong {
  padding: 0 0 0 10px;
  right: -130px;
  top: -26px;
}
@media screen and (max-width: 767px) {
  #q11 ul li[data-label="ミドルエンジニア"] strong {
    padding: 0;
    right: -20px;
    top: auto;
    bottom: -30px;
  }
}
#q11 ul li[data-label="ミドルエンジニア"] strong::before {
  width: 168px;
  height: 14px;
  background: url(../img/bg_q10_line_e.png) no-repeat;
  position: absolute;
  bottom: -14px;
  left: 0;
}
#q11 ul li strong {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  color: #589972;
  position: absolute;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  #q11 ul li strong {
    white-space: nowrap;
  }
}
#q11 ul li strong::before {
  content: '';
  display: block;
}
@media screen and (max-width: 767px) {
  #q11 ul li strong::before {
    content: none;
  }
}
#q11 ul li .num {
  font-size: 2.4rem;
  color: #FFF;
}
@media screen and (max-width: 767px) {
  #q11 ul li .num {
    font-size: 2rem;
  }
}
@keyframes circleScale {
  100% {
    transform: scale(1);
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q12
+++++++++++++++++++++++++++++++++++++++++++ */
#q12.dataItem {
  grid-area: right2;
}
#q12.graf_start .q12_graf_bar {
  animation: graf12_bar 1s forwards;
}
#q12 .q12_graf {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 424px;
  margin: 0 auto;
}
@media screen and (max-width: 1023px) {
  #q12 .q12_graf {
    max-width: none;
  }
}
#q12 .q12_graf_label_a {
  font-weight: bold;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  #q12 .q12_graf_label_a {
    font-size: 4.8vw;
  }
}
#q12 .q12_graf_label_a .num {
  color: #2BD56F;
  font-size: 7.2rem;
  width: 88px;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #q12 .q12_graf_label_a .num {
    width: 19vw;
    font-size: 14.4vw;
  }
}
#q12 .q12_graf_label_b {
  font-weight: bold;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  #q12 .q12_graf_label_b {
    font-size: 4vw;
  }
}
#q12 .q12_graf_label_b .num {
  color: #589972;
  font-size: 4.8rem;
  width: 64px;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #q12 .q12_graf_label_b .num {
    font-size: 9.6vw;
    width: 12.8vw;
  }
}
#q12 .q12_graf_bar {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 3px;
  width: 0;
  height: 38px;
  position: relative;
  margin: 0 auto;
}
#q12 .q12_graf_bar::before,
#q12 .q12_graf_bar::after {
  content: '';
  display: block;
  height: 100%;
}
#q12 .q12_graf_bar::before {
  width: 52%;
  background: #2BD56F;
}
#q12 .q12_graf_bar::after {
  width: 48%;
  background: #589972;
}
@keyframes graf12_bar {
  100% {
    width: 100%;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q13
+++++++++++++++++++++++++++++++++++++++++++ */
#q13.dataItem {
  grid-area: right3;
}
#q13.graf_start .grafBar_item dd .num {
  animation: opacity 1s 1.2s forwards;
}
#q13.graf_start .grafBar_item dd[data-label="Eclipse"]::before {
  animation: graf13_a 1s forwards;
  background: #2BD56F;
}
#q13.graf_start .grafBar_item dd[data-label="Git"]::before {
  animation: graf13_b 1s forwards;
  background: #589972;
}
#q13.graf_start .grafBar_item dd[data-label="VSCode"]::before {
  animation: graf13_c 1s forwards;
  background: #589972;
}
#q13.graf_start .grafBar_item dd[data-label="Visual Studio"]::before {
  animation: graf13_d 1s forwards;
  background: #589972;
}
#q13 .grafBar {
  max-width: 360px;
}
@media screen and (max-width: 1023px) {
  #q13 .grafBar {
    max-width: none;
    padding-right: 80px;
  }
}
@media screen and (max-width: 767px) {
  #q13 .grafBar {
    padding-right: 15vw;
  }
}
#q13 .grafBar_item dt {
  min-width: 125px;
}
@media screen and (max-width: 767px) {
  #q13 .grafBar_item dt {
    min-width: 25vw;
  }
}
#q13 .grafBar_item dd {
  max-width: 420px;
  width: 0%;
}
@media screen and (max-width: 1023px) {
  #q13 .grafBar_item dd {
    max-width: none;
  }
}
#q13 .grafBar_item dd .num {
  color: #333;
}
#q13 .grafBar_item dd .num strong {
  color: #2BD56F;
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  #q13 .grafBar_item dd .num strong {
    font-size: 6.4vw;
  }
}
#q13 .grafBar_item dd[data-label="Eclipse"]::before {
  height: 30px;
}
#q13 .grafBar_item dd[data-label="Eclipse"] .num {
  top: -3px;
  left: calc(100% + 12px);
}
@media screen and (max-width: 767px) {
  #q13 .grafBar_item dd[data-label="Eclipse"] .num {
    top: -1.5vw;
  }
}
#q13 .grafBar_item dd[data-label="Git"] .num {
  left: calc(79.5% + 12px);
}
#q13 .grafBar_item dd[data-label="VSCode"] .num {
  left: calc(56.2% + 12px);
}
#q13 .grafBar_item dd[data-label="Visual Studio"] .num {
  left: calc(30.1% + 12px);
}
@keyframes graf13_a {
  100% {
    width: 100%;
  }
}
@keyframes graf13_b {
  100% {
    width: 79.5%;
  }
}
@keyframes graf13_c {
  100% {
    width: 56.2%;
  }
}
@keyframes graf13_d {
  100% {
    width: 30.1%;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q14
+++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 1023px) {
  #q14.dataItem {
    max-width: 768px;
    margin: 0 auto;
  }
}
#q14 ul {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 950px;
  margin: 0 auto;
}
@media screen and (max-width: 1023px) {
  #q14 ul {
    flex-wrap: wrap;
    gap: 10px;
  }
}
@media screen and (max-width: 767px) {
  #q14 ul {
    gap: 0;
  }
}
#q14 ul:nth-of-type(1) {
  margin-bottom: 40px;
  padding-right: 140px;
}
@media screen and (max-width: 1023px) {
  #q14 ul:nth-of-type(1) {
    margin-bottom: 0;
    padding-right: 0;
  }
}
#q14 ul:nth-of-type(1) li {
  font-size: 2.4rem;
}
@media screen and (max-width: 1023px) {
  #q14 ul:nth-of-type(1) li {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 767px) {
  #q14 ul:nth-of-type(1) li {
    width: calc(50% - 5px);
    font-size: 4vw;
  }
}
#q14 ul:nth-of-type(1) li .num {
  font-size: 6.4rem;
  min-width: 90px;
}
@media screen and (max-width: 767px) {
  #q14 ul:nth-of-type(1) li .num {
    font-size: 9.2vw;
    min-width: 12vw;
    text-align: right;
  }
}
#q14 ul li {
  border-bottom: #E5E5E5 5px solid;
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 1023px) {
  #q14 ul li {
    width: calc(33% - 10px);
    text-align: right;
  }
}
@media screen and (max-width: 767px) {
  #q14 ul li {
    width: calc(50% - 5px);
    font-size: 4vw;
  }
}
#q14 ul li .num {
  min-width: 40px;
  text-align: center;
  color: #25CFE5;
  font-size: 4.8rem;
}
@media screen and (max-width: 767px) {
  #q14 ul li .num {
    min-width: 8vw;
    font-size: 9.2vw;
    text-align: right;
  }
}
#q14 img {
  position: absolute;
  top: 95px;
  right: 64px;
}
@media screen and (max-width: 1023px) {
  #q14 img {
    width: 113px;
    max-width: 16vw;
    top: auto;
    bottom: 10px;
    right: 20px;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q15
+++++++++++++++++++++++++++++++++++++++++++ */
#q15.graf_start .grafBar_item dd .num {
  animation: opacity 1s 1.2s forwards;
}
#q15.graf_start .grafBar_item dd[data-label="SpringFramework"]::before {
  animation: graf15_b 1s forwards;
  background: #6A72F3;
}
#q15.graf_start .grafBar_item dd[data-label="MyBatis"]::before {
  animation: graf15_c 1s forwards;
  background: #7275A2;
}
#q15.graf_start .grafBar_item dd[data-label="Vue.js"]::before {
  animation: graf15_d 1s forwards;
  background: #7275A2;
}
#q15.graf_start .grafBar_item dd[data-label="React"]::before {
  animation: graf15_e 1s forwards;
  background: #7275A2;
}
#q15.graf_start .grafBar_item dd[data-label="Nuxt.js"]::before {
  animation: graf15_e 1s forwards;
  background: #7275A2;
}
#q15 .grafBar {
  max-width: 360px;
}
@media screen and (max-width: 1023px) {
  #q15 .grafBar {
    max-width: none;
    padding-right: 80px;
  }
}
@media screen and (max-width: 767px) {
  #q15 .grafBar {
    padding-right: 15vw;
  }
}
#q15 .grafBar_item dt {
  min-width: 180px;
}
@media screen and (max-width: 767px) {
  #q15 .grafBar_item dt {
    min-width: 36vw;
  }
}
#q15 .grafBar_item dd {
  max-width: 210px;
  width: 0%;
}
@media screen and (max-width: 1023px) {
  #q15 .grafBar_item dd {
    max-width: none;
  }
}
#q15 .grafBar_item dd .num {
  color: #333;
}
#q15 .grafBar_item dd .num strong {
  color: #6A72F3;
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  #q15 .grafBar_item dd .num strong {
    font-size: 6.4vw;
  }
}
#q15 .grafBar_item dd[data-label="SpringFramework"]::before {
  height: 30px;
}
#q15 .grafBar_item dd[data-label="SpringFramework"] .num {
  top: -3px;
  left: calc(90.5% + 12px);
}
@media screen and (max-width: 767px) {
  #q15 .grafBar_item dd[data-label="SpringFramework"] .num {
    top: -1.5vw;
  }
}
#q15 .grafBar_item dd[data-label="MyBatis"] .num {
  left: calc(54.8% + 12px);
}
#q15 .grafBar_item dd[data-label="Vue.js"] .num {
  left: calc(31% + 12px);
}
#q15 .grafBar_item dd[data-label="React"] .num {
  left: calc(14.3% + 12px);
}
#q15 .grafBar_item dd[data-label="Nuxt.js"] .num {
  left: calc(14.3% + 12px);
}
@keyframes graf15_a {
  100% {
    width: 100%;
  }
}
@keyframes graf15_b {
  100% {
    width: 90.5%;
  }
}
@keyframes graf15_c {
  100% {
    width: 54.8%;
  }
}
@keyframes graf15_d {
  100% {
    width: 31%;
  }
}
@keyframes graf15_e {
  100% {
    width: 14.3%;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q16
+++++++++++++++++++++++++++++++++++++++++++ */
#q16.graf_start .grafBar_item dd .num {
  animation: opacity 1s 1.2s forwards;
}
#q16.graf_start .grafBar_item dd[data-label="Oracle"]::before {
  animation: graf16_a 1s forwards;
  background: #6A72F3;
}
#q16.graf_start .grafBar_item dd[data-label="PostgreSQL"]::before {
  animation: graf16_b 1s forwards;
  background: #7275A2;
}
#q16.graf_start .grafBar_item dd[data-label="MySQL"]::before {
  animation: graf16_c 1s forwards;
  background: #7275A2;
}
#q16.graf_start .grafBar_item dd[data-label="SQL Server"]::before {
  animation: graf16_d 1s forwards;
  background: #7275A2;
}
#q16.graf_start .grafBar_item dd[data-label="HiRDB"]::before {
  animation: graf16_e 1s forwards;
  background: #7275A2;
}
#q16 .grafBar {
  max-width: 360px;
}
@media screen and (max-width: 1023px) {
  #q16 .grafBar {
    max-width: none;
    padding-right: 80px;
  }
}
@media screen and (max-width: 767px) {
  #q16 .grafBar {
    padding-right: 15vw;
  }
}
#q16 .grafBar_item dt {
  min-width: 180px;
}
@media screen and (max-width: 767px) {
  #q16 .grafBar_item dt {
    min-width: 36vw;
  }
}
#q16 .grafBar_item dd {
  max-width: 210px;
  width: 0%;
}
@media screen and (max-width: 1023px) {
  #q16 .grafBar_item dd {
    max-width: none;
  }
}
#q16 .grafBar_item dd .num {
  color: #333;
}
#q16 .grafBar_item dd .num strong {
  color: #6A72F3;
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  #q16 .grafBar_item dd .num strong {
    font-size: 6.4vw;
  }
}
#q16 .grafBar_item dd[data-label="Oracle"]::before {
  height: 30px;
}
#q16 .grafBar_item dd[data-label="Oracle"] .num {
  top: -3px;
  left: calc(100% + 12px);
}
@media screen and (max-width: 767px) {
  #q16 .grafBar_item dd[data-label="Oracle"] .num {
    top: -1.5vw;
  }
}
#q16 .grafBar_item dd[data-label="PostgreSQL"] .num {
  left: calc(78.3% + 12px);
}
#q16 .grafBar_item dd[data-label="MySQL"] .num {
  left: calc(63.3% + 12px);
}
#q16 .grafBar_item dd[data-label="SQL Server"] .num {
  left: calc(48.3% + 12px);
}
#q16 .grafBar_item dd[data-label="HiRDB"] .num {
  left: calc(25% + 12px);
}
@keyframes graf16_a {
  100% {
    width: 100%;
  }
}
@keyframes graf16_b {
  100% {
    width: 78.3%;
  }
}
@keyframes graf16_c {
  100% {
    width: 63.3%;
  }
}
@keyframes graf16_d {
  100% {
    width: 48.3%;
  }
}
@keyframes graf16_e {
  100% {
    width: 25%;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++
	q17 - q19
+++++++++++++++++++++++++++++++++++++++++++ */
#q17.dataItem,
#q18.dataItem,
#q19.dataItem {
  padding: 30px 17px;
}
#q17.graf_start .graf_data_num,
#q18.graf_start .graf_data_num,
#q19.graf_start .graf_data_num {
  animation: opacity 1s 1.2s forwards;
}
#q17 p,
#q18 p,
#q19 p {
  min-height: 50px;
}
#q17 p span,
#q18 p span,
#q19 p span {
  color: #9A9A9A;
}
#q17 .graf,
#q18 .graf,
#q19 .graf {
  height: 100px;
  margin: 0 auto 10px;
  position: relative;
}
#q17 .graf img,
#q18 .graf img,
#q19 .graf img {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  margin: auto;
  pointer-events: none;
}
#q17 .graf_data,
#q18 .graf_data,
#q19 .graf_data {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  align-items: flex-start;
  max-width: 260px;
  margin: 0 auto;
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #q17 .graf_data,
  #q18 .graf_data,
  #q19 .graf_data {
    max-width: 60vw;
    font-size: 4vw;
  }
}
#q17 .graf_data_a .num,
#q18 .graf_data_a .num,
#q19 .graf_data_a .num {
  font-size: 6.4rem;
  color: #12D39C;
}
@media screen and (max-width: 767px) {
  #q17 .graf_data_a .num,
  #q18 .graf_data_a .num,
  #q19 .graf_data_a .num {
    font-size: 12.8vw;
  }
}
#q17 .graf_data_b .num,
#q18 .graf_data_b .num,
#q19 .graf_data_b .num {
  font-size: 4.8rem;
  color: #498272;
}
@media screen and (max-width: 767px) {
  #q17 .graf_data_b .num,
  #q18 .graf_data_b .num,
  #q19 .graf_data_b .num {
    font-size: 9.6vw;
  }
}
#q17 .graf_data_num,
#q18 .graf_data_num,
#q19 .graf_data_num {
  opacity: 0;
}