@charset "utf-8";
/* ==========================================================
   差し込み用コンバージョンエリア（cta-banner）
   パーツ：parts/cta-banner.php
     <?php get_template_part('parts/cta-banner'); ?>
     <?php get_template_part('parts/cta-banner', null, array('id' => 'xxx', 'class' => 'reveal')); ?>
   どのページにも差し込めるよう、他のCSSに依存しない独立したセレクタで定義。
   このCSSはパーツ側で自動読み込み（同じページで複数回使っても1回だけ）
   背景画像：images/renewal/cta-banner-bg.png
   ========================================================== */

.cta-banner {
  margin: 0 0 clamp(28px, 3.2vw, 40px);
  padding: 0;
  border-top: 0;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(17, 17, 17, 0.78) 0%,
      rgba(17, 17, 17, 0.7) 58%,
      rgba(67, 6, 0, 0.78) 100%
    ),
    url(../../images/renewal/cta-banner-bg.png) center 30% / cover no-repeat;
}

.cta-banner__inner {
  position: relative;
  padding: clamp(18px, 2.4vw, 29px) clamp(24px, 4vw, 56px);
  overflow: hidden;
}

.cta-banner__inner::after {
  content: "MJS";
  position: absolute;
  right: -14px;
  bottom: -32px;
  color: rgba(255, 255, 255, 0.045);
  font:
    400 clamp(90px, 12vw, 150px) / 1 "Bebas Neue",
    sans-serif;
  pointer-events: none;
}

.cta-banner__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "copy copy"
    "lead buttons";
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 16px;
  align-items: center;
}

.cta-banner__copy {
  grid-area: copy;
  min-width: 0;
}

.cta-banner__label {
  margin: 0 0 7px;
  color: #ff7565;
  font-size: 13px;
  letter-spacing: 0.17em;
}

.cta-banner__title {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 29px);
  line-height: 1.4;
}

.cta-banner__lead {
  grid-area: lead;
  align-self: center;
  min-width: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.75;
}

.cta-banner__buttons {
  grid-area: buttons;
  display: flex;
  align-self: center;
  flex-shrink: 0;
  gap: 10px;
}

.cta-banner__buttons a {
  display: flex;
  width: auto;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--csd-red, #b21100);
  box-sizing: border-box;
  color: #fff;
  background: var(--csd-red, #b21100);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 1 !important;
}

.cta-banner__buttons a:hover {
  border-color: #fff;
  color: var(--csd-red, #b21100);
  background: #fff;
}

.cta-banner__buttons a span {
  font-size: 17px;
}

.cta-banner__btn--line {
  border-color: #06c755 !important;
  background: #06c755 !important;
}

.cta-banner__btn--line:hover {
  border-color: #06c755 !important;
  color: #06c755 !important;
  background: #fff !important;
}

@media only screen and (max-width: 559px) {
.cta-banner__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "lead"
      "buttons";
    row-gap: 12px;
    align-items: flex-start;
  }

.cta-banner__lead {
    align-self: start;
  }

.cta-banner__buttons {
    width: 100%;
    flex-direction: column;
  }

.cta-banner__buttons a {
    width: 100%;
  }
}