/* related-products.css … 製品ページの「関連製品」（parts/related-products.php・2026-11-08）。
   カードは NETIS登録製品のページの製品カード（.netis-card）と同じ作り: 白地・細い線・角丸・右下の影、乗せると浮く。写真の下に製品名・説明（3行まで）・「製品の詳細を見る →」。
   PC は横に4つまで（多いときは折り返す）。スマホは横に指でずらすカルーセル（眺める段なので。次のカードの端を見せる・操作の案内は書かない） */
.rel-products { padding: 0 0 64px; }
.rel-products__ttl { font-size: 2rem; font-weight: 700; letter-spacing: .05em; line-height: 1.5; text-align: center; margin: 0 0 24px; }
.rel-products__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 0; padding: 0; } /* 4つ未満のときは中央にそろえる */
.rel-products__item { list-style: none; min-width: 0; flex: 0 0 calc((100% - 72px) / 4); }
.rel-products__card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--wx-r-card, 8px); overflow: hidden; box-shadow: 8px 8px var(--wx-shadow, rgba(0,0,0,.1)); color: inherit; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.rel-products__ph { position: relative; display: block; aspect-ratio: 800 / 620; background: var(--c-bg); border-bottom: 1px solid var(--c-line); overflow: hidden; }
.rel-products__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rel-products__badge { position: absolute; top: 10px; left: 10px; padding: 1px 10px; border: 1px solid #000; border-radius: 999px; background: #000; color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1.7; letter-spacing: .04em; }
.rel-products__bd { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.rel-products__name { font-size: 1.5rem; font-weight: 700; line-height: 1.5; color: var(--c-text); margin: 0 0 6px; }
.rel-products__desc { font-size: 1.25rem; line-height: 1.75; color: var(--c-gray); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.rel-products__more { display: inline-flex; align-items: center; margin-top: auto; padding-top: 12px; font-size: 1.25rem; font-weight: 700; color: var(--c-blue); letter-spacing: .04em; }
.rel-products__more:after { content: "→"; margin-left: 6px; transition: transform .3s ease; }
@media (hover: hover) {
  .rel-products__card:hover { transform: translate(var(--wx-lift, -3px), var(--wx-lift, -3px)); box-shadow: 12px 12px var(--wx-shadow, rgba(0,0,0,.1)); }
  .rel-products__card:hover .rel-products__more:after { transform: translateX(4px); }
}
.rel-products__card:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
@media (min-width: 751px) and (max-width: 1000px) { .rel-products__item { flex-basis: calc((100% - 48px) / 3); } }
@media (max-width: 750px) {
  .rel-products { padding-bottom: 40px; }
  .rel-products__list { display: grid; justify-content: start; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 4px 10px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rel-products__list::-webkit-scrollbar { display: none; }
  .rel-products__item { scroll-snap-align: start; }
  .rel-products__card { box-shadow: 4px 4px var(--wx-shadow, rgba(0,0,0,.1)); }
  .rel-products__bd { padding: 12px 12px 14px; }
  .rel-products__name { font-size: 1.4rem; }
  .rel-products__desc { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .rel-products__card, .rel-products__more:after { transition: none; } }