:root{
  /* ======================================================= */
  /* ▼▼▼ 色を変えたいときは、この #xxxxxx の部分を変更 ▼▼▼   */
  /*  ・#のあとの6桁が色コード（例 #1a365d）。              */
  /*  ・新しい色は「カラーピッカー」で検索すると簡単に作れます */
  --emilai-blue:#1a365d;        /* メインの濃紺：見出し・ボタン・モデルバッジ */
  --emilai-blue-light:#2c5282;  /* ボタンにマウスを乗せた時の色 */
  --emilai-blue-dark:#0f2447;
  --accent:#3182ce;             /* アクセントの青：小見出し・枠線・「YES」 */
  --accent-subtle:rgba(49,130,206,.1); /* キャッチ文の薄い背景 */
  --bg-base:#f8fafc;            /* ページ全体の背景 */
  --bg-surface:#ffffff;         /* カード（白）の背景 */
  --bg-muted:#f1f5f9;           /* 補足ボックスの薄いグレー背景 */
  /* ▲▲▲ 色の編集ここまで ▲▲▲ */
  /* ======================================================= */
  --text-primary:#0f172a; --text-secondary:#475569; --text-muted:#64748b; --text-faint:#94a3b8;
  --border:rgba(0,0,0,.08); --border-subtle:rgba(0,0,0,.05); --border-strong:rgba(0,0,0,.12);
  --success:#22c55e; --warning:#f59e0b; --error:#ef4444; --info:#3b82f6;
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow-card:0 0 0 .5px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.04);
  --transition:200ms cubic-bezier(.25,1,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter','Hiragino Sans','Meiryo',sans-serif;
  background:var(--bg-base); color:var(--text-primary);
  -webkit-font-smoothing:antialiased; line-height:1.6;
  padding:24px 16px 64px;
}
.wrap{max-width:920px;margin:0 auto}
header.site{padding:24px 0 8px;text-align:center}
.brand{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
h1.title{font-size:28px;font-weight:600;letter-spacing:-.02em;margin-top:8px;line-height:1.3}
.subtitle{color:var(--text-muted);font-size:14px;margin-top:8px}

.progress{max-width:560px;margin:24px auto 0;display:flex;align-items:center;gap:8px}
.progress .bar{flex:1;height:4px;background:var(--bg-muted);border-radius:999px;overflow:hidden}
.progress .bar i{display:block;height:100%;background:var(--emilai-blue);width:0;transition:width var(--transition)}
.progress .lbl{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}

.panel{
  background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);padding:32px;margin:24px auto 0;max-width:680px;
}
.panel.wide{max-width:920px}
.qnum{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
.qtext{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-top:8px;line-height:1.4}
.qhint{font-size:13px;color:var(--text-muted);margin-top:12px;background:var(--bg-muted);
  border-radius:var(--radius-md);padding:10px 14px;border-left:3px solid var(--accent);line-height:1.6}
.options{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.opt{
  text-align:left;background:var(--bg-surface);border:.5px solid var(--border-strong);
  border-radius:var(--radius-lg);padding:16px 18px;cursor:pointer;transition:all var(--transition);
  display:flex;align-items:center;gap:14px;font-family:inherit;color:var(--text-primary);width:100%;
}
.opt:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle);background:#fff}
.opt .yn{flex:none;width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#fff}
.opt .yn.y{background:var(--emilai-blue)} .opt .yn.n{background:var(--text-faint)}
.opt .yn.a{background:var(--accent)} .opt .yn.b{background:var(--emilai-blue)}
.opt .ol{flex:1}
.opt .ol .l{font-size:15px;font-weight:600}
.opt .ol .s{font-size:12.5px;color:var(--text-muted);margin-top:3px}
.opt .arr{color:var(--text-faint);font-size:18px}

.backbtn{margin-top:20px;background:transparent;border:none;color:var(--text-muted);font-size:13px;
  cursor:pointer;font-family:inherit;padding:6px 0}
.backbtn:hover{color:var(--text-primary)}

.start-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:24px}
.start-cards .mc{border:.5px solid var(--border);border-radius:var(--radius-md);padding:10px 8px;text-align:center;background:var(--bg-muted)}
.start-cards .mc .nm{font-size:12px;font-weight:600;line-height:1.3}
.start-cards .mc .pr{font-size:11px;color:var(--text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
.cta{margin-top:28px;text-align:center}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--emilai-blue);color:#fff;border:none;
  padding:14px 32px;border-radius:var(--radius-md);font-weight:600;font-size:15px;cursor:pointer;
  font-family:inherit;transition:background var(--transition)}
.btn:hover{background:var(--emilai-blue-light)}
.btn.sec{background:transparent;color:var(--text-primary);border:.5px solid var(--border-strong)}
.btn.sec:hover{background:var(--bg-muted)}
.intro-note{font-size:13px;color:var(--text-secondary);margin-top:20px;text-align:center;line-height:1.7}

.result-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.badge-model{flex:none;width:64px;height:64px;border-radius:var(--radius-lg);background:var(--emilai-blue);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;text-align:center;line-height:1.1;padding:6px}
.result-head .rh-txt{flex:1;min-width:200px}
.result-tag{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--success);text-transform:uppercase}
.result-name{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.result-price{font-size:14px;color:var(--text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
.result-tagline{font-size:15px;color:var(--text-secondary);margin-top:18px;line-height:1.7;
  background:var(--accent-subtle);border-radius:var(--radius-md);padding:14px 16px}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.block{border:.5px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.block h3{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:10px}
.block.merit h3{color:#15803d}.block.demerit h3{color:#b91c1c}
.block ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.block li{font-size:13.5px;line-height:1.55;padding-left:18px;position:relative;color:var(--text-primary)}
.block.merit li::before{content:"＋";position:absolute;left:0;color:#22c55e;font-weight:700}
.block.demerit li::before{content:"−";position:absolute;left:0;color:#ef4444;font-weight:700}
.sound{margin-top:16px;border:.5px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.sound h3{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.sound p{font-size:13.5px;line-height:1.7;color:var(--text-primary)}
.genres{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.genre{background:var(--bg-muted);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--text-secondary);font-weight:500}
.spec-mini{margin-top:16px;border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.spec-mini table{width:100%;border-collapse:collapse;font-size:12.5px}
.spec-mini td{padding:9px 14px;border-bottom:.5px solid var(--border-subtle)}
.spec-mini tr:last-child td{border-bottom:none}
.spec-mini td:first-child{color:var(--text-muted);width:42%;background:var(--bg-muted);font-size:12px}
.spec-mini td:last-child{font-variant-numeric:tabular-nums}
.storage-flag{margin-top:14px;font-size:12.5px;border-radius:var(--radius-md);padding:10px 14px;line-height:1.6}
.storage-flag.warn{background:rgba(245,158,11,.1);color:#92400e;border:.5px solid rgba(245,158,11,.3)}
.storage-flag.ok{background:rgba(34,197,94,.1);color:#15803d;border:.5px solid rgba(34,197,94,.25)}
.result-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.flow{margin-top:8px}
.qbox{background:var(--bg-surface);border:.5px solid var(--border-strong);border-left:3px solid var(--emilai-blue);
  border-radius:var(--radius-md);padding:12px 16px;min-width:280px}
.qbox .qn{font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.08em}
.qbox .qq{font-size:14px;font-weight:600;margin-top:4px;line-height:1.5}
.branches{display:flex;gap:10px;margin:6px 0 14px 24px}
.branch{flex:1;border:.5px solid var(--border);border-radius:var(--radius-md);padding:10px 14px;font-size:13px;background:var(--bg-muted)}
.branch .bt{font-weight:700;font-size:11px;letter-spacing:.05em}
.branch.yes .bt{color:var(--emilai-blue)}.branch.no .bt{color:var(--text-muted)}
.branch .to{font-weight:600;margin-top:3px}
.branch .to.model{color:var(--emilai-blue)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;font-size:12px;color:var(--text-muted)}

footer.site{text-align:center;margin-top:40px;font-size:11px;color:var(--text-faint)}
.tabs{display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.tab{background:transparent;border:.5px solid var(--border-strong);border-radius:999px;padding:8px 18px;
  font-size:13px;cursor:pointer;font-family:inherit;color:var(--text-secondary);transition:all var(--transition)}
.tab.active{background:var(--emilai-blue);color:#fff;border-color:var(--emilai-blue)}
.hidden{display:none}
@media(max-width:680px){
  .sec-grid{grid-template-columns:1fr}
  .start-cards{grid-template-columns:repeat(2,1fr)}
  h1.title{font-size:22px}.panel{padding:22px}
}

/* =========================================================== */
/*  モバイルUX強化（店頭スマホ利用向け・IT管理）                */
/* =========================================================== */

/* タップ領域を最低48pxに、押下フィードバックを付与 */
.opt{min-height:48px}
.opt:active{transform:scale(.99);background:var(--bg-muted)}
.btn{min-height:48px}
.tab{min-height:44px}

/* 比較表: モバイルでは6列テーブルを「項目ごとの行＝モデル別の値」を
   縦に積んで横スクロールを撤廃する。各 <td> に data-label（項目名）が
   付与される前提（index.html 側の renderCompare が付与する）。 */
@media(max-width:680px){
  #compare-table table,
  #compare-table tbody,
  #compare-table tr,
  #compare-table td{display:block;width:auto!important}
  /* ヘッダ行（モデル名の行）はモバイルでは隠す */
  #compare-table tr:first-child{display:none}
  /* 各項目の先頭セル（項目名）を見出しバーに */
  #compare-table td:first-child{
    background:var(--emilai-blue);color:#fff;font-weight:600;border:none;
    margin-top:14px;border-radius:var(--radius-md) var(--radius-md) 0 0}
  /* 値セルに項目ラベルを表示（data-label）して、何の値か分かるように */
  #compare-table td{position:relative;padding-left:42%!important;
    border-bottom:.5px solid var(--border-subtle);min-height:38px}
  #compare-table td::before{content:attr(data-label);position:absolute;left:14px;top:9px;
    color:var(--text-muted);font-size:11px;max-width:36%}
}