/**
 * DADS Card example-1
 * https://design.digital.go.jp/dads/html/?path=/docs/components-カード--docs
 */

.dads-card-example-1-list {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(24 / 16 * 1rem);
  padding: 0;
  list-style: none;
}

.dads-card-example-1-list > li {
  display: flex;
  min-width: 0;
}

.dads-card-example-1 {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  width: calc(352 / 16 * 1rem);
  max-width: 100%;
  font-family: var(--font-family-sans, "Noto Sans JP", sans-serif);
  text-decoration: none !important;
  overflow-wrap: anywhere;
  color: inherit;
}

.dads-card-example-1:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black, #000);
  outline-offset: calc(2 / 16 * 1rem);
  border-radius: var(--cl-radius-l, 8px);
}

.dads-card-example-1__image {
  position: relative;
  box-sizing: content-box;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--color-neutral-solid-gray-420, #949494);
  border-radius: var(--cl-radius-l, 8px) var(--cl-radius-l, 8px) 0 0;
  overflow: hidden;
  background: var(--cl-brand-soft, #eaf6ef);
}

.dads-card-example-1__image-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dads-card-example-1__main {
  flex-grow: 1;
  position: relative;
  margin-top: calc(-24 / 16 * 1rem);
  display: grid;
  align-content: start;
  row-gap: calc(12 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-420, #949494);
  border-radius: var(--cl-radius-l, 8px);
  background-color: var(--color-neutral-white, #fff);
  padding: calc(16 / 16 * 1rem) calc(24 / 16 * 1rem);
}

.dads-card-example-1__date {
  margin: 0;
  color: var(--color-neutral-solid-gray-600, #666);
  font-size: calc(14 / 16 * 1rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.dads-card-example-1__heading,
.dads-card-example-1__main h2,
.dads-card-example-1__main h3,
.dads-card-example-1__main h4 {
  margin: 0;
  min-width: 0;
  color: var(--color-neutral-solid-gray-900, #1a1a1a);
  font-weight: bold;
  font-size: calc(20 / 16 * 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-thickness: calc(1 / 16 * 1rem);
  text-underline-offset: calc(3 / 16 * 1rem);
}

@media (hover: hover) {
  .dads-card-example-1:hover .dads-card-example-1__heading,
  .dads-card-example-1:hover .dads-card-example-1__main h2,
  .dads-card-example-1:hover .dads-card-example-1__main h3,
  .dads-card-example-1:hover .dads-card-example-1__main h4 {
    text-decoration-thickness: calc(3 / 16 * 1rem);
  }
}

.dads-card-example-1__contents,
.dads-card-example-1__main p {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--color-neutral-solid-gray-800, #333);
  font-weight: normal;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.cl-news-archive .dads-card-example-1-list {
  width: 100%;
}

.cl-news-card-list--cols-1 > li {
  flex: 1 1 100%;
  max-width: 100%;
}

.cl-news-card-list--cols-1 .dads-card-example-1 {
  width: 100%;
  max-width: calc(1024 / 16 * 1rem);
}

.cl-news-card-list--cols-2 > li {
  flex: 1 1 calc(50% - 12px);
  max-width: calc(50% - 12px);
}

.cl-news-card-list--cols-2 .dads-card-example-1,
.cl-news-card-list--cols-3 .dads-card-example-1 {
  width: 100%;
}

.cl-news-card-list--cols-3 > li {
  flex: 1 1 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
}

@media (max-width: 64rem) {
  .cl-news-card-list--cols-3 > li {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

@media (max-width: 40rem) {
  .cl-news-card-list--cols-3 > li,
  .cl-news-card-list--cols-2 > li {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (min-width: 48rem) {
  .cl-news-archive .dads-card-example-1-list:not([class*="cl-news-card-list--cols-"]) > li {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }

  .cl-news-archive .dads-card-example-1-list:not([class*="cl-news-card-list--cols-"]) .dads-card-example-1 {
    width: 100%;
  }
}

@media (min-width: 64rem) {
  .cl-news-archive .dads-card-example-1-list:not([class*="cl-news-card-list--cols-"]) > li {
    flex: 1 1 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
  }
}