/* 単価でえらぶ — スーパーのチラシ風(赤い帯・黄色の値札・マス目) */
:root {
  --paper: #fffdf6; --ink: #1b1b1b; --ink-2: #5b5750; --rule: #e8e0cf;
  --red: #e8382f; --red-dark: #b3241c; --yellow: #ffe14d; --yellow-2: #fff6bf; --blue: #1d4ea3; --cell: #ffffff;
  --pop: "Dela Gothic One", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #191816; --ink: #f2efe8; --ink-2: #bdb6aa; --rule: #39352f; --cell: #23211e; --yellow-2: #3a3418; --red: #ff5a50; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.7; }
a { color: var(--red-dark); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.sp { display: none; }
.demo { background: var(--ink); color: var(--yellow); text-align: center; padding: 6px; font-weight: 700; }

/* 赤い帯の題字 */
.top { background: var(--red); color: #fff; border-bottom: 4px solid var(--yellow); }
.top .wrap { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 10px; }
.logo { color: #fff; text-decoration: none; display: flex; flex-direction: column; line-height: 1.05; margin-right: auto; }
.logo-s { font-weight: 900; font-size: .8rem; letter-spacing: .2em; }
.logo-l { font-family: var(--pop); font-size: 2rem; letter-spacing: .02em; text-shadow: 3px 3px 0 var(--red-dark); }
.logo-l em { font-style: normal; color: var(--yellow); }
.burst { flex: none; width: 82px; height: 82px; display: grid; place-items: center; color: var(--red-dark); background: var(--yellow);
  font-family: var(--pop); font-size: .78rem; line-height: 1.15; text-align: center; transform: rotate(-10deg);
  clip-path: polygon(50% 0, 61% 12%, 75% 5%, 79% 21%, 95% 25%, 88% 39%, 100% 50%, 88% 61%, 95% 75%, 79% 79%, 75% 95%, 61% 88%, 50% 100%, 39% 88%, 25% 95%, 21% 79%, 5% 75%, 12% 61%, 0 50%, 12% 39%, 5% 25%, 21% 21%, 25% 5%, 39% 12%); }
.pr-tag { flex: none; display: flex; flex-direction: column; align-items: center; background: #fff; color: var(--ink); border-radius: 4px;
  padding: 3px 6px; font-weight: 900; font-size: .8rem; line-height: 1.2; }
.pr-tag small { font-size: .56rem; font-weight: 700; }
.ticker { margin: 0; background: var(--ink); color: var(--yellow); font-size: .75rem; font-weight: 700; padding: 5px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker .wrap { display: block; overflow: hidden; text-overflow: ellipsis; }

/* 品目の切り替え */
.cats { background: var(--cell); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 9; }
.cats .wrap { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; scrollbar-width: none; white-space: nowrap; }
.cats a { flex: none; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .85rem; padding: 3px 12px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.cats a.on { background: var(--yellow); }

/* 大見出し */
.hero { padding: 26px 0 6px; }
.hero-k { display: inline-block; margin: 0; background: var(--ink); color: var(--yellow); font-weight: 900; font-size: .85rem; padding: 2px 10px; transform: rotate(-2deg); }
.hero h1 { font-family: var(--pop); font-weight: 400; font-size: 2.8rem; line-height: 1.2; margin: 10px 0 8px; }
.hero-s { margin: 0; }
.hero-s b, .memo b { background: linear-gradient(transparent 60%, var(--yellow) 60%); }

/* 赤い帯の小見出し */
.band { margin: 34px 0 12px; font-family: var(--pop); font-weight: 400; font-size: 1.25rem; }
.band span { display: inline-block; background: var(--red); color: #fff; padding: 2px 16px 2px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }

/* チラシのマス目(トップ) */
.flyers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.flyer { position: relative; display: grid; grid-template-columns: 1fr 96px; grid-template-areas: "t t" "tag img" "n n" "more more";
  gap: 4px 8px; padding: 12px; background: var(--cell); color: var(--ink); text-decoration: none;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.flyer:hover { background: var(--yellow-2); }
.fl-t { grid-area: t; font-weight: 900; font-size: 1.05rem; }
.flyer img { grid-area: img; width: 96px; height: 96px; object-fit: contain; align-self: center; }
.flyer .tag { grid-area: tag; align-self: center; }
.fl-n { grid-area: n; font-size: .75rem; color: var(--ink-2); line-height: 1.4; }
.fl-more { grid-area: more; font-size: .78rem; font-weight: 900; color: var(--red-dark); }
.fl-more::after { content: " ▶"; font-size: .6rem; }

/* 黄色の値札 */
.tag { margin: 0; display: inline-flex; flex-direction: column; background: var(--yellow); color: #1b1b1b; padding: 4px 10px 2px;
  border-radius: 4px; position: relative; box-shadow: 2px 2px 0 var(--ink); }
.tag-k { font-size: .68rem; font-weight: 900; }
.tag-v { white-space: nowrap; font-family: var(--pop); color: var(--red); font-size: 1.9rem; line-height: 1.05; letter-spacing: -.02em; transform: skewX(-6deg); }
.tag-v small { font-size: .9rem; margin-left: 1px; color: #1b1b1b; }
.tag.big .tag-v { font-size: 2.3rem; }

/* 品目ページ */
.crumbs { font-size: .8rem; color: var(--ink-2); margin-top: 14px; }
.crumbs a { color: var(--ink-2); }
.ch1 { font-family: var(--pop); font-weight: 400; font-size: 2rem; line-height: 1.3; margin: 8px 0 12px; }
.ch1 small { display: block; font-family: var(--body); font-weight: 900; font-size: .9rem; color: var(--red); }
.verdict { margin: 0 0 10px; padding: 12px 14px; background: var(--cell); border: 2px solid var(--ink); border-radius: 6px; font-weight: 700; font-size: 1.05rem; }
.verdict b { font-family: var(--pop); font-weight: 400; font-size: 1.4rem; }
.verdict .red { color: var(--red); }
.lead { color: var(--ink-2); }
.controls { margin: 8px 0 12px; }
.controls label { display: flex; flex-direction: column; font-size: .72rem; font-weight: 900; max-width: 320px; }
.controls select { margin-top: 2px; padding: 9px; font-size: .95rem; border: 2px solid var(--ink); border-radius: 4px; background: var(--cell); color: var(--ink); font-family: var(--body); }

/* 商品のマス目 */
.cells { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.cell { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 12px; background: var(--cell);
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.ph { align-self: center; }
.ph img, .noimg { display: block; width: 150px; height: 150px; object-fit: contain; background: #fff; }
.nm { margin: 0; font-size: .85rem; font-weight: 700; line-height: 1.45; }
.nm a { color: var(--ink); text-decoration: none; }
.sub { margin: 0; font-size: .8rem; }
.sub b { font-size: 1rem; }
.meta { margin: 0; font-size: .72rem; color: var(--ink-2); }
.stars { color: #d08a00; font-weight: 900; }
.note { margin: 0; font-size: .72rem; color: var(--ink-2); }
.go { margin-top: auto; text-align: center; background: var(--red); color: #fff; text-decoration: none; font-weight: 900; padding: 9px; border-radius: 4px;
  box-shadow: 0 3px 0 var(--red-dark); }
.go::after { content: " ▶"; font-size: .7rem; }
.no { position: absolute; top: 8px; left: 8px; min-width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--pop);
  background: var(--ink); color: #fff; border-radius: 50%; font-size: .9rem; }
.star { position: absolute; top: 4px; left: 4px; z-index: 1; width: 66px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; color: #1b1b1b; transform: rotate(-12deg);
  clip-path: polygon(50% 0, 61% 12%, 75% 5%, 79% 21%, 95% 25%, 88% 39%, 100% 50%, 88% 61%, 95% 75%, 79% 79%, 75% 95%, 61% 88%, 50% 100%, 39% 88%, 25% 95%, 21% 79%, 5% 75%, 12% 61%, 0 50%, 12% 39%, 5% 25%, 21% 21%, 25% 5%, 39% 12%); }
.star small { font-size: .5rem; font-weight: 900; }
.star b { font-family: var(--pop); font-weight: 400; font-size: 1.4rem; }
.star.s1 { background: var(--red); color: #fff; }
.star.s2 { background: var(--yellow); }
.star.s3 { background: #7fc8f8; }

.memo ul { padding-left: 1.2em; }
.sign { text-align: right; font-weight: 900; }
.pager { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px 12px; font-weight: 700; font-size: .9rem; }

.foot { margin-top: 56px; background: var(--ink); color: #cfc8bb; font-size: .78rem; padding: 26px 0; border-top: 6px solid var(--red); }
.foot a { color: #fff; }
.foot-logo { font-family: var(--pop); font-size: 1.3rem; color: #fff; }
.foot-logo em { font-style: normal; color: var(--yellow); }
.foot-pr { border: 1px solid #5b5750; border-radius: 4px; padding: 6px 10px; color: #fff; }

@media (max-width: 560px) {
  .sp { display: inline; }
  .logo-l { font-size: 1.55rem; }
  .burst { width: 64px; height: 64px; font-size: .6rem; }
  .pr-tag small { display: none; }
  .hero h1 { font-size: 2.1rem; }
  .flyers { grid-template-columns: 1fr 1fr; }
  .flyer { grid-template-columns: 1fr; grid-template-areas: "t" "img" "tag" "n" "more"; padding: 10px; }
  .flyer img { justify-self: center; width: 80px; height: 80px; }
  .fl-t { font-size: .9rem; }
  .tag.big .tag-v { font-size: 1.8rem; }
  .cells { grid-template-columns: 1fr 1fr; }
  .cell { padding: 12px 8px 10px; }
  .ph img, .noimg { width: 110px; height: 110px; }
  .tag-v { font-size: 1.5rem; }
  .nm { font-size: .78rem; }
  .ch1 { font-size: 1.6rem; }
}