@charset "utf-8";

.main {
  margin-top: 150px;
}

.works {
  margin: 0 clamp(20px, 10vw, 220px);
}

/* =========================
   ページネーション
========================= */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 90px auto;
}

.page-numbers {
  display: flex;
  gap: 10px;
  list-style: none;
}

.page-numbers li {
  cursor: pointer;
  padding: 5px 10px;
  position: relative;
}

.page-numbers li.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: #f5f2ec;
}

.page-btn {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
}

/* 共通：線（SVG） */
.page-btn::before,
.page-btn::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: url("../img/arrow_line.svg") no-repeat center / contain;
  top: 50%;
  left: 50%;
  transform-origin: left center;
}

/* ＞ */
.next::before {
  transform: translate(50%, 50%) rotate(-135deg);
}

.next::after {
  transform: translate(50%, 0) rotate(135deg);
}

/* ＜ */
.prev::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.prev::after {
  transform: translate(-50%, 0) rotate(-45deg);
}
/* =========================
   共通トランジション
========================= */
.page-btn,
.page-numbers li {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    filter 0.3s ease,
    text-shadow 0.3s ease;
}

/* =========================
   disabled（押せない状態）
========================= */
.page-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* =========================
   ホバー（数字・矢印）
========================= */
.page-btn:not(:disabled):hover,
.page-numbers li:not(.active):hover {
  /* ほんのり移動 */
  transform: translateY(-2px);

  /* 光 */
  filter: drop-shadow(0 0 6px rgba(245, 242, 236, 0.6))
    drop-shadow(0 0 12px rgba(245, 242, 236, 0.4));

  /* 文字だけ追加で光らせる */
  text-shadow:
    0 0 6px rgba(245, 242, 236, 0.9),
    0 0 12px rgba(245, 242, 236, 0.6);
}

/* =========================
   矢印（左右にちょい動き）
========================= */
.prev:not(:disabled):hover {
  transform: translateX(-3px);
}

.next:not(:disabled):hover {
  transform: translateX(3px);
}

/* =========================
   アクティブ（現在ページ）
========================= */
.page-numbers li.active {
  filter: drop-shadow(0 0 6px rgba(245, 242, 236, 0.8))
    drop-shadow(0 0 12px rgba(245, 242, 236, 0.5));
}