/* ブランドページの背景と本文だけ。列幅・ナビ・円・目次は service.css を使う */
/* col2 の空は TOP より夜明け側。SERVICE の緑より上に、同じ濃さで置く */

.p-br__bg-shape,
.p-br__bg-green {
  position: absolute;
  display: block;
  max-width: none;
}

.p-br__bg-shape {
  left: calc(-42.91 / 1769 * 100%);
  top: calc(-48.13 / 1024 * 100%);
  width: calc(1877.9 / 1769 * 100%);
  height: calc(1335.93 / 1024 * 100%);
}

.p-br__bg-green {
  left: calc(629.24 / 1769 * 100%);
  top: calc(412.26 / 1024 * 100%);
  width: calc(1038 / 1769 * 100%);
  height: calc(1035 / 1024 * 100%);
  object-fit: cover;
  opacity: 0.6;
}

.p-br__copy {
  position: absolute;
  top: calc(242 / 1024 * 100%);
  left: 0;
  margin: 0;
  color: #4c5e6f;
  font-size: calc(15.9 * var(--u));
  line-height: calc(35.07 * var(--u));
  white-space: nowrap;
}

.page-brand .p-sv__col--2 .p-br__copy,
.page-brand .p-sv__col--2 .p-br__copy p {
  color: #4c5e6f;
}

.p-br__copy p {
  margin: 0;
}

.p-br__copy p + p {
  margin-top: calc(35.07 * var(--u));
}

#br-mission .p-br__copy {
  top: calc(239.76 / 1024 * 100%);
}

#br-step1 .p-br__copy {
  top: calc(308.74 / 1024 * 100%);
}

#br-step2 .p-br__copy {
  top: calc(263.58 / 1024 * 100%);
}

#br-step3 .p-br__copy {
  top: calc(326.25 / 1024 * 100%);
}

#br-village .p-br__copy {
  top: calc(159.13 / 1024 * 100%);
}

#br-mirai .p-br__copy {
  top: calc(350.11 / 1024 * 100%);
}

@media (max-width: 720px) {
  .p-br__bg-shape {
    left: calc((-42.91 - 760) / 735 * 100%);
    width: calc(1877.9 / 735 * 100%);
  }

  .p-br__bg-green {
    left: calc((629.24 - 760) / 735 * 100%);
    width: calc(1038 / 735 * 100%);
  }

  .p-br__copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.7;
    white-space: normal;
  }

  .p-br__copy p + p {
    margin-top: 1.7em;
  }

  /* Figma ブランド_01 ストーリー: 左右 ≈28.36% → 幅 374 */
  .page-brand #br-story .p-br__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(600 / 864 * 100vw);
    margin-left: auto;
    margin-right: auto;
    color: #4c5e6f;
    font-size: calc(17.01 / 864 * 100vw);
    line-height: calc(44 / 17.01);
    text-align: left;
    white-space: normal;
  }

  .page-brand #br-story .p-br__copy p + p {
    margin-top: calc(44 / 864 * 100vw);
  }

  /* Figma ブランド_02 ミッション: 左右 ≈29.3% → 幅 357 */
  .page-brand #br-mission .p-br__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(600 / 864 * 100vw);
    margin-left: auto;
    margin-right: auto;
    color: #4c5e6f;
    font-size: calc(17.01 / 864 * 100vw);
    line-height: calc(44 / 17.01);
    text-align: left;
    white-space: normal;
  }

  .page-brand #br-mission .p-br__copy p + p {
    margin-top: calc(44 / 864 * 100vw);
  }

  .page-brand #br-story .p-br__copy,
  .page-brand #br-mission .p-br__copy,
  .page-brand #br-story .p-br__copy p,
  .page-brand #br-mission .p-br__copy p {
    color: #4c5e6f;
  }

  /* Figma ブランド_03 ビジョンSTEP1: 左右 ≈25.4% → 幅 425 */
  .page-brand #br-step1 .p-br__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(600 / 864 * 100vw);
    margin-left: auto;
    margin-right: auto;
    color: #4c5e6f;
    font-size: calc(17.01 / 864 * 100vw);
    line-height: calc(44 / 17.01);
    text-align: left;
    white-space: normal;
  }

  .page-brand #br-step1 .p-br__copy p + p {
    margin-top: calc(44 / 864 * 100vw);
  }

  /* Figma ブランド_04 ビジョンSTEP2: 左右 ≈30.5% → 幅 337 */
  .page-brand #br-step2 .p-br__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(600 / 864 * 100vw);
    margin-left: auto;
    margin-right: auto;
    color: #4c5e6f;
    font-size: calc(17.01 / 864 * 100vw);
    line-height: calc(44 / 17.01);
    text-align: left;
    white-space: normal;
  }

  .page-brand #br-step2 .p-br__copy p + p {
    margin-top: calc(44 / 864 * 100vw);
  }

  .page-brand #br-step1 .p-br__copy,
  .page-brand #br-step2 .p-br__copy,
  .page-brand #br-step1 .p-br__copy p,
  .page-brand #br-step2 .p-br__copy p {
    color: #4c5e6f;
  }

  /* Figma ブランド_05 ビジョンSTEP3: 左右 ≈28.6% → 幅 369 / 字 15.89 */
  .page-brand #br-step3 .p-br__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(600 / 864 * 100vw);
    margin-left: auto;
    margin-right: auto;
    color: #4c5e6f;
    font-size: calc(15.89 / 864 * 100vw);
    line-height: calc(36 / 15.89);
    text-align: left;
    white-space: normal;
  }

  .page-brand #br-step3 .p-br__copy p + p {
    margin-top: calc(36 / 864 * 100vw);
  }

  /* Figma ブランド_06 OneVillage: 左右 ≈18.5% → 幅 544 */
  .page-brand #br-village .p-br__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(600 / 864 * 100vw);
    margin-left: auto;
    margin-right: auto;
    color: #4c5e6f;
    font-size: calc(17.01 / 864 * 100vw);
    line-height: calc(44 / 17.01);
    text-align: left;
    white-space: normal;
  }

  .page-brand #br-village .p-br__copy p + p {
    margin-top: calc(44 / 864 * 100vw);
  }

  /* Figma ブランド_07 未来へ: 左右 ≈30.4% → 幅 339 */
  .page-brand #br-mirai .p-br__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(600 / 864 * 100vw);
    margin-left: auto;
    margin-right: auto;
    color: #4c5e6f;
    font-size: calc(17.01 / 864 * 100vw);
    line-height: calc(44 / 17.01);
    text-align: left;
    white-space: normal;
  }

  .page-brand #br-mirai .p-br__copy p + p {
    margin-top: calc(44 / 864 * 100vw);
  }

  .page-brand #br-step3 .p-br__copy,
  .page-brand #br-village .p-br__copy,
  .page-brand #br-mirai .p-br__copy,
  .page-brand #br-step3 .p-br__copy p,
  .page-brand #br-village .p-br__copy p,
  .page-brand #br-mirai .p-br__copy p {
    color: #4c5e6f;
  }
}