@charset "UTF-8";

/* ===========================================
 * 
	----------------------------------
  Structure
  ----------------------------------
  01_head エリア
  02_採用コンテンツ
 * ======================================== */

/* ===========================================
 * 01_head エリア
 * ======================================== */
.recruit {
  container-type: inline-size;
}
.recruit__inner {
  width: 100%;
  max-width: 1000px;
  padding-block: var(--spc-160-80);
}
.recruit__head {
  padding-bottom: var(--spc-100-50);
}

.recruit__title {
  --clamp-min: 40;
  --clamp-max: 60;
  text-align: center;
  padding-bottom: var(--spc-20-10);
  text-align: center;
}
.recruit__sub-title {
  --clamp-min: 20;
  --clamp-max: 30;
  text-align: center;
}


/* ===========================================
 * 02_採用コンテンツ
 * ======================================== */
.--border {
  border-top: 1px solid var(--color-border-bk);
  padding-block: var(--spc-60-30);
}
.recruit__summary {
  display: grid;
  justify-content: center;
}
.recruit__text {
  --clamp-min: 18;
  --clamp-max: 24;
}


.recruit__description {
  display: grid;
  gap: var(--spc-40-20);
}

/* ギャラリー */
/* ======================================== */
.recruit__gallery {
  position: relative;
  padding-block: var(--spc-60-30);
  margin-bottom: var(--spc-40-20);
  margin-inline: auto; 
}
.gallery-swiper-slide {
  display: grid;
  justify-items: center;
}
/* 前への矢印 */
.recruit__gallery .swiper-button-prev {
  left: 0;
  color: var(--color-primary);
  width: var(--len-40-20);
}
/* 次への矢印 */
.recruit__gallery .swiper-button-next {
  right: 0;
  color: var(--color-primary);
  width: var(--len-40-20);
}
.recruit__gallery .swiper-pagination-bullet-active {
  background: var(--color-primary);
}

/* 募集要項 */
/* ======================================== */
.recruit__item-wrap {
  padding-top: var(--spc-40-20);
}
.recruit__items {
  --clamp-min: 18;
  --clamp-max: 24;
  display: grid;
  grid-template-columns: auto 1fr;
}

.recruit__item {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
}

.recruit__category {
  text-align: center;
  padding: var(--spc-4-2) var(--spc-20-10);
  background: var(--color-bg-gr);
  border-bottom: 1px solid var(--color-border-wh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.recruit__detail {
  padding: var(--spc-4-2) var(--spc-20-10);
  border-bottom: 1px solid var(--color-bg-gr);
}
@container (width <= 768px) {
  .recruit__items {
    grid-template-columns: 1fr;
  }
  .recruit__item {
    grid-template-columns: 1fr;
  }
  .recruit__category,
  .recruit__detail {
    border-bottom: none;
  }
}

/* 考フロー */
/* ======================================== */
.recruit__link-wrap {
  padding-top: var(--spc-80-40);
  display: flex;
  justify-content: center;
}

.recruit__steps {
  display: grid;
  gap: var(--spc-20-10);
  padding-block: var(--spc-40-20);
}

.recruit__link {
  --clamp-min: 20;
  --clamp-max: 30;
  font-weight: bold;
  padding: var(--spc-20-10) var(--spc-40-20);
  border: 1px solid var(--color-border-bk);
  border-radius: 50px;
  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
}
@media(any-hover: hover) {
  .recruit__link:hover {
    color: var(--color-font-wh);
    background: var(--color-bg-bk);
    border: 1px solid var(--color-border-bk);
  }
}