/* ========================================
   WORKS一覧ページ (archive-works.css 微調整＋アニメ強化版)
======================================== */

/* 基本リセット */
ul.post_list_works, ul.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* メインコンテナ設定 */
.container.archive-works_works {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 30px 100px 30px;
}

@media (max-width: 600px) {
  .container.archive-works_works {
    padding: 20px;
  }
}

/* Flexレイアウト */
.side_on_works {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 30px;
}

.left_works {
  flex: 1;
  max-width: 75%;
}

.right_works {
  flex: 0 0 300px;
}

/* サイドメニュー罫線とhoverエフェクト */
.side_navi li {
  border-bottom: 1px dotted #bbb;
  padding-bottom: 12px;
  margin-bottom: 12px;
  font-size: 15px;
}

.side_navi li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease;
}

.side_navi li a:hover {
  color: #666;
}

@media (max-width: 1199px) {
  .left_works {
    max-width: 100%;
  }
  .right_works {
    flex: 0 0 250px;
    max-width: 250px;
  }
}

@media (max-width: 900px) {
  .side_on_works {
    flex-direction: column;
  }
  .left_works, .right_works {
    max-width: 100%;
    flex: 1;
  }
}

/* カードリスト */
ul.post_list_works {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}

@media (min-width: 1400px) {
  ul.post_list_works {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  ul.post_list_works {
    grid-template-columns: 1fr;
  }
}

/* カードデザイン */
.works_card_works {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  padding: 20px;
  transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 0.6s ease;
  height: 100%;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1.2s ease forwards;
}

.works_card_works:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 画像エリア */
.works_imgarea_works {
  width: 100%;
  aspect-ratio: 1.6;
  background: #f0f0f0;
  overflow: hidden;
  margin-bottom: 13px;
  border-radius: 8px;
}

.works_imgarea_works img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.works_imgarea_works:hover img {
  transform: scale(1.05);
}

/* タイトル */
.works_list_item_title_works {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 16px;
  line-height: 1.3;
  color: #222;
  letter-spacing: 0.03em;
  animation: fadeUp 1s ease forwards;
}

/* 企業名・カテゴリ・タグ */
.works_company_name_works {
  font-size: 16px;
  font-weight: 900;
  color: #911300;
}


.works_post_category_works,
.works_industry_tags_works {
  font-size: 13px;
  color: #555;
  margin: 0px 0;
}

.works_post_category_works a,
.works_industry_tags_works a {
  color: #555;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.works_post_category_works a:hover,
.works_industry_tags_works a:hover {
  color: #000;
}

/* ページタイトルデザイン強化 */
.works-category-title {
  font-size: 36px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 70px;
  border-bottom: 2px solid #000;
  padding-bottom: 14px;
  letter-spacing: 0.1em;
  animation: fadeUp 1s ease forwards;
}

/* ページネーションデザイン */
.pagination {
  text-align: center;
  margin-top: 60px;
}

.pagination a, .pagination .page-numbers.current {
  display: inline-block;
  margin: 0 6px;
  padding: 10px 18px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  transition: background 0.3s, color 0.3s;
}

.pagination .page-numbers.current {
  background: #000;
  color: #fff;
}

.pagination a:hover {
  background: #ddd;
  color: #000;
}

/* ソリューションタグ（バッジ化） */
.post-solution {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.solution-tag {
  display: inline-block;
  background: #f7f7f7;
  color: #555;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 50px;
}

/* QRリンクエリア */
.qr-links {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
}

.qr-image {
  width: 100px !important;
  height: auto;
  max-width: 100%;
}

/* 詳細ページの業界ラベルエリア */
.post-industry {
  margin-top: 20px;
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.industry-label {
  font-weight: bold;
  margin-right: 6px;
}

.industry-tag {
  display: inline-block;
  background: #f9f9f9; /* 少しだけ白っぽい */
  color: #555;
  padding: 5px 12px;
  border-radius: 9999px; /* バッジ感を最大化 */
  font-size: 13px;
  text-decoration: none;
  border: 1px solid #ddd;
  transition: background 0.3s, color 0.3s;
}

.industry-tag:hover {
  background: #e0e0e0;
  color: #333;
}

/* .post-thumbnail-solution への枠線・背景は無し */
.post-thumbnail-solution {
  padding: 1em 0 0 1em;
  background: none;
  border: none;
}