@charset "UTF-8";

.page-header {
  background-image: url("../img/books/books-title.png");
}

.books {
  padding-top: 50px; /* page-headerとの距離 */
  padding-bottom: 50px; /* contactとの距離 */
  background-color: #fff;
}
.books .book-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}
.books .book-list img {
/*  box-shadow: 4px 4px 2px rgba(0,0,0,.4); */
}
.books .book-list .book-title {
  padding: 10px 3px 5px 3px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  background-color: #fff;
}
.books .book-list .book-detail {
  padding: 0 3px 5px 3px;
  font-size: 12px;
  line-height: 1.2em;
}
.books .book-list .book-description {
  padding: 5px;
  text-align: justify;
  text-justify: justify; 
  font-size: 14px;
  line-height: 1.2em;
  background-color: #e0ecff;
}


/********************************/
/************ MOBILE ************/
/********************************/

@media screen and (max-width: 767px) {

  .books {
    padding-top: 30px; /* page-headerとの距離 */
    padding-bottom: 30px; /* contactとの距離 */
  }
  .books .book-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
  }
  .books .book-list .book-title {
    padding: 10px 3px 5px 3px;
    font-size: 16px;
  }
  .books .book-list .book-detail {
    padding: 0 3px 5px 3px;
    font-size: 12px;
    line-height: 1.2em;
  }

  .books .book-list .book-description {
    padding: 3px;
    font-size: 12px;
    line-height: 1.2em;
  }
} /* END OF MOBILE */