@charset "UTF-8";

/*
============================================================
---- トップ ----
============================================================
*/
.topPage {
  background-color: var(--color-navy-main);
  color: var(--color-white);
}

/*
============================================================
---- 第三階層 ----
============================================================
*/
.thirdLevel {
  padding-top: var(--header-height);
  background-color: var(--color-navy-main);
  color: var(--color-white);
}

/*
============================================================
---- 第四階層 ----
============================================================
*/
.fourthLevel {
  padding-top: var(--header-height);
  background-color: var(--color-base);
  color: var(--color-text);
}

/*
============================================================
---- 第五階層 ----
============================================================
*/
.fifthLevel {
  padding-top: var(--header-height);
  background-color: var(--color-base);
  color: var(--color-text);
}

/*
============================================================
---- 【Layout】コンテナ ----
============================================================
*/
.l-container {
  padding-inline: var(--layout-margin-outside-pc);
}

.l-container--navyLight {
  background-color: var(--color-navy-light);
}

.l-container > :where(*) {
  max-width: calc(
    var(--size-frame-width) -
      ((var(--layout-margin-outside-pc) + var(--layout-margin-inside-pc)) * 2)
  );
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .l-container {
    padding-inline: var(--layout-margin-outside-sp);
  }
}