.elementor-8558 .elementor-element.elementor-element-8b388d5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-theme-post-featured-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-8558 .elementor-element.elementor-element-185ebcb img{width:100%;}.elementor-8558 .elementor-element.elementor-element-fdeb704 .jet-listing-dynamic-field .jet-listing-dynamic-field__inline-wrap{width:auto;}.elementor-8558 .elementor-element.elementor-element-fdeb704 .jet-listing-dynamic-field .jet-listing-dynamic-field__content{width:auto;}.elementor-8558 .elementor-element.elementor-element-fdeb704 .jet-listing-dynamic-field{justify-content:flex-start;}.elementor-8558 .elementor-element.elementor-element-fdeb704 .jet-listing-dynamic-field__content{text-align:left;}.elementor-8558 .elementor-element.elementor-element-9c225ac .jet-listing-dynamic-terms{text-align:left;}.elementor-8558 .elementor-element.elementor-element-9c225ac .jet-listing-dynamic-terms__link{font-size:16px;}/* Start custom CSS for container, class: .elementor-element-8b388d5 *//* =========================================================
   D4L 現場変革メソッド（DLC・資料） Listing Item 固有CSS
   （ライトテーマ: カード背景薄グレー版）
========================================================= */

/* D4L DLC Listing Item Main Container (カード背景: 薄いグレー) */
.elementor-8558 .elementor-element.elementor-element-8b388d5.dlc-card-item,
.elementor-8558 .elementor-element.elementor-element-8b388d5 {
  background-color: #f8fafc; /* 薄いグレー */
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  cursor: pointer; /* カード全体リンク用 */
}

/* ホバー時のカード浮揚＆シャドウ効果 */
.elementor-8558 .elementor-element.elementor-element-8b388d5.dlc-card-item:hover,
.elementor-8558 .elementor-element.elementor-element-8b388d5:hover {
  transform: translateY(-4px);
  background-color: #ffffff; /* ホバー時に白へスッと持ち上がる演出 */
  border-color: rgba(0, 102, 204, 0.4);
  box-shadow: 0 12px 28px -8px rgba(15, 37, 64, 0.12), 0 4px 12px rgba(0, 102, 204, 0.08);
}

/* -------------------------------------------
   アイキャッチ画像 (Dynamic Image)
------------------------------------------- */
.elementor-8558 .elementor-element.elementor-element-8b388d5 .dlc-card-image,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .jet-listing-dynamic-image {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px; /* 画像とタイトルの余白 */
}
.elementor-8558 .elementor-element.elementor-element-8b388d5 .dlc-card-image img,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .jet-listing-dynamic-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ホバー時の画像ズームイン */
.elementor-8558 .elementor-element.elementor-element-8b388d5:hover .dlc-card-image img,
.elementor-8558 .elementor-element.elementor-element-8b388d5:hover .jet-listing-dynamic-image img {
  transform: scale(1.03);
}

/* -------------------------------------------
   Title Style (ディープネイビー / 2行制限 Clamp)
------------------------------------------- */
.elementor-8558 .elementor-element.elementor-element-8b388d5 .dlc-card-title,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .jet-listing-dynamic-field {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #0f2540; /* 薄いグレー背景に映えるディープネイビー */
  margin-bottom: 20px;
  /* 2行制限 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}

/* ホバー時にタイトルがD4Lブルーへ変化 */
.elementor-8558 .elementor-element.elementor-element-8b388d5:hover .dlc-card-title,
.elementor-8558 .elementor-element.elementor-element-8b388d5:hover .jet-listing-dynamic-field {
  color: #0066cc;
}

/* -------------------------------------------
   Dynamic Terms (Tag Badge Pill Styling)
------------------------------------------- */
/* バッジコンテナをカード最下部に押し下げる */
.elementor-8558 .elementor-element.elementor-element-8b388d5 .dlc-card-tags,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .jet-listing-dynamic-terms__links,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .jet-listing-dynamic-terms {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: auto !important; /* カード下部へ配置 */
}

/* ピル型（カプセル型）バッジデザイン (ライトテーマ用) */
.elementor-8558 .elementor-element.elementor-element-8b388d5 .dlc-card-tag-item,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .jet-listing-dynamic-terms__link,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .jet-listing-dynamic-terms__item,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .dlc-card-tags a {
  background: rgba(0, 102, 204, 0.08) !important;
  color: #0066cc !important;
  border: 1px solid rgba(0, 102, 204, 0.2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
  line-height: 1.4 !important;
  pointer-events: none; /* カード全体リンクの邪魔にならないよう設定 */
}

.elementor-8558 .elementor-element.elementor-element-8b388d5 .dlc-card-tag-item:hover,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .jet-listing-dynamic-terms__link:hover,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .jet-listing-dynamic-terms__item:hover,
.elementor-8558 .elementor-element.elementor-element-8b388d5 .dlc-card-tags a:hover {
  background: #0066cc !important;
  border-color: #0066cc !important;
  color: #ffffff !important;
}/* End custom CSS */