/* ===================================
    共通スタイル
=================================== */
.section {
  container-type: inline-size;
  container-name: section-block;
}

.section__inner {
  gap: 7rem;
}

.section__container {
  padding-bottom: 7rem;
}

@media screen and (max-width:750px) {
  .section__inner {
    gap: 6rem;
  }

  .section__container {
    padding-bottom: 3rem;
  }
}

/* ===================================
    トップリンクエリア
=================================== */
.recruit__links {
  display: flex;
  width: fit-content;
  gap: 0.4rem;
  align-items: center;
  border-radius: 8rem;
  background: var(--color-main);
  padding: 1.2rem;
}

.recruit__link {
  display: block;
  border-radius: 6rem;
  padding: 0.9rem 1.6rem;
  color: #FAF8F8;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.17rem;
  transition: var(--transition-base);
}

.recruit__link.active {
  background: #FFF;
  color: var(--color-main);
}

.recruit__link:active {

  color: var(--color-main);
  background: #FFF;
}

.recruit__link:hover {
  background: #B72E45;
}

@media screen and (max-width:750px) {
  .recruit__links {
    gap: 0.2rem;
    border-radius: 8rem;
    padding: 0.8rem;
  }

  .recruit__link {
    padding: 0.5rem 1rem;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
  }
}

