@charset "utf-8";
@media screen and (max-width: 1536px) {}

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

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

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

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

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

/* ==============================
#mainarea
============================== */
#mainarea {
  margin: 0 40px 50px;
  border-radius: 30px;
  height: 552px;
  background: url(../images/services/mainimg_services.png) no-repeat;
  background-size: cover;
}

.mainareaBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.mainareaBox .img {
  width: 40%;
  /* height: 458px; */
  flex-shrink: 0;
  margin-right: 50px;
  overflow: hidden;
}

.mainareaBox .img img {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  /* height: 100%; */
  object-fit: cover;
  border-radius: 30px;
  border: 4px #FFF solid;
  box-shadow: 0px 30px 30px 0px rgba(15, 66, 113, 0.30);
}

.mainareaBox .imgsp {
  display: none;
}

.mainareaBox .txts {
  width: 40%;
  flex-shrink: 0;
}

.mainareaBox .txts .sub {
  color: #FFFFFF;
  font-size: 2.4rem;
  border-radius: 5px;
  width: fit-content;
  font-weight: 700;
  line-height: 1.2;
  padding: 10px 15px;
  margin-bottom: 15px;
  background-image: linear-gradient(90deg, rgba(30, 171, 220, 1), rgba(20, 90, 167, 1) 50%, rgba(38, 174, 57, 1));
}

.mainareaBox .txts .ttl {
  color: #FFFFFF;
  font-size: clamp(4.0rem, 2.9vw, 6.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
  font-feature-settings: "palt";
}

.mainareaBox .txts .iconBox {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
}

.mainareaBox .txts .icons img {
  width: auto;
}

.mainareaBox .txts .links {
  display: flex;
  justify-content: space-between;
}

.mainareaBox .txts .btn02 {
  width: 48%;

}

.mainareaBox .txts .btn02 a {
  display: flex;
  width: 100%;
  height: 70px;
  padding: 0 15px 0 20px;
  font-size: 1.6rem;
  border-radius: 35px;

}

.mainareaBox .txts .btn02 a:hover {
  opacity: 1;
}

.mainareaBox .txts .btn02 a span {
  background: linear-gradient(90deg, #1eabdb 0%, #0b487f 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;

}

.mainareaBox .txts .btn02 a:hover span {
  background: linear-gradient(90deg, #FFF 0%, #FFF 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

@media screen and (max-width: 1330px) {
  #mainarea {
    margin: 0 20px 50px;
  }

  .mainareaBox .img {
    width: 45%;
  }

  .mainareaBox .txts {
    width: 45%;
  }
}

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

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

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

  #mainarea {
    margin: 0 5px 25px;
    border-radius: 15px;
    height: auto;
    background: url(../images/services/mainimg_services_sp.png) no-repeat;
    background-size: cover;
    padding-bottom: 35px;
  }

  .mainareaBox {
    align-items: flex-start;
  }

  .mainareaBox .img {
    display: none;
  }

  .mainareaBox .imgsp {
    display: block;
    width: 96%;
    margin: 0 auto 20px;
    text-align: center;
  }

  .mainareaBox .imgsp img {
    width: 100%;
    aspect-ratio: 1.6 / 1;
    object-fit: cover;
    /* height: 100%; */
    border-radius: 15px;
    border: 2px #FFF solid;
    margin: 0 auto;
  }

  .mainareaBox .txts {
    width: 100%;
    order: 1;
    padding: 30px 10px 20px;
  }

  .mainareaBox .txts .sub {
    color: #FFFFFF;
    font-size: 1.6rem;
    border-radius: 2.5px;
    padding: 7px 15px;
    margin: 0 auto 8px;
  }

  .mainareaBox .txts .ttl {
    font-size: 3.7rem;
    text-align: center;
    margin-bottom: 15px;

  }

  .mainareaBox .txts .iconBox {
    width: 100%;
    gap: 10px;
    margin: 0 auto 20px;
    justify-content: center;
  }

  .mainareaBox .txts .icons {
    width: 45%;
  }

  .mainareaBox .txts .icons img {
    width: 100%;
  }

  .mainareaBox .txts .btn02 {
    width: 80%;
    margin: 0 auto;
  }

  .mainareaBox .txts .btnon .btn02 {
    width: 48%;
    margin: 0 auto;
  }

  .mainareaBox .txts .btn02 a {
    width: 100%;
    height: 50px;
    padding: 0 8px 0 6%;
    font-size: 1.3rem;
    border-radius: 25px;
    line-height: 1.5;
  }
}


/* ==============================
        leadtext
  ============================== */
.leadtext {
  text-align: center;
  margin-bottom: 50px;
  line-height: 1.8;
}

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

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

@media screen and (max-width: 767px) {
  .leadtext {
    text-align: left;
    margin-bottom: 30px;
    padding: 0 10px;
  }
}

/* ==============================

============================== */
#links {
  background: #0b487e;
}

