@charset "UTF-8";
:root {
  --color-red: #db0000;
  --color-pink: #f5a9a9;
  --color-blue: #1c4896;
  --color-text: #333;
  --color-bg: #f2f2f2;
  --color-border: #ddd;
  --color-button-border: #dadada;
  --color-disabled: #ccc;
  --color-disabled-border: #f1f1f1;
  --color-red--75: #db000075;
}
:root {
  --color-q-blue: #148FDC;
  --color-q-blue-light: #D0E9F8;
  --color-q-green: #5AC8C8;
  --color-q-green-light: #CDEEEE;
}
#main .question_kv {
  margin-bottom: 115px;
}
@media screen and (max-width: 1023px) {
  #main .question_kv {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 767px) {
  #main .question_kv {
    margin-bottom: 40px;
  }
}
#main .question_kv .kv_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  padding: 29px 0px;
}
@media screen and (max-width: 1023px) {
  #main .question_kv .kv_inner {
    padding: 30px;
  }
}
@media screen and (max-width: 767px) {
  #main .question_kv .kv_inner {
    display: block;
    padding: 0 15px;
  }
}
#main .question_kv .kv_img {
  flex: 0 0 42.556%;
  transform: translateX(-28px);
}
@media screen and (max-width: 1023px) {
  #main .question_kv .kv_img {
    transform: none;
  }
}
#main .question_kv .kv_title {
  margin: 0;
  font-size: 50px;
  font-weight: 900;
  margin-left: 74px;
  line-height: 1.2;
}
@media screen and (max-width: 1023px) {
  #main .question_kv .kv_title {
    margin-left: 45px;
    font-size: 44px;
  }
}
@media screen and (max-width: 767px) {
  #main .question_kv .kv_title {
    margin: 40px 0 0;
    font-size: 40px;
  }
}
#main .lead {
  margin-bottom: 73px;
}
@media screen and (max-width: 767px) {
  #main .lead {
    margin-bottom: 30px;
    padding: 0 30px;
  }
}
#main .lead p {
  margin: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 2.1;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #main .lead p {
    font-size: 16px;
    line-height: 1.75;
  }
}
#main .lead p + p {
  margin-top: 1em;
}
#main .questions {
  padding: 44px 20px 46px;
  background-color: var(--color-q-blue-light);
}
@media screen and (max-width: 1023px) {
  #main .questions {
    padding: 44px 40px 46px;
  }
}
@media screen and (max-width: 767px) {
  #main .questions {
    padding: 25px 15px 36px;
  }
}
#main .questions:nth-child(even) {
  background-color: var(--color-q-green-light);
}
#main .questions:nth-child(even) .box_content .box_content_title {
  background-color: var(--color-q-green);
}
#main .questions:nth-child(even) .box_content .inline_list > li::before, #main .questions:nth-child(even) .box_content p::before {
  background-color: var(--color-q-green);
}
#main .questions:nth-child(even) .pie-chart::after {
  background: var(--color-q-green-light);
}
#main .questions:nth-child(even) .ranking > li .wrap::after {
  background: var(--color-q-green);
}
#main .questions .graphs_wrap {
  margin: 0 auto;
}
#main .questions .before_joining_graphs {
  /* max-width: 800px; */
  padding: 0 100px;
  border-bottom: 1px solid #b3b3b3;
}
@media screen and (max-width: 1023px) {
  #main .questions .before_joining_graphs {
    padding: 0 50px;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .before_joining_graphs {
    padding: 0 20px;
    margin-bottom: 160px;
  }
}
#main .questions .title {
  margin: 0;
  font-weight: bold;
  font-size: 25px;
  line-height: 1.52;
  letter-spacing: 0.05em;
  padding-left: 1.9em;
  text-indent: -0.95em;
}
@media screen and (max-width: 767px) {
  #main .questions .title {
    font-size: 16px;
    line-height: 1.45;
    text-indent: -1.25em;
  }
}
#main .questions .title:not(:has(.title_nam)) {
  padding-left: 0;
  text-indent: 0;
}
#main .questions .title .title_nam {
  display: inline-block;
  margin-right: 17px;
  font-size: 20px;
  transform: translateY(-3px);
}
@media screen and (max-width: 767px) {
  #main .questions .title .title_nam {
    margin-right: 13px;
    font-size: 18px;
  }
}
#main .questions .title .strong {
  color: #FA1414;
}
#main .questions .title .small {
  font-size: 0.6em;
}
#main .questions .bar_graphs {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: space-between;
}
#main .questions .bar_graphs .bar_graph {
  flex: 0 0 70px;
  height: 100%;
}
@media screen and (max-width: 1023px) {
  #main .questions .bar_graphs .bar_graph {
    flex: 0 0 40px;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs .bar_graph {
    flex: 0 0 30px;
  }
}
#main .questions .bar_graphs .graph_wrap {
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  height: 100%;
}
#main .questions .bar_graphs .graph_title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  #main .questions .bar_graphs .graph_title {
    font-size: 17px;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs .graph_title {
    font-size: 12px;
  }
}
#main .questions .bar_graphs .graph_title .graph_ratio {
  display: block;
  font-size: 16px;
}
@media screen and (max-width: 1023px) {
  #main .questions .bar_graphs .graph_title .graph_ratio {
    font-size: 13px;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs .graph_title .graph_ratio {
    font-size: 11px;
  }
}
#main .questions .bar_graphs .graph_title + .graph_main {
  margin-top: 5px;
}
#main .questions .bar_graphs .graph_img {
  margin: 7px 0;
  text-align: center;
}
#main .questions .bar_graphs .graph_img img {
  display: block;
  margin: 0 auto;
}
#main .questions .bar_graphs .graph_main {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
#main .questions .bar_graphs .graph_main .graph_main_text {
  padding: 5px 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 16px;
  color: #fff;
}
@media screen and (max-width: 1023px) {
  #main .questions .bar_graphs .graph_main .graph_main_text {
    font-size: 13px;
    line-height: 1.4;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs .graph_main .graph_main_text {
    font-size: 12px;
    letter-spacing: 0.05em;
  }
}
#main .questions .bar_graphs.bar_graphs_orders .graph_title {
  opacity: 0;
}
#main .questions .bar_graphs.bar_graphs_orders .graph_img {
  opacity: 0;
}
#main .questions .bar_graphs.bar_graphs_orders .graph_main_text {
  transform: scale(1, 0);
  transform-origin: top;
  transition: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .graph_main {
  transform: scale(1, 0);
  transform-origin: bottom;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_1 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_1 .graph_main {
  transition-delay: 0.3s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_1 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_1 .graph_title {
  transition-delay: 0.4s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_1 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_1 .graph_img {
  transition-delay: 0.2s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_1 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_1 .graph_main_text {
  transition-delay: 0.3s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_2 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_2 .graph_main {
  transition-delay: 0.6s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_2 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_2 .graph_title {
  transition-delay: 0.8s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_2 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_2 .graph_img {
  transition-delay: 0.4s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_2 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_2 .graph_main_text {
  transition-delay: 0.6s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_3 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_3 .graph_main {
  transition-delay: 0.9s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_3 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_3 .graph_title {
  transition-delay: 1.2s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_3 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_3 .graph_img {
  transition-delay: 0.6s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_3 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_3 .graph_main_text {
  transition-delay: 0.9s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_4 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_4 .graph_main {
  transition-delay: 1.2s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_4 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_4 .graph_title {
  transition-delay: 1.6s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_4 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_4 .graph_img {
  transition-delay: 0.8s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_4 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_4 .graph_main_text {
  transition-delay: 1.2s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_5 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_5 .graph_main {
  transition-delay: 1.5s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_5 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_5 .graph_title {
  transition-delay: 2s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_5 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_5 .graph_img {
  transition-delay: 1s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_5 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_5 .graph_main_text {
  transition-delay: 1.5s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_6 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_6 .graph_main {
  transition-delay: 1.8s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_6 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_6 .graph_title {
  transition-delay: 2.4s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_6 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_6 .graph_img {
  transition-delay: 1.2s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_6 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_6 .graph_main_text {
  transition-delay: 1.8s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_7 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_7 .graph_main {
  transition-delay: 2.1s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_7 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_7 .graph_title {
  transition-delay: 2.8s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_7 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_7 .graph_img {
  transition-delay: 1.4s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_7 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_7 .graph_main_text {
  transition-delay: 2.1s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_8 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_8 .graph_main {
  transition-delay: 2.4s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_8 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_8 .graph_title {
  transition-delay: 3.2s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_8 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_8 .graph_img {
  transition-delay: 1.6s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_8 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_8 .graph_main_text {
  transition-delay: 2.4s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_9 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_9 .graph_main {
  transition-delay: 2.7s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_9 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_9 .graph_title {
  transition-delay: 3.6s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_9 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_9 .graph_img {
  transition-delay: 1.8s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_9 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_9 .graph_main_text {
  transition-delay: 2.7s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_10 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_10 .graph_main {
  transition-delay: 3s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_10 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_10 .graph_title {
  transition-delay: 4s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_10 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_10 .graph_img {
  transition-delay: 2s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_10 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_10 .graph_main_text {
  transition-delay: 3s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_11 .graph_main, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_11 .graph_main {
  transition-delay: 3.3s;
  transition-timing-function: linear;
  transition-duration: 0.4s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_11 .graph_title, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_11 .graph_title {
  transition-delay: 4.4s;
  transition-timing-function: linear;
  transition-duration: 0.3s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_11 .graph_img, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_11 .graph_img {
  transition-delay: 2.2s;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}
#main .questions .bar_graphs.bar_graphs_orders .decisive_factor_graph_11 .graph_main_text, #main .questions .bar_graphs.bar_graphs_orders .before_joinin_graph_11 .graph_main_text {
  transition-delay: 3.3s;
  transition-timing-function: linear;
  transition-duration: 0.2s;
}
#main .questions .bar_graphs.bar_graphs_orders:not(.bar_graphs_view) .graph_main {
  flex: 0;
}
#main .questions .bar_graphs.bar_graphs_orders.bar_graphs_view .graph_title {
  opacity: 1;
}
#main .questions .bar_graphs.bar_graphs_orders.bar_graphs_view .graph_img {
  opacity: 1;
}
#main .questions .bar_graphs.bar_graphs_orders.bar_graphs_view .graph_main, #main .questions .bar_graphs.bar_graphs_orders.bar_graphs_view .graph_img {
  transform: scale(1);
}
#main .questions .bar_graphs.bar_graphs_orders.bar_graphs_view .graph_main_text {
  transform: scale(1);
}
#main .questions .bar_graphs.decisive_factor_graph {
  margin-top: -4px;
  aspect-ratio: 1.7361111111;
  border-bottom: 1px solid #fff;
}
@media screen and (max-width: 1023px) {
  #main .questions .bar_graphs.decisive_factor_graph {
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs.decisive_factor_graph {
    margin-top: 80px;
    margin-bottom: 65%;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs.decisive_factor_graph .bar_graph {
    flex: auto;
    max-width: calc(100% / 13);
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs.decisive_factor_graph .graph_title {
    transform: scale(0.8);
  }
}
#main .questions .bar_graphs.decisive_factor_graph .graph_main {
  background-color: #5AB1E6;
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs.decisive_factor_graph .graph_main {
    position: relative;
  }
  #main .questions .bar_graphs.decisive_factor_graph .graph_main .graph_main_text {
    position: absolute;
    bottom: auto;
    top: 100%;
    white-space: nowrap;
    color: #000;
  }
  #main .questions .bar_graphs.decisive_factor_graph .graph_main .graph_main_text br {
    display: none;
  }
}
#main .questions .bar_graphs.before_joining {
  margin: 0 auto;
  aspect-ratio: 1.375;
}
@media screen and (max-width: 1023px) {
  #main .questions .bar_graphs.before_joining {
    margin-top: 60px;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs.before_joining {
    margin-top: 80px;
  }
}
#main .questions .bar_graphs.before_joining .bar_graph {
  flex: 0 0 120px;
}
@media screen and (max-width: 1023px) {
  #main .questions .bar_graphs.before_joining .bar_graph {
    flex: 0 0 80px;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs.before_joining .bar_graph {
    flex: 0 0 calc(100% / 8);
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs.before_joining .graph_img {
    padding: 0 4px;
  }
}
#main .questions .bar_graphs.before_joining .graph_main {
  background-color: var(--color-q-green);
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs.before_joining .graph_main {
    position: relative;
  }
}
@media screen and (max-width: 1023px) {
  #main .questions .bar_graphs.before_joining .graph_main_text {
    font-size: 15px;
  }
}
@media screen and (max-width: 767px) {
  #main .questions .bar_graphs.before_joining .graph_main_text {
    position: absolute;
    top: 100%;
    font-size: 12px;
    white-space: nowrap;
    color: #000;
  }
}
#main .questions .decisive_factor_graph_1 .graph_img img {
  aspect-ratio: 0.8466666667;
  max-width: 59px;
}
#main .questions .decisive_factor_graph_1 .graph_main {
  flex: 0 0 78%;
}
#main .questions .decisive_factor_graph_2 .graph_img img {
  aspect-ratio: 0.6466666667;
  max-width: 45px;
}
#main .questions .decisive_factor_graph_2 .graph_main {
  flex: 0 0 68%;
}
#main .questions .decisive_factor_graph_3 .graph_img img {
  aspect-ratio: 0.7666666667;
  max-width: 53px;
}
#main .questions .decisive_factor_graph_3 .graph_main {
  flex: 0 0 53.3%;
}
#main .questions .decisive_factor_graph_4 .graph_img img {
  aspect-ratio: 0.8466666667;
  max-width: 59px;
}
#main .questions .decisive_factor_graph_4 .graph_main {
  flex: 0 0 49%;
}
#main .questions .decisive_factor_graph_5 .graph_img img {
  aspect-ratio: 0.8466666667;
  max-width: 59px;
}
#main .questions .decisive_factor_graph_5 .graph_main {
  flex: 0 0 49%;
}
#main .questions .decisive_factor_graph_6 .graph_img img {
  aspect-ratio: 0.8;
  max-width: 55px;
}
#main .questions .decisive_factor_graph_6 .graph_main {
  flex: 0 0 34%;
}
#main .questions .decisive_factor_graph_7 .graph_main {
  flex: 0 0 24%;
}
#main .questions .decisive_factor_graph_8 .graph_main {
  flex: 0 0 24%;
}
#main .questions .decisive_factor_graph_9 .graph_main {
  flex: 0 0 19%;
}
#main .questions .decisive_factor_graph_10 .graph_main {
  flex: 0 0 19%;
}
#main .questions .decisive_factor_graph_11 .graph_main {
  flex: 0 0 29%;
}
#main .questions .before_joinin_graph_1 .graph_img img {
  aspect-ratio: 0.7133333333;
  max-width: 50px;
  transform: translateX(5px);
}
#main .questions .before_joinin_graph_1 .graph_main {
  flex: 0 0 77%;
}
#main .questions .before_joinin_graph_2 .graph_img {
  margin-top: 34px;
}
#main .questions .before_joinin_graph_2 .graph_img img {
  aspect-ratio: 1.3636363636;
  max-width: 60px;
}
#main .questions .before_joinin_graph_2 .graph_main {
  flex: 0 0 77%;
}
#main .questions .before_joinin_graph_3 .graph_img img {
  aspect-ratio: 1.0533333333;
  max-width: 60px;
}
#main .questions .before_joinin_graph_3 .graph_main {
  flex: 0 0 51%;
}
#main .questions .before_joinin_graph_4 .graph_img {
  margin-top: 16px;
}
#main .questions .before_joinin_graph_4 .graph_img img {
  aspect-ratio: 0.6;
  max-width: 39px;
}
#main .questions .before_joinin_graph_4 .graph_main {
  flex: 0 0 43%;
}
#main .questions .before_joinin_graph_5 .graph_img {
  margin-top: 20px;
}
#main .questions .before_joinin_graph_5 .graph_img img {
  aspect-ratio: 0.76;
  max-width: 40px;
}
#main .questions .before_joinin_graph_5 .graph_main {
  flex: 0 0 34%;
}
#main .questions .before_joinin_graph_6 .graph_img img {
  aspect-ratio: 1.3066666667;
  max-width: 80px;
}
#main .questions .before_joinin_graph_6 .graph_main {
  flex: 0 0 25.6%;
}
#main .box_content {
  margin: 100px auto 0;
  border-radius: 6px;
  background-color: #fff;
  max-width: 800px;
}
#main .box_content .box_content_title {
  display: table;
  margin: 0 auto;
  padding: 10px 30px;
  border-radius: 6px;
  background-color: var(--color-q-blue);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  transform: translatey(-50%);
}
@media screen and (max-width: 767px) {
  #main .box_content .box_content_title {
    padding: 10px 20px;
    font-size: 15px;
  }
}
#main .box_content .box_content_main {
  padding: 17px 45px 52px;
  font-size: 18px;
  line-height: 2.1;
  letter-spacing: 0.055em;
  border-radius: 6px;
}
@media screen and (max-width: 767px) {
  #main .box_content .box_content_main {
    padding: 0px 20px 22px;
    font-size: 14px;
    line-height: 1.7;
  }
}
#main .box_content .box_content_main p {
  margin: 0;
}
#main .box_content .box_content_main p::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: var(--color-q-blue);
  border-radius: 50%;
  transform: translateY(2px);
}
#main .box_content .box_content_main .inline_list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 10px 3%;
  margin: 0;
  padding: 0;
  list-style: none;
  padding: 0 0 0 80px;
  margin-bottom: -24px;
}
@media screen and (max-width: 1023px) {
  #main .box_content .box_content_main .inline_list {
    padding: 0;
    margin-bottom: 0;
    justify-content: space-between;
    gap: 10px 2%;
  }
}
#main .box_content .box_content_main .inline_list > li {
  flex: 0 0 31%;
}
#main .box_content .box_content_main .inline_list > li::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: var(--color-q-blue);
  border-radius: 50%;
  transform: translateY(2px);
}
@media screen and (max-width: 767px) {
  #main .box_content .box_content_main .inline_list > li {
    flex: 0 0 48%;
  }
}
#main .balloon_list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 15px 0;
  margin: 58px auto 3px;
  padding: 0 44px 0 50px;
  list-style: none;
}
@media screen and (max-width: 1023px) {
  #main .balloon_list {
    padding: 0;
    gap: 0;
  }
}
@media screen and (max-width: 767px) {
  #main .balloon_list {
    display: block;
    margin: 30px auto 3px;
  }
}
#main .balloon_list > li {
  flex: 0 0 45%;
  padding: 11px 10px 32px;
  min-height: 131px;
  background: url(../media/images/recruit/question/balloon_1.svg) no-repeat top center / cover;
  font-weight: 500;
  font-size: 18px;
  line-height: 2.1;
  letter-spacing: 0.055em;
  text-indent: -0.5em;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  #main .balloon_list > li {
    flex: 0 0 48%;
    background-size: 100% 100%;
    font-size: 16px;
    line-height: 1.8;
  }
}
@media screen and (max-width: 767px) {
  #main .balloon_list > li {
    display: grid;
    font-size: 13px;
    min-height: 100px;
  }
  #main .balloon_list > li + li {
    margin-top: 20px;
  }
}
#main .balloon_list > li .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#main .icon_balloon_list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 12px 0;
  margin: 75px auto 3px;
  padding: 0 0px 0 7px;
  list-style: none;
}
@media screen and (max-width: 1023px) {
  #main .icon_balloon_list {
    flex-flow: row wrap;
    justify-content: center;
    padding: 0;
    gap: 20px 0;
  }
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list {
    display: block;
    margin: 50px auto 3px;
  }
}
#main .icon_balloon_list > li {
  flex: 0 0 46%;
  display: flex;
}
@media screen and (max-width: 1023px) {
  #main .icon_balloon_list > li {
    flex: 0 0 80%;
  }
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li {
    max-width: 360px;
    margin: 0 auto;
  }
  #main .icon_balloon_list > li + li {
    margin-top: 20px;
  }
}
#main .icon_balloon_list > li .balloon_content {
  flex: 0 0 376px;
  padding: 13px 11px 15px 30px;
  background: url(../media/images/recruit/question/balloon_2.svg) no-repeat top center / contain;
  font-weight: 500;
  font-size: 18px;
  line-height: 2.1;
  letter-spacing: 0.055em;
  text-indent: -0.5em;
  text-align: center;
  height: 139px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .balloon_content {
    flex: 0 0 265px;
    padding: 2% 1% 7% 5%;
    height: auto;
    min-height: 100px;
    font-size: 12px;
    line-height: 2;
  }
}
#main .icon_balloon_list > li .balloon_content .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#main .icon_balloon_list > li .icon {
  flex: 1 1 auto;
  padding-top: 37px;
  margin-right: 4px;
}
@media screen and (max-width: 1023px) {
  #main .icon_balloon_list > li .icon {
    flex: 0 0 80px;
  }
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon {
    flex: 0 0 74px;
    padding-top: 7px;
  }
}
#main .icon_balloon_list > li .icon.q_3_2 {
  padding-right: 11px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_3_2 {
    padding-right: 8px;
    margin-top: -10px;
  }
}
#main .icon_balloon_list > li .icon.q_3_3 {
  padding-top: 40px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_3_3 {
    padding-top: 20px;
  }
}
#main .icon_balloon_list > li .icon.q_3_3 img {
  transform: scale(1.1);
}
#main .icon_balloon_list > li .icon.q_3_4 {
  padding-right: 4px;
}
#main .icon_balloon_list > li .icon.q_3_5 {
  padding-right: 3px;
}
#main .icon_balloon_list > li .icon.q_3_6 {
  padding-right: 10px;
  transform: translate(4px, -4px);
}
#main .icon_balloon_list > li .icon.q_5_2 {
  padding-right: 8px;
}
#main .icon_balloon_list > li .icon.q_5_4 {
  padding-top: 42px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_5_4 {
    padding-top: 10px;
  }
}
#main .icon_balloon_list > li .icon.q_5_5 {
  padding-right: 12px;
  transform: translateX(5px);
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_5_5 {
    transform: translateX(0);
  }
}
#main .icon_balloon_list > li .icon.q_5_6 {
  padding-right: 10px;
}
#main .icon_balloon_list > li .icon.q_8_1 {
  padding-top: 20px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_8_1 {
    padding-top: 10px;
    transform: translateY(-10px);
  }
}
#main .icon_balloon_list > li .icon.q_8_2 {
  padding-top: 20px;
  padding-right: 10px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_8_2 {
    padding-top: 10px;
    transform: translateY(-10px);
  }
}
#main .icon_balloon_list > li .icon.q_8_3 {
  padding-top: 23px;
  padding-right: 7px;
  padding-left: 5px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_8_3 {
    padding-top: 10px;
    transform: translateY(-10px);
  }
}
#main .icon_balloon_list > li .icon.q_8_4 {
  padding-top: 19px;
  padding-right: 5px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_8_4 {
    padding-top: 10px;
    transform: translateY(-10px);
  }
}
#main .icon_balloon_list > li .icon.q_8_5 {
  padding-top: 17px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_8_5 {
    padding-top: 10px;
    transform: translateY(-10px);
  }
}
#main .icon_balloon_list > li .icon.q_8_6 {
  padding-top: 20px;
  padding-right: 7px;
  padding-left: 5px;
}
@media screen and (max-width: 767px) {
  #main .icon_balloon_list > li .icon.q_8_6 {
    padding-top: 10px;
    transform: translateY(-10px);
  }
}
#main .icon_balloon_list.balloon_list_2 .balloon_content {
  background-image: url(../media/images/recruit/question/balloon_3.svg);
}
#main .ranking {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 63px auto 3px;
  padding: 0;
  list-style: none;
  z-index: 2;
  gap: 29px 23px;
  transform: translatex(-23px);
}
@media screen and (max-width: 767px) {
  #main .ranking {
    display: block;
    margin: 30px auto 5px;
    max-width: 300px;
    transform: none;
  }
}
#main .ranking > li {
  position: relative;
  flex: 0 0 30%;
  max-width: 252px;
  display: grid;
  align-items: center;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #main .ranking > li {
    max-width: 100%;
  }
  #main .ranking > li + li {
    margin-top: 15px;
  }
}
#main .ranking > li .wrap {
  position: relative;
  display: flex;
  padding: 10px 16px;
  align-items: center;
  text-align: center;
  border-radius: 6px;
  background-color: #fff;
  min-height: 62px;
}
@media screen and (max-width: 767px) {
  #main .ranking > li .wrap {
    min-height: 50px;
  }
}
#main .ranking > li .wrap::after {
  content: "";
  position: absolute;
  border-radius: 6px;
  top: 0;
  left: 0;
  transform: translate(2px, 2px);
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #5AB1E6;
}
#main .ranking > li:first-child {
  padding-top: 4px;
  font-size: 30px;
  color: var(--color-red);
}
@media screen and (max-width: 767px) {
  #main .ranking > li:first-child {
    font-size: 24px;
  }
}
#main .ranking > li:first-child .rank {
  font-weight: 700;
  font-size: 20px;
}
#main .ranking > li:first-child .rank::first-letter {
  font-size: 40px;
}
@media screen and (max-width: 767px) {
  #main .ranking > li:first-child .rank::first-letter {
    font-size: 32px;
  }
}
#main .ranking > li:nth-child(n + 4) .rank::first-letter {
  font-size: 20px;
}
#main .ranking > li .rank {
  display: inline-block;
}
#main .ranking > li .rank::first-letter {
  font-size: 30px;
}
#main .ranking > li .ranking_label {
  flex: 1 1 auto;
  text-align: center;
}
#main .pie-chart {
  position: relative;
  margin: 85px auto 0px;
  width: 52%;
  aspect-ratio: 1;
}
@media screen and (max-width: 1023px) {
  #main .pie-chart {
    width: 70%;
  }
}
@media screen and (max-width: 767px) {
  #main .pie-chart {
    width: 67%;
  }
}
#main .pie-chart::after {
  content: "";
  position: absolute;
  width: 31%;
  /* 中央の穴のサイズ */
  aspect-ratio: 1;
  background: var(--color-q-blue-light);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#main .pie-chart .slice {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: 0.5s;
}
#main .pie-chart .slice .label {
  position: absolute;
}
#main .pie-chart .slice .slice_img {
  position: absolute;
}
#main .pie-chart.pie-chart-anim {
  opacity: 0;
  transition: 0.5s;
}
#main .pie-chart.pie-chart-anim .label, #main .pie-chart.pie-chart-anim .slice_img {
  transform: scale(0);
  opacity: 0;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .label, #main .pie-chart.pie-chart-anim.bar_graphs_view .slice_img {
  transform: scale(1);
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-1 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-1 .label {
  transition-delay: 0.3s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-1 .slice_img {
  transition-delay: 0.3s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-2 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-2 .label {
  transition-delay: 0.6s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-2 .slice_img {
  transition-delay: 0.6s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-3 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-3 .label {
  transition-delay: 0.9s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-3 .slice_img {
  transition-delay: 0.9s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-4 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-4 .label {
  transition-delay: 1.2s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-4 .slice_img {
  transition-delay: 1.2s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-5 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-5 .label {
  transition-delay: 1.5s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-5 .slice_img {
  transition-delay: 1.5s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-6 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-6 .label {
  transition-delay: 1.8s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-6 .slice_img {
  transition-delay: 1.8s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-7 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-7 .label {
  transition-delay: 2.1s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-7 .slice_img {
  transition-delay: 2.1s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-8 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-8 .label {
  transition-delay: 2.4s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-8 .slice_img {
  transition-delay: 2.4s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-9 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-9 .label {
  transition-delay: 2.7s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-9 .slice_img {
  transition-delay: 2.7s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-10 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-10 .label {
  transition-delay: 3s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-10 .slice_img {
  transition-delay: 3s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-11 {
  opacity: 1;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-11 .label {
  transition-delay: 3.3s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
#main .pie-chart.pie-chart-anim.bar_graphs_view .slice-11 .slice_img {
  transition-delay: 3.3s;
  transition-timing-function: cubic-bezier(0, 1.24, 0.1, 1.38);
  transition-duration: 0.4s;
}
#main .pie-chart.before_job_1 .slice-1 {
  top: 0;
}
#main .pie-chart.before_job_1 .slice-1 .label {
  width: 18%;
  right: 16%;
  top: 27.5%;
}
#main .pie-chart.before_job_1 .slice-1 .slice_img {
  top: 40.5%;
  width: 23.4%;
  right: -1.5%;
}
#main .pie-chart.before_job_1 .slice-2 .label {
  bottom: 14%;
  width: 10%;
  left: 35.4%;
}
#main .pie-chart.before_job_1 .slice-2 .slice_img {
  bottom: 6%;
  left: 51%;
  width: 30.5%;
}
#main .pie-chart.before_job_1 .slice-3 .label {
  width: 17%;
  left: 10%;
  top: 55%;
}
#main .pie-chart.before_job_1 .slice-3 .slice_img {
  width: 24.2%;
  top: 61.8%;
  left: -0.5%;
}
#main .pie-chart.before_job_1 .slice-4 .label {
  width: 11%;
  top: 38.5%;
  left: 9%;
}
#main .pie-chart.before_job_1 .slice-5 .label {
  width: 10.3%;
  top: 22.8%;
  left: 15.6%;
}
#main .pie-chart.before_job_1 .slice-6 .label {
  width: 49%;
  top: 6%;
  left: -17%;
}
#main .pie-chart.before_job_1 .slice-7 .label {
  width: 41%;
  top: 0.5%;
  left: 4.5%;
}
#main .pie-chart.before_job_2 .slice-1 {
  top: 0;
}
#main .pie-chart.before_job_2 .slice-1 .label {
  width: 29.8%;
  right: 11.7%;
  top: 27.2%;
}
#main .pie-chart.before_job_2 .slice-1 .slice_img {
  top: 35.5%;
  width: 24%;
  right: -4.5%;
}
#main .pie-chart.before_job_2 .slice-2 .label {
  bottom: 17.5%;
  width: 31%;
  right: 18.3%;
}
#main .pie-chart.before_job_2 .slice-2 .slice_img {
  bottom: -0.5%;
  width: 13%;
  right: 39.3%;
}
#main .pie-chart.before_job_2 .slice-3 .label {
  width: 20%;
  left: 21.3%;
  bottom: 20%;
}
#main .pie-chart.before_job_2 .slice-3 .slice_img {
  width: 12.2%;
  bottom: 1.6%;
  left: 19.7%;
}
#main .pie-chart.before_job_2 .slice-4 .label {
  width: 11.9%;
  top: 51.5%;
  left: 14.2%;
}
#main .pie-chart.before_job_2 .slice-4 .slice_img {
  width: 10.5%;
  top: 51.5%;
  left: 1.1%;
}
#main .pie-chart.before_job_2 .slice-5 .label {
  width: 12%;
  top: 35.8%;
  left: 9.2%;
}
#main .pie-chart.before_job_2 .slice-6 .label {
  width: 38.7%;
  top: 19.5%;
  left: -25%;
}
#main .pie-chart.before_job_2 .slice-7 .label {
  width: 46%;
  top: 13.5%;
  left: -26%;
}
#main .pie-chart.before_job_2 .slice-8 .label {
  width: 41%;
  top: 7.5%;
  left: -16%;
}
#main .pie-chart.before_job_2 .slice-9 .label {
  width: 10%;
  top: 10.9%;
  left: 36%;
}
#main .data_list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 75px auto;
  padding: 0;
  list-style: none;
  max-width: 820px;
  padding-right: 20px;
  gap: 40px 0;
}
@media screen and (max-width: 1023px) {
  #main .data_list {
    margin: 50px auto;
    gap: 20px 0;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  #main .data_list {
    display: block;
    margin: 20px auto 0;
  }
}
#main .data_list > li {
  position: relative;
  flex: 0 0 47.6%;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1.0866666667;
  background-color: #fff;
}
@media screen and (max-width: 1023px) {
  #main .data_list > li {
    flex: 0 0 49%;
  }
}
@media screen and (max-width: 767px) {
  #main .data_list > li + li {
    margin-top: 20px;
  }
}
#main .data_list > li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../media/images/recruit/question/data_flame.svg) no-repeat top left / contain;
}
#main .data_list .wrap {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#main .data_list .data_list_title {
  display: grid;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px;
  min-height: 4.5em;
  background-color: var(--color-q-green);
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 1023px) {
  #main .data_list .data_list_title {
    font-size: 18px;
  }
}
#main .data_list .contents {
  position: relative;
  height: 100%;
}
#main .data_list .contents .contents_img {
  position: absolute;
}
#main .data_list .contents .contents_img img {
  max-width: 100%;
}
#main .data_list .contents .contents_val {
  position: absolute;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  #main .data_list .contents .contents_val {
    font-size: 24px;
  }
}
#main .data_list .contents .contents_val_sublabel {
  margin-bottom: 2px;
  font-size: 18px;
}
@media screen and (max-width: 1023px) {
  #main .data_list .contents .contents_val_sublabel {
    font-size: 15px;
  }
}
#main .data_list .label {
  display: table;
  margin: 22px auto 0;
  padding: 8px 21px;
  border-radius: 6px;
  background-color: var(--color-q-green);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #fff;
}
@media screen and (max-width: 1023px) {
  #main .data_list .label {
    font-size: 16px;
  }
}
#main .data_list .year {
  position: absolute;
  bottom: 9px;
  right: 11px;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1;
}
#main .data_list .years .contents_img {
  width: 31.8%;
  top: 16%;
  left: 12%;
}
#main .data_list .years .contents_val {
  position: absolute;
  top: 27%;
  right: 18%;
}
#main .data_list .years .contents_val .countup {
  font-size: 80px;
}
#main .data_list .overtime .contents_img {
  width: 30.2%;
  top: 29.6%;
  left: 10.2%;
}
#main .data_list .overtime .contents_val {
  top: 27%;
  left: 50%;
}
#main .data_list .overtime .contents_val .countup {
  font-size: 80px;
}
#main .data_list .childcare .contents_img, #main .data_list .childcare_nam .contents_img {
  width: 41.5%;
  bottom: 4%;
  left: 0;
  right: 0;
  margin: auto;
}
#main .data_list .childcare .contents_val_left, #main .data_list .childcare_nam .contents_val_left {
  left: 8%;
}
#main .data_list .childcare .contents_val_right, #main .data_list .childcare_nam .contents_val_right {
  right: 10%;
}
#main .data_list .childcare .contents_val, #main .data_list .childcare_nam .contents_val {
  top: 27%;
}
#main .data_list .childcare .contents_val .countup, #main .data_list .childcare_nam .contents_val .countup {
  font-size: 70px;
}
#main .data_list .childcare_nam .contents_img {
  width: 36.2%;
  bottom: 6%;
  left: 0;
  right: 0;
  margin: auto;
}
#main .data_list .women .contents_img {
  width: 83.4%;
  bottom: 19%;
  left: 0;
  right: 0;
  margin: auto;
}
#main .data_list .women .contents_val {
  z-index: 2;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#main .data_list .women .contents_val .contents_val_inner {
  position: relative;
  height: 100%;
}
#main .data_list .women .contents_val .contents_val_inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: url(../media/images/recruit/question/data_5_pie.svg) no-repeat center;
  aspect-ratio: 0.8933333333;
  width: 39%;
  bottom: 9%;
  margin: auto;
  right: 28%;
}
#main .data_list .women .contents_val .contents_val_sub {
  position: absolute;
  top: 21%;
  right: 1.6%;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1023px) {
  #main .data_list .women .contents_val .contents_val_sub {
    top: 19%;
    font-size: 13px;
    line-height: 1.3;
  }
}
#main .data_list .women .contents_val .women_countup {
  position: absolute;
  position: absolute;
  font-size: 16px;
  bottom: 29%;
  text-align: center;
  width: 100%;
}
#main .data_list .women .contents_val .countup {
  font-size: 30px;
}
@media screen and (max-width: 1023px) {
  #main .data_list .women .contents_val .countup {
    font-size: 24px;
  }
}
/*# sourceMappingURL=./recruit_question.css.map */