/* ============================================================
   case_v1.css — 導入事例（移植）用スタイル
   - トップ #case カードのサムネイル（.cc-thumb）
   - 事例詳細ページ（case.php）の体裁（.csd-*）
   2026/06/17
============================================================ */

/* ---- トップ #case カードのサムネイル画像 ---- */
.case-card .cc-thumb{
  width:calc(100% + 44px); margin:-24px -22px 16px; /* カードのpaddingを打ち消して全幅に */
  height:170px; object-fit:cover; display:block;
  border-radius:14px 14px 0 0; background:#eef0f5;
}

/* ============================================================
   事例詳細ページ（case.php）
============================================================ */
.csd-wrap{max-width:860px; margin:120px auto 0; padding:0 5%;}
.csd-back{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  color:#4f46e5; font-family:'Lato',sans-serif; margin-bottom:18px; text-decoration:none;}
.csd-back:hover{opacity:.7;}
.csd-meta{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.csd-cat{font-size:12px; font-weight:800; letter-spacing:.06em; color:#fff;
  background:linear-gradient(135deg,#6366f1,#4f46e5); padding:5px 14px; border-radius:20px;}
.csd-date{font-size:13px; color:#9aa3b2; font-family:'Lato',sans-serif; font-weight:700;}
.csd-company{font-size:14px; color:#4f46e5; font-weight:700; margin-bottom:6px;}
.csd-title{font-size:clamp(24px,3.4vw,34px); font-weight:800; line-height:1.5;
  letter-spacing:-.01em; color:#0a0e27; margin:6px 0 26px;}
.csd-hero{width:100%; border-radius:16px; margin-bottom:30px; box-shadow:0 12px 36px rgba(10,14,39,.12);}
.csd-lead{font-size:16px; line-height:1.95; color:#374151; background:#f8fafc;
  border-left:4px solid #ee3833; border-radius:0 10px 10px 0; padding:22px 24px; margin-bottom:40px;}

/* 本文中の写真 */
.csd-photo{width:100%; border-radius:14px; margin:6px 0 26px;
  box-shadow:0 10px 30px rgba(10,14,39,.10); background:#eef0f5;}

/* 本文 */
.csd-body{font-size:16px; line-height:2.0; color:#2a2f3a;}
.csd-body h2{font-size:22px; font-weight:800; color:#0a0e27; line-height:1.5;
  margin:46px 0 18px; padding-left:16px; position:relative;}
.csd-body h2::before{content:''; position:absolute; left:0; top:5px; bottom:5px; width:5px;
  background:linear-gradient(180deg,#6366f1,#ee3833); border-radius:3px;}
.csd-body p{margin:0 0 18px;}
.csd-body strong{color:#0a0e27; font-weight:800;}
.csd-body ul,.csd-body ol{margin:0 0 22px; padding-left:1.3em;}
.csd-body li{margin:0 0 8px; line-height:1.85;}
.csd-body ul li{list-style:disc;}
.csd-body ol li{list-style:decimal;}
.csd-fact{display:inline-block; font-size:13.5px; color:#475569; background:#eef2ff;
  border-radius:8px; padding:12px 18px; margin-bottom:8px; line-height:1.7;}

/* CTA */
.csd-cta{margin:64px 0 0; padding:48px 24px; text-align:center; border-radius:18px;
  background:linear-gradient(135deg,#ee3833 0%,#ff6b3d 100%); color:#fff;}
.csd-cta h3{font-size:24px; font-weight:800; margin:0 0 10px;}
.csd-cta p{font-size:14px; margin:0 0 24px; color:rgba(255,255,255,.92);}
.csd-cta .csd-btn{display:inline-block; background:#fff; color:#ee3833; font-weight:800;
  font-size:15px; padding:14px 34px; border-radius:10px; text-decoration:none;
  box-shadow:0 10px 28px rgba(0,0,0,.18); transition:transform .25s;}
.csd-cta .csd-btn:hover{transform:translateY(-2px);}

/* 他の事例 */
.csd-others{background:#f8fafc; padding:72px 0; margin-top:80px;}
.csd-others .csd-inner{max-width:1160px; margin:0 auto; padding:0 5%;}
.csd-others h3{text-align:center; font-size:22px; font-weight:800; color:#0a0e27; margin:0 0 40px;}
.csd-others-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.csd-ocard{background:#fff; border:1px solid #eef0f5; border-radius:12px; overflow:hidden;
  text-decoration:none; box-shadow:0 6px 18px rgba(10,14,39,.05); transition:transform .3s,box-shadow .3s;}
.csd-ocard:hover{transform:translateY(-5px); box-shadow:0 18px 40px rgba(10,14,39,.14);}
.csd-ocard img{width:100%; height:120px; object-fit:cover; background:#eef0f5;}
.csd-ocard .t{padding:14px 16px 18px;}
.csd-ocard .t .c{font-size:11px; font-weight:800; color:#4f46e5; letter-spacing:.05em;}
.csd-ocard .t .n{font-size:13.5px; font-weight:700; color:#0a0e27; line-height:1.5; margin-top:6px;}

@media(max-width:880px){
  .csd-others-grid{grid-template-columns:repeat(2,1fr);}
  .csd-wrap{margin-top:96px;}
}
@media(max-width:520px){
  .csd-others-grid{grid-template-columns:1fr;}
}

/* ============================================================
   事例一覧ページ（/case.php）
============================================================ */
.csl-head{padding:140px 5% 50px; text-align:center;
  background:linear-gradient(135deg,#0a0e27 0%,#1e3a8a 100%); color:#fff;}
.csl-head .csl-inner{max-width:900px; margin:0 auto;}
.csl-en{display:block; font-family:'Lato',sans-serif; font-size:13px; font-weight:800;
  letter-spacing:.42em; color:#c7d2fe; margin-bottom:12px;}
.csl-title{font-size:clamp(30px,5vw,46px); font-weight:900; letter-spacing:.04em; margin:0 0 18px;}
.csl-lead{font-size:15px; line-height:1.9; color:rgba(255,255,255,.85);}
.csl-list{padding:64px 5% 90px; background:linear-gradient(180deg,#f8fafc,#eef2f7);}
.csl-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.csl-card{display:flex; flex-direction:column; background:#fff; border:1px solid #eef0f5;
  border-radius:14px; overflow:hidden; text-decoration:none;
  box-shadow:0 8px 24px rgba(10,14,39,.06); transition:transform .35s,box-shadow .35s;}
.csl-card:hover{transform:translateY(-6px); box-shadow:0 22px 46px rgba(10,14,39,.16);}
.csl-card>img{width:100%; height:180px; object-fit:cover; background:#eef0f5;}
.csl-card .csl-body{padding:22px 22px 20px; display:flex; flex-direction:column; flex:1;}
.csl-meta{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.csl-cat{font-size:11px; font-weight:800; letter-spacing:.06em; color:#fff;
  background:linear-gradient(135deg,#6366f1,#4f46e5); padding:3px 10px; border-radius:20px;}
.csl-date{font-size:12px; color:#9aa3b2; font-family:'Lato',sans-serif; font-weight:700;}
.csl-result{font-size:18px; font-weight:800; color:#0a0e27; line-height:1.5; margin:0 0 6px;}
.csl-result em{font-style:normal; color:#ee3833;}
.csl-name{font-size:13px; font-weight:700; color:#4f46e5; margin:0 0 10px;}
.csl-desc{font-size:13px; color:#5b6472; line-height:1.75; margin:0 0 16px; flex:1;}
.csl-more{font-size:12px; font-weight:800; letter-spacing:.05em; color:#ee3833;
  font-family:'Lato',sans-serif; margin-top:auto;}
.csl-card:hover .csl-more{text-decoration:underline;}
@media(max-width:980px){.csl-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.csl-grid{grid-template-columns:1fr;} .csl-head{padding-top:120px;}}

/* CASE_DATE_HIDE */
.csl-date,.csd-date{display:none !important;}