/* components */
.titleDecoration {
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr;
}

.titleDecoration::before {
  content: url(../../images/lp/icon_title_decoration.svg);
  display: inline-block;
  margin-right: -48px;
}

@media screen and (max-width: 767px) {
  .titleDecoration::before {
    transform: scale(0.8);
  }
}

@media screen and (max-width: 767px) {
  .headingPage__illust {
    bottom: -10%;
    right: 4vw;
    top: auto;
    width: 38vw;
  }
}

.sectionTitle {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

@media screen and (max-width: 767px) {
  .sectionTitle {
    font-size: 22px;
  }
}

.sectionTitle span {
  color: #0080cc;
}

.headingPage__title--en {
  font-size: 70px;
}

@media screen and (max-width: 767px) {
  .headingPage__title--en {
    font-size: 42px;
  }
}

.peopleWorkMain {
  overflow: hidden;
}

.category .sectionTitle__illust {
  content: url("../../images/lp/illust_category_title.svg");
  left: 360px;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .category .sectionTitle__illust {
    left: 260px;
    transform: scale(0.6);
  }
}

.category {
  padding-block: 50px;
  position: relative;
}

.category__decoration {
  position: absolute;
  right: -5%;
  top: 0;
}

@media screen and (max-width: 1280px) {
  .category__decoration {
    right: 1%;
  }
}

@media screen and (max-width: 992px) {
  .category__decoration {
    transform: scale(0.7);
  }
}

@media screen and (max-width: 767px) {
  .category__decoration {
    top: -2%;
    transform: scale(0.5);
  }
}

@media screen and (max-width: 567px) {
  .category__decoration {
    display: none;
  }
}

.category__list {
  display: flex;
  flex-direction: column;
  padding-top: 88px;
  row-gap: 52px;
}

.category__list::before {
  background-color: #e4eff6;
  content: "";
  height: 677px;
  left: 50%;
  position: absolute;
  top: 57%;
  transform: translateY(-50%) translateX(-50%);
  width: 1280px;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .category__list {
    padding-top: 44px;
    row-gap: 46px;
  }
}

.category__item {
  column-gap: 32px;
  display: flex;
  justify-content: space-between;
  row-gap: 24px;
}

@media screen and (max-width: 767px) {
  .category__item {
    flex-direction: column;
  }
}

.category__image {
  box-shadow: 0 3px 30px rgba(0, 128, 204, 0.16);
  position: relative;
  width: min(100%, 470px);
}

@media screen and (max-width: 767px) {
  .category__image {
    width: 100%;
  }

  .category__image img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
  }
}

.category__contents {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  width: min(100%, 540px);
}

@media screen and (max-width: 767px) {
  .category__contents {
    width: 100%;
  }
}

