/* ===================================
   導入事例（archive-case_studies.php / single-case_studies.php）
   2026-10-15 作り直し。クラスは csx- で始め、main.css・patterns.css の既存の名前と重ねない
   =================================== */
.csx {
  --csx-main: #2a816c;
  --csx-main-dark: #1f6453;
  --csx-main-pale: #eef6f3;
  --csx-accent: #f28b30;
  --csx-sub-dark: #1c3d4b;
  --csx-text: #333;
  --csx-muted: #666;
  --csx-line: #e3e8e6;
  --csx-soft: #f6f8f7;
  --csx-head: 72px; /* ヘッダーの高さ。assets/js/case-studies.js が実測で上書きする */
  color: var(--csx-text);
}
.csx a { text-decoration: none; }
/* 横幅はテーマ共通の .container（パンくず・ヘッダー・ほかのページ）とそろえる（2026-10-18 本人「パンくずと同じ横の位置まで使っていない」） */
.csx-wrap { max-width: var(--container-width, 1280px); margin: 0 auto; padding: 0 var(--container-padding, 60px); }
@media (max-width: 768px) { .csx-wrap { padding: 0 20px; } }

.csx-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.csx-btn--accent { background: var(--csx-accent); color: #fff !important; }
.csx-btn--accent:hover { opacity: .9; }

/* ---------- 一覧: ヒーロー（2026-10-16 作り直し） ----------
   見出しと、すぐ押せる業種・従業員規模のボタンだけ。右に写真の壁を大きく敷き、ヒーローの上下で切る */
/* 2026-10-17 白地にして、特徴・料金のFVの白緑を逆にした形にする（本人「白背景のほうがメリハリ」「背景にも写真でグラデーション」）。
   背景の実写は右へいくほど見せ、左は白で文字を読ませる。その上に白い縁の写真の壁と、緑の光の筋（light-line.js の light）を重ねる */
.csx-hero { position: relative; overflow: hidden; background: #fff; min-height: 560px; display: flex; align-items: center; }
.csx-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--csx-hero-photo) 30% 40% / cover no-repeat; opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent 12%, rgba(0, 0, 0, .55) 45%, #000 80%); mask-image: linear-gradient(90deg, transparent 12%, rgba(0, 0, 0, .55) 45%, #000 80%); }
.csx-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(238, 246, 243, .5) 0%, rgba(42, 129, 108, .1) 100%); }
.csx-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 56px; }
.csx-hero__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: var(--csx-main); letter-spacing: .2em; margin-bottom: 14px; }
.csx-hero__title { font-size: 40px; line-height: 1.35; margin: 0 0 36px; color: var(--csx-sub-dark); letter-spacing: .02em; max-width: 560px; }

/* 写真の左端はぼかして、写真の一部がボタンの背景にかかる形にする（2026-10-16 本人判断で一度外して戻した） */
.csx-wall { position: absolute; z-index: 1; top: -28%; bottom: -28%; right: -6%; width: 54%; display: flex; gap: 16px; transform: rotate(-10deg); transform-origin: center; pointer-events: none; }
.csx-wall-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.csx-wall__col { flex: 1; display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.csx-wall__col--1 { margin-top: -90px; }
.csx-wall__item { flex: 0 0 auto; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #e3ece8; border: 4px solid #fff; box-shadow: 0 18px 34px -18px rgba(28, 61, 75, .45); }
.csx-wall__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .csx-wall__col { animation: csx-wall-up 70s linear infinite; }
  .csx-wall__col--1 { animation-name: csx-wall-down; animation-duration: 80s; }
  .csx-wall__col--2 { animation-duration: 62s; }
}
@keyframes csx-wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } }
@keyframes csx-wall-down { from { transform: translateY(calc(-50% - 8px)); } to { transform: translateY(0); } }

