@charset "UTF-8";
/*
---------------------------------------------
style.scssはサイト構成に必要な最低デザインのみを読み込むこと。
---------------------------------------------
*/
/*
---------------------------------------------
事前に読み込むscssファイル
---------------------------------------------
*/
/*
---------------------------------------------
色設定など、外部ファイル化できる設定値をここに記述する
---------------------------------------------
*/
/*
---------------------------------------------
flexの設定
---------------------------------------------
*/
/*
---------------------------------------------
ブレイクポイントを指定
---------------------------------------------
*/
/*
---------------------------------------------
各要素の表示/非表示を操作する設定
---------------------------------------------
*/
/*
---------------------------------------------
hoverするときのみ設定するメディアクエリ
---------------------------------------------
*/
/*
---------------------------------------------
hover contentバージョン
---------------------------------------------
*/
/*
---------------------------------------------
グラデーション設定を入れる場合はここに記述する
---------------------------------------------
*/
/*
---------------------------------------------
テキストブランクの設定が必要であればここに記述する
※テキスト自体を1行で表示させつつ、SP版の時に横スクロールが発生するようなデザインの時に使用する
---------------------------------------------
*/
/*
---------------------------------------------
各コンポーネントを読み込みます。
---------------------------------------------
*/
/*
---------------------------------------------
style.scssはサイト構成に必要な最低デザインのみを読み込むこと。
---------------------------------------------
*/
/*
---------------------------------------------
ページネーションエリアの設定
---------------------------------------------
*/
.section_btn {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media screen and (min-width: 1033px) {
  .section_btn {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
  }
}

/*
---------------------------------------------
pagenationArea
---------------------------------------------
*/
.pagenationArea {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
@media screen and (min-width: 1033px) {
  .pagenationArea {
    display: contents;
  }
}

/*
---------------------------------------------
homeBackボタン
---------------------------------------------
*/
.homeBack {
  width: 100%;
  text-decoration: none;
  grid-area: homeBack;
  display: grid;
  place-content: center;
  border: 1px solid #000000;
  padding: 24px 80px;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
@media screen and (min-width: 1033px) {
  .homeBack {
    width: 414px;
    font-size: 24px;
    order: 2;
  }
}

/*
---------------------------------------------
pagenation共通
---------------------------------------------
*/
.pagenationBtn {
  pointer-events: none;
  opacity: 0.6;
  width: 160px;
  padding-bottom: 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: #000000;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1033px) {
  .pagenationBtn {
    font-size: 32px;
    width: 232px;
    height: auto;
  }
}

/*
---------------------------------------------
アクティブの場合はクリック可能にする
---------------------------------------------
*/
.pagenationBtn.active {
  pointer-events: visible;
  opacity: 1;
}

/*
---------------------------------------------
prevボタン
---------------------------------------------
*/
.prev {
  grid-area: prev;
}
@media screen and (min-width: 1033px) {
  .prev {
    align-items: flex-end;
    order: 1;
  }
}
.prev::after {
  content: "";
  display: block;
  width: 100%;
  height: 20px;
  background-image: url(./../../../img/icon/detailLeftArrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 1033px) {
  .prev::after {
    height: 48px;
    position: absolute;
    bottom: 0;
  }
}

/*
---------------------------------------------
nextボタン
---------------------------------------------
*/
.next {
  grid-area: next;
}
@media screen and (min-width: 1033px) {
  .next {
    align-items: flex-start;
    order: 3;
  }
}
.next::after {
  content: "";
  display: block;
  width: 100%;
  height: 20px;
  background-image: url(./../../../img/icon/detailRightArrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 1033px) {
  .next::after {
    height: 48px;
    position: absolute;
    bottom: 0;
  }
}

/*
---------------------------------------------
メインビジュアルの設定
---------------------------------------------
*/
.mvSub {
  height: auto;
}
.mvSub img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*
---------------------------------------------
Work記事全体のレイアウト
---------------------------------------------
*/
.worksArea {
  padding: 40px 5.33% 80px;
  gap: 80px;
}
@media screen and (min-width: 1033px) {
  .worksArea {
    padding: 120px 6.25% 200px;
  }
}

.workInner {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
}
@media screen and (min-width: 1033px) {
  .workInner {
    gap: 160px;
  }
}

/*
---------------------------------------------
タイトル概要説明
---------------------------------------------
*/
.workInner_titleEx {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (min-width: 1033px) {
  .workInner_titleEx {
    gap: 80px;
    width: 100%;
  }
}
.workInner_titleEx h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
}
@media screen and (min-width: 1033px) {
  .workInner_titleEx h2 {
    font-size: 40px;
    line-height: 1;
  }
}
@media screen and (min-width: 1180px) {
  .workInner_titleEx h2 {
    font-size: 64px;
  }
}
@media screen and (min-width: 1460px) {
  .workInner_titleEx h2 {
    font-size: 86px;
  }
}
.workInner_titleEx p {
  font-size: 15px;
  font-weight: 500;
  line-height: 2.1;
}
@media screen and (min-width: 1033px) {
  .workInner_titleEx p {
    width: 53.12vw;
    margin: 0 0 0 auto;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1680px) {
  .workInner_titleEx p {
    font-size: 16px;
  }
}
@media screen and (min-width: 1680px) {
  .workInner_titleEx p {
    font-size: 24px;
  }
}
@media screen and (min-width: 1920px) {
  .workInner_titleEx p {
    width: 100%;
    max-width: 1020px;
  }
}

/*
---------------------------------------------
アワードエリア
---------------------------------------------
*/
.workInnerAwardArea {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (min-width: 1033px) {
  .workInnerAwardArea {
    gap: 80px;
  }
}

/*
---------------------------------------------
コンテンツ画像の設定
画像が配置されたら縦並びにする
---------------------------------------------
*/
.awardImgs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 1033px) {
  .awardImgs {
    gap: 80px;
  }
}
.awardImgs img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*
---------------------------------------------
AWARD
---------------------------------------------
*/
.awardBox {
  width: 100%;
  padding: 40px 20px;
  background-color: #000000;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (min-width: 1033px) {
  .awardBox {
    padding: 38px 120px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 120px;
  }
}
.awardBox h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}
.awardBox p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

/*
---------------------------------------------
AWARDのリスト
---------------------------------------------
*/
.awardList {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

/*
---------------------------------------------
RELATED WORKS outer（全体の枠）
---------------------------------------------
*/
.relatedBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
@media screen and (min-width: 1033px) {
  .relatedBox {
    gap: 70px;
  }
}

/*
---------------------------------------------
RELATED WORKS リスト
---------------------------------------------
*/
.relatedContensArea {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (min-width: 1033px) {
  .relatedContensArea {
    display: flex;
    flex-direction: row;
    gap: 40px;
  }
}

/*
---------------------------------------------
RELATED WORKの見出し
グラデーションがあるので個別でspanを使う
---------------------------------------------
*/
.relatedBox__heading__2 {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
@media screen and (min-width: 1033px) {
  .relatedBox__heading__2 {
    font-size: 80px;
    line-height: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}
.relatedBox__heading__2 span {
  background: linear-gradient(180deg, #bbbbbb 70%, #666666 70%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
---------------------------------------------
各記事リンク
---------------------------------------------
*/
.relatedArticle {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
@media screen and (min-width: 1033px) {
  .relatedArticle {
    max-width: 409px;
    gap: 32px;
  }
}

.relatedLink {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.relatedLink .relatedImg {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.relatedLink h3 {
  color: #686868;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (min-width: 1033px) {
  .relatedLink h3 {
    font-size: 24px;
    line-height: 1;
  }
}/*# sourceMappingURL=workDetail.css.map */