@charset "UTF-8";

/* html { scroll-behavior: smooth; } ← 入れない（JSで統一） */
:root { --header-h: 0px; }
[id] { scroll-margin-top: var(--header-h); } /* 被り対策の保険 */

.animation {
   opacity: 0;
   transition: opacity .8s, transform .8s ease-out;
   transform: translateY(20px);
}

.animation.animate {
   opacity: 1;
   transform: translate(0);
   transition-delay: .3s;
}

.animation.left {
   transform: translateX(-20px);
}

.animation.right {
   transform: translateX(20px);
}

.animation.animate {
   opacity: 1;
   transform: translate(0);
   transition-delay: .3s;
}

div {
   line-height: normal;
}

body {
   font-size: 10px;
}

.servicePage img {
   display: block;
}

.servicePage * {
   /*scroll-behavior: smooth;*/
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   font-family: "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", "Hiragino Kaku Gothic Pro", sans-serif;
}

@media screen and (max-width: 767px) {
   .servicePage {
      padding-bottom: 10px !important;
   }
}

.service .container {
   max-width: 1150px;
   margin: 0 auto;
   padding: 0 15px;
}

@media screen and (max-width: 767px) {
   .businessPage .container {
      padding: 0 3%;
   }
}

.serviceMv {
   position: relative;
}

.serviceMvInfo {
   position: absolute;
   color: #FFF;
   left: 50%;
   top: 50%;
   transform: translateY(-50%);
   transform: translateY(-50%) translateX(-50%);
   max-width: 1210px;
   width: 100%;
   padding-inline: 30px;
}

@media screen and (max-width: 575px) {
   .serviceMvInfo {
      left: 25px;
      top: 24px;
      transform: none;
      padding-inline: 0;
      width: fit-content;
   }
}

