@charset "UTF-8";

/* =====================
MV
===================== */
.service .mv::before {
  background-image: url('../../img/service/mv_2x.png');
}
.ses .mv::before {
  background-image: url('../../img/service/ses/mv_2x.png');
}
.education .mv::before {
  background-image: url('../../img/service/education/mv_2x.png');
}
.odm .mv::before {
  background-image: url('../../img/service/odm/mv_2x.png');
}
/* =====================
  list
===================== */
.link-list {
  display: grid;
  gap: calc((100 / 750) * 80 * 1vw);
  padding-inline: calc((100 / 750) * 19 * 1vw);
  & li {
    & a {
      display: grid;
      row-gap: calc((100 / 750) * 16 * 1vw);
      & picture {
        & img {
          border-radius: calc((100 / 750) * 24 * 1vw);
          width: calc((100 / 750) * 632 * 1vw);
        }
      }
      & h3 {
        position: relative;
        width: fit-content;
        font-size: calc((100 / 750) * 40 * 1vw);
        font-weight: 600;
        letter-spacing: calc((100 / 750) * 1.2 * 1vw);
        margin-top: calc((100 / 750) * 16 * 1vw);
        &::before {
          content: '';
          display: block;
          width: calc((100 / 750) * 48 * 1vw);
          aspect-ratio: 1/1;
          background-color: #074d94;
          border-radius: 50%;
          position: absolute;
          top: 50%;
          right: calc((100 / 750) * -72 * 1vw);
          transform: translateY(-50%);
        }
        &::after {
          content: '';
          display: block;
          width: calc((100 / 750) * 24 * 1vw);
          aspect-ratio: 1/1;
          mask-repeat: no-repeat;
          mask-size: contain;
          mask-position: center;
          mask-image: var(--arrow);
          background-color: #fff;
          position: absolute;
          top: 50%;
          right: calc((100 / 750) * -60 * 1vw);
          transform: translateY(-50%);
        }
      }
      & p {
        line-height: 2;
      }
    }
  }
}
/* =====================
  サービスTOP
===================== */
.service .article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 136 * 1vw);
  padding-bottom: calc((100 / 750) * 108 * 1vw);
  &::after {
    background-color: #fff;
  }
}
/* =====================
  SES
===================== */
.ses {
  .mv {
    .mv-title_wrap {
      padding-top: calc((100 / 750) * 82 * 1vw);
      .bread {
        margin-top: calc((100 / 750) * 86 * 1vw);
      }
    }
  }
}
.ses .article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 136 * 1vw);
  padding-bottom: calc((100 / 750) * 78 * 1vw);
  .about_wrap {
    & h3 {
      font-size: calc((100 / 750) * 42 * 1vw);
      font-weight: 600;
      letter-spacing: calc((100 / 750) * 1.26 * 1vw);
    }
    & > p {
      margin-top: calc((100 / 750) * 31 * 1vw);
      line-height: 2;
    }
  }
  .ses_recruit {
    position: relative;
    padding-inline: calc((100 / 750) * 64 * 1vw);
    padding-block: calc((100 / 750) * 65 * 1vw);
    margin-top: calc((100 / 750) * 157 * 1vw);
    border-radius: calc((100 / 750) * 16 * 1vw);
    background: linear-gradient(108deg, #2cacd1 12%, #2b76b9 38%, #074d94 90%);
    &::before {
      content: '';
      position: absolute;
      top: calc((100 / 750) * 4 * 1vw);
      bottom: calc((100 / 750) * 4 * 1vw);
      left: calc((100 / 750) * 4 * 1vw);
      right: calc((100 / 750) * 4 * 1vw);
      background-color: #fff;
      border-radius: calc((100 / 750) * 12 * 1vw);
    }
    & h4 {
      position: relative;
      font-size: calc((100 / 750) * 34 * 1vw);
      font-weight: 600;
      letter-spacing: calc((100 / 750) * 1.02 * 1vw);
      text-align: center;
      color: #074d94;
    }
    & p {
      position: relative;
      line-height: 2;
      margin-top: calc((100 / 750) * 22 * 1vw);
    }
    .hover-link-btn {
      margin-inline: auto;
      margin-top: calc((100 / 750) * 80 * 1vw);
      width: calc((100 / 750) * 464 * 1vw);
    }
  }
}
.ses .article[data-id='2'] {
  position: relative;
  padding-top: calc((100 / 750) * 78 * 1vw);
  padding-bottom: calc((100 / 750) * 78 * 1vw);
  .inner {
    & > ul {
      & > li {
        padding-block: calc((100 / 750) * 56 * 1vw) calc((100 / 750) * 79 * 1vw);
        border-bottom: 1px dashed #757587;
        & > p {
          margin-top: calc((100 / 750) * 30 * 1vw);
          line-height: 2;
        }
        .gray-list {
          margin-top: calc((100 / 750) * 49 * 1vw);
          & > li {
            & > p {
              margin-top: calc((100 / 750) * 8 * 1vw);
            }
          }
        }
        &[data-id='1'] {
          padding-block: calc((100 / 750) * 47 * 1vw) calc((100 / 750) * 79 * 1vw);
        }
      }
    }
  }
}

