/* ============================================
   Lightbox Custom Styles - kokusai2026
   Magnific Popup カスタムオーバーライド
   ============================================ */

/* オーバーレイを暗めに設定 */
.mfp-bg {
  background: #000 !important;
  opacity: 0.85 !important;
}

/* 画像コンテナ */
.mfp-image-holder .mfp-content {
  max-width: 90vw;
}

/* キャプション領域の中央寄せ */
.mfp-bottom-bar {
  text-align: center;
}

/* キャプション（タイトル）スタイル */
.mfp-title {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  padding: 8px 0 !important;
  text-align: center !important;
  padding-right: 0 !important;
}

/* カウンター非表示 */
.mfp-counter {
  display: none !important;
}

/* 閉じるボタン */
.mfp-image-holder .mfp-close {
  color: #fff;
  font-size: 36px;
  opacity: 0.8;
  right: -6px;
  top: -40px;
}

.mfp-image-holder .mfp-close:hover {
  opacity: 1;
}

/* ============================================
   前後ナビゲーションボタン
   デフォルトのボーダー矢印を完全に上書き
   ============================================ */

/* デフォルトの疑似要素を完全リセット */
.mfp-arrow::before,
.mfp-arrow::after,
.mfp-arrow-left::before,
.mfp-arrow-left::after,
.mfp-arrow-right::before,
.mfp-arrow-right::after {
  content: none !important;
  display: none !important;
  border: none !important;
}

/* 矢印ボタン本体 */
.mfp-arrow {
  width: 50px !important;
  height: 50px !important;
  top: 50% !important;
  margin-top: -25px !important;
  opacity: 0.85 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-radius: 50% !important;
  transform: none !important;
}

.mfp-arrow:hover,
.mfp-arrow:active {
  opacity: 0.85 !important;
  margin-top: -25px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.mfp-arrow-left {
  left: 10px !important;
}

.mfp-arrow-right {
  right: 10px !important;
}

/* SVG背景で矢印を描画（疑似要素の競合を完全回避） */
.mfp-arrow-left {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
}

.mfp-arrow-right {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
}

/* ============================================
   レスポンシブ対応
   ============================================ */

/* タブレット */
@media (max-width: 768px) {
  .mfp-image-holder .mfp-content {
    max-width: 95vw;
  }

  .mfp-title {
    font-size: 14px !important;
    padding: 6px 10px !important;
  }

  .mfp-arrow {
    width: 44px !important;
    height: 44px !important;
    margin-top: -22px !important;
  }

  .mfp-arrow:hover,
  .mfp-arrow:active {
    margin-top: -22px !important;
  }
}

/* スマートフォン */
@media (max-width: 480px) {
  .mfp-image-holder .mfp-content {
    max-width: 100vw;
  }

  .mfp-title {
    font-size: 13px !important;
    padding: 4px 8px !important;
  }

  .mfp-image-holder .mfp-close {
    font-size: 30px;
    right: 0;
    top: -36px;
  }

  .mfp-arrow {
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
    background-size: 20px 20px !important;
  }

  .mfp-arrow:hover,
  .mfp-arrow:active {
    margin-top: -20px !important;
  }

  .mfp-arrow-left {
    left: 6px !important;
  }

  .mfp-arrow-right {
    right: 6px !important;
  }
}