/*-----------------------------------
  raydorim.com\wp-content\themes\deer_child\assets\css\pagination.css
  ページネーション（ドット）全体のレイアウト
-----------------------------------*/

/* ① .carousel__pagination 内の .slick-dots li の疑似要素を無効化 */
.carousel__pagination .slick-dots li::before,
.carousel__pagination .slick-dots li:before {
  display: none !important;
  content: "" !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* ② すべての Slick ドットボタンの ::before 疑似要素を無効化 */
.slick-dots li button::before {
  display: none !important;
  content: "" !important;
}

/* ③ 数字ボタンのスタイル */
.slick-dots li button {
  font-size: 1em;
  color: #ccc;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.875em;
  line-height: 1;
}

/* ④ アクティブなドットボタンのスタイル */
.slick-dots li.slick-active button {
  background-color: #333 !important;
  color: #fff !important;
  border-radius: 50%;
  width: auto;
  padding: 5px 10px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ⑤ 各ドット（li）の余白リセット */
.slick-dots li {
  margin: 0 0.5em;
  padding: 0;
}

/* ⑥ .carousel__pagination 内の .slick-dots および li の背景・ボーダーをリセット */
.carousel__pagination .slick-dots,
.carousel__pagination .slick-dots li {
  background: none !important;
  border: none !important;
}

/* ⑦ カスタムページネーション全体のコンテナ（通常フロー・画像の下） */
.carousel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(300px, 50vw, 500px);
  margin: 20px auto 0;
  font-size: clamp(16px, 3vw, 24px);
}

/* ⑧ カスタム矢印 */
.carousel__prev,
.carousel__next {
  flex: 0 0 auto;
  font-size: 1.5em;
  background: transparent;
  border: none;
  cursor: pointer;
  margin: 0 0.5em;
}

/* ⑨ カスタムドット領域 */
.carousel__dots {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ⑩ .slick-dots の位置リセット */
.carousel__dots .slick-dots {
  position: static !important;
  transform: none !important;
}

/* ================================
   モバイル時：固定SNSバーにかぶらないための“ページ下の安全域”
   - 値は JS で --footer-fix-menu-h に実高さが入る
   - 余白は最小(6px)だけ足す
   ================================ */
:root {
  --footer-fix-menu-h: 0px;     /* JSで実寸に上書き */
  --footer-safe-gap: 6px;       /* 好みで 0〜12px に調整可 */
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(var(--footer-fix-menu-h) + var(--footer-safe-gap));
  }

  /* （任意）帯の空白部分は背面タップ可。アイコン自体は操作可 */
  .footer-fix-menu { pointer-events: none; }
  .footer-fix-menu a,
  .footer-fix-menu button,
  .footer-fix-menu [role="button"] { pointer-events: auto; }
}

/* iOS旧シンタックスが必要なら下を有効化
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    body { padding-bottom: calc(var(--footer-fix-menu-h) + var(--footer-safe-gap) + constant(safe-area-inset-bottom)); }
  }
}
*/

/* ページ下に「固定SNSバーの実高さぶん」だけ安全域をとる */
:root { --footer-fix-menu-h: 0px; } /* JSが実寸で上書き */

@media (max-width: 768px) {
  /* 画面下にある固定SNSバー（.footer-fix-menu）と重ならないように、
     ページの一番下に“ちょうどその高さ分”の余白を確保する */
  body {
    padding-bottom: calc(var(--footer-fix-menu-h) + 8px);
  }

  /* 任意：帯の空白は背面タップを通す。アイコン自体は操作できる */
  .footer-fix-menu { pointer-events: none; }
  .footer-fix-menu a,
  .footer-fix-menu button { pointer-events: auto; }
}

/* 直リンクボタンはデフォルト非表示（重なり防止） */
.carousel__detail--go { display: none; }

/* 600px以下：モーダル用だけ表示（既存の .carousel__detail が出ればOK） */
@media (max-width: 600px) {
  .carousel__detail--go { display: none !important; }
}

/* 601〜1199px：ホバー時に“直リンク”だけ表示、モーダル用は消す */
@media (min-width: 601px) and (max-width: 1199px) {
  /* 既存：ホバーでキャプションを出している前提 */
  .carousel__panel:hover .carousel__detail--go { display: block !important; }
  .carousel__panel:hover .js-modal-open.carousel__detail { display: none !important; }
}

/* 1200px以上：直リンクは出さない（画像クリック→モーダルの挙動を維持） */
@media (min-width: 1200px) {
  .carousel__detail--go { display: none !important; }
}