/*
 * ブログスタイル
*/

/* 一覧 */
.ly_blog_archive {
  padding-inline: 20px;
  max-width: 1160px;
  margin-block: clamp(64px, 12.5vw, 120px);
  margin-inline: auto;
}

.ly_blog_archive_list {
  --blog-list-layout: repeat(1, 1fr);
  display: grid;
  grid-template-columns: var(--blog-list-layout);
  gap: clamp(1rem, 0.167rem + 2.083vw, 1.5rem);
}

.bl_blog_card {
  display: block;
  margin: 0;
  padding: 0;
}

.bl_blog_card__thumb {
  display: flex;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.bl_blog_card__thumb img {
  display: block;
  margin: 0;
  padding: 0;
  object-fit: cover;
  transform-origin: center;
  transition: transform 0.25s ease-in-out;
}

.bl_blog_card__thumb:hover {
  img {
    transform: scale(1.05);
  }
}

.bl_blog_card__body {
  display: flex;
  padding: 8px 0 0;
  flex-direction: column;
  gap: 0;
}
.bl_blog_card__title {
  color: #42602d;
  font-family: "ShipporiMinchoB1", sans-serif;
  font-weight: 700;
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 1.25;
}

.bl_blog_card__date {
  color: #333;
  font-size: var(--font-xs);
  line-height: 1.5;
}
.bl_blog_post__cat {
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 0 0.5em;
    color: #42602d;
    font-size: var(--font-xxs);
    line-height: 1.5;
    border: 1px solid #42602d;
    border-radius: 3em;

    &:hover {
      background-color: rgba(66, 96, 45, 0.1);
    }
  }
}

.bl_blog_archive_name {
  text-align: center;
  margin-bottom: 24px;
}
.bl_blog_archive_name_text {
  font-family: "ShipporiMinchoB1", sans-serif;
  font-size: var(--font-lg);
  color: #42602d;
  font-weight: 600;
}

/* 投稿ページ */
.ly_blog_post {
  padding-inline: 20px;
  max-width: 700px;
  margin-block: clamp(64px, 12.5vw, 120px);
  margin-inline: auto;
}
.bl_blog_single {
}

.bl_blog_single__header {
  border-bottom: 1px dashed #42602d;
  padding-bottom: clamp(16px, 3.334vw, 32px);
  margin-block-end: clamp(32px, 6.667vw, 64px);
}

.bl_blog_single__title {
  color: #42602d;
  font-family: "ShipporiMinchoB1", sans-serif;
  font-weight: 700;
  line-height: 1.25;
}

.bl_blog_single__thumb {
  margin-block-end: clamp(32px, 6.667vw, 64px);
  overflow: hidden;
  border-radius: 8px;
}

.bl_blog_single__content {
  font-size: var(--font-sm);
  font-weight: 400;

  h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 1em;
  }
  * + h2 {
    margin-top: 2em;
  }

  h3 {
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  h4 {
    font-size: 1.125em;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 1em;
  }

  img {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  :is(ul,ol) {
    margin-block: 1em;
    padding-left: 1.5em;

    :is(ul,ol) {
       margin-block: 0;
    }
  }
  ul {
    list-style: disc;
    > li {
      list-style: disc;
    }
    ul {
      list-style-type: circle;
      > li {
      list-style: circle;
    }
    }
  }
  ol {
    list-style: decimal;
    > li {
      list-style: decimal;
    }
      ol {
    list-style: lower-alpha;
    > li {
      list-style: lower-alpha;
    }
  }
  }
}

.bl_blog_single__nav {
  margin-block: clamp(32px, 6.667vw, 64px);
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.bl_blog_single__nav-prev {
  grid-column: 1 / 2;
}

.bl_blog_single__nav-next {
  grid-column: 3 / 4;
}

@media screen and (min-width: 640px) {
  .ly_blog_archive_list {
    --blog-list-layout: repeat(2, 1fr);
  }
  .bl_blog_archive_name_text {
    font-size: var(--font-xl);
  }
}

@media screen and (min-width: 960px) {
  .ly_blog_archive_list {
    --blog-list-layout: repeat(3, 1fr);
  }
  .bl_blog_archive_name_text {
    font-size: var(--font-xxl);
  }
}


.bl_archive_pagination {
  margin-block: 1rem;
  display: flex;
  justify-content: center;

  .nav-links {
    font-size: var(--font-xs);

  }
  .page-numbers {
    display: inline-block;
    line-height: 2;
    min-width: 2em;
    text-align: center;
    padding: 0 0.5em;
    border-radius: 4px;

    &.current {
      color: #fff;
      background-color: #42602d;
      font-weight: 600;
    }

    &:not(.current):hover {
      background-color: rgba(219, 211, 188, 0.5);
    }

    &.prev {
        color: #42602d;
        font-weight: 600;
      
    }
    &.next {
          color: #42602d;
          font-weight: 600;
      
    }
  }
}