@import url(common.css);

/* ////////////////////////////////////////// */

/* 対応可能セクション */

/* ////////////////////////////////////////// */
.ok_section {
  padding: 8em 0 5em;
}
.ok_section h2 {
  text-align: center;
}
.ok_block {
  margin: 3em auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.ok_item {
  border: 1px solid var(--border_gray);
  border-radius: var(--radius);
  padding: 1em;
}
.ok_item p {
  font-weight: bold;
  text-align: center;
}
.ok_item img {
  display: block;
  width: min(100%, 250px);
  height: auto;
  margin: 1em auto 0;
}

/* ok_bottom */
.ok_bottom {
  padding: 1em 0;
  width: calc(100% - 40px);
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}
.ok_bottom p {
  text-align: center;
}
.ok_bottom ul {
  padding-bottom: 4em;
}
.ok_bottom li {
  font-size: clamp(13px, 1.8vw, 14px);
  color: var(--aside_gray);
  text-indent: -1em;
  padding-left: 1em;
}
@media only screen and (max-width: 768x) {
  .ok_section .ok_block {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .ok_item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .ok_bottom p {
    text-align: left;
  }
}