/*--==========================
layout
============================--*/

/* ========
.layout
======== */

.l-inner {
  box-sizing: border-box;
  max-width: 1020px;
  margin: 0 auto;
  padding-right: 10px;
  padding-left: 10px;
}

.l-content {
  overflow: hidden;
}

.l-content__body {
  position: relative;
  overflow: hidden;
}

.l-content__body .content-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url(/future/common/images/com_background.png);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: contain;
}

.l-content__body.-green {
  color: #fff;
}

.l-content__body.-green .content-bg-layer {
  background-color: #02ada9;
  background-image: url(/future/common/images/com_background02.png);
}

.l-content__body.-green .footer-block-01 {
  background-color: #fff;
}

/* ========
l-header
======== */

/* ========
l-footer
======== */

/* ========
l-side
======== */

@media screen and (min-width: 1px) and (max-width: 768px) {
  .l-inner {
    max-width: 100%;
    padding-right: 20px;
    padding-left: 20px;
  }

  .l-content__body .content-bg-layer {
    background-image: url(/future/common/images/com_background-sp.png);
  }

  .l-content__body.-green .content-bg-layer {
    background-image: url(/future/common/images/com_background02-sp.png);
  }
}