#links a {
  color: #FFFFFF;
}

#links ul {
  display: flex;
}

#links ul li {
  width: calc(100%/6);
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-right: 1px solid;

  border-image: linear-gradient(to bottom, #0b487e 0%, #0b487e 10%, #37668f 11%, #37668f 89%, #0b487e 90%, #0b487e 100%) 1;
  position: relative;
}

#links ul li:first-child {
  border-left: 1px solid;
}

#links ul li::after {
  font-family: "Font Awesome 5 Free";
  content: "\f063";
  font-size: 1.2rem;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  margin-right: 12px;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  bottom: 0;
  right: 12px;
  margin: auto;
  color: #FFFFFF;
}

#links ul li a {
  font-size: 1.6rem;
  padding: 3px 35px 3px 20px;
  font-feature-settings: "palt";
}

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

  #links ul li a {
    font-size: 1.4rem;
    padding: 3px 20px 3px 20px;
  }
}

@media screen and (max-width: 767px) {
  #links ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  #links ul li {
    width: 49%;
    height: 60px;
    border-right: 0;
    border-bottom: 1px #37668f solid;
    border-image: linear-gradient(#37668f 0%, #37668f 100%) 1;
  }

  #links ul li:first-child {
    border-left: 0px solid;
  }

  #links ul li:nth-child(odd) {
    border-image: linear-gradient(#37668f 0%, #37668f 100%) 1;
  }

  #links ul li:nth-child(even) {
    border-image: linear-gradient(#37668f 0%, #37668f 100%) 1;
  }

  #links ul li:nth-last-child(-n + 2) {
    border-bottom: none;
  }

  #links ul li a {
    font-size: 1.4rem;
    padding: 3px 20px 3px 5px;
  }

  #links ul li::after {
    margin-right: 0px;
    width: 12px;
    height: 12px;
    right: 5px;
  }
}

/* ==============================
 worries
  ============================== */
#worries {
  background: linear-gradient(to right, #0b487e, #1eaddd);
  position: relative;
}

#worries::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: -25px;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 25px solid #147aad;
  border-bottom: 0;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
}

#worries .inner {
  padding: 115px 0;
}

#worries .wttl {
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #FFF;
}

#worries .wttl span {
  font-size: 4.4rem;
  text-decoration: underline;
}

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

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

@media screen and (max-width: 767px) {
  #worries .inner {
    padding: 35px 0;
  }

  #worries .wttl {
    font-size: 2.1rem;
    margin-bottom: 20px;

  }

  #worries .wttl span {
    font-size: 3.2rem;

  }

  #worries::before {
    bottom: -15px;
    border-top: 15px solid #147aad;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
  }


}

/* ==============================
        worriesWrap
  ============================== */
.worriesWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.worriesWrap .worriesBox {
  background: #FFF;
  width: calc((100% - 30px) / 3);
  border-radius: 10px;
  padding: 30px;
}

.worriesWrap .worriesBox .ttl {
  color: #0b487e;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  line-height: 1.2;
  padding-left: 72px;
  min-height: 60px;
  display: flex;
  align-items: center;
}

