@charset "utf-8";

/*中途採用求人デザイン*/

.job_archive {
    width: calc(100% - 4vw);
    margin: 0 2vw;
}

/* ===== ベース ===== */
.job-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));/*未満でも４カラム維持*/
}

/* ===== PC（4列） ===== */
@media (min-width: 1024px) {
  .job-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));/*未満でも４カラム維持*/
  }
}

/* ===== タブレット（3列） ===== */
@media (min-width: 600px) and (max-width: 1023px) {
  .job-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== スマホ（2列） ===== */
@media (max-width: 599px) {
  .job-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:16px;
}
}

/* ===== カードデザイン ===== */
.job-card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  transition: all 0.3s ease;
}

.job-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.job-card img,
.job-card li {
    margin-bottom: clamp(5px, 2vw, 10px);
}


/* ホバー（PCだけ） */
@media (hover: hover) {
  .job-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transform: translateY(-6px);
  }
    
    .job-card a:hover {
  opacity: 0.9;
  background: linear-gradient(45deg, #0073aa, #00c6ff);
}
}

@media (max-width: 599px) {
  .job-card a {
    font-size: 16px;
    padding: 12px;
  }
}

.job-card h3 {
 font-size: 16px;
 margin-bottom: 6px;
}

.job-card p {
   font-size: 13px;
   margin-bottom: 8px;
}

/* ボタン */
.job-card a {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  background: #0073aa;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold; 
  text-align: center;
}

/* ボタン→外部サイトへ移動・追加テキストを小さめにする */
.job-card a .external-text {
    font-size: clamp(8.5px, 1.2vw, 12px);
}

.job-card a .external-text {
  display: block;   /* ブロックにすると改行される */
}

/* スマホでボタン大きく */
@media (max-width: 599px) {
  .job-card a {
    display: block;
    text-align: center;
    font-size: 16px;
    padding: 14px;
  }
}

/*中途採用募集ページ・職種タグ*/

.eigyou_job_nav, .seigyo_job_nav,.seizou_job_nav {
    font-size: clamp(10px, 2vw, 16px)!important;
    display: inline-block;
    padding: 0.8px 10px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    width: clamp(70px, 20vw, 150px)!important;
}

@media (max-width: 599px) {
  .job-tag {
    display: block;      /* スマホで縦並び */
    margin-bottom: 8px;  /* 下の余白 */
  }
    .job-tag:last-child {
    margin-bottom: 0;      /* 最後だけ余白なし */
  }
}

/*募集タイトル流し込み*/

.job-card h3 {
  font-size: clamp(13px, 1.8vw, 20px);
  font-weight: 700;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  min-height: 2.8em;/* 2行分の高さ確保（カードの高さ揃え） */
}
}

/*若葉マーク*/
/* タグ全体 */
.job-tag {
  display: inline-flex;        /* 横並び＋中央揃え */
  align-items: center;         /* 縦方向中央揃え */
  gap: 6px;                    /* アイコンと文字の間隔 */
  padding: 4px 10px;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 600;
  border-radius: 12px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

span.job-tag.beginner-tag {
display: inline-flex;           /* 中央揃えにするためflex */
align-items: center;            /* 縦方向中央揃え */
background: #66CC99;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
padding: 4px 8px;
font-size: clamp(10px, 1.5vw, 12px);  /* レスポンシブ文字サイズ */
}

span.job-tag.kinmuti-tag {
display: inline-flex;           /* 中央揃えにするためflex */
align-items: center;            /* 縦方向中央揃え */
/*justify-content: center;*/        /* 横方向中央揃え（必要なら） */
background:#ccc;
/*background: linear-gradient(135deg, #0066cc, #ffffff);  青のグラデーション */
font-weight: bold;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
color: #fff;
padding-left:5px;
padding: 4px 8px;               /* 上下・左右の余白 */
font-size: clamp(10px, 1.5vw, 12px);  /* レスポンシブ文字サイズ */
}


/*タグ2分割*/
.job-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /*隙間*/
}

@media (max-width: 599px) {
    .job-tags {
  grid-template-columns: repeat(1, 1fr);
        gap:0;
    }
    
    span.job-tag.beginner-tag,
    span.job-tag.kinmuti-tag {
        padding: 2px 8px;
    }
}

/* アイコン画像 */
.job-tag .icon {
  display: inline-block;  /* 安定表示 */
  vertical-align: middle; /* 文字中央に揃える */
  width: 18px;
  height: 18px;
  margin-right:3px;
}

.job-tag .icon {
    margin-bottom:0;
}

.job-tag beginner-tag {
    font-weight:bold;
}