@charset "utf-8";

/* ↓↓↓ contents ↓↓↓ */
.contents {
  background-color: #191919;
  background-image: url(../img/interview/contents-bg_pc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  padding: min(11.713031vw, 160px) 0 min(4.392387vw, 60px);
}

@media (max-width: 768px) {
  .contents {
    padding: 75px 0 45px;
    background-image: url(../img/interview/contents-bg_sp.jpg);
    background-size: 100% auto;
  }
}

.contents .sec_inner .sec_ttl {
  position: relative;
}

.contents .sec_inner .sec_ttl .title {
  font-family: var(--text-fif);
  font-size: min(3.07467057101vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: #fff;
}

@media (max-width: 768px) {
  .contents .sec_inner .sec_ttl .title {
    font-size: 3.2rem;
  }
}

.contents .sec_inner .sec_ttl .cap {
  font-size: min(1.024890190336vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
}

@media (max-width: 768px) {
  .contents .sec_inner .sec_ttl .cap {
    font-size: 1.5rem;
    margin-top: 13px;
  }
}

/* ↑↑↑ contents ↑↑↑ */

/* ↓↓↓ career-box ↓↓↓ */
.career-box {
  width: 100%;
  margin-top: min(3.660322vw, 50px);
  margin-bottom: min(11.713031vw, 160px);
  display: flex;
  flex-wrap: wrap;
  gap: min(9.150805vw, 125px) min(2.928258vw, 40px);

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 70px;
    margin-top: 40px;
    margin-bottom: 110px;
  }

  .item {
    width: min(38.799414vw, 530px);

    @media (max-width: 768px) {
      width: 100%;
    }

    .thumb {
      width: 100%;
    }

    .text {
      display: block;
      width: 100%;
      margin-top: min(1.464129vw, 20px);
      font-size: min(1.610542vw, 22px);
      font-weight: bold;
      letter-spacing: 0;
      line-height: 1.7;
      text-align: justify;
      word-break: break-all;
      color: #fff;

      @media (max-width: 768px) {
        margin-top: 15px;
        font-size: 16px;
      }
    }

    .btn {
      width: min(11.566618vw, 158px);
      min-width: 110px;
      height: min(2.415813vw, 33px);
      font-size: min(1.02489vw, 14px);
      font-weight: 700;
      letter-spacing: 0.06em;
      border-radius: 40px;
      display: flex;
      align-items: center;
      gap: min(0.292826vw, 4px);
      background-color: #fff;
      transition: opacity ease 0.3s;
      margin-top: min(2.196193vw, 30px);
      padding: 0 min(0.366032vw, 5px) 0 min(1.464129vw, 20px);

      @media (max-width: 768px) {
        width: 152px;
        height: 30px;
        font-size: 12px;
        gap: 4px;
        margin-top: 25px;
        padding: 0 5px 0 20px;
      }

      span {
        width: min(1.7569546120058566vw, 24px);
        display: block;
        line-height: 1;
        translate: 0 max(-0.292826vw, -4px);

        @media (max-width: 768px) {
          width: 24px;
          translate: 0 -3px;
        }
      }
    }
  }
}

/* ↑↑↑ career-box ↑↑↑ */

/* ↓↓↓ business-box ↓↓↓ */
.business-box {
  width: 100%;
  margin-top: min(3.660322vw, 50px);
  margin-bottom: min(6.58858vw, 90px);
  display: flex;
  flex-wrap: wrap;
  gap: min(9.150805vw, 125px) min(2.196193vw, 30px);

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 70px;
    margin-top: 40px;
    margin-bottom: 90px;
  }

  .item {
    width: min(25.329429vw, 346px);

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  .thumb {
    width: 100%;
  }

  .text {
    display: block;
    width: 100%;
    margin-top: min(1.464129vw, 20px);
    font-size: min(1.390922vw, 19px);
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.7;
    text-align: justify;
    word-break: break-all;
    color: #fff;

    @media (max-width: 768px) {
      margin-top: 15px;
      font-size: 16px;
    }
  }

  .btn {
    width: min(11.566618vw, 158px);
    min-width: 110px;
    height: min(2.415813vw, 33px);
    font-size: min(1.02489vw, 14px);
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: min(0.292826vw, 4px);
    background-color: #fff;
    transition: opacity ease 0.3s;
    margin-top: min(2.196193vw, 30px);
    padding: 0 min(0.366032vw, 5px) 0 min(1.464129vw, 20px);

    @media (max-width: 768px) {
      width: 152px;
      height: 30px;
      font-size: 12px;
      gap: 4px;
      margin-top: 25px;
      padding: 0 5px 0 20px;
    }

    span {
      width: min(1.7569546120058566vw, 24px);
      display: block;
      line-height: 1;
      translate: 0 max(-0.292826vw, -4px);

      @media (max-width: 768px) {
        width: 24px;
        translate: 0 -3px;
      }
    }
  }
}

/* ↑↑↑ business-box ↑↑↑ */

/* ↓↓↓ sns_link_group ↓↓↓ */
.sns_link_group {
  width: fit-content;
  display: flex;
  gap: min(1.0248901903367496vw, 14px);
  margin: min(10.980966vw, 150px) auto 0;

  .sns_link {
    display: block;
    width: min(3.6603221083455346vw, 50px);
  }
}

@media (max-width: 768px) {
  .sns_link_group {
    gap: 12px;
    margin: 75px auto 0;

    .sns_link {
      display: block;
      width: 38px;
    }
  }
}

/* ↑↑↑ sns_link_group ↑↑↑ */

/* ↓↓↓ .interview ↓↓↓ */
.interview {
  background-color: #bebebf;
  background-image: url(../img/interview/interview-bg_pc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  padding: min(6.588579795vw, 90px) 0 min(10.980966vw, 150px);
  margin-top: min(6.588579795vw, 90px);
}

@media (max-width: 768px) {
  .interview {
    padding: 60px 0 70px;
    margin-top: 0;
    background-image: url(../img/interview/interview-bg_sp.jpg);
    background-size: 100% auto;
    background-position: 50% 60px;
  }
}

.interview .sec_inner .sec_ttl {
  position: relative;
}

@media (max-width: 768px) {
  .interview .sec_inner .sec_ttl {
    padding-top: 55px;
  }
}

.interview .sec_inner .sec_ttl .title {
  font-family: var(--text-fif);
  font-size: min(3.07467057101vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .interview .sec_inner .sec_ttl .title {
    font-size: 3.2rem;
  }
}

.interview .sec_inner .sec_ttl .cap {
  font-size: min(1.024890190336vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

@media (max-width: 768px) {
  .interview .sec_inner .sec_ttl .cap {
    font-size: 1.5rem;
    margin-top: 13px;
  }
}

.interview .interview_list {
  width: 100%;
  margin-top: min(3.660322vw, 50px);
  display: flex;
  flex-wrap: wrap;
  gap: min(2.928258vw, 40px);

  @media (max-width: 768px) {
    margin-top: 40px;
    flex-direction: column;
    gap: 40px;
  }

  .list_item {
    width: min(38.799414vw, 530px);
    display: flex;
    flex-direction: row-reverse;
    box-sizing: border-box;
    background: url(../img/interview/interview-list-bg_pc.jpg) no-repeat;
    background-position: left top;
    background-size: auto 100%;

    @media (max-width: 768px) {
      width: 100%;
      flex-direction: column;
      background: url(../img/interview/interview-list-bg_sp.jpg) no-repeat;
      background-position: left bottom;
      background-size: 100% auto;
    }
  }

  .item_img {
    width: min(18.08199121522694vw, 247px);
    display: block;
    flex-shrink: 0;
    overflow: hidden;

    @media (max-width: 768px) {
      width: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .txt_group {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: min(1.7569546120058566vw, 24px);

    @media (max-width: 768px) {
      padding: 23px;
    }
  }

  .item_head {
    font-size: min(1.390922vw, 19px);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0;
    color: #fff;

    @media (max-width: 768px) {
      font-size: 1.6rem;
    }
  }

  .item_info {
    flex: 1;
    color: #fff;
    align-content: flex-end;
    margin-top: min(0.732064vw, 10px);

    @media (max-width: 768px) {
      margin-top: 20px;
    }

    .name {
      font-size: min(1.24451vw, 17px);
      font-weight: 700;
      letter-spacing: 0;

      @media (max-width: 768px) {
        font-size: 16px;
      }
    }

    .post {
      margin-top: min(0.366032vw, 5px);
      font-family: var(--text-fif);
      font-size: min(0.951684vw, 13px);
      font-weight: bold;
      letter-spacing: 0;

      @media (max-width: 768px) {
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }

  .link_btn {
    width: min(14.494875549048317vw, 198px);
    min-width: 125px;
    height: min(2.4158125915080526vw, 33px);
    font-size: min(1.0248901903367496vw, 1.4rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: min(0.29282576866764276vw, 4px);
    background-color: #fff;
    transition: opacity ease 0.3s;
    padding: min(0.7320644216691069vw, 10px) 5px min(0.7320644216691069vw, 10px) min(1.4641288433382138vw, 20px);
    margin-top: min(0.8784773060029283vw, 12px);

    @media (max-width: 768px) {
      width: 178px;
      height: 30px;
      font-size: 13px;
      gap: 4px;
      padding: 0 10px 0 15px;
      margin-top: 13px;
    }

    @media (min-width: 769px) {
      &:hover {
        opacity: .7;
      }
    }

    .arrow {
      width: min(1.7569546120058566vw, 24px);
      display: block;
      line-height: 1;
      translate: 0 -4px;

      @media (max-width: 768px) {
        width: 24px;
      }
    }
  }
}

/* ↑↑↑ .interview ↑↑↑ */