/* ============================================================
   case-list.css  —  事例「一覧」ペア共通（RPO=.is-rpo / Agent=.is-agent）
   依存: case-base.css（リセット・共通トークン）
   ※ 見た目は案B化前と完全一致。ブランド差はトークン/.is-* で出し分け。
   ============================================================ */

/* --- ブランド・トークン（一覧固有） --- */
.is-rpo{--cases-pad-x:40px;--card-hover-border:#ccc;--pager-accent:#111;--catch-color:#111;}
.is-agent{--cases-pad-x:60px;--card-hover-border:#292F33;--pager-accent:#D71718;--catch-color:#666;}

/* === ヘッダー === */
.case-list-hd{display:flex;align-items:center;justify-content:space-between;padding:0 var(--hd-pad-x);height:var(--hd-h);border-bottom:1px solid #e8e8e8;position:sticky;top:0;background:#fff;z-index:100;}
.admin-bar .case-list-hd{top:32px;}
.case-list-hd-logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;}
.case-list-hd-logo-img{display:block;}
.is-rpo .case-list-hd-logo-img{width:60px;height:auto;}
.is-agent .case-list-hd-logo-img{height:40px;width:auto;}
.case-list-hd-logo-txt{}
.case-list-hd-logo-txt .s1{font-size:13px;font-weight:700;display:block;line-height:1.4;color:#111;}
.case-list-hd-logo-txt .s2{font-size:13px;font-weight:700;display:block;line-height:1.4;color:#111;}
.case-list-hd-back{display:flex;align-items:center;gap:6px;font-size:13px;color:#555;transition:color .2s;}
.case-list-hd-back:hover{color:var(--accent);}
.case-list-hd-back::before{content:'←';font-size:14px;}

/* === PAGE HEADER === */
.case-list-ph{padding:64px 40px 56px;border-bottom:1px solid #e8e8e8;}
.case-list-ph-inner{max-width:1160px;margin:0 auto;}
.case-list-ph-ttl{font-size:32px;font-weight:900;line-height:1.3;margin:16px 0px !important;}
.case-list-ph-desc{font-size:15px;color:#555;line-height:1.9;}

/* === CASES === */
.case-list-cases{padding:56px var(--cases-pad-x) 80px;}
.case-list-cases-inner{max-width:1160px;margin:0 auto;}

/* 1件目：大きい横長カード */
.case-list-card-featured{display:flex;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:40px;text-decoration:none;color:inherit;transition:border-color .2s;}
.case-list-card-featured:hover{border-color:var(--card-hover-border);}
.case-list-card-featured-img{width:480px;flex-shrink:0;position:relative;overflow:hidden;background:#d8d8d8;aspect-ratio:1.91/1;}
.case-list-card-featured-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.case-list-card-featured-body{flex:1;padding:40px 48px;display:flex;flex-direction:column;justify-content:center;position:relative;}
.case-list-card-featured-logo-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.case-list-card-featured-logo-box{display:inline-flex;align-items:center;justify-content:center;border:1px solid #E6E6E6;padding:8px 14px;flex-shrink:0;height:55px;width:99px;}
.case-list-card-featured-logo-box img{height:100%;max-width:100%;object-fit:contain;display:block;}
.case-list-card-featured-co{font-size:18px;font-weight:700;color:#111;}
.case-list-card-featured-ttl{font-size:20px;font-weight:900;line-height:1.5;margin-bottom:16px;color:#111;}
.case-list-card-featured-catch{font-size:13px;color:var(--catch-color);line-height:1.8;margin-bottom:24px;}
.case-list-card-featured-more{
  width:28px;height:28px;border-radius:50%;
  background:var(--more-bg);
  display:flex;align-items:center;justify-content:center;
  position:absolute;bottom:20px;right:20px;
  flex-shrink:0;
}
.case-list-card-featured-more::after{
  content:'';width:0;height:0;
  border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff;
  margin-left:2px;
}

/* 2件目以降：3カラムグリッド */
.case-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.case-list-card{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s;}
.case-list-card:hover{border-color:var(--card-hover-border);}
.case-list-card-img{width:100%;aspect-ratio:1.91/1;overflow:hidden;position:relative;}
.case-list-card-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.is-rpo .case-list-card-img img{border-radius:4px;}
.case-list-card-body{padding:16px 20px 44px;flex:1;display:flex;flex-direction:column;position:relative;}
.case-list-card-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.case-list-card-logo-box{display:inline-flex;align-items:center;justify-content:center;border:1px solid #E6E6E6;padding:4px 8px;flex-shrink:0;height:40px;width:72px;}
.case-list-card-logo-box img{height:100%;max-width:100%;object-fit:contain;display:block;}
.case-list-card-co{font-size:15px;font-weight:700;color:#111;}
.case-list-card-ttl{font-size:14px;font-weight:700;line-height:1.55;color:#111;flex:1;}
.case-list-card-more{
  width:28px;height:28px;border-radius:50%;
  background:var(--more-bg);
  display:flex;align-items:center;justify-content:center;
  position:absolute;bottom:16px;right:16px;
  flex-shrink:0;
}
.case-list-card-more::after{
  content:'';width:0;height:0;
  border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff;
  margin-left:2px;
}

/* 案件なし */
.case-list-empty{text-align:center;padding:80px 0;color:#999;font-size:15px;}

/* === ページネーション === */
.case-list-pagination{display:flex;justify-content:center;gap:8px;padding:0 0 64px;}
.case-list-pagination a,.case-list-pagination span{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:4px;
  font-size:14px;font-weight:700;
  border:1px solid #ddd;color:#333;text-decoration:none;
}
.case-list-pagination .current{background:var(--pager-accent);color:#fff;border-color:var(--pager-accent);}
.case-list-pagination a:hover{border-color:var(--pager-accent);color:var(--pager-accent);}

/* === SP === */
@media screen and (max-width:768px){
  .case-list-hd{position:static!important;}
  .case-list-hd{padding:0 20px;}
  .is-rpo .case-list-hd{height:60px;}
  .is-rpo .case-list-hd-logo-img{width:50px;}
  .is-rpo .case-list-hd-logo-txt .s1,.is-rpo .case-list-hd-logo-txt .s2{font-size:10px;}
  .case-list-ph{padding:40px 20px 36px;}
  .case-list-ph-ttl{font-size:24px; margin: 0px 0px 16px !important;}
  .case-list-cases{padding:36px 20px 56px;}
  .case-list-card-featured{flex-direction:column;border-radius:4px;overflow:hidden;margin-bottom:16px;}
  .case-list-card-featured-img{width:100%;aspect-ratio:1.91/1;}
  .case-list-card-featured-img img{object-fit:cover;}
  .is-rpo .case-list-card-featured-img img{border-radius:4px;}
  .is-rpo .case-list-card-featured-body{padding:12px 20px 16px;}
  .is-agent .case-list-card-featured-body{padding:16px 16px 20px;}
  .case-list-card-featured-ttl{font-size:14px;font-weight:700;margin-bottom:10px;}
  .case-list-card-featured-catch{font-size:13px;}
  .case-list-card-featured-logo-row{margin-bottom:10px;}
  .is-rpo .case-list-card-featured-co{font-size:12px;}
  .is-agent .case-list-card-featured-co{font-size:13px;}
  .case-list-card-featured-more{font-size:12px;margin-top:14px;}
  .case-list-grid{grid-template-columns:1fr;}
  .is-rpo .case-list-grid{gap:12px;}
  .is-rpo .case-list-card-img{padding:6px;}
  .is-rpo .case-list-card-body{padding:12px 20px 16px;}
  .is-rpo .case-list-card-ttl{font-size:13px;}
}

/* === パンくず（RPO: .case-list-bc / inline HTML） === */
.case-list-bc{padding:10px 60px;font-size:12px;color:#888;background:#fff;border-bottom:1px solid #ebebeb;}
.case-list-bc a{color:#888;}
.case-list-bc a:hover{color:#D71718;}
.case-list-bc span{margin:0 6px;}
@media(max-width:768px){.case-list-bc{padding:8px 20px;font-size:11px;}}

/* === パンくず（Agent: parts/agent-breadcrumb 用・据え置き） === */
.ag-breadcrumb{padding:10px 40px;font-size:12px;color:#888;background:#fff;border-bottom:1px solid #ebebeb;}
.ag-breadcrumb a{color:#888;text-decoration:none;}
.ag-breadcrumb a:hover{color:#D71718;}
.ag-breadcrumb span{margin:0 6px;}
@media(max-width:768px){.ag-breadcrumb{padding:8px 20px;}}

/* === Agent専用CTA（ag-btn-dark / parts/agent-cta-bottom 用・据え置き） === */
.ag-btn-dark{
  display:inline-flex;flex-direction:column;justify-content:center;
  cursor:pointer;text-decoration:none!important;
  background:#292F33;border-radius:4px;transition:background .2s;
  min-width:280px;padding:10px 56px 12px 16px;gap:4px;position:relative;
}
.ag-btn-dark:hover{background:#333;}
.ag-btn-dark .ag-btn-note{
  font-size:14px;font-weight:700;color:#fff;
  text-align:center;letter-spacing:.03em;
  margin-left:-16px;margin-right:-56px;
}
.ag-btn-dark .ag-btn-main{display:flex;align-items:center;gap:10px;}
.ag-btn-dark .ag-btn-badge{
  background:#fff;color:#292F33;
  font-size:17px;font-weight:700;
  padding:2px 8px;border-radius:4px;flex-shrink:0;letter-spacing:.05em;
}
.ag-btn-dark .ag-btn-txt{color:#fff;font-size:18px;font-weight:700;white-space:nowrap;flex:1;}
.ag-btn-dark .ag-btn-arrow{
  position:absolute;right:14px;top:0;bottom:0;margin:auto;
  width:28px;height:28px;border-radius:50%;
  background:#e50011;
  display:flex;align-items:center;justify-content:center;line-height:0;
  flex-shrink:0;
}
.ag-btn-dark .ag-btn-arrow::after{
  content:'';
  display:block;
  width:0;height:0;
  border-style:solid;
  border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff;
  margin-left:2px;
}
.ag-btn-dark .ag-btn-arrow img{display:none;}

/* === Agent専用 下部CTA（ag-lastcta-bottom・据え置き） === */
.ag-lastcta-bottom{background:transparent;padding:0 60px 120px;}
.ag-lastcta-bottom-inner{
  max-width:1160px;margin:0 auto;
  background:#e50011;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative;
}
.ag-lastcta-bottom-inner::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(255,255,255,0.18);
  clip-path:polygon(75% 0%, 105% 0%, 90% 100%, 60% 100%);
  pointer-events:none;
}
.ag-lastcta-bottom-left{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:40px 48px 40px 0px;flex-shrink:0;
}
.ag-lastcta-bottom-left img{width:100%;max-width:280px;height:auto;display:block;}
.ag-lastcta-bottom-body{flex:0 0 auto;padding:40px 48px 40px 68px;;position:relative;z-index:1;}
.ag-lastcta-bottom-sub{margin-bottom:8px;}
.ag-lastcta-bottom-catch{margin-bottom:20px!important;}
.ag-lastcta-bottom-sub{font-size:20px;color:#FFFFFF;font-weight:500;}
.ag-lastcta-bottom-catch{font-size:32px;font-weight:900;color:#fff;line-height:1.35;}

/* === Agent専用 下部CTA SP === */
@media screen and (max-width:768px){
  .ag-lastcta-bottom{padding:0 20px 80px!important;}
  .ag-lastcta-bottom-inner{flex-direction:column!important;border-radius:8px!important;}
  .ag-lastcta-bottom-body{padding:20px!important;order:1!important;width:100%;}
  .ag-lastcta-bottom-sub{padding:24px 24px 0px 0px !important;display:block!important;}
  .ag-lastcta-bottom-catch{padding:8px 24px 0px 0px!important;display:block!important;}
  .ag-lastcta-bottom-left{flex:none!important;width:100%!important;padding:0px 20px 28px!important;border-right:none!important;order:2!important}
  .ag-lastcta-bottom-left img{max-width:180px!important;}
  .ag-lastcta-bottom-catch{font-size:20px!important;}
  .ag-btn-dark{display:flex!important;width:100%!important;box-sizing:border-box!important;min-width:0!important;}
  .ag-lastcta-bottom-inner::after{clip-path:polygon(90% 0%, 100% 0%, 100% 100%, 30% 100%)}
  .ag-lastcta-bottom-body .ag-btn-dark{padding:10px 16px 12px 16px!important;}
  .ag-lastcta-bottom-body .ag-btn-dark .ag-btn-note{margin-left:0!important;margin-right:0!important;text-align:center!important;font-size:12px;}
  .ag-lastcta-bottom-body .ag-btn-dark .ag-btn-main{justify-content:center!important;}
  .ag-lastcta-bottom-body .ag-btn-dark .ag-btn-txt{flex:none!important;}
  .ag-lastcta-bottom-body .ag-btn-dark .ag-btn-arrow{position:absolute!important;right:10px!important;top:0!important;bottom:0!important;margin:auto!important;}
}
