h2 {
  font-size: 32px;
  color: #026150;
  text-align: center;
  margin: 0 0 40px;
  text-decoration-line: underline;
  text-underline-offset: 20px;
  text-decoration-thickness: 2px;
  text-decoration-color: #398449;
  text-decoration-skip-ink: none;

  &::before,
  &::after {
    content: '　';
  }
}

section {
  padding: 40px 0;
}

.wpcf7 label {
  display: flex;
  align-items: start;

  & span:not([class]),
  & span:is(.any, .require) {
    flex-shrink: 0;
    display: block;
    border-radius: 16px;
    margin-left: 1em;
    padding: 1px 16px;
    background: #01b3cd;
    color: #fff;
    font-size: 12px;
    text-align: center;

    &.any {
      background: #01b3cd;
    }

    &.require {
      background: #df1014;
    }
  }
}

.wpcf7 .wpcf7-list-item label {
  align-items: center;

  & span {
    font-weight: bold;
    margin-left: 0.5em;
  }
}

.wpcf7 p {
  margin: 0;
}

/* 業界特化型社労士 BPOサービスのご案内 */
#bpo_main {
  padding: 0;

  .bpo_main {
    background: url(bpo_main_img.jpg) no-repeat center 0 / cover;
    padding-bottom: 80px;

    .catch {
      text-align: center;
      font-size: 40px;
      font-weight: bold;
      text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #FFF, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
      padding-top: 30px;

      &>span {
        color: #EB5C02;
      }
    }

    .title {
      width: 540px;
      background: #003d32cc;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      line-height: 1.4;
      padding: 10px 0;
      box-sizing: border-box;
      margin: 20px auto 0;

      span {
        font-size: 70%;
      }
    }
  }

  .wrapper {
    background: #fff;
    margin-top: -40px;

    .payroll_bpo {
      background: #fff;
      font-size: 28px;
      color: #EB5C02;
      font-weight: bold;
      text-align: center;
      padding: 10px;
    }

    ul.checkList {
      font-size: 24px;
      font-weight: bold;

      li {
        padding-left: 32px;

        span {
          color: #CB0000;
        }
      }
    }
  }
}

/* 当社の給与計算の3つのポイント */
#point {
  .point_head {
    background: #9CBC3A;
    padding: 40px;

    h2 {
      color: #fff;
      text-decoration-color: #fff;

      span {
        color: #F2F608;
      }
    }

    .point {
      display: flex;
      justify-content: space-between;

      .item {
        width: 310px;
        height: 280px;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #005A49;
        display: flex;
        flex-wrap: wrap;
        align-content: normal;
        position: relative;
        text-decoration: none;

        &::after {
          content: '';
          display: block;
          position: absolute;
          bottom: -16px;
          left: 0;
          right: 0;
          width: 45px;
          height: 16px;
          background: #005A49;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          margin: 0 auto;
        }

        .txt {
          font-size: 20px;
          font-weight: bold;
          color: #005A49;
        }

        .icon {
          display: flex;
          justify-content: space-between;
          align-items: end;
          width: 100%;
        }

      }
    }
  }

  .point_detail {
    height: 420px;
    padding: 80px 0;
    margin-top: -40px;

    .detail {
      display: flex;
      width: 740px;

      .img2 {
        margin: 0 20px 0 0;
      }

      .txt {
        h3 {
          font-size: 26px;
          color: #005A49;
          line-height: 1.4;
          margin: 0;
        }

        h4 {
          font-size: 22px;
          color: #7BC24B;
          margin: 0.5em 0;
        }

        p {
          margin: 0 0 1em;
        }

        .fsL {
          font-weight: bold;
        }
      }
    }

    &:nth-child(2) {
      background: url(b_icon1.png) no-repeat;
      background-position: calc(100vw / 2 + 300px) 80px;
    }

    &:nth-child(3) {
      background: url(b_icon2.png) no-repeat 0% 40px;
      background-position: calc(100vw / 2 - 800px) 80px;

      .detail {
        margin: 0 0 0 auto;
      }
    }

    &:nth-child(4) {
      background: url(b_icon3.png) no-repeat;
      background-position: calc(100vw / 2 + 300px) 80px;
    }
  }
}

