/* =============================
   News Content Styles
   お知らせページのコンテンツ部分（横並びカード）
================================ */

:root {
  --news-bg: #f9fafb;
  --news-card: #ffffff;
  --news-ink: #111827;
  --news-muted: #6b7280;
  --news-brand: #CE2746;
  --news-brand-dark: #b71f39;
  --news-radius: 14px;
}

/* ====== リスト（カード型×横並び） ====== */
body.news-page .ultp-block-items-wrap {
  display: grid !important;
  gap: 14px !important;
  margin-top: 6px !important;
}

body.news-page .ultp-post-grid-block {
  margin-top: 0 !important;
}

body.news-page .ultp-block-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 各アイテム - カードスタイル */
body.news-page .ultp-block-item,
body.news-page .ultp-block-items-wrap .ultp-block-item,
body.news-page .ultp-block-item.ultp-block-media,
body.news-page .ultp-block-item[class*="post-id-"] {
  padding: 16px 12px !important;
  background: var(--news-card) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: var(--news-radius) !important;
  transition: box-shadow .2s, border-color .2s, transform .2s !important;
  overflow: hidden !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

/* PostXのデフォルトスタイルをリセット */
body.news-page .ultp-block-media {
  display: block !important;
  align-items: initial !important;
}

body.news-page .ultp-block-content-middle {
  align-items: initial !important;
}

body.news-page .ultp-block-item:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.07) !important;
  border-color: #d1d5db !important;
  transform: translateY(-2px) !important;
}

@media (min-width: 760px) {
  body.news-page .ultp-block-item,
  body.news-page .ultp-block-items-wrap .ultp-block-item,
  body.news-page .ultp-block-item.ultp-block-media,
  body.news-page .ultp-block-item[class*="post-id-"] {
    padding: 18px 14px !important;
  }
}

/* content-wrap を横並びに */
body.news-page .ultp-block-item .ultp-block-content-wrap {
  display: grid !important;
  grid-template-columns: 249px 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}

@media (min-width: 760px) {
  body.news-page .ultp-block-item .ultp-block-content-wrap {
    grid-template-columns: 338px 1fr !important;
    gap: 16px !important;
  }
}

@media (min-width: 1024px) {
  body.news-page .ultp-block-item .ultp-block-content-wrap {
    grid-template-columns: 391px 1fr !important;
  }
}

/* サムネイル部分 - 16:9 */
body.news-page .ultp-block-image {
  position: relative !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-width: none !important;
  flex-shrink: 0 !important;
  align-self: start !important;
}

body.news-page .ultp-block-image-opacity {
  opacity: 1 !important;
}

body.news-page .ultp-block-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.news-page .ultp-block-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* カテゴリバッジ - content-wrapを基準に画像の上に配置 */
body.news-page .ultp-block-content-wrap {
  position: relative !important;
}

body.news-page .ultp-category-grid,
body.news-page .ultp-category-aboveTitle {
  position: absolute !important;
  left: 20px !important;
  top: 20px !important;
  z-index: 10 !important;
  margin: 0 !important;
}

body.news-page .ultp-category-grid a,
body.news-page .ultp-category-aboveTitle a {
  background: var(--news-brand-dark) !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* コンテンツ部分 */
body.news-page .ultp-block-content {
  display: grid !important;
  gap: 4px !important;
  align-content: start !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  justify-content: start !important;
}

/* メタ情報（日付・著者） */
body.news-page .ultp-block-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  font-size: 11px !important;
  color: var(--news-muted) !important;
  margin: 0 !important;
  order: -1 !important;
}

body.news-page .ultp-block-meta-element {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.news-page .ultp-block-meta a {
  color: inherit !important;
  text-decoration: none !important;
}

body.news-page .ultp-block-meta a:hover {
  text-decoration: underline !important;
}

/* タイトル */
body.news-page .ultp-block-title {
  margin: 0 !important;
  font-size: clamp(14px, 2vw, 17px) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  order: 1 !important;
}

body.news-page .ultp-block-title a {
  color: var(--news-ink) !important;
  text-decoration: none !important;
}

body.news-page .ultp-block-title a:hover {
  text-decoration: underline !important;
}

/* 抜粋 */
body.news-page .ultp-block-excerpt {
  margin: 0 !important;
  color: var(--news-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  order: 2 !important;
}

body.news-page .ultp-block-excerpt p {
  margin: 0 !important;
}

/* 続きを読むボタン */
body.news-page .ultp-block-readmore {
  order: 3 !important;
  margin-top: 2px !important;
}

body.news-page .ultp-block-readmore a {
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: var(--news-ink) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s !important;
}

body.news-page .ultp-block-readmore a:hover {
  border-color: var(--news-brand-dark) !important;
  color: var(--news-brand-dark) !important;
  background: #fff !important;
}

/* ページネーション */
body.news-page .ultp-pagination-wrap,
body.news-page .ultp-loadmore {
  padding: 18px 0 8px !important;
  margin-top: 24px !important;
}

body.news-page .ultp-pagination {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
}

body.news-page .ultp-pagination li {
  list-style: none !important;
  margin: 0 !important;
}

body.news-page .ultp-pagination li a,
body.news-page .ultp-pagination li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: var(--news-ink) !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-size: 14px !important;
}

body.news-page .ultp-pagination li a:hover {
  border-color: var(--news-brand-dark) !important;
  color: var(--news-brand-dark) !important;
}

body.news-page .ultp-pagination li.pagination-active a,
body.news-page .ultp-pagination li[aria-current="true"] a {
  background: var(--news-brand-dark) !important;
  color: #fff !important;
  border-color: var(--news-brand-dark) !important;
}

body.news-page .ultp-pagination svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

/* レスポンシブ対応 */
@media (max-width: 759px) {
  body.news-page .ultp-block-content-wrap {
    grid-template-columns: 178px 1fr !important;
    gap: 10px !important;
  }

  body.news-page .ultp-block-title {
    font-size: 16px !important;
  }

  body.news-page .ultp-block-excerpt {
    font-size: 13px !important;
  }
}

/* 不要なオーバーレイやエフェクトを削除 */
body.news-page .ultp-block-overlay,
body.news-page .ultp-block-content-overlay {
  display: none !important;
}