/* ===================================================================
   BOOKS ページ（Figma 04.BOOKS_PC 141:11962 / 04.BOOKS_SP 424:19701）
=================================================================== */
.books-page {
  padding-bottom: 0; /* 104px（2997 − 3101 手前） */
}

/* --- ページ見出し + パンくず --- */
.books-page__header {
  position: relative;
  margin-top: -0.515rem; /* -8.24px（172.76 − header 181px） */
}

.books-page__head-en {
  width: 30.261875rem; /* 484.19px */
  max-width: 100%;
  height: 6.4225rem; /* 102.76px */
}

.books-page__head-en.sec-head__en {
  height: 6.4225rem;
}

.books-page__head-ja {
  bottom: -0.3125rem; /* 248 − (172.76 + 102.76) ≒ 書籍情報の縦位置 */
}

.books-page__breadcrumb {
  position: absolute;
  top: 6.8275rem; /* 109.24px（282 − 172.76） */
  right: var(--gutter-ratio);
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
}

.books-page__breadcrumb-link,
.books-page__breadcrumb-current {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem; /* 16px */
  line-height: 1;
}

.books-page__breadcrumb-link {
  color: var(--color-beige);
  text-decoration: none;
}

.books-page__breadcrumb-current {
  color: var(--color-gold);
}

/* 区切り矢印：ニュース（.breadcrumb__sep）と同じ共有アセットを mask で描画し、
   色は背景色（金色）で制御する。現在ページ（BOOKS）へつながる矢印のため、
   Figma SP（424:21090）どおり金色＝現在ページの文字色に合わせる。 */
.books-page__breadcrumb-sep {
  width: 7px;
  height: 9px;
  background-color: var(--color-gold);
  -webkit-mask: url('../images/common/breadcrumb_arrow.svg') no-repeat center / contain;
  mask: url('../images/common/breadcrumb_arrow.svg') no-repeat center / contain;
}

/* --- セクション見出し（NOVELS / COMICS） --- */
.books-section {
  width: var(--content-ratio);
  margin-inline: auto;
}

.books-section--novels {
  margin-top: 3.1875rem; /* 51px（349 − 298） */
}

.books-section--comics {
  margin-top: 6rem; /* 96px（1721 − 1625） */
}

.books-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem; /* 12px */
  text-align: center;
}

.books-section__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.8125rem; /* 45px */
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-main);
}

.books-section__divider {
  display: block;
  width: 34.5rem; /* 552px */
  max-width: 100%;
  height: auto;
}

.books-section__ja {
  margin: 0;
  font-family: var(--font-ja);
  font-weight: 600;
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  color: var(--color-text-main);
}

/* --- 書籍グリッド --- */
.books-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem; /* 24px */
  margin: 3rem 0 0; /* 48px（534 − 486） */
  padding: 0;
  list-style: none;
}

.books-grid__item {
  min-width: 0;
}

.books-card {
  margin: 0;
}

.books-card__link {
  display: block;
}

.books-card__cover {
  display: block;
  width: 100%;
  aspect-ratio: 220 / 315;
  object-fit: cover;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .books-card__link {
    transition: transform 0.3s ease, filter 0.3s ease;
  }

  .books-card__link:hover {
    transform: translateY(-0.5rem);
    filter: drop-shadow(0 0.625rem 0.75rem rgba(0, 0, 0, 0.24));
  }
}

.books-card__label {
  margin-top: 0.25rem; /* 4px（319 − 315） */
  font-family: var(--font-ja);
  font-weight: 600;
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  color: var(--color-text-main);
}

/* ===================================================================
   レスポンシブ（SP: ≤1023px）
=================================================================== */
@media (max-width: 1023px) {
  .books-page {
    padding-bottom: 0; /* 64px（4361 − 4425 手前） */
  }

  .books-page__header {
    margin-top: 0.25rem; /* 4px（97 − 93） */
  }

  .books-page__head-en.sec-head__en {
    width: 12.375rem; /* 198px */
    height: auto;
    aspect-ratio: 478 / 103;
  }

  .books-page__head-ja {
    left: 1.75rem; /* 28px（Figma 書籍情報 x=28） */
    bottom: -0.5rem;
    font-size: 1rem; /* 16px */
    font-weight: 700;
  }

  .books-page__breadcrumb {
    top: 4.0625rem; /* 65px（162 − 97） */
    right: 1.75rem; /* 28px（本文右端ガター） */
    gap: 0.375rem; /* 6px */
  }

  .books-page__breadcrumb-link,
  .books-page__breadcrumb-current {
    font-size: 0.75rem; /* 12px */
  }

  .books-page__breadcrumb-sep {
    width: 5px; /* ニュース（.breadcrumb__sep）の SP と同寸 */
    height: 6px;
  }

  .books-section {
    width: auto;
    padding-inline: 1.75rem; /* 28px（= (390 − 334) ÷ 2）。本文幅 334px に揃える */
  }

  .books-section--novels {
    margin-top: 2.9375rem; /* 47px（201 − 154） */
  }

  .books-section--comics {
    margin-top: 4rem; /* 64px（2313 − 2249） */
  }

  .books-section__en {
    font-size: 1.5rem; /* 24px */
  }

  .books-section__ja {
    font-size: 1rem; /* 16px */
  }

  .books-grid {
    grid-template-columns: repeat(2, minmax(0, 9.9375rem)); /* 最大 159px、狭い画面は縮小 */
    justify-content: center;
    column-gap: 1rem; /* 16px */
    row-gap: 1.5rem; /* 24px */
    margin-top: 1.5rem; /* 24px（309 − 285） */
  }

  .books-card__cover {
    aspect-ratio: 159 / 228;
  }

  .books-card__label {
    margin-top: 0.1875rem; /* 3px（231 − 228） */
    font-size: 1rem; /* 16px */
  }
}