@charset "utf-8";

.header,
.footer {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.contents {
  max-width: 1000px;
  margin: 0 auto;
}

/**
* ツーカラム ************************************ */
.contents-wrap {
  display: flex;
  margin: 0 auto;
  max-width: 1000px;
}

.contents-wrap .side {
  margin-right: 40px;
  width: 180px;
}

.contents-wrap .contents {
  max-width: 780px;
  width: calc(100% - 220px);
}

@media screen and (max-width:1020px) and (min-width:768px) {
  /* ウィンドウ左右枠との間隔設定 */
  .contents {
    padding-left: 15px;
    padding-right: 15px;
  }

  /**
  * ツーカラム ************************************ */
  .contents-wrap {
    padding: 20px 15px 0;
  }

  .contents-wrap .contents {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  .contents-wrap .side {
    margin-right: 15px;
  }
}

@media screen and (max-width:767px) {
  .contents {
    max-width: 100%;
  }
  .main {
   padding: 0 1em;
  }

  /**
  * ツーカラム ************************************ */
  .contents-wrap {
    flex-wrap: wrap-reverse;
  }

  .contents-wrap .side {
    margin-right: 0;
    width: 100%;
  }

 /* E4 */
  .contents-wrap .side .nav-content{
    display: none;
  }



  .contents-wrap .contents {
    margin-bottom: 50px;
    width: 100%;
  }
}