/* ========================================
   Magnific Popup カスタム（ギャラリー）
   - 背景：真っ黒
   - 閉じる：ハンバーガー閉じると同じ×
   - 矢印：slickと同じ丸ボタン、画像から20px
   - 枚数表示：非表示
======================================== */

/* 背景を透過ではなく真っ黒に */
.mfp-bg {
  background: #000 !important;
  opacity: 1 !important;
}

/* キャプション横の枚数表示を非表示 */
.mfp-counter {
  display: none !important;
}

.mfp-figure:after {
  background: none;
  top: 0;
  bottom: 0;
}
.mfp-figure figure{
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
img.mfp-img {
  padding: 0 !important;
}

/* 閉じるボタン：常に表示・ハンバーガー閉じると同じ（二本線の×）・白で表示 */
body .mfp-wrap .mfp-close,
body .mfp-container .mfp-close,
body .mfp-image-holder .mfp-close,
.mfp-wrap .mfp-close,
.mfp-container .mfp-close,
.mfp-image-holder .mfp-close,
button.mfp-close {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  top: 20px !important;
  right: 20px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  position: fixed !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mfp-wrap .mfp-close:hover,
.mfp-container .mfp-close:hover {
  opacity: 0.9 !important;
}
/* 二本線で×（モーダル背景が黒なので白線・太めで視認性確保） */
.mfp-wrap .mfp-close::before,
.mfp-wrap .mfp-close::after,
.mfp-close::before,
.mfp-close::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  width: 48px;
  height: 2px;
  background: #fff !important;
  transform-origin: center;
  opacity: 1 !important;
  visibility: visible !important;
}
.mfp-close::before {
  transform: rotate(45deg);
}
.mfp-close::after {
  transform: rotate(-45deg);
}

/* コンテンツラップを相対配置にして矢印を画像横に配置するため */
.mfp-content {
  max-width: 80% !important;
  margin: auto !important;
}

/* 矢印を常時表示（opacity 1 でデフォルトの 0.65 を上書き）・画像の左右外側に配置 */
body .mfp-arrow,
body .mfp-arrow-left,
body .mfp-arrow-right,
.mfp-container .mfp-arrow,
.mfp-content .mfp-arrow,
button.mfp-arrow,
.mfp-arrow-left,
.mfp-arrow-right {
  opacity: 1 !important;
  visibility: visible !important;
  /* .mfp-content は z-index:1045 のため、兄弟の矢印はそれより上に（既定は 1046 相当） */
  z-index: 1047 !important;
}

/* 矢印ボタン：白枠・白アイコンで視認（slick風丸ボタン） */
.mfp-arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
}

.mfp-arrow-left,
.mfp-arrow-right {
  background-size: clamp(45px, 35.714px + 2.381vw, 70px) !important;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(45px, 35.714px + 2.381vw, 70px) !important;
  height: clamp(45px, 35.714px + 2.381vw, 70px) !important;
}
.mfp-arrow-left {
  background-image: url('../../images/common/arrow-modal_left.png') !important;
  margin-left: 2% !important;
}
.mfp-arrow-right {
  background-image: url('../../images/common/arrow-modal_right.png') !important;
  margin-right: 2% !important;
}
/* デフォルトの矢印を非表示にする */
.mfp-arrow-left::before, .mfp-arrow-left::after,
.mfp-arrow-right::before, .mfp-arrow-right::after {
  display: none;
}

.mfp-arrow:hover {
  opacity: 0.7 !important;
}

.mfp-image-holder .mfp-title {
  color: #fff;
  font-size: clamp(0.625rem, 0.509rem + 0.476vw, 0.938rem);
  line-height: 1.4;
  padding-top: 8px;
}
.mfp-bottom-bar {
  margin-top: 0;
}


/* 800px以下：矢印は JS で .mfp-arrows-row に。画像下に置きつつ、左右ボタンは画面端に揃える */
@media screen and (max-width: 800px) {
  .mfp-content {
    max-width: 100% !important;
    overflow-x: visible;
  }
  /* 100vw ブリードで横だけはみ出すので横スクロールを抑える */
  .mfp-image-holder .mfp-wrap {
    overflow-x: hidden;
  }
  /*
   * 既定の .mfp-bottom-bar は position:absolute + 負の margin で画像に重なるため、
   * ドキュメント上の高さに含まれず、直後の矢印行とキャプションが重なる。
   * SP ではキャプションを通常フローに戻し、画像の下に占有させる。
   */
  .mfp-image-holder .mfp-bottom-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /*
   * ドキュメント上は「画像＋キャプションの直下」なので縦位置はコンテンツに追従。
   * 親が中央寄せの狭い .mfp-content でも、行だけ 100vw に広げて左右端にボタンを置く。
   */
  .mfp-arrows-row {
    position: relative;
    z-index: 1060;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(16px, 4vw, 32px);
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 12px;
    margin-bottom: 0;
    padding: 8px max(12px, env(safe-area-inset-left, 0px)) 12px max(12px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    touch-action: manipulation;
    clear: both;
  }
  .mfp-arrows-row .mfp-arrow {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  .mfp-arrows-row .mfp-arrow-left,
  .mfp-arrows-row .mfp-arrow-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}