/* クエストキャリア 艦隊ハブ — 紙白・Zen Maru Gothic。明朝/黒ベタ/dark/片側アクセント帯は使わない */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#264653; --primary-dk:#162A32; --primary-lt:#EAF1F2;
  --accent:#E76F51; --accent-lt:#FDEEE9;
  --text:#0D1117; --text-sec:#4b5563; --text-muted:#9aa3ad;
  --paper:#FBF8F2; --surface:#ffffff; --border:#E7E1D6;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--text);
  font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans',sans-serif;
  font-size:15px;line-height:1.9;-webkit-font-smoothing:antialiased}
h1,h2,h3,.qc-brand,.qc-stats b{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-weight:900;letter-spacing:-.01em;line-height:1.4}
a{color:inherit}

.qc-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:14px 24px;background:rgba(251,248,242,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.qc-brand{font-size:17px;text-decoration:none;color:var(--primary)}
.qc-nav{display:flex;gap:6px;flex-wrap:wrap}
.qc-nav a{font-size:12.5px;font-weight:700;text-decoration:none;color:var(--text-sec);
  border:1px solid var(--border);border-radius:999px;padding:5px 12px;background:var(--surface)}
.qc-nav a:hover{color:var(--accent);border-color:var(--accent)}

main{max-width:1240px;margin:0 auto;padding:0 24px 90px}
.qc-hero{padding:64px 0 48px;max-width:820px}
.qc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:14px}
.qc-hero h1{font-size:clamp(27px,4.6vw,46px);line-height:1.42;margin-bottom:22px}
.qc-lede{color:var(--text-sec);font-size:15.5px;max-width:700px}
.qc-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.qc-stats span{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:12px 20px;font-size:12.5px;font-weight:700;color:var(--text-sec)}
.qc-stats b{display:block;font-size:26px;color:var(--primary);line-height:1.2}

h2{font-size:clamp(20px,2.6vw,26px);margin-bottom:8px}
.qc-matrix,.qc-national,.qc-sister{margin-top:66px}
.qc-note{color:var(--text-muted);font-size:13px;margin-bottom:26px}

.qc-row{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;margin-bottom:20px}
.qc-rowhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--border)}
.qc-rowhead h3{font-size:18px;color:var(--primary)}
.qc-rowhead p{font-size:12.5px;color:var(--text-muted);flex:1;min-width:200px}
.qc-rowhead span{font-size:11.5px;font-weight:700;color:var(--accent);background:var(--accent-lt);
  border-radius:999px;padding:4px 11px}
.qc-cols{display:grid;grid-template-columns:repeat(var(--cols),minmax(160px,1fr));gap:12px;
  overflow-x:auto;padding-bottom:6px}
.qc-colh{display:block;font-size:11.5px;font-weight:700;color:var(--text-muted);
  letter-spacing:.06em;margin-bottom:8px;padding-left:2px}
.qc-cell{display:flex;flex-direction:column;gap:8px}
.qc-cell-empty{min-height:8px;border-radius:12px;background:repeating-linear-gradient(135deg,#F3EFE7 0 6px,transparent 6px 12px)}
.qc-cell a,.qc-natgroup .qc-cell a,.qc-sisterwrap a{display:block;text-decoration:none;
  background:var(--primary-lt);border:1px solid transparent;border-radius:12px;padding:11px 13px;
  transition:transform .2s ease,background .2s ease,border-color .2s ease}
.qc-cell a:hover,.qc-sisterwrap a:hover{background:var(--surface);border-color:var(--accent);transform:translateY(-2px)}
.qc-cell b,.qc-sisterwrap b{display:block;font-size:13.5px;font-weight:700;line-height:1.5;color:var(--primary-dk)}
.qc-cell i,.qc-sisterwrap i{display:block;font-style:normal;font-size:11.5px;line-height:1.65;color:var(--text-sec);margin-top:3px}
.qc-cell em,.qc-sisterwrap em{display:block;font-style:normal;font-size:10.5px;color:var(--text-muted);margin-top:5px;word-break:break-all}

.qc-natwrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.qc-natgroup{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px}
.qc-natgroup h3{font-size:14.5px;color:var(--primary);margin-bottom:12px}
.qc-sisterwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}

.qc-foot{border-top:1px solid var(--border);background:var(--surface);padding:34px 24px;text-align:center;
  font-size:12.5px;color:var(--text-sec)}
.qc-upd{color:var(--text-muted);font-size:11.5px;margin-top:6px}

@media (max-width:720px){
  main{padding:0 16px 70px}
  .qc-cols{grid-template-columns:repeat(var(--cols),minmax(152px,1fr))}
  .qc-row{padding:18px 16px}
  .qc-head{padding:12px 16px;gap:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}