@charset "UTF-8";
/* ============================================
 * 塗装ファッション センターモードスライダー（共通）
 * inc/pf-fashion-slider.php / common/js/pf-slider.js とセット。
 * トップページ「塗装ファッション」セクションと
 * 塗装ファッション一覧ページ（page-paint-fashion.php）のMVで共通利用。
 *
 * 中央スライドが最大（398.667×460）・両隣が中（×0.8153）・
 * 外側が小（×0.6271）かつ薄い。Swiper4（.swiper-container）使用。
 * 2026.06 共通化（旧 .pf-mv__slider 系から切り出し）。
 * ============================================ */

.pf-slider {
  width: 100%;
  overflow: visible; /* 中央スライドの拡大が切れないように */
  box-sizing: border-box;
}

.pf-slider *,
.pf-slider *::before,
.pf-slider *::after {
  box-sizing: border-box;
}

.pf-slider .swiper-wrapper {
  align-items: center; /* 高さの異なるスライドを縦中央揃え */
}

/* Swiper本体CSS（.swiper-slide { width:100% }）に負けないよう詳細度を上げる。
   読み込み順に依存せずスロット幅を固定する。 */
.pf-slider .pf-slider__slide {
  width: 398.667px; /* アクティブ（最大）サイズを基準スロットに */
  display: flex;
  justify-content: center;
}

.pf-slider__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(7px, 5.30px + 0.45vw, 14px);
  opacity: 0.1; /* 既定（外側スライド）の透明度 */
  transform: scale(0.6271); /* 250 / 398.667 */
  transform-origin: center center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pf-slider__img {
  display: block;
  width: 398.667px;
  height: 460px;
  overflow: hidden;
  line-height: 0;
}

.pf-slider__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-slider__label {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 8.54px + 0.39vw, 16px);
  line-height: 1;
  color: #4a4a4a;
  white-space: nowrap;
}

/* 隣接スライド（中サイズ） */
.pf-slider .swiper-slide-prev .pf-slider__card,
.pf-slider .swiper-slide-next .pf-slider__card {
  transform: scale(0.8153); /* 325.01 / 398.667 */
  opacity: 0.3;
}

/* アクティブスライド（中央・最大） */
.pf-slider .swiper-slide-active .pf-slider__card {
  transform: scale(1);
  opacity: 1;
}

/* ---- SP対応 ----
 * PC版を約1/2にスケールした構成（中央画像 398.667×460 → 200×230）。
 * 拡大率（scale 0.6271 / 0.8153 / 1）は共通のためそのまま流用し、
 * 基準スロット幅・画像サイズのみSP値に差し替える。 */
@media (max-width: 767px) {
  .pf-slider .pf-slider__slide {
    width: 200px; /* アクティブ（最大）サイズ */
  }

  .pf-slider__img {
    width: 200px;
    height: 230px;
  }
}