@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } * { box-sizing: border-box; } .display { font-family: 'Zen Kaku Gothic New', sans-serif; } .mono { font-family: 'Space Mono', monospace; } .hero { background: radial-gradient(circle at 12% 20%, rgba(15, 184, 172, 0.35), transparent 45%), radial-gradient(circle at 88% 0%, rgba(232, 62, 140, 0.3), transparent 40%), #171522; color: #fff; padding: 40px clamp(16px, 4vw, 48px) 34px; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: #c9c6e0; text-transform: uppercase; margin-bottom: 10px; } .hero .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #0fb8ac; box-shadow: 0 0 0 3px rgba(15, 184, 172, 0.25); } .hero h1 { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-size: clamp(26px, 4vw, 38px); margin: 0 0 8px; letter-spacing: 0.01em; } .hero p { margin: 0; color: #c9c6e0; font-size: 14px; max-width: 52ch; line-height: 1.7; } .filter-tx { position: relative; margin-bottom: 1rem; } .filter-tx h6 { font-size: 1.2rem; text-align: center; } .filter-wrap { position: relative; padding: 0; } .filter-bar { background: linear-gradient(121deg, #fbc7e8 0%, #ffe6f6 100%); padding: 14px 20px 18px 20px; display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; border-radius: 5px; /* 導入店舗一覧（既定）: 都道府県 → 店舗名で検索 → 取扱品目 → 表示件数 */ } .filter-bar .field-pref { order: 1; } .filter-bar .field-search { order: 2; } .filter-bar .field-type { order: 3; } .filter-bar .field-perpage { order: 4; } .filter-bar .reset-btn { order: 5; } /* 景品販売店舗: 取扱品目 → 都道府県 → 店舗名で検索 → 表示件数 */ /* （ページ側でが付与されたときだけ切り替わる） */ body.page-limited .filter-bar .field-type { order: 1; } body.page-limited .filter-bar .field-pref { order: 2; } body.page-limited .filter-bar .field-search { order: 3; } body.page-limited .filter-bar .field-perpage { order: 4; } body.page-limited .filter-bar .reset-btn { order: 5; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: #4a4760; text-transform: uppercase; display: flex; align-items: center; gap: 5px; } .chip.sticker, .chip.plush { background: #fff6fb; font-size: 14px; font-weight: normal; color: #4a4760; padding: 9px 12px 12px 12px; } .search-field { flex: 1 1 220px; min-width: 200px; } .search-field .box { position: relative; } .search-field input { width: 100%; padding: 10px 12px 10px 34px; border: 0; border-radius: 9px; font-size: 14px; font-family: inherit; color: #171522; background: #fff6fb; transition: border-color 260ms cubic-bezier(0.22, 0.8, 0.3, 1), background 260ms cubic-bezier(0.22, 0.8, 0.3, 1); } .search-field input:focus { outline: none; border-color: #0fb8ac; background: #fff; } .search-field svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); opacity: 0.45; } select { padding: 10px 30px 10px 12px; border: 0; border-radius: 9px; font-size: 14px; font-family: inherit; color: #171522; background: #fff6fb url('data:image/svg+xml;utf8,') no-repeat right 12px center; appearance: none; -webkit-appearance: none; min-width: 150px; cursor: pointer; transition: border-color 260ms cubic-bezier(0.22, 0.8, 0.3, 1); } select:focus { outline: none; border-color: #0fb8ac; } .chip-group { display: flex; gap: 8px; } .chip { position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 14px 9px 10px; border: 0; border-radius: 9px; background: #fbfbfa; cursor: pointer; user-select: none; font-size: 13px; font-weight: 600; color: #4a4760; transition: all 260ms cubic-bezier(0.22, 0.8, 0.3, 1); white-space: nowrap; } .chip input { position: absolute; opacity: 0; width: 0; height: 0; } .chip .box { width: 16px; height: 16px; border-radius: 5px; border: 1.6px solid #c8c6d3; display: flex; align-items: center; justify-content: center; flex: none; background: #FFF; transition: all 260ms cubic-bezier(0.22, 0.8, 0.3, 1); } .chip .box svg { opacity: 0; transform: scale(0.5); transition: all 260ms cubic-bezier(0.22, 0.8, 0.3, 1); } .chip input:checked ~ .box svg { opacity: 1; transform: scale(1); } .chip.sticker input:checked ~ .box { background: #0fb8ac; border-color: #0fb8ac; } .chip.sticker:has(input:checked) { background: #e2f7f4; border-color: #0fb8ac; color: #171522; } .chip.plush input:checked ~ .box { background: #e83e8c; border-color: #e83e8c; } .chip.plush:has(input:checked) { background: #fce6f0; border-color: #e83e8c; color: #171522; } .reset-btn { border: 0; background: #956dbc; color: #fff; font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 9px; cursor: pointer; transition: all 260ms cubic-bezier(0.22, 0.8, 0.3, 1); font-family: inherit; } .reset-btn:hover { background: #513F86; } .result-meta { padding: 1.5rem 2% 0.5rem 2%; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .result-meta .count { font-size: 14px; color: #4a4760; } .result-meta .count b { color: #171522; font-family: 'Space Mono', monospace; font-size: 16px; } .list { padding: 0 2%; display: flex; flex-direction: column; gap: 12px; } .list.is-swapping .card { opacity: 0; } .card { background: #fff; border: 1px solid #e2e1e6; border-radius: 14px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pref badges" "name name" "actions actions"; row-gap: 12px; column-gap: 12px; align-items: center; box-shadow: 0 1px 2px rgba(23, 21, 34, 0.04), 0 8px 24px -12px rgba(23, 21, 34, 0.18); opacity: 0; transform: translateY(10px); animation: cardIn 260ms cubic-bezier(0.22, 0.8, 0.3, 1) forwards; animation-delay: calc(var(--i) * 45ms); } .card > .pref-tag { grid-area: pref; justify-self: start !important; } .card > .badges { grid-area: badges; justify-self: end; } .card > .name { grid-area: name; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700; font-size: 20px !important; margin: 0 !important; line-height: inherit !important; } .card > .actions { grid-area: actions; justify-self: stretch; } .card > .actions .btn { flex: 1; justify-content: center; } .card .pref-tag { display: inline-flex !important; width: fit-content !important; max-width: max-content !important; flex: none; font-size: 13px; font-weight: 700; padding: 3px 9px 5px 9px; border-radius: 8px; background: #7356ae; color: #FFF; letter-spacing: 0.03em; } /* デスクトップ: 都道府県+店名 → バッジ → ボタンを1行で表示 */ @media (min-width: 761px) { .card { grid-template-columns: auto auto 1fr auto; grid-template-areas: "pref name badges actions"; row-gap: 0; } .card > .badges { justify-self: end; } .card > .actions { justify-self: end; } .card > .actions .btn { flex: none; } } .maintenance-notice { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #4a4760; background: #ed97ca; border: 1px dashed #e2e1e6; border-radius: 14px; font-size: 15px; line-height: 1.8; } @keyframes cardIn { to { opacity: 1; transform: translateY(0); } } .badges { display: flex; gap: 6px; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; padding: 5px 10px; border-radius: 20px; border: 1px solid transparent; } .badge.on.sticker { background: #e4f5f9; color: #267b97; } .badge.on.plush { background: #ffeae9; color: #f64048; } .badge.off { background: #f1f1ee; color: #a9a7b5; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-self: end; } .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: 9px; transition: all 260ms cubic-bezier(0.22, 0.8, 0.3, 1); white-space: nowrap; } .btn.detail { background: #956dbc; color: #fff; } .btn.detail:hover { background: #332f47; transform: translateY(-1px); } .btn.map { background: #ed7eb9; color: #fff; } .btn.map:hover { border-color: #171522; transform: translateY(-1px); } .empty { text-align: center; padding: 60px 20px; color: #4a4760; background: #ed97ca; border: 1px dashed #e2e1e6; border-radius: 14px; } .empty .big { font-size: 34px; margin-bottom: 6px; } .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 0 clamp(16px, 4vw, 48px) 60px; margin-top: 20px; flex-wrap: wrap; } .page-btn { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #e2e1e6; background: #fff; font-family: 'Space Mono', monospace; font-size: 13px; color: #4a4760; cursor: pointer; transition: all 260ms cubic-bezier(0.22, 0.8, 0.3, 1); } .page-btn:hover:not(:disabled):not(.active) { border-color: #7356ae; color: #7356ae; } .page-btn.active { background: #7356ae; color: #fff; border-color: #7356ae; } .page-btn.active:hover { background: #5c4589; border-color: #5c4589; } .page-btn:disabled { opacity: 0.35; cursor: not-allowed; } .page-ellipsis { color: #4a4760; padding: 0 4px; font-family: 'Space Mono', monospace; } @media (max-width: 760px) { .filter-bar { align-items: stretch; } .field-search, .search-field, .field-pref, .field-type { flex: 1 1 100% !important; width: 100% !important; } .field-perpage { flex: 1 1 calc(50% - 7px) !important; width: calc(50% - 7px) !important; } .reset-btn { flex: 1 1 calc(50% - 7px) !important; width: calc(50% - 7px) !important; justify-content: center; align-self: flex-end !important; } .field-type .chip-group { display: flex; } .field-type .chip { flex: 1 1 calc(50% - 4px) !important; width: auto !important; justify-content: center; } .card > .pref-tag { margin-bottom: -12px !important; position: relative; border-radius: 8px 8px 0 0 !important; z-index: 1; } .card > .name { background: #f4f4f4; padding: 8px 10px; border-radius: 0 6px 6px 6px; } }