/* =========================
   SiteHub Overlap UI（整理版）
   - 重複削除
   - 変数で一括調整
   - レイアウト/文字/ボタンも最低限含める
========================= */

.sh-overlap{
  /* ===== 一括管理（PC） ===== */
  --sh-band-h: 320px;          /* 帯の高さ */
  --sh-overlap-cover: 180px;   /* 帯に食い込む量（大きいほど上にかぶさる） */
  --sh-overlap-drop: 120px;    /* 下にはみ出す量（大きいほど下へ） */
  --sh-overlap-safe: 80px;     /* 影/余白の保険（下paddingに足す） */

  --sh-band-overlay: rgba(0,0,0,.35);

  --sh-card-radius: 22px;
  --sh-card-pad: 44px;
  --sh-card-shadow: 0 28px 70px rgba(0,0,0,.18);

  --sh-text: rgba(255,255,255,.92);   /* 帯上テキスト色 */
  --sh-lead: rgba(255,255,255,.82);

  position: relative;

  /* 下にはみ出す分を確保（次セクションに被らない） */
  padding: 56px 0 calc(var(--sh-overlap-drop) + var(--sh-overlap-safe));

  /* 横スクロールだけ防ぐ（100vw対策） */
  overflow-x: clip;

  background: #fff; /* 重なりが見える */
}

/* ===== 帯（背景画像） ===== */
.sh-overlap__band{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  top: 0;
  height: var(--sh-band-h);

  background-image: var(--sh-band-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: 0;
}

.sh-overlap__band::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sh-band-overlay);
}

/* ===== 中身 ===== */
.sh-overlap__inner{
  position: relative;
  z-index: 1;

  /* 2カラム（左：テキスト / 右：カード） */
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  align-items: start;
}

/* 左側テキスト（帯の上に乗る） */
.sh-overlap__main{
  padding-top: 28px;
  color: var(--sh-text);
}

.sh-overlap__main .sh-label{
  display: inline-block;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 14px;
  opacity: .95;
}

.sh-overlap__main h2{
  margin: 0 0 14px;
  font-size: 40px;     /* ここ好みで */
  line-height: 1.15;
  color: #fff;
}

.sh-overlap__main p{
  margin: 0;
  line-height: 1.9;
  color: var(--sh-lead);
  max-width: 46ch; /* 長くなりすぎない */
}

/* ===== 右側カード（帯に食い込んで下にはみ出す） ===== */
.sh-overlap__card{
  position: relative;
  z-index: 2;

  background: var(--sh-accent, #53BBD3); /* ← テーマカラーに寄せる */
  color: #fff;

  border-radius: var(--sh-card-radius);
  padding: var(--sh-card-pad);

  box-shadow: var(--sh-card-shadow);

  /* “帯の下端あたり”にカード上端を置く（食い込み量で調整） */
  margin-top: calc(var(--sh-band-h) - var(--sh-overlap-cover));

  /* “下にはみ出す” */
  transform: translateY(0px);
}

.sh-overlap__card h3{
  margin: 0 0 16px;
  font-size: 34px;
  line-height: 1.2;
  color: #fff;
}

.sh-overlap__card p{
  margin: 0 0 22px;
  line-height: 1.9;
  color: rgba(255,255,255,.88);
}

/* ボタン（赤枠内に収める＆はみ出さない） */
.sh-overlap__card .sh-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  max-width: 100%;
  white-space: nowrap;          /* 折り返したいなら消す */
  overflow: hidden;
  text-overflow: ellipsis;

  padding: 14px 22px;
  border-radius: 999px;

  background: #fff;
  color: var(--sh-accent, #53BBD3);

  text-decoration: none;
  font-weight: 800;
  line-height: 1;
}

/* ===== スマホ：重なり解除して縦積み ===== */
@media (max-width: 900px){
  .sh-overlap{
    --sh-band-h: 220px;
    --sh-overlap-cover: 0px;
    --sh-overlap-drop: 0px;
    --sh-overlap-safe: 44px;

    padding: 32px 0 44px;
  }

  .sh-overlap__inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sh-overlap__main{
    padding-top: 18px;
  }

  .sh-overlap__main h2{
    font-size: 28px;
  }

  .sh-overlap__card{
    margin-top: 16px;
    transform: none;
    padding: 22px;
  }

  .sh-overlap__card h3{
    font-size: 24px;
  }

  .sh-overlap__card .sh-btn{
    width: 100%;
    justify-content: center;
  }
}

/* 全体の左右余白（端っこ問題の根本） */
.sh-overlap__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 64px);
  box-sizing: border-box;
}

/* グレー帯の中の文字側も余白 */
.sh-overlap__main{
  padding-block: clamp(24px, 3vw, 48px);
}

/* 赤いカードの中の余白（文字が端に寄る問題） */
.sh-overlap__card{
  padding: clamp(20px, 3vw, 40px);
  box-sizing: border-box;
}

/* ボタン見切れ対策（モバイル含む） */
.sh-overlap__card .sh-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 22px;         /* 必要なら */
  border-radius: 999px;       /* いまのUIに合わせて */
  white-space: nowrap;        /* 1行にしたい場合 */
}

/* モバイルで赤カードが幅いっぱいになったときの保険 */
@media (max-width: 768px){
  .sh-overlap__card{
    top: -40px;               /* 上げ幅を弱める（見切れ防止） */
    width: 100%;
  }
  .sh-overlap__card .sh-btn{
    width: 100%;              /* 100%にするなら見切れなくなる */
    white-space: normal;      /* 2行OKにするなら */
  }
}

/* Overlap セクション全体の余白を詰める */
.sh-overlap{
  padding: 80px 0 40px;   /* ← 下を小さく */
}

/* 食い込み用に確保してる下の空白がある場合はここ */
.sh-overlap__inner{
  padding-bottom: 0;      /* or 20px くらい */
}

/* 次のセクション（お知らせ見出し）が上に空きすぎる場合 */
.front-page-content h2:first-of-type,
.front-page-content .wp-block-heading:first-of-type{
  margin-top: 20px;       /* 0〜24pxで調整 */
}

@media (max-width:768px){
  .sh-overlap{
    padding-top: 35px;   /* 48〜72 */
    padding-bottom: 28px;
  }
}

.sh-overlap__card .sh-btn:hover{
  background: color-mix(in srgb, #ffffff 92%, var(--sh-accent, #53BBD3) 8%);
  color: var(--sh-accent-hover, #3aa2ba);
}