.worriesWrap .worriesBox .ttl::before {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  background: url(../images/services/ico_worristtl01.png) no-repeat left top / 100%;
  top: 0;
  left: 0;
}


.worriesWrap .worriesBox .txt {
  color: #111;
  font-size: 1.6rem;
}


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

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

@media screen and (max-width: 767px) {
  .worriesWrap {
    gap: 10px;
  }

  .worriesWrap .worriesBox {
    width: 100%;
    border-radius: 5px;
    padding: 15px;
  }

  .worriesWrap .worriesBox .ttl {
    font-size: 1.9rem;
    margin-bottom: 10px;
    padding-left: 57px;
    min-height: 45px;
  }

  .worriesWrap .worriesBox .ttl::before {
    width: 45px;
    height: 45px;

  }

  .worriesWrap .worriesBox .txt {
    font-size: 1.2rem;
  }
}

/* ==============================
        solution
  ============================== */
#solution {
  background: #eff4f6;
}

.solutionbox {
  padding: 50px 0 50px 170px;
  width: fit-content;
  margin: 0 auto;
  position: relative;
}

.solutionbox::before {
  position: absolute;
  content: "";
  width: 142px;
  height: 212px;
  background: url(../images/services/img_solution01.png) no-repeat left top / 100%;
  top: -10px;
  left: 0;
}

.solutionbox .txt {
  color: #0b487e;
  font-size: 3.2rem;
  font-weight: 700;
}

.solutionbox .txt span {
  color: #1eaddd;
  font-size: 4.2rem;
  text-decoration: underline;
}

.solutionbox .txt img {
  width: 241px;
  display: inline-block;
  vertical-align: -10px;
}

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

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

@media screen and (max-width: 767px) {
  .solutionbox {
    padding: 25px 0 26px 95px;
  }

  .solutionbox::before {
    width: 80px;
    height: 119px;
    top: 25px;
    left: 0px;
  }

  .solutionbox .txt {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .solutionbox .txt span {
    font-size: 3.0rem;
  }

  .solutionbox .txt img {
    width: 141px;
    vertical-align: -5px;
  }


}


/* ==============================
common
  ============================== */
.services .iconttl {
  font-size: 1.6rem;
  color: #0b487e;
  margin-bottom: 2px;
  position: relative;
  padding: 5px 0 0 40px;
}

.services .iconttl::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../images/common/ico_logo01.png) no-repeat left top / contain;
  position: absolute;
  top: 0px;
  left: 0px;
}

.services .h2txt {
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.services .ttltxt {
  font-size: 1.6rem;
  line-height: 1.8;
}
@media screen and (max-width: 1080px) {
.services .h2txt {
    font-size: 3.4rem;
  }
}
@media screen and (max-width: 767px) {
  .services .iconttl {
    font-size: 1.2rem;
    margin-bottom: 2px;
    padding: 5px 0 0 33px;
  }

  .services .iconttl::before {
    width: 23px;
    height: 23px;
    background: url(../images/common/ico_logo01.png) no-repeat left top / 100%;
    top: 0px;
    left: 0px;
  }

  .services .h2txt {
    font-size: 2.5rem;
  }

  .services .ttltxt {
    font-size: 1.4rem;
  }
}

/* ==============================
features
  ============================== */
#features {
  background: url(../images/services/bg_c01.png) no-repeat left bottom;
}

#features .inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 74px 0;
}

#features .inner .ttls {
  position: sticky;
  top: 140px;
  left: 0;
  margin-right: 50px;
  width: 26%;
  flex-shrink: 0;
}

#features .inner .ttls .h2txt {
  margin-bottom: 30px;
}

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

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

@media screen and (max-width: 767px) {
  #features {
    background-size: 65%;
  }

  #features .inner {
    flex-wrap: wrap;
    padding: 50px 0;
  }

  #features .inner .ttls {
    position: relative;
    top: 0;
    margin-right: 0;
    width: 100%;
  }

  #features .inner .ttls .h2txt {
    margin-bottom: 20px;
  }


}

/* ==============================
features
  ============================== */
#features .inner .txts {
  padding-top: 28px;
  width: 70%;
}