/* ===================================
    募集要項・応募資格
=================================== */
.row .section {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.section__title {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.section__title h2 {
  color: var(--color-main);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: 0.16rem;
}

.section__title small {
  color: #B3B3B3;
  font-size: 1.5rem;
  font-weight: 500;
}

.section__title .en {
  color: var(--color-main);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.09rem;
}

.row {
  display: flex;
  gap: 4rem;
}

.recruit__box {
  margin-top: 2rem;
  border-radius: 2rem;
  background: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  padding: 2.4rem;
  height: 100%;
}

.recruit__box-center {
  padding: 3.4rem;
}

.recruit__box h3 {
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.48;
  /* 29.6px */
  letter-spacing: 0.1rem;
}

.recruit__box h3::after {
  content: "※";
  font-size: 1.3rem;
  font-weight: 500;
  vertical-align: super;
}

.recruit__box p {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  /* 24px */
}

.recruit__box p[data-font="large"] {
  font-size: 17px;
  line-height: 1.48;
  /* 25.16px */
  letter-spacing: 0.17rem;
}

@media screen and (max-width:750px) {
  .row .section {
    width: 100%;
  }

  .row {
    flex-direction: column;
    gap: 6rem;
  }

  .section__title h2 {
    font-size: 2.6rem;
    letter-spacing: 0.13rem;
  }

  .section__title small {
    line-height: 1.6;
  }

  .section__title .en {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.07rem;
    padding-left: 0;
  }

  .recruit__box {
    gap: 1.2rem;
  }

  .recruit__box-center {
    padding: 2.4rem;
  }

  .recruit__box p[data-font="large"] {
    font-size: 1.5rem;
    line-height: 1.6;
  }
}

/* ===================================
    募集要項詳細
=================================== */
.guidelines {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.guidelines dl {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  width: 100%;
}

.guidelines dt {
  width: 12rem;
  height: 5.6rem;
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5rem;
  border: 1px solid #FAF8F8;
  background: #FFF;
}

.guidelines dd {
  flex: 1;
  color: #000;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  /* 24px */
}

@media screen and (max-width:750px) {
  .guidelines {
    margin-top: 2rem;
    gap: 2.6rem;
  }

  .guidelines dl {
    flex-direction: column;
    align-items: start;
    gap: 1.6rem;
  }

  .guidelines dd {
    width: 100%;
    flex: none;
    padding: 0 1.6rem;
  }
}

/* ===================================
    中途採用比率
=================================== */
.ratio__table {
  margin-top: 3rem;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.4rem 0.5rem;
  /* 横 縦 */
  overflow: hidden;
}


.ratio__table th,
.ratio__table td {
  padding: 1.6rem 2rem;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: middle;
}

.ratio__table th:first-child,
.ratio__table td:first-child {
  width: 22%;
}

.ratio__table th {
  font-size: 1.8rem;
  background: #FFF;
}

.ratio__table th:first-child {
  font-size: 1.5rem;
}

.ratio__table td:first-child {
  text-align: left;
  background: #FFF;
}

.ratio__num {
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 1;
}

.ratio__unit {
  font-size: 1.5rem;
  font-weight: 500;
  margin-left: 0.8rem;
}

@media screen and (max-width: 750px) {

  .ratio__table th,
  .ratio__table td {
    padding: 0.7rem 1rem;
  }

  .ratio__table th:first-child,
  .ratio__table td:first-child {
    width: 42%;
    font-size: 1.1rem;
  }

  .ratio__table th {
    font-size: 1.3rem;
  }

  .ratio__num {
    font-size: 1.8rem;
  }

  .ratio__unit {
    font-size: 1.1rem;
    margin-left: 0.4rem;
  }
}

/* ===================================
    よくあるご質問
=================================== */
.faq__list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.faq__item {
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  border-radius: 1.6rem;
  background: #FFF;
}

.faq__question {
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.48;
  /* 25.16px */
  letter-spacing: 0.17rem;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: baseline;
  gap: 0.8rem;
}

.faq__question::before {
  content: "Q";
  color: var(--color-main);
  font-size: 2.2rem;
  font-weight: 500;

}

.faq__answer {
  display: flex;
  align-items: anchor-center;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  gap: 0.9rem;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
}

.faq__answer::before {
  content: "A";
  color: var(--color-accent);
  vertical-align: bottom;
  font-family: var(--font-en);
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.22rem;
}

/* ===================================
    採用に関するお問い合わせはこちら
=================================== */
.contact__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

.contact__section .section__title {
  width: fit-content;
}

.contact__box {
  width: 50%;
  border-radius: 2rem;
  background: #FFF;
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.contact__box-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.48;
  /* 29.6px */
  letter-spacing: 0.1rem;
}

.contact__box-text {
  font-size: 1.3rem;
  font-weight: 500;
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.contact__btn {
  width: fit-content;
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .3s ease;
  border-radius: 100px;
  padding-right: 2.4rem;
  transition: var(--transition-base);
}

.contact__btn[data-color="main"] {
  border: 1px solid var(--color-main);
  color: var(--color-main);
}

.contact__btn[data-color="accent"] {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.contact__btn-text {
  padding-left: 2.2rem;
  transition: var(--transition-base);
}

.contact__btn-icon {
  display: inline-block;
  margin: -0.05rem 0 -0.05rem -0.05rem;
  padding: 1.2rem 1.5rem;
  border-radius: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

[data-color="main"] .contact__btn-icon {
  border: 1px solid var(--color-main);
}

[data-color="accent"] .contact__btn-icon {
  border: 1px solid var(--color-accent);
}

.contact__btn-icon svg path,
.contact__btn-icon svg rect {
  transition: var(--transition-base);
}

/* hover */
.contact__btn:hover .contact__btn-icon {
  border-color: #FFF;
}

.contact__btn[data-color="main"]:hover .contact__btn-icon svg path {
  fill: #FFF;
  stroke: #FFF;
}

.contact__btn[data-color="accent"]:hover .contact__btn-icon svg rect {
  fill: #FFF;
  stroke: #FFF;
}

.contact__btn[data-color="accent"]:hover .contact__btn-icon svg path {
  stroke: var(--color-accent);
}

.contact__btn:hover .contact__btn-text {
  color: #FFF;
}

.contact__btn[data-color="main"]:hover {
  background: #B72E45;
}

.contact__btn[data-color="accent"]:hover {
  background: var(--color-accent);
}

@media screen and (max-width:1300px) {

  .people__img {
    font-size: 0.694444vw !important;
  }
}

@media screen and (max-width:750px) {
  .contact__section {
    flex-direction: column;
    align-items: start;
    gap: 2rem;
  }

  .contact__box {
    width: 100%;
    padding: 2.4rem;
    gap: 2.4rem;
  }

  .contact__box-title {
    font-size: 2rem;
    letter-spacing: 0.22rem;
  }

  .contact__btn {
    font-size: 1.4rem;
    padding-right: 1.8rem;
  }

  .contact__btn-text {
    padding-left: 1.5rem;
    letter-spacing: 0.03rem;
  }

  .contact__btn-icon {
    padding: 1.1rem 1.5rem;
    margin: -0.05rem auto -0.04rem -0.04rem;
  }

  .contact__btn-icon svg {
    width: 1.7rem;
    height: 1.7rem;

  }

  .contact__links {
    gap: 1.6rem;
  }

  .contact__box-text {
    font-size: 1.3rem;
  }
}

/* ===================================
    関連ページ
=================================== */
.related__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.related__item a {
  width: 100%;
  display: block;
  aspect-ratio: 313 / 200;
  display: flex;
  align-items: end;
  padding: 0 0 1.2rem 0.8rem;
}

.related__item {
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
}

.related__item:nth-child(1) {
  background-image: url("../images/saiyou/imgRelatedContents01.webp");
}

.related__item:nth-child(2) {
  background-image: url("../images/saiyou/imgRelatedContents02.webp");
}

.related__item:nth-child(3) {
  background-image: url("../images/saiyou/imgRelatedContents03.webp");
}

.related__item .common__btn {
  font-weight: 700;
}

/* hover */
.related__item:hover .common__btn .common__btn-icon {
  background: #FAF8F8;
}

.related__item:hover .common__btn .common__btn-icon svg {
  animation: slideOutIn 0.6s forwards;
}

.related__item:hover .common__btn .common__btn-icon svg path {
  stroke: var(--color-main);
}

@container section-block (max-width: 900px) {

  .related__item {
    font-size: 0.694444vw !important;
  }

  .related__item a {
    padding: 0 0 1.3em 0.6em;
  }

  .related__item .common__btn {
    gap: 1em;
  }

  .related__item .common__btn-text {
    font-size: 1.5em;
  }

  .related__item .common__btn-icon {
    padding: 0.5em 0;
    border-radius: 3em;
    width: 3em;
  }

  .related__item .common__btn-icon svg {
    width: 0.9em;
    height: 0.9em;
  }
}

@media screen and (max-width:1024px) {
  .related__item {
    font-size: 0.9765625vw !important;
  }
}

@media screen and (max-width:750px) {
  .related__list {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .related__item a {
    aspect-ratio: 335 / 200;
    padding: 0 0 1.2rem 2rem;
  }

  .related__item .common__btn {
    gap: 1.2rem;
  }

  .related__item .common__btn-text {
    font-size: 1.5rem;
  }

  .related__item .common__btn-icon {
    padding: 0.4rem 0;
    border-radius: 3rem;
    width: 3.2rem;
  }

  .related__item .common__btn-icon svg {
    width: 1.4rem;
    height: 1.2rem;
  }
}