.job-page .recruit {
  --job-brown: #654b3b;
  --job-brown-dark: #453228;
  --job-beige: #f3ede3;
  --job-cream: #faf8f4;
  --job-line: #ddd1c3;
  --job-text: #3f3935;
  color: var(--job-text);
  font-size: 16.5px;
  font-weight: 500;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Yu Gothic", sans-serif;
  line-height: 1.9;
  overflow: hidden;
}

.job-page #header > h1 span { display: inline-block; }
.job-page .recruit *, .job-page .recruit *::before, .job-page .recruit *::after { box-sizing: border-box; }
.job-page .recruit p { margin: 0 0 1.2em; }
.job-page .recruit p:last-child { margin-bottom: 0; }
.job-page .recruit h2, .job-page .recruit h3 { border: 0; background: none; padding: 0; }

.job-page .recruit-hero,
.job-page .recruit-section {
  margin: 0 0 68px;
  padding: 58px 7%;
}

.job-page .recruit-hero {
  background: var(--job-cream);
  text-align: center;
  border-radius: 14px;
}

.job-page .recruit-kicker,
.job-page #contents .recruit-section .recruit-section-number {
  color: #96785e;
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: .2em;
  text-align: center;
}

.job-page .recruit-section-number {
  position: static;
  margin: 0 0 10px;
  transform: none;
}

.job-page #contents .recruit-section h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  color: var(--job-brown-dark);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  padding: 12px 16px;
  position: static;
  transform: none;
}

.job-page #contents .recruit-section h2 + * { margin-top: 30px; }

.job-page #contents .recruit-hero h2 {
  height: auto;
  margin: 0 0 30px;
  padding: 32px 50px;
  color: var(--job-brown-dark);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  background: linear-gradient(
    to bottom,
    #f5efe6 0%,
    #f1e9de 8%,
    #f1e9de 92%,
    #ebe1d4 100%
  );
  border: 1px solid #ded1c2;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(69, 50, 40, .06);
}

.job-page .recruit-intro-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 38px 44px;
  background: #fff;
  border: 1px solid #e5ddd3;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(69, 50, 40, .07);
  text-align: left;
}

