@charset "UTF-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */
/**
 * CSS Information
 * ===============================================================
 *
 * File name: layout.css
 * Summary:   レイアウト用スタイル
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    structures
 *       =1-1    header
 *       =1-2    contents
 *                 - main contents
 *                 - navigation
 *       =1-3    sidepanel
 *       =1-4    footer
 *     =2    breakpoint checker (for javascript)
 *
 * ===============================================================
*/
/** =1
 * ========================================
 * structures
 * ========================================
 */
.l-container {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0 auto;
}

    @media screen and (max-width: 767px) {
    }


.l-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
}
.slimInner{
  margin: 0 auto;
  width: 85%;
}

    @media screen and (max-width: 767px) {
      .l-inner {
        padding: 0 20px;
      }
      .slimInner{
        width: 100%;
      }
    }



/** =1-2
 * contents
 * ----------------------------------
 */
.l-contents{
  padding: 0 80px 0 264px;
  line-height: 1.95;
}

    @media screen and (max-width: 912px) {
      .l-contents{
        padding: 0 60px 0 244px;
      }
    }

    @media screen and (max-width: 777px) {
      .l-contents{
        padding: 0 50px 0 222px;
      }
    }

    @media screen and (max-width: 767px) {
      .l-contents{
        padding: 0;
      }
    }


/* [ main contents ]
------------------------------ */
.l-main {
  padding: 60px 0;
}

    @media screen and (max-width: 767px) {
      .l-main {
        padding: 140px 0 60px;
      }
    }

.l-article {
  margin: 0 auto;
}

    @media screen and (max-width: 767px) {
      .l-article {
      }
}

/* [ navigation ]
------------------------------ */
.l-nav {
  background: #09A159;
}

@media screen and (max-width: 767px) {
  .l-nav {
    display: none;
    position: absolute;
    top: 60px;
    width: 100%;
    z-index: 10;
  }
  .l-nav .navHandler {
    display: block;
  }
}

@media screen and (min-width: 768px) and (max-width: 999px) {
  .l-nav {
    display: block !important;
  }
}

@media screen and (min-width: 1000px) {
  .l-nav {
    display: block !important;
    padding: 20px 10px;
  }
}

.navList {
  background: #09A159;
}

/** =1-3
* sidepanel
* ----------------------------------
*/
.l-sidepanel {
  display: none;
}

    @media screen and (max-width: 767px) {
      .l-sidepanel {
        overflow-y: auto;
        position: fixed;
        top: 126px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 5;
        padding: 20px;
        background: #fff;
        -webkit-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
      }
      .is-menuOpened .l-sidepanel {
        display: block;
      }
      .sidepanelNavWrapper{
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }
    }



/** =1-4
  * footer
  * ----------------------------------
  */
.l-footer {
  width: 100%;
}

/** =2
* ========================================
* breakpoint checker (for javascript)
* ========================================
*/
#js-breakpointChecker {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -100;
}

@media screen and (max-width: 767px) {
  #js-breakpointChecker .narrow {
    display: block;
  }
}

@media screen and (min-width: 768px) and (max-width: 999px) {
  #js-breakpointChecker .medium {
    display: block;
  }
}

@media screen and (min-width: 1000px) {
  #js-breakpointChecker .wide {
    display: block;
  }
}

#js-breakpointChecker div {
  display: none;
}