/* =============================================================
 * 事例カード（.ccx）  v1.49.0
 * -------------------------------------------------------------
 * 課題ページ・サービスページの途中に置く、サムネ主体の事例カード。
 * /works/ の一覧カード（.works-card）とは別部品。あちらは情報量が
 * 多いので、ページ内の導線としてはこちらを使う。
 * スマホは1列。横スクロールはしない（写真を左・文字を右の横組み）。
 * ============================================================= */
.pm-mock .ccx{ margin:44px 0 0; }
.pm-mock .ccx-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:10px; border-bottom:2px solid var(--navy,#1B224C);
}
.pm-mock .ccx-head h3{
  margin:0; font-size:21px; font-weight:900; line-height:1.5; color:var(--navy,#1B224C);
}
.pm-mock .ccx-all{
  flex:none; font-size:14px; font-weight:700; white-space:nowrap;
  color:var(--sky-dark,#14719F); text-decoration:none;
}
.pm-mock .ccx-all:hover{ text-decoration:underline; }
.pm-mock .ccx-lead{
  margin:12px 0 0; font-size:15.5px; line-height:1.85; color:var(--sub,#5C6B80);
}

.pm-mock .ccx-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px;
}
.pm-mock .ccx-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line,#E2E8F1); border-radius:6px;
  text-decoration:none; color:inherit;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.pm-mock .ccx-card:hover{
  border-color:var(--sky,#1C93D2); transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(28,147,210,.13);
}
.pm-mock .ccx-thumb{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/9; background:#fff; border-bottom:1px solid var(--line,#E2E8F1);
  overflow:hidden;
}
.pm-mock .ccx-thumb img{
  width:100%; height:100%; object-fit:contain; padding:8px;
  box-sizing:border-box; display:block;
}
.pm-mock .ccx-noimg{
  font-family:'Poppins',sans-serif; font-size:14px; font-weight:800;
  letter-spacing:.1em; color:var(--navy,#1B224C); text-align:center; padding:0 14px;
}
.pm-mock .ccx-body{
  display:flex; flex-direction:column; flex:1; padding:14px 16px 13px;
}
.pm-mock .ccx-badge{
  align-self:flex-start; margin-bottom:8px; padding:3px 9px;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; line-height:1.6; color:#fff;
}
.pm-mock .ccx-badge--iv{ background:var(--sky,#1C93D2); }
.pm-mock .ccx-badge--cs{ background:var(--navy,#1B224C); }
.pm-mock .ccx-ttl{
  font-size:16.5px; font-weight:900; line-height:1.6; color:var(--navy,#1B224C);
}
.pm-mock .ccx-meta{
  margin-top:6px; font-size:13.5px; line-height:1.7; color:var(--sub,#5C6B80);
}
.pm-mock .ccx-more{
  margin-top:auto; padding-top:10px; font-size:13.5px; font-weight:700;
  color:var(--sky-dark,#14719F);
}

@media (max-width:1023px){
  .pm-mock .ccx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
}
@media (max-width:640px){
  .pm-mock .ccx{ margin-top:30px; }
  .pm-mock .ccx-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .pm-mock .ccx-head h3{ font-size:19px; }
  .pm-mock .ccx-all{ font-size:13.5px; }
  .pm-mock .ccx-lead{ font-size:14.5px; }

  /* 1列。カードは写真を左、文字を右の横組みにして高さを抑える */
  .pm-mock .ccx-grid{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .pm-mock .ccx-card{ flex-direction:row; align-items:stretch; }
  .pm-mock .ccx-thumb{
    flex:0 0 118px; aspect-ratio:auto; border-bottom:0;
    border-right:1px solid var(--line,#E2E8F1);
  }
  .pm-mock .ccx-thumb img{ padding:6px; }
  .pm-mock .ccx-body{ padding:11px 13px 11px; }
  .pm-mock .ccx-badge{ margin-bottom:6px; padding:2px 7px; font-size:10.5px; }
  .pm-mock .ccx-ttl{ font-size:15px; }
  .pm-mock .ccx-meta{ margin-top:4px; font-size:12.5px; }
  .pm-mock .ccx-more{ padding-top:8px; font-size:12.5px; }
}

/* -------------------------------------------------------------
 * VOICE をカード型にしたとき用  v1.49.0
 * 声のコメントを1枚のカードに収める。カードの見た目は事例カードと同じ。
 * ------------------------------------------------------------- */
.pm-mock .ccx-grid--voice{ margin-top:18px; }

/* 声のカードは枚数が増えても1段のまま、横スクロールで見せる（v2.54.0）
   3枚までは横幅に収まるので見た目は変わらない。4枚以上でスクロールになる。
   スマホは assets/js/sp-swipe.js が .is-swipe を付けて1.15枚見せにするので、
   そちらが優先される（詳細度が上）。 */
.pm-mock .ccx-grid--voice{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(300px,1fr);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.pm-mock .ccx-grid--voice > *{ scroll-snap-align:start; }
.pm-mock .ccx-card--voice .ccx-ttl{ font-size:15.5px; }
.pm-mock .ccx-quote{
  margin-top:8px; font-size:14.5px; line-height:1.85; color:var(--sub,#5C6B80);
}
@media (max-width:640px){
  .pm-mock .ccx-card--voice .ccx-ttl{ font-size:14.5px; }
  .pm-mock .ccx-quote{ margin-top:6px; font-size:13px; }
}

/* 遷移先が無い声のカード（記事がまだ無いお客様）。hover の反応を消す */
.pm-mock .ccx-card--flat{ cursor:default; }
.pm-mock .ccx-card--flat:hover{
  border-color:var(--line,#E2E8F1); transform:none; box-shadow:none;
}

/* =============================================================
 * 本文の「〜事例」見出しの下に置くとき（v1.85.5）
 * -------------------------------------------------------------
 * 見出しに下線があるので、カード側の見出し帯にも線があると
 * セクションが2つあるように見える。線と余白を外す。
 * ============================================================= */
.pm-mock .ccx--inline{ margin-top:16px; }
.pm-mock .ccx--inline .ccx-head{
  padding-bottom:0; border-bottom:0; justify-content:flex-end; margin-bottom:-4px;
}
.pm-mock .ccx--inline .ccx-grid{ margin-top:14px; }

/* =============================================================
 * v1.88.0  文字サイズの統一（typography.css の8段階に寄せる）
 * -------------------------------------------------------------
 * 見出し 28 / 22・リード 21・本文 18・ボックス内 16・注記/タグ 14。
 * 0.5px 刻みと 14px 未満をなくすための上書き。自動で役割を判定して
 * 生成しているので、元の指定は書き換えていない。
 * 見た目がおかしい箇所は、このブロックの該当行を消せば元に戻る。
 * ヘッダー・ナビ・ボタン・数値の強調・ヒーローは対象外。
 * ============================================================= */

.pm-mock .ccx-head h3{font-size:22px}
.pm-mock .ccx-lead{font-size:21px}
.pm-mock .ccx-badge{font-size:14px}
.pm-mock .ccx-ttl{font-size:18px}
.pm-mock .ccx-meta{font-size:14px}
.pm-mock .ccx-more{font-size:14px}
.pm-mock .ccx-card--voice .ccx-ttl{font-size:18px}
.pm-mock .ccx-quote{font-size:18px}

@media (max-width:900px){
  .pm-mock .ccx-head h3{font-size:19px}
  .pm-mock .ccx-lead{font-size:17px}
  .pm-mock .ccx-badge{font-size:13px}
  .pm-mock .ccx-ttl{font-size:16px}
  .pm-mock .ccx-meta{font-size:13px}
  .pm-mock .ccx-more{font-size:13px}
  .pm-mock .ccx-card--voice .ccx-ttl{font-size:16px}
  .pm-mock .ccx-quote{font-size:16px}
}

@media (max-width:640px){
  .pm-mock .ccx-all{font-size:14.5px}
  .pm-mock .ccx-lead{font-size:16px}
  .pm-mock .ccx-badge{font-size:13px}
  .pm-mock .ccx-ttl{font-size:16px}
  .pm-mock .ccx-meta{font-size:13px}
  .pm-mock .ccx-more{font-size:13px}
  .pm-mock .ccx-card--voice .ccx-ttl{font-size:16px}
  .pm-mock .ccx-quote{font-size:16px}
}