@charset "utf-8";
/* autoprefixer: on */

/* Layout (枠組み) */

/* SmallScreen (768px〜) 以外 Sticky Footer */

@media screen and (min-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
    min-width: 1024rem;
  }
  main {
    flex: 1 0 auto;
    min-height: 1px;
  }
  footer { flex-shrink: 0; }
}

/* --- header --- */

.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--HEADER-H);
  z-index: var(--Z-HEADER);
}

@media screen and (max-width: 767.98px) {
  .l-header {
    height: var(--HEADER-H);
    border-bottom: var(--THIN) solid var(--gry);
  }
}

/* --- main --- */

.l-main {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: var(--HEADER-H);
  z-index: var(--Z-MAIN);
}

@media screen and (max-width: 767.98px) {
  .l-main {
    margin-top: calc( var(--HEADER-H) + 30rem );
    padding-right: 20rem;
    padding-left: 20rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .l-main {
    width: 964rem;
    padding-right: 0;
    padding-left: 0;
  }
}

@media screen and (min-width: 1024px) {
  .l-main {
    width: calc(964rem + (1280 - 964) * ((100vw - 1024rem) / (1280 - 1024)));
    padding-right: calc(0rem + (40 - 0) * ((100vw - 1024rem) / (1280 - 1024)));
    padding-left:  calc(0rem + (40 - 0) * ((100vw - 1024rem) / (1280 - 1024)));
  }
}

@media screen and (min-width: 1280px) {
  .l-main {
    width: 1280rem;
    padding-right: 40rem;
    padding-left: 40rem;
  }
}

/* --- footer --- */

.l-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150rem;
  z-index: var(--Z-FOOTER);
}

.l-footer__copy {
  font-weight: var(--FNT-WGT-L);
  font-size: 14rem;
  color: var(--blk-300);
}

@media screen and (max-width: 767.98px) {
  .l-footer {
    height: 120rem;
  }
}

/* --- grid --- */

.l-grid {
  display: grid;
  gap: var(--s4) var(--s5);
  grid-auto-flow: row;
}

.l-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.l-grid__item--full {
  grid-column: 1 / -1;
}

.l-grid__item {
  min-width: 0;
}

/* timeseries */

.l-grid--timeseries {
  display: grid;
  grid-template-columns: 756fr 424fr;
  gap: 20rem;
  width: 100%;
  max-width: 1200rem;
  margin-left: auto;
  margin-right: auto;
}

.l-grid--timeseries .l-grid__item {
  display: flex;
  flex-direction: column;
}

.l-grid--timeseries .l-grid__item .p-section--display {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* mypage */

.l-grid--mypage {
  display: grid;
  grid-template-columns: 424fr 756fr;
  gap: 20rem;
  width: 100%;
  max-width: 1200rem;
  margin-left: auto;
  margin-right: auto;
}

.l-grid--mypage .p-section.p-section--plain {  margin-top: var(--s5); }

/* start */

.l-grid--status {
  grid-template-columns: repeat(4, 1fr);
}

.l-grid--start {
  display: grid;
  grid-template-columns: minmax(0, 756fr) minmax(365rem, 424fr);
  gap: 20rem;
  width: 100%;
  max-width: 1200rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--s5);
}

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

  .l-grid--2col,
  .l-grid--mypage,
  .l-grid--start,
  .l-grid--timeseries {
    grid-template-columns: 1fr;
  }

  .l-grid--2col .l-grid {
    gap: var(--s2) 0;
  }

  .l-grid--mypage,
  .l-grid--timeseries {
    gap: 0;
  }

  .l-grid--status {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-grid--mypage .l-grid,
  .l-grid--start .l-grid {
    gap: var(--s4) 0;
  }

}