.nittan-btn {
  --btn-bg: #023b4a;
  --btn-fill: #ee0d08;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 42px;
  padding: 14px 30px;
  background: var(--btn-bg);
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
  transform: skewX(-10deg);
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 225px;
  width: 100%;
  overflow: hidden;
}

.nittan-btn > span {
  transform: skewX(10deg);
  position: relative;
  z-index: 2;
}

.nittan-btn:hover {
  color: #fff;
}

.nittan-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--btn-fill);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.5s ease;
  z-index: 1;
  pointer-events: none;
}
.nittan-btn:hover::before,
.nittan-btn:focus-visible::before {
  transform: scaleX(1);
}

.nittan-btn::after {
  content: '';
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 12px;
  margin-left: auto;
  position: relative;
  z-index: 2;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 6C0 5.66249 0.273604 5.38889 0.611111 5.38889L15.0246 5.38889L11.179 1.54323C10.9403 1.30458 10.9403 0.917645 11.179 0.678991C11.4176 0.440337 11.8046 0.440337 12.0432 0.678991L16.9321 5.56788C17.1708 5.80653 17.1708 6.19347 16.9321 6.43212L12.0432 11.321C11.8046 11.5597 11.4176 11.5597 11.179 11.321C10.9403 11.0824 10.9403 10.6954 11.179 10.4568L15.0246 6.61111L0.611111 6.61111C0.273604 6.61111 0 6.33751 0 6Z' fill='white'/></svg>");

  transform: skewX(10deg) translateX(0);
  transition: transform 0.2s ease;
}

.nittan-btn:hover::after,
.nittan-btn:focus-visible::after {
  transform: skewX(10deg) translateX(2px);
}

.nittan-btn.primary {
  --btn-bg: #023b4a;
  --btn-fill: #ee0d08;
}
.nittan-btn.secondary {
  --btn-bg: #ee0d08;
  --btn-fill: #023b4a;
}

.nittan-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}