/* 公式サイト「魚図鑑」(zukan.html) */
.zk-section { padding-top: 40px; }

/* 今が最盛期 */
.zk-now { margin-bottom: 36px; padding: 22px; border-radius: 20px; border: 1px solid rgba(0, 229, 255, 0.25);
  background: radial-gradient(420px 160px at 0% 0%, rgba(0, 229, 255, 0.10), transparent 70%), var(--surface); }
.zk-now-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.zk-now-head h2 { font-size: 20px; font-weight: 900; }
.zk-now-list { display: flex; flex-wrap: wrap; gap: 8px; }
.zk-now-list a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 229, 255, 0.10); border: 1px solid rgba(0, 229, 255, 0.35); color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; }
.zk-now-list a:hover { background: rgba(0, 229, 255, 0.2); }
.zk-now-more { font: inherit; font-size: 14px; font-weight: 700; color: var(--pink); background: transparent; border: 1px dashed rgba(255, 46, 126, 0.6); border-radius: 999px; padding: 6px 12px; cursor: pointer; }

/* 検索・カテゴリ */
.zk-tools { min-width: 0; position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 20; background: rgba(5, 7, 12, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 12px 0 8px; margin-bottom: 16px; }
.zk-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); padding: 0 14px; color: var(--muted); }
.zk-search:focus-within { border-color: var(--accent); }
.zk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; padding: 12px 0; }
.zk-cats { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.zk-cats::-webkit-scrollbar { display: none; }
.zk-cat { flex: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.zk-cat:hover { color: var(--text); }
.zk-cat.on { color: #03141a; background: var(--accent); border-color: var(--accent); }
.zk-cat-now { border-color: rgba(255, 46, 126, 0.5); }
.zk-cat-now.on { background: var(--pink); border-color: var(--pink); color: #fff; }
#zk-count { margin-top: 6px; min-height: 1.4em; }

/* 魚カード */
.zk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sp { min-width: 0; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; scroll-margin-top: 190px; }
.sp:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(0, 229, 255, 0.2); }
.sp-head { display: flex; align-items: center; gap: 12px; }
.sp-fish { width: 52px; height: 30px; flex: none; }
.sp-title { min-width: 0; flex: 1; }
.sp-title h2 { font-size: 19px; font-weight: 900; line-height: 1.3; }
.sp-latin { font-size: 11.5px; color: var(--muted); font-style: italic; }
.sp-cat { flex: none; align-self: flex-start; font-size: 10.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

.sp-season { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.sp-season-t { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.sp-season-t b { color: var(--text); font-weight: 900; }
.sp-season-t b.pk { color: var(--accent); }
.sz-bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; position: relative; padding-bottom: 14px; }
.sz-bar span { height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); position: relative; }
.sz-bar span.on { background: rgba(0, 229, 255, 0.3); }
.sz-bar span.peak { background: var(--accent); }
.sz-bar span::after { content: attr(data-m); position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-family: var(--font-num); font-size: 8.5px; color: var(--muted); }
.sz-bar span.now { outline: 2px solid var(--pink); outline-offset: 1px; }

.sp-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; line-height: 1.6; }
.sp-facts dt { color: var(--muted); font-weight: 700; white-space: nowrap; }
.sp-facts dd { margin: 0; color: #d5dbe6; min-width: 0; overflow-wrap: anywhere; }
.sp-more { border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
.sp-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent); list-style: none; }
.sp-more summary::-webkit-details-marker { display: none; }
.sp-more summary::before { content: "+ "; }
.sp-more[open] summary::before { content: "− "; }
.sp-more ul { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 13.5px; color: #d5dbe6; }
.sp-rank { margin-top: 10px; font-family: var(--font-num); font-size: 11.5px; color: var(--muted); }

.zk-empty { text-align: center; padding: 48px 0; color: var(--muted); }
.zk-note { margin-top: 20px; }

@media (max-width: 720px) {
  .zk-tools { top: calc(100px + env(safe-area-inset-top, 0px)); }
  .sp { scroll-margin-top: 265px; }
  .zk-grid { grid-template-columns: 1fr; }
}

/* ---------- 一覧カード: 毒・危険、詳しいページへのリンク ---------- */
.zk-cat-danger { border-color: rgba(255, 84, 112, 0.5); }
.zk-cat-danger.on { background: #ff5470; border-color: #ff5470; color: #fff; }
.sp-h2link, .sp-title h2 a { color: inherit; text-decoration: none; }
.sp-title h2 a:hover { color: var(--accent); }
.sp-danger { display: inline-block; font-size: 11px; font-weight: 900; color: #fff; background: #ff5470; border-radius: 6px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.sp-danger.lv-venom { background: #ff8a3d; }
.sp-danger.lv-food, .sp-danger.lv-care { background: transparent; color: var(--gold); border: 1px solid rgba(255, 209, 102, 0.6); }
.sp-danger-line { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: #ffc2cc; background: rgba(255, 84, 112, 0.1); border: 1px solid rgba(255, 84, 112, 0.4); border-radius: 10px; padding: 8px 10px; }
.sp-danger-line svg { flex: none; margin-top: 1px; }
.sp-danger-line b { flex: none; margin-right: 2px; }
.sp-danger-line.lv-venom { color: #ffd0b0; background: rgba(255, 138, 61, 0.1); border-color: rgba(255, 138, 61, 0.45); }
.sp-danger-line.lv-food, .sp-danger-line.lv-care { color: #ffe3a3; background: rgba(255, 209, 102, 0.07); border-color: rgba(255, 209, 102, 0.35); }
.sp-link { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.sp-link:hover { text-decoration: underline; }

/* ---------- 魚ごとのページ ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.spd-hero { padding-block: 40px 30px; }
.spd-title { display: flex; align-items: center; gap: 18px; }
.spd-fish { width: 96px; height: 56px; flex: none; }
.spd-title h1 { font-size: clamp(30px, 6vw, 46px); }
.spd-latin { color: var(--teal) !important; font-style: italic; margin-top: 2px !important; font-size: 14px; }
.spd-tags { margin-top: 8px !important; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.spd-tags .sp-danger { margin: 0; }
.spd-about { margin-top: 14px !important; font-size: 14px; line-height: 1.75; color: var(--text); }
.spd-local { margin-top: 16px !important; font-size: 14px; }
.spd-local b { color: var(--text); margin-right: 10px; }
.spd-body { padding-top: 36px; }
.spd-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.spd-h { font-size: 19px; font-weight: 900; margin: 32px 0 12px; }
.spd-main > .spd-h:first-child, .spd-side > .spd-h:first-child { margin-top: 0; }
.spd-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.spd-season-t { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.spd-season-t div { flex: 1; min-width: 130px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.spd-season-t span { display: block; font-size: 12px; color: var(--muted); }
.spd-season-t b { font-size: 20px; font-weight: 900; }
.spd-season-t b.pk { color: var(--accent); }
.sz-bar.big { gap: 4px; padding-bottom: 18px; }
.sz-bar.big span { height: 22px; border-radius: 5px; }
.sz-bar.big span::after { top: 25px; font-size: 11px; }
.spd-card .note { margin-top: 10px; }
.spd-tip { font-size: 16px; line-height: 1.8; }
.spd-h3 { font-size: 15px; font-weight: 900; margin: 18px 0 10px; }
.spd-sim { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.spd-sim li { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; line-height: 1.6; }
.spd-sim-b { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; align-items: baseline; }
.spd-sim.has-art li { grid-template-columns: 190px 1fr; }
.spd-sim.has-art .spd-sim-b { grid-template-columns: 1fr; gap: 2px; }
.spd-sim-art { display: block; border-radius: 8px; background: radial-gradient(ellipse at 50% 60%, #1c4e6e, #0a1626 78%); }
.spd-sim-art svg { display: block; width: 100%; height: auto; }
.spd-sim li.me { background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.3); }
.spd-sim li b, .spd-sim li a { font-weight: 900; color: var(--text); }
.spd-sim li.me b { color: var(--accent); }
.spd-sim li a { color: var(--accent); }
.spd-sim li span { color: #c9d1de; }
.spd-trivia { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; color: #d5dbe6; line-height: 1.8; }
.spd-danger { border-radius: 16px; padding: 16px 18px; margin-bottom: 8px; border: 1px solid rgba(255, 84, 112, 0.55); background: rgba(255, 84, 112, 0.1); }
.spd-danger h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; color: #ff8fa2; }
.spd-danger p { margin-top: 8px; line-height: 1.8; }
.spd-danger small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.spd-danger.lv-venom { border-color: rgba(255, 138, 61, 0.55); background: rgba(255, 138, 61, 0.1); }
.spd-danger.lv-venom h2 { color: #ffb07a; }
.spd-danger.lv-food, .spd-danger.lv-care { border-color: rgba(255, 209, 102, 0.5); background: rgba(255, 209, 102, 0.07); }
.spd-danger.lv-food h2, .spd-danger.lv-care h2 { color: var(--gold); }
.spd-facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; font-size: 14px; line-height: 1.6; }
.spd-facts dt { color: var(--muted); font-weight: 700; white-space: nowrap; }
.spd-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.spd-cta { margin-top: 20px; border-radius: 16px; padding: 18px; border: 1px solid var(--line-strong); background: radial-gradient(300px 140px at 100% 0%, rgba(0, 229, 255, 0.12), transparent 70%), var(--surface); }
.spd-cta b { font-size: 16px; }
.spd-cta p { color: var(--muted); font-size: 13.5px; margin: 6px 0 14px; }
.spd-cta .btn { width: 100%; }
.spd-rel { display: flex; flex-wrap: wrap; gap: 6px; }
.spd-rel a { font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px; }
.spd-rel a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 860px) {
  .spd-grid { grid-template-columns: 1fr; gap: 8px; }
  .spd-sim-b { grid-template-columns: 1fr; gap: 2px; }
  .spd-sim.has-art li { grid-template-columns: 112px 1fr; gap: 10px; }
  .spd-fish { width: 64px; height: 38px; }
}
/* 釣りの知識への内部リンク */
.spd-months { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.spd-months a, .zk-learn-links a { font-size: 13px; font-weight: 700; color: var(--teal); text-decoration: none; padding: 5px 12px; border-radius: 99px; border: 1px solid rgba(127, 232, 231, 0.3); background: rgba(127, 232, 231, 0.06); }
.spd-months a:hover, .zk-learn-links a:hover { border-color: var(--accent); color: var(--accent); }
.spd-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--accent); text-decoration: none; }
.spd-danger small a { color: inherit; font-weight: 800; }
.zk-learn { margin-top: 40px; }
.zk-learn h2 { font-size: 18px; font-weight: 900; margin-bottom: 12px; }
.zk-learn-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 図解で攻略(js/species-guides.js にデータがある魚) ---------- */
.gd { margin: 8px 0 40px; }
.gd-lead { color: var(--muted); line-height: 1.8; margin: -4px 0 14px; }
.gd-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.gd-toc a { font-size: 13px; font-weight: 800; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; }
.gd-toc a:hover { border-color: var(--accent); color: var(--accent); }
.gd-panel { position: relative; border: 1px solid var(--line); border-radius: 20px; padding: 24px; margin-bottom: 18px; background:
  radial-gradient(500px 300px at 0 0, rgba(0, 229, 255, 0.08), transparent 70%), radial-gradient(500px 300px at 100% 100%, rgba(255, 46, 126, 0.07), transparent 70%), var(--surface); scroll-margin-top: 80px; }
.gd-panel h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: clamp(20px, 3vw, 26px); font-weight: 900; margin-bottom: 16px; }
.gd-panel h3 small { flex-basis: 100%; font-size: 13px; color: var(--muted); font-weight: 700; }
.gd-panel .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gd-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--grad); color: #031418; font-family: var(--font-num); font-size: 15px; }
.gd-fig { border-radius: 14px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line); }
.gd-svg { display: block; width: 100%; height: auto; }
.gd-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: gd; }
.gd-pts li { counter-increment: gd; position: relative; padding: 14px 16px 14px 54px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.gd-pts li::before { content: counter(gd); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 8px; background: var(--grad); color: #031418; font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.gd-pts b { display: block; font-size: 16px; font-weight: 900; }
.gd-pts p { color: #c9d2e3; font-size: 14px; line-height: 1.7; margin-top: 4px; }
.gd em { font-style: normal; color: var(--gold); font-weight: 800; }
.gd-note { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.7; }
.gd-seasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.gd-seasons div { border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.gd-seasons div.hot { background: linear-gradient(135deg, rgba(255, 209, 102, 0.14), rgba(255, 93, 60, 0.12)); border-color: rgba(255, 209, 102, 0.4); }
.gd-seasons b { display: block; font-size: 16px; font-weight: 900; }
.gd-seasons b small { font-size: 12px; color: var(--gold); margin-left: 8px; }
.gd-seasons span { display: block; font-size: 13px; color: #c9d2e3; margin-top: 4px; line-height: 1.6; }
.gd-times { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 14px; }
.gd-times th, .gd-times td { background: rgba(255, 255, 255, 0.04); padding: 12px 14px; vertical-align: middle; text-align: left; }
.gd-times th { border-radius: 12px 0 0 12px; font-weight: 900; white-space: nowrap; }
.gd-times td:last-child { border-radius: 0 12px 12px 0; color: #c9d2e3; line-height: 1.6; }
.gd-pill { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 900; padding: 4px 12px; border-radius: 99px; background: rgba(127, 232, 231, 0.14); color: var(--teal); }
.gd-pill.hot { background: linear-gradient(160deg, #ffd166, #ff5d3c); color: #1a0d00; }
.gd-pill.low { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.gd-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gd-steps li { text-align: center; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); position: relative; }
.gd-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 900; font-size: 13px; z-index: 1; }
.gd-steps i { display: flex; width: 30px; height: 30px; margin: 0 auto 6px; border-radius: 9px; background: var(--grad); color: #031418; font-style: normal; font-weight: 900; align-items: center; justify-content: center; }
.gd-steps b { display: block; font-size: 15px; font-weight: 900; }
.gd-steps span { display: block; font-size: 12px; color: #c9d2e3; margin-top: 4px; line-height: 1.5; }
.gd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gd-tags span { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: rgba(127, 232, 231, 0.12); color: var(--teal); }
@media (max-width: 560px) {
  .gd-panel { padding: 18px 14px; }
  .gd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-steps li:nth-child(2)::after { display: none; }
  .gd-times td:nth-child(2) { padding-inline: 6px; }
  .gd-pts li { padding-left: 50px; }
}
.spd-h1-sub { display: block; font-size: 0.36em; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; margin-top: 6px; }
/* 基本データ(js/species-facts.js) */
.spd-bfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 12px; }
.spd-bfacts div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.spd-bfacts dt { font-size: 12px; color: var(--muted); }
.spd-bfacts dd { margin: 2px 0 0; font-weight: 800; line-height: 1.5; }
.spd-fact-note { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; border-left: 3px solid var(--gold); background: rgba(255, 209, 102, 0.06); line-height: 1.7; font-size: 14.5px; }

/* ---- 図鑑ページの整理(目次・基本データ・食べ方・よくある質問) ---- */
.spd-toc { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 0 22px; scrollbar-width: none; }
.spd-toc::-webkit-scrollbar { display: none; }
.spd-toc a { flex: none; font-size: 13px; font-weight: 800; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); text-decoration: none; }
.spd-toc a:hover { border-color: var(--accent); color: var(--accent); }
.spd-main [id] { scroll-margin-top: 80px; }
.spd-dtable { display: grid; gap: 1px; margin: 0; border-radius: 12px; overflow: hidden; background: var(--line); }
.spd-dtable div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 11px 14px; background: var(--surface-2); font-size: 14px; line-height: 1.6; }
.spd-dtable dt { color: var(--muted); font-weight: 700; }
.spd-dtable dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.spd-food-t { margin: 0 0 12px; font-weight: 800; font-size: 15px; }
.spd-dishes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.spd-dishes li { font-size: 14px; font-weight: 800; padding: 6px 14px; border-radius: 99px; background: rgba(255, 209, 102, 0.12); color: var(--gold, #ffd166); border: 1px solid rgba(255, 209, 102, 0.3); }
.spd-food-p { margin: 0; font-size: 14px; line-height: 1.8; color: #d5dbe6; }
.spd-food.ng { border-color: rgba(255, 93, 60, 0.5); background: rgba(255, 93, 60, 0.08); }
.spd-food.ng p { margin: 0; line-height: 1.8; font-weight: 700; }
.spd-faq { margin: 0; display: grid; gap: 10px; }
.spd-faq div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.spd-faq dt { font-weight: 900; margin-bottom: 6px; }
.spd-faq dt::before { content: "Q. "; color: var(--accent); }
.spd-faq dd { margin: 0; font-size: 14px; line-height: 1.8; color: #d5dbe6; }
@media (max-width: 560px) { .spd-dtable div { grid-template-columns: 6.5em 1fr; gap: 8px; } }
.spd-local-more { display: inline-flex; gap: 10px; margin-left: 10px; }
.spd-local-more a { font-size: 12px; font-weight: 800; color: var(--teal); white-space: nowrap; }

/* ---- 図解パネルの番号を整理(大項目は大きな数字、中の項目は番号なし/控えめ) ---- */
.gd-panel h3 { align-items: baseline; }
.gd-no { width: auto; height: auto; padding: 0; border-radius: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: .02em; margin-right: 2px; }
.gd-no::before { content: "0"; }
/* 中の要点: 番号をやめ、左の色線で区切る */
.gd-pts li { padding: 12px 16px 12px 18px; border-left: 3px solid rgba(127, 232, 231, 0.55); }
.gd-pts li::before { content: none; }
/* コツ: 小さな数字だけ(四角い背景なし) */
.gd-tipl { counter-reset: tip; }
.gd-tipl li { counter-increment: tip; padding-left: 44px; border-left-color: rgba(255, 209, 102, 0.6); }
.gd-tipl li::before { content: counter(tip); position: absolute; left: 14px; top: 12px; width: auto; height: auto; background: none; color: var(--gold); font-size: 18px; font-weight: 900; }
/* 手順: 塗りつぶしではなく、細い丸枠の番号 */
.gd-steps i { width: 26px; height: 26px; border-radius: 50%; background: none; border: 2px solid var(--teal); color: var(--teal); font-size: 13px; }
@media (max-width: 560px) {
  .gd-pts li { padding-left: 16px; }
  .gd-tipl li { padding-left: 40px; }
}

/* ---------- 一覧カード(2026-10 改訂): 表紙(写真 or イラスト)+名前・地方名・最盛期だけ ---------- */
.zk-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sp { position: relative; padding: 0; gap: 0; overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.sp:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.sp .sp-cover { margin: 0; aspect-ratio: 16 / 10; border-radius: 0; background: radial-gradient(ellipse at 50% 62%, #1c4e6e, #0a1626 78%); }
.sp-cover .sp-art, .spd-cover .sp-art { width: 100%; height: 100%; object-fit: contain; padding: 6% 5%; box-sizing: border-box; }
.sp-cover.has-cover .cv-cap { padding: 14px 8px 6px; font-size: 10.5px; }
.sp-flag { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 900; color: #fff; background: rgba(255, 84, 112, 0.92); border-radius: 999px; padding: 2px 8px 2px 6px; }
.sp-flag svg { width: 12px; height: 12px; }
.sp-flag.lv-venom { background: rgba(255, 138, 61, 0.95); }
.sp-flag.lv-food, .sp-flag.lv-care { background: rgba(10, 22, 38, 0.85); color: var(--gold); border: 1px solid rgba(255, 209, 102, 0.6); }
.sp-body { display: grid; gap: 4px; padding: 10px 12px 12px; }
.sp-body h2 { font-size: 16.5px; font-weight: 900; line-height: 1.3; }
.sp-body h2 a { color: var(--text); text-decoration: none; }
.sp-body h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* カード全体を押せるように */
.sp-body h2 a:hover { color: var(--accent); }
.sp-sub { font-size: 12px; color: var(--muted); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.sp-sz { margin-top: 4px; }
.sp-sz-t { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.sp-sz-t b { color: var(--accent); font-weight: 900; }
.sp-sz .sz-bar { padding-bottom: 0; gap: 2px; }
.sp-sz .sz-bar span { height: 6px; border-radius: 2px; }
.sp-sz .sz-bar span::after { display: none; }
@media (max-width: 720px) {
  .zk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sp-body { padding: 8px 10px 10px; }
  .sp-body h2 { font-size: 15px; }
  .sp-sub { font-size: 11px; }
}

/* ---------- 魚ごとのページの上部: 文字とイラスト(写真)を横並び ---------- */
.spd-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 400px); gap: 24px; align-items: center; }
.spd-hero .spd-cover { margin-top: 0; max-width: none; background: radial-gradient(ellipse at 50% 62%, #1c4e6e, #0a1626 78%); }
@media (max-width: 760px) {
  .spd-hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .spd-hero .spd-cover { max-width: 520px; }
}
.spd-miwake-one { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center; }
.spd-miwake-one .spd-tip { margin: 0; }
@media (max-width: 600px) { .spd-miwake-one { grid-template-columns: 1fr; } .spd-miwake-one .spd-sim-art { max-width: 320px; } }
.sp-sz .sz-bar span.now { outline-width: 1.5px; outline-offset: 0; }
@media (max-width: 760px) { .spd-hero .spd-cover { aspect-ratio: 2 / 1; } }

/* 「〇〇とは？」の解説(scripts/zukan-extra.mjs) */
.spd-about-x p { color: #d6dce6; line-height: 1.9; }
.spd-about-x .lr-table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 13.5px; }
.spd-about-x .lr-table th, .spd-about-x .lr-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.spd-about-x .lr-table thead th { background: rgba(0, 229, 255, 0.08); color: var(--accent); font-weight: 900; }
.spd-about-x .lr-table tbody th { color: var(--muted); font-weight: 800; white-space: nowrap; }
.spd-about-x .note { font-size: 12.5px; color: var(--muted); }
.spd-about-x .note a, .spd-about-x p a { color: var(--accent); }
@media (max-width: 560px) { .spd-about-x .lr-table { font-size: 12px; } .spd-about-x .lr-table th, .spd-about-x .lr-table td { padding: 6px 6px; } }