@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: layout.css
 * Summary:   レイアウト用スタイル
 * Author:    CrEa Inc.
 *
 * -----------------------------------
 *
 * 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 {
  /* overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0 auto;
  box-sizing: border-box; */
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  /* background-image: url(/assets/kikaku-joshaken/img/ooedo_raisan/index/bg_texture.jpg); */
  /* background-attachment: fixed;
  background-size: cover; */
  /* background-color: rgba(0, 0, 0, 0.6); */
  /* background-blend-mode: darken; */

}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-container {
    right: 0;
    z-index: 2;
    margin: 0;
    padding-bottom: 170px;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  .is-panelopened .l-container {
    right: 250px;
  }
  #multipay .l-container {
    padding-bottom: 60px;
  }
}
/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 768px) {
  .l-container {
    padding-bottom: 140px;
  }
  #multipay .l-container {
    padding-bottom: 80px;
  }
}

.l-inner {
  width: 92%;
  max-width: 900px;
  margin: 0 auto;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-inner {
    width: 87.5%;
  }
}

/** =1-1
   * header
   * ----------------------------------
   */

.l-header {
  width: 100%;
  padding: 2% 0;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-header {
    padding: 4% 0;
  }
}

/** =1-2
   * contents
   * ----------------------------------
   */

.l-contents {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-contents {
  }
}

/* [ main contents ]
    ------------------------------ */
.l-main {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-main {
    width: auto;
  }
}

.l-article {
  margin: 0 auto 20px;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-article {
    padding: 0;
  }
}

.l-section {
  margin-bottom: 5%;
}
.sectionSlim {
  width: 80%;
  margin: 0 auto;
}
.sectionAboutMag {
  border: 10px solid #eee;
  padding: 20px;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-section {
  }
  .sectionSlim {
    width: 100%;
  }
  .sectionAboutMag {
    border: none;
    padding: 0;
  }
}

/* [ navigation ]
    ------------------------------ */
.l-nav {
  margin-bottom: 85px;
  position: relative;
  z-index: 10;
}

.navList {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-nav {
  }

  /*.l-nav .navHandler {
          display: block;
        }*/
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  .l-nav {
    /*display: block !important;*/

  }
}

/** =1-3
   * sidepanel
   * ----------------------------------
   */

.l-sidepanel {
  display: none;
}

.l-sidepanel li a {
  display: block;
  padding: 5px;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-sidepanel {
    display: block;
    position: fixed;
    top: 0;
    right: -250px;
    z-index: -10;
    overflow-y: auto;
    width: 250px;
    height: 100%;
    background: #09a159;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }

  .is-panelopened .l-sidepanel {
    z-index: 1;
    right: 0;
  }

  .l-sidepanel .navHandler {
    position: static;
  }
}

/** =1-4
   * footer
   * ----------------------------------
   */

.l-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background: #EBD784;
}

#maintenance .l-footer {
  position: absolute;
  bottom: 0;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  .l-footer {
    padding-bottom: 60px;
  }
}

/** =2
 * ========================================
 * breakpoint checker (for javascript)
 * ========================================
 */

#js-breakpointChecker {
  position: absolute;
  z-index: -100;
  width: 0;
  height: 0;
  overflow: hidden;
}

#js-breakpointChecker div {
  display: none;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 767px) {
  #js-breakpointChecker .narrow {
    display: block;
  }
}