/* ============ 05 FEATURE — 業界初 アプリを使った令和の街コン ============ */
/* PC: bg svg 1440x599, cards 4x 269x307 (gap16), row width 1124 centered   */

.feature{
  background:
    url(../assets/pc/feature-bg.svg) center top / cover no-repeat,
    linear-gradient(115deg, var(--pink) 0%, var(--pink-grad-end) 100%);
  padding:54px 0 62px;
}
.feature-inner{
  max-width:1124px;
  margin:0 auto;
}
.feature-label{
  color:#fff;
  font-size:32px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
}
.feature-title{
  color:#fff;
  font-size:32px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.03em;
  text-align:center;
  margin-top:6px;
}
.feature-cards{
  margin-top:74px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.feature-card{
  background:#fff;
  border-radius:20px;
  min-height:307px;
  padding:38px 12px 30px;
  text-align:center;
}
.feature-card-icon{
  width:94px;
  height:94px;
  margin:0 auto;
}
.feature-card-text{
  margin-top:35px;
  font-size:16px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--ink);
}

/* ============ SP: bg svg 375x787, cards 2x2 162x239 (gap 16/10) ============ */
@media (max-width:767px){
  .feature{
    background:
      url(../assets/sp/feature-bg.svg) center top / cover no-repeat,
      linear-gradient(115deg, var(--pink) 0%, var(--pink-grad-end) 100%);
    padding:61px 0 66px;
  }
  .feature-inner{
    max-width:none;
    padding:0 20px;
  }
  .feature-label{
    font-size:24px;
  }
  .feature-title{
    font-size:24px;
    line-height:1.2;
    letter-spacing:.02em;
    margin-top:8px;
  }
  .feature-cards{
    margin-top:63px;
    grid-template-columns:repeat(2,1fr);
    gap:16px 10px;
  }
  .feature-card{
    min-height:239px;
    border-radius:20px;
    padding:22px 6px 20px;
  }
  .feature-card-icon{
    width:62px;
    height:62px;
  }
  .feature-card-text{
    margin-top:23px;
    font-size:14px;
    line-height:22px;
    letter-spacing:.02em;
  }
}