/* =====================================================
   services/books.php 固有スタイル
   書籍カード（.book-grid / .book-card 等）は site.css の「図書購入サービスのご案内」を使う
   ===================================================== */

.book-list-grid{
  margin:14px 0 30px;
}

.book-list-grid:last-child{
  margin-bottom:0;
}

/* 一覧のカードは操作がないため、マウスを乗せても浮かせない */
.book-list-grid .book-card:hover{
  border-color:var(--line-deep);
  box-shadow:none;
}

.book-title{
  font-size:17px;
}

/* 購入者区分ごとの価格 */
.book-price-list{
  display:grid;
  gap:0;
  margin:0;
  border-top:1px solid var(--line-deep);
}

.book-price-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid var(--line-deep);
  font-size:14px;
  line-height:1.5;
}

.book-price-row dt{
  color:#526452;
}

.book-price-row dd{
  margin:0;
  color:var(--heading);
  font-weight:700;
  white-space:nowrap;
}

.book-price-row.is-unavailable dd{
  color:var(--button-disabled-text);
  font-weight:400;
}

/* ご注文の方法 */
.book-order-steps{
  list-style:none;
  counter-reset:book-step;
  margin:18px 0 24px;
  padding:0;
  display:grid;
  gap:14px;
}

.book-order-steps li{
  counter-increment:book-step;
  position:relative;
  padding:14px 16px 14px 62px;
  border:1px solid var(--line-deep);
  background:#fff;
}

.book-order-steps li::before{
  content:counter(book-step);
  position:absolute;
  left:16px;
  top:14px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.book-order-step-title{
  margin:0 0 4px;
  color:var(--heading);
  font-weight:700;
}

.book-order-steps .text{
  margin:0;
  padding-left:0;
}

/* 本文中のリンク（ページ内リンク・メールアドレス）をリンクとわかるようにする */
.book-shop-section .text a{
  color:var(--accent-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* 申込書3種のボタンを PC では1行に並べる */
.book-form-buttons{
  --button-width:340px;
  flex-wrap:wrap;
  gap:14px;
}

/* 送料・発送について */
.book-terms-table-wrap{
  margin:14px 0 12px;
  border:1px solid var(--line-deep);
  background:#fff;
}

.book-terms-table{
  width:100%;
  border-collapse:collapse;
}

.book-terms-table th,
.book-terms-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--line-deep);
  text-align:left;
  vertical-align:top;
  line-height:1.7;
}

.book-terms-table thead th{
  background:#edf5d8;
  color:var(--heading);
  white-space:nowrap;
}

.book-terms-table tbody th{
  color:var(--heading);
  white-space:nowrap;
}

.book-terms-table tbody tr:last-child th,
.book-terms-table tbody tr:last-child td{
  border-bottom:none;
}

/* スマートフォンでは表をやめ、区分ごとに縦に並べる */
@media (max-width:768px){
  .book-terms-table thead{
    display:none;
  }

  .book-terms-table,
  .book-terms-table tbody,
  .book-terms-table tr,
  .book-terms-table th,
  .book-terms-table td{
    display:block;
  }

  .book-terms-table tbody tr{
    border-bottom:1px solid var(--line-deep);
  }

  .book-terms-table tbody tr:last-child{
    border-bottom:none;
  }

  .book-terms-table tbody th,
  .book-terms-table td{
    border-bottom:none;
    padding:6px 14px;
  }

  .book-terms-table tbody th{
    padding-top:12px;
  }

  .book-terms-table td:last-child{
    padding-bottom:12px;
  }

  .book-terms-table td:nth-of-type(1)::before{
    content:"送料：";
    font-weight:700;
  }

  .book-terms-table td:nth-of-type(2)::before{
    content:"発送：";
    font-weight:700;
  }

  .book-order-steps li{
    padding-left:56px;
  }
}

/* スマートフォンでは表紙を左、書名・価格を右に並べ、1冊あたりの高さを抑える */
@media (max-width:480px){
  .book-list-grid{
    gap:12px;
  }

  .book-list-grid .book-card{
    flex-direction:row;
  }

  .book-list-grid .book-image-wrap{
    flex:0 0 96px;
    width:96px;
    aspect-ratio:auto;
    align-items:flex-start;
    padding:12px 8px;
    border-bottom:none;
    border-right:1px solid var(--line-deep);
  }

  .book-list-grid .book-image{
    max-width:100%;
    max-height:none;
  }

  .book-list-grid .book-body{
    min-width:0;
    padding:12px;
    gap:8px;
  }

  .book-title{
    font-size:15px;
  }

  /* 文字サイズ「小」が site.css の body.font-small の値（PC 向け）で「中」より大きくならないようにする */
  body.font-small .book-title{
    font-size:14px;
  }

  /* 区分名は折り返さず、入りきらない価格は次の行の右端に送る */
  .book-price-row{
    flex-wrap:wrap;
    gap:0 8px;
    font-size:13px;
    padding:4px 0;
  }

  .book-price-row dt{
    white-space:nowrap;
  }

  .book-price-row dd{
    margin-left:auto;
  }
}