@charset "UTF-8";

/* =========================================================
　　Fix Layout Top Column
========================================================= */
#row {
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "menu main links"
    "banner banner banner"
    "ad ad ad";
}
#advertisement {
  grid-area: banner;
}
@media only screen and (max-width: 960px) {
  #row {
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
    "menu"
    "main"
    "links"
    "banner"
    "ad";
  }
}

/* IE11
----------------------------------------------- */
_:lang(x)::-ms-backdrop, #row {
  -ms-grid-rows: 1fr auto;
}
_:lang(x)::-ms-backdrop, #advertisement {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-column-span: 5;
}
_:lang(x)::-ms-backdrop, #adBanner {
  -ms-grid-column: 1;
  -ms-grid-row: 3;
  -ms-grid-column-span: 5;
}
@media only screen and (max-width: 960px) {
  _:lang(x)::-ms-backdrop, #row {
    -ms-grid-rows: auto auto auto auto auto;
  }
  _:lang(x)::-ms-backdrop, #menu {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }
  _:lang(x)::-ms-backdrop, #content {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }
  _:lang(x)::-ms-backdrop, #links {
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }
  _:lang(x)::-ms-backdrop, #advertisement {
    -ms-grid-column: 1;
    -ms-grid-row: 4;
    -ms-grid-column-span: 1;
  }
  _:lang(x)::-ms-backdrop, #adBanner {
    -ms-grid-column: 1;
    -ms-grid-row: 5;
    -ms-grid-column-span: 1;
  }
}

/* adBanner
----------------------------------------------- */
#adBanner {
  grid-area: ad;
  border: 5px solid #e6e6e6;
  margin: 40px 0 0;
  padding: 10px 10px 0 30px;
}
#adBanner h2 {
  float: left;
  margin: 0 20px 10px 0;
  font-size: 1rem;
}
#adBanner .upper_text {
  float: left;
  margin: 0;
}
#adBanner ul {
  clear: both;
  display: flex;
  flex-wrap: wrap;
}
#adBanner li {
  margin: 0 20px 15px 0;
}
@media only screen and (max-width: 960px) {
  #adBanner {
    margin: 30px 10px 0;
  }
}