@charset "UTF-8";

.serviceBg1 {
  background-image: url(../images/service/service_bg1.webp);
}

.serviceBg2 {
  background-image: url(../images/service/service_bg2.webp);
}

.serviceBg3 {
  background-image: url(../images/service/service_bg3.webp);
}

.serviceBg4 {
  background-image: url(../images/service/service_bg4.webp);
}

.serviceBg5 {
  background-image: url(../images/service/service_bg8.webp);
}

.serviceBg6 {
  background-image: url(../images/service/service_bg7.webp);
}

.serviceBg9 {
  background-image: url(../images/service/service_bg9.webp);
}

.serviceBg10 {
  background-image: url(../images/service/service_bg10.webp);
}

.serviceList1 {
  margin: 4em 0 0;
  padding: 4em 0 6.153846em;
  list-style: none;
  background-color: #E6F2EF;
}

.serviceList1 > li {
  margin: 4em auto 0;
  width: 89.74359%;
  background-color: #FFF;
  border-radius: 10px;
  padding: 3em 1.538462em;
  box-shadow: 0 0.76923em 0.76923em rgba(64, 64, 64, 0.16);
}

.serviceList1 > li:first-child {
  margin-top: 0;
}

.serviceTitleWrap {
  margin: 0 0 2em;
  padding: 0 0 11.5em;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 15.384615em auto;
}

.service01 {
  background-image: url(../images/service/service_img01.webp);
}

.service02 {
  background-image: url(../images/service/service_img02.webp);
}

.service03 {
  background-image: url(../images/service/service_img03.webp);
}

.service04 {
  background-image: url(../images/service/service_img04.webp);
}

.service05 {
  background-image: url(../images/service/service_img05.webp);
}

.service06 {
  background-image: url(../images/service/service_img06.webp);
}

.serviceTitleWrap > p {
  font-size: 1.230769em;
  font-weight: 700;
}

.serviceTitle {
  font-size: 1.692308em;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 0.75em;
}

.serviceTitle p {
  font-family: 'Jost', sans-serif;
  font-size: 0.818182em;
  font-weight: 500;
  margin-bottom: 0;
}

.serviceTitle .titleText {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  color: #0C7C66;
  position: relative;
}

.serviceTitle .titleText::after {
  content: '';
  display: block;
  width: 2.272727em;
  height: 1px;
  background-color: #0C7C66;
  margin: 0.75em 0 0;
}

.serviceList1 .linkButton1 {
  margin-top: 2em;
  text-align: center;
}

.serviceList1 .linkButton1 a {
  width: auto;
}

.serviceList1 .linkButton1 a span {
  padding-left: 1.646em;
  padding-right: 1.646em;
}

.serviceList1 .linkButton1 span::after {
  margin-left: 2em;
}

/* システム開発 */
.webSystemTop {
  max-width: 1500px;  
}
.subPageTitleWrap > p.webSystemTop {
  font-family: 'Noto Sans JP', sans-serif;
}
.webSystemTop span {
  display: block;
}
.webSystemTop .in-br {
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .serviceList1 {
    margin-top: 8em;
    padding-top: 0;
      background: url(../images/common/stripes_bg.svg) no-repeat center top;
      background-size: cover;
  }
  
  .serviceList1 > li {
    margin-top: 7.5em;
    width: 92.647059%;
    max-width: 1260px;
    padding: 5.625em 9.558824vw;
  }

  .serviceTitleWrap {
    margin-bottom: 2.5em;
    padding: 0 40% 0 0;
    background-position: right top;
    background-size: 24.264706vw auto;
    min-height: 15.294118vw;
  }

  .serviceList1 > li:nth-child(even) .serviceTitleWrap {
    background-position: left top;
    padding: 0 0 0 40%;
  }
  
  .serviceTitleWrap > p {
    font-size: 1.125em;
  }

  .serviceTitle {
    font-size: 1.75em;
  }
  
  .serviceTitle p {
    font-size: 0.857143em;
    margin-bottom: 0.25em;
  }
  
  .serviceTitle .titleText::after {
    width: 1.785714em;
  }

  .serviceList1 .linkButton1 {
    text-align: left;
    margin-top: 4em;
  }

  .serviceList1 > li:nth-child(even) .linkButton1 {
    text-align: right;
  }
}

@media screen and (min-width: 1360px) {
  .serviceList1 > li {
    padding-left: 8.125em;
    padding-right: 8.125em;
  }

  .serviceTitleWrap {
    padding-right: 22.625em;
    background-size: 20.625em auto;
    min-height: 13em;
  }

  .serviceList1 > li:nth-child(even) .serviceTitleWrap {
    padding-left: 35.625em;
  }
}

.sectionArea.noMarginBottom + .contactArea1 {
  margin-top: 0;
}

.checkList1 {
  margin: 0 auto 3.125em;
  padding: 0;
  list-style: none;
  max-width: 650px;
}

.checkList1.wide1 {
  max-width: 775px;
}

.checkList1.wide2 {
  max-width: 835px;
}

.checkList1 > li {
  font-size: 1.25em;
  font-weight: 700;
  border-bottom: 1px solid #707070;
  padding: 0 0.5em 0.5em 2.5em;
  margin: 0 0 0.5em;
  position: relative;
}

.checkList1.lineColor1 > li {
  border-color: #FFF;
}

.checkList1 > li::before {
  content: '\f00c';
  display: inline-block;
  line-height: 1;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0.5em;
  top: 0.5em;
}

.checkList1.bulletColor1 > li::before {
  color: #FFD95C;
}

.checkList1 > li:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .checkList1 > li {
    font-size: 1.375em;
  }

  .checkList1.wide1 > li {
    font-size: 1.25em;
  }
}

