img {
  width: 100%;
  height: auto;
  margin: 0;
}

.item {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.web1 {
  position: relative;
}

.web1 .caption {
    font-size: 14px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.web1 .mask {
  width: 100%;
  height: 99.3%;
  position: absolute;
  top: 0; /* マスクが画像の上端から表示されるように調整 */
  left: 0; /* マスクが画像の左端から表示されるように調整 */
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 0.5s ease;
  opacity: 0;
  transform: none; /* 位置のずれをなくすためにtransformを解除 */
}

.web1:hover .mask {
  opacity: 1;
}

@media screen and (max-width: 800px) {
  .container, .item {
    width: 100%;
  }

  .item {
    display: block;
  }

  .caption p {
    font-size: 1rem;
    text-shadow: 1px 2px 3px #808080;
  }

  .bigimg img {
    margin: 0 auto;
  } 

  /* スマホ表示時にマスクを中央に限定して常に表示 */
  .web1 .mask {
    width: 100%;
    height: 40%; /* マスクの高さを40%に制限 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央に配置 */
    opacity: 1; /* 常に表示 */
  }
 /* スマホ表示時に画像コンテナの上下に余白を追加 */
  .web1 {
    margin-top: 50px; /* 上に20pxの余白 */
    margin-bottom: 50px; /* 下に20pxの余白 */
    width: 80%; /* 横幅を8割に設定 */
    margin-left: auto; /* 左右中央揃え */
    margin-right: auto; /* 左右中央揃え */
  }
}