:root{
  --c-main:#0e2a3f;
  --c-blue:#3E8FB3;
  --c-brand:#2a86b6;
  --c-card:#3f8db6;         /* カード下半分のブルー */
  --bg-soft:#e9f3f8;
}

/* セクション全体 */
.reasons{
  padding: 13.6rem 16px 11rem;
  background:#fff;
}
.reasons-inner{
  max-width: 1200px;       /* 上セクションと同じ幅に統一 */
  margin: 0 auto;
}

/* 見出し */
.reasons-head{
  text-align:center;
  margin-bottom: var(--f40);
}
.reasons-title{
  font-weight: 700;
  font-size: var(--f50);
  letter-spacing:.02em;
  line-height:1.2;
  margin: 0;
}
.reasons-title .accent-main{ color:#0b2746; } /* M / A */
.reasons-title .accent-sub{  color:#3f8db6; } /* to / が選ばれる理由 */
.reasons-divider{
   display: block;
  width: 100px;
  height: 10px;
  margin-bottom: 5.1rem;
  margin:3.43rem auto 4.8rem;
  background: var(--c-blue);
}

/* グリッド（余白をしっかり詰める＆可変カラム） */
.reason-grid{
  list-style:none; padding:0;
  margin: 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 12px;            /* ← 横の隙間を小さめに */
  row-gap: 32px;
}

/* カード */
.reason-card{
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  margin:0;
  width:100%;
  max-width: 380px;
  border: solid 1px #3f8db6;
}

/* 上：写真（少しだけ縦長にして圧迫感を減らす） */
.reason-media{ margin:0; overflow:hidden; }
.reason-media img{
  width:100%; height:100%; object-fit: cover; filter: saturate(.9);
}

/* 下：ブルー帯＋アイコン */
.reason-body{
  position:relative; background: var(--c-card); color:#fff;
  min-height: 150px;
}

/* 重なり丸アイコン（少し小さめ） */
.reason-icon{
  position:absolute; left:50%; top:0; transform: translate(-50%,-50%);
  width: 47%;
  aspect-ratio: 380/237;
  display:grid; place-items:center;
}
.reason-icon img{ width: 100%; }

/* テキスト */
.reason-text{
  text-align:center;
  font-size: var(--f25);
  line-height:1.9; font-weight:600; letter-spacing:.02em;
  margin: 5rem auto; /* アイコン分の余白（縮小に合わせて調整） */
  font-feature-settings: "palt";
}

/* CTAボタン */
.reasons-cta{ display:flex; justify-content:center;
  margin-top: 4.75rem;
}
.btn-pill {
  display: inline-block;
  padding: 1em 1.8em;
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--f30);
  color: #fff;
  text-decoration: none;
  letter-spacing: .04em;
  background: linear-gradient(90deg, #0023d0 0%, #2a86b6 50%, #0023d0 100%);
  background-size: 200% 100%;
  transition: all .3s ease;
}

.btn-pill:hover{ background-position: 100% 0; }

@media(max-width: 810px){
  .reason-text{
    font-size: 2.47vw;
  }
}


@media(max-width:765px){
  .reasons{
    padding: 140px 1rem;
  }
  .reasons-title{
    font-size: var(--f40);
  }
  .reasons-divider{
   display: block;
    width: 81px;
    height: 10px;
    margin-bottom: 5.1rem;
    margin:3.43rem auto 4.8rem;
}
  .reason-grid{
    grid-template-columns: 1fr;
    max-width: 380px; /* カード自体の幅を制御 */
    width: 90%;
    margin-inline:auto;
    gap: var(--f55);
  }

  .reason-text{
    font-size: var(--f25);
    margin: 75px auto;
  }

 .reasons-cta{
    margin-top: 9.54vw;
  }
}

@media(max-width:430px){
    .btn-pill{
   min-width: 100px;
  }

}