/* 業種・従業員規模のボタン */
.csx-pick { max-width: 600px; }
.csx-pick__label { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--csx-sub-dark); letter-spacing: .06em; }
.csx-pick__inds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.csx-pick__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.csx-chip { font: inherit; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 44px; border-radius: 10px; border: 1px solid #d5e2dd; background: rgba(255, 255, 255, .94); color: var(--csx-sub-dark); box-shadow: 0 4px 12px -8px rgba(28, 61, 75, .35); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; text-align: left; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.csx-chip:hover { border-color: var(--csx-main); box-shadow: 0 8px 18px -10px rgba(42, 129, 108, .55); }
.csx-chip:focus-visible { outline: 2px solid var(--csx-main); outline-offset: 2px; }
.csx-chip__icon { display: inline-flex; color: var(--csx-main); }
.csx-chip__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csx-chip__n { font-size: 12px; font-weight: 500; color: var(--csx-muted); }
.csx-chip.is-on { background: var(--csx-main); border-color: var(--csx-main); color: #fff; }
.csx-chip.is-on .csx-chip__icon, .csx-chip.is-on .csx-chip__n { color: #fff; }
.csx-chip.is-empty { opacity: .35; pointer-events: none; }
.csx-pick__sizes .csx-chip { height: 40px; border-radius: 999px; padding: 0 16px; }

/* 絞っているあいだだけ上に残る1行 */
.csx-bar { position: sticky; top: var(--csx-head); z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--csx-line); box-shadow: 0 6px 16px -14px rgba(0, 0, 0, .35); }
.csx-bar__inner { display: flex; align-items: center; gap: 14px; height: 52px; font-size: 14px; }
.csx-bar__cond { font-weight: 700; color: var(--csx-sub-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csx-bar__count b { font-size: 18px; color: var(--csx-main); margin-right: 1px; }
.csx-bar__clear { font: inherit; font-size: 13px; font-weight: 700; margin-left: auto; display: none; align-items: center; gap: 6px; background: #fff; color: var(--csx-main); border: 1px solid var(--csx-main); border-radius: 999px; padding: 6px 14px; cursor: pointer; line-height: 1; }
.csx-bar__clear.is-show { display: inline-flex; }

/* 結果が画面の外にあるときだけ出る「◯社の事例を見る」 */
.csx-jump { position: fixed; left: 50%; bottom: 20px; z-index: 30; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; font: inherit; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--csx-sub-dark); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); transition: opacity .25s, transform .25s; }
.csx-jump b { font-size: 18px; color: #9fe0c9; }
.csx-jump.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

@media (max-width: 1023px) {
  .csx-hero { min-height: 0; display: block; }
  .csx-hero::before { opacity: .22; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%); mask-image: linear-gradient(180deg, #000 0%, transparent 60%); }
  .csx-hero__inner { padding-top: 286px; padding-bottom: 32px; }
  .csx-wall-clip { bottom: auto; height: 260px; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
  .csx-wall { top: -80px; bottom: auto; height: 420px; left: -10%; right: -10%; width: auto; -webkit-mask-image: none; mask-image: none; }
  .csx-wall__col--1 { margin-top: -50px; }
  .csx-hero__title { font-size: 36px; margin-bottom: 24px; }
}
@media (max-width: 767px) {
  .csx-hero__inner { padding-top: 262px; }
  .csx-wall-clip { height: 240px; }
  .csx-wall { height: 260px; gap: 10px; }
  .csx-wall__col { gap: 10px; }
  .csx-wall__item { border-radius: 10px; }
  .csx-hero__title { font-size: 26px; }
  .csx-pick__inds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .csx-chip { height: 42px; font-size: 13px; padding: 0 10px; gap: 6px; }
  .csx-chip__icon svg { width: 18px; height: 18px; }
  .csx-bar__inner { gap: 10px; height: 48px; font-size: 13px; }
}

/* ---------- 一覧: セクション ---------- */
.csx-sec { padding: 40px 0 8px; }
.csx-sec:last-of-type { padding-bottom: 72px; }
.csx-sec__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.csx-sec__head h2 { font-size: 24px; margin: 0; color: var(--csx-sub-dark); }
.csx-sec__head p { margin: 0; font-size: 13px; color: var(--csx-muted); }
.csx-sec.is-hidden { display: none; }
.csx-empty { display: none; text-align: center; padding: 48px 16px; color: var(--csx-muted); background: var(--csx-soft); border-radius: 12px; margin: 0; }
.csx-empty.is-show { display: block; }
@media (max-width: 767px) { .csx-sec__head { flex-direction: column; gap: 2px; } }

/* ---------- カード（一覧・個別の「同じ業種の導入事例」） ---------- */
.csx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1023px) { .csx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .csx-grid { grid-template-columns: 1fr; gap: 12px; } }
.csx-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--csx-line); border-radius: 12px; overflow: hidden; color: var(--csx-text); transition: box-shadow .2s, transform .2s; }
.csx-card:hover { box-shadow: 0 10px 28px -12px rgba(28, 61, 75, .28); transform: translateY(-2px); color: var(--csx-text); }
.csx-card[hidden] { display: none; }
.csx-card__img { aspect-ratio: 3 / 2; background: var(--csx-soft); overflow: hidden; }
.csx-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.csx-card:hover .csx-card__img img { transform: scale(1.03); }
.csx-card__noimg { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: #a3b1ac; letter-spacing: .08em; }
/* 写真用の .csx-card__img img（枠いっぱい）に引っぱられないよう、強めに当てる */
.csx-card__img .csx-card__noimg-logo { width: 42%; max-width: 132px; height: auto; object-fit: contain; opacity: .22; filter: grayscale(1); transform: none; }
.csx-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.csx-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.csx-tag { font-size: 12px; line-height: 1; padding: 5px 8px; border-radius: 4px; background: var(--csx-soft); color: var(--csx-muted); }
.csx-tag--ind { background: var(--csx-main-pale); color: var(--csx-main); font-weight: 700; }
.csx-card__company { margin: 0; font-size: 13px; font-weight: 700; color: var(--csx-sub-dark); line-height: 1.5; }
.csx-card__metric { display: flex; flex-direction: column; border-left: 3px solid var(--csx-main); padding: 2px 0 2px 10px; }
.csx-card__metric-label { font-size: 12px; color: var(--csx-muted); line-height: 1.5; }
.csx-card__metric-value { font-size: 22px; font-weight: 700; color: var(--csx-main); line-height: 1.35; }
.csx-card__title { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 700; color: var(--csx-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.csx-card--big .csx-card__metric-value { font-size: 28px; }
.csx-card--big .csx-card__title { font-size: 16px; }
@media (max-width: 767px) {
  /* スマホは横長の小さなカードにして、縦に詰める（成果の大きい事例は横に送る） */
  .csx-grid .csx-card:not(.csx-card--big) { flex-direction: row; border-radius: 10px; }
  .csx-grid .csx-card:not(.csx-card--big) .csx-card__img { flex: 0 0 104px; aspect-ratio: auto; }
  .csx-grid .csx-card:not(.csx-card--big) .csx-card__body { padding: 12px 12px 14px; gap: 6px; }
  .csx-grid .csx-card:not(.csx-card--big) .csx-card__metric-value { font-size: 18px; }
  .csx-grid .csx-card:not(.csx-card--big) .csx-card__title { font-size: 14px; -webkit-line-clamp: 2; }
  .csx-grid--featured { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; width: calc(100% + 20px); margin-right: -20px; padding-right: 20px; scrollbar-width: none; }
  .csx-grid--featured::-webkit-scrollbar { display: none; }
  .csx-grid--featured .csx-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- 個別: ヒーロー ---------- */
.csx-shero { background: var(--csx-soft); padding: 40px 0 72px; }
.csx-shero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.csx-shero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.csx-shero__tag { font-size: 12px; line-height: 1; padding: 7px 10px; border-radius: 4px; background: #fff; color: var(--csx-muted); }
.csx-shero__tag--ind { background: var(--csx-main); color: #fff !important; font-weight: 700; }
.csx-shero__tag--ind:hover { background: var(--csx-main-dark); }
.csx-shero__company { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--csx-main); }
.csx-shero__title { margin: 0 0 16px; font-size: 28px; line-height: 1.5; color: var(--csx-sub-dark); }
.csx-shero__summary { margin: 0; font-size: 15px; color: #444; line-height: 1.8; }
.csx-shero__img { border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 18px 40px -24px rgba(28, 61, 75, .5); }
.csx-shero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .csx-shero { padding: 16px 0 56px; }
  .csx-shero__inner { grid-template-columns: 1fr; gap: 20px; }
  .csx-shero__img { order: -1; }
  .csx-shero__title { font-size: 22px; }
}

/* ---------- 個別: 数字の帯 ---------- */
.csx-band { margin-top: -40px; position: relative; }
.csx-band__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: #fff; border: 1px solid var(--csx-line); border-radius: 14px; box-shadow: 0 12px 30px -20px rgba(28, 61, 75, .35); overflow: hidden; }
.csx-band__item { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--csx-line); margin-left: -1px; }
.csx-band__label { font-size: 13px; color: var(--csx-muted); line-height: 1.5; }
.csx-band__value { font-size: 26px; line-height: 1.35; color: var(--csx-main); }
.csx-band__note { font-size: 12px; color: var(--csx-muted); }
.csx-band__foot { margin: 8px 4px 0; font-size: 12px; color: #888; }
@media (max-width: 767px) {
  .csx-band__inner { grid-template-columns: 1fr 1fr; }
  .csx-band__item { padding: 14px; border-top: 1px solid var(--csx-line); margin-top: -1px; }
  .csx-band__value { font-size: 19px; }
}

/* ---------- 個別: 導入前と導入後 ---------- */
.csx-ba { display: grid; grid-template-columns: 1fr 48px 1fr; margin: 48px 0 0; }
.csx-ba--top { margin-top: 0; transform: translateY(-40px); margin-bottom: -40px; }
.csx-ba__box { border-radius: 14px; padding: 24px 26px; }
.csx-ba__box h2 { margin: 0 0 12px; font-size: 18px; }
.csx-ba__box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.csx-ba__box li { font-size: 16px; line-height: 1.85; } /* 行の高さ29.6pxを決め打ちにし、18pxのアイコンを上から5.8pxに置いて1行目の真ん中にそろえる */
.csx-ba__box li { position: relative; padding-left: 26px; margin: 0; } /* アイコンは1行目の高さの真ん中に置く（2026-10-20 本人「縦にずれている」） */
.csx-ba__box li::before { position: absolute; left: 0; top: 5.8px; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* 2026-10-19 本人FB: 上の面（薄いグレー）と導入前の箱の地が近く、見分けにくかった。2つの箱とも白にして線と影で浮かせ、
   導入前は灰色の線、導入後は緑の線で分ける */
.csx-ba__box { background: #fff; border: 1px solid var(--csx-line); box-shadow: 0 12px 30px -20px rgba(28, 61, 75, .35); }
.csx-ba__box--before { background: #fff; }
.csx-ba__box--before h2 { color: #555; }
.csx-ba__box--before li::before { content: "!"; background: #c9cfcd; color: #fff; }
.csx-ba__box--after { background: #fff; border-color: rgba(42, 129, 108, .45); } /* 上の太い線は付けない（2026-10-19 本人） */
.csx-ba__box--after h2 { color: var(--csx-main); }
.csx-ba__box--after li::before { content: "✓"; background: var(--csx-main); color: #fff; }
.csx-ba__box strong, .csx-ba__box b { color: var(--csx-main); }
.csx-ba__arrow { display: flex; align-items: center; justify-content: center; color: var(--csx-main); font-size: 24px; }
@media (max-width: 900px) {
  .csx-ba { grid-template-columns: 1fr; }
  .csx-ba__arrow { height: 40px; transform: rotate(90deg); }
}

/* ---------- 個別: 本文と横の欄 ---------- */
.csx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; margin-top: 56px; }
@media (max-width: 1023px) { .csx-layout { grid-template-columns: 1fr; gap: 32px; } .csx-side { order: -1; } }
.csx-article { max-width: 760px; font-size: 16px; line-height: 1.9; }
.csx-article p { margin: 0 0 1.2em; }
.csx-article .csx-b-h2 { font-size: 22px; line-height: 1.55; color: var(--csx-sub-dark); margin: 56px 0 20px; padding: 24px 0 0; border: 0; border-top: 1px solid var(--csx-line); background: none; text-align: left; scroll-margin-top: calc(var(--csx-head) + 16px); }
.csx-article .csx-b-h2::before, .csx-article .csx-b-h2::after { content: none; }
.csx-article .csx-b-h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.csx-article .csx-b-h3 { font-size: 18px; line-height: 1.6; color: var(--csx-sub-dark); margin: 36px 0 14px; padding: 0 0 0 12px; border: 0; border-left: 3px solid var(--csx-main); background: none; text-align: left; }
.csx-article .csx-b-h3::before, .csx-article .csx-b-h3::after { content: none; }
.csx-article .csx-b-q { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--csx-main-dark); margin: 28px 0 12px; font-size: 15px; line-height: 1.7; }
.csx-b-q__mark { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--csx-main); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.csx-b-who { display: inline-block; font-size: 12px; font-weight: 700; color: var(--csx-main); background: var(--csx-main-pale); border-radius: 4px; padding: 1px 8px; margin-right: 8px; vertical-align: 2px; line-height: 1.7; }
.csx-article strong { background: linear-gradient(transparent 62%, #fde3cc 62%); font-weight: 700; }
.csx-article figure { margin: 24px auto; }
.csx-article figure img { border-radius: 10px; border: 1px solid var(--csx-line); height: auto; }
.csx-article .wp-block-group.is-nowrap { gap: 12px; }
.csx-b-note { margin: -12px 0 32px; font-size: 14px; line-height: 1.75; color: var(--csx-muted); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.csx-b-note b { color: var(--csx-sub-dark); }
.csx-b-note strong { background: none; }
@media (max-width: 767px) {
  .csx-article { font-size: 15px; }
  .csx-article .csx-b-h2 { font-size: 20px; }
  .csx-article .csx-b-h3 { font-size: 16px; }
  .csx-article .wp-block-group.is-nowrap { flex-wrap: wrap !important; }
  .csx-article figure img { width: 100% !important; }
}

.csx-side__inner { position: sticky; top: calc(var(--csx-head) + 24px); display: flex; flex-direction: column; gap: 16px; }
.csx-box { border: 1px solid var(--csx-line); border-radius: 12px; padding: 18px 20px; background: #fff; }
.csx-box h3 { margin: 0 0 10px; font-size: 14px; color: var(--csx-sub-dark); }
.csx-toc ol { margin: 0; padding-left: 0; list-style: none; counter-reset: csx-toc; font-size: 13px; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; }
/* 番号は「01」の形にする（ページ内のほかの番号に合わせる。2026-10-20 本人） */
.csx-toc li { counter-increment: csx-toc; display: flex; gap: 8px; }
.csx-toc li::before { content: counter(csx-toc, decimal-leading-zero); flex: none; color: var(--csx-main); font-weight: 700; font-variant-numeric: tabular-nums; }
.csx-toc a { color: var(--csx-text); }
.csx-toc a:hover { color: var(--csx-main); }
.csx-toc li.is-on a { color: var(--csx-main); font-weight: 700; }
.csx-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; line-height: 1.6; }
.csx-info dt { color: var(--csx-muted); }
.csx-info dd { margin: 0; }
.csx-side-cta { background: var(--csx-main-pale); border: 0; }
.csx-side-cta p { margin: 0 0 12px; font-size: 13px; line-height: 1.7; }
.csx-side-cta .csx-btn { width: 100%; }
@media (max-width: 1023px) {
  .csx-side__inner { position: static; }
  .csx-toc, .csx-side-cta { display: none; }
}

/* ---------- 個別: 使われている機能・同じ業種の事例 ---------- */
.csx-more { margin-top: 72px; }
.csx-more:last-child { margin-bottom: 72px; }
.csx-more > h2 { font-size: 24px; color: var(--csx-sub-dark); margin: 0 0 6px; }
.csx-more > p { margin: 0 0 20px; font-size: 14px; color: var(--csx-muted); }
.csx-more .csx-feats { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; gap: 24px; }
@media (max-width: 1023px) { .csx-more .csx-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .csx-more .csx-feats { grid-template-columns: 1fr; } .csx-more > h2 { font-size: 20px; } }
.csx-more__link { display: inline-block; margin-top: 20px; font-weight: 700; color: var(--csx-main); font-size: 14px; }

/* ===================================
   2026-10-15 もう一工夫（本人指示）
   =================================== */

/* ---------- カード: 写真に数字を重ねる ---------- */
.csx-card__img { position: relative; }
.csx-card__badge { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); background: rgba(255, 255, 255, .96); border-radius: 10px; padding: 8px 12px 9px; box-shadow: 0 8px 20px -10px rgba(28, 61, 75, .5); display: flex; flex-direction: column; }
.csx-card__badge-label { font-size: 12px; color: var(--csx-muted); line-height: 1.4; }
.csx-card__badge-value { font-size: 22px; line-height: 1.25; color: var(--csx-main); font-weight: 700; }
.csx-card .csx-card__metric { display: none; } /* PCは写真の数字だけにする */
@media (max-width: 767px) {
  .csx-grid .csx-card:not(.csx-card--big) .csx-card__badge { display: none; }
  .csx-grid .csx-card:not(.csx-card--big) .csx-card__metric { display: flex; }
}

/* ---------- 一覧: 成果の大きい事例を雑誌風に ---------- */
@media (min-width: 768px) {
  .csx-grid--featured { grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 20px; }
  .csx-grid--featured .csx-card:first-child { grid-row: span 2; }
  .csx-grid--featured .csx-card:first-child .csx-card__img { aspect-ratio: auto; flex: 1; min-height: 360px; }
  .csx-grid--featured .csx-card:not(:first-child) { flex-direction: row; }
  .csx-grid--featured .csx-card:not(:first-child) .csx-card__img { flex: 0 0 46%; aspect-ratio: auto; min-height: 210px; }
  .csx-grid--featured .csx-card:not(:first-child) .csx-card__body { padding: 18px 20px; justify-content: center; }
  .csx-card--big .csx-card__badge { left: 16px; bottom: 16px; padding: 12px 16px 13px; }
  .csx-card--big .csx-card__badge-value { font-size: 26px; }
  .csx-grid--featured .csx-card:first-child .csx-card__badge { left: 24px; bottom: 24px; padding: 16px 20px; }
  .csx-grid--featured .csx-card:first-child .csx-card__badge-label { font-size: 13px; }
  .csx-grid--featured .csx-card:first-child .csx-card__badge-value { font-size: 40px; }
  .csx-grid--featured .csx-card:first-child .csx-card__title { font-size: 20px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .csx-grid--featured { grid-template-columns: 1fr; }
  .csx-grid--featured .csx-card:first-child { grid-row: auto; }
}

/* ---------- 動き（JSが .csx-js を付けたときだけ。動きを減らす設定では出さない） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .csx-js .csx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 70ms); }
  .csx-js .csx-reveal.is-in { opacity: 1; transform: none; }
  .csx-card.is-enter { animation: csx-enter .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 40ms); }
}
@keyframes csx-pop { to { opacity: 1; transform: none; } }
@keyframes csx-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- 個別: 本文の文字と行間（2026-10-15 本人指摘「文字が小さく行間が狭い」）----------
   main.css の .entry-content p { line-height: 1.6 !important } に負けていたので、行の高さは !important で当てる */
.csx .csx-article p,
.csx .csx-article li { font-size: 16px; line-height: 2 !important; letter-spacing: .02em; }
.csx .csx-article p { margin: 0 0 1.4em; }
.csx .csx-article .csx-b-q { font-size: 18px; line-height: 1.75 !important; margin: 40px 0 14px; }
.csx .csx-article .csx-b-q__mark { flex-basis: 26px; height: 26px; font-size: 13px; margin-top: 2px; }
.csx .csx-article .csx-b-who { font-size: 13px; padding: 2px 9px; margin-right: 10px; vertical-align: 2px; }
.csx .csx-article .csx-b-h3 { font-size: 20px; line-height: 1.65; margin-top: 44px; }
.csx .csx-article .csx-b-h2 { font-size: 24px; line-height: 1.6; }
.csx .csx-b-note { font-size: 14px; line-height: 1.75; }
.csx .csx-ba__box li { font-size: 16px; line-height: 1.85; }
.csx .csx-shero__summary { font-size: 16px; line-height: 1.95; }
@media (max-width: 767px) {
  .csx .csx-article p,
  .csx .csx-article li { font-size: 16px; line-height: 1.95 !important; letter-spacing: .01em; }
  .csx .csx-article .csx-b-q { font-size: 16px; }
  .csx .csx-article .csx-b-h2 { font-size: 20px; }
  .csx .csx-article .csx-b-h3 { font-size: 18px; }
  .csx .csx-ba__box li { font-size: 15px; }
}

/* ---------- マウスを乗せたときの色（2026-10-16 本人指摘「オレンジになるのが気持ち悪い」） ----------
   main.css の button:hover（背景オレンジ・文字白）が事例のボタンにも効いていたので、ここで上書きする */
.csx .csx-chip:hover { background: #fff; color: var(--csx-main); border-color: var(--csx-main); }
.csx .csx-chip.is-on,
.csx .csx-chip.is-on:hover { background: var(--csx-main); color: #fff; border-color: var(--csx-main); }
.csx .csx-bar__clear:hover { background: var(--csx-main-pale); color: var(--csx-main); border-color: var(--csx-main); }
.csx-jump:hover { background: #24505f; color: #fff; }

/* 一覧の見出しをやめた分、帯のすぐ下からカードを始める */
.csx-sec--list { padding-top: 28px; }
@media (max-width: 767px) { .csx-sec--list { padding-top: 20px; } }

/* ---------- 個別: 読みやすさ（2026-10-17 本人「目がすべる」「メリハリ」「質問と回答のデザイン」「名前の回り込み」） ----------
   - 章の見出しに 01・02 の番号を付けて大きくし、今どこを読んでいるかを分かりやすくする
   - 質問は薄い緑の帯に Q を付けて、答えとはっきり分ける
   - 答えは左の細い列に名前、右の列に本文。名前の札を文の頭に入れて回り込ませない（行頭がそろう） */
.csx .csx-article { counter-reset: csxsec; }
.csx .csx-article .csx-b-h2 { font-size: 26px; line-height: 1.5; margin: 72px 0 28px; padding-top: 32px; }
.csx .csx-article .csx-b-h2::before { content: counter(csxsec, decimal-leading-zero); counter-increment: csxsec; display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--csx-main); }
.csx .csx-article .csx-b-h3 { margin-top: 48px; }

.csx .csx-article .csx-b-q { background: var(--csx-main-pale); border-radius: 12px; padding: 16px 20px; margin: 48px 0 22px; font-size: 18px; line-height: 1.7 !important; color: var(--csx-sub-dark); }
.csx .csx-article .csx-b-q__mark { flex: 0 0 28px; height: 28px; font-size: 14px; margin-top: 0; }

.csx .csx-article .csx-b-ans { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 22px; margin: 0 0 1.4em; }
.csx .csx-article .csx-b-ans--cont { margin-top: -.2em; }
.csx .csx-article .csx-b-ans .csx-b-who { grid-column: 1; display: block; margin: 0; padding: 8px 0 0; background: none; border-radius: 0; border-top: 2px solid var(--csx-main); font-size: 13px !important; line-height: 1.5 !important; font-weight: 700; color: var(--csx-main); vertical-align: baseline; word-break: keep-all; }
.csx .csx-article .csx-b-say { grid-column: 2; min-width: 0; }
.csx .csx-article .csx-b-say p { margin: 0; }
.csx .csx-article .csx-b-ans + .csx-b-q { margin-top: 56px; }
@media (max-width: 767px) {
  .csx .csx-article .csx-b-h2 { font-size: 22px; margin-top: 56px; }
  .csx .csx-article .csx-b-q { font-size: 16px; padding: 14px 16px; }
  .csx .csx-article .csx-b-ans { grid-template-columns: 1fr; }
  .csx .csx-article .csx-b-ans .csx-b-who { display: flex; align-items: center; gap: 8px; border-top: 0; padding: 0; margin-bottom: 6px; }
  .csx .csx-article .csx-b-ans .csx-b-who::before { content: ''; width: 16px; height: 2px; background: var(--csx-main); }
  .csx .csx-article .csx-b-say { grid-column: 1; }
}