@charset "UTF-8";
/*
brakepoint
*/
/* line 28, service.scss */
main {
  counter-reset: number number02 number03 0; }

/* line 33, service.scss */
.pagetitle.pagetopimage {
  background-image: url("../img/topimage_service.jpg"); }
  @media screen and (max-width: 800px) {
    /* line 33, service.scss */
    .pagetitle.pagetopimage {
      background-image: url("../img/topimage_service_sp.jpg"); } }

/*
service00
*/
/* line 45, service.scss */
.service00 {
  padding-bottom: 170px; }
  @media screen and (max-width: 800px) {
    /* line 45, service.scss */
    .service00 {
      padding-bottom: 125px; } }

/* line 52, service.scss */
.overview-content {
  display: flex;
  gap: 0 2.9%;
  width: 100%; }
  @media screen and (max-width: 800px) {
    /* line 52, service.scss */
    .overview-content {
      flex-wrap: wrap;
      gap: 75px 0; } }
  /* line 60, service.scss */
  .overview-content .overview {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
    padding: 0 30px 50px; }
    @media screen and (max-width: 800px) {
      /* line 60, service.scss */
      .overview-content .overview {
        padding: 0 25px 45px; } }
    /* line 70, service.scss */
    .overview-content .overview h3 {
      font-size: 20px;
      text-align: center;
      line-height: 1.4;
      margin: -30px 0 20px;
      counter-increment: number; }
      /* line 76, service.scss */
      .overview-content .overview h3::before {
        display: block;
        color: #008CAF;
        font-family: "Inter Tight", sans-serif;
        font-size: 40px;
        font-weight: 200;
        line-height: 1.4;
        text-align: center;
        content: counter(number,decimal-leading-zero); }
    /* line 87, service.scss */
    .overview-content .overview p {
      font-size: 13px;
      line-height: 1.46;
      text-align: center;
      margin-bottom: 25px; }
    /* line 93, service.scss */
    .overview-content .overview .system_img {
      margin: 0 auto 20px;
      text-align: center; }
    /* line 97, service.scss */
    .overview-content .overview .overview-inner {
      padding: 15px;
      border-top: 1px solid rgba(0, 0, 0, 0.2); }
      /* line 100, service.scss */
      .overview-content .overview .overview-inner h4 {
        color: #008CAF;
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 5px; }
      /* line 107, service.scss */
      .overview-content .overview .overview-inner ul li {
        color: #4D5156;
        font-size: 13px;
        line-height: 1.46;
        margin: 0 0 0 1em; }
        /* line 112, service.scss */
        .overview-content .overview .overview-inner ul li::before {
          content: "・";
          margin-left: -1em; }
      /* line 118, service.scss */
      .overview-content .overview .overview-inner.nb {
        border: none;
        padding: 0 15px 10px; }
      /* line 122, service.scss */
      .overview-content .overview .overview-inner.half {
        display: flex;
        justify-content: space-between;
        padding: 15px 0; }
        /* line 126, service.scss */
        .overview-content .overview .overview-inner.half h4 {
          width: 45%; }
        /* line 129, service.scss */
        .overview-content .overview .overview-inner.half ul {
          width: 53%; }
    /* line 134, service.scss */
    .overview-content .overview .btn_pagelink {
      position: absolute;
      left: 50%;
      bottom: -24px;
      transform: translateX(-50%);
      width: 48px;
      height: 48px; }
      /* line 141, service.scss */
      .overview-content .overview .btn_pagelink a {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        border-radius: 50%;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16); }
        /* line 148, service.scss */
        .overview-content .overview .btn_pagelink a .arrow-d {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 16px;
          height: 8px;
          transform: translate(-50%, -50%);
          overflow: hidden; }
          /* line 156, service.scss */
          .overview-content .overview .btn_pagelink a .arrow-d::before, .overview-content .overview .btn_pagelink a .arrow-d::after {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: "";
            background-image: url("../img/arrow_d_blue.svg");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
          /* line 171, service.scss */
          .overview-content .overview .btn_pagelink a .arrow-d::before {
            animation: slidedownoff1 0.3s linear 0s forwards; }
            @media screen and (max-width: 800px) {
              /* line 171, service.scss */
              .overview-content .overview .btn_pagelink a .arrow-d::before {
                animation: none; } }
          /* line 177, service.scss */
          .overview-content .overview .btn_pagelink a .arrow-d::after {
            animation: slidedownoff2 0.3s linear 0s forwards; }
            @media screen and (max-width: 800px) {
              /* line 177, service.scss */
              .overview-content .overview .btn_pagelink a .arrow-d::after {
                animation: none; } }
        /* line 186, service.scss */
        .overview-content .overview .btn_pagelink a:hover .arrow-d::before {
          animation: slidedown1 0.3s linear 0s forwards; }
          @media screen and (max-width: 800px) {
            /* line 186, service.scss */
            .overview-content .overview .btn_pagelink a:hover .arrow-d::before {
              animation: none; } }
        /* line 192, service.scss */
        .overview-content .overview .btn_pagelink a:hover .arrow-d::after {
          animation: slidedown2 0.3s linear 0s forwards; }
          @media screen and (max-width: 800px) {
            /* line 192, service.scss */
            .overview-content .overview .btn_pagelink a:hover .arrow-d::after {
              animation: none; } }

/* line 206, service.scss */
.service-content {
  padding: 90px 0; }
  @media screen and (max-width: 800px) {
    /* line 206, service.scss */
    .service-content {
      padding: 60px 0; } }
  /* line 211, service.scss */
  .service-content::before, .service-content::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    content: ""; }
  /* line 219, service.scss */
  .service-content::before {
    top: 0px;
    background-color: rgba(0, 0, 0, 0.2); }
  /* line 223, service.scss */
  .service-content::after {
    top: 1px;
    background-color: #FFFFFF; }
  /* line 227, service.scss */
  .service-content:first-of-type {
    padding: 0 0 90px; }
    @media screen and (max-width: 800px) {
      /* line 227, service.scss */
      .service-content:first-of-type {
        padding: 0 0 60px; } }
    /* line 232, service.scss */
    .service-content:first-of-type::before, .service-content:first-of-type::after {
      display: none; }
  /* line 237, service.scss */
  .service-content:last-child {
    padding: 90px 0 0; }
    @media screen and (max-width: 800px) {
      /* line 237, service.scss */
      .service-content:last-child {
        padding: 60px 0 0; } }
  /* line 243, service.scss */
  .service-content h3 {
    font-size: 30px;
    line-height: 1.4;
    counter-increment: number02; }
    @media screen and (max-width: 800px) {
      /* line 243, service.scss */
      .service-content h3 {
        font-size: 20px;
        line-height: 1.1; } }
    /* line 251, service.scss */
    .service-content h3::before {
      display: block;
      color: #008CAF;
      font-family: "Inter Tight", sans-serif;
      font-size: 100px;
      font-weight: 200;
      line-height: 1.2;
      content: counter(number02,decimal-leading-zero); }
      @media screen and (max-width: 800px) {
        /* line 251, service.scss */
        .service-content h3::before {
          font-size: 60px; } }
  /* line 264, service.scss */
  .service-content h4 {
    font-size: 20px;
    margin-bottom: 15px; }

/* line 269, service.scss */
.read_service {
  font-size: 30px;
  line-height: 1.6;
  margin-bottom: 30px; }
  @media screen and (max-width: 800px) {
    /* line 269, service.scss */
    .read_service {
      font-size: 25px;
      margin-bottom: 25px; } }

/* line 278, service.scss */
.cap_service {
  margin: 0; }

/* line 283, service.scss */
.crlist {
  margin-bottom: 60px; }
  @media screen and (max-width: 800px) {
    /* line 283, service.scss */
    .crlist {
      margin-bottom: 45px; } }
  /* line 288, service.scss */
  .crlist li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 30px; }
    /* line 292, service.scss */
    .crlist li:last-child {
      margin-bottom: 0; }
    /* line 295, service.scss */
    .crlist li::before, .crlist li::after {
      position: absolute;
      content: "";
      border-radius: 50%; }
    /* line 301, service.scss */
    .crlist li::before {
      top: 10px;
      left: 3px;
      width: 8px;
      height: 8px;
      background-color: #008CAF; }
    /* line 308, service.scss */
    .crlist li::after {
      top: 7px;
      left: 0;
      width: 14px;
      height: 14px;
      border: 1px solid #008CAF; }
      @media screen and (max-width: 800px) {
        /* line 308, service.scss */
        .crlist li::after {
          width: 14px;
          height: 14px; } }

/* line 321, service.scss */
.servicelist {
  position: relative;
  display: flex;
  gap: 0 4.8%; }
  @media screen and (max-width: 800px) {
    /* line 321, service.scss */
    .servicelist {
      flex-wrap: wrap;
      gap: 25px 0; } }
  /* line 329, service.scss */
  .servicelist li {
    width: 100%;
    min-height: 384px;
    margin: 0;
    padding: 0; }
    @media screen and (max-width: 800px) {
      /* line 329, service.scss */
      .servicelist li {
        min-height: 288px; } }
    /* line 337, service.scss */
    .servicelist li a {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
      padding: 35px 30px 0;
      overflow: hidden;
      border-radius: 16px; }
      @media screen and (max-width: 800px) {
        /* line 337, service.scss */
        .servicelist li a {
          padding: 30px 30px 0; } }
      /* line 349, service.scss */
      .servicelist li a::before {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 16px; }
      /* line 360, service.scss */
      .servicelist li a::before {
        background-position: center center;
        transition: transform 0.3s ease-out; }
      /* line 364, service.scss */
      .servicelist li a .bn_text {
        position: relative;
        color: #FFFFFF;
        display: block;
        font-family: "Inter Tight", sans-serif;
        font-size: 55px;
        font-weight: 200;
        line-height: 1.2;
        z-index: 2;
        margin-bottom: 25px; }
        @media screen and (max-width: 800px) {
          /* line 364, service.scss */
          .servicelist li a .bn_text {
            font-size: 50px;
            margin-bottom: 15px; } }
      /* line 379, service.scss */
      .servicelist li a .bn_title {
        position: relative;
        color: #FFFFFF;
        display: block;
        font-size: 25px;
        font-weight: 600;
        line-height: 1.4;
        z-index: 2; }
        @media screen and (max-width: 800px) {
          /* line 379, service.scss */
          .servicelist li a .bn_title {
            font-size: 20px; } }
      /* line 392, service.scss */
      .servicelist li a:hover::before {
        transform: scale(1.1); }
        @media screen and (max-width: 800px) {
          /* line 392, service.scss */
          .servicelist li a:hover::before {
            transform: none; } }
    /* line 402, service.scss */
    .servicelist li:nth-child(1) a::before {
      background-image: url("../img/bg_system01.jpg"); }
    /* line 409, service.scss */
    .servicelist li:nth-child(2) a::before {
      background-image: url("../img/bg_system02.jpg"); }

/* line 416, service.scss */
.datacenter {
  background-color: #FFFFFF;
  padding: 30px 25px;
  border-radius: 16px; }
  /* line 420, service.scss */
  .datacenter dl {
    margin: 0;
    padding: 0; }
    /* line 423, service.scss */
    .datacenter dl dt {
      color: #008CAF;
      font-size: 18px;
      line-height: 1.5;
      margin: 0;
      padding: 0; }
      @media screen and (max-width: 800px) {
        /* line 423, service.scss */
        .datacenter dl dt {
          font-size: 17px; } }
    /* line 433, service.scss */
    .datacenter dl dd {
      line-height: 1.6;
      margin: 0 0 20px;
      padding: 0; }
      /* line 437, service.scss */
      .datacenter dl dd:last-child {
        margin-bottom: 0; }

/*
features
*/
/* line 449, service.scss */
.features .slide_text {
  top: -15px; }
  @media screen and (max-width: 800px) {
    /* line 449, service.scss */
    .features .slide_text {
      top: 0; } }

/* line 456, service.scss */
.service-child-content {
  padding: 90px 0; }
  @media screen and (max-width: 800px) {
    /* line 456, service.scss */
    .service-child-content {
      padding: 50px 0; } }
  /* line 461, service.scss */
  .service-child-content::before, .service-child-content::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    content: ""; }
  /* line 469, service.scss */
  .service-child-content::before {
    top: 0;
    background-color: rgba(0, 0, 0, 0.2); }
  /* line 473, service.scss */
  .service-child-content::after {
    top: 1px;
    background-color: #FFFFFF; }
  /* line 477, service.scss */
  .service-child-content:first-of-type {
    padding: 0 0 60px; }
    /* line 479, service.scss */
    .service-child-content:first-of-type::before, .service-child-content:first-of-type::after {
      display: none; }
  /* line 484, service.scss */
  .service-child-content:last-child {
    padding: 90px 0 0;
    margin-bottom: 135px; }
    @media screen and (max-width: 800px) {
      /* line 484, service.scss */
      .service-child-content:last-child {
        padding: 60px 0 0; } }
  @media screen and (max-width: 800px) {
    /* line 491, service.scss */
    .service-child-content .l-sticky {
      margin-bottom: 15px; } }
  /* line 496, service.scss */
  .service-child-content h3 {
    display: flex;
    align-items: center;
    color: #008CAF;
    font-family: "Inter Tight", sans-serif;
    font-size: 30px;
    font-weight: 500;
    counter-increment: number03; }
    @media screen and (max-width: 800px) {
      /* line 496, service.scss */
      .service-child-content h3 {
        font-size: 20px;
        line-height: 1.1; } }
    /* line 508, service.scss */
    .service-child-content h3::after {
      display: inline-block;
      color: #008CAF;
      font-family: "Inter Tight", sans-serif;
      font-size: 100px;
      font-weight: 200;
      line-height: 1.2;
      content: counter(number03,decimal-leading-zero); }
      @media screen and (max-width: 800px) {
        /* line 508, service.scss */
        .service-child-content h3::after {
          font-size: 60px; } }

/* line 525, service.scss */
.sc_img {
  position: relative;
  width: 100%;
  margin: 0 auto 90px;
  z-index: 1; }
  @media screen and (max-width: 800px) {
    /* line 525, service.scss */
    .sc_img {
      width: 85.7%;
      margin-bottom: 50px; } }
  /* line 534, service.scss */
  .sc_img img {
    width: 100%; }
  /* line 537, service.scss */
  .sc_img.bps_img {
    width: 94.9%;
    margin-top: -35px; }
    @media screen and (max-width: 800px) {
      /* line 537, service.scss */
      .sc_img.bps_img {
        width: 85.7%;
        margin-top: 0; } }
  /* line 545, service.scss */
  .sc_img.bpd_img {
    margin-bottom: 0; }

/* line 550, service.scss */
.bps p {
  position: relative;
  font-size: 25px;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: #FFFFFF;
  text-decoration-thickness: 4px;
  text-underline-offset: 7px;
  margin: 0;
  z-index: 0; }
  @media screen and (max-width: 800px) {
    /* line 550, service.scss */
    .bps p {
      font-size: 20px;
      margin-bottom: 25px; } }

/* line 569, service.scss */
.achievements {
  margin-top: 135px; }
  /* line 571, service.scss */
  .achievements .slide_text {
    top: -80px; }
    @media screen and (max-width: 800px) {
      /* line 574, service.scss */
      .achievements .slide_text span:nth-child(8) {
        display: block; } }

/* line 582, service.scss */
.achievements-list {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 3%;
  margin-bottom: 35px; }
  @media screen and (max-width: 800px) {
    /* line 582, service.scss */
    .achievements-list {
      gap: 25px 0; } }
  /* line 590, service.scss */
  .achievements-list li {
    width: 31.3%;
    margin: 0; }
    @media screen and (max-width: 800px) {
      /* line 590, service.scss */
      .achievements-list li {
        width: 95.2%;
        margin: 0 auto; } }
    /* line 597, service.scss */
    .achievements-list li span {
      position: relative;
      display: block;
      border-radius: 16px; }
      /* line 601, service.scss */
      .achievements-list li span.achievements_img {
        width: 100%;
        z-index: 0; }
        /* line 604, service.scss */
        .achievements-list li span.achievements_img img {
          width: 100%;
          border-radius: 16px; }
      /* line 609, service.scss */
      .achievements-list li span.achievements_title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 50px);
        min-height: 56px;
        line-height: 1.4;
        font-weight: 600;
        text-align: center;
        background-color: #FFFFFF;
        margin: -28px auto 0;
        z-index: 1; }

