.p-page-design {
  .p-page-design-solutions {
    margin-top: 150px;

    .c-title-h2 {
      margin-top: 50px;
    }

    .c-title-h3 {
      display: none;
    }

    .p-page-design-solutions-contents {
      display: grid;
      gap: 72px;
      margin-top: 70px;

      .p-page-design-solutions-content {
        .p-page-design-solutions-content-list {
          position: relative;
          display: inline-flex;
          gap: 50px;
          padding-top: 30px;
          border-top: 1px solid var(--color-border-01);
          flex-wrap: wrap;

          .p-page-design-solutions-content-list__item {

            .p-page-design-solutions-content-box {
              .p-page-design-solutions-content-box__title {
                display: inline-flex;
                gap: 20px;
                align-items: center;

                &::before {
                  content: '';
                  display: block;
                  width: 20px;
                  height: 20px;
                  background-color: var(--color-border-01);
                  border-radius: 50%;;
                }
              }
            }

            .p-page-design-solutions-content-box__description {
              margin-left: calc(20px + 20px);

              .p-page-design-solutions-content-box-item-list {
                display: grid;

                .p-page-design-solutions-content-box-item-list__item {
                  display: flex;
                  gap: 5px;
                  align-items: center;
                  font-size: 1.6rem;
                  line-height: 170%;
                  letter-spacing: 1.6px;
                  position: relative;

                  &::before {
                    content: '・';
                    display: inline-block
                  }
                }
              }
            }
          }
        }

        &:nth-child(1) {
          .p-page-design-solutions-content-list {
            .p-page-design-solutions-content-list__item {
              &:last-child {
                flex: 0 0 0 auto;
              }
            }
          }
        }

        &:nth-child(2) {
          .p-page-design-solutions-content-list {
            &::after {
              content: '';
              display: inline-block;
              position: absolute;
              top: -22px;
              right: 0;
              background-image: url('../../../../img/design/solutions_border_right_arrow.svg');
              background-repeat: no-repeat;
              background-position: 0;
              background-size: contain;
              width: 22px;
              height: 44px;  
            }
          }
        }
      }
    }  
  }

  .p-page-design-core-strengths {
    background: var(--color-gradient-02);
    padding: 150px 0;
    margin-top: 150px;

    .c-box-content-media-card-list {
      margin-top: 100px;
    }
  }

  .p-page-design-customer-testimonials {
    padding: 150px 0;

    .p-page-design-customer-testimonials-contents {
      margin-top: 50px;
    }
  }
}

/* TABLET */
@media screen and (max-width: 1024px) {
  .p-page-design {
    .p-page-design-solutions {
      .l-container {
        margin: 0 var(--device-tab-padding);
      }
    }

    .p-page-design-core-strengths {
      .l-container {
        margin: 0 var(--device-tab-padding);
      }
    }

    .p-page-design-customer-testimonials {
      .l-container {
        margin: 0 var(--device-tab-padding);
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .p-page-design {
    .p-page-design-solutions {
      margin-top: 100px;

      .l-container {
        margin: var(--layout-sp-container-margin);
      }
  
      .c-title-h2 {
        display: none;
      }

      .c-title-h3 {
        display: block;
        margin-top: 50px;
      }
  
      .p-page-design-solutions-contents {
        gap: 10px;
        margin-top: 50px;
        margin: 50px 0 0 13px;
        position: relative;
  
        .p-page-design-solutions-content {
          .p-page-design-solutions-content-list {
            display: grid;
            gap: 10px;
            padding-top: 0;
            border-top: none;
  
            .p-page-design-solutions-content-list__item {
  
              .p-page-design-solutions-content-box {
                .p-page-design-solutions-content-box__title {
                  gap: 20px;
  
                  &::before {
                    width: 18px;
                    height: 18px;
                  }
                }
              }
  
              .p-page-design-solutions-content-box__description {
                margin-left: calc(18px + 20px);
  
                .p-page-design-solutions-content-box-item-list {
                  display: grid;
  
                  .p-page-design-solutions-content-box-item-list__item {
                  }
                }
              }
            }
          }
  
          &:nth-child(1) {
            .p-page-design-solutions-content-list {
              .p-page-design-solutions-content-list__item {
                &:last-child {
                  flex: 0 0 0 auto;
                }
              }
            }
          }
  
          &:nth-child(2) {
            .p-page-design-solutions-content-list {
              &::after {
                display: none;
              }
            }
          }
        }

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 8px;
          left: 8px;
          width: 1px;
          height: 100%;
          background-color: var(--color-border-01);
        }

        &::after {
          content: '';
          display: inline-block;
          position: absolute;
          bottom: -10px;
          left: -12px;
          background-image: url('../../../../img/design/solutions_border_bottom_arrow.svg');
          background-repeat: no-repeat;
          background-position: 0;
          background-size: contain;
          width: 44px;
          height: 22px;
        }
      }  
    }

    .p-page-design-core-strengths {
      padding: 100px 0;
      margin-top: 100px;

      .l-container {
        margin: var(--layout-sp-container-margin);
      }
  
      .c-box-content-media-card-list {
        margin-top: 50px;
      }
    }

    .p-page-design-customer-testimonials {
      padding: 100px 0;

      .l-container {
        margin: var(--layout-sp-container-margin);
      }
    }
  }
}