/* 業務範囲 */
#service {
  background: #E9EE9D;

  .service {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(140px, auto);
    grid-template-areas:
        "svs1 svs2 svs3"
        "note note svs3";
    gap: 10px;

    .item {
      width: 320px;

      &>* {
        text-align: center;
        padding: 20px 0;
        margin: 0 0 6px;
      }

      h3 {
        font-size: 22px;
        color: #fff;
      }

      div {
        font-size: 20px;
        font-weight: bold;
        line-height: 1.4;
        background: #fff;
        border: 1px solid #005A49;

        span {
          display: block;
          font-size: 14px;
        }

        &:first-of-type {
          height: 46px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
        }
      }

      &.svs1 {
        grid-area: svs1;

        h3 {
          background: #005A49;
        }

        div {
          background: #fff;
          border: 1px solid #005A49;
        }
      }

      &.svs2 {
        grid-area: svs2;

        h3 {
          background: #198040;
        }

        div {
          background: #fff;
          border: 1px solid #198040;
        }
      }

      &.svs3 {
        grid-area: svs3;

        h3 {
          background: #02A464;
        }

        div {
          background: #fff;
          border: 1px solid #02A464;
        }
      }
    }

    .note {
      grid-area: note;

      p.att {
        font-weight: bold;
        margin: 0;
      }
    }
  }
}

/* 給与計算業務　導入の流れ */
#flow {
  .intro {
    font-size: 18px;
    font-weight: bold;

    span {
      color: red;
    }
  }

  .flow {
    margin-top: 40px;

    .item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 60px;

      .no {
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        background: #7BBE35;
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 1.3;
        padding-top: 20px;
        position: relative;

        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 100px;
          left: 50px;
          width: 1px;
          height: 100px;
          background-image: repeating-linear-gradient(180deg, #000, #000 4px, transparent 3px, transparent 8px);
          background-repeat: repeat-y;
          background-size: 1px 100%;
        }

        span {
          display: block;
          font-size: 18px;
        }
      }

      .txt {
        width: 620px;

        h3 {
          margin: 0;
          color: #7BBE35;
          font-size: 26px;
          position: relative;

          &::after {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: #7BBE35;
          }
        }
      }

      &:last-child {
        .no {
          &::after {
            display: none;
          }
        }
      }
    }
  }
}

/* お問い合わせ */
#contact {
  background: #F6F8DE;
  padding-top: 0;

  h2 {
    background: #9CBC3A;
    color: #fff;
    text-decoration: none;
    padding: 20px 0;
  }

  & .table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;

    & th {
      border-style: solid;
      border-width: 0 0 1px;
      border-color: #9FBC94;
      padding: 24px 16px;
      width: 270px;
      background: unset;
      font-weight: bold;
      text-align: left;
      vertical-align: top;

    }

    & td {
      border-style: solid;
      border-width: 0 0 1px;
      border-color: #9FBC94;
      padding: 16px;
      background: unset;
      font-weight: bold;
      text-align: left;
      vertical-align: top;

      & textarea {
        width: 100%;
        min-height: 120px;
      }
    }
  }

  & input[type="text"],
  & input[type="email"],
  & input[type="tel"] {
    padding: 8px;
  }

  & input[type="submit"] {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    margin: 0 auto;
    width: 240px;
    height: 64px;
    background: #04a569;
    color: #fff;
    font-size: 20px;
  }

  & .submit {
    text-align: center;

    &>p {
      margin: 1em 0;
    }
  }
}

