@charset "utf-8";
/* ============================================================
   パチスロ設定判別ツールまとめ 共有スタイル
   slot/style.css  ── mlist.php / index.php / search.php 共通
   設定判別ツール sh.php / 記事 article.php と同じデザイン言語に統一
   ============================================================ */

:root{
  --bg:#f7f8fb;
  --card:#fff;
  --line:#d9deea;
  --line2:#e8ecf4;
  --text:#222;
  --sub:#666;
  --accent:#1e5ecc;
  --accent-dark:#1146a7;
  --accent-bg:#e9f1ff;
  --danger:#d9534f;
  --bar:#15171d;          /* セクション見出しの濃色バー */
  --bar2:#23262f;         /* 月見出しバー */
  --row:#fff;
  --row-alt:#f4f6fb;
  --row-hover:#eef3ff;
  --chip-bg:#eef3fb;
  --chip-fg:#33405a;
  --floor-bg:#fff8ec;
  --floor-line:#f0d9ad;
  --floor-fg:#9a6b16;
  /* 評価バッジ色（既存サイトと同一） */
  --rk-s:#d9534f;
  --rk-a:#f0ad4e;
  --rk-b:#5cb85c;
  --rk-c:#5bc0de;
  --rk-none:#aab2c2;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  font-size:15px;
  line-height:1.7;
  word-break:break-word;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-dark); text-decoration:underline; }

/* ---------- レイアウト枠 ---------- */
.wrap{ max-width:880px; margin:0 auto; padding:0 12px 40px; }

