/* Job listing wireframes — magazine family tokens.
   Loaded after sekoukanri-magazine.css. */

:root {
  --jobs-ink: var(--mag-ink, #172235);
  --jobs-muted: var(--mag-muted, #5d6878);
  --jobs-navy: var(--mag-navy, #0b3d78);
  --jobs-navy-dark: var(--mag-navy-dark, #082d59);
  --jobs-orange: var(--mag-orange, #d95f24);
  --jobs-warm: var(--mag-warm, #f7f4ee);
  --jobs-soft: var(--mag-soft, #f4f6f8);
  --jobs-line: var(--mag-line, #d8dee7);
  --jobs-max: var(--mag-max, 1120px);
  --jobs-radius: var(--mag-radius, 4px);
}

/* Wireframe notice — remove when shipping real jobs. */
.jobs-wire-banner {
  background: #1e334f;
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  padding: 8px 16px;
}
.jobs-wire-banner strong { color: #ffcf3d; font-weight: 800; }

.jobs-nav a[aria-current="page"] {
  color: var(--jobs-navy);
  border-bottom-color: var(--jobs-orange);
}

.jobs-hero {
  background:
    linear-gradient(180deg, rgba(247, 244, 238, .96), rgba(247, 244, 238, .88)),
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(11, 61, 120, .06), transparent 55%);
  border-top: 1px solid #ebe4d8;
  border-bottom: 1px solid #e2dbcf;
  animation: jobs-fade-in .45s ease-out both;
}
.jobs-hero__inner {
  width: min(calc(100% - 32px), var(--jobs-max));
  margin: 0 auto;
  padding: 36px 0 34px;
}
.jobs-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--jobs-orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.jobs-hero__eyebrow::before {
  content: "";
  width: 18px;
  height: 3px;
  background: currentColor;
}
.jobs-hero h1 {
  max-width: 820px;
  margin: 0 0 12px;
  color: #13233a;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.4;
  letter-spacing: .01em;
}
.jobs-hero__lead {
  max-width: 720px;
  margin: 0;
  color: #4f5d70;
  font-size: 15px;
  line-height: 1.8;
}
.jobs-hero__meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: #657083;
  font-size: 12px;
}

.jobs-chips {
  width: min(calc(100% - 32px), var(--jobs-max));
  margin: 22px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jobs-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--jobs-line);
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #33435a;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.jobs-chip:hover {
  border-color: var(--jobs-navy);
  color: var(--jobs-navy);
  background: #f8fafc;
}
.jobs-chip[aria-current="true"],
.jobs-chip.is-active {
  border-color: var(--jobs-navy);
  background: var(--jobs-navy);
  color: #fff;
}
.jobs-chip[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.mag-header__link--ghost {
  background: #fff;
  color: var(--jobs-navy);
  border-color: var(--jobs-line);
}
.mag-header__link--ghost:hover {
  color: var(--jobs-navy-dark);
  background: #f8fafc;
  border-color: var(--jobs-navy);
}

.jobs-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 10px;
  color: #657083;
  font-size: 12px;
}
.jobs-list-toolbar strong { color: #33435a; }

.jobs-row__company {
  margin: 0 0 6px;
  color: #526178;
  font-size: 13px;
  font-weight: 600;
}
.jobs-row__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.jobs-row__title {
  margin: 0;
  flex: 1 1 16rem;
  color: #102f55;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}
.jobs-row__salary {
  flex: 0 0 auto;
  color: #0b3d78;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .01em;
  white-space: nowrap;
}
.jobs-row__salary span {
  display: block;
  color: #657083;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.jobs-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.jobs-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #d9e2ef;
  border-radius: var(--jobs-radius);
  background: #f7faff;
  color: #33435a;
  font-size: 12px;
  font-weight: 700;
}
.jobs-row--loading {
  padding: 18px 12px;
  color: #657083;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  list-style: none;
}

.jobs-filters {
  width: min(calc(100% - 32px), var(--jobs-max));
  margin: 14px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-start;
}
.jobs-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: min(100%, 11rem);
  flex: 1 1 10rem;
}
.jobs-filter--multi,
.jobs-filter--choice {
  flex: 1 1 14rem;
}

/* —— Search BOX + popup ——
   The visible control for 都道府県 / 職種 / 資格 / 年収 is a BOX
   (.jobs-picker) that opens the shared popup (.jobs-modal) below, where a
   selection is kept with 保存する. This is the same interaction as the
   施工管理 registration form's .je-sk-picker / .je-sk-modal pair
   (/sekoukanri/registration-form/), so the two funnels feel like one site.

   The real filter state stays in the checkbox groups (.jobs-choice) and
   the salary <select>s that the pages ship: those are now state only, so
   they carry no styling of their own and are hidden here rather than by
   the script, which keeps the page from painting the pre-popup chip list
   first. sekoukanri-jobs-picker.js writes them back on 保存する and
   sekoukanri-jobs-list.js / sekoukanri-jobs-top.js keep reading them.
   Filtering has always needed JS, so a scripts-off visitor loses nothing
   that used to work. */
.jobs-choice,
.jobs-salary-range select {
  display: none;
}
.jobs-picker {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--jobs-line);
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #243447;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
.jobs-picker:hover { border-color: var(--jobs-navy); }
.jobs-picker:focus-visible {
  outline: 2px solid var(--jobs-navy);
  outline-offset: 1px;
}
.jobs-picker__summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #8a97a8;
  font-weight: 600;
}
.jobs-picker__summary.is-filled {
  color: #243447;
  font-weight: 700;
}
.jobs-picker__chevron {
  flex: 0 0 auto;
  color: #8a97a8;
  font-size: 12px;
}
/* Hub pages fix one condition (職種 on /jobs/kenchiku/, 都道府県 on
   /jobs/tokyo/): the BOX shows it, but there is nothing to open. */
.jobs-picker.is-locked {
  background: #f6f8fb;
  color: #5a6a7e;
  cursor: default;
}
.jobs-picker.is-locked .jobs-picker__chevron { display: none; }

.jobs-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 21, 43, .5);
}
.jobs-modal.is-visible { display: flex; }
/* Fixed head/actions with only the option list scrolling, so the
   保存する / キャンセル buttons never drop below the fold on a long list
   (都道府県 runs to 47 rows). */
.jobs-modal__box {
  display: flex;
  flex-direction: column;
  width: min(100%, 480px);
  max-height: calc(100dvh - 64px);
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(4, 16, 36, .35);
}
.jobs-modal__box:focus { outline: none; }
.jobs-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 10px;
}
.jobs-modal__title {
  margin: 0;
  color: #0b2347;
  font-size: 16px;
  font-weight: 800;
}
.jobs-modal__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid #d3dce9;
  border-radius: 50%;
  background: #fff;
  color: #07152b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.jobs-modal__note {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0 20px 10px;
  color: #657083;
  font-size: 12px;
  font-weight: 600;
}
.jobs-modal__subnote {
  flex: 0 0 auto;
  margin: -2px 0 10px;
  padding: 0 20px;
  color: #8a97a8;
  font-size: 11px;
  line-height: 1.4;
}
.jobs-modal__clear {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--jobs-navy);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.jobs-modal__clear[hidden] { display: none; }
.jobs-modal__options {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.jobs-modal__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5ebf4;
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #33435a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.jobs-modal__option input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  accent-color: var(--jobs-navy);
}
.jobs-modal__option.is-checked {
  border-color: var(--jobs-navy);
  background: #eaf1fb;
  color: var(--jobs-navy);
}
.jobs-modal__option-label { flex: 1 1 auto; }
.jobs-modal__option-count {
  flex: 0 0 auto;
  color: #8a97a8;
  font-size: 12px;
  font-weight: 700;
}
.jobs-modal__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid #e5ebf4;
  background: #fff;
}
.jobs-modal__btn {
  min-height: 48px;
  border: 0;
  border-radius: var(--jobs-radius);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.jobs-modal__btn--save {
  flex: 1 1 auto;
  background: linear-gradient(90deg, #d95f24, #e07838);
  color: #fff;
}
.jobs-modal__btn--save:hover { filter: brightness(1.04); }
.jobs-modal__btn--cancel {
  flex: 0 0 120px;
  border: 1px solid var(--jobs-line);
  background: #fff;
  color: #33435a;
}
.jobs-modal__btn--cancel:hover { border-color: var(--jobs-navy); }
body.jobs-modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .jobs-modal { padding: 12px; }
  .jobs-modal__box { max-height: calc(100dvh - 32px); }
  .jobs-modal__head { padding: 16px 16px 8px; }
  .jobs-modal__note { padding: 0 16px 10px; }
  .jobs-modal__subnote { padding: 0 16px; }
  .jobs-modal__options { padding: 0 16px 14px; }
  .jobs-modal__actions {
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }
  .jobs-modal__btn--cancel { flex: 0 0 104px; }
}

.jobs-filter--salary {
  flex: 1 1 14rem;
  min-width: min(100%, 14rem);
}
.jobs-filter__label {
  color: #657083;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.jobs-filter__hint {
  color: #8a97a8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}
.jobs-filter select {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--jobs-line);
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #33435a;
  font-size: 13px;
  font-weight: 600;
}
.jobs-filter select[multiple] {
  min-height: 8.5rem;
  padding: 6px 8px;
  line-height: 1.45;
}
.jobs-salary-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.jobs-salary-range select {
  flex: 1 1 0;
  min-width: 0;
}
.jobs-salary-range__sep {
  color: #657083;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.jobs-load-more-wrap {
  margin: 8px 0 28px;
  text-align: center;
}
.jobs-load-more-wrap[hidden] { display: none; }
.jobs-side-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs-side-links li + li { margin-top: 8px; }
.jobs-side-links a {
  font-weight: 700;
  text-decoration: none;
}

.jobs-badge-new {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid #c9d7ea;
  border-radius: var(--jobs-radius);
  background: #eef4fb;
  color: var(--jobs-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: 1px;
}

/* —— Jobs TOP (rental-search style) —— */
.jobs-top-hero {
  position: relative;
  border-bottom: 1px solid #d7e0ec;
  background:
    linear-gradient(115deg, rgba(8, 45, 89, .92), rgba(11, 61, 120, .78) 48%, rgba(217, 95, 36, .55)),
    radial-gradient(ellipse 70% 80% at 85% 20%, rgba(255, 255, 255, .18), transparent 55%),
    #0b3d78;
  color: #fff;
  animation: jobs-fade-in .5s ease-out both;
}
.jobs-top-hero__inner {
  width: min(calc(100% - 32px), var(--jobs-max));
  margin: 0 auto;
  padding: 40px 0 34px;
}
.jobs-top-hero__brand {
  margin: 0 0 10px;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.25;
}
.jobs-top-hero h1 {
  margin: 0 0 10px;
  max-width: 18em;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.45;
  color: rgba(255, 255, 255, .96);
}
.jobs-top-hero__lead {
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  line-height: 1.75;
}
@media (min-width: 640px) {
  .jobs-top-hero__lead { white-space: nowrap; }
}
.jobs-top-hero__count {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}
.jobs-top-hero__count strong {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}
.jobs-top-hero__count span {
  margin-left: 12px;
  opacity: .85;
}

.jobs-search-panel {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--jobs-radius);
  background: rgba(255, 255, 255, .97);
  color: var(--jobs-ink);
  box-shadow: 0 12px 28px rgba(4, 20, 48, .18);
  animation: jobs-fade-in .55s ease-out .08s both;
}
.jobs-search-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 1.35fr;
  gap: 12px;
  align-items: start;
}
.jobs-search-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
/* Field label only: a descendant selector here would also restyle the
   nested .jobs-filter__hint and the .jobs-picker__summary inside the BOX. */
.jobs-search-field__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5a6a7e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.jobs-search-field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #eef3f9;
  flex-shrink: 0;
}
.jobs-search-field__icon .jobs-icon-img {
  display: block;
}
.jobs-search-field select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--jobs-line);
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #243447;
  font-size: 14px;
  font-weight: 600;
}
.jobs-search-field select[multiple] {
  min-height: 9rem;
  padding: 8px 10px;
  line-height: 1.45;
}
.jobs-search-field--salary .jobs-salary-range {
  min-height: 44px;
}
.jobs-search-panel__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.jobs-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--jobs-radius);
  background: linear-gradient(90deg, #d95f24, #e07838);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.jobs-search-submit:hover { filter: brightness(1.04); }
.jobs-search-consult {
  color: var(--jobs-navy);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.jobs-search-consult:hover { text-decoration: underline; }

.jobs-top-main {
  background:
    linear-gradient(180deg, #f3f6fa, #fff 120px);
}
.jobs-top-introcards {
  width: min(calc(100% - 32px), var(--jobs-max));
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.jobs-intro-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid #dbe4ef;
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #243447;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(16, 47, 85, .05);
}
.jobs-intro-card:hover {
  border-color: var(--jobs-navy);
  transform: translateY(-1px);
}
.jobs-intro-card__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(145deg, #f4f8fd 0%, #eaf1fb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.jobs-intro-card__icon .jobs-icon-img {
  display: block;
}
.jobs-intro-card__title {
  grid-area: title;
  color: #102f55;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}
.jobs-intro-card__text {
  grid-area: text;
  color: #5a6a7e;
  font-size: 12px;
  line-height: 1.45;
}
.jobs-top-section {
  padding: 42px 0 8px;
}
.jobs-top-section--soft {
  background: #f7f9fc;
  border-top: 1px solid #e6edf5;
  border-bottom: 1px solid #e6edf5;
}
.jobs-top-section__inner {
  width: min(calc(100% - 32px), var(--jobs-max));
  margin: 0 auto;
}
.jobs-top-section h2 {
  margin: 0 0 8px;
  color: #13233a;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
}
.jobs-top-section__lead {
  margin: 0 0 18px;
  color: #5d6878;
  font-size: 14px;
  line-height: 1.7;
}
.jobs-top-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 8px;
}
.jobs-top-section__more {
  color: var(--jobs-navy);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.jobs-top-section__more:hover { text-decoration: underline; }
.jobs-top-section--results[hidden],
.jobs-top-section--results.is-collapsed[hidden] {
  display: none;
}

.jobs-area-grid {
  display: grid;
  gap: 22px;
}
.jobs-area-block h3 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #d9e3ef;
  color: #1e334f;
  font-size: 15px;
  font-weight: 900;
}
.jobs-area-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs-area-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid #d7e0ea;
  color: #243447;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.jobs-area-links a:hover {
  color: var(--jobs-navy);
  border-bottom-color: var(--jobs-orange);
}
.jobs-area-link__count {
  color: #7a8798;
  font-size: 12px;
  font-weight: 700;
}

.jobs-top-section--area .jobs-top-section__inner {
  width: min(calc(100% - 32px), 1280px);
}

/* Area picker: left map navigation + right prefecture list. */
.jobs-area-layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.jobs-japan-map {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  padding: 16px;
  border: 1px solid #d8e4f0;
  border-radius: var(--jobs-radius);
  background: #fff;
  box-shadow: 0 2px 8px rgba(22, 53, 96, .06);
  overflow: hidden;
}
.jobs-japan-map__visual {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border: 1px solid #d4e8d0;
  border-radius: var(--jobs-radius);
  background: linear-gradient(180deg, #f4faf2 0%, #e8f3e4 100%);
  overflow: hidden;
  padding: 4px;
}
.jobs-japan-map__svg {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  height: auto;
}
.jobs-japan-map__pref {
  cursor: pointer;
  stroke: #fff;
  stroke-width: 1.2;
  transition: fill .2s ease, opacity .2s ease, filter .2s ease;
}
.jobs-japan-map__pref--hokkaido { fill: #8ec484; }
.jobs-japan-map__pref--tohoku { fill: #7db873; }
.jobs-japan-map__pref--kanto { fill: #5fa855; }
.jobs-japan-map__pref--koshinetsu { fill: #84bf7a; }
.jobs-japan-map__pref--tokai { fill: #72b568; }
.jobs-japan-map__pref--kinki { fill: #6aad60; }
.jobs-japan-map__pref--chugoku { fill: #94c88a; }
.jobs-japan-map__pref--shikoku { fill: #a0cf96; }
.jobs-japan-map__pref--kyushu { fill: #7cb872; }
.jobs-japan-map__pref:hover,
.jobs-japan-map__pref:focus {
  filter: brightness(1.08);
}
.jobs-japan-map__pref:focus-visible {
  outline: 2px solid var(--jobs-navy);
  outline-offset: 1px;
}
.jobs-japan-map__visual.is-region-selected .jobs-japan-map__pref {
  opacity: .42;
}
.jobs-japan-map__visual.is-region-selected .jobs-japan-map__pref.is-active {
  opacity: 1;
  fill: #3d8b35;
  filter: brightness(1.06);
  stroke: #fff;
  stroke-width: 1.8;
}
.jobs-japan-map__pref title {
  pointer-events: none;
}
.jobs-japan-map__svg .boundary-line {
  display: none;
}
.jobs-japan-map__credit {
  flex-shrink: 0;
  margin: 6px 0 0;
  color: #9aa8b6;
  font-size: 10px;
  text-align: right;
}
.jobs-japan-map__legend {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.jobs-japan-map__legend a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d5dfeb;
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #243447;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.jobs-japan-map__legend a:hover {
  border-color: var(--jobs-navy);
  color: var(--jobs-navy);
}
.jobs-japan-map__legend a.is-active {
  border-color: #4a9a3f;
  background: #edf8ea;
  color: #2d6b28;
}
.jobs-japan-map__quick {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e4ebe4;
}
.jobs-japan-map__quick-title {
  margin: 0 0 8px;
  color: #213955;
  font-size: 12px;
  font-weight: 800;
}
.jobs-japan-map__quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs-japan-map__quick-links a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #d5dfeb;
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #243447;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.jobs-japan-map__quick-links a span {
  color: #7a8798;
  font-size: 11px;
  font-weight: 700;
}
.jobs-japan-map__quick-links a:hover {
  border-color: var(--jobs-navy);
  color: var(--jobs-navy);
}
.jobs-map {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 1px solid #d8e4f0;
  border-radius: var(--jobs-radius);
  background: #fff;
  box-shadow: 0 2px 8px rgba(22, 53, 96, .06);
  overflow: hidden;
}
.jobs-map__panel {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-start;
}
.jobs-map__area {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.jobs-map__area-name {
  flex: 0 0 6.5em;
  width: 6.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  margin: 0;
  padding: 4px 4px 4px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--jobs-navy);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}
.jobs-map.is-region-selected .jobs-map__area.is-active .jobs-map__area-name {
  background: linear-gradient(90deg, rgba(217, 95, 36, .14), rgba(217, 95, 36, .03));
}
.jobs-map__area-name span {
  color: #6f7d91;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.jobs-map.is-region-selected .jobs-map__area.is-active .jobs-map__area-name span {
  color: var(--jobs-navy);
  font-weight: 800;
}
.jobs-map__prefs {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
@media (min-width: 1100px) {
  .jobs-map__area--kanto .jobs-map__prefs,
  .jobs-map__area--kyushu .jobs-map__prefs {
    flex-wrap: nowrap;
  }
}
.jobs-map.is-region-selected .jobs-map__area:not(.is-active) .jobs-map__pref {
  opacity: .45;
}
.jobs-map.is-region-selected .jobs-map__area.is-active .jobs-map__pref {
  opacity: 1;
  border-color: #b8d4f0;
  background: #fff;
}
.jobs-map__pref {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 26px;
  padding: 2px 6px;
  border: 1px solid #dde5ef;
  border-radius: 4px;
  background: #fff;
  color: #243447;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  width: auto;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.jobs-map__pref-name {
  flex: 0 1 auto;
}
.jobs-map__pref:hover {
  border-color: var(--jobs-navy);
  background: #f2f7ff;
  color: var(--jobs-navy);
}
.jobs-map__pref-count {
  flex-shrink: 0;
  color: var(--jobs-navy);
  font-size: 11px;
  font-weight: 800;
  padding: 0 3px;
  border-radius: 999px;
  background: #eef3f9;
}

.jobs-explore-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.jobs-explore-grid--company {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px 10px;
}
.jobs-explore-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid #d7e0ea;
  border-radius: var(--jobs-radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.jobs-explore-link:hover {
  border-color: var(--jobs-navy);
  transform: translateY(-1px);
}
.jobs-explore-link__badges {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jobs-explore-link__label {
  grid-column: 1;
  color: #102f55;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}
.jobs-explore-link__tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3f9;
  color: #5a6a7e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.jobs-explore-link__tag--hot {
  background: #ffe8d9;
  color: #b5501e;
}
.jobs-explore-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #edf2f8;
}
.jobs-explore-link__icon .jobs-icon-img {
  display: block;
}
.jobs-explore-link--kenchiku .jobs-explore-link__icon { background: #e8f1ff; }
.jobs-explore-link--doboku .jobs-explore-link__icon { background: #eef7ea; }
.jobs-explore-link--denki .jobs-explore-link__icon { background: #fff4e8; }
.jobs-explore-link--denki-tsushin .jobs-explore-link__icon { background: #f2ecff; }
.jobs-explore-link--kankouji .jobs-explore-link__icon { background: #e9f6f8; }
.jobs-explore-link--company .jobs-explore-link__icon { background: #eef3f9; }
.jobs-explore-link__icon--thumb {
  width: 52px;
  height: 44px;
  padding: 0;
  background: transparent;
}
.jobs-explore-link__icon--thumb .jobs-icon-img--thumb {
  display: block;
  width: 52px;
  height: 44px;
  border-radius: 8px;
}
.jobs-explore-link__count {
  grid-column: 2;
  color: #657083;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.jobs-explore-link--company {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 6px;
  row-gap: 2px;
  padding: 7px 8px;
}
.jobs-explore-link--company .jobs-explore-link__badges {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  flex-shrink: 0;
}
.jobs-explore-link--company .jobs-explore-link__icon {
  width: 20px;
  height: 20px;
}
.jobs-explore-link--company .jobs-explore-link__icon .jobs-icon-img {
  width: 12px;
  height: 12px;
}
.jobs-explore-link--company .jobs-explore-link__label {
  grid-column: 2;
  grid-row: 1;
  flex: unset;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.jobs-explore-link--company .jobs-explore-link__count {
  grid-column: 2;
  grid-row: 2;
  flex-shrink: unset;
  margin-left: 0;
  padding-left: 0;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: #7a8798;
}

.jobs-qual-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs-qual-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border: 1px solid #d7e0ea;
  border-left: 3px solid #c5d3e3;
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #243447;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.jobs-qual-card:hover {
  border-color: var(--jobs-navy);
  border-left-color: var(--jobs-navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(16, 47, 85, .08);
}
.jobs-qual-card[href*="/kenchiku/"] { border-left-color: #2050a0; }
.jobs-qual-card[href*="/doboku/"] { border-left-color: #3f7a2b; }
.jobs-qual-card[href*="/denki-tsushin/"] { border-left-color: #5b3aa6; }
.jobs-qual-card[href*="/denki/"] { border-left-color: #b75a18; }
.jobs-qual-card[href*="/kankouji/"] { border-left-color: #1f7080; }
.jobs-qual-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef3f9;
}
.jobs-qual-card[href*="/kenchiku/"] .jobs-qual-card__icon { background: #e8f1ff; }
.jobs-qual-card[href*="/doboku/"] .jobs-qual-card__icon { background: #eef7ea; }
.jobs-qual-card[href*="/denki-tsushin/"] .jobs-qual-card__icon { background: #f2ecff; }
.jobs-qual-card[href*="/denki/"] .jobs-qual-card__icon { background: #fff4e8; }
.jobs-qual-card[href*="/kankouji/"] .jobs-qual-card__icon { background: #e9f6f8; }
.jobs-qual-card__icon .jobs-icon-img {
  display: block;
}
.jobs-qual-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.jobs-qual-card__grade {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 6px;
  background: #eaf1fb;
  color: var(--jobs-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
}
.jobs-qual-card[href*="/kenchiku/"] .jobs-qual-card__grade { background: #e8f1ff; color: #2050a0; }
.jobs-qual-card[href*="/doboku/"] .jobs-qual-card__grade { background: #eef7ea; color: #3f7a2b; }
.jobs-qual-card[href*="/denki-tsushin/"] .jobs-qual-card__grade { background: #f2ecff; color: #5b3aa6; }
.jobs-qual-card[href*="/denki/"] .jobs-qual-card__grade { background: #fff4e8; color: #b75a18; }
.jobs-qual-card[href*="/kankouji/"] .jobs-qual-card__grade { background: #e9f6f8; color: #1f7080; }
.jobs-qual-card__name {
  color: #102f55;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.jobs-qual-card__count {
  flex: 0 0 auto;
  margin-top: 0;
  color: #657083;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.jobs-theme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jobs-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px 0 8px;
  border: 1px solid #d5deea;
  border-radius: var(--jobs-radius);
  background: #fff;
  color: #33435a;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.jobs-theme-chip:hover {
  border-color: var(--jobs-navy);
  color: var(--jobs-navy);
}
.jobs-theme-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #eef3f9;
  flex-shrink: 0;
}
.jobs-theme-chip[data-search-salary] .jobs-theme-chip__icon { background: #fff4e8; }
.jobs-theme-chip[data-search-occ] .jobs-theme-chip__icon { background: #e8f1ff; }
.jobs-theme-chip__icon .jobs-icon-img {
  display: block;
}

.jobs-list--compact {
  border-top: 0;
}
.jobs-list--teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
}
.jobs-list--teaser-grid .jobs-row {
  border: 0;
  min-width: 0;
}
.jobs-list--teaser-grid .jobs-row:hover {
  background: transparent;
  box-shadow: none;
}
.jobs-row--teaser .jobs-row__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid #d7e0ea;
  border-radius: var(--jobs-radius);
  background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.jobs-row--teaser .jobs-row__link:hover {
  border-color: var(--jobs-navy);
  transform: translateY(-1px);
}
.jobs-row--teaser .jobs-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.jobs-row--teaser .jobs-row__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
}
.jobs-row--teaser .jobs-row__thumb .jobs-icon-img--thumb {
  display: block;
  width: 40px;
  height: 34px;
  border-radius: 8px;
}
.jobs-row--teaser[data-occupation="kenchiku"] .jobs-row__thumb { background: #e8f1ff; }
.jobs-row--teaser[data-occupation="doboku"] .jobs-row__thumb { background: #eef7ea; }
.jobs-row--teaser[data-occupation="denki"] .jobs-row__thumb { background: #fff4e8; }
.jobs-row--teaser[data-occupation="denki-tsushin"] .jobs-row__thumb { background: #f2ecff; }
.jobs-row--teaser[data-occupation="kankouji"] .jobs-row__thumb { background: #e9f6f8; }
.jobs-row--teaser .jobs-row__top {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 4px;
}
.jobs-row--teaser .jobs-row__title {
  flex: unset;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.jobs-row--teaser .jobs-row__salary {
  font-size: 12px;
  font-weight: 800;
  white-space: normal;
}
.jobs-row--teaser .jobs-row__salary span {
  display: inline;
  font-size: 10px;
  margin-right: 4px;
}
.jobs-row--teaser .jobs-row__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  margin-top: auto;
  color: #657083;
  font-size: 11px;
  line-height: 1.35;
}
.jobs-row--teaser .jobs-row__place,
.jobs-row--teaser .jobs-row__employ {
  font-weight: 600;
  color: #526178;
}
.jobs-row--teaser .jobs-row__sep {
  color: #c5d3e3;
  font-weight: 700;
}
.jobs-row--teaser .jobs-row__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs-row--teaser .jobs-tag {
  min-height: 18px;
  padding: 0 6px;
  font-size: 10px;
}
.jobs-row--teaser .jobs-badge-new {
  margin-left: 0;
  font-size: 10px;
  padding: 1px 6px;
}
.jobs-row--teaser .jobs-badge-new--accent {
  border-color: #f0c4a8;
  background: #ffe8d9;
  color: #b5501e;
}
.jobs-row--teaser .jobs-row__meta-line {
  display: none;
}
.jobs-consult--top {
  width: min(calc(100% - 32px), var(--jobs-max));
  margin: 28px auto 16px;
  border: 1px solid #d7e0ea;
  border-top: 2px solid var(--jobs-navy);
  border-radius: var(--jobs-radius);
}
.jobs-mag-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}
.jobs-mag-links a {
  color: var(--jobs-navy);
  font-weight: 800;
  text-decoration: none;
}
.jobs-mag-links a:hover { text-decoration: underline; }

.jobs-mag-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}
.jobs-mag-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d7e0ea;
  border-radius: var(--jobs-radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.jobs-mag-card:hover {
  border-color: var(--jobs-navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(16, 47, 85, .12);
}
.jobs-mag-card__thumb {
  display: block;
  aspect-ratio: 1200 / 630;
  background: #eef3f9;
}
.jobs-mag-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jobs-mag-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 16px;
}
.jobs-mag-card__label {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaf1fb;
  color: var(--jobs-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.jobs-mag-card__title {
  color: #102f55;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .jobs-explore-grid--company { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jobs-list--teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .jobs-top-introcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-search-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-explore-grid--company { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jobs-mag-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-area-layout {
    grid-template-columns: 1fr;
  }
  .jobs-japan-map,
  .jobs-map {
    height: auto;
    max-height: none;
  }
  .jobs-map__area {
    flex-direction: column;
    gap: 4px;
  }
  .jobs-map__area-name {
    flex: none;
    width: auto;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding-right: 0;
  }
}
@media (max-width: 560px) {
  .jobs-top-introcards { grid-template-columns: 1fr; }
  .jobs-top-hero__inner { padding: 28px 0 24px; }
  .jobs-search-panel { padding: 14px; }
  .jobs-search-panel__grid { grid-template-columns: 1fr; }
  .jobs-explore-grid { grid-template-columns: 1fr; }
  .jobs-explore-grid:not(.jobs-explore-grid--company) .jobs-explore-link {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 10px 12px;
  }
  .jobs-explore-grid:not(.jobs-explore-grid--company) .jobs-explore-link__badges {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0;
  }
  .jobs-explore-grid:not(.jobs-explore-grid--company) .jobs-explore-link__badges .jobs-explore-link__tag {
    display: none;
  }
  .jobs-explore-grid:not(.jobs-explore-grid--company) .jobs-explore-link__label {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    line-height: 1.35;
  }
  .jobs-explore-grid:not(.jobs-explore-grid--company) .jobs-explore-link__count {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }
  .jobs-explore-grid:not(.jobs-explore-grid--company) .jobs-explore-link__icon--thumb {
    width: 44px;
    height: 38px;
  }
  .jobs-explore-grid:not(.jobs-explore-grid--company) .jobs-explore-link__icon--thumb .jobs-icon-img--thumb {
    width: 44px;
    height: 38px;
  }
  .jobs-explore-grid--company { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-list--teaser-grid { grid-template-columns: 1fr; gap: 6px; }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 10px;
    row-gap: 2px;
    padding: 8px 10px;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__head {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    margin-bottom: 0;
    justify-content: flex-start;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__head .jobs-badge-new {
    display: none;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__top {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    display: block;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__title {
    margin: 0;
    font-size: 13px;
    -webkit-line-clamp: 1;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__top .jobs-row__salary {
    display: none;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__meta-line {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    margin: 0;
    color: #657083;
    font-size: 11px;
    line-height: 1.35;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__meta-line .jobs-row__salary-compact {
    color: #0b3d78;
    font-weight: 800;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__meta-line .jobs-badge-new {
    margin-left: auto;
    font-size: 9px;
    padding: 1px 5px;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__meta-line .jobs-tag--meta {
    min-height: 16px;
    padding: 0 5px;
    font-size: 9px;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__sub {
    display: none;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__thumb {
    width: 36px;
    height: 30px;
  }
  .jobs-list--teaser-grid .jobs-row--teaser .jobs-row__thumb .jobs-icon-img--thumb {
    width: 36px;
    height: 30px;
  }
  .jobs-qual-links { grid-template-columns: 1fr; }
  .jobs-search-submit { width: 100%; }
  .jobs-japan-map__legend { display: flex; }
  .jobs-japan-map__legend a {
    min-height: 38px;
    padding: 0 12px;
  }
  .jobs-map__panel {
    overflow: visible;
    padding: 12px;
    gap: 10px;
  }
  .jobs-map__pref {
    min-height: 36px;
    padding: 4px 10px;
    font-size: 13px;
  }
  .jobs-map__pref-count {
    font-size: 12px;
  }
  .jobs-mag-cards { grid-template-columns: 1fr; }
}

.jobs-company-fold {
  list-style: none;
  border-bottom: 1px solid var(--jobs-line);
  background: #fbfcfe;
}
.jobs-company-fold__btn {
  display: block;
  width: 100%;
  padding: 10px 12px 12px;
  border: 0;
  background: transparent;
  color: var(--jobs-navy);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.jobs-company-fold__btn:hover {
  color: var(--jobs-navy-dark);
  text-decoration: underline;
}
.jobs-company-fold__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs-company-fold__list.is-collapsed {
  display: none;
}
.jobs-company-fold__list .jobs-row__link {
  padding-left: 20px;
}

.jobs-empty {
  margin: 12px 0 28px;
  padding: 22px 20px;
  border: 1px dashed #c9d5e5;
  background: #f8fafc;
}
.jobs-empty[hidden] { display: none; }
.jobs-empty__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2a37;
}
.jobs-empty__lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #526178;
}
.jobs-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.jobs-empty__actions .jobs-btn {
  min-height: 44px;
  font-size: 14px;
}

.jobs-mid-cta {
  margin: 0 0 28px;
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  border: 1px solid #d9e2ef;
  border-left: 3px solid var(--jobs-orange);
  background: #fbfcfe;
}
.jobs-mid-cta p {
  margin: 0;
  flex: 1 1 14rem;
  color: #526178;
  font-size: 14px;
  line-height: 1.6;
}
.jobs-mid-cta .jobs-btn { min-height: 44px; font-size: 14px; }

.jobs-related-jobs {
  margin-top: 28px;
  padding-top: 8px;
  border-top: 1px solid var(--jobs-line);
}
.jobs-related-jobs h2 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #1e334f;
}
.jobs-related-jobs .jobs-list { border-top: 0; }
.jobs-related-jobs .jobs-row__link { padding-left: 0; }

.jobs-layout {
  width: min(calc(100% - 32px), var(--jobs-max));
  margin: 28px auto 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 48px;
  align-items: start;
}

.jobs-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--jobs-line);
}
.jobs-row {
  border-bottom: 1px solid var(--jobs-line);
  transition: background .18s ease, box-shadow .18s ease;
}
.jobs-row:hover {
  background: #fbfcfd;
  box-shadow: inset 3px 0 0 var(--jobs-orange);
}
.jobs-row__link {
  display: block;
  padding: 18px 8px 18px 12px;
  color: inherit;
  text-decoration: none;
}
.jobs-row__link:hover .jobs-row__title { color: var(--jobs-navy); }
.jobs-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--jobs-muted);
  font-size: 13px;
}
.jobs-row__meta li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.jobs-row__meta strong {
  color: #33435a;
  font-weight: 700;
}

.jobs-consult {
  margin-top: 36px;
  padding: 26px 24px;
  border-top: 2px solid var(--jobs-navy);
  background: linear-gradient(180deg, #fff, var(--jobs-warm));
  animation: jobs-fade-in .55s ease-out .08s both;
}
.jobs-consult__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 28px;
  align-items: center;
}
.jobs-consult__advisors {
  flex-shrink: 0;
}
.jobs-consult__team {
  padding: 14px 16px 12px;
  border: 1px solid #d7e4f2;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(11, 61, 120, .08), rgba(255, 255, 255, .92) 42%, rgba(255, 244, 232, .88)),
    #f7faff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 8px 24px rgba(11, 61, 120, .08);
}
.jobs-consult__team-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b3d78, #1456a8);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}
.jobs-consult__portraits {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jobs-consult__advisor {
  position: relative;
  margin: 0;
}
.jobs-consult__advisor + .jobs-consult__advisor {
  margin-left: -14px;
}
.jobs-consult__advisor--lead {
  z-index: 2;
}
.jobs-consult__frame {
  display: block;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0b3d78 0%, #2f6eb8 55%, #d95f24 100%);
  box-shadow: 0 5px 16px rgba(11, 61, 120, .18);
}
.jobs-consult__frame img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid #fff;
}
.jobs-consult--top .jobs-consult__frame img {
  width: 80px;
  height: 80px;
}
.jobs-consult__body {
  min-width: 0;
}
.jobs-consult__eyebrow {
  margin: 0 0 6px;
  color: var(--jobs-orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}
.jobs-consult h2 {
  margin: 0 0 8px;
  color: #112f55;
  font-size: clamp(20px, 2.8vw, 26px);
  line-height: 1.4;
}
.jobs-consult p {
  margin: 0 0 18px;
  max-width: 620px;
  color: #526178;
  font-size: 15px;
  line-height: 1.75;
}
.jobs-consult__button,
.jobs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--jobs-radius);
  background: var(--jobs-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.jobs-consult__button:hover,
.jobs-btn:hover {
  color: #fff;
  background: var(--jobs-navy-dark);
  transform: translateY(-1px);
}
.jobs-btn--secondary {
  background: #fff;
  color: var(--jobs-navy);
  border: 1px solid var(--jobs-navy);
}
.jobs-btn--secondary:hover {
  color: #fff;
  background: var(--jobs-navy);
}
.jobs-consult__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jobs-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.jobs-side-card {
  padding: 18px 0 0;
  border-top: 1px solid var(--jobs-line);
}
.jobs-side-card h2 {
  margin: 0 0 8px;
  color: #1e334f;
  font-size: 15px;
  font-weight: 800;
}
.jobs-side-card p {
  margin: 0 0 12px;
  color: var(--jobs-muted);
  font-size: 13px;
  line-height: 1.7;
}
.jobs-side-card a {
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.jobs-side-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs-side-card li + li { margin-top: 8px; }
.jobs-side-card li a {
  color: #0755a5;
  font-weight: 700;
  line-height: 1.45;
}
.jobs-side-cta {
  padding: 18px;
  background: var(--jobs-warm);
  border: 1px solid #e2dbcf;
  border-radius: var(--jobs-radius);
}
.jobs-side-cta h2 { margin-top: 0; }
.jobs-side-cta a.jobs-btn {
  width: 100%;
  min-height: 42px;
  font-size: 13px;
}

/* Detail */
.jobs-detail-keys {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--jobs-line);
}
.jobs-detail-keys li {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--jobs-line);
  font-size: 14px;
}
.jobs-detail-keys dt,
.jobs-detail-keys .k {
  color: #657083;
  font-weight: 700;
}
.jobs-detail-keys .v {
  color: var(--jobs-ink);
  font-weight: 600;
  line-height: 1.55;
}
.jobs-detail-line,
.jobs-detail-subhead,
.jobs-detail-spacer {
  display: block;
}
.jobs-detail-subhead {
  margin: 8px 0 4px;
  color: #26364d;
}
.jobs-detail-subhead:first-child { margin-top: 0; }
.jobs-detail-line { margin-bottom: 3px; }
.jobs-detail-line--item { padding-left: 0.2em; }
.jobs-detail-spacer { height: 8px; }
.jobs-detail-note {
  margin: 10px 0 0;
  color: #657083;
  font-size: 13px;
  line-height: 1.7;
}

.jobs-article {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.85;
  color: #26364d;
}
.jobs-article h2 {
  margin: 40px 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #aebac9;
  color: #102f55;
  font-size: clamp(20px, 2.6vw, 24px);
}
.jobs-article h2:first-child { margin-top: 0; }
.jobs-article p { margin: 0 0 14px; }
.jobs-article__subhead {
  margin: 26px 0 10px;
  color: #173a63;
  font-size: 18px;
  line-height: 1.5;
}
.jobs-article__label {
  margin: 18px 0 8px;
  color: #26364d;
  font-size: 16px;
  line-height: 1.5;
}
.jobs-article__item {
  margin-left: 0.5em !important;
  padding-left: 0.8em;
  border-left: 2px solid #d9e2ef;
}
.jobs-article ul {
  margin: 0 0 16px;
  padding-left: 1.2em;
}
.jobs-article li { margin: 0 0 6px; }

.jobs-related {
  margin-top: 36px;
  padding-top: 8px;
}
.jobs-related h2 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #1e334f;
}
.jobs-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs-related li + li { margin-top: 8px; }
.jobs-related a {
  font-weight: 700;
  text-decoration: none;
}

.jobs-source-notice {
  width: min(calc(100% - 32px), var(--jobs-max));
  margin: 0 auto 40px;
  padding: 16px 18px;
  border: 1px solid var(--jobs-line);
  border-left: 3px solid #526178;
  background: #f8fafc;
  color: #526178;
  font-size: 13px;
  line-height: 1.7;
}
.jobs-source-notice p { margin: 0; }
.jobs-source-notice p + p { margin-top: 4px; }

@keyframes jobs-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .jobs-hero,
  .jobs-consult,
  .jobs-row,
  .jobs-consult__button,
  .jobs-btn { animation: none; transition: none; }
}

@media (max-width: 900px) {
  .jobs-layout { grid-template-columns: 1fr; gap: 32px; }
  .jobs-detail-keys { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .jobs-hero__inner { padding: 28px 0 26px; }
  .jobs-layout { width: min(calc(100% - 24px), var(--jobs-max)); margin: 22px auto 56px; }
  .jobs-chips { width: min(calc(100% - 24px), var(--jobs-max)); }
  .jobs-row__link { padding: 16px 4px 16px 8px; }
  .jobs-row__title { font-size: 16px; }
  .jobs-consult__layout {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .jobs-consult__body { order: 2; }
  .jobs-consult__advisors {
    order: 1;
    justify-self: center;
  }
  .jobs-consult__actions { justify-content: center; }
  .jobs-consult { padding: 22px 16px; }
  .jobs-consult__button,
  .jobs-btn { width: 100%; }
  .jobs-detail-keys li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}