:root {
  --obc: rgba(240, 180, 60, 0.1);
}

.obc {
  background: var(--obc);
}

/* si = small item */
@media (max-width:601px) {
  .si {
    grid-template-columns: 1fr;
  }

  .si2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .si3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .si4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .si5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .si6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

.banner {
  background: #f5f5f5;
  padding-top: 30px;
  padding-top: clamp(20px, 3vw, 40px);
}

.banner img {
  max-height: 660px;
}

article, .ban2 {
  margin-top: 60px;
  margin-top: clamp(40px, 6vw, 80px);
}

article h4 {
  color: #f90;
  line-height: 1;
  background: url("../image/pattern.svg");
  background-size: 3px auto;
}

article div, article table {
  margin-top: 45px;
  margin-top: clamp(30px, 4.5vw, 60px);
}

article p.sub {
  text-align: center;
  margin-top: 30px;
  margin-top: clamp(20px, 3vw, 40px);
}

article p.sub a {
  display: inline-block;
  padding: 0 30px;
  height: 40px;
  line-height: 40px;
  font-weight: 400;
  background: #3391ff;
  border-radius: 20px;
  color: #fff;
}

article p.sub a i {
  margin-left: 10px;
  color: #d00;
  font-size: 20px;
}

article p.sub a:hover {
  background: #60f;
  color: #fff;
}

@media (min-width:901px) {
  article div {
    column-count: 2;
    column-fill: balance;
    column-rule: dashed #ccc 0.5px;
    column-gap: 50px;
    column-gap: clamp(40px, 5vw, 60px);
  }
}