/* ========================================
   Contact CTA
======================================== */

.contact-cta {
  width: 100%;

  background-color: var(--color-main);
}


/* ========================================
   Inner
======================================== */

.contact-cta__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 45%)
    minmax(0, 55%);

  min-height: 420px;

  overflow: hidden;
}


/* ========================================
   Visual
======================================== */

.contact-cta__visual {
  min-width: 0;

  overflow: hidden;
}

.contact-cta__visual img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ========================================
   Content
======================================== */

.contact-cta__content {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;

  padding:
    72px
    var(--container-padding);

  background-color: var(--color-main);
}

.contact-cta__content::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: -200px;

  width: 202px;

  background-color: var(--color-main);

  clip-path: polygon(
    100% 0,
    100% 100%,
    0 100%
  );
}

.contact-cta__content-inner {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 760px;

  text-align: center;
}


/* ========================================
   English
======================================== */

.contact-cta__en {
  margin: 0 0 18px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.18em;
}


/* ========================================
   Title
======================================== */

.contact-cta__title {
  margin: 0;

  color: var(--color-white);

  font-family: var(--font-heading);
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 400;

  line-height: 1.7;
  letter-spacing: 0.07em;

  white-space: nowrap;
}


/* ========================================
   Smartphone Break
======================================== */

.contact-cta__sp-break {
  display: none;
}


/* ========================================
   Text
======================================== */

.contact-cta__text {
  margin-top: 20px;

  color: rgba(255, 255, 255, 0.8);

  font-size: 13px;

  line-height: 1.9;
  letter-spacing: 0.04em;
}


/* ========================================
   Button
======================================== */

.contact-cta__button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 270px;

  margin-top: 28px;

  padding:
    16px
    52px;

  border: 1px solid var(--color-white);

  background-color: var(--color-white);

  color: var(--color-main);

  font-size: 13px;
  font-weight: 500;

  text-align: center;
  letter-spacing: 0.06em;

  opacity: 1;

  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

.contact-cta__button:visited {
  color: var(--color-main);
}

.contact-cta__button:hover {
  border-color: var(--color-white);

  background-color: transparent;

  color: var(--color-white);

  opacity: 1;
}

.contact-cta__button:visited:hover {
  color: var(--color-white);
}


/* ========================================
   Arrow
======================================== */

.contact-cta__arrow {
  position: absolute;

  top: 50%;
  right: 22px;

  flex-shrink: 0;

  font-size: 14px;

  transform:
    translateY(-50%)
    translateX(0);

  transition:
    transform 0.35s ease;
}

.contact-cta__button:hover .contact-cta__arrow {
  transform:
    translateY(-50%)
    translateX(5px);
}


/* ========================================
   Tablet
======================================== */

@media screen and (max-width: 1024px) {

  .contact-cta__inner {
    grid-template-columns:
      minmax(0, 40%)
      minmax(0, 60%);
  }

  .contact-cta__content {
    padding:
      60px
      var(--container-padding);
  }

  .contact-cta__content::before {
    left: -90px;

    width: 92px;
  }

  .contact-cta__content-inner {
    max-width: 620px;
  }

  .contact-cta__title {
    font-size: clamp(26px, 3.1vw, 32px);
  }

}


/* ========================================
   Smartphone
======================================== */

@media screen and (max-width: 768px) {

  .contact-cta__inner {
    display: flex;
    flex-direction: column;

    min-height: 0;
  }

  .contact-cta__visual {
    width: 100%;
    height: 220px;
  }

  .contact-cta__content {
    justify-content: flex-start;

    padding:
      52px
      var(--container-padding)
      56px;
  }

  .contact-cta__content::before {
    display: none;
  }

  .contact-cta__content-inner {
    max-width: none;

    text-align: left;
  }

  .contact-cta__en {
    margin-bottom: 16px;
  }

  .contact-cta__title {
    font-size: 28px;

    line-height: 1.7;

    white-space: normal;
  }

  .contact-cta__sp-break {
    display: block;
  }

  .contact-cta__text {
    margin-top: 20px;

    font-size: 12px;
  }

  .contact-cta__button {
    min-width: 240px;

    margin-top: 28px;

    padding:
      15px
      48px
      15px
      22px;
  }

}


/* ========================================
   Small Smartphone
======================================== */

@media screen and (max-width: 480px) {

  .contact-cta__content {
    padding:
      48px
      var(--container-padding)
      52px;
  }

  .contact-cta__title {
    font-size: 28px;
  }

}