@charset "UTF-8";
/* Scss Document */
/* color */
/* media queries*/
/*========== .main_box ==========*/
.main_box {
  display: flex;
  max-width: 1600px;
  margin: 0 auto; }
  @media screen and (max-width: 899px) {
    .main_box {
      display: block; } }
  .main_box .main_slider {
    width: 70%;
    padding: 0 0 0 .5rem; }
    @media screen and (max-width: 899px) {
      .main_box .main_slider {
        width: 100%;
        padding: 0; } }
  .main_box .main_link {
    width: 29%;
    text-align: center;
    padding: .2rem 0 0 0;
    /*画像パターン*/
    /*ul.block {
    	li {
    		list-style: none;
    		padding: .2rem .3rem;
    		&:first-of-type {
    			padding-top: 0;
    		}
    		&:last-of-type {
    			padding-bottom: 0;
    		}
    	}
    }*/
    /*テキスト4つパターン*/ }
    @media screen and (max-width: 1000px) {
      .main_box .main_link ul.block li {
        padding: .2rem .3rem; } }
    @media screen and (max-width: 899px) {
      .main_box .main_link {
        width: 100%; }
        .main_box .main_link ul.block {
          display: flex;
          flex-wrap: wrap;
          justify-content: center; }
          .main_box .main_link ul.block li {
            width: 48%; }
            .main_box .main_link ul.block li:first-of-type {
              padding-top: .2rem; }
            .main_box .main_link ul.block li:last-of-type {
              padding-bottom: .2rem; } }
    .main_box .main_link ul.block_color li {
      list-style: none;
      background-color: #F3DE28;
      margin: .2rem;
      border-left: 8px #47463b solid; }
      .main_box .main_link ul.block_color li:first-of-type {
        margin-top: 0; }
      .main_box .main_link ul.block_color li:last-of-type {
        margin-bottom: 0; }
      .main_box .main_link ul.block_color li.point {
        background-color: #FF4490;
        border-left: none; }
        .main_box .main_link ul.block_color li.point .text .title {
          color: #fff; }
      .main_box .main_link ul.block_color li a {
        display: flex;
        padding: .3rem;
        align-items: center; }
        .main_box .main_link ul.block_color li a:hover {
          opacity: 0.9;
          background-color: rgba(255, 255, 255, 0.7);
          text-decoration: none; }
      .main_box .main_link ul.block_color li .img {
        width: 24%; }
      .main_box .main_link ul.block_color li .text {
        width: 74%;
        padding: 0 0 0 .5rem; }
        .main_box .main_link ul.block_color li .text .subTitle {
          background-color: #fff;
          color: #47463b;
          font-size: .8rem;
          margin: .3rem 0;
          padding: .2rem 0;
          border-radius: .5rem; }
        .main_box .main_link ul.block_color li .text .title {
          color: #47463b;
          font-weight: bold;
          font-size: 1rem; }
    @media screen and (max-width: 899px) {
      .main_box .main_link ul.block_color {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; }
        .main_box .main_link ul.block_color li {
          width: 48%; } }
    @media screen and (max-width: 767px) {
      .main_box .main_link ul.block_color li {
        width: 98%; } }

/*========== advantage ==========*/
.advantage {
  background: url("../img/advantage_bg.jpg") no-repeat;
  background-position: bottom center;
  background-size: cover; }
  .advantage .inner .advantage_text {
    padding: 3rem 4rem;
    text-align: center; }
    @media screen and (max-width: 767px) {
      .advantage .inner .advantage_text {
        padding: 1.5rem 1rem; } }
    .advantage .inner .advantage_text .advantage_title {
      font-size: 1.9rem;
      font-weight: bold;
      padding: 0 0 2.5rem 0; }
      @media screen and (max-width: 767px) {
        .advantage .inner .advantage_text .advantage_title {
          font-size: 1.5rem; } }
    .advantage .inner .advantage_text p {
      font-size: 1.4rem;
      text-align: center;
      padding: 0 5% 2rem 5%;
      line-height: 200%; }
      .advantage .inner .advantage_text p:last-of-type {
        font-size: 1.2rem;
        text-align: center; }

/*========== end advantage ==========*/
/*========== top-item ==========*/
.top-item {
  border-top: #F3DE28 8px solid;
  background: #fff;
  margin: 0 0 2rem 0;
  padding: 2rem 1rem 1rem 1rem;
  /*========== service_box ==========*/
  /*========== end .service_box ==========*/
  /*========== end case_study ==========*/
  /*========== document ==========*/
  /*========== end document ==========*/
  /*========== useful_info ==========*/
  /*========== end useful_info ==========*/
  /*========== end news ==========*/
  /*========== end about_us ==========*/
  /*========== .problems(css/problemsの.problemと同一) ==========*/
  /*========== end .problems ==========*/ }
  .top-item h2 {
    font-size: 1.5rem;
    font-weight: bold; }
    .top-item h2 + p {
      padding: 1rem; }
  .top-item .link_more {
    margin: 1.5rem 0 1rem 0;
    text-align: right; }
    .top-item .link_morea {
      display: block;
      width: 100%;
      height: 100%; }
  .top-item .outsorcing {
    background: url("../img/square_outsorcing.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .it-solution {
    background: url("../img/square_it-solution.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .payroll {
    background: url("../img/square_payroll.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .logistics {
    background: url("../img/square_logistics.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .document-shipping {
    background: url("../img/square_document-shipping.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .salesforce {
    background: url("../img/square_salesforce.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .rpa {
    background: url("../img/square_rpa.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .scanning {
    background: url("../img/square_scanning.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .subscription {
    background: url("../img/square_subscription.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .dx-bpo {
    background: url("../img/square_dx-bpo.jpg") no-repeat 50% 50%;
    background-size: cover; }
  .top-item .bpo_cloud {
    background-color: #95927a;
    padding: .7rem 1rem 0 1rem; }
  .top-item .service_box {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 2rem; }
    @media screen and (max-width: 640px) {
      .top-item .service_box {
        display: block;
        padding: 0 1rem; } }
    .top-item .service_box .item {
      width: calc(100%/3);
      /*border-right: 1px $subColor solid;*/
      box-sizing: border-box;
      color: #fff;
      padding: 1rem;
      position: relative;
      /*@include max899 {
      	border-right: none;
      	border-bottom: 1px $subColor solid;
      }*/ }
      .top-item .service_box .item:nth-of-type(odd) {
        background-color: #f2f2f2; }
      .top-item .service_box .item:nth-of-type(3n) {
        border-right: none; }
      .top-item .service_box .item ul {
        margin: 0;
        padding: 0; }
        .top-item .service_box .item ul li {
          padding: .3rem .3rem .3rem 1rem;
          color: #47463b;
          list-style: none; }
          .top-item .service_box .item ul li a {
            color: #47463b;
            position: inherit; }
          .top-item .service_box .item ul li:first-of-type {
            padding: .3rem;
            background-color: rgba(149, 146, 122, 0.3); }
            .top-item .service_box .item ul li:first-of-type:before {
              content: "■";
              font-size: 1.2rem; }
      @media screen and (max-width: 899px) {
        .top-item .service_box .item {
          width: 100%; }
          .top-item .service_box .item br {
            display: none; } }
      .top-item .service_box .item a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden; }
        .top-item .service_box .item a:hover {
          opacity: 0.4;
          filter: alpha(opacity=40);
          background: #fff;
          text-decoration: none; }
      .top-item .service_box .item p:first-of-type {
        font-weight: bold;
        font-size: 1rem;
        padding: 0 0 .4rem 0;
        border-bottom: #fff 1px solid;
        margin: 0 0 .4rem 0; }
      .top-item .service_box .item p:nth-of-type(2) {
        font-size: .8rem; }
      .top-item .service_box .item .bpo_title {
        background-color: #F3DE28;
        color: #47463b;
        font-weight: bold;
        padding: .1rem 0;
        margin: 0 0 .5rem 0;
        text-align: center;
        font-size: .8rem; }
    .top-item .service_box .bpo_cloud {
      padding: .7rem 1rem 1rem 1rem; }
      @media screen and (max-width: 899px) {
        .top-item .service_box .bpo_cloud {
          width: 100%; } }
  .top-item .case_study {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 0 1rem; }
    @media screen and (max-width: 899px) {
      .top-item .case_study {
        display: block; } }
    @media screen and (max-width: 640px) {
      .top-item .case_study {
        padding: 0 1rem; } }
    .top-item .case_study .item {
      width: calc(100% / 3);
      border: 1px #d1cdce solid;
      box-sizing: border-box;
      color: #47463b;
      position: relative;
      /*@include max640 {
      	width: 100%;
      }*/ }
      @media screen and (max-width: 980px) {
        .top-item .case_study .item {
          width: 100%; } }
      .top-item .case_study .item a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden; }
        .top-item .case_study .item a:hover {
          opacity: 0.4;
          filter: alpha(opacity=40);
          background: #fff;
          text-decoration: none; }
      .top-item .case_study .item .outsorcing,
      .top-item .case_study .item .it-solution,
      .top-item .case_study .item .hr-solution,
      .top-item .case_study .item .logistics,
      .top-item .case_study .item .document-shipping,
      .top-item .case_study .item .bpo_cloud {
        padding: 2rem 0 .3rem 0; }
        .top-item .case_study .item .outsorcing > p,
        .top-item .case_study .item .it-solution > p,
        .top-item .case_study .item .hr-solution > p,
        .top-item .case_study .item .logistics > p,
        .top-item .case_study .item .document-shipping > p,
        .top-item .case_study .item .bpo_cloud > p {
          text-align: right;
          margin: 0 1rem 1rem 0;
          color: #fff;
          /*margin: 0 1rem 0 .5rem;*/
          font-size: .9rem; }
        @media screen and (min-width: 768px) {
          .top-item .case_study .item .outsorcing br,
          .top-item .case_study .item .it-solution br,
          .top-item .case_study .item .hr-solution br,
          .top-item .case_study .item .logistics br,
          .top-item .case_study .item .document-shipping br,
          .top-item .case_study .item .bpo_cloud br {
            display: none; } }
        .top-item .case_study .item .outsorcing .title,
        .top-item .case_study .item .it-solution .title,
        .top-item .case_study .item .hr-solution .title,
        .top-item .case_study .item .logistics .title,
        .top-item .case_study .item .document-shipping .title,
        .top-item .case_study .item .bpo_cloud .title {
          background: rgba(255, 255, 255, 0.8);
          padding: .3rem;
          font-size: 1rem;
          height: 3.8rem;
          margin: 2rem 0 0 0;
          color: #47463b; }
          @media screen and (max-width: 899px) {
            .top-item .case_study .item .outsorcing .title,
            .top-item .case_study .item .it-solution .title,
            .top-item .case_study .item .hr-solution .title,
            .top-item .case_study .item .logistics .title,
            .top-item .case_study .item .document-shipping .title,
            .top-item .case_study .item .bpo_cloud .title {
              height: 2.3rem; } }
          @media screen and (max-width: 640px) {
            .top-item .case_study .item .outsorcing .title,
            .top-item .case_study .item .it-solution .title,
            .top-item .case_study .item .hr-solution .title,
            .top-item .case_study .item .logistics .title,
            .top-item .case_study .item .document-shipping .title,
            .top-item .case_study .item .bpo_cloud .title {
              height: auto; } }
      .top-item .case_study .item .case_lead {
        padding: 1rem .5rem; }
  .top-item .document {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    padding: 0 1rem; }
    @media screen and (max-width: 640px) {
      .top-item .document {
        display: block; } }
    .top-item .document .item {
      border: 1px #d1cdce solid;
      box-sizing: border-box;
      color: #47463b;
      padding: .5rem;
      width: calc((100% - 1.5rem) / 3);
      position: relative; }
      @media screen and (max-width: 899px) {
        .top-item .document .item {
          width: 50%;
          margin: 0 .5rem 1rem 0; } }
      @media screen and (max-width: 640px) {
        .top-item .document .item {
          width: 100%; } }
      .top-item .document .item .title {
        font-weight: bold;
        padding: .5rem;
        text-align: center; }
        @media screen and (max-width: 640px) {
          .top-item .document .item .title br {
            display: none; } }
      .top-item .document .item a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden; }
        .top-item .document .item a:hover {
          opacity: 0.4;
          filter: alpha(opacity=40);
          background: #fff;
          text-decoration: none; }
  .top-item .useful_info {
    padding: 0 2rem; }
    @media screen and (max-width: 640px) {
      .top-item .useful_info {
        padding: 0 1rem; } }
    .top-item .useful_info a:hover {
      opacity: 0.4;
      filter: alpha(opacity=40);
      background: #fff;
      text-decoration: none;
      color: inherit; }
    .top-item .useful_info .article {
      border: 1px #333 solid;
      padding: 1rem;
      margin: 0 0 1rem 0;
      justify-content: center;
      /*.link_more {
      	margin: 0 .5rem .5rem .5rem; 
      	text-align: right;
      	clear: both;
      }*/ }
      @media screen and (max-width: 767px) {
        .top-item .useful_info .article {
          padding: .5rem; } }
      .top-item .useful_info .article .imgbox {
        padding: .5rem;
        text-align: center;
        float: left;
        max-width: 25%; }
        @media screen and (max-width: 899px) {
          .top-item .useful_info .article .imgbox {
            max-width: 35%; } }
        @media screen and (max-width: 767px) {
          .top-item .useful_info .article .imgbox {
            max-width: 40%; } }
        @media screen and (max-width: 640px) {
          .top-item .useful_info .article .imgbox {
            max-width: 50%; } }
        @media screen and (max-width: 480px) {
          .top-item .useful_info .article .imgbox {
            max-width: 100%;
            float: none; } }
      .top-item .useful_info .article .textbox {
        padding: .5rem; }
        .top-item .useful_info .article .textbox .day {
          text-align: right;
          font-size: .8rem;
          font-weight: 100;
          margin: .5rem 0; }
        .top-item .useful_info .article .textbox .title {
          background: #f9efaa;
          color: #47463b;
          padding: .5rem;
          font-weight: bold; }
          @media screen and (max-width: 899px) {
            .top-item .useful_info .article .textbox .title {
              display: block; } }
        .top-item .useful_info .article .textbox .use_lead {
          margin: 0; }
  .top-item .news {
    padding: 0 2rem; }
    @media screen and (max-width: 640px) {
      .top-item .news {
        padding: 0 1rem; } }
    .top-item .news ul li {
      display: flex;
      border-bottom: #333 1px dotted;
      padding: .5rem 0;
      margin: 0 0 .5rem 0; }
      @media screen and (max-width: 640px) {
        .top-item .news ul li {
          display: block; } }
      .top-item .news ul li .day {
        text-align: right;
        padding: 0 1rem;
        font-weight: bold; }
        @media screen and (max-width: 640px) {
          .top-item .news ul li .day {
            text-align: left; } }
      .top-item .news ul li .text {
        width: 100%; }
      .top-item .news ul li .info_press,
      .top-item .news ul li .info_notice,
      .top-item .news ul li .info_guidance,
      .top-item .news ul li .info_service {
        border-radius: .8rem;
        color: #fff;
        padding: 0;
        width: 30%;
        text-align: center;
        font-size: .8rem;
        margin: 0 0 .3rem 0; }
        @media screen and (max-width: 899px) {
          .top-item .news ul li .info_press,
          .top-item .news ul li .info_notice,
          .top-item .news ul li .info_guidance,
          .top-item .news ul li .info_service {
            width: 50%; } }
        @media screen and (max-width: 640px) {
          .top-item .news ul li .info_press,
          .top-item .news ul li .info_notice,
          .top-item .news ul li .info_guidance,
          .top-item .news ul li .info_service {
            width: 100%; } }
      .top-item .news ul li .info_press {
        background: #E0053A; }
      .top-item .news ul li .info_notice {
        background: #0840B2; }
      .top-item .news ul li .info_guidance {
        background: #0B7A1B; }
      .top-item .news ul li .info_service {
        background: #DD8507; }
    .top-item .news dl {
      margin: 2rem 0;
      display: flex;
      flex-wrap: wrap; }
      @media screen and (max-width: 640px) {
        .top-item .news dl {
          display: block; } }
      .top-item .news dl dt {
        width: 15%;
        border-bottom: #333 1px dotted;
        /*float: left;*/
        padding: .5rem;
        margin: 0 0 .5rem 0; }
        @media screen and (max-width: 640px) {
          .top-item .news dl dt {
            width: 100%;
            border: none;
            padding: .5rem .5rem 0 .5rem;
            margin: 0; } }
      .top-item .news dl dd {
        width: 85%;
        padding: .5rem .5rem .5rem 0;
        border-bottom: #333 1px dotted; }
        @media screen and (max-width: 640px) {
          .top-item .news dl dd {
            width: 100%;
            padding: .5rem; } }
        .top-item .news dl dd .info_press,
        .top-item .news dl dd .info_notice,
        .top-item .news dl dd .info_guidance,
        .top-item .news dl dd .info_service {
          border-radius: .8rem;
          color: #fff;
          padding: 0;
          width: 30%;
          text-align: center;
          font-size: .8rem;
          margin: 0 0 .3rem 0; }
          @media screen and (max-width: 899px) {
            .top-item .news dl dd .info_press,
            .top-item .news dl dd .info_notice,
            .top-item .news dl dd .info_guidance,
            .top-item .news dl dd .info_service {
              width: 50%; } }
          @media screen and (max-width: 640px) {
            .top-item .news dl dd .info_press,
            .top-item .news dl dd .info_notice,
            .top-item .news dl dd .info_guidance,
            .top-item .news dl dd .info_service {
              width: 100%; } }
        .top-item .news dl dd .info_press {
          background: #E0053A; }
        .top-item .news dl dd .info_notice {
          background: #0840B2; }
        .top-item .news dl dd .info_guidance {
          background: #0B7A1B; }
        .top-item .news dl dd .info_service {
          background: #DD8507; }
  .top-item .about_us {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 2rem 0;
    padding: 0 1rem; }
    @media screen and (max-width: 899px) {
      .top-item .about_us {
        display: block; } }
    @media screen and (max-width: 640px) {
      .top-item .about_us {
        padding: 0 1rem; } }
    .top-item .about_us .item {
      border: #47463b 1px solid;
      box-sizing: border-box;
      font-size: 1.8rem;
      text-align: right;
      width: calc((100% - 1rem) / 2);
      height: 6.5rem; }
      .top-item .about_us .item a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 3rem 1rem .5rem 0; }
        .top-item .about_us .item a:hover {
          opacity: 0.4;
          filter: alpha(opacity=40);
          background: #fff;
          text-decoration: none; }
      @media screen and (max-width: 899px) {
        .top-item .about_us .item {
          width: 100%;
          font-size: 1.5rem;
          margin-bottom: 1rem; } }
      .top-item .about_us .item:first-of-type {
        background: url("../img/company_head_bg.jpg") no-repeat 50% 50%;
        background-color: rgba(255, 255, 255, 0.7);
        background-blend-mode: lighten;
        background-size: cover; }
      .top-item .about_us .item:last-of-type {
        background: url("../img/about_us02.jpg") no-repeat 0% 15%;
        background-color: rgba(255, 255, 255, 0.7);
        background-blend-mode: lighten;
        background-size: cover; }
  .top-item .problems {
    padding: 0 2rem; }
    .top-item .problems .item {
      margin: 1rem 0;
      border-bottom: #47463b 1px dotted;
      padding: 0 0 1rem 0;
      display: flex;
      flex-wrap: wrap; }
      .top-item .problems .item:last-of-type {
        border-bottom: none; }
      .top-item .problems .item .title {
        color: #47463b;
        background: #F5F5F5;
        width: 20%;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin: auto;
        padding: 1.6rem 0; }
        @media screen and (max-width: 767px) {
          .top-item .problems .item .title {
            width: 100%;
            margin: 0 0 1rem;
            padding: .5rem 0; } }
      .top-item .problems .item dl {
        width: calc(100% - 20%);
        padding-left: 20px;
        margin: 0; }
        @media screen and (max-width: 767px) {
          .top-item .problems .item dl {
            width: 100%;
            padding-left: 0; } }
      .top-item .problems .item dt {
        margin-bottom: .5rem; }
      .top-item .problems .item dd::before {
        font-family: "Font Awesome 5 Free";
        content: " \f0da";
        font-weight: 900;
        color: #f26628;
        margin-right: .5rem; }
      .top-item .problems .item dd a {
        text-decoration: underline; }

/*========== end top-item ==========*/
/*========== IE用202206まで ==========*/
.img_box img.img-fluid {
  width: 100% !important; }

/*========== /IE用202206まで ==========*/