.dlItem1 {
  margin: 4em 0 0;
  background-color: #FFF;
  background-position: center 2.307692em;
  background-repeat: no-repeat;
  background-size: 13.846154em auto;
  padding: 17em 5.128205vw 2em;
  box-shadow: 0 0.76923em 0.76923em rgba(64, 64, 64, 0.16);
  border-radius: 10px;
}

.dlItem1:first-child {
  margin-top: 0;
}

.reason1 {
  background-image: url(../images/service/illustration_10.webp);
}

.reason2 {
  background-image: url(../images/service/illustration_11.webp);
}

.reason3 {
  background-image: url(../images/service/illustration_12.webp);
}

.dlItem1 > dt {
  text-align: center;
  color: #0C7C66;
  font-size: 1.538462em;
  font-weight: 700;
  margin: 0 0 0.75em;
}

.dlItem1 > dd {
  margin: 0;
}

@media screen and (min-width: 960px) {
  .dlList1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .dlItem1 {
    width: calc(50% - 2.5em);
    margin: 5em 0 0 5em;
    padding: 25em 3.488372vw 2em;
    background-position: center 2.5em;
    background-size: 20.625em auto;
  }

  .dlItem1:nth-child(2) {
    margin-top: 0;
  }

  .dlItem1 > .singleLine {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4em;
  }
}

@media screen and (min-width: 960px) and (max-width: 1359px) {
  .dlItem1:nth-child(2n+1) {
    margin-left: 0;
  }
}

@media screen and (min-width: 1360px) {
  .dlItem1 {
    width: calc(33.333333% - 3.333333em);
    margin: 5em 0 0 5em;
    padding-left: 3.75em;
    padding-right: 3.75em;
  }

  .dlItem1:nth-child(3) {
    margin-top: 0;
  }

  .dlItem1:nth-child(3n+1) {
    margin-left: 0;
  }
}

.dlItem2 {
  margin: 0 0 3.125em;
  padding: 2em 5.128205vw 18.461538em;
  background-color: #FFF;
  border-radius: 10px;
  box-shadow: 0 0.76923em 0.76923em rgba(64, 64, 64, 0.16);
  background-position: center bottom 2.3em;
  background-repeat: no-repeat;
  background-size: 13.846154em auto;
}

.dlItem2:last-child {
  margin-bottom: 0;
}

.point01 {
  background-image: url(../images/service/illustration_02.webp);
}

.point02 {
  background-image: url(../images/service/illustration_07.webp);
}

.point03 {
  background-image: url(../images/service/illustration_10.webp);
}

.dlItem2 > dt {
  color: #0C7C66;
  font-weight: 700;
  font-size: 1.538462em;
  margin: 0 0 0.75em;
}

.dlItem2 > dd {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .dlItem2 {
    padding: 3.125em 5.812953vw 25.75em;
    background-size: 20.625em auto;
  }

  .dlItem2 > dt {
    font-size: 1.5em;
  }
}

@media screen and (min-width: 1200px) {
  .dlItem2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: calc(22.625em + 5.812953vw);
    padding-bottom: 3.125em;
    background-position: right 5.812953vw center;
    min-height: 26.875em;
  }
}

@media screen and (min-width: 1720px) {
  .dlItem2 {
    padding-right: 31.25em;
    padding-left: 6.25em;
    background-position: right 6.25em center;
  }
}

@media screen and (max-width: 767px) {
  .flow01 .flowTitle {
    background-image: url(../images/service/illustration_01.webp);
  }
  
  .flow02 .flowTitle {
    background-image: url(../images/service/illustration_02.webp);
  }
  
  .flow03 .flowTitle {
    background-image: url(../images/service/illustration_03.webp);
  }
  
  .flow04 .flowTitle {
    background-image: url(../images/service/illustration_04.webp);
  }
  
  .flow05 .flowTitle {
    background-image: url(../images/service/illustration_09.webp);
  }

  .flow06 .flowTitle {
    background-image: url(../images/service/illustration_06.webp);
  }

  .flow07 .flowTitle {
    background-image: url(../images/service/illustration_07.webp);
  }

  .flow08 .flowTitle {
    background-image: url(../images/service/illustration_05.webp);
  }

  .flow09 .flowTitle {
    background-image: url(../images/service/illustration_08.webp);
  }
}

@media screen and (min-width: 768px) {
  .flowWrap1.flow01 {
    background-image: url(../images/service/illustration_01.webp);
  }
  
  .flowWrap1.flow02 {
    background-image: url(../images/service/illustration_02.webp);
  }
  
  .flowWrap1.flow03 {
    background-image: url(../images/service/illustration_03.webp);
  }
  
  .flowWrap1.flow04 {
    background-image: url(../images/service/illustration_04.webp);
  }
  
  .flowWrap1.flow05 {
    background-image: url(../images/service/illustration_09.webp);
  }

  .flowWrap1.flow06 {
    background-image: url(../images/service/illustration_06.webp);
  }

  .flowWrap1.flow07 {
    background-image: url(../images/service/illustration_07.webp);
  }

  .flowWrap1.flow08 {
    background-image: url(../images/service/illustration_05.webp);
  }

  .flowWrap1.flow09 {
    background-image: url(../images/service/illustration_08.webp);
  }
}

.faq1 {
  margin: 0 0 1.875em;
  padding: 0 0 1px;
  border-radius: 10px;
  background-color: #0C7C66;
}

.faq1:last-child {
  margin-bottom: 0;
}

