/* =========================================================
 * blog.css : 「06 ブログ一覧」ページ固有スタイル
 * デザイン基準: design-reference/06-blog-pc.png (1440x3307) / 06-blog-sp.png
 * 中央コンテンツ幅 1024 / PC左右余白 208px
 * base -> header -> footer -> cta -> blog -> spcv の順で読み込む
 * ※ blog/ 配下ページから読み込むが、CSS内の画像パスは
 *   このファイル(assets/css/)基準の相対（../images/...）
 * ========================================================= */

/* ----- ヒーローサブ（company.css の .company-hero を自己完結で再現）----- */
.blog-hero {
  position: relative;
  width: 100%;
  height: 120px; /* Figma SP: par/ヘッダーサブ 375x120 */
  overflow: hidden;
}

@media (min-width: 1025px) {
  .blog-hero {
    height: 250px;
  }
}

.blog-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/blog/hero.jpg");
  background-size: cover;
  background-position: center;
}

.blog-hero__content {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1025px) {
  .blog-hero__content {
    padding-inline: 0;
  }
}

.blog-hero__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 24px; /* Figma SP: blog-hero__title 24px */
  line-height: 1.3;
  letter-spacing: 1.4px;
  color: var(--color-text-sub); /* #3F3B3A */
}

@media (min-width: 1025px) {
  .blog-hero__title {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

/* ----- 共通サブタイトル（company.css の .par-subtitle を自己完結で再現）----- */
.par-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.par-subtitle__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px; /* Figma blog: Blog サブタイトル SP/PC 共に 16px/lh28 */
  line-height: 28px;
  letter-spacing: 0;
  color: var(--color-accent); /* #C0AF72 */
}

@media (min-width: 1025px) {
  .par-subtitle__en {
    font-size: 16px;
    line-height: 28px;
  }
}

.par-subtitle__jp {
  color: var(--color-navy);
}

/* ----- ブログ一覧 セクション ----- */
.blog-list {
  background: var(--color-bg-white);
  padding-top: 40px;
  padding-bottom: 24px;
}

@media (min-width: 1025px) {
  .blog-list {
    padding-top: 40px;
    padding-bottom: 24px;
  }
}

.blog-list__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  padding-top: 40px;
  padding-bottom: 80px;
}

@media (min-width: 1025px) {
  .blog-list__inner {
    padding-inline: 0;
    padding-top: 96px;
    padding-bottom: 80px;
  }
}

/* ----- 記事カード（横型）----- */
.blog-cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1025px) {
  .blog-card {
    flex-direction: row;
    align-items: stretch;
    gap: 40px;
  }
}

.blog-card__thumb {
  display: block;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 451 / 259;
  overflow: hidden;
  border-radius: 0; /* Figma: サムネイル角丸0（実装4pxは丸め） */
}

@media (min-width: 1025px) {
  .blog-card__thumb {
    width: 451px;
    height: 259px;
    aspect-ratio: auto;
  }
}

.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.blog-card__title {
  color: var(--color-text-black);
}

/* Figma: カード記事タイトル PC 22px（t-h5 の PC 24px を上書き。特異度を1つ上げる） */
@media (min-width: 1025px) {
  .blog-card__title.t-h5 {
    font-size: 22px;
  }
}

.blog-card__title a {
  color: inherit;
  transition: color var(--transition-base);
}

.blog-card__title a:hover {
  color: var(--color-accent);
}

.blog-card__excerpt {
  margin-top: 16px;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .blog-card__excerpt {
    margin-top: 20px;
  }
}

.blog-card__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

@media (min-width: 1025px) {
  .blog-card__meta {
    gap: 16px;
    margin-top: auto;
  }
}

.blog-card__meta-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}

@media (min-width: 1025px) {
  .blog-card__meta-left {
    gap: 16px;
  }
}

.blog-card__tag {
  display: inline-block;
  background: var(--color-bg-blue-gray); /* #F0F2F5 */
  border: 1px solid var(--color-text-sub); /* #3F3B3A */
  border-radius: 4px;
  padding: 4px 16px;
  color: var(--color-text-black);
}

.blog-card__date {
  color: var(--color-text-black);
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-text-sub); /* #3F3B3A */
  border-radius: 4px;
  padding: 8px 24px;
  white-space: nowrap;
  color: var(--color-text-black);
  transition: background var(--transition-base), color var(--transition-base);
}

@media (min-width: 1025px) {
  .blog-card__more {
    padding: 8px 40px;
  }
}

.blog-card__more:hover {
  background: var(--color-text-sub);
  color: var(--color-bg-white);
}

.blog-card__more-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  /* icon-chevron-right.svg は素材内で rotate(90) 済み＝既に右向き。CSSで再回転しない（Figmaは右向き＞） */
  filter: brightness(0) invert(0.3); /* 濃グレーの矢印 */
}

.blog-card__more:hover .blog-card__more-arrow {
  filter: brightness(0) invert(1);
}

/* ----- ページネーション ----- */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 60px;
}

@media (min-width: 1025px) {
  .blog-pagination {
    margin-top: 105px;
  }
}

.blog-pagination__item,
.blog-pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--color-bg-white);
  background: var(--color-navy); /* #00103E 塗り */
  transition: opacity var(--transition-base);
}

.blog-pagination__item:hover,
.blog-pagination__arrow:hover {
  opacity: 0.85;
}

/* 現在ページ（1）: 箱なし・紺文字 */
.blog-pagination__item--current {
  background: transparent;
  color: var(--color-navy);
  cursor: default;
}

.blog-pagination__item--current:hover {
  opacity: 1;
}

.blog-pagination__arrow img {
  width: 16px;
  height: 16px;
}

/* 次ページ矢印: 紺bg + 白シェブロン（右向き）。素材は既定で白 */
.blog-pagination__arrow--next img {
  transform: rotate(90deg);
}

/* 前ページ矢印: 白bg + 紺border + 紺シェブロン（左向き） */
.blog-pagination__arrow--prev {
  background: var(--color-bg-white);
  border: 1px solid var(--color-navy);
}

.blog-pagination__arrow--prev img {
  transform: rotate(-90deg);
  /* 白素材を紺に近い濃色へ */
  filter: brightness(0) invert(0.06);
}