/* ============================================================
   筋トレ大図鑑 スタイル — Performance Lab Edition
   コンセプト: 硬質な白×黒の高コントラスト。色は「計測のティール」1色のみ。
   極太ゴシック見出し＋ジャージ番号のような巨大コンデンス数字＋等幅の英字ラベル。
   Base: Off-white #F4F4F2 / Ink #16161A / Signal Teal #12B8A0

   デザイントークンはすべて :root に集約する。
   例外: .fg-* のイラスト内部色は figures.js のアートワークと密結合のためトークン化しない。
   ============================================================ */

:root {
  /* --- ベース（ニュートラルな白と黒。暖色クリームは使わない） --- */
  --bg: #f4f4f2;
  --panel: #ffffff;
  --panel-soft: #ececea;
  --paper-warm: #fafafa;
  --header-bg: rgba(244, 244, 242, .8);
  --border: #e3e3e0;
  --border-strong: #cececa;
  --ink: #16161a;
  --ink-soft: #45454c;
  --sub: #86868c;
  --on-ink: #ffffff;
  --link: #16161a;
  --sep: #c8c8c4;

  /* --- アクセント（計測のティール・唯一の差し色） --- */
  --brand: #12b8a0;
  --brand-deep: #0e9c88;
  --amber: #e8a23c;             /* 補助（筋肉マップの協働筋など。主働筋のティールと区別するための暖色） */
  --teal: #12b8a0;
  --brand-tint: #e3f6f2;
  --brand-tint-soft: #eafaf7;
  --brand-tint-row: #eafaf7;
  --brand-border-soft: #9fdfd3;
  --focus-ring: rgba(18, 184, 160, .22);

  /* --- 筋肉マップ（主働筋=ティール／協働筋=アンバー。同系色だと見分けづらいため色相を変える） --- */
  --primary-red: #12b8a0;
  --secondary-orange: #e8a23c;
  --muscle-idle: #d7d7d1;
  --muscle-dim: #e4e4e1;
  --muscle-stroke: #ffffff;
  --silhouette: #e6e6e2;
  --silhouette-stroke: #d2d2cc;

  /* --- ダークステージ（KV・イラスト背景。ニュートラルな漆黒） --- */
  --stage-1: #101013;
  --stage-2: #17171b;
  --stage-3: #1d1d22;
  --stage-deep: #0e0e11;
  --stage-glow-1: #232329;
  --stage-glow-2: #27272e;
  --stage-border: #242429;
  --stage-border-strong: #2a2a30;
  --stage-text: #a9a9b0;
  --stage-text-strong: #d7d7db;
  --stage-caption: #83838a;
  --stage-chip-bg: rgba(255, 255, 255, .05);
  --stage-chip-border: rgba(255, 255, 255, .14);

  /* --- 炎（ダークステージ上のアクセント。現在はティールの光） --- */
  --flame: #12b8a0;
  --flame-soft: #5fd0c0;
  --flame-pale: #9fdfd3;
  --flame-cream: #ffffff;
  --flame-glow: #2ad6bd;

  /* --- チップ（無彩色＋オレンジ1色。fill/outlineで役割を分ける） --- */
  --chip-cat-bg: #16161a;    --chip-cat-fg: #ffffff;   /* 部位=黒ソリッド（最重要メタ） */
  --chip-eq-bg: transparent; --chip-eq-fg: #45454c;    /* 器具=アウトライン */
  --chip-level-bg: transparent; --chip-level-fg: #86868c; /* 難易度=淡アウトライン */
  --chip-hyp-bg: #ececea;    --chip-hyp-fg: #45454c;   /* 筋肥大=無彩ソリッド */
  --chip-power-bg: var(--brand); --chip-power-fg: #ffffff; /* 瞬発系=ティールソリッド */
  --chip-muscle-bg: transparent; --chip-muscle-fg: var(--brand-deep);

  /* --- 角丸（硬質・シャープ寄り） --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- 影（控えめ・ニュートラル） --- */
  --shadow: 0 1px 2px rgba(20, 20, 24, .04), 0 6px 16px -12px rgba(20, 20, 24, .16);
  --shadow-hover: 0 2px 8px rgba(20, 20, 24, .06), 0 16px 34px -20px rgba(18, 184, 160, .28);
  --shadow-stage: 0 24px 56px -32px rgba(10, 10, 14, .6);

  /* --- タイポグラフィ --- */
  --font-num: "Anton", "Archivo", "Hiragino Sans", sans-serif;            /* 巨大数字・英字ロゴ */
  --font-display: "Archivo", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; /* 見出し（極太ゴシック） */
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* 英字ラベル */
  --font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
/* scroll-behavior:smooth はページ切替時の先頭スクロールを阻害するため使用しない */
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  overflow-x: clip;   /* フルブリード（画面幅いっぱい）ヒーローのはみ出しを抑える */
}
a { color: inherit; text-decoration: none; }
/* 見出しは極太ゴシック。本文はゴシックで可読性を確保 */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .005em;
}
/* 英字ラベル・キャプションの共通ユーティリティ（等幅・大文字・字間広め）
   ※英字のみの要素に限定する（和文に等幅・大文字は当てない） */
