@charset "UTF-8";

/* =====================
MV
===================== */
.service .mv::before {
  background-image: url('../../img/service/mv.png');
}
.ses .mv::before {
  background-image: url('../../img/service/ses/mv.png');
}
.education .mv::before {
  background-image: url('../../img/service/education/mv.png');
}
.odm .mv::before {
  background-image: url('../../img/service/odm/mv.png');
}
/* =====================
  list
===================== */
.link-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  & li {
    & a {
      display: grid;
      row-gap: 16px;
      & picture {
        & img {
          border-radius: 24px;
        }
      }
      & h3 {
        position: relative;
        width: fit-content;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 0.72px;
        margin-top: 8px;
        &::before {
          content: '';
          display: block;
          width: 28px;
          aspect-ratio: 1/1;
          background-color: #074d94;
          border-radius: 50%;
          position: absolute;
          top: 50%;
          right: -44px;
          transform: translateY(-50%);
        }
        &::after {
          content: '';
          display: block;
          width: 10px;
          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: -36px;
          transform: translateY(-50%);
        }
      }
      & p {
        line-height: 2;
      }
    }
  }
}
/* =====================
  サービスTOP
===================== */
.service .article[data-id='1'] {
  position: relative;
  padding-top: 120px;
  padding-bottom: 96px;
  &::after {
    background-color: #fff;
  }
}
/* =====================
  SES
===================== */
.ses .article[data-id='1'] {
  position: relative;
  padding-top: 120px;
  padding-bottom: 70px;
  .about_wrap {
    padding-right: 40px;
    display: flex;
    gap: 104px;
    & h3 {
      font-size: 32px;
      font-weight: 600;
      letter-spacing: 0.96px;
      flex-shrink: 0;
    }
    & > p {
      line-height: 2;
    }
  }
  .ses_recruit {
    position: relative;
    width: 1060px;
    padding-inline: 80px;
    padding-block: 48px;
    margin-top: 140px;
    margin-inline: auto;
    border-radius: 16px;
    background: linear-gradient(108deg, #2cacd1 12%, #2b76b9 38%, #074d94 90%);
    &::before {
      content: '';
      position: absolute;
      top: 2px;
      bottom: 2px;
      left: 2px;
      right: 2px;
      background-color: #fff;
      border-radius: 14px;
    }
    & h4 {
      position: relative;
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 0.72px;
      text-align: center;
      color: #074d94;
    }
    & p {
      position: relative;
      line-height: 2;
      margin-top: 24px;
    }
    .hover-link-btn {
      margin-inline: auto;
      margin-top: 56px;
      width: 289px;
      .link-anchor {
        padding-inline: 40px 24px;
      }
    }
  }
}
.ses .article[data-id='2'] {
  position: relative;
  padding-top: 70px;
  padding-bottom: 70px;
  .inner {
    & > ul {
      & > li {
        padding-block: 56px 79px;
        border-bottom: 1px dashed #757587;
        & > p {
          margin-top: 32px;
          line-height: 2;
        }
        .gray-list {
          margin-top: 40px;
          & > li {
            & > p {
              margin-top: 8px;
            }
          }
        }
        &[data-id='1'] {
          padding-block: 46px 79px;
          .gray-list {
            grid-auto-columns: 1fr 511px 1fr;
          }
        }
      }
    }
  }
}

.ses .article[data-id='3'] {
  position: relative;
  padding-top: 70px;
  padding-bottom: 70px;
  .feature_wrap {
    position: relative;
    &::before {
      content: '';
      display: block;
      width: calc((100% - 1140px) / 2 + 1140px);
      height: 495px;
      border-radius: 0 48px 48px 0;
      background-color: #2475ae;
      position: absolute;
      top: -80px;
      left: 0;
    }
    .inner {
      & > ul {
        display: flex;
        margin-top: 127px;
        & > li {
          padding-block: 16px;
          padding-inline: 56px;
          border-right: 1px dashed rgba(255, 255, 255, 0.6);
          & picture {
            & img {
              border-radius: 24px;
            }
          }
          & h3 {
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 1.92px;
            text-align: center;
            color: #fff;
            margin-top: 24px;
          }
          & p {
            font-weight: 600;
            line-height: 2;
            letter-spacing: 0.48px;
            text-align: center;
            color: #fff;
            margin-top: 8px;
          }
          &:last-child {
            border-right: none;
          }
        }
      }
      .feature_number {
        margin-top: 176px;
        border-radius: 48px;
        background-color: #eaf2fa;
        padding-inline: 80px;
        padding-block: 80px;
        .h3-title {
          text-align: center;
        }
        & ul {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 50px 40px;
          margin-top: 32px;
          & li {
            position: relative;
            min-height: 263px;
            display: grid;
            grid-template-rows: auto 1fr;
            &::before {
              content: '';
              display: block;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              width: 300px;
              height: 193px;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
            & h4 {
              font-size: 20px;
              font-weight: 600;
              line-height: 1.9;
              letter-spacing: 1.6px;
              text-align: center;
              color: #fff;
              border-radius: 8px;
              background-color: #074d94;
            }
            .number_wrap {
              display: grid;
              place-content: center;
              padding-top: 34px;
              .what {
                font-size: 24px;
                font-weight: 600;
                line-height: 1.7;
                letter-spacing: 1.92px;
                text-align: center;
                color: #074d94;
              }
              .number {
                font-family: var(--mont);
                font-size: 32px;
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: 0.64px;
                text-align: center;
                color: #074d94;
              }
            }
            &[data-id='1']::before {
              background-image: url('../../img/service/ses/01.png');
            }
            &[data-id='2']::before {
              background-image: url('../../img/service/ses/02.png');
            }
            &[data-id='3']::before {
              background-image: url('../../img/service/ses/03.png');
            }
            &[data-id='4']::before {
              background-image: url('../../img/service/ses/04.png');
            }
            &[data-id='5']::before {
              background-image: url('../../img/service/ses/05.png');
            }
            &[data-id='6']::before {
              background-image: url('../../img/service/ses/06.png');
            }
            &[data-id='7']::before {
              background-image: url('../../img/service/ses/07.png');
            }
            &[data-id='8']::before {
              background-image: url('../../img/service/ses/08.png');
            }
            &[data-id='9']::before {
              background-image: url('../../img/service/ses/09.png');
            }
          }
        }
      }
    }
  }
}
.ses .article[data-id='4'] {
  position: relative;
  padding-top: 70px;
  padding-bottom: 93px;
  &::after {
    background-color: #fff;
  }
}
/* =====================
  教育サービス事業
===================== */
.education .article[data-id='1'] {
  position: relative;
  padding-top: 64px;
  padding-bottom: 70px;
  .section {
    padding-block: 56px 79px;
    border-bottom: 1px dashed #757587;
    & > p {
      line-height: 2;
      margin-top: 8px;
    }
    .table {
      width: 712px;
      height: fit-content;
      margin-top: 15px;
      & tr {
        & th,
        & td {
          line-height: 2;
        }
      }
    }
    .section_wrap {
      display: flex;
      justify-content: space-between;
      .img_wrap {
        margin-top: 15px;
        display: grid;
        grid-auto-rows: max-content;
        flex-shrink: 0;
        gap: 24px;
        & picture {
          display: block;
          & img {
            border-radius: 24px;
          }
        }
      }
      .section_unit {
        width: 644px;
      }
    }
    .c-list {
      padding-inline: 40px;
      padding-block: 32px 42px;
      border-radius: 8px;
      background-color: #f4f6f8;
      margin-top: 40px;
      .h4-title-20 {
        margin-top: 0;
      }
      & ul {
        margin-top: 17px;
        & li {
          position: relative;
          margin-top: 9px;
          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: 16px;
            aspect-ratio: 1/1;
            flex-shrink: 0;
          }
        }
      }
    }
    .h4-title-22 {
      margin-top: 40px;
    }
    &[data-id='0'],
    &[data-id='2'],
    &[data-id='3'],
    &[data-id='8'] {
      & > p {
        margin-top: 32px;
      }
    }
    &[data-id='1'] {
      .section_wrap {
        margin-top: 16px;
      }
    }
    &[data-id='4'] {
      .h4-title-24 {
        margin-top: 32px;
      }
      .section_unit {
        & > p {
          line-height: 2;
          margin-top: 10px;
        }
      }
    }
    &[data-id='5'] {
      & > ul {
        margin-top: 32px;
        & li {
          & p {
            line-height: 2;
            margin-top: 8px;
          }
        }
        & li + li {
          margin-top: 24px;
        }
      }
    }
    &[data-id='6'] {
      & > ul {
        margin-top: 30px;
        & li {
          position: relative;
          display: flex;
          align-items: flex-end;
          gap: 16px;
          & p {
            position: relative;
            line-height: 2;
            width: 796px;
            padding-inline: 56px;
            padding-block: 32px;
            background-color: #eaf2fa;
            border-radius: 16px 16px 16px 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: 16px;
              aspect-ratio: 1/1;
              position: absolute;
              bottom: 0;
              left: -16px;
            }
          }
          & + li {
            margin-top: 24px;
          }
          &::before {
            content: '';
            display: block;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
            mask-image: var(--person);
            background-color: #677686;
            width: 120px;
            height: 128px;
            flex-shrink: 0;
          }
          &:nth-child(2n) {
            flex-direction: row-reverse;
            & p {
              background-color: #e4f5ff;
              border-radius: 16px 16px 0 16px;
              &::before {
                left: unset;
                right: -16px;
                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: 16px;
        gap: 32px;

        .section_unit {
          width: 660px;
          & > p {
            line-height: 2;
            margin-top: 24px;
          }
          .table {
            width: 100%;
          }
        }
        .img_wrap {
          & picture {
            &:nth-child(2) {
              display: none;
            }
          }
        }
      }
    }
  }
}
.education .article[data-id='2'] {
  position: relative;
  padding-top: 70px;
  padding-bottom: 98px;
  &::after {
    background-color: #fff;
  }
}
/* =====================
  受託開発事業
===================== */
.odm .article[data-id='1'] {
  position: relative;
  padding-top: 120px;
  padding-bottom: 188px;
  .section {
    border-bottom: 1px dashed #757587;
    padding-bottom: 80px;
    .about_wrap {
      & > p {
        line-height: 2;
        margin-top: 32px;
      }
    }
    .h4-title-22 {
      margin-top: 40px;
    }
    .table {
      margin-top: 16px;
      & tbody {
        & tr {
          & th {
            width: 240px;
            letter-spacing: 0.45px;
          }
          & th,
          & td {
            line-height: 2;
          }
        }
      }
    }
  }
}
.odm .article[data-id='2'] {
  position: relative;
  background-color: #eaf2fa;
  padding-top: 70px;
  padding-bottom: 140px;
  &::before {
    background-color: #eaf2fa;
  }
  .inner {
    & > p {
      margin-top: 50px;
    }
    & > ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 57px 48px;
      margin-top: 67px;
      & > li {
        border-radius: 24px;
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        & picture {
          & img {
            border-radius: 24px 24px 0 0;
          }
        }
        .works_wrap {
          position: relative;
          display: grid;
          grid-template-rows: subgrid;
          grid-row: span 3;
          background-color: #fff;
          border-radius: 0 0 24px 24px;
          padding-inline: 40px;
          padding-block: 40px;
          &::before {
            content: '';
            display: block;
            width: 546px;
            height: 80px;
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
            position: absolute;
            top: -80px;
            left: 0;
            pointer-events: none;
          }
          & h4 {
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 0.66px;
          }
          & p {
            margin-top: 14px;
            line-height: 2;
            min-height: 96px;
          }
          .tag {
            font-size: 13px;
            line-height: 2;
            color: #074d94;
            display: flex;
            gap: 12px;
            margin-top: 24px;
            & > li {
              position: relative;
              display: flex;
              gap: 2px;
              &::before {
                content: '＃';
                display: block;
              }
            }
          }
        }
      }
    }
  }
}
.odm .article[data-id='3'] {
  position: relative;
  padding-top: 66px;
  padding-bottom: 70px;
  .section {
    padding-block: 56px 80px;
    border-bottom: 1px dashed #757587;
    & > p {
      margin-top: 32px;
      line-height: 2;
    }
    .h4-title-22 {
      margin-top: 40px;
    }
    .table {
      margin-top: 16px;
      & tbody {
        & tr {
          & th {
            width: 240px;
            letter-spacing: 0.45px;
          }
          & th,
          & td {
            line-height: 2;
          }
          .sub-td {
            width: 193px;
          }
        }
      }
    }
    &[data-id='1'] {
      .table[data-id='2'] {
        width: 100%;
      }
    }
    &[data-id='2'] {
      .h4-title-22:first-of-type {
        margin-top: 31px;
      }
    }
  }
}
.odm .article[data-id='4'] {
  position: relative;
  padding-top: 70px;
  padding-bottom: 94px;
  &::after {
    background-color: #fff;
  }
}