.shared-training-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--c-border, #D9E5E8);
  border-radius: 8px;
  background: var(--c-surface, #fff);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
}

.shared-training-card__link {
  display: flex;
  min-height: 0;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.shared-training-card__media {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--c-surface-soft);
}

.shared-training-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .25s ease;
}

.shared-training-card__content {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 14px 16px 13px;
}

/* 提供会社（タイトル直上の補助情報。タイトルより控えめに保つ） */
.shared-training-card__provider {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0 0 6px;
}

.shared-training-card__provider-mark,
.shared-training-card__provider-img {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
}

.shared-training-card__provider-img {
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--c-surface-muted);
}

.shared-training-card__provider.has-logo .shared-training-card__provider-mark {
  display: none;
}

.shared-training-card__provider-name {
  overflow: hidden;
  color: var(--c-ink-sub, #587083);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-training-card__title {
  display: -webkit-box;
  height: 51px;
  min-width: 0;
  overflow: hidden;
  color: var(--c-ink, #102a43);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shared-training-card__learning {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin-top: 7px;
}

.shared-training-card__label {
  display: block;
  color: var(--c-ink-body, #1e3a50);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.shared-training-card__learning-value {
  display: -webkit-box;
  height: 42px;
  overflow: hidden;
  margin-top: 2px;
  color: var(--color-navy-soft);
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shared-training-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgb(15 39 62 / 10%);
}

.shared-training-card__fact-value {
  color: var(--c-ink, #102a43);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.shared-training-card__footer {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  gap: 8px;
  margin-top: auto;
}

.shared-training-card__tags {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.shared-training-card__tag {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--color-navy-soft);
  background: var(--c-surface-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.shared-training-card__arrow {
  display: block;
  width: 16px;
  height: 22px;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--color-navy-soft);
  font-size: 20px;
  line-height: 1;
}

.shared-training-card__link:focus-visible,
.shared-training-card__actions button:focus-visible {
  outline: 3px solid rgb(55 85 113 / 24%);
  outline-offset: -3px;
}

@media (hover: hover) {
  .shared-training-card:hover {
    border-color: var(--c-border-accent, #B6E1DD);
    box-shadow: 0 8px 24px rgb(25 72 116 / 12%);
    transform: translateY(-2px);
  }

  .shared-training-card:hover .shared-training-card__media > img {
    transform: scale(1.025);
  }
}

.shared-training-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 14px;
}

.shared-training-card__actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  color: var(--c-ink-body);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.shared-training-card__favorite[aria-pressed="true"],
.shared-training-card__compare[aria-pressed="true"] {
  border-color: var(--c-action, #087D76);
  color: var(--c-on-action, #fff);
  background: var(--c-action, #087D76);
}

.flow-cards .shared-training-card {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  border-radius: 10px;
}

.flow-cards .shared-training-card__link {
  flex: 1;
}

.flow-cards .shared-training-card__footer {
  padding-top: 12px;
}

.flow-cards .shared-training-card__media {
  height: 158px;
}

@media (max-width: 767px) {
  .flow-cards .shared-training-card__media {
    height: 168px;
  }

  .flow-cards .shared-training-card__content {
    padding: 12px 13px 11px;
  }

  .flow-cards .shared-training-card__title {
    height: auto;
    min-height: 45px;
    font-size: 16px;
  }

  .flow-cards .shared-training-card__learning-value {
    height: auto;
    min-height: 42px;
    font-size: 13px;
  }

  .flow-cards .shared-training-card__actions {
    padding: 0 13px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shared-training-card,
  .shared-training-card__media > img {
    transition: none;
  }
}

/* Nine training categories: text labels remain visible independently of color. */
.shared-training-card .shared-training-card__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 4px;
}
.shared-training-card__category-label { flex-basis: 100%; }
.shared-training-card .shared-training-card__category {
  display: inline-block;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--category-text);
  background: var(--category-bg);
}
/* カテゴリーは分類であって評価ではないため、9種類とも同じ Pale Green / Green で表示する。
   区別はラベルの文言が担う（一覧で色が増えて主役のCTAが埋もれるのを防ぐ）。 */
.shared-training-card__category--chat,
.shared-training-card__category--knowledge,
.shared-training-card__category--creative,
.shared-training-card__category--media,
.shared-training-card__category--automation,
.shared-training-card__category--development,
.shared-training-card__category--cloud,
.shared-training-card__category--data,
.shared-training-card__category--monitoring {
  --category-bg: var(--c-action-soft, #EAF7F5);
  --category-text: var(--c-action-text, #066A63);
}

/* 助成金対応（○/△/×/確認中）。記号と文字で状態を伝え、色は補助にする。 */
.shared-training-card__fact-value--subsidy-yes { color: var(--c-ok, #168567); }
.shared-training-card__fact-value--subsidy-conditional { color: var(--c-warn, #c47a22); }
.shared-training-card__fact-value--subsidy-no { color: var(--c-ink-sub, #587083); }
/* 未確認（正式データ未登録）。○/△/×と混同しないよう通常ウェイトのグレーにする。 */
.shared-training-card__fact-value--subsidy-unknown { color: var(--color-navy-soft); font-weight: 500; }

/* 開催エリア（デモデータ）。使用カテゴリと同じ並びで、短いタグとして見せる。 */
.shared-training-card__areas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.shared-training-card__area {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--color-accent-border, #9ED4CF);
  border-radius: 999px;
  background: var(--color-accent-bg, #EAF7F5);
  color: var(--color-accent-deep, #0A6B65);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}