/* ============================================================
   ブログ一覧ページ (投稿インデックス) リニューアル
   正本デザイン: Figma 414:2865 / 1440幅 / コンテンツ 1100px
   共通トークン: base.css / ヒーロー・見出し は service-detail.css を流用
   関連ページ/CONTACT は top-11-next.css / top-12-contact.css を流用
   ============================================================ */

.nv-blog{
  --nv-latin:'Montserrat','Inter',var(--nv-font);
  --nv-svc-muted:#5B6B82;
  --nv-svc-line:#D9D9D9;
}

/* ============================================================
   2カラム レイアウト (main + sidebar)
   ============================================================ */
.nv-blog-body{
  background:var(--nv-white);
  padding-block:72px;
}
.nv-blog-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 336px;
  gap:48px;
  align-items:start;
}
.nv-blog-main{min-width:0}

/* カテゴリ紹介 (4枚) セクションは削除 (2026-07-16 / CEO判断)。
   カテゴリはサイドバー CATEGORIES 一覧 (.nv-sbw-cats) に集約。 */

/* ============================================================
   記事一覧 グリッド
   ============================================================ */
.nv-blog-list{margin-top:56px}
.nv-blog-list__head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:24px;
  padding-bottom:14px;
  border-bottom:2px solid var(--nv-text);
}
.nv-blog-list__eyebrow{
  font-family:var(--nv-latin);
  font-size:13px;
  font-weight:600;
  font-style:italic;
  letter-spacing:.12em;
  color:var(--nv-main);
}
.nv-blog-list__title{
  font-size:24px;
  font-weight:700;
  color:var(--nv-text);
}
.nv-blog-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px 24px;
}
.nv-post-card{
  display:flex;
  flex-direction:column;
}
.nv-post-card__thumb{
  display:block;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-radius:8px;
  background:#E9EEF5;
}
.nv-post-card__thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.nv-post-card:hover .nv-post-card__thumb img{transform:scale(1.04)}
.nv-post-card__thumb--ph{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#B7C4D6;
}
.nv-post-card__date{
  margin-top:14px;
  font-family:var(--nv-latin);
  font-size:13px;
  font-weight:600;
  color:var(--nv-svc-muted);
}
.nv-post-card__title{
  margin:8px 0 0;
  font-size:16px;
  line-height:1.6;
  font-weight:700;
  color:var(--nv-text);
}
.nv-post-card__title a{transition:color .2s ease}
.nv-post-card:hover .nv-post-card__title a{color:var(--nv-main)}
.nv-post-card__cat{
  align-self:flex-start;
  margin-top:12px;
  padding:3px 12px;
  border-radius:999px;
  background:var(--nv-base);
  color:var(--nv-main);
  font-size:11px;
  font-weight:700;
}

/* ---- ページネーション (WP the_posts_pagination の .nav-links を整形) ---- */
.nv-blog-pager{margin-top:48px}
.nv-blog-pager .nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.nv-blog-pager .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;height:40px;
  padding:0 10px;
  border:1px solid var(--nv-svc-line);
  border-radius:8px;
  font-family:var(--nv-latin);
  font-size:14px;
  font-weight:700;
  color:var(--nv-text);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.nv-blog-pager a.page-numbers:hover{border-color:var(--nv-main);color:var(--nv-main)}
.nv-blog-pager .page-numbers.current{
  background:var(--nv-main);
  border-color:var(--nv-main);
  color:var(--nv-white);
}
.nv-blog-pager .page-numbers.dots{border:0}

/* ============================================================
   サイドバー ウィジェット
   ============================================================ */
.nv-blog-side{
  display:flex;
  flex-direction:column;
  gap:20px;
  /* 記事一覧(左カラム)をスクロールしてもサイドバーが追従する */
  position:sticky;
  top:100px;         /* sticky ヘッダー76px + 余白24px */
  align-self:start;  /* grid item を上寄せ (stretch だと sticky が効かない) */
}
.nv-sbw{
  border:1px solid var(--nv-svc-line);
  border-radius:10px;
  overflow:hidden;
  background:var(--nv-white);
}
.nv-sbw__h{
  display:block;
  padding:10px 16px;
  background:linear-gradient(90deg,#2A67D4,#4EB1EA);
  color:var(--nv-white);
  font-family:var(--nv-latin);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
}
.nv-sbw__in{padding:18px 16px}

/* 著者 (ABOUT THE AUTHOR) は blog-author.css の共有カードに移行 (一覧・詳細で共通)。 */

/* カテゴリ一覧 */
.nv-sbw-cats{list-style:none;margin:0;padding:0}
.nv-sbw-cats li + li{border-top:1px solid #EEF1F4}
.nv-sbw-cats a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 0;
  font-size:13px;
  font-weight:700;
  color:var(--nv-text);
}
.nv-sbw-cats a:hover{color:var(--nv-main)}
.nv-sbw-cats__ico{color:var(--nv-main);display:inline-flex}
.nv-sbw-cats__label{flex:1 1 auto}
.nv-sbw-cats__cnt{
  font-family:var(--nv-latin);
  font-size:12px;
  color:var(--nv-svc-muted);
}

/* X ライブ (ダークネイビー) */
.nv-sbw-x{
  border:0;
  background:var(--nv-text);
  color:var(--nv-white);
}
.nv-sbw-x .nv-sbw__h{background:rgba(255,255,255,.08)}
.nv-sbw-x__body{padding:18px 16px}
.nv-sbw-x__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
}
.nv-sbw-x__sub{
  margin:10px 0 14px;
  font-size:12px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
}
.nv-sbw-x__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--nv-latin);
  font-size:13px;
  font-weight:700;
  color:#8FC6F5;
}

/* START HERE (薄水色 + 金ボタン) */
.nv-sbw-start{
  border-color:var(--nv-main);
  background:var(--nv-base);
}
.nv-sbw-start .nv-sbw__in{padding:20px 18px}
.nv-sbw-start__tag{
  font-family:var(--nv-latin);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--nv-main);
}
.nv-sbw-start__h{
  margin:8px 0 16px;
  font-size:15px;
  line-height:1.6;
  font-weight:700;
  color:var(--nv-text);
}
.nv-sbw-start__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:52px;
  border-radius:999px;
  background:linear-gradient(90deg,#F5AF04,#FEA21C);
  color:var(--nv-white);
  font-size:14px;
  font-weight:700;
  box-shadow:0 6px 16px rgba(245,175,4,.25);
  transition:transform .2s ease;
}
.nv-sbw-start__btn:hover{transform:translateY(-2px)}

/* ============================================================
   CONTACT の 2ボタン (nv-contact 流用 / blog版)
   ============================================================ */
.nv-contact__btns{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px;margin-top:24px;
}
.nv-contact__btns .nv-contact__btn{margin-top:0;width:300px;height:72px;font-size:17px}
.nv-contact__btn--ghost{
  background:var(--nv-white);border-color:var(--nv-white);color:var(--nv-main);
}
.nv-contact__btn--ghost:hover{color:var(--nv-main)}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1024px){
  .nv-blog-body{padding-block:56px}
  .nv-blog-layout{grid-template-columns:1fr;gap:48px}
  /* 1カラム化したら追従は解除 (本文の下に積むため) */
  .nv-blog-side{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;position:static;top:auto}
}
/* ---- SP (Figma 390 幅 / ブログ一覧 SP版 673:7169 実測) ---- */
@media (max-width:767px){
  /* セクション枠: 上下40 (crumb下端 y29 → cats head y69 / START HERE 下端 y5053 + 40) */
  .nv-blog-body{padding-block:40px}

  /* カテゴリ紹介セクションは削除済 (PC/SP 共通)。 */

  /* --- 記事一覧 見出し: 中央・縦積み・罫線なし (SP 673:10691) --- */
  .nv-blog-list{margin-top:40px}               /* cats群 下端 y1089 → head y1129 */
  .nv-blog-list__head{
    flex-direction:column;
    align-items:center;
    gap:2px;
    margin-bottom:24px;
    padding-bottom:0;
    border-bottom:0;
    text-align:center;
  }
  .nv-blog-list__eyebrow{font-size:15px}       /* BLOG / Montserrat SemiBold lh22 */

  /* 記事カード: 1列 / サムネ 350:160 / gap16 */
  .nv-blog-grid{grid-template-columns:1fr;gap:16px}
  .nv-post-card__thumb{aspect-ratio:35 / 16}   /* Figma 350x160 */
  .nv-post-card__date{margin-top:12px;font-size:14px}                 /* Montserrat / lh21 */
  .nv-post-card__title{margin-top:6px;line-height:1.5}                /* Noto Bold 16px / lh24(1.5) 2行 */
  .nv-post-card__cat{margin-top:8px;font-size:12px;padding:2px 10px}  /* base地/main字 r999 */

  /* ページネーション: 32x32 / r4 / 青ボーダー・青字 (SP 673:10766) */
  .nv-blog-pager{margin-top:24px}
  .nv-blog-pager .nav-links{gap:8px}
  .nv-blog-pager .page-numbers{
    min-width:32px;height:32px;
    padding:0 6px;
    border-radius:4px;
    border-color:var(--nv-main);
    color:var(--nv-main);
    font-size:15px;
  }
  /* .current は上位ルール (bg/border main + 白字) が specificity で維持される */

  /* サイドバー: 記事一覧の下に単列で積む (Figma SP: 著者→カテゴリ→X→START HERE) */
  .nv-blog-side{grid-template-columns:1fr}

  /* CONTACT 2ボタン (blog版) は縦積み・全幅 */
  .nv-contact__btns .nv-contact__btn{width:100%;max-width:320px}
}