/* 推し馬探訪 デザイントークン
   ベースはフェラーリのデザイン規約（白い編集面・Rosso Corsa を数少ない箇所だけ・角は立てる・
   ディスプレイのウェイトは500で太らせない・8pxの間隔ラダー・影を使わずヘアラインと面で奥行きを作る）。
   そこへ視覚調整の規約を重ねている（上下の余白は数値ではなく見た目で釣り合わせる／同じ色でも
   大面積は少し沈めて小面積は少し鮮やかに／並びは枠ではなく情報の重さで釣り合わせる）。 */
:root{
  /* 面 */
  --canvas:#ffffff;        /* 本文の地 */
  --soft:#f7f7f7;          /* 交互に敷く淡い面 */
  --strong:#ebebeb;        /* バーの溝・仕切り */
  --cinema:#181818;        /* メインビジュアルと締めの帯（純黒にしない） */
  --cinema-elev:#303030;
  /* 文字 */
  --ink:#181818;
  --muted:#666666;
  --on-dark:#ffffff;
  --on-dark-sub:#969696;
  /* 罫 */
  --rule:#d2d2d2;
  --rule-soft:#ebebeb;
  --rule-dark:#303030;
  /* 唯一のアクセント（Rosso Corsa）。小面積はそのまま、大面積は少し沈めた方を使う＝面積効果の調整 */
  --accent:#da291c;
  --accent-large:#c62317;
  --accent-active:#b01e0a;
  /* 間隔ラダー（4の倍数） */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --sans:"Inter","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:16px;
  font-weight:400;line-height:1.85;font-feature-settings:"palt" 1;overflow-wrap:anywhere}
a{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding:0 var(--s3)}

/* 上部ナビ。角は立て、罫は1本だけ */
.sitebar{background:var(--canvas);border-bottom:1px solid var(--rule)}
.sitebar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px;
  flex-wrap:wrap;column-gap:var(--s3)}
.sitebar a{text-decoration:none}
.sitebar .home{font-weight:700;font-size:16px;letter-spacing:.02em}
.sitebar nav{display:flex;gap:var(--s3)}
/* 上を1px狭く下を1px広く取り、行の中で視覚的に中央に見えるようにする */
.sitebar nav a{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  padding:17px 0 19px}
/* 語の長い言語ではナビが折り返すので、狭い画面では2行目に落とす */
@media(max-width:460px){
  .sitebar .wrap{padding-top:6px}
  .sitebar .home{width:100%;padding-top:8px}
  .sitebar nav{width:100%;gap:var(--s4);border-top:1px solid var(--rule-soft)}
  .sitebar nav a{padding:11px 0 13px}
}

/* メインビジュアル（.hero / #motionToggle）は2026-09-20に撤去した。
   ⚠ 復活させるなら高さは必ず svh にすること。vh だとスマホでURLバーが出入りするたびに
   高さが27px変わり、スクロールアンカリングが効いて上端に落ち着けなくなる（実測済み） */

/* 見出し。ディスプレイは500どまりで太らせない。詰めは負の字間で作る */
.crumbs{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);padding:var(--s3) 0 0;line-height:1.7}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 .45em}
h1{font-size:clamp(28px,7.4vw,40px);font-weight:500;line-height:1.22;letter-spacing:-.025em;
  margin:14px 0 0}
.sub1{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-top:10px}
h2{font-size:23px;font-weight:500;line-height:1.35;letter-spacing:-.015em;
  margin:var(--s7) 0 var(--s3);padding-top:var(--s4);border-top:1px solid var(--rule)}
h3{font-size:17px;font-weight:700;line-height:1.45;letter-spacing:0;margin:var(--s5) 0 var(--s2)}
p{margin:var(--s3) 0}
/* 上を少し狭く、下を少し広く＝箱の中で文字が中央に見える */
.lead{background:var(--soft);padding:22px var(--s4) 26px;margin:var(--s4) 0 0;font-size:16px}
.lead p:first-child{margin-top:0}
.lead p:last-child{margin-bottom:0}
.note{font-size:13.5px;color:var(--muted);line-height:1.8}
.gold{color:var(--accent)}
strong{font-weight:700}

