@charset "UTF-8";
/*
 * 支給 CSS（site.css）に無い分だけを書く。site.css は変更しない。
 * 変数（--pink など）は site.css の :root をそのまま使う。
 *
 *  1. ページ送り（一覧に必要だが支給 HTML に無い）
 *  2. 検索フォーム（search.php に必要だが支給 HTML に無い）
 *  3. スクリーンリーダー用のテキスト
 */

/* ---------- 1. ページ送り ---------- */

.pager {
  margin: 48px 0 0;
}

.pager-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager-list li {
  margin: 0;
}

.pager-list .page-numbers {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 800 16px/1 var(--round);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pager-list a.page-numbers:hover,
.pager-list a.page-numbers:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}

.pager-list .page-numbers.current {
  background: var(--pink);
  color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
}

.pager-list .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* ---------- 2. 検索フォーム ---------- */

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
}

.search-form input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--text);
  font: 500 16px/1.4 var(--sans);
}

.search-form input[type="search"]:focus-visible {
  outline: 3px solid var(--pink-soft);
  outline-offset: 2px;
}

/* ---------- 3. スクリーンリーダー用 ---------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
  .pager-list .page-numbers {
    transition: none;
  }
}

/* お問い合わせフォーム（ライブチャット側の public/site.css と同じ。フォームの本文は npm run build:wp-pages で入る） */
.form-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { text-align: center; font: 800 18px var(--round); padding: 40px 16px; }

/* 法定ページの表の下の注記（特定商取引法に基づく表記。.note は中央寄せなので、表にそろえて左寄せにする） */
.legal .note { text-align: left; margin-top: 16px; }