#features .featuresBox {
  margin-bottom: 15px;
  border-bottom: 1px #cccccc solid;
}

#features .featuresBox .ttl {}

#features .featuresBox .ttl {
  cursor: pointer;
  font-size: 2.0rem;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  padding-left: 75px;
  background: url(../images/services/ico_plus01.png) no-repeat 98% center;
}

#features .featuresBox .ttl.active {
  background: url(../images/services/ico_minus01.png) no-repeat 98% center;
}


#features .featuresBox .txt {
  display: none;
  font-size: 1.6rem;
  line-height: 1.8;
  padding-bottom: 25px;
}

#features .featuresBox .ttl::before {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0px;
  left: 0px;
}

#features .featuresBox .po01::before {
  background: url(../images/services/ico_point01.png) no-repeat left top;
}

#features .featuresBox .po02::before {
  background: url(../images/services/ico_point02.png) no-repeat left top;
}

#features .featuresBox .po03::before {
  background: url(../images/services/ico_point03.png) no-repeat left top;
}

#features .featuresBox .po04::before {
  background: url(../images/services/ico_point04.png) no-repeat left top;
}

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

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

@media screen and (max-width: 767px) {
  #features .inner .txts {
    padding-top: 30px;
    width: 100%;
  }

  #features .featuresBox {
    margin-bottom: 20px;
  }

  #features .featuresBox .ttl {
    font-size: 1.6rem;
    margin-bottom: 20px;
    height: 38px;
    padding-left: 47px;
    padding-right: 40px;
  }

  #features .featuresBox .txt {
    font-size: 1.4rem;
    padding-bottom: 20px;
  }

  #features .featuresBox .ttl::before {
    width: 38px;
    height: 38px;
  }

  #features .featuresBox .po01::before {
    background-size: 100%;
  }

  #features .featuresBox .po02::before {
    background-size: 100%;
  }

  #features .featuresBox .po03::before {
    background-size: 100%;
  }

  #features .featuresBox .po04::before {
    background-size: 100%;
  }
}

/* ==============================
service
  ============================== */
#service {
  background: #eff4f6;
  padding: 80px 0 210px;
}

#service .iconttlWrap,
#service .ttlBox {
  text-align: center;
  justify-content: center;
  margin-bottom: 30px;
}

#service .iconttl {
  display: inline-block;
}

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

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

@media screen and (max-width: 767px) {
  #service {
    padding: 48px 0 140px;
  }

  #service .iconttlWrap,
  #service .ttlBox {
    margin-bottom: 10px;
  }
}

/* ==============================
comment
============================== */
#service .comment {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 45px;
}

#service .comment .img {
  width: 90px;
  margin-right: 22px;
  flex-shrink: 0;
}

#service .comment .txts {
  font-size: 1.6rem;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  #service .comment {
    padding: 9px;
    margin-bottom: 25px;
    align-items: flex-start;
  }

  #service .comment .img {
    width: 53px;
    margin-right: 10px;

  }

  #service .comment .txts {
    font-size: 1.4rem;
  }
}

/* ==============================
#service
  ============================== */
#service .nav {}

#service .nav ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 23px;
  gap: 0.5%;
}

#service .nav ul li {
  width: 33%;
  background: #0b487e;
  margin-bottom: 25px;
  height: 60px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  position: relative;
}

#service .nav ul li::after {
  font-family: "Font Awesome 5 Free";
  content: "\f063";
  font-size: 1.2rem;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  margin-right: 12px;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  bottom: 0;
  right: 17px;
  margin: auto;
  color: #FFFFFF;
}

#service .nav ul li a {
  display: block;
  width: 100%;
  border-radius: 5px;
  color: #FFF;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 15px 20px 15px 27px;
}

@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1080px) {
#service .nav ul li a {
    padding: 15px 30px 15px 27px;
  }
}
@media screen and (max-width: 1024px) {}

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

  #service .nav ul li {
    width: 49%;
    margin-bottom: 6px;
    height: auto;
    min-height: 55px;
  }

  #service .nav ul li a {
    font-size: 1.2rem;
    padding: 10px;
    padding-right: 25px;
  }

  #service .nav ul li::after {

    font-size: 1.0rem;
    margin-right: 0px;
    width: 10px;
    height: 10px;
    right: 10px;
  }
}

