/* ===== feature ===== */
body{
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
    -webkit-font-smoothing:antialiased;
  }
/* ===== Section ===== */
.feature{
    position:relative;
    background:var(--blue);
    padding:80px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    overflow:hidden;
  }
/* 背景マーキーは components/watermark.css の .watermark-marquee を使用（ctabandと共通） */
.feature .sec-head{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    color:var(--white);
  }
.feature .sec-head h2{
    font-size:40px;
    font-weight:900;
    line-height:1.4;
  }
.feature .sec-head p{
    max-width:560px;   /* サイズ/太さ/行間は共通ルール(16px/500/1.6)を継承 */
  }
.feature-list{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1020px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
  }
.feature-item{
    flex:1 1 0;
    max-width:320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:0 20px;
  }
.feature-img{
    width:140px;
    height:168px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
.feature-img img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
.feature-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
    color:var(--white);
  }
.feature-text h3{
    font-size:20px;
    font-weight:700;
    line-height:1.3;
  }
.feature-text p{
    font-size:16px;
    font-weight:400;
    line-height:1.6;
    letter-spacing:.01em;
    color:var(--sub);
  }
/* CTA */
.cta{
    position:relative;
    z-index:1;
    display:flex;flex-direction:column;align-items:center;gap:4px;width:320px;
  }
/* ===== Responsive ===== */
@media (max-width:900px){
.feature .sec-head h2{font-size:30px}
.feature-list{gap:12px}
.feature-item{padding:0 8px}
.feature-text p{font-size:14px}
}
@media (max-width:640px){
.feature{padding:56px 20px;gap:32px}
.feature .sec-head h2{font-size:26px}
/* SP: 強制改行を解除して自然に3行へ */
.pc-br{display:none}
/* SP: 3項目を縦積み */
.feature-list{
      flex-direction:column;
      align-items:center;
      gap:32px;
      max-width:350px;
    }
.feature-item{
      flex:0 0 auto;
      width:100%;
      max-width:320px;
      padding:0;
    }
.feature-text h3{font-size:20px}
.feature-text p{font-size:16px}
.cta{width:100%;max-width:350px}
.btn-primary .btn-text{font-size:20px}
}