*{box-sizing:border-box}
:root{font-family:"Hiragino Sans","Yu Gothic","YuGothic",Meiryo,sans-serif;color:#222;background:#f7f5f0}
body{margin:0}
.wrap{width:min(980px,calc(100% - 32px));margin:0 auto;padding:48px 0 36px}
.hero{padding:12px 4px 28px;border-bottom:1px solid #d8d3c9}
.eyebrow{margin:0 0 8px;font-size:.84rem;letter-spacing:.16em;color:#666}
h1{margin:0;font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;font-size:clamp(2rem,6vw,3.4rem);font-weight:600;line-height:1.2}
.lead{margin:14px 0 0;color:#595959;line-height:1.8}
.books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.book{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;min-height:74px;padding:14px 18px;border:1px solid #ded9cf;border-radius:10px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.035)}
.book:hover,.book:focus-visible{border-color:#999;transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.07)}
.book:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.num{font-variant-numeric:tabular-nums;font-size:.82rem;color:#777}
.title{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;font-size:1.08rem;font-weight:600}
.arrow{font-size:1.8rem;color:#888;line-height:1}
footer{margin-top:34px;padding:18px 4px 0;border-top:1px solid #d8d3c9;color:#777;font-size:.82rem;line-height:1.7}
footer p{margin:0}
@media(max-width:680px){
  .wrap{width:min(100% - 22px,980px);padding-top:28px}
  .books{grid-template-columns:1fr}
  .book{min-height:68px}
}