@charset "UTF-8";

/* ===== ブログ一覧（黒地・カード3列） ===== */

.blogList {
  padding-top: 80rem;
  padding-bottom: var(--section-py);
  color: var(--color-white);
  background-color: var(--color-black);
  border-top: 1px solid var(--color-line-dark);
}

.blogListInner {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--inner-w);
  margin-right: auto;
  margin-left: auto;
}

/* カテゴリ切替（テキストタブ。選択中は下線） */
.blogTabsList {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem 40rem;
  margin-bottom: 64rem;
}

.blogTabsLink {
  display: inline-block;
  padding: 8rem 0;
  font-size: 15rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--color-btn-text-dark);
  border-bottom: 1px solid transparent;
}

.blogTabsLink.is-current {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

.blogTabsLink.is-disabled {
  opacity: .4;
  cursor: default;
}

.blogGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80rem 40rem;
}

.blogCardLink {
  display: block;
}

.blogCardThumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gradient-metal);
  border-radius: 16rem;
}

.blogCardThumb::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1px solid rgba(246, 246, 246, .08);
  border-radius: inherit;
  pointer-events: none;
}

.blogCardImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease-out;
}

@media (hover: hover) {
  .blogCardLink:hover .blogCardImg {
    transform: scale(1.05);
  }
}

.blogCardMeta {
  display: flex;
  align-items: center;
  gap: 12rem;
  margin-top: 20rem;
}

.blogCardDate {
  font-family: var(--font-num);
  font-size: 14rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-btn-text-dark);
}

.blogCardTitle {
  display: -webkit-box;
  margin-top: 12rem;
  overflow: hidden;
  font-size: 20rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-white);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 767px) {
  .blogList {
    padding-top: 48rem;
  }

  .blogTabsList {
    gap: 4rem 24rem;
    margin-bottom: 40rem;
  }

  .blogTabsLink {
    font-size: 14rem;
  }

  .blogGrid {
    grid-template-columns: 1fr;
    gap: 56rem;
  }

  .blogCardTitle {
    font-size: 18rem;
  }
}

/* ===== ページ送り（数字＋前後矢印） ===== */

.pagination {
  margin-top: 96rem;
}

.paginationList {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
}

.paginationItem .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44rem;
  height: 44rem;
  padding: 0 8rem;
  font-family: var(--font-num);
  font-size: 15rem;
  font-weight: 700;
  color: var(--color-btn-text-dark);
}

.paginationItem .page-numbers.current {
  color: var(--color-white);
  border-bottom: 1px solid var(--color-white);
}

.paginationItem .prev,
.paginationItem .next {
  border: 1px solid var(--color-line-dark);
  border-radius: 50%;
}

.paginationArrow {
  font-family: var(--font-en);
}

/* ===== 記事詳細（黒地・本文幅 800rem） ===== */

.post {
  border-top: 1px solid var(--color-line-dark);
}

.postInner {
  width: calc(100% - var(--gutter) * 2);
  max-width: 800rem;
  margin-right: auto;
  margin-left: auto;
}

.postMeta {
  display: flex;
  align-items: center;
  gap: 16rem;
}

.postDate {
  font-family: var(--font-num);
  font-size: 15rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-btn-text-dark);
}

.postTitle {
  margin-top: 20rem;
  padding-bottom: 40rem;
  font-size: 32rem;
  font-weight: 400;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-line-dark);
}

.postBody {
  margin-top: 48rem;
}

.postNav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rem;
  margin-top: 80rem;
  padding-top: 40rem;
  border-top: 1px solid var(--color-line-dark);
}

.postNavItem--next {
  text-align: right;
}

.postNavLink {
  display: inline-flex;
  flex-direction: column;
  gap: 8rem;
}

.postNavLabel {
  font-family: var(--font-en);
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--color-accent-light);
}

.postNavTitle {
  font-size: 14rem;
  line-height: 1.7;
  color: var(--color-text-sub-dark);
}

.postBack {
  display: flex;
  justify-content: center;
  margin-top: 64rem;
}

@media (max-width: 767px) {
  .postTitle {
    font-size: 24rem;
    padding-bottom: 28rem;
  }

  .postBody {
    margin-top: 32rem;
  }

  .postNav {
    grid-template-columns: 1fr;
    margin-top: 56rem;
  }

  .postBack .btnOutline {
    width: 100%;
  }
}