/* ----------- */
/* DATA */
/* ----------- */
.data_list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 16px;
}

.data_list_item_col_2 {
  width: calc(50% - 8px);
  position: relative;
  opacity: 0;
}
.data_list_item_col_2.is-show {
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

.data_list_item_title {
  position: absolute;
  top: 5%;
  width: 100%;
  text-align: center;
  font-size:min(3vw,32px);
  font-weight: bold;
  color: #1F85FD;
}

.data_list_item_img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  /* 768px以下に適用されるCSS（スマホ用） */
  .data_list_item_title {
    font-size:min(6vw,60px);
  }
  .data_list_item_col_2 {
    width: 100%;
  }
}

/* 年齢層 */
/* ーーーーーーーーーーーーーーー */
.age_cell_20 {
  position: absolute;
  top: 10%;
  right: 5%;
  color: #1F85FD;
}
.age_cell_30 {
  position: absolute;
  bottom: 23%;
  right: 5%;
  color: #1F85FD;
}
.age_cell_40 {
  position: absolute;
  bottom: 4%;
  left: 7%;
  color: #1F85FD;
}
.age_cell_50 {
  position: absolute;
  top: 37%;
  left: 7%;
  color: #1F85FD;
}
.age_cell_60 {
  position: absolute;
  top: 4%;
  left: 7%;
  color: #1F85FD;
}
.age_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.age_text_val {
  font-size:min(4vw,50px);
  font-weight: bold;
  line-height: 1;
}
.age_text_unit {
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  .age_text_val {
    font-size:min(10vw,80px);
    font-weight: bold;
  }
}

/* パパ・ママ社員 */
/* ーーーーーーーーーーーーーーー */

.parent_text {
  position: absolute;
  top: 28%;
  left: 10%;
  color: #1F85FD;
  font-weight: bold;
}

.parent_text_about {
  font-size:min(4vw,50px);
}

.parent_text_val {
  font-size:min(8vw,100px);
  width: 120px;
  height: 60px;
}

.parent_text_unit {
  font-size:min(4vw,50px);
}

.parent_text_predicate {
  margin-top: 10%;
  font-size:min(2vw,25px);
  text-align: right;
  display: block;
}

@media screen and (max-width: 768px) {
  .parent_text_about {
    font-size:min(10vw,60px);
  }
  .parent_text_val {
    font-size:min(16vw,200px);
  }
  .parent_text_unit {
    font-size:min(10vw,60px);
  }
  .parent_text_predicate {
    font-size:min(4vw,50px);
  }
}

/* 年間休日日数 */
/* ーーーーーーーーーーーーーーー */
.holiday_cell {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 40%;
  color: #1F85FD;
  font-weight: bold;
}
.holiday_val {
  font-size:min(10vw,120px);
}
.holiday_unit {
  font-size:min(4vw,50px);
}
.holiday_text {
  display: block;
  font-size:min(2vw,25px);
}

@media screen and (max-width: 768px) {
  .holiday_val {
    font-size:min(20vw,240px);
  }
  .holiday_unit {
    font-size:min(10vw,60px);
  }
  .holiday_text {
    font-size:min(5vw,50px);
  }
}

/* 平均残業時間 */
/* ーーーーーーーーーーーーーーー */
.overtime_cell_left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  text-align: center;
}

.overtime_cell_right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  color: #1F85FD;
  font-weight: bold;
}

.overtime_val {
  font-size:min(6vw,60px);
}

.overtime_val_decimal {
  font-size:min(5vw,50px);
}

.overtime_unit {
  display: block;
  font-size:min(4vw,24px);
}

.overtime_text_top {
  display: block;
  font-size:min(2vw,25px);
  padding-bottom: 5%;
  border-bottom: 4px solid #1F85FD;
}

.overtime_text_bottom {
  display: block;
  font-size:min(2vw,25px);
  padding-top: 5%;
}

@media screen and (max-width: 768px) {
  .overtime_val {
    font-size:min(12vw,160px);
  }
  .overtime_val_decimal {
    font-size:min(8vw,160px);
  }
  .overtime_unit {
    font-size:min(5vw,60px);
  }
  .overtime_text_top {
    font-size:min(5vw,60px);
  }
  .overtime_text_bottom {
    font-size:min(5vw,60px);
  }
}

