/* =========================================
   POST HERO
   ========================================= */
.post-hero { width: 100%; }

.post-hero__inner { margin: 0 auto; padding: 0; width: 100%; }

.post-hero__img { height: auto; max-width: 100%; width: 421px; margin: 0 auto; }

/* =========================================
   POST MAIN
   ========================================= */
.post-main { flex: 1; padding: 26px 0; width: 100%; }

.post-list-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1047px;
  padding: 26px 0;
  width: 100%;
}

/* =========================================
   POST LIST
   ========================================= */
.post-list {
  align-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  justify-content: flex-start;
  margin-top: -25px;
  padding: 30px;
  width: 100%;
}

/* =========================================
   POST ITEM
   ========================================= */
.post-item {
  align-items: center;
  background: transparent;
  display: flex;
  flex-direction: row;
  height: 294px;
  justify-content: center;
  margin: 0 25px 34px 0;
  padding: 10px 30px;
  width: calc(50% - 25px);
}

.post-item:hover { opacity: 0.5; }

.post-item__img {
  border-radius: 4px;
  flex-shrink: 0;
  height: auto;
  width: 40%;
  max-width: 40%;
  object-fit: cover;
}

.post-item__body {
  align-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: 33px;
  max-width: calc(100% - 33px);
}

.post-item__tag-wrap { margin-bottom: 9px; }

.post-item__tag-badge {
  align-items: center;
  background: var(--color-accent);
  border-radius: 2px;
  display: flex;
  justify-content: center;
}

.post-item__tag {
  color: #fff;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 3px 8px 2px;
}

.post-item__date {
  color: #686868;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.post-item__title {
  color: #000;
  font-family: var(--font-heading);
  font-feature-settings: 'palt' 1;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-bottom: 10px;
}

.post-item__excerpt {
  color: #666;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.62;
  text-align: justify;
}

/* =========================================
   PAGINATION (more ボタン代替)
   ========================================= */
.post-more {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 22px;
  width: 100%;
}

.post-more .nav-links { flex-direction: row; gap: 8px; justify-content: center; }

.post-more .page-numbers {
  align-items: center;
  border: 1px solid #000;
  border-radius: 16px;
  color: #000;
  display: inline-flex;
  font-family: var(--font-en);
  font-size: 14px;
  font-style: italic;
  height: 30px;
  justify-content: center;
  letter-spacing: 0.05em;
  padding: 0 16px;
}

.post-more .page-numbers:hover,
.post-more .page-numbers.current { border-color: var(--color-accent); color: var(--color-accent); }

/* =========================================
   RESPONSIVE - TABLET
   ========================================= */
@media screen and (max-width: 840px) {
  .post-item {
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    margin: 0 0 38px 0;
    width: auto;
    max-width: 100%;
  }
  .post-item__body { margin-left: 18px; max-width: calc(100% - 18px); }
  .post-list { width: 739px; max-width: 100%; }
  .post-more { margin-top: 16px; }
}

/* =========================================
   RESPONSIVE - MOBILE
   ========================================= */
@media screen and (max-width: 540px) {
  .post-item {
    flex-direction: column;
    height: auto;
    margin: 0 0 36px;
    padding: 10px 0;
    width: 100%;
    max-width: 100%;
  }
  .post-item__img { margin-bottom: 12px; width: 100%; max-width: 100%; }
  .post-item__body { margin: 0; max-width: 100%; }
  .post-list { margin: 0 30px 0 0; width: 478px; max-width: calc(100% - 30px); }
}