/* ============================================
   cta.css
   全ページ共通 CTAボタン
   ============================================ */

.btn {
  align-items: center;
  border-radius: var(--radius-3);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-family-figtree);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-700);
  height: 55px;
  line-height: var(--line-height-160);
  overflow: hidden;
  text-decoration: none;
  transition:
    filter 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  width: 230px;
}

.btn:hover,
.btn:focus-visible {
  filter: brightness(0.94);
}

/* ---- カラーバリエーション ---- */

/* Navy塗り（お問い合わせ など） */
.btn--navy {
  background-color: var(--color-navy-2);
  color: var(--color-white-1);
}

.btn--navy .btn__icon::before {
  background-color: #205267;
}

/* Gold塗り（サポート体制の問い合わせるボタンなど） */
.btn--gold {
  background-color: var(--color-gold-1);
  color: var(--color-white-1);
}

.btn--gold .btn__icon::before {
  background-color: var(--color-gold-2);
}

.btn--gold .btn__icon-square {
  background-color: var(--color-gold-2);
  color: var(--color-white-1);
}

/* Outline（採用情報・会社概要 など） */
.btn--outline {
  background-color: transparent;
  border: 1px solid var(--color-navy-2);
  color: var(--color-navy-2);
}

/* White塗り（フッターなど dark背景上） */
.btn--white {
  background-color: var(--color-white-1);
  color: var(--color-navy-2);
}

/* ---- 内部レイアウト ---- */

.btn__label {
  flex: 1;
  padding-inline-start: 20px;
}

/* 縦区切り線 + 矢印アイコン エリア */
.btn__icon {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 70px;
}

/* 縦区切り線 */
.btn__icon::before {
  content: "";
  background-color: #EBEBEB;
  height: 44px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}

.btn__icon-square {
  align-items: center;
  background-color: var(--color-navy-2);
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--color-white-1);
  display: inline-flex;
  height: 30px;
  isolation: isolate;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: color 0.18s ease 0.12s, border-color 0.2s ease;
  width: 30px;
}

.btn--navy .btn__icon-square {
  background-color: var(--color-white-1);
  color: var(--color-navy-2);
}

.btn__icon-square::before {
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease;
  z-index: 0;
}

.btn__icon-square .btn__arrow,
.btn__icon-square > .btn__arrow {
  position: relative;
  z-index: 1;
}

.btn--outline .btn__icon-square,
.btn--white .btn__icon-square {
  border-color: var(--color-navy-2);
}

.btn--outline .btn__icon-square::before,
.btn--white .btn__icon-square::before {
  background-color: var(--color-white-1);
}

.btn--navy .btn__icon-square {
  border-color: var(--color-white-1);
}

.btn--navy .btn__icon-square::before {
  background-color: var(--color-navy-2);
}

.btn--outline:hover .btn__icon-square,
.btn--outline:focus-visible .btn__icon-square,
.btn--white:hover .btn__icon-square,
.btn--white:focus-visible .btn__icon-square {
  color: var(--color-navy-2);
}

.btn--navy:hover .btn__icon-square,
.btn--navy:focus-visible .btn__icon-square {
  color: var(--color-white-1);
}

.btn:hover .btn__icon-square::before,
.btn:focus-visible .btn__icon-square::before {
  transform: scaleX(1);
}

.btn__arrow {
  display: block;
  height: 9.6px;
  position: relative;
  width: 9.6px;
}

.btn__arrow::before {
  background-color: currentColor;
  display: block;
  height: 100%;
  width: 100%;
  content: "";
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath d='M16.9097 9.72217L9.13195 1.94439L11.1111 0L22.2222 11.1111L11.1111 22.2222L9.13195 20.2777L16.9097 12.4999L0 12.4999L0 9.72217L16.9097 9.72217Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath d='M16.9097 9.72217L9.13195 1.94439L11.1111 0L22.2222 11.1111L11.1111 22.2222L9.13195 20.2777L16.9097 12.4999L0 12.4999L0 9.72217L16.9097 9.72217Z' fill='white'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.btn__arrow-tail,
.btn__arrow-head {
  display: none;
}

/* ---- サイズバリエーション ---- */

/* ヘッダー用（小サイズ）*/
.btn--sm {
  font-size: var(--font-size-14);
  height: 55px;
  width: 200px;
}

/* フッター用（大サイズ）*/
.btn--lg {
  height: 70px;
  width: 300px;
}

.btn--lg .btn__icon::before {
  height: 54px;
}

.btn--lg .btn__icon {
  width: 70px;
}

.btn--lg .btn__icon-square {
  height: 34px;
  width: 34px;
}

/* ---- Icon only button ---- */

.icon-btn {
  align-items: center;
  border-radius: 8px;
  color: var(--color-white-1);
  display: inline-flex;
  height: 55px;
  justify-content: center;
  position: relative;
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    filter 0.2s ease;
  width: 55px;
}

.icon-btn--30 {
  border-radius: 5px;
  height: 30px;
  width: 30px;
}

.icon-btn--50 {
  border-radius: 6px;
  height: 50px;
  width: 50px;
}

.icon-btn--55 {
  border-radius: 8px;
  height: 55px;
  width: 55px;
}

.icon-btn--navy {
  background-color: var(--color-navy-2);
}

.icon-btn--black {
  background-color: var(--color-black-1);
}

.icon-btn:hover {
  filter: brightness(0.9);
}

.icon-btn .btn__arrow {
  height: 14px;
  width: 20px;
}

.icon-btn--30 .btn__arrow {
  height: 9.6px;
  width: 9.6px;
}

.icon-btn--50 .btn__arrow {
  height: 22.222px;
  width: 22.222px;
}

.icon-btn--55 .btn__arrow {
  height: 22.222px;
  width: 22.222px;
}

/* ---- レスポンシブ ---- */

@media screen and (max-width: 768px) {
  .btn {
    font-size: var(--font-size-14);
    height: 40px;
    width: 110px;
  }

  .btn__icon::before {
    height: 38px;
  }

  .btn--lg {
    height: 50px;
    width: 100%;
  }

  .btn__icon {
    width: 50px;
  }

  .btn__icon-square {
    height: 28px;
    width: 28px;
  }

  .btn__arrow {
    height: 12px;
    width: 16px;
  }

  .icon-btn {
    border-radius: 6px;
    height: 50px;
    width: 50px;
  }

  .icon-btn--55 {
    height: 50px;
    width: 50px;
  }

  .icon-btn--55 .btn__arrow,
  .icon-btn--50 .btn__arrow {
    height: 18px;
    width: 18px;
  }

  .icon-btn--30 {
    height: 30px;
    width: 30px;
  }

  .icon-btn--30 .btn__arrow {
    height: 9.6px;
    width: 9.6px;
  }
}