.features_top {
  padding: 6% 0 40px;
  background: #141414;
  position: relative;
}

.features_top::after {
  content: "";
  display: block;
  width: 100%;
  height: 120px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.features_top .inner {
  max-width: 1080px;
}

.features_top .tit {
  font-size: 3.4rem;
  font-weight: bold;
  margin: 0 auto 40px;
  color: #fff;
}

.features_top .caption {
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
  letter-spacing: .08em;
  margin: 0 auto 75px;
}

.features_top .box {
  padding: 6% 4%;
  width:90%;
  max-width: 1080px;
  background: #fff;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 18px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.16);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.features_top .features-flow-img {}

.integration .search-box {
  width: 100%;
  max-width: 980px;
}

.integration-list {
  max-width: 980px;
  margin: 40px auto 80px;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.integration-list .list {
  display: grid;
  /* grid-template-rows: subgrid; */
  padding: 0.8rem;
}

.integration-list .list a {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0.8rem;
}
.integration-list .list a[tabindex="-1"]:hover {
  color: inherit;
  cursor: default;
}

.integration-list .logo {
  width: 100%;
  aspect-ratio: 5/2;
}

.integration-list .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.integration-list .item_main_tit {
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.cta-box {
  width: 100%;
  max-width: 980px;
  border-radius: 8px;
  background: #d2e7e9;
  padding: 3%;
  text-align: center;
  color: #000;
  margin: 40px auto;
}

.cta-box .sub-tit {
  margin: 0 auto 20px;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.55;
  color: #000;
  letter-spacing: .08em;
}

.cta-box .note-small {
  font-size: 1.6rem;
  line-height: 1.6;
  margin: 0 auto 1.5em;
  color: #000;
}

.cta-box .btn {
  margin: 40px auto 0;
  font-size: 1.6rem;
  max-width: fit-content;
}

.cta-box .btn-square-blk a {
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 8px;
}

.cta-box .btn-square-blk a:hover {
  background: #444;
  color: #fff;
  box-shadow: 0 1px 14px -1px rgba(3, 15, 54, 0);
}



@media screen and (min-width:480px) {
  /* ------------------------------------- */
  /* contents */
  /* ------------------------------------- */

}

@media screen and (min-width:768px) {

  /* ------------------------------------- */
  /* contents */
  /* ------------------------------------- */
.features_top .box {
  padding: 60px 40px;
}  
  .integration .search-box {
    width: 100%;
    padding: 0 1.6rem;
  }

  .integration-list {
    padding: 0 1.6rem;
  }
}

@media screen and (min-width:1025px) {
  /* ------------------------------------- */
  /* contents */
  /* ------------------------------------- */
.features_top .box {
 width:100%;
} 
}

@media (orientation: landscape) and (max-width: 767px) {
  /* デバイスが横向き、画面の横幅が 767px 以下の場合の記述 */
}