@charset "UTF-8";
.p-blog-list {
  --border-width: 6px;
  --border-color: #7edbe5;
}
:where([data-theme-color=forest]) .p-blog-list {
  --border-color: #a7d676;
}

.p-blog-list__item {
  container-type: inline-size;
  position: relative;
  padding-bottom: calc(var(--border-width) * 2);
}
.p-blog-list__item::after {
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 100%;
  height: var(--border-width);
  content: "";
  background: repeating-linear-gradient(-45deg, var(--border-color), var(--border-color) 2px, transparent 0, transparent 8px);
}
.p-blog-list__item + .p-blog-list__item {
  margin-top: var(--border-width);
}
.p-blog-list__link {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 24px 0;
  transition: opacity 0.1s;
}
@container (width <= 520px) {
  .p-blog-list__link {
    flex-direction: column;
    align-items: center;
  }
}
.p-blog-list__link:hover {
  opacity: 0.85;
}
.p-blog-list__thumb {
  width: 35%;
  max-width: 240px;
}
@container (width <= 520px) {
  .p-blog-list__thumb {
    width: 100%;
    max-width: 260px;
  }
}
.p-blog-list__image {
  width: 100%;
  aspect-ratio: 1.5/1;
  object-fit: cover;
}
.p-blog-list__body {
  flex: 1;
}
.p-blog-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  align-items: center;
  margin-bottom: 0.5em;
}
.p-blog-list__date {
  font-family: var(--font-family-kiwi);
  line-height: 1;
}
.p-blog-list__category {
  padding: 0.5em 1em;
  font-size: 0.9em;
  line-height: 1;
  border-radius: 10em;
}
.p-blog-list__title {
  font-size: 24px;
  line-height: 1.35;
}
.p-blog-list__link:hover .p-blog-list__title {
  text-decoration: underline;
}

@container (width <= 450px) {
  .p-blog-list__title {
    font-size: 21px;
  }
}
.p-blog-list__excerpt {
  margin-top: 0.5em;
}

.p-blog-pagination {
  --button-size: 3.1em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  align-items: center;
  justify-content: center;
  margin-top: 3em;
}
:where([data-theme-color=sky]) .p-blog-pagination {
  --button-color: #67b6db;
}

:where([data-theme-color=forest]) .p-blog-pagination {
  --button-color: #6ca223;
}

.p-blog-pagination > .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--button-size);
  height: var(--button-size);
  padding-left: 0.15em;
  font-family: var(--font-family-kiwi);
  line-height: 1;
  text-align: center;
  border-radius: 10em;
}
.p-blog-pagination > .page-numbers[href] {
  background-color: #fff;
  border: 1.5px solid var(--button-color);
  transition: all 0.15s;
}
.p-blog-pagination > .page-numbers[href]:hover {
  color: #fff;
  background-color: var(--button-color);
}
.p-blog-pagination > .page-numbers.current {
  color: #fff;
  pointer-events: none;
  background-color: var(--button-color);
  border: none;
}
.p-blog-pagination > .page-numbers.dots {
  width: auto;
}

.p-blog-post__eyecatch {
  display: block;
  width: 100%;
  margin-bottom: 2em;
}
.p-blog-post__eyecatch > img {
  display: block;
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
}
.p-blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  align-items: center;
  margin-bottom: 1em;
}
.p-blog-post__date {
  font-family: var(--font-family-kiwi);
  line-height: 1;
}
.p-blog-post__category {
  padding: 0.5em 1em;
  font-size: 0.9em;
  line-height: 1;
  border-radius: 10em;
}
.p-blog-post__body h1,
.p-blog-post__body h2,
.p-blog-post__body h3,
.p-blog-post__body h4,
.p-blog-post__body h5,
.p-blog-post__body h6 {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  font-family: var(--font-family-kiwi);
  line-height: 1.5;
  letter-spacing: 0.3em;
}
:where([data-theme-color=sky]) .p-blog-post__body h1,
:where([data-theme-color=sky]) .p-blog-post__body h2,
:where([data-theme-color=sky]) .p-blog-post__body h3,
:where([data-theme-color=sky]) .p-blog-post__body h4,
:where([data-theme-color=sky]) .p-blog-post__body h5,
:where([data-theme-color=sky]) .p-blog-post__body h6 {
  --dot-color: #7edbe5;
}

