//ボタン
.btn_margin {
  margin-top: 2.25rem;
  margin-bottom: 4rem;
  @include mq(min_pc) {
    margin-top: 2.5rem;
    margin-bottom: 7rem;
  }
}
.btn_column {
  display: flex;
  flex-direction: column;
  @include mq(min_pc) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.44rem;
  }
}
%btn {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  place-content: center;
  letter-spacing: 0.05em;
  position: relative;
  max-width: 339px;
  opacity: 1;
  transition: 0.3s ease-in-out;
  span {
    font-size: 0.89rem;
    font-weight: 700;
    transition: 0.3s ease-in-out;
  }
  &::after {
    position: absolute;
    top: 50%;
    right: 0.89rem;
    transform: translateY(-50%);
    display: block;
    content: "";
    width: 0.44rem;
    height: 0.83rem;
    aspect-ratio: 1 / 1;
    background: url("https://46923556.fs1.hubspotusercontent-na1.net/hubfs/46923556/arrow_white.svg") transparent no-repeat center / contain;
    transition: 0.3s right ease-in-out;
  }
  &:hover {
    opacity: 0.75;
    &::after {
      right: 0.91rem;
    }
  }
}
.btn_type01 {
  padding: 0.72rem;
  width: 100%;
  color: #ffffff;
  background: #005bac;
  text-align: center;
  @extend %btn;
}
.btn_type02 {
  padding: 0.94rem 2.63rem;
  width: fit-content;
  max-width: unset;
  color: $color_white;
  background-color: $color_yellow;
  text-align: center;
  @extend %btn;
  box-shadow: 0.2rem 0.2rem 0.6rem rgba(0, 0, 0, 0.2);
  @include mq(min_pc) {
    padding: 0.94rem 1.78rem;
  }
  span {
    position: relative;
    font-size: 0.94rem;
    color: $color_darkgray;
    &::after {
      position: absolute;
      top: 50%;
      left: calc(100% + 0.4rem);
      transform: translateY(-50%);
      display: block;
      content: "";
      width: 1.06rem;
      aspect-ratio: 1 / 1;
      background: url("../img/common/btn_arrow_yellow.svg") no-repeat center / contain;
      transition: 0.3s all ease-in-out;
      @include mq(min_pc) {
        width: 2rem;
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
      }
    }
    @include mq(min_pc) {
      display: grid;
      grid-template-columns: max-content max-content;
      align-items: center;
      column-gap: 0.39rem;
      font-size: 1.56rem;
    }
  }
  &:hover {
    span {
      position: relative;
      &::after {
        background: url("../img/common/btn_arrow_hover_yellow.svg") no-repeat center / contain;
      }
    }
  }
  &.blue {
    background-color: $color_blue;
    span {
      color: $color_white;
    }
  }
}
.btn_type03 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0.31rem;
  width: 100%;
  border: 1px solid $color_emeraldgreen;
  text-align: center;
  max-width: 139px;
  border-radius: 0.25rem;
  background-color: transparent;
  transition: 0.3s all ease-in-out;
  @include mq(min_pc) {
    padding: 1.28rem;
    max-width: 200px;
    border-radius: 0.22rem;
  }
  span {
    color: $color_emeraldgreen;
    font-size: 0.63rem;
    transition: 0.3s color ease-in-out;
    @include mq(min_pc) {
      font-size: 1.11rem;
    }
  }
  &:hover {
    background-color: $color_emeraldgreen;
    span {
      color: $color_white;
    }
  }
  &.small {
    padding: 0.5rem;
    border: 1px solid $color_emeraldgreen;
    background-color: transparent;
    transition: 0.3s all ease-in-out;
    max-width: 112px;
    span {
      color: $color_emeraldgreen;
      font-size: 0.83rem;
    }
    &:hover {
      background-color: $color_emeraldgreen;
      span {
        color: $color_white;
      }
    }
  }
  &.blue {
    border: 1px solid $color_blue;
    span {
      color: $color_blue;
    }
    &:hover {
      background-color: $color_blue;
    }
  }
  &.emeraldgreen {
    border: 1px solid $color_emeraldgreen;
    span {
      color: $color_emeraldgreen;
    }
    &:hover {
      background-color: $color_emeraldgreen;
    }
  }
}