/* =========================
  Voice (Before/After + Reviews)
========================= */
.lp-voice {
    background: #dff2f7;
    padding: 64px 0 80px;
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.lp-voice__inner{
  width:min(1040px, calc(100% - 40px));
  margin:0 auto;
  position:relative;
}

/* --- Before/After title --- */
.lp-voice__ba-title{
  text-align:center;
  margin-bottom:16px;
}
.lp-voice__ba-lead{
  font-weight:800;
  font-size:28px;
  line-height:1.2;
  margin:0 0 6px;
  color:#0a1b2a;
}
.lp-voice__ba-head{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.lp-voice__ba-main{
  font-weight:900;
  font-size:34px;
  line-height:1.2;
  color:#1f47b6;
}
.lp-voice__ba-slash{
  width:32px;
  height:2px;
  background:#0a1b2a;
  transform:rotate(55deg);
  border-radius:999px;
}
.lp-voice__ba-slash:last-child{
  transform:rotate(-55deg);
}

/* --- Before/After grid --- */
.lp-voice__ba-grid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:18px auto 14px;
}

.lp-voice__ba-item{
  position:relative;
  width:min(420px, 44vw);
  margin:0;
}
.lp-voice__ba-item img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}

.lp-voice__ba-arrow{
  width:0;
  height:0;
  border-left:14px solid #f2c300;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.08));
}

.lp-voice__tag{
  position:absolute;
  top:10px;
  left:-10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:#162b78;
  color:#fff;
  font-weight:800;
  font-size:14px;
  border-radius:10px;
  letter-spacing:.02em;
}
.lp-voice__tag-dot{
  width:10px;
  height:10px;
  border-radius:2px;
  background:#f2c300;
  display:inline-block;
}

.lp-voice__ba-note{
  position:absolute;
  right:10px;
  bottom:10px;
  font-size:12px;
  color:#111;
  background:rgba(255,255,255,.75);
  padding:4px 8px;
  border-radius:8px;
}

.lp-voice__ba-text{
  width:min(820px, 100%);
  margin:0 auto 42px;
  font-size:14px;
  line-height:2.0;
  color:#0a1b2a;
}

/* --- Section Title (たくさんのお喜びの声) --- */
.lp-voice__head{
  text-align:center;
  margin:10px 0 22px;
}
.lp-voice__title{
  margin:0;
  font-size:30px;
  font-weight:900;
  color:#1f47b6;
  letter-spacing:.03em;
}
.lp-voice__underline{
  display:inline-block;
  width:88px;
  height:10px;
  border-radius:999px;
  background:#f2c300;
  margin-top:10px;
}

/* --- Cards --- */
.lp-voice__cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  align-items:stretch;
}

.lp-voice__card{
  background:#fff;
  border:2px solid rgba(31,71,182,.25);
  border-radius:12px;
  padding:22px 22px 26px;
  position:relative;
  min-height:220px;
}

.lp-voice__card-body p{
  margin:0;
  font-size:14px;
  line-height:2.0;
  color:#0a1b2a;
}

/* 強調（デザインの青文字に合わせる） */
.lp-voice__em{
  color:#1f47b6;
  font-weight:800;
}

/* 右下イラスト */
.lp-voice__illust{
  position:absolute;
  right:-10px;
  bottom:-6px;
  width:62px;
  height:auto;
  pointer-events:none;
  user-select:none;
}

/* deco triangles */
.lp-voice__deco{
  position:absolute;
  width:86px;
  height:auto;
  pointer-events:none;
  user-select:none;
  opacity:.95;
}
.lp-voice__deco--left{
  left:-6px;
  top:55%;
  transform:translateY(-50%);
}
.lp-voice__deco--right{
  right:-6px;
  top:55%;
  transform:translateY(-50%);
}

/* --- Responsive --- */
@media (max-width: 900px){
  .lp-voice__ba-lead{ font-size:22px; }
  .lp-voice__ba-main{ font-size:26px; }
  .lp-voice__title{ font-size:24px; }
  .lp-voice__cards{ grid-template-columns:1fr; }
  .lp-voice__card{ min-height:auto; padding-bottom:44px; }
  .lp-voice__illust{ right:8px; bottom:-10px; width:74px; }

  /* SPでもbefore/afterは横並び維持 */
  .lp-voice__ba-item{ width:min(320px, 41vw); }
  .lp-voice__ba-grid{ gap:14px; }
  .lp-voice__ba-arrow{ border-left-width:12px; border-top-width:10px; border-bottom-width:10px; }

  .lp-voice__deco{ width:72px; }
}



/* =========================
  Voice（お客様の声）- Deco
========================= */
.lp-voice{
  position: relative;
  overflow: hidden; /* はみ出しを隠す（必要なら visible に） */
}

.lp-voice__deco{
  position: absolute;
  width: 72px;          /* 好みで */
  height: auto;
  pointer-events: none;
  z-index: 0;           /* 背面 */
}

.lp-voice__deco--left{
  left: -18px;          /* 外側にはみ出す */
  top: 52%;
  transform: translateY(-50%);
}

.lp-voice__deco--right{
  right: -18px;
  top: 52%;
  transform: translateY(-50%);
}

/* カードを前面に */
.lp-voice__cards,
.lp-voice__card{
  position: relative;
  z-index: 1;
}

/* SP微調整：カードが縦積みになるので “タイトル〜1枚目の間” ぐらいに寄せる */
@media (max-width: 768px){
  .lp-voice__deco{
    width: 56px;
  }
  .lp-voice__deco--left,
  .lp-voice__deco--right{
    top: clamp(520px, 48vw, 300px);
    transform: translateY(-50%);
  }
  .lp-voice__deco--left{ left: -16px; }
  .lp-voice__deco--right{ right: -16px; }
}
