@charset "UTF-8";
/******************************************************
* CSS / Archive Works Page
* archive-works.css
*******************************************************/
.tab-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin-bottom: 50px;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
  gap: 10px;
}
.tab-menu .tab-item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  color: #333;
  border-bottom: 10px solid #e0e0e0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 500;
}
.tab-menu .tab-all {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 90px;
          flex: 0 0 90px;
  color: #325B3E;
  border-bottom: 10px solid #325B3E;
}
.tab-menu .tab-all.active {
  background-color: #325B3E;
  color: #fff;
}
.tab-menu .tab-all:hover {
  background-color: #325B3E;
  color: #fff;
}
.tab-menu .tab-factory {
  color: var(--factory-color);
  border-bottom: 10px solid var(--factory-color);
}
.tab-menu .tab-factory.active {
  background-color: var(--factory-color);
  color: #fff;
}
.tab-menu .tab-factory:hover {
  background-color: var(--factory-color);
  color: #fff;
}
.tab-menu .tab-shop {
  color: var(--shop-color);
  border-bottom: 10px solid var(--shop-color);
}
.tab-menu .tab-shop.active {
  background-color: var(--shop-color);
  color: #fff;
}
.tab-menu .tab-shop:hover {
  background-color: var(--shop-color);
  color: #fff;
}
.tab-menu .tab-office {
  color: var(--office-color);
  border-bottom: 10px solid var(--office-color);
}
.tab-menu .tab-office.active {
  background-color: var(--office-color);
  color: #fff;
}
.tab-menu .tab-office:hover {
  background-color: var(--office-color);
  color: #fff;
}
.tab-menu .tab-clinic {
  color: var(--clinic-color);
  border-bottom: 10px solid var(--clinic-color);
}
.tab-menu .tab-clinic.active {
  background-color: var(--clinic-color);
  color: #fff;
}
.tab-menu .tab-clinic:hover {
  background-color: var(--clinic-color);
  color: #fff;
}
.tab-menu .tab-solar {
  color: var(--solar-color);
  border-bottom: 10px solid var(--solar-color);
}
.tab-menu .tab-solar.active {
  background-color: var(--solar-color);
  color: #fff;
}
.tab-menu .tab-solar:hover {
  background-color: var(--solar-color);
  color: #fff;
}
.tab-menu .tab-chintai {
  color: var(--chintai-color);
  border-bottom: 10px solid var(--chintai-color);
}
.tab-menu .tab-chintai.active {
  background-color: var(--chintai-color);
  color: #fff;
}
.tab-menu .tab-chintai:hover {
  background-color: var(--chintai-color);
  color: #fff;
}

/* 施工事例グリッド */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.case-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
}

.case-item:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.case-item.hidden {
  display: none;
}

/* 画像エリア */
.case-image {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.case-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* カテゴリーラベル */
.category-label {
  position: absolute;
  top: 10px;
  right: 0;
  color: #fff;
  padding: 3px 15px;
  font-size: 14px;
  font-weight: 500;
}

.category-label-factory {
  background-color: var(--factory-color);
}

.category-label-shop {
  background-color: var(--shop-color);
}

.category-label-office {
  background-color: var(--office-color);
}

.category-label-clinic {
  background-color: var(--clinic-color);
}

.category-label-solar {
  background-color: var(--solar-color);
}

.category-label-solar {
  background-color: var(--solar-color);
}

.category-label-chintai {
  background-color: var(--chintai-color);
}

/* タイトル */
.case-title {
  padding: 20px;
  text-align: center;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .tab-menu {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .tab-item {
    -ms-flex-preferred-size: 33.333%;
        flex-basis: 33.333%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }
  .case-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}