/*
メディアクエリを使用したレスポンシブデザイン
- PCファーストで設計しているので、部分的に@media (max-width: 500px)などで指定する
*/

.page_body {
  margin-top: 100px;

  @media (min-width: 1000px) {
    margin-top: 0;
    grid-area: content; /* PCではグリッドのcontentエリアに配置 */
  }
}

.page_menu {
  margin-bottom: 2em;

  @media (min-width: 1000px) {
    max-width: none;
    margin-inline: 0;
    grid-area: nav; /* PCではグリッドのnavエリアに配置 */
  }

  h2 {
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 1.5em;
  }

  ul {
    display: flex;
    gap: 1em;
    flex-direction: column;

    li {
      a {
        display: block;
        background-color: #f5f5f5;
        color: #634529;
        border-radius: 10px;
        padding: 1em;
        text-decoration: none;
      }
    }
  }
}

.gray_box {
  padding: 1em;

  @media (min-width: 1000px) {
    max-width: none;
    margin-inline: 0;
  }
}

/*h2*/

.list_box {
  margin-bottom: 4em;
}

.list_box h2 {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 2rem;
  color: #634529;
}

/*ページネーション*/

.wp-pagenavi {
  min-width: 100px;
  margin: 0 auto;
  text-align: center;
  margin-top: 3em;
  background-color: #ffffff;
  border-radius: 50px;
  padding: 5px;
  box-shadow: 0px 0px 15px -5px #777777;

  a {
    border: none;
    color: #634529;
    padding: 10px;
    margin: 10px;
    line-height: 1;
  }

  span {
    border: none;
    color: #634529;
    padding: 10px;
    margin: 10px;
    line-height: 1;

    &.pages {
      display: none;
    }

    &.current {
      font-weight: unset;
      background-color: #ff7f30;
      color: #ffffff;
      border-radius: 50px;
      width: 15px;
      height: 15px;
      display: inline-block;
    }
  }
}