@charset "UTF-8";

/* =========================================================
　　Fix Layout PC（Column 2）
========================================================= */
#container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
}
#pageHeader .pieceBody,
#pageNav .pieceBody,
#row,
#pageFooter .pieceBody {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
}
#pageHeader {
  grid-area: header;
}
#pageNav {
  grid-area: nav;
}
#row {
  display: grid;
  grid-area: main;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 240px;
  grid-template-areas:
    "content menu";
  column-gap: 20px;
  padding: 20px 0 100px;
}
#content {
  grid-area: content;
}
#menu {
  grid-area: menu;
}
#pageFooter {
  grid-area: footer;
}

/* IE11
----------------------------------------------- */
_:lang(x)::-ms-backdrop, #container {
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: auto auto 1fr auto;
}
_:lang(x)::-ms-backdrop, #pageHeader {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}
_:lang(x)::-ms-backdrop, #pageNav {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}
_:lang(x)::-ms-backdrop, #row {
  display: -ms-grid;
  -ms-grid-column: 1;
  -ms-grid-row: 3;
  -ms-grid-rows: 1fr;
  -ms-grid-columns: 1fr 20px 240px;
}
_:lang(x)::-ms-backdrop, #content {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}
_:lang(x)::-ms-backdrop, #menu {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}
_:lang(x)::-ms-backdrop, #pageFooter {
  -ms-grid-column: 1;
  -ms-grid-row: 4;
}