@charset "Shift_JIS";

.report-list {
  display: grid;
  gap: var(--spacing-40);
  grid-template-columns: repeat(1, 1fr);
}
.report-list[hidden] {
  display: none;
}
@media all and (min-width: 768px), print {
  .report-list {
    gap: var(--spacing-40) var(--spacing-80);
    grid-template-columns: repeat(2, 1fr);
    margin-inline: auto;
    max-width: var(--content-main-width);
    width: 100%;
  }
}

@media all and (min-width: 768px), print {
  .report-panel {
    align-items: flex-start;
    display: flex
  }
}
.report-panel__thumbnail {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray02);
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
  filter: var(--drop-shadow-type01);
  overflow: hidden;
}
@media all and (min-width: 768px), print {
  .report-panel__thumbnail {
    width: 225px;
  }
}
.report-panel__thumbnail img {
  transition: opacity 0.4s 0s ease;
  width: 100%;
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .report-panel__thumbnail:hover img {
    opacity: var(--opacity-hover-50per);
  }
}
.report-panel__contents {
  margin: var(--spacing-20) 0 0 0;
}
@media all and (min-width: 768px), print {
  .report-panel__contents {
    margin: 0 0 0 var(--spacing-12);
    width: 100%;
  }
}
.report-panel__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.report-panel__tag-item {
  border: solid 1px var(--color-mufg-gray);
  border-radius: 9999px;
  color: var(--color-mufg-gray);
  font-size: 1.2rem;
  padding: 5px 10px;
  line-height: 1.25;
}
.report-panel__link {
  color: var(--color-link-blue);
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: var(--line-height-large);
  margin-top: 10px;
  transition: opacity 0.4s 0s ease;
  text-decoration: underline;
}
.report-panel__link::after {
  background: var(--bg-ico-pdf);
  content: "";
  display: inline-block;
  height: var(--icon-size-large);
  margin-inline: 4px;
  position: relative;
  top: calc((1em * var(--line-height-medium) - var(--icon-size-large)) / 2);
  /* Necessary if the componees are nested, e.g. if they are used in a list componee. */
  vertical-align: text-top;
  width: var(--icon-size-large);
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .report-panel__link:hover {
    opacity: var(--opacity-hover-50per);
    text-decoration: none;
  }
}