/* =========================
   導入事例（cases）— カンプ準拠 専用CSS
   ========================= */
:root{
  --cases-accent:#009245;
  --cases-title-color:#009145;
  --cases-col-gutter:28px;
  --cases-pad:20px;
  --cases-radius:12px;
  --cases-shadow:0 8px 20px rgba(0,0,0,.08);
  --cases-title-gap:50px;

  --cases-ic-size-pc:80px;
  --cases-ic-size-sp:70px;

  /* 横棒 長さ：現状の3倍（従来46px → 138px） */
  --cases-bar-w-pc: 138px;
  --cases-bar-w-sp: 108px;  /* SPは少し短めに調整 */
}

/* セクション共通 */
.cases{ padding:3.5em 0; }
.cases__inner{ width:min(1040px,92%); margin:0 auto; }

/* H2：中央＋短い下線 */
.cases__title{ 
text-align: center;
  margin: 0 0 var(--cases-title-gap);
  font-size: 1.6rem;   /* 「導入事例」に合わせる（PC） */
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .04em;
 }
.cases__title > span{
  display: inline-block;
  padding: 0;
  position: static;
}


/* 横長2行（S社・N社） */
.cases__rows{ display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 10%;}
.cases__row{
  position:relative; overflow:hidden; text-align:left;
  background:#E2F1E8; border-radius:var(--cases-radius); box-shadow:var(--cases-shadow);
  padding:calc(var(--cases-pad) + 42px) calc(var(--cases-pad) + 10px) var(--cases-pad);
}
/* 横棒（中央・上辺寄せ） */
.cases__row::before{
  content:""; position:absolute; left:0; right:0; margin:0 auto;
  top:10px; width:var(--cases-bar-w-pc); height:4px;
  background:var(--cases-accent); border-radius:9999px;
}

/* 右上アイコン（各行ごとに background-image を指定） */
.cases__icon{
  position:absolute; top:16px; right:16px;
  width:var(--cases-ic-size-pc); height:var(--cases-ic-size-pc);
  border-radius:12px; background-position:center; background-repeat:no-repeat; background-size:contain;
}

/* ヘッダ全体を30%スケールアップ（テキストサイズで実現） */

.cases__row .cases__logo{
  font-size: 1.95rem;               /* 1.5rem × 1.3（=30%UP） */
  line-height: 1.1;
  font-weight: 800;
  color: var(--cases-title-color);
  display: inline-block;
  margin-right: .7em;
}


/* テキスト */
.cases__head{ margin: 0 0 10px;  }
.cases__logo{ 
  font-size: 1.95rem;               /* 1.5rem × 1.3（=30%UP） */
  line-height: 1.1;
  font-weight: 800;
  color: var(--cases-title-color);
  display: inline-block;
  margin-right: .7em;
 }
.cases__meta{ 
display: inline-block;
  font-weight: 700;
  color: var(--cases-title-color);
  font-size: 1.3rem;                /* 見出しに合わせて約30%UP相当 */
  line-height: 1.2;
 }
.cases__body{   
    margin-top: 28px;                 /* 被り具合で ±4〜8px 調整 */
  line-height: 1.8; }
.cases__text{ margin:0 0 10px; }


/* お客様の声：2×2 白背景 */
.cases__grid--voices{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--cases-col-gutter);
}
.cases__grid--voices .cases__card{
  position:relative; overflow:hidden; text-align:left;
  background:#fff; border-radius:var(--cases-radius); box-shadow:var(--cases-shadow);
  padding:calc(var(--cases-pad) + 42px) calc(var(--cases-pad) + 10px) var(--cases-pad);
}
/* 白カードの棒 */
.cases__grid--voices .cases__card::before{
  content:""; position:absolute; left:0; right:0; margin:0 auto;
  top:10px; width:var(--cases-bar-w-pc); height:4px; background:var(--cases-accent); border-radius:9999px;
}

/* ピル見出し（声のタイトル） */
.cases__pill{ font-weight:700; line-height:1.5; font-size:1.2rem; color:var(--cases-title-color); }

/* 人物アイコンは枠いっぱい（cover） */
.cases__avatar{
  position:absolute; top:16px; right:16px;
  width:var(--cases-ic-size-pc); height:var(--cases-ic-size-pc);
  border-radius:12px; background-position:center; background-repeat:no-repeat; background-size:cover;
}

/* SP（〜768px） */
@media (max-width:768px){
    :root{
    --cases-title-gap:30px;
    }
  .cases{ padding:2.2em 0; }
    .cases__row .cases__logo{ font-size: 1.7rem; }
  .cases__row .cases__meta{ font-size: 1.15rem; }
  .cases__row .cases__body{ margin-top: 20px; }
  .cases__title > span::after,
  .cases__subttl > span::after{ width:var(--cases-bar-w-sp); }

  .cases__icon, .cases__avatar{
    top:12px; right:12px; width:var(--cases-ic-size-sp); height:var(--cases-ic-size-sp);
    margin-right: 0;
  }
.cases__rows{
    margin-bottom: 50px;
}
  .cases__row{ padding:calc(var(--cases-pad) + 34px) calc(var(--cases-pad) + 10px) var(--cases-pad); }
  .cases__row::before{ top:8px; width:var(--cases-bar-w-sp); }

  .cases__grid--voices{ grid-template-columns:1fr; }
  .cases__grid--voices .cases__card{
    padding:calc(var(--cases-pad) + 34px) calc(var(--cases-pad) + 10px) var(--cases-pad);
    
  }
  .cases__grid--voices .cases__card::before{ top:8px; width:var(--cases-bar-w-sp); }

  /* 追加：タイトルがアバター下に潜り込まないように幅を制限 */
.cases__grid--voices .cases__card .cases__pill{
  display: block;
  max-width: calc(100% - var(--cases-ic-size-sp) - 20px);
}


}