/* =========================================================================
   導入事例（/cases と /cases/…）だけで使う部品。2026-10-13 の作り直しで足した
   一覧（cases.html）は事例のカード、個別のページ（cases/*.html）は本文の行と次の行動
   料金・セキュリティと同じく、箱と影は使わず、太い罫線・縦の線・等幅の番号で区切る
   頭の文字は cz-（ほかの CSS と動画の部品の名前と重ねない）
   ========================================================================= */

/* ---------- 一覧: 事例のカード（カード全体がリンク） ---------- */
.cz-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--part)}
.cz-card{display:flex;flex-direction:column;border-top:2px solid var(--n900);padding-top:var(--s-16);transition:color .15s ease}
.cz-card .no{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;color:var(--n600)}
.cz-card .meta{margin-top:var(--s-8);font-size:14px;line-height:1.7;color:var(--n600)}
.cz-card h2{margin-top:var(--s-8);font-family:var(--f-ja);font-weight:600;font-size:clamp(20px,2.2vw,23px);line-height:1.5;color:var(--n900);letter-spacing:.01em;transition:color .15s ease}
.cz-card:hover h2{color:var(--p500)}
.cz-card .sum{margin-top:var(--s-12);font-size:15px;line-height:1.85;color:var(--n800)}
.cz-card .fact{margin-top:var(--s-16);padding-top:var(--s-16);border-top:1px solid var(--n200);font-size:15px;font-weight:600;line-height:1.85;color:var(--n900)}
.cz-card .fact .v{font-family:var(--f-en);font-size:22px}
.cz-card .fact small{margin-left:var(--s-8);font-size:12px;font-weight:400;color:var(--n600)}
.cz-card .arrow-link{margin-top:auto;padding-top:var(--s-24)}

/* ---------- 個別のページ: 頭の業種・部門 ---------- */
.cz-meta{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-24);margin-bottom:var(--s-16);font-family:var(--f-mono);font-size:12.5px;line-height:1.7;letter-spacing:.04em;color:var(--n600)}

/* ---------- 個別のページ: 本文の行（左に項目、縦の線、右に本文） ---------- */
.cz-rows{border-top:2px solid var(--n900)}
.cz-row{display:grid;grid-template-columns:14em minmax(0,1fr)}
.cz-row + .cz-row > *{border-top:1px solid var(--n200)}
.cz-row .k{padding:var(--s-32) var(--s-24) var(--s-32) 0;font-size:16px;font-weight:600;line-height:1.85;color:var(--p600)}
.cz-row .v{min-width:0;padding:var(--s-32) 0 var(--s-32) var(--s-32);border-left:1px solid var(--n200)}
.cz-row .v p{font-size:16px;line-height:1.85;color:var(--n800);letter-spacing:.02em}
.cz-row .v p + p{margin-top:var(--s-16)}
.cz-row .v h3{font-family:var(--f-ja);font-weight:600;font-size:17px;line-height:1.5;color:var(--n900)}
.cz-row .v h3 + p{margin-top:var(--s-8)}
.cz-row .v p + h3{margin-top:var(--s-24)}

/* 数字（3つ並び） */
.cz-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-16);margin-bottom:var(--s-16);padding-bottom:var(--s-16);border-bottom:1px dashed var(--n200)}
.cz-nums .n{font-family:var(--f-en);font-weight:600;font-size:34px;line-height:1.2;color:var(--n900)}
.cz-nums .n small{margin-left:2px;font-family:var(--f-ja);font-size:15px;font-weight:500;color:var(--n600)}
.cz-nums .l{margin-top:var(--s-4);font-size:13px;line-height:1.7;color:var(--n600)}
.cz-row .v .cz-when{margin-top:var(--s-12);font-size:12.5px;line-height:1.7;color:var(--n600)}

/* 実際の質問の例（等幅の番号＋質問） */
.cz-qs{list-style:none;counter-reset:q}
.cz-qs li{counter-increment:q;display:grid;grid-template-columns:3em minmax(0,1fr);padding:var(--s-12) 0;font-size:16px;line-height:1.85;color:var(--n900)}
.cz-qs li + li{border-top:1px dashed var(--n200)}
.cz-qs li:first-child{padding-top:0}
.cz-qs li:last-child{padding-bottom:0}
.cz-qs li::before{content:'Q' counter(q);font-family:var(--f-mono);font-size:12.5px;line-height:2.3;letter-spacing:.06em;color:var(--n600)}

/* ---------- 個別のページ: 次の行動（近い活用シーンと、ほかの事例） ---------- */
.cz-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--part)}
.cz-next > a{display:flex;flex-direction:column;border-top:2px solid var(--n900);padding-top:var(--s-16)}
.cz-next .lab{font-size:13px;font-weight:600;color:var(--n600);letter-spacing:.04em}
.cz-next h3{margin-top:var(--s-8);font-family:var(--f-ja);font-weight:600;font-size:19px;line-height:1.5;color:var(--n900);transition:color .15s ease}
.cz-next > a:hover h3{color:var(--p500)}
.cz-next p{margin-top:var(--s-12);font-size:15px;line-height:1.85;color:var(--n800)}
.cz-next .arrow-link{margin-top:auto;padding-top:var(--s-24)}

@media (max-width:960px){
  .cz-row{grid-template-columns:10em minmax(0,1fr)}
}
@media (max-width:760px){
  .cz-cards,.cz-next{grid-template-columns:minmax(0,1fr);gap:var(--part)}
  .cz-row{grid-template-columns:minmax(0,1fr)}
  .cz-row .k{padding:var(--s-24) 0 var(--s-4)}
  .cz-row .v{padding:0 0 var(--s-24);border-left:0}
  .cz-row + .cz-row > .v{border-top:0}
  .cz-nums{gap:var(--s-8)}
  .cz-nums .n{font-size:23px}
  .cz-nums .n small{font-size:13px}
  .cz-nums .l{font-size:12px}
  .cz-qs li{grid-template-columns:2.6em minmax(0,1fr);font-size:15px}
}