.p-page-about {
  .p-page-about-hero {

  }

  .p-page-about-philosophy {
    background-image: url('../../../../img/about/philosophy_bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top 0 center;
    padding: 41px 0 150px 0;

    .p-page-about-philosophy-contents {
      display: grid;
      gap: 50px;
      margin-top: 50px;

      .p-page-about-philosophy-content {
        display: grid;
        gap: 30px;

        .p-page-about-philosophy-content__title {
          text-align: center;
          font-family: var(--font-ff-outfit);
          font-size: 4.2rem;
          font-weight: 200;
          background: var(--color-gradient-01);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .c-title-h2 {
          text-align: center;
        }
      }

      .p-page-about-philosophy-content-border {
        text-align: center;
      }

      .p-page-about-philosophy-content-value {

        .p-page-about-philosophy-content-value__list-wrap {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 60px;

          .p-page-about-philosophy-content-value__list {
            display: grid;
            gap: 28px;
  
            .p-page-about-philosophy-content-value__list-item {
              background-image: url('../../../../img/common/icon/cube_02.svg');
              background-repeat: no-repeat;
              background-size: 26px 24px;
              background-position: 0 0;
              padding-left: calc(26px + 11px);
              box-sizing: border-box;
            }
          }  
        }

      }

      .p-page-about-philosophy-content--vision {
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, #FFF 100%);
        padding: 50px;
      }
    }
  }

  .p-page-about-top-message {
    padding: 150px 0;

    .p-page-about-top-message-ceo {
      display: grid;
      gap: 60px;
      grid-template-columns: auto 360px;
      align-items: center;

      .p-page-about-top-message-ceo-content {
        display: grid;
        gap: 30px;

        .p-page-about-top-message-ceo-content__title {
          font-size: 3.6rem;
          font-weight: 700;
          line-height: 160%;
        }

        .p-page-about-top-message-ceo-content__name {
          text-align: right;
          font-size: 1.6rem;
          font-weight: 700;
          line-height: 160%;
          letter-spacing: 0.8px;
        }
      }
    }
  }

  .p-page-about-our-team {
    padding: 150px 0;
    background: var(--color-gradient-02);

    .c-text {
      margin-top: 50px;
    }

    .p-page-about-our-team-interview {
      margin-top: 70px;

      .p-page-about-our-team-interview__list {
        display: grid;
        gap: 50px;
        grid-template-columns: repeat(3, 1fr);
      }

      .p-page-about-our-team-interview-content {
        display: grid;
        gap: 20px;

        .p-page-about-our-team-interview-content__photo {
          text-align: center;

          .p-page-about-our-team-interview-content__photo-image {
            width: 300px;
            height: 300px;
            aspect-ratio: 1/1;
            border-radius: 20px;
            overflow: hidden;
            object-fit: cover;
          }
        }

        .p-page-about-our-team-interview-content__title {
          display: grid;
          gap: 10px;

          .p-page-about-our-team-interview-content__title-position {
            display: block;
            color: var(--color-font-02);
            font-size: 1.6rem;
            font-weight: 400;
            letter-spacing: 1.6px;
          }

          .p-page-about-our-team-interview-content__title-name {
            display: flex;
            align-items: flex-end;
            gap: 20px;

            .p-page-about-our-team-interview-content__title-name-ja {
              font-size: 2.0rem;
              font-weight: 700;
              letter-spacing: 2px;
            }

            .p-page-about-our-team-interview-content__title-name-en {
              font-family: var(--font-ff-outfit);
              font-size: 1.4rem;
              font-weight: 300;
              letter-spacing: 1.4px;
            }
          }
        }

        .p-page-about-our-team-interview-content__button {
          text-align: center;
        }
      }
    }
  }

  .p-page-about-company-history {
    padding: 150px 0;

    .p-page-about-company-history-content {
      max-width: 880px;
      margin-inline: auto;
      position: relative;

      .p-page-about-company-history-content__list {
        display: grid;
        gap: 30px 20px;
        margin-top: 50px;
        position: relative;
        z-index: 3;

        .p-page-about-company-history-content__list-item {
          display: grid;
          gap: 20px;
          grid-template-columns: 110px 40px 1fr;
        }
      }

      .p-page-about-company-history-content__year {
        text-align: center;
        font-family: var(--font-ff-outfit);
        font-size: 4.2rem;
        font-weight: 200;
        background: var(--color-gradient-01);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .p-page-about-company-history-content__data {
        .p-page-about-company-history-content-box {
          .p-page-about-company-history-content-box__title {
            font-size: 2.0rem;
            font-weight: 700;
            line-height: 170%;
            letter-spacing: 2px;
          }

          .p-page-about-company-history-content-box__description {
            margin-top: 25px;

            .p-page-about-company-history-content-box-description-list {
              list-style: none;
              display: grid;
              gap: 25px;
              margin-left: 1em;
              
              .p-page-about-company-history-content-box-description-list__item {
                padding-left: 1em;
                text-indent: -1.6em;

                &::before {
                  content: '・';
                  font-size: 1.6rem;
                }
              }
            }
          }
        }  
      }

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

      &::after {
        content: '';
        display: inline-block;
        position: absolute;
        top: 0;
        left: 150px;
        width: 1px;
        height: calc(100% + 58px);
        z-index: 1;
        background-image: linear-gradient(to top, var(--color-border-01), var(--color-border-01) 2px, transparent 2px, transparent 6px); 
        background-size: 2px 6px;
        background-position: left bottom;
        background-repeat: repeat-y;
      }
    }
  }
}

/* TABLET */
@media screen and (max-width: 1024px) {
  .p-page-about {
    .p-page-about-philosophy {
      .p-page-about-philosophy-title {
        margin: 0 var(--device-tab-padding);
      }

      .p-page-about-philosophy-contents {
        margin: 50px var(--device-tab-padding) 0 var(--device-tab-padding);
      }
    }

    .p-page-about-top-message {
      padding: 150px var(--device-tab-padding);
    }

    .p-page-about-our-team {
      padding: 150px var(--device-tab-padding);
    }

    .p-page-about-company-history {
      padding: 150px var(--device-tab-padding);
    }
  }
}

@media screen and (max-width: 768px) {
  .p-page-about {
    .p-page-about-hero {
  
    }
  
    .p-page-about-philosophy {
      background-image: url('../../../../img/about/philosophy_bg_sp.webp');
      background-position: 0;
      padding: 32px 0 100px 0;

      .p-page-about-philosophy-title {
        margin: 0 30px;
      }
  
      .p-page-about-philosophy-contents {
        margin: 50px 30px 0 30px;

        .p-page-about-philosophy-content {
          .p-page-about-philosophy-content__title {
          }
  
          .c-title-h2 {
            text-align: left;
            font-size: 3.0rem;
          }
        }
  
        .p-page-about-philosophy-content-border {
        }
  
        .p-page-about-philosophy-content-value {
          .p-page-about-philosophy-content-value__list-wrap {
            grid-template-columns: repeat(1, 1fr);
  
            .p-page-about-philosophy-content-value__list {
              .p-page-about-philosophy-content-value__list-item {
              }
            }  
          }
  
        }
  
        .p-page-about-philosophy-content--vision {
          padding: 50px 30px;

          .c-title-h2 {
            font-size: 2.4rem;
          }
        }
      }
    }
  
    .p-page-about-top-message {
      padding: 100px 30px;
  
      .p-page-about-top-message-ceo {
        gap: 50px;
        grid-template-columns: 1fr;
  
        .p-page-about-top-message-ceo-content {
          gap: 30px;
  
          .p-page-about-top-message-ceo-content__title {
            font-size: 3.2rem;
            line-height: 170%;
          }
  
          .p-page-about-top-message-ceo-content__name {
          }
        }
      }
    }
  
    .p-page-about-our-team {
      padding: 100px 30px;
  
      .c-text {
      }
  
      .p-page-about-our-team-interview {
        margin-top: 50px;
  
        .p-page-about-our-team-interview__list {
          grid-template-columns: repeat(1, 1fr);
        }
  
        .p-page-about-our-team-interview-content {
          .p-page-about-our-team-interview-content__photo {
            .p-page-about-our-team-interview-content__photo-image {
              width: 100%;
              height: auto;
            }
          }
  
          .p-page-about-our-team-interview-content__title {
            .p-page-about-our-team-interview-content__title-position {
            }
  
            .p-page-about-our-team-interview-content__title-name {
              .p-page-about-our-team-interview-content__title-name-ja {
              }
  
              .p-page-about-our-team-interview-content__title-name-en {
              }
            }
          }
  
          .p-page-about-our-team-interview-content__button {
            text-align: left;
          }
        }
      }
    }
  
    .p-page-about-company-history {
      padding: 100px 30px;
  
      .p-page-about-company-history-content {
        max-width: initial;
  
        .p-page-about-company-history-content__list {
          gap: 20px 0;
  
          .p-page-about-company-history-content__list-item {
            gap: 10px;
            grid-template-columns: 90px 30px 1fr;
          }
        }
  
        .p-page-about-company-history-content__year {
          font-size: 3.6rem;
        }
  
        .p-page-about-company-history-content__data {
          .p-page-about-company-history-content-box {
            .p-page-about-company-history-content-box__title {
            }
  
            .p-page-about-company-history-content-box__description {
              margin-top: 11px;
  
              .p-page-about-company-history-content-box-description-list {
                gap: 0px;
                
                .p-page-about-company-history-content-box-description-list__item {
                  text-indent: -1.6em;

                  &::before {
                    font-size: 1.4rem;
                  }
                }
              }
            }
          }  
        }
  
        &::before {
          left: 116px;
        }
  
        &::after {
          left: 116px;
          height: calc(100% + 50px);
        }
      }
    }
  }
}