// --------------------------------------------------
// 共通ファイル読み込み
// --------------------------------------------------
@use "common" as *;

// --------------------------------------------------
// アバウトセクション固有スタイル
// --------------------------------------------------
.about {
  &__container {
    padding-top: 100px;
    max-width: 100%;
    background-color: #F1F1F1;

    // SP版
    @include mq() {
      padding-top: 0;
    }
  }

  &__contents {
    @extend %contents;

    display: flex;
    flex-direction: row;

    // SP版
    @include mq() {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  &__profile {
    padding-top: 67px;
    width: 300px;

    // SP版
    @include mq() {
      padding-top: 85px;
    }

    // SP小
    @include mq("small") {
      width: 100%;
    }
  }

  &__datalist {
    margin-top: 20px;
    margin-bottom: 60px;

    // SP版
    @include mq() {
      margin-bottom: 0;
    }
  }

  &__photo {
    width: 300px;
    height: 300px;
    @extend %border;

    // SP小
    @include mq("small") {
      width: 100%;
      height: auto;
    }
  }

  &__data {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    line-height: 2;

    // SP小
    @include mq("small") {
      font-size: getVw(12, 375);
    }

    dt {
      width: 4rem;
      text-align: justify;
      text-align-last: justify;

      // SP小
      @include mq("small") {
        width: 4rem;
      }

      // SP極小
      @include mq("xsmall") {
        margin-top: 5px;
        text-align-last: justify;
        width: 3rem;
        line-height: 1.4;
      }
    }

    dd {
      padding-left: 1.2rem;
      flex:1;

          // SP極小
          @include mq("xsmall") {
            margin-top: 5px;
            padding-left: 1rem;
            line-height: 1.4;
          }
    }

  }

  &__header {
    padding-top: 67px;
    font-size: 26px;
    line-height: 1.0;

    // SP版
    @include mq() {
      text-align: center;
    }

    // SP版小
    @include mq("small") {
      font-size: getVw(30,375);
    }
  }

  &__message {
    flex: 1;
    padding-left: 68px;
    padding-bottom: 60px;

    p {
      margin-top: 2rem;

      // SP版
      @include mq() {
        font-size: 14px;
      }
    }

    // SP版
    @include mq() {
      padding-left: 0;
    }
  }
}