@charset "utf-8";

/* .l-header {
  height: 100px;
  position: fixed;
} */

/* ## 横幅計算 */
.l-body-outer,
.l-center-header {
  width: calc(
    100vw - var(--left-header-width) - var(--right-header-width) - 10vw
  );
}
.l-body-outer {
  margin-left: calc(var(--left-header-width) + 5vw);
}
.l-center-header {
  left: calc(var(--left-header-width) + 5vw);
}

/* 予備の塗り */
.l-center-header::before,
.l-center-header::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--white);
}
.l-center-header::before {
  left: -1px;
}
.l-center-header::after {
  right: -1px;
}
@media (max-width: 1280px) {
  .l-body-outer,
  .l-center-header {
    width: calc(90vw - var(--right-header-width));
  }
  .l-body-outer {
    margin-left: 5vw;
  }
  .l-center-header {
    left: 5vw;
  }
}
@media (max-width: 768px) {
  .l-body-outer {
    width: 90vw;
  }
}
.l-body-inner {
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
}

/* ## l-wrapper */
.l-wrapper {
  margin-top: 200px;
}
@media (max-width: 768px) {
  .l-wrapper {
    margin-top: 120px;
  }
}

/* ## l-left-header */
.l-left-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  background: var(--white);
  width: var(--left-header-width);
}
@media (max-width: 1280px) {
  .l-left-header {
    display: none !important;
  }
}

/* ## l-center-header */
.l-center-header {
  position: absolute;
  top: 0;
  z-index: 2;
}
.l-center-header.is-fixed {
  position: fixed;
  opacity: 0;
}
.l-center-header.is-fixed.is-show {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* ## l-right-header */
.l-right-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
  background: var(--pink);
  height: 100%;
  width: var(--right-header-width);
}

@media (max-width: 768px) {
  .l-right-header {
    width: 60px;
    height: 60px;
  }
}

/* ## l-footer */
.l-footer {
}