.serviceMvInfoTtl {
   font-weight: 700;
   font-size: 4.8em;
   letter-spacing: .04em;
   margin-bottom: 10px;
   filter: drop-shadow(3px 0 7px #33386e);

}

.serviceMvInfoText {
   font-weight: 600;
   font-size: 2em;
   letter-spacing: .04em;
   filter: drop-shadow(3px 0 7px #33386e);
}

@media screen and (max-width: 991px) {
   .serviceMv img {
      aspect-ratio: 1 / 0.5;
      object-fit: cover;
   }
}

@media screen and (max-width: 767px) {
   .serviceMvInfoTtl {
      font-size: 4.5em;
   }

   .serviceMvInfoText {
      font-size: 2.2em;
   }
}

@media screen and (max-width: 575px) {
   .serviceMv img {
      aspect-ratio: 1 / 0.455;
   }

   .serviceMvInfoTtl {
      font-size: 2em;
      line-height: calc(24 / 20);
      margin-bottom: 5px;
   }

   .serviceMvInfoText {
      font-size: 1.1em;
   }
}


.serviceTabWrapper {
   background: #FFF;
   /* margin-inline: 15px; */
   z-index: 10;
   position: absolute;
   width: 100%;
   max-width: 1150px;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
}


.serviceTabBlock {
   display: none;
}

.serviceTabItem {
   background: #133664;
   transition: all .4s ease-out;
   position: relative;
   display: flex;
   align-items: baseline;
   justify-content: center;
   gap: 10px;
   width: calc((100% / 4));
   color: #FFF;
   font-size: 1.6em;
   letter-spacing: .05em;
   padding-block: 27px;
}

.serviceTabItem:hover {
   opacity: .8;
}
@media screen and (max-width: 1200px) {
   .serviceTabItem {
      padding-block: 15px;
   }
}
@media screen and (max-width: 991px) {
   .serviceTabItem {
      padding-block: 12px;
   }
}

.serviceTabItem::after {
   position: absolute;
   content: '';
   background: #FFF;
   width: 1px;
   height: 40px;
   top: 50%;
   transform: translateY(-50%);
   right: 0;
}

.serviceTabItem:last-child::after {
   content: none;
}

@media screen and (max-width: 767px) {
   .serviceTab {
      margin-inline: 25px;
      margin-top: 30px;
   }

   .serviceTabBlock {
      cursor: pointer;
      position: relative;
      width: 100%;
      text-align: center;
      display: block;
      background: #133664;
      color: #FFF;
      font-size: 2.8em;
      padding-block: 22.5px;
      border-radius: 10px;
      z-index: 10;
   }

   .serviceTabItem:hover {
      opacity: 1;
   }


   .serviceTabBlock::after {
      content: '';
      position: absolute;
      background: #fff;
      width: 1px;
      height: 56px;
      right: 100px;
   }

   .serviceTabBlock::before {
      content: '';
      position: absolute;
      background: url(/business/service/dci/img/plus-icon.svg) no-repeat center;
      background-size: cover;
      width: 38px;
      height: 38px;
      top: 50%;
      transform: translateY(-50%);
      right: 32px;
      transition: width .4s ease;
   }

   .serviceTabBlock.add::before {
      background: #fabe00;
      width: 36px;
      height: 4px;
   }

   .serviceTabWrapper {
      width: 100%;
      max-width: 698px;
      position: relative;
      bottom: unset;
      left: unset;
      transform: unset;
      background: #FFF;
      flex-wrap: wrap;
      gap: 42px 40px;
      border-top: none;
      border-radius: 10px;
      padding-block: 60px 40px;
      justify-content: center;
      z-index: 1;
   }

   .serviceTabContent {
      border: 1px solid #343434;
      margin-top: -20px;
      max-height: 0;
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      transition: all 0.3s ease;
   }

   .serviceTabContent.active {
      max-height: 100%;
      opacity: 1;
      visibility: visible;
   }

   /* .serviceTabWrapper img {
      filter: brightness(0);
   } */

   .serviceTabItem {
      background: #FFF;
      gap: 10px;
      width: calc((100% / 2));
      max-width: 300px;
      color: #343434;
      font-size: 2.6em;
      letter-spacing: .05em;
      padding-bottom: 5px;
   }

   .serviceTabItem:last-child::after {
      content: '';
   }

   .serviceTabItem::after {
      background: #343434;
      width: 300px;
      height: 1px;
      top: unset;
      bottom: 0;
      right: 0;
   }
}

@media screen and (max-width: 575px) {
   .serviceTab {
      margin-inline: 15px;
      margin-top: 20px;
   }

   .serviceTabBlock {
      font-size: 1.6em;
      padding-block: 11px;
   }

   .serviceTabBlock::after {
      height: 20px;
      right: 80px;
   }

   .serviceTabBlock::before {
      width: 19px;
      height: 19px;
      right: 20px;
   }

   .serviceTabBlock.add::before {
      width: 18px;
      height: 2px;
   }

   .serviceTabWrapper {
      gap: 20px;
      padding-block: 30px 20px;
   }

   .serviceTabContent {
      margin-top: -10px;
   }

   .serviceTabItem {
      gap: 10px;
      width: calc((100% / 2));
      max-width: 150px;
      font-size: 1.6em;
      padding-bottom: 5px;
   }

   .serviceTabItem::after {
      width: 150px;
   }
}

.serviceTabItemImg {
   height: 11px;
}

.serviceSection {
   padding-block: 100px;
   background: linear-gradient(to bottom, transparent 0, transparent 24%, #f3f6f8 24%, #f3f6f8 100%);
}

@media screen and (max-width: 767px) {
   .serviceSection {
      padding-block: 71px 66px;
   }
}

@media screen and (max-width: 575px) {
   .serviceSection {
      padding-block: 35.5px 33px;
   }
}

.serviceSectionWrapper {
   background: #FFF;
   max-width: calc(50% + 560px);
   margin-inline: auto 0;
}

@media screen and (max-width: 1300px) {
   .serviceSectionWrapper {
      margin-inline: 25px 0;
   }
}

@media screen and (max-width: 575px) {
   .serviceSectionWrapper {
      margin-inline: 15px 0;
   }
}

/* @media screen and (min-width: 1441px) {
   .serviceSectionWrapper {
      margin-inline: auto;
   }
} */

.serviceSectionHeading {
   position: relative;
}

.serviceSectionHeading::before {
   position: absolute;
   content: '';
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31px" height="31px"><path fill-rule="evenodd" fill="rgb(250, 190, 0)" d="M0.682,0.838 L30.682,0.838 L0.678,30.838 L0.682,30.838 L0.682,0.838 Z"/></svg>');
   width: 30px;
   height: 30px;
   top: 0;
   left: 0;
}

@media screen and (max-width: 575px) {
   .serviceSectionHeading::before {
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19px" height="20px"><path fill-rule="evenodd" fill="rgb(250, 190, 0)" d=" M0.684, 0.840 L18.944, 0.840 L0.682, 19.100 L0.684, 19.100 L0.684, 0.840 Z"/></svg>');
      width: 18px;
      height: 18px;
      top: 4px;
      left: 2px;
   }
}

.serviceSectionHeading {
   display: flex;
   align-items: baseline;
   gap: 20px;
   padding: 25px 0 78px 30px;
}

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

@media screen and (max-width: 575px) {
   .serviceSectionHeading {
      padding: 20px 0 16px 16px;
   }
}

.serviceSectionTitle {
   color: #343434;
   font-weight: 700;
   font-size: 6em;
   letter-spacing: .02em;
}

@media screen and (max-width: 575px) {
   .serviceSectionTitle {
      font-size: 3em;
   }
}

.serviceSectionDesc {
   font-size: 1.8em;
   letter-spacing: .02em;
}

@media screen and (max-width: 575px) {
   .serviceSectionDesc {
      font-size: .9em;
   }
}

.serviceSectionSubtitle {
   background: #133664;
   color: #FFF;
   font-weight: 700;
   font-size: 3em;
   letter-spacing: .04em;
   padding: 35px 30px;
}

@media screen and (max-width: 991px) {
   .serviceSectionSubtitle {
      font-size: 2.5em;
   }
}

@media screen and (max-width: 767px) {
   .serviceSectionSubtitle {
      font-size: 3.4em;
      padding: 35px 34px;
   }
}

@media screen and (max-width: 575px) {
   .serviceSectionSubtitle {
      font-size: 1.7em;
      padding: 17px 15px;
   }
}

.serviceSectionBlock {
   max-width: 1000px;
   padding-inline: 15px;
   margin-inline: 60px auto;
   padding-bottom: 70px;
}

@media screen and (max-width: 991px) {
   .serviceSectionBlock {
      margin-inline: 15px auto;
   }
}

@media screen and (max-width: 767px) {
   .serviceSectionBlock {
      margin-inline: 15px auto;
   }
}

@media screen and (max-width: 575px) {
   .serviceSectionBlock {
      margin-inline: 0 auto;
   }
}

.serviceRow {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   padding-block: 60px 56px;
}

@media screen and (max-width: 767px) {
   .serviceRow {
      flex-direction: column;
      gap: 56px;
   }
}

@media screen and (max-width: 575px) {
   .serviceRow {
      /* font-size: 1.7em; */
      padding-block: 30px 28px;
      gap: 23px;
   }
}

.serviceRow.--reverse {
   flex-direction: row-reverse;
   padding-block: 0;
}

@media screen and (max-width: 767px) {
   .serviceRow.--reverse {
      flex-direction: column;

   }

   .serviceRow.--reverse .serviceCol:last-child img,
   .serviceRow.--article .serviceCol:last-child img {
      margin-inline: auto 0;
   }

}

.serviceCol:first-child {
   width: 100%;
   max-width: 520px;
}

@media screen and (max-width: 767px) {
   .serviceCol:first-child {
      max-width: 100%;
   }
}

.serviceCol.--mt-xl {
   margin-top: -110px;
}

@media screen and (max-width: 767px) {
   .serviceCol.--mt-xl {
      margin-top: 0;
   }

   .serviceCol:last-child {
      margin-inline: auto 0;
   }

   .serviceCol:last-child img {
      margin-inline: auto -15px;
   }
}


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

   .serviceCol.--mt-xl:last-child img {
      min-width: 345px;
   }
}

.serviceColTitle {
   font-size: 2.4em;
   letter-spacing: .04em;
   margin-bottom: 38px;
}

@media screen and (max-width: 767px) {
   .serviceColTitle {
      font-size: 3.2em;
      margin-bottom: 38px;
   }
}

@media screen and (max-width: 575px) {
   .serviceColTitle {
      font-size: 1.8em;
      margin-bottom: 16px;
   }
}

.serviceColText {
   font-size: 1.6em;
   letter-spacing: .02em;
   line-height: calc(32 / 16);
}

@media screen and (max-width: 767px) {
   .serviceColText {
      font-size: 2.6em;
      line-height: calc(48 / 26);
   }

   .serviceSection.--related .serviceColText {
      padding-inline: 26px;
   }
}

@media screen and (max-width: 575px) {
   .serviceColText {
      font-size: 1.5em;
      line-height: calc(26 / 16);
   }

   .serviceSection.--related .serviceColText {
      padding-inline: 0;
   }
}

.serviceColHeading {
   position: relative;
   background: #738792;
   color: #FFF;
   padding: 18px 30px;
   font-weight: 700;
   font-size: 2.4em;
   letter-spacing: .04em;
   margin-bottom: 40px;
}

.serviceSection.--global .serviceColHeading {
   justify-content: flex-start;
   padding-left: 39px;
}

@media screen and (max-width: 767px) {
   .serviceColHeading {
      font-size: 3.2em;
      padding: 24px 30px;
      margin-left: -15px;
   }

   .serviceSection.--global .serviceColHeading {
      padding-left: 34px;
   }
}

@media screen and (max-width: 575px) {
   .serviceColHeading {
      font-size: 1.6em;
      padding: 18px 20px;
      margin-bottom: 20px;
   }

   .serviceSection.--global .serviceColHeading {
      padding-left: 20px;
   }
}

.serviceColHeading::before {
   position: absolute;
   content: '';
   background: #fabe00;
   width: 10px;
   height: 100%;
   top: 0;
   left: 0;
}

.serviceCategoryTitle {
   font-weight: 700;
   font-size: 2em;
   letter-spacing: .02em;
   margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
   .serviceCategoryTitle {
      font-size: 3em;
      margin-bottom: 48px;
   }
}

@media screen and (max-width: 575px) {
   .serviceCategoryTitle {
      font-size: 1.5em;
      margin-bottom: 24px;
      line-height: 22px;
   }
}

.serviceCategoryBlock {
   margin-left: 37px;
}

@media screen and (max-width: 991px) {
   .serviceCategoryBlock {
      margin-left: 15px;
   }
}

@media screen and (max-width: 575px) {
   .serviceCategoryBlock {
      margin-left: 6px;
   }
}

.serviceCategory {
   position: relative;
   /* border-bottom: 1px solid #738792; */
   padding-bottom: 41px;
   margin-bottom: 39px;
}

.serviceCategory::after {
   position: absolute;
   content: '';
   background: #738792;
   width: 100%;
   height: 1px;
   left: 0;
   bottom: 0;
}

.serviceCategory:last-of-type {
   border-bottom: none;
   padding-bottom: 0;
   margin-bottom: 0;
}

.serviceCategory:last-of-type:after {
   content: none;
}

.serviceCategoryList {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 30px;
}

@media screen and (max-width: 767px) {
   .serviceCategory::after {
      width: calc(100% + 40px);
      left: -45px;
   }

   .serviceCategoryList {
      gap: 30px 0px;
   }
}

@media screen and (max-width: 575px) {
   .serviceCategory::after {
      width: calc(100% + 22px);
      left: -22px;
   }

   .serviceCategoryList {
      gap: 15px 5px;
      align-items: center;
   }
}

.serviceCategoryItem {
   /* width: calc(50% - (30px / 2)); */
   width: 100%;
   max-width: 220px;
   font-size: 1.6em;
   letter-spacing: .02em;
   padding-left: 24px;
}

@media screen and (max-width: 767px) {
   .serviceCategoryItem {
      max-width: 326px;
      font-size: 2.6em;
      padding-left: 20px;
   }
}

@media screen and (max-width: 575px) {
   .serviceCategoryItem {
      max-width: 140px;
      font-size: 1.6em;
      padding-left: 15px;
      line-height: calc(22 / 16);
   }

   .serviceCategoryItem:nth-child(1),
   .serviceCategoryItem:nth-child(3),
   .serviceCategoryItem:nth-child(5) {
      max-width: 175px;
   }
}

.serviceCategoryItem::before {
   position: absolute;
   content: '';
   background: url(/business/service/dci/img/map-icon.png) no-repeat;
   background-position: center;
   background-size: cover;
   width: 10px;
   height: 12px;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
}

.serviceCategoryText {
   font-size: 1.6em;
   line-height: 1;
   margin-top: 50px;
}

@media screen and (max-width: 767px) {
   .serviceCategoryText {
      font-size: 2em;
   }
}

@media screen and (max-width: 575px) {
   .serviceCategoryText {
      font-size: 1.3em;
      margin-top: 25px;
   }
}


.serviceColBtn {
   width: fit-content;
   position: relative;
   transition: all .4s ease;
   display: block;
   /* margin-left: -2px; */
   /* margin-top: 44px; */
}

.serviceColBtn::after {
   position: absolute;
   content: '';
   background: url(/business/service/dci/img/arrow-right.svg) no-repeat center;
   background-size: cover;
   width: 18px;
   height: 30px;
   right: 21px;
   top: 50%;
   transform: translateY(-50%);
   filter: brightness(5);
}

.serviceColBtnText {
   position: absolute;
   width: 100%;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   background: rgba(19, 54, 100, .4);
   color: #FFF;
   font-weight: 700;
   font-size: 2.4em;
   letter-spacing: .04em;
   padding-left: 28px;
   padding-block: 18.2px;
}

.serviceColBtnText span {
   display: block;
   font-size: .75em;
   letter-spacing: normal;
   margin-top: 5px;
}

@media screen and (max-width: 767px) {
   .serviceColBtn {
      margin-left: 0;
      /* margin-top: 44px; */
   }
}

@media screen and (max-width: 575px) {
   .serviceColBtn {
      /* margin-top: 24px; */
   }

   .serviceColBtnText {
      font-size: 1.2em;
      padding-block: 10px;
      padding-left: 10px;
   }

   .serviceColBtn::after {
      width: 10px;
      height: 15px;
      right: 10px;
   }
}

.serviceColBtn img {
   cursor: pointer;
   max-width: 720px;
}

@media screen and (max-width: 991px) {
   .serviceColBtn img {
      max-width: 100%;
   }
}

@media screen and (max-width: 767px) {
   .serviceColBtn img {
      margin-inline: auto !important;
   }

}

@media screen and (max-width: 575px) {
   .serviceColBtn img {
      min-height: 90px;
   }

}

.serviceRow.--article .serviceColHeading {
   margin-bottom: 36px;
}

.serviceRow.--article .serviceCategoryTitle {
   letter-spacing: -.04em;
   margin-bottom: 20px;
}

.serviceRow.--article .serviceCategory {
   padding-bottom: 30px;
   margin-bottom: 34px;
}

@media screen and (max-width: 575px) {
   .serviceRow.--article .serviceCategory {
      padding-bottom: 15px;
      margin-bottom: 17px;
   }
}

.serviceRow.--article .serviceCategory:last-of-type {
   margin-bottom: 0;
   padding-bottom: 0;
}

.serviceCategoryDesc {
   font-size: 1.6em;
   line-height: calc(32 / 16);
}

@media screen and (max-width: 767px) {
   .serviceCategoryDesc {
      font-size: 2.6em;
      line-height: calc(48 / 26);
   }
}

@media screen and (max-width: 575px) {
   .serviceCategoryDesc {
      font-size: 1.6em;
      line-height: calc(24 / 14);
   }
}

.serviceCategoryLink {
   color: #133664;
   text-decoration: underline;
}

.serviceSection.--global {
   padding-block: 0;
}

.serviceSection.--global .serviceSectionWrapper {
   margin-inline: 0 auto;
   padding-block: 100px;
}


@media screen and (max-width: 767px) {
   .serviceSection.--global .serviceSectionWrapper {
      padding-block: 71px 66px;
   }
}

@media screen and (max-width: 575px) {
   .serviceSection.--global .serviceSectionWrapper {
      padding-block: 35.5px 33px;
   }
}

@media screen and (max-width: 1300px) {
   .serviceSection.--global .serviceSectionWrapper {
      margin-inline: 0 15px;
   }
}

@media screen and (max-width: 767px) {
   .serviceSection.--global .serviceSectionWrapper {
      margin-inline: auto 25px;
      padding-block: 50px 70px;
   }

   .serviceSection.--global {
      padding-block: 0;
   }
}

@media screen and (max-width: 575px) {
   .serviceSection.--global .serviceSectionWrapper {
      margin-inline: auto 15px;
      padding-block: 25px 35px;
   }
}

/* @media screen and (min-width: 1441px) {
   .serviceSection.--global .serviceSectionWrapper {
      margin-inline: auto;
   }
} */

.serviceSection.--global .serviceSectionHeading {
   max-width: 1150px;
   margin-left: auto;
   padding-inline: 15px;
}

@media screen and (max-width: 1200px) {
   .serviceSection.--global .serviceSectionHeading {
      margin-inline: 15px;
   }
}

/* @media screen and (max-width: 575px) {
   .serviceSection.--global .serviceSectionHeading {
      margin-inline: 14px auto;
   }
 }  */

.serviceSection.--global .serviceSectionBlock {
   margin-inline: auto 60px;
   padding-bottom: 0;
}

@media screen and (max-width: 991px) {
   .serviceSection.--global .serviceSectionBlock {
      margin-inline: auto 15px;
   }
}

@media screen and (max-width: 991px) {
   .serviceSection.--global .serviceSectionBlock {
      margin-inline: auto 34px;
   }

   .serviceSection.--global .serviceSectionBlock {
      padding-inline: 55px 0;
   }
}

@media screen and (max-width: 575px) {
   .serviceSection.--global .serviceSectionBlock {
      margin-inline: auto 17px;
   }

   .serviceSection.--global .serviceSectionBlock {
      padding-inline: 27px 0;
   }
}

.serviceSection.--global .serviceRow {
   padding-bottom: 15px;
}

@media screen and (max-width: 991px) {
   .serviceSection.--global .serviceRow {
      padding-bottom: 75px;
   }
}

@media screen and (max-width: 575px) {
   .serviceSection.--global .serviceRow {
      padding-bottom: 32px;
   }
}

.serviceSectionTable {
   /* border: 1px solid #738792; */
   border-left: 0;
}

.serviceTableWrapper {
   display: flex;
}

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

   .serviceTableWrapper {
      flex-direction: column;
   }
}

.serviceTableWrapper .serviceColHeading {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.4em;
   letter-spacing: .04em;
   margin-bottom: 0;
   width: 100%;
   max-width: 455px;
   padding-inline: 0;
}

@media screen and (max-width: 991px) {
   .serviceTableWrapper .serviceColHeading {
      font-size: 2.1em;
   }
}

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

   .serviceTableWrapper .serviceColHeading {
      max-width: 100%;
      margin-left: 0;
      font-size: 3.2em;
   }

   .serviceTableWrapper:first-child {
      margin-bottom: 10px;
   }

   .serviceSection.--global .serviceCol.--mt-xl:last-child img {
      min-width: 345px;
      margin-inline: -55px auto;
   }
}

