/* support-cases.css — 2026-10-30 構成整理（D-225）でこのページに足した部品の見た目。共通の custom.css の後に読む（content.json の page_meta.support-cases.css） */
/* 色・書体は custom.css の #hm-support-cases の変数（--night --cyan --teal --amber --line --muted）をそのまま使う。新しい色は足さない */

/* 固定ヘッダーの分の余白は style.css の html{scroll-padding-top:112px／狭い画面 90px} に任せる（ここで足すと二重になる） */

/* ヒーロー：業務改善・AI の事例への近道 */
#hm-support-cases .cs-ai-jump{margin-top:26px;padding:16px 18px;border:1px solid #35515a;background:#0c222bc5}
#hm-support-cases .cs-ai-jump-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
#hm-support-cases .cs-ai-jump-head small{font:700 9px Arial,sans-serif;letter-spacing:.14em;color:var(--cyan)}
#hm-support-cases .cs-ai-jump-head strong{font-size:14px;color:#fff}
#hm-support-cases .cs-ai-jump-note{margin-top:4px!important;font-size:11px;color:#a9bfc6;line-height:1.8!important}
#hm-support-cases .cs-ai-jump ul{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
#hm-support-cases .cs-ai-jump a{position:relative;display:block;height:100%;padding:12px 34px 12px 14px;border:1px solid #304a53;background:#102833;color:#fff;transition:border-color .18s,transform .18s}
#hm-support-cases .cs-ai-jump a:hover{border-color:var(--cyan);transform:translateY(-2px)}
#hm-support-cases .cs-ai-jump a small{display:block;font:700 8px Arial,sans-serif;letter-spacing:.08em;color:#8fdcd2}
#hm-support-cases .cs-ai-jump a strong{display:block;margin-top:4px;font-size:13px;line-height:1.55}
#hm-support-cases .cs-ai-jump a span{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--cyan);font-weight:700}
@media(max-width:640px){#hm-support-cases .cs-ai-jump ul{grid-template-columns:1fr}}

/* 事例の「課題／実施／変化／対象・出典」 */
#hm-support-cases .cs-case-flow,#hm-support-cases .cs-case-flow dd{margin:0}
#hm-support-cases .cs-case-flow{display:grid;gap:0;margin-top:4px}
#hm-support-cases .cs-case-flow>div{display:grid;grid-template-columns:4.2em 1fr;gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
#hm-support-cases .cs-case-flow>div:last-child{border-bottom:1px solid var(--line)}
#hm-support-cases .cs-case-flow dt,#hm-support-cases .cs-case-step{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--teal)}
#hm-support-cases .cs-case-flow dd{font-size:11px;line-height:1.9;color:var(--muted)}
#hm-support-cases .cs-case-step{display:block;margin-bottom:4px}
#hm-support-cases .cs-case-source .cs-case-step{margin-bottom:3px}

/* 業務改善・AI の事例（CASE 14・15）：飛んできたときに分かるように */
#hm-support-cases .cs-case:target{outline:2px solid var(--cyan);outline-offset:3px}
#hm-support-cases .cs-case-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:15px!important;line-height:1.6!important}
#hm-support-cases .cs-case-links a{font-size:11px;font-weight:700;color:var(--teal);border-bottom:1px solid #8ba49d;padding-bottom:2px}
#hm-support-cases .cs-case-links a:hover{color:var(--ink);border-color:var(--ink)}

/* 事例の後の相談の帯 */
#hm-support-cases .cs-case-cta{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-top:22px;padding:26px 28px;background:var(--night);color:#fff;border-left:3px solid var(--cyan)}
#hm-support-cases .cs-case-cta small{font:700 9px Arial,sans-serif;letter-spacing:.14em;color:#8fdcd2}
#hm-support-cases .cs-case-cta strong{display:block;margin-top:6px;font-size:22px;line-height:1.6}
#hm-support-cases .cs-case-cta p{margin-top:6px!important;font-size:11px;color:#abc1c6}
@media(max-width:960px){#hm-support-cases .cs-case-cta{grid-template-columns:1fr}}
@media(max-width:640px){#hm-support-cases .cs-case-cta{padding:22px 20px}#hm-support-cases .cs-case-cta .cs-btn{width:100%}}

@media(prefers-reduced-motion:reduce){#hm-support-cases .cs-ai-jump a,#hm-support-cases .cs-ai-jump a:hover{transition:none;transform:none}}

/* 761〜1000px で見出しの列が右の段落に押されて 1 行 2〜3 字に折れるので、ここから 1 列に（D-225 の確認で発見） */
@media(max-width:1000px){#hm-support-cases .cs-head{display:block}#hm-support-cases .cs-head>p{margin-top:19px}}