.faqQ {
  display: flex;
  align-items: center;
  font-size: 1.230769em;
  font-weight: 500;
  margin: 0;
  position: relative;
  background: url(../images/service/faq_q.svg) no-repeat 1rem center;
  background-size: auto 1.75rem;
  padding: 1rem 3.9375rem 1em 4rem;
  min-height: 4.545455em;
  color: #FFF;
  cursor: pointer;
}

.faqQ::after {
  content: '';
  display: block;
  width: 1.9375rem;
  height: 1.25rem;
  background: url(../images/common/arrow_faq.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: calc(50% - 0.625rem);
  right: 1rem;
  transition: transform 0.2s ease-out;
}

.faqQ.opened::after {
  transform: rotate(180deg);
}

.faqA {
  margin: 0 1rem 1rem;
  padding: 1rem 1rem 1rem 4rem;
  background: #FFF url(../images/service/faq_a.svg) no-repeat 1rem center;
  background-size: auto 1.75rem;
  border-radius: 10px;
}

@media screen and (min-width: 768px) {
  .faqQ {
    font-size: 1.375em;
    padding-left: 7.5rem;
    padding-right: 7.5rem;
    background-position: 3.75rem center;
  }

  .faqQ::after {
    right: 3.75rem;
  }

  .faqA {
    margin: 0 3.75rem 2.25em;
    padding-left: 9rem;
    padding-right: 4.375rem;
    background-position: 3.75rem center;
  }
}

.blockList1 {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: 1.384615em;
  font-weight: 700;
}

.blockList1 > li {
  text-align: center;
  color: #0C7C66;
  box-shadow: 0 0.76923rem 0.76923rem rgba(64, 64, 64, 0.16);
  background-color: #FFF;
  margin: 0 auto 3.111111em;
  border-radius: 10px;
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 6.388889em;
  width: 16.111111em;
  position: relative;
}

.blockList1 > li:last-child {
  margin-bottom: 0;
}

.blockList1 small {
  font-size: 0.722222em;
  font-weight: 500;
}

.blockList1 > li::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.888889em 0.5em 0 0.5em;
  border-color: #0C7C66 transparent transparent transparent;
  margin: 1.111111em auto 0;
  position: absolute;
  left: calc(50% - 0.5em);
  bottom: -2em;
}

.blockList1 > li:last-child:after {
  display: none;
}

@media screen and (min-width: 768px) {
  .blockList1 {
    display: flex;
    flex-wrap: wrap;
    max-width: 36.888888em;
    font-size: 1.125em;
  }

  .blockList1 > li {
    margin: 1.6666665em;
    width: 15.111111em;
    min-height: 6.888889em;
  }

  .blockList1 > li:last-child {
    margin-bottom: 1.6666665em;
  }

  .blockList1 > li::after {
    border-width: 0.4444445em 0 0.4444445em 1em;
    border-color: transparent transparent transparent #0C7C66;
    left: calc(100% + 1.25em);
    bottom: calc(50% - 0.4444445em);
  }
}

@media screen and (min-width: 960px) {
  .blockList1 {
    max-width: 38.888888em;
  }

  .blockList1 > li {
    width: 16.111111em;
  }
}

@media screen and (min-width: 1260px) {
  .blockList1 {
    max-width: 58.333332em;
  }
}

@media screen and (min-width: 1560px) {
  .blockList1 {
    max-width: 77.777776em;
  }
}

.imgBg1 {
  background-image: url(../images/service/service_bg5.webp);
}

.imgBg2 {
  background-image: url(../images/service/service_bg6.webp);
}

.dlBlock2 {
  margin: 0 auto 2.307692em;
  background-color: #272727;
  border-radius: 10px;
  padding: 1.5em 1.538462em;
  text-align: center;
}

p + .dlBlock2 {
  margin-top: 3em;
}

.dlBlock2:last-child {
  margin-bottom: 0;
}

.dlBlock2 > dt {
  font-size: 1.230769em;
  font-weight: 500;
  margin: 0 0 0.25em;
}

.dlBlock2 > dd {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .dlBlock2 {
    margin-bottom: 1.5em;
    padding-left: 1.875em;
    padding-right: 1.875em;
  }

  p + .dlBlock2 {
    margin-top: 3.75em;
  }

  .dlBlock2 > dt {
    font-size: 1.125em;
  }

  .dlBlock2 > dd {
    font-size: 0.875em;
  }
}

@media screen and (min-width: 960px) {
  .dlBlock2 {
    max-width: 916px;
    display: flex;
    align-items: center;
    min-height: 3.75em;
    border-radius: 10em;
    text-align: left;
  }

  .dlBlock2 > dt {
    margin-bottom: 0;
    width: 22rem;
    padding-right: 0.5rem;
  }

  .dlBlock2 > dd {
    width: calc(100% - 22rem);
  }
}

.articleBlock1 {
  margin: 0 auto 4.5em;
  width: 89.74359%;
  max-width: 1260px;
  border-radius: 10px;
  background-color: #FFF;
  padding: 3em 1.538462em;
}

.articleBlock1:last-child {
  margin-bottom: 0;
}

.articleBgColor1 {
  background-color: #0C7C66;
  color: #FFF;
}

.articleHead1 {
  padding: 0 0 12.846154em;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 16.923077em auto;
  margin: 0 0 2.307692em;
}

.articleBg01 {
  background-image: url(../images/service/illustration_17.webp);
}

.articleBg02 {
  background-image: url(../images/service/illustration_18.webp);
}

@media screen and (min-width: 768px) {
  .articleBlock1 {
    margin-bottom: 6.25em;
    padding: 3.75em 4.651167vw;
  }

  .articleHead1 p {
    padding-left: 1.875em;
  }
}