@media screen and (max-width: 575px) {
   .serviceTableWrapper .serviceColHeading {
      font-size: 1.6em;
   }

   .serviceSection.--global .serviceCol.--mt-xl:last-child img {
      min-width: 345px;
      margin-inline: -27px auto;
   }
}

.serviceTableWrapper:first-child .serviceColHeading {
   border-bottom: 1px solid #FFF;
}

.serviceTableWrapper:first-child .serviceTableInfo {
   border-bottom: 1px solid #738792;
   border-top: 1px solid #738792;
   border-right: 1px solid #738792;
}

.serviceTableWrapper:last-child .serviceTableInfo {
   border-bottom: 1px solid #738792;
   border-right: 1px solid #738792;
   border-top: none;
}

.serviceTableInfo {
   display: flex;
   justify-content: center;
   flex-direction: column;
   width: 100%;
   /* font-size: 1.6em;
   line-height: calc(26 / 16);
   letter-spacing: .06em; */
   padding: 15px 45px;
}

.serviceTableTextDesc {
   font-size: 1.6em;
   line-height: calc(26 / 16);
   letter-spacing: .06em;
}

.serviceTableTextDesc.--mt-sm {
   padding-top: 15px;
}


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

   .serviceTableTextDesc {
      font-size: 1.4em;
   }
}

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

   .serviceTableInfo {
      border-left: 1px solid #738792;
      width: auto;
      padding: 8px 45px;
   }

   .serviceTableWrapper:first-child .serviceColHeading {
      border-bottom: none;
   }

   .serviceTableWrapper:first-child .serviceTableInfo {
      border-top: none;
   }

   .serviceTableTextDesc {
      font-size: 2.6em;
      line-height: calc(40 / 26);
   }

   .serviceTableTextDesc.--mt-sm {
      padding-top: 0;
   }
}

