/* ===== 診断一覧 =====
   2026-08-23 デザインハンドオフ shindan.dc.html に準拠。
   数値はすべてハンドオフの確定値。スタイルはここにだけ書く
   (CLAUDE.md: CSSはCSSファイルにだけ書く。HTMLにもタグにも書かない)。 */

.sec{padding:0 var(--pad)}
.sec > .inner{max-width:var(--wrap);margin:0 auto}

.kicker{display:flex;align-items:baseline;gap:14px}
.kicker .label{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--primary)}
.kicker .rule{flex:1;height:1px;background:var(--rule-mid)}
.kicker .note{font-family:Archivo,sans-serif;font-size:11px;
  letter-spacing:.12em;color:var(--ink-dim)}

/* ---- ヒーロー(右にプライバシー注記。1画面目に必ず出す) ---- */
.dxhero{padding-top:60px}
.dxhero .kicker{margin-bottom:24px}
.dxrow{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:end}
.dxhero h1{margin:0;font-size:64px;line-height:1.14;font-weight:900;letter-spacing:-.02em}
.dxhero .lede{margin:22px 0 0;font-size:16px;line-height:1.95;
  color:var(--ink-lead);max-width:30em}
.privacy{border:1px solid var(--rule);padding:20px 22px}
.privacy .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.privacy p{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-body)}
.dxhero .hr{margin-top:30px;height:1px;background:var(--rule)}

/* ---- 診断リスト(行全体がリンク) ---- */
.dxlist{padding-top:44px;padding-bottom:64px}
.dlist{border-top:1px solid var(--rule)}
.dlist a{display:grid;grid-template-columns:96px 1fr 300px;gap:32px;
  align-items:start;padding:34px 0;border-bottom:1px solid var(--rule-mid);
  text-decoration:none;color:var(--ink)}
.dlist a:last-child{border-bottom-color:var(--rule)}
.dlist a:hover{background:var(--surface);text-decoration:none}
.dlist .n{font-family:Archivo,sans-serif;font-size:34px;font-weight:300;
  line-height:.9;color:var(--primary);letter-spacing:-.03em}
.dlist .t{display:block;font-size:30px;font-weight:700;
  letter-spacing:-.01em;margin-bottom:12px}
.dlist .d{display:block;font-size:15.5px;line-height:2;
  color:var(--ink-body);max-width:34em}
.dlist .tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.dlist .tags span{font-size:11.5px;padding:5px 10px;
  border:1px solid var(--rule-mid);color:var(--ink-card)}

/* ---- 下部(仕組みの案内 + 種明かし) ---- */
.dxtail{padding-bottom:96px}
.dxtail .inner{display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:start}
.dxtail h2{margin:0;font-size:26px;font-weight:700;letter-spacing:-.01em}
.dxtail .kicker{margin-bottom:18px}
.dxtail p{margin:0;font-size:16px;line-height:2.05;color:var(--ink-body)}
.reveal{border:1px solid var(--rule);padding:26px 24px}
.reveal .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.reveal nav{display:flex;flex-direction:column}
.reveal a{padding:12px 0;font-size:15px;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--rule-soft)}
.reveal a:first-child{border-top:0;padding-top:0}
.reveal a:hover{color:var(--primary);text-decoration:none}

/* ---- 狭い画面 ---- */
@media (max-width:1000px){
  .dxrow{grid-template-columns:1fr;gap:28px;align-items:start}
  .dxtail .inner{grid-template-columns:1fr;gap:36px}
}
@media (max-width:820px){
  .dxhero{padding-top:24px}
  .dxhero h1{font-size:34px;line-height:1.2}
  .dxhero .lede{font-size:14.5px;margin-top:14px}
  /* 3カラムを1カラムに。連番は題名の横へ */
  .dlist a{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .dlist .n{font-size:22px;line-height:1}
  .dlist .t{font-size:21px;margin-bottom:8px}
  .dlist .d{font-size:15px;line-height:1.9}
  .dlist .tags{padding-top:0}
  .dxlist{padding-bottom:40px}
  .dxtail{padding-bottom:56px}
  .dxtail h2{font-size:21px}
}