.system {
  width: 100%;
}

#system {
  width: 1000px;
  margin: 0 auto;
}

small {
  line-height: 1.3;
  display: block;
}

#system ul li {
  float: left;
}

#system ul li a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
}

.system-cnt{
  border: 2px solid #009380;
  width: 900px;
  margin: 60px auto 80px;
  padding: 25px 10px 0;
  position: relative;
  box-shadow: #009380 10px 10px;
}

.system-subttl{
  color: #F31F55;
  font-size: 26px;
  font-weight: bold;
  border-bottom: solid 2px #009380;
  padding-left: 10px;
}

#system .box-text,.box-image {
  display: table-cell;
  vertical-align: top;
}

#system .sys-box {
  display: flex;
  border-spacing: 20px 0;
  align-items: center;
  padding-left: 10px;
  margin-top: 10px;
}
#system .sys-box:nth-child(n+2) {
  margin-bottom: 20px;
}

#system .box-title {
  font-size: 26px;
  color: #009380;
  font-weight: 700;
  background-color: #fff;
  position: absolute;
  display: inline-block;
  top: -20px;
  left: -20px;
  padding-right: 20px;
}

#system .box-title span{
  color: #fff;
  background-color: #009380;
  margin: 5px 10px;
  padding: 5px 15px;
}

#system .box-text p {
  font-size: 18px;
  text-align: left;
  color:#333333;
  line-height: 1.5 !important;
  margin: 0;
}

#system .box-text h4 {
  border-bottom: 2px solid #333;
  margin-bottom: 10px;
  font-size: 23px;
  color: #333;
}

#system .box-image{
  width: 260px;
  height: auto;
  margin: 0 10px;
}
#system .mini{
  width: 220px;
  margin: 0 30px;
}

#system .title-secondary {
  border-left: 10px solid #0a9fec;
}

#system .flex_center {
  display: flex;
}

.kousoku-img {
  width: 400px;
}
.system-comment{
  margin-top: 15px;
  font-size: 0.7em;
  display: block;
}
.sys-attention{
  background: linear-gradient(transparent 55%, #FAE800 0%);
}