/* ============ 03 HOW IT'S DIFFERENT ============ */
/* PC: card floats with 80px page margins; bg asset is pre-tinted
   (#6FA2F3 -> #DE97F2 gradient already baked into how-bg.png) */
.how{
  padding:0 80px;
  background:#fff;
}
.how-inner{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  border-radius:40px;
  overflow:hidden;
  background:url(../assets/pc/how-bg.webp) center/cover no-repeat;
  padding:70px 0 60px;
}
.how-label{
  color:#fff;
  font-size:15px;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  text-align:center;
}
.how-title{
  margin-top:19px;
  color:#fff;
  font-size:28px;
  font-weight:700;
  line-height:1;
  letter-spacing:.19em;
  text-indent:.19em;
  text-align:center;
}
.how-bubble{
  position:absolute;
  top:173px;
  right:207px;
  width:62px;
  height:auto;
}
.how-cards{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:93px;
}
.how-card{
  width:326px;
  background:#fff;
  border-radius:20px;
  padding:29px 30px 19px;
}
.how-card--new{border:2px solid var(--pink)}
.how-card--old{border:2px solid var(--gray-pill)}
.how-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  border-radius:18px;
  margin:0 auto;
  color:#fff;
  font-weight:700;
}
.how-card--new .how-pill{
  width:207px;
  background:linear-gradient(90deg,var(--pink) 45%,var(--pill-pink-end));
  font-size:20px;
  letter-spacing:.08em;
  text-indent:.08em;
}
.how-card--old .how-pill{
  width:204px;
  background:var(--gray-pill);
  font-size:18px;
  letter-spacing:.02em;
  text-indent:.02em;
}
.how-item{
  position:relative;
  height:111px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:14px;
  font-weight:700;
  line-height:2;
}
.how-item span{position:relative;z-index:1}
.how-sep{
  height:1px;
  width:100%;
  margin:0 auto;
}
.how-card--new .how-sep{background:var(--pink)}
.how-card--old .how-sep{background:#1C1C1C}
/* big pale-gray X behind each "old" item (flat #D9D9D9 = #B5B5B5 @60% on white,
   pre-blended so the crossing stays uniform) */
.how-card--old .how-item::before,
.how-card--old .how-item::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:90px;
  height:20px;
  border-radius:8px;
  background:#D9D9D9;
}
.how-card--old .how-item::before{transform:translate(-50%,-50%) rotate(45deg)}
.how-card--old .how-item::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ============ SP (375 design) ============ */
@media (max-width:767px){
  .how{padding:0 12px}
  .how-inner{
    border-radius:20px;
    background-image:url(../assets/sp/how-bg.webp);
    padding:57px 10px 77px;
  }
  .how-label{font-size:11px;letter-spacing:0}
  .how-title{
    margin-top:12px;
    font-size:22px;
    line-height:30px;
    letter-spacing:.14em;
    text-indent:.14em;
  }
  .how-bubble{top:127px;right:35px;width:30px}
  .how-cards{gap:8px;margin-top:46px}
  .how-card{
    width:calc((100% - 8px)/2);
    border-radius:16px;
    padding:22px 5px;
  }
  .how-card--new{border-width:3px}
  .how-pill{height:23px;border-radius:12px}
  .how-card--new .how-pill{
    width:119px;
    font-size:15px;
    letter-spacing:.04em;
    text-indent:.04em;
  }
  .how-card--old .how-pill{
    width:146px;
    font-size:15px;
    letter-spacing:0;
    text-indent:0;
  }
  .how-item{height:79px;font-size:12px;line-height:1.55}
  .how-sep{width:calc(100% - 10px)}
  .how-card--old .how-item::before,
  .how-card--old .how-item::after{
    width:58px;
    height:13px;
    border-radius:5px;
  }
}