:where([data-theme-color=forest]) .p-blog-post__body h1,
:where([data-theme-color=forest]) .p-blog-post__body h2,
:where([data-theme-color=forest]) .p-blog-post__body h3,
:where([data-theme-color=forest]) .p-blog-post__body h4,
:where([data-theme-color=forest]) .p-blog-post__body h5,
:where([data-theme-color=forest]) .p-blog-post__body h6 {
  --dot-color: #bae57e;
}

.p-blog-post__body h1::before,
.p-blog-post__body h2::before,
.p-blog-post__body h3::before,
.p-blog-post__body h4::before,
.p-blog-post__body h5::before,
.p-blog-post__body h6::before {
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 1em;
  height: 1em;
  content: "";
  background: var(--dot-color);
  border-radius: 50%;
}
.p-blog-post__body h1 {
  font-size: 1.6em;
}
.p-blog-post__body h2 {
  font-size: 1.45em;
}
.p-blog-post__body h3 {
  font-size: 1.3em;
}
.p-blog-post__body h4 {
  font-size: 1.2em;
}
.p-blog-post__body h5 {
  font-size: 1.12em;
}
.p-blog-post__body h6 {
  font-size: 1em;
}
.p-blog-post__body img {
  max-width: 100%;
}
.p-blog-post__body iframe {
  max-width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
}
.p-blog-post__body iframe[src^="https://www.youtube.com/"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.p-blog-post__body iframe[src^="https://www.google.com/maps/"] {
  width: 100%;
  height: auto;
  max-height: 500px;
  aspect-ratio: 1.35/1;
}
.p-blog-post__body ul,
.p-blog-post__body ol {
  list-style: none;
}
.p-blog-post__body ul {
  --prefix: "・";
}
.p-blog-post__body ol {
  --prefix: counter(list) ".";
  counter-reset: list;
}
.p-blog-post__body ol > li {
  counter-increment: list;
}
.p-blog-post__body li {
  position: relative;
  padding-left: 1.3em;
}
.p-blog-post__body li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: var(--prefix);
}
.p-blog-post__body p + p {
  margin-top: 1em;
}
.p-blog-post__body a {
  color: var(--color);
  text-decoration: underline;
  transition: color 0.15s;
}
:where([data-theme-color=sky]) .p-blog-post__body a {
  --color: #52bbf7;
  --hover-color: #47a3d7;
}

:where([data-theme-color=forest]) .p-blog-post__body a {
  --color: #92cc40;
  --hover-color: #7fb138;
}

.p-blog-post__body a:hover {
  color: var(--hover-color);
}
.p-blog-post__body hr {
  --border-width: 5px;
  --dot-space: 1.5;
  position: relative;
  padding-top: var(--border-width);
  margin: 1em 0;
  border: none;
}
:where([data-theme-color=sky]) .p-blog-post__body hr {
  --border-color: #b3e1eb;
}

:where([data-theme-color=forest]) .p-blog-post__body hr {
  --border-color: #cfe8b4;
}

.p-blog-post__body hr::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--border-width);
  content: "";
  background: radial-gradient(circle farthest-side, var(--border-color), var(--border-color) calc(100% / (var(--dot-space) + 1)), transparent calc(100% / (var(--dot-space) + 1)));
  background-size: calc(var(--border-width) * (var(--dot-space) + 1));
}

.p-blog-nav {
  margin-top: 3em;
}
.p-blog-nav__list {
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
}
.p-blog-nav__item {
  flex: 1;
  max-width: 220px;
}
.p-blog-nav__link {
  position: relative;
  display: flex;
  gap: 0.2em;
  align-items: center;
  justify-content: center;
  height: 3.75em;
  min-height: 50px;
  line-height: 1;
  text-align: center;
  background-color: #fff;
  border: 1.5px solid var(--button-color);
  border-radius: 10em;
  transition: all 0.15s;
}
.p-blog-nav__link:hover {
  color: #fff;
  background-color: var(--button-color);
}
:where([data-theme-color=sky]) .p-blog-nav__link.is-prev, :where([data-theme-color=sky]) .p-blog-nav__link.is-next {
  --button-color: #67b6db;
}

:where([data-theme-color=forest]) .p-blog-nav__link.is-prev, :where([data-theme-color=forest]) .p-blog-nav__link.is-next {
  --button-color: #6ca223;
}

.p-blog-nav__link.is-index {
  --button-color: #e58e50;
}