/* ---- 入口を1画面に収める（2026-08-13 菅さん「ヘッダーの書籍が1画面に収まるように」）----
   ① 説明文の柱を広げて行数を減らす。**字は小さくしない**（PCで578px・3行 → 840px・2行）。
   ② 上のあき（ラベルの上・帯の上）を詰める。
   ③ スマホは2つの .rw を display:contents で1つの流れにまとめ、
      1行の枚数を数式で固定する。76px決め打ちだと 6枚×4段＝498px になり入らなかった。
      枚数を固定すると端数の段が出ない（8枚なら 8/8/7 の3段）。
      1枚の幅 = 柱の幅 ÷ 枚数 + 重なり26px（左右に13pxずつ食い込ませているため）。
   ④ 段と段のあきも詰める。`.bkfan` の gap 30px ＋ `.rw` の padding-top 26px ＝ 56px あった。
      padding-top は hover で18px持ち上がるぶんの逃げなので、20pxまでは削れる。
      実測（1475×734＝菅さんの画面）：帯の下端 756px → **669px**＝2段目の下に65pxのあき。 */
#lead{padding-top:calc(var(--hdh,71px) + 12px)}
#lead h1{margin-top:10px}
#lead .lead{max-width:840px;margin-top:10px}
#lead .bkfan{margin-top:26px;gap:16px}
#lead .bkfan .rw{padding-top:20px}
@media(max-width:940px){
  #lead .bkfan{flex-direction:row;flex-wrap:wrap;justify-content:center;
    column-gap:0;row-gap:16px;padding:0 13px;margin-top:24px}
  #lead .bkfan .rw{display:contents}
  #lead .bkfan a{width:calc(100% / 12 + 26px);flex:0 0 auto;margin:0 -13px}
  #lead .bkfan img{width:100%;height:auto;aspect-ratio:76 / 111}
}
@media(max-width:560px){
  #lead .bkfan{row-gap:14px}
  #lead .bkfan a{width:calc(100% / 8 + 26px)}
  #lead .lead{line-height:1.8}
}