@charset "utf-8";
/* AI比較ベンチマーク /ai-benchmark  2026-09-04
   ★決まり：細い枠線で囲まない。面と余白で区切る（生成AIで作ったサイトに見えるため）。
   　　　　　四角ベース。ほぼモノクロ＋水色1色。絵文字なし。 */

.ai-bench{
  --ink:#0D1B2A; --sky:#1AC2F1; --line:#e9edf1; --sub:#5b6b7a;
  --bg:#f5f7f9; --warn:#c0392b;
  color:var(--ink); line-height:1.7;
  font-feature-settings:"palt";
}
.ai-bench .wrap{max-width:1080px; margin:0 auto; padding:0 18px}

/* ---------- ヘッダー：濃紺の面 ---------- */
.ai-bench .bhd{background:var(--ink); color:#fff; padding:44px 0 38px; margin-bottom:34px}
.ai-bench .bhd .eyebrow{
  display:inline-block; background:var(--sky); color:var(--ink);
  font-size:12px; font-weight:700; letter-spacing:.08em;
  padding:4px 10px; margin:0 0 14px}
.ai-bench .bhd h1{
  font-size:clamp(26px,4.4vw,40px); font-weight:800; line-height:1.25;
  margin:0 0 16px; color:#fff}
.ai-bench .bhd .lead{font-size:15px; margin:0 0 18px; max-width:44em; color:#dfe7ee}
.ai-bench .bhd .lead b{color:#fff; font-weight:700}
.ai-bench .bhd .when{
  font-size:13px; color:#b9c7d3; margin:0;
  background:rgba(255,255,255,.07); display:inline-block; padding:8px 14px}
.ai-bench .bhd .when b{color:var(--sky); font-size:15px}

/* ---------- セクション ---------- */
.ai-bench .sec{margin:0 0 46px}
.ai-bench .sec>h2{
  font-size:clamp(19px,2.6vw,25px); font-weight:800; margin:0 0 8px;
  padding-left:12px; border-left:4px solid var(--sky); line-height:1.4}
.ai-bench .sec>h3{
  font-size:16px; font-weight:700; margin:26px 0 10px; color:var(--ink)}
.ai-bench .note{font-size:13.5px; color:var(--sub); margin:0 0 16px; max-width:52em}
.ai-bench .note b{color:var(--ink)}

/* ---------- 表：線でなく背景で区切る ---------- */
.ai-bench .tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 8px}
.ai-bench table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:14px; min-width:640px; background:#fff}
.ai-bench thead th{
  background:var(--ink); color:#fff; font-weight:600; font-size:12.5px;
  padding:10px 12px; text-align:center; white-space:nowrap; vertical-align:middle}
.ai-bench thead th:first-child{text-align:left}
.ai-bench tbody th{
  background:var(--bg); text-align:left; padding:13px 12px; font-weight:700;
  white-space:nowrap; vertical-align:middle}
.ai-bench tbody td{
  padding:13px 12px; text-align:center; vertical-align:middle;
  background:#fff; box-shadow:inset 0 -1px 0 var(--line)}
.ai-bench tbody th{box-shadow:inset 0 -1px 0 #dfe5ea}
.ai-bench tbody td b{font-size:19px; font-weight:800}
.ai-bench .of{color:var(--sub); font-size:12px; margin-left:1px}
.ai-bench .u{font-size:11.5px; color:var(--sub); margin-left:2px}
.ai-bench .mn{display:block}
.ai-bench .mv{display:block; font-size:11px; color:var(--sub); font-weight:400}
.ai-bench td.ax{background:#fbfcfd}
.ai-bench td.warn{color:var(--warn); font-weight:800}
.ai-bench tr.sub td{
  background:var(--bg); text-align:left; font-size:12.5px; color:var(--sub);
  padding:8px 12px}

/* 正答率の帯。数字の横に細く敷く */
.ai-bench .bar{
  display:block; height:4px; background:var(--line); margin:6px auto 0;
  max-width:76px}
.ai-bench .bar i{display:block; height:100%; background:var(--sky)}

/* ---------- 検証条件 ---------- */
.ai-bench .cond .kv{
  display:grid; grid-template-columns:150px 1fr; gap:0;
  background:#fff; margin:0}
.ai-bench .cond dt{
  background:var(--bg); padding:11px 14px; font-weight:700; font-size:13px;
  box-shadow:inset 0 -1px 0 #dfe5ea}
.ai-bench .cond dd{
  padding:11px 14px; margin:0; font-size:13.5px;
  box-shadow:inset 0 -1px 0 var(--line)}
.ai-bench .cond dd b{font-weight:700}

/* ---------- 問題の一覧 ---------- */
.ai-bench details.qs{background:var(--bg); margin:0 0 10px}
.ai-bench details.qs>summary{
  cursor:pointer; padding:13px 16px; font-weight:700; font-size:14.5px;
  list-style:none; display:flex; align-items:center; gap:10px}
.ai-bench details.qs>summary::-webkit-details-marker{display:none}
.ai-bench details.qs>summary::before{
  content:"▶"; font-size:10px; color:var(--sky); transition:transform .15s}
.ai-bench details.qs[open]>summary::before{transform:rotate(90deg)}
.ai-bench details.qs .cnt{
  margin-left:auto; font-size:12px; color:var(--sub); font-weight:400}
.ai-bench .q{background:#fff; padding:14px 16px; margin:0 10px 10px}
.ai-bench .qid{
  font-size:11px; color:var(--sub); margin:0 0 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ai-bench .qp{
  background:var(--bg); padding:12px 14px; margin:0 0 8px;
  font-size:13px; line-height:1.75; white-space:pre-wrap; word-break:break-word;
  font-family:inherit; overflow-x:auto}
.ai-bench .qj{font-size:12.5px; color:var(--sub); margin:0}

/* ---------- よくある質問 ---------- */
.ai-bench .faq .fq{background:var(--bg); padding:16px 18px; margin:0 0 8px}
.ai-bench .faq .q{font-weight:700; margin:0 0 6px; font-size:14.5px}
.ai-bench .faq .a{margin:0; font-size:13.5px; color:#33424f}

.ai-bench a{color:#0a7ea4; text-decoration:underline; text-underline-offset:2px}

/* ---------- スマホ ---------- */
@media(max-width:781px){
  .ai-bench .bhd{padding:30px 0 26px; margin-bottom:24px}
  .ai-bench .sec{margin-bottom:34px}
  /* ★項目名を貼り付ける。separate でないと sticky が効かない（ツールDBの教訓） */
  .ai-bench table{min-width:600px}
  .ai-bench tbody th{position:sticky; left:0; z-index:1; min-width:118px}
  .ai-bench thead th:first-child{position:sticky; left:0; z-index:2}
  .ai-bench .tw::after{
    content:"→ 横にスクロールできます"; display:block;
    font-size:11.5px; color:var(--sub); padding:6px 2px 0}
  .ai-bench .cond .kv{grid-template-columns:1fr}
  .ai-bench .cond dt{box-shadow:none; padding-bottom:4px}
  .ai-bench .cond dd{padding-top:4px}
}