.page_mv .page_mv_wrapper {
  background-image: url(../../img/environment/page_mv_img.jpg);
}

.after {
  position: relative;
  height: 560px;
  width: 100%;
  margin: 5% auto 17%;
}

.after .after_txt {
  display: inline-block;
  position: absolute;
  right: 58%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 32%;
}

.after .after_txt h3 {
  height: 120px;
}

.after .after_txt h3 img {
  width: auto;
  height: 100%;
}

.after .img_01 {
  width: 470px;
  position: absolute;
  top: 0;
  right: 10%;
  z-index: 4;
}

.after .img_02 {
  width: 300px;
  position: absolute;
  bottom: 0;
  right: 30%;
  z-index: 5;
}

.after .bk_gray {
  width: 50%;
  height: 370px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f9f9f9;
  z-index: 3;
}

.img_01 img,
.img_02 img {
  border-radius: 10px;
}

.company_data {
  width: 100%;
  margin: 0 auto;
  background-color: #f9f9f9;
  text-align: center;
  padding-bottom: 15%;
  margin-top: 5%;
  margin: 5% 0 -5%;
}

.company_data h3 {
  height: 120px;
}

.company_data h3 img {
  height: 100%;
  width: auto;
  margin-top: -40px;
}

.company_data .txt {
  margin: 0 auto 7em;
}

.company_data .txt p {
  text-align: center;
}

.company_data .company_data_wrapper {
  width: 80%;
  margin: 0 auto;
}

.date_inner {
  width: 100%;
  margin: 2% auto 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

.date_box {
  width: 31%;
  background-color: #fff;
  filter: drop-shadow(5px 5px 2px rgba(24, 24, 24, 0.2));
  border-radius: 10px;
  padding: 2% 0;
  margin-bottom: 3%;
}

.date_box .ttl {
  font-size: 1.8em;
  border-radius: 50px;
  border: 3px solid var(--main-color);
  padding: 0.2em 0;
  width: 12em;
  margin: 0 auto 1em;
  font-weight: bold;
}

.date_box .numbers {
  font-size: 4em;
  font-weight: bold;
  line-height: 1em;
}

.date_box .small {
  font-size: 2em;
  font-weight: bold;
}

.employees img {
  width: 50%;
  margin: 6% auto 0;
}

.employment .employment_txt {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.employment .employment_txt div {
  width: 40%;
}

.employment .employment_txt .middle {
  font-size: 2em;
  display: block;
}

.employment .employment_txt > span {
  font-size: 3em;
  margin: 1em 0;
  width: 10%;
}

.employment .employment_txt div img {
  width: 50%;
  display: block;
  margin: 7% auto 0;
}

.gender .gender_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gender .gender_box div {
  width: 30%;
}

.gender .gender_box div .middle {
  display: block;
  font-size: 2em;
  font-weight: bold;
}

.gender .gender_box div img {
  width: 70%;
  display: block;
  margin: 6% auto 0;
}

.graph-wrap {
  width: 30%;
}

.circle circle {
  fill: none;
  stroke-width: 14px;
  stroke-dasharray: 0, 100; /* 初期は見えない */
  stroke-dashoffset: 0;
  transition: stroke-dasharray 1.5s ease;
}

.circle {
  transform: rotate(-90deg /* 初期は見えない */);
}

.circle.active circle:nth-child(1) {
  stroke: #3da3ed;
  animation: anime01 0.8s forwards ease-in-out;
}
.circle.active circle:nth-child(2) {
  stroke: #2fc5d5;
  stroke-dashoffset: 60;
  animation: anime02 1s 1s forwards ease-in-out;
}

@keyframes anime01 {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 40, 100;
  }
}
@keyframes anime02 {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 60, 40;
  }
}

.age img {
  width: 40%;
  margin: 6% auto 0;
}

/* ここまで */

.welfare_benefits {
  width: 100%;
  margin: 0 auto;
  background-color: #ecf1f6;
  text-align: center;
  padding-bottom: 11%;
  margin-top: 5%;
}

.welfare_benefits h3 {
  height: 120px;
}

.welfare_benefits h3 img {
  height: 100%;
  width: auto;
  margin-top: -40px;
}

.welfare_benefits .welfare_benefits_wrapper {
  width: 80%;
  margin: 0 auto;
}

.welfare_benefits h4 {
  height: 100%;
  width: auto;
  text-align: left;
  border-bottom: 2px solid var(--main-color);
  font-size: var(--font-size-large);
  margin: 0 0 0.6em;
  padding: 0 0 0.5em 0.1em;
  font-weight: 600;
}

.welfare_benefits section {
  width: 100%;
  margin: 0 auto 8%;
}

.welfare_benefits .welfare_benefits_wrapper section:last-of-type {
  margin-bottom: 0;
}

