/* =============================================================
   GENBA EDITORIAL v1 — ハブE「HRP — 初ラウンド準備室」
   意匠正本: web-design-master_SKILL.md（トークン以外の発明禁止）
   紙 #F6F4EF / インク #1A1C20 / サブ #565B63 / 罫線 #DBD5C9
   アクセント: 松葉 #3F6B4F（1ハブ1色・多色禁止。
   ハブBの深緑 #2E4B3C とは別トーンの緑として新規採番）
   見出し: Shippori Mincho / 本文: Noto Sans JP系
   角丸は最大4px・影は原則禁止（hairline罫線で区切る）・グラデ全面禁止
   ============================================================= */

/* ---------- 1. トークン ---------- */
:root{
  --paper:#F6F4EF;
  --card:#FCFAF5;
  --ink:#1A1C20;
  --sub:#565B63;
  --rule:#DBD5C9;
  --acc:#3F6B4F;                 /* 松葉 */
  --acc-soft:rgba(63,107,79,.05);
  /* 旧テンプレ互換エイリアス（本文中SVGのvar()参照用） */
  --bg:var(--paper); --txt:var(--ink); --dim:var(--sub); --line:var(--rule);
  --serif:'Shippori Mincho',"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --sans:'Noto Sans JP',"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

/* ---------- 2. ベース ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.95;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
.wrap{max-width:720px;margin:0 auto;padding:0 22px 72px}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.02em;text-wrap:balance}
h1{font-size:27px;line-height:1.6;margin:8px 0 14px}
h2{font-size:20px;line-height:1.6;margin:52px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
h3{font-size:17px;line-height:1.7;margin:32px 0 10px}
p{margin:15px 0}
ul,ol{margin:15px 0 15px 26px}
li{margin:7px 0}
a{color:var(--acc)}
a:hover{color:var(--ink)}
strong{color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

@media (max-width:480px){
  body{font-size:15.5px}
  h1{font-size:22px}
  h2{font-size:18.5px}
  .wrap{padding:0 16px 56px}
}

/* ---------- 3. サイト頭（極細トップバー＋サイトコード＋セクション索引） ---------- */
.topbar{height:3px;background:var(--acc)}
header.site{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 18px;padding:18px 0 14px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.sitecode{font-family:var(--serif);font-size:15px;letter-spacing:.05em;margin:0}
.sitecode a{color:var(--ink);text-decoration:none}
.sitecode a:hover{color:var(--acc)}
.sitecode .code{color:var(--acc);font-weight:700;letter-spacing:.14em}
.siteindex{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:12px}
.siteindex a{color:var(--sub);text-decoration:none;letter-spacing:.05em;padding:4px 0}
.siteindex a:hover{color:var(--acc)}

/* パンくず */
.crumb{color:var(--sub);font-size:12px;margin:14px 0 0;letter-spacing:.03em}
.crumb a{color:var(--sub);text-decoration:none}
.crumb a:hover{color:var(--acc)}

/* PR開示（法定表記。静かに） */
.small{font-size:12.5px;color:var(--sub);line-height:1.9}

/* ---------- 4. ヒーロー（明朝の断言＋本文2〜3行＋hairline。ボタン・バッジ禁止） ---------- */
.hero{margin:34px 0 40px;padding-bottom:30px;border-bottom:1px solid var(--rule)}
.hero h1{font-size:30px;line-height:1.7;margin:10px 0 20px}
.hero p{font-size:15.5px;margin:10px 0}
@media (max-width:480px){.hero h1{font-size:23px}}

/* kicker（分類小見出し・英小文字トラッキング広め） */
.kicker{font-size:11px;letter-spacing:.24em;text-transform:lowercase;
  color:var(--acc);margin:26px 0 0;font-weight:500}

/* 文書番号データ行（コード｜初版｜改訂） */
.docline{font-size:12.5px;color:var(--sub);letter-spacing:.05em;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:9px 2px;margin:16px 0 30px}
.docline .code{color:var(--acc);font-weight:700}

/* ---------- 5. 索引（番号付きリスト。カードグリッド禁止） ---------- */
.index-list{list-style:none;margin:6px 0 44px}
.index-list>li{border-top:1px solid var(--rule);padding:22px 0 18px;margin:0}
.index-list>li:last-child{border-bottom:1px solid var(--rule)}
.index-list .no{display:block;font-size:12px;color:var(--acc);
  letter-spacing:.16em;margin-bottom:4px}
.index-list .ttl{font-family:var(--serif);font-size:18px;line-height:1.7;
  font-weight:600;color:var(--ink);text-decoration:none;display:inline-block}
.index-list .ttl:hover{color:var(--acc);text-decoration:underline;text-underline-offset:4px}
.index-list .desc{font-size:13.5px;color:var(--sub);margin:6px 0 0}

/* 研究アジェンダ（本室が扱う問い） */
.agenda{margin:34px 0}
.agenda-title{font-size:12px;letter-spacing:.18em;color:var(--sub);margin:0 0 10px}
.agenda ol{margin:0 0 0 1.6em}
.agenda li{font-family:var(--serif);font-size:15.5px;margin:9px 0}

/* ---------- 6. 記事体裁 ---------- */
.keypoint{border:1px solid var(--rule);border-left:2px solid var(--acc);
  background:var(--acc-soft);padding:16px 20px;margin:26px 0}
.keypoint-title{font-size:12px;font-weight:700;color:var(--acc);letter-spacing:.14em;margin:0}
.keypoint ul,.keypoint ol{margin:10px 0 0 22px;font-size:14.5px}
.keypoint li{margin:6px 0}

.note{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:13px 2px;font-size:13px;color:var(--sub);line-height:1.9;margin:30px 0}

/* 比較表 */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7;background:var(--card)}
th,td{padding:10px 14px;border:1px solid var(--rule);text-align:left;vertical-align:top;min-width:6em}
th{background:var(--acc-soft);font-family:var(--serif);font-weight:600;white-space:nowrap}
td .meta{font-size:12px}
.meta{color:var(--sub);font-size:13px;line-height:1.8}

/* 図解枠（単色＋アクセント1色のSVGのみ） */
.fig{border:1px solid var(--rule);background:var(--card);padding:20px;margin:30px 0}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{color:var(--sub);font-size:12.5px;line-height:1.8;margin-top:12px}
.fig .fig-src{display:block;font-size:11.5px;margin-top:2px}

/* ---------- 7. 出典（脚注型リスト） ---------- */
.sources{margin-top:48px;border-top:1px solid var(--rule);padding-top:14px}
.sources h2{border:none;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.18em;color:var(--sub);margin:0 0 10px;padding:0}
ol.fn{margin:0 0 0 1.5em;font-size:12.5px;color:var(--sub);line-height:1.9}
ol.fn li{margin:6px 0}
ol.fn a{color:var(--sub);word-break:break-all;text-decoration-color:var(--rule)}
ol.fn a:hover{color:var(--acc)}
.fn-note{font-size:12px;color:var(--sub);margin:10px 0 0}
.src{color:var(--sub);font-size:12.5px;line-height:1.9;border-top:1px solid var(--rule);
  padding-top:12px;margin-top:40px}
.src a{color:var(--sub);word-break:break-all}

/* ---------- 8. 案内リンク・広告枠 ---------- */
/* 関連資料への静かな導線（ボタン化しない） */
.cta{display:inline-block;font-size:13px;color:var(--acc);margin:26px 0 0;
  text-decoration:underline;text-underline-offset:4px;background:none;border:none}
.cta:hover{color:var(--ink)}
.cta-note{display:block;font-size:11.5px;color:var(--sub);margin:4px 0 20px}
/* 問い合わせフォーム送信のみ例外的に枠 */
button.cta{font-family:var(--sans);font-size:15px;color:var(--paper);background:var(--acc);
  border:1px solid var(--acc);border-radius:2px;padding:13px 18px;text-decoration:none;
  cursor:pointer;letter-spacing:.08em}
button.cta:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* 広告枠（「広告」ラベル付きの静かな枠。1画面1枠まで） */
.ad-slot{border:1px solid var(--rule);background:var(--card);border-radius:2px;
  padding:16px;margin:34px 0;text-align:center;color:var(--sub);font-size:12.5px;line-height:1.8}
.ad-slot .ad-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.3em;
  color:var(--sub);margin-bottom:5px}

