@use "sass:math";
@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　CTA（コール・トゥ・アクション）
------------------------------ */

/* シンプルなCTA */
.cta {
  margin-top: math.div(global.$cta-space-md, -2);
  padding: global.$cta-space-md 0;
  text-align: center;

  &.is-bg {
    margin: 0;
    padding: 25px 0;
    background: global.$color-primary-light;
  }
}

.cta-title {
  margin: 0 0 30px;
  color: global.$color-text;

  @include acms.font-size(20);

  line-height: 1.3;
}

.cta-button-wrap {
  font-weight: bold;

  .js .js-animation & {
    opacity: 0;
    will-change: transform, opacity;
  }

  .js .js-animation.is-show & {
    animation: fade-in .4s .5s 1 both;
  }
}

.cta-link-wrap {
  margin: 25px 0;

  @include acms.font-size(18);

  font-weight: bold;
}

.cta-link {
  color: global.$color-text;

  &::before {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 15px 0 0;
    vertical-align: middle;
    background: global.$color-secondary no-repeat;
    background-image: url(#{global.$root-theme-img + 'arrow-border-white.svg' });
    background-position: center;
    background-size: 5px 10px;
    border-radius: global.$border-radius-circle;
    transform: rotate(180deg);
    content: "";
  }

  @include global.link-color(global.$color-text);

  .js .js-animation & {
    opacity: 0;
    will-change: transform, opacity;
  }

  .js .js-animation.is-show & {
    animation: fade-in .4s .5s 1 both;
  }
}

.cta-micro-copy {
  margin: 15px 0 20px;
}


@media screen and (min-width: acms.$breakpoint-md-min) {
  .cta {
    margin-top: math.div(global.$cta-space-lg, -2);
    padding: global.$cta-space-lg 0;

    &.is-bg {
      padding: 50px 0;
    }
  }

  .cta-title {
    @include acms.font-size(34);
  }

  .cta-button {
    @include acms.font-size(24);
  }

  .cta-link-wrap {
    margin: 40px 0;

    @include acms.font-size(24);
  }

  .cta-link {
    &::before {
      width: 24px;
      height: 24px;
      margin: 0 25px 0 0;
    }
  }

  .cta-micro-copy {
    margin: 25px 0 20px;
  }
}


/* 背景が角丸 */
.cta-round {
  margin-top: -40px;
  padding: 40px 20px 30px;
  background: global.$color-gray20;
  border-radius: math.div(global.$border-radius-xxl, 2);
}

.cta-round-title {
  margin: 0 0 20px;
  color: global.$color-text;

  @include acms.font-size(20);

  line-height: 1.3;
}

.cta-round-button-wrap {
  font-weight: bold;

  .js .js-animation & {
    opacity: 0;
    will-change: transform, opacity;
  }

  .js .js-animation.is-show & {
    animation: fade-in .4s .5s 1 both;
  }
}

.cta-round-micro-copy {
  margin: 15px 0 20px;
}


@media screen and (min-width: acms.$breakpoint-md-min) {
  .cta-round {
    margin-top: -60px;
    padding: 80px 0 60px;
    border-radius: global.$border-radius-xxl;
  }

  .cta-round-title {
    margin: 0 0 30px;

    @include acms.font-size(34);
  }

  .cta-round-button {
    @include acms.font-size(24);
  }
}


/* 背景画像付きのCTA */
.cta-visual {
  position: relative;
  z-index: 1;
  padding: 60px 0 50px;
  color: global.$color-text-inverse;
  text-align: center;
  background: no-repeat center;
  background-size: cover;

  &.is-cta-margin-top {
    margin-top: global.$footer-margin-top-md;
  }

  &.is-lg {
    padding: 80px 0 50px;
  }

  &::before {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 50%);
    content: "";
  }
}

.cta-visual-comment {
  position: relative;
  display: inline-block;
  margin: 0 0 30px;
  padding: 8px 30px;
  color: global.$color-text-primary;
  font-weight: bold;
  background: global.$color-white;
  border-radius: 10em;

  @include acms.font-size(22);

  &::before {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top-color: global.$color-white;
    content: "";
  }
}

.cta-visual-title {
  position: relative;
  margin: 0 0 30px;

  @include acms.font-size(22);

  line-height: 1.5;
}

.cta-visual-text {
  position: relative;
  margin: 0 0 25px;

  @include acms.font-size(14);

  line-height: 1.5;
}

.cta-visual-read-more {
  position: relative;

  .js .js-animation & {
    opacity: 0;
    will-change: transform, opacity;
  }

  .js .js-animation.is-show & {
    animation: fade-in .4s .5s 1 both;
  }
}


@media screen and (min-width: acms.$breakpoint-md-min) {
  .cta-visual {
    padding: global.$cta-space-md 0;

    &.is-cta-margin-top {
      margin-top: global.$footer-margin-top-lg;
    }

    &.is-lg {
      padding: 100px 0 80px;
    }
  }

  .cta-visual-title {
    margin: 0 0 40px;

    @include acms.font-size(34);
  }

  .cta-visual-text {
    margin: 0 0 40px;

    @include acms.font-size(16);
  }

  .cta-visual-comment {
    padding: 15px 45px;

    @include acms.font-size(32);
  }
}
