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

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

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

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

.cta-title {
  margin: 0 0 2rem;
  font-size: map.get(global.$font-scales, heading-s);
  line-height: 1.5;
  color: global.$color-text;

  @include acms.media-breakpoint-up(md) {
    font-size: map.get(global.$font-scales, heading-l);
  }
}

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

.cta-link-wrap {
  margin: 1.5rem 0;
  font-size: map.get(global.$font-scales, body-m);
  font-weight: bold;
}

.cta-link {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 -2.5rem;
  font-size: map.get(global.$font-scales, heading-ss);
  color: global.$color-text;
  text-decoration: none;

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

  &:hover {
    text-decoration: underline;
  }

  &::before {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 1rem 0 0;
    vertical-align: middle;
    content: "";
    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;
  }
}

@include acms.media-breakpoint-up(md) {
  .cta {
    padding: global.$cta-space-lg 0;
    margin-top: calc(global.$cta-space-lg / -2);

    &.is-bg {
      padding: 3rem 0;
    }
  }

  .cta-title {
    font-size: map.get(global.$font-scales, heading-l);
  }

  .cta-button {
    font-size: map.get(global.$font-scales, heading-ss);
  }

  .cta-link-wrap {
    margin: 2.5rem 0;
    font-size: map.get(global.$font-scales, heading-ss);
  }

  .cta-link {
    margin: 0 0 0 -3rem;

    &::before {
      width: 1.5rem;
      height: 1.5rem;
      margin: 0 1.5rem 0 0;
    }
  }

  .cta-micro-copy {
    margin: 1.5rem 0 1.25rem;
  }
}
