/* ==========================================================================
   blog.css — お役立ち情報（/blog/）
   正本: Yamato Works お役立ち情報 - 構造案.dc.html (2026-08-05)
   依存: sub-page.css（先に読み込み済みであること）
   ========================================================================== */

/* ==========================================================================
   ■ Hero
   ========================================================================== */
.sub-blog-hero {
  position: relative;
  background-color: var(--c3-bg);
  z-index: 1;
  padding-top: var(--c3-header-h);
  display: grid;
  grid-template-columns: 5fr 3fr;
  align-items: stretch;
}

.sub-blog-hero__main {
  padding: 96px 48px 80px;
  display: flex;
  flex-direction: column;
}

.sub-blog-hero__eyebrow {
  margin: 0 0 30px;
  font-family: var(--c3-font-en), sans-serif;
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--c3-text-muted);
  word-break: keep-all;
}

.sub-blog-hero__h1 {
  margin: 0;
  font-family: var(--c3-font-serif);
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.5;
  letter-spacing: .04em;
  word-break: keep-all;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
}

.sub-blog-hero__accent {
  width: 32px;
  height: 2px;
  background: var(--c3-vermilion);
  margin: 30px 0 0;
}

.sub-blog-hero__lead {
  margin: 30px 0 0;
  max-width: 620px;
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .04em;
  color: var(--c3-text-body);
  text-wrap: pretty;
}

/* PC 動画列 */
.sub-blog-hero__side {
  border-left: 1px solid var(--c3-rule);
  position: relative;
  min-height: 555px; /* 焼き込み寸法(449:555)を床として保証 */
}

/* 列いっぱいに cover 充填 / overflow: visible でスタンプのはみ出しを許容 */
.sub-blog-hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.sub-blog-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 鉤括弧: 墨（ポスター左上がベージュ基調・明るめ → 明=墨ルール） */
/* sub-page.css の .sub-fv-tl-corner デフォルトが既に墨 → オーバーライド不要 */

.sub-blog-hero__stamp-wrap {
  position: absolute;
  bottom: -20px;
  right: -20px;
  z-index: 2;
}

.sub-blog-hero__stamp-wrap .sub-stamp {
  background-color: var(--c3-bg);
}

/* SP FV */
.sub-blog-hero__sp-unit { display: none; }
.sub-blog-hero__sp-lead  { display: none; }

/* ==========================================================================
   ■ カテゴリ
   ========================================================================== */
.sub-blog-cats {
  position: relative;
}

.sub-blog-cats__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 34px 48px;
}

.sub-blog-cats__label {
  margin-right: 16px;
  font-family: var(--c3-font-en), sans-serif;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c3-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.sub-blog-cats__chip {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .08em;
  border: 1px solid rgba(26,26,26,.28);
  padding: 11px 22px;
  white-space: nowrap;
  word-break: keep-all;
  color: var(--c3-ink);
  text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}

.sub-blog-cats__chip:hover {
  background: var(--c3-ink);
  color: var(--c3-bg);
  border-color: var(--c3-ink);
}

/* ==========================================================================
   ■ 記事一覧
   ========================================================================== */
.sub-blog-posts {
  position: relative;
}

/* 投稿あり: 3列グリッド */
.sub-blog-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.sub-blog-posts__item {
  border-right: 1px solid var(--c3-rule-light);
}

.sub-blog-posts__item:nth-child(3n) {
  border-right: none;
}

.sub-blog-card {
  display: block;
  padding: 36px 32px 40px;
  text-decoration: none;
  color: var(--c3-ink);
  border: 1px solid transparent;
  transition: border-color .25s;
  height: 100%;
  box-sizing: border-box;
}

.sub-blog-card:hover {
  border-color: var(--c3-vermilion);
}

.sub-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sub-blog-card__cat {
  font-family: var(--c3-font-en), var(--c3-font-ja), sans-serif;
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--c3-bg);
  background: var(--c3-ink);
  padding: 3px 8px;
  white-space: nowrap;
}

.sub-blog-card__date {
  font-family: var(--c3-font-en), sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c3-text-muted);
}

.sub-blog-card__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .04em;
  word-break: keep-all;
  text-wrap: pretty;
}

/* ページネーション */
.sub-blog-posts .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 48px 48px;
}