.eyebrow, .kv-eyebrow, .card-en, .ex-en {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 500;
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .inner {
  max-width: 1200px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.logo { font-size: 1.12rem; font-weight: 800; letter-spacing: .03em; color: var(--ink); }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a {
  padding: 7px 14px; border-radius: var(--radius-pill); font-size: .88rem; font-weight: 600;
  color: var(--sub); transition: .18s;
}
.nav a:hover { color: var(--brand-deep); background: var(--brand-tint-soft); }
.nav a.active { color: var(--on-ink); background: var(--ink); }

/* ---------- レイアウト ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 22px 20px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.panel h2 { font-size: 1.02rem; margin: 0 0 12px; }

.home-layout { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .home-layout { grid-template-columns: 1fr; } }

/* ---------- キービジュアル（ダークステージ） ---------- */
.kv {
  position: relative; overflow: hidden;
  /* 画面幅いっぱいに広げ、ヘッダー直下からのフルブリード・ヒーローに */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: -22px; margin-bottom: 28px;
  border: none; border-radius: 0;
  /* 実写（ジムのデッドリフト）＋黒スクリム＋右上のティールグロー */
  background:
    radial-gradient(circle at 87% 8%, rgba(18, 184, 160, .26) 0%, transparent 46%),
    linear-gradient(100deg, rgba(10, 10, 13, .94) 0%, rgba(10, 10, 13, .7) 46%, rgba(10, 10, 13, .26) 100%),
    url("../img/hero-gym.jpg") 58% center / cover no-repeat;
  /* 左右は 1160px コンテナに揃うガター、上下はゆったり */
  padding: 84px max(20px, calc(50% - 580px)) 78px;
  min-height: 380px;
  display: flex; align-items: center;
}
/* 写真に置き換えたため、旧イラスト・装飾SVGは隠す */
.kv-art, .kv-fig { display: none; }
/* モバイルは文字が全幅に載るのでスクリムを一段強める */
@media (max-width: 760px) {
  .kv::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(10, 10, 13, .3) 0%, rgba(10, 10, 13, .62) 100%);
  }
  .kv { min-height: 240px; }
}
.kv-content { position: relative; z-index: 1; max-width: 620px; }
.kv-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.05rem; color: var(--flame-glow); margin-bottom: 16px;
}
.kv-bar { width: 30px; height: 3px; flex: none; background: var(--flame); }
.kv h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  font-weight: 900; letter-spacing: 0;
  color: var(--flame-cream);
}
.kv p { margin: 0 0 24px; color: var(--stage-text); font-size: 1.02rem; max-width: 30em; }
/* スタッツはジャージのゼッケンのように大きな数字で見せる */
.kv-stats { display: flex; gap: 0; flex-wrap: wrap; }
.kv-stat {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 0 22px 0 0; margin-right: 22px;
  border-right: 1px solid var(--stage-chip-border);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stage-text);
}
.kv-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.kv-stat b {
  font-family: var(--font-num); font-weight: 400;
  font-size: 2.6rem; line-height: .9; color: var(--flame-cream); letter-spacing: .01em;
}

