/* basic reset */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif; color:#222; background:#fafafa; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display:block; }

/* layout */
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* header */
.site-header { background:#fff; border-bottom:1px solid #e6e6e6; }
.site-header .wrap { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.logo { font-weight: 700; font-size: 18px; }

/* search */
.search { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.search input { padding:10px 12px; border:1px solid #ddd; border-radius:10px; min-width: 240px; }
.search select { padding:10px 12px; border:1px solid #ddd; border-radius:10px; }
.search button { padding:10px 14px; border:0; border-radius:10px; background:#111; color:#fff; cursor:pointer; }
.search button:hover { opacity:.9; }

/* title */
h1 { font-size: 20px; margin: 18px 0 12px; }

/* notice */
.notice { background:#fff; border:1px solid #eee; padding:12px 14px; border-radius:12px; }

/* grid cards */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.card {
  background:#fff;
  border:1px solid #eee;
  border-radius: 14px;
  overflow:hidden;
  transition: transform .08s ease, box-shadow .08s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background:#f3f3f3;
}

.meta { padding: 10px 12px 12px; display:flex; flex-direction:column; gap:6px; }
.name { font-size: 13px; line-height: 1.35; max-height: 3.9em; overflow:hidden; }
.price { font-weight: 700; }
.shop { font-size: 12px; color:#666; }

/* pager */
.pager { display:flex; justify-content:center; align-items:center; gap:12px; margin:18px 0 6px; }
.pager a { background:#fff; border:1px solid #e6e6e6; padding:8px 12px; border-radius:12px; }
.pager span { color:#666; }

/* footer */
.site-footer { margin-top: 26px; padding: 18px 0; color:#777; }
.site-footer .wrap { text-align:center; }