/* =========================================
   サムネイル部分（横長16:9固定）
   ========================================= */
.mg-posts-sec-post .mg-post-thumb.back-img.md {
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important; /* 横長比率固定 */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

/* テーマ既存の疑似要素による比率指定を解除 */
.mg-posts-sec-post .mg-post-thumb.back-img.md::before,
.mg-posts-sec-post .mg-post-thumb.back-img.md::after {
  content: none !important;
  display: none !important;
  padding-top: 0 !important;
}

/* サムネイル画像が直接img要素で入る場合 */
.mg-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* カメラアイコン */
.mg-post-thumb .post-form {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,.5);
  color: #fff;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: .8rem;
  z-index: 2;
}





/* =========================================
   FIX: サムネ上の重ね表示を無効化し、本文側に統一表示
   ========================================= */

/* 画像側(thumb)に残っている重ね表示のボックスは出さない */
.mg-posts-sec-post .mg-post-thumb.back-img.md .thumb-overlay,
.mg-posts-sec-post .mg-post-thumb.back-img.md .thumb-title,
.mg-posts-sec-post .mg-post-thumb.back-img.md .thumb-meta {
  display: none !important;
}

/* 万が一、未知の重ね要素が入っていても非表示にする保険。
   （アイコン .post-form と .link-div だけは残す） */
.mg-posts-sec-post .mg-post-thumb.back-img.md > *:not(.post-form):not(.link-div):not(img) {
  position: static !important;
  display: none !important;
  opacity: 0 !important;
}

/* 本文ブロックは通常フローで表示・白背景 */
.mg-posts-sec-post .mg-sec-top-post {
  position: static !important;
  inset: auto !important;
  background: #fff !important;
  padding: 1.25rem 1.5rem 1.75rem !important;
  z-index: 1 !important;
  display: block !important;
}

/* 本文側の各要素を黒系で統一（見切れ・透明化・ブレンドを解除）*/
.mg-posts-sec-post .mg-sec-top-post,
.mg-posts-sec-post .mg-sec-top-post * {
  color: #111 !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* タイトルとメタ、抜粋の基本 */
.mg-posts-sec-post .entry-title {
  margin: .2rem 0 .4rem !important;
  line-height: 1.5 !important;
}
.mg-posts-sec-post .entry-title a {
  color: #000 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.mg-posts-sec-post .entry-title a:hover {
  color: #264bbd !important;
  text-decoration: underline;
}
.mg-posts-sec-post .mg-blog-meta {
  color: #444 !important;
  font-size: .85rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .6rem .9rem !important;
  align-items: center !important;
}
.mg-posts-sec-post .mg-content p {
  margin-top: .6rem !important;
  color: #333 !important;
  line-height: 1.7 !important;
}

/* サムネ自体は16:9で固定（はみ出し防止）*/
.mg-posts-sec-post .mg-post-thumb.back-img.md {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  background-size: cover !important;
  background-position: center center !important;
  overflow: hidden !important;
  border-bottom: 1px solid #eee;
}
.mg-posts-sec-post .mg-post-thumb.back-img.md::before,
.mg-posts-sec-post .mg-post-thumb.back-img.md::after {
  content: none !important;
  display: none !important;
}

/* クリック用の透明リンク(.link-div)が本文に被さらないように */
.mg-posts-sec-post .mg-post-thumb.back-img.md .link-div {
  position: absolute !important;
  inset: 0 !important;     /* 画像範囲のみに限定 */
  z-index: 1 !important;
}
.mg-posts-sec-post .mg-sec-top-post a {
  position: static !important; /* 本文のリンクは通常配置 */
  z-index: 2 !important;
}


/* =========================================
   レスポンシブ調整
   ========================================= */
@media (max-width: 992px) {
  .mg-posts-sec-inner { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
  .mg-posts-sec-post .mg-sec-top-post { padding: 1rem 1rem 1.25rem !important; }
  .mg-posts-sec-post .entry-title a { font-size: 1rem !important; }
  .mg-posts-sec-post .mg-blog-meta { font-size: .8rem !important; }
}


/* ================================
   記事一覧カード：縦積みを強制（上：サムネ／下：テキスト）
   ================================ */

/* グリッド（2カラム。モバイルで1カラム） */
.mg-posts-sec-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem 2.5rem; padding:1rem 0 2rem;
}
@media (max-width: 992px){ .mg-posts-sec-inner{ grid-template-columns:1fr; } }

/* カード本体 */
.mg-posts-sec-post{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  background:#fff; border:1px solid #e4e6ed; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08); transition:transform .3s ease, box-shadow .3s ease;
}
.mg-posts-sec-post:hover{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.12); }

