@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;
  padding: 0 3%;
}

@media screen and (max-width: 767px) {
  .l-container {
    -webkit-transition: all 300ms ease-in-out;
    right: 0;
    margin: 0;
    transition: all 300ms ease-in-out;
    z-index: 2;
  }
}

@media screen and (max-width: 767px) {
  .is-panelopened .l-container {
    right: 250px;
  }
}

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

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

/** =1-1
* header
* ----------------------------------
*/
.l-header {
  overflow: hidden;
  width: 100%;
  height: 85vh;
  margin: 0 auto 5vh;
  border-radius: 0 0 40px 40px;
  background: #dd5519;
}
.l-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-image: url(../image/mv_bg.png);
  background-size: 3px auto;
  z-index: 1;
}

/** =1-2
 * contents
 * ----------------------------------
 */
/* [ main contents ]
------------------------------ */

.l-article {
  margin: 0 auto;
}

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

/** =1-4
  * footer
  * ----------------------------------
  */
.l-footer {
  padding-bottom: 8vh;
}
.footerLogoImg {
  width: 300px;
}
.footerTxt {
  margin: 5vh auto 0;
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .footerLogoImg {
    width: 240px;
  }
  .footerTxt {
    margin: 3vh auto 0;
    font-size: 1.3rem;
  }
}

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

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