/* =============================================
   resource-list.css
   CMSブログリストタグ（###_DCMS_BLOCK_BLOG_LIST_...###）を
   4列グリッドのカード一覧として表示する共通コンポーネント。
   common-design.css の oc- 変数を利用するため、読み込むページには
   common-design.css も合わせて読み込むこと。
   ============================================= */

/* ── CMS ブログリスト：4列グリッドカード ── */
.download_list {
  display  : flex;
  flex-wrap: wrap;
  gap      : 20px;
  margin-top: 16px;
}

/* カード1件 */
.download_list .boxlink,
.download_list .js-boxlink {
  display        : flex;
  flex-direction : column;
  position       : relative;
  width          : calc(25% - 15px) !important;
  min-width      : 200px !important;
  margin         : 0 !important;
  background     : #fff !important;
  box-shadow     : none !important;
  border         : 1px solid var(--oc-border) !important;
  text-decoration: none !important;
  overflow       : hidden !important;
  transition     : box-shadow 0.22s var(--oc-ease);
}

.download_list .boxlink:hover,
.download_list .js-boxlink:hover {
  box-shadow: 0 4px 20px rgba(3, 38, 71, 0.10) !important;
}

/* サムネイル：カード上部・横幅いっぱい
   ドキュメント画像は文字入りのため object-fit:cover でクロップせず
   自然な縦横比のまま全体を表示する。
   <span> はインライン要素のため display:block が必須。 */
.download_list .top-media_thumb {
  display    : block !important;
  position   : relative !important;
  width      : 100% !important;
  max-width  : 100% !important;
  padding-top: 0 !important;
  height     : auto !important;
  overflow   : hidden !important;
  background : #fff !important;
  order      : 1 !important;
  flex-shrink: 0 !important;
}

.download_list .top-media_thumb img {
  display   : block !important;
  position  : static !important;
  top       : auto !important;
  left      : auto !important;
  width     : 100% !important;
  height    : auto !important;
  max-width : 100% !important;
  transform : none !important;
  transition: transform 0.4s var(--oc-ease) !important;
}

.download_list .boxlink:hover .top-media_thumb img,
.download_list .js-boxlink:hover .top-media_thumb img {
  transform: scale(1.04) !important;
}

/* テキストエリア：サムネイル下 */
.download_list .top-media_box {
  order      : 2;
  flex       : 1;
  display    : flex;
  width      : 100%;
}

.download_list .top-media_item {
  display       : flex;
  flex-direction: column;
  width         : 100%;
  background    : none;
  box-shadow    : none;
}

.download_list .top-media_txtarea {
  padding: 16px 18px 40px;
}

.download_list .top-media_title {
  margin: 0;
}

.download_list .top-media_title a {
  display    : block;
  font-size  : 14px !important;
  font-weight: 700 !important;
  color      : var(--oc-navy) !important;
  line-height: 1.6 !important;
  transition : filter 0.2s var(--oc-ease);
}

.download_list .top-media_title a::after {
  display: none !important;
}

.download_list .boxlink:hover .top-media_title a,
.download_list .js-boxlink:hover .top-media_title a {
  filter: brightness(1.3);
}

.download_list .top-media_category {
  display  : flex !important;
  flex-wrap: wrap;
  gap      : 6px;
  margin   : 8px 0 0 !important;
}

.download_list .top-media_category .category {
  font-family    : 'IBM Plex Sans', sans-serif;
  font-size      : 10px;
  font-weight    : 600;
  letter-spacing : 0.04em;
  color          : #fff !important;
  background     : var(--oc-navy);
  border-radius  : 100px;
  padding        : 3px 9px;
  white-space    : nowrap;
  text-decoration: none !important;
  transition     : filter 0.2s var(--oc-ease);
}

.download_list .top-media_category .category:hover {
  filter: brightness(1.3);
}

/* カード右下の「詳しく見る」ボタン：小さな右向き三角形のみ */
.download_list .top-media_item::after {
  content        : '▶';
  position       : absolute;
  right          : 14px;
  bottom         : 14px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 28px;
  height         : 28px;
  padding-left   : 2px;
  border-radius  : 50%;
  border         : 1.5px solid var(--oc-navy);
  background     : transparent;
  color          : var(--oc-navy);
  font-size      : 9px;
  transition     : background-color 0.2s var(--oc-ease), color 0.2s var(--oc-ease);
}

.download_list .boxlink:hover .top-media_item::after,
.download_list .js-boxlink:hover .top-media_item::after {
  background: var(--oc-navy);
  color     : #fff;
}

/* 日付・ボタン類は非表示（カテゴリは上のルールで表示） */
.download_list .top-media_date,
.download_list .top-media_btn,
.download_list .md-link_btn,
.download_list ._nversion,
.download_list ._min {
  display: none !important;
}

.download_list .boxlink a,
.download_list .js-boxlink a {
  display        : block;
  text-decoration: none;
}

/* ── 一覧ページへのリンク（カード下部中央） ── */
.oc-resource-footer {
  margin-top: 36px;
  text-align: center;
}

/* ── レスポンシブ：スマホは2列 ── */
@media screen and (max-width: 679px) {
  .download_list .boxlink,
  .download_list .js-boxlink {
    width: calc(50% - 10px) !important;
  }
}