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

.l-symbol {
  position: absolute;
  width: min(100%, var(--base-container-size));
  inset: 70px 0px auto;
  margin-inline: auto;
}

.l-symbol svg {
  display: block;
  width: 509px;
  color: #BBBDBF;
  margin-left: auto;
  margin-right: -89px;
  animation: spinSymbol 10s linear infinite;
  transform-origin: center;
}

@keyframes spinSymbol {
  to {
    transform: rotate(360deg);
  }
}


.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: #333333;
  padding-block: 70px;
}

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

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

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

.l-sidebar {
  container: sidebar / inline-size;
  order: -1;
  flex: 0 0 270px;
  display: grid;
  align-content: start;
  row-gap: 50px;
}

@media (max-width: 991px) {

  .l-symbol {
    overflow: hidden;
    top: -63px;
  }

  .l-symbol svg {
    width: 438px;
    margin-right: -147px;
  }

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

  .l-header {}

  .l-contents {
    flex-direction: column;
    row-gap: 40px;
  }

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

  .l-sidebar {
    flex: 1;
    row-gap: 0px;
  }
}

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


/* 投稿個別ページ */
body.single-post .l-container {
  padding-top: 120px;
}

@media (max-width: 991px) {

  body.single-post .l-container {
    padding-top: 0px;
  }

  body.single-post .l-contents {
    row-gap: 0px;
  }

  body.single-post .l-sidebar {
    position: sticky;
    top: 60px;
    margin-top: -1px;
  }
}