.sub-blog-posts .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--c3-font-en), sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--c3-ink);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color .2s, background .2s;
}

.sub-blog-posts .page-numbers:hover,
.sub-blog-posts .page-numbers.current {
  border-color: var(--c3-ink);
}

.sub-blog-posts .page-numbers.current {
  background: var(--c3-ink);
  color: var(--c3-bg);
}

.sub-blog-posts .page-numbers.prev,
.sub-blog-posts .page-numbers.next {
  width: auto;
  padding: 0 16px;
  font-size: 12px;
}

/* 投稿ゼロ時: 3列 */
.sub-blog-posts__empty {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 300px;
}

.sub-blog-posts__empty-main {
  display: flex;
  align-items: center;
  padding: 88px 40px 88px 48px;
}

.sub-blog-posts__empty-text {
  margin: 0;
  font-family: var(--c3-font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .08em;
  word-break: keep-all;
  text-wrap: pretty;
}

.sub-blog-posts__empty-cell {
  border-left: 1px solid var(--c3-rule-light);
}

/* ==========================================================================
   ■ SP（〜767px）
   ========================================================================== */
@media (max-width: 767px) {

  /* Hero: SP縦積み */
  .sub-blog-hero {
    display: block;
    padding-top: var(--c3-header-h);
  }

  .sub-blog-hero__main {
    padding: 56px 24px 12px;
    position: relative;
    z-index: 1;
  }

  .sub-blog-hero__h1 {
    font-size: 30px;
    word-break: auto-phrase;
  }

  .sub-blog-hero__eyebrow {
    font-size: 10px;
    letter-spacing: .2em;
    margin-bottom: 20px;
  }

  .sub-blog-hero__lead { display: none; }

  /* PC動画列を非表示 */
  .sub-blog-hero__side { display: none; }

  /* SP FV */
  .sub-blog-hero__sp-unit {
    display: block;
    position: relative;
    z-index: 0;
    margin-top: -68px; /* H1右脇への食い込み（/contact/ SP準拠） */
  }

  .sub-blog-hero__sp-videobox {
    position: relative;
    margin: 0 16px 56px;
  }

  .sub-blog-hero__sp-video-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  }

  .sub-blog-hero__sp-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .sub-blog-hero__sp-stamp-wrap {
    position: absolute;
    bottom: -20px;
    right: 0;
    z-index: 2;
  }

  .sub-blog-hero__sp-stamp-wrap .sub-stamp {
    background-color: var(--c3-bg);
  }

  /* SP専用リード */
  .sub-blog-hero__sp-lead {
    display: block;
    padding: 40px 24px 56px;
    font-size: 14px;
    line-height: 2.2;
    letter-spacing: .04em;
    color: var(--c3-text-body);
  }

  /* カテゴリ */
  .sub-blog-cats__bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 28px 24px 32px;
  }

  .sub-blog-cats__label {
    grid-column: 1 / -1;
    margin-right: 0;
    margin-bottom: 4px;
  }

  .sub-blog-cats__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 10px;
    font-size: 12px;
    letter-spacing: .04em;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.5;
  }

  /* 記事一覧: 1列 */
  .sub-blog-posts__grid {
    grid-template-columns: 1fr;
  }

  /* SP では posts セクションが below-the-fold のため IntersectionObserver が発火しない。
     data-reveal の opacity:0 を即時解除して常時表示にする。 */
  .sub-blog-posts__item[data-reveal],
  .sub-blog-posts__empty-text[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sub-blog-posts__item {
    border-right: none;
    border-bottom: 1px solid var(--c3-rule-light);
  }

  .sub-blog-card {
    padding: 28px 24px 32px;
  }

  /* 投稿ゼロ時: 縦積み */
  .sub-blog-posts__empty {
    display: block;
    min-height: 0;
  }

  .sub-blog-posts__empty-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    min-height: 120px;
  }

  .sub-blog-posts__empty-text {
    font-size: 18px;
    line-height: 2;
    text-align: center;
  }

  .sub-blog-posts__empty-cell {
    border-left: none;
    border-top: 1px solid var(--c3-rule-light);
    min-height: 120px;
  }

  /* ページネーション */
  .sub-blog-posts .nav-links {
    padding: 40px 24px;
    flex-wrap: wrap;
  }
}