/* ==============================
serviceBox
  ============================== */
.serviceBox {
  background-color: #FFF;
  box-shadow: 0px 0px 20px 0px rgba(15, 66, 113, 0.16);
  margin-bottom: 30px;
  padding: 40px;
}

.serviceBox .ttl {
  font-size: 3.2rem;
  font-weight: 700;
  color: #0b487e;
  padding-bottom: 15px;
  margin-bottom: 18px;
  border-bottom: 1px #CCC solid;
  position: relative;
  padding-left: 50px;
}

.serviceBox .ttl::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../images/common/ico_logo01.png) no-repeat left top / contain;
  position: absolute;
  top: 13px;
  left: 0px;
}

.serviceBox .txt {
  font-size: 1.6rem;
  ;
}

.readmore {
  background: #eff4f6;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  cursor: pointer;
  color: #0b487e;
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 30px;

}

.readmore:before {}

.readmore.on-click:before {
  transform: rotate(180deg);
}

.readmore .open {
  display: block;
  background: url(../images/services/ico_open01.png) no-repeat left center;
  padding: 5px 0 5px 40px;
}

.readmore.on-click .open {
  display: none;
}

.readmore .close {
  display: none;
}

.readmore.on-click .close {
  display: block;
  background: url(../images/services/ico_close01.png) no-repeat left center;

  padding: 5px 0 5px 40px;
}

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

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

@media screen and (max-width: 767px) {
  .serviceBox {
    margin-bottom: 15px;
    padding: 25px 15px;
  }

  .serviceBox .ttl {
    font-size: 2.2rem;
    padding-left: 30px;
  }

  .serviceBox .ttl::before {
    width: 20px;
    height: 20px;
    background: url(../images/common/ico_logo01.png) no-repeat left top /100%;
    top: 8px;
  }

  .serviceBox .txt {
    font-size: 1.4rem;
    ;
  }

  .readmore {
    height: 40px;
    margin-top: 25px;

  }

  .readmore .open {
    background: url(../images/services/ico_open01.png) no-repeat left center /20px;
    padding: 5px 0 5px 33px;
  }

  .readmore.on-click .close {
    background: url(../images/services/ico_close01.png) no-repeat left center/20px;
    padding: 5px 0 5px 33px;
  }


}

/* ==============================
    case
  ============================== */
#case {
  position: relative;
}

#case .sideimg {
  position: absolute;
  top: -110px;
  right: 0;
  width: 50%;
}

#case .inner {
  padding: 45px 0 100px;
}

#case .inner .h2txt {
  margin-bottom: 30px;
}

#case .inner .ttlBox {
  margin-bottom: 30px;
}

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

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

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

@media screen and (max-width: 767px) {
  #case .sideimg {
    margin-left: auto;
    top: -120px;
    right: 0;
    width: 90%;
  }

  #case .inner {
    padding: 140px 0 60px;
  }

  #case .inner .h2txt {
    margin-bottom: 22px;
  }

  #case .inner .ttlBox {
    margin-bottom: 22px;
  }
}

/* ==============================
 caseWrap
  ============================== */
.caseWrap {
  margin-bottom: 40px;
}

.caseWrap .caseTtl {
  display: flex;
  height: 60px;
  align-items: center;
  padding-left: 123px;
  font-size: 2.4rem;
  font-weight: 700;
  color: #FFF;
  position: relative;
  height: 78px;
  background: linear-gradient(to right, #0b487e, #1eaddd);
}

.caseWrap .caseTtl::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background: url(../images/services/ico_case01.png) no-repeat left center;
  position: absolute;
  top: -10px;
  left: 27px;
}

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

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

