/* ==============================
   Button V2 Component
   4 types: primary / secondary / tertiary / cv
   4 sizes: sm / md / lg / xl
============================== */

.nc-button-v2 {
  color: var(--_btn-color)!important;
  background: var(--_btn-bg)!important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--font-size-medium)!important;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: var(--button-shadow-2);
  border: none;
  cursor: pointer;
  width: fit-content;
  transition: opacity 0.2s ease;
}

.nc-button-v2::after {
  content: '';
  width: 16px;
  height: 16px;
  background-image: var(--_btn-arrow);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 4px;
  position: relative;
  top: 1px;
  flex-shrink: 0;
}

.nc-button-v2:hover,
.nc-button-v2:focus {
  opacity: 0.8;
  text-decoration: none;
}

/* ------ Type: Primary (green gradient) ------ */
.nc-button-v2.is-primary {
  --_btn-color: #ffffff;
  --_btn-bg: linear-gradient(90deg, #1F8CA6 0%, #41B1B7 77%, #41B1B7 100%);
  --_btn-arrow: url('/img/common/button-arrow-white.svg');
}

/* ------ Type: Secondary (black gradient) ------ */
.nc-button-v2.is-secondary {
  --_btn-color: #ffffff;
  --_btn-bg: linear-gradient(90deg, #181818 0%, #303030 78%, #303030 100%);
  --_btn-arrow: url('/img/common/button-arrow-white.svg');
}

/* ------ Type: Tertiary (light gradient) ------ */
.nc-button-v2.is-tertiary {
  --_btn-color: #545454;
  --_btn-bg: linear-gradient(90deg, #D2E8E9 0%, #EEF2F3 100%);
  --_btn-arrow: url('/img/common/button-arrow-black.svg');
}

/* ------ Type: cv (red gradient) ------ */
.nc-button-v2.is-cv {
  --_btn-color: #ffffff;
  --_btn-bg: linear-gradient(90deg, #BF0014 0%, #FF3139 78%);
  --_btn-arrow: url('/img/common/button-arrow-white.svg');
}

/* ------ Size: Small (120 x 40 / min-text: 72px) ------ */
.nc-button-v2.sz-sm {
  height: 40px;
  /* min-width: 120px; */
  padding: 0 12px 0 var(--space-lvl2);
  border-radius: 4px;
}

/* ------ Size: Medium (160 x 50 / min-text: 80px) ------ */
.nc-button-v2.sz-md {
  height: 50px;
  /* min-width: 160px; */
  padding: 0 var(--space-lvl4);
  font-size: var(--font-size-large)!important;
  border-radius: 8px;
}

/* ------ Size: Large (160 x 65 / min-text: 80px) ------ */
.nc-button-v2.sz-lg {
  height: 65px;
  /* min-width: 160px; */
  max-width: 660px;
  padding: 0 var(--space-lvl4);
  font-size: var(--font-size-large)!important;
  border-radius: 8px;
}

/* ------ Size: X-Large (160 x 100 / min-text: 80px) ------ */
.nc-button-v2.sz-xl {
  height: 100px;
  /* min-width: 160px; */
  max-width: 660px;
  padding: 0 var(--space-lvl4);
  font-size: var(--font-size-x-large)!important;
  border-radius: 8px;
}

/* ------ Responsive (SP) ------ */
@media screen and (max-width: 39.9375em) {
  .nc-button-v2.sz-sm {
    font-size: var(--font-size-small)!important;
  }

  .nc-button-v2.sz-md {
    font-size: var(--font-size-medium)!important;
  }

  .nc-button-v2.sz-lg {
    font-size: var(--font-size-medium)!important;
  }

  .nc-button-v2.sz-xl {
    height: 75px;
    font-size: var(--font-size-large)!important;
  }
}