/* 居住地 */
/* ーーーーーーーーーーーーーーー */
.data_list_item_col_1_residence {
  width: 100%;
  opacity: 0;
}

.data_list_item_col_1_residence.is-show {
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}
.data_list_item_title_residence {
  position: absolute;
  top: 5%;
  width: 100%;
  text-align: center;
  font-size:min(3vw,32px);
  font-weight: bold;
  color: #1F85FD;
}
@media screen and (max-width: 768px) {
  .data_list_item_title_residence {
    font-size:min(6vw,60px);
  }
}

.residence_cell {
  position: absolute;
  color: #1F85FD;
  font-weight: bold;
  padding: 0 1% 1% 1%;
}

.residence_cell.pos-kinki {
  width: 25%;
  top: 8%;
  left: 2%;
}

.residence_cell.pos-chugoku {
  width: 25%;
  top: 40%;
  left: 2%;
}

.residence_cell.pos-okinawa {
  width: 25%;
  bottom: 4%;
  left: 2%;
}

.residence_cell.pos-hokkaido {
  width: 31%;
  top: 6%;
  right: 2%;
}

.residence_cell.pos-kanto {
  width: 31%;
  top: 38%;
  right: 2%;
}

.residence_cell.pos-chubu {
  width: 31%;
  bottom: 4%;
  right: 2%;
}

@media screen and (max-width: 768px) {
  .residence_cell.pos-kanto {
    top: 37%;
  }
}

.residence_cell_title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 0.5vh solid #1F85FD;
}
@media screen and (max-width: 768px) {
  .residence_cell_title {
    border-bottom: 0.3vh solid #1F85FD;
  }
}

.residence_cell_title_region {
  font-size: min(5vw,50px);
  margin-top: auto;
}

.residence_cell_title_val {
  margin-top: auto;
  margin-bottom: auto;
}

.residence_cell_title_val_number {
  font-size: min(8vw,72px);
}

.residence_cell_title_val_unit {
  font-size: min(4vw,44px);
}

.residence_cell_job {
  font-size: min(2vw,14px);
  margin-top: 2%;
}

/*  職種比率 */
/* 前職の出身業界 */
/* ーーーーーーーーーーーーーーー */
.data_list_item_col_1_job {
  background-color: #e7f3ff;
  position: relative;
  padding: 2% 5% 3%;
  width: 100%;
  opacity: 0;
}

.data_list_item_col_1_job.is-show {
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}
.data_list_item_title_job {
  width: 100%;
  text-align: center;
  font-size:min(3vw,32px);
  font-weight: bold;
  color: #1F85FD;
}
@media screen and (max-width: 768px) {
  .data_list_item_col_1_job {
    padding: 3% 5% 4%;
  }
  .data_list_item_title_job {
    font-size:min(6vw,60px);
  }
}

.job_row_top {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 3%;
  margin-bottom: 8px;
}

.job_row_bottom {
  display: flex;
  gap: 8px;
  margin-bottom: 3%;
}

.job_cell {
  width: 100%;
  background-color: #1F85FD;
  color: #fff;
  font-weight: bold;
  padding: 3% 0;
  display: flex;
  flex-direction: column;
}

.job_title {
  text-align: center;
  font-size:min(2.5vw,24px);
  margin-top: auto;
  margin-bottom: auto;
}

.job_text {
  text-align: center;
  margin-top: auto;
  margin-bottom: 0;
}

.job_text_val {
  font-size:min(8vw,80px); 
}

.job_text_unit {
  font-size:min(5vw,60px);
}

/*  産休・育休比率 */
/* ーーーーーーーーーーーーーーー */
.leave_cell {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 40%;
  color: #1F85FD;
  font-weight: bold;
}
.leave_val {
  font-size:min(10vw,120px);
}
.leave_unit {
  font-size:min(4vw,50px);
}
.leave_text {
  display: block;
  font-size:min(2vw,25px);
}

@media screen and (max-width: 768px) {
  .leave_val {
    font-size:min(20vw,240px);
  }
  .leave_unit {
    font-size:min(10vw,60px);
  }
  .leave_text {
    font-size:min(5vw,50px);
  }
}