@media screen and (max-width: 575px) {
   .serviceTableInfo {
      padding: 15px 25px;
   }

   .serviceTableTextDesc {
      font-size: 1.6em;
      line-height: calc(24 / 13);
   }
}

.serviceSection.--global {
   background: linear-gradient(to bottom, #f3f6f8 0, #f3f6f8 100%, transparent 81%, transparent 100%);
}

.serviceIntro {
   background: #f3f6f8;
   padding-block: 80px;
}

@media screen and (max-width: 767px) {
   .serviceIntro {
      padding-block: 70px;
   }
}

@media screen and (max-width: 575px) {
   .serviceIntro {
      padding-block: 0;
   }
}

.serviceIntroWrapper {
   max-width: 1120px;
   margin-inline: auto;
   background: #FFF;
   padding: 60px 60px 80px 60px;
}

@media screen and (max-width: 991px) {
   .serviceIntroWrapper {
      max-width: 1000px;
      margin-inline: auto;
      background: #FFF;
      padding: 40px 20px;
   }
}


.serviceIntroWrapper .serviceColHeading {
   background: #133664;
   text-align: center;
   padding-block: 38px;
   margin-bottom: 80px;
}

@media screen and (max-width: 767px) {
   .serviceIntroWrapper .serviceColHeading {
      margin-left: 0;
      margin-bottom: 50px;
   }
}

@media screen and (max-width: 575px) {
   .serviceIntroWrapper .serviceColHeading {
      margin-bottom: 25px;
      padding-block: 20px;
   }
}

.serviceIntroRow {
   display: flex;
   align-items: center;
   padding-inline: 30px;
   gap: 49px;
}

@media screen and (max-width: 991px) {
   .serviceIntroRow {
      padding-inline: 15px;
      gap: 20px;
   }
}

@media screen and (max-width: 767px) {
   .serviceIntroRow {
      flex-direction: column;
      gap: 50px;
      padding-inline: 0;
   }
}

@media screen and (max-width: 575px) {
   .serviceIntroRow {
      gap: 25px;
   }
}

.serviceIntroCol:first-child {
   width: 100%;
   max-width: 440px;
}

@media screen and (max-width: 767px) {
   .serviceIntroCol:first-child {
      max-width: 100%;
   }
}

.serviceIntroColTtl {
   font-size: 2.4em;
   letter-spacing: .02em;
   margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
   .serviceIntroColTtl {
      text-align: center;
      font-size: 3.2em;
      margin-bottom: 35px;
   }
}

@media screen and (max-width: 575px) {
   .serviceIntroColTtl {
      font-size: 1.6em;
      margin-bottom: 15px;
   }
}

.serviceIntroColText {
   font-size: 1.6em;
   letter-spacing: .02em;
   line-height: calc(32 / 16);
   margin-bottom: 72px;
}

@media screen and (max-width: 767px) {
   .serviceIntroColText {
      text-align: center;
      font-size: 2.4em;
      line-height: calc(48 / 24);
      margin-bottom: 50px;
   }

   .serviceIntroCol {
      width: 100%;
   }
}

@media screen and (max-width: 575px) {
   .serviceIntroColText {
      font-size: 1.2em;
      line-height: calc(24 / 12);
      margin-bottom: 25px;
   }
}

.serviceIntroLink {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fabe00;
   color: #343434;
   width: 100%;
   max-width: 420px;
   padding-block: 15.5px;
   font-size: 1.8em;
   font-weight: 600;
}

@media screen and (max-width: 767px) {
   .serviceIntroLink {
      max-width: 700px;
      font-size: 3em;
      padding-block: 43.5px;
   }
}

@media screen and (max-width: 575px) {
   .serviceIntroLink {
      max-width: 1005;
      font-size: 1.5em;
      padding-block: 22px;
   }
}

.serviceIntroLink::after {
   position: absolute;
   content: '';
   background: url(/business/service/dci/img/arrow-right.svg) no-repeat center;
   background-size: cover;
   width: 12px;
   height: 18px;
   right: 21px;
   top: 50%;
   transform: translateY(-50%);
}

.serviceSection:has(.serviceSectionContainer) {
   background: none;
}

.serviceSectionContainer {
   max-width: 1120px;
   margin-inline: auto;
}

.serviceRelated {
   display: flex;
   align-items: center;
   gap: 25px;
   margin-bottom: 40px;
}

@media screen and (max-width: 1200px) {
   .serviceRelated {
      margin-inline: 15px;
   }
}

@media screen and (max-width: 991px) {
   .serviceRelated {
      align-items: flex-start;
   }
}

@media screen and (max-width: 767px) {
   .serviceRelated {
      flex-direction: column;
      gap: 0;
      margin-bottom: 40px;
   }
}

@media screen and (max-width: 575px) {
   .serviceRelated {
      gap: 0;
      margin-bottom: 20px;
   }
}

.serviceRelated .serviceSectionHeading {
   width: 100%;
   max-width: 430px;
   /* padding-bottom: 0; */
}

@media screen and (max-width: 991px) {
   .serviceRelated .serviceSectionHeading {
      flex-direction: column;
      max-width: fit-content;
   }
}

@media screen and (max-width: 767px) {
   .serviceRelated .serviceSectionHeading {
      flex-direction: row;
      max-width: fit-content;
      margin-inline: 0 auto;
   }
}

.serviceRelatedRow {
   max-width: 965px;
   margin-inline: auto;
   display: flex;
   align-items: center;
   gap: 85px;
   padding-inline: 15px;
}

@media screen and (max-width: 991px) {
   .serviceRelatedRow {
      gap: 25px;
   }
}

@media screen and (max-width: 767px) {
   .serviceRelatedRow {
      padding-inline: 25px;
   }

   .serviceRelatedCol img {
      aspect-ratio: 338/210;
   }
}

@media screen and (max-width: 575px) {
   .serviceRelatedRow {
      /* flex-direction: column; */
      padding-inline: 12px;
      gap: 10px;
   }
}

.serviceRelatedCol {
   position: relative;
   width: calc(50% - (85px / 2));
}

@media screen and (max-width: 991px) {
   .serviceRelatedCol {
      width: calc(50% - (25px / 2));
   }
}

@media screen and (max-width: 575px) {
   .serviceRelatedCol {
      width: calc(50% - (10px / 2));
   }
}

.serviceRelatedCol::after {
   position: absolute;
   content: '';
   background: url(/business/service/dci/img/arrow-right.svg) no-repeat center;
   background-size: cover;
   width: 12px;
   height: 18px;
   right: 21px;
   top: 50%;
   transform: translateY(-50%);
   filter: brightness(5);
}

@media screen and (max-width: 575px) {
   .serviceRelatedCol::after {
      right: 10px;
      width: 9px;
      height: 10px;
   }
}

.serviceSection.--related .serviceColText {
   width: 100%;
   flex: 1;
}

/* @media screen and (max-width: 575px) {
   .serviceSection.--related .serviceRelated .serviceColText {
      font-size: 1.4em;
      line-height: calc(24 / 14);
   }
} */

.serviceRelatedAbs {
   position: absolute;
   background: rgba(19, 54, 100, .4);
   color: #FFF;
   width: 100%;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   padding-block: 27px 15px;
}

.serviceRelatedAbs .serviceColTitle {
   margin-bottom: 18px;
}

.serviceRelatedAbs .serviceColTitle,
.serviceRelatedAbs .serviceColText {
   text-align: center;
}

.serviceSection.--contact {
   background: #133664;
}

@media screen and (max-width: 767px) {
   .serviceRelatedAbs {
      padding-left: 30px;
      padding-block: 21px;
      min-height: 160px;
   }

   .serviceRelatedAbs .serviceColTitle {
      filter: drop-shadow(3px 0 7px #33386e);
      font-size: 2.4em;
      line-height: calc(32 / 24);
      margin-bottom: 5px;
      text-align: start;
   }

   .serviceRelatedAbs .serviceColText {
      filter: drop-shadow(3px 0 7px #33386e);
      padding-inline: 0;
      font-size: 1.8em;
      line-height: calc(24 / 18);
      text-align: start;
   }
}

@media screen and (max-width: 575px) {
   .serviceRelatedAbs {
      padding-left: 15px;
      padding-block: 7px;
      min-height: 80px;
   }

   .serviceRelatedAbs .serviceColTitle {
      font-size: 1.2em;
      line-height: calc(16 / 12);
      margin-bottom: 10px;
   }

   .serviceRelatedAbs .serviceColText {
      font-size: .9em;
      line-height: calc(12 / 9);
   }
}

.serviceSection.--contact .serviceSectionContainer {
   background-color: #FFF;
   padding: 54px 60px 70px 60px;
}

@media screen and (max-width: 991px) {
   .serviceSection.--contact .serviceSectionContainer {
      padding: 30px 0px;
      margin-inline: 15px;
   }
}

@media screen and (max-width: 767px) {
   .serviceSection.--contact .serviceSectionContainer {
      padding: 40px 30px 64px;
      margin-inline: 25px;
   }
}

@media screen and (max-width: 575px) {
   .serviceSection.--contact .serviceSectionContainer {
      padding: 15px;
      margin-inline: 15px;
   }
}

.serviceSection.--contact .serviceIntroLink {
   margin-inline: auto 62px;
   font-weight: 600;
}

@media screen and (max-width: 767px) {
   .serviceSection.--contact .serviceIntroLink {
      margin-inline: auto;
   }

   .serviceSection.--contact .serviceColText {
      text-align: center;
   }

   .serviceSection.--contact {
      padding-block: 50px;
   }
}

.serviceSection.--contact .serviceIntroLink img {
   margin-right: 10px;
}

.serviceSection.--contact .serviceSectionHeading {
   padding-bottom: 0;
}

.serviceSection.--contact .serviceRelated {
   align-items: flex-end;
   margin-bottom: 77px;
}

@media screen and (max-width:991px) {
   .serviceSection.--contact .serviceRelated {
      align-items: center;
   }
}

@media screen and (max-width: 575px) {
   .serviceSection.--contact .serviceRelated {
      margin-bottom: 50px;
   }
}

@media (min-width:575px) and (max-width: 767px) {
   .serviceSection.--contact .serviceSectionHeading::before {
      left: 12px;
   }

   .serviceSection.--contact .serviceIntroLink img {
      width: 41px;
      height: 31px;
   }
}

@media screen and (max-width: 767px) {
   .serviceSection.--contact .serviceRelated {
      gap: 46px;
   }

   .serviceSection.--contact .serviceIntroLink {
      padding-block: 52.5px;
   }

   .serviceSection.--contact .serviceRelated {
      margin-bottom: 50px;
   }
}

@media screen and (max-width: 575px) {
   .serviceSection.--contact .serviceRelated {
      gap: 27px;
   }

   .serviceSection.--contact .serviceIntroLink {
      padding-block: 25.5px;
   }

   .serviceSection.--contact .serviceRelated {
      margin-bottom: 27px;
   }
}

.floatingBtn {
   transition: opacity .4s ease-in-out, maxHeight .4s ease-in-out, visibility .4s ease-in-out;
   width: 100%;
   background: #eaeff3;
   position: fixed;
   right: 0;
   bottom: 82px;
   max-width: 240px;
   padding: 9px 12px 10px 13px;
   display: flex;
   flex-direction: column;
   gap: 13px;
   z-index: 100;

   opacity: 0;
   transform: translateY(20px);
   /* small slide effect */
   pointer-events: none;
   transition: opacity .4s ease, transform .4s ease;
}

.floatingBtn.show {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

.floatingBtnComponent {
   background: #FFF;
   padding: 16px 15px;
}

.floatingBtnText {
   color: #222222;
   text-align: center;
   font-weight: 700;
   font-size: 1.6em;
   line-height: calc(26 / 16);
   margin-bottom: 5px;
}

.floatingBtn .serviceIntroLink {
   color: #133664;
   font-weight: 700;
   font-size: 1.6em;
   padding-block: 8px;
   max-width: 185px;
   margin-inline: auto;
}

.floatingBtn .serviceIntroLink::after {
   right: 11px;
   width: 9px;
   height: 13px;
}

@media screen and (max-width: 991px) {
   .floatingBtn {
      bottom: 54px;
   }

   .floatingBtnComponent {
      padding: 10px;
   }

   .floatingBtnText {
      font-size: 1.4em;
      line-height: calc(24 / 14);
   }

   .floatingBtn .serviceIntroLink {
      font-size: 1.4em;
   }
}

@media screen and (max-width: 767px) {
   .floatingBtn {
      max-width: 630px;
      padding: 10px;
      flex-direction: row;
      bottom: 10px;
      right: unset;
      left: 0;
      border-radius: 10px;
      gap: 0;
   }

   .floatingBtnComponent {
      width: 100%;
   }

   /* .floatingBtnComponent:first-child {
      max-width: 360px;
   } */

   .floatingBtnComponent:last-child {
      max-width: 240px;
   }

   .floatingBtnComponent:first-child {
      border-radius: 10px 0 0 10px;
      padding: 5px 5px 5px 10px;
   }

   .floatingBtnComponent:last-child {
      border-radius: 0 10px 10px 0;
      padding: 5px 10px 5px 5px;
   }

   .floatingBtnText {
      display: none;
   }

   .floatingBtn .serviceIntroLink {
      width: 100%;
      font-size: 1.6em;
      border-radius: 10px;
      /* max-width: 220px; */
      padding-block: 17px;
   }

   .floatingBtnComponent:first-child .serviceIntroLink {
      width: 100%;
      max-width: 360px;
   }

   .floatingBtnComponent:last-child .serviceIntroLink {
      width: 100%;
      max-width: 240px;
   }
}

@media (min-width: 575px) and (max-width:686px) {
   .floatingBtn {
      max-width: 500px;
   }
}

@media screen and (max-width: 575px) {
   .floatingBtn {
      max-width: 315px;
      gap: 0;
      border-radius: 5px;
      padding: 4px 5px;
      align-items: center;
   }

   .floatingBtnComponent {
      width: fit-content;
      padding: 5px;
      border-radius: 5px;
   }

   .floatingBtnComponent:first-child {
      border-radius: 5px 0 0 5px;
      padding: 2.5px 2.5px 2.5px 5px;
   }

   .floatingBtnComponent:last-child {
      border-radius: 0 5px 5px 0;
      padding: 2.5px 5px 2.5px 2.5px;
   }

   .floatingBtn .serviceIntroLink {
      border-radius: 5px;
      font-size: 1.3em;
       padding: 10px 15px 10px 5px;
   }

   .floatingBtn .serviceIntroLink::after {
      width: 8px;
      height: 12px;
      right: 5px;
   }

   .floatingBtnComponent:first-child .serviceIntroLink {
      width: 175px;
   }

   .floatingBtnComponent:last-child .serviceIntroLink {
      width: 115px;
   }
}

.serviceSectionSubtitleFixed {
   max-width: 474px;
   margin-inline: auto 540px;
   display: block;
}

@media screen and (max-width: 1081px) {
   .serviceSectionSubtitleFixed {
      margin-inline: 0 auto;
   }
}

@media screen and (max-width: 991px) {
   .serviceSectionSubtitleFixed {
      margin-inline: 25px auto;
   }
}

@media screen and (max-width: 767px) {
   .serviceSectionSubtitleFixed {
      max-width: 100%;
      margin-inline: 16px auto;
   }
}