/* ============================================
   s-band-01 — 全幅カラー背景帯（セクションのメリハリ用）
   使い方: wp:group に align:full ＋ className="s-band-01 s-band-01--grey|--pink"
           内側を wp:group className="s-band-01__inner" で中央寄せ
   フロント: .alignfull が全幅化（s-layout-04）/ エディタ: [data-align="full"] が全幅化（editor-style）
   ============================================ */
.s-band-01.wp-block-group,
.s-band-01 {
  padding-block: var(--space-9-xl);
  padding-inline: 0;
}

.s-band-01--grey {
  background-color: var(--color-band-grey); /* #FAFAFA 文字が直接載る軽いグレー(theme.json bandGrey)。濃くしない */
}

.s-band-01--pink {
  background-color: var(--color-primary-lightest); /* #FDF5F5 ごく薄いピンク */
}

/* --watermark: 帯に大きく薄い白のクリニックロゴを重ねる装飾（時々使う） */
.s-band-01--watermark {
  position: relative;
  overflow: hidden;
}

.s-band-01--watermark::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -4%;
  transform: translateY(-50%);
  width: 58%;
  max-width: 56rem;
  aspect-ratio: 100 / 62;
  background: url("../../images/logo/main-logo-01.svg") center / contain no-repeat;
  opacity: 0.8; /* 白×グレーは元々低コントラスト＝うすく見える */
  pointer-events: none;
  z-index: 0;
}

.s-band-01--watermark > .s-band-01__inner {
  position: relative;
  z-index: 1;
}

/* 内側は inner 幅で中央寄せ（他セクションと左右の見え方を揃える） */
.s-band-01__inner.wp-block-group,
.s-band-01__inner {
  max-width: var(--width-inner);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* 帯の縦paddingが余白を担うので、内側先頭見出し/要素の上マージンは消す */
.s-band-01__inner > :first-child {
  margin-block-start: 0 !important;
}

/* 帯内コンポーネントの上下端マージンを整理（帯paddingに委ねる） */
.s-band-01__inner > :last-child {
  margin-block-end: 0 !important;
}

/* 帯内に置いたセクション型コンポーネントの大きな縦paddingは帯paddingに委ねる */
.s-band-01__inner > .s-card-10.wp-block-group,
.s-band-01__inner > .s-card-10 {
  padding-block: 0;
}

/* 背景色帯の上では、白カード自体が帯色とのコントラストで分離できるので
   カードの枠線は冗長 → 枠なしにする（.wp-block-group併記で詳細度を確保） */
.s-band-01 .c-card-24.wp-block-group,
.s-band-01 .s-flow-01__block.wp-block-group,
.s-band-01 .s-notice-01.wp-block-group {
  border: none;
}

/* 色帯の上では見出しオーナメント(花)と線を白に統一（白版SVGに差し替え） */
.s-band-01 .c-heading-05::after {
  background:
    url("../../images/icon/icon--ot-02-white.svg") left center / 14px 13px no-repeat,
    linear-gradient(var(--color-white), var(--color-white)) 18px 50% / calc(100% - 18px) 1px no-repeat;
}

/* 色帯の上の h3 下線も白に（s-content-01 既定のピンク下線を打ち消す） */
.s-content-01 .s-band-01 h3:not([class*="c-"]):not([class*="s-"]) {
  border-bottom-color: var(--color-white);
}

/* 採用CTAのリッチカバー */
.s-recruit-cta {
  position: relative;
  overflow: hidden;
  max-width: var(--content-width-lg);
  margin-inline: auto;
  padding: var(--space-6-xl) var(--space-5-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 88%, #fff), color-mix(in srgb, var(--color-badge-monitor) 55%, #fff));
  color: var(--color-white);
  text-align: center;
}
.s-recruit-cta::before,
.s-recruit-cta::after { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--color-white) 45%,transparent); border-radius:50%; pointer-events:none; }
.s-recruit-cta::before { width:22rem; height:22rem; inset:-10rem auto auto -7rem; }
.s-recruit-cta::after { width:18rem; height:18rem; inset:auto -6rem -10rem auto; }
.s-recruit-cta > * { position:relative; z-index:1; }
.s-recruit-cta-title { color:inherit; }
.s-recruit-cta-text { color:color-mix(in srgb,var(--color-white) 88%,transparent); }
.s-recruit-cta .wp-block-button__link,
.s-recruit-cta .wp-block-button__link:hover,
.s-recruit-cta .wp-block-button__link:focus,
.s-recruit-cta .wp-block-button__link:focus-visible {
  color: var(--color-white) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  filter: brightness(1.08);
}