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

// --------------------------------------------------
// aboutセクション固有スタイル
// --------------------------------------------------

.about {
  &__container {
    max-width: 1366px;
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;

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

  &__header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // margin-top: 70px;

    &-title {
      max-width: 50%;
      height: auto;

      // SP版
      @include mq() {
        max-width: getVw(281, 375);
      }
    }

    &-text {
      font-size: 2rem;
      color: #414141;
      line-height: 1.6;
      text-align: center;
      margin-top: 1rem;

      // SP版
      @include mq() {
        font-size: getVw(30);
      }
    }
  }

  &__itemlist {
    margin-top: 32px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    // SP版
    @include mq() {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: getVw(30);
    }
  }

  &__item {
    margin-top: 26.5px;
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);

    // SP版
    @include mq() {
      width: 100%;
      margin-bottom: getVw(60);
    
    }
  }

  &__image {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  &__sub-title {
    width: 100%;
    font-size: 3rem;
    line-height: 1.45;
    font-weight: bold;
    text-align: center;
    margin-top: 30px;

    // 幅1366px以下になる場合
    @include mq('large') {
      font-size: getVw(30, 1366);
    }

    // SP版
    @include mq() {
      font-size: getVw(40);
      margin-top: getVw(20);
    }
  }

  &__text {
    margin-top: 14.2px;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.6;
    color: #414141;
    padding: 0 2rem;

    // 幅1366px以下になる場合
    @include mq('large') {
      font-size: getVw(18, 1366);
    }

    // SP版
    @include mq() {
      font-size: getVw(30);
      margin-top: getVw(20);
    }
  }
}