/* ============================================================
   QAハブ（index.php?mode=QA）専用スタイル
   #QA_HUB スコープ限定。このページのみ読込。

   設計: ハブだけダーク、遷移先の5つのQAページはライトのまま。
   押した瞬間に階層が1つ下がったと分かるようにするための対比。
   色とフォントはサイト共通トークンに合わせている:
     --site-bg #0d0f14      (css/_common/top_header.css)
     --site-disp Bricolage Grotesque
     --lime #84cc16         (css/index/qa.css)
   ライム #84cc16 は暗背景だと沈むため、ハブ内だけ明度を上げた
   #b6f13f を使う（同系色・彩度そのまま）。
   ============================================================ */

#QA_HUB{
  --ink:#0d0f14;
  --lime-on-dark:#b6f13f;
  --line:rgba(255,255,255,.10);
  --dim:rgba(255,255,255,.56);
  --dim-2:rgba(255,255,255,.34);
  --disp:"Bricolage Grotesque","Noto Sans JP",system-ui,sans-serif;

  position:relative;
  background:var(--ink);
  color:#fff;
  font-family:"Noto Sans JP",system-ui,sans-serif;
  line-height:1.8;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#QA_HUB, #QA_HUB *{ box-sizing:border-box; }

/* 平面的な黒にならないよう、粒子を薄く重ねる */
#QA_HUB::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.35'/></svg>");
  mix-blend-mode:soft-light;
}

#QA_HUB .hub__inner{position:relative;max-width:1080px;margin:0 auto;padding:0 24px;}

#QA_HUB .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- hero ---------- */
#QA_HUB .hub__hero{position:relative;padding:70px 0 46px;}

/* 見出しの奥に置く装飾。塗りを抜いて線だけにする */
#QA_HUB .hub__ghost{
  position:absolute;right:-14px;top:34px;pointer-events:none;user-select:none;
  font-family:var(--disp);font-weight:800;font-size:clamp(104px,13.5vw,196px);
  line-height:.9;letter-spacing:-.045em;color:transparent;
  -webkit-text-stroke:1.4px rgba(182,241,63,.20);
}
#QA_HUB .hub__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;
  color:var(--lime-on-dark);text-transform:uppercase;
}
#QA_HUB .hub__eyebrow::before{content:"";width:26px;height:1.5px;background:var(--lime-on-dark);}
#QA_HUB .hub__title{
  position:relative;margin:20px 0 0;font-weight:900;color:#fff;border:none;
  font-size:clamp(34px,5.2vw,58px);line-height:1.18;letter-spacing:-.02em;
}
#QA_HUB .hub__title em{font-style:normal;color:var(--lime-on-dark);}
#QA_HUB .hub__lead{
  position:relative;max-width:34em;margin:20px 0 0;
  font-size:15px;color:var(--dim);line-height:1.95;
}
#QA_HUB .hub__meta{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin:28px 0 0;
  font-family:var(--disp);font-size:12px;letter-spacing:.09em;color:var(--dim-2);
}
#QA_HUB .hub__meta b{color:var(--lime-on-dark);font-weight:700;}
#QA_HUB .hub__meta a{color:var(--lime-on-dark);text-decoration:none;font-weight:700;}
#QA_HUB .hub__meta a:hover{text-decoration:underline;}

/* ---------- 索引 ---------- */
#QA_HUB .idx{position:relative;padding:0 0 78px;}
#QA_HUB .idx__cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:0 0 14px;border-bottom:1px solid var(--line);
}
#QA_HUB .idx__cap h2{
  margin:0;font-family:var(--disp);font-weight:700;font-size:13px;
  letter-spacing:.15em;text-transform:uppercase;color:#fff;border:none;
}
#QA_HUB .idx__cap p{margin:0;font-size:12.5px;color:var(--dim-2);}

#QA_HUB .idx__row{
  position:relative;display:grid;grid-template-columns:96px 1fr auto;
  align-items:center;gap:0 22px;
  padding:26px 20px 26px 8px;margin:0 -20px 0 -8px;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;border-radius:14px;
  transition:background .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
  animation:qaHubRise .62s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay:calc(var(--i) * 78ms + 120ms);
}
@keyframes qaHubRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* ホバーで左端に伸びる縦線 */
#QA_HUB .idx__row::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:var(--lime-on-dark);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
#QA_HUB .idx__row:hover{background:rgba(182,241,63,.055);transform:translateX(4px);}
#QA_HUB .idx__row:hover::before{transform:scaleY(1);}
#QA_HUB .idx__row:focus-visible{outline:2px solid var(--lime-on-dark);outline-offset:3px;}

#QA_HUB .idx__no{
  font-family:var(--disp);font-weight:800;font-size:34px;line-height:1;
  letter-spacing:-.03em;color:var(--lime-on-dark);
  font-variant-numeric:tabular-nums;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
#QA_HUB .idx__row:hover .idx__no{transform:translateY(-2px);}

#QA_HUB .idx__tag{
  display:inline-block;margin:0 0 8px;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:var(--lime-on-dark);background:rgba(182,241,63,.10);
  border:1px solid rgba(182,241,63,.28);
}
#QA_HUB .idx__t{display:block;font-size:20px;font-weight:700;letter-spacing:.005em;line-height:1.5;}
#QA_HUB .idx__row--sub .idx__t{font-size:17px;}
#QA_HUB .idx__d{display:block;margin:5px 0 0;font-size:13.5px;color:var(--dim);line-height:1.8;}

#QA_HUB .idx__go{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.05em;
  color:var(--dim);transition:color .22s ease;
}
#QA_HUB .idx__go svg{width:17px;height:17px;transition:transform .28s cubic-bezier(.2,.7,.3,1);}
#QA_HUB .idx__row:hover .idx__go{color:var(--lime-on-dark);}
#QA_HUB .idx__row:hover .idx__go svg{transform:translateX(6px);}

/* ---------- responsive ---------- */
@media (max-width:760px){
  #QA_HUB .hub__inner{padding:0 16px;}
  #QA_HUB .hub__hero{padding:48px 0 34px;}
  #QA_HUB .hub__ghost{top:-6px;right:-10px;-webkit-text-stroke-width:1.1px;}
  #QA_HUB .idx__cap{flex-direction:column;align-items:flex-start;gap:3px;}
  #QA_HUB .idx__row{grid-template-columns:52px 1fr;padding:20px 14px 20px 6px;margin:0 -14px 0 -6px;}
  #QA_HUB .idx__no{font-size:23px;}
  #QA_HUB .idx__t{font-size:16.5px;}
  #QA_HUB .idx__row--sub .idx__t{font-size:15.5px;}
  #QA_HUB .idx__d{font-size:12.5px;}
  #QA_HUB .idx__go{grid-column:2;margin-top:11px;}
}

@media (prefers-reduced-motion:reduce){
  #QA_HUB .idx__row,
  #QA_HUB .idx__no,
  #QA_HUB .idx__go svg{animation:none !important;transition:none !important;}
}