@charset "UTF-8";
/* CSS Document */

.unit-merit {
  display: flex;
  gap: 2.5em;
}
.unit-merit + .unit-merit {
  margin-top: 3em;
}
.unit-merit__left {
  flex-shrink: 0;
  width: 333px;
}
.unit-merit__unit {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 1em;
  margin-bottom: 2em;
}
.unit-merit__unit li {
  width: calc(50% - 1em);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1em;
  background: var(--bg-gray);
}
.unit-merit__unit figure {
  border: solid 1px var(--lt-gray);
  text-align: center;
  background: #fff;
}
.unit-merit__unit h4 {
 line-height: 1.3;
}
.unit-merit__unit h4::before {
  top: 0.7em;
}
.unit-merit__unit2 {
  display: flex;
  gap: 1em;
  margin-bottom: 2em;
}
.unit-merit__unit2 > p,
.unit-merit__unit2 > div {
  flex: 1
}
.unit-merit__unit2 > figure {
  width: calc(50% - 1em);
  flex-shrink: 0;
  text-align: center;
}


@media screen and (max-width: 768px) {

  .unit-merit {
    flex-direction: column;
    gap: 1.5em;
  }
  .unit-merit__left {
    width: auto;
  }
  .unit-merit__unit {
    flex-direction: column;
  }
  .unit-merit__unit li {
    width: auto;
  }
  .unit-merit__unit2 {
    flex-direction: column;
  }
  .unit-merit__unit2 > p,
  .unit-merit__unit2 > div {
    flex: 1
  }
  .unit-merit__unit2 > figure {
    width: auto;
  }

}