/*  有給取得率 */
/* ーーーーーーーーーーーーーーー */

.vacation_cell {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 40%;
  color: #1F85FD;
  font-weight: bold;
}

.vacation_val {
  font-size:min(10vw,120px);
}
.vacation_unit {
  font-size:min(4vw,50px);
}
.vacation_text {
  display: block;
  font-size:min(2vw,20px);
}

@media screen and (max-width: 768px) {
  .vacation_val {
    font-size:min(20vw,240px);
  }
  .vacation_unit {
    font-size:min(10vw,60px);
  }
  .vacation_text {
    font-size:min(4vw,50px);
  }
}

/*  魅力 */
/* ーーーーーーーーーーーーーーー */
.charm_cell_1 {
  position: absolute;
  top: 25%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.charm_cell_2 {
  position: absolute;
  top: 40%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.charm_cell_3 {
  position: absolute;
  top: 55%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.charm_cell_other {
  position: absolute;
  top: 70%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(3vw,16px);
  width: 63%;
}

.charm_rank_suffix {
  font-size:min(2vw,20px);
  margin-right: 5%;
}

.charm_other_title {
  display: block;
}

.charm_other_val {
  display: inline-block;
  margin-top: 2%;
}

@media screen and (max-width: 768px) {
  .charm_rank,
  .charm_val {
    font-size:min(5vw,50px);
  }
  .charm_rank_suffix {
    font-size:min(4vw,50px);
  }
}

/*  雰囲気 */
/* ーーーーーーーーーーーーーーー */
.atmosphere_cell_1 {
  position: absolute;
  top: 25%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.atmosphere_cell_2 {
  position: absolute;
  top: 40%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.atmosphere_cell_3 {
  position: absolute;
  top: 55%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.atmosphere_cell_4 {
  position: absolute;
  top: 70%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.atmosphere_cell_5 {
  position: absolute;
  top: 85%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.atmosphere_rank_suffix {
  font-size:min(2vw,20px);
  margin-right: 5%;
}

@media screen and (max-width: 768px) {
  .atmosphere_rank,
  .atmosphere_val {
    font-size:min(5vw,50px);
  }
  .atmosphere_rank_suffix {
    font-size:min(4vw,50px);
  }
}

/* マネージャーになった時の年齢 */
/* ーーーーーーーーーーーーーーー */
.manager_cell_20 {
  position: absolute;
  top: 35%;
  right: 5%;
  color: #1F85FD;
}
.manager_cell_30 {
  position: absolute;
  bottom: 10%;
  left: 7%;
  color: #1F85FD;
}
.manager_cell_40 {
  position: absolute;
  top: 25%;
  left: 7%;
  color: #1F85FD;
}
.manager_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.manager_text_val {
  font-size:min(4vw,50px);
  font-weight: bold;
  line-height: 1;
}
.manager_text_unit {
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  .manager_text_val {
    font-size:min(10vw,80px);
    font-weight: bold;
  }
}

/* キャリアパス */
/* ーーーーーーーーーーーーーーー */
.career_cell_generalist {
  width: 70%;
  position: absolute;
  top: 35%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
}

.career_cell_specialist {
  width: 70%;
  position: absolute;
  top: 60%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
}

.career_cell_other {
  width: 70%;
  position: absolute;
  top: 85%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,20px);
}

.career_title {
  font-size:min(2.5vw,28px);
}

.career_val {
  font-size:min(5vw,50px);
  position: absolute;
  bottom: 0;
  right: 15%;
}

.career_unit {
  font-size:min(3vw,28px);
  position: absolute;
  bottom: 0;
  right: 5%;
}
@media screen and (max-width: 768px) {
  .career_title {
    font-size:min(6vw,60px);
  }
  .career_val {
    font-size:min(10vw,80px);
  }
  .career_unit {
    font-size:min(6vw,60px);
  }
  .career_cell_other {
    font-size:min(4vw,28px);
  }
}

/* 職場での服装 */
/* ーーーーーーーーーーーーーーー */

.clothing_cell_casual {
  width: 82%;
  position: absolute;
  top: 34%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
}

.clothing_cell_suit {
  width: 82%;
  position: absolute;
  top: 69%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
}

.clothing_title {
  font-size:min(2.5vw,28px);
  display: inline-block;
  padding-bottom: 5%;
}

.clothing_val {
  font-size:min(8vw,84px);
  position: absolute;
  bottom: 0;
  right: 15%;
}

.clothing_unit {
  font-size:min(3vw,28px);
  position: absolute;
  bottom: 0;
  right: 5%;
}

@media screen and (max-width: 768px) {
  .clothing_title {
    font-size:min(6vw,60px);
    padding-bottom: 2%;
  }
  .clothing_val {
    font-size:min(16vw,80px);
  }
  .clothing_unit {
    font-size:min(6vw,60px);
  }
}

/* 血液型 */
/* ーーーーーーーーーーーーーーー */
.blood_cell_a {
  position: absolute;
  top: 20%;
  right: 5%;
  color: #1F85FD;
}
.blood_cell_b {
  position: absolute;
  bottom: 10%;
  right: 5%;
  color: #1F85FD;
}
.blood_cell_o {
  position: absolute;
  bottom: 10%;
  left: 7%;
  color: #1F85FD;
}
.blood_cell_ab {
  position: absolute;
  top: 20%;
  left: 7%;
  color: #1F85FD;
}
.blood_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.blood_text_val {
  font-size:min(4vw,50px);
  font-weight: bold;
  line-height: 1;
}
.blood_text_unit {
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  .blood_text_val {
    font-size:min(10vw,80px);
    font-weight: bold;
  }
}

/* 好きなお酒 */
/* ーーーーーーーーーーーーーーー */
.liquor_cell_1 {
  position: absolute;
  top: 25%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  width: 40%;
}

.liquor_cell_2 {
  position: absolute;
  top: 40%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  width: 40%;
}

.liquor_cell_3 {
  position: absolute;
  top: 55%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  width: 40%;
}

.liquor_cell_4 {
  position: absolute;
  top: 70%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  width: 40%;
}

.liquor_cell_5 {
  position: absolute;
  top: 85%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  width: 40%;
}

.liquor_cell_6 {
  position: absolute;
  top: 25%;
  right: 5%;
  color: #1F85FD;
  font-weight: bold;
  width: 40%;
}

.liquor_cell_7 {
  position: absolute;
  top: 40%;
  right: 5%;
  color: #1F85FD;
  font-weight: bold;
  width: 40%;
}

.liquor_cell_8 {
  position: absolute;
  top: 55%;
  right: 5%;
  color: #1F85FD;
  font-weight: bold;
  width: 40%;
}

.liquor_title {
  font-size:min(2vw,20px);
}
.liquor_val {
  font-size:min(2vw,25px);
  position: absolute;
  right: 12%;
  bottom: 0;
}
.liquor_unit {
  font-size:min(2vw,20px);
  position: absolute;
  right: 0;
  bottom: 0;
}

@media screen and (max-width: 768px) {
  .liquor_val {
    font-size:min(5vw,50px);
  }
  .liquor_title,
  .liquor_unit {
    font-size:min(4vw,50px);
  }
}

/* 好きなラーメン */
/* ーーーーーーーーーーーーーーー */
.ramen_cell_1 {
  position: absolute;
  top: 25%;
  left: 15%;
  color: #1F85FD;
  font-weight: bold;
  width: 25%;
}

.ramen_cell_2 {
  position: absolute;
  top: 40%;
  left: 15%;
  color: #1F85FD;
  font-weight: bold;
  width: 25%;
}

.ramen_cell_3 {
  position: absolute;
  top: 55%;
  left: 15%;
  color: #1F85FD;
  font-weight: bold;
  width: 25%;
}

.ramen_cell_4 {
  position: absolute;
  top: 70%;
  left: 15%;
  color: #1F85FD;
  font-weight: bold;
  width: 25%;
}

.ramen_cell_5 {
  position: absolute;
  top: 85%;
  left: 15%;
  color: #1F85FD;
  font-weight: bold;
  width: 25%;
}

.ramen_cell_6 {
  position: absolute;
  top: 25%;
  right: 15%;
  color: #1F85FD;
  font-weight: bold;
  width: 25%;
}

.ramen_cell_7 {
  position: absolute;
  top: 40%;
  right: 15%;
  color: #1F85FD;
  font-weight: bold;
  width: 25%;
}

.ramen_cell_8 {
  position: absolute;
  top: 55%;
  right: 15%;
  color: #1F85FD;
  font-weight: bold;
  width: 25%;
}

.ramen_title {
  font-size:min(2vw,20px);
}
.ramen_val {
  font-size:min(2vw,25px);
  position: absolute;
  right: 20%;
  bottom: 0;
}
.ramen_unit {
  font-size:min(2vw,20px);
  position: absolute;
  right: 0;
  bottom: 0;
}

@media screen and (max-width: 768px) {
  .ramen_val {
    font-size:min(5vw,50px);
  }
  .ramen_title,
  .ramen_unit {
    font-size:min(4vw,50px);
  }
}

/* 好きな季節 */
/* ーーーーーーーーーーーーーーー */
.season_cell_spring {
  position: absolute;
  top: 20%;
  right: 5%;
  color: #1F85FD;
}
.season_cell_summer {
  position: absolute;
  bottom: 10%;
  right: 5%;
  color: #1F85FD;
}
.season_cell_autumn {
  position: absolute;
  bottom: 10%;
  left: 7%;
  color: #1F85FD;
}
.season_cell_winter {
  position: absolute;
  top: 20%;
  left: 7%;
  color: #1F85FD;
}
.season_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.season_text_val {
  font-size:min(4vw,50px);
  font-weight: bold;
  line-height: 1;
}
.season_text_unit {
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  .season_text_val {
    font-size:min(10vw,80px);
    font-weight: bold;
  }
}

/* 二者択一系 共通 */
/* ーーーーーーーーーーーーーーー */
.choice_title {
  display: block;
  text-align: center;
  font-size: 24px;
  color: #1F85FD;
  font-weight: bold;
}
.choice_val {
  font-size:min(4vw,50px);
  font-weight: bold;
  line-height: 1;
  color: #1F85FD;
  font-weight: bold;
}
.choice_unit {
  font-size: 24px;
  color: #1F85FD;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .choice_val {
    font-size:min(10vw,80px);
    font-weight: bold;
  }
}

/* インドア、アウトドア */
.choice_cell_indoor {
  position: absolute;
  bottom: 16%;
  left: 22%;
}
.choice_cell_outdoor {
  position: absolute;
  bottom: 16%;
  right: 22%;
}

/* iPhone？ Android？ */
.choice_cell_iphone {
  position: absolute;
  bottom: 13%;
  left: 20%;
}

.choice_cell_android {
  position: absolute;
  bottom: 13%;
  right: 20%;
}

/* 犬派？猫派？ */
.choice_cell_dog {
  position: absolute;
  bottom: 15%;
  left: 20%;
}

.choice_cell_cat {
  position: absolute;
  bottom: 15%;
  right: 20%;
}

/* タイムスリップするなら */
.choice_cell_past {
  position: absolute;
  bottom: 30%;
  left: 10%;
}

.choice_cell_feature {
  position: absolute;
  bottom: 30%;
  right: 10%;
}

/*  プライベートの過ごし方は？ */
/* ーーーーーーーーーーーーーーー */
.private_cell_1 {
  position: absolute;
  top: 25%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.private_cell_2 {
  position: absolute;
  top: 40%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.private_cell_3 {
  position: absolute;
  top: 55%;
  left: 5%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(2vw,25px);
  width: 90%;
}

.private_cell_other {
  position: absolute;
  top: 69%;
  left: 3%;
  color: #1F85FD;
  font-weight: bold;
  font-size:min(1.5vw,16px);
  width: 95%;
}

.private_rank_suffix {
  font-size:min(2vw,20px);
  margin-right: 5%;
}

.private_other_title {
  display: inline-block;
}

.private_other_val {
  display: inline-block;
  margin-top: 1%;
}

@media screen and (max-width: 768px) {
  .private_rank,
  .private_val {
    font-size:min(5vw,50px);
  }
  .private_cell_other {
    font-size:min(3vw,20px);
  }
  .private_rank_suffix {
    font-size:min(4vw,50px);
  }
}

/* アニメーション */
/* ーーーーーーーーーーーーーーー */
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	  transform: translateY(100px);
  }

  to {
    opacity: 1;
	  transform: translateY(0);
  }
}