.ses .article[data-id='3'] {
  position: relative;
  padding-top: calc((100 / 750) * 78 * 1vw);
  padding-bottom: calc((100 / 750) * 78 * 1vw);
  .feature_wrap {
    position: relative;
    &::before {
      content: '';
      display: block;
      width: calc(100% - calc((100 / 750) * 40 * 1vw));
      height: calc((100 / 750) * 1731 * 1vw);
      border-radius: 0 calc((100 / 750) * 48 * 1vw) calc((100 / 750) * 48 * 1vw) 0;
      background-color: #2475ae;
      position: absolute;
      top: calc((100 / 750) * -82 * 1vw);
      left: 0;
    }
    .inner {
      & > ul {
        margin-top: calc((100 / 750) * 131 * 1vw);
        margin-right: calc((100 / 750) * 40 * 1vw);
        padding-inline: calc((100 / 750) * 80 * 1vw);
        & > li {
          display: grid;
          justify-items: center;
          padding-block: calc((100 / 750) * 46 * 1vw) calc((100 / 750) * 46 * 1vw);
          padding-inline: calc((100 / 750) * 40 * 1vw);
          border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
          & picture {
            & img {
              border-radius: calc((100 / 750) * 24 * 1vw);
              width: calc((100 / 750) * 318 * 1vw);
            }
          }
          & h3 {
            font-size: calc((100 / 750) * 36 * 1vw);
            font-weight: 600;
            letter-spacing: calc((100 / 750) * 2.88 * 1vw);
            text-align: center;
            color: #fff;
            margin-top: calc((100 / 750) * 24 * 1vw);
          }
          & p {
            font-weight: 600;
            line-height: 2;
            letter-spacing: calc((100 / 750) * 0.84 * 1vw);
            text-align: center;
            color: #fff;
            margin-top: calc((100 / 750) * 12 * 1vw);
          }
          &:last-child {
            border-bottom: none;
          }
        }
      }
      .feature_number {
        margin-top: calc((100 / 750) * 194 * 1vw);
        border-radius: calc((100 / 750) * 48 * 1vw);
        background-color: #eaf2fa;
        padding-inline: calc((100 / 750) * 80 * 1vw);
        padding-block: calc((100 / 750) * 80 * 1vw);
        .h3-title {
          text-align: center;
        }
        & ul {
          display: grid;
          gap: calc((100 / 750) * 48 * 1vw);
          margin-top: calc((100 / 750) * 31 * 1vw);
          padding-inline: calc((100 / 750) * 49 * 1vw);
          & li {
            position: relative;
            min-height: calc((100 / 750) * 422 * 1vw);
            display: grid;
            grid-template-rows: auto 1fr;
            &::before {
              content: '';
              display: block;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              width: calc((100 / 750) * 412 * 1vw);
              height: calc((100 / 750) * 332 * 1vw);
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
            & h4 {
              font-size: calc((100 / 750) * 32 * 1vw);
              font-weight: 600;
              line-height: 1.9;
              letter-spacing: calc((100 / 750) * 2.56 * 1vw);
              text-align: center;
              color: #fff;
              border-radius: calc((100 / 750) * 8 * 1vw);
              background-color: #074d94;
            }
            .number_wrap {
              display: grid;
              place-content: center;
              padding-top: calc((100 / 750) * 34 * 1vw);
              .what {
                font-size: calc((100 / 750) * 40 * 1vw);
                font-weight: 600;
                line-height: 1.7;
                letter-spacing: calc((100 / 750) * 3.2 * 1vw);
                text-align: center;
                color: #074d94;
              }
              .number {
                font-family: var(--mont);
                font-size: calc((100 / 750) * 48 * 1vw);
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: calc((100 / 750) * 0.96 * 1vw);
                text-align: center;
                color: #074d94;
              }
            }
            &[data-id='1']::before {
              background-image: url('../../img/service/ses/01_2x.png');
            }
            &[data-id='2']::before {
              background-image: url('../../img/service/ses/02_2x.png');
            }
            &[data-id='3']::before {
              background-image: url('../../img/service/ses/03_2x.png');
            }
            &[data-id='4']::before {
              background-image: url('../../img/service/ses/04_2x.png');
            }
            &[data-id='5']::before {
              background-image: url('../../img/service/ses/05_2x.png');
            }
            &[data-id='6']::before {
              background-image: url('../../img/service/ses/06_2x.png');
            }
            &[data-id='7']::before {
              background-image: url('../../img/service/ses/07_2x.png');
            }
            &[data-id='8']::before {
              background-image: url('../../img/service/ses/08_2x.png');
            }
            &[data-id='9']::before {
              background-image: url('../../img/service/ses/09_2x.png');
            }
          }
        }
      }
    }
  }
}
.ses .article[data-id='4'] {
  position: relative;
  padding-top: calc((100 / 750) * 78 * 1vw);
  padding-bottom: calc((100 / 750) * 108 * 1vw);
  &::after {
    background-color: #fff;
  }
}
/* =====================
  教育サービス事業
===================== */
.education .article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 80 * 1vw);
  padding-bottom: calc((100 / 750) * 76 * 1vw);
  .section {
    padding-block: calc((100 / 750) * 56 * 1vw) calc((100 / 750) * 79 * 1vw);
    border-bottom: 1px dashed #757587;
    & > p {
      line-height: 2;
      margin-top: 8px;
    }
    .table {
      width: 100%;
      height: fit-content;
      & tr {
        & th,
        & td {
          line-height: 2;
        }
        & th {
          letter-spacing: calc((100 / 750) * 0.78 * 1vw);
        }
      }
    }
    .section_wrap {
      display: flex;
      flex-direction: column;
      gap: calc((100 / 750) * 45 * 1vw);
      margin-top: calc((100 / 750) * 24 * 1vw);
      .img_wrap {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: space-between;
        flex-shrink: 0;
        & picture {
          display: block;
          & img {
            border-radius: calc((100 / 750) * 24 * 1vw);
          }
        }
      }
      .section_unit {
        width: 100%;
      }
    }
    .c-list {
      padding-inline: calc((100 / 750) * 40 * 1vw);
      padding-block: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 50 * 1vw);
      border-radius: calc((100 / 750) * 8 * 1vw);
      background-color: #f4f6f8;
      margin-top: calc((100 / 750) * 40 * 1vw);
      .h4-title-20 {
        margin-top: 0;
      }
      & ul {
        margin-top: calc((100 / 750) * 19 * 1vw);
        & li {
          position: relative;
          margin-top: calc((100 / 750) * 13 * 1vw);
          display: flex;
          align-items: center;
          gap: 12px;
          &::before {
            content: '';
            display: block;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: var(--check);
            width: calc((100 / 750) * 28 * 1vw);
            aspect-ratio: 1/1;
            flex-shrink: 0;
          }
        }
      }
    }
    .h4-title-22 {
      margin-top: calc((100 / 750) * 40 * 1vw);
    }
    &[data-id='0'],
    &[data-id='2'],
    &[data-id='3'],
    &[data-id='8'] {
      & > p {
        margin-top: 32px;
      }
    }
    &[data-id='1'] {
      .section_wrap {
        margin-top: calc((100 / 750) * 32 * 1vw);
        .img_wrap {
          & picture {
            & img {
              width: calc((100 / 750) * 327 * 1vw);
            }
          }
        }
      }
    }
    &[data-id='3'] {
      .section_wrap {
        .img_wrap {
          & picture {
            & img {
              width: calc((100 / 750) * 327 * 1vw);
            }
          }
        }
      }
      .h4-title-22:not(:first-of-type) {
        margin-top: calc((100 / 750) * 57 * 1vw);
      }
      & > .table {
        margin-top: calc((100 / 750) * 24 * 1vw);
      }
    }
    &[data-id='4'] {
      padding-block: calc((100 / 750) * 33 * 1vw) calc((100 / 750) * 79 * 1vw);
      .h4-title-24 {
        margin-top: calc((100 / 750) * 32 * 1vw);
      }
      .section_wrap {
        gap: calc((100 / 750) * 49 * 1vw);
        .section_unit {
          & > p {
            line-height: 2;
            margin-top: calc((100 / 750) * 14 * 1vw);
          }
        }
        .img_wrap {
          justify-content: center;
          & picture {
            & img {
              width: calc((100 / 750) * 451 * 1vw);
            }
          }
        }
      }
    }
    &[data-id='5'] {
      & > ul {
        margin-top: calc((100 / 750) * 32 * 1vw);
        & li {
          & p {
            line-height: 2;
            margin-top: calc((100 / 750) * 14 * 1vw);
          }
        }
        & li + li {
          margin-top: calc((100 / 750) * 26 * 1vw);
        }
      }
    }
    &[data-id='6'] {
      & > ul {
        margin-top: calc((100 / 750) * 33 * 1vw);
        & li {
          position: relative;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: calc((100 / 750) * 16 * 1vw);
          & p {
            position: relative;
            line-height: 2;
            width: calc((100 / 750) * 494 * 1vw);
            padding-inline: calc((100 / 750) * 56 * 1vw);
            padding-block: calc((100 / 750) * 32 * 1vw);
            background-color: #eaf2fa;
            border-radius: calc((100 / 750) * 16 * 1vw) calc((100 / 750) * 16 * 1vw) calc((100 / 750) * 16 * 1vw) 0;
            display: block;
            flex-shrink: 0;
            &::before {
              content: '';
              display: block;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--subtract);
              background-color: #eaf2fa;
              width: calc((100 / 750) * 30 * 1vw);
              aspect-ratio: 1/1;
              position: absolute;
              bottom: 0;
              left: calc((100 / 750) * -30 * 1vw);
            }
          }
          & + li {
            margin-top: calc((100 / 750) * 48 * 1vw);
          }
          &::before {
            content: '';
            display: block;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
            mask-image: var(--person);
            background-color: #677686;
            width: calc((100 / 750) * 156 * 1vw);
            height: calc((100 / 750) * 167 * 1vw);
            flex-shrink: 0;
          }
          &:nth-child(2n) {
            flex-direction: row-reverse;
            & p {
              background-color: #e4f5ff;
              border-radius: calc((100 / 750) * 16 * 1vw) calc((100 / 750) * 16 * 1vw) 0 calc((100 / 750) * 16 * 1vw);
              &::before {
                left: unset;
                right: calc((100 / 750) * -30 * 1vw);
                background-color: #e4f5ff;
                transform: scale(-1, 1);
              }
            }
            &::before {
              background-color: #7291a4;
            }
          }
          &[data-color='blue'] {
            &::before {
              background-color: #105ba6;
            }
            & p {
              color: #08335e;
              background-color: #eaf2fa;
              &::before {
                background-color: #eaf2fa;
              }
            }
          }
          &[data-color='orange'] {
            &::before {
              background-color: #ff6d12;
            }
            & p {
              color: #683212;
              background-color: #ffe2cf;
              &::before {
                background-color: #ffe2cf;
              }
            }
          }
          &[data-color='purple'] {
            &::before {
              background-color: #7e3677;
            }
            & p {
              color: #76246d;
              background-color: #ffe0fc;
              &::before {
                background-color: #ffe0fc;
              }
            }
          }
          &[data-color='yellow'] {
            &::before {
              background-color: #b8871f;
            }
            & p {
              color: #574112;
              background-color: #ffecc4;
              &::before {
                background-color: #ffecc4;
              }
            }
          }
          &[data-color='green'] {
            &::before {
              background-color: #3ba91f;
            }
            & p {
              color: #255518;

              background-color: #ceebc6;
              &::before {
                background-color: #ceebc6;
              }
            }
          }
        }
      }
    }
    &[data-id='7'] {
      .section_wrap {
        margin-top: calc((100 / 750) * 32 * 1vw);
        .section_unit {
          & > p {
            line-height: 2;
            margin-top: 24px;
          }
        }
        .img_wrap {
          justify-content: center;
          & picture {
            & img {
              width: calc((100 / 750) * 478 * 1vw);
            }
          }
        }
      }
    }
  }
}
.education .article[data-id='2'] {
  position: relative;
  padding-top: calc((100 / 750) * 82 * 1vw);
  padding-bottom: calc((100 / 750) * 108 * 1vw);
  &::after {
    background-color: #fff;
  }
}
/* =====================
  受託開発事業
===================== */
.odm .article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 136 * 1vw);
  padding-bottom: calc((100 / 750) * 204 * 1vw);
  .section {
    border-bottom: 1px dashed #757587;
    padding-bottom: calc((100 / 750) * 80 * 1vw);
    .about_wrap {
      & > p {
        line-height: 2;
        margin-top: calc((100 / 750) * 31 * 1vw);
      }
    }
    .h4-title-22 {
      margin-top: calc((100 / 750) * 58 * 1vw);
    }
    .table {
      margin-top: calc((100 / 750) * 24 * 1vw);
      & tbody {
        & tr {
          & th {
            letter-spacing: 0.78px;
          }
          & th,
          & td {
            line-height: 2;
            padding-block: calc((100 / 750) * 22 * 1vw);
          }
        }
      }
    }
  }
}
.odm .article[data-id='2'] {
  position: relative;
  background-color: #eaf2fa;
  padding-top: calc((100 / 750) * 88 * 1vw);
  padding-bottom: calc((100 / 750) * 154 * 1vw);
  &::before {
    background-color: #eaf2fa;
  }
  .inner {
    & > p {
      margin-top: calc((100 / 750) * 46 * 1vw);
      line-height: 2;
    }
    & > ul {
      display: grid;
      gap: calc((100 / 750) * 56 * 1vw);
      margin-top: calc((100 / 750) * 65 * 1vw);
      & > li {
        border-radius: calc((100 / 750) * 24 * 1vw);
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        & picture {
          & img {
            border-radius: calc((100 / 750) * 24 * 1vw) calc((100 / 750) * 24 * 1vw) 0 0;
            width: calc((100 / 750) * 670 * 1vw);
          }
        }
        .works_wrap {
          position: relative;
          display: grid;
          grid-template-rows: subgrid;
          grid-row: span 3;
          background-color: #fff;
          border-radius: 0 0 calc((100 / 750) * 24 * 1vw) calc((100 / 750) * 24 * 1vw);
          padding-inline: calc((100 / 750) * 56 * 1vw);
          padding-block: calc((100 / 750) * 40 * 1vw);
          &::before {
            content: '';
            display: block;
            width: calc((100 / 750) * 670 * 1vw);
            height: calc((100 / 750) * 98 * 1vw);
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
            position: absolute;
            top: calc((100 / 750) * -98 * 1vw);
            left: 0;
            pointer-events: none;
          }
          & h4 {
            font-size: calc((100 / 750) * 32 * 1vw);
            font-weight: 600;
            letter-spacing: calc((100 / 750) * 0.96 * 1vw);
          }
          & p {
            margin-top: calc((100 / 750) * 14 * 1vw);
            line-height: 2;
          }
          .tag {
            font-size: calc((100 / 750) * 22 * 1vw);
            line-height: 2;
            color: #074d94;
            display: flex;
            flex-wrap: wrap;
            gap: calc((100 / 750) * 6 * 1vw) calc((100 / 750) * 12 * 1vw);
            margin-top: calc((100 / 750) * 24 * 1vw);
            & > li {
              position: relative;
              display: flex;
              gap: calc((100 / 750) * 2 * 1vw);
              &::before {
                content: '＃';
                display: block;
                flex-shrink: 0;
              }
            }
          }
        }
        &[data-id='1'] {
          order: 3;
        }
        &[data-id='2'] {
          order: 4;
        }
        &[data-id='3'] {
          order: 1;
        }
        &[data-id='4'] {
          order: 2;
        }
      }
    }
  }
}
.odm .article[data-id='3'] {
  position: relative;
  padding-top: calc((100 / 750) * 81 * 1vw);
  padding-bottom: calc((100 / 750) * 76 * 1vw);
  .section {
    padding-block: calc((100 / 750) * 56 * 1vw) calc((100 / 750) * 80 * 1vw);
    border-bottom: 1px dashed #757587;
    & > p {
      margin-top: calc((100 / 750) * 30 * 1vw);
      line-height: 2;
    }
    .h4-title-22 {
      margin-top: calc((100 / 750) * 58 * 1vw);
    }
    .table {
      margin-top: calc((100 / 750) * 24 * 1vw);
      & tbody {
        & tr {
          & th {
            letter-spacing: calc((100 / 750) * 0.78 * 1vw);
          }
          & th,
          & td {
            line-height: 2;
            padding-block: calc((100 / 750) * 22 * 1vw);
          }
          .sub-td {
            width: calc((100 / 750) * 156 * 1vw);
          }
        }
      }
    }
    &[data-id='1'] {
      .table[data-id='2'] {
        & tbody {
          & tr {
            & th {
              width: calc((100 / 750) * 136 * 1vw);
            }
            .middle-td {
              width: calc((100 / 750) * 156 * 1vw);
            }
          }
        }
      }
    }
    &[data-id='2'] {
      .h4-title-22:first-of-type {
        margin-top: calc((100 / 750) * 31 * 1vw);
      }
    }
  }
}
.odm .article[data-id='4'] {
  position: relative;
  padding-top: calc((100 / 750) * 80 * 1vw);
  padding-bottom: calc((100 / 750) * 108 * 1vw);
  &::after {
    background-color: #fff;
  }
}