.welfare_benefits section ul {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.welfare_benefits section ul li {
  width: 32.5%;
  margin: 0 1.25% 1.25% 0;
  background-color: #fff;
  padding: 1em;
  height: 5em;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: var(--font-size-p);
  font-weight: 600;
  border-radius: 5px;
  flex-direction: column;
}

.welfare_benefits section ul li:nth-child(3n) {
  margin-right: 0;
}

.welfare_benefits section .width_full {
  width: 100%;
  margin: 0 0 1.25%;
  background-color: #fff;
  padding: 2em;
  display: inline-block;
  text-align: left;
  font-size: var(--font-size-p);
  font-weight: 600;
  border-radius: 5px;
}

.welfare_benefits section .font-weight {
  font-weight: 500;
  display: inline;
  font-size: var(--font-size-p);
}

@media (max-width: 1680px) {
  .after {
    height: 490px;
  }

  .after .img_02 {
    width: 270px;
  }

  .after .bk_gray {
    width: 55%;
  }
}

@media (max-width: 1385px) {
  .after {
    height: 450px;
  }

  .after .after_txt {
    left: 10%;
    right: auto;
  }

  .after .img_01 {
    width: 430px;
  }

  .after .img_02 {
    width: 230px;
  }

  .after .bk_gray {
    width: 50%;
  }
}

@media (max-width: 1280px) {
  .after {
    height: 440px;
  }

  .after .img_01 {
    width: 400px;
  }

  .after .img_02 {
    right: 28%;
    width: 240px;
  }

  .welfare_benefits .welfare_benefits_wrapper,
  .company_data .company_data_wrapper {
    width: 87%;
  }

  .welfare_benefits section {
    margin: 0 auto 4%;
  }
}

@media (max-width: 980px) {
  .img_01 img,
  .img_02 img {
    border-radius: 6px;
  }

  .after .img_01 {
    width: 300px;
  }

  .after .img_02 {
    width: 190px;
    right: 23%;
  }

  .after .bk_gray {
    width: 55%;
    height: 310px;
  }

  .after .after_txt {
    left: 5%;
  }

  .after {
    height: 360px;
  }

  .company_data .company_data_wrapper {
    width: 100%;
  }

  .company_data {
    padding: 0 5% 15%;
  }
}

@media (max-width: 834px) {
  .after {
    height: 730px;
    margin: 5% auto 25%;
  }

  .after .after_txt {
    left: 10%;
    right: auto;
    top: 490px;
    transform: none;
  }

  .after .bk_gray {
    width: 100%;
    height: 470px;
    top: 6%;
    transform: none;
  }

  .after .img_01 {
    width: 450px;
  }

  .after .img_02 {
    width: 250px;
    top: 210px;
    bottom: auto;
    right: auto;
    left: 10%;
  }

  .company_data .company_data_wrapper {
    display: block;
  }

  .date_box .ttl {
    font-size: 1.6em;
  }

  .welfare_benefits section ul li {
    width: 49%;
    margin: 0 2% 2% 0;
  }

  .welfare_benefits section ul li:nth-child(3n) {
    margin-right: auto;
  }

  .welfare_benefits section ul li:nth-child(2n) {
    margin-right: 0;
  }
}

@media (max-width: 744px) {
}

@media (max-width: 601px) {
  .page_mv .page_mv_wrapper {
    background-image: url(../../img/environment/page_mv_img_sp.jpg);
  }
}

@media (max-width: 440px) {
  .company_data .txt p {
    text-align: left;
  }

  .after {
    height: 540px;
  }

  .after .after_txt {
    left: 8%;
    top: 320px;
    width: 66%;
  }

  .after .img_01 {
    right: 5%;
    width: 290px;
  }

  .after .img_02 {
    left: 5%;
    width: 160px;
    top: 140px;
  }

  .after .bk_gray {
    height: 310px;
  }

  .after .after_txt h3 {
    height: 100px;
  }

  .date_box {
    width: 100%;
    padding: 5% 0;
  }

  .date_box .ttl {
    font-size: 1.5em;
    border: 2px solid var(--main-color);
    margin: 0 auto 0.9em;
  }

  .employees img {
    width: 40%;
    margin: 4% auto 0;
  }

  .date_box .numbers {
    font-size: 3.5em;
  }

  .date_box .small {
    font-size: 1.7em;
  }

  .welfare_benefits {
    margin-top: 10%;
  }

  .welfare_benefits section {
    margin: 0 auto 10%;
  }

  .company_data {
    padding-bottom: 20%;
    margin: 5% 0 -10%;
  }

  .company_data h3 {
    height: 110px;
  }

  .company_data h3 img {
    margin-top: -7%;
  }

  .company_data .txt {
    margin: 0em 0 3em;
  }

  .welfare_benefits h3 {
    height: 90px;
  }

  .welfare_benefits h3 img {
    margin-top: -6%;
  }

  .welfare_benefits h4 {
    border-bottom: 2px solid var(--main-color);
    margin: 0 0 0.5em;
  }

  .welfare_benefits section .width_full {
    margin: 0 0 3%;
  }

  .welfare_benefits section ul li {
    width: 100%;
    margin: 0 0 3% 0;
  }

  .welfare_benefits_wrapper {
    margin-top: -2%;
  }
}

@media (max-width: 375px) {
  .after .img_01 {
    width: 250px;
  }

  .after .img_02 {
    width: 130px;
    top: 120px;
  }

  .after .bk_gray {
    height: 250px;
    top: 5%;
  }

  .after .after_txt {
    top: 260px;
  }
}

@media (max-width: 320px) {
  .employment .employment_txt .middle {
    font-size: 1.1em;
  }
}