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

.tbl {
  border-collapse: collapse;
  width: 100%;
}

.tbl th,
.tbl td {
  border: 1px solid #ccc;
  padding: 0.8rem;
  vertical-align: middle;
}

/* 上の見出し */
.tbl__th--col {
  background: #ECF9FF;
  font-weight: 600;
}

/* 左の見出し */
.tbl__th--row {
  background: #fafafa;
  font-weight: 600;
  white-space: nowrap;
  width: 200px;
}

.list-3col {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 余白はお好みで */
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-3col__item {
  width: calc((100% - 2rem) / 3); /* 3列 */
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
  border-radius: 0.5rem;
}

.list-3col__item a {
  display: block;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.list-3col__item a::after {
    content: "";
    opacity: 1;
    position: absolute;
    right: 1rem;
    bottom: 50%;
    height: 1.6rem;
    width: 1rem;
    background: url(/manual/related/assets/img/icon_right_arrow.svg) no-repeat left;
    background-size: 60%;
    transform: translateY(50%)
}

#contents a {
    color: none;
    border-bottom: none;
}

@media screen and (max-width: 769px) {
.tbl__th--row{
  white-space: inherit;
  width: 80px;
}
  .list-3col__item {
    width: calc((100% - 1rem) / 2);
  }  
}
@media (max-width: 480px) {
  .list-3col__item {
    width: 100%;
  }
}