/* Bootstrap列の“伸び”を完全停止＆幅100% */
.mg-posts-sec-post > .col-12,
.mg-posts-sec-post > .col-md-6,
.mg-posts-sec-post > .col{
  width:100% !important; max-width:100% !important;
  flex:0 0 auto !important;        /* ← 伸びない */
  align-self:stretch !important;
  padding:0 !important;
}

/* -------------------------------
   サムネイル（背景画像div）を 16:9 固定
   ※ aspect-ratio がテーマに潰される場合に備えて padding-top 方式で二重化
-------------------------------- */
.mg-posts-sec-post .mg-post-thumb.back-img.md{
  position:relative !important;
  width:100% !important; height:auto !important; min-height:0 !important;
  background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important;
  border-bottom:1px solid #eee; overflow:hidden;
  aspect-ratio:16/9 !important;               /* まずはネイティブ比率 */
}
.mg-posts-sec-post .mg-post-thumb.back-img.md::before{
  content:""; display:block; padding-top:56.25%; /* 16:9 フォールバック（競合保険） */
}
@supports (aspect-ratio: 16/9){
  .mg-posts-sec-post .mg-post-thumb.back-img.md::before{ display:none; } /* aspect-ratio が効く環境では解除 */
}

/* サムネ内リンクを“サムネ内だけ”に限定（下の本文を覆わない） */
.mg-posts-sec-post .mg-post-thumb.back-img.md .link-div{
  position:absolute !important; inset:0 !important; z-index:1 !important;
}

/* -------------------------------
   テキストエリア（見出し→カテゴリ→日付→抜粋）
-------------------------------- */
.mg-posts-sec-post .mg-sec-top-post{
  position:relative !important; z-index:2 !important;
  padding:1.1rem 1.25rem 1.5rem !important; background:#fff !important;
  color:#111 !important;
}

/* 旧“重ね見出し（白文字）”を全解除して黒に統一 */
.mg-posts-sec-post .mg-sec-top-post,
.mg-posts-sec-post .mg-sec-top-post *,
.mg-posts-sec-post .entry-title,
.mg-posts-sec-post .entry-title a,
.mg-posts-sec-post .mg-blog-meta,
.mg-posts-sec-post .mg-content p{
  color:#111 !important; text-shadow:none !important; mix-blend-mode:normal !important; opacity:1 !important; visibility:visible !important;
}

/* 見出し */
.mg-posts-sec-post .entry-title{ margin:.2rem 0 .35rem !important; line-height:1.5 !important; }
.mg-posts-sec-post .entry-title a{ font-size:1.12rem !important; font-weight:700 !important; text-decoration:none !important; }
.mg-posts-sec-post .entry-title a:hover{ color:#264bbd !important; }

/* カテゴリ（タグ風チップ） */
.mg-posts-sec-post .mg-blog-category a{
  display:inline-block; font-size:.8rem !important; font-weight:600;
  color:#264bbd !important; background:#eef2ff !important; border-radius:6px; padding:.2rem .5rem; margin:.25rem .5rem .4rem 0;
  text-decoration:none;
}

/* 日付・著者 */
.mg-posts-sec-post .mg-blog-meta{
  margin-top:.4rem !important; font-size:.86rem !important; color:#666 !important;
  display:flex !important; flex-wrap:wrap !important; gap:.6rem 1rem !important; align-items:center !important;
}
.mg-posts-sec-post .mg-blog-meta i{ color:#888 !important; margin-right:.25rem; }

/* 抜粋（必要な場合） */
.mg-posts-sec-post .mg-content p{
  margin-top:.6rem !important; font-size:.93rem !important; line-height:1.7 !important; color:#333 !important;
}

/* 画像タグで入った場合の保険 */
.mg-post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }

/* カメラアイコンを完全に非表示 */
.mg-post-thumb .post-form,
.mg-posts-sec-post .post-form {
  display: none !important;
}


.custom-article-title a {
  color: #111 !important;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
}

.custom-article-title a:hover {
  color: #264bbd !important;
  text-decoration: underline;
}

.custom-article-excerpt {
  color: #333 !important;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 0.5rem;
}