/* ====================================
 共通
====================================== */
.l-header {
  clear: both;
}
.l-footer {
  clear: both;
}

/* ====================================
 スマホ
====================================== */
@media all and (min-width: 0) and (max-width: 640px) {
  .l-header {
    background: url(../img/base/mainvisual_bg.png) repeat-x bottom;
    background-size: contain;
    min-height: 110px;
    width: 100%;
  }
    .l-header__inner {
      position: relative;
    }
  .l-main {
    clear: both;
    padding: 10px 20px 20px 20px;
  }
  .l-footer {
    background: #fff;
    padding-top: 20px;
    position: relative;
  }
}

/* ====================================
 PC
====================================== */
@media screen and (min-width: 641px) {
  .l-header {
    background: url(../img/base/mainvisual_bg.png) repeat-x bottom;
    min-height: 220px;
    width: 100%;
  }
    .l-header__inner {
      margin: 0 auto;
      position: relative;
      width: 960px;
    }
  .l-container {
    margin: 0 auto;
    width: 960px;
  }
  .l-side {
    float: left;
    width: 180px;
  }
  .l-main {
    clear: both;
    margin: 0 auto;
    min-height: 300px;
    position: relative;
    width: 800px;
  }
  .l-main2 {
    float: right;
    min-height: 300px;
    position: relative;
    width: 750px;
  }
  .l-footer {
    background: #fff;
    padding-top: 30px;
    position: relative;
  }
}