@charset "UTF-8";

.sProjectStoryBody.single {
  padding-top: 6.6875rem;
  margin: 0;
}

@media screen and (max-width: 540px) {
  .sProjectStoryBody.single {
    padding-top: 4.375rem;

  }
}

.sProjectStoryBody {

  background: radial-gradient(50% 50% at 50% 50%, rgba(243, 243, 241, 0.05) 22.12%, rgba(0, 90, 160, 0.05) 100%);

}

.sProjectStoryBody img {
  aspect-ratio: 1280/657;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 540px) {
  .sProjectStoryBody img {
    aspect-ratio: 390/390;
  }
}

.sProjectStoryTop {
  padding: 11rem 0;
  background-image: url(../img/pages/projectstory/bg.jpg);
  background-size: 100%;
  /* aspect-ratio: 1280/896; */
  overflow: hidden;
}

@media screen and (max-width: 820px) {
  .sProjectStoryTop {
    padding: 5.8rem 0 3.2rem 0;
    background-image: url(../img/pages/projectstory/bg-sp.jpg);
    aspect-ratio: auto;
  }
}

.sProjectStoryTop__deco {
  position: absolute;
  top: -6%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  color: #FBFBFB;
  font-family: Jost;
  font-size: clamp(50px, 10.70vw, 137px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  text-align: center;
  white-space: nowrap;
  opacity: 0.3;
}

@media screen and (max-width: 820px) {
  .sProjectStoryTop__deco {
    top: -31px;
  }
}

@media screen and (max-width: 540px) {
  .sProjectStoryTop__deco {
    top: -1.5%;
    font-size: clamp(30px, 11.025vw, 63px);
    overflow: hidden;
  }
}

.sProjectStoryTop__image {
  position: absolute;
}

@media screen and (max-width: 820px) {
  .sProjectStoryTop__image {
    position: static;
  }
}

.sProjectStoryTop__image--left {
  left: 0;
  bottom: 14.334%;
  width: clamp(200px, 25.3125vw, 325px);
}

.sProjectStoryTop__image--right {
  right: 0;
  bottom: 8.80%;
  width: clamp(200px, 23.4375vw, 300px);
}

.sProjectStoryTop__image--center {
  display: none;
}

@media screen and (max-width: 820px) {

  .sProjectStoryTop__image--center {
    display: block;
  }

  .sProjectStoryTop__image--left,
  .sProjectStoryTop__image--right {
    display: none;
  }
}

.sProjectStoryTop__title {
  margin: 0 auto 3rem auto;
  width: clamp(400px, 39.0625vw, 500px);
  max-width: 100%;
}

@media screen and (max-width: 540px) {
  .sProjectStoryTop__title {
    margin: 0 auto 2rem auto;
    width: clamp(200px, 75.12vw, 293px);
  }
}

.sProjectStoryTop__text {
  color: #FBFBFB;
  text-align: center;
  font-size: clamp(15px, 1.40625vw, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 240%;
}

@media screen and (max-width: 820px) {
  .sProjectStoryTop__text {
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 200%;
  }
}

.sProjectStoryTop__text span {
  font-weight: 700;
}


/*
-------------------------*/

/* セクション外枠 */
.sStory {
  /* padding: 5rem 0; */
}

.sStory__item {
  padding-top: 5rem;
}

@media screen and (max-width: 540px) {
  .sStory__item {
    padding-top: 2.6rem;
  }
}

/* 見出し */
.sStory__header {
  text-align: center;
  margin-bottom: 2.8rem;
}

@media screen and (max-width: 540px) {
  .sStory__header {
    margin-bottom: 1.3rem;
  }
}

.sStory__label {
  margin: 0 auto 1rem auto;
  width: clamp(300px, 36.562vw, 468px);
}

@media screen and (max-width: 540px) {
  .sStory__label {
    width: 74.615vw;
  }
}

.sStory__title {
  color: var(--black, #000);
  text-align: center;
  font-size: clamp(30px, 3.046vw, 39px);
  font-style: normal;
  font-weight: 500;
  line-height: 153%;
}

@media screen and (max-width: 540px) {
  .sStory__title {
    text-align: center;
    font-size: 1.125rem;
    line-height: 160%;
  }
}

/* 2カラム */
.sStory__grid {
  display: flex;
  /* grid-template-columns: 1fr 51.34375%; */
  gap: clamp(33px, 5.15vw, 66px);
  justify-content: space-between;
  margin-bottom: 5.5rem;
}

@media screen and (max-width: 820px) {
  .sStory__grid {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
  }
}

.sStory__content {
  flex: 1;
}

.sStory__side {
  margin: 0 auto;
  width: 51.34375%;
}

@media screen and (max-width: 540px) {
  .sStory__side {
    width: 81%;
  }
}

.sStory__side img {
  width: 100%;
  height: auto;
  display: block;

}

/* 下画像（横長） */
.sStory__bottom {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.sStory__bottom img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 540px) {
  .sStory__bottom img {
    aspect-ratio: 390 / 228;
    object-fit: cover;
  }
}



.sStory__item--reverse .sStory__content {
  order: 2;
}

.sStory__item--reverse .sStory__side {
  order: 1;
}


@media screen and (max-width: 820px) {
  .sStory__item--reverse .sStory__content {
    order: 1;
  }

  .sStory__item--reverse .sStory__side {
    order: 2;
  }

}

/* ▼ FV表示中はスクロール禁止にする */
body.is-fv-locked {
  overflow: hidden;
}

/* ▼ 一番上にかぶせる全画面FVカバー */
.projectstory-fv {
  position: absolute;
  top: 5rem;
  /* top: 0; */
  inset: 0;
  /* top/right/bottom/left: 0 と同じ */
  z-index: 9;
  /* 背景色はお好みで */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}

.projectstory-fv img {
  position: absolute;
  top: 0;
}

/* フェードアウト後は見えない＆クリックも通さない */
.projectstory-fv.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* 中身の最大幅（お好みで調整） */
.projectstory-fv__inner {
  margin-inline: auto;
}