/* ===========================
   New book セクション（完全版CSS：ベース, tidy）
=========================== */

.newbooks {
  --nb-slider-w: 1310px; /* PC実寸（5枚並び） */
  --nb-arrow-gap: 60px;  /* 矢印をフレーム外に出す距離 */
  background: #0072ba;
  color: #fff;
  padding: 80px 0;
  position: relative;
  z-index: 10;
}
.newbooks .container {
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 20px; /* 1920px時：左右20pxの外余白 */
  position: relative;
}

/* 見出し */
.newbooks__title { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.newbooks__title-en { font-size: 20px; text-align: center; color: #fff; margin: 0; }
.newbooks__title-ja { font-size: 36px; font-weight: 500; text-align: center; color: #fff; margin: 0 0 2em; }

/* スライダーフレーム（矢印の基準） */
.newbooks__frame { width: var(--nb-slider-w); margin: 0 auto; position: relative; overflow: visible; }

/* Swiper 本体 */
.newbooks__slider { width: 100% !important; margin: 0 auto; position: relative; height: auto !important; }
.newbooks__slider.swiper,
.newbooks__slider .swiper-wrapper,
.newbooks__slider .swiper-slide { height: auto !important; }

/* 変形系は無効化（旧JSの影響を遮断） */
.newbooks .nb-lockh-wrap { height: auto !important; }
.newbooks [data-nb-lockh] { transform: none !important; will-change: auto !important; }
.newbooks .newbooks__slider { transform: none !important; }

/* ─ 白下地：リンクの外側（スライド側）で敷く。空スライドでは出さない ─ */
.newbooks .swiper-slide { position: relative; }
.newbooks .swiper-slide::before { content: none; } /* 初期は出さない */
.newbooks .swiper-slide:has(> a.book-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;      /* 常に真っ白 */
  border-radius: 12px;   /* .book-card と同じ角丸 */
  z-index: 0;            /* a(.book-card)より下 */
  pointer-events: none;
}

/* カード（a=リンク、div=空スライド） */
.book-card {
  width: 100%;
  min-width: 0;
  background: #fff;      /* a が透過しても下地で真っ白を維持 */
  border-radius: 12px;
  padding: 16px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
  text-decoration: none;
  outline: 1px solid transparent;
  position: relative;
}
.newbooks .swiper-slide > div.book-card { background: transparent; } /* 空スライドは白なし */

/* 書影 */
.book-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 230 / 328;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.book-card__image > img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 1 !important;
  transition: none !important;
}

/* タイトル（2行固定） */
.book-card__title {
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  text-align: left;
  line-height: 1.5;
  height: calc(1.5em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid #ccc;
  padding: 0;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* メタ */
.book-card__info { font-size: 14px; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.book-card__info dt { font-weight: normal; display: inline; margin-right: 6px; }
.book-card__info dd { display: inline; margin: 0; }
.book-card__info span {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: bold;
  color: #0072ba;
  border: 1px solid #0072ba;
  border-radius: 999px;
  padding: 2px 10px;
  display: inline-block;
}

/* 矢印（PC） */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 51px;
  margin-top: -25.5px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 1000;
  background-color: transparent;
  border: none;
  padding: 0;
  transition: opacity 0.3s ease;
  transform: translateY(-50%);
  pointer-events: auto;
}
.swiper-button-prev { left: calc(-1 * var(--nb-arrow-gap)); background-image: url("../images/common/arrow-prev.svg"); }
.swiper-button-next { right: calc(-1 * var(--nb-arrow-gap)); background-image: url("../images/common/arrow-next.svg"); }
.swiper-button-prev::after,
.swiper-button-next::after { content: none !important; }
.swiper-button-prev:hover,
.swiper-button-next:hover { opacity: 0.6; }

/* ドット（PC基準） */
.newbooks__dots { position: static !important; width: var(--nb-slider-w); margin: 14px auto 16px; text-align: center; }
.swiper-pagination-bullet { width: 10px !important; height: 10px !important; background: #fff !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: #999 !important; }

/* 一覧ボタン（PC） */
.newbooks__footer { text-align: center; margin-top: 0; }
.btn-more {
  display: inline-block;
  width: 240px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  color: #0072ba;
  font-size: 24px;
  font-weight: bold;
  border-radius: 999px;
  text-decoration: none;
  transition: width 0.3s ease; /* 幅アニメ（PC） */
  will-change: width;
}
.btn-more:hover { width: 280px; }

/* u-no-fade が全遷移を打ち消しても幅だけは残す（PC） */
.newbooks .btn-more.u-no-fade { transition: width 0.3s ease !important; }

/* 関連 */
.newbooks.newbooks--related {
  background: transparent;
  color: inherit;
  padding: 20px 0 10px;
}
.newbooks.newbooks--related .newbooks__title,
.newbooks.newbooks--related .newbooks__footer { display: none; }
.newbooks.newbooks--related .swiper-pagination-bullet { background-color: #ccc !important; }
.newbooks.newbooks--related .swiper-pagination-bullet-active { background-color: #0072ba !important; }
.newbooks.newbooks--related .swiper-button-prev { background-image: url("../images/common/arrow-prev-blue.svg"); }
.newbooks.newbooks--related .swiper-button-next { background-image: url("../images/common/arrow-next-blue.svg"); }

/* =========================
   SP（<=879px）：2枚表示・1枚≒100px（ベース）
========================= */
@media (max-width: 879px) {
  .newbooks__frame, .newbooks__dots { width: calc(100px * 2 + 15px); }

  .book-card { padding: 10px 8px; }
  .book-card__title { font-size: 12px; margin-top: 8px; margin-bottom: 4px; }
  .book-card__info { font-size: 12px; gap: 4px; }
  .book-card__info span { font-size: 11px; padding: 1px 8px; }

  .newbooks { padding: 50px 0; }
  .newbooks__title-ja { margin-bottom: 30px; font-size: 22px; }
  .newbooks__title-en { font-size: 12px; }

  .btn-more {
    width: auto;
    min-width: 184px;
    height: 48px;
    line-height: 48px;
    font-size: 18px;
    transition: none !important; /* SPはアニメ無効 */
  }
  .btn-more:hover { width: auto; }
}

/* すごく狭い端末では矢印を消す */
@media (max-width: 880px) {
  .newbooks .swiper-button-prev,
  .newbooks .swiper-button-next { display: none !important; }
}

/* 操作安定（ホバー演出は base.css に委譲） */
.newbooks a { -webkit-tap-highlight-color: transparent; }

/* ─ SP向けズーム枠（必要時） ─ */
@media (max-width: 879px) {
  .nb-pack-out { position: relative; width: 100%; margin: 0 auto; }
  .nb-pack-zoom {
    width: 367px; /* 176*2 + gap(15) */
    padding-left: 50px;
    padding-right: 50px; /* 総基準幅 467px */
    box-sizing: content-box;
    position: relative;
    left: 50%;
    transform: translateX(-50%) scale(var(--nb-sp-scale, 1));
    transform-origin: top center;
    will-change: transform;
  }
  .nb-pack-zoom .newbooks__frame,
  .nb-pack-zoom .newbooks__dots { width: 367px !important; margin-left: auto; margin-right: auto; }
  .newbooks .swiper-pagination-bullet { width: 8px !important; height: 8px !important; margin: 0 3px !important; }
  .newbooks .swiper-pagination-bullet-active { background: #bbb !important; }
  .newbooks__footer { margin-top: 32px !important; }
}

/* ─ PC専用：タイトル2行＋余白＋ボーダー ─ */
@media (min-width: 880px) {
  .book-card__title {
    font-size: 16px;
    padding-bottom: 8px; /* テキストと線の間の余白（見た目用） */
    border-bottom: none; /* 線は擬似要素で描く */
    position: relative;
    box-sizing: content-box; /* paddingを高さに含めない（2行固定は維持） */
  }
  .book-card__title::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(1.5em * 2); /* 2行ぶんの直下 */
    height: 8px;          /* ↑padding-bottomと同値 */
    background: #fff;     /* .book-card の背景色に合わせる */
    z-index: 1;
    pointer-events: none;
  }
  .book-card__title::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: #ccc;
    z-index: 2;
    pointer-events: none;
  }
}

/* ─ SP：タイトル2行＋余白＋ボーダー ─ */
@media (max-width: 879px) {
  .newbooks { --title-gap: 6px; --title-gap-after: 4px; }
  .book-card__title {
    font-size: 12px;
    padding-bottom: var(--title-gap);
    margin-bottom: var(--title-gap-after);
    border-bottom: none;
    position: relative;
    box-sizing: content-box;
  }
  .book-card__title::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(1.5em * 2);
    height: var(--title-gap);
    background: #fff;
    z-index: 1;
    pointer-events: none;
  }
  .book-card__title::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: #ccc;
    z-index: 2;
    pointer-events: none;
  }
}

/* page-newbook.css 相当 */
.newbook-page .container { max-width: 1460px; padding: 0 20px; margin: 0 auto; }
.newbook-page .newbook-center { width: 100%; max-width: 930px; margin-left: auto; margin-right: auto; }
.newbook-page .info-eyebrow, .newbook-page .info-title { text-align: center; }
.newbook-page .result-card { width: 930px; }
.newbook-page header { margin: 40px 0 70px; }
.newbook-page .info-eyebrow { color: #0072ba; font-size: 20px; margin-bottom: 10px; }
.newbook-page .info-title { font-weight: 500; font-size: 36px; }
@media (max-width: 879px) {
  .newbook-page .newbook-center { max-width: none; }
  .newbook-page .result-card { width: 100%; }
  .newbook-page header { margin: 48px 0; }
  .newbook-page .info-eyebrow { font-size: 12px; margin-bottom: 8px; }
  .newbook-page .info-title { font-size: 22px; }
}

/* 「一覧を見る」だけはベースの hover 透過を無効化 */
.newbooks a.btn-more.u-no-fade:hover,
.newbooks a.btn-more.u-no-fade:focus,
.newbooks a.btn-more.u-no-fade:active { opacity: 1 !important; }
