/* ========================================
   Common
======================================== */

html,
body {
  overflow-x: clip;
}


.wrap {
  width: 100%;
}

.main {
  width: 100%;
}


/* ========================================
   Common Container
   PC 1920: 120 | 1680 | 120
======================================== */

.container {
  box-sizing: border-box;

  width: calc(100% - (var(--container-gutter) * 2));
  max-width: var(--container-width);

  margin-inline: auto;
}


@media (min-width: 768px) and (max-width: 1024px) {

  :root {
    --container-gutter: 32px;
  }

}


@media (max-width: 767px) {

  :root {
    --container-gutter: 20px;
  }

}