@charset "UTF-8";

body.page-template-payroll-services {
  color: #0a2d5a;
  .mt2040 {margin-top: 20px;}
  .mt2050 {margin-top: 20px;}
  .mt50 {margin-top: 50px;}

  @media (min-width: 768px) {
    .mt2040 {margin-top: 40px;}
    .mt2050 {margin-top: 50px;}
  }

  h1,h2,p {margin: inherit;}
  ul,ol {
    margin: inherit;
    padding: inherit;
    list-style: none;
  }

  .sp_text-center {text-align: center;}
  @media (min-width: 768px) {
    .sp_text-center {text-align: left;}
  }

  .bg-blue {
    background-color: #eef6ff;
  }

  .bg-gray {
    background-color: #f5f5f5;
  }
  /* PROVISION SECTION　- - - - - - - - - - - - - - - - - - - - - - - - - - */


  .label_header {
    margin: 50px auto 0;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #0a2d5a;

    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 20px;
  }
  /* label_header */

  .swiper01 .swiper-container .swiper-wrapper .swiper-slide {
    .slide_inner {
      position: absolute;
      width: calc(670% / 7.50);
      height: 90%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    .slide_contents {
      color: #fff;
      font-size: 20px;

      display: flex;
      flex-direction: column;
      height: 100%;

      h2 {
        line-height: 1.25;
        font-weight: 100;
        font-weight: bold;
      }
      &.row-reverse {
        h2 {text-align: right;}
      }
    }
    /* slide_contents */

    .label_white {
      font-size: 16px;
      font-weight: bold;
      color: #0a2d5a;
      background-color: #fff;
      display: block;
      width: 100%;
      padding: 4px 1em;
      margin-top: 15px;
    }
    /* label_white */

    .button_controll {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      margin-top: 20px;

      a {
        flex: 1;
        font-size: 14px;
        color: #fff;
        font-weight: bold;

        display: flex;
        align-items: center;
        justify-content: center;
        grid-column-gap: 5px;

        height: 44px;
        background-color: #0071bc;
        line-height: 1;

        position: relative;
        &:after {
          content: "";
          aspect-ratio: 1 / 1;
          width: 17.5px;
          height: 17.5px;

          background-image: url("../images/button_controll_circle_arrow.png");
          background-size: cover, cover;
          background-position: center, center;
          background-repeat: no-repeat, no-repeat;
        }
      }
    }
    /* button_controll */

    .badges {
      margin-top: auto;
      .zenkoku {
        display: none;
      }
    }
  }
  /* .swiper01 .swiper-container .swiper-wrapper .swiper-slide */
  #mv .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  #mv .swiper-pagination-bullet {
    width: 5px!important;
    height: 5px!important;
    background-color: #fff;
    transition: .4s;
    border: 1px solid #fff;

    &.swiper-pagination-bullet-active {
      border: 2px solid #fff!important;
      width: 9px!important;
      height: 9px!important;
    }
  }
  /* #mv .swiper-pagination-bullet */

  .section_header {
    font-weight: 100;
    font-size: 20px;
    font-weight: bold;
    color: #0a2d5a;
    text-align: center;
    line-height: 1.375;

    margin-top: 12px;
    letter-spacing: 2px;
  }
  .section_title {
    text-align: center;
    letter-spacing: 2px;
    .en {
      font-size: 15px;font-weight: bold;color: #0071bc;display: block;
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      letter-spacing: 1px;
    }
    .jp {font-size: 30px;display: block;font-weight: bold;color: #0a2d5a;}
  }
  section.is_section {

    .flex-col3 {
      display: flex;
      flex-direction: column;
      gap: 20px;
      font-weight: 500;

      li {
        width: 100%;
        border: 2px solid #0a2d5a;

        padding: 7px;

        .inner {
          padding: 12.5px;

          color: #0a2d5a;
          display: flex;
          flex-direction: column;
          height: 100%;

          font-size: 15px;
        }

        &:nth-child(odd) {
          .inner {
            background-color: #f5f5f5;
          }
        }

        .icon_and_title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .stuck {
            aspect-ratio: 1 / 1;
            width: 68px;
            height: 68px;
          }
          .title {
            font-size: 20px;
            line-height: 1.5;
            padding-left: 17.5px;
            font-weight: bold;
          }
        }
        /* icon_and_title */

        .sentence {

          line-height: 1.85;
          margin-top: 12px;
          margin-bottom: 1em;
        }
        .voice {
          margin-top: auto;
          text-align: right;
          font-weight: bold;
        }
      }
    }


    /* そのお悩み... */
    .assy_apply_box {
      background-color: #0071bc;
      color: #fff;
      font-size: 15px;
      line-height: 1.85;
      font-weight: 500;

      padding: 15px;
      margin-top: 15px;

      p {margin: unset;}
    }
    .large-sentence {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;

      .point {
        color: #08e2ff;
        position: relative;
        padding-bottom: 9px;

        &:before {
          content: "";
          aspect-ratio: 147 / 15;
          display: block;
          background-image: url("../images/before_underLine.png");
          background-size: contain;
          background-position: center, center;
          background-repeat: no-repeat, no-repeat;

          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto;

          width: 74px;
          height: 7.5px;
        }
      }
    }
    .w312 {
      width: 156px;
      margin: 10px auto 0;
    }
    .is_sentence {margin-top: 15px;}
    /* assy_apply_box */

    .mt1836 {
      margin-top: 8px;
    }
  }
  .marker-yellow {
    display: inline;
    background: linear-gradient(transparent 60%, #fcee21 0%);
  }
  .color-blue {color: #0071bc;}



  .is_section_inner {

  }
  .swiper02 {position: relative;overflow: clip;}
  .swiper02 .swiper-container .swiper-wrapper .swiper-slide {
    width: calc(670% / 7.50); /* 約89.33% */
    margin-left: auto;
    margin-right: auto;
  }
  /* .swiper02 .swiper-container .swiper-wrapper .swiper-slide */
  .swiper.swiper_button {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 1px;
    overflow: visible;

    .swiper-button-prev,
    .swiper-button-next {
      width: 40px;
      height: 40px;

      &:after {content:none}
      &:before {
        content: "";
        aspect-ratio: 1 / 1;
        width: 100%;
        height: 100%;

        background-image: url("../images/swiper_circle_arrow.svg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }
    }
    .swiper-button-prev:before {transform: rotate(180deg);}
  }

  .drawer_scope_graph {
    overflow: hidden;
    max-height: 0; /* 高さを0にして隠す */
    opacity: 0;
    transition: max-height 0.6s ease, opacity 0.4s ease; /* ヌルっと動く時間 */
  }

  /* クラスがついたら表示 */
  .drawer_scope_graph.is-open {
    max-height: 2800px; /* 画像が収まる十分な高さを指定（※ここがポイント） */
    opacity: 1;
    margin-top: 20px; /* 必要に応じて余白を調整 */
  }

  @media (max-width: 767px) {
    .w880 {
      width: 93.75%;
      margin-left: auto;
      margin-right: auto;
    }
  }


  @media (min-width: 768px) {
    .label_header {
      font-size: 30px;
      height: 60px;
      border-radius: 30px;
      max-width: 340px;
    }
    /* label_header */

    .w880 {
      max-width: 880px;
      margin-left: auto;
      margin-right: auto;
    }


    .swiper01 .swiper-container .swiper-wrapper .swiper-slide {
      .slide_inner {
        width: calc(1200 / 19.20);
        max-width: 1200px;
        /* height: fit-content; */
        display: table;
        height: auto;
      }
      .slide_contents {
        font-size: 38px;
        max-width: 632px;
        width: 100%;

        &.row-reverse {
          margin-left: auto;

          h2 {margin-left: 0;text-align: right;}
          .zenkoku {
            right: inherit;
            left: 0;
          }
        }
      }
      /* slide_contents */
      .label_white {
        font-size: 27px;
        padding: 10.5px;
        width: 100%;
        text-align: center;
      }
      /* label_white */
      .button_controll {
        max-width: 630px;

        a {
          font-size: 26px;
          height: 60px;
          grid-column-gap: 10px;

          &:after {
            width: 30px;
            height: 30px;
          }
        }
      }
      /* button_controll */
      .badges {
        max-width: 630px;
        margin-top: 5px;
        .zenkoku {
          display: block;
          position: absolute;
          bottom: 95px;
          right: 0;

          aspect-ratio: 1 / 1;
          width: 160px;
          height: 160px;
        }
      }
    }
    /* .swiper01 .swiper-container .swiper-wrapper .swiper-slide */

    .swiper02 .swiper-container .swiper-wrapper .swiper-slide {
      max-width: 366px;
    }
    /* .swiper02 .swiper-container .swiper-wrapper .swiper-slide */
    .swiper.swiper_button {
      top: -30px;
      max-width: 1200px;
      .swiper-button-prev,
      .swiper-button-next {width: 60px;height: 60px;}
    }

    #mv .swiper-pagination-bullet {

      &.swiper-pagination-bullet-active { border: 2px solid #fff!important;}
    }
    /* #mv .swiper-pagination-bullet */

    .section_header {
      font-size: 40px;
      margin-top: 12px;
      letter-spacing: 4px;
    }
    .section_title {
      letter-spacing: 4px;
      .en {font-size: 20px;}
      .jp {font-size: 40px;}
    }
    section.is_section {

      .flex-col3 {
        flex-direction: row;
        gap: 8px;

        li {
          flex: 1;
          border-width: 3px;

          max-width: 396px;

          padding: 8.5px;

          .inner {
            padding: 30px 25px;
            font-size: 18px;
          }
          .icon_and_title {
            .stuck {
              width: 80px;
              height: 80px;
            }
            .title {
              font-size: 30px;
              line-height: 1.66;
              padding-left: 25px;
            }
          }
          /* icon_and_title */
          .sentence {

            line-height: 1.83;
            margin-top: 12px;
            margin-bottom: 20px;
          }

        }
      }
      /* flex-col3 */

      /* そのお悩み... */
      .assy_apply_box {
        font-size: 18px;
        line-height: 1.83;
        margin-top: 15px;
        position: relative;
        padding: 40px;
      }
      .assy_apply_box_inner {
        max-width: 450px;
        width: calc(780% / 11.50);
      }
      .l-right {
        width: 312px;
        height: 345px;

        position: absolute;
        right: 24px;
        bottom: 0;
      }

      .large-sentence {
        font-size: 35px;
        text-align: left;
        margin-top: 0;
        margin-bottom: 0;

        .point {
          color: #08e2ff;
          position: relative;
          padding-bottom: 14px;

          &:before {
            aspect-ratio: 147 / 15;
            width: 147px;
            height: 15px;
          }
        }
      }
      .is_sentence {margin-top: 15px;}
      /* assy_apply_box */

      .mt1836 {
        margin-top: 26px;
      }
    }
    /* section.is_section */
  }

  @media (min-width: 1080px) {
    section.is_section .assy_apply_box_inner {
      max-width: 780px;
      width: calc(780% / 11.50);
    }
  }


  /* is_section */

  .is_section_inner {
    padding: 50px 0;
  }


  /* - - よくある質問 - - - - - - - - - - - - - - - - - - - - - - - - - - */
  .answer_list {
    color: #0a2d5a;
    margin-top: 40px;

    .li {
      border-bottom: dotted 3px #0a2d5a;
      margin-bottom: 0.5em;
      padding-bottom: 0.5em;
    }

    .title {
      cursor: pointer;
      font-size: 20px;
      line-height: 1.375;
      font-weight: 500;
      margin: 0;
      padding-right: 45px;

      position: relative;

      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      grid-column-gap: 20px;

      &:before {
        content: "";
        display: block;

        aspect-ratio: 1 / 1;
        width: 50px;
        height: 50px;

        background-image: url("../images/faq_q.svg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .is_ctrl {
        margin-left: auto;
        position: absolute;
        right: 0;
        top: 0.4em;
        aspect-ratio: 1 / 1;
        width: 30px;
        height: 30px;

        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background-color: #0071bc;
        }
        &:before {
          width: 100%;
          height: 3px;
        }
        &:after {
          width: 3px;
          height: 100%;
          transform: rotate(0deg);
          transition: all .4s;
        }
      }
      &.is-active .is_ctrl:after {
        transform: rotate(90deg);
      }
    }
    .drawer_answer_content {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.5s ease-out, opacity 0.3s ease;

      &.is-open {
        max-height: 1000px;
        opacity: 1;
      }

      .s2 {font-weight: bold;}
    }

    .inner {
      margin-top: 20px;
      font-size: 15px;
      line-height: 1.5;
      font-weight: 500;
      position: relative;

      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      grid-column-gap: 20px;

      &:before {
        content: "";
        display: block;

        aspect-ratio: 1 / 1;
        width: 50px;
        height: 50px;

        background-image: url("../images/faq_a.svg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      p {margin: 0;}

      .contents {
        p {margin-top: 1em;}
        ul {
          position: relative;
          list-style: disc;
          padding-left: 1em;
        }
        strong {font-weight: bold;}
      }
      .contents + p {margin-top: 0!important;}
      .contents p.mt0 {margin-top: 0!important;}
    }
  }
  /* answer_list */

  @media (min-width: 768px) {
    .answer_list {
      margin-top: 60px;
      .li {
        margin-bottom: 15px;
        padding-bottom: 20px;
      }

      .title {
        font-size: 30px;
        line-height: 1.5;

        grid-column-gap: 50px;
        padding-right: 60px;

        .is_ctrl {
          width: 30px;
          height: 30px;
        }
      }
      .drawer_answer_content {
        &.is-open {
          max-height: 500px;
        }
      }
      .inner {
        font-size: 20px;
        line-height: 1.75;
        grid-column-gap: 50px;
      }
    }
    /* answer_list */
  }
  /* - - END よくある質問 - - - - - - - - - - - - - - - - - - - - - - - - */


  /* - - REASON - - - - - - - - - - - - - - - - - - - - - - - - - - */
  .section_reason {
    background-color: #eef6ff;

    .reason_lists {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 45px;
      padding: 0;
      font-weight: 500;

      li {
        background-color: #fff;
        color: #0a2d5a;

        position: relative;
        /* overflow: hidden; */
        padding: 80px 40px 40px;

        p {margin: inherit;}

        .number {
          font-size: 42px;
          line-height: 1;
          color: #05b4d7;

          position: absolute;
          top: .5em;
          left: .4em;
        }

        .list_title {
          text-align: center;
          font-size: 28px;
          font-weight: bold;
          line-height: 1.33;
        }
        /* list_title */
        .is_sentence {font-size: 15px;line-height: 1.85;margin-top: 0.5em;}


        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 85px;
          height: 85px;
          background-color: #0a2d5a;
          color: #fff;
          font-size: 10px;
          display: flex;
          align-items: flex-start;
          justify-content: center;

          clip-path: polygon(0 0, 100% 0, 0 100%);
        }
      }


    }
    /* reason_lists */
  }

  @media (min-width: 768px) {
    .section_reason {
      .reason_lists {
        flex-direction: row!important;
        flex-wrap: wrap;
        padding: 0;
        margin-top: 35px;

        li {
          max-width: 390px;
          width: calc(390% / 12.00);
          gap: 10px;

          padding: 80px 60px;

          .number {
            font-size: 50px;
          }

          &:before {
            width: 100px;
            height: 100px;
          }

          .list_title {
            font-size: 30px;
            line-height: 1.25;
          }
          /* list_title */

          .is_sentence {
            font-size: 18px;
            line-height: 1.83;
          }
        }
      }
    }
  }
  /* - - END REASON - - - - - - - - - - - - - - - - - - - - - - - - */


  /* - - SUPPORT- - - - - - - - - - - - - - - - - - - - - - - - - - */
  .section_support {
    .support_sentence {
      text-align: center;
      font-size: 20px;
      line-height: 1.375;
      font-weight: bold;

      margin-top: 40px;
    }
    /* support_sentence */


    @media (min-width: 768px) {
      .support_sentence {
        font-size: 30px;
        line-height: 1.5;
        margin-top: 35px;
      }
      /* support_sentence */
    }
  }

  @media (min-width: 768px) {
    .support_sentence {
      font-size: 30px;
      line-height: 1.5;
      margin-top: 35px;
    }
    /* support_sentence */
  }
  /* - - END SUPPORT- - - - - - - - - - - - - - - - - - - - - - - - */


  /* - - PRICE PLAN - - - - - - - - - - - - - - - - - - - - - - - - */
  .price_plans {

    display: flex;
    flex-direction: column;
    margin-top: 50px;

    .Box_plans {
      width: 100%;

      .label {
        color: #fff;
        font-size: 20px;
        line-height: 1;
        font-weight: bold;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        height: 38px;

      }
      .label.Std {
        background-color: #0071bc;
        &:before {
          content: "";
          background-image: url("../images/price_plan_std.svg");
          background-size: contain;
          background-position: center, center;
          background-repeat: no-repeat, no-repeat;

          aspect-ratio: 1 / 1;
          width: 20px;
          height: 20px;
        }
      }
      .label.Prem {
        background-color: #0a2d5a;
        &:before {
          content: "";
          background-image: url("../images/price_plan_prem.svg");
          background-size: contain;
          background-position: center, center;
          background-repeat: no-repeat, no-repeat;

          aspect-ratio: 1 / 1;
          width: 22px;
          height: 20px;
        }
      }
      .inner_content {
        background-color: #fff;
        padding: 25px;
      }
      .circle_label {
        height: 25px;
        font-size: 15px;
        color: #fff;
        border-radius: 12.5px;
        font-weight: bold;

        display: flex;
        justify-content: center;
        align-items: center;

        span {
          font-size: 10px;
          font-weight: 500;
        }
      }
      .is_price {
        display: flex;
        justify-content: center;
        align-items: baseline;
        font-size: 16.5px;
        color: #0a2d5a;
        margin-top: 5px;
        font-weight: bold;

        span.Tilde {
          display: inline-flex;
          align-self: center;
        }

        &.std {color: #0071bc;}
      }
      span.large {font-size: 35px;}

      .ScopeRange {
        margin-top: 17px;

        dl {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin: 0;
          color: #0a2d5a;
          min-height: 50px;
          font-weight: bold;

          &.is_check {align-items: center;}

          dt {
            padding: 0.45em 1em;

            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            width: 150px;

            .small {font-size: 10px;display: block;}
          }
          dd {
            padding: 0.45em 1em;
            margin: 0;

            display: flex;
            align-items: center;
            height: 100%;


            p {
              margin: 0;
              /* padding-left: 18px; */

              display: flex;
              align-items: baseline;
              justify-content: flex-start;
              gap: 0.25em;
            }

            .baseline {align-items: baseline;}

          }

          &.is_check {
            dd {
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
            }
            dd p {
              &:not(:first-child){margin-top: 0.25em;}
              &:before {
                content: "";
                display: block;
                width: 12px;
                height: 12px;
                aspect-ratio: 1 / 1;
                background-image: url("../images/check_circle.svg");
                background-size: contain;
                background-position: center, center;
                background-repeat: no-repeat, no-repeat;
              }
            }
          }

          &:not(:first-child){margin-top: 10px;}
        }

        &.std dl {background-color: #eef6ff;}
        &.Prem dl {background-color: #f5f5f5;}
      }
      /* ScopeRange */
      /* inner_content */

      &:nth-of-type(2){margin-top: 20px;}
    }
    .circle_label.std {background-color: #0071bc;}
    .circle_label.Prem {background-color: #0a2d5a;}
    /* box_plans */
  }

  .notice_oneLine {
    padding: 20px;
    margin-bottom: 0;
    background-color: #fff;
    font-weight: 500;

    &.mt20 {
      margin-top: 20px;
    }

    &.onboard {
      background-color: #eef6ff;
    }

    dt {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    dd {
      font-size: 15px;
      line-height: 1.5;
      margin-left: 0;
    }
    dd p {
      margin: 0;
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      gap: 0.25em;

      &:not(:first-child){margin-top: 0.25em;}
      &:before {
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        aspect-ratio: 1 / 1;
        background-image: url("../images/check_circle.svg");
        background-size: contain;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      &.attention {
        padding-left: 0;
        color: #ed1c24;
        &::before {content: none;}
      }
      &.un_check {
        padding-left: 0;
        &::before {content: none;}
      }
    }
  }
  /* notice_oneLine */

  .inside_graph_spot_pricing {
    background-color: #fff;
    padding-bottom: 20px;
  }
  .overflow-y {
    /* overflow: hidden; */
    padding: 0 20px;
  }
  table.col-2.spotprice {
    border-spacing: 0;
    min-width: 740px;
    width: 100%;
    table-layout: fixed;

    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 1px;



    thead {
      tr {
        background-color: #0a2d5a;
        color: #fff;
        font-weight: bold;

        height: 60px;
        font-size: 18px;

        th {

          &:first-child {
            width: calc(828% / 13.88);
            border-right: 2px solid #fff;
          }
          &:nth-of-type(2){border-left: unset;}
        }
      }
    }

    tbody {
      tr {
        height: 60px;
        font-size: 18px;


        td {
          padding: 0 1em;
          border: 2px solid #0a2d5a;
          border-top: unset;
        }
        td:nth-of-type(2){
          color: #0071bc;
          border-left: unset;
        }
      }
    }

  }
  /* inside_graph_spot_pricing */
  /* price_plans */
  @media (min-width: 768px) {
    .price_plans {
      display: flex;
      justify-content: center;
      flex-direction: row;
      grid-column-gap: 50px;
      margin-top: 45px;

      .Box_plans {
        flex: 1;
        .label {
          font-size: 26px;
          gap: 10px;
          height: 66px;

        }
        .label.Std {
          &:before {
            width: 30px;
            height: 30px;
          }
        }
        .label.Prem {
          &:before {
            width: 33px;
            height: 30px;
          }
        }
        .inner_content {
          padding: 40px;
        }
        .circle_label {
          height: 40px;
          border-radius: 20px;
          font-size: 20px;

          span {
            font-size: 14px;
          }
        }

        .is_price {
          margin-top: 22px;
          font-size: 20px;

        }
        span.large {font-size: 60px;}

        .ScopeRange {
          margin-top: 35px;

          dl {
            font-size: 20px;
            min-height: 85px;

            dt {
              min-width: 200px;
              .small {font-size: 14px;}
            }
            dd {

              & p {
                /* padding-left: 30px; */
                &:before {
                  width: 20px!important;
                  height: 20px!important;
                }
              }

              .large {
                line-height: 0.85em;
              }
            }
            &:not(:first-child){margin-top: 20px;}
          }
        }
        /* ScopeRange */
        /* inner_content */
        &:nth-of-type(2){margin-top: 0px;}
      }
      /* box_plans */
    }

    .notice_oneLine {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin: 0;
      margin-top: 50px;
      padding: 40px;

      &.mt20 {
        margin-top: 40px;
      }

      dt {
        text-align: left;
        min-width: 350px;
        font-size: 30px;
        line-height: 1;
        margin-bottom: 0;
      }

      dd {
        font-size: 20px;

        & p {
          /* padding-left: 30px; */
          &:before {
            width: 20px!important;
            height: 20px!important;
          }
        }
      }
    }
    /* notice_oneLine */

    .inside_graph_spot_pricing {
      padding-bottom: 40px;
    }
    .overflow-y {
      /* overflow: hidden; */
      padding: 0 40px;
    }
    table.col-2.spotprice {
      thead {

        tr {
          height: 60px;
          font-size: 20px;
          th {
            &:first-child {
              width: calc(840% / 11.20);
            }
          }
        }
      }

      tbody {
        tr {
          td {}
          td:nth-of-type(2) {
            padding: 0 .85em;
          }
        }
      }

    }
    /* inside_graph_spot_pricing */
    /* price_plans */
  }

  /* - - END PRICE PLAN - - - - - - - - - - - - - - - - - - - - - - */


  /* - - SCORP- - - - - - - - - - - - - - - - - - - - - - - - - - - */
  #SCOPE {
    .section_center_sentence {
      font-size: 15px;
      font-weight: 500;
      line-height: 1.5;
      margin-top: 45px;

      p {margin: 0;}
    }

    .container-scope-of-service {
      margin-top: 15px;
    }


    table.col-7 {
      border-spacing: 0;
      min-width: 1200px;
      width: 100%;
      table-layout: fixed;

      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      letter-spacing: 1px;

      font-size: 14px;


      thead tr {
        th {
          background-color: #0a2d5a;
          color: #fff;
          font-weight: bold;
          height: 60px;



          span {
            display: block;
            font-size: 12px;
          }
          &:not(:last-child){
            border-right: 2px solid #fff;
          }
        }

        th:nth-of-type(1),
        th:nth-of-type(3),
        th:nth-of-type(4),
        th:nth-of-type(5),
        th:nth-of-type(6)
        {
          max-width: 133px;
          width: calc(133% / 12.00);
        }
        th:nth-of-type(2),
        th:nth-of-type(7)
        {
          max-width: 266px;
          width: calc(266% / 12.00);
        }
        th:nth-of-type(3){}
        th:nth-of-type(4){}
        th:nth-of-type(5){}
        th:nth-of-type(6){}
        th:nth-of-type(7){}
      }

      tbody {
        line-height: 1.42;
        tr {
          td {
            padding: 1.2em 1em;
            border-right: 2px solid #05b4d7;
            border-bottom: 2px solid #05b4d7;
            &:first-child {border-left: 2px solid #05b4d7;}
          }
          td:nth-of-type(1),
          td:nth-of-type(3),
          td:nth-of-type(4),
          td:nth-of-type(5),
          td:nth-of-type(6)
          {
            text-align: center;
          }
          td:nth-of-type(2),
          td:nth-of-type(7)
          {}
          &.aliceblue {background-color: #cdf0f7;}
        }
      }
    }

    /* 初期状態：非表示 */
    .more-rows {
      display: none;
      opacity: 0;
      /* transform: translateY(-10px);
      transition: all 0.4s ease; */
    }

    .more-rows.is-visible {
      display: table-row-group; /* tableのtbody用display */
      opacity: 1;
      /* transform: translateY(0); */
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .more-rows.is-visible tr {
      animation: slideIn 0.4s ease forwards;
    }

    .is_andmore {
      display: none;
    }

    .table_footer {
      display: none;
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      letter-spacing: 1px;

      font-size: 14px;
      color: #0a2d5a;

      margin-top: 0.35em;

      dl {
        margin-top: 1em;

        dt {
          color: #fff;
          background-color: #0a2d5a;
          line-height: 24px;
          padding: 0 .5em;
          width: auto;
          width: fit-content;
        }
        dd {
          margin-top: 0.5em;
          margin-left: 0;
        }
      }

      &.is-active {display: block;}
    }
    /* table_footer */
    /* table.col-7 */

    @media (max-width: 767px) {
      .container-scope-of-service {
        display: none;

        &.is-active {display: block;}
      }

      .btn.circle-arrow {margin-top: 20px;}
    }
    @media (min-width: 768px) {
      .section_center_sentence {
        text-align: center;
        font-size: 20px;
        line-height: 1.75;
        margin-top: 45px;
      }

      .container-scope-of-service {
        margin-top: 45px;
        overflow-y: hidden!important;
      }

      table.col-7 {
        border-spacing: 0;
        width: 100%;
        table-layout: fixed;

        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 1px;
      }

      .is_andmore {
        display: flex;
        align-items: center;
        justify-content: center;

        height: 74px;
        border-bottom: 2px solid #0a2d5a;
        background-color: #f5f5f5;

        img {
          width: 5px;
          height: 14px;
          margin: auto;
        }
        &.is-visible {
          display: none;
        }
      }

      /* table.col-7 */

      .btn.circle-arrow {
        margin-top: 40px;
      }
    }
  }
  /* - - END SCORP- - - - - - - - - - - - - - - - - - - - - - - - - */


  /* - - ONBOARD- - - - - - - - - - - - - - - - - - - - - - - - - - */
  #ONBOARD {
    letter-spacing: 1px;
    .section_center_sentence {
      font-size: 15px;
      font-weight: 500;
      line-height: 1.5;
      margin-top: 45px;

      p {margin: 0;}

    }
    .onboard_steps {
      padding-bottom: 0;
      .oneline {
        padding: 20px;
        background-color: #fff;

        &:not(:first-child){
          margin-top: 62px;
          position: relative;
          &:before {
            content: "";
            background-image: url("../images/step_arrow.svg");
            background-size: cover, cover;
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;

            position: absolute;
            width: 40px;
            height: 23px;

            top: -40px;
            left: 0;
            right: 0;
            margin: auto;
          }
        }
      }
      .step {
        text-align: center;
        font-weight: bold;
        font-size: 20.5px;
        line-height: 1;

        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #0a2d5a;

        .number {
          font-size: 46.5px;
        }
        p {margin: 0;}
      }

      .step_detail {
        p {
          color: #0071bc;
          font-size: 20px;
          font-weight: 500;
        }
      }
      .step_list {

      }
      .step_list li {
        font-weight: 500;
        font-size: 15px;
        line-height: 1.5;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0.25em;

        margin-top: 10px;
        &:first-child{margin-top: 15px;}


        &:before {
          content: "";
          display: block;
          width: 12px;
          height: 12px;
          aspect-ratio: 1 / 1;
          background-image: url("../images/check_circle.svg");
          background-size: contain;
          background-position: center, center;
          background-repeat: no-repeat, no-repeat;
        }
      }
    }
    .note {
      margin-top: 1em;
      font-weight: 500;
      text-indent: -1em;
      padding-left: 1em;

      font-size: 15px;
      line-height: 1.5;
    }
    /* onboard_steps */

    @media (min-width: 768px) {
      .section_center_sentence {
        text-align: center;
        font-size: 20px;
        line-height: 1.75;
        margin-top: 45px;

      }
      .onboard_steps {
        .oneline {
          display: flex;
          align-items: stretch;
          justify-content: flex-start;
          padding: 40px;
          padding-left: 0;

          min-height: 220px;


        }
        .step {
          font-size: 41px;

          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: none;

          min-width: 180px;

          .number {
            font-size: 93px;
          }
        }
        .step_detail {
          border-left: 2px solid #0a2d5a;
          padding-left: 40px;

          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .step_list {
          padding-left: 0;
        }
        .step_list li {
          align-items: center;
          grid-column-gap: 0.5em;
          font-size: 20px;
          margin-top: 10px;

          &:first-child{margin-top: 15px;}


          &:before {
            width: 20px!important;
            height: 20px!important;
          }
        }
      }
      .note {
        font-size: 20px;
        line-height: 1.75;
      }
      /* onboard_steps */
    }

  }
  /* - - END ONBOARD- - - - - - - - - - - - - - - - - - - - - - - - */

  /* - - COST- - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
  #COST {
    letter-spacing: 2px;
    .container_cost_description {
      margin-top: 15px;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      font-weight: 500;

      p {
        line-height: 1.85;
        &:not(:first-child){margin-top: 1em;}
      }

      .sentence {margin-top: .5em;}
    }

    .list_costlist {
      font-size: 20px;
      line-height: 1.375;
      text-align: center;
      font-weight: 500;

      display: flex;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      padding: 0;
      margin-top: 45px;

      .sp_small {font-size: 13.5px;}

      li {
        width: 47%;
        background-color: #0a2d5a;
        color: #fff;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
    /* list_costlist */
    .middle_header {
      font-size: 20px;
      font-weight: bold;
      line-height: 1.375;
      text-align: center;
      margin-top: 15px;
      padding-bottom: 45px;

      position: relative;
      &:before {
        content: "";
        display: block;
        background-image: url("../images/step_arrow.svg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;

        position: absolute;
        width: 40px;
        height: 23px;

        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
    }

    .list_cycle {
      padding: 0;
      margin-top: 20px;
      font-weight: 500;

      display: flex;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;

      li {
        background-color: #f5f5f5;
        color: #0a2d5a;
        font-size: 20px;
        line-height: 1.375;
        width: 47%;

        padding: 20px 16px;
        text-align: center;

        .picture {
          margin-left: auto;
          margin-right: auto;

          &.icon01,
          &.icon02,
          &.icon03,
          &.icon04 {
            & + p {margin-top: 1em;}
          }

          &.icon01 {
            width: 54.5px;
            height: 25px;
            height: 40px;
          }
          &.icon02 {
            width: 40px;
            height: 40px;

          }
          &.icon03 {
            width: 40px;
            height: 27.5px;
            height: 40px;
          }
          &.icon04 {
            width: 40px;
            height: 32px;
            height: 40px;
          }
        }
        .paragraph {
          font-size: 20px;
          line-height: 1.375;
        }
        .sp_small {font-size: 15px;display: block;}
      }
    }
    /* .list_cycle */
    .lower_header {
      font-size: 20px;
      line-height: 1.375;
      color: #0a2d5a;
      text-align: center;
      font-weight: bold;

      margin-top: 15px;

      .txt-blue {
        color: #0071bc;
      }

    }
    .banner_apper {
      background-color: #0071bc;
      color: #fff;
      font-weight: 500;
      font-size: 17.5px;
      line-height: 1.5;

      margin-top: 50px;
      padding: 15px;

      position: relative;

      .picture {
        width: 96px;
        height: 150px;

        position: absolute;
        left: 0;
        top: -27.5px;
      }
      /* picture */

      .sentence {
        margin-left: auto;
        width: 68%;
      }

      .text_under_deco {
        font-size: 17.5px;
        line-height: 1;
        margin-top: 10px;

        .wave_line {
          display: inline-block;
          color: #08e2ff;
          padding-bottom: 10px;
          position: relative;

          &:after {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 6.5px;

            background-image: url("../images/wave_line.svg");
            background-size: cover, cover;
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;

          }
        }
      }
    }
    /* banner_apper */

    @media (min-width: 768px) {
      .container_cost_description {
        margin-top: 45px;
        flex-direction: row-reverse;
        grid-column-gap: 40px;


        li {
          flex: 1;
          width: 25%;
        }

        p {
          font-size: 20px;
          line-height: 1.75;
        }
      }

      .picture {
        display: block;
        max-width: 397px;

        &.icon01 {
          width: 54px;
          height: 25px;
        }
        &.icon02 {
          width: 40px;
          height: 40px;
        }
        &.icon03 {
          width: 40px;
          height: 27.5px;
        }
        &.icon04 {
          width: 30px;
          height: 32px;
        }
      }
      .sentence {
        max-width: 762px;
        margin-top: 0;
      }

      .list_costlist {
        line-height: 1.25;
        flex-wrap: nowrap;

        li {
          height: 150px;
          .sp_small {font-size: inherit;}
        }
      }
      /* list_costlist */

      .middle_header {
        font-size: 40px;
        margin-top: 30px;
      }

      .list_cycle {
        padding: 0;
        margin-top: 30px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;

        gap: 20px;

        li {
          flex: 1;
          flex-direction: column;
          display: flex;
          justify-content: flex-start;

          width: 25%;
          font-size: 20px;
          line-height: 1.375;
          max-width: 285px;
          letter-spacing: 1px;

          padding: 50px 40px;

          .picture {
            &.icon01 {
              width: 109px;
              height: 50px;
              height: 80px;

              & + p {margin-top: 1em;}
            }
            &.icon02 {
              width: 80px;
              height: 80px;

              & + p {margin-top: 1.5em;}
            }
            &.icon03 {
              width: 80px;
              height: 55px;
              height: 80px;
            }
            &.icon04 {
              width: 60px;
              height: 64px;
              height: 80px;
            }
          }
          .paragraph {
            line-height: 1.35;
          }
          .sp_small {font-size: 16px;}
        }
      }
      /* .list_cycle */
      .lower_header {
        font-size: 40px;
        line-height: 1.375;
        margin-top: 30px;
      }

      .banner_apper {
        font-size: 20px;
        line-height: 1;
        height: 227px;

        .picture {
          width: 192px;
          height: 300px;
          top: -72px;
          left: 40px;
        }

        .sentence {
          width: 78%;
          max-width: 895px;
        }
      }
      /* banner_apper */

      .sentence {
        margin-top: 5%;

        .text_under_deco {
          margin-top: 1em;
          font-size: 20px;
          .wave_line {
            font-size: 30px;
            padding-bottom: 16px;
            &:after {
              height: 12px;
              background-size: cover;
            }
          }
        }
      }
    }


    /* 自社内製とBPOのコスト比較 */
    .bpo_section {
      background-color: #eef6ff;
      margin-top: 50px;
      padding: 15px 20px 20px;

      .bpo_header {
        font-size: 20px;
        line-height: 1.5;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        span.txt_small {font-size: 15px;}
      }

      .bpo-table {margin-top: 25px;}

      table.col-4.bpo {
        border-spacing: 0;
        min-width: 1120px;
        width: 100%;
        table-layout: fixed;

        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 1px;



        thead {
          tr {
            background-color: #0a2d5a;
            color: #fff;
            font-weight: bold;

            height: 60px;
            font-size: 14px;

            th {
              text-align: center;
              width: 25%;
              border-right: 2px solid #fff;
              &:last-child {border: none;}
            }
          }
        }

        tbody {
          tr {
            font-size: 14px;
            text-align: center;
            font-weight: 500;
            background-color: #fff;


            td {
              padding: 16px 1em;

              border-bottom: 2px solid #0a2d5a;
              border-right: 2px solid #0a2d5a;
              border-top: unset;
              &:first-child {border-left: 2px solid #0a2d5a;}

              &.alpha div {
                position: relative;

                &:after {
                  content: "";
                  display: block;
                  position: absolute;
                  top: 0;
                  right: 0em;
                  bottom: 0;
                  margin: auto;
                  width: 1em;
                  height: 1em;
                }
              }
              &.t-a div:after {content: "Ⓐ";}
              &.t-b div:after {content: "Ⓑ";}
              &.t-c div:after {content: "Ⓒ";}
              &.t-d div:after {content: "Ⓓ";}
              &.t-e div:after {content: "Ⓔ";}
              &.t-f div:after {content: "Ⓕ";}
            }

            &.red {
              color: #ed1c24;
              font-weight: bold;

              td {
                border-bottom: 4px solid #ed1c24;
                border-right: 2px solid #ed1c24;
                border-left: 2px solid #ed1c24;

                position: relative;
                border-top: unset;
                &:first-child {border-left: 4px solid #ed1c24;}
                &:last-child {border-right: 4px solid #ed1c24;}


              }
            }

            &.lower_red {
              td {
                border-bottom: 4px solid #ed1c24;
              }
            }
          }
        }

      }
    }
    /* bpo_section */

    @media (min-width: 768px) {
      .bpo_section {
        padding: 35px 40px 40px ;
        .bpo_header {
          font-size: 30px;
          flex-direction: row;
          line-height: 1;

          span.txt_small {font-size: 20px;}
        }
        .bpo-table {margin-top: 35px;}

        .table.col-4.bpo {
          thead {

            tr {
              font-size: 20px;
              th {

              }
            }
          }

          tbody {
            tr {
              td {}
              td:nth-of-type(2) {
                padding: 0 .85em;
              }
              &.red {
                color: #ed1c24;
                font-weight: bold;

                td {
                  border-bottom: 6px solid #ed1c24;
                  border-right: 3px solid #ed1c24;
                  border-left: 3px solid #ed1c24;

                  border-top: unset;
                  &:first-child {border-left: 6px solid #ed1c24;}
                  &:last-child {border-right: 6px solid #ed1c24;}

                }
              }

              &.lower_red {
                td {
                  border-bottom: 6px solid #ed1c24;
                }
              }
            }
          }
        }
      }
      /* bpo_section */
    }

  }
  /* - - END COST- - - - - - - - - - - - - - - - - - - - - - - - - -*/


  #message {
    color: #0a2d5a;
    font-weight: 500;
    .sentence {
      font-size: 15px;
      line-height: 1.85;

      h3 {
        font-size: 20px;
        line-height: 1.83;
      }
    }
    .picture {
      width: 150px;
      height: 225px;
      margin-left: auto;
      margin-right: auto;
    }
    .profile {
      margin-top: 1em;
      font-size: 15px;
      text-align: right;

      .fz20 {font-size: 20px;display: block;}
      .name {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5em;
        margin-top: 0;
      }
    }
    @media (min-width: 768px) {
      .image_and_message {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: row-reverse;
      }
      .sentence {
        font-size: 18px;
        line-height: 1.83;

        h3 {
          font-size: 30px;
          line-height: 1.5;
        }
      }
      .picture {
        width: 200px;
        height: 100%;
      }

      .profile {
        font-size: 14px;
        .fz20 {font-size: 18px;}
        .name {
          margin-top: 0.25em;
        }
      }
    }
  }



  /* PARTS */
  .BoxConsultNow {
    background-color: #0a2d5a;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    letter-spacing: 2px;
    padding: 20px;

    p {
      font-size: 22.5px;
      font-weight: bold;
      line-height: 1;
      color: #fff;
    }

    a {
      display: flex;
      align-items: center;
      justify-content: center;

      height: 40px;
      width: 100%;
      font-size: 20px;
      font-weight: bold;
      gap: 7px;

      &.icon {
        &:before {
          content: "";
          display: block;
          width: 20px;
          height: 20px;
        }

        &.calc,
        &.mail
         {background-color: #fff;color: #0a2d5a;margin-top: 15px;}
        &.calc:before {
          width: 18px;
          background-image: url("../images/icon_calc.svg");
          background-size: contain;
          background-position: center, center;
          background-repeat: no-repeat, no-repeat;
        }
        &.mail:before {
          width: 20px;
          height: 15px;
          background-image: url("../images/icon_mail.svg");
          background-size: contain;
          background-position: center, center;
          background-repeat: no-repeat, no-repeat;
        }

        &.calendar {
          background-color: #0071bc;color: #fff;margin-top: 10px;
        }
        &.calendar:before {
          width: 20px;
          background-image: url("../images/icon_calendar.svg");
          background-size: contain;
          background-position: center, center;
          background-repeat: no-repeat, no-repeat;
        }
      }
      &.wide {font-size: 17px;}
    }
    /* a */
  }
  /* BoxConsultNow */

  @media (min-width: 768px) {
    .BoxConsultNow {
      flex-direction: row;
      justify-content: center;
      height: 115px;
      padding: 0 30px;

      p {
        font-size: 45px;
      }

      a {
        width: 335px;
        height: 65px;
        font-size: 26px;
        gap: 0.25em;

        &.icon.calc,
        &.icon.mail {
          margin-left: 1em;
          margin-top: 0;
        }
        &.icon.calc:before {
          width: 42px;
          height: 42px;
        }
        &.icon.mail:before {
          width: 42px;
          height: 31px;
        }
        &.icon.calendar {margin-left: 10px;margin-top: 0;}
        &.icon.calendar:before {
          width: 38px;
          height: 42px;
        }

        &.wide {
          max-width: 678px;
          width: fit-content;
          width: 100%;
          padding: 0 1em;
          font-size: 20px;
        }
      }
    }
    /* BoxConsultNow */

    #FAQ .BoxConsultNow {
      margin-top: 50px;
      p {margin-top: 0;}
    }
  }
  /* END PARTS */










}
/*body.page-template-payroll-services */