@media screen and (min-width: 641px) {

  .sp {
    display: none;
  }
}
@media screen and (max-width: 640px) {

  .pc {
    display: none;
  }

  h2 {
    font-size: 26px;
    &::before,
    &::after {
      content: '';
    }
  }


  /* 業界特化型社労士 BPOサービスのご案内 */
  #bpo_main {
    padding: 0;

    .bpo_main {
      background: url(sp_main_img.jpg) no-repeat center 0 / cover;
      padding: 30px 0 0;
      box-sizing: border-box;
      height: 100vw;

      .catch {
        font-size: 4.5vw;
        text-shadow: none;
        padding-top: 0;
        background: #fff;
      }


      .title {
        width: 80%;
        font-size: 7vw;
        line-height: 1.4;
        padding: 10px 0;
        box-sizing: border-box;
        margin: 12% auto 0;
      }
    }

    .wrapper {
      margin: -80px auto 0;
      width: calc(100% - 20px) !important;

      .payroll_bpo {
        font-size: 5vw;
      }

      h2 {
        font-size: 5.4vw;
      }

      ul.checkList {
        font-size: 20px;

        li {
          padding-left: 26px;
        }
      }
    }
  }

  /* 当社の給与計算の3つのポイント */
  #point {
    & .point_head {
      padding: 40px 10px 10px;

      h2 {
        font-size: 6vw;
      }

      .point {
        display: block;

        .item {
          width: auto;
          height: auto;
          padding: 10px;
          margin-bottom: 25px;
          flex-wrap: nowrap;
          justify-content: space-between;
          position: relative;

          .txt {
            margin-left: 40px;
            font-size: 4.2vw;
            width: calc(100% - 120px);
          }

          .icon {
            display: block;
            width: 80px;

            span:first-child img {
              width: 30px;
              position: absolute;
              top: 15px;
              left: 10px;
            }

            span:last-child img {
              width: 80px;
            }
          }
        }
      }
    }

    & .point_detail {
      height: auto;
      padding: 40px 10px;
      margin-top: 0;

      .detail {
        width: auto;

        .img2 {
          width: 30px;
          margin: 5px 10px 0 0;
        }

        .txt {
          width: calc(100% - 40px);

          h3 {
            font-size: 20px;
          }

          h4 {
            font-size: 18px;
          }
        }
      }

      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(4) {
        background-position: calc(100vw / 5 * 3) 90%;
        background-size: 50%;
      }
    }
  }

  /* 業務範囲 */
  #service {
    padding: 40px 10px;

    .service {
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas:
        "svs1 svs2"
        "svs3 svs3"
        "note note ";
      gap: 10px;

      .item {
        width: auto;

        h3 {
          font-size: min(4.5vw, 20px);
          line-height: 20px;
        }

        div {
          font-size: min(4vw, 18px);
          line-height: 18px;

          span {
            font-size: 12px;
          }

          &:first-of-type {
            height: auto;
            display: block;
          }
        }

        &.svs3 {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          h3 {
            width: 100%;
          }

          div {
            width: calc(50% - 7.0px);
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }

  /* 給与計算業務　導入の流れ */
  #flow {
    padding: 40px 10px;

    .flow {
      .item {
        align-items: flex-start;
        padding-top: 90px;
        margin-bottom: 20px;
        position: relative;

        .no {
          width: 80px;
          height: 80px;
          padding-top: 12px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: 0 auto;

          &::after {
            display: none;
          }
        }

        img {
          width: 120px;
        }

        .txt {
          width: calc(100% - 130px);

          h3 {
            font-size: min(5.5vw, 24px);
          }

        }
      }
    }
  }

  #contact {
    & .table {
      border: none;
      border-collapse: collapse;
      border-spacing: 0;

      & th {
        border: none;
        padding: 10px 10px 0 10px;
        background: unset;
        font-weight: bold;
        text-align: left;
        vertical-align: top;
      }

      & td {
        border-style: solid;
        border-width: 0 0 1px;
        border-color: #fff;
        padding: 0 10px 10px;
        background: unset;
        font-weight: bold;
        text-align: left;
        vertical-align: top;

        & textarea {
          width: 100%;
          min-height: 120px;
        }
      }
    }

    & input[type="text"],
    & input[type="email"],
    & input[type="tel"] {
      box-sizing: border-box;
      padding: 8px;
      max-width: 100%;
    }

    & input[type="submit"] {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 32px;
      margin: 0 auto;
      width: 240px;
      height: 64px;
      background: #04a569;
      color: #fff;
      font-size: 20px;
    }
  }
}