@media screen and (max-width: 767px) {
  .caseWrap {
    margin-bottom: 23px;
  }

  .caseWrap .caseTtl {
    height: 67px;
    padding-left: 60px;
    padding-right: 15px;
    font-size: 2.0rem;
    line-height: 1.2;
  }

  .caseWrap .caseTtl::before {
    width: 40px;
    height: 40px;
    background: url(../images/services/ico_case01.png) no-repeat left center/100%;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 12px;
  }
}

/* ==============================
caseBox
  ============================== */
.caseBox {
  display: flex;
}

.caseBox .ttl {
  background: #edf4f7;
  border-left: 1px #d3dae1 solid;
  border-bottom: 1px #d3dae1 solid;
  padding: 30px 20px;
  color: #0b487e;
  font-size: 1.8rem;
  font-weight: 700;
  width: 30%;
  display: flex;
  align-items: center;
}

.caseBox .txt {
  background: #FFF;
  border-left: 1px #d3dae1 solid;
  border-right: 1px #d3dae1 solid;
  border-bottom: 1px #d3dae1 solid;
  padding: 30px 20px;
  font-size: 1.6rem;
  width: 70%;
}


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

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

@media screen and (max-width: 767px) {
  .caseBox {
    flex-wrap: wrap;
  }

  .caseBox .ttl {
    padding: 15px;
    width: 100%;
  }

  .caseBox .txt {
    padding: 15px;
    font-size: 1.4rem;
    width: 100%;
  }
}

/* ==============================
service
  ============================== */
#price {
  background: url(../images/services/bg_c02.png) no-repeat right top, #eff4f6;
  padding: 120px 0 120px;
}

#price .inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#price .inner .ttls {
  position: sticky;
  top: 140px;
  left: 0;
  margin-right: 50px;
  width: 26%;
  flex-shrink: 0;
}

#price .inner .ttls .h2txt {
  margin-bottom: 30px;
}

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

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

@media screen and (max-width: 767px) {
  #price {
    background: url(../images/services/bg_c02sp.png) no-repeat right top, #eff4f6;
    padding: 50px 0;
  }

  #price .inner {
    flex-wrap: wrap;
  }

  #price .inner .ttls {
    position: relative;
    top: 0px;
    margin-right: 0px;
    width: 100%;
  }

  #price .inner .ttls .h2txt {
    margin-bottom: 20px;
  }

  #price .inner .ttls .ttltxt {
    margin-bottom: 20px;
  }


}

/* ==============================
txts
  ============================== */
#price .inner .txts {
  background-color: #FFF;
  box-shadow: 0px 0px 20px 0px rgba(15, 66, 113, 0.16);
  margin-bottom: 30px;
  padding: 40px;
  width: 70%;
  border-radius: 20px;
}

#price .inner .txts h3 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0b487e;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px #d3dae1 solid;
}

#price .inner .txts img {
  width: auto;
  height: auto;
}

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

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

@media screen and (max-width: 767px) {
  #price .inner .txts {
    margin-bottom: 0px;
    padding: 30px 13px;
    width: 100%;
    border-radius: 10px;
  }

  #price .inner .txts h3 {
    font-size: 2.0rem;
    padding-bottom: 10px;
    margin-bottom: 15px;
  }
}


/* ==============================
flow
  ============================== */
#flow {
  padding: 95px 0 72px;
}

#flow .iconttlWrap,
#flow .ttlBox {
  text-align: center;
  justify-content: center;
  margin-bottom: 35px;
}

#flow .iconttl {
  display: inline-block;
}

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

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

@media screen and (max-width: 767px) {
  #flow {
    padding: 50px 0 72px;
  }

  #flow .iconttlWrap {
    margin-bottom: 15px;
  }

  #flow .ttlBox {
    margin-bottom: 25px;
  }
}

/* ==============================
flowBox
  ============================== */
.flowBox {
  padding: 32px 35px;
  border-radius: 10px;
  background: #edf4f7;
  display: flex;
}

.flowBox .ttl {
  position: relative;
  font-size: 2.4rem;
  font-weight: 700;
  color: #0b487e;
  padding-left: 90px;
  display: flex;
  align-items: center;
  width: 28%;
  margin-right: 2%;
}

