/* ===== Service Hero ===== */
.svc-hero{
  background-image: url("../assets/service_hero.webp");
  background-repeat: no-repeat;
  background-position: left bottom; /* 左を優先表示 */
  background-size: cover;           /* PCはしっかり敷き詰め */
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1920/840;
  position: relative;
}
.svc-hero-inner{ text-align:center; position: absolute; top: 14.5%; left: 50%; transform: translateX(-50%); }

.svc-hero-title{
  display:inline-block;
  margin:0 auto 1.17em;
  padding:0.6em 0.8em;
  border:1px solid var(--c-main,#0e2a3f);
  background:#fff;
  font-weight:500;
  font-size: clamp(0px, 2.08vw, 40px);
  letter-spacing:.08em;
  color: #0b2746;
}

.svc-hero-inner .svc-hero-grid{
  display:grid; align-items:start; justify-items:center;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap:10.42vw;
  margin: clamp(8px, 2vw, 14px) auto 0;
  max-width: 850px;
  margin: 0;
}
.svc-hero-col{ display:grid; gap:1.35vw; justify-items:center; width: 15.21vw; }

.svc-hero-col:nth-child(2){
  width:18.59vw;
  gap: 2.08vw
}

.svc-hero-col div{
  height: auto;
}

.svc-hero-inner .svc-hero-col:nth-child(2) img{
      transform: none;
}

.svc-hero .svc-hero-label{
  margin:0;
  font-weight:700;
  color: var(--c-main,#0e2a3f);
  font-size: clamp(20px,1.56vw,30px);
}

.svc-hero-col img{
  display:block;
  width:auto;
}

.svc-hero-lead{
  margin: 1.88vw auto 0;
  color:#0b2746; line-height:1.9;
  font-size: clamp(16px, 1.04vw, 20px);
  font-feature-settings: "palt";
}

.btn-outline{
  display:inline-block;
  margin-top: 4px;
  padding:10px 16px;
  border:2px solid var(--c-blue,#3E8FB3);
  border-radius:999px;
  color:var(--c-main,#0e2a3f);
  background:#fff; text-decoration:none; font-weight:700;
  transition: transform .15s ease, background-color .15s ease;
}
.btn-outline:hover{ transform: translateY(-1px); background: #f7fcff; }

@media (max-width: 1300px){
  .svc-hero-title{
    margin-top: 3.2vw;
    margin-bottom: 1.5vw;
    font-size: 1.5vw;
  }

  .svc-hero-col img{
    width: 80%;
  }
}

@media (max-width: 1200px){

  .svc-hero .svc-hero-label{
    font-size: 1.67vw;
  }

  .svc-hero-lead{
    margin: 1.88vw auto 0;
    font-size: 1.33vw;
    font-feature-settings: "palt";
  }
}


@media (max-width: 960px) {
  .svc-hero-inner{
    top: 10%;
  }
}

@media (max-width: 768px){
  .svc-hero {
    background-image: url("../assets/sp_service_hero.webp");
  }
  .svc-hero {
    background-size: cover;         /* 画面幅いっぱいに拡大縮小 */
    background-repeat: no-repeat;   /* 繰り返しなし */
    width: 100%;                    /* 横幅いっぱい */
    aspect-ratio: 750/700;                /* 高さは画面の半分 */
  }
  .svc-hero-inner{
    top:10%;
    width: 100%
  }

  .svc-hero-inner .svc-hero-grid{
    gap: 0;
    max-width: 552px;
    margin: 0 auto;
  }
  .svc-hero-col{
    width: 27.97vw;
  }
  .svc-hero-col:nth-child(2){
    width: 34.25vw;
  }
  .svc-hero-title{
    font-size: var(--f30);
    margin-bottom: 10.72vw;
  }
  .svc-hero .svc-hero-label{
    font-size: clamp(16px, 2.86vw, 22px);
  }
  .svc-hero-lead{
    font-size: var(--f18);
    padding: 0 12px;
  }
}


@media (max-width: 570px){
  .svc-hero-title{
    margin-bottom: 5.72vw;
    font-size: 3.86vw;
  }
   .svc-hero-lead,
  .svc-hero .svc-hero-label{
      font-size: 2.81vw;
    }

  .svc-hero-inner .svc-hero-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10vw;
    width: 90%;
    }
  .svc-hero-col{
    width: 80%;
  }
  .svc-hero-col:nth-child(2){
    width: 100%;
  }
  .svc-hero-col img{
    width: 100%;
    object-fit: contain;
  }
}