/* ---------- カテゴリページの実写バナー（ホームKVと同系統・カテゴリ別写真） ---------- */
.page-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;   /* テキスト量に依らず縦位置を安定 */
  min-height: 210px;                                                /* 全カテゴリでバナー高さを統一 */
  /* 画面幅いっぱいのフルブリード・バナー */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: 6px; margin-bottom: 24px;
  border: none; border-radius: 0;
  --hero-img: url("../img/hero-gym.jpg");
  --hero-pos: 54% 40%;
  background:
    radial-gradient(circle at 90% 12%, rgba(18, 184, 160, .22) 0%, transparent 46%),
    linear-gradient(100deg, rgba(10, 10, 13, .93) 0%, rgba(10, 10, 13, .66) 52%, rgba(10, 10, 13, .34) 100%),
    var(--hero-img) var(--hero-pos) / cover no-repeat;
  padding: 30px max(20px, calc(50% - 580px));
}
/* カテゴリごとの実写 */
.page-hero--muscle { --hero-img: url("../img/cat-muscle.jpg"); --hero-pos: 50% 26%; }
.page-hero--hyp    { --hero-img: url("../img/cat-hyp.jpg");    --hero-pos: 50% 24%; }
.page-hero--power  { --hero-img: url("../img/cat-power.jpg");  --hero-pos: 30% 40%; }
/* 器具バナー：元の位置(50% 42%)は暗いボケ部分だけが写り込み判読不能だったため、
   クロムハンドルとプレートの数字が写る明るい帯にクロップし、スクリムも薄くして写真を見せる */
.page-hero--equip {
  --hero-img: url("../img/cat-equip.jpg"); --hero-pos: 62% 20%;
  background:
    radial-gradient(circle at 90% 12%, rgba(18, 184, 160, .22) 0%, transparent 46%),
    linear-gradient(100deg, rgba(10, 10, 13, .8) 0%, rgba(10, 10, 13, .52) 52%, rgba(10, 10, 13, .22) 100%),
    var(--hero-img) var(--hero-pos) / cover no-repeat;
}
.page-hero .kv-eyebrow { margin-bottom: 10px; }
.page-hero h1 {
  margin: 0; color: var(--flame-cream);
  font-size: clamp(1.55rem, 3.4vw, 2.1rem); font-weight: 900; letter-spacing: 0;
}
.page-hero p { margin: 10px 0 0; color: var(--stage-text); font-size: .92rem; max-width: 44em; }
@media (max-width: 470px) {
  /* フルブリード維持のため左右marginは触らず、padding/縦のみ調整 */
  .page-hero { padding: 20px max(18px, calc(50% - 580px)); border-radius: 0; margin-top: 4px; margin-bottom: 16px; min-height: 150px; }
  .page-hero h1 { font-size: 1.4rem; }
  .page-hero .kv-eyebrow { margin-bottom: 7px; }
  .page-hero p { font-size: .82rem; margin-top: 7px; line-height: 1.65; }
}

/* ---------- 汎用ヒーロー（下層ページ） ---------- */
.hero { text-align: center; padding: 36px 0 16px; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.4rem); margin: 0 0 10px; font-weight: 900; letter-spacing: 0;
  color: var(--ink);
}
/* 中央寄せ見出しの下に短い極太のオレンジ罫線 */
.hero h1::after {
  content: ""; display: block; width: 40px; height: 4px;
  background: var(--brand); margin: 14px auto 0;
}
.hero p { color: var(--sub); margin: 14px 0 14px; }
.hero a { color: var(--brand-deep); text-decoration: underline; }

