@charset "UTF-8";

a,
button,
span {
  &.btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 220px;
    max-width: 500px;
    padding: 11px 28px;
    overflow: hidden;
    font-size: rem(20);
    font-weight: 700;
    line-height: 1.5;
    color: var(--surface-primary);
    text-align: center;
    text-decoration: none;
    background: var(--surface-brand-accent);
    border: 2px solid var(--surface-brand-accent);
    border-radius: var(--border-radius-FULL);
    @include mq_max_lg {
      font-size: rem(16);
    }
    @include mq_max_sm {
      max-width: 100%;
    }
    &[disabled] {
      color: var(--on-surface-tertiary-disabled);
      background: var(--surface-brand-accent-disabled);
      border: 2px solid var(--surface-brand-accent-disabled);
    }
    &:hover {
      color: var(--surface-primary);
      background: var(--surface-brand-accent-hover);
      border: 2px solid var(--surface-brand-accent-hover);
      box-shadow: 0px 2px 2px 0px var(--shadow-button);
      transform: translateY(-2px);
    }
    &:focus {
      box-shadow: none;
    }
  }
  // 「>」矢印アイコン
  .arrow_right {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: var(--on-surface-inverse);
    mask-image: url(/general-asset/img/icon_keyboard_arrow_right.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
  }
  // 別タブの有無
  &:not(.no-window)[target]::after {
    width: 1.5em;
    height: 1.5em;
    content: "";
    background-color: var(--on-surface-inverse);
    mask-image: url("/general-asset/img/icon_tab-window.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  // タグ
  &.btn__copy {
    span {
      display: inline-block;
      padding: 4px 12px;
      font-size: rem(18);
      font-weight: 700;
      color: var(--surface-brand-accent);
      white-space: nowrap;
      background: var(--surface-primary);
      border-radius: 100px;
      @include mq_max_sm {
        display: none;
      }
    }
    &:hover span {
      color: var(--surface-brand-accent-hover);
    }
  }
  // アイコン
  &.btn__icon {
    img {
      width: 1.5em;
      // #fff
      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7485%) hue-rotate(102deg) brightness(100%) contrast(105%);
    }
  }
  // カラー
  &.btn__border {
    color: var(--on-surface-brand-accent);
    background: var(--surface-primary);
    border: 2px solid var(--surface-brand-accent);
    &[disabled] {
      color: var(--on-surface-brand-accent-disabled);
      background: var(--surface-primary);
      border: 2px solid var(--surface-brand-accent-disabled);
    }
    &:hover {
      color: var(--on-surface-inverse);
      background: var(--surface-brand-accent-hover);
      border: 2px solid var(--surface-brand-accent-hover);
    }
    &:not(.no-window)[target] {
      &::after {
        background-color: var(--surface-brand-accent);
      }
      &:hover::after {
        background-color: var(--on-surface-inverse);
      }
    }
    &.btn__copy {
      span {
        color: var(--on-surface-inverse);
        background: var(--surface-brand-accent);
      }
      &:hover span {
        color: var(--surface-brand-accent-hover);
        background: var(--surface-primary);
      }
    }
    &.btn__icon {
      img {
        // #ff8c00
        filter: brightness(0) saturate(100%) invert(52%) sepia(71%) saturate(2781%) hue-rotate(5deg) brightness(111%) contrast(101%);
      }
      &:hover {
        img {
          // #fff
          filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7485%) hue-rotate(102deg) brightness(100%) contrast(105%);
        }
      }
    }
  }
  &.btn__primary {
    color: var(--on-surface-inverse);
    background: var(--surface-brand-primary);
    border: 2px solid var(--surface-brand-primary);
    &[disabled] {
      color: var(--on-surface-tertiary-disabled);
      background: var(--on-surface-brand-primary-disabled);
      border: 2px solid var(--on-surface-brand-primary-disabled);
    }
    &:hover {
      background: var(--surface-brand-primary-hover);
      border: 2px solid var(--surface-brand-primary-hover);
    }
    &:not(.no-window)[target] {
      &::after {
        background-color: var(--on-surface-inverse);
      }
      &:hover::after {
        background-color: var(--on-surface-inverse);
      }
    }
    &.btn__copy {
      span {
        color: var(--on-surface-brand-primary);
      }
      &:hover span {
        color: var(--on-surface-brand-primary-hover);
      }
    }
  }
  &.btn__primary.btn__border {
    color: var(--on-surface-brand-primary);
    background: var(--surface-primary);
    border: 2px solid var(--border-brand-primary);
    &[disabled] {
      color: var(--on-surface-brand-primary-disabled);
      background: var(--surface-surface-primary);
      border: 2px solid var(--on-surface-brand-primary-disabled);
    }
    &:hover {
      color: var(--on-surface-inverse);
      background: var(--surface-brand-primary-hover);
      border: 2px solid var(--surface-brand-primary-hover);
    }
    &:not(.no-window)[target] {
      &::after {
        background-color: var(--border-brand-primary);
      }
      &:hover::after {
        background-color: var(--on-surface-inverse);
      }
    }
    &.btn__copy {
      span {
        background: var(--surface-brand-primary);
      }
      &:hover span {
        color: var(--on-surface-brand-primary-hover);
        background: var(--surface-primary);
      }
    }
    &.btn__icon {
      img {
        // #004386
        filter: brightness(0) saturate(100%) invert(11%) sepia(94%) saturate(4152%) hue-rotate(199deg) brightness(92%) contrast(102%);
      }
      &:hover {
        img {
          // #fff
          filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7485%) hue-rotate(102deg) brightness(100%) contrast(105%);
        }
      }
    }
  }
  // サイズ
  &.btn__size {
    &-header {
      min-width: 150px;
      padding: 4px 28px;
      font-size: rem(16);
      line-height: 1.75;
      @include mq_max_xl {
        min-width: 250px;
        padding: 11px 28px;
      }
    }
    &-XS {
      min-width: 150px;
      padding: 4px 28px;
      font-size: rem(16);
      line-height: 1.75;
      @include mq_max_lg {
        font-size: rem(14);
      }
      &:not(.no-window)[target]::after {
        @include mq_max_lg {
          width: 25px;
          height: 25px;
        }
        @include mq_lg {
          width: 28px;
          height: 28px;
        }
      }
      &.btn__copy span {
        display: none;
      }
      &.btn__icon img {
        @include mq_max_lg {
          width: 25px;
          height: 25px;
        }
        @include mq_lg {
          width: 28px;
          height: 28px;
        }
      }
    }
    &-S {
      padding: 6px 28px;
      font-size: rem(18);
      line-height: 1.75;
      @include mq_max_lg {
        font-size: rem(16);
      }
      &:not(.no-window)[target]::after {
        @include mq_max_lg {
          width: 28px;
          height: 28px;
        }
        @include mq_lg {
          width: 32px;
          height: 32px;
        }
      }
      &.btn__copy span {
        display: none;
      }
      &.btn__icon img {
        @include mq_max_lg {
          width: 28px;
          height: 28px;
        }
        @include mq_lg {
          width: 32px;
          height: 32px;
        }
      }
    }
    &-M {
      padding: 11px 28px;
      font-size: rem(20);
      line-height: 1.5;
      @include mq_max_lg {
        font-size: rem(16);
      }
      &:not(.no-window)[target]::after {
        @include mq_max_lg {
          width: 28px;
          height: 28px;
        }
        @include mq_lg {
          width: 30px;
          height: 30px;
        }
      }
      &.btn__copy span {
        padding: 0 12px;
        font-size: rem(14);
        line-height: 1.75;
        @include mq_max_lg {
          font-size: rem(14);
          font-weight: 400;
          line-height: 1.5;
        }
      }
      &.btn__icon img {
        @include mq_max_lg {
          width: 28px;
          height: 28px;
        }
        @include mq_lg {
          width: 30px;
          height: 30px;
        }
      }
    }
    &-L {
      min-width: 290px;
      padding: 16px 28px;
      font-size: rem(24);
      line-height: 1.5;
      @include mq_max_lg {
        font-size: rem(16);
      }
      &:not(.no-window)[target]::after {
        @include mq_max_lg {
          width: 28px;
          height: 28px;
        }
        @include mq_lg {
          width: 36px;
          height: 36px;
        }
      }
      &.btn__copy span {
        padding: 4px 12px;
        font-size: rem(16);
        line-height: 1.5;
        @include mq_max_lg {
          padding: 0 12px;
          font-size: rem(14);
          line-height: 1.75;
        }
      }
      &.btn__icon img {
        @include mq_max_lg {
          width: 28px;
          height: 28px;
        }
        @include mq_lg {
          width: 36px;
          height: 36px;
        }
      }
    }
    &-XL {
      min-width: 290px;
      padding: 18px 28px;
      font-size: rem(32);
      line-height: 1.75;
      @include mq_max_lg {
        font-size: rem(18);
      }
      &:not(.no-window)[target]::after {
        @include mq_max_lg {
          width: 27px;
          height: 27px;
        }
        @include mq_lg {
          width: 56px;
          height: 56px;
        }
      }
      &.btn__copy span {
        padding: 4px 12px;
        font-size: rem(20);
        line-height: 1.5;
        @include mq_max_lg {
          padding: 0 12px;
          font-size: rem(16);
          line-height: 1.75;
        }
      }
      &.btn__icon img {
        @include mq_max_lg {
          width: 27px;
          height: 27px;
        }
        @include mq_lg {
          width: 56px;
          height: 56px;
        }
      }
    }
  }
  &.product-link {
    width: 170px !important;
    min-width: 100px !important;
    max-width: 100%;
    padding: 4px 30px;
    margin: 0 auto;
    font-size: rem(14) !important;
    line-height: 1.75;
    color: var(--on-surface-brand-primary);
    background: var(--surface-primary);
    border: 2px solid var(--border-brand-primary);
    &:hover {
      color: var(--on-surface-inverse);
      background: var(--surface-brand-primary-hover);
      border: 2px solid var(--surface-brand-primary-hover);
    }
    @include mq_max_lg {
      width: 150px !important;
      padding: 5.5px 30px;
      font-size: rem(12) !important;
      line-height: 1.5;
    }
    @include mq_max_sm {
      width: 130px !important;
      padding: 5.5px 10px;
    }
    &::after {
      width: 2em !important;
      height: 2em !important;
      background-color: var(--border-brand-primary) !important;
      @include mq_max_lg {
        width: 18px !important;
        height: 18px !important;
      }
    }
    &:hover::after {
      background-color: var(--on-surface-inverse) !important;
    }
  }
}