@charset "utf-8";
.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列 */
  grid-template-rows: repeat(10, 1fr); /* 5行 */
  width: 800px;
  height: 800px;
  background-image: url('../imgs/back.png'); /* 背景画像を設定 */
  background-size: cover; /* 背景画像をボックス全体に表示 */
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.grid-item {
  width: 160px; /* 列の幅 */
  height: 80px; /* 行の高さ */
  background-color: rgba(255, 255, 255, 0.6); /* 背景色（透明度を調整可能） */
  position: relative;
}

main {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.grid-item a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.grid-item img {
  display: block;
  margin: auto;
}