/* =========================
  グリッド一覧
========================= */

.w-bg {
  position: relative;
  inset: 0;
  margin: 44px 38px 16px;
  width: auto;
}

.w-gallery {
  position: relative;
  overflow: auto;
}


/* =========================
  ホバーした時
========================= */

/* --- 1. 画像を囲む枠 --- */
.works-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* --- 2. 画像本体 --- */
.works-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 3. ホバー時に被さる【黒い透明】の層 --- */
.works-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* rgba(0,0,0)が真っ黒、最後の0.6が透明度（60%の濃さ）です */
  background-color: rgba(51, 51, 51, 0.4);

  /* 中央揃えのおまじない */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 最初は透明（見えない状態）にしておく */
  opacity: 0;
  /* 0.3秒かけてフワッと現れるアニメーション */
  transition: opacity 0.3s ease;
}

/* --- 4. 中央に表示されるテキスト --- */
.works-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 10px 20px;
}

/* =========================================
   ホバーした時の動き
========================================= */

/* マウスが乗ったら黒い透明の層（と文字）をフワッと表示 */
.works-item:hover .works-overlay {
  opacity: 1;
}