:root{
  --c-main:#0b2746;
  --c-blue:#3f8db6;
  --c-brand:#2a86b6;
  --bg-soft:#e9f1f4;
}

/* セクション */
.why{ background: var(--bg-soft); padding: 10rem 16px 7.6rem; }
.why-inner{ max-width: 1200px; margin: 0 auto; }

/* 見出し */
.why-head{ text-align:center; margin-bottom:50px; }
.why-title {
  font-weight: 800;
  font-size: clamp(30px, 2.6vw, 50px);
  line-height: 1.2;
  color: var(--c-main); /* 紺 #0e2a3f */
}

.why-title .accent-sub {
  color: var(--c-blue); /* 水色 #3E8FB3 */
}

.why-divider{
   display: block;
  width: 100px;
  height: 10px;
  margin-bottom: 5.1rem;
  background: var(--c-blue);
   margin:3.43rem auto 5.6rem;
}
.sp-br{ display:none; }

/* ワイドカード（左右に画像／テキスト） */
.why-card{
  display: grid;
  grid-template-columns: 1fr 35%; /* 本文 / 画像 */
  gap: 20px;
  align-items: center;
  border: 1px solid var(--c-blue);
  background: #fff;
  margin: clamp(18px,3vw,24px) 0;
}
.why-card.is-left{ grid-template-columns: 35% 1fr; }
.why-card-body p{
  font-size: clamp(20px, 2.5vw, 40px);
  font-weight: 500;
  color: var(--c-main);
  margin: 0;
  display: flex;
  align-items: center; /* 縦中央 */
  justify-content: center; /* 横中央 */
  line-height: 1.2;
}
.why-card-media{
  aspect-ratio: 425/323;
  overflow: hidden;
  margin: 0;
}
.why-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* チャート */
.why-chart{ text-align:center; margin: clamp(20px,4vw,36px) 0; }
.why-chart-title{
  font-size: clamp(30px, 2.08vw, 40px);
  font-weight: 500;
  color: var(--c-blue);
  letter-spacing:.04em;
  margin: 5rem auto 0;
}
.why-subdivider{
  display:block; width: 100%; height: 1px; margin: 1.18rem auto 5.62rem;
  max-width: 1000px;
  background: var(--c-blue); border-radius: 999px;
}
.why-chart-figure{
  max-width: 1000px; margin: 0 auto 6rem;
  width: 90%;
}
.why-chart-figure img{ width:100%; height:auto; }

/* 締め＆CTA */
.why-copy{
  text-align:center;
  color: var(--c-main);
  font-size: var(--f40);
  margin:6.75rem auto 2.3rem;
  font-weight: 700;
}
.why-cta{ display:flex; justify-content:center; }
.btn-pill{
  display:inline-block; padding: 1em 1.8em; border-radius: 999px;
  font-weight: 700; 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;
  text-align: center;
  min-width: 426px;
}
.btn-pill:hover{ background-position: 100% 0; }

.pc-br{ display:inline;}

/* SP */
@media (max-width: 768px) {

  .why{
    padding: 70px 1em;
  }

    .reasons-divider{
    display: block;
    width: 81px;
    height: 10px;
    margin-bottom: 5.1rem;
    margin:50px auto 105px;
  }

  .why-card {
    grid-template-columns: 1fr; /* 縦並び */
    padding: 24px; /* 内側の余白を少し減らす */
  }
  .why-inner {
    padding-inline: 24px; /* 左右に少し広めの余白 */
  }
  .why-card-media {
    width: 80%; /* 横幅を画面幅の90%に */
    margin: 0 auto; /* 中央寄せ */
    max-width: 324px;
  }
  .why-title {
    font-size: clamp(22px, 5vw, 40px);
    line-height: 1.4;
  }
  .why-card-body p {
    text-align: center;
    font-size: var(--f36);
  }

  .sp-br{ display:inline;}
  .pc-br{display: none;}

  /* 縦並びに切替 */
  .why-card{
    display: flex;              /* ← grid を上書き */
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .why-chart-title{
    font-size: var(--f36);
    margin-top: 70px;
  }

  .why-subdivider{
    margin: 18px auto 40px;
  }

  .why-chart-figure {
    text-align: center; /* 中央寄せ */
    width: 100%;
    margin-bottom: 84px;
  }
  .why-chart-figure img {
    width: 100%;
    object-fit: contain;   
  }
  /* テキストを上に */
  .why-card > .why-card-body{
    order: -1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    font-size: clamp(18px, 4vw, 36px);
  }

  .why2{ display:none; }
  .why-copy{
    font-size: var(--f36);
  }
}

@media(max-width:430px){
    .btn-pill{
   min-width: 100px;
   font-size: clamp(20px, 3.91vw, 30px);
  }

}