.page-lower #visual {
  background: url(../images/production/visual-bg.jpg) center center /cover no-repeat;
}
.page-lower #visual .title-1:before {
  content: 'SYSTEM';
}

#main .list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#main .list .item {
  width: 23%;
  min-height: 300px;
  padding: 1.5em 1em;
  background: var(--c-blue3);
}
@media (min-width:961px) {
  #main .list .item {
    margin-left: 2.6666%;
  }
  #main .list .item:nth-child(4n+1) {
    margin-left: 0;
  }
  #main .list .item:nth-child(n+5) {
    margin-top: 2.6666%;
  }
}
@media (min-width:641px) and (max-width:960px) {
  #main .list .item {
    width: 32%;
    margin-left: 2%;
  }
  #main .list .item:nth-child(3n+1) {
    margin-left: 0;
  }
  #main .list .item:nth-child(n+4) {
    margin-top: 2%;
  }
}
@media (max-width:640px) {
  #main .list .item {
    width: 49%;
  }
  #main .list .item:nth-child(2n+2) {
    margin-left: 2%;
  }
  #main .list .item:nth-child(n+3) {
    margin-top: 2%;
  }
}
@media (max-width:540px) {
  #main .list .item {
    width: 100%;
    min-height: 0;
    margin: 0 !important;
  }
  #main .list .item ~ .item {
    margin-top: 1em !important;
  }
}
#main .list .item .num {
  display: block;
  width: fit-content;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-blue);
  -webkit-background-clip: text; /* 文字の背景を切り取る */
  -webkit-text-fill-color: transparent; /* 文字を透明にする */
  margin: 0 auto .25em;
}
#main .list .item dt {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--c-blue);
}
#main .list .item dd {
  margin-top: 1em;
}