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

/* ------------------------------
　　CTA（コール・トゥ・アクション）
------------------------------ */
.cta-section-mt {
  margin-block-start: var(--section-space-y);
}

/* シンプルなCTA
------------------------------ */
.cta-general {
  padding: 3rem 1rem;
  line-height: var(--line-height-base);
  text-align: center;
  background: var(--color-gray10);
  border-radius: var(--border-radius-xl);
}

.cta-general-text {
  margin: 0 0 1.5rem;
}

.cta-general-title {
  margin: 0 0 1rem;
  font-size: map.get(global.$font-scales, heading-s);
  line-height: var(--line-height-md);
  color: var(--color-text);
}

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

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

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


.cta-general-micro-copy {
  margin: 1rem 0 0;

  a[href^="tel:"] {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: var(--border-width-sm) dotted var(--color-text);

    &:hover {
      text-decoration: none;
      border: 0;
    }
  }
}


@include acms.media-breakpoint-up(md) {
  .cta-general {
    padding: 5rem 2rem;
    border-radius: var(--border-radius-xxl);
  }

  .cta-general-title {
    font-size: map.get(global.$font-scales, heading-m);
    line-height: var(--line-height-sm);
  }
}

/* 背景画像付きのCTA
------------------------------ */
.cta-visual {
  position: relative;
  z-index: 1;
  padding: 4rem 0 3rem;
  line-height: var(--line-height-base);
  color: var(--color-white);
  text-align: center;
  background: no-repeat center;
  background-size: cover;

  a {
    color: var(--color-white);

    &[href^="tel:"] {
      text-decoration: none;
      border-bottom: var(--border-width-sm) dotted var(--color-white);

      @media (hover: hover) {
        &:any-link:hover {
          border-color: transparent;
        }
      }
    }
  }

  &::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: var(--color-image-overlay-bg);
  }

  p:last-child {
    margin-bottom: 0;
  }
}

.cta-visual-comment {
  position: relative;
  display: inline-block;
  padding: 0.25rem 1.5rem;
  margin: 0 0 1rem;
  font-size: map.get(global.$font-scales, heading-3s);
  font-weight: bold;
  color: var(--color-text-2nd);
  background: var(--color-white);
  border-radius: var(--border-radius-round);

  &::before {
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 12px;
    height: 10px;
    content: "";
    background-color: var(--color-white);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translateX(-50%);
  }
}

.cta-visual-title {
  position: relative;
  margin: 0 0 1rem;
  font-size: map.get(global.$font-scales, heading-s);
  line-height: var(--line-height-md);
}

.cta-visual-text {
  position: relative;
  margin: 0 0 1.5rem;
  font-size: map.get(global.$font-scales, body-m);

  a {
    color: var(--color-white);
  }
}

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

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

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

.cta-visual-micro-copy {
  color: var(--color-white);
}

@include acms.media-breakpoint-up(md) {
  .cta-visual {
    padding: 5rem 0;
  }

  .cta-visual-title {
    font-size: map.get(global.$font-scales, heading-m);
    line-height: var(--line-height-sm);
  }

  .cta-visual-comment {
    padding: 0.5rem 1.5rem;
    margin: 0 0 2rem;
    font-size: map.get(global.$font-scales, heading-ss);
    line-height: var(--line-height-lg);
  }
}
