@charset "utf-8";
/* ============================================================
 * /whitepaper 資料一覧 リニューアル（2026-09 / Figmaデザイン反映）
 *  現行サービスサイトの意匠を踏襲。カードは既存 .whitepaper-list /
 *  .whitepaper-card-link / .button-primary を流用。
 *  追加要素（3点セット・目次・中央見出し・金リボンNo.1・業種サブ見出し）を .wpx- で名前空間化。
 *  primary:#457B9D / blue:#1c589e / sub:#E63946 / gold:#e0bd45 / lemongreen:#F1FAEE
 * ============================================================ */

/* 目次（アンカーナビ）＝幅広ピル3等分＋下向きキャレット。ヒーロー直後に配置。 */
.wpx-anchors{margin:0 0 10px;}
.wpx-anchors ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;}
.wpx-anchors li{flex:1;}
.wpx-anchors a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:100%;padding:15px 10px;border:2px solid #1c589e;border-radius:32px;background:#fff;
  color:#1c589e;font-weight:bold;font-size:16px;line-height:1.3;text-decoration:none;transition:.2s;}
.wpx-anchors a:hover{background:#1c589e;color:#fff;}
.wpx-anchors a .wpx-caret{display:block;width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:1px;}

/* A: まずこの3点セット ヒーロー（Figma：淡い水色地／ミント地サムネ／オレンジ旗／濃紺角丸ボタン） */
.wpx-kit{margin:0 auto 1em;}
.wpx-kit-card{display:flex;gap:40px;align-items:center;justify-content:center;
  background:linear-gradient(105deg,#eef6fc 0%,#dae8f4 100%);
  border-radius:16px;padding:30px 40px;text-decoration:none;color:inherit;transition:.3s;}
.wpx-kit-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.10);}
.wpx-kit-thumb{flex:0 0 300px;background:#eff8ea;border-radius:12px;padding:22px;
  display:flex;align-items:center;justify-content:center;}
.wpx-kit-thumb img{width:100%;height:auto;display:block;border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.16);background:#fff;}
.wpx-kit-body{flex:0 1 auto;max-width:600px;min-width:0;}
.wpx-kit-tag{display:inline-flex;align-items:center;gap:8px;color:#e97819;font-size:15px;font-weight:bold;margin-bottom:8px;}
.wpx-kit-tag__icon{width:14px;height:auto;display:block;}
/* ページ上部リード文とヒーローの間隔を詰める（既存 .notes の margin-bottom:5em を縮小） */
body.whitepaper .notes{margin-bottom:2em;}
@media ( max-width : 767px ){ body.whitepaper .notes{margin-bottom:1.2em;} }
.wpx-kit-body h2{font-size:28px;font-weight:900;line-height:1.35;margin:0 0 12px;color:#2b2b2b;}
.wpx-kit-body .wpx-kit-lead{font-size:15px;color:#3a3a3a;margin:0 0 18px;line-height:1.8;}
.wpx-kit-set{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.wpx-kit-set span{font-size:13px;background:#fff;border:1px solid #d5dde3;padding:7px 14px;border-radius:6px;color:#333;}
.wpx-kit-set span b{color:#1c6a9c;}
.wpx-kit-btnwrap{max-width:430px;}
.wpx-btn-kit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#1c6a9c;color:#fff;font-size:17px;font-weight:bold;padding:16px 20px;border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.16);transition:.2s;}
.wpx-kit-card:hover .wpx-btn-kit{background:#175a86;}

/* カテゴリ見出し（中央寄せ＋中央リード文） */
.wpx-cat-head{text-align:center;margin:0 0 6px;}
.wpx-cat-head h2{display:inline;font-size:28px;font-weight:900;color:#1A1A1A;line-height:1.4;}
.wpx-cat-head .wpx-count{font-size:14px;font-weight:bold;color:#8a959d;margin-left:10px;}
.wpx-cat-desc{text-align:center;font-size:15px;color:#555;margin:12px auto 32px;max-width:840px;line-height:1.8;}

/* 業種別サブ見出し（左寄せ＋全幅下線） */
.wpx-subcat{font-size:20px;font-weight:800;color:#1A1A1A;border-bottom:1px solid #cfd6dc;
  padding-bottom:10px;margin:36px 0 22px;}
.wpx-subcat:first-of-type{margin-top:8px;}

/* カードは既存構造のまま（画像はブロック壁から内側に余白）。バッジをカード角基準に置くため col を relative に */
body.whitepaper .whitepaper-list > .col{position:relative;}
body.whitepaper .whitepaper-list .wpx-fig{margin:0;}
body.whitepaper .whitepaper-list .wpx-fig img:not(.wpx-badge-img){display:block;width:100%;height:auto;border-radius:6px;}

/* No.1 バッジ（金リボン画像）：カード左上の角に留め付け（col基準）。画像は余白のぶん奥にあり被りを軽減 */
.wpx-badge-img{position:absolute;top:-8px;left:-8px;z-index:3;width:48px;height:auto;display:block;
  filter:drop-shadow(1px 2px 2px rgba(0,0,0,.22));}
.wpx-ind{display:inline-block;align-self:flex-start;font-size:12px;font-weight:bold;color:#457B9D;
  background:#eaf1f5;border:1px solid #cfdde6;padding:3px 10px;border-radius:4px;margin:.6em 0 0;}

/* 左詰めグリッド（②まず読む基礎・③各業種サブセクション） */
body.whitepaper .whitepaper-list.wpx-left{justify-content:flex-start;}
@media ( min-width : 768px ){
  body.whitepaper .whitepaper-list.wpx-left > .col.span-4{width:calc((100% - 48px) / 3);}
  body.whitepaper .whitepaper-list.wpx-left > .col.span-4:nth-child(3n+1){margin-left:0;}
}

@media ( max-width : 767px ){
  /* SP：ヘッダーが常時 position:fixed（約93px）のため、タイトルが被らないよう上余白を確保 */
  body.whitepaper main{padding-top:96px;}
  .wpx-anchors ul{flex-direction:column;gap:10px;}
  .wpx-anchors a{flex-direction:row;gap:8px;padding:12px;}
  .wpx-kit-card{flex-direction:column;text-align:center;padding:24px 18px;}
  /* 3点セットのサムネイルをSPで大きく表示 */
  .wpx-kit-thumb{flex-basis:auto;width:100%;max-width:300px;margin:0 auto;}
  .wpx-kit-set{justify-content:center;}
  .wpx-kit-btnwrap{margin:0 auto;}
  .wpx-cat-head h2{font-size:22px;}
  .wpx-subcat{font-size:18px;}
}