@media screen and (min-width: 1260px) {
  .articleHead1 {
    padding-bottom: 0;
    padding-right: 28.125em;
    min-height: 14.375em;
    background-position: right 5.625em bottom;
    background-size: 17.4375em auto;
  }
}

@media screen and (min-width: 1720px) {
  .articleBlock1 {
    padding-left: 5em;
    padding-right: 5em;
  }
}

.dlList2 {
  margin: 0 auto;
}

.dlBlock3 {
  background-color: #0C7C66;
  color: #FFF;
  border-radius: 10px;
  margin: 0 0 2.307692em;
  padding: 1.538462em 5.128206vw;
}

.dlBlock3:last-child {
  margin-bottom: 0;
}

.dlBlock3 > dt {
  font-size: 1.692308em;
  font-weight: 500;
  margin: 0 0 0.5em;
  line-height: 1.5;
}

.dlBlock3 > dt span {
  font-size: 0.727273em;
}

.dlBlock3 > dd {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .dlList2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .dlBlock3 {
    max-width: 490px;
    width: calc(50% - 2.5em);
    margin: 2.5em 0 0 2.5em;
    padding: 1.875em;
  }

  .dlBlock3:nth-child(-n+2) {
    margin-top: 0;
  }

  .dlBlock3:nth-child(2n+1) {
    margin-left: 0;
  }

  .dlBlock3 > dt {
    font-size: 1.5em;
  }

  .dlBlock3 > dt span {
    font-size: 0.75em;
  }
}

