/* =========================================================
   HQ Background: Layout
   key: navigation-basic-01
   name: ナビゲーション｜基本
   group: partial
   type: layout
   layer: navigation
   value:
   selector:
   ========================================================= */

/* =========================================================
   Post Navigation
   ========================================================= */

.p-post-nav {
  margin-top: 64px;
}

.p-post-nav__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.p-post-nav__item {
  min-width: 0;
}

.p-post-nav__link {
  display: flex;
  flex-direction: column;
  position: relative;
  width: auto;
  max-width: 100%;
}

/* Prev */
.p-post-nav__item--prev {
  display: flex;
  justify-content: flex-start;
}

.p-post-nav__item--prev .p-post-nav__link {
  margin-right: auto;
  text-align: left;
  align-items: flex-start;
}

/* Next */
.p-post-nav__item--next {
  display: flex;
  justify-content: flex-end;
}

.p-post-nav__item--next .p-post-nav__link {
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
}

.p-post-nav__label {
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
}

.p-post-nav__thumb {
  margin-bottom: 12px;
  max-width: 240px;
  aspect-ratio: 1 / 1;
}

.p-post-nav__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像なし時のプレースホルダー */
.p-post-nav__thumb.is-placeholder {
  background: rgba(61, 73, 121, 0.08);
}

.p-post-nav__item--next .p-post-nav__thumb {
  margin-left: auto;
}

.p-post-nav__item--next .p-post-nav__thumb img {
  margin-left: auto;
}

.p-post-nav__title {
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* -------------------------
   Alignment（固定）
   ------------------------- */

.p-post-nav__item--prev {
  display: flex;
  justify-content: flex-start;
}

.p-post-nav__item--next {
  display: flex;
  justify-content: flex-end;
}

/* -------------------------
   SP
   ------------------------- */

@media (max-width: 960px) {
  .p-post-nav__grid {
    gap: 16px;
  }
}