/* ==========================================================================
   採用情報（recruit.php）固有
   ========================================================================== */

/* あしらい */
.recruit-deco--msg-02 {
  top: clamp(16px, 3vw, 40px);
  right: 0;
  width: clamp(180px, 20vw, 300px);
}
.recruit-deco--person-05 {
  top: clamp(40px, 6vw, 88px);
  left: clamp(8px, 4vw, 64px);
  width: clamp(120px, 14vw, 200px);
}
.recruit-deco--work-03 {
  top: clamp(24px, 4vw, 56px);
  left: clamp(8px, 2vw, 32px);
  width: clamp(200px, 22vw, 340px);
}
.recruit-deco--req-01 {
  bottom: 0;
  left: clamp(8px, 2vw, 32px);
  width: clamp(100px, 11vw, 170px);
}
.recruit-deco--req-04 {
  top: clamp(40px, 6vw, 88px);
  right: clamp(8px, 3vw, 48px);
  width: clamp(140px, 16vw, 240px);
}

/* 02. メッセージ（左右にイラスト） */
.recruit-msg {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(0px, 10vw - 50px, 100px) minmax(0, 1000px) clamp(0px, 10vw - 50px, 100px);
  justify-content: center;
  gap: clamp(0px, 2vw, 32px);
}
.recruit-msg__illust {
  align-self: end;
  width: 100%;
  max-width: 100px;
  overflow: hidden;
}
.recruit-msg__illust--left  { justify-self: end; }
.recruit-msg__illust--right { justify-self: start; }
.recruit-msg__illust img {
  display: block;
  width: 100%;
  height: auto;
}
.recruit-msg__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

/* 03. こんな方と一緒に働きたい */
.recruit-person {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.recruit-person__main {
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  text-align: center;
}
.recruit-person__main-txt {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  color: #4a6545;
  line-height: 1.5;
}
.recruit-person__card {
  background: #f6f4ec;
  border-radius: 32px;
  padding: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.recruit-person__card img {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.recruit-person__card p {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #3A3A32;
}

/* 05. 働き方・仕事内容 */
.recruit-work__head { position: relative; }
.recruit-work__illust {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px + (clamp(80px, 10vw, 140px) + 64px) * 0.15);
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.6vw, 20px);
  height: calc((clamp(80px, 10vw, 140px) + 64px) * 0.85);
  z-index: 1;
  pointer-events: none;
}
.recruit-work__illust img {
  display: block;
  height: 100%;
  width: auto;
}
.recruit-work__photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  margin-bottom: 14px;
  background: #e8ede0;
  object-fit: cover;
}
.recruit-work__photo--job   { object-position: 50% 12%; }
.recruit-work__photo--after { object-position: 50% 20%; }
.recruit-work__list {
  /* デザイン元の ul は UA 既定の margin-bottom(1em) を保持している */
  margin: 10px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 1.7;
}
.recruit-work__list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.recruit-work__list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e58d51;
  transform: translateY(-2px);
}
.recruit-work__list b { color: #4a6545; }
.recruit-work__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-top: auto;
  padding-top: 16px;
  color: #4a6545;
}
.recruit-work__chip {
  background: #fff;
  padding: 6px 16px;
  border-radius: 999px;
}
.recruit-work__chip--accent {
  background: #e58d51;
  color: #fff;
}

/* 06. 募集要項（タブ切り替え） */
.recruit-req {
  display: flex;
  flex-direction: column;
}
.recruit-req__tabs {
  display: flex;
  gap: 8px;
}
.recruit-req__tab {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  padding: 16px 12px;
  border-radius: 24px 24px 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ede7da;
  color: #5b5b50;
}
.recruit-req__tab::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6e9b57;
}
.recruit-req__tab--part::before { background: #e58d51; }
.recruit-req__tab:hover { background: #e6dfcf; }
.recruit-req__tab.is-active { background: #fff; cursor: default; }
.recruit-req__tab--full.is-active { color: #4a6545; }
.recruit-req__tab--part.is-active { color: #9a5224; }
.arki-dl--recruit {
  background: #fff;
  border-radius: 0 0 32px 32px;
  padding: clamp(8px, 1.5vw, 16px) clamp(20px, 3.5vw, 40px);
}
.arki-dl--recruit .arki-dl__row {
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom-color: rgba(74, 101, 69, 0.3);
}
.arki-dl--recruit .arki-dl__row:last-child { border-bottom: none; }
.arki-dl--recruit .arki-dl__dd { flex-basis: 320px; }
.recruit-req__salary {
  font-size: 20px;
  color: #e58d51;
}

/* 07. 選考の流れ */
.recruit-flow__item {
  background: #fff;
  border-radius: 24px;
  padding: clamp(24px, 2.6vw, 32px) 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}


/* SP（767px以下） */
@media (max-width: 767px) {
  /* こんな方と一緒に働きたい：1列で縦に長いので2列に */
  .recruit-person .arki-grid--240 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .recruit-person__card {
    padding: 16px 12px;
    gap: 10px;
    border-radius: 24px;
  }
  .recruit-person__card p { font-size: 14px; }
  /* 募集要項タブ：「アルバイト・パート」を1行に収める */
  .recruit-req__tab {
    font-size: 14px;
    padding: 14px 8px;
    gap: 8px;
  }
  /* 選考の流れ：STEP丸を左、見出し・本文を右に */
  .recruit-flow__item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: center;
    text-align: left;
    padding: 20px;
  }
  .recruit-flow__item .arki-step { grid-row: span 2; }
  .recruit-flow__item .arki-step-ttl { align-self: end; }
  .recruit-flow__item .arki-step-txt { align-self: start; }
  .recruit-flow__item .arki-step-ttl:last-child { grid-row: span 2; align-self: center; }
}