table.spec{width:100%;border-collapse:collapse;margin:var(--s4) 0;font-size:14.5px}
/* ラベル列は情報が軽いので幅を詰め、値の側に面積を渡す＝視覚的な重さで釣り合わせる */
table.spec th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.03em;
  width:7.4em;padding:13px 12px 15px 0;vertical-align:top;white-space:nowrap;
  border-bottom:1px solid var(--rule-soft)}
table.spec td{padding:13px 0 15px;vertical-align:top;border-bottom:1px solid var(--rule-soft)}

ul.plain{list-style:none;margin:var(--s3) 0}
ul.plain li{padding:7px 0 9px 1.15em;text-indent:-1.15em;font-size:15.5px}
ul.plain li::before{content:"—";color:var(--accent);margin-right:.35em}
ol.src{margin:var(--s3) 0 0;padding-left:1.7em;font-size:12.5px;color:var(--muted);line-height:1.8}
ol.src li{margin:6px 0}
ol.src a{color:var(--muted)}

/* 一覧カード。罫1本だけで区切り、影は使わない */
.cards{margin:var(--s4) 0 0;border-top:1px solid var(--rule)}
.cards a.card{display:block;text-decoration:none;padding:14px 0 16px;border-bottom:1px solid var(--rule-soft)}
.cards a.card[hidden]{display:none}
.card .nm{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.card .mt{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.7}
.card .mt b{color:var(--accent);font-weight:600}

.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 var(--s1)}
.filters button{font:inherit;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--ink);
  background:var(--canvas);border:1px solid var(--rule);padding:11px 14px 13px;min-height:42px;
  cursor:pointer;border-radius:0}
.filters button[aria-pressed=true]{color:#fff;background:var(--accent-large);border-color:var(--accent-large)}
/* 残り頭数。押す前に結果の大きさが読めるようにする */
.filters button .c{margin-left:7px;font-size:11px;font-weight:600;color:var(--muted)}
.filters button[aria-pressed=true] .c{color:#fff;opacity:.7}
.filters button[disabled]{color:var(--muted);border-color:var(--rule-soft);opacity:.5;cursor:default}
.filters button.clr{border-color:transparent;background:none;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;padding-left:2px;padding-right:2px}
.hit{font-size:12.5px;color:var(--muted);margin-top:10px}
.search{margin:var(--s4) 0 0}
.search label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.search input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--canvas);
  border:1px solid var(--rule);padding:13px 14px 15px;min-height:48px;border-radius:0}
.search input::placeholder{color:#9b9b9b}
/* 条件へ戻る固定バー。全件1ページなので、リストの途中からでも条件に戻れるようにする */
.fbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s2);width:100%;font:inherit;font-size:13px;font-weight:600;
  color:var(--ink);background:var(--canvas);border:0;border-top:1px solid var(--ink);
  padding:0 var(--s3);min-height:44px;cursor:pointer;border-radius:0;text-align:left}
.fbar[hidden]{display:none}
.fbar .fa{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
#noHit{font-size:14px;color:var(--muted);padding:var(--s3) 0}

/* 書籍の紹介ブロック（books.html） */
.bk{padding:var(--s4) 0 var(--s5);border-bottom:1px solid var(--rule-soft)}
.bk h3{margin:0 0 5px}
.bk .note{margin:0 0 9px}
.bk p{margin:0}
.bk .who{margin-top:9px;font-size:13px;color:var(--muted)}
#noHit .clr{font:inherit;font-size:14px;color:var(--accent);background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.linkrow{display:block;padding:15px 1.4em 17px 0;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;font-size:15px;position:relative}
.linkrow .d{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.linkrow::after{content:"→";position:absolute;right:2px;top:15px;color:var(--accent);font-size:13px}
/* 主CTA。大面積なので沈めた方の赤を使う。角は立てる */
.cta{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:14px;
  letter-spacing:.06em;color:#fff;background:var(--accent-large);border:1px solid var(--accent-large);
  padding:16px var(--s4) 18px;margin:var(--s4) 0;border-radius:0}
.cta+.cta{background:transparent;color:var(--ink);border-color:var(--ink)}
.fav{font:inherit;font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--ink);background:var(--canvas);
  border:1px solid var(--rule);padding:13px 16px 15px;min-height:46px;cursor:pointer;margin:var(--s2) 0 0;
  border-radius:0}
.fav[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.fav[disabled]{color:var(--muted);border-color:var(--rule-soft);cursor:default}

/* 締めの帯とフッターは暗く落とす＝白い編集面との対比で終わる */
footer.site{margin-top:var(--s8);background:var(--cinema);color:var(--on-dark-sub);
  padding:var(--s6) 0 var(--s7);font-size:12.5px;line-height:1.9}
footer.site a{color:var(--on-dark)}
footer.site p{margin:var(--s3) 0 0}

/* 言語切替。各言語をflexの独立した項目にして間隔を取る（詰まって読めなくなるのを防ぐ） */
.langs{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);
  padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--rule-dark)}
