@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-container {
      }
    }

.l-contents{
  margin-bottom: 200px;
}

.l-inner {
  max-width: 1000px;
  margin: 0 auto;
}

    @media screen and (max-width: 999px) {
      .l-inner {
        width: 96%;
      }
    }



/** =1-2
 * contents
 * ----------------------------------
 */
/* [ main contents ]
------------------------------ */
.l-main {
  padding-left: 240px;
}

    @media screen and (max-width: 999px) {
      .l-main {
        padding-left: 0;
      }
    }

.l-article {
  margin: 0 auto;
  padding: 70px 0
}
.innerPage .l-article:first-of-type {
  padding-top: 130px;
}

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



/* [ sideArea ]
------------------------------ */
.sideWrapper{
  flex-direction: column;
  justify-content: space-between;
  width: 240px;
  height: 100%;
}

  @media screen and (max-width: 999px) {
    .sideWrapper{
      display: none;
    }
  }



/* [ header ]
------------------------------ */
.l-header{
  display: none;
}

    @media screen and (max-width: 999px) {
      .l-header{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 11;
        width: 100%;
        padding: 10px 20px;
        background: rgba(355,355,355,0.9);
      }
      #home .l-header{
        padding: 20px;
        background: none;
      }
      #home .l-header.scrolled{
        padding: 10px 20px;
        background: rgba(355,355,355,0.9);
      }
      .is-menuOpened .l-header{
        background: none;
      }
    }



/** =1-3
* sidepanel
* ----------------------------------
*/
.l-menu {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 80px 0;
  overflow-y: auto;
  background: rgba(0,0,0,0.85);
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  z-index: 10;
}
.l-menu a{
  color: #fff;
}
.l-menu .sitemapUl .companyPhilosophyLi.linkToTop::before{ background: #fff;}



/** =1-4
  * footer
  * ----------------------------------
  */
.l-footer {
  background: #eeeeee;
}
.footerInner{
  padding: 0 0 70px 240px;
}

    @media screen and (max-width: 999px) {
      .footerInner{
        padding: 0 0 70px 0;
      }
    }


/** =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;
}