/* ギズモショッピング 公開版スタイル（試作サイトと同じ配色・寸法） */
:root {
  color-scheme: light dark;
  --bg: #f2f6fa;
  --surface: #ffffff;
  --surface-alt: #e8eff6;
  --text: #17222e;
  --dim: #57687a;
  --border: #dce5ee;
  --accent: #e63b2a;
  --accent-soft: #ffedea;
  --link: #0b6bcb;
  --gold: #dd8a06;
  --header-bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f151c;
    --surface: #1a232e;
    --surface-alt: #242f3d;
    --text: #eef3f8;
    --dim: #a3b3c2;
    --border: #2e3c4c;
    --accent: #ff6a55;
    --accent-soft: #3a2320;
    --link: #6db3f2;
    --gold: #f0b13e;
    --header-bg: #1a232e;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
img { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }
.wrap { margin: 0 auto; max-width: 72rem; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .wrap { padding-left: 1.25rem; padding-right: 1.25rem; } }

/* ヘッダー */
.site-header { background: var(--header-bg); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; gap: 0.625rem; padding-top: 0.625rem; padding-bottom: 0.625rem; }
.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; min-width: 0; }
.brand-logo { height: 2rem; width: auto; border-radius: 0.375rem; background: #231815; padding: 0.25rem 0.375rem; }
.brand-name { font-size: 1rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
@media (min-width: 640px) { .brand-name { font-size: 1.125rem; } }
.brand-sub { margin-left: 0.25rem; font-size: 0.75rem; color: var(--dim); white-space: nowrap; display: none; }
@media (min-width: 420px) { .brand-sub { display: block; } }
.header-pill { margin-left: auto; flex-shrink: 0; border-radius: 9999px; background: var(--accent-soft); color: var(--accent); padding: 0.25rem 0.625rem; font-size: 11px; font-weight: 700; }
.ad-notice { max-width: 72rem; margin: 0 auto; border-bottom: 1px solid var(--border); padding: 0.625rem 1rem; font-size: 0.75rem; line-height: 1.6; color: var(--dim); }
@media (min-width: 640px) { .ad-notice { padding-left: 1.25rem; padding-right: 1.25rem; } }
.ad-mark { display: inline-block; margin-right: 0.25rem; border: 1px solid var(--border); border-radius: 0.25rem; background: var(--surface); padding: 0.125rem 0.375rem; font-weight: 700; }

/* 共有ボタン */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.share-label { font-size: 0.75rem; font-weight: 700; color: var(--dim); }
.share-btn { display: flex; align-items: center; min-height: 44px; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit; }

/* トップページ */
.page-main { padding-bottom: 2.5rem; }
.hero { padding-top: 1.5rem; }
@media (min-width: 640px) { .hero { padding-top: 2rem; } }
.hero-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.025em; color: var(--dim); }
.hero-title { margin: 0.5rem 0 0; font-size: 28px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
@media (min-width: 640px) { .hero-title { font-size: 36px; } }
.hero-lead { margin: 0.625rem 0 0; max-width: 42rem; font-size: 0.875rem; line-height: 1.6; color: var(--dim); }
@media (min-width: 640px) { .hero-lead { font-size: 1rem; } }
.search-box { position: relative; margin-top: 1rem; max-width: 42rem; }
.search-box svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--dim); pointer-events: none; }
.search-input { width: 100%; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0.875rem 1rem 0.875rem 2.75rem; font-size: 1rem; font-family: inherit; }
.search-input::placeholder { color: var(--dim); }
.section-head { display: flex; align-items: baseline; gap: 0.5rem; padding-top: 1.5rem; padding-bottom: 0.25rem; }
.section-title { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.section-note { margin: 0; font-size: 0.75rem; color: var(--dim); }
.genre-grid { list-style: none; margin: 0; padding: 0.75rem 1rem 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; max-width: 72rem; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .genre-grid { gap: 1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; } }
@media (min-width: 1024px) { .genre-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .genre-grid { grid-template-columns: repeat(4, 1fr); } }
.genre-grid > li { min-width: 0; }
.genre-card { display: block; height: 100%; overflow: hidden; border-radius: 1rem; background: var(--surface); text-decoration: none; box-shadow: inset 0 0 0 1px var(--border); }
.genre-card:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.genre-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.genre-card-body { display: block; padding: 1rem; }
.genre-card-rank { display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.025em; color: var(--accent); font-variant-numeric: tabular-nums; }
.genre-card-name { display: block; margin-top: 0.375rem; font-size: 1rem; font-weight: 700; line-height: 1.375; letter-spacing: -0.01em; }
.genre-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.375rem; min-height: 2.6rem; font-size: 13px; line-height: 1.6; color: var(--dim); }
.genre-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.count-chip { border-radius: 9999px; background: var(--surface-alt); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 700; color: var(--dim); }
.genre-card-arrow { font-size: 1.25rem; line-height: 1; color: var(--dim); }
.empty-box { margin: 1rem; border-radius: 1rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); padding: 2rem 1rem; text-align: center; }
@media (min-width: 640px) { .empty-box { margin-left: 1.25rem; margin-right: 1.25rem; } }
.empty-box .empty-title { font-weight: 700; margin: 0; }
.empty-box .empty-text { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--dim); }
.clear-btn { margin-top: 1rem; min-height: 44px; border: none; border-radius: 9999px; background: var(--accent); color: #fff; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.top-share { margin-top: 1.5rem; }
.source-note { padding-top: 1.25rem; font-size: 0.75rem; line-height: 1.6; color: var(--dim); }
.source-note a { text-decoration: underline; }

/* サブバー（ジャンル・案内ページ） */
.subbar { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); background: var(--bg); padding: 0.75rem 0; }
.subbar-inner { display: flex; align-items: center; gap: 0.75rem; }
.back-btn { flex-shrink: 0; border: 1px solid var(--border); border-radius: 9999px; background: var(--surface); padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.subbar-title { flex: 1; min-width: 0; margin: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subbar-chip { flex-shrink: 0; border-radius: 9999px; background: var(--surface-alt); padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 700; color: var(--dim); }

/* ジャンルページ */
.genre-head { padding: 1.25rem 1rem 0.5rem; }
@media (min-width: 640px) { .genre-head { padding-left: 1.25rem; padding-right: 1.25rem; } }
.genre-photo-top { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--border); }
.genre-head-text { padding-top: 1.25rem; }
.genre-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.025em; line-height: 1.6; color: var(--dim); }
.genre-eyebrow .updated { margin-left: 0.5rem; font-weight: 400; }
.genre-h1 { margin: 0.5rem 0 0; font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 640px) { .genre-h1 { font-size: 32px; } }
.genre-lead { margin: 0.75rem 0 0; max-width: 42rem; font-size: 0.875rem; line-height: 1.6; color: var(--dim); }
@media (min-width: 640px) { .genre-lead { font-size: 1rem; } }
.editorial { margin-top: 1.5rem; max-width: 48rem; border-radius: 1rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); padding: 1rem; }
@media (min-width: 640px) { .editorial { padding-left: 1.25rem; padding-right: 1.25rem; } }
.editorial-label { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.025em; color: var(--accent); }
.editorial-text { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 2; }
.count-line { margin: 1.5rem 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--dim); }
.genre-share { margin-top: 1rem; }
.genre-search { margin-top: 1rem; }
.genre-search label { font-size: 0.875rem; font-weight: 700; }
.genre-search input { margin-top: 0.375rem; width: 100%; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0.75rem 1rem; font-size: 1rem; font-family: inherit; }
.search-result-note { margin: 0.375rem 0 0; font-size: 0.75rem; color: var(--dim); }
.sortbar { position: sticky; top: 57px; z-index: 9; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); padding: 0.625rem 0; margin-top: 1rem; }
.sortbar-inner { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; }
.sortbar-label { flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: var(--dim); }
.sort-btn { flex-shrink: 0; border-radius: 9999px; padding: 0.5rem 0.875rem; font-size: 0.875rem; font-weight: 700; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.sort-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.jump-row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.jump-btn { border: 1px solid var(--border); border-radius: 9999px; background: var(--surface); color: var(--text); padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.jump-btn.all { background: var(--surface-alt); border-color: transparent; }
.list-head { padding: 1rem 1rem 0.25rem; font-size: 0.875rem; font-weight: 700; margin: 0; }
@media (min-width: 640px) { .list-head { padding-left: 1.25rem; padding-right: 1.25rem; } }
.list-head .list-head-sub { margin-left: 0.5rem; font-weight: 400; color: var(--dim); }
.product-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 0.75rem 1rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); padding-left: 1.25rem; padding-right: 1.25rem; } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
.product-cell.span-all { grid-column: 1 / -1; }
.product-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 1rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.product-photo { position: relative; background: #fff; }
.product-photo img { width: 100%; height: 15rem; object-fit: contain; padding: 0.75rem; }
@media (min-width: 640px) { .product-photo img { height: 16rem; } }
.product-card.featured .product-photo img { height: 18rem; }
@media (min-width: 640px) { .product-card.featured .product-photo img { height: 20rem; } }
.no-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; background: var(--surface-alt); padding: 0 1.5rem; text-align: center; height: 15rem; }
@media (min-width: 640px) { .no-photo { height: 16rem; } }
.product-card.featured .no-photo { height: 18rem; }
@media (min-width: 640px) { .product-card.featured .no-photo { height: 20rem; } }
.no-photo svg { color: var(--dim); flex-shrink: 0; }
.no-photo .no-photo-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.no-photo .no-photo-caption { margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--dim); }
.rank-pill { position: absolute; left: 0.75rem; top: 0.75rem; border-radius: 9999px; background: rgba(255,255,255,0.95); padding: 0.25rem 0.625rem; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.rank-badge { font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.01em; color: var(--accent); font-size: 1.25rem; }
.rank-badge.lg { font-size: 1.5rem; }
.rank-badge .rank-unit { margin-left: 0.125rem; font-size: 11px; font-weight: 700; color: #57687a; }
.product-body { display: flex; flex: 1; flex-direction: column; padding: 1rem; }
@media (min-width: 640px) { .product-body { padding: 1.25rem; } }
.product-name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.375; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-card.featured .product-name { font-size: 1.125rem; }
.product-facts { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; margin: 0; }
.price-label { font-size: 0.75rem; font-weight: 700; color: var(--dim); }
.price-value { font-size: 22px; font-weight: 700; line-height: 1; }
.price-missing { margin: 0; font-size: 0.875rem; color: var(--dim); }
.rating-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; margin: 0.5rem 0 0; font-size: 0.875rem; }
.stars { color: var(--gold); white-space: nowrap; }
.stars .rating-num { font-weight: 700; color: var(--text); }
.review-count { color: var(--dim); }
.store-line { margin: 0.375rem 0 0; font-size: 0.75rem; color: var(--dim); }
.review-panel { margin-top: 0.75rem; border-radius: 0.75rem; background: var(--surface-alt); padding: 0.75rem 0.875rem; }
.review-panel .review-label { margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--dim); }
.review-panel .review-text { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.6; }
.review-missing { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--dim); }
.buy-area { margin-top: auto; padding-top: 1rem; }
.buy-note { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--dim); }
.store-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.store-row:first-of-type { margin-top: 0; }
.buy-btn { display: flex; flex: 1; min-height: 50px; align-items: center; justify-content: center; border: 2px solid var(--text); border-radius: 0.75rem; background: var(--surface); color: var(--text); padding: 0.75rem 1rem; text-align: center; font-size: 15px; font-weight: 700; text-decoration: none; }
.buy-btn:hover { background: var(--surface-alt); }
.affiliate-mark { flex-shrink: 0; border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.125rem 0.375rem; font-size: 11px; font-weight: 700; color: var(--dim); }
.buy-missing { margin: 0; border-radius: 0.5rem; background: var(--surface-alt); padding: 0.625rem 0.75rem; text-align: center; font-size: 0.875rem; color: var(--dim); }
.more-area { padding: 1rem; }
@media (min-width: 640px) { .more-area { padding-left: 1.25rem; padding-right: 1.25rem; } }
.more-btn { display: block; width: 100%; min-height: 52px; border: none; border-radius: 0.75rem; background: var(--accent); color: #fff; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.more-btn:hover { filter: brightness(1.1); }
.all-btn { display: block; width: 100%; min-height: 44px; margin-top: 0.5rem; border: none; border-radius: 0.75rem; background: transparent; color: var(--dim); padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.end-line { padding: 0 1rem 0.5rem; text-align: center; font-size: 0.75rem; color: var(--dim); margin: 0; }

/* 案内ページ */
.info-main { padding: 1.5rem 1rem 1rem; }
@media (min-width: 640px) { .info-main { padding-left: 1.25rem; padding-right: 1.25rem; } }
.info-h1 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 640px) { .info-h1 { font-size: 32px; } }
.info-lead { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--dim); }
.info-sections { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.info-section { border-radius: 1rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); padding: 1.25rem; }
@media (min-width: 640px) { .info-section { padding: 1.5rem; } }
.info-section h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.info-section .info-body { margin-top: 0.625rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; line-height: 1.6; }
.info-section p { margin: 0; }
.info-section dl { margin: 0; display: grid; grid-template-columns: 1fr; column-gap: 1rem; row-gap: 0.625rem; }
@media (min-width: 640px) { .info-section dl { grid-template-columns: 8rem 1fr; } }
.info-section dt { font-weight: 700; color: var(--dim); }
.info-section dd { margin: 0; }
.info-section a { text-decoration: underline; }
.dim-text { color: var(--dim); }

/* フッター */
.site-footer { margin-top: 3rem; border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner { padding-top: 2rem; padding-bottom: 2rem; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-logo { height: 2rem; width: auto; border-radius: 0.25rem; background: #231815; padding: 0.25rem 0.375rem; }
.footer-name { margin: 0; font-weight: 700; }
.footer-nav { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer-nav-btn { display: flex; align-items: center; min-height: 44px; border: 1px solid var(--border); border-radius: 9999px; background: var(--bg); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.footer-note { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--dim); }
.footer-copy { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--dim); }