@charset "UTF-8";
/*
---------------------------------------------
style.scssはサイト構成に必要な最低デザインのみを読み込むこと。
---------------------------------------------
*/
/*
---------------------------------------------
事前に読み込むscssファイル
---------------------------------------------
*/
/*
---------------------------------------------
色設定など、外部ファイル化できる設定値をここに記述する
---------------------------------------------
*/
/*
---------------------------------------------
flexの設定
---------------------------------------------
*/
/*
---------------------------------------------
ブレイクポイントを指定
---------------------------------------------
*/
/*
---------------------------------------------
各要素の表示/非表示を操作する設定
---------------------------------------------
*/
/*
---------------------------------------------
hoverするときのみ設定するメディアクエリ
---------------------------------------------
*/
/*
---------------------------------------------
hover contentバージョン
---------------------------------------------
*/
/*
---------------------------------------------
グラデーション設定を入れる場合はここに記述する
---------------------------------------------
*/
/*
---------------------------------------------
テキストブランクの設定が必要であればここに記述する
※テキスト自体を1行で表示させつつ、SP版の時に横スクロールが発生するようなデザインの時に使用する
---------------------------------------------
*/
/*
---------------------------------------------
各コンポーネントを読み込みます。
---------------------------------------------
*/
/*
---------------------------------------------
style.scssはサイト構成に必要な最低デザインのみを読み込むこと。
---------------------------------------------
*/
/*
---------------------------------------------
Aboutページの見出し設定
---------------------------------------------
*/
.aboutHeading__3 {
  background: linear-gradient(180deg, #BBB 70%, #666 70%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.4;
}
@media screen and (min-width: 1033px) {
  .aboutHeading__3 {
    font-size: 80px;
    line-height: 1;
  }
}

/*
---------------------------------------------
Aboutページ全体の設定
---------------------------------------------
*/
.aboutOuter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
@media screen and (min-width: 1033px) {
  .aboutOuter {
    align-items: stretch;
    gap: 156px;
  }
}

.aboutHeadInner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}
@media screen and (min-width: 1033px) {
  .aboutHeadInner {
    align-items: center;
    gap: 80px;
  }
}

@media screen and (min-width: 1033px) {
  .about {
    gap: 200px;
  }
}

/*
---------------------------------------------
aboutContentを囲うボックス
---------------------------------------------
*/
.aboutContentOuter {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
@media screen and (min-width: 1033px) {
  .aboutContentOuter {
    gap: 200px;
  }
}

/*
---------------------------------------------
Missionの文字設定
---------------------------------------------
*/
.aboutCopy {
  font-size: 32px;
  line-height: normal;
}
@media screen and (min-width: 1033px) {
  .aboutCopy {
    font-size: 48px;
  }
}
@media screen and (min-width: 1440px) {
  .aboutCopy {
    font-size: 60px;
  }
}

.aboutExp {
  font-size: 20px;
  line-height: 2;
}
@media screen and (min-width: 1033px) {
  .aboutExp {
    font-size: 28px;
    text-align: center;
    margin-top: 20px;
  }
}

/*
---------------------------------------------
aboutContent：approachとour Proccess

wordpressのデフォルトスタイルを当ててるので、
足りない部分を追加
---------------------------------------------
*/
.aboutContentArea {
  gap: 32px;
}
@media screen and (min-width: 1033px) {
  .aboutContentArea {
    gap: 120px;
  }
}

.aboutContentHead {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 1033px) {
  .aboutContentHead {
    gap: 80px;
  }
}

@media screen and (min-width: 1033px) {
  .aboutContentHead.processHead {
    gap: 30px;
  }
}

.aboutContentExp {
  font-size: 18px;
  line-height: 2;
}
@media screen and (min-width: 1033px) {
  .aboutContentExp {
    font-size: 26px;
  }
}

/*
---------------------------------------------
aboutContentの画像とリストの設定
---------------------------------------------
*/
.aboutContentArea:nth-child(odd) .aboutContentBody {
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 1033px) {
  .aboutContentArea:nth-child(odd) .aboutContentBody {
    gap: 80px;
    flex-direction: row;
  }
}

.aboutContentArea:nth-child(even) .aboutContentBody {
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 1033px) {
  .aboutContentArea:nth-child(even) .aboutContentBody {
    gap: 80px;
    flex-direction: row-reverse;
  }
}

.aboutContentImg {
  order: 1;
}

.aboutContentList {
  order: 2;
  gap: 24px;
  width: 100%;
}

/*
---------------------------------------------
各リストの幅設定
---------------------------------------------
*/
@media screen and (min-width: 1033px) {
  .approach {
    max-width: 400px;
    gap: 57px;
  }
}

@media screen and (min-width: 1033px) {
  .process {
    max-width: 538px;
    gap: 32px;
  }
}

.aboutContentItem__heading__4 {
  font-size: 20px;
  line-height: 2;
}

.aboutContentItem__Exp {
  font-size: 16px;
  line-height: 2;
}
@media screen and (min-width: 1033px) {
  .aboutContentItem__Exp {
    font-size: 18px;
  }
}/*# sourceMappingURL=about.css.map */