@charset "utf-8";
  @property --cta-button-accent-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffd82a;
  }
@property --cta-button-copy-y-pos {
  syntax: "<number>";
  inherits: false;
  initial-value: 1.45;
}
@property --cta-button-bg-color {
  syntax: "<image>";
  inherits: false;
  initial-value: linear-gradient(in oklab, #F29F05, #F28705, #F27405, #F25C05);
}
.transition {
    position: relative;
  &.pc {
    margin-top: 50px;
  }
  &.pc span,
  &.mobile span {
    position: absolute;
    top: calc(var(--cta-button-copy-y-pos) * -1rem);
    left: calc(50% - 140px);
    display: block;
    width: 280px;
    padding: 0.2rem 0;
    letter-spacing: .1rem;
    border: 2px solid var(--cta-button-accent-color);
    border-radius: 100vh;
    background: var(--cta-button-accent-color);
    box-shadow: 0 3px 3px rgb(0 0 0 / 20%);
    z-index: 99;
    font-weight: bold;
  }
  &:not(:has(>span)) a {
    margin-top: 1rem;
  }
  a {
    border-radius: 10px;
    font-weight: bold;
    font-size: clamp(1.125rem, 0.762rem + 1.55vw, 1.75rem);
    position: relative;
    align-items: center;
    animation: cvbtn-age2 2s infinite;
    margin-top: calc((var(--cta-button-copy-y-pos) * 1rem) + 20px);
    padding: 34px 10px 28px;
    background-image: var(--cta-button-bg-color);

    &:after{
      content: "";
      position: absolute;
      display: inline-block;
      height: 16px;
      aspect-ratio: 1;
      right: 5px;
      background: #efff00;
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
    }
    &:after{
      margin-right: 8px;
      background: #fff;
    }
  }
  /* SP ~768px */
  @media screen and (max-width:768px){
    a {
      padding: 20px 10px 18px;
    }
  }
}