/* =====================================================
 * MitsuPita Job – Archive HERO
 * ===================================================== */

/* HERO 全体 */
.mpj-archive-hero {
  padding: 48px 16px 32px;
  background: #ffffff;
}

/* 中央寄せ */
.mpj-archive-hero__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

/* ロゴ */
.mpj-archive-hero__logo {
  margin-bottom: 24px;
}

.mpj-archive-hero__logo img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 340px; /* ← 300〜360でここだけ調整 */
  height: auto;
}

/* キャッチコピー */
.mpj-archive-hero__catch {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* 説明文 */
.mpj-archive-hero__desc {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  max-width: 720px;
  margin: 0 auto;
}

/* スマホ最適化 */
@media (max-width: 480px) {
  .mpj-archive-hero {
    padding: 32px 12px 24px;
  }

  .mpj-archive-hero__logo img {
    max-width: 300px;
  }

  .mpj-archive-hero__catch {
    font-size: 18px;
  }
}

/* ===== HERO 微調整 ===== */

/* 管理バー直下の圧迫感を軽減 */
.mpj-archive-hero {
  padding-top: 64px;   /* ← 48 → 64 */
  padding-bottom: 40px;
}

/* ロゴを少し引き締める */
.mpj-archive-hero__logo img {
  max-width: 300px; /* ← 340 → 300 */
}

/* HEROと一覧の切り替えを明確に */
.mpj-archive-hero {
  border-bottom: 1px solid #eee;
}

/* =========================================
 * 再検索フォーム
 * ========================================= */

.mpj-refine-search {
  max-width: 960px;
  margin: 32px auto 48px;
  padding: 20px;
  background: #f7f9f9;
  border-radius: 12px;
}

.mpj-refine-search__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.mpj-refine-search select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.mpj-refine-search__actions {
  margin-top: 16px;
  text-align: center;
}

.mpj-refine-search__submit {
  background: #2bb6a8;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
}

.mpj-refine-search__reset {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #666;
  text-decoration: underline;
}

/* SP */
@media (max-width: 640px) {
  .mpj-refine-search__fields {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
 * 求人一覧：3カラム（レスポンシブ）
 * ===================================================== */
.mpj-job-list {
  display: grid;
  gap: 16px;
}

/* PC：3カラム */
@media (min-width: 1024px) {
  .mpj-job-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* タブレット：2カラム */
@media (min-width: 600px) and (max-width: 1023px) {
  .mpj-job-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ：1カラム */
@media (max-width: 599px) {
  .mpj-job-list {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
 * Job Card – カード型UI（一覧・検索共通）
 * ===================================================== */

.mpj-job-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}

.mpj-job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

.mpj-job-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 18px 16px;
  color: inherit;
  text-decoration: none;
}

/* =========================
 * HEADER（NEW / タグ）
 * ========================= */
.mpj-job-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.mpj-badge-new {
  background: #ff6b6b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
}

.mpj-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mpj-tag {
  background: #eef7f6;
  color: #1aa7a1;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* =========================
 * TITLE / COMPANY
 * ========================= */
.mpj-job-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 6px 0 4px;
}

.mpj-job-card__company {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

/* =========================
 * META（給与 / 勤務地 / 雇用形態）
 * ========================= */
.mpj-job-card__meta {
  list-style: none;
  padding: 0;
  margin: auto 0 0; /* ← 下に寄せて高さ揃え */
  font-size: 13px;
  color: #333;
}

.mpj-job-card__meta li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.mpj-job-card__meta .salary {
  font-weight: 700;
  color: #1aa7a1;
}

/* =========================
 * 求人カード：年収表示強調
 * ========================= */
.mpj-job-card__meta .salary {
  font-weight: 600;
  color: #1fa59a; /* ブランドカラーに合わせてOK */
}

/* 給与未設定時（安心表示） */
.mpj-job-card__meta .salary.is-muted {
  font-weight: 400;
  color: #888;
  font-size: 0.9em;
}