@charset "UTF-8";

/* ヘッダ画像 */
@media (min-width: 768px) {
.ai_seek_header_pc { width: 100%; }
.ai_seek_header_sp { display: none; }
}
@media (max-width: 767.98px) {
.ai_seek_header_pc { display: none; }
.ai_seek_header_sp { width: 100%; }
}

/* テーブルセルのスマホ表示 */
@media (min-width: 768px) {
.ai_seek_table {
  padding: .375rem 0;
  }
th.ai_seek_table {
  white-space: nowrap;
  }
  
  /* OKNGのflexbox */
.ai_seek_flex{
  display: flex; /* 中の要素を横並びにする */
  gap: 5px; /* アイテム間の隙間を指定 */
  flex-wrap: wrap; /* 画面が狭いときに折り返す */
 }
.ai_seek_item{
  flex: 1;
  min-width: 32%;
  max-width: 32%;
  text-align: center;
  box-sizing: border-box;
  }
}
@media (max-width: 767.98px) {
th.ai_seek_table { display: block; }
td.ai_seek_table { display: block; margin-bottom: .5rem; }
.ai_seek_empty { display: none; }

  /* OKNGのflexbox */
.ai_seek_flex{
  display: flex; /* 中の要素を横並びにする */
  gap: 5px; /* アイテム間の隙間を指定 */
  flex-wrap: wrap; /* 画面が狭いときに折り返す */
 }
.ai_seek_item{
  flex: 1;
  min-width: 48%;
  max-width: 48%;
  text-align: center;
  box-sizing: border-box;
  }}

/* ステータスバッジ全体のコンテナ */
.status-indicator {
  /* ドットがないため、`inline-flex`はテキストバッジのみに適用される */
  display: inline-flex;
  align-items: center; /* 垂直方向の中央揃え */
  margin-bottom: 0.5em; /* バッジとタイトルとの下方向の間隔 */
  white-space: nowrap; /* バッジ内のテキストが折り返さないように */
  /* タイトル上に配置されるため、左右のマージンは不要 */
  }

/* ドットに関する記述を完全に削除したため、::beforeは不要 */

/* テキスト部分 (::after疑似要素で表現) */
.status-indicator::after {
  content: ""; /* 各クラスで上書き */
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 0.25rem;
  font-size: 0.8em;
  color: white; /* 文字色は白で共通 */
  /* 背景色は各ステータスクラスで設定 */
  }

/* 各ステータスごとの背景色とテキスト内容 */

/* 新着案件 */
.status-indicator.status-new::after {
  content: "新着案件";
  background-color: #059BE1; /* 青色 */
  }

/* 募集中 */
.status-indicator.status-recruiting::after {
  content: "募集中";
  background-color: #00A968; /* 緑色 */
  }

/* 終了間近 */
.status-indicator.status-ending-soon::after {
  content: "終了間近";
  background-color: #DC3545; /* 赤色 */
  }

/* 募集終了 */
.status-indicator.status-closed::after {
  content: "募集終了";
  background-color: #6C757D; /* 灰色 */
  }