@charset "UTF-8";

.w2_patterns_inner {
  width: 5864px;
  background-image: url(/assets/img/btob_new/partner_scroll.webp);
}

@media screen and (max-width: 767px) {
  :root {
    --width-full: 100%;
    --width-content: 93%;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --width-full: min(100%, 1280px);
    --width-content: min(77.7%, 1120px);
  }
}

#Btob .btob_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: var(--width-content);
  margin: 0 auto;
}

#Btob .btob_list li {
  box-shadow: 0 10px 30px rgba(51, 51, 51, .15);
  background: #fff;
  line-height: normal;
}

#Btob .btob_list li .btob_list_head {
  padding: 10px;
  background: var(--gradient-blue);
  color: #fff;
  text-align: center;
}

#Btob .btob_list li .btob_list_head span {
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
}

#Btob .btob_list li .btob_list_head h4 {
  font-size: 23px;
  font-weight: 500;
}

#Btob .btob_list li .btob_list_contents {
  padding: 15px 20px;
  text-align: center;
}

#Btob .btob_list li .btob_list_contents h5 {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

#Btob .btob_list li .btob_list_contents img {
  margin-top: 15px;
}

#Btob .btob_list li .btob_list_contents h6 {
  padding: 5px 0;
  font-size: 15px;
  color: var(--simple-blue);
  border-top: solid 1px #999999;
  border-bottom: solid 1px #999999;
  display: block;
  width: 100%;
  margin-top: 15px;
  font-weight: 500;
}

#Btob .btob_list li .btob_list_contents p {
  padding: 10px 0;
  font-size: 14px;
}

@media screen and (max-width: 1024px) {
  #Btob .btob_list {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {

  #Btob .btob_list li .btob_list_head h4 {
    font-size: 18px;
  }
}

#System .system_list {
  width: var(--width-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px;
}

#System .system_list li {
  background: #fff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(51, 51, 51, .15);
  line-height: normal;
  padding: 20px;
}

#System .system_list li h4 {
  font-size: 18px;
  color: var(--simple-blue);
  font-weight: 500;
}

#System .system_list li p {
  margin-top: 15px;
  font-size: 14px;
}

#System .system_list li img {
  margin-top: 15px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  #System .system_list {
    grid-template-columns: 1fr;
  }
}

#Example {
  padding-bottom: 100px;
}

#Example h3 {
  background: var(--simple-blue);
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  padding: 5px 0;
  margin-bottom: 0;
  width: 100%;
}

#Example .example_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: var(--width-content);
  margin: 0 auto;
}

#Example .example_list li {
  background: #fff;
  box-shadow: 0 10px 30px rgba(51, 51, 51, .15);
  padding: 30px;
  line-height: normal;
}

#Example .example_list li h4 {
  font-size: 18px;
  color: var(--simple-blue);
  font-weight: 500;
  text-align: left;
}

#Example .example_list li p {
  margin-top: 15px;
  text-align: left;
}

#Example .example_list li img {
  margin-top: 15px;
}

#Example .example_list li .example_list_lead {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 15px;
}

#Example .example_list li .example_list_lead span {
  display: block;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 5px;
  background: var(--simple-blue);
}

#Example .example_list li .example_list_lead span:nth-child(2) {
  border-left: solid 1px #fff;
}

#Example .example_list li p {
  font-size: 14px;
  margin-top: 15px;
}

@media screen and (max-width: 1024px) {
  #Example .example_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  #Example {
    padding-bottom: 40px;
  }

  #Example h3 {
    font-size: 18px;
  }

  #Example .example_list {
    grid-template-columns: 1fr;
  }
}

.ft_banner {
  padding: 50px 0 70px;
  background: #fff;
}

.ft_banner .ft_banner_wrap {
  width: var(--width-content);
  margin: 0 auto;
  line-height: normal;
}

.ft_banner .ft_banner_wrap p {
  font-size: 24px;
  text-align: center;
}

.ft_banner .ft_banner_wrap .ct_area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 45px;
  margin-top: 30px;
}

.ft_banner .ft_banner_wrap .ct_area a {
  display: block;
}

.ft_banner .ft_banner_wrap .ct_area a:hover {
  transform: scale(1.05);
  opacity: .8;
}

@media screen and (max-width: 767px) {
  .ft_banner {
    padding: 30px 0;
  }

  .ft_banner .ft_banner_wrap p {
    font-size: 18px;
  }

  .ft_banner .ft_banner_wrap .ct_area {
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
  }


}