/* =====================================================
   Search results — 完全版（BP=880 / 1420 + 20px x2 = 1460基準）
   ・PC(>=880px): 左=書影 / 右=上(情報)＋下(価格+ボタン)
   ・SP(<=879px): 上段 1fr|1fr（左=書影 / 右=情報塊）、下段=価格/ボタン全幅
   ※ ボタンの「見た目（色/hover/transition）」は book-actions.css に一元化
===================================================== */

/* ページ余白（上下のみ） */
.search-page {
  padding: 60px 0;
}

/* 見出し */
.search-head__en {
  text-align: center;
  font-size: 20px;
  color: #0072ba;
  margin: 0 0 8px;
}
.search-head__ja {
  text-align: center;
  font-size: 36px;
  font-weight: 500;
  margin: 0 0 20px;
}

/* === コンテナ（1420 + 20x2 = 1460） === */
.search__container {
  max-width: 1460px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 20px 0;
  box-sizing: border-box;
  min-width: 0;
}

/* レイアウト本体 */
.search-page .search-layout {
  max-width: 1460px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.search-page .search-layout > *,
.search-page .search-sidebar,
.search-page .search-content {
  min-width: 0;
}

/* SP: 1カラム */
@media (max-width: 879px) {
  .search-page .search-layout {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

/* ===== 左サイドバー（既存トーン維持） ===== */
.search-page .search-sidebar .book-search__form {
  margin-top: 0;
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 10px;
  padding: 20px;
}
@media (min-width: 880px) {
  .search-page .search-sidebar .book-search__form {
    margin-top: 126px;
  }
}
.search-page .search-sidebar .book-search__group {
  flex-direction: column;
  align-items: flex-start;
}
.search-page .search-sidebar .book-search__label {
  width: auto;
  padding: 0 0 8px;
}
.search-page .search-sidebar .book-search__options,
.search-page .search-sidebar .book-search__form-inline {
  width: 100%;
}
.search-page .search-sidebar {
  position: static;
  top: auto;
}
@media (min-width: 880px) {
  .search-page .book-search__group {
    gap: 10px;
  }
}

/* ラベル・チップ（検索フォーム） */
@media (min-width: 880px) {
  .search-page .book-search__heading-en {
    font-size: 20px;
    color: #2a7ccc;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
    text-align: center;
  }
  .search-page .book-search__heading-ja {
    font-size: 36px;
    font-weight: 500;
    margin: 0 0 2em;
    text-align: center;
  }
  .search-page .book-search__label {
    font-size: 24px;
  }
  .search-page .chip span,
  .search-page .chip-btn {
    border-color: #999;
    border-width: 1px;
    color: #999;
    font-weight: 600;
  }
  @media (any-hover: hover) and (pointer: fine) {
    .search-page .chip:hover span,
    .search-page .chip-btn:hover {
      border-color: #0072ba;
      color: #0072ba;
    }
  }
  .search-page .chip:has(input:checked) span,
  .search-page .chip input:checked + span,
  .search-page .chip-btn[aria-pressed="true"] {
    border-color: #0072ba;
    color: #0072ba;
    border-width: 1px;
    font-weight: 600;
  }
}
@media (max-width: 879px) {
  .search-page .book-search__heading-en {
    font-size: 12px;
    color: #0072ba;
    margin-bottom: 5px;
    text-align: center;
  }
  .search-page .book-search__heading-ja {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 40px;
    text-align: center;
  }
  .search-page .book-search__label {
    font-size: 16px;
  }
  .search-page .chip span,
  .search-page .chip-btn {
    padding: 8px 12px;
    font-size: 12px;
    border-color: #999;
    border-width: 1px;
    color: #999;
    font-weight: 600;
  }
}
/* タッチ：hover/press 抑制 */
@media (hover: none), (pointer: coarse) {
  .search-page .chip:hover span,
  .search-page .chip-btn:hover {
    box-shadow: none;
    color: inherit;
    border-color: inherit;
    background: inherit;
  }
  .search-page .chip:active span,
  .search-page .chip-btn:active {
    transform: none;
  }
}

/* ===== 件数バー ===== */
.search-meta,
.search-meta-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
@media (min-width: 880px) {
  .search-meta,
  .search-meta-bar {
    margin: 40px 0;
  }
}
.search-meta__left,
.search-meta-bar__left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.search-meta__left p,
.search-meta-bar__left p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.search-meta__left strong,
.search-meta-bar__left strong {
  font-size: 26px;
}
.search-meta__controls,
.search-meta-bar__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/* s-meta-pill */
.s-meta-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 264px;
  max-width: 100%;
  height: 38px;
  border: 1px solid #f4f4f4;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(to right, #f4f4f4 50%, #fff 50%);
}
.s-meta-pill::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.s-meta-pill__icon {
  width: 21px;
  height: 21px;
  display: block;
  margin-left: 8px;
  z-index: 1;
}
.s-meta-pill__label {
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
  text-align: center;
  flex: 0 0 calc(50% - 21px - 16px);
  font-size: 16px;
  padding: 0 8px;
}
.s-meta-pill select {
  flex: 0 0 50%;
  height: 38px;
  font-size: 16px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid #f4f4f4;
  background: transparent;
  text-align: center;
  text-align-last: center;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.s-meta-pill select:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px #0072ba;
  background: #fff;
}

/* s-meta-pill（SP） */
@media (max-width: 879px) {
  .s-meta-pill {
    width: 168px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #f4f4f4;
    background: #fff;
  }
  .s-meta-pill::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: calc(53% + 1px);
    background: #f4f4f4;
    z-index: 0;
  }
  .s-meta-pill__icon {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    margin-left: 6px;
  }
  .s-meta-pill__label {
    position: relative;
    z-index: 1;
    font-size: 10px;
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  .s-meta-pill select {
    position: relative;
    z-index: 1;
    flex: 0 0 84px;
    width: 84px;
    height: 26px;
    font-size: 10px;
    padding: 0 14px 0 20px;
    border: 0;
    border-left: 1px solid #f4f4f4;
  }
}

/* ===== 検索結果リスト ===== */
.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-results-list > li + li {
  margin-top: 50px;
}

/* ===== カード ===== */
.result-card {
  --label-w: 96px;
  border: 2px solid #0072ba;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

/* ヘッダー */
.result-card__head {
  background: #0072ba;
  color: #fff;
  padding: 14px 16px 10px;
}
.result-card__title {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.4;
}
.result-card__title a {
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.result-card__author {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  opacity: 0.95;
  overflow-wrap: anywhere;
}

/* 本文 */
.result-card__main {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 20px;
  padding: 16px;
  box-sizing: border-box;
  align-items: stretch;
}
.result-card__main > * {
  min-width: 0;
}

/* 要約（全幅＆下線） */
.result-card__summary {
  grid-column: 1 / -1;
  color: #0072ba;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  margin: 0 -16px 16px;
  padding: 0 16px 10px;
  border-bottom: 2px solid #d9d9d9;
  overflow-wrap: anywhere;
}

/* 左（書影） */
.result-card__left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.result-card__series-top {
  font-size: 13px;
  color: #0072ba;
  text-decoration: underline;
  display: inline-block;
}
.result-card__thumb {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.result-card__thumb img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 0;
}
@media (min-width: 880px) {
  .result-card__thumb img {
    width: 338px;
    height: auto;
  }
}

/* 右（情報） */
.result-card__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.result-card__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
@media (min-width: 880px) {
  .result-card__row {
    gap: 130px;
  }
}
.result-card__row dt {
  width: var(--label-w);
  flex: 0 0 var(--label-w);
  color: #374151;
  text-align: left;
  padding-top: 6px;
  font-size: 18px;
  font-weight: 500;
}
.result-card__row dd {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 28px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 16px;
  font-weight: 400;
}

/* タグ（カード内は表示用＝クリック不可風） */
.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-right: 8px;
}
.result-card .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #0072ba;
  color: #0072ba;
  background: #fff;
  padding: 5px 10px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  cursor: default;
}

/* 価格（PC基準） */
.result-card__row--price {
  border-top: 2px solid #d9d9d9;
  padding-top: 50px;
  margin-top: 50px;
  align-items: flex-end;
  min-height: 230px;
}
.result-card__row--price dd {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
}
.result-card__price-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.result-card__price-yen {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* ===== ボタン（見た目は book-actions.css に委譲。ここでは「レイアウトのみ」） ===== */
.result-card__actions {
  display: grid;
  gap: 8px;
}

/* PC：2スロット固定幅（slots レイアウト維持。サイズだけ保証） */
@media (min-width: 880px) {
  .search-page .result-card__actions {
    width: 100%;
    margin-top: 6px;
  }
  .search-page .result-card__actions > .book-actions.book-actions--double.book-actions--slots {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    column-gap: 10px;
    width: 100%;
  }
  .book-actions--slots .book-actions__slot {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-width: 0;
  }
  .book-actions--slots .book-actions__slot:empty {
    min-height: 60px;
  }
  .book-actions--slots .book-actions__slot--detail {
    order: 1;
  }
  .book-actions--slots .book-actions__slot--cart {
    order: 2;
  }
  .search-page .result-card__actions > .book-actions.book-actions--double.book-actions--slots form {
    display: block !important;
    width: 100%;
  }

  /* 見た目は触らず、サイズだけ保証（色や hover は book-actions.css） */
  .result-card__actions :where(.btn, button.btn, input[type="submit"]) {
    width: 100%;
    min-height: 60px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 700;
    box-sizing: border-box;
  }
}

/* SP：1列・全幅（サイズだけ保証） */
@media (max-width: 879px) {
  .search-page .result-card__actions {
    width: 100%;
    margin-top: 6px;
  }
  .search-page .result-card__actions > .book-actions.book-actions--double.book-actions--slots {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 10px;
    width: 100%;
  }
  .search-page .result-card__actions > .book-actions.book-actions--double.book-actions--slots > * {
    grid-column: 1;
    min-width: 0;
    margin: 0;
  }
  .search-page .result-card__actions :where(.btn, button.btn, input[type="submit"]) {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }
}

/* ページャ */
.search-pager {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 60px 0 0;
}
.search-pager .page-numbers {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 10px -6px rgba(0, 0, 0, 0.28), 0 14px 18px -14px rgba(0, 0, 0, 0.26);
}
.search-pager .page-numbers.current {
  background: #0072ba;
  color: #fff;
}

/* 「絞り込む」ボタン：PCのみ幅アニメ */
.search-page .js-refine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  background: #0072ba;
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: none;
}
@media (min-width: 880px) and (any-hover: hover) {
  .search-page .js-refine {
    width: 240px;
    transition: width 0.3s;
  }
  .search-page .js-refine:hover {
    width: 280px;
  }
}

/* =========================
   /search/ PC 微調整
========================= */
.result-card__summary {
  color: #0072ba;
  font-size: 20px;
  font-weight: 500;
  border-bottom: 2px solid #d9d9d9;
  padding-bottom: 12px;
  margin-bottom: 0;
}
@media (min-width: 880px) {
  .result-card__main {
    align-items: stretch;
  }

  /* ★ ボタンの絶対配置用の基準を付与 */
  .result-card__right {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 76px;
    position: relative;
  }

  .result-card__row {
    gap: 130px;
    margin-bottom: 12px;
  }
  .result-card__row dt {
    font-size: 18px;
    font-weight: 500;
  }
  .result-card__row dd {
    font-size: 16px;
    font-weight: 400;
  }

  .chip-wrap {
    gap: 15px;
  }
  .result-card .chip {
    font-size: 16px;
    font-weight: 700;
    padding: 2px 12px;
  }
  .result-card .chip a {
    cursor: default !important;
  }

  .result-card__row--price {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 50px;
    border-top: 2px solid #d9d9d9;
    min-height: 0;
  }
  .result-card__row--price dd {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 6px;
  }
  .result-card__price-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
  }
  .result-card__price-yen {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  .result-card__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
  }
  .result-card__actions .btn {
    font-size: 20px;
    font-weight: 700;
    min-height: 60px;
    border-radius: 6px;
  }
  .result-card__actions .btn .btn__icon {
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
    flex: 0 0 25px;
  }
}

/* ===== SP(<=879px)：右情報の最小・安定ルール（1本化） ===== */
@media (max-width: 879px) {
  /* カード内パディング/間隔をややタイトに */
  .result-card__main {
    gap: 10px;
    padding: 10px;
  }

  /* 情報塊（右）：縦詰め */
  .result-card__info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  /* 行マージン（発売日/シリーズはさらに詰め） */
  .result-card__info .result-card__row {
    display: block;
    margin: 0 0 3px;
  }
  .result-card__info > .result-card__row:nth-of-type(-n + 2) {
    margin-bottom: 1px;
  }
  .result-card__info .result-card__row:last-child {
    margin-bottom: 0;
  }

  /* dt/dd タイポ */
  .result-card__info .result-card__row dt {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    padding: 0 0 1px;
  }
  .result-card__info .result-card__row dd {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
  }

  /* チップ小型化 */
  .result-card__info .chip-wrap {
    gap: 4px;
    margin: 0;
  }
  .result-card__info .chip {
    font-size: 10px;
    line-height: 1.1;
    padding: 1px 5px;
    border-radius: 9999px;
  }

  /* 価格行：上の余白控えめ */
  .result-card__row--price {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 2px solid #d9d9d9;
  }
}

/* ===== ブリッジ：topics.css の .meta-pill を /search/ にも適用できるように ===== */
.search-page .meta-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 264px;
  max-width: 100%;
  height: 38px;
  border: 1px solid #f4f4f4;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(to right, #f4f4f4 50%, #fff 50%);
}
.search-page .meta-pill__icon {
  width: 21px;
  height: 21px;
  display: block;
  margin-left: 8px;
  z-index: 1;
}
.search-page .meta-pill__label {
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
  text-align: center;
  flex: 0 0 calc(50% - 21px - 16px);
  font-size: 16px;
  padding: 0 8px;
}
.search-page .meta-pill select {
  flex: 0 0 50%;
  height: 38px;
  font-size: 16px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid #f4f4f4;
  background: transparent;
  text-align: center;
  text-align-last: center;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
@media (min-width: 880px) {
  .search-page .meta-pill::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
@media (max-width: 879px) {
  .search-page .meta-pill {
    width: 168px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #f4f4f4;
    background: #fff;
  }
  .search-page .meta-pill::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: calc(53% + 1px);
    background: #f4f4f4;
    z-index: 0;
  }
  .search-page .meta-pill__icon {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    margin-left: 6px;
  }
  .search-page .meta-pill__label {
    position: relative;
    z-index: 1;
    font-size: 10px;
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  .search-page .meta-pill select {
    position: relative;
    z-index: 1;
    flex: 0 0 84px;
    width: 84px;
    height: 26px;
    font-size: 10px;
    padding: 0 14px 0 20px;
    border: 0;
    border-left: 1px solid #f4f4f4;
  }
}

/* ===== PC時：search-layout に左右 20px を確実に付与 ===== */
@media (min-width: 880px) {
  .search-page .search-layout {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ===== ポインタの最終定義 ===== */
/* フィルタ（フォーム）のチップはクリック可能 → pointer */
.book-search .chip,
.book-search .chip span,
.book-search .chip-btn,
.book-search .chip input {
  cursor: pointer;
}
/* 検索結果カード内の表示チップはクリック不可風 → default */
.search-page .result-card .chip {
  cursor: default;
}

/* =========================
   SP(<=879px) 文字サイズ＆行間のベースを明示
   ー PCは現状のまま、SPだけ確実に指定
   ー 末尾に追記してください
========================= */
@media (max-width: 879px) {
  /* 見出し（既存値の明示） */
  .search-head__en {
    font-size: 12px;
  }
  .search-head__ja {
    font-size: 22px;
  }

  /* 件数バー（左文言を14pxに固定） */
  .search-meta__left p,
  .search-meta-bar__left p {
    font-size: 14px;
  }
  .search-meta__left strong,
  .search-meta-bar__left strong {
    font-size: 20px;
  }

  /* カード：タイトル/著者/要約 */
  .result-card__title {
    font-size: 16px;
  }
  .result-card__author {
    font-size: 12px;
  }
  .result-card__summary {
    font-size: 12px;
  }
  .result-card__series-top {
    font-size: 12px;
  }

  /* 情報行（dt/dd） */
  .result-card__row {
    margin: 0 0 6px;
  }
  .result-card__row dt {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    padding: 0 0 2px;
  }
  .result-card__row dd {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
  }

  /* チップ（表示用） */
  .result-card .chip {
    font-size: 10px;
    line-height: 1.2;
    padding: 1px 6px;
  }

  /* 価格 */
  .result-card__row--price {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #d9d9d9;
  }
  .result-card__price-value {
    font-size: 24px;
    line-height: 1;
  }
  .result-card__price-yen {
    font-size: 14px;
    line-height: 1;
  }

  /* ボタン（SPの文字サイズを明示） */
  .result-card__actions .btn,
  .result-card__actions button.btn,
  .result-card__actions input[type="submit"] {
    font-size: 16px;
    min-height: 48px;
  }
}

/* =========================
   SP(<=879px) 余白の原因を確実に除去
   ー price の固定高/大きな余白を打ち消し
   ー 情報塊の行間をタイトに
   ー 書影の角丸を外す
========================= */
@media (max-width: 879px) {
  /* 角丸を外す（カバー画像） */
  .search-page .result-card__thumb img {
    border-radius: 0 !important;
  }

  /* 情報塊の行間をタイトに（はみ出し抑制） */
  .search-page .result-card__info {
    gap: 2px !important;
  }
  .search-page .result-card__info .result-card__row {
    margin: 0 0 4px !important;
  }
  .search-page .result-card__info > .result-card__row:nth-of-type(-n + 2) {
    margin-bottom: 2px !important;
  }

  /* ▼ ここが“広すぎる余白”の主因：固定高/大きな上余白を無効化 */
  .search-page .result-card__row--price {
    min-height: 0 !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 2px solid #d9d9d9; /* 見切れ防止 */
  }
}
@media (max-width: 879px) {
  /* 2列グリッドを明示（保険） */
  .result-card__main {
    grid-template-columns: 1fr 1fr;
  }

  /* staff でも必ず右列に入れる（上書き防止のために !important を付与） */
  .result-card__info {
    grid-column: 2 !important;
  }

  /* 念のため：.result-card__right を display: contents にして子をグリッド化 */
  .result-card__right {
    display: contents;
  }
}
/* ==== staff 専用・SP確定配置（末尾に追記） ==== */
@media (max-width: 879px) {
  /* まず grid を確実に2列に */
  .result-card__main {
    grid-template-columns: 1fr 1fr !important;
  }

  /* .result-card__right は必ず contents に（上書き競合対策） */
  .result-card__right {
    display: contents !important;
  }

  /* 1) .result-card__info がある場合 → 右列に固定 */
  .result-card__info {
    grid-column: 2 !important;
  }

  /* 2) もし .result-card__info が無いカードでも右列に入るフォールバック */
  .result-card__right > .result-card__row:not(.result-card__row--price) {
    grid-column: 2 !important;
  }

  /* 価格とボタンは全幅下段を維持（保険で !important） */
  .result-card__row--price {
    grid-column: 1 / -1 !important;
  }
  .result-card__actions {
    grid-column: 1 / -1 !important;
  }
}

/* search-results.css — ここから下はSP調整と共通ページネーション */

/* =========================
   SP(<=879px) 見出しの指定（明示固定）
========================= */
@media (max-width: 879px) {
  .search-page .search-head__en {
    font-size: 12px;
  }
  .search-page .search-head__ja {
    font-weight: 500;
    font-size: 22px;
  }
}

/* =========================
   SP(<=879px) 絞り込みトグルボタン
   ・PCでは非表示、SPでだけ表示
========================= */
.refine-toggle {
  appearance: none;
  display: none; /* PCデフォルトは隠す（SPで表示） */
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  color: #0072ba;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
}
.refine-toggle__icon {
  width: 12px;
  height: 12px;
  margin-left: 8px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: transform 0.2s ease;
  /* 下向き矢印 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230072ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* 開閉時にアイコン反転（.is-open はJSで付与済み） */
[data-refine-accordion].is-open .refine-toggle__icon {
  transform: rotate(180deg);
}

@media (max-width: 879px) {
  .refine-toggle {
    display: inline-flex;
  }
}
@media (min-width: 880px) {
  .refine-toggle {
    display: none !important;
  }
}

/* =========================
   共通ページネーション（.pagination）
   ・PC/SP共通で .search-pager と同等の見た目
========================= */
.pagination {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin: 60px 0 0;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 10px -6px rgba(0, 0, 0, 0.28), 0 14px 18px -14px rgba(0, 0, 0, 0.26);
}
.pagination .page-numbers.current {
  background: #0072ba;
  color: #fff;
  box-shadow: none;
}
.pagination .prev,
.pagination .next {
  min-width: 72px;
  padding: 0 12px;
  width: auto;
}
@media (hover: hover) {
  .pagination .page-numbers:not(.current):hover {
    filter: brightness(0.96);
  }
}
/* =========================
   .search-pager の矢印をSVG化（« / » を画像表示）
   - マークアップ例：
     <nav class="search-pager">
       <a class="prev page-numbers" href="...">«</a>
       <span class="page-numbers current">1</span>
       ...
       <a class="next page-numbers" href="...">»</a>
     </nav>
========================= */

/* 矢印リンクの共通：テキストは視覚的に隠し、サイズは既存に合わせる */
.search-pager .page-numbers.prev,
.search-pager .page-numbers.next {
  position: relative;
  width: 40px;
  height: 40px;
  font-size: 0; /* 文字（« »）は見せない */
  color: transparent;
  overflow: hidden;
}

/* アイコン描画（中央に18pxアイコン） */
.search-pager .page-numbers.prev::before,
.search-pager .page-numbers.next::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* 左矢印（«） */
.search-pager .page-numbers.prev::before {
  background-image: url("../images/common/arrow_left.svg");
}

/* 右矢印（»） */
.search-pager .page-numbers.next::before {
  background-image: url("../images/common/arrow_right.svg");
}

/* ホバー時の軽い演出（既存トーンに合わせる） */
@media (hover: hover) {
  .search-pager .page-numbers.prev:not(.current):hover,
  .search-pager .page-numbers.next:not(.current):hover {
    filter: brightness(0.96);
  }
}

/* =========================================================
   SP（≤879px）— タイトル余白とページネーションのサイズのみ調整
   ※ 既存デザインは変更せず、数値だけ小さくする
========================================================= */
@media (max-width: 879px) {
  /* ページ上下余白：上20 / 下60（ご指定どおり） */
  .search-page {
    padding: 20px 0 60px;
  }

  /* ページネーション：40→32 のみ（見た目・影は既存のまま） */
  .search-pager .page-numbers {
    min-width: 22px;
    min-height: 22px;
    height: 22px;
    border-radius: 2px;
  }

  /* 前後ボタンも同じく 32×32 に */
  .search-pager .page-numbers.prev,
  .search-pager .page-numbers.next {
    min-width: 22px;
    min-height: 22px;
    height: 22px;
    border-radius: 2px;
  }

  /* 既存の矢印アイコンサイズだけ 30×30 に（画像/描画はそのまま） */
  .search-pager .page-numbers.prev::before,
  .search-pager .page-numbers.next::before {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }
}

/* PC（>=880px） */
@media (min-width: 880px) {
  .search-page .search-head__ja {
    margin: 0 0 60px;
  }
  .search-page .k-books__notice {
    margin: 0 auto 60px;
  }
}

/* SP（<=879px） */
@media (max-width: 879px) {
  .search-page .search-head__ja {
    margin: 0 0 40px;
  }
  .search-page .k-books__notice {
    margin: 0 0 40px;
  }
}