.job-page .recruit-grid { display: grid; gap: 18px; }
.job-page .recruit-grid--two { grid-template-columns: repeat(2, 1fr); }
.job-page .recruit-card {
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--job-line);
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(69, 50, 40, .06);
}
.job-page #contents .recruit-card h3 { color: var(--job-brown); font-size: 18px; font-weight: 700; line-height: 1.6; margin: 0 0 10px; }
.job-page .recruit-card p { color: var(--job-text); font-size: 16px; line-height: 1.8; }
.job-page .recruit-card-note { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid #eee6dc; color: #5f544c !important; font-size: 16px !important; }

.job-page .job-treatment-image {
  margin: 30px auto 24px;
  text-align: center;
}
.job-page .job-treatment-image img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
.job-page .job-treatment-copy {
  margin-top: 0;
  padding-top: 48px;
}
.job-page .job-customer-opportunity { margin-top: 34px; margin-bottom: 0; }

.job-page .recruit-reward {
  background: var(--job-beige);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #e0d4c4;
}
.job-page .recruit-copy { max-width: 680px; margin: 0 auto 30px; }
.job-page .reward-points { list-style: none; padding: 0; }
.job-page .reward-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 30px 0 0; }
.job-page .reward-points li {
  position: relative;
  padding: 17px 18px 17px 42px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(69, 50, 40, .06);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.7;
}
.job-page .reward-points li::before { content: "✓"; position: absolute; left: 18px; color: #8a6a4f; }
.job-page .reward-note { margin: 26px 0 0 !important; color: var(--job-brown-dark); font-weight: bold; text-align: center; }

.job-page .work-style-labels { display: flex; justify-content: center; gap: 12px; list-style: none; margin: 0 auto 28px; padding: 0; }
.job-page .work-style-labels li { position: relative; min-width: 104px; padding: 10px 16px 10px 34px; background: #f5f0e8; border: 1px solid var(--job-line); border-radius: 999px; color: var(--job-brown-dark); font-size: 16px; font-weight: bold; text-align: center; }
.job-page .work-style-labels li::before { content: ""; position: absolute; top: 50%; left: 15px; width: 9px; height: 9px; border-radius: 50%; background: #9a7c63; transform: translateY(-50%); }

.job-page .job_area_section { margin-top: 42px; }
.job-page #contents .job_area_title {
  margin: 0 0 22px;
  color: var(--job-brown);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.job-page .job_area_intro { max-width: 720px; margin: 0 auto 28px; }
.job-page .job_area_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.job-page .job_area_group { padding: 22px 20px; background: #fffdf9; border: 1px solid var(--job-line); border-radius: 10px; }
.job-page #contents .job_area_group_title {
  margin: 0 0 16px;
  padding: 0 0 12px;
  color: var(--job-brown-dark);
  border-bottom: 1px solid #e8ded2;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
}
.job-page .job_area_list { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 0; padding: 0; list-style: none; }
.job-page .job_area_list li { position: relative; padding-left: 13px; color: var(--job-text); font-size: 16px; line-height: 1.7; }
.job-page .job_area_list li::before { content: "・"; position: absolute; left: 0; color: #96785e; font-weight: 700; }
.job-page .job_area_note { margin: 24px 0 0 !important; padding: 20px 22px; background: var(--job-cream); border-left: 4px solid #b49a80; border-radius: 8px; color: var(--job-text); font-size: 16px; line-height: 1.85; }

.job-page .requirements-list, .job-page .qa-list { margin: 0; }
.job-page .requirements-list { border: 1px solid var(--job-line); border-radius: 10px; overflow: hidden; }
.job-page .requirements-list div { display: grid; grid-template-columns: 30% 70%; border-bottom: 1px solid var(--job-line); }
.job-page .requirements-list div:last-child { border-bottom: 0; }
.job-page .requirements-list dt, .job-page .requirements-list dd { margin: 0; padding: 20px 22px; font-size: 16.5px; line-height: 1.7; }
.job-page .requirements-list dt { background: #d8c8b3; color: var(--job-brown-dark); font-weight: 700; }
.job-page .requirements-list dd { background: #fff; }

.job-page .qa-list { display: grid; gap: 14px; }
.job-page .qa-list div { padding: 22px 26px; background: #fff; border: 1px solid var(--job-line); border-radius: 10px; box-shadow: 0 4px 14px rgba(69, 50, 40, .05); }
.job-page .qa-list dt, .job-page .qa-list dd { position: relative; margin: 0; padding-left: 42px; min-height: 30px; }
.job-page .qa-list dt { color: var(--job-brown-dark); font-size: 17px; font-weight: 700; line-height: 1.75; margin-bottom: 10px; }
.job-page .qa-list dd { color: var(--job-text); font-size: 16px; line-height: 1.85; }
.job-page .qa-preparation dd p { margin-bottom: 10px; }
.job-page .qa-preparation ul { margin: 0; padding: 0; list-style: none; }
.job-page .qa-preparation li { position: relative; margin: 0 0 10px; padding-left: 1.2em; color: var(--job-text); font-size: 16px; line-height: 1.85; }
.job-page .qa-preparation li:last-child { margin-bottom: 0; }
.job-page .qa-preparation li::before { content: "・"; position: absolute; left: 0; color: var(--job-brown); font-weight: 700; }
.job-page .qa-list dt::before, .job-page .qa-list dd::before { position: absolute; top: 0; left: 0; display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; font-family: Georgia, serif; font-weight: bold; line-height: 1; }
.job-page .qa-list dt::before { content: "Q"; background: #765a46; color: #fff; }
.job-page .qa-list dd::before { content: "A"; background: #e8ddcf; color: #654b3b; }

.job-page .recruit-apply { background: var(--job-cream); border: 1px solid var(--job-line); border-radius: 14px; }
.job-page .apply-message { max-width: 680px; margin: 30px auto 0; padding: 24px 28px; background: #fff; border: 1px solid var(--job-line); border-radius: 9px; font-size: 16.5px; line-height: 1.9; text-align: center; }
.job-page .apply-message p { margin-bottom: .5em; }
.job-page .apply-actions { display: flex; gap: 14px; max-width: 680px; margin: 34px auto 0; }
.job-page .apply-button { display: flex; flex: 1; min-height: 76px; align-items: center; justify-content: center; flex-direction: column; padding: 14px 18px; border-radius: 8px; color: #fff !important; font-size: 18px; line-height: 1.5; text-decoration: none; font-weight: bold; text-align: center; box-shadow: 0 5px 14px rgba(69, 50, 40, .14); }
.job-page .apply-button:hover { opacity: .9; text-decoration: none; }
.job-page .apply-button--tel { background: var(--job-brown); }
.job-page .apply-button--tel span { font-size: 15px; font-weight: 500; }
.job-page .apply-button--form { background: #8c755f; }

@media screen and (max-width: 680px) {
  .job-page #header > h1 { width: 100%; margin-right: 0; box-sizing: border-box; }
  .job-page .recruit { font-size: 16px; line-height: 1.9; }
  .job-page .recruit-hero, .job-page .recruit-section { margin-bottom: 66px; padding: 58px 18px; }
  .job-page #contents .recruit-section h2 { font-size: 20px; line-height: 1.45; margin: 0; padding: 12px 16px; }
  .job-page #contents .recruit-section h2 + * { margin-top: 28px; }
  .job-page #contents .recruit-hero h2 { height: auto; margin: 0 0 30px; padding: 30px 20px; font-size: 21px; line-height: 1.55; }
  .job-page .recruit-intro-card { padding: 25px 20px; }
  .job-page .recruit-grid--two, .job-page .reward-points { grid-template-columns: 1fr; }
  .job-page .recruit-card { padding: 25px 20px; }
  .job-page #contents .recruit-card h3 { font-size: 18px; }
  .job-page .recruit-card p, .job-page .recruit-card-note { font-size: 16px !important; }
  .job-page .job-treatment-copy {
    margin-top: 0;
    padding-top: 40px;
  }
  .job-page .work-style-labels { flex-wrap: wrap; gap: 9px; }
  .job-page .work-style-labels li { min-width: 0; padding: 10px 14px 10px 30px; font-size: 16px; }
  .job-page .work-style-labels li::before { left: 12px; }
  .job-page .job_area_section { margin-top: 38px; }
  .job-page #contents .job_area_title { font-size: 19px; text-align: left; }
  .job-page .job_area_intro { margin-bottom: 24px; }
  .job-page .job_area_grid { grid-template-columns: 1fr; gap: 14px; }
  .job-page .job_area_group { padding: 21px 18px; }
  .job-page #contents .job_area_group_title { font-size: 17px; }
  .job-page .job_area_list { gap: 7px 11px; }
  .job-page .job_area_list li { font-size: 16px; }
  .job-page .job_area_note { padding: 18px 17px; font-size: 16px; }
  .job-page .requirements-list div { display: block; }
  .job-page .requirements-list dt, .job-page .requirements-list dd { padding: 16px 18px; font-size: 16px; }
  .job-page .requirements-list dt { border-bottom: 1px solid var(--job-line); }
  .job-page .requirements-list dd { padding-top: 17px; padding-bottom: 19px; }
  .job-page .qa-list div { padding: 22px 18px; }
  .job-page .qa-list dt { font-size: 17px; }
  .job-page .qa-list dd { font-size: 16px; }
  .job-page .apply-message { padding: 20px 16px; text-align: left; }
  .job-page .apply-actions { flex-direction: column; gap: 16px; }
  .job-page .apply-button { min-height: 72px; font-size: 17px; }
  .job-page .apply-button--tel span { font-size: 15px; }
}