/* クォッカタウン 機種情報ページ — 機種解析サイト風デザイン */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  color: #333;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
}
a { color: #333; }
img { max-width: 100%; }

/* ---- サイトヘッダー ---- */
.top-banner {
  background: linear-gradient(90deg, #1a0b2e 0%, #4a1259 40%, #c2185b 100%);
  color: #fff; text-align: center; padding: 10px 12px; font-weight: 800; font-size: 15px;
}
.top-banner a { color: #ffe45c; text-decoration: none; }
.top-banner .badge {
  background: #ffe45c; color: #4a1259; border-radius: 4px; padding: 1px 8px; margin-left: 10px;
  font-size: 12px; white-space: nowrap;
}
.site-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid #e5e5e5; background: #fff;
}
.site-header .menu-dots { color: #9aa0a6; font-size: 20px; letter-spacing: 2px; }
.site-logo { font-size: 22px; font-weight: 900; text-decoration: none; color: #111; }
.site-logo .quo { color: #e8447a; }
.site-logo small { font-size: 11px; font-weight: 700; color: #888; margin-left: 6px; }
.header-icons { margin-left: auto; color: #9aa0a6; font-size: 18px; display: flex; gap: 14px; }

/* ---- 3タブナビ ---- */
.tri-nav { display: flex; border-bottom: 1px solid #e5e5e5; }
.tri-nav a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 6px; text-decoration: none; border-top: 4px solid transparent; font-weight: 800;
  font-size: 16px;
}
.tri-nav .arrow {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; flex: none;
}
.tri-nav small { font-weight: 600; font-size: 11px; }
.tri-nav .t-red    { border-top-color: #f0374a; }
.tri-nav .t-red    .arrow { background: #f0374a; }
.tri-nav .t-red    small { color: #f0374a; }
.tri-nav .t-teal   { border-top-color: #29b8b2; background: #ebfafa; }
.tri-nav .t-teal   .arrow { background: #29b8b2; }
.tri-nav .t-teal   small { color: #29b8b2; }
.tri-nav .t-orange { border-top-color: #f5a800; }
.tri-nav .t-orange .arrow { background: #f5a800; }
.tri-nav .t-orange small { color: #f5a800; }

/* ---- パンくず・ページタイトル ---- */
.breadcrumb {
  background: #e9f8fb; font-size: 12px; color: #444; padding: 8px 18px;
}
.breadcrumb a { color: #444; }
.page-title {
  font-size: 24px; font-weight: 800; margin: 0; padding: 18px;
  border-bottom: 1px solid #e5e5e5;
}

/* ---- 全体レイアウト ---- */
.layout {
  display: flex; gap: 26px; align-items: flex-start;
  max-width: 1160px; margin: 0 auto; padding: 24px 8px 60px;
}
.sidebar { width: 240px; flex: none; position: sticky; top: 10px; }
.main { flex: 1; min-width: 0; }

/* ---- サイドバー(インデックス) ---- */
.index-title {
  border: 1px solid #ddd; padding: 9px 12px; font-weight: 700; font-size: 13px; text-align: center;
}
.index-menu { list-style: none; margin: 0; padding: 0; }
.index-menu li a {
  display: flex; align-items: center; gap: 8px;
  background: #111; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700;
  padding: 11px 12px; border-bottom: 1px solid #333;
}
.index-menu li a::before {
  content: "○"; color: #f0374a; font-size: 9px; font-weight: 900;
}
.index-menu li a::after { content: "▾"; margin-left: auto; color: #f0374a; }
.index-menu li.jump a::after { content: "↘"; }
.index-menu li a:hover { background: #2a2a2a; }
.index-spacer { height: 14px; }

/* ---- メインセクション ---- */
.section {
  border-top: 4px solid #29b8b2; margin-bottom: 44px; background: #fff;
}
.section-head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 4px 10px; border-bottom: 1px solid #ddd; margin-bottom: 18px;
}
.section-head .icon {
  width: 38px; height: 38px; flex: none; border: 2.5px solid #29b8b2; border-radius: 6px;
  color: #29b8b2; display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.section-head h2 { font-size: 21px; margin: 0; font-weight: 800; }
.section-body { padding: 0 4px; }
.section h3 {
  font-size: 16px; font-weight: 800; border-left: 5px solid #29b8b2;
  padding: 3px 10px; margin: 28px 0 12px; background: #f4fbfb;
}
.updated { color: #666; font-size: 12px; text-align: right; margin: 4px 0; }

/* ---- 機種ヘッダー ---- */
.machine-head { border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 12px; display: flex; gap: 14px; align-items: flex-start; }
.machine-head .coin-icon { font-size: 34px; line-height: 1; margin-top: 4px; }
.machine-head .ruby-name { font-size: 12px; color: #555; margin: 0; }
.machine-head h1 { font-size: 26px; margin: 0; font-weight: 800; line-height: 1.35; }
.machine-head .sub { font-size: 14px; font-weight: 700; color: #333; }
.anchor-links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 12px 0 4px; font-size: 13.5px; }
.anchor-links a { font-weight: 700; }
.anchor-links a::after { content: " ↘"; color: #e8447a; font-weight: 900; }

.machine-visual { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin: 18px 0; }
.machine-visual .photo { width: 320px; max-width: 100%; border: 1px solid #eee; border-radius: 6px; }
.machine-visual .photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.machine-visual .side { flex: 1; min-width: 260px; }
.thumb-col { display: flex; flex-direction: column; gap: 10px; width: 92px; }
.thumb-col img { width: 100%; height: auto; border: 1px solid #eee; border-radius: 4px; }
.tags { display: flex; gap: 4px; margin-bottom: 16px; }
.tags span {
  background: #45b035; color: #fff; font-weight: 800; padding: 10px 14px; font-size: 15px;
}
.play-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, #f4574d, #ef3b30); color: #fff !important;
  font-size: 17px; font-weight: 800; text-decoration: none; border-radius: 4px;
  padding: 13px 10px; margin: 10px 0; box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.play-cta:hover { filter: brightness(1.06); }
.rating { font-size: 15px; font-weight: 700; margin: 14px 0 4px; }
.rating .num { font-size: 30px; font-weight: 800; margin-right: 8px; }
.rating .stars { color: #f5a800; font-size: 24px; letter-spacing: 2px; }
.rating .stars .off { color: #ddd; }

/* ---- 基本情報テーブル ---- */
table.basic { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
table.basic th, table.basic td { border: 1px solid #aaa; padding: 12px 14px; text-align: left; }
table.basic th { background: #ccc; width: 170px; font-weight: 700; }
.note-line { text-align: right; font-size: 12.5px; color: #444; }

/* ---- 確率表(黒×ピンクの画像風) ---- */
.prob-wrap { max-width: 620px; margin: 10px auto; }
table.prob {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 3px solid #111; font-variant-numeric: tabular-nums;
}
table.prob caption {
  background: #111; color: #fff; font-size: 26px; font-weight: 900; padding: 8px;
  border: 3px solid #111; border-bottom: none; letter-spacing: 6px;
}
table.prob th {
  background: #3a3a3a; color: #fff; font-size: 15px; font-weight: 800; padding: 7px 6px;
  border: 2px solid #111;
}
table.prob th.s-head { background: #ea5d8f; }
table.prob td {
  border: 2px solid #111; text-align: center; padding: 6px; font-weight: 800; font-size: 22px;
  background: #fff;
}
table.prob td.setting { background: #ea5d8f; color: #fff; font-size: 26px; width: 62px; }
table.prob td small { font-size: 12px; font-weight: 700; }
table.prob .frac { font-size: 13px; vertical-align: super; margin-right: 2px; }
.prob-foot {
  display: flex; border: 3px solid #111; border-top: none; font-weight: 800;
}
.prob-foot .k { background: #111; color: #fff; padding: 7px 12px; font-size: 15px; flex: none; }
.prob-foot .v { padding: 7px 12px; font-size: 15px; flex: 1; text-align: center; }
.prob-note { text-align: right; font-weight: 800; font-size: 13px; margin-top: 4px; }

/* ---- 汎用データ表(白×グレー) ---- */
table.data { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
table.data th, table.data td { border: 1px solid #bbb; padding: 7px 9px; text-align: center; }
table.data th { background: #3a3a3a; color: #fff; font-weight: 700; }
table.data th.sub { background: #666; }
table.data td.setting { background: #ea5d8f; color: #fff; font-weight: 800; width: 56px; }
table.data td.strong { font-weight: 800; color: #d0202f; }
table.data tr:nth-child(even) td:not(.setting) { background: #f7f7f7; }
table.data td.left { text-align: left; }

/* ---- ゲームフロー ---- */
.flow { max-width: 640px; margin: 0 auto; padding: 10px 0 20px; }
.flow-box { border: 4px solid; border-radius: 8px; background: #fff; margin: 0 auto; }
.flow-box .fb-title {
  color: #fff; font-size: 22px; font-weight: 900; text-align: center; padding: 8px;
}
.flow-box .fb-body { padding: 12px 16px; font-size: 14px; }
.fb-blue   { border-color: #1d6fd2; } .fb-blue .fb-title { background: #1d6fd2; }
.fb-red    { border-color: #e0312f; } .fb-red .fb-title { background: #e0312f; }
.fb-purple { border-color: #7a2ea8; } .fb-purple .fb-title { background: #7a2ea8; }
.fb-green  { border-color: #1d8a3c; } .fb-green .fb-title { background: #1d8a3c; }
.flow-arrow { text-align: center; font-size: 30px; color: #ec4899; font-weight: 900; line-height: 1.1; padding: 4px 0; }
.flow-caption {
  background: #fdeef5; border: 2px solid #ec4899; border-radius: 20px; color: #d61f69;
  display: inline-block; font-weight: 800; padding: 2px 16px; font-size: 13px; margin: 4px 0;
}
.flow-note { display: flex; justify-content: center; }
.fb-stats { display: flex; gap: 0; border: 2px solid #111; margin: 8px 0; }
.fb-stats .k { background: #111; color: #fff; font-weight: 800; padding: 5px 10px; flex: none; display:flex; align-items:center; }
.fb-stats .v { padding: 5px 10px; font-weight: 800; flex: 1; text-align: center; font-size: 17px; }
.fb-stats .v small { font-size: 12px; }
.fb-cols { display: flex; gap: 10px; }
.fb-cols > div { flex: 1; }

/* ---- リール窓(出目) ---- */
.deme-grid { display: flex; flex-wrap: wrap; gap: 18px 22px; margin: 12px 0; }
.deme { width: 168px; }
.window {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: #222; border: 3px solid #222; border-radius: 6px; overflow: hidden;
}
.window span {
  background: #fff; aspect-ratio: 1.15; display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.window span.any { color: #bbb; font-size: 16px; font-weight: 700; }
.window span.hit { background: #ffe1ec; }
.deme .name { font-weight: 800; font-size: 13.5px; margin-top: 5px; }
.deme .desc { font-size: 11.5px; color: #555; line-height: 1.5; }

/* ---- リール配列 ---- */
.reel-strip-wrap { display: flex; gap: 18px; justify-content: center; margin: 12px 0; }
.reel-strip { border-collapse: collapse; font-size: 18px; }
.reel-strip th { font-size: 12px; background: #3a3a3a; color: #fff; padding: 4px 10px; border: 1px solid #222; }
.reel-strip td { border: 1px solid #999; padding: 1px 10px; text-align: center; background: #fff; }
.reel-strip td.no { font-size: 10.5px; color: #888; background: #f2f2f2; padding: 1px 6px; }

/* ---- 注意書き・コラム ---- */
.attention {
  border: 2px solid #e8447a; border-radius: 8px; background: #fff5f9; padding: 12px 16px; margin: 14px 0;
  font-size: 13.5px;
}
.attention .t { color: #e8447a; font-weight: 800; }
ul.tips { padding-left: 20px; margin: 8px 0; }
ul.tips li { margin: 4px 0; }
.point-badge {
  display: inline-block; background: #e0312f; color: #fff; font-weight: 900; border-radius: 4px;
  padding: 0 10px; margin-right: 8px; font-size: 13px;
}

/* ---- ページ上部へ ---- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; background: #eee;
  border: 1px solid #ddd; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: #e0312f; font-size: 26px; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* ---- フッター ---- */
.site-footer {
  background: #111; color: #bbb; font-size: 12px; text-align: center; padding: 26px 16px 34px;
  line-height: 2;
}
.site-footer a { color: #ddd; }

@media (max-width: 860px) {
  .sidebar { display: none; }
  .tri-nav a { font-size: 13px; flex-direction: column; gap: 2px; padding: 10px 2px; }
  .machine-head h1 { font-size: 21px; }
  table.prob td { font-size: 17px; }
  table.prob caption { font-size: 20px; }
  .fb-cols { flex-direction: column; }
}