/* ======================================
   Service Contact Banner
====================================== */

.serviceContactBanner__box {
  background: var(--color-fill);
  border-radius: var(--XL) var(--X2S);
  overflow: hidden;
}

/* 横並びの本体 */
.serviceContactBanner__inner {
  display: flex;
  align-items: center;
}

/* 左：テキスト */
.serviceContactBanner__content {
  flex: 0 0 40%;
  padding-left: var(--X3L);
  order: 1;
}

.serviceContactBanner__textWrap {
  margin-bottom: clamp(
    var(--S),
    2vw,
    var(--L) 
  );
}

.serviceContactBanner__title {
  font-size: clamp(
    1.1rem, 
    2vw, 
    var(--font-head-m)
  );
  font-weight: 700;
  line-height: 1.3;
}

.serviceContactBanner__text {
  font-size: clamp(
    0.9rem,
    1.4vw,
    var(--font-head-xs)
  );
  font-weight: 700;
  line-height: 1.3;
}

.serviceContactBanner__caution {
  color: var(--color-text-secondary);
  font-size: clamp(
    0.75rem,
    1.1vw,
    var(--font-xs)
  );
  line-height: 1.4;
  margin-top: clamp(
    2px,
    0.6vw,
    var(--XS)
  );
}

.serviceContactBanner .btn.btnL {
  width: clamp(140px, 20vw, 305px);
  padding: clamp(var(--X4S), 1.2vw, var(--S));
  font-size: clamp(
    0.875rem, 
    1vw,       
    var(--font-s) 
  );
}

.serviceContactBanner__gap {
  margin-bottom: clamp(
    8px,
    1vw,
    var(--M)
  );
}

/* 右：画像 */
.serviceContactBanner__image {
  flex: 1;
  order: 2;
}

.serviceContactBanner__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   SP
=============================== */

@media screen and (max-width: 767px) {

  /* レイアウト：縦積み */
  .serviceContactBanner__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 画像を下 */
  .serviceContactBanner__image {
    order: 2;
    width: 100%;
    /* margin-bottom: var(--M); */
  }

  /* コンテンツを上 */
  .serviceContactBanner__content {
    order: 1;
    width: 100%;
    padding: var(--L);
    text-align: left; /* ← 中央寄せをやめる */
  }

  .serviceContactBanner__textWrap {
    margin-bottom: var(--M);
  }

  .serviceContactBanner__title {
    font-size: var(--font-m);
  }

  .serviceContactBanner__text {
    font-size: var(--font-xs);
  }

  /* ボタン：最大状態に戻す */
  .serviceContactBanner .btn.btnL {
    width: 100%;
    /* min-width: 240px; */
    font-size: var(--font-s);
    padding: var(--S);
  }

  .serviceContactBanner__gap {
    margin-bottom: var(--XS);
  }

  .serviceContactBanner__caution {
    margin-top: var(--X3S);
  }

  /* 背景の角丸をなくす（正方形） */
  .serviceContactBanner__box {
    border-radius:
      var(--XL) 
      var(--radius-l) 
      var(--XL)
      var(--radius-l); 
  }
}