@charset "UTF-8";

/* =========================================================
   2col layout
========================================================= */
:root {
  --site-width: 1080px;
}

#pageHeader {
  padding: 7px 20px;
}

#pageHeader::after {
  content: "";
  position: absolute;
  left: 0;
  top: 80px;
  width: 100%;
  height: 3px;
  background: linear-gradient(to bottom, var(--mono-color-18) 0%, var(--mono-color-9) 100%);
}

#wrapper {
  display: flex;
  justify-content: space-between;
}

@media screen and (min-width: 960px) {
  #main {
    max-width: var(--site-width);
    margin: 0 auto 160px;
  }

  #content {
    flex-basis: var(--content-width);
  }

  #links {
    flex-basis: var(--side-width);
  }

  #accessibilityTool .pieceBody,
  .criteriaBox,
  #globalNavi .pieceBody {
    position: absolute;
    top: 79px;
    right: 0;
    z-index: 1;
  }
}

@media screen and (max-width: 959px) {
  #main {
    margin-bottom: 70px;
  }

  #wrapper {
    flex-wrap: wrap;
  }

  #content,
  #links {
    flex-basis: 100%;
    padding: 0 15px;
  }

  #content {
    margin-bottom: 35px;
  }

  #pageTitle {
    margin: 0 -15px 35px;
    padding: 24px 35px;
  }
}