@charset "utf-8";

/* -----------------------------------------------
* button
-------------------------------------------------- */
/* button */
.c-button {
  width: 100%;
  max-width: var(--gaia-button-max-width, 378px);
}

.c-button a {
  border-radius: 100px;
  background-color: var(--gaia-button-bg-color, #fff);
  color: var(--gaia-button-color, var(--gaia-color-primary));
  border: 1px solid var(--gaia-button-border-color, var(--gaia-color-primary));
  letter-spacing: .025em;
  width: 100%;
  padding: .5em 1.25em;
  min-height: var(--gaia-button-height, 4.4rem);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.c-button a:after {
  content: "";
  display: block;
  --_size: .75em;
  width: var(--_size);
  height: var(--_size);
  border-top: 1px solid var(--gaia-button-color, var(--gaia-color-primary));
  border-right: 1px solid var(--gaia-button-color, var(--gaia-color-primary));
  position: absolute;
  top: 50%;
  right: .75em;
  transform: translateY(-50%) rotate(45deg);
}

.c-button--red {
  --gaia-button-bg-color: var(--gaia-color-accent);
  --gaia-button-color: #fff;
  --gaia-button-border-color: transparent;
}

.c-button--red a:after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.c-button--white a{
  padding: .3em 1.25em;
  min-height: var(--gaia-button-height, 4.2rem);
}

.c-button--primary a{ 
  background-color: var(--gaia-color-primary, #453200);
  color: #fff;
}
.c-button--primary a:after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.c-button--h56 a{
  min-height: 5.6rem;
  font-size: 2rem;
}

.c-button--h42 a{
  min-height: 4.2rem;
}

.c-button--w100{
  max-width: 100%;
}

@media (max-width: 768px) {
  .c-button--red a:after {
    right: 1.3rem;
  }
  .btn-main, .c-button {
    max-width: 30rem;
    width: 100%;
  }
  .c-button--white a{
    font-size: 1.2rem;
    min-height: 2.9rem;
  }
  .c-button--h56 a{
    min-height: 4.4rem;
    font-size: 1.6rem;
  }
}