.category__title {
  color: #0080cc;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.category__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

.interview {
  padding-block: 50px;
  position: relative;
}

.interview .sectionTitle__illust {
  left: 360px;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .interview .sectionTitle__illust {
    left: 230px;
    transform: scale(0.5);
  }
}

.interview__decoration {
  position: absolute;
  right: -5%;
  top: 0;
}

@media screen and (max-width: 1280px) {
  .interview__decoration {
    right: 1%;
  }
}

@media screen and (max-width: 992px) {
  .interview__decoration {
    transform: scale(0.7);
  }
}

@media screen and (max-width: 767px) {
  .interview__decoration {
    top: -2%;
    transform: scale(0.5);
  }
}

@media screen and (max-width: 567px) {
  .interview__decoration {
    display: none;
  }
}

.interview__list {
  display: grid;
  padding-top: 56px;
  position: relative;
  row-gap: 16px;
}

@media screen and (max-width: 767px) {
  .interview__list {
    padding-top: 28px;
  }
}

.interview__item {
  border: 2px solid #6bbbea;
  border-radius: 20px;
  box-shadow: 0 3px 30px rgba(0, 128, 204, 0.16);
  padding: 60px 48px;
  transition: box-shadow 0.3s;
}

@media (any-hover: hover) {
  .interview__item:has(.interview__summary:hover) {
    box-shadow: 0 3px 30px rgba(0, 129, 204, 0.6);
    transition: box-shadow 0.3s;
  }
}

@media screen and (max-width: 767px) {
  .interview__item {
    padding: 30px 16px;
  }
}

.interview__summary {
  column-gap: 60px;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  position: relative;
}

.interview__icon {
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(90deg);
}

.interview__item[open] .interview__icon {
  transform: rotate(-90deg);
}

@media screen and (max-width: 767px) {
  .interview__summary {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
}

.interview__summary::-webkit-details-marker {
  display: none;
}

.interview__image {
  max-width: 240px;
}

.interview__catch {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  padding-right: 32px;
}

@media screen and (max-width: 767px) {
  .interview__catch {
    font-size: 18px;
    padding-right: 0;
  }
}

.interview__meta {
  align-items: center;
  column-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  row-gap: 8px;
}

@media screen and (max-width: 767px) {
  .interview__meta {
    margin-top: 15px;
  }
}

.interview__division {
  background: #6bbbea;
  border-radius: 14px;
  color: #fff;
  display: inline-grid;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  padding: 6px 25px;
  place-items: center;
}

.interview__join {
  color: #0080cc;
  font-size: 16px;
  font-weight: 700;
}

.interview__name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-top: 24px;
}

.interview__name span {
  font-size: 16px;
  letter-spacing: 0.2em;
}

@media screen and (max-width: 767px) {
  .interview__name {
    margin-top: 12px;
  }
}

.interview__container {
  border-top: 1px solid #6bbbea;
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 52px;
  padding-top: 52px;
  transition: grid-template-rows 0.8s;
}

.interview__inner {
  overflow: hidden;
}

.interview__item[open] .interview__container {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.8s;
}

@media screen and (max-width: 767px) {
  .interview__container {
    margin-top: 26px;
    padding-top: 26px;
    row-gap: 26px;
  }
}

.interview__qa:not(:last-of-type) {
  margin-bottom: 52px;
}

@media screen and (max-width: 767px) {
  .interview__qa:not(:last-of-type) {
    margin-bottom: 26px;
  }
}

.interview__question {
  color: #0080cc;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .interview__question {
    font-size: 16px;
  }
}

.interview__answer {
  color: #3a3a3a;
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  margin-top: 32px;
}

@media screen and (max-width: 767px) {
  .interview__answer {
    font-size: 14px;
    margin-top: 16px;
  }
}

.career {
  padding-block: 50px;
  position: relative;
}

.career .sectionTitle {
  white-space: nowrap;
}

.career .sectionTitle__illust {
  left: 440px;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .career .sectionTitle__illust {
    left: 340px;
    transform: scale(0.6);
  }
}

@media screen and (max-width: 576px) {
  .career .sectionTitle__illust {
    display: none;
  }
}

.carreer__image {
  padding-top: 56px;
}

@media screen and (max-width: 767px) {
  .carreer__image {
    padding-top: 16px;
  }

  .carreer__image img {
    width: 100%;
  }
}

.training {
  padding-block: 50px;
  position: relative;
}

.training .sectionTitle {
  white-space: nowrap;
}

.training .sectionTitle__illust {
  left: 360px;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .training .sectionTitle__illust {
    left: 340px;
    transform: scale(0.6);
  }
}

@media screen and (max-width: 576px) {
  .training .sectionTitle__illust {
    display: none;
  }
}

.training__container {
  column-gap: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 56px;
  row-gap: 20px;
}

@media screen and (max-width: 1200px) {
  .training__container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .training__container {
    grid-template-columns: repeat(1, 1fr);
  }
}

.training__first {
  column-gap: 20px;
  display: flex;
  row-gap: 20px;
}

@media screen and (max-width: 576px) {
  .training__first {
    flex-direction: column;
  }
}

.training__second {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

@media screen and (max-width: 992px) {
  .training__second {
    column-gap: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 576px) {
  .training__second {
    grid-template-columns: 1fr;
  }
}

.training__box {
  background: #e4eff6;
  border-radius: 20px;
  max-width: 340px;
  padding: 40px 38px;
}

@media screen and (max-width: 992px) {
  .training__box {
    max-width: 100%;
    padding: 26px 24px;
  }
}

.training__title {
  border-bottom: 1px solid #6bbbea;
  color: #0080cc;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding-bottom: 20px;
}

.training__title span {
  color: #3a3a3a;
  display: block;
  margin-top: 20px;
}

.training p {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  padding-top: 20px;
}