.langs .ll{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-sub);flex-basis:100%;margin-bottom:2px}
.langs a,.langs span[aria-current]{font-size:13px}
.langs a{color:var(--on-dark-sub);text-decoration:underline;text-underline-offset:3px}
.langs a:hover,.langs a:focus-visible{color:var(--on-dark)}
.langs span[aria-current]{color:var(--on-dark);font-weight:700}

/* 診断。インタラクティブな道具の部分だけ枠で囲み、記事本文と混ざって見えないようにする */
#quiz{background:var(--soft);border:1px solid var(--ink);padding:var(--s4) var(--s3) var(--s5);
  margin:var(--s3) 0 var(--s6)}
.qcount{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:0}
.qtitle{font-size:21px;font-weight:500;line-height:1.45;letter-spacing:-.015em;margin:var(--s2) 0 var(--s4);
  padding:0;border:0}
.qopts{display:flex;flex-direction:column;gap:var(--s2)}
.qopt{font:inherit;font-size:15.5px;text-align:left;color:var(--ink);background:var(--canvas);
  border:1px solid var(--rule-soft);padding:16px 15px 18px;min-height:58px;cursor:pointer;line-height:1.6;
  border-radius:0}
.qopt:hover,.qopt:focus-visible{border-color:var(--accent)}
.qback{font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  background:none;border:0;padding:var(--s3) 0;cursor:pointer;text-decoration:underline}
.qnote{font-size:13.5px;color:var(--muted);margin-bottom:var(--s1)}
.rcard{border-top:1px solid var(--rule);padding:var(--s4) 0 26px}
.rlabel{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--accent);margin:0 0 var(--s1)}
.rname{font-size:19px;font-weight:700;letter-spacing:-.015em}
.rmeta{font-size:12px;color:var(--muted);margin:var(--s1) 0 0;line-height:1.7}
.rwhy{list-style:none;margin:var(--s2) 0 0}
.rwhy li{font-size:13.5px;padding:3px 0 4px 1.15em;text-indent:-1.15em}
.rwhy li::before{content:"—";color:var(--accent);margin-right:.35em}
.rwhy1{font-size:12.5px;color:var(--muted);margin:var(--s2) 0 0}
.rfav{margin-top:var(--s3)}
.rfoot{margin-top:var(--s6);text-align:center}

/* お気に入り */
.pc{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.persona{font-size:21px;font-weight:500;letter-spacing:-.015em;color:var(--accent);margin:6px 0 var(--s3)}
.bar{display:flex;align-items:center;gap:var(--s2);margin:7px 0;font-size:12.5px}
.bar .bl{width:6.2em;color:var(--muted);flex:none}
.bar .bt{flex:1;height:7px;background:var(--strong)}
.bar .bf{display:block;height:100%;background:var(--ink)}
.bar .bv{width:3.2em;text-align:right;color:var(--muted);flex:none}

@media(min-width:700px){
  .wrap{padding:0 var(--s4)}
  h1{font-size:52px;line-height:1.14}
  h2{font-size:28px}
}