/* =========================
  Layout（l-）
========================= */
@layer layout {

  /* Header */
  .l-header {
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--white);
    z-index: var(--z-header);
  }
  .l-header__inner {
    display: flex;
    flex-direction: column;
  }
  .l-header__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding-right: 10px;
  }
  .l-header__brand {
    display: block;
  }
  .l-header__brand a {
    display: inline-block;
    padding: 5px;
  }

  /* Header PC */
  @media (min-width: 768px) {
    .l-header__inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-inline: 20px 30px;
    }
    .l-header__brand {
      flex-shrink: 0;
    }
    #globalNav {
      flex: 1;
      min-width: 0;
    }
  }
  @media (min-width: 768px) and (max-width: 1200px) {
    .l-header__inner {
      padding-inline: 10px 10px;
    }
  }

  /* Main */
  .l-main {
    max-width: 1600px;
    margin-inline: auto;
    margin-top: var(--header-h);
  }
  .is-home .l-main {
    background: none;
  }
  .is-page .l-main {
    padding-bottom: 80px;
    background: url(../img/bg_main_contents.svg) no-repeat center top;
    background-size: 100% auto;
    border: solid var(--g-indigo-200);
    border-width: 0 1px;
  }
  @media (min-width: 768px) {
    .is-home .l-main {
    }
    .is-page .l-main {
      padding-bottom: 120px;
    }
  }
  /* Footer */
  .l-footer {
  }
  @media (min-width: 768px) {
    .l-footer {
    }
  }
  /* Inner */
  .l-inner {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 10px;
  }
  @media (min-width: 768px) {
    .l-inner {
      padding-inline: 20px;
    }
  }
}