@charset "UTF-8";
/*
  /asuracore/asset/css/object/component/c-button.css
  ボタン
*/

/* テキストは中央、矢印は右端へ絶対配置。左右へ同じ余白を取り見た目の中央を保つ */
.c-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  padding: 20px 51px;
  border: 2px solid transparent;
  border-radius: 32.5px;
  background-color: var(--magenta);
  transition:
    200ms ease background-color,
    200ms ease border-color,
    200ms ease color;

  /* ホバー時は配色を反転（背景マゼンタ→白、文字と枠線・矢印は白→マゼンタ） */
  &:hover {
    border-color: var(--magenta);
    background-color: var(--white);
    color: var(--magenta);

    &::after {
      border-top-color: var(--magenta);
      border-right-color: var(--magenta);
    }

    .c-button__text {
      color: var(--magenta);
    }

    /* バッジは地と図が入れ替わる */
    .c-button__badge {
      background-color: var(--magenta);
      color: var(--white);
    }
  }

  /* 矢印アイコン。右端に40px角の領域を取り、その中央に「>」を引く */
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 13px;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
    transition: 200ms ease border-color;
    transform: translate(-60%, -50%) rotate(45deg);
  }

  /* 非活性時は反転させない */
  &:disabled {
    background-color: var(--gray);
    cursor: default;

    &:hover {
      border-color: transparent;
      background-color: var(--gray);

      &::after {
        border-top-color: var(--white);
        border-right-color: var(--white);
      }

      .c-button__text {
        color: var(--gray-09);
      }

      .c-button__badge {
        background-color: var(--white);
        color: var(--magenta);
      }
    }
  }

  /* ヘッダー内など、高さを抑えて使う場合 */
  &.c-button--compact {
    max-width: 274px;
    padding: 12px 38px;
    border-radius: 142.5px;

    &::after {
      right: 12px;
      width: 10px;
      height: 10px;
    }

    @media screen and (max-width: 840px) {
      max-width: 208px;
      padding: 5px 29px 5px 13px;

      &::after {
        right: 8px;
        width: 9px;
        height: 9px;
      }
    }

    .c-button__text {
      @media screen and (max-width: 840px) {
        font-size: 14px;
        letter-spacing: 1px;
      }
    }

    .c-button__badge {
      @media screen and (max-width: 840px) {
        min-width: 32px;
        height: 16px;
        padding: 1px 4px 2px;
        font-size: 12px;
        letter-spacing: 0.6px;
      }
    }
  }

  /* 背景が濃い面に置く場合。白フチで輪郭を出す */
  &.c-button--outline {
    border: 2px solid var(--white);
    border-radius: 92.5px;

    /* 白背景へ反転するため、枠線も白のままだと消える */
    &:hover {
      border-color: var(--magenta);
    }
  }

  /* ファーストビューなど、主役として大きく置く場合 */
  &.c-button--large {
    max-width: 362px;
    padding: 20px 53px 18px;
    border: 2px solid var(--white);
    border-radius: 162.5px;
    box-shadow: 0 0 10px rgb(29 43 86 / 10%);

    /* 白背景へ反転するため、枠線も白のままだと消える */
    &:hover {
      border-color: var(--magenta);
    }

    @media screen and (max-width: 840px) {
      max-width: 350px;
      padding: 18px 50px 19px;
    }

    .c-button__text {
      font-size: 22px;
      letter-spacing: 2px;

      @media screen and (max-width: 840px) {
        font-size: 20px;
        letter-spacing: 1px;
      }
    }
  }
}

.c-button__body {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
}

.c-button__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 2.2px;
  color: var(--gray-09);
  white-space: nowrap;
}

/* 「無料」などの補足ラベル */
.c-button__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 39px;
  height: 21px;
  padding: 1px 4px 2px;
  border-radius: 2px;
  background-color: var(--white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.7px;
  color: var(--magenta);
  margin: 2px 0 0 0;
}