/* ============================================================
   main.css — ページ部品（パンくず・法務・404・最近見た・実体ページの型・食品の柱）。トップは home.css。
   色は gs-shell.css の変数だけを使う（hex を直書きしない。テーマの正本は design/theme.json）。
   Bootstrap は持ち込んでいない（.container / .breadcrumb 等は最小限を自前で定義）。
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo",
    "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; color: var(--ink); line-height: 1.7;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--g); }
a:hover { color: var(--g-dark); }
main { min-height: 50vh; }
h1, h2, h3, h4 { line-height: 1.35; }
img { max-width: 100%; height: auto; }

.icon { width: 1em; height: 1em; display: inline-block; fill: currentColor; vertical-align: -0.125em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.container { max-width: 1340px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 992px) { .container { padding: 0 18px; } }

/* ---- ボタン ---- */
.btn-primary {
  display: inline-block; padding: .6rem 1.4rem; border-radius: 999px; background: var(--g); color: #fff;
  font-weight: 700; text-decoration: none; border: 1px solid var(--g);
}
.btn-primary:hover { background: var(--g-dark); color: #fff; }
.btn-outline {
  display: inline-block; padding: .5rem 1.1rem; border-radius: 999px; background: var(--card); color: var(--g);
  font-weight: 700; text-decoration: none; border: 1px solid var(--line);
}
.btn-outline:hover { border-color: var(--g); color: var(--g-dark); }

/* ---- パンくず（macros/breadcrumb.html）---- */
.breadcrumb {
  list-style: none; margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap;
  font-size: .88rem; letter-spacing: .01em; color: var(--gs-mute);
}
.breadcrumb-item + .breadcrumb-item::before { content: '\203A'; padding: 0 .5rem; color: var(--gs-soft-mute); }
.breadcrumb-item a { text-decoration: none; color: var(--gs-mute); transition: color .2s ease; }
.breadcrumb-item a:hover { color: var(--gs-accent); }
.breadcrumb-item.active { color: var(--gs-soft-mute); }
@media (max-width: 767.98px) {
  .breadcrumb { font-size: .74rem; line-height: 1.5; margin: 8px 0; }
  .breadcrumb-item + .breadcrumb-item::before { padding: 0 .3rem; }
}

/* ---- 見出し行（左バー ＋ 見出し ＋ 右端リンク）---- */
.gs-sec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; }
.gs-sec-bar { width: 4px; height: 21px; border-radius: 3px; background: var(--brand); flex-shrink: 0; }
.gs-sec-title { font-size: 1.28rem; font-weight: 800; color: var(--ink); margin: 0; }
.gs-sec-more { margin-left: auto; font-size: .86rem; font-weight: 700; color: var(--g); text-decoration: none; }
.gs-sec-more:hover { text-decoration: underline; }

/* ---- 準備中の札（トップの h1 ほか）---- */
.gs-eyebrow {
  display: inline-block; margin: 0 0 14px; padding: .2rem .8rem; border-radius: 999px;
  background: var(--s-soft); color: var(--s-ink); font-size: .8rem; font-weight: 800; letter-spacing: .04em;
}
.gs-home-note { font-size: .88rem; color: var(--mute); }

/* ---- 法務ページ（運営者情報・プライバシー・免責）---- */
.legal { max-width: 720px; margin: 0 auto; padding: 36px 0 24px; line-height: 1.85; color: var(--ink); }
.legal h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 1rem; }
.legal h2 { font-size: 1.1rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.legal p, .legal li, .legal dd { color: var(--gs-mute); }
.legal ul { padding-left: 1.25rem; }
.legal-table { display: grid; grid-template-columns: 9em 1fr; gap: .35rem 1rem; margin: 0; }
.legal-table dt { font-weight: 700; color: var(--ink); }
.legal-table dd { margin: 0; }
@media (max-width: 600px) { .legal-table { grid-template-columns: 1fr; gap: 0 } .legal-table dd { margin-bottom: .6rem; } }
.legal .legal-date { font-size: .82rem; color: var(--mute); margin-top: 2rem; }
.legal .legal-nav { font-size: .86rem; color: var(--mute); margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---- 404 ---- */
.notfound { max-width: 720px; margin: 0 auto; padding: 64px 0 40px; text-align: center; }
.notfound h1 { font-size: 1.8rem; font-weight: 800; color: var(--ink); margin: 0 0 .8rem; }
.notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 1.4rem; }

/* ---- 最近見たページ（static/js/recent.js が描画。base.html の [data-recent-strip]）---- */
.gs-recent { margin: 36px auto 8px; }
.gs-recent-h { font-size: 1rem; font-weight: 800; color: var(--ink); margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--brand); }
.gs-recent-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.gs-recent-card { flex: 0 0 156px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px;
  background: var(--gs-card); border: 1px solid var(--gs-border-soft); border-radius: 10px;
  padding: 8px; color: inherit; text-decoration: none; min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease; }
