/* ============================================================
   iVIPER お役立ち情報（ブログ）用CSS  media.css
   一覧(home.php)・詳細(single.php)・アーカイブ(archive.php)・
   新着セクション([iviper_latest_posts]) で使用
   ============================================================ */

/* ---------- 一覧レイアウト ---------- */
.bm-wrap { max-width: 1100px; margin: 0 auto; }

.bm-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 34px; }
.bm-chip {
  display: inline-block; border: 1px solid #c6d3e8; background: #fff; color: #0d3078;
  border-radius: 18px; padding: 7px 18px; font-size: 14px; line-height: 1.2;
  text-decoration: none; transition: all .15s;
}
.bm-chip:hover { background: #0065C9; border-color: #0065C9; color: #fff; }
.bm-chip.active { background: #0d3078; border-color: #0d3078; color: #fff; }
.bm-chip .bm-cnt { font-size: 11px; opacity: .7; margin-left: 4px; }

.bm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media screen and (max-width: 900px) { .bm-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 600px) { .bm-grid { grid-template-columns: 1fr; } }

/* ---------- 記事カード ---------- */
.bm-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e8f2;
  border-radius: 12px; overflow: hidden; text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.bm-card:hover { box-shadow: 0 10px 26px rgba(13, 48, 120, .14); transform: translateY(-3px); }
.bm-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.bm-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-card__thumb--none {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0d3078 0%, #0065C9 100%);
}
.bm-card__thumb--none span {
  color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .06em; opacity: .85;
}
.bm-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; }
.bm-card__meta { display: flex; align-items: center; gap: 10px; }
.bm-badge {
  display: inline-block; background: #0065C9; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 4px; padding: 3px 9px; line-height: 1.3; white-space: nowrap;
}
.bm-date { font-size: 12px; color: #999; }
.bm-card__title {
  color: #0d3078; font-size: 16px; font-weight: 700; line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bm-card__excerpt {
  color: #666; font-size: 13px; line-height: 1.7; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- ページネーション ---------- */
.bm-pagination { margin-top: 44px; text-align: center; }
.bm-pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bm-pagination .page-numbers {
  display: inline-block; min-width: 40px; padding: 9px 12px; border: 1px solid #c6d3e8;
  border-radius: 8px; background: #fff; color: #0d3078; font-size: 14px; text-decoration: none;
}
.bm-pagination .page-numbers.current { background: #0d3078; border-color: #0d3078; color: #fff; }
.bm-pagination .page-numbers:hover:not(.current) { background: #0065C9; border-color: #0065C9; color: #fff; }

/* ---------- 記事詳細 ---------- */
.bm-article { max-width: 860px; margin: 0 auto; }
.bm-article__paper {
  background: #fff; border: 1px solid #e0e8f2; border-radius: 14px;
  padding: 44px 48px 40px; box-shadow: 0 4px 18px rgba(13, 48, 120, .05);
}
@media screen and (max-width: 600px) { .bm-article__paper { padding: 26px 18px 28px; border-radius: 10px; } }
.bm-breadcrumb { font-size: 13px; color: #888; margin-bottom: 22px; }
.bm-breadcrumb a { color: #0065C9; text-decoration: none; }
.bm-breadcrumb a:hover { text-decoration: underline; }
.bm-article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bm-article__title {
  color: #0d3078; font-size: 30px; font-weight: 800; line-height: 1.5; margin: 0 0 26px;
}
.bm-article__eyecatch { margin: 0 0 34px; }
.bm-article__eyecatch img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* 本文タイポグラフィ（ブロックエディタ出力対応） */
.bm-article__body { color: #333; font-size: 16px; line-height: 1.95; }
.bm-article__body > * + * { margin-top: 1.2em; }
.bm-article__body h2 {
  color: #0d3078; font-size: 22px; font-weight: 800; line-height: 1.5;
  background: #eef4fb; border-left: 6px solid #0065C9; border-radius: 0 8px 8px 0;
  padding: 12px 18px; margin: 2.2em 0 1em;
}
.bm-article__body h3 {
  color: #0d3078; font-size: 18px; font-weight: 700; line-height: 1.5;
  border-left: 4px solid #0065C9; padding: 2px 0 2px 12px; margin: 1.8em 0 .9em;
}
.bm-article__body a { color: #0065C9; text-decoration: underline; }
.bm-article__body ul, .bm-article__body ol { padding-left: 1.6em; }
.bm-article__body li { margin: .4em 0; }
.bm-article__body strong { color: #0d3078; }
.bm-article__body blockquote {
  border-left: 4px solid #c6d3e8; background: #f6f9fd; padding: 14px 18px;
  border-radius: 0 8px 8px 0; color: #555;
}
.bm-article__body img { max-width: 100%; height: auto; border-radius: 8px; }
.bm-article__body figure { margin: 1.6em 0; }
.bm-article__body figcaption { font-size: 12px; color: #999; text-align: center; margin-top: 6px; }
.bm-article__body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bm-article__body th, .bm-article__body td { border: 1px solid #d5dfec; padding: 10px 14px; text-align: left; }
.bm-article__body th { background: #eef4fb; color: #0d3078; font-weight: 700; }

/* ---------- 記事下CTA ---------- */
.bm-cta {
  margin: 52px 0 0; border: 2px solid #c6d3e8; border-radius: 14px;
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 60%);
  padding: 34px 26px; text-align: center;
}
.bm-cta__title { color: #0d3078; font-size: 21px; font-weight: 800; margin: 0 0 8px; }
.bm-cta__text { color: #555; font-size: 15px; line-height: 1.8; margin: 0 0 20px; }

/* ---------- 前後記事・関連記事 ---------- */
.bm-prevnext { display: flex; gap: 14px; margin-top: 44px; }
.bm-prevnext__item {
  flex: 1; border: 1px solid #e0e8f2; border-radius: 10px; padding: 14px 16px;
  text-decoration: none; background: #fff; transition: all .15s; min-width: 0;
}
.bm-prevnext__item:hover { border-color: #0065C9; box-shadow: 0 6px 16px rgba(13,48,120,.1); }
.bm-prevnext__label { display: block; font-size: 11px; color: #999; margin-bottom: 6px; }
.bm-prevnext__title {
  color: #0d3078; font-size: 13px; font-weight: 700; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bm-prevnext__item--next { text-align: right; }
@media screen and (max-width: 600px) { .bm-prevnext { flex-direction: column; } }

.bm-related { margin-top: 60px; }
.bm-related__title {
  color: #0d3078; font-size: 20px; font-weight: 800; text-align: center; margin: 0 0 24px;
}
.bm-backtolist { margin-top: 44px; text-align: center; }
.bm-backtolist a {
  display: inline-block; border: 2px solid #0d3078; color: #0d3078; background: #fff;
  border-radius: 28px; padding: 12px 40px; font-size: 15px; font-weight: 700;
  text-decoration: none; transition: all .15s;
}
.bm-backtolist a:hover { background: #0d3078; color: #fff; }

/* ---------- トップページ新着セクション ---------- */
.bm-latest { }
.bm-latest .bm-grid { max-width: 1100px; margin: 0 auto; }
.bm-latest__more { margin-top: 34px; text-align: center; }
.bm-latest__more a {
  display: inline-block; border: 2px solid #0d3078; color: #0d3078; background: #fff;
  border-radius: 28px; padding: 12px 44px; font-size: 15px; font-weight: 700;
  text-decoration: none; transition: all .15s;
}
.bm-latest__more a:hover { background: #0d3078; color: #fff; }

/* 一覧0件 */
.bm-empty { text-align: center; color: #888; font-size: 15px; padding: 40px 0; }