/* --- ここから：教科書グリッド表示用CSS（枠線なし版） --- */

/* グリッドレイアウト本体 */
.book-grid {
  display: grid;
  /* 画面幅に合わせて自動折り返し（最小幅220px） */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 40px 20px; /* 上下の間隔を広め(40px)にして、スッキリ見せる */
  margin-top: 20px;
  margin-bottom: 50px;
}

/* 個別のアイテム（枠線と背景色を削除） */
.book-card {
  background: transparent; /* 背景透明 */
  border: none;            /* 枠線なし */
  border-radius: 0;        /* 角丸なし */
  padding: 0;              /* 余計な余白なし */
  text-align: center;
  margin: 0;
  box-shadow: none;        /* 箱の影も削除 */
}

/* 画像の表示領域（高さは維持） */
.book-img-wrapper {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px; /* タイトルとの間隔を少し広げる */
}

/* 画像本体の調整 */
.book-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  /* 本の立体感を出すための影だけ残す */
  filter: drop-shadow(5px 10px 15px rgba(0,0,0,0.15));
}

/* 書籍タイトルの文字 */
.book-card figcaption {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
}

/* --- ここまで --- */