.gs-recent-card:hover { border-color: var(--g); box-shadow: 0 2px 8px rgba(178,58,26,.12); color: inherit; text-decoration: none; }
.gs-recent-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--soft); }
.gs-recent-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gs-recent-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 1.6rem; font-weight: 800; color: var(--brand); }
.gs-recent-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-recent-kind { font-size: .68rem; font-weight: 700; color: var(--mute); letter-spacing: .04em; }
.gs-recent-title { font-size: .82rem; font-weight: 600; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) { .gs-recent-card { flex-basis: 132px; } }

/* ---- 実体ページの型（メーカー・商品シリーズ）。templates/food_*.html ---- */
.ent { padding: 4px 0 32px; }
.ent-hero { padding: 16px 0 18px; border-bottom: 1px solid var(--line); margin: 0 0 20px; }
.ent-pill { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--g); background: var(--tint);
  border-radius: 999px; padding: .15rem .7rem; margin: 0 0 8px; }
.ent-h1 { font-size: 1.8rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; line-height: 1.3; }
.ent-h1 small { font-size: .95rem; font-weight: 600; color: var(--mute); margin-left: .4em; }
.ent-sub { color: var(--mute); margin: 0 0 6px; max-width: 760px; }
.ent-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ent-chips li { font-size: .8rem; font-weight: 700; color: var(--ink); background: var(--soft); border: 1px solid var(--line);
  border-radius: 999px; padding: .12rem .65rem; }
.ent-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.ent-jump a { font-size: .82rem; font-weight: 700; color: var(--g); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem .7rem; text-decoration: none; }
.ent-jump a:hover, .ent-jump a[aria-current] { border-color: var(--g); }
.ent-jump a[aria-current] { background: var(--tint); }
.ent-jump .n, .ent-sec-count { font-size: .74rem; font-weight: 600; color: var(--mute); margin-left: .4em; }
.ent-sec { margin: 0 0 30px; }
.ent-sec h3 { font-size: 1rem; font-weight: 800; margin: 14px 0 8px; color: var(--ink); }
.ent-sec h3 a { color: inherit; text-decoration: none; }
.ent-sec h3 a:hover { color: var(--g); }
.ent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ent-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ent-item:hover { border-color: var(--g); box-shadow: 0 2px 8px rgba(178,58,26,.12); color: inherit; }
.ent-item-name { font-weight: 700; color: var(--ink); }
.ent-item-sub { font-size: .8rem; color: var(--mute); }
.ent-item-meta { font-size: .76rem; color: var(--gs-soft-mute); }
.ent-badge { align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 800;
  color: var(--g); background: var(--tint); border-radius: 6px; padding: 0 .4rem; }
