/* =========================================================
 * PhotoSwipe 背景
 * ======================================================= */
.pswp {
  --pswp-bg: rgba(0, 0, 0, 0.6);
}


/* =========================================================
 * カスタムUI全体
 * - JSで画像サイズに追従
 * - pointer-events: none でスワイプを邪魔しない
 * ======================================================= */
.pswp__ui-box {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  box-sizing: border-box;
  opacity: 1;
}

.pswp__ui-box.is-hidden {
  opacity: 0;
  visibility: hidden;
}


/* =========================================================
 * 閉じるボタン
 * - 上余白に表示
 * - クリック可能にする
 * ======================================================= */
.pswp__ui-close {
  position: absolute;
  top: -36px;
  right: 0;
  width: 27px;
  height: 27px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  line-height: 0.8;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}


/* =========================================================
 * ページカウンター
 * - 下余白の右側
 * ======================================================= */
.pswp__ui-counter {
  position: absolute;
  right: 0;
  bottom: -24px;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}


/* =========================================================
 * キャプション
 * - 下余白の左側
 * ======================================================= */
.pswp__ui-caption {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: calc(100% - 56px);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  z-index: 2;
  word-break: break-word;
}


/* =========================================================
 * 画像本体
 * ======================================================= */
.pswp__img {
  /* 必要ならここに影や角丸を追加 */
}


/* =========================================================
 * 左右ナビボタン
 * ======================================================= */
.pswp__button--arrow--prev,
.pswp__button--arrow--next {
position: absolute;
  transform: translateY(-50%);
  width: 40px !important;
  height: 80px !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.7) !important;
  opacity: 1;
  color: #fff;
  z-index: 1000;
  top: calc(50% - 22px); /* PC */
}
@media (max-width: 767px) {
  .pswp__button--arrow--prev,
  .pswp__button--arrow--next {
      width: 30px !important;
      height: 60px !important;
      top: calc(50% + 24px) !important; /* SP */
  }
}

/* デフォルトSVGを消す */
.pswp__button--arrow--prev svg,
.pswp__button--arrow--next svg {
  display: none;
}

.pswp__button--arrow--prev {
  left: 40px !important;
}

.pswp__button--arrow--next {
  right:40px !important;
}

/* デフォルトのSVGサイズ */
.pswp__button--arrow--prev svg,
.pswp__button--arrow--next svg {
  width: 32px;
  height: 32px;
}

/* =========================================
 * 左矢印
 * ======================================= */
.pswp__button--arrow--prev::before {
  content: "";
  display: block;
  width: 13px;
  height: 10px;
  margin: auto;
  background: url('../images/icon_arrow_white.svg') no-repeat center;
  background-size: contain;
  transform: scaleX(-1);
}
/* =========================================
 * 右矢印
 * ======================================= */
.pswp__button--arrow--next::before {
  content: "";
  display: block;
  width: 13px;
  height: 10px;
  margin: auto;
  background: url('../images/icon_arrow_white.svg') no-repeat center;
  background-size: contain;
}

/* hover */
.pswp__button--arrow--prev:hover,
.pswp__button--arrow--next:hover {
  background: rgba(0, 0, 0, 1) !important;
}

/* active */
.pswp__button--arrow--prev:active,
.pswp__button--arrow--next:active {
  transform: translateY(-50%) scale(0.98);
}


/* =========================================================
 * デフォルトUIを非表示
 * ======================================================= */
.pswp__button--close,
.pswp__counter,
.pswp__button--zoom {
  display: none !important;
}


/* =========================================================
 * SP調整
 * ======================================================= */
@media (max-width: 767px) {
  .pswp__ui-close {
    top: -36px;
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  .pswp__ui-counter {
    bottom: -24px;
    font-size: 12px;
  }

  .pswp__ui-caption {
    bottom: -44px;
    width: calc(100% - 52px);
    font-size: 12px;
    line-height: 1.5;
  }

  .pswp__button--arrow--prev {
    left: 16px !important;
  }

  .pswp__button--arrow--next {
    right: 16px !important;
  }
}

.pswp--touch .pswp__button--arrow--prev,
.pswp--touch .pswp__button--arrow--next {
  visibility: visible !important;
  opacity: 1 !important;
}