.flowBox .ttl::before {
  content: "";
  width: 47px;
  height: 45px;
  position: absolute;
  top: 0px;
  left: 0px;
}

.flowBox .st01::before {
  background: url(../images/services/ico_step01.png) no-repeat left top;
}

.flowBox .st02::before {
  background: url(../images/services/ico_step02.png) no-repeat left top;
}

.flowBox .st03::before {
  background: url(../images/services/ico_step03.png) no-repeat left top;
}

.flowBox .st04::before {
  background: url(../images/services/ico_step04.png) no-repeat left top;
}

.flowBox .txt {
  width: 70%;
  font-size: 1.6rem;
}

.tra {
  padding: 9px 0;
  text-align: center;
}

.tra img {
  margin: 0 auto;
  width: auto;
}

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

@media screen and (max-width: 980px) {
.flowBox .ttl {
    font-size: 2.0rem;
  }

}

@media screen and (max-width: 767px) {
  .flowBox {
    padding: 17px;
    border-radius: 5px;
    flex-wrap: wrap;
  }

  .flowBox .ttl {
    font-size: 2.0rem;
    padding-left: 43px;
    width: 100%;
    margin-bottom: 13px;
  }

  .flowBox .ttl::before {
    width: 33px;
    height: 30px;
    top: 0px;
  }

  .flowBox .st01::before {
    background-size: 100%;
  }

  .flowBox .st02::before {
    background-size: 100%;
  }

  .flowBox .st03::before {
    background-size: 100%;
  }

  .flowBox .st04::before {
    background-size: 100%;
  }

  .flowBox .txt {
    width: 100%;
  }


}

/* ==============================
faq
============================== */

#faq {
  background: linear-gradient(to right, #0b487e 50%, #1eaddd 100%);
  padding: 100px 0;
  border-radius: 30px 30px 0 0;
}

#faq .inner {
  padding: 40px;
  border-radius: 10px;
  background: #FFF;
}

#faq .iconttlWrap,
#faq .ttlBox {
  text-align: center;
  justify-content: center;
}

#faq .iconttlWrap {
  margin-bottom: 15px;
}

#faq .ttlBox {
  margin-bottom: 25px;
}

#faq .iconttl {
  display: inline-block;
}

media screen and (max-width: 1280px) {}

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

@media screen and (max-width: 767px) {
  #faq {
    padding: 50px 0;
  }

  #faq .inner {
    padding: 16px 12px;
    border-radius: 5px;
  }

  #faq .ttlBox {
    margin-bottom: 28px;
  }
}

/* ==============================
faq
============================== */
#faq .faqBox {
  margin-bottom: 20px;
}

#faq .faqBox .q01 {
  color: #0b487e;
  border-radius: 10px;
  padding: 10px 0 10px 20px;
  border-radius: 10px;
  min-height: 90px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-size: 2.4rem;
  font-weight: 700;
  background: url(../images/services/ico_plus02.png) no-repeat 98% center, #eff4f6;
  cursor: pointer;
}

#faq .faqBox .q01.active {
  background: url(../images/services/ico_minus02.png) no-repeat 98% center;
}

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

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

@media screen and (max-width: 767px) {
  #faq .faqBox {
    margin-bottom: 10px;
  }

  #faq .faqBox .q01 {
    border-radius: 5px;
    min-height: 78px;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 1.8rem;
  }
}

/* ==============================
faq
============================== */
#faq .faqBox .q01::before {
  font-family: "Lexend Giga", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400 !important;
  font-style: normal;
  content: "Q";
  font-size: 2.4rem;
  background: #0b487e;
  color: #FFF;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  border-radius: 25px;
}

#faq .faqBox .a01 {
  display: none;
  padding: 25px 20px;
  margin-bottom: 15px;
  font-size: 1.6rem;
  line-height: 1.8;
}

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

  #faq .faqBox .q01::before {
    font-size: 1.5rem;
    height: 35px;
    width: 35px;
    margin-right: 15px;
    flex-shrink: 0;
  }

  #faq .faqBox .a01 {
    display: none;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 1.6rem;
  }
}

