.p-visionTitle {
  color: var(--color-text-main);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-inline: 1em;
  margin-bottom: 60px;
  position: relative;
}

/* note:
puroposeとpolicyは中央でいいか？多分今は下のリストに対して中央あたりになるように配置されているが（縦書きタイトル省いた状態）、その並びにするとMessageと位置がずれずのでどうしたものか思案中 */
/* .p-visionTitle--center {
  transform: translateX(35px);
} */

.p-visionTitleText {
  font-size: 30px;
}

.p-visionTitleSubText {
  font-size: 16px;
  font-weight: normal;
}

.p-visionContainer:not(:first-child) {
  padding-top: 100px;
  border-top: 1px solid var(--color-border-light);
}

.p-visionContainer:not(:last-child) {
  margin-bottom: 100px;
}

.p-visionMessageIntro {
  font-size: 23px;
  line-height: 2;
  text-align: center;
  margin-bottom: 60px;
}

.p-visionMessageText p {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 2em;
}

.p-visionContent {
  display: flex;
  Position: relative;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 40px;
}

.p-visionHeading {
  font-size: 2.5rem;
  writing-mode: vertical-rl;
  font-weight: normal;
  white-space: nowrap;
}

.p-visionHeading span {
  writing-mode: horizontal-tb;
  display: inline-block;
  font-size: 2.5rem;
  line-height: 1.2;
}

.p-visionList {
  writing-mode: vertical-rl;
  padding-top: 1.2em;
  white-space: nowrap;
}

.p-visionList li {
  list-style-position: inside;
  line-height: 2;
  font-size: 1.5rem;
  margin-left: 20px;
}

.p-visionList--purpose {
  padding-top: 1.5em;
}

.p-visionList--purpose li {
  position: relative;
}

.p-visionList--purpose li::before {
  content: "・";
  position: absolute;
  top: -1.2em;
}

.p-visionList--policy {
  padding-top: 3.3em;
}

.p-visionList--policy li {
  list-style-type: cjk-ideographic;
  text-indent: -2em;
}

@media screen and (max-width: 919px) {
  .p-visionTitle {
    margin-bottom: 30px;
  }

  .p-visionTitleText {
    font-size: 24px;
  }

  .p-visionTitle::after {
    font-size: 12px;
  }

  .p-visionContainer:not(:first-child) {
    padding-top: 50px;
  }

  .p-visionContainer:not(:last-child) {
    margin-bottom: 50px;
  }

  .p-visionContent {
    gap: 20px;
  }

  .p-visionHeading {
    font-size: clamp(16px, 2.42vw + 7.8px, 24px);
  }

  .p-visionHeading span {
    font-size: clamp(16px, 2.42vw + 7.8px, 24px);
  }

  .p-visionList li {
    margin-left: 1em;
    line-height: 1.5;
    font-size: clamp(11px, 1.17vw + 7.16px, 18px);
  }
}