@charset "utf-8";

/* -----------------------------------------------------------------
 intro
----------------------------------------------------------------- */
.intro {
  display: flex;
  align-items: center;
  gap:6vw;
}
.intro_body {
  flex-shrink: 0;
  width: min(600px, 48%);
}
.intro_image {
  transform: scale(.8);
}
/*----------js----------*/
.intro_image.js_is_visible{
  transform: scale(1);
}
@media screen and (max-width: 767px) {
  .intro {
    display: flex;
    flex-direction: column;
  }
}
/* -----------------------------------------------------------------
 job
----------------------------------------------------------------- */
.job_btn {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .job .c_table01 th {
    width: max(5rem,20vw);
  }
}

/* -----------------------------------------------------------------
 l_data_row
----------------------------------------------------------------- */
.l_data_row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
}
@media screen and (max-width: 767px) {
  .l_data_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
  }
}
/* -----------------------------------------------------------------
 l_data_column
----------------------------------------------------------------- */
.l_data_column {
  display: flex;
  flex-direction: column;
  gap: 3vw;
  margin-top: 3vw;
}

/* -----------------------------------------------------------------
 data_item
----------------------------------------------------------------- */
.data_title {
  text-align: center;
}
.data_item {
  padding: 1.2vw 2vw 1.8vw;
  background: var(--color_bg_lightgray);
}
.data_item .memo {
  text-align: right;
  font-size: .75em;
  opacity: .6;
}
.data_item .title {
  margin-top: .8em;
  font-size:min(1.3rem,2vw);
}
.data_item .title .small {
  font-size: 65%;
}
.data_item .num {
  display:table;
  margin:auto;
  min-height:  min(2.4rem, 3vw);
  padding: 1.3rem 0;
  text-align: center;
  font-weight: 700;
  font-size: min(2.4rem, 3vw);
  color: var(--color_navy);
}
.data_item .number {
  font-size: min(240%,10vw);
}
.data_item .number.font_small {
  left: 0;
  font-size: min(200%,7vw);
}
.data_item .text {
  margin-top: .8em;
  text-align: center;
  font-size:  min(.9rem,1.6vw);
}
@media screen and (max-width: 767px) {
  .data_item .title {
    font-size: 1.2em;
  }
  .data_item .num {
    font-size: 1.5em;
  }
  .data_item .number {
    font-size: 300%;
  }
  .data_item .number.font_small {
    font-size: 240%;
  }

}

/* -----------------------------------------------------------------
 data_age
----------------------------------------------------------------- */
.data_age {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.data_age_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom:2rem;
  align-items: center;
}
.data_age_item .num {
  padding: .5rem 0;
}
.data_age_item .age_bar {
  width: 50%;
  height: 1px;
  background: var(--color_kamikoubou);
}
.age_caption {
  width: 100%;
  padding-top: .8rem;
  border-top: var(--color_gray_pale) 1px solid;
  text-align: center;
}
.data_age_item .number {
  font-size: min(130%,7vw);
}
@media screen and (max-width: 767px) {
  .data_age_item .number {
    font-size: 130%;
  }
}
/* -----------------------------------------------------------------
 data_role
----------------------------------------------------------------- */
.data_role {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.data_role_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom:2rem;
  align-items: center;
}
.role_caption {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  text-align: center;
}
.data_role_item .num {
  padding:0;
}
.data_role_item .number {
  font-size: min(130%,7vw);
}
@media screen and (max-width: 767px) {
  .data_role {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 2em;
  }
  .data_role_item {
    margin-bottom: 0;
  }
  .data_role_item img {
    width: 50%;
  }
  .data_role_item .num {
    margin-top: .5em;
  }

  .data_role_item .number {
    font-size: 130%;
  }
}