/* =========================
   おすすめ商品（複数枚見える / Stylish）
========================= */

.wrapper_stock{
  padding: clamp(18px, 2.2vw, 26px) 0 clamp(24px, 3vw, 38px);
  background: none;
  position: relative;
}

.title_name_s2{
  text-align: center;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: .04em;
  margin: 0 0 14px;
}

/* 表示枚数：PC=3 / TB=2 / SP=1 */
.stock_viewport{
  --stock-visible: 3;
  --stock-gap: 18px;

  width: min(1100px, calc(100% - 28px));
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 34px rgba(15,23,42,.10);
  position: relative;

  padding: clamp(12px, 1.4vw, 16px);
}

@media (max-width: 980px){
  .stock_viewport{ --stock-visible: 2; }
}
@media (max-width: 560px){
  .stock_viewport{ --stock-visible: 1; }
}

/* 横並び本体 */
.slider_stock{
  display: flex;
  gap: var(--stock-gap);
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* 1枚（カード） */
.content_stock{
  flex: 0 0 calc((100% - (var(--stock-gap) * (var(--stock-visible) - 1))) / var(--stock-visible));
  max-width: calc((100% - (var(--stock-gap) * (var(--stock-visible) - 1))) / var(--stock-visible));
  height: clamp(220px, 22vw, 320px);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

.content_stock a{
  display: block;
  width: 100%;
  height: 100%;
}

/* 画像：切らずに上品（必要なら cover に変更OK） */
.content_stock img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  background: #fff;
  display: block;
}

/* 矢印（白丸 + 影） */
.prev_stock, .next_stock{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(15,23,42,.18);
  border: 1px solid rgba(15,23,42,.10);
  cursor: pointer;
  z-index: 9;
  padding: 0;
}

/* 中央のカード枠に沿う位置 */
.prev_stock{ left: max(10px, calc(50% - 560px)); }
.next_stock{ right: max(10px, calc(50% - 560px)); }

.prev_stock:hover, .next_stock:hover{
  background: rgba(255,255,255,1);
}

.prev_stock::after, .next_stock::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-top: solid 2px rgba(15,23,42,.55);
  border-right: solid 2px rgba(15,23,42,.55);
}

.prev_stock::after{
  left: 16px;
  transform: translateY(-50%) rotate(-135deg);
}

.next_stock::after{
  right: 16px;
  transform: translateY(-50%) rotate(45deg);
}

/* ドット */
.indicator_stock{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 14px auto 0;
  list-style: none;
}

.indicator_stock li{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.35);
  background: transparent;
  cursor: pointer;
}

.indicator_stock li.is-active{
  background: rgba(15,23,42,.85);
  border-color: rgba(15,23,42,.85);
}

/* SP微調整 */
@media (max-width: 560px){
  .content_stock{
    height: 300px;
    border-radius: 14px;
  }
  .content_stock img{ padding: 10px; }
  .prev_stock, .next_stock{
    width: 40px;
    height: 40px;
  }
}