/* ---------- 8b. リッチ比較表（.rich-compare — §8規格・星/王冠/順位数字は禁止） ----------
   ①先頭列sticky ②商品ヘッダーセル（名称+一言タグライン） ③属性行は記号 ◎○△—
   ④列ごとの「詳細を見る」行 ⑤横スクロール可。記号は出典事実の翻訳のみ（凡例=.rc-legend必須） */
.rich-compare{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0 6px;
  border:1px solid var(--rule);background:var(--card)}
.rich-compare table{width:100%;min-width:660px;border-collapse:separate;border-spacing:0;
  font-size:13.5px;line-height:1.75;background:var(--card)}
.rich-compare th,.rich-compare td{padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);min-width:11em}
.rich-compare th:last-child,.rich-compare td:last-child{border-right:none}
.rich-compare tbody tr:last-child th,.rich-compare tbody tr:last-child td{border-bottom:none}
.rich-compare thead th{background:var(--acc-soft);vertical-align:bottom}
/* 先頭列（属性名）: sticky */
.rich-compare .rc-attr{position:sticky;left:0;z-index:2;background:var(--paper);
  font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink);
  min-width:8.5em;max-width:11em;border-right:1px solid var(--rule)}
.rich-compare thead .rc-attr{background:var(--paper)}
/* 商品/選択肢ヘッダーセル（名称+一言タグライン） */
.rc-prod .rc-name{display:block;font-family:var(--serif);font-size:15px;font-weight:600;
  color:var(--ink);letter-spacing:.02em}
