/* =========================================================
   本命ノート ブランドCSS（全ページ共通）
   SWELLの素ヘッダー/フッターを隠し、kn-（本命ノートデザイン）に置換。
   ========================================================= */

/* --- SWELLカラー変数を上書き --- */
:root{ --color_main:#2f8454 !important; --color_link:#2f8454 !important; }

/* --- 背景・本文フォント --- */
body{
  background:#f4f7ee !important; color:#22302a !important;
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif !important;
}
h1,h2,h3,h4,h5,
.c-postTitle__ttl,.p-postList__ttl,.c-widget__title,.p-archiveHeader__ttl,.entry-title{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; color:#1f5b3a !important;
}
a{color:#2f8454;} a:hover{color:#ef6a42;}
.wp-block-button__link,.swell-block-button>a,.c-btn,.p-postList__readmore{
  background:#ef6a42 !important; border-color:#ef6a42 !important; color:#fff !important;
}

/* ★SWELLの素ヘッダー/フッターを隠す（自前のkn-に置換） */
.l-header,.l-fixHeader,.l-footer{ display:none !important; }

/* ===== 共通ラッパ ===== */
.kn-wrap{ max-width:1160px; margin:0 auto; padding:0 22px; }

/* ===== ヘッダー（本命ノート） ===== */
.kn-header{
  position:sticky; top:0; z-index:30;
  background:rgba(244,247,238,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid #dde6d4;
}
.kn-nav{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.kn-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.kn-leaf{
  width:34px; height:34px; border-radius:10px; background:#2f8454;
  display:grid; place-items:center; color:#fff;
  font-family:"Zen Maru Gothic"; font-weight:900; font-size:20px;
  box-shadow:0 4px 10px rgba(47,132,84,.3);
}
.kn-bn{ font-family:"Zen Maru Gothic","Noto Sans JP"; font-weight:900; font-size:21px; color:#1f5b3a; }
.kn-gnav{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.kn-gnav li{ margin:0; }
.kn-gnav a{
  font-size:15px; font-weight:500; color:#22302a; text-decoration:none;
  padding:8px 0; border-bottom:2px solid transparent; transition:.2s;
}
.kn-gnav a:hover{ color:#2f8454; border-color:#2f8454; }
.kn-cta{
  background:#ef6a42; color:#fff !important; border-radius:999px;
  padding:10px 22px; font-weight:700; font-size:15px; text-decoration:none;
  box-shadow:0 6px 14px rgba(239,106,66,.32); white-space:nowrap;
}

/* =========================================================
   ヘッダーアクション（検索＋ハンバーガー）＋ドロワー＋検索オーバーレイ
   （べつAIデザイン移植・全ページ共通）
   ========================================================= */
.kn-baractions{ display:flex; align-items:center; gap:4px; }
.kn-iconbtn{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  color:#1f5b3a; background:none; border:0; cursor:pointer; transition:background .15s; padding:0; }
.kn-iconbtn:hover,.kn-iconbtn:active{ background:#e3efd9; }
.kn-iconbtn svg{ width:23px; height:23px; }
.kn-omenu{ display:none; }
/* ハンバーガー線アニメ */
.kn-burg{ position:relative; width:23px; height:16px; display:block; }
.kn-burg span{ position:absolute; left:0; width:100%; height:2.4px; border-radius:2px; background:#1f5b3a; transition:.28s; }
.kn-burg span:nth-child(1){ top:0; } .kn-burg span:nth-child(2){ top:6.8px; } .kn-burg span:nth-child(3){ top:13.6px; }
.kn-omenu.is-open .kn-burg span:nth-child(1){ top:6.8px; transform:rotate(45deg); }
.kn-omenu.is-open .kn-burg span:nth-child(2){ opacity:0; }
.kn-omenu.is-open .kn-burg span:nth-child(3){ top:6.8px; transform:rotate(-45deg); }

/* スクリム */
.kn-scrim{ position:fixed; inset:0; background:rgba(20,30,24,.5); opacity:0; visibility:hidden;
  transition:.3s; z-index:90; backdrop-filter:blur(2px); }
.kn-scrim.show{ opacity:1; visibility:visible; }

/* ドロワー（右スライド） */
.kn-drawer{ position:fixed; top:0; right:0; bottom:0; width:82%; max-width:320px; background:#fff; z-index:95;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; box-shadow:-20px 0 50px -20px rgba(0,0,0,.4); }
.kn-drawer.show{ transform:translateX(0); }
.kn-drhead{ position:relative; padding:22px 20px 16px; background:linear-gradient(150deg,#2f8454,#1f5b3a); color:#fff; }
.kn-drx{ position:absolute; top:16px; right:14px; width:38px; height:38px; border-radius:11px; display:grid;
  place-items:center; color:#fff; font-size:20px; background:none; border:0; cursor:pointer; }
.kn-drx:hover{ background:rgba(255,255,255,.15); }
.kn-drbn{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:900; font-size:20px;
  display:flex; align-items:center; gap:9px; }
.kn-drleaf{ width:30px; height:30px; border-radius:9px; background:#fff; color:#1f5b3a; display:grid; place-items:center; }
.kn-drhead p{ margin:10px 0 0; font-size:12px; color:#d6ecdd; }
.kn-drsearch{ display:flex; align-items:center; gap:8px; margin:14px 16px; padding:10px 13px; width:calc(100% - 32px);
  background:#f1f5ea; border:1px solid #dde6d4; border-radius:11px; cursor:pointer; color:#93a097; font-size:14px; text-align:left; }
.kn-drsearch svg{ width:18px; height:18px; flex:none; }
.kn-drnav{ flex:1; overflow-y:auto; padding:0 10px 18px; }
.kn-navitem{ display:flex; align-items:center; gap:13px; padding:13px 12px; border-radius:12px; font-weight:700;
  font-size:15.5px; color:#22302a; transition:background .15s; width:100%; text-align:left; text-decoration:none;
  background:none; border:0; cursor:pointer; font-family:inherit; }
.kn-navitem:hover{ background:#e3efd9; }
.kn-navitem .ic{ width:30px; height:30px; border-radius:9px; background:#e3efd9; display:grid; place-items:center; font-size:16px; flex:none; }
.kn-navitem .ar{ margin-left:auto; color:#93a097; font-size:13px; transition:transform .2s; }
.kn-hassub.open .ar{ transform:rotate(90deg); }
.kn-subnav{ display:none; padding:2px 0 6px 54px; }
.kn-hassub.open + .kn-subnav{ display:block; }
.kn-subnav a{ display:block; padding:8px 10px; font-size:13.5px; color:#5f6f66; border-radius:8px; text-decoration:none; }
.kn-subnav a:hover{ background:#e3efd9; color:#1f5b3a; }
.kn-subnav a .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#ef6a42; margin-right:8px; vertical-align:middle; }
.kn-drcta{ margin:8px 12px 16px; }
.kn-drcta a{ display:block; text-align:center; background:#ef6a42; color:#fff; border-radius:999px; padding:13px;
  font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 6px 14px rgba(239,106,66,.3); }

/* 検索オーバーレイ */
.kn-searchov{ position:fixed; inset:0; background:#fff; z-index:99; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.22s; }
.kn-searchov.show{ opacity:1; visibility:visible; transform:none; }
.kn-svbar{ display:flex; align-items:center; gap:10px; padding:16px 14px; border-bottom:1px solid #dde6d4; }
.kn-svbar .box{ flex:1; display:flex; align-items:center; gap:9px; background:#f1f5ea; border:1px solid #dde6d4;
  border-radius:12px; padding:11px 14px; }
.kn-svbar .box svg{ width:19px; height:19px; color:#2f8454; flex:none; }
.kn-svbar input{ border:0; background:none; outline:none; font-size:15px; width:100%; color:#22302a; font-family:inherit; }
.kn-svbar .cancel{ font-size:14px; font-weight:700; color:#2f8454; white-space:nowrap; background:none; border:0; cursor:pointer; }
.kn-svbody{ flex:1; overflow-y:auto; padding:12px 14px 24px; max-width:680px; width:100%; margin:0 auto; }
.kn-svhint{ color:#93a097; font-size:13px; text-align:center; padding-top:36px; }
.kn-svhint .big{ font-size:36px; display:block; margin-bottom:10px; }
.kn-svchips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; justify-content:center; }
.kn-svchips button{ background:#e3efd9; color:#1f5b3a; border-radius:999px; padding:7px 14px; font-size:13px;
  font-weight:700; border:0; cursor:pointer; font-family:inherit; }
.kn-resgroup{ margin-bottom:18px; }
.kn-resgroup .gt{ font-size:11px; font-weight:700; color:#93a097; letter-spacing:.05em; margin:0 0 6px; padding-left:4px; }
.kn-res{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; transition:background .15s;
  width:100%; text-align:left; text-decoration:none; color:#22302a; }
.kn-res:hover{ background:#e3efd9; }
.kn-res .ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:17px; flex:none; background:#eef2e8; }
.kn-res .ic.track{ background:#fde7df; } .kn-res .ic.g{ background:#fbf0d6; } .kn-res .ic.baken{ background:#e3efd9; } .kn-res .ic.col{ background:#e9f1ff; }
.kn-res .nm{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:15px; color:#1f5b3a; }
.kn-res .nm mark{ background:#ffe2a8; color:inherit; border-radius:3px; padding:0 1px; }
.kn-res .sb{ font-size:11.5px; color:#5f6f66; }
.kn-res .go{ margin-left:auto; color:#93a097; }
.kn-resall{ border-top:1px dashed #dde6d4; margin-top:6px; padding-top:14px; border-radius:0 0 12px 12px; }
.kn-nores{ text-align:center; color:#93a097; font-size:14px; padding-top:40px; }
.kn-nores .big{ font-size:34px; display:block; margin-bottom:8px; }
@media(prefers-reduced-motion:reduce){ .kn-drawer,.kn-scrim,.kn-searchov,.kn-burg span{ transition:none; } }

/* ===== フッター（本命ノート） ===== */
.kn-footer{ background:#1f5b3a; color:#cfe0d2; padding:46px 0 30px; margin-top:46px; font-size:13.5px; }
.kn-fcols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px; margin-bottom:26px; }
.kn-fbrand .kn-bn{ font-family:"Zen Maru Gothic"; font-weight:900; font-size:22px; color:#fff; display:flex; align-items:center; gap:9px; }
.kn-fbrand .kn-leaf{ background:#fff; color:#1f5b3a; }
.kn-fbrand p{ margin-top:12px; max-width:250px; line-height:1.8; color:#a9c5af; font-size:12.5px; }
.kn-footer h6{ color:#fff; margin-bottom:13px; font-size:14px; }
.kn-footer ul{ list-style:none; margin:0; padding:0; }
.kn-footer li{ margin-bottom:9px; }
.kn-footer a{ color:#cfe0d2; text-decoration:none; }
.kn-footer a:hover{ color:#fff; }
.kn-fbar{ border-top:1px solid rgba(255,255,255,.15); padding-top:18px; font-size:11.5px; color:#8fb097; }

/* =========================================================
   下層ページ（固定ページ/投稿/カテゴリ）のコンテンツ面を乗っ取る
   ========================================================= */

/* 中身が短いページでもフッターを画面最下部へ
   （SWELLのbodyにはクラスが付かないため全bodyに適用。トップも同構造なので問題なし） */
body{ display:flex; flex-direction:column; min-height:100vh; }
.kn-footer{ margin-top:auto; }

/* サイドバーは使わない＝中央1カラム */
.l-sidebar{ display:none !important; }
.l-container{ max-width:960px !important; margin:0 auto !important; padding:0 22px !important; display:block !important; }
.l-mainContent{ width:100% !important; }

/* パンくず */
.p-breadcrumb{ font-size:12px; color:#93a097; padding:14px 0 4px; }
.p-breadcrumb a{ color:#5f6f66; text-decoration:none; }
.p-breadcrumb a:hover{ color:#2f8454; }

/* 本文カード（タイトル含め白カードに載せる） */
main.l-mainContent{
  background:#fff; border:1px solid #dde6d4; border-radius:18px;
  padding:30px 36px 42px; margin:14px 0 46px;
  box-shadow:0 16px 38px -28px rgba(31,91,58,.45);
}

/* ページ/記事タイトル */
.c-pageTitle,.c-postTitle__ttl{
  font-size:clamp(22px,3.2vw,29px) !important; line-height:1.5 !important;
  margin:0 0 6px !important; padding:0 0 14px !important; border:none !important;
}
/* 「メイン｜サブ」H1のサブ＝小さく2行目（パンくず内では非表示） */
.kn-h1sub{ display:block; font-size:13.5px; font-weight:500; color:#5f6f66; margin-top:6px; letter-spacing:.02em; line-height:1.7; }
.p-breadcrumb .kn-h1sub{ display:none; }
.c-postTitle__date,.p-articleMetas{ color:#93a097; font-size:12.5px; }

/* 本文タイポグラフィ */
.post_content{ line-height:2; font-size:15.5px; }
.post_content h2{
  font-size:20px; margin:2.2em 0 .9em; padding:10px 16px;
  background:#e3efd9; border-left:5px solid #2f8454; border-radius:0 10px 10px 0;
}
.post_content h3{ font-size:17px; margin:1.8em 0 .7em; padding-bottom:7px; border-bottom:2px solid #e3efd9; }
.post_content p{ margin:0 0 1.25em; }
.post_content a{ color:#2f8454; }
.post_content a:hover{ color:#ef6a42; }
.post_content ul,.post_content ol{ padding-left:1.4em; margin:0 0 1.25em; }

/* カテゴリ等アーカイブの記事リストをカード化 */
.p-postList .p-postList__item{ margin-bottom:14px; }
.p-postList .p-postList__link{
  background:#fff; border:1px solid #dde6d4; border-radius:14px;
  transition:box-shadow .18s, transform .18s;
}
.p-postList .p-postList__link:hover{
  box-shadow:0 12px 26px -16px rgba(31,91,58,.4); transform:translateY(-2px);
}
.p-postList__ttl{ font-size:16.5px; }

/* ページ送り */
.c-pagination a,.c-pagination span{ border-radius:10px; }
.c-pagination .current{ background:#2f8454 !important; color:#fff !important; }

/* =========================================================
   カテゴリページの「箱」（親ハブ/競馬場/一般 共通）
   ========================================================= */
.kn-arch{ flex:1; padding-bottom:24px; }

/* パンくず */
.kn-bc{ font-size:12px; color:#93a097; padding:18px 22px 0; }
.kn-bc a{ color:#5f6f66; text-decoration:none; }
.kn-bc a:hover{ color:#2f8454; }

/* 見出しエリア */
.kn-hubhero{ padding:30px 22px 6px; }
.kn-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:#e3efd9; color:#1f5b3a;
  font-weight:700; font-size:13px; padding:6px 14px; border-radius:999px; }
.kn-eyebrow .d{ width:7px; height:7px; border-radius:50%; background:#ef6a42; }
.kn-hubhero h1{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:900;
  font-size:clamp(26px,4vw,40px); color:#1f5b3a; margin:14px 0 10px; line-height:1.4; }
.kn-hubhero p{ color:#5f6f66; font-size:15px; max-width:680px; margin:0; line-height:2; }

/* セクション */
.kn-sec{ padding:30px 0 6px; }
.kn-sechead{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.kn-sechead .t{ margin:0; padding:0; font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:900;
  font-size:clamp(19px,2.6vw,25px) !important; color:#1f5b3a !important; display:flex; align-items:center; gap:10px; }
.kn-sechead .t h2{ font:inherit !important; color:inherit !important; margin:0 !important; padding:0 !important; line-height:inherit !important; }
.kn-sechead .t .ic{ width:28px; height:28px; border-radius:8px; background:#2f8454; color:#fff;
  display:grid; place-items:center; font-size:15px; }

/* マップの白枠（トップの.guideと同じ見た目） */
.kn-guide{ background:#fff; border:1px solid #dde6d4; border-radius:20px; padding:26px;
  box-shadow:0 14px 30px -22px rgba(31,91,58,.35); }

/* 競馬場カード */
.kn-trackgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.kn-trackcard{ background:#fff; border:1px solid #dde6d4; border-radius:14px; padding:16px;
  text-decoration:none; display:block; transition:.2s; }
.kn-trackcard:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -16px rgba(31,91,58,.4); border-color:#2f8454; }
.kn-trackcard .tp{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700;
  font-size:17px; color:#1f5b3a; line-height:1.4; }
.kn-trackcard .tt{ display:inline-block; font-size:11px; font-weight:700; color:#2f8454; background:#e3efd9;
  border-radius:6px; padding:2px 8px; margin-top:8px; }
.kn-trackcard.jra .tt{ color:#b67a1e; background:#fbeecd; }

/* 記事カード一覧 */
.kn-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.kn-card{ background:#fff; border:1px solid #dde6d4; border-radius:16px; padding:20px;
  display:flex; flex-direction:column; text-decoration:none; transition:.2s; }
.kn-card:hover{ border-color:#2f8454; box-shadow:0 14px 28px -18px rgba(31,91,58,.4); transform:translateY(-2px); }
.kn-card .ctag{ font-size:11.5px; font-weight:700; color:#2f8454; background:#e3efd9;
  align-self:flex-start; padding:3px 10px; border-radius:6px; margin-bottom:10px; }
.kn-card h3{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:700;
  font-size:16.5px !important; line-height:1.55 !important; color:#1f5b3a !important; margin:0 0 8px !important; padding:0 !important; border:none !important; }
.kn-card p{ font-size:13px; color:#5f6f66; flex:1; margin:0; line-height:1.9; }
.kn-card .dt{ font-family:"Oswald",sans-serif; font-size:12px; color:#93a097; margin-top:12px; }

/* 記事なし */
.kn-empty{ background:#fff; border:1px dashed #c9d6bd; border-radius:16px; padding:46px 20px;
  text-align:center; color:#5f6f66; line-height:2; }

/* =========================================================
   買い方ハブ（はじめて3ステップ＋券種早見表＋用語集バナー）
   ========================================================= */
/* グラデヒーロー（べつAIデザイン移植） */
.kn-bkhero{ background:linear-gradient(150deg,#2f8454,#1f5b3a); color:#fff; border-radius:20px;
  padding:30px 28px; position:relative; overflow:hidden; margin-top:14px; }
.kn-bkhero::after{ content:"🎫"; position:absolute; right:18px; bottom:-12px; font-size:96px; opacity:.13; }
.kn-bkhero h1{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:900;
  font-size:clamp(26px,5vw,36px) !important; margin:0 0 8px !important; padding:0 !important; color:#fff !important; line-height:1.4 !important; }
.kn-bkhero h1 small{ display:block; font-size:13.5px; font-weight:500; color:#bfe3c9; margin-top:6px; letter-spacing:.02em; }
.kn-bkhero p{ margin:0; font-size:14.5px; color:#dcefdf; max-width:560px; line-height:2; position:relative; }

/* カテゴリページの自由スペース（管理画面の【編集用】ページの本文を表示） */
.kn-parts{ max-width:760px; font-size:14px; color:#3d4a43; line-height:2.1; }
.kn-parts p{ margin:0 0 14px; }
.kn-parts h2{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:900;
  font-size:20px !important; color:#1f5b3a !important; margin:0 0 12px !important; padding:0 !important;
  border:none !important; background:none !important; }
.kn-parts h3{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:700;
  font-size:16px !important; color:#1f5b3a !important; margin:0 0 10px !important; padding:0 !important; border:none !important; }
.kn-parts a{ color:#2f8454; }
.kn-parts a:hover{ color:#ef6a42; }
.kn-parts img{ max-width:100%; height:auto; border-radius:12px; }

/* 本文セクション（H2解説） */
.kn-copy{ max-width:760px; font-size:14px; color:#3d4a43; line-height:2.1; }
.kn-copy p{ margin:0 0 14px; }
.kn-copy b{ color:#1f5b3a; }
.kn-morelink{ font-weight:700; color:#2f8454; text-decoration:none; }
.kn-morelink:hover{ color:#ef6a42; }
.kn-h3{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:700;
  font-size:16px !important; color:#1f5b3a !important; margin:6px 0 14px !important; padding:0 0 6px !important;
  border:none !important; border-bottom:2px solid #e3efd9 !important; display:inline-block; }
.kn-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.kn-step{ position:relative; background:#fff; border:1px solid #dde6d4; border-radius:16px; padding:20px;
  display:flex; flex-direction:column; text-decoration:none; color:#22302a; transition:.2s; }
a.kn-step:hover{ border-color:#2f8454; box-shadow:0 14px 28px -18px rgba(31,91,58,.4); transform:translateY(-2px); }
.kn-step .num{ align-self:flex-start; background:#2f8454; color:#fff; font-family:"Oswald",sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.08em; border-radius:7px; padding:3px 10px; margin-bottom:10px; }
.kn-step .t3{ display:block; font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700;
  font-size:17px; color:#1f5b3a; margin:0 0 6px; line-height:1.5; }
.kn-step p{ font-size:13px; color:#5f6f66; flex:1; margin:0; line-height:1.9; }
.kn-step .go{ font-size:12.5px; font-weight:700; color:#2f8454; margin-top:10px; }
a.kn-step:hover .go{ color:#ef6a42; }
.kn-step.is-soon .go{ color:#93a097; }
.kn-step.is-soon{ border-style:dashed; }
.kn-step .arrow{ position:absolute; right:-12px; top:50%; transform:translateY(-50%); color:#c9d6bd; font-size:22px; z-index:2; }
.kn-kenshu{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.kn-kcard{ position:relative; background:#fff; border:1px solid #dde6d4; border-radius:14px; padding:16px;
  display:flex; flex-direction:column; text-decoration:none; color:#22302a; transition:.2s; }
.kn-kcard.reco{ border-color:#ef6a42; box-shadow:0 0 0 1px #ef6a42; }
.kn-kcard .badge{ position:absolute; top:-9px; left:14px; background:#ef6a42; color:#fff;
  font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:6px; }
a.kn-kcard:hover{ border-color:#2f8454; box-shadow:0 12px 24px -16px rgba(31,91,58,.4); transform:translateY(-2px); }
.kn-kcard .top{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.kn-kcard .nm{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:17px; color:#1f5b3a; }
.kn-kcard .yomi{ font-size:10.5px; color:#93a097; }
.kn-kcard .rate{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#5f6f66; }
.kn-kcard .rate b{ font-size:12px; letter-spacing:.05em; }
.kn-kcard .rate .hit{ color:#2f8454; }
.kn-kcard .rate .pay{ color:#e6a532; }
.kn-kcard p{ font-size:12px; color:#5f6f66; margin:8px 0 0; flex:1; line-height:1.8; }
.kn-kcard .go{ font-size:12px; font-weight:700; color:#2f8454; margin-top:8px; }
a.kn-kcard:hover .go{ color:#ef6a42; }
/* 口座開設バナー（収益導線） */
.kn-aff{ display:flex; align-items:center; gap:16px; background:#fff; border:1px dashed #ef6a42;
  border-radius:16px; padding:20px 24px; margin-bottom:14px; }
.kn-aff .em{ font-size:30px; }
.kn-aff .tx{ flex:1; }
.kn-aff .tx b{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:15px; color:#1f5b3a; display:block; }
.kn-aff .tx small{ font-size:12.5px; color:#5f6f66; }
.kn-aff .b{ background:#ef6a42; color:#fff; border-radius:999px; padding:10px 18px; font-weight:700;
  font-size:13.5px; white-space:nowrap; text-decoration:none; box-shadow:0 5px 12px rgba(239,106,66,.3); }
.kn-aff .b.is-soon{ background:#c9d6bd; box-shadow:none; }

.kn-ygbanner{ display:flex; align-items:center; gap:16px; background:linear-gradient(150deg,#2f8454,#1f5b3a);
  color:#fff; border-radius:18px; padding:20px 24px; text-decoration:none;
  box-shadow:0 16px 34px -20px rgba(31,91,58,.6); transition:.2s; }
.kn-ygbanner:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -20px rgba(31,91,58,.7); }
.kn-ygbanner .em{ font-size:30px; }
.kn-ygbanner .tx{ flex:1; }
.kn-ygbanner .tx b{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:900; font-size:18px; display:block; color:#fff; }
.kn-ygbanner .tx small{ font-size:12.5px; color:#d6ecdd; }
.kn-ygbanner .ar{ font-size:20px; font-weight:700; }

/* コラム：注目の1本（大カード） */
.kn-feat{ display:flex; flex-direction:column; background:#fff; border:1px solid #dde6d4; border-radius:18px;
  overflow:hidden; text-decoration:none; color:#22302a; transition:.2s; margin-bottom:16px; }
.kn-feat:hover{ box-shadow:0 16px 30px -18px rgba(31,91,58,.4); transform:translateY(-2px); }
.kn-feat .ph{ height:170px; position:relative; background:#e3efd9; }
.kn-feat .ph .stripe{ position:absolute; inset:0;
  background-image:repeating-linear-gradient(105deg,#edf4e4 0 46px,transparent 46px 92px); }
.kn-feat .ph .em{ position:absolute; left:22px; bottom:14px; font-size:46px; }
.kn-feat .bd{ padding:22px; }
.kn-feat .ctag{ font-size:11.5px; font-weight:700; color:#2f8454; background:#e3efd9; display:inline-block;
  padding:3px 10px; border-radius:6px; margin-bottom:10px; }
.kn-feat h3{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:700;
  font-size:21px !important; line-height:1.5 !important; color:#1f5b3a !important; margin:0 0 8px !important; padding:0 !important; border:none !important; }
.kn-feat p{ font-size:13.5px; color:#5f6f66; margin:0; line-height:1.9; }
.kn-feat .dt{ font-family:"Oswald",sans-serif; font-size:12px; color:#93a097; display:block; margin-top:12px; }
@media(max-width:900px){
  .kn-steps{ grid-template-columns:1fr; }
  .kn-kenshu{ grid-template-columns:repeat(2,1fr); }
  .kn-step .arrow{ display:none; }
}
@media(max-width:600px){
  .kn-kenshu{ grid-template-columns:1fr 1fr; gap:8px; }
  .kn-ygbanner{ padding:16px; gap:12px; }
  .kn-aff{ flex-direction:column; text-align:center; gap:10px; padding:16px; }
}

/* =========================================================
   競馬用語集（固定ページ /yogo/ の [keiba_yogo]・べつAIデザイン移植）
   ========================================================= */
/* 見出し＝サイト共通のセクション見出し様式（緑帯は使わない） */
.kn-yg-h2{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:900;
  font-size:clamp(19px,2.6vw,23px) !important; color:#1f5b3a !important; margin:0 0 14px !important;
  padding:0 !important; border:none !important; background:none !important;
  display:flex; align-items:center; gap:10px; }
.kn-yg-h2 .ic{ width:28px; height:28px; border-radius:8px; background:#2f8454; color:#fff;
  display:grid; place-items:center; font-size:14px; flex:none; }
/* SWELLのh2装飾（疑似要素の線・帯）を完全に無効化 */
.kn-yg-h2::before,.kn-yg-h2::after,
.kn-yg-term h2.nm::before,.kn-yg-term h2.nm::after{ content:none !important; display:none !important;
  background:none !important; border:none !important; }
.kn-yg-close{ display:none; }
/* 絞り込み一式＝1枚の白カードにまとめる */
.kn-yg-filters{ background:#fff; border:1px solid #dde6d4; border-radius:16px; padding:16px 18px 14px;
  box-shadow:0 10px 26px -18px rgba(31,91,58,.4); margin-bottom:16px; }
.kn-yg-lb{ font-size:11px; font-weight:700; color:#93a097; letter-spacing:.06em; margin:14px 0 7px; }
.kn-yg-lb.sep{ border-top:1px solid #eef2e8; padding-top:13px; }
.kn-yg-search{ display:flex; align-items:center; gap:10px; background:#f1f5ea; border:1px solid #e4ebdc;
  border-radius:12px; padding:11px 14px; transition:border-color .15s; }
.kn-yg-search:focus-within{ border-color:#2f8454; background:#fff; }
.kn-yg-search svg{ width:20px; height:20px; color:#2f8454; flex:none; }
.kn-yg-search input{ border:0; outline:none; background:none; font-size:15px; width:100%; color:#22302a; font-family:inherit; }
/* 主＝分類：ボックス型＋件数バッジ（大きめで主役に） */
.kn-yg-tabs{ display:flex; gap:9px; flex-wrap:wrap; }
.kn-yg-tabs button{ border:1.5px solid #dde6d4; background:#fff; border-radius:12px; padding:12px 18px;
  font-size:15px; font-weight:700; color:#3d4a43; transition:.15s; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:8px; }
.kn-yg-tabs button .n{ font-family:"Oswald",sans-serif; font-size:12px; font-weight:600; color:#93a097;
  background:#f1f5ea; border-radius:6px; padding:2px 7px; }
.kn-yg-tabs button:hover{ border-color:#2f8454; }
.kn-yg-tabs button.on{ background:#2f8454; color:#fff; border-color:#2f8454; box-shadow:0 5px 12px -5px rgba(47,132,84,.5); }
.kn-yg-tabs button.on .n{ background:rgba(255,255,255,.2); color:#fff; }
/* 分類タブ＝用語カードのバッジと同じ色体系（ドット常時表示・選択中はその分類色で塗る） */
.kn-yg-tabs button .sw{ width:9px; height:9px; border-radius:50%; flex:none; }
.kn-yg-tabs button[data-c="baken"] .sw{ background:#1f5b3a; }
.kn-yg-tabs button[data-c="yoso"] .sw{ background:#7a6a3a; }
.kn-yg-tabs button[data-c="race"] .sw{ background:#2f5aa8; }
.kn-yg-tabs button[data-c="uma"] .sw{ background:#a8702a; }
.kn-yg-tabs button[data-c="cho"] .sw{ background:#b03a5d; }
.kn-yg-tabs button[data-c="course"] .sw{ background:#2f7d52; }
.kn-yg-tabs button.on[data-c="baken"]{ background:#e3efd9; color:#1f5b3a; border-color:#1f5b3a; box-shadow:none; }
.kn-yg-tabs button.on[data-c="yoso"]{ background:#f1ece0; color:#7a6a3a; border-color:#7a6a3a; box-shadow:none; }
.kn-yg-tabs button.on[data-c="race"]{ background:#e9f1ff; color:#2f5aa8; border-color:#2f5aa8; box-shadow:none; }
.kn-yg-tabs button.on[data-c="uma"]{ background:#fbeede; color:#a8702a; border-color:#a8702a; box-shadow:none; }
.kn-yg-tabs button.on[data-c="cho"]{ background:#fbe9ee; color:#b03a5d; border-color:#b03a5d; box-shadow:none; }
.kn-yg-tabs button.on[data-c="course"]{ background:#e6f3ec; color:#2f7d52; border-color:#2f7d52; box-shadow:none; }
.kn-yg-tabs button.on[data-c]:not([data-c="all"]) .n{ background:rgba(255,255,255,.6); color:inherit; }
/* 従＝五十音：枠なしの軽いインデックス（均等割り＝スマホ1行・PC全幅） */
.kn-yg-kana{ display:flex; flex-wrap:nowrap; gap:4px; width:100%; }
.kn-yg-kana button{ flex:1; min-width:0; height:32px; border-radius:8px; border:0; background:none;
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:13.5px; color:#93a097;
  transition:.15s; cursor:pointer; padding:0; }
.kn-yg-kana button:hover{ background:#e3efd9; color:#1f5b3a; }
.kn-yg-kana button.on{ background:#1f5b3a; color:#fff; }
.kn-yg-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.kn-yg-count{ font-size:12.5px; color:#93a097; }
.kn-yg-count b{ color:#1f5b3a; font-family:"Oswald",sans-serif; font-size:15px; }
.kn-yg-sort{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:#93a097; }
.kn-yg-sort button{ border:1px solid #dde6d4; background:#fff; border-radius:999px; padding:6px 13px;
  font-size:12px; font-weight:700; color:#5f6f66; cursor:pointer; font-family:inherit; transition:.15s; }
.kn-yg-sort button:hover{ border-color:#2f8454; color:#2f8454; }
.kn-yg-sort button.on{ background:#1f5b3a; color:#fff; border-color:#1f5b3a; }
.kn-yg-terms{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.kn-yg-term{ background:#fff; border:1px solid #dde6d4; border-radius:14px; padding:16px 18px;
  transition:.15s; display:block; text-decoration:none; color:#22302a; }
.kn-yg-term[hidden]{ display:none !important; }
a.kn-yg-term:hover{ border-color:#2f8454; box-shadow:0 10px 22px -16px rgba(31,91,58,.4); transform:translateY(-2px); }
.kn-yg-term .top{ display:flex; align-items:baseline; gap:9px; margin-bottom:5px; flex-wrap:wrap; }
.kn-yg-term h2.nm{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:700;
  font-size:17px !important; color:#1f5b3a !important; margin:0 !important; padding:0 !important; border:none !important;
  background:none !important; display:inline; line-height:1.5 !important; }
.kn-yg-term .yomi{ font-size:11px; color:#93a097; }
.kn-yg-term .cat{ margin-left:auto; font-size:10.5px; font-weight:700; border-radius:5px; padding:2px 8px; }
.kn-yg-term .cat-baken{ background:#e3efd9; color:#1f5b3a; }
.kn-yg-term .cat-race{ background:#e9f1ff; color:#2f5aa8; }
.kn-yg-term .cat-uma{ background:#fbeede; color:#a8702a; }
.kn-yg-term .cat-cho{ background:#fbe9ee; color:#b03a5d; }
.kn-yg-term .cat-course{ background:#e6f3ec; color:#2f7d52; }
.kn-yg-term .cat-yoso{ background:#f1ece0; color:#7a6a3a; }
.kn-yg-term .nm a{ color:inherit; text-decoration:none; border-bottom:1.5px dashed #9fc7ab; }
.kn-yg-term .nm a:hover{ color:#ef6a42; border-color:#ef6a42; }
.kn-yg-term .impb{ background:#fff3d6; color:#b67a1e; font-size:10.5px; font-weight:700; border-radius:5px; padding:2px 7px; }
.kn-yg-term .def{ font-size:13px; color:#5f6f66; line-height:1.8; }
.kn-yg-term .foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; }
.kn-yg-term .go{ font-size:12px; font-weight:700; color:#2f8454; text-decoration:none; }
.kn-yg-term .go:hover{ color:#ef6a42; }
/* 「👍使う」投票ボタン */
.kn-yg-term .vt{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-size:11.5px; font-weight:700;
  color:#93a097; border:1px solid #e4ebdc; background:#fff; border-radius:999px; padding:4px 11px;
  cursor:pointer; font-family:inherit; transition:.15s; }
.kn-yg-term .vt:hover{ border-color:#2f8454; color:#2f8454; }
.kn-yg-term .vt.did{ background:#e3efd9; color:#1f5b3a; border-color:#cfe0c2; cursor:default; }
.kn-yg-term .vt .vc{ font-family:"Oswald",sans-serif; font-weight:600; font-size:12px; }
.kn-yg-empty{ text-align:center; color:#93a097; font-size:14px; padding:46px 0; }
.kn-yg-empty .big{ font-size:36px; display:block; margin-bottom:8px; }
/* スマホ：絞り込みUIはフロートボタン→ボトムシート */
.kn-yg-float{ display:none; }
@media(max-width:680px){
  .kn-yg-terms{ grid-template-columns:1fr; }
  .kn-yg-filters{ position:fixed; left:0; right:0; bottom:0; z-index:96; background:#fff; border:0; margin:0;
    border-radius:20px 20px 0 0; padding:18px 14px 22px; box-shadow:0 -14px 44px rgba(0,0,0,.3);
    transform:translateY(110%); transition:transform .3s cubic-bezier(.4,0,.2,1); }
  .kn-yg-filters.open{ transform:none; }
  .kn-yg-filters .kn-yg-close{ display:grid; place-items:center; position:absolute; top:10px; right:10px;
    width:32px; height:32px; border-radius:50%; background:#f1f5ea; color:#5f6f66; font-size:17px;
    border:0; cursor:pointer; }
  .kn-yg-tabs button{ padding:8px 12px; font-size:13px; }
  .kn-yg-float{ display:inline-flex; align-items:center; gap:6px; position:fixed; right:14px; bottom:14px;
    z-index:95; background:#1f5b3a; color:#fff; border-radius:999px; padding:13px 19px; font-weight:700;
    font-size:13.5px; border:0; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.35); font-family:inherit; }
}

/* =========================================================
   馬券計算ツール（/tools/ 配下・べつAIモック移植・.kn-toolスコープ）
   ========================================================= */
.kn-tool{ --tl-line:#dde6d4; --tl-red:#d8463a; max-width:680px; margin:0 auto; }
.kn-tool .tl-tabs{ position:relative; display:flex; background:#e3ebda; border-radius:14px; padding:5px; margin-bottom:20px; }
.kn-tool .tl-tabs .ind{ position:absolute; top:5px; bottom:5px; background:#fff; border-radius:10px;
  box-shadow:0 4px 12px -4px rgba(31,91,58,.45); transition:transform .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1); z-index:0; }
.kn-tool .tl-tabs a{ position:relative; z-index:1; flex:1; padding:12px 6px; font-weight:700; font-size:13.5px;
  color:#5f6f66; text-align:center; text-decoration:none; transition:color .25s; }
.kn-tool .tl-tabs a.on{ color:#1f5b3a; }
.kn-tool .card{ background:#f4f7ee; border:1px solid var(--tl-line); border-radius:20px; padding:24px;
  box-shadow:0 20px 44px -28px rgba(31,91,58,.5); }
.kn-tool .field{ margin-bottom:18px; }
.kn-tool .lbl{ font-size:12.5px; font-weight:700; color:#5f6f66; margin:0 0 8px; display:block; letter-spacing:.02em; }
.kn-tool .ip-wrap{ position:relative; display:flex; align-items:center; }
.kn-tool .in{ width:100%; border:1.5px solid var(--tl-line); border-radius:13px; padding:14px 16px; font-size:17px;
  font-weight:500; outline:none; transition:border-color .15s,box-shadow .15s; background:#fff; font-family:inherit; color:#22302a; }
.kn-tool .in:focus{ border-color:#2f8454; box-shadow:0 0 0 4px rgba(47,132,84,.12); }
.kn-tool .in.has-unit{ padding-right:46px; }
.kn-tool .unit{ position:absolute; right:16px; font-size:14px; color:#93a097; font-weight:700; pointer-events:none; }
.kn-tool select.in{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6f66' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.kn-tool .row2{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.kn-tool .stepper{ display:flex; align-items:center; border:1.5px solid var(--tl-line); border-radius:13px; background:#fff; overflow:hidden; }
.kn-tool .stepper button{ width:46px; height:50px; font-size:22px; color:#1f5b3a; font-weight:600; border:0; background:none; cursor:pointer; transition:background .12s; }
.kn-tool .stepper button:hover{ background:#e7f0dd; }
.kn-tool .stepper input{ border:0; background:none; text-align:center; font-size:17px; font-weight:600; width:100%; outline:none; -moz-appearance:textfield; font-family:inherit; }
.kn-tool .stepper input::-webkit-outer-spin-button,.kn-tool .stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.kn-tool .quick{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.kn-tool .quick button{ background:#e7f0dd; color:#1f5b3a; border:0; border-radius:9px; padding:7px 13px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s; }
.kn-tool .quick button:hover{ background:#2f8454; color:#fff; }
/* 結果＝馬券風の半券 */
.kn-tool .slip{ position:relative; margin-top:22px; background:#fff; border:1px solid var(--tl-line); border-radius:16px; box-shadow:0 14px 30px -20px rgba(31,91,58,.5); }
.kn-tool .slip-stub{ min-height:44px; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(120deg,#2f8454,#1f5b3a); color:#fff; padding:0 18px; border-radius:16px 16px 0 0;
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.04em; }
.kn-tool .slip-stub .chip{ background:rgba(255,255,255,.2); border-radius:6px; padding:2px 9px; font-size:11px; }
.kn-tool .perf{ position:relative; border-top:2px dashed #cfe0c2; margin:0 16px; }
.kn-tool .notch{ position:absolute; width:18px; height:18px; border-radius:50%; background:#f4f7ee; top:-9px; }
.kn-tool .notch.l{ left:-25px; } .kn-tool .notch.r{ right:-25px; }
.kn-tool .slip-body{ padding:20px 22px 22px; text-align:center; }
.kn-tool .big{ font-family:"Oswald",sans-serif; font-weight:700; font-size:46px; color:#1f5b3a; line-height:1; letter-spacing:-.01em; }
.kn-tool .big .u{ font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-size:15px; color:#5f6f66; font-weight:500; margin-left:5px; letter-spacing:0; }
.kn-tool .sub-cap{ font-size:11.5px; color:#93a097; font-weight:700; margin-bottom:6px; letter-spacing:.06em; }
.kn-tool .r-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:18px; border-top:1px solid var(--tl-line); }
.kn-tool .r-grid>div{ padding:13px 6px 2px; }
.kn-tool .r-grid>div:first-child{ border-right:1px solid var(--tl-line); }
.kn-tool .r-grid .k{ font-size:11px; color:#5f6f66; font-weight:700; }
.kn-tool .r-grid .v{ font-family:"Oswald",sans-serif; font-size:23px; margin-top:2px; }
.kn-tool .r-grid .v.up{ color:#2f8454; } .kn-tool .r-grid .v.down{ color:var(--tl-red); }
/* 合成オッズ：オッズ行・ゲージ・判定・資金配分 */
.kn-tool .odds-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.kn-tool .orow{ display:grid; grid-template-columns:26px 1fr 38px; gap:10px; align-items:center; }
.kn-tool .orow .idx{ font-family:"Oswald",sans-serif; font-weight:600; color:#fff; background:#2f8454; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; }
.kn-tool .orow .ipw{ position:relative; display:flex; align-items:center; }
.kn-tool .orow input{ border:1.5px solid var(--tl-line); border-radius:11px; padding:11px 38px 11px 14px; font-size:16px; font-weight:500; width:100%; outline:none; background:#fff; transition:border-color .15s; font-family:inherit; }
.kn-tool .orow input:focus{ border-color:#2f8454; }
.kn-tool .orow .ipw .u{ position:absolute; right:13px; font-size:13px; color:#93a097; font-weight:700; }
.kn-tool .orow .del{ width:36px; height:36px; border-radius:9px; color:#93a097; font-size:19px; display:grid; place-items:center; border:0; background:none; cursor:pointer; transition:.12s; }
.kn-tool .orow .del:hover{ background:#fbe9e6; color:var(--tl-red); }
.kn-tool .add-row{ margin-top:6px; color:#2f8454; font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:6px; padding:6px 4px; border:0; background:none; cursor:pointer; font-family:inherit; }
.kn-tool .add-row:hover{ color:#ef6a42; }
.kn-tool .gauge{ margin:20px 4px 4px; }
.kn-tool .gauge-track{ position:relative; height:11px; border-radius:7px;
  background:linear-gradient(90deg,var(--tl-red) 0 9%,#e8b34a 9% 31.8%,#a7d07a 31.8% 54.5%,#2f8454 54.5% 100%); }
.kn-tool .gauge-pin{ position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid #1f5b3a;
  transform:translate(-50%,-50%); transition:left .35s cubic-bezier(.4,0,.2,1); box-shadow:0 2px 6px rgba(0,0,0,.3); }
.kn-tool .gauge-scale{ display:flex; justify-content:space-between; margin-top:7px; font-size:10px; color:#93a097; font-weight:700; }
.kn-tool .judge{ margin-top:14px; border-radius:11px; padding:12px 15px; font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:9px; justify-content:center; }
.kn-tool .judge.ok{ background:#e7f0dd; color:#1f5b3a; } .kn-tool .judge.cau{ background:#fbf1d8; color:#9a6b14; } .kn-tool .judge.bad{ background:#fbe2de; color:var(--tl-red); }
.kn-tool .alloc{ margin-top:16px; text-align:left; }
.kn-tool .alloc-h{ font-size:11px; color:#93a097; font-weight:700; letter-spacing:.05em; margin-bottom:8px; }
.kn-tool .ar{ display:grid; grid-template-columns:54px 1fr auto; gap:11px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--tl-line); }
.kn-tool .ar:last-child{ border-bottom:0; }
.kn-tool .ar .o{ font-family:"Oswald",sans-serif; color:#5f6f66; font-size:13px; }
.kn-tool .ar .barwrap{ height:8px; background:#e7eedd; border-radius:5px; overflow:hidden; }
.kn-tool .ar .bar{ height:100%; background:linear-gradient(90deg,#2f8454,#5cb07e); border-radius:5px; transition:width .4s; }
.kn-tool .ar .amt{ font-family:"Oswald",sans-serif; font-weight:600; color:#1f5b3a; font-size:15px; text-align:right; white-space:nowrap; }
/* 点数計算：モード切替 */
.kn-tool .seg{ position:relative; display:flex; background:#e7eedd; border-radius:11px; padding:4px; margin-bottom:18px; }
.kn-tool .seg .ind{ position:absolute; top:4px; bottom:4px; background:#fff; border-radius:8px; box-shadow:0 3px 8px -4px rgba(31,91,58,.4); transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s; z-index:0; }
.kn-tool .seg button{ position:relative; z-index:1; flex:1; padding:10px; font-weight:700; font-size:13px; color:#5f6f66; border:0; background:none; cursor:pointer; transition:color .25s; font-family:inherit; }
.kn-tool .seg button.on{ color:#1f5b3a; }
.kn-tool .sub{ display:none; } .kn-tool .sub.on{ display:block; }
.kn-tool .hint{ font-size:11.5px; color:#93a097; margin-top:6px; }
.kn-tool .note{ font-size:11.5px; color:#93a097; margin-top:16px; line-height:1.7; }
.kn-tool .tl-aff{ margin-top:18px; }
.kn-tool .tl-related{ margin-top:22px; }
.kn-tool .rel-h{ font-size:12px; font-weight:700; color:#93a097; letter-spacing:.05em; margin-bottom:10px; }
.kn-tool .rel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kn-tool .rel-c{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--tl-line); border-radius:13px; padding:14px 16px; text-decoration:none; transition:.15s; }
.kn-tool .rel-c:hover{ border-color:#2f8454; box-shadow:0 10px 20px -16px rgba(31,91,58,.4); transform:translateY(-2px); }
.kn-tool .rel-c .re{ font-size:22px; }
.kn-tool .rel-c .rn{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:14.5px; color:#1f5b3a; }
.kn-tool .rel-c .rg{ margin-left:auto; color:#93a097; }
/* マークカードの塗り方 */
.kn-tool.wide{ max-width:760px; }
.kn-tool .mtabs{ position:relative; display:flex; background:#e3ebda; border-radius:13px; padding:5px; margin-bottom:18px; }
.kn-tool .mtabs .ind{ position:absolute; top:5px; bottom:5px; background:#fff; border-radius:10px; box-shadow:0 4px 12px -4px rgba(31,91,58,.45); transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s; z-index:0; }
.kn-tool .mtabs button{ position:relative; z-index:1; flex:1; padding:11px 4px; font-weight:700; font-size:13px; color:#5f6f66; border:0; background:none; cursor:pointer; transition:color .25s; font-family:inherit; }
.kn-tool .mtabs button.on{ color:#1f5b3a; }
.kn-tool .mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.kn-tool .mh2{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:700; font-size:15px !important;
  color:#1f5b3a !important; margin:0 0 14px !important; padding:0 !important; border:none !important; background:none !important;
  display:flex; align-items:center; gap:9px; }
.kn-tool .mh2 .n{ width:24px; height:24px; border-radius:50%; background:#ef6a42; color:#fff; font-family:"Oswald",sans-serif; font-size:13px; font-weight:600; display:grid; place-items:center; flex:none; }
.kn-tool .mh2::before,.kn-tool .mh2::after{ content:none !important; display:none !important; }
.kn-tool .modedesc{ font-size:11.5px; color:#93a097; margin:-2px 0 10px; }
.kn-tool .mguide{ background:#e7f0dd; border:1px solid #cfe0c2; border-radius:12px; padding:13px 15px; margin:14px 0 4px; }
.kn-tool .mguide .gt{ font-size:12.5px; font-weight:700; color:#1f5b3a; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.kn-tool .mguide p{ margin:0 0 5px; font-size:12.8px; color:#5f6f66; line-height:1.75; }
.kn-tool .mguide p:last-of-type{ margin-bottom:0; }
.kn-tool .mguide b{ color:#1f5b3a; }
.kn-tool .mguide .links{ margin-top:8px; display:flex; gap:12px; flex-wrap:wrap; }
.kn-tool .mguide .links a{ font-size:12px; font-weight:700; color:#2f8454; text-decoration:none; }
.kn-tool .mguide .links a:hover{ color:#ef6a42; }
.kn-tool .mchips{ display:flex; flex-wrap:wrap; gap:7px; }
.kn-tool .mchips button{ border:1.5px solid var(--tl-line); background:#fff; border-radius:9px; padding:8px 13px; font-size:13px; font-weight:700; color:#5f6f66; cursor:pointer; font-family:inherit; transition:.15s; }
.kn-tool .mchips button:hover{ border-color:#2f8454; }
.kn-tool .mchips button.on{ background:#2f8454; color:#fff; border-color:#2f8454; }
.kn-tool .race-sel{ display:flex; flex-wrap:wrap; gap:5px; }
.kn-tool .race-sel button{ width:34px; height:34px; border-radius:8px; border:1.5px solid var(--tl-line); background:#fff; font-family:"Oswald",sans-serif; font-weight:600; font-size:14px; color:#5f6f66; cursor:pointer; transition:.12s; }
.kn-tool .race-sel button.on{ background:#1f5b3a; color:#fff; border-color:#1f5b3a; }
.kn-tool .mpos{ margin-bottom:11px; }
.kn-tool .mpos .pl{ font-size:11.5px; font-weight:700; color:#1f5b3a; margin-bottom:5px; }
.kn-tool .mnums{ display:flex; flex-wrap:wrap; gap:5px; }
.kn-tool .mnums button{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--tl-line); background:#fff; font-family:"Oswald",sans-serif; font-weight:600; font-size:13px; color:#5f6f66; cursor:pointer; transition:.12s; padding:0; }
.kn-tool .mnums button:hover{ border-color:#2f8454; }
.kn-tool .mnums button.on{ background:#ef6a42; color:#fff; border-color:#ef6a42; }
.kn-tool .mnums button.jiku{ background:#1f5b3a; color:#fff; border-color:#1f5b3a; }
.kn-tool .msummary{ margin-top:14px; background:#e7f0dd; border-radius:12px; padding:13px 15px; font-size:13.5px; }
.kn-tool .msummary b{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; color:#1f5b3a; font-size:15px; }
.kn-tool .msummary .pts{ display:inline-block; background:#2f8454; color:#fff; border-radius:6px; padding:1px 9px; font-family:"Oswald",sans-serif; font-weight:600; font-size:13px; margin:0 3px; }
.kn-tool .mwarn{ margin-top:10px; background:#fbe2de; color:var(--tl-red); border-radius:10px; padding:10px 13px; font-size:12.5px; font-weight:700; display:none; }
.kn-tool .mwarn.show{ display:block; }
.kn-tool .msheet{ background:#f7fbf3; border:2px solid #1f5b3a; border-radius:14px; padding:16px; }
.kn-tool .sheet-t{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:13px; color:#1f5b3a; text-align:center; border-bottom:2px solid #1f5b3a; padding-bottom:8px; margin-bottom:12px; letter-spacing:.04em; }
.kn-tool .blk{ margin-bottom:14px; }
.kn-tool .blk-h{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:#5f6f66; margin-bottom:7px; }
.kn-tool .blk-h .bn{ width:18px; height:18px; border-radius:50%; background:#ef6a42; color:#fff; font-family:"Oswald",sans-serif; font-size:10px; display:grid; place-items:center; }
.kn-tool .mcells{ display:flex; flex-wrap:wrap; gap:4px; }
.kn-tool .mcell{ min-width:24px; height:24px; padding:0 5px; border-radius:6px; border:1.4px solid #c5d3ba; background:#fff; font-family:"Oswald",sans-serif; font-weight:600; font-size:11.5px; color:#b9c4b0; display:grid; place-items:center; transition:.18s; }
.kn-tool .mcell.auto{ min-width:auto; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; }
.kn-tool .mcell.fill{ background:#2f8454; border-color:#2f8454; color:#fff; box-shadow:0 3px 8px -3px rgba(47,132,84,.7); }
.kn-tool .mcell.fillj{ background:#1f5b3a; border-color:#1f5b3a; color:#fff; }
.kn-tool .col-wrap{ display:flex; gap:10px; }
.kn-tool .mcol{ flex:1; }
.kn-tool .mcol .ch{ font-size:10.5px; font-weight:700; color:#1f5b3a; text-align:center; margin-bottom:5px; }
.kn-tool .mcol .ccells{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.kn-tool .mcol .mcell{ width:100%; min-width:0; }
.kn-tool .amt-cols{ display:flex; gap:14px; }
.kn-tool .amt-cols .ac{ flex:1; }
.kn-tool .amt-cols .ah{ font-size:10px; font-weight:700; color:#93a097; text-align:center; margin-bottom:4px; }
.kn-tool .amt-cols .acells{ display:grid; grid-template-columns:repeat(2,1fr); gap:3px; }
.kn-tool .msteps{ margin-top:16px; background:#fff; border:1px solid var(--tl-line); border-radius:14px; padding:16px 18px; }
.kn-tool .msteps h3{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif !important; font-weight:700; font-size:14px !important; color:#1f5b3a !important; margin:0 0 10px !important; padding:0 !important; border:none !important; }
.kn-tool .msteps ol{ margin:0; padding-left:0; list-style:none; counter-reset:s; }
.kn-tool .msteps li{ counter-increment:s; position:relative; padding:6px 0 6px 34px; font-size:13.5px; border-bottom:1px dashed var(--tl-line); }
.kn-tool .msteps li:last-child{ border-bottom:0; }
.kn-tool .msteps li::before{ content:counter(s); position:absolute; left:0; top:6px; width:23px; height:23px; border-radius:50%; background:#2f8454; color:#fff; font-family:"Oswald",sans-serif; font-weight:600; font-size:12px; display:grid; place-items:center; }
.kn-tool .msteps li b{ color:#1f5b3a; }
@media(max-width:680px){ .kn-tool .mgrid{ grid-template-columns:1fr; } }

/* ツール一覧（/tools/ ＋ 買い方ハブ） */
.kn-tool .tl-hub{ display:flex; flex-direction:column; gap:12px; }
.kn-tool .tl-hubcard{ display:flex; align-items:center; gap:15px; background:#fff; border:1px solid var(--tl-line); border-radius:15px; padding:17px 20px; text-decoration:none; transition:.15s; }
.kn-tool .tl-hubcard:hover{ border-color:#2f8454; box-shadow:0 12px 24px -18px rgba(31,91,58,.45); transform:translateY(-2px); }
.kn-tool .tl-hubcard .em{ font-size:26px; }
.kn-tool .tl-hubcard .tx{ flex:1; }
.kn-tool .tl-hubcard .tx b{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700; font-size:16px; color:#1f5b3a; display:block; }
.kn-tool .tl-hubcard .tx small{ font-size:12.5px; color:#5f6f66; }
.kn-tool .tl-hubcard .rg{ color:#93a097; font-size:18px; }
@media(max-width:560px){
  .kn-tool .row2{ grid-template-columns:1fr; }
  .kn-tool .tl-tabs a{ font-size:12px; }
  .kn-tool .big{ font-size:40px; }
  .kn-tool .rel-grid{ grid-template-columns:1fr; }
  .kn-tool .card{ padding:18px 14px; }
}

/* ページ送り */
.kn-pager{ display:flex; justify-content:center; gap:6px; margin-top:30px; flex-wrap:wrap; }
.kn-pager .page-numbers{ display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 8px;
  border-radius:10px; background:#fff; border:1px solid #dde6d4; color:#22302a; text-decoration:none;
  font-family:"Oswald",sans-serif; font-size:14px; }
.kn-pager .page-numbers.current{ background:#2f8454; border-color:#2f8454; color:#fff; }
.kn-pager a.page-numbers:hover{ border-color:#2f8454; color:#2f8454; }

@media(max-width:900px){
  .kn-trackgrid{ grid-template-columns:repeat(3,1fr); }
  .kn-cards{ grid-template-columns:1fr 1fr; }
}

/* レスポンシブ */
@media(max-width:600px){
  .kn-gnav,.kn-cta{ display:none; }
  .kn-omenu{ display:grid; }
  /* フッターのブランド名が「みんなの競/馬ナビ」と変に折れる対策＝ブランドブロックを全幅1行に */
  .kn-fbrand{ grid-column:1/-1; }
  .kn-fbrand .kn-bn{ white-space:nowrap; }
  .kn-fbrand p{ max-width:none; }
  .kn-fcols{ grid-template-columns:1fr 1fr; }
  /* ★スマホは白枠を画面ぎりぎりまで広げ、中のコンテンツを潰さない */
  .kn-wrap{ padding:0 10px; }
  .l-container{ padding:0 8px !important; }
  main.l-mainContent{ padding:18px 12px 26px; border-radius:14px; }
  .kn-bc{ padding:14px 10px 0; }
  .kn-hubhero{ padding:24px 10px 4px; }
  .kn-trackgrid{ grid-template-columns:1fr 1fr; gap:8px; }
  .kn-cards{ grid-template-columns:1fr; gap:10px; }
  .kn-card{ padding:16px 14px; }
  .kn-guide{ padding:10px 8px; border-radius:14px; }
}