@charset "utf-8";
#main_visual {
  background: #fff url(../images/mv-bgi_pc.png) no-repeat center top / cover;
}
#main_visual .wrap {
  text-align: center;
  padding: 5vw 0 9.5vw;
}
#main_visual .wrap img {
  width: 100%;
  max-width: 100%;
}

#about {
  background: #fff;
}
#about .wrap {
  padding: 0 0 150px;
}
#about h2 {
  width: 100%;
  max-width: 622px;
  text-align: center;
  margin: 0 auto 50px;
}
#about p.lead {
  text-align: center;
  font-size: 26px;
  line-height: 2em;
  font-weight: 500;
}
#about .cts_box {
  max-width: 1190px;
  margin: 150px auto 0;
}

#merit {
  background: #ADDEF8 url(../images/merit-bgi.png) no-repeat top center / 1920px auto;
}
#merit .cts_header {
  width: 100%;
  margin: 0 0 50px;
}
#merit h2 {
  width: 90%;
  max-width: 730px;
  text-align: center;
  margin: 0 auto;
  padding-top: 150px;
}
#merit .cts_wrap > h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 90%;
  max-width: 1260px;
  text-align: center;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-top: 2px solid #2EA7E0;
  border-left: 2px solid #2EA7E0;
  border-right: 2px solid #2EA7E0;
  color: #000;
  font-size: 36px;
  line-height: 1.6em;
  font-weight: 500;
  position: relative;
}
#merit .cts_wrap > h3:after {
  content: '';
  width: 100vw;
  height: 38px;
  background: #2EA7E0;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%,100%);

}
#merit .cts_block .wrap {
  margin-top: 38px;
  padding: 50px 0 150px;
}
#merit .merit01 .cts_block {
  background: #ADDEF8;
}
#merit .merit02 .wrap {
  padding-bottom: 112px;
}
#merit .merit02 .cts_block {
  background: #A2D7DD;
}
#merit .merit02 > h3 {
  border-color: #A2D7DD;
}
#merit .merit02 > h3:after {
  background: #24B597;
}
#merit .btnBox {
  margin-top: 150px;
}
.col-3 {
  justify-content: center;
  gap: 40px 32px;
}
.col-3 .col {
  width: calc((100% - 32px*2)/3);
}
#merit .cts_block h3 {
  width: calc(100% - 40px);
  text-align: center;
  color: var(--mainColor);
  font-size: 50px;
  line-height: 1em;
  font-weight: 800;
  margin: 0 auto 50px;
  border-left: 20px solid var(--mainColor);
  border-right: 20px solid var(--mainColor);
}
#merit .merit02 .cts_block h3 {
  border: none;
}
#merit .cts_block p {
  text-align: center;
  font-size: 24px;
  line-height: 2em;
  font-weight: 400;
  margin: 0 0 150px;
  word-break: keep-all; 
  overflow-wrap: anywhere;
}
#merit .cts_block .caution {
  font-size: 16px;
  line-height: 2em;
  font-weight: 400;
}

#features {
  background: #A2D7DD url(../images/features-bgi.png) no-repeat top center / 1920px auto;
}
#features .wrap {
  padding: 40px 0 80px;
  position: relative;
}
#features h2 {
  width: 720px;
  margin: 0 0 0 auto;
}
#features .cts {
  width: 100%;
  max-width: 1140px;
  margin: -60px 0 0 0;
}

/* ========================================================================================================
   1349px以下
   ========================================================================================================*/
@media screen and (max-width: 1349px) {
  #features {
    background: #A2D7DD url(../images/features-bgi.png) no-repeat top center / cover;
  }
  #features h2 {
    width: 54%;
  }
  #features .cts {
    max-width: 96%;
    margin: -3% 0 0 0;
  }

}

/* ========================================================================================================
   767px以下
   ========================================================================================================*/
@media screen and (max-width: 767px) {
  #main_visual {
    background: #fff url(../images/mv-bgi_sp.png) no-repeat center top / 100% auto;
  }
  #main_visual .wrap {
    width: 94%;
    padding: 8% 0 0;
  }
  
  #about {
    overflow: hidden;
  }
  #about h2 {
    margin: 0 0 24px;
  }
  #about p.lead {
    text-align: left;
    font-size: 3.38vw;
    line-height: 2em;
    font-weight: 500;
  }
  #about .cts_box {
    margin: 24px auto 0;
  }
  #about .cts_box.details {
    width: calc(100vw + 60px);
    margin: 24px calc(-5% - 30px) 0;
  }
  #about .wrap {
    padding: 0 0 calc(100vw / 100 * 8);
  }
  #merit {
    background: #ADDEF8 url(../images/merit-bgi_sp.png) no-repeat top center / 100% auto;
  }
  #merit h2 {
    width: 90%;
    padding-top: 0;
  }
  #merit h2 img {
    width: 100%;
  }
  #merit .cts_wrap > h3 span {
    width: 12vw;
  }
  #merit .cts_wrap > h3 {
    justify-content: flex-start;
    text-align: left;
    font-size: 5vw;
    line-height: 1.4em;
  }
  #merit .cts_block p {
    text-align: left;
    font-size: 3.38vw;
    margin: 0 0 calc(100vw / 100 * 6);
    word-break: inherit;
    overflow-wrap: inherit;
  }
  #merit .cts_block .caution {
    font-size: 2.6vw;
  }
  #merit .cts_block .wrap {
    margin-top: 16px;
    padding: calc(100vw / 100 * 6) 0 calc(100vw / 100 * 10);
  }
  #merit .cts_wrap > h3:after {
    height: 16px;
  }
  .sp_col-1 .col {
    width: 100%;
  }
  #merit .btnBox {
    margin-top: 35px;
  }
  #merit .cts_block h3 {
    width: 100%;
    font-size: 6.8vw;
    line-height: 1.4em;
    margin: 0 auto calc(100vw / 100 * 5);
    border-left: 10px solid var(--mainColor);
    border-right: 10px solid var(--mainColor);
  }
  #merit .merit01 .cts_block {
    overflow: hidden;
  }
  .scrl_wrap {
    width: 100vw;
    margin: 0 -5%;
    padding-bottom: 10px;
    overflow: scroll;
  }
  .scrl_wrap .scrl_cts {
    padding: 0 5%;
    width: 768px;
  }
  #features {
    background: #A2D7DD url(../images/features-bgi_sp.png) no-repeat top center / cover;
  }
  #features h2 {
    width: 100%;
    margin-top: 6vw;
  }
  #features .cts {
    max-width: 100%;
    margin: 26% 0 0 0;
  }

}