/* ラレル — 画面の見た目
   色の意味は固定: 緑=食べられる（不使用）/ 赤=含む / 灰=未確認。アクセントも緑に揃える */

/* 配色（2026-09-23 改定）: 白地・デニムネイビーの文字・ライムの差し色
   ネイビー #1a3d6e = 文字・主ボタン・リンク / ライム #effa55 = 選択・「不使用（食べられる）」
   クリムゾン #a61740 = 含む・警告 / ベリー #a61787 = 意外・お気に入り・小見出し */
:root {
  --navy: #1a3d6e;
  --lime: #effa55;
  --crimson: #a61740;
  --berry: #a61787;
  --bg: #ffffff;
  --card: #ffffff;
  --fill: #f1f4f8;
  --ink: #1a3d6e;
  --sub: #5b6f8e;
  --faint: #98a6bc;
  --line: rgba(26, 61, 110, .12);
  --accent: #1a3d6e;
  --accent-ink: #effa55;
  --accent-soft: #eef2f8;
  --btn: #1a3d6e;
  --btn-ink: #effa55;
  --free: #1a3d6e;
  --free-soft: #f6fbd2;
  --free-edge: #e2f06a;
  --contains: #a61740;
  --contains-soft: #fbeef2;
  --unknown: #8a97ab;
  --unknown-soft: #f3f5f8;
  --warn: #8a5a00;
  --warn-soft: #fdf6e3;
  --surprise: #a61787;
  --surprise-soft: #fbeef8;
  --bar: rgba(255, 255, 255, .84);
  --shadow: 0 0 0 1px rgba(26, 61, 110, .08), 0 2px 10px rgba(26, 61, 110, .05);
  --r: 16px;
  --r-s: 12px;
  --tab-h: 64px;
  color-scheme: only light;
}



*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  -webkit-font-smoothing: antialiased; font-feature-settings: "palt" 1;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
.sp { display: inline; }
@media (min-width: 600px) { .sp { display: none; } }

/* ---------- 上のバー ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.back { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; color: var(--accent); }
.back:active { background: var(--fill); }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 800; letter-spacing: .02em; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 17px; font-weight: 800; }
.brand-word { font-size: 18px; }
.topsearch { flex: 1; display: flex; align-items: center; gap: 6px; background: var(--fill); border-radius: 10px; padding: 0 10px; min-width: 0; color: var(--sub); }
.topsearch input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 7px 0; font-size: 15px; outline: none; color: var(--ink); }
.topsearch:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }

.main { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; }

/* ---------- 下のタブバー ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--faint); font-weight: 600; }
.tabbar a:hover { text-decoration: none; }
.tabbar a .i { width: 26px; height: 26px; }
.tabbar a.on { color: var(--accent); }
.tabbar a:active .i { transform: scale(.9); }

/* ---------- 文字 ---------- */
.eyebrow { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.display { font-size: clamp(30px, 8vw, 44px); line-height: 1.18; letter-spacing: -.01em; font-weight: 800; margin-top: 6px; }
.title { font-size: 26px; line-height: 1.3; font-weight: 800; letter-spacing: -.005em; margin-top: 4px; }
.title .count { font-size: 15px; color: var(--sub); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.lead { color: var(--sub); margin-top: 10px; font-size: 16px; }
.lead strong { color: var(--ink); }
.muted { color: var(--sub); font-size: 14px; }
.center { text-align: center; }
.note-small { color: var(--sub); font-size: 12.5px; line-height: 1.6; margin-top: 10px; }
h2 { font-size: 19px; font-weight: 800; line-height: 1.4; }
h2 .count { color: var(--sub); font-weight: 600; font-size: 15px; }

.hero { padding: 22px 2px 10px; }
.hero.small { padding-top: 14px; }
.results-head { padding: 14px 2px 10px; }
.results-head .muted { margin-top: 6px; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 20px; border-radius: 14px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 16px; text-decoration: none !important;
  transition: transform .12s ease-out, background-color .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.secondary { background: var(--accent-soft); color: var(--accent); }
.btn.ghost { background: var(--fill); color: var(--ink); }
.btn.good { background: var(--free); color: #fff; }
.btn.danger { background: var(--contains); color: #fff; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn.block { display: flex; width: 100%; }
.danger-text { color: var(--contains) !important; }
.btn .i { width: 1.1em; height: 1.1em; }

/* ---------- 品目タイル ---------- */
.picker-h { font-size: 13px; color: var(--sub); font-weight: 700; margin: 18px 2px 8px; letter-spacing: .03em; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 520px) { .tiles { grid-template-columns: repeat(5, 1fr); } }
.tile { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile-in {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 84px; padding: 10px 4px; border-radius: var(--r-s);
  background: var(--card); box-shadow: var(--shadow); border: 1.5px solid transparent;
  transition: transform .12s ease-out, background-color .18s, border-color .18s, color .18s;
}
.tiles.must .tile-in { min-height: 92px; }
.tile:active .tile-in { transform: scale(.95); }
.tile-name { font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; }
.tile-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: transparent; transition: background-color .18s, color .18s; }
.tile-check .i { width: 13px; height: 13px; stroke-width: 3; }
.tile input:checked + .tile-in { background: var(--ink); color: var(--bg); }
.tile input:checked + .tile-in .tile-check { background: var(--accent); color: #fff; }
.tile input:checked + .tile-in .glyph.text { background: rgba(255,255,255,.18); color: inherit; }
.tile input:focus-visible + .tile-in { border-color: var(--accent); }

.glyph { font-size: 26px; line-height: 1; display: inline-grid; place-items: center; width: 32px; height: 32px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.glyph.text { font-family: inherit; font-size: 15px; font-weight: 800; border-radius: 50%; background: var(--fill); color: var(--sub); width: 30px; height: 30px; }

/* 選択中の件数を出す下部バー。タブバーの上に浮かべる */
.actionbar { position: sticky; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px); z-index: 10; margin-top: 18px; }
.actionbar-in {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 10px 10px 16px; border-radius: 20px;
  background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 8px 30px rgba(0,0,0,.12); border: 1px solid var(--line);
}
.actionbar-sel { font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actionbar-row { display: flex; gap: 8px; flex: none; }
.actionbar .btn.primary { min-width: 132px; }

/* ---------- セクション ---------- */
.section { margin-top: 32px; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 10px; }
.section-h a { font-size: 14px; font-weight: 600; }

.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 520px) { .cats { grid-template-columns: repeat(3, 1fr); } }
.cat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-s); background: var(--card); box-shadow: var(--shadow); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; }
.cat:hover { text-decoration: none; }
.cat:active { transform: scale(.98); }
.cat-emoji { font-size: 22px; }

.group { background: var(--card); border-radius: var(--r); padding: 18px 16px; margin-top: 14px; box-shadow: var(--shadow); }
.group > h2 { margin-bottom: 10px; }
.group > p + p { margin-top: 10px; }
.group-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 12px; }

.how { background: transparent; }
.steps { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 14px; }
.steps li { display: flex; gap: 12px; }
.steps strong { display: block; font-size: 15.5px; }
.steps p { color: var(--sub); font-size: 14px; margin-top: 2px; }
.step-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 14px; }
.bullets { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 15px; }

/* ---------- 一覧カード ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card { position: relative; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); transition: transform .12s ease-out; }
.card:active { transform: scale(.985); }
.card-link { display: flex; gap: 14px; padding: 14px; color: var(--ink); }
.card-link:hover { text-decoration: none; }
.thumb { flex: none; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--fill); }
.thumb.ph, .hero-img.ph { display: grid; place-items: center; font-size: 36px; }
.card-body { min-width: 0; flex: 1; padding-right: 30px; }
.card-maker { font-size: 12.5px; color: var(--sub); font-weight: 600; }
.card-name { font-weight: 800; font-size: 16.5px; line-height: 1.35; margin-top: 1px; }
.variant { font-weight: 600; color: var(--sub); font-size: 14px; }
.card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.card-contains { font-size: 12.5px; color: var(--contains); margin-top: 6px; font-weight: 600; }
.card-contains.none { color: var(--free); }
.tri { font-size: 10px; margin-right: 3px; }
.fav-form { position: absolute; top: 8px; right: 8px; }
.fav { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; }
.fav.on { color: #ff375f; }
.fav.on .i { fill: currentColor; }
.fav:active { transform: scale(.88); }

.badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.badge .i { width: 13px; height: 13px; }
.badge.ok { background: var(--free-soft); color: var(--free); }
.badge.muted { background: var(--unknown-soft); color: var(--unknown); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.surprise { background: var(--surprise-soft); color: var(--surprise); }

/* ---------- 検索結果の上 ---------- */
.avoid-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 700; }
.pill:hover { text-decoration: none; }
.pill .glyph { font-size: 17px; width: 22px; height: 22px; }
.pill .glyph.text { font-size: 11px; width: 20px; height: 20px; background: rgba(255,255,255,.2); color: inherit; }
.pill .i { width: 14px; height: 14px; opacity: .7; }
.pill.add { background: var(--fill); color: var(--ink); padding-left: 12px; }

.chips { display: flex; gap: 6px; overflow-x: auto; margin: 4px -16px 0; padding: 4px 16px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; }
.chip:hover { text-decoration: none; }
.chip.on { background: var(--accent); color: var(--accent-ink); }

.filterbar { display: flex; justify-content: flex-end; margin: 4px 0 10px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.toggle:hover { text-decoration: none; }
.switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--fill); transition: background-color .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.3,.7,.4,1); }
.toggle.on .switch { background: var(--free); }
.toggle.on .switch::after { transform: translateX(18px); }

.empty { text-align: center; padding: 44px 16px; }
.empty-emoji { font-size: 44px; }
.empty h2 { margin: 8px 0 6px; }
.empty p { color: var(--sub); margin-bottom: 18px; font-size: 15px; }

/* ---------- 商品ページ ---------- */
.product-head { display: flex; gap: 16px; align-items: center; padding: 14px 2px 4px; }
.hero-img { flex: none; width: 112px; height: 112px; border-radius: 20px; object-fit: cover; background: var(--card); box-shadow: var(--shadow); }
.product-name { font-size: 25px; line-height: 1.3; font-weight: 800; margin-top: 2px; }
.product-variant { color: var(--sub); font-weight: 700; }

.verdict { border-radius: var(--r); padding: 16px; margin-top: 14px; }
.verdict-main { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; line-height: 1.4; }
.verdict-main .i { width: 26px; height: 26px; stroke-width: 2.5; }
.verdict-sub { margin-top: 4px; font-weight: 600; font-size: 14.5px; }
.verdict-foot { margin-top: 8px; font-size: 12.5px; opacity: .8; }
.verdict.good { background: var(--free-soft); color: var(--free); }
.verdict.bad { background: var(--contains-soft); color: var(--contains); }
.verdict.mid { background: var(--unknown-soft); color: var(--ink); }
.verdict a { color: inherit; text-decoration: underline; }

.surprise-box { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--surprise-soft); }
.surprise-box strong { color: var(--surprise); }
.surprise-box p { font-size: 13.5px; color: var(--sub); }
.surprise-emoji { font-size: 22px; }