/* ---------- クイックナビ（アイコンメニュー） ---------- */
.quick-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.qn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 10px 14px; text-align: center;
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.qn:hover { transform: translateY(-3px); border-color: var(--brand-border-soft); box-shadow: var(--shadow-hover); }
.qn-icon { font-size: 1.7rem; line-height: 1.2; }
.qn b { font-family: var(--font-display); font-size: .98rem; font-weight: 800; letter-spacing: .005em; }
.qn-sub { font-size: .72rem; color: var(--sub); }
.filter-clear {
  margin-left: 8px; padding: 2px 10px; font-size: .74rem; cursor: pointer; font-weight: 600;
  background: transparent; color: var(--brand-deep);
  border: 1px solid var(--brand); border-radius: var(--radius-pill);
}
.filter-clear:hover { background: var(--brand-tint); }

/* ---------- 3タップ診断 ---------- */
.finder .f-step { margin-bottom: 12px; }
.f-label { display: block; font-size: .78rem; font-weight: 700; color: var(--sub); margin-bottom: 6px; }
.f-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.f-chips button {
  padding: 6px 14px; font-size: .84rem; font-weight: 600; cursor: pointer;
  background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--border-strong); border-radius: 999px;
  transition: .15s;
}
.f-chips button:hover { border-color: var(--brand); color: var(--brand-deep); }
.f-chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.finder-hit { font-size: .88rem; font-weight: 700; color: var(--brand-deep); margin: 14px 0 10px; }
#finder-out .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
#finder-out .hint { color: var(--sub); font-size: .8rem; margin: 10px 0 0; }

