/* ============================================================
   case_v2.css — 導入事例 v2（成果先行・要約・Before/After・選定理由・声・タイムライン）
   case_v1.css を継承しつつ、新構造の要素を追加。--c は業種色。
   2026/09/05
============================================================ */
@import url('/css/case_v1.css');

/* ---- 一覧 ---- */
.csl-filter{max-width:1100px; margin:0 auto 26px; padding:0 5%;}
.csl-frow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px;}
.csl-flb{font-size:12px; font-weight:800; color:#6b7280; margin-right:6px; letter-spacing:.04em;}
.csl-frow .pill{--c:#0a0e27; font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:99px; border:1.5px solid #e5e7eb; background:#fff; color:#374151; text-decoration:none;}
.csl-frow .pill small{font-size:10px; color:#9ca3af; margin-left:4px; font-family:'Lato',sans-serif;}
.csl-frow .pill.on{background:var(--c); border-color:var(--c); color:#fff;}
.csl-frow .pill.on small{color:rgba(255,255,255,.8);}
.csl-card{--c:#4f46e5; position:relative;}
.csl-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--c); border-radius:14px 0 0 14px; z-index:1;}
.csl-card .csl-cat{background:var(--c) !important;}
.csl-size{font-size:12px; color:#6b7280; font-weight:700; margin-left:8px;}
.csl-res3{list-style:none; margin:10px 0 8px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.csl-res3 li{background:#f6f8fb; border-radius:8px; padding:8px 8px; text-align:center;}
.csl-res3 li b{display:block; font-family:'Lato',sans-serif; font-size:17px; font-weight:900; color:var(--c); line-height:1.1;}
.csl-res3 li span{display:block; font-size:10px; color:#6b7280; line-height:1.4; margin-top:3px;}
.csl-tags{display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 10px;}
.csl-tags span{font-size:10.5px; color:#4b5563; background:#eef1f6; border-radius:4px; padding:2px 7px;}
.csl-cta{background:#0a0e27; color:#fff; padding:56px 5%; text-align:center; margin-top:40px;}
.csl-cta h3{font-size:22px; font-weight:800; margin:0 0 10px;}
.csl-cta p{font-size:14px; color:rgba(255,255,255,.85); margin:0 0 22px; line-height:1.9;}
.csl-cta .csd-btn{display:inline-block; background:#ee3833; color:#fff; font-weight:800; font-size:15px; padding:14px 34px; border-radius:10px; text-decoration:none;}

/* ---- 詳細：ヘッダ ---- */
.csd-wrap{--c:#4f46e5; max-width:900px;}
.csd-cat{background:var(--c) !important;}
.csd-size{font-size:12.5px; font-weight:800; color:#374151; background:#eef1f6; padding:5px 12px; border-radius:20px;}
.csd-tag{font-size:11.5px; font-weight:700; color:#4b5563; border:1px solid #e5e7eb; padding:4px 10px; border-radius:20px; text-decoration:none;}
.csd-tag:hover{border-color:var(--c); color:var(--c);}
.csd-company{color:var(--c);}
.csd-cnote{font-size:12px; color:#6b7280; font-weight:500; margin-left:10px;}

/* 要約ボックス（3秒で「自分に関係ある」と分かる） */
.csd-summary{background:#f8fafc; border:1.5px solid #e5e7eb; border-left:5px solid var(--c); border-radius:0 12px 12px 0; padding:18px 22px; margin:0 0 24px;}
.csd-summary .lb{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--c); padding:3px 10px; border-radius:4px; margin-bottom:8px;}
.csd-summary p{margin:0; font-size:15.5px; line-height:1.95; color:#1f2937;}

/* 成果3点（社内稟議で説明できる数字を最上部に） */
.csd-results{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 28px;}
.csd-results .r{background:#fff; border:1.5px solid #e5e7eb; border-top:5px solid var(--c); border-radius:12px; padding:18px 16px 14px; box-shadow:0 8px 24px rgba(10,14,39,.06);}
.csd-results .r b{display:block; font-family:'Lato','Yu Gothic',sans-serif; font-size:32px; font-weight:900; color:var(--c); line-height:1.05; letter-spacing:-.01em;}
.csd-results .r .l{display:block; font-size:13px; font-weight:800; color:#0a0e27; margin:8px 0 4px; line-height:1.5;}
.csd-results .r .n{display:block; font-size:11.5px; color:#6b7280; line-height:1.6;}

/* プロフィール */
.csd-profile{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; border:1.5px solid #e5e7eb; border-radius:12px; overflow:hidden; margin:0 0 36px; font-size:13px;}
.csd-profile>div{padding:12px 16px; border-right:1px solid #eef1f6; border-bottom:1px solid #eef1f6;}
.csd-profile dt{font-size:11px; font-weight:800; color:#6b7280; letter-spacing:.04em; margin-bottom:3px;}
.csd-profile dd{margin:0; color:#1f2937; line-height:1.6;}

/* セクション見出し */
.csd-sec{margin:44px 0 0;}
.csd-h{font-size:22px; font-weight:800; color:#0a0e27; line-height:1.5; margin:0 0 18px; padding-left:16px; position:relative;}
.csd-h::before{content:''; position:absolute; left:0; top:5px; bottom:5px; width:5px; background:var(--c); border-radius:3px;}

/* Before / After */
.csd-ba .row{display:grid; grid-template-columns:34px 1fr; gap:10px 14px; padding:16px 0; border-bottom:1px solid #eef1f6; align-items:start;}
.csd-ba .row:last-child{border-bottom:0;}
.csd-ba .no{grid-row:1/3; width:34px; height:34px; border-radius:50%; background:var(--c); color:#fff; font-family:'Lato',sans-serif; font-weight:900; font-size:15px; display:flex; align-items:center; justify-content:center;}
.csd-ba .ttl{font-size:16px; font-weight:800; color:#0a0e27;}
.csd-ba .bf,.csd-ba .af{grid-column:2; font-size:13.5px; line-height:1.85; padding:12px 14px; border-radius:10px; position:relative;}
.csd-ba .bf{background:#f3f4f6; color:#4b5563;}
.csd-ba .af{background:#eef4fb; color:#1f2937; border-left:4px solid var(--c);}
.csd-ba .lb{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; margin-right:8px; padding:1px 7px; border-radius:3px;}
.csd-ba .bf .lb{background:#9ca3af; color:#fff;}
.csd-ba .af .lb{background:var(--c); color:#fff;}
.csd-ba .ar{display:none;}
@media(min-width:760px){
  .csd-ba .row{grid-template-columns:34px 1fr 28px 1fr;}
  .csd-ba .ttl{grid-column:2/5;}
  .csd-ba .bf{grid-column:2;}
  .csd-ba .ar{display:flex; grid-column:3; align-items:center; justify-content:center; color:var(--c); font-weight:900; font-size:20px;}
  .csd-ba .af{grid-column:4;}
}

/* 本文中の図版キャプション */
.csd-cap{font-size:12px; color:#6b7280; margin:-18px 0 26px; line-height:1.6;}

/* 選定ポイント vs 決め手 */
.csd-sel .row{display:grid; grid-template-columns:1fr; gap:0; border:1.5px solid #e5e7eb; border-radius:12px; overflow:hidden; margin-bottom:10px;}
.csd-sel .p{background:#f8fafc; padding:14px 18px; font-size:15px; font-weight:800; color:#0a0e27;}
.csd-sel .p span{display:block; font-family:'Lato',sans-serif; font-size:11px; font-weight:900; color:var(--c); letter-spacing:.08em; margin-bottom:4px;}
.csd-sel .d{padding:14px 18px; font-size:14px; line-height:1.85; color:#1f2937; border-top:1px solid #eef1f6;}
@media(min-width:760px){
  .csd-sel .row{grid-template-columns:280px 1fr;}
  .csd-sel .d{border-top:0; border-left:1px solid #eef1f6;}
}

/* お客様の言葉 */
.csd-quotes{display:grid; grid-template-columns:1fr; gap:12px;}
@media(min-width:760px){.csd-quotes{grid-template-columns:1fr 1fr;}}
.csd-quotes blockquote{margin:0; background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:18px 20px 14px; position:relative;}
.csd-quotes blockquote::before{content:'“'; position:absolute; left:14px; top:2px; font-family:Georgia,serif; font-size:44px; color:var(--c); opacity:.35; line-height:1;}
.csd-quotes p{margin:0 0 8px; font-size:14.5px; line-height:1.9; color:#1f2937; padding-left:16px;}
.csd-quotes cite{display:block; font-style:normal; font-size:12px; color:#6b7280; text-align:right;}

/* タイムライン */
.csd-tl{list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid #e5e7eb;}
.csd-tl li{position:relative; padding:0 0 16px 18px; font-size:14px; line-height:1.7;}
.csd-tl li::before{content:''; position:absolute; left:-24px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--c); border:2px solid #fff; box-shadow:0 0 0 2px var(--c);}
.csd-tl .w{display:inline-block; font-family:'Lato',sans-serif; font-weight:900; color:var(--c); min-width:110px;}
.csd-tl .t{color:#1f2937;}

/* CTA 2ボタン */
.csd-cta .csd-btn2{display:inline-block; margin-left:10px; background:transparent; color:#fff; font-weight:800; font-size:14px; padding:13px 26px; border:2px solid rgba(255,255,255,.75); border-radius:10px; text-decoration:none;}
.csd-cta .csd-btn2:hover{background:rgba(255,255,255,.12);}
@media(max-width:600px){.csd-cta .csd-btn2{display:block; margin:10px auto 0; max-width:280px;}}

/* 関連事例 */
.csd-ocard{--c:#4f46e5;}
.csd-ocard .n{font-size:13px; font-weight:700; color:#0a0e27; line-height:1.5;}
.csd-ocard .n em{color:var(--c); font-style:normal;}

@media(max-width:760px){
  .csd-results{grid-template-columns:1fr;}
  .csl-res3{grid-template-columns:repeat(3,1fr);}
  .csl-res3 li b{font-size:15px;}
}