.legend { display: flex; gap: 10px; font-size: 12px; font-weight: 700; }
.st.contains { color: var(--contains); } .st.free { color: var(--free); } .st.unknown { color: var(--unknown); }
.atable { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 520px) { .atable { grid-template-columns: repeat(5, 1fr); } }
.acell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 12px; font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.25; }
.acell .glyph { font-size: 22px; width: 28px; height: 28px; }
.acell .glyph.text { font-size: 13px; width: 26px; height: 26px; }
.acell-mark { font-size: 15px; font-weight: 800; }
.acell.contains { background: var(--contains-soft); color: var(--contains); }
.acell.free { background: var(--free-soft); color: var(--free); }
.acell.unknown { background: var(--unknown-soft); color: var(--unknown); }
.acell.mine { box-shadow: inset 0 0 0 2px currentColor; }
.contam { margin-top: 12px; font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); }
.contam strong { display: block; color: var(--warn); font-size: 12.5px; }
.pnote { margin-top: 10px; font-size: 14px; color: var(--sub); }

.rows { list-style: none; padding: 0; margin: 0; }
.rows li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.rows li:first-child { border-top: 0; }
.row-k { flex: none; width: 64px; color: var(--sub); font-weight: 700; font-size: 13px; padding-top: 1px; }
.row-v { flex: 1; min-width: 0; }
.rows.links li { padding: 0; }
.rows.links a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 0; color: var(--ink); }
.rows.links a span:first-child { flex: 1; font-weight: 600; }
.rows.links .i { color: var(--faint); }
.warnline { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 13.5px; color: var(--warn); font-weight: 600; }

.check-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: flex-start; }
details.inline { flex: 1 1 100%; }
details.inline > summary { list-style: none; display: inline-flex; }
details.inline > summary::-webkit-details-marker { display: none; }
details.inline[open] > summary { margin-bottom: 10px; }
.check-actions > form { display: contents; }

.buy-row { display: flex; flex-wrap: wrap; gap: 8px; }
.buy-row form { display: inline; }
.btn.buy { flex: 1 1 140px; }
.btn.amazon { background: #ffd814; color: #111; }
.btn.rakuten { background: #bf0000; color: #fff; }

.toolrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.toolrow form { display: contents; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border: 0; border-radius: var(--r-s); background: var(--card); box-shadow: var(--shadow); color: var(--accent); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tool:hover { text-decoration: none; }
.tool:active { transform: scale(.96); }
.tool .i { width: 24px; height: 24px; }
.tool.on { color: #ff375f; }
.tool.on .i { fill: currentColor; }

.review { padding: 12px 0; border-top: 1px solid var(--line); }
.review:first-of-type { border-top: 0; }
.review-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.review p { margin-top: 4px; font-size: 15px; }
.stars { color: #ff9f0a; letter-spacing: 1px; }

details.addbox { margin-top: 12px; }
details.addbox > summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 8px 0; list-style: none; }
details.addbox > summary::-webkit-details-marker { display: none; }
details.addbox > summary::before { content: "＋ "; }

.staff { border: 1.5px dashed var(--line); box-shadow: none; }

.banner { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); margin-top: 14px; font-size: 14.5px; }
.banner .i { width: 22px; height: 22px; margin-top: 2px; }
.banner.danger { background: var(--contains-soft); color: var(--contains); }
.banner strong { display: block; font-size: 15.5px; }
.banner p { margin-top: 4px; }
.quote { color: var(--ink); }
.quote span { color: var(--sub); font-size: 12.5px; }

/* ---------- フォーム ---------- */
.stack { display: grid; gap: 14px; }
.pform label, .stack label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--sub); }
.pform .group > label + label, .pform .group > label { margin-top: 14px; }
.pform .group > h2 + label { margin-top: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  font-size: 16px; font-weight: 500; color: var(--ink); outline: none; transition: box-shadow .15s, border-color .15s;
}
.topsearch input { border: 0 !important; background: transparent !important; padding: 7px 0 !important; box-shadow: none !important; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.req { margin-left: 6px; font-size: 11px; color: var(--contains); }
details.more { margin-top: 14px; }
details.more > summary { cursor: pointer; font-weight: 700; color: var(--accent); font-size: 14px; }

.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo { position: relative; display: grid !important; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; border: 1.5px dashed var(--line); cursor: pointer; text-align: center; }
.photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-prev { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 12px; background: var(--fill); font-size: 32px; overflow: hidden; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; }

.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.arows { margin: 12px 0 4px; }
.arow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.arow:first-child { border-top: 0; }
.arow-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; min-width: 0; }
.arow-name .glyph { font-size: 20px; width: 26px; height: 26px; }
.arow-name .glyph.text { font-size: 12px; width: 24px; height: 24px; }
.seg { display: inline-grid; grid-template-columns: repeat(3, auto); background: var(--fill); padding: 2px; border-radius: 10px; flex: none; }
.seg label { display: block !important; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--sub); transition: background-color .15s, color .15s; }
.seg input:checked + span { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg-contains input:checked + span { color: var(--contains); }
.seg-free input:checked + span { color: var(--free); }
.seg-unknown input:checked + span { color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }

.radios { display: grid; gap: 8px; }
.radio { display: flex !important; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg); color: var(--ink) !important; cursor: pointer; }
.radio input { accent-color: var(--accent); width: 18px; height: 18px; }
.submitbar { position: sticky; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px); margin-top: 18px; }
.submitbar .btn { box-shadow: 0 8px 24px rgba(0,0,0,.15); }

.rating { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rating legend { font-size: 14px; font-weight: 700; color: var(--sub); margin-bottom: 4px; width: 100%; }
.rating input { position: absolute; opacity: 0; }
.rating label { font-size: 30px !important; color: var(--fill) !important; cursor: pointer; display: inline !important; }
.rating input:checked ~ label, .rating label:hover, .rating label:hover ~ label { color: #ff9f0a !important; }

.auth { max-width: 440px; margin: 0 auto; padding-top: 14px; }
.auth .group { margin-top: 16px; }
.auth .center { margin-top: 18px; font-size: 15px; }

.timeline { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.timeline li { background: var(--card); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); }
.timeline li.pending { box-shadow: inset 0 0 0 1.5px var(--warn); }
.timeline li.rejected { opacity: .6; }
.tl-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.diff { margin: 8px 0 0; padding-left: 1.1em; font-size: 14px; }
.qitem { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.qitem:first-of-type { border-top: 0; }

.disclaimer { margin-top: 26px; padding: 14px 16px; border-radius: var(--r); background: var(--fill); color: var(--sub); font-size: 12.5px; line-height: 1.75; }
.group .disclaimer { margin-top: 0; background: transparent; padding: 0; }
.disclaimer strong { color: var(--ink); }

.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); z-index: 50; transform: translateX(-50%);
  max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 16px; background: var(--ink); color: var(--bg);
  font-size: 14.5px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.2);
  animation: toast-in .35s cubic-bezier(.2,.9,.3,1), toast-out .3s ease-in 4.2s forwards;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, -8px); visibility: hidden; } }

