/* ============================================================
   my-keiba ツールページ専用スタイル（買い目点数計算機）
   common.css の :root 変数を継承。新聞紙地・明朝の硬派トーンを維持。
   ============================================================ */

/* ページ見出し（race-head と同系統） */
.tool-head{
  padding:30px 20px 22px;border-bottom:2px solid var(--ink);text-align:center;
}
.tool-head .eyebrow{
  font-family:"Hiragino Sans","Yu Gothic",sans-serif;font-size:11px;font-weight:bold;
  letter-spacing:.22em;color:var(--honmei);margin-bottom:10px;
}
.tool-head h1{font-size:30px;font-weight:900;letter-spacing:.04em;line-height:1.35;}
.tool-head .sub{
  font-family:"Hiragino Sans",sans-serif;font-size:12.5px;color:var(--sub);
  margin-top:8px;letter-spacing:.06em;
}

.tool-intro{
  padding:20px 20px 4px;font-size:14.5px;line-height:1.95;color:#33302a;
}
.tool-intro b{font-weight:bold;}

/* セクション枠 */
.tool-sec{padding:24px 20px;border-bottom:1px solid var(--rule);}

/* 汎用ユーティリティ（このページ専用） */
.hidden{display:none !important;}

/* ボタン群 */
.tool-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.btn{
  font-family:"Hiragino Sans",sans-serif;font-size:12.5px;font-weight:bold;cursor:pointer;
  border:1px solid var(--ink);background:var(--paper2);color:var(--ink);
  padding:9px 16px;border-radius:3px;letter-spacing:.06em;transition:background .15s,color .15s;
}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn.ghost{border-color:var(--rule);color:var(--sub);}
.btn.ghost:hover{background:var(--rule);color:var(--ink);}

/* 入力フォーム（券種・買い方・金額） */
.combo-form{font-family:"Hiragino Sans",sans-serif;}
.combo-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;}
.combo-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:130px;}
.combo-field label{font-size:11px;color:var(--sub);letter-spacing:.08em;}
.combo-field input,.combo-field select{
  font-family:inherit;font-size:14px;padding:8px 10px;
  border:1px solid var(--rule);border-radius:3px;background:#fff;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}

/* 馬番グリッド（1〜18のチェック式ボタン） */
.grid-block{margin-bottom:16px;}
.gb-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11.5px;color:var(--sub);letter-spacing:.08em;margin-bottom:7px;
}
.gb-label .cnt{color:var(--honmei);font-weight:bold;font-variant-numeric:tabular-nums;}
.numgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;}
.numgrid button{
  font-family:"Hiragino Sans",sans-serif;font-variant-numeric:tabular-nums;
  font-size:15px;padding:12px 0;cursor:pointer;min-height:44px;
  border:1px solid var(--rule);border-radius:3px;background:#fff;color:var(--ink);
  transition:background .1s,color .1s,border-color .1s;
}
.numgrid button.on{background:var(--honmei);border-color:var(--honmei);color:#fff;font-weight:bold;}
.numgrid button:active{transform:scale(.94);}

/* 点数・合計・組み合わせの結果 */
.combo-result{
  background:var(--paper2);border:1px solid var(--rule);border-left:4px solid var(--honmei);
  border-radius:0 4px 4px 0;padding:16px 18px;margin-top:6px;
}
.combo-count{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.combo-count .pts{font-size:30px;font-weight:bold;font-variant-numeric:tabular-nums;color:var(--honmei);}
.combo-count .pts small{font-size:14px;font-weight:bold;}
.combo-count .sum{font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums;}
.combo-count .sum b{color:var(--ink);font-size:18px;}
.combo-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.combo-chips .chip{
  font-size:12px;font-variant-numeric:tabular-nums;background:#fff;
  border:1px solid var(--rule);border-radius:3px;padding:3px 9px;letter-spacing:.03em;
}
.combo-chips .more{color:#9a9484;align-self:center;font-size:11.5px;}
.combo-warn{color:var(--honmei);font-weight:bold;font-size:12px;margin-top:8px;}

/* SEO向け解説・早見表・FAQ */
.seo-sec h2.seo-h2{font-size:20px;font-weight:900;letter-spacing:.03em;line-height:1.5;margin-bottom:14px;}
.seo-sec h3{
  font-family:"Hiragino Sans",sans-serif;font-size:13px;font-weight:bold;letter-spacing:.06em;
  border-left:4px solid var(--honmei);padding-left:9px;margin:22px 0 10px;
}
.seo-sec p{font-size:14px;line-height:1.95;color:#33302a;margin-bottom:10px;}
.seo-sec p b{font-weight:bold;}
.ref-table{width:100%;border-collapse:collapse;font-family:"Hiragino Sans",sans-serif;font-variant-numeric:tabular-nums;}
.ref-table th,.ref-table td{border:1px solid var(--rule);padding:7px 5px;font-size:12.5px;text-align:center;background:var(--paper2);}
.ref-table th{background:#efe9da;color:var(--sub);font-weight:bold;}
.ref-table td.rt-head{background:#efe9da;color:var(--sub);font-weight:bold;white-space:nowrap;text-align:left;}
.faq{margin-top:4px;}
.faq dt{font-family:"Hiragino Sans",sans-serif;font-weight:bold;font-size:13.5px;margin:14px 0 4px;color:var(--ink);}
.faq dt::before{content:"Q. ";color:var(--honmei);}
.faq dd{font-size:13.5px;line-height:1.9;color:#33302a;}
.faq dd::before{content:"A. ";color:var(--aux);font-weight:bold;}

@media(max-width:480px){
  .tool-head h1{font-size:24px;}
  .ref-table th,.ref-table td{padding:6px 3px;font-size:11.5px;}
}