.ent-facts { display: grid; grid-template-columns: 10em 1fr; gap: .45rem 1rem; margin: 0 0 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.ent-facts dt { font-weight: 700; color: var(--ink); font-size: .9rem; }
.ent-facts dd { margin: 0; color: var(--gs-mute); font-size: .93rem; overflow-wrap: anywhere; }
.ent-facts dd b { color: var(--ink); }
.ent-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ent-inline li a, .ent-inline li span { display: inline-block; font-size: .84rem; font-weight: 600; background: var(--soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .6rem; text-decoration: none; }
.ent-note { font-size: .86rem; color: var(--mute); margin: 0 0 22px; }
.ent-sources { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--mute); }
.ent-sources h2 { font-size: .95rem; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.ent-sources ul { margin: 0 0 8px; padding-left: 1.2rem; }
.ent-sources li { margin: 0 0 4px; overflow-wrap: anywhere; }
.ent-verified { margin: 0; }
@media (max-width: 900px) {
  .ent-h1 { font-size: 1.45rem; }
  .ent-facts { grid-template-columns: 1fr; gap: 0; }
  .ent-facts dd { margin-bottom: .6rem; }
}

/* 表（版の表・商品一覧）。狭い画面では横スクロール */
.ent-table-wrap { overflow-x: auto; margin: 0 0 10px; }
.ent-table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.ent-table th, .ent-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ent-table th { font-size: .84rem; color: var(--mute); font-weight: 700; background: var(--soft); white-space: nowrap; }
.ent-table tr:last-child td { border-bottom: 0; }
.ent-table td b { color: var(--ink); }


/* ── スマホで見にくかった所（兄弟サービスの 2026-10-16 の洗い出しから）── */
.ent-table td:first-child { min-width: 7.5em; }
@media (max-width: 720px) {
  /* ページ内の目次・条件のチップは 1 行で横に送る */
  .ent-jump { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 6px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ent-jump::-webkit-scrollbar { display: none; }
  .ent-jump a { flex: 0 0 auto; white-space: nowrap; }
}

/* ── 食品の柱（/food/）— food_index.html / food_maker.html / food_series.html。ent-* の上に最小限だけ足す ── */
.fd-makers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.fd-maker { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.fd-maker:hover { border-color: var(--g); box-shadow: 0 2px 8px rgba(178,58,26,.12); color: inherit; }
.fd-maker-nm { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.fd-maker-st { font-size: .84rem; color: var(--mute); }
.fd-maker-st b { color: var(--g); font-size: 1.1rem; }
.ent-table td.num, .ent-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ent-table td small { color: var(--mute); font-size: .78rem; }
.fd-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }
.fd-pill { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .04em; border-radius: 999px; padding: 0 .55rem; vertical-align: middle; }
.fd-pill.is-price { background: var(--s-soft); color: var(--s-ink); }
.fd-pill.is-net { background: var(--tint); color: var(--g); }
.fd-pill.is-both { background: var(--tint); color: var(--g); }
.fd-pill.is-renewal { background: var(--y-soft); color: var(--y-deep); }
.fd-pill.is-first, .fd-pill.is-est { background: var(--soft); color: var(--mute); border: 1px solid var(--line); }
.fd-up { color: var(--g); font-weight: 700; }
.fd-down { color: var(--s-ink); font-weight: 700; }
.fd-sub { display: block; font-size: .76rem; color: var(--mute); font-weight: 500; }
/* 版の一覧: 最後の「変化」列は注記が長い（お知らせの実施日・率）。幅を確保しないと 1 行が縦に何行も折れて表が間延びする */
.fd-editions th:last-child, .fd-editions td:last-child { min-width: 320px; }
.fd-editions td:last-child .fd-sub { line-height: 1.5; }
.fd-nutri { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.fd-nutri li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.fd-nutri .k { display: block; font-size: .72rem; color: var(--mute); font-weight: 700; }
.fd-nutri .v { display: block; font-size: 1.15rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.fd-nutri .v small { font-size: .74rem; font-weight: 600; color: var(--mute); margin-left: .15em; }
.fd-nutri .v2 { display: block; font-size: .78rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.fd-ingredients { font-size: .88rem; color: var(--gs-mute); line-height: 1.8; margin: 0 0 12px; overflow-wrap: anywhere; }
.fd-trend { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; padding: 0; list-style: none; align-items: stretch; }
.fd-trend li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; min-width: 0; }
.fd-trend .k { display: block; font-size: .7rem; color: var(--mute); font-weight: 700; }
.fd-trend .v { display: block; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.fd-trend-span { font-size: .8rem; color: var(--mute); font-weight: 700; display: flex; align-items: center; }
.fd-photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.fd-photos li { width: 200px; max-width: calc(50% - 5px); }
.fd-photos figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* 商品画像は縦横比がばらばら（袋・箱・ボトル・缶）。正方形の白い枠に収めて切らない（cover で左右が欠けていた） */
.fd-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; padding: 10px; box-sizing: border-box; }
.fd-photos figcaption { font-size: .72rem; color: var(--mute); padding: 4px 8px; }
.fd-photos figcaption a { color: var(--mute); }
/* 切り口（カテゴリ・タグ）のチップと比較表 */
.fd-tagchips { margin: 4px 0 14px; }
.fd-tagchips li b { font-weight: 700; color: var(--mute); margin-left: .25em; }
.fd-tagchips li.is-on a { background: var(--g); color: #fff; border-color: var(--g); }
.fd-tagchips li.is-on a b { color: #fff; }
.fd-compare .fd-thumb { width: 56px; padding-right: 0; }
.fd-compare .fd-thumb img { display: block; width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.fd-compare td .fd-sub a { color: var(--mute); }
/* 見出しの要約行（最も大きな変化を 1 行で） */
.fd-headline { margin: 6px 0 4px; font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.5; }
.fd-headline .fd-arrow { color: var(--mute); font-weight: 600; margin: 0 .2em; }
/* 推移グラフ（階段。1 項目 1 枚） */
.fd-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.fd-chart { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 6px; min-width: 0; }
.fd-chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 2px; }
.fd-chart-h .k { font-size: .78rem; font-weight: 700; color: var(--mute); }
.fd-chart-h .v { font-size: .95rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.fd-chart-h .v .fd-sub { display: inline; margin-left: .35em; font-weight: 600; }
.fd-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.fd-chart .grid { stroke: var(--line); stroke-width: 1; }
.fd-chart .step { fill: none; stroke: var(--g); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fd-chart .dot { fill: var(--g); stroke: var(--card); stroke-width: 2; }
.fd-chart .hit { fill: transparent; }
.fd-chart .hit:hover + .dot, .fd-chart .dot:hover { r: 6; }
.fd-chart text { font-size: 10px; fill: var(--mute); font-variant-numeric: tabular-nums; }
.fd-chart text.lbl { fill: var(--ink); font-weight: 700; font-size: 10.5px; }
.fd-chart text.lbl.first { text-anchor: start; }
.fd-chart text.lbl.last { text-anchor: end; }
.fd-empty { background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 28px 20px; text-align: center; color: var(--mute); margin: 8px 0 24px; }
.fd-empty b { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 900px) {
  .fd-nutri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-nutri li:first-child { grid-column: 1 / -1; }
}