/* サイト最上部の細いバー */
.site-bar{
  background:var(--bar);
  color:#fff;
  text-align:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  padding:9px 12px;
}
.site-bar a{ color:#fff; }

/* ページ見出し（h1＋リード） */
.page-head{
  padding:18px 4px 12px;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.page-head h1{
  margin:0;
  font-size:20px;
  line-height:1.4;
  font-weight:700;
}
.page-head .lead{
  margin:6px 0 0;
  font-size:13px;
  color:var(--sub);
}

/* パンくず */
.crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  font-size:12.5px; color:var(--sub);
  background:#eef2f8;
  border:1px solid var(--line2);
  border-left:3px solid var(--accent);
  border-radius:6px;
  padding:8px 12px;
  margin:14px 0 4px;
}
.crumb a{ color:var(--accent); font-weight:600; }
.crumb a:hover{ text-decoration:underline; }
.crumb .home{ font-weight:700; }
.crumb .sep{ color:#9aa6bd; font-weight:700; }
.crumb .cur{ color:var(--text); font-weight:700; }

/* セクション見出しバー（旧 黒帯 td） */
.sec-bar{
  background:var(--bar);
  color:#fff;
  font-size:14px;
  font-weight:700;
  padding:9px 12px;
  border-radius:8px 8px 0 0;
  margin-top:22px;
}
.sec-bar + .mlist,
.sec-bar + .rank-list,
.sec-bar + .maker-list{ border-radius:0 0 8px 8px; }

/* ---------- 機種リスト（新着順・年度別・メーカー・かな） ---------- */
.mlist{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.month-bar{
  background:var(--bar2);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:7px 12px;
}
.mrow{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 12px;
  border-top:1px solid var(--line2);
}
.mlist > .mrow:first-child,
.month-bar + .mrow{ border-top:none; }
.mrow:nth-of-type(even){ background:var(--row-alt); }
.mrow a{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  color:var(--text);
}
.mrow a:hover{ text-decoration:none; }
.mrow:hover{ background:var(--row-hover); }
.mrow .name{ flex:1 1 auto; font-weight:600; font-size:14.5px; }
.mrow .sub{ color:var(--sub); font-size:12.5px; font-weight:400; white-space:nowrap; }
.mrow.is-plain{ color:var(--text); }

/* ---------- 評価バッジ ---------- */
.badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:5px;
  font-size:12.5px;
  font-weight:800;
  color:#fff;
  line-height:1;
}
.badge.s{ background:var(--rk-s); }
.badge.a{ background:var(--rk-a); }
.badge.b{ background:var(--rk-b); }
.badge.c{ background:var(--rk-c); }
.badge.none{ background:var(--rk-none); }
.badge.na{ background:#eef0f4; color:#9099a8; border:1px solid #e0e4ec; min-width:34px; font-size:11px; font-weight:700; }

/* ---------- 判別ランキング（到達回転順） ---------- */
.rank-list{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.rank-row{
  padding:12px 13px;
  border-top:1px solid var(--line2);
}
.rank-list > .rank-row:first-child{ border-top:none; }
.rank-row:nth-of-type(even){ background:var(--row-alt); }
.rank-row:hover{ background:var(--row-hover); }
.rank-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.rank-no{
  flex:0 0 auto;
  font-weight:800;
  font-size:14px;
  color:var(--accent-dark);
  min-width:30px;
}
.rank-name{ font-weight:700; font-size:14.5px; }
.rank-name a{ color:var(--text); }
.rank-date{ color:var(--sub); font-size:12px; font-weight:400; }
.reach-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  background:var(--accent-bg);
  color:var(--accent-dark);
  font-size:12.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.reach-chip b{ font-weight:800; }
.rank-meta{
  margin-top:5px;
  font-size:12.5px;
  color:var(--sub);
}
.rank-meta .score{ color:#333; }
.rank-meta .score b{ color:var(--danger); }
.rank-items{
  margin-top:3px;
  font-size:12.5px;
  color:var(--sub);
}
.rank-items b{ color:#445; font-weight:600; }

/* 一撃判別 別枠 */
.floor-box{
  margin-top:20px;
  border:1px solid var(--floor-line);
  border-radius:8px;
  background:var(--floor-bg);
  overflow:hidden;
}
.floor-head{
  padding:9px 12px;
  font-size:13px;
  font-weight:700;
  color:var(--floor-fg);
  background:#fff4df;
  border-bottom:1px solid var(--floor-line);
}
.floor-head small{ display:block; font-weight:500; font-size:11.5px; color:#a98a52; margin-top:2px; }
.floor-row{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px;
  border-top:1px solid var(--floor-line);
}
.floor-box > .floor-row:first-of-type{ border-top:none; }
.floor-row .name{ flex:1 1 auto; font-weight:600; font-size:14px; }
.floor-row .name a{ color:var(--text); }
.floor-row .tag{ font-size:11.5px; font-weight:700; color:var(--floor-fg); background:#fff; border:1px solid var(--floor-line); border-radius:999px; padding:2px 8px; white-space:nowrap; }

/* ---------- ランキングのナビ（年別・評価別グリッド） ---------- */
.rank-nav{ margin:6px 0 18px; }
.rank-nav .rn-title{
  background:var(--bar); color:#fff; text-align:center;
  font-size:13px; font-weight:700; padding:8px; border-radius:8px 8px 0 0;
}
.rank-nav .rn-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-top:none; border-radius:0 0 8px 8px; overflow:hidden;
}
.rank-nav .rn-grid a{
  background:#fff; text-align:center; font-size:13px; padding:9px 4px; font-weight:600;
}
.rank-nav .rn-grid a:hover{ background:var(--accent-bg); text-decoration:none; }
.rank-nav .rn-grid a.cur{ background:var(--accent); color:#fff; }

/* ---------- 凡例（独自評価の説明） ---------- */
.legend{
  background:#f7f9fc;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
  font-size:12.5px;
  color:#444;
  margin:6px 0 18px;
}
.legend b{ color:var(--text); }
.legend .lg-row{ margin-top:2px; }
.legend .lg-note{ margin-top:7px; color:var(--sub); font-size:11.5px; }

/* ---------- アクセスランキング ---------- */
.access-list{
  background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.access-row{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-top:1px solid var(--line2);
}
.access-list > .access-row:first-child{ border-top:none; }
.access-row:nth-of-type(even){ background:var(--row-alt); }
.access-row:hover{ background:var(--row-hover); }
.access-row a{ display:flex; align-items:center; gap:9px; width:100%; color:var(--text); }
.access-row a:hover{ text-decoration:none; }
.access-no{
  flex:0 0 auto; min-width:26px; text-align:center;
  font-size:12px; font-weight:800; color:#fff; background:var(--accent);
  border-radius:5px; padding:2px 0;
}
.access-row .name{ flex:1 1 auto; font-weight:600; font-size:14px; }
.access-row .sub{ color:var(--sub); font-size:12px; white-space:nowrap; }

/* ---------- メーカー一覧 ---------- */
.maker-list{
  background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.maker-row{ display:flex; align-items:center; padding:10px 12px; border-top:1px solid var(--line2); }
.maker-list > .maker-row:first-child{ border-top:none; }
.maker-row:nth-of-type(even){ background:var(--row-alt); }
.maker-row:hover{ background:var(--row-hover); }
.maker-row a{ display:flex; align-items:center; width:100%; gap:8px; color:var(--text); }
.maker-row a:hover{ text-decoration:none; }
.maker-row .name{ flex:1 1 auto; font-weight:600; font-size:14px; }
.maker-row .cnt{ color:var(--sub); font-size:12px; }

/* ---------- かな索引・主要ナビ ---------- */
.nav-block{ margin:26px 0 8px; }
.nav-links{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;
}
.nav-links a{
  flex:1 1 auto; text-align:center; min-width:120px;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:10px 8px; font-size:13px; font-weight:700;
}
.nav-links a:hover{ background:var(--accent-bg); text-decoration:none; }
.kana-title{
  background:var(--bar); color:#fff; text-align:center;
  font-size:13px; font-weight:700; padding:8px; border-radius:8px 8px 0 0;
}
.kana-grid, .year-grid{
  display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-top:none;
  border-radius:0 0 8px 8px; overflow:hidden;
}
.kana-grid{ grid-template-columns:repeat(5,1fr); }
.year-grid{ grid-template-columns:repeat(4,1fr); }
.kana-grid a, .year-grid a{ background:#fff; text-align:center; padding:11px 2px; font-size:14px; font-weight:600; }
.kana-grid a:hover, .year-grid a:hover{ background:var(--accent-bg); text-decoration:none; }
.year-grid a{ font-size:13px; }
.kana-grid a.wide{ grid-column:span 2; }
.nav-block .kana-title + .year-grid,
.nav-block .kana-title + .kana-grid{ margin-bottom:4px; }

/* かな見出し（索引内の頭文字グループ） */
.kana-head{ background:var(--bar2); color:#fff; font-size:13px; font-weight:700; padding:6px 12px; }

/* ---------- 検索フォーム ---------- */
.search-box{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:16px; margin:16px 0;
}
.search-form{ display:flex; gap:8px; }
.search-form input[type=text]{
  flex:1 1 auto; font-size:16px; padding:10px 12px;
  border:1px solid var(--input-border,#c7cfdf); border-radius:8px; background:#fff;
}
.search-form button{
  flex:0 0 auto; font-size:14px; font-weight:700; padding:10px 16px;
  background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer;
}
.search-form button:hover{ background:var(--accent-dark); }
.search-hint{ font-size:12px; color:var(--sub); margin:8px 0 0; }
.quick-links{ margin-top:10px; font-size:13px; }
.quick-links a{ margin-right:12px; font-weight:600; }

/* ページ送り */
.pager{ display:flex; gap:8px; margin:14px 0; }
.pager a, .pager span{
  flex:1 1 0; text-align:center; padding:9px; font-size:13px; font-weight:600;
  border:1px solid var(--line); border-radius:8px; background:#fff;
}
.pager span{ color:#aab; background:#f4f6fb; }
.pager a:hover{ background:var(--accent-bg); text-decoration:none; }

.empty{ padding:18px 12px; color:var(--sub); font-size:13px; }

/* ---------- トップページ（index） ---------- */
.home-hero{ text-align:center; padding:18px 4px 6px; }
.home-logo{ max-width:min(420px,86%); height:auto; }
.home-h1{ margin:12px 0 0; font-size:18px; line-height:1.5; font-weight:700; }
.home-lead{ margin:7px auto 0; font-size:13px; color:var(--sub); max-width:640px; }
.more-link{ text-align:center; margin:10px 0 6px; }
.more-link a{
  display:inline-block; font-size:13px; font-weight:700;
  padding:9px 20px; border:1px solid var(--line); border-radius:999px; background:#fff;
}
.more-link a:hover{ background:var(--accent-bg); text-decoration:none; }

/* ---------- フッター ---------- */
.foot{ margin-top:30px; }
.foot .foot-top{ text-align:center; padding:12px; background:#eef1f6; border-radius:8px; font-size:13px; font-weight:600; }
.foot .foot-c{ text-align:center; padding:11px; margin-top:8px; background:var(--bar); color:#fff; font-size:12px; border-radius:8px; }

/* ---------- レスポンシブ ---------- */
@media (max-width:560px){
  body{ font-size:14px; }
  .page-head h1{ font-size:18px; }
  .rank-nav .rn-grid, .kana-grid{ grid-template-columns:repeat(5,1fr); }
  .reach-chip{ margin-left:0; }
  .rank-head{ row-gap:4px; }
}
@media (max-width:380px){
  .rank-nav .rn-grid{ grid-template-columns:repeat(4,1fr); }
  .nav-links a{ min-width:100%; }
}