body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20px; /* コンテナの左右にパディングを適用 */
  gap: 20px; /* カード間の余白 */
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center; /* テキストを中央揃えに */
  margin-top: 20px; /* 最初のカードとページ上端との間にマージンを設定 */
  margin-bottom: 20px; /* カード間の余白 */
  width: calc(33.333% - 40px); /* 画面幅に応じてカードの幅を調整 */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
  flex: 1; /* フレキシブルな幅を持たせる */
  margin: 10px; /* カードの余白 */
  min-width: calc((100% / 5) - 40px); /* 5枚表示の場合の最小幅（コンテナのパディングとギャップを考慮） */
  position: relative; /* 子要素の絶対位置を制御 */
}

.card img {
  width: 100px; /* 画像の幅を100pxに設定 */
  height: 100px; /* 画像の高さを100pxに設定 */
  object-fit: cover; /* 画像の縦横比を維持しつつ、指定された領域に収める */
  display: block; /* ブロックレベル要素として表示 */
  margin: 10px auto; /* 上下のマージンを設定 */
}

.element-type-container, .work-suitability-container {
  position: absolute;
  top: 10px;
  z-index: 1;
}

.element-type-container {
  left: 10px; /* 左端からの距離 */
}

.work-suitability-container {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  display: flex; /* Flexコンテナとして設定 */
  flex-direction: column; /* アイテムを縦に並べる */
}

.work-suitability-item {
  display: flex; /* Flexコンテナとして設定 */
  align-items: center; /* アイテムを中央揃えに */
  margin-bottom: 5px; /* アイテム間の余白 */
}

.work-suitability-item img {
  margin-right: 5px; /* 画像と数字の間の余白 */
}

.element-type-container img, .work-suitability-container img {
  width: 24px; /* 画像の幅を24pxに設定 */
  height: 24px; /* 画像の高さを24pxに設定 */
  object-fit: cover; /* 画像の縦横比を維持 */
}

/* レスポンシブデザイン */
@media (max-width: 1024px) {
  .card {
    min-width: calc((100% / 3) - 40px); /* 画面幅が1024px以下で3枚表示 */
  }
}

@media (max-width: 850px) {
  .card {
    min-width: calc((100% / 2) - 40px); /* 画面幅が850px以下で2枚表示 */
  }
}

@media (max-width: 480px) {
  .card {
    min-width: calc(100% - 40px); /* 画面幅が480px以下で1枚表示 */
  }
}

.sort-options {
  position: fixed;
  top: 10px; /* 画面の上からの距離 */
  right: 10px; /* 画面の右からの距離 */
  z-index: 1000; /* 他の要素より上に表示 */
  background-color: rgb(44, 175, 250);
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}