.rc-prod .rc-tag{display:block;font-family:var(--sans);font-size:11.5px;font-weight:400;
  color:var(--sub);margin-top:3px;letter-spacing:.02em}
/* 属性記号（◎=公式資料に明記／○=条件付き・一部／△=弱い・要確認／—=非対応） */
.rc-mark{font-size:16px;font-weight:700;line-height:1;font-family:var(--sans)}
.rc-mark.rc-yes{color:var(--acc)}
.rc-mark.rc-part{color:var(--ink)}
.rc-mark.rc-weak,.rc-mark.rc-no{color:var(--sub)}
.rc-fn{font-size:10.5px;color:var(--sub);vertical-align:super;margin-left:2px;letter-spacing:.04em}
.rc-note{display:block;font-size:11.5px;color:var(--sub);line-height:1.8;margin-top:4px}
.rc-price{font-weight:700;color:var(--ink)}
/* 列ごとの「詳細を見る」行 */
.rich-compare .rc-detail td{background:var(--acc-soft)}
.rc-detail a{font-size:12.5px;color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.rc-detail a:hover{color:var(--ink)}
/* 凡例（表直下に必ず置く） */
.rc-legend{font-size:12px;color:var(--sub);line-height:1.9;margin:10px 0 26px}
.rc-legend .rc-mark{font-size:12.5px}
@media (max-width:480px){
  .rich-compare table{font-size:13px;min-width:600px}
  .rich-compare th,.rich-compare td{padding:9px 10px;min-width:10em}
  .rich-compare .rc-attr{min-width:7.5em;max-width:8.5em}
}

/* ---------- 9. フッター（編集方針・運営者・プライバシー・問い合わせ・改訂履歴の5リンクのみ） ---------- */
footer{color:var(--sub);font-size:12.5px;border-top:1px solid var(--rule);
  padding-top:18px;margin-top:52px;line-height:2}
.footname{margin:0 0 6px;letter-spacing:.03em}
.foot-nav{display:flex;flex-wrap:wrap;gap:2px 20px;margin:6px 0 0}
.foot-nav a{color:var(--sub);font-size:12.5px;text-decoration:none;
  display:inline-block;padding:6px 0;letter-spacing:.04em}
.foot-nav a:hover{color:var(--acc);text-decoration:underline;text-underline-offset:4px}

/* ---------- 8c. ハブE追加部品（トークン内の派生のみ・新装飾の発明なし） ---------- */
/* 編集部の実購入メモ枠（体験談を創作しないための正直プレースホルダ。ad-slotの同型派生） */
.memo-slot{border:1px solid var(--rule);border-left:2px solid var(--acc);background:var(--card);
  border-radius:2px;padding:16px 20px;margin:34px 0;color:var(--sub);font-size:13px;line-height:1.9}
.memo-slot .memo-title{display:block;font-size:10.5px;font-weight:700;letter-spacing:.3em;
  color:var(--acc);margin:0 0 6px}
.memo-slot p{margin:6px 0}
/* チェックリスト（持ち物28点用。番号付き索引の派生・アイコン不使用） */
ol.check-list{list-style:none;margin:14px 0 26px;counter-reset:chk}
ol.check-list>li{border-top:1px solid var(--rule);padding:10px 2px 10px 2.4em;position:relative;
  margin:0;font-size:14.5px;counter-increment:chk}
ol.check-list>li:last-child{border-bottom:1px solid var(--rule)}
ol.check-list>li::before{content:counter(chk,decimal-leading-zero);position:absolute;left:2px;top:11px;
  font-size:11.5px;color:var(--acc);letter-spacing:.08em;font-weight:700}
ol.check-list .why{display:block;font-size:12.5px;color:var(--sub);margin-top:2px}

/* ---------- 10. フォーム・印刷 ---------- */
input,select,textarea{font-family:var(--sans)}
hr.divider{border:none;border-top:1px solid var(--rule);margin:40px 0}
@media print{
  :root{--paper:#fff;--card:#fff;--ink:#000;--sub:#444;--rule:#999}
  .topbar,.cta,.cta-note,.ad-slot{display:none}
}


/* 差込パッチ 20260719: プレー用具レコメンド枠（.ad-slot設計を継承） */
.ad-slot-rec{border:1px solid var(--rule);background:var(--card);border-radius:2px;
  padding:16px 18px;margin:34px 0;text-align:left}
.ad-slot-rec .ad-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.3em;
  color:var(--sub);margin-bottom:8px}
.ad-slot-rec .rec-lead{font-size:13px;color:var(--ink);margin:0 0 10px}
.rec-list{list-style:none;margin:0;padding:0}
.rec-list li{border-top:1px solid var(--rule);padding:10px 0}
.rec-list li:first-child{border-top:none}
.rec-list a{color:var(--acc);text-decoration:none;font-size:13.5px}
.rec-list a:hover{text-decoration:underline;text-underline-offset:3px}
.ad-slot-rec .rec-note{font-size:11px;color:var(--sub);margin:10px 0 0;line-height:1.7}