/**
 * template-parts/cv-banner.php 用スタイル
 */

/* cv-banner用の表示分け */
.cv-banner-pc {
  display: block;
  max-width: 1084px;
  margin: 0 auto;
  z-index: 999;
  position: relative;
}

.cv-banner-sp {
  display: none;
  z-index: 999;
  position: relative;
}

/* タブレットでもモバイルサイズのバナーを表示 */
@media (width <= 1023px) {
  .cv-banner-pc {
    display: none;
  }
  .cv-banner-sp {
    display: block;
  }
}

.cv-banner-pc-container {
  background-color: #374190;
  border-radius: 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: clamp(2rem, 3vw, 3.6rem);
  padding-right: clamp(1.8rem, 2.5vw, 3.2rem);
  height: 15rem;
}
.cv-banner-text-wrapper {
  white-space: nowrap;
}

.cv-banner-text-upper {
  font-size: clamp(2rem, 4vw, 2.4rem);
  color: #f7dd4b;
  margin-bottom: 0 !important;
  font-weight: 900;
  display: inline-block;
  position: relative;
}

/*.cv-banner-pc .text-new,*/
.cv-banner-sp .text-new::before {
  left: -8px;
}
.cv-banner-sp .text-new::after {
  right: -4px;
}

.cv-banner-text-lower {
  font-size: clamp(2.4rem, 4vw, 3rem);
  color: #fff;
  line-height: 1.5;
  font-weight: 900;
}
.cv-banner-button {
  background-color: #f7dd4b;
  border-radius: 100vh;
  padding-left: clamp(2.4rem, 4vw, 3.6rem);
  padding-right: clamp(1.6rem, 4vw, 2rem);
  padding-block: 2rem;
  display: flex;
  gap: clamp(0.4rem, 4vw, 1rem);
  align-items: center;
  justify-content: center;
}
.cv-banner-button:hover,
.cv-banner-button:focus-visible {
  background-color: color-mix(in srgb, #f7dd4b 78%, white);
}
.cv-banner-button-text {
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  margin-bottom: 0 !important;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

.cv-banner-images-wrapper {
  position: relative;
}

.cv-banner-image-fukidashi-pc {
  position: absolute;
  width: clamp(230px, calc(30px + 19vw), 280px);
  height: auto;
  top: -40%;
  left: -50%;
}
.cv-banner-image-free-trial-pc {
  width: clamp(230px, calc(-50px + 27vw), 270px);
  height: auto;
  margin-top: clamp(-10px, calc(30px - 3.91vw), -20px);
}

/* モバイル・タブレットサイズのCVボタン */
.cv-banner-sp-container {
  display: flex;
  flex-direction: column;
  background-color: #374190;
  border-radius: 2.4rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  width: fit-content;
  margin: 0 auto;
}

.cv-banner-sp-content-wrapper {
  display: flex;
  flex-direction: row;
}

.cv-banner-sp-text-wrapper {
  white-space: nowrap;
}

.cv-banner-sp-text-upper {
  font-size: clamp(14px, calc(8.2px + 1.54vw), 24px);
  color: #f7dd4b;
  margin-bottom: 0 !important;
  margin-left: 0.4rem;
  font-weight: 900;
  line-height: 1.15;
  display: inline-block;
  position: relative;
}

.cv-banner-sp-text-lower {
  font-size: clamp(20px, calc(8.2px + 1.54vw), 30px);
  color: #fff;
  line-height: 1.35;
  font-weight: 900;
}

.cv-banner-sp-image-wrapper {
  position: relative;
}
.cv-banner-image-fukidashi-sp {
  position: absolute;
  width: clamp(85px, calc(23px + 16.54vw), 120px);
  height: auto;
  top: -50%;
  left: 0;
}
@media (min-width: 768px) {
  .cv-banner-image-fukidashi-sp {
    top: -40%;
    left: 0.5rem;
  }
}

.cv-banner-image-free-trial-sp {
  width: clamp(165px, calc(103px + 16.54vw), 220px);
  height: auto;
}

.cv-banner-sp-button {
  background-color: #f7dd4b;
  border-radius: 100vh;
  width: 100%;
  margin-top: 1.2rem;
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: calc(clamp(16px, 4vw, 24px) + clamp(20px, 3vw, 24px) + 12px);
  padding-block: clamp(12px, 3vw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
}

.cv-banner-sp-button:hover,
.cv-banner-sp-button:focus-visible {
  background-color: color-mix(in srgb, #f7dd4b 78%, white);
}

.cv-banner-sp-button-text {
  font-size: clamp(16px, calc(10px + 1vw), 20px);
  font-weight: 700;
  margin-bottom: 0 !important;
  line-height: 1;
  letter-spacing: 8%;
  white-space: nowrap;
}

.cv-banner-sp-button img {
  width: clamp(20px, 3vw, 24px);
  height: auto;
  position: absolute;
  right: clamp(16px, 4vw, 24px);
  top: 50%;
  transform: translateY(-50%);
}