@charset "utf-8";

/* -----------------------------------------------
* layout
-------------------------------------------------- */


/* -----------------------------------------------
* container
-------------------------------------------------- */
.l-container:where(header *,footer *) {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 520px;

  @media (min-width: 769px) {
    max-width: 1040px;
  }
}

.l-container:where(:not(header *,footer *)) {
  max-width: 31rem;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  @media (min-width: 376px) {
    max-width: 112rem;
    width: 90%;
  }
  @media (min-width: 769px) {
    width: 96%;
  }
}

/* -----------------------------------------------
* section
-------------------------------------------------- */
.l-section {
  padding-block: 32px 50px;
  padding-inline: 35px;

  @media (min-width: 769px) {
    padding-block: 100px;
  }
}

/* -----------------------------------------------
* button group
-------------------------------------------------- */
.l-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}