.foot { max-width: 760px; margin: 12px auto 0; padding: 18px 16px 26px; color: var(--faint); font-size: 12px; text-align: center; }
.foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.foot nav a { color: var(--sub); font-weight: 600; }
.foot .copy { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .toast { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .tabbar, .actionbar-in { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- 開閉式（推奨20品目） ---------- */
:root { interpolate-size: allow-keywords; }
.acc { margin-top: 14px; border-radius: var(--r-s); background: var(--card); box-shadow: var(--shadow); }
.group .acc { box-shadow: none; background: var(--bg); }
.acc-sum { display: flex; align-items: center; gap: 10px; padding: 14px 14px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.acc-sum::-webkit-details-marker { display: none; }
.acc-title { flex: 1; min-width: 0; font-weight: 800; font-size: 15.5px; line-height: 1.4; }
.acc-sub { display: block; font-weight: 500; font-size: 12.5px; color: var(--sub); margin-top: 1px; }
.acc-sub .c { color: var(--contains); font-weight: 700; }
.acc-count { flex: none; font-size: 12px; font-weight: 700; color: var(--bg); background: var(--ink); padding: 3px 9px; border-radius: 999px; }
.acc-chev { flex: none; color: var(--faint); display: grid; transition: transform .3s cubic-bezier(.3,.7,.4,1); }
.acc[open] .acc-chev { transform: rotate(90deg); }
.acc > .tiles, .acc > .atable, .acc > .arows { padding: 0 10px 12px; }
.acc > .arows { padding: 0 12px 6px; margin: 0; }
.acc::details-content { block-size: 0; overflow: clip; transition: block-size .32s cubic-bezier(.3,.7,.4,1), content-visibility .32s allow-discrete; }
.acc[open]::details-content { block-size: auto; }

.badge.official { background: var(--accent-soft); color: var(--accent); }

.ingr { margin-top: 12px; }
.ingr > summary { cursor: pointer; font-weight: 700; color: var(--accent); font-size: 14px; list-style: none; }
.ingr > summary::-webkit-details-marker { display: none; }
.ingr > summary::after { content: " ›"; }
.ingr[open] > summary::after { content: " ⌄"; }
.ingr > p:first-of-type { margin-top: 8px; font-size: 13.5px; line-height: 1.7; padding: 10px 12px; border-radius: 10px; background: var(--bg); }

/* ---------- 写真 ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 520px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery > .muted { grid-column: 1 / -1; }
.shot { margin: 0; min-width: 0; }
.shot-btn { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--fill); aspect-ratio: 1; cursor: zoom-in; }
.shot-btn img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { font-size: 11px; color: var(--sub); margin-top: 4px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; }
.shot-add { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed var(--line); color: var(--accent); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.shot-add .photo-prev { width: 44px; height: 44px; font-size: 22px; background: var(--accent-soft); border-radius: 50%; }
.shot-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.shot.add.busy .shot-add { opacity: .5; pointer-events: none; }
.inline-form { display: inline; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--contains); font-size: 11px; cursor: pointer; text-decoration: underline; }
.zoom { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.zoom::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(6px); }
.zoom[open] { display: grid; place-items: center; animation: zoom-in .28s cubic-bezier(.2,.9,.3,1); }
.zoom img { max-width: 96vw; max-height: 88vh; border-radius: 10px; object-fit: contain; }
.zoom form { position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: 12px; }
.zoom-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; cursor: pointer; }
@keyframes zoom-in { from { opacity: 0; transform: scale(.96); } }

/* ---------- お店 ---------- */
.store-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.store-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13.5px; }
.store-chip .i { width: 15px; height: 15px; }
.store-chip b { font-size: 11.5px; background: var(--card); color: var(--accent); border-radius: 999px; padding: 0 6px; }
.storeform { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.storeform-h { font-weight: 800; margin-bottom: 8px; }
.store-group { margin-top: 10px; }
.store-group-h { display: block; font-size: 12px; font-weight: 700; color: var(--sub); margin-bottom: 6px; }
.store-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sopt { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sopt input { position: absolute; opacity: 0; pointer-events: none; }
.sopt span { display: inline-block; padding: 7px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; transition: background-color .15s, color .15s, transform .1s; }
.sopt:active span { transform: scale(.95); }
.sopt input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sopt input:focus-visible + span { outline: 2px solid var(--accent); }
.sopt.other span { border-style: dashed; }
.storeform [data-other-box] { margin-top: 12px; }
.store-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.store-extra label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sub); }
.btn[disabled] { opacity: .45; pointer-events: none; }
@media (max-width: 480px) { .actionbar-sel { display: none; } .actionbar-row { flex: 1; justify-content: flex-end; } .actionbar-in { padding-left: 10px; } }

/* ---------- 配色の当て方（白地・ネイビー・ライム） ---------- */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--free-edge); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
.brand, .cat, .chip, .pill, .card-link, .tabbar a, .tool, .btn, .store-chip, .rows.links a, .back, .foot nav a { text-decoration: none; }
.eyebrow { color: var(--surprise); letter-spacing: .08em; }
.brand-mark { background: var(--lime); color: #1a3d6e; }
.topsearch { background: var(--fill); }
.topsearch:focus-within { box-shadow: 0 0 0 3px var(--free-edge); }

.btn.primary { background: var(--btn); color: var(--btn-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.secondary { background: var(--lime); color: #1a3d6e; }
.btn.ghost { background: var(--fill); color: var(--ink); }
.btn.good { background: var(--lime); color: #1a3d6e; }
.btn.danger { background: var(--crimson); color: #fff; }
.danger-text { color: var(--contains) !important; }
.btn.buy { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.amazon::before, .btn.rakuten::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.btn.amazon::before { background: #ff9900; }
.btn.rakuten::before { background: #bf0000; }

.tile-in { box-shadow: var(--shadow); }
.tile input:checked + .tile-in { background: #1a3d6e; color: #fff; }
.tile input:checked + .tile-in .tile-check { background: var(--lime); color: #1a3d6e; }
.tile input:focus-visible + .tile-in { border-color: var(--lime); }
.actionbar-in { box-shadow: 0 10px 30px rgba(26,61,110,.14); }
.acc-count { background: #1a3d6e; color: var(--lime); }

.chip.on { background: #1a3d6e; color: var(--lime); }
.pill { background: #1a3d6e; color: #fff; }
.pill.add { background: var(--fill); color: var(--ink); }
.toggle.on .switch { background: #1a3d6e; }
.toggle.on .switch::after { background: var(--lime); }

.badge.ok { background: #1a3d6e; color: var(--lime); }
.badge.official { background: var(--accent-soft); color: var(--ink); }
.badge.muted { background: var(--unknown-soft); color: var(--unknown); }
.badge.surprise { background: var(--surprise-soft); color: var(--surprise); }
.card-contains.none { color: var(--sub); }
.fav.on, .tool.on { color: var(--berry); }
.stars, .rating input:checked ~ label, .rating label:hover, .rating label:hover ~ label { color: var(--berry) !important; }
.tool { color: var(--ink); }

.verdict.good { background: var(--free-soft); color: var(--ink); box-shadow: inset 4px 0 0 var(--lime); }
.verdict.good .verdict-main .i { color: var(--ink); background: var(--lime); border-radius: 50%; padding: 3px; }
.verdict.bad { background: var(--contains-soft); color: var(--contains); box-shadow: inset 4px 0 0 var(--crimson); }
.verdict.mid { box-shadow: inset 4px 0 0 var(--faint); }
.surprise-box { box-shadow: inset 4px 0 0 var(--berry); }
.acell.free { background: var(--free-soft); color: var(--ink); }
.acell.free .acell-mark { color: var(--sub); }
.st.free { color: var(--ink); }
.step-n { background: var(--lime); color: #1a3d6e; }
.store-chip { background: var(--accent-soft); color: var(--ink); }
.sopt input:checked + span, .seg input:checked + span { }
.sopt input:checked + span { background: #1a3d6e; color: #fff; border-color: #1a3d6e; }
.seg-free input:checked + span { color: var(--ink); background: var(--lime); }
.seg-contains input:checked + span { color: #fff; background: var(--crimson); }
.radio input { accent-color: #1a3d6e; }
input:focus, select:focus, textarea:focus { border-color: #1a3d6e; box-shadow: 0 0 0 3px var(--free-edge); }
.toast { background: #1a3d6e; color: #fff; }
.toast::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); margin-right: 8px; vertical-align: 2px; }
.tabbar a.on { color: var(--ink); }
.tabbar a.on .i { filter: drop-shadow(0 3px 0 var(--lime)); }
.disclaimer { background: var(--fill); }
.shot-add { color: var(--ink); }
.shot-add .photo-prev { background: var(--free-soft); }


/* ラレルについて：エピソード */
.story, .kids { padding: 22px 18px; }
.story .eyebrow, .kids .eyebrow { font-size: 11.5px; margin-bottom: 4px; }
.story h2, .kids h2 { font-size: 22px; margin-bottom: 12px; }
.story p:not(.eyebrow):not(.sign), .kids p:not(.eyebrow) { font-size: 15.5px; line-height: 1.95; }
.story p + p, .kids p + p { margin-top: 12px; }
.story .sign { text-align: right; font-weight: 700; font-size: 14px; color: var(--sub); margin-top: 18px; }
.kids { background: var(--free-soft); box-shadow: inset 4px 0 0 var(--lime); }
/* ライムは「選択」と「食べられる」の印に絞る。補助ボタンは薄いネイビー */
.btn.secondary { background: var(--lime); color: #1a3d6e; }
.btn.buy { white-space: nowrap; font-size: 15px; padding: 0 12px; }
:root { --free-soft: #f8fcdc; }

.hero.small .display { font-size: clamp(22px, 6.2vw, 38px); }
/* 背景 #f7f7ed（2026-09-23 指定）。カードは白のまま */
:root { --bg: #f7f7ed; --fill: #ededdf; --bar: rgba(247, 247, 237, .86); }


.toggle, .toggle:hover, .cat:hover, .chip:hover { text-decoration: none; }
/* 配色ルール（2026-09-23 指定）: 青みの面は使わない。
   サブのボタン＝ライム地＋ネイビー文字 / 札・バッジなどの淡い面＝薄いライム / 無地の面＝背景と同系の生成り */
:root { --accent-soft: #f3f8c6; }
.btn.secondary { background: var(--lime); color: #1a3d6e; }
.btn.secondary:hover { filter: brightness(.97); }
/* 買うボタン（アフィリエイト）: ローズ #b8325a。クリムゾン（含む）とベリー（意外）の間の色で、警告と見分けられるようにする */
:root { --rose: #b8325a; }
.btn.buy { background: var(--rose); color: #fff; box-shadow: none; }
.btn.buy:hover { background: #a02a4e; filter: none; }
.btn.amazon::before, .btn.rakuten::before { content: none; }
.btn.buy::after { content: "↗"; font-size: .9em; opacity: .75; margin-left: 2px; }

/* ---------- ユーザー名の札 ---------- */
.user { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 2px; border-radius: 999px; background: var(--accent-soft); color: #1a3d6e; font-weight: 700; font-size: .92em; line-height: 1.6; vertical-align: 1px; white-space: nowrap; }
.user-av { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #1a3d6e; color: var(--lime); font-size: .78em; font-weight: 800; }
.muted .user, .quote .user, figcaption .user { font-size: 11.5px; }
figcaption .user { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 見出しと文字情報を読みやすく ----------
   見出しは字詰め（palt）を外して少し字間を広げる。セクション見出しにはライムの縦線 */
h1, h2, h3, .title, .display, .product-name, .card-name, .acc-title, .steps strong, .verdict-main { font-feature-settings: normal; letter-spacing: .04em; }
.display { letter-spacing: .03em; line-height: 1.3; }
.title, .product-name { line-height: 1.45; }
.group > h2, .section-h h2, .how > h2 { position: relative; padding-left: 14px; line-height: 1.5; margin-bottom: 14px; }
.group > h2::before, .section-h h2::before, .how > h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 3px; background: var(--lime); box-shadow: inset 0 0 0 1px rgba(26,61,110,.08); }
.story h2, .kids h2 { padding-left: 0; }
.story h2::before, .kids h2::before { content: none; }
.picker-h { display: flex; align-items: center; gap: 8px; letter-spacing: .06em; }
.picker-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.group p, .group li, .steps p, .rows li { line-height: 1.8; }
.muted { letter-spacing: .02em; }
.row-k { letter-spacing: .04em; }
.steps strong { margin-bottom: 2px; }
.card-name { line-height: 1.45; }
.eyebrow { font-feature-settings: normal; }
.group-h h2 { position: relative; padding-left: 14px; line-height: 1.5; }
.group-h h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 3px; background: var(--lime); box-shadow: inset 0 0 0 1px rgba(26,61,110,.08); }
.more { margin-top: 14px; }

/* 行の見出し（根拠・確認…）と小見出し（パッケージ・原材料…）を札にして目立たせる */
.row-k { flex: none; width: auto; min-width: 72px; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 10px; margin-top: 2px; border-radius: 8px; background: var(--accent-soft); color: #1a3d6e; font-weight: 800; font-size: 12.5px; letter-spacing: .08em; line-height: 1.6; }
.row-k .i { width: 14px; height: 14px; }
.rows li { align-items: flex-start; }
.picker-h { color: #1a3d6e; font-weight: 800; font-size: 13.5px; letter-spacing: .06em; margin-top: 20px; }
.picker-h::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 0 1.5px #1a3d6e; transform: rotate(45deg); margin: 0 2px 0 3px; }
.picker-h::after { background: linear-gradient(90deg, var(--line), transparent); }
.store-group-h { color: #1a3d6e; font-weight: 800; letter-spacing: .06em; }
.cards .anchor { list-style: none; height: 0; scroll-margin-top: 80px; }

/* ---------- 一覧のツールバー ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.toolbar { display: grid; gap: 8px; margin: 6px 0 4px; }
.tb-search { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 12px; padding: 0 12px; box-shadow: var(--shadow); color: var(--sub); }
.tb-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 11px 0 !important; font-size: 15px; }
.tb-row { display: flex; gap: 8px; align-items: center; }
.tb-select { flex: 1; min-width: 0; }
.tb-select select { padding: 9px 30px 9px 12px; font-size: 14px; font-weight: 700; background: var(--card); border: 0; box-shadow: var(--shadow); border-radius: 12px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #1a3d6e 50%), linear-gradient(135deg, #1a3d6e 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
.viewtoggle { flex: none; display: flex; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 3px; }
.viewtoggle a { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 9px; color: var(--faint); text-decoration: none; }
.viewtoggle a.on { background: #1a3d6e; color: var(--lime); }
.viewtoggle .i { width: 18px; height: 18px; }
.filterbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.filterbar .toggle { margin-left: auto; }
.clearfilter { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--crimson); text-decoration: none; }
.clearfilter .i { width: 14px; height: 14px; }

/* ---------- カードの価格・レビュー ---------- */
.card-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; }
.card-price { font-weight: 800; color: #1a3d6e; }
.card-rv { font-weight: 700; }
.card-rv .stars { margin-right: 2px; }

/* ---------- タイル表示 ---------- */
.cards.tiles-view { grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .cards.tiles-view { grid-template-columns: repeat(3, 1fr); } }
.tcard .card-link { flex-direction: column; gap: 0; padding: 0; height: 100%; }
.tcard .thumb { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r) var(--r) 0 0; background: #fff; object-fit: contain; padding: 8px; }
.tcard .thumb.ph { font-size: 44px; background: var(--fill); padding: 0; }
.tcard .card-body { padding: 10px 12px 12px; }
.tcard .card-name { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tcard .variant { font-size: 12.5px; }
.tcard .card-badges .badge { font-size: 10.5px; }
.tcard .card-contains { font-size: 11.5px; }
.tcard .fav-form { top: 6px; right: 6px; }
.tcard .fav { background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.cards .anchor { grid-column: 1 / -1; }
.btn.buy.yahoo { flex-basis: 100%; }

/* ---------- 画像の差し込み枠（画像が置かれるまではプレースホルダー） ---------- */
.art { margin: 0; overflow: hidden; border-radius: var(--r); background: var(--fill); }
.art img { width: 100%; height: 100%; object-fit: cover; }
.art-ph { position: relative; display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, #f3f7cf 0 14px, #f7f9e3 14px 28px); box-shadow: inset 0 0 0 1.5px rgba(26,61,110,.12); }
.art-ph-label { display: grid; gap: 2px; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.8); color: #1a3d6e; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.art-ph-label small { font-weight: 600; color: var(--sub); font-size: 10.5px; letter-spacing: .02em; }
.art-ph-prompt { position: absolute; left: 8px; right: 8px; bottom: 8px; text-align: left; font-size: 11px; }
.art-ph-prompt summary { display: inline-block; cursor: pointer; background: #1a3d6e; color: var(--lime); padding: 2px 8px; border-radius: 6px; font-weight: 700; }
.art-ph-prompt p { margin-top: 4px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.95); color: #1a3d6e; max-height: 9em; overflow: auto; line-height: 1.5; }
.art-wide { margin: 12px 0 4px; }
.art-in { margin: 4px 0 14px; }
.art-empty { width: 180px; margin: 0 auto 8px; border-radius: 24px; }

/* ---------- トップのヒーロー ---------- */
.hero-main { display: grid; gap: 16px; padding: 18px 0 6px; }
.hero-main .display { font-size: clamp(28px, 7.6vw, 46px); margin-top: 6px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 0; }
.hero-stats div { background: var(--card); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); }
.hero-stats dt { font-size: 11.5px; color: var(--sub); font-weight: 700; letter-spacing: .06em; }
.hero-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; color: #1a3d6e; letter-spacing: .02em; font-feature-settings: "tnum"; }
.hero-stats small { font-size: 12px; margin-left: 2px; color: var(--sub); }
.hero-art { border-radius: 24px; }
@media (min-width: 720px) { .hero-main { grid-template-columns: 1.05fr 1fr; align-items: center; } }

.about-link { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.about-link:hover { text-decoration: none; }
.about-link:active { transform: scale(.99); }
.about-link-art { flex: none; width: 96px; border-radius: 12px; }
.about-link-art .art-ph-label { font-size: 9.5px; padding: 3px 6px; }
.about-link-art .art-ph-label small, .about-link-art .art-ph-prompt { display: none; }
.about-link-body { display: grid; gap: 3px; min-width: 0; }
.about-link-body .eyebrow { font-size: 11.5px; }
.about-link-body strong { font-size: 15px; line-height: 1.5; }
.about-link-body .muted { font-size: 12.5px; }
.about-link-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: #1a3d6e; }

.finder-head { margin-top: 30px; }
.section-title { font-size: 24px; line-height: 1.4; font-weight: 800; letter-spacing: .04em; font-feature-settings: normal; }
.finder-head .muted { margin-top: 6px; }
.cat-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.nw { display: inline-block; }
.hero-main .display { font-size: clamp(22px, 6.6vw, 44px); line-height: 1.35; }
.hero-main .hero-art { order: -1; }
@media (min-width: 720px) { .hero-main .hero-art { order: 0; } }
.hero-cta .btn { flex: 1 1 auto; }

/* =====================================================================
   動き（2026-09-23）: Apple のサイトの型。控えめなイージング、スクロール連動、ポインタ連動
   速度の基準: 出現 0.9s / 反応 0.2s / イージング cubic-bezier(.16,1,.3,1)（expo-out）
   ===================================================================== */
:root { --ease: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); }
.pc { display: none; }
@media (min-width: 720px) { .pc { display: inline; } }

/* ---------- ヒーロー ---------- */
.hx { position: relative; padding: 34px 0 8px; text-align: center; isolation: isolate; }
.hx::before { content: ""; position: absolute; z-index: -1; inset: -40px -16px 30%; pointer-events: none;
  background: radial-gradient(420px circle at var(--hx, 50%) var(--hy, 20%), rgba(239,250,85,.55), transparent 65%);
  opacity: var(--spot, .7); transition: opacity .6s var(--ease); }
.hx-copy { max-width: 760px; margin: 0 auto; }
.hx-title { margin-top: 10px; font-size: clamp(28px, 7.4vw, 60px); line-height: 1.22; font-weight: 800; letter-spacing: .02em; font-feature-settings: normal; color: #1a3d6e; }
.hx-line { display: block; overflow: hidden; padding-bottom: .06em; }
.hx-line > .hx-in { display: inline-block; }
.hx-lead { margin: 18px auto 0; max-width: 34em; color: var(--sub); font-size: clamp(15px, 2.2vw, 18px); line-height: 1.9; }
.hx-lead strong { color: #1a3d6e; }
.hx-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; }
.btn.linkish { background: none; color: #1a3d6e; padding: 0 6px; }
.btn.linkish .i { transition: transform .3s var(--ease); }
.btn.linkish:hover .i { transform: translateX(3px); }

/* 開いた瞬間の出現（見出しは下から滑り上がる） */
.hx-in { animation: hx-rise 1.1s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }
.hx-line > .hx-in { animation-name: hx-line; }
@keyframes hx-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes hx-line { from { transform: translateY(105%); } }

/* 画面いっぱいに広がる画像（--p: 0→1 はスクロールの進み具合） */
.hx-media { --p: 0; width: 100vw; margin: 34px calc(50% - 50vw) 0; display: flex; justify-content: center; }
.hx-media-in { width: 100%; max-width: 1280px; transform: scale(calc(.9 + .1 * var(--p))); transform-origin: 50% 0; border-radius: calc(28px * (1 - var(--p) * .7)); overflow: hidden; will-change: transform;
  box-shadow: 0 30px 80px -30px rgba(26,61,110,.35); animation: hx-rise 1.3s var(--ease) both .35s; }
.hx-art { border-radius: 0; aspect-ratio: 16 / 9; }
.hx-art img, .hx-art .art-ph-blob { transform: translateY(var(--py, 0px)) scale(1.08); }
@media (max-width: 719px) { .hx-art { aspect-ratio: 4 / 3.4 !important; } }

.hx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 640px; margin: 26px auto 0; }
.hx-stats div { padding: 12px 8px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.hx-stats dt { font-size: 11.5px; color: var(--sub); font-weight: 700; letter-spacing: .08em; }
.hx-stats dd { margin: 2px 0 0; font-size: clamp(20px, 5.4vw, 30px); font-weight: 800; color: #1a3d6e; font-feature-settings: "tnum"; letter-spacing: .01em; }
.hx-stats small { font-size: 12px; margin-left: 2px; color: var(--sub); font-weight: 700; }
.hx-sub { padding-bottom: 20px; }

/* ---------- プロモーションのタイル（画像の上に文字） ---------- */
.promo { position: relative; display: block; margin-top: 22px; border-radius: 28px; overflow: hidden; color: #fff; text-decoration: none !important;
  box-shadow: 0 20px 50px -24px rgba(26,61,110,.45); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.promo-art { border-radius: 0; aspect-ratio: 4 / 3 !important; }
@media (min-width: 720px) { .promo-art { aspect-ratio: 21 / 9 !important; } }
.promo-art img, .promo-art .art-ph-blob { transition: transform 1.2s var(--ease); }
.promo:hover .promo-art img, .promo:hover .promo-art .art-ph-blob { transform: scale(1.05); }
.promo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,61,110,0) 30%, rgba(26,61,110,.55) 62%, rgba(14,34,62,.9) 100%); pointer-events: none; }
.promo-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 22px 22px 24px; }
.promo-eyebrow { color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.promo-title { font-size: clamp(19px, 4.8vw, 30px); line-height: 1.45; letter-spacing: .03em; font-feature-settings: normal; }
.promo-more { display: inline-flex; align-items: center; gap: 2px; color: var(--lime); font-weight: 700; font-size: 14.5px; }
.promo-more .i { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.promo:hover .promo-more .i { transform: translateX(4px); }
.promo .art-ph-label, .promo .art-ph-prompt { display: none; }

/* ---------- 画像が来るまでの枠：ブランド色がゆっくり揺らぐ ---------- */
.art-ph { position: relative; overflow: hidden; background: linear-gradient(135deg, #f8f8ec, #fbfde6 45%, #eef1f6); box-shadow: none; display: block; }
.art-ph::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .24  0 0 0 0 .43  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.art-ph-blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .9; }
.art-ph-blob.b1 { width: 60%; height: 80%; left: -10%; top: -20%; background: radial-gradient(circle, rgba(239,250,85,.95), rgba(239,250,85,0) 70%); animation: blob1 16s var(--ease-in-out) infinite alternate; }
.art-ph-blob.b2 { width: 55%; height: 75%; right: -12%; bottom: -25%; background: radial-gradient(circle, rgba(26,61,110,.35), rgba(26,61,110,0) 70%); animation: blob2 19s var(--ease-in-out) infinite alternate; }
.art-ph-blob.b3 { width: 40%; height: 55%; left: 38%; top: 25%; background: radial-gradient(circle, rgba(166,23,135,.18), rgba(166,23,135,0) 70%); animation: blob3 23s var(--ease-in-out) infinite alternate; }
@keyframes blob1 { to { transform: translate(18%, 12%) scale(1.1); } }
@keyframes blob2 { to { transform: translate(-16%, -10%) scale(1.15); } }
@keyframes blob3 { to { transform: translate(-22%, 14%) scale(.9); } }
.art-ph-label { position: absolute; left: 12px; top: 12px; z-index: 1; display: grid; gap: 1px; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.85); color: #1a3d6e; font-size: 11px; font-weight: 800; text-align: left; }
.art-ph-prompt { z-index: 1; }
.media-in { border-radius: 20px; overflow: hidden; margin: 6px 0 16px; }
.media-in .art { border-radius: 0; margin: 0; }
.media-in .art img, .media-in .art-ph-blob { transform: translateY(var(--py, 0px)) scale(1.1); }

/* ---------- スクロールで浮かび上がる ---------- */
.rv { opacity: 0; transform: translateY(26px); }
.rv.in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--rd, 0ms); }

/* ---------- ポインタ連動：傾き＋光の映り込み ---------- */
@media (hover: hover) and (pointer: fine) {
  [data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
  [data-tilt].tilting { transition: transform .12s linear, box-shadow .4s var(--ease); }
  [data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 55%); mix-blend-mode: soft-light; }
  [data-tilt].tilting::after { opacity: 1; }
  .card[data-tilt]:hover { box-shadow: 0 18px 40px -22px rgba(26,61,110,.4), 0 0 0 1px rgba(26,61,110,.06); }
  .cat[data-tilt] { position: relative; }
  .cat[data-tilt]:hover { box-shadow: 0 14px 30px -18px rgba(26,61,110,.35); }
}
.card .thumb { transition: transform .8s var(--ease); }
.card:hover .thumb { transform: scale(1.04); }
.tcard { overflow: hidden; }

/* ボタン：押したときの沈み込みと、主ボタンの光 */
.btn { transition: transform .25s var(--ease), background-color .2s, box-shadow .3s var(--ease), filter .2s; }
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(239,250,85,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.btn.primary:hover::after { transform: translateX(120%); }
[data-magnetic] { transform: translate(var(--tx, 0px), var(--ty, 0px)); }

/* 品目タイル：選んだ瞬間にチェックが弾む */
.tile input:checked + .tile-in .tile-check { animation: pop .45s cubic-bezier(.3, 1.7, .5, 1); }
.tile input:checked + .tile-in { animation: press .35s var(--ease); }
@keyframes pop { from { transform: scale(.3); } }
@keyframes press { 40% { transform: scale(.96); } }
.actionbar { transition: transform .5s var(--ease); }

/* ヘッダー：スクロールしたら影 */
.topbar { transition: box-shadow .4s var(--ease), background-color .4s; }
.topbar.scrolled { box-shadow: 0 6px 24px -12px rgba(26,61,110,.25); }

/* 横スクロールのジャンルは端をぼかす */
.chips { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); }
.chip { transition: background-color .25s var(--ease), color .25s, transform .25s var(--ease); }
.chip:active { transform: scale(.95); }

/* 29品目表：表示されたら順に現れる */
.atable.rv-cascade .acell { opacity: 0; transform: translateY(10px) scale(.97); }
.atable.rv-cascade.in .acell { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 22ms); }
.verdict { animation: hx-rise .9s var(--ease) both .15s; }

@media (prefers-reduced-motion: reduce) {
  .hx-in, .hx-media-in, .verdict { animation: none !important; }
  .rv, .atable.rv-cascade .acell { opacity: 1 !important; transform: none !important; }
  .hx-media-in { transform: none !important; }
  .art-ph-blob { animation: none !important; }
  [data-tilt] { transform: none !important; }
}
/* 見出しは1行ずつ折り返さない大きさに／光は画面幅いっぱいで下へ消える */
.hx-copy { max-width: 900px; }
.hx-title { font-size: clamp(21px, 6.1vw, 56px); }
.hx-line { white-space: nowrap; }
.hx::before { left: calc(50% - 50vw); right: calc(50% - 50vw); top: -80px; bottom: 30%; inset-inline: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
  background: radial-gradient(520px circle at var(--hx, 50%) var(--hy, 25%), rgba(239,250,85,.5), transparent 70%); }
@media (hover: none) { .hx { --spot: .45 !important; } }

/* =====================================================================
   ソリッド（2026-09-23 指定）: グラデーション・ぼかし・透けは使わない。平面の色を大胆に
   ===================================================================== */
/* バーは平面＋細い線 */
.topbar, .tabbar, .actionbar-in { background: #f7f7ed; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar { border-bottom: 1.5px solid #1a3d6e; }
.topbar.scrolled { box-shadow: none; }
.tabbar { border-top: 1.5px solid #1a3d6e; }
.actionbar-in { border: 1.5px solid #1a3d6e; box-shadow: 5px 5px 0 #1a3d6e; }
.chips { -webkit-mask-image: none; mask-image: none; }
.picker-h::after { background: var(--line); }

/* ヒーロー：画面幅いっぱいのライムの平面。画像は境目にまたがる */
.hx { padding: 44px 0 8px; }
.hx::before { content: ""; position: absolute; z-index: -2; top: -1px; bottom: auto; height: calc(100% - 150px); inset-inline: calc(50% - 50vw);
  left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--lime); opacity: 1; -webkit-mask-image: none; mask-image: none; }
.hx-sub::before { height: calc(100% - 120px); }
.hx .eyebrow { color: #1a3d6e; background: #fff; display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 800; }
.hx-title { color: #1a3d6e; }
.hx-lead, .hx-lead strong { color: #1a3d6e; }
.btn.linkish { color: #1a3d6e; }
.hx-media-in { box-shadow: none; border: 2px solid #1a3d6e; }
.hx-stats { margin-top: 30px; }
.hx-stats div { background: #1a3d6e; box-shadow: none; }
.hx-stats dt { color: rgba(255,255,255,.75); }
.hx-stats dd { color: var(--lime); }
.hx-stats small { color: #fff; }

/* 図形（塗りつぶし）。カーソルに合わせて深さ --z ごとに動く */
.hx-shape { position: absolute; z-index: -1; pointer-events: none; transform: translate(calc(var(--sx, 0) * var(--z) * 14px), calc(var(--sy, 0) * var(--z) * 14px)); transition: transform .9s var(--ease); }
.hx-shape.s1 { width: 86px; height: 86px; border-radius: 50%; background: #1a3d6e; left: max(-20px, calc(50% - 480px)); top: 60px; }
.hx-shape.s2 { width: 54px; height: 54px; border-radius: 12px; background: var(--berry); right: max(-10px, calc(50% - 470px)); top: 30px; transform: translate(calc(var(--sx, 0) * var(--z) * 14px), calc(var(--sy, 0) * var(--z) * 14px)) rotate(14deg); }
.hx-shape.s3 { width: 120px; height: 14px; border-radius: 7px; background: var(--crimson); right: max(8px, calc(50% - 430px)); top: 250px; }
@media (max-width: 719px) { .hx-shape.s1 { width: 56px; height: 56px; left: -18px; top: 18px; } .hx-shape.s2 { width: 34px; height: 34px; right: 10px; top: 12px; } .hx-shape.s3 { width: 70px; height: 10px; right: -14px; top: auto; bottom: 46%; } }

/* 画像が来るまでの枠：ネイビーの平面にライムの円とベリーの四角 */
.art-ph { background: #1a3d6e; }
.art-ph::after { content: none; }
.art-ph-blob { filter: none; opacity: 1; border-radius: 0; }
.art-ph-blob.b1 { width: 38%; height: auto; aspect-ratio: 1; left: 8%; top: 14%; background: var(--lime); border-radius: 50%; animation: shape1 14s var(--ease-in-out) infinite alternate; }
.art-ph-blob.b2 { width: 22%; height: auto; aspect-ratio: 1; right: 12%; bottom: 14%; left: auto; top: auto; background: var(--berry); border-radius: 14px; animation: shape2 17s var(--ease-in-out) infinite alternate; }
.art-ph-blob.b3 { width: 34%; height: 7%; left: 50%; top: 22%; background: #f7f7ed; border-radius: 99px; animation: shape3 20s var(--ease-in-out) infinite alternate; }
@keyframes shape1 { to { transform: translate(12%, 8%); } }
@keyframes shape2 { to { transform: translate(-18%, -12%) rotate(20deg); } }
@keyframes shape3 { to { transform: translate(-30%, 0); } }
.art-ph-label { background: var(--lime); }

/* 案内タイル：画像とネイビーの平面を分ける */
.promo { display: grid; background: #1a3d6e; box-shadow: none; border: 2px solid #1a3d6e; }
.promo-body { position: static; padding: 22px 22px 24px; }
.promo-title { color: #fff; }
@media (min-width: 720px) { .promo { grid-template-columns: 1.1fr 1fr; align-items: center; } .promo-art { aspect-ratio: 4 / 3 !important; } .promo-body { padding: 32px; } }

/* カード：光の映り込みはやめて、浮いたときにネイビーのずらした影 */
[data-tilt]::after { content: none !important; }
.card { box-shadow: 0 0 0 1.5px rgba(26,61,110,.14); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card[data-tilt]:hover, .cat[data-tilt]:hover { box-shadow: 0 0 0 1.5px #1a3d6e, 6px 6px 0 #1a3d6e; }
  .card[data-tilt]:hover, .cat[data-tilt]:hover { --lift: -3px; }
  [data-tilt] { transform: perspective(900px) translate(var(--lift, 0), var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .promo[data-tilt]:hover { box-shadow: 6px 6px 0 var(--lime), 6px 6px 0 2px #1a3d6e; }
}
.cat { box-shadow: 0 0 0 1.5px rgba(26,61,110,.14); }

/* ボタン：光の横切りはやめて、押し込み＋ずらした影 */
.btn.primary::after { content: none; }
.btn.primary { box-shadow: 4px 4px 0 var(--lime), 4px 4px 0 1.5px #1a3d6e; }
.hx .btn.primary { box-shadow: 5px 5px 0 #fff, 5px 5px 0 1.5px #1a3d6e; }
.btn.primary:hover { filter: none; box-shadow: 6px 6px 0 var(--lime), 6px 6px 0 1.5px #1a3d6e; }
.hx .btn.primary:hover { box-shadow: 7px 7px 0 #fff, 7px 7px 0 1.5px #1a3d6e; }
.btn.primary:active { box-shadow: 1px 1px 0 var(--lime), 1px 1px 0 1.5px #1a3d6e; transform: translate(3px, 3px); }
.btn.secondary { border: 1.5px solid #1a3d6e; }
.btn.buy { border: 0; }

/* セクションの白い箱も輪郭をくっきり */
.group { box-shadow: 0 0 0 1.5px rgba(26,61,110,.14); }
.kids { background: var(--lime); box-shadow: none; }
.verdict.good { background: var(--lime); box-shadow: none; }
.verdict.bad { background: var(--crimson); color: #fff; box-shadow: none; }
.verdict.good .verdict-main .i { background: #1a3d6e; color: var(--lime); }
.surprise-box { background: var(--berry); box-shadow: none; }
.surprise-box strong, .surprise-box p { color: #fff; }
.acell.free { background: var(--lime); }
.acell.contains { background: var(--crimson); color: #fff; }
.acell.unknown { background: #e9e9dc; }
.acell.mine { box-shadow: inset 0 0 0 2.5px #1a3d6e; }
.badge.surprise { background: var(--berry); color: #fff; }
.badge.official { background: var(--lime); color: #1a3d6e; }
/* 調整：帯のすき間／図形が文字に重ならない位置／影は一色／枠の色に変化 */
.hx::before { top: -12px; height: calc(100% - 138px); }
@media (min-width: 720px) {
  .hx-shape.s1 { left: calc(50% - 50vw + 6vw); top: 150px; width: 110px; height: 110px; }
  .hx-shape.s2 { right: calc(50% - 50vw + 7vw); top: 70px; }
  .hx-shape.s3 { right: calc(50% - 50vw + 5vw); top: 300px; width: 150px; }
}
.btn.primary, .btn.primary:hover { box-shadow: 4px 4px 0 var(--lime); }
.btn.primary:hover { box-shadow: 6px 6px 0 var(--lime); }
.hx .btn.primary { box-shadow: 5px 5px 0 #fff; }
.hx .btn.primary:hover { box-shadow: 7px 7px 0 #fff; }
.btn.primary:active, .hx .btn.primary:active { box-shadow: 1px 1px 0 #fff; transform: translate(3px, 3px); }
.art-ph[data-art="home-about"], .art-ph[data-art="about-kids"], .art-ph[data-art="auth"], .art-ph[data-art="notfound"] { background: var(--berry); }
.art-ph[data-art="home-about"] .b2, .art-ph[data-art="about-kids"] .b2, .art-ph[data-art="auth"] .b2, .art-ph[data-art="notfound"] .b2 { background: #1a3d6e; }
.art-ph[data-art="about-story"], .art-ph[data-art="new-hero"], .art-ph[data-art="search-empty"], .art-ph[data-art="me-hero"] { background: var(--lime); }
.art-ph[data-art="about-story"] .b1, .art-ph[data-art="new-hero"] .b1, .art-ph[data-art="search-empty"] .b1, .art-ph[data-art="me-hero"] .b1 { background: #1a3d6e; }
.art-ph[data-art="about-story"] .b3, .art-ph[data-art="new-hero"] .b3, .art-ph[data-art="search-empty"] .b3, .art-ph[data-art="me-hero"] .b3 { background: #fff; }
.hx-sub .art-ph { background: var(--crimson); }
.hx-sub .art-ph .b2 { background: #1a3d6e; }

/* =====================================================================
   余白を広げる（2026-09-23 指定「ゆったり」）
   基準: 画面の左右 20px / セクション間 56px / 箱の内側 24px / カード間 14px
   ===================================================================== */
.main { max-width: 820px; padding: 12px 20px 48px; }
.topbar-in { max-width: 820px; padding: 12px 20px; }
.chips { margin: 8px -20px 0; padding: 6px 20px 12px; gap: 8px; }
.hx-media { margin-top: 44px; }
.hx-cta { margin-top: 32px; gap: 10px 22px; }
.hx-lead { margin-top: 22px; }
.hx-stats { margin-top: 40px; gap: 12px; }
.hx-stats div { padding: 16px 10px; }
.hx::before { height: calc(100% - 162px); }
.hx-sub::before { height: calc(100% - 130px); }

.section { margin-top: 64px; }
.section-h { margin: 0 2px 18px; }
.finder-head { margin-top: 64px; margin-bottom: 8px; }
.finder-head .muted { margin-top: 10px; }
.promo { margin-top: 48px; }
.promo-body { gap: 10px; padding: 26px 24px 28px; }

.group { padding: 26px 22px; margin-top: 22px; }
.group > h2, .group-h { margin-bottom: 18px; }
.group > p + p { margin-top: 14px; }
.results-head { padding: 22px 2px 14px; }
.results-head .muted { margin-top: 10px; }
.avoid-pills { margin: 10px 0 16px; gap: 8px; }

.cards { gap: 14px; }
.cards.tiles-view { gap: 14px; }
.card-link { padding: 18px; gap: 16px; }
.tcard .card-body { padding: 14px 14px 16px; }
.card-badges { margin-top: 8px; gap: 6px; }
.card-contains { margin-top: 8px; }

.picker-h { margin: 28px 2px 12px; }
.tiles { gap: 10px; }
.acc { margin-top: 20px; }
.acc-sum { padding: 18px 16px; }
.actionbar { margin-top: 28px; }
.cats { gap: 10px; }
.cat { padding: 16px; }
.steps { gap: 22px; margin: 18px 0 26px; }

.toolbar { gap: 10px; margin: 12px 0 8px; }
.tb-row { gap: 10px; }
.filterbar { margin: 8px 0 18px; }

.product-head { padding: 20px 2px 8px; gap: 20px; }
.verdict { margin-top: 20px; padding: 20px; }
.surprise-box { margin-top: 16px; padding: 18px 20px; }
.atable { gap: 8px; }
.rows li { padding: 14px 0; }
.toolrow { margin-top: 22px; gap: 10px; }
.check-actions { margin-top: 16px; gap: 10px; }
.buy-row { gap: 10px; }
.review { padding: 16px 0; }
.storeform { margin-top: 22px; padding-top: 20px; }
.store-group { margin-top: 14px; }
.store-opts { gap: 8px; }
.gallery { gap: 12px; }

.stack { gap: 18px; }
.pform .group > label { margin-top: 18px; }
.arow { padding: 12px 0; }
.quick { gap: 10px; margin-bottom: 4px; }
.photos { gap: 14px; }
.submitbar { margin-top: 28px; }

.disclaimer { margin-top: 48px; padding: 20px 22px; }
.note-small { margin-top: 14px; }
.story, .kids { padding: 30px 24px; }
.story p + p, .kids p + p { margin-top: 16px; }
.media-in { margin: 10px 0 22px; }
.timeline { gap: 14px; }
.timeline li { padding: 18px 20px; }
.foot { padding: 32px 20px 36px; }
.foot nav { gap: 20px; margin-bottom: 12px; }
.auth .group { margin-top: 24px; }
.empty { padding: 56px 20px; }
@media (min-width: 720px) {
  .main { padding: 20px 28px 64px; }
  .group { padding: 32px 30px; }
  .section { margin-top: 80px; }
}
/* 文章とボタンの間／下部バーの影は一重／長い容量表記は2行で省略 */
.group > p + .btn, .group > p + a.btn, .group > .muted + .btn, .group > .note-small + .btn, #photos > .btn, #reviews > .btn, #stores > .btn, #check > .btn { margin-top: 20px; }
.group > .btn + .note-small { margin-top: 16px; }
.actionbar .btn.primary, .actionbar .btn.primary:hover { box-shadow: none; }
.card-name .variant { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.card-name { display: block; }

/* ---------- バーコード読み取り ---------- */
.topsearch-scan { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; border-radius: 8px; color: #1a3d6e; }
.topsearch-scan:hover { background: var(--lime); }
.tabbar { grid-template-columns: repeat(5, 1fr); }
.tab-scan { position: relative; }
.tab-scan-btn { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -26px; border-radius: 50%; background: var(--lime); color: #1a3d6e; border: 2px solid #1a3d6e; box-shadow: 3px 3px 0 #1a3d6e; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.tab-scan .i { width: 28px; height: 28px; }
.tab-scan:active .tab-scan-btn { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a3d6e; }
.tab-scan.on { color: #1a3d6e; }
.tabbar a.tab-scan.on .i { filter: none; }

.scan { padding-top: 20px; }
.scan .title { margin-bottom: 22px; }
.scan-view { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: #1a3d6e; border: 2px solid #1a3d6e; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s var(--ease); }
.scan-view.live video { opacity: 1; }
.scan-idle { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.scan-idle .note-small { color: rgba(255,255,255,.8); max-width: 26em; }
.scan-idle .btn.primary { background: var(--lime); color: #1a3d6e; box-shadow: 4px 4px 0 #fff; }
.scan-view.live .scan-idle { display: none; }
.scan-frame { position: absolute; left: 12%; right: 12%; top: 30%; bottom: 30%; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); }
.scan-view.live .scan-frame { opacity: 1; }
.scan-frame i { position: absolute; width: 26px; height: 26px; border: 4px solid var(--lime); }
.scan-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scan-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scan-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scan-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scan-laser { position: absolute; left: 6%; right: 6%; top: 50%; height: 3px; border-radius: 2px; background: var(--crimson); animation: laser 1.6s var(--ease-in-out) infinite alternate; }
@keyframes laser { from { transform: translateY(-34px); } to { transform: translateY(34px); } }
.scan-status { min-height: 1.6em; margin-top: 14px; font-weight: 700; color: #1a3d6e; text-align: center; }
.scan-result { margin-top: 18px; }
.scan-none { display: grid; gap: 14px; padding: 26px 22px; border-radius: 24px; background: var(--lime); border: 2px solid #1a3d6e; }
.scan-none h2 { font-size: 21px; }
.scan-none .btn.primary { box-shadow: 4px 4px 0 #fff; }
.scan-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.scan-list a { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1.5px rgba(26,61,110,.14); color: #1a3d6e; font-weight: 800; text-decoration: none; }
.scan-list img { width: 56px; height: 56px; object-fit: contain; }
.scan-list small { display: block; color: var(--sub); font-weight: 600; }
.scan-manual { margin-top: 32px; display: grid; gap: 10px; }
.scan-manual label { font-weight: 800; color: #1a3d6e; }
.jan-row { display: flex; gap: 10px; align-items: center; }
.jan-row input { flex: 1; min-width: 0; }
.jan-row .btn { flex: none; }
.jan-note { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 6px; padding: 16px 18px; border-radius: 16px; background: var(--lime); color: #1a3d6e; font-weight: 700; }

/* ---------- 買う：2×2 ---------- */
.buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buy-grid .btn.buy { flex: none; font-size: 14.5px; }
.btn.buy.yahoo { flex-basis: auto; }

/* ---------- フッター：ネイビーの平面 ---------- */
.foot { max-width: none; margin: 72px 0 0; padding: 0; text-align: left; background: #1a3d6e; color: #fff; font-size: 14px; }
.foot-in { max-width: 820px; margin: 0 auto; padding: 52px 20px 36px; display: grid; gap: 40px; }
@media (min-width: 720px) { .foot-in { grid-template-columns: 1fr 1.6fr; padding: 64px 28px 44px; } }
.foot-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 24px; font-weight: 800; text-decoration: none !important; }
.foot-logo .brand-mark { width: 40px; height: 40px; border-radius: 11px; font-size: 22px; }
.foot-tag { margin-top: 16px; font-size: 20px; line-height: 1.6; font-weight: 800; color: var(--lime); letter-spacing: .03em; font-feature-settings: normal; }
.btn.foot-cta { margin-top: 22px; background: var(--lime); color: #1a3d6e; box-shadow: 4px 4px 0 #fff; }
.btn.foot-cta:hover { box-shadow: 6px 6px 0 #fff; }
.foot-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; margin: 0; }
@media (min-width: 720px) { .foot-nav { grid-template-columns: repeat(3, 1fr); } }
.foot-nav div { display: grid; gap: 12px; align-content: start; }
.foot-nav h3 { font-size: 12px; letter-spacing: .14em; color: var(--lime); font-weight: 800; margin-bottom: 2px; }
.foot-nav a { color: #fff; font-weight: 700; text-decoration: none; width: fit-content; background: linear-gradient(var(--lime), var(--lime)) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease); padding-bottom: 2px; }
.foot-nav a:hover { background-size: 100% 2px; }
.foot-bottom { border-top: 1.5px solid rgba(255,255,255,.18); max-width: 820px; margin: 0 auto; padding: 22px 20px calc(var(--tab-h) + 30px); display: grid; gap: 8px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.8; }
.foot-bottom p:first-child { color: #fff; font-weight: 700; }
.foot .copy { margin-top: 6px; color: rgba(255,255,255,.55); }
body { padding-bottom: 0; }
.buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.buy-grid .btn.buy { min-width: 0; padding: 0 10px; white-space: nowrap; font-size: 14px; letter-spacing: 0; }
.foot .foot-nav { display: grid; justify-content: stretch; flex-wrap: nowrap; margin: 0; }
.foot .foot-nav a { color: #fff; font-weight: 700; font-size: 14.5px; }
.foot .foot-nav a:hover { color: var(--lime); }
.promo-title { font-weight: 800; font-size: clamp(24px, 6vw, 36px); }
.buy-grid .btn.buy { font-size: 15px; }
/* 価格 */
.pricebox { display: grid; gap: 4px; margin-bottom: 16px; padding: 16px 18px; border-radius: 16px; background: var(--lime); }
.price-main { font-size: 26px; font-weight: 800; color: #1a3d6e; font-feature-settings: "tnum"; letter-spacing: .01em; }
.price-note { font-size: 12px; color: #1a3d6e; opacity: .8; line-height: 1.6; }
.badge.rank { background: var(--crimson); color: #fff; }

/* ---------- ロゴ ---------- */
.logo { display: block; height: auto; fill: currentColor; }
.brand { color: #1a3d6e; }
.logo-head { width: 118px; }
@media (min-width: 720px) { .logo-head { width: 140px; } }
.foot-logo { color: var(--lime); display: inline-block; }
.logo-foot { width: 150px; }
/* フッターのロゴは上端の余白を確保して見切れないように */
.foot-logo { line-height: 0; }
.logo-foot { width: 172px; margin-bottom: 4px; }
.foot-brand { padding-top: 4px; }
/* 固定ヘッダーにロゴが隠れないよう、フッター上部に余裕を持たせる */
.foot-in { padding-top: 64px; }
@media (min-width: 720px) { .foot-in { padding-top: 76px; } }

/* 「ラレルについて」のヒーロー：ロゴを大きく */
.hx-logo { margin: 0 0 22px; display: flex; justify-content: center; color: #1a3d6e; }
.logo-hero { width: min(340px, 74vw); }
@media (min-width: 720px) { .logo-hero { width: 420px; } }
.hx-title-sub { font-size: clamp(19px, 4.6vw, 34px); line-height: 1.4; font-weight: 800; letter-spacing: .03em; color: #1a3d6e; font-feature-settings: normal; }
.hx-title-sub .hx-line { white-space: nowrap; display: block; overflow: hidden; }
/* ロゴが端に届きすぎないよう調整し、図形はロゴを避ける */
.logo-hero { width: min(300px, 64vw); }
@media (min-width: 720px) { .logo-hero { width: 400px; } }
.hx-sub .hx-shape.s1 { top: auto; bottom: 34%; }
@media (max-width: 719px) { .hx-sub .hx-shape.s1 { width: 44px; height: 44px; left: -14px; bottom: 30%; } .hx-sub .hx-shape.s2 { width: 30px; height: 30px; top: 8px; } }
/* トップの案内：画像をやめてロゴと文字だけ */
.promo { display: grid; gap: 20px; align-items: center; justify-items: center; text-align: center; padding: 38px 24px 34px; background: #1a3d6e; }
.logo-promo { width: min(230px, 56vw); color: var(--lime); }
.promo-body { position: static; display: grid; gap: 8px; padding: 0; justify-items: center; }
@media (min-width: 720px) {
  .promo { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 40px; padding: 44px 48px; }
  .promo-body { justify-items: start; }
  .logo-promo { width: 260px; }
}
@media (min-width: 720px) { .promo { grid-template-columns: 240px 1fr; gap: 44px; } .logo-promo { width: 240px; } .promo-title { white-space: nowrap; } }
/* 案内タイルを小ぶりに（2026-09-24 指定） */
.promo { padding: 18px 18px 16px; gap: 12px; border-radius: 20px; margin-top: 32px; }
.logo-promo { width: min(120px, 34vw); }
.promo-eyebrow { font-size: 10.5px; letter-spacing: .12em; }
.promo-title { font-size: clamp(15px, 3.6vw, 19px); line-height: 1.5; }
.promo-more { font-size: 12.5px; }
.promo-more .i { width: 14px; height: 14px; }
.promo-body { gap: 4px; }
@media (min-width: 720px) {
  .promo { grid-template-columns: 132px 1fr; gap: 26px; padding: 20px 26px; }
  .logo-promo { width: 132px; }
  .promo-title { font-size: 19px; }
}

/* ---------- ロゴの視覚補正（2026-09-24）----------
   下のスプーンが文字中心より左に張り出すため、数値上の中央に置くと左寄りに見える。
   中央に置く場所だけ、幅の 3.7% 右へずらして目の中心と合わせる。左揃えの場所は補正しない */
.logo-optical { transform: translateX(3.7%); }

/* 案内タイル：スマホは中央、パソコンは ロゴ｜文 …… 読む で左から右へ視線を流す */
.promo { grid-template-columns: 1fr; }
.promo-more { justify-self: center; }
@media (min-width: 720px) {
  .promo { grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 22px 30px; }
  .promo-body { justify-items: start; text-align: left; }
  .promo-more { justify-self: end; margin-left: auto; }
  .promo-title { white-space: nowrap; }
}
/* 小ジャンルの行 */
.chips.subs { margin-top: 0; padding-top: 0; }
.chip.sub { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 13px; padding: 6px 12px; }
.chip.sub.on { background: #1a3d6e; color: var(--lime); box-shadow: none; }
.chip-n { margin-left: 5px; font-size: 11px; opacity: .65; font-feature-settings: "tnum"; }

/* =====================================================================
   広い画面を使い切る（2026-09-25 指定）
   ヘッダー・フッターは画面幅に追随。一覧は幅に応じて列数が変わる。
   読み物のページ（ラレルについて等）は読みやすさのため行長を保つ
   ===================================================================== */
:root { --gutter: clamp(16px, 3vw, 40px); --wide: 1560px; }
.topbar-in { max-width: var(--wide); padding-inline: var(--gutter); }
.main { max-width: var(--wide); padding-inline: var(--gutter); }
.foot-in, .foot-bottom { max-width: var(--wide); padding-inline: var(--gutter); }
.hx-copy { max-width: 900px; }

/* 文章主体のページは行が長くなりすぎないように中央寄せで絞る */
.page-read { max-width: 820px; margin-inline: auto; }

/* ---------- タイル：幅に応じて列数が変わる ---------- */
.cards.tiles-view {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
@media (min-width: 900px)  { .cards.tiles-view { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } }
@media (min-width: 1400px) { .cards.tiles-view { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } }

/* ---------- リスト：広い画面では2〜3列に分けて空きを減らす ---------- */
.cards.list-view { grid-template-columns: 1fr; }
@media (min-width: 760px)  { .cards.list-view { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .cards.list-view { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.list-view .card-link { padding: 14px; gap: 14px; align-items: flex-start; }
.list-view .thumb { width: 84px; height: 84px; }
.list-view .card-name { font-size: 15px; }
.list-view .card-body { padding-right: 34px; }

/* 一覧の上のツールバーも広い画面では1行に */
@media (min-width: 900px) {
  .toolbar { grid-template-columns: minmax(280px, 1fr) auto; align-items: center; }
  .tb-row { justify-content: flex-end; }
  .tb-select { flex: 0 1 240px; }
}
/* ジャンルの行は画面幅いっぱいまで使い、広い画面では折り返す */
@media (min-width: 900px) {
  .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
/* 読み込み中の表示 */
.more-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; color: var(--sub); font-size: 14px; font-weight: 700; }
.spin { width: 18px; height: 18px; border: 2.5px solid var(--line); border-top-color: #1a3d6e; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }
/* スマホは2列を保つ（最小幅を画面に合わせる） */
.cards.tiles-view { grid-template-columns: repeat(auto-fill, minmax(min(170px, 46%), 1fr)); }
@media (min-width: 900px)  { .cards.tiles-view { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
@media (min-width: 1400px) { .cards.tiles-view { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } }
.cards { min-width: 0; }
.card, .card-link, .card-body { min-width: 0; }
.card-name, .card-maker, .card-contains { overflow-wrap: anywhere; }
/* ジャンルの横スクロールは、画面の左右いっぱいまで（余白ぶん外に出す） */
.chips { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
@media (min-width: 900px) { .chips { margin-inline: 0; padding-inline: 0; } }
/* 読み物の幅。商品ページは表があるので少し広め */
.page-read { max-width: 860px; margin-inline: auto; }
/* 29品目の表は1マスが広がりすぎないように */
.atable { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
@media (min-width: 520px) { .atable { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
.acell { max-width: 150px; }
.trial-img { margin: 16px 0 0; border-radius: var(--r-s); overflow: hidden; background: var(--fill); }
.trial-img img { width: 100%; height: auto; display: block; }

/* =====================================================================
   トップのヒーロー（2026-09-25 改定）: イラストを敷いて、その上に文字
   ===================================================================== */
.hero { position: relative; isolation: isolate; width: 100vw; margin-inline: calc(50% - 50vw); margin-bottom: 8px;
  min-height: clamp(420px, 62vh, 620px); display: grid; align-items: center; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -2; }
.hero-art .art { width: 100%; height: 100%; border-radius: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-img.art-ph { height: 100%; }
/* 文字を読ませるための覆い。ぼかしは使わず、平面の色を重ねる */
.hero-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(247,247,237,.97) 0%, rgba(247,247,237,.92) 34%, rgba(247,247,237,.55) 52%, rgba(247,247,237,0) 72%); }
.hero-inner { max-width: var(--wide); margin-inline: auto; width: 100%; padding: 40px var(--gutter); }
.hero-eyebrow { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #1a3d6e; color: var(--lime);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.hero-title { margin-top: 14px; font-size: clamp(26px, 5.2vw, 56px); line-height: 1.28; font-weight: 800; letter-spacing: .02em;
  color: #1a3d6e; font-feature-settings: normal; max-width: 16em; }
.hero-title .hx-line { display: block; overflow: hidden; padding-bottom: .06em; white-space: nowrap; }
.hero-lead { margin-top: 18px; max-width: 30em; color: #1a3d6e; font-size: clamp(14.5px, 1.6vw, 17px); line-height: 1.9; }
.hero-lead strong { background: linear-gradient(transparent 62%, var(--lime) 62%); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn.hero-ghost { background: #fff; color: #1a3d6e; box-shadow: inset 0 0 0 1.5px #1a3d6e; }
.btn.hero-ghost:hover { background: var(--lime); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.hero-stats div { padding: 10px 16px; border-radius: 14px; background: #1a3d6e; }
.hero-stats dt { font-size: 11px; color: rgba(255,255,255,.75); font-weight: 700; letter-spacing: .08em; }
.hero-stats dd { margin: 1px 0 0; font-size: 21px; font-weight: 800; color: var(--lime); font-feature-settings: "tnum"; }
.hero-stats small { font-size: 11.5px; color: #fff; margin-left: 2px; }
@media (max-width: 719px) {
  .hero { min-height: 0; }
  .hero-img img { object-position: 62% 50%; }
  .hero-veil { background: linear-gradient(180deg, rgba(247,247,237,.35) 0%, rgba(247,247,237,.88) 42%, rgba(247,247,237,.98) 62%); }
  .hero-inner { padding-top: 46vw; }
  .hero-title .hx-line { white-space: normal; }
  .hero-stats div { flex: 1 1 30%; padding: 10px 8px; text-align: center; }
}
@media (min-width: 720px) { .hero-inner { padding-block: 64px; } }
/* 画像がまだ無い間のプレースホルダーもヒーロー全面に */
.hero-art .art-ph { height: 100%; }
/* ヒーロー画像の見せ方をレイアウトに合わせる
   パソコン: 左半分に文字、右半分に主役 / スマホ: 上に主役、下に文字 */
.hero-img img { object-position: 78% 42%; }
@media (max-width: 719px) {
  .hero { min-height: 0; display: block; }
  .hero-art { position: relative; inset: auto; height: 52vw; max-height: 300px; }
  .hero-img img { object-position: 72% 30%; }
  .hero-veil { position: absolute; top: auto; bottom: 0; height: 56%;
    background: linear-gradient(180deg, rgba(247,247,237,0) 0%, rgba(247,247,237,.85) 45%, #f7f7ed 92%); }
  .hero-inner { padding-top: 6px; padding-bottom: 26px; }
}
@media (min-width: 720px) and (max-width: 1100px) {
  .hero-veil { background: linear-gradient(90deg, rgba(247,247,237,.97) 0%, rgba(247,247,237,.94) 42%, rgba(247,247,237,.6) 62%, rgba(247,247,237,0) 82%); }
  .hero-img img { object-position: 82% 42%; }
}
/* パソコンでは人物の頭が切れないよう少し引きで見せ、下端も余裕を持たせる */
@media (min-width: 1100px) {
  .hero { min-height: clamp(460px, 64vh, 640px); }
  .hero-img img { object-position: 76% 34%; }
}
/* スマホは画像をもう少し高く、人物が収まるように */
@media (max-width: 719px) {
  .hero-art { height: 58vw; max-height: 330px; }
  .hero-img img { object-position: 70% 22%; }
}

/* =====================================================================
   UI/UX 見直し（2026-09-25）
   ===================================================================== */
/* --- 「ラレルについて」は細い1行に --- */
.about-line { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 0; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); color: #1a3d6e; text-decoration: none !important; }
.about-line .logo { width: 84px; flex: none; }
.about-line span { flex: 1; font-weight: 700; font-size: 14.5px; }
.about-line .i { flex: none; color: var(--faint); }
.about-line:hover span { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }

/* --- 避けている品目の常時表示バー（トップ以外の全ページ） --- */
.avoidbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; padding: 8px 12px; border-radius: 12px; background: #1a3d6e; color: #fff; font-size: 13px; }
.avoidbar-k { font-weight: 800; color: var(--lime); letter-spacing: .06em; font-size: 11.5px; }
.avoidbar-items { display: flex; flex-wrap: wrap; gap: 4px; }
.avoidbar-items b { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.14); font-weight: 700; }
.avoidbar a { margin-left: auto; color: var(--lime); font-weight: 700; text-decoration: none; white-space: nowrap; }
.avoidbar a:hover { text-decoration: underline; }
.avoidbar.empty { background: var(--lime); color: #1a3d6e; display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 10px 10px 10px 14px; }
.avoidbar.empty .avoidbar-k { color: #1a3d6e; font-size: 13.5px; letter-spacing: 0; }
.avoidbar.empty span:not(.avoidbar-k) { grid-column: 1; font-size: 12.5px; line-height: 1.5; }
.avoidbar.empty a { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; padding: 9px 14px; border-radius: 999px; background: #1a3d6e; color: var(--lime); }
.avoidbar.empty a:hover { text-decoration: none; box-shadow: 3px 3px 0 #fff; }

/* --- トップ：設定済みの人への近道 --- */
.fastpath { display: grid; gap: 12px; margin: 22px 0 6px; padding: 20px 20px 18px; border-radius: 20px; background: #1a3d6e; color: #fff; }
.fastpath-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--lime); }
.fastpath-items { display: flex; flex-wrap: wrap; gap: 6px; }
.fastpath-items b { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: #fff; color: #1a3d6e; font-weight: 800; }
.fastpath-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fastpath .btn.primary { background: var(--lime); color: #1a3d6e; box-shadow: 4px 4px 0 #fff; }
.fastpath .btn.primary:hover { box-shadow: 6px 6px 0 #fff; }
.fastpath-change { color: #fff; font-weight: 700; }
@media (min-width: 720px) { .fastpath { grid-template-columns: 1fr auto; align-items: center; padding: 22px 26px; } }

/* --- 商品ページ：判定を最初に大きく --- */
.verdict2 { margin-top: 16px; padding: 20px 20px 16px; border-radius: 20px; }
.verdict2.good { background: var(--lime); color: #1a3d6e; }
.verdict2.bad { background: var(--crimson); color: #fff; }
.verdict2.mid { background: #e9e9dc; color: #1a3d6e; }
.verdict2-head { display: flex; align-items: center; gap: 12px; }
.verdict2-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #1a3d6e; color: var(--lime); }
.verdict2.bad .verdict2-icon { background: #fff; color: var(--crimson); }
.verdict2.mid .verdict2-icon { background: #1a3d6e; color: #fff; }
.verdict2-icon .i { width: 26px; height: 26px; stroke-width: 2.6; }
.verdict2-main { font-size: clamp(20px, 5vw, 26px); font-weight: 800; line-height: 1.35; letter-spacing: .02em; font-feature-settings: normal; }
.verdict2-sub { margin-top: 8px; font-size: 14.5px; font-weight: 700; opacity: .92; }
.verdict2-src { margin-top: 12px; padding-top: 12px; border-top: 1.5px solid rgba(26,61,110,.18); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.verdict2.bad .verdict2-src { border-top-color: rgba(255,255,255,.3); }
.verdict2-src a { color: inherit; font-weight: 700; }
.verdict2-src .i { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.verdict2-set { margin-top: 16px; padding: 18px 20px; border-radius: 20px; background: var(--lime); color: #1a3d6e; }
.verdict2-set h2 { font-size: 18px; margin-bottom: 6px; padding-left: 0; }
.verdict2-set h2::before { content: none; }
.verdict2-set p { font-size: 14px; }
.miniset { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.miniset label { position: relative; cursor: pointer; }
.miniset input { position: absolute; opacity: 0; pointer-events: none; }
.miniset span { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px; background: #fff; color: #1a3d6e; font-weight: 800; font-size: 14px; border: 2px solid transparent; }
.miniset input:checked + span { background: #1a3d6e; color: #fff; }
.miniset input:focus-visible + span { border-color: var(--crimson); }
.miniset .glyph { font-size: 18px; width: 22px; height: 22px; }
.miniset-more { margin-top: 10px; font-size: 13px; }

/* --- カード：品目の状態を1行で --- */
.card-al { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.card-al b { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.6; }
.card-al b.free { background: var(--lime); color: #1a3d6e; }
.card-al b.contains { background: var(--crimson); color: #fff; }
.card-al b.unknown { background: #e9e9dc; color: var(--sub); }
.card-official { font-size: 11.5px; color: var(--sub); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.card-official .i { width: 12px; height: 12px; }

/* --- 言語切り替え --- */
.langsw { display: inline-flex; border-radius: 999px; background: var(--fill); padding: 2px; font-size: 12px; font-weight: 800; flex: none; }
.langsw a { padding: 4px 9px; border-radius: 999px; color: var(--sub); text-decoration: none; }
.langsw a.on { background: #1a3d6e; color: var(--lime); }
.topbar .langsw { display: none; }
@media (min-width: 720px) { .topbar .langsw { display: inline-flex; } }
.foot .langsw { background: rgba(255,255,255,.12); margin-top: 14px; }
.foot .langsw a { color: rgba(255,255,255,.75); }
.foot .langsw a.on { background: var(--lime); color: #1a3d6e; }

/* --- フォーカスの見え方（キーボード・読み上げ利用者向け） --- */
:focus-visible { outline: 3px solid var(--crimson); outline-offset: 2px; }
.btn:focus-visible, .tabbar a:focus-visible, .chip:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; }
/* タップの当たり判定は 44px 以上 */
.tabbar a { min-height: 44px; }
.chip, .pill, .sopt span { min-height: 36px; display: inline-flex; align-items: center; }
.fav { width: 44px; height: 44px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; background: #1a3d6e; color: var(--lime); border-radius: 8px; font-weight: 800; }
.skip:focus { left: 8px; }
.avoidbar .g, .fastpath .g { font-size: 15px; margin-right: 2px; }

/* =====================================================================
   ヒーロー再調整（2026-09-25 夜）: 文字は左の明るい面に収め、ボタンは小さく、数字は静かに
   ===================================================================== */
.hero-copy { max-width: 560px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none; color: #1a3d6e; font-size: 12.5px; letter-spacing: .12em; }
.hero-eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--lime); border: 2px solid #1a3d6e; border-radius: 3px; }
.hero-cta { gap: 12px 22px; align-items: center; margin-top: 30px; }
.hero-cta .btn { flex: 0 0 auto; }
.hero-cta .btn.primary { min-height: 52px; padding: 0 30px; font-size: 16px; border-radius: 999px; box-shadow: 4px 4px 0 var(--lime); }
.hero-cta .btn.primary:hover { box-shadow: 6px 6px 0 var(--lime); filter: none; }
.btn.hero-ghost { background: none; box-shadow: none; padding: 0 2px; min-height: 0; font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.btn.hero-ghost:hover { background: none; text-decoration-color: #1a3d6e; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; }
.hero-stats div { flex: none; padding: 2px 0 2px 12px; border-left: 3px solid var(--lime); border-radius: 0; background: none; box-shadow: none; text-align: left; }
.hero-stats dt { color: var(--sub); font-size: 11px; letter-spacing: .1em; }
.hero-stats dd { color: #1a3d6e; font-size: 22px; }
.hero-stats small { color: var(--sub); font-size: 11.5px; }
@media (max-width: 719px) {
  .hero-cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-cta .btn.primary { width: 100%; }
  .btn.hero-ghost { align-self: center; }
  .hero-stats { gap: 8px 22px; margin-top: 28px; }
  .hero-stats div { flex: 1 1 28%; padding: 0 0 0 10px; }
  .hero-stats dd { font-size: 20px; }
}
@media (min-width: 1100px) { .hero-copy { max-width: 600px; } .hero-inner { padding-block: 80px; } }

/* 近道は白いカードに（ネイビーの板は重いので） */
.fastpath { background: #fff; color: #1a3d6e; border: 2px solid #1a3d6e; box-shadow: 4px 4px 0 var(--lime); border-radius: 16px; padding: 14px 18px; gap: 10px 18px; margin: 18px 0 0; }
.fastpath-k { color: var(--sub); font-size: 11px; letter-spacing: .1em; }
.fastpath-items b { background: var(--lime); color: #1a3d6e; padding: 5px 12px; font-size: 14px; }
.fastpath .btn.primary { background: #1a3d6e; color: var(--lime); box-shadow: 4px 4px 0 var(--lime); border-radius: 999px; }
.fastpath .btn.primary:hover { box-shadow: 6px 6px 0 var(--lime); filter: none; }
.fastpath-change { color: #1a3d6e; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 5px; }
@media (min-width: 720px) { .fastpath { padding: 14px 22px; } }
/* 見出しは文字数ぶん伸ばす（枠で「」が切れないように）。本文だけ幅を絞る */
.hero-title { width: max-content; max-width: none; font-size: clamp(26px, 4.6vw, 54px); }
@media (max-width: 719px) { .hero-title { width: auto; max-width: 100%; } }
@media (max-width: 719px) {
  .fastpath .btn.primary { width: 100%; font-size: 15px; padding: 0 16px; min-height: 48px; }
  .fastpath-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .fastpath-change { align-self: center; font-size: 14px; }
}

/* 利用規約・プライバシーポリシー */
.legal .group h2 { font-size: 17px; }
.legal .group p, .legal .bullets li { font-size: 14.5px; line-height: 1.9; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0 12px; font-size: 13.5px; }
.legal-table th, .legal-table td { text-align: left; padding: 8px 10px; border-bottom: 1.5px solid var(--line); vertical-align: top; }
.legal-table th { font-size: 12px; color: var(--sub); letter-spacing: .06em; }
.legal-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: #1a3d6e; white-space: nowrap; }
.leave { margin-top: 28px; }
.leave summary { color: var(--sub); font-size: 13.5px; cursor: pointer; text-align: center; }
.leave form { margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }