.hmc-recruit-banner {
  --hmc-cream: #fffcf3;
  --hmc-cream-2: #fdf8f7;
  --hmc-brown: #c9a063;
  --hmc-brown-2: #d8d2bd;
  --hmc-teal: #3aa9a0;
  --hmc-coral: #f8965e;
  --hmc-blue: #6bb3c0;
  --hmc-pink: #d97d81;
  --hmc-pink-2: #eb8f84;
  --hmc-mustard: #eaa471;
  --hmc-lavender: #9b8cd8;
  --hmc-green: #68b78d;
  --hmc-text: #593a37;
  --hmc-sub: #79570f;
  --hmc-radius: 10px;
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--hmc-radius);
  background: linear-gradient(135deg, var(--hmc-cream) 0%, var(--hmc-cream-2) 95%);
  box-shadow: 0 2px 3px rgba(74, 63, 53, 0.12);
  isolation: isolate;
  border: 1px solid #e8e2cc;
}

.hmc-recruit-banner *{
  box-sizing: border-box;
}

.hmc-recruit-banner i{
  display: inline-block;
  line-height: 1;
  font-style: normal; /* iタグの斜体を解除 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 背景の装飾（星） ---------- */
.hmc-recruit-banner__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hmc-decor {
  position: absolute;
  opacity: 0.55;
  width: 26px;
  height: 26px;
  background: var(--hmc-mustard);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hmc-decor-1 {
  top: -5px;
  right: 0;
  transform: rotate(-8deg);
}
.hmc-decor-2 {
  top: 30px;
  right: 7%;
  transform: scale(0.7);
  background: var(--hmc-lavender);
}
.hmc-decor-3 {
  bottom: 24px;
  right: 6%;
  transform: rotate(8deg);
  background: var(--hmc-pink);
}
.hmc-decor-4 {
  bottom: 44px;
  right: calc(6% + 30px);
  transform: scale(0.7);
  background: var(--hmc-teal);
}

/* ---------- 内側レイアウト ---------- */
.hmc-recruit-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0 32px;
  padding: 36px 40px;
}

.hmc-recruit-banner__text {
  position: relative;
  flex: 1 1 340px;
  min-width: 0;
}

.hmc-recruit-banner__tag {
  color: var(--hmc-brown);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hmc-recruit-banner__tag::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--hmc-brown);
  border-radius: 2px;
}

.hmc-recruit-banner__title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hmc-text);
}

.hmc-recruit-banner__catch {
  margin: 0 0 16px;
  font-size: 1.78rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--hmc-text);
}

.hmc-catch-accent {
  background: linear-gradient(to right, #febe79, #f6a0a0, #9cbbe7, #90d3bc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hmc-catch-accent-bt{
  background:linear-gradient(180deg, transparent 60%, rgba(239, 143, 92, .28) 60%);
}


/* ---------- 募集職種エリア ---------- */
.hmc-recruit-jobs {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.65);
  border: 2px dashed var(--hmc-brown-2);
  border-radius: 16px;
}

.hmc-recruit-jobs__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hmc-sub);
  letter-spacing: 0.02em;
}

.hmc-recruit-jobs__label i {
  color: var(--hmc-mustard);
  font-size: 0.85rem;
}

.hmc-recruit-joblist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hmc-recruit-joblist li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px 3px 10px;
  font-size: 0.8rem;
  font-weight: 800;
  background: #fff;
  border: 1px solid;
  border-radius: 100vh;
  box-shadow: 0 2px 6px rgba(74, 63, 53, 0.06);
}

.hmc-recruit-joblist li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.hmc-recruit-joblist .job-dr::before,
.hmc-recruit-joblist .job-dr { color: var(--hmc-blue); border-color: var(--hmc-blue); }
.hmc-recruit-joblist .job-dh::before,
.hmc-recruit-joblist .job-dh { color: var(--hmc-green); border-color: var(--hmc-green); }

/* 「募集なし」時のメッセージ */
.hmc-recruit-joblist .job-empty { color: var(--hmc-text); border-color:#ddd8c4; background: #efeae2; }
.hmc-recruit-joblist .job-empty::before{ content:"\f28b"; font-weight:400; color: #a89d8f; }

/* ---------- CTAボタン ---------- */
.hmc-recruit-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  border-radius: 100vh;
  background: var(--hmc-pink-2);
  box-shadow: 0 3px 10px rgba(74, 63, 53, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  justify-content: center;
}

.hmc-recruit-banner__cta:hover,
.hmc-recruit-banner__cta:visited,
.hmc-recruit-banner__cta:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

.hmc-recruit-banner__cta i {
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.hmc-recruit-banner__cta:hover i {
  transform: translateX(3px);
}

/* ---------- 写真エリア ---------- */
.hmc-recruit-banner__photos {
  position: relative;
  flex: 0 0 340px;
  width: 340px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
}

.hmc-recruit-banner__photos img {
  width: 100%;
  filter:drop-shadow(0 8px 15px rgba(74, 63, 53, 0.18));
}


/* =========================================================
   レスポンシブ対応
   ========================================================= */
@media (max-width: 860px) {
  .hmc-recruit-banner__inner {
    padding: 30px 26px;
    gap: 24px;
  }
  .hmc-recruit-banner__photos {
    flex: 0 0 260px;
    width: 260px;
  }
}

@media (max-width: 680px) {
  .hmc-recruit-banner__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 26px 18px;
    gap: 20px;
  }
  .hmc-recruit-banner__text {
    order: 1;
    flex-basis: auto;
  }
  .hmc-recruit-banner__photos {
    order: 2;
    align-self: center;
    width: 100%;
    max-width: 320px;
    flex-basis: auto;
    aspect-ratio: 4 / 2.6;
  }
  .hmc-recruit-banner__catch {
    font-size: 1.5rem;
  }
}

@media (max-width: 400px) {
  .hmc-recruit-jobs {
    padding: 10px;
  }
  .hmc-recruit-joblist li {
    padding: 2px 12px 2px 10px;
  }
}