/**
 * Layout
 */
.l-outer {
  min-block-size: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.l-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}

.l-container {
  position: relative;
  display: grid;
  padding-block: var(--layout-container-padding-pc, 80px 150px);
}

.l-footer {
  color: #ffffff;
  background: var(--main-color);
  padding-block: 80px;
}

.l-contents {
  display: flex;
  justify-content: center;
  gap: 50px 20px;
  inline-size: min(calc(100% - 60px), var(--base-container-size));
  margin-inline: auto;
}

.l-inner {
  inline-size: var(--layout-inner-size, min(calc(100% - 60px), var(--base-container-size)));
  margin-inline: auto;
}

.l-main {
  container: main / inline-size;
  flex: 1;
  display: grid;
  align-content: start;
  row-gap: 100px;
}

.l-sidebar {
  container: sidebar / inline-size;
  flex: 0 0 300px;
  display: grid;
  align-content: start;
  row-gap: 20px;
}

.l-sidebar-sticky {
  position: sticky;
  top: calc(30px + var(--cw-header-bar-height, 0px));
  display: grid;
  align-content: start;
  row-gap: 20px;
}

@media (max-width: 991px) {

  .l-container {
    padding-block: var(--layout-container-padding-sp, 40px)
  }

  .l-header {}

  .l-contents {
    flex-direction: column;
  }

  .l-main {
    row-gap: 40px;
  }

  .l-sidebar {
    flex: 1;
    order: 2;
  }
}

@media (max-width: 767px) {
  .l-footer {
    padding-block: 50px;
  }
}

/* WPアドミンバーの高さ対応 */
/* TODO: マスター */
@media screen and (max-width: 782px) {
  .l-header {
    --wp-admin--admin-bar--height: 0px;
  }
}