.shelf{margin:30px 0}
.shelf__hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.shelf__t{font-size:15px;font-weight:700}
.shelf__more{margin-left:auto;font-size:12.5px;color:var(--signal);text-decoration:underline}
.shelf__box{position:relative}
.shelf__rail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.shelf__rail::-webkit-scrollbar{display:none}
.shelf__rail.snap{scroll-snap-type:x mandatory}
.shelf__rail.snap > *{scroll-snap-align:start;flex:0 0 auto;width:132px}

/* 端のフェード。タッチ環境では矢印を出さないので、続きがあると分かる手掛かりはこれだけ（5-11） */
.shelf__box::before,.shelf__box::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--fade-w);pointer-events:none;
  opacity:0;transition:opacity .18s;z-index:2;
}
.shelf__box::before{left:0;background:linear-gradient(90deg,var(--fade-a),var(--fade-b))}
.shelf__box::after{right:0;background:linear-gradient(270deg,var(--fade-a),var(--fade-b))}
.shelf.has-prev .shelf__box::before{opacity:1}
.shelf.has-next .shelf__box::after{opacity:1}

.shelf__arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:var(--r-exec);
  background:var(--ink-2);border:1px solid var(--line-2);color:var(--fg)}
.shelf__arw--prev{left:-6px}
.shelf__arw--next{right:-6px}
.shelf__arw::before{content:"‹";font-size:19px;line-height:1}
.shelf__arw--next::before{content:"›"}

/**
 * おすすめシリーズのカード。
 * **女優カードより横長にする。** 中身はパッケージ（800×538）で、
 * 正方形に切ると題名の文字が落ちて何の作品か分からなくなる。
 */
.sercard{display:block;width:208px;flex:0 0 auto;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-data);overflow:hidden;
  transition:border-color .16s}
.sercard:hover{border-color:var(--signal)}
.sercard__ph{display:block;line-height:0;background:var(--ink-3)}
.sercard__ph img{width:100%;height:auto;aspect-ratio:800/538;object-fit:cover;display:block}
.sercard__t{display:block;padding:9px 10px 0;font-family:var(--font-serif);
  font-size:13.5px;font-weight:700;letter-spacing:.02em;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sercard__m{display:block;padding:5px 10px 0;font-size:11px;color:var(--fg-dim)}
.sercard__y{display:block;padding:2px 10px 10px;font-size:10.5px;color:var(--fg-mute)}
.shelf__rail.snap > .sercard{width:208px}