body {
  margin: 0;
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
body .page-wrap {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}
body .page-wrap main {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
body .content {
  --gap: clamp(1rem, 2vw, 1rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(1024px, 100% - (var(--gap) * 2));
  --popout: minmax(0, 3.2rem);
  --feature: minmax(0, 8.0rem);
  display: grid;
  grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];
}
body .content .custom-container {
  grid-column: content;
}
body .content .custom-container-popout {
  grid-column: popout;
}
body .content .custom-container-feature {
  grid-column: feature;
}
body .content .custom-container-full {
  grid-column: full;
}