/* ===== project swiper ===== */
.pj-swiper{
  max-width: 100%;
}

/* =========================
   Main（大きい画像）
========================= */
.pj-swiper-main{
  width: 100%;
}

/* ===== Main 4:3固定 ===== */
.pj-swiper-main .swiper-slide{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* ★ 16/9 → 4/3 に修正 */
  overflow: hidden;
}

.pj-swiper-img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 4:3枠に合わせてトリミング */
  display: block;
}

/* =========================
   Thumbs（サムネ）
   - 矢印を乗せるためwrapを追加
========================= */
.pj-thumbs-wrap{
  position: relative;    /* ★矢印の基準 */
  margin-top: 10px;
}

.pj-swiper-thumbs{
  width: 100%;
}

.pj-swiper-thumbs .swiper-slide{
  opacity: .5;
  cursor: pointer;
}

.pj-swiper-thumbs .swiper-slide-thumb-active{
  opacity: 1;
}

/* サムネ画像 */
.pj-swiper-thumb{
  width: 100%;
  height: 70px;
  object-fit: cover;
  display: block;
}

/* =========================
   Thumbs Navigation（矢印）
   HTML側に
   <div class="pj-thumbs-prev"></div>
   <div class="pj-thumbs-next"></div>
   がある前提
========================= */
.pj-thumbs-prev,
.pj-thumbs-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  cursor: pointer;
}

/* 位置 */
.pj-thumbs-prev{ left: 6px; }
.pj-thumbs-next{ right: 6px; }

/* 矢印（CSSで描画） */
.pj-thumbs-prev::after,
.pj-thumbs-next::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 10px;

  border-top: 2px solid #fff;
  border-right: 2px solid #fff;

  transform: translate(-50%, -50%);
}

.pj-thumbs-prev::after{
  transform: translate(-50%, -50%) rotate(-135deg);
}

.pj-thumbs-next::after{
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 押せないとき（端） */
.pj-thumbs-prev.swiper-button-disabled,
.pj-thumbs-next.swiper-button-disabled{
  opacity: .25;
  cursor: default;
}