/* line 626, service.scss */
.teikyo {
  margin-bottom: 0; }

/* line 632, service.scss */
.banner ul {
  display: flex; }
  /* line 634, service.scss */
  .banner ul li {
    width: 100%;
    min-height: 288px;
    line-height: 1.4;
    margin: 0; }
    /* line 639, service.scss */
    .banner ul li a {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-decoration: none;
      overflow: hidden; }
      /* line 648, service.scss */
      .banner ul li a::before, .banner ul li a::after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        pointer-events: none; }
      /* line 661, service.scss */
      .banner ul li a::before {
        z-index: 0;
        transition: transform 0.3s ease-out; }
      /* line 665, service.scss */
      .banner ul li a::after {
        background-image: url("../img/bg_mesh02.png");
        mix-blend-mode: hard-light;
        z-index: 1; }
      /* line 670, service.scss */
      .banner ul li a .banner-content {
        position: relative;
        display: inline-block;
        z-index: 3;
        padding: 0 70px 30px 0; }
        @media screen and (max-width: 800px) {
          /* line 670, service.scss */
          .banner ul li a .banner-content {
            padding: 0 0 55px; } }
        /* line 678, service.scss */
        .banner ul li a .banner-content::before, .banner ul li a .banner-content::after {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 1px;
          content: "";
          pointer-events: none; }
        /* line 687, service.scss */
        .banner ul li a .banner-content::before {
          width: 100%;
          background-color: rgba(255, 255, 255, 0.5);
          z-index: 0; }
        /* line 692, service.scss */
        .banner ul li a .banner-content::after {
          width: 0%;
          background-color: #008CAF;
          z-index: 1;
          transition: width 0.3s ease-out; }
          @media screen and (max-width: 800px) {
            /* line 692, service.scss */
            .banner ul li a .banner-content::after {
              display: none; } }
        /* line 701, service.scss */
        .banner ul li a .banner-content .en_title {
          display: block;
          color: #008CAF;
          font-family: "Inter Tight", sans-serif;
          font-size: 15px;
          font-weight: 500;
          margin-bottom: 10px; }
          @media screen and (max-width: 800px) {
            /* line 701, service.scss */
            .banner ul li a .banner-content .en_title {
              margin-bottom: 45px; } }
        /* line 712, service.scss */
        .banner ul li a .banner-content .jp_title {
          display: block;
          color: #FFFFFF;
          font-size: 25px;
          font-weight: 500; }
          @media screen and (max-width: 800px) {
            /* line 712, service.scss */
            .banner ul li a .banner-content .jp_title {
              font-size: 22px;
              line-height: 1.5; } }
        /* line 722, service.scss */
        .banner ul li a .banner-content .btn_shosai {
          right: 0;
          bottom: 35px; }
          @media screen and (max-width: 800px) {
            /* line 722, service.scss */
            .banner ul li a .banner-content .btn_shosai {
              bottom: 10px; } }
      /* line 731, service.scss */
      .banner ul li a:hover::before {
        transform: scale(1.1); }
        @media screen and (max-width: 800px) {
          /* line 731, service.scss */
          .banner ul li a:hover::before {
            transform: none; } }
      /* line 738, service.scss */
      .banner ul li a:hover .banner-content::after {
        width: 100%; }
    /* line 746, service.scss */
    .banner ul li:nth-child(1) a::before {
      background-image: url("../img/bn_securities.jpg"); }
    /* line 753, service.scss */
    .banner ul li:nth-child(2) a::before {
      background-image: url("../img/bn_finance.jpg"); }
    /* line 759, service.scss */
    .banner ul li.current a {
      pointer-events: none; }
      /* line 761, service.scss */
      .banner ul li.current a::before {
        opacity: 0.2;
        transform: none; }
      /* line 765, service.scss */
      .banner ul li.current a .banner-content {
        padding: 0 0 30px; }
        @media screen and (max-width: 800px) {
          /* line 765, service.scss */
          .banner ul li.current a .banner-content {
            padding-bottom: 55px; } }
        /* line 770, service.scss */
        .banner ul li.current a .banner-content::before {
          background-color: #202124; }
        /* line 773, service.scss */
        .banner ul li.current a .banner-content::after {
          display: none; }
        /* line 776, service.scss */
        .banner ul li.current a .banner-content .en_title,
        .banner ul li.current a .banner-content .jp_title {
          color: #202124; }

/*# sourceMappingURL=service.css.map */