/* ==========================================================================
   下部CTAバナー — design/Member-*.dc.html ほか
   ========================================================================== */
.cta-banner {
  display: block;
  position: relative;
  background-image: linear-gradient(to right, var(--c-navy) 50%, var(--c-red) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;   /* 通常は紺が見える */
  transition: background-position .35s ease;
  overflow: hidden;
}
.cta-banner:hover { background-position: 0 0; }   /* 赤が左から流れ込む */

.cta-banner__inner {
  position: relative;
  /* flex にして行ボックスの余白（strut）をなくす。
     block のままだと文字が数px下寄りになり、上下中央から外れる */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(48px, 10vw, 100px) clamp(20px, 8vw, 100px);
  z-index: 1;
}
.cta-banner__lead {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 19px;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.cta-banner__text {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-family: var(--f-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 10vw, 88px);
  line-height: 1;
  color: #fff;
  letter-spacing: var(--ls-en);
}