.list2 {
  margin: 0 0 3em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.list2:last-child {
  margin-bottom: 0;
}

.list2 > li {
  font-size: 1.230769em;
  font-weight: 700;
  color: #0C7C66;
  line-height: 1.75;
  text-align: center;
  max-width: 8.75em;
  margin: 1em 0.375em 0;
  width: calc(50% - 0.75em);
}

.list2 > li:nth-child(-n+2) {
  margin-top: 0;
}

.figure1 {
  margin: 0;
}

.figure1 img {
  display: block;
  margin: 0 auto 1em;
}

@media screen and (min-width: 768px) {
  .list2 {
    margin-top: -2.1875em;
    margin-bottom: 1.5625em;
  }

  .list2 > li {
    font-size: 1.25em;
    max-width: none;
    margin: 1.75em;
    width: 11em;
  }

  .list2 > li:nth-child(-n+2) {
    margin-top: 1.75em;
  }
}

.textBlock2 {
  margin: 3.75em auto;
  padding: 0 5.128205vw;
  max-width: 1292px;
}

.textBlock2:first-child {
  margin-top: 0;
}

.textBlock2:last-child {
  margin-bottom: 0;
}

.checkListWrap .checkList1 {
  margin-bottom: 0;
}

.checkListWrap .checkList1 > li {
  border-color: #0C7C66;
  font-size: 1.384615em;
}

@media screen and (max-width: 1259px) {
  .checkListWrap .checkList1 > li:last-child {
    margin-bottom: 0.5em;
  }

  .checkListWrap .checkList1:last-child > li:last-child {
    margin-bottom: 0.5em;
  }
}

.figure2 {
  margin: 0 0 2em;
  line-height: 1;
  text-align: center;
}

.figure2 img {
  width: 20em;
}

@media screen and (min-width: 768px) {
  .textBlock2 {
    padding: 0 1em;
    margin: 6.25em auto;
  }

  .innerTextWrap1 {
    display: flex;
    justify-content: space-between;
  }

  .figure2 {
    order: 1;
    margin-top: -3em;
    margin-bottom: 0;
    width: 20.25em;
  }

  .textContent1 {
    width: calc(100% - 20.25em);
    padding-right: 4em;
  }

  .checkListWrap .checkList1 > li {
    font-size: 1.25em;
  }
}

@media screen and (min-width: 960px) {
  .innerTextWrap1 {
    padding-left: 5em;
  }

  .textContent1 {
    padding-right: 11.609907vw;
  }
}

@media screen and (min-width: 1260px) {
  .subTitle9 {
    margin-bottom: 2em;
  }

  .figure2 {
    margin-top: -6em;
  }

  .checkListWrap {
    margin-top: 3.125em;
    display: flex;
    align-items: flex-start;
  }

  .checkListWrap .checkList1 {
    margin: 0 7.5em 0 0;
  }

  .checkListWrap .checkList1:last-child {
    margin-right: 0;
  }

  .textContent1 {
    padding-right: 1em;
  }

  .textContent1 > p {
    padding-right: 5em;
  }
}

.dlText1 {
  margin: 0 0 3em;
}

.dlText1:last-child {
  margin-bottom: 0;
}

.dlText1 > dt {
  font-size: 1.230769em;
  font-weight: 700;
  color: #0C7C66;
  margin: 0 0 0.5em;
}

.dlText1 > dd {
  margin: 0;
}

.dlTextWrap1 p {
  color: #272727;
}

.articleBgColor1 .dlTextWrap1 p {
  color: #FFF;
}

@media screen and (min-width: 768px) {
  .dlText1 {
    margin-bottom: 3.125em;
  }

  .dlText1 > dt {
    font-size: 1.125em;
  }

  .dlText1 > dd {
    padding-left: 1.25em;
  }

  .dlTextWrap1 > p:not(:last-child) {
    margin-bottom: 2em;
  }

  .dlTextWrap1 > ul:not(:last-child) {
    margin-bottom: 2em;
  }
}

@media screen and (max-width: 767px) {
  .withImg1 .subTitle10 {
    display: flex;
    align-items: center;
    padding-right: 7.777778em;
    min-height: 6.111111em;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: auto 6.111111em;
  }

  .articleBg03 .subTitle10 {
    background-image: url(../images/service/illustration_24.webp);
  }

  .articleBg04 .subTitle10 {
    background-image: url(../images/service/illustration_25.webp);
  }

  .articleBg05 .subTitle10 {
    background-image: url(../images/service/illustration_26.webp);
  }

  .articleBg06 .subTitle10 {
    background-image: url(../images/service/illustration_28.webp);
  }

  .articleBg07 .subTitle10 {
    background-image: url(../images/service/illustration_29.webp);
  }

  .articleBg08 .subTitle10 {
    background-image: url(../images/service/illustration_31.webp);
  }

  .articleBg09 .subTitle10 {
    background-image: url(../images/service/illustration_32.webp);
  }

  .articleBg10 .subTitle10 {
    background-image: url(../images/service/illustration_34.webp);
  }
}

@media screen and (min-width: 768px) {
  .dlTextWrap1 {
    padding-left: 13.125em;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 9.375em auto;
    min-height: 9.375em;
  }

  .articleBg03 .dlTextWrap1 {
    background-image: url(../images/service/illustration_24.webp);
  }

  .articleBg04 .dlTextWrap1 {
    background-image: url(../images/service/illustration_25.webp);
  }

  .articleBg05 .dlTextWrap1 {
    background-image: url(../images/service/illustration_26.webp);
  }

  .articleBg06 .dlTextWrap1 {
    background-image: url(../images/service/illustration_28.webp);
  }

  .articleBg07 .dlTextWrap1 {
    background-image: url(../images/service/illustration_29.webp);
  }

  .articleBg08 .dlTextWrap1 {
    background-image: url(../images/service/illustration_31.webp);
  }

  .articleBg09 .dlTextWrap1 {
    background-image: url(../images/service/illustration_32.webp);
  }

  .articleBg10 .dlTextWrap1 {
    background-image: url(../images/service/illustration_34.webp);
  }
}

.textBlock3 {
  margin: 4.615385em 0 0;
}

.textBlock3 .subTitle11 {
  padding-right: 10rem;
}

.textBlock3.leftIllust .subTitle11 {
  padding-left: 10rem;
  padding-right: 0;
}

.textBlock3Inner {
  border-radius: 10px;
  padding: 1.538462em;
  background-color: #0C7C66;
  position: relative;
  color: #FFF;
}

.textBlock3Inner.blockBg1 {
  color: #272727;
  background-color: #F0F0F0;
}

.textBlock3Inner::after {
  content: '';
  display: block;
  width: 8.923077em;
  height: 9.230769em;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: -8.5em;
}

.leftIllust .textBlock3Inner::after {
  right: auto;
  left: 0;
}

.illust1::after {
  background-image: url(../images/service/illustration_35.webp);
}

.illust2::after {
  background-image: url(../images/service/illustration_36.webp);
}

.illust3::after {
  background-image: url(../images/service/illustration_37.webp);
}

@media screen and (min-width: 768px) {
  .textBlock3 .subTitle11 {
    padding-right: 18rem;
  }
  
  .textBlock3.leftIllust .subTitle11 {
    padding-left: 18rem;
  }

  .textBlock3Inner {
    padding: 3.75em 17em 3.75em 5em;
  }

  .leftIllust .textBlock3Inner {
    padding-right: 5em;
    padding-left: 17em;
  }

  .textBlock3Inner::after {
    width: 14.0625em;
    height: 14.375em;
    right: 2em;
    top: -3.75em;
  }

  .leftIllust .textBlock3Inner::after {
    right: auto;
    left: 2em;
  }

  .illust3::after {
    background-position: center top;
  }
}

@media screen and (min-width: 1260px) {
  .textBlock3 .subTitle11 {
    padding-right: 18rem;
  }
  
  .textBlock3.leftIllust .subTitle11 {
    padding-left: 18rem;
  }

  .textBlock3Inner {
    padding-right: 25.625em;
  }

  .leftIllust .textBlock3Inner {
    padding-right: 5em;
    padding-left: 25.625em;
  }

  .textBlock3Inner::after {
    right: 5em;
  }

  .leftIllust .textBlock3Inner::after {
    right: auto;
    left: 5em;
  }
}

.list4 {
  margin: 3em auto;
  padding: 0;
  list-style: none;
}

.list4:first-child {
  margin-top: 0;
}

.list4:last-child {
  margin-bottom: 0;
}

.list4 > li {
  font-size: 1.125em;
  font-weight: 500;
  color: #0C7C66;
  text-align: center;
  background-color: #FFF;
  margin: 0 auto 1.111111em;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3.333333em;
  line-height: 1.5;
  border-radius: 2em;
  padding: 1em;
  max-width: 654px;
}

.list4 > li:last-child {
  margin-bottom: 0;
}

.heroBlock1 {
  background-color: #0C7C66;
  max-width: 1720px;
  margin: 4em auto;
  color: #FFF;
  padding: 3em 1.538462em;
}

.herotitle1 {
  color: #0C7C66;
  background-color: #FFF;
  font-size: 1.538462em;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 1.5em;
  border-radius: 10px;
  padding: 1em;
  position: relative;
  width: 11em;
}

.herotitle1::after {
  content: '';
  display: block;
  width: 5.6em;
  height: 6.3em;
  background: url(../images/service/illustration_13.webp) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: calc(50% - 3.15em);
  right: -6em;
}

@media screen and (min-width: 768px) {
  .heroBlock1 {
    margin-top: 6.25em;
    margin-bottom: 6.25em;
    padding: 6.25em 5.3125em;
  }

  .herotitle1 {
    font-size: 1.875em;
  }

  .herotitle1::after {
    width: 5.933333em;
    height: 6.666667em;
    top: calc(50% - 3.3333335em);
    right: -6.5em;
  }
}

@media screen and (min-width: 768px) and (max-width: 1219px) {
  .herotitle1 {
    width: calc(100% - 7em);
  }
}

@media screen and (min-width: 1100px) {
  .herotitle1 {
    border-radius: 3em;
    text-align: center;
  }
}

@media screen and (min-width: 1220px) {
  .herotitle1 {
    max-width: 25em;
    margin: 0 auto 1em;
    width: auto;
  }

  .herotitle1::after {
    width: 5.933333em;
    height: 6.666667em;
    top: calc(50% - 3.3333335em);
    right: -6.5em;
  }

  .heroBlock1 >p {
    text-align: center;
  }
}

.dlBlock4 {
  background-color: #E6F2EF;
  border-radius: 10px;
  margin: 0 0 2em;
  padding: 2em;
}

.dlBlock4:last-child {
  margin-bottom: 0;
}

.dlBlock4 > dt {
  font-size: 1.230769em;
  font-weight: 700;
  line-height: 1.666667;
  margin: 0 0 1.5em;
  background-color: #FFF;
  border-radius: 10px;
  padding: 0.75em;
  color: #0C7C66;
  text-align: center;
}

.dlBlock4 > dd {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .dlBlock4Wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .dlBlock4 {
    width: calc(50% - 2.616279vw);
    /* margin: 5.625em 0 0 5.232558vw; */
    margin: 5.625em 0 0 0;
  }

  .dlBlock4:nth-child(-n+2) {
    margin-top: 0;
  }

  .dlBlock4 > dt {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
}

@media screen and (min-width: 768px) and (max-width: 959px) {
  .dlBlock4:nth-child(odd) {
    margin-left: 0;
  }
}

@media screen and (min-width: 960px) {
  .dlBlock4 > dt {
    font-size: 1.5em;
  }

  .dlBlock4 {
    width: calc(33.333333% - 3.488372vw);
  }

  .dlBlock4:nth-child(3) {
    margin-top: 0;
  }

  .dlBlock4:nth-child(3n+1) {
    margin-left: 0;
  }
}

@media screen and (min-width: 1720px) {
  .dlBlock4 {
    width: calc(33.333333% - 3.75em);
    margin-left: 5.625em;
  }
}

.dlBlock5 {
  margin: 0 0 2.307692em;
  padding: 2em;
  background-color: #FFF;
  border-radius: 10px;
}

.dlBlock5:last-child {
  margin-bottom: 0;
}

.dlBlock5 > dt {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 1em;
  color: #0C7C66;
}

.dlBlock5 > dd {
  margin: 0;
}

@media screen and (max-width: 959px) {
  .dlBlock5 > dt {
    display: flex;
    align-items: center;
    padding-right: 6.5em;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 5.5em auto;
    min-height: 5.5em;
  }

  .dlBlock5.leftImg > dt {
    padding-right: 0;
    padding-left: 6.5em;
    background-position: left center;
  }

  .dlBlock5.illus1 > dt {
    background-image: url(../images/service/illustration_14.webp);
  }

  .dlBlock5.illus2 > dt {
    background-image: url(../images/service/illustration_15.webp);
  }

  .dlBlock5.illus3 > dt {
    background-image: url(../images/service/illustration_16.webp);
  }
}

@media screen and (min-width: 768px) {
  .dlBlock5 {
    margin-bottom: 2.5em;
  }
}

@media screen and (min-width: 960px) {
  .dlBlock5 {
    padding: 2em calc(15.75em + 8.430233vw) 2em 8.430233vw;
    background-position: right 8.430233vw center;
    background-repeat: no-repeat;
    background-size: 13.75em auto;
    min-height: 17.75em;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .dlBlock5.leftImg {
    padding-right: 8.430233vw;
    padding-left: calc(15.75em + 8.430233vw);
    background-position: 8.430233vw center;
  }

  .dlBlock5.illus1 {
    background-image: url(../images/service/illustration_14.webp);
  }

  .dlBlock5.illus2 {
    background-image: url(../images/service/illustration_15.webp);
  }

  .dlBlock5.illus3 {
    background-image: url(../images/service/illustration_16.webp);
  }
}

@media screen and (min-width: 1720px) {
  .dlBlock5 {
    padding-right: 24.8125em;
    padding-left: 9.0625em;
    background-position: right 9.0625em center;
  }

  .dlBlock5.leftImg {
    padding-right: 9.0625em;
    padding-left: 24.8125em;
    background-position: 9.0625em center;
  }
}

.textBlock4 {
  background-color: #FFF;
  border-radius: 10px;
  margin: 0 auto 2.5em;
  box-shadow: 0 0.76923em 0.76923em rgba(64, 64, 64, 0.16);
  padding: 2em;
  width: 89.74359%;
}

.textBlock4:last-child {
  margin-bottom: 0;
}

.textBlockColumnWrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 2em 2em;
}

.textBlock4Img {
  margin: 0;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
}

.textBlock4Img img {
  width: 10em;
}

.textBlockTitle {
  font-size: 1.384615em;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
}

.textBlock4 p {
  color: #272727;
}

@media screen and (max-width: 767px) {
  .textBlockText {
    grid-column: 1 / 3;
  }
}

@media screen and (min-width: 768px) {
  .textBlock4 {
    padding: 3.125em;
  }

  .textBlockColumnWrap {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .textBlock4Img {
    grid-row: 1 / 3;
  }

  .textBlockTitle {
    font-size: 1.375em;
  }
}

@media screen and (min-width: 960px) {
  .textBlock4 {
    padding-left: 4.375em;
    padding-right: 4.375em;
  }

  .textBlockColumnWrap {
    gap: 2em 8em;
  }
}

.dlBlock6Wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.dlBlock6 {
  background-color: #F0F0F0;  
  border-radius: 10px;
  padding: 2em 1.5em;
  margin: 1.5em 0 0 1.5em;
  width: calc(50% - 0.75em);
}

.sectionArea.bg7 .innerWrap1 .dlBlock6Wrap .dlBlock6 {
  background-color: #FFF;
}

.dlBlock6.hasBackground3 {
  padding-top: 13.846154em;
  background-position: center 1.692308em;
  background-repeat: no-repeat;
  background-size: 10.625385em auto;
}

.systemBg01 {
  background-image: url(../images/service/illustration_38.webp);
}

.systemBg02 {
  background-image: url(../images/service/illustration_39.webp);
}

.systemBg03 {
  background-image: url(../images/service/illustration_40.webp);
}

.systemBg04 {
  background-image: url(../images/service/illustration_41.webp);
}

.systemBg05 {
  background-image: url(../images/service/illustration_42.webp);
}

.systemBg06 {
  background-image: url(../images/service/illustration_43.webp);
}

.systemBg07 {
  background-image: url(../images/service/illustration_44.webp);
}

.systemBg08 {
  background-image: url(../images/service/illustration_45.webp);
}

.systemBg09 {
  background-image: url(../images/service/illustration_46.webp);
}

.systemBg10 {
  background-image: url(../images/service/illustration_47.webp);
}

.systemBg11 {
  background-image: url(../images/service/illustration_48.webp);
}

.systemBg12 {
  background-image: url(../images/service/illustration_49.webp);
}

.dlBlock6 > dt {
  color: #0C7C66;
  font-size: 1.384615em;
  font-weight: 700;
  margin: 0 0 0.75em;
  line-height: 1.666667;
  text-align: center;
}

.dlBlock6 > dd {
  margin: 0;
}

@media screen and (max-width: 959px) {
  .dlBlock6:nth-child(-n+2) {
    margin-top: 0;
  }

  .dlBlock6:nth-child(odd) {
    margin-left: 0;
  }
}

@media screen and (min-width: 768px) {
  .dlBlock6 {
    padding: 2em 1.875em;
  }

  .dlBlock6 > dt {
    font-size: 1.375em;
  }
}

@media screen and (min-width: 960px) {
  .dlBlock6 {
    margin: 2.5em 0 0 2.25em;
  }

  .dlBlock6.hasBackground3 {
    padding-top: 18.125em;
    background-position: center 2.5em;
    background-size: 13.75em auto;
  }
}

@media screen and (min-width: 960px) and (max-width: 1259px) {
  .dlBlock6 {
    width: calc(33.333333% - 1.5em);
  }

  .dlBlock6:nth-child(-n+3) {
    margin-top: 0;
  }

  .dlBlock6:nth-child(3n+1) {
    margin-left: 0;
  }
}

@media screen and (min-width: 1260px) {
  .dlBlock6 {
    width: calc(25% - 1.6875em);
  }

  .dlBlock6:nth-child(-n+4) {
    margin-top: 0;
  }

  .dlBlock6:nth-child(4n+1) {
    margin-left: 0;
  }
}

.sectionHead1 {
  background: linear-gradient(to bottom, #FFF 0%, #FFF 3.846154em, rgba(255, 255, 255, 0) 3.846154em, rgba(255, 255, 255, 0) 100%), linear-gradient(to left, rgba(55, 122, 103, 0.2) 0%, rgba(255, 255, 255, 0.2) 75%);
  padding: 0 0 2.307692em;
  margin: 0 0 4.615385em;
}

.sectionHead1.alignRight {
  background: linear-gradient(to bottom, #FFF 0%, #FFF 3.846154em, rgba(255, 255, 255, 0) 3.846154em, rgba(255, 255, 255, 0) 100%), linear-gradient(to right, rgba(55, 122, 103, 0.2) 0%, rgba(255, 255, 255, 0.2) 75%);
}

.sectionHead1:last-child {
  margin-bottom: 0;
}

.enTitle {
  width: 92.307692%;
  margin: 0 auto 0 0;
  height: 13.076923em;
  background-color: #0C7C66;
  border-radius: 0 10px 0 0;
  padding: 1.5em 1.5em 0 12.820513%;
}

.alignRight .enTitle {
  margin-right: 0;
  margin-left: auto;
  padding-right: 12.820513%;
  padding-left: 1.5em;
  border-top-left-radius: 10px;
  border-top-right-radius: 0;
}

.enTitle p {
  color: #FFF;
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: 2em;
  font-weight: 500;
  line-height: 1.1;
}

.alignRight .enTitle p {
  text-align: right;
}

@media screen and (min-width: 768px) {
  .sectionHead1 {
    background: linear-gradient(to bottom, #FFF 0%, #FFF 6.25em, rgba(255, 255, 255, 0) 6.25em, rgba(255, 255, 255, 0) 100%), linear-gradient(to left, rgba(55, 122, 103, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%);
    padding-bottom: 6.25em;
    margin-bottom: 6.25em;
  }
  
  .sectionHead1.alignRight {
    background: linear-gradient(to bottom, #FFF 0%, #FFF 6.25em, rgba(255, 255, 255, 0) 6.25em, rgba(255, 255, 255, 0) 100%), linear-gradient(to right, rgba(55, 122, 103, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%);
  }

  .enTitle {
    width: 94.791667%;
    height: 16.25em;
    padding: 3.125em 1.5em 0 9.635417%;
  }

  .alignRight .enTitle {
    padding-right: 9.635417%;
  }

  .enTitle p {
    font-size: 3.125em;
  }
}

@media screen and (min-width: 1920px) {
  .enTitle {
    width: calc((100% - 1550px) / 2 + 102.1875em);
    padding-left: calc((100% - 1550px) / 2);
  }

  .alignRight .enTitle {
    padding-right: calc((100% - 1550px) / 2);
  }
}

.textBlock5 {
  background-color: #FFF;
  background-position: center 2.307692em;
  background-repeat: no-repeat;
  background-size: 15.384615em auto;
  padding: 14em 7.692308vw 2em;
  border-radius: 10px;
  margin: -7.692308em auto 0;
  width: 74.358974%;
  max-width: 1550px;
}

.textBlock5.webBg1 {
  background-image: url(../images/service/service_img01.webp);
}

.textBlock5.webBg2 {
  background-image: url(../images/service/service_img02.webp);
}

.textBlock5.webBg3 {
  background-image: url(../images/service/illustration_50.webp);
}

.textBlock5.webBg4 {
  background-image: url(../images/service/illustration_51.webp);
}

.textBlock5.webBg5 {
  background-image: url(../images/service/illustration_52.webp);
}

.catchText1 {
  color: #0C7C66;
  font-size: 1.230769em;
  font-weight: 700;
}

.textBlock5 .linkButton1 {
  margin-top: 2.5em;
}

.textBlock5 .linkButton1 a {
  width: auto;
}

.textBlock5 .linkButton1 a span {
  padding: 0 1.646em;
}

@media screen and (min-width: 768px) {
  .textBlock5 {
    width: 80.729167%;
    margin-top: -6.875em;
    padding-bottom: 6.25em;
    padding-top: 17em;
    background-size: 20.625em auto;
  }

  .catchText1 {
    font-size: 1.125em;
  }
}

@media screen and (min-width: 1260px) {
  .textBlock5 {
    padding: 6.25em 8.430233vw 6.25em 33.139535vw;
    background-size: 19.186047vw auto;
    background-position: 8.430233vw 6.25em;
  }

  .alignRight .textBlock5 {
    padding-right: 33.139535vw;
    padding-left: 8.430233vw;
    background-position: right 8.430233vw top 6.25em;
  }
}

@media screen and (min-width: 1720px) {
  .textBlock5 {
    padding-right: 9.0625em;
    padding-left: 35.625em;
    background-size: 20.625em auto;
    background-position: 9.0625em 6.25em;
  }

  .alignRight .textBlock5 {
    padding-right: 35.625em;
    padding-left: 9.0625em;
    background-position: right 9.0625em top 6.25em;
  }
}

.list5 {
  margin: -0.75em auto 4.5em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.list5:last-child {
  margin-bottom: 0;
}

.list5 > li {
  margin: 0.75rem;
  width: calc(50% - 1.5rem);
  font-size: 1.25em;
  font-weight: 700;
  color: #0C7C66;
  line-height: 1.5;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4em;
  background-color: #FFF;
  border: 1px solid #0C7C66;
  border-radius: 10px;
  padding: 1em;
  max-width: 360px;
}

@media screen and (min-width: 768px) {
  .list5 {
    margin-bottom: 6.25em;
    margin-top: -1.875em;
    justify-content: center;
    max-width: 75em;
  }

  .list5 > li {
    height: 5em;
    width: calc(33.333333% - 2rem);
    margin: 1.875rem 1rem;
    font-size: 1.5em;
  }

  .list5 img {
    max-width: 10.25rem;
  }

  .list5 img.imgSize1 {
    max-width: 12.75rem;
  }

  .list5 img.imgSize2 {
    max-width: 11.3125rem;
  }
}

@media screen and (min-width: 960px) {
  .list5 > li {
    width: calc(33.333333% - 2.5rem);
    margin: 1.875rem 1.25rem;
  }
}

.dlBlock7Wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.dlBlock7 {
  background-color: #E6F2EF;
  border-radius: 10px;
  padding: 2em 1.5em;
  margin: 1.5em 0 0 1.5em;
  width: calc(50% - 0.75em);
}

.dlBlock7:nth-child(-n+2) {
  margin-top: 0;
}

.dlBlock7:nth-child(odd) {
  margin-left: 0;
}

.dlBlock7.hasBackground3 {
  padding-top: 13.846154em;
  background-position: center 1.692308em;
  background-repeat: no-repeat;
  background-size: 10.625385em auto;
}

.dlBlock7.maintenanceBg01 {
  background-image: url(../images/service/illustration_53.webp);
}

.dlBlock7.maintenanceBg02 {
  background-image: url(../images/service/illustration_54.webp);
}

.dlBlock7.maintenanceBg03 {
  background-image: url(../images/service/illustration_55.webp);
}

.dlBlock7.maintenanceBg04 {
  background-image: url(../images/service/illustration_56.webp);
}

.dlBlock7 > dt {
  color: #0C7C66;
  font-size: 1.384615em;
  font-weight: 700;
  margin: 0 0 0.75em;
  line-height: 1.666667;
  text-align: center;
}

.dlBlock7 > dd {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .dlBlock7 {
    width: calc(50% - 1.5625em);
    margin-top: 3.75em;
    margin-left: 3.125em;
    padding: 3.75em 2em;
  }

  .dlBlock7.hasBackground3 {
    padding-top: 18.125em;
    background-position: center 2.5em;
    background-size: 13.75em auto;
  }

  .dlBlock7 > dt {
    font-size: 1.5em;
  }
}

@media screen and (min-width: 960px) {
  .dlBlock7 {
    padding-left: 5.3125em;
    padding-right: 5.3125em;
  }
}