/* 事業内容グリッド*/
.home-services {
  /* background: #f3f6f9;  */
  /* 画像の薄いグレーっぽい背景 */
  padding: clamp(36px, 5vw, 72px) 16px;
}

.home-services__inner {
  max-width: 1200px; /* home-support と同じ幅 */
  margin: 0 auto;
}

.home-services__title {
  font-size: clamp(26px, 2.8vw, 34px);
  margin: 0 0 16px;
  font-weight: 800;
}

.home-services__lead {
  margin: 0 0 28px;
  line-height: 1.9;
  font-size: clamp(14px, 1.4vw, 16px);
}

/* 上段：3列 */
.home-services__grid--top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 26px;
}

/* 下段：2列（中央寄せ） */
.home-services__grid--bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 26px;
  justify-content: center; /* ← 中央寄せの決め手 */
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center; /* ← 画像と説明を“同じ中心線”に */
  text-align: center;
}

.service-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.service-card__img {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 18px 10pxски;
}

.service-card__img img {
  width: min(220px, 80%);
  height: auto;
  display: block;
  margin: 0 auto;
}

.service-card__caption {
  margin: 12px 0 0;
  font-size: 14px;
  /* text-align: left; */
}

.service-card__arrow {
  margin-left: 6px;
  color: #2d6cdf;
  font-weight: 800;
}

.home-services__note {
  margin: 30px 0 0;
  line-height: 1.9;
  font-size: clamp(14px, 1.4vw, 16px);
}

/* 丸画像ホバー演出（画像だけ動く） */
.service-card__img img{
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
  will-change: transform, opacity;
}

.service-card__img{
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 18px 10px;
  /* overflow: visible; ← 明示（デフォルトだが念のため） */
}

/* 丸だけ浮く（影を弱めに） */
.service-card:hover .service-card__img img{
  transform: translateY(-6px);
  opacity: 0.6;
  /* box-shadow: 0 6px 10px rgba(0,0,0,.12); */
}

/* スマホのタップ反応（任意） */
/* .service-card:active .service-card__img img{
  transform: translateY(-3px) scale(0.98);
  opacity: 0.7;
} */

/* ===== スマホ/タブレット（1023px以下） ===== */
@media (max-width: 1023px) {
  /* 上段（3つあったところ）を 1列 + 2列 に分解 */
  .home-services__grid--top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  /* 1つ目だけ全幅（1） */
  .home-services__grid--top .service-card:nth-child(1) {
    grid-column: 1 / -1;
  }

  /* 下段（もともと2つ）はそのまま2列（2） */
  .home-services__grid--bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    justify-content: stretch; /* SPでは中央寄せ解除 */
  }

  .service-card__caption {
    text-align: center;
  }

  .service-card__img img {
    width: min(200px, 88%);
  }
}

/* ===== さらに小さいスマホ（480px以下）は1列 ===== */
@media (max-width: 480px) {
  .home-services__grid--top,
  .home-services__grid--bottom {
    grid-template-columns: 1fr;
  }

  .home-services__grid--top .service-card:nth-child(1) {
    grid-column: auto;
  }
}


@media (max-width: 1023px) {
  .hero__left {
    display: none;
  }
}

@media (max-width: 1023px) {
  .hero__centerBox {
    left: 50%;
    top: 58%; /* 少し下へ */
    width: 86%; /* 横幅を広げる */
  }
}

/* スマホ用：縦に詰める／位置も変える */
/* @media (max-width: 1023px) {
  .hero {
    aspect-ratio: 16 / 10;
  }

  .hero__left {
    left: 6%;
    top: 10%;
    max-width: 88%;
  }

  .hero__centerBox {
    left: 50%;
    top: 62%;
    width: 86%;
  }
} */