/* .hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #eee;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
} */

.hero {
  padding: clamp(16px, 3vw, 24px) 12px; /* 画面端からの余白 */
}

.hero__inner {
  max-width: 1434px; /* ← home-support__inner と同じ */
  /* max-width: 960px; */
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* 角丸を効かせるため */
  border-radius: 12px; /* ← 角丸 */
}

/* 画像は inner にフィット */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 高さ（比率）は inner に指定 */
.hero__inner {
  aspect-ratio: 16 / 7;
}

/* 角丸が見えるように */
.hero__inner {
  background: #eee; /* 画像読み込み前の下地 */
}

/* 左テキスト群（％で配置） */
/* .hero__left {
  position: absolute;
  left: 6%;
  top: 14%;
  max-width: min(38%, 520px);
  color: #222;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hero__catch {
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.7;
  margin-bottom: 40px;
}

.hero__sub {
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.6;
  margin: 0 0 16px;
}
*/

.hero__left {
  position: absolute;
  left: 6%;
  top: 8%;
  bottom: 8%; /* ← 上下の余白を確保 */
  max-width: min(38%, 520px);

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* ← 上と下に分ける */
  color: #222;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 上のキャッチ */
.hero__catch {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.7;
}

/* 下グループを少し下に寄せたい時の余白 */
.hero__sub {
  margin: 0 0 clamp(12px, 1.8vw, 24px);
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.5;
}
.hero__desc {
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.8;
  margin: 0;
}

/* 下グループを下に固定（最重要） */
.hero__bottom {
  margin-top: auto; /* ← これで下に押し下げる */
}

/* 中央ボックス（％＋transformで中央寄せ） */
.hero__centerBox {
  position: absolute;
  /* left: 58%;
  top: 55%;
  transform: translate(-50%, -50%); */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* ← これで画面の中央 */
  background: rgba(255, 255, 255, 0.55);

  /* width: min(42%, 560px);
  padding: clamp(14px, 1.2vw, 22px); */

  width: min(48%, 640px);
  /* padding: clamp(18px, 1.8vw, 30px); */
  padding-top: clamp(22px, 2vw, 36px);
  padding-bottom: clamp(22px, 2vw, 36px);

  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.hero__centerTitle {
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
}

.hero__centerEn {
  font-size: clamp(12px, 1vw, 16px);
  text-align: center;
  color: #2e7d32;
  font-weight: 600;
}

/* 私たちの支援部分 */
.home-support {
  background: #fff;
  padding: clamp(16px, 3vw, 24px) 16px;
}

.home-support__inner {
  /* max-width: 960px; */
  max-width: 1200px;
  margin: 0 auto;
}

.home-support__title {
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 0 0 16px;
  font-weight: 700;
  color: #111;
}

.home-support__text {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.9;
  color: #333;
  margin: 0 0 24px;
}

/* ボタン周り */
.home-support__btnWrap {
  text-align: right; /* 右寄せ（画像のイメージに近い） */
}

.home-support__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #1ea7d7; /* 青系ボタン */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.home-support__btn:hover {
  background: #168fba;
  transform: translateY(-1px);
}

.home-support__btn:active {
  transform: translateY(0);
}

/* ママズルームとは */
/* 初期状態は非表示（PCでは出さない） */
.sp-only {
  display: none;
}

/* スマホ・タブレット（1023px以下）のときだけ表示 */
@media (max-width: 1023px) {
  .sp-only {
    display: block;
  }

   /* PC用タイトルを消す */
  .home-support__title {
    display: none;
  }

  /* スマホ専用：タイトルブロック */
  .mamaz-about-title {
    margin: 6px 12px 14px;
    text-align: center;
  }

  /* 「ママズルームとは」：横に広いピル */
  .mamaz-about-title__pill {
    display: block;
    width: 100%;
    max-width: 560px;  /* タブレットでも良い感じ */
    margin: 0 auto 10px;
    padding: 10px 18px;

    background: #5b8cff;
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
  }

  /* 2行の説明 */
  .mamaz-about-title__lead {
    max-width: 700px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
    color: #111;
  }


}


/* 事業内容グリッド*/
.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%;
  }
} */