@charset "UTF-8";

.g-btn-wrapper1,
.g-btn-wrapper2,
.g-btn-wrapper3,
.g-btn-wrapper4 {
  max-width: 280px;
  .g-btn {
    color: #fff;
  }
}

.g-btn-wrapper1 {
  background-color: #77b300;

  &:hover {
    background-color: #8aca09;
  }
}

.g-btn-wrapper2 {
  background-color: #268cbf;

  &:hover {
    background-color: #36a1d6;
  }
}

.g-btn-wrapper3 {
  background-color: #705c99;

  &:hover {
    background-color: #8470ad;
  }
}

.g-btn-wrapper4 {
  background-color: #bf9b69;

  &:hover {
    background-color: #d6b27f;
  }
}

.g-grid.g-grid-irregular-2 {
  max-width: 600px;
  margin: 0 auto;
}

.g-grid.g-grid-irregular-2 > *:nth-child(even) {
  margin-left: 20px;
}

.g-grid.g-grid-irregular-2 > *:nth-child(n+3) {
  margin-top: 20px;
}

.g-grid.g-grid-irregular-3 > .g-card > *:last-child{
  margin-top: auto;
}

.g-btn.g-btn--w-280 {
  max-width: 280px;
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .g-btn-wrapper1,
  .g-btn-wrapper2,
  .g-btn-wrapper3,
  .g-btn-wrapper4 {
    max-width: 100%;
  }

  .g-grid-2.g-grid-irregular-2:not(.g-grid-keep):not(.g-grid-irregular) {
    flex-direction: row;
  }

  .g-grid-2.g-grid-irregular-2:not(.g-grid-keep):not(.g-grid-irregular) > *{
    width: calc(50% - 5px);
  }

 .g-grid-2.g-grid-irregular-2:not(.g-grid-keep):not(.g-grid-irregular) > *:nth-child(even) {
    margin-left: 10px;
  }

  .g-grid-2.g-grid-irregular-2:not(.g-grid-keep):not(.g-grid-irregular) > *:nth-child(n+2) {
    margin-top: 0;
  }

  .g-grid-2.g-grid-irregular-2:not(.g-grid-keep):not(.g-grid-irregular) > *:nth-child(n+3) {
    margin-top: 10px;
  }

  .g-btn.g-btn--w-280 {
    max-width: 100%;
  }
}