.pages.system .navigation-headline {
  color: #b1b1b1;
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 4rem;
  font-size: 1.8rem; }
  .pages.system .navigation-headline .button {
    background-color: transparent;
    border: none;
    width: 20rem; }
  .pages.system .navigation-headline .blue-line {
    border-bottom: 1px solid #00aaff; }
  .pages.system .navigation-headline .green-line {
    border-bottom: 1px solid #1ec658; }
  .pages.system .navigation-headline .purple-line {
    border-bottom: 1px solid #b146d1; }
  .pages.system .navigation-headline .blue-text {
    color: #00aaff; }
  .pages.system .navigation-headline .green-text {
    color: #1ec658; }
  .pages.system .navigation-headline .purple-text {
    color: #b146d1; }

.pages.system .system-summaries-area {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: auto;
  gap: 2rem;
  margin-bottom: 16rem; }
  .pages.system .system-summaries-area .summary-card {
    height: 35rem;
    width: 30rem;
    margin-top: 8rem;
    box-shadow: -1rem -1rem 2rem rgba(0, 0, 0, 0.1), 1rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border-radius: 5rem; }
    .pages.system .system-summaries-area .summary-card .title {
      padding: 3.6rem 0 4.1rem; }
      .pages.system .system-summaries-area .summary-card .title .common-button.middle {
        margin: 0 auto;
        cursor: default; }
      .pages.system .system-summaries-area .summary-card .title .text-color-purchase {
        background-color: #00aaff; }
      .pages.system .system-summaries-area .summary-card .title .text-color-stock {
        background-color: #1ec658; }
      .pages.system .system-summaries-area .summary-card .title .text-color-equipment {
        background-color: #b146d1; }
  .pages.system .system-summaries-area .summary-list {
    padding: 0 0 7rem 6rem; }
    .pages.system .system-summaries-area .summary-list .summary {
      position: relative;
      font-size: 15px;
      margin-bottom: 25px; }
    .pages.system .system-summaries-area .summary-list .summary::before {
      position: absolute;
      left: -2rem;
      content: '';
      height: 0.5rem;
      width: 0.5rem;
      background-color: #00aaff;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%); }
    .pages.system .system-summaries-area .summary-list .background-color-purchase::before {
      background-color: #00aaff; }
    .pages.system .system-summaries-area .summary-list .background-color-stock::before {
      background-color: #1ec658; }
    .pages.system .system-summaries-area .summary-list .background-color-equipment::before {
      background-color: #b146d1; }

.pages.system .system-descriptions-area {
  overflow: hidden;
  padding: 0 1rem; }
  .pages.system .system-descriptions-area.background-color-purchase {
    background: linear-gradient(to bottom, #ffffff 0%, #ace4fc 100%); }
  .pages.system .system-descriptions-area.background-color-stock {
    background: linear-gradient(to bottom, #ffffff 0%, #c8f7d5 100%); }
  .pages.system .system-descriptions-area.background-color-equipment {
    background: linear-gradient(to bottom, #ffffff 0%, #e8d7f9 100%); }
  .pages.system .system-descriptions-area .system-description-area {
    margin-bottom: 8rem; }
    .pages.system .system-descriptions-area .system-description-area .title {
      font-size: 2.5rem;
      text-align: center;
      padding-bottom: 3rem; }
    .pages.system .system-descriptions-area .system-description-area .text-color-purchase {
      color: #00aaff; }
    .pages.system .system-descriptions-area .system-description-area .text-color-stock {
      color: #1ec658; }
    .pages.system .system-descriptions-area .system-description-area .text-color-equipment {
      color: #b146d1; }
    .pages.system .system-descriptions-area .system-description-area .sub-title {
      font-size: 2rem;
      text-align: center;
      padding-bottom: 1rem; }
    .pages.system .system-descriptions-area .system-description-area .system-list {
      text-align: center;
      font-size: 1.4rem;
      margin-top: 2rem; }
    .pages.system .system-descriptions-area .system-description-area .description-list-area {
      margin-top: 8rem;
      display: flex;
      flex-direction: column;
      gap: 8rem; }
      .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container {
        display: flex;
        gap: 5rem; }
        .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area {
          width: 45%;
          display: flex;
          justify-content: right; }
          .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area .description-card {
            width: 50rem;
            box-shadow: -1rem -1rem 2rem rgba(0, 0, 0, 0.1), 1rem 1rem 2rem rgba(0, 0, 0, 0.1);
            border-radius: 2rem;
            align-self: start;
            background-color: white; }
            .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area .description-card .title {
              margin: 4rem auto 2rem;
              font-size: 3rem;
              text-align: left;
              padding: 0 5rem; }
            .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area .description-card .text-color-purchase {
              color: #00aaff; }
            .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area .description-card .text-color-stock {
              color: #1ec658; }
            .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area .description-card .text-color-equipment {
              color: #b146d1; }
            .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area .description-card .description {
              line-height: 3.5rem;
              margin-bottom: 4rem;
              padding: 0 5rem; }
        .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .images-area {
          width: 45%;
          display: flex;
          flex-direction: column;
          gap: 5rem; }
          .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .images-area .image-area .image-title {
            margin-left: 2rem;
            color: #b1b1b1; }
          .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .images-area .image-area .image {
            width: 100%; }

@media (min-width: 768px) and (max-width: 1300px) {
  .pages.system .system-summaries-area {
    flex-wrap: wrap;
    width: 76.8rem; }
    .pages.system .system-summaries-area .summary-card {
      margin-top: 6rem; } }

@media (max-width: 768px) {
  .pages.system .navigation-headline {
    align-items: center;
    gap: 2rem;
    flex-direction: row; }
    .pages.system .navigation-headline .button {
      width: 10rem; }
  .pages.system .system-summaries-area {
    gap: 6rem;
    padding: 6rem 0;
    flex-direction: column; }
    .pages.system .system-summaries-area .summary-card {
      margin: 0;
      padding-bottom: 2rem;
      height: auto; }
      .pages.system .system-summaries-area .summary-card .summary-list {
        padding: 0 0 0 6rem; }
  .pages.system .system-descriptions-area .system-description-area {
    margin-bottom: 0; }
    .pages.system .system-descriptions-area .system-description-area .sub-title {
      padding: 0 2rem;
      line-height: 3rem; }
    .pages.system .system-descriptions-area .system-description-area .system-list {
      padding: 0 2rem; }
    .pages.system .system-descriptions-area .system-description-area .description-list-area {
      margin-top: 6rem; }
      .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container {
        flex-direction: column;
        align-items: center; }
        .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area {
          width: 90%;
          justify-content: left; }
          .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area .description-card .title {
            font-size: 2rem;
            padding: 0 1rem 0 1rem;
            margin: 2rem auto 1rem; }
          .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .description-area .description-card .description {
            font-size: 1.2rem;
            padding: 0 1rem 0 1rem;
            margin-bottom: 2rem; }
        .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .images-area {
          width: 90%; }
          .pages.system .system-descriptions-area .system-description-area .description-list-area .description-area-container .images-area .image-area {
            margin-bottom: 6rem; } }