/* ==============================
connection
============================== */
#connection {}

#connection .inner {
  padding: 60px 0 125px;
}

#connection .cottl {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 36px;
  padding-left: 50px;
  position: relative;
}

#connection .cottl::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../images/common/ico_logo01.png) no-repeat left top / contain;
  position: absolute;
  top: 0px;
  left: 0px;
}


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

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

@media screen and (max-width: 767px) {
  #connection .inner {
    padding: 40px 0 70px;
  }

  #connection .cottl {
    font-size: 2.1rem;
    margin-bottom: 20px;
    padding-left: 33px;
  }

  #connection .cottl::before {
    width: 23px;
    height: 23px;
    background: url(../images/common/ico_logo01.png) no-repeat left top / 100%;
    top: 7px;
    left: 0px;
  }


}




/* ==============================
lineupWrap
============================== */
#connection .lineupWrap {
  margin-bottom: 58px;
}

#connection .lineupWrap ul {
  display: flex;
  gap: 1%;
}

#connection .lineupWrap ul li {
  width: calc(100%/4);
  border: 1px #d3dae1 solid;
  border-radius: 5px;
  padding: 15px;
  position: relative;
  padding-bottom: 60px;
}

#connection .lineupWrap ul li .img {
  margin-bottom: 20px;
}

#connection .lineupWrap ul li .img img {
  border-radius: 5px;
}

#connection .lineupWrap ul li .ttl {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
}

#connection .lineupWrap ul li .txt {
  font-size: 1.4rem;
  margin-bottom: 20px;
}
@media screen and (min-width: 767px) {
#connection .lineupWrap ul li .btn03 {
    position: absolute;
    display: block;
    width: calc(100% - 30px);
    bottom: 15px;
  }
}


@media screen and (max-width: 980px) {
  #connection .lineupWrap ul {
    flex-wrap: wrap;
  }

  #connection .lineupWrap ul li {
    width: 49%;

  }

}

@media screen and (max-width: 767px) {
  #connection .lineupWrap ul {
    display: flex;
    gap: 0;
  }

  #connection .lineupWrap ul li {
    width: 100%;
    padding: 13px 9px;
  }

  #connection .lineupWrap .lineupBox {
    display: flex;
    justify-content: space-between;
  }

  #connection .lineupWrap ul li .img {
    margin-bottom: 0px;
    width: 38%;
    margin-right: 10px;
    flex-shrink: 0;
  }

  #connection .lineupWrap ul li .ttl {
    font-size: 1.4rem;
    margin-bottom: 7px;
  }

  #connection .lineupWrap ul li .txt {
    font-size: 1.2rem;

  }

}


/* ==============================
footcv
============================== */
.footcv {
  border-radius: 10px;
  background: url(../images/services/bnr_footcv.png) no-repeat left top;
  padding: 50px 48px;
  display: flex;
  justify-content: space-between;
}

.footcv .txt {
  font-size: 3.0rem;
  font-weight: 700;
  color: #FFF;
  width: 70%;
}

.footcv .links {
  font-size: 3.0rem;
  font-weight: 700;
  color: #FFF;
  width: 20%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media screen and (max-width: 1350px) {
  .footcv {
      background: url(../images/services/bnr_footcv.png) no-repeat left top;
      padding: 30px 48px;
height: auto;
    }
}

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

@media screen and (max-width: 1080px) {
  .footcv .txt {
      font-size: 2.4rem;
      width: 60%;
    }
  }
@media screen and (max-width: 820px) {
  .footcv .txt {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .footcv {
    background: url(../images/services/bnr_footcv_sp.png) no-repeat left top/100%;
    padding: 30px 15px;
    flex-wrap: wrap;
  }

  .footcv .txt {
    font-size: 1.8rem;
    width: 100%;
    margin-bottom: 15px;
  }

  .footcv .links {
    font-size: 1.4rem;
    width: 100%;

  }

  .footcv .btn02 {
    width: 70%;
  }


}