@charset "utf-8";

.grid {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}
.grid-item {
  width: calc(calc(100% - var(--grid-gap)) / 2);
}
.grid-item a {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  min-height: 160px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: var(--color-theme-white);
  color: var(--color-font-base);
}
.grid-item a .thumbnail {
  width: calc(100% / 3);
  min-height: 160px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.grid-item a h2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 2em;
  flex: 1;
  font-size: 22px;
}

#sec01 {
  padding-bottom: var(--section-padding) !important;
}


@media screen and (max-width: 900px) {
  #sec01 .section_inner {
    margin: 0 6vw;
  }
  .grid {
    flex-direction: column;
    row-gap: calc(var(--grid-gap) / 2);
  }
  .grid-item {
    width: 100%;
  }
  .grid-item a,
  .grid-item a .thumbnail {
    min-height: 80px;
  }
  .grid-item a h2 {
    padding-left: 1em;
    font-size: 20px;
  }
}