/* ---------- 目的別おすすめセット ---------- */
.collections { margin-top: 4px; }
.collections h2, .related .col-grid + h2 { font-size: 1.02rem; margin: 0 0 12px; }
.col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .col-grid { grid-template-columns: 1fr; } }
.col-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.col-card:hover { transform: translateY(-3px); border-color: #f0b9a0; box-shadow: var(--shadow-hover); }
.col-icon { font-size: 1.5rem; line-height: 1.3; }
.col-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.col-body b { font-family: var(--font-display); font-size: .98rem; font-weight: 800; letter-spacing: .005em; }
.col-desc { font-size: .76rem; color: var(--sub); line-height: 1.55; margin-top: 1px; }
.col-count { font-size: .72rem; font-weight: 700; color: var(--brand-deep); margin-top: 3px; letter-spacing: .04em; }

/* ---------- フィルタ ---------- */
.filters input[type="search"] {
  width: 100%; padding: 13px 18px; font-size: 1rem;
  background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.filters input[type="search"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.selects { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.selects select {
  flex: 1; min-width: 150px; padding: 9px 12px; font-size: .88rem;
  background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
}
.selects select:focus { border-color: var(--brand); outline: none; }
.btn-reset {
  padding: 9px 18px; font-size: .88rem; cursor: pointer; font-weight: 600;
  background: transparent; color: var(--sub);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); transition: .15s;
}
.btn-reset:hover { color: var(--brand-deep); border-color: var(--brand); }

/* ---------- カード ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 15px; }
.card {
  display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card-fig {
  border-radius: var(--radius-sm); overflow: hidden;
  background: radial-gradient(circle at 50% 30%, var(--stage-glow-1) 0%, var(--stage-deep) 78%);
  border: 1px solid var(--stage-border);
  align-self: center;
}
.card-fig svg { width: 100%; height: auto; display: block; }
.eq-grid .card { grid-template-columns: 1fr; }
.card:hover { transform: translateY(-3px); border-color: var(--brand-border-soft); box-shadow: var(--shadow-hover); }
.card h3 { margin: 9px 0 3px; font-size: 1.08rem; font-weight: 800; letter-spacing: .005em; }
.card-en { color: var(--sub); font-size: .66rem; }
/* 器具カードの説明文（和文の本文。等幅キャプションではなく自然な本文サイズ） */
.card-desc { margin: 4px 0 0; font-size: .82rem; line-height: 1.7; color: var(--ink-soft); }
.eq-grid { gap: 12px; }
.eq-grid .card { padding: 15px 17px; gap: 5px; }
.eq-grid .card h3 { margin: 0; font-size: 1.05rem; }
.eq-grid .card .card-meta { margin-top: 7px; }
.card-head { display: flex; gap: 6px; flex-wrap: wrap; }
.card-meta { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.card-muscles { margin-top: 9px; font-size: .8rem; color: var(--sub); }
.card-muscles .mlabel { color: var(--brand-deep); font-weight: 700; }
.results h2 { font-size: .95rem; color: var(--sub); margin: 4px 0 12px; font-weight: 600; }
.empty { color: var(--sub); padding: 30px; text-align: center; }

/* ---------- チップ（無彩色＋熾火1色。色ではなく fill/outline で役割を分ける） ---------- */
.chip {
  display: inline-block; padding: 3px 11px; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 600; border: 1px solid transparent; letter-spacing: .02em;
}
.cat-chip { background: var(--chip-cat-bg); color: var(--chip-cat-fg); }
.eq-chip { background: var(--chip-eq-bg); color: var(--chip-eq-fg); border-color: var(--border-strong); }
.level-chip { background: var(--chip-level-bg); color: var(--chip-level-fg); border-color: var(--border); }
.type-chip.type-hypertrophy { background: var(--chip-hyp-bg); color: var(--chip-hyp-fg); }
.type-chip.type-power { background: var(--chip-power-bg); color: var(--chip-power-fg); border-color: var(--brand-border-soft); }
.muscle-chip { background: var(--chip-muscle-bg); color: var(--chip-muscle-fg); border-color: var(--brand-border-soft); margin: 2px 3px 2px 0; }
a.chip:hover { border-color: var(--brand); color: var(--brand-deep); }

/* ---------- 筋肉マップ ---------- */
.muscle-map { display: flex; gap: 10px; justify-content: center; }
.map-view { flex: 1; max-width: 220px; text-align: center; }
.map-label { font-size: .7rem; color: var(--sub); letter-spacing: .18em; margin-top: 5px; font-weight: 600; }
.muscle-svg { width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(20, 23, 26, .10)); }
.silhouette * { fill: var(--silhouette); stroke: var(--silhouette-stroke); stroke-width: 1; }
g.muscle * { fill: var(--muscle-idle); stroke: var(--muscle-stroke); stroke-width: 1.4; transition: fill .15s, filter .15s; }
g.muscle.dim * { fill: var(--muscle-dim); }
/* フラットな単色塗りは安っぽく見えるため、ハイライト部位はグラデーションで奥行きを出す。
   主働筋=ティール／協働筋=アンバーと色相を分け、同系色による見分けにくさを避ける */
g.muscle.primary * { fill: url(#muscleGradPrimary); }
g.muscle.secondary * { fill: url(#muscleGradSecondary); }
g.muscle.clickable { cursor: pointer; outline: none; }
g.muscle.clickable:hover *, g.muscle.clickable:focus * { filter: brightness(.82) saturate(1.4); }
/* 脊柱起立筋など細い部位のクリック判定を広げるための透明当たり判定。常に非表示のまま維持する */
g.muscle .hit-pad { fill: transparent !important; stroke: none !important; filter: none !important; }
.map-panel .hint, .legend .hint { color: var(--sub); font-size: .78rem; margin: 4px 0; }

.legend { margin-top: 14px; font-size: .85rem; }
.legend > div { margin: 4px 0; }
.legend-chips { margin-bottom: 8px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.dot-primary { background: var(--primary-red); }
.dot-secondary { background: var(--secondary-orange); }

/* ---------- 種目イラスト ---------- */
.ex-header.with-hero { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: center; }
@media (max-width: 800px) { .ex-header.with-hero { grid-template-columns: 1fr; } }
.ex-hero {
  margin: 0; padding: 12px 10px 4px;
  background: radial-gradient(circle at 50% 26%, var(--stage-glow-2) 0%, var(--stage-deep) 74%);
  border: 1px solid var(--stage-border); border-radius: var(--radius);
  text-align: center;
}
.ex-hero figcaption { font-size: .7rem; color: var(--stage-caption); padding-bottom: 8px; letter-spacing: .06em; }
.ex-hero .fg-body, .ex-hero .fg-head { filter: url(#fgglow); }
.fig-svg { width: 100%; height: auto; max-height: 240px; }
.fg-body { stroke: url(#fgb); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.fg-body2 { stroke: #9a5c36; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.fg-head { fill: url(#fgb); }
.fg-eq { stroke: #b7c5d9; stroke-width: 5; stroke-linecap: round; fill: none; }
.fg-eq-thin { stroke: #5d6a80; stroke-width: 3; stroke-linecap: round; fill: none; }
.fg-plate { fill: #232a38; stroke: #b7c5d9; stroke-width: 3; }
.fg-plate-ring { fill: none; stroke: #7e8ca3; stroke-width: 2; }
.fg-plate-hub { fill: #b7c5d9; stroke: none; }
.fg-bench { fill: #2a303d; stroke: #49556b; stroke-width: 2; }
.fg-bench-pad { fill: #3c4763; stroke: #55628a; stroke-width: 1.5; }
.fg-cable { stroke: #3fd0c2; stroke-width: 2.5; fill: none; }
.fg-ground { stroke: #39404e; stroke-width: 3; stroke-linecap: round; }
.fg-shadow { fill: rgba(0, 0, 0, .5); }
.fg-stage { fill: none; stroke: rgba(18, 184, 160, .4); stroke-width: 1.5; }
.fg-stage2 { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; stroke-dasharray: 3 6; }
.fg-motion { stroke: #ffd166; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fg-ball { fill: #d98a55; stroke: #eab183; stroke-width: 2; }
.fg-ball-line { stroke: #eab183; stroke-width: 1.5; }

/* ---------- 種目ページ ---------- */
.breadcrumb { font-size: .82rem; color: var(--sub); margin: 4px 0 14px; }
.breadcrumb a:hover { color: var(--brand-deep); }
.breadcrumb .sep { margin: 0 7px; color: var(--sep); }
.ex-header h1 { margin: 0 0 5px; font-size: 1.85rem; font-weight: 900; letter-spacing: 0; }
.ex-en { color: var(--sub); font-size: .74rem; margin-left: 0; display: block; margin-top: 2px; }
.ex-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.ex-desc { color: var(--ink-soft); margin: 8px 0 0; }
.ex-body { display: grid; grid-template-columns: 430px 1fr; gap: 20px; align-items: start; }
@media (max-width: 950px) { .ex-body { grid-template-columns: 1fr; } }
.steps li, .tips li { margin: 7px 0; }
.steps li::marker { color: var(--brand); font-weight: 800; }
.tips { list-style: none; padding-left: 0; }
.tips li { padding-left: 26px; position: relative; }
.tips li::before { content: "✅"; position: absolute; left: 0; }
.links { list-style: none; padding-left: 0; margin: 0; }
.links li { margin: 7px 0; }
.links a { color: var(--link); font-weight: 500; }
.links a:hover { text-decoration: underline; }
.related { margin-top: 28px; }
.related h2 { font-size: 1.14rem; margin-bottom: 14px; font-weight: 800; }

/* ---------- 筋肉ページ ---------- */
.muscle-header { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: center; }
@media (max-width: 800px) { .muscle-header { grid-template-columns: 1fr; } }
.muscle-group { padding: 14px 18px; }
.muscle-row {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.muscle-row:last-child { border-bottom: none; }
.muscle-row:hover { background: var(--brand-tint-row); }
.muscle-row .count { margin-left: auto; font-size: .78rem; color: var(--brand-deep); font-weight: 700; }

/* ---------- フッター ---------- */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 44px;
  padding: 26px 20px; text-align: center; color: var(--sub); font-size: .8rem;
  background: var(--paper-warm);
}
.site-footer .credit { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: var(--sep); }

/* ---------- モバイル：ヘッダー1段化・KVスリム化 ----------
   ※ 基本定義より後に置くこと（同一セレクタの上書きのため） */
@media (max-width: 700px) {
  .site-header .inner { padding: 7px 8px; gap: 4px; flex-wrap: nowrap; }
  .logo { font-size: .9rem; white-space: nowrap; flex: none; }
  /* 「から探す」を省略して全項目を1行に収める（スクロール不要） */
  .nav-x { display: none; }
  .nav { flex-wrap: nowrap; flex: 1; min-width: 0; justify-content: flex-end; }
  .nav a { padding: 4px 7px; font-size: .8rem; white-space: nowrap; flex: none; }
}
@media (max-width: 470px) {
  .logo-text { display: none; }
  .logo { font-size: 1.1rem; }
  .nav { justify-content: space-between; }

  /* KV: フルブリード維持（左右marginは触らない）。下の余白を詰めて写真ぴったりに */
  .kv { padding: 26px max(18px, calc(50% - 580px)); border-radius: 0; margin-top: -22px; margin-bottom: 14px; min-height: 0; }
  .kv-eyebrow { font-size: .82rem; letter-spacing: .2em; margin-bottom: 8px; }
  .kv h1 { font-size: 1.6rem; margin-bottom: 8px; }
  .kv p { font-size: .82rem; margin-bottom: 14px; line-height: 1.6; }
  .kv p br { display: none; }
  .kv-stats { gap: 0; }
  .kv-stat { padding: 0 14px 0 0; margin-right: 14px; font-size: .6rem; }
  .kv-stat b { font-size: 1.9rem; }

  /* 4メニュー: 縦を詰めて上へ寄せる */
  .quick-nav { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .qn { padding: 11px 8px 9px; gap: 3px; }
  .qn-icon { width: 38px; height: 38px; font-size: 1.35rem; margin-bottom: 2px; }
  .qn b { font-size: .86rem; }
  .qn-sub { font-size: .64rem; }
}

/* ============================================================
   デザイン精緻化パス（第2デザイナーによるUI/UXレビュー反映）
   基本定義より後に置き、既存スタイルを上書きする。
   狙い: ①キーボード操作の可視性 ②押せる要素の明確化
        ③アイコンの意匠性 ④触覚的フィードバック ⑤モバイル操作性
   ============================================================ */

/* --- ① アクセシビリティ: キーボードフォーカスリングを統一 ---
   マウス操作では出ず（:focus-visible）、Tab操作時のみ現在位置を明示 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.card:focus-visible,
.qn:focus-visible,
.col-card:focus-visible,
.muscle-row:focus-visible,
g.muscle.clickable:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* 検索欄はリング＋やわらかい光彩で入力位置を強調 */
.filters input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
/* SVG内の筋肉グループはoutlineが角丸に沿わないため光彩で示す */
g.muscle.clickable:focus-visible { outline: none; }
g.muscle.clickable:focus-visible * { filter: drop-shadow(0 0 3px var(--brand)); }

/* --- ② 筋肉マップ: 「押せる」ことを明確化 ---
   休止状態のグレーはナビ用途だと無効に見えるため、
   ホバー/フォーカスで確実にブランド色へ発色させる */
.muscle-map[data-clickable="true"] g.muscle.clickable:hover * {
  fill: var(--brand);
  filter: brightness(1.04);
}

/* --- ③ アイコンに円形の下地を敷いて意匠性を上げる --- */
.qn-icon {
  width: 48px; height: 48px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--panel-soft);
  border: 1px solid var(--border);
}
.qn { gap: 6px; }
.col-icon {
  width: 42px; height: 42px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--panel-soft);
  border: 1px solid var(--border);
}

/* --- ④ 押下フィードバック（タップ・クリックの手応え） --- */
.card:active,
.qn:active,
.col-card:active { transform: translateY(-1px); transition-duration: .06s; }
.f-chips button:active,
.nav a:active,
.btn-reset:active { transform: scale(.96); }

/* --- ⑤ モバイル: タップ領域を推奨サイズへ拡大 --- */
@media (max-width: 700px) {
  .nav a { padding: 9px 9px; font-size: .82rem; }
  .f-chips button { padding: 9px 15px; }        /* 診断ボタンを押しやすく */
  .filter-clear { padding: 5px 12px; }
}
@media (max-width: 470px) {
  .qn-icon { width: 42px; height: 42px; }
}