/* =========================
prev/nextナビゲーション - 中央表示
========================= */

/* ナビゲーション外側コンテナ */
.np-post-outside {
  width: 100% !important;
  margin: 40px 0 !important;
  display: flex !important;
  justify-content: center !important;
}

/* ナビゲーション本体 */
.np-post-outside .np-post {
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* ナビゲーションの左右レイアウト */
.np-post-outside .navigation {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
}

/* 各ナビゲーション項目 */
.np-post-outside .np-post-list {
  flex: 1 !important;
  max-width: 48% !important;
}

/* 前の記事（左側） */
.np-post-outside .prev {
  text-align: left !important;
}

/* 次の記事（右側） */
.np-post-outside .next {
  text-align: right !important;
}

/* ホームリンクも中央寄せ */
.np-post-outside .home_link {
  text-align: center !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .np-post-outside {
    margin: 20px 0 !important; /* 40px → 20px に縮小 */
  }
  
  .np-post-outside .np-post {
    padding: 0 15px !important;
  }
  
  .np-post-outside .navigation {
    flex-direction: column !important;
    gap: 8px !important; /* 15px → 8px に縮小 */
  }
  
  .np-post-outside .np-post-list {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* より強力な配置制御 */
  .np-post-outside .prev {
    display: flex !important;
    justify-content: flex-start !important; /* 前の記事（下側）は左寄せ */
  }
  
  .np-post-outside .next {
    display: flex !important;
    justify-content: flex-end !important; /* 次の記事（上側）は右寄せ */
  }
  
  /* リンク要素の幅制限 */
  .np-post-outside .np-post-list a {
    max-width: 90% !important;
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .np-post-outside {
    margin: 15px 0 !important; /* 30px → 15px に縮小 */
  }
  
  .np-post-outside .np-post {
    padding: 0 10px !important;
  }
  
  .np-post-outside .navigation {
    gap: 6px !important; /* さらに縮小 */
  }
}