/* ==========================================================================
   TOPページ WORKS（プレハブ（軽量鉄骨）の施工事例）
   出典: サイトデザイン参照画像（WORKS）
   タイトル周りは1040px中央寄せ、カードカルーセルは別ラップでブラウザ幅にフィット。
   ========================================================================== */

.works {
  background: #D0D0C8;
  padding: var(--section-space-top) 0 34px;
}

.works__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
.works__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.works__head-right { display: flex; align-items: center; gap: 24px; }
.works__view-all { color: var(--color-text-on-light); }
.works__view-all:hover { color: var(--color-green-dark); }

.works__nav { display: none; }
.works__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-on-light);
  transition: color 0.15s ease, transform 0.15s ease;
}
.works__arrow:hover { color: var(--color-green-dark); }
.works__arrow--prev:hover { transform: translateX(-2px); }
.works__arrow--next:hover { transform: translateX(2px); }

.works__title {
  margin: var(--section-title-gap) 0 0;
  font-size: var(--section-title-size);
  font-weight: 800;
  line-height: var(--section-title-line-height);
  color: var(--color-text-on-light);
}

/* ---- カルーセル（別ラップ、左端はタイトルに揃え、右はフルブリードで覗かせる） ---- */
.works__carousel-wrap {
  margin-top: 103px;
  overflow: hidden;
  padding-left: max(24px, calc((100vw - var(--container-max)) / 2 + 24px));
}
.works-swiper { overflow: visible; }
.works-swiper .swiper-wrapper { align-items: stretch; }
.works-slide { height: auto; }
/* スライド幅はJS側でslidesPerView（数値・ブレークポイント指定）に応じてSwiperが自動設定する。
   width:'auto'は使わない（loop:trueとの組み合わせでSwiperのループ境界計算が不安定になるため）。 */

.work-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  color: inherit;
  box-shadow: 0 8px 22px rgba(20, 28, 24, .05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.work-card:hover { transform: none; box-shadow: 0 14px 30px rgba(20, 28, 24, .12); }

.work-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.work-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.work-card:hover .work-card__img { transform: scale(1.025); }
.work-card__date {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background: #3f3f3f;
  color: #fff;
  min-width: 132px;
  padding: 7px 18px;
  border-radius: 0 0 20px 0;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
}

.work-card__body {
  flex: 1;
  min-height: 230px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
}
.work-card__title {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-text-on-light);
}
.work-card__title strong { font-size: 18px; font-weight: 800; }
.work-card__divider { margin: 0 6px; color: #b9beb8; }
.work-card__size { margin: 0 0 16px; font-size: 14px; color: #2b2b2b; }

.work-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.tag-chip {
  padding: 4px 8px;
  border-radius: 6px;
  background: #E2E2E2;
  color: #808080;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
}

.work-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--color-text-on-light);
  text-decoration: none;
}
.work-card:hover .work-card__link { color: var(--color-green-dark); }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 640px) {
  .works { padding: var(--section-space-top) 0 0; }
  .works__carousel-wrap { margin-top: 32px; padding-inline: 0; }
  .works-swiper { width: calc(100% - 40px); margin-inline: auto; }
  .work-card__body { min-height: 0; }
}