/* 背景設定
--------------------------------------------------------- */
.phase-bg {
  padding: 32px 0 64px 48px;
  background-size: 85% 100%;
}

/* アンカーリンク
--------------------------------------------------------- */
.real-estate-anchor {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  gap: 32px;
  height: 100%;
  padding: 32px;
  border-top: 1px solid var(--Devider_gray);
  border-bottom: 1px solid var(--Devider_gray);

  li {
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: 4px;

    .caption {
      color: var(--Secondary_purple);
    }
  }
}

@media screen and (max-width: 1080px) {
  .real-estate-anchor-wrap > *:nth-child(1) {
    order: 2;
  }
  .real-estate-anchor-wrap > *:nth-child(2) {
    order: 1;
  }
  .real-estate-anchor {
    gap: 20px;
    padding: 40px 0;
    border-top: none;
    border-bottom: none;
  }
}


/* セクション内
--------------------------------------------------------- */
.phase-content {
  display: grid;
  grid-template-columns: 28px auto;
  gap: 30px;
  margin-top: 24px;
}

.phase-year {
  font-family: "Montserrat";
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  writing-mode: vertical-rl;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  color: var(--Text_sub_black);
}

.phase-num {
  font-size: 2rem;
  font-weight: 500;
  color: var(--Secondary_purple);
}

.phase-sub-content {
  width: calc(100% - 48px - 28px - 30px);
  margin-right: 0;
  margin-left: auto;
}

/* 背景 */
.phase-bg {
  padding: 32px 0 64px 48px;
  background: url(/real-estate/common/img/kabukicho/bg-phase01.webp) no-repeat left center;
  background-size: 85% 100%;
}
.phase-bg.num02 {
  background-image: url(/real-estate/common/img/kabukicho/bg-phase02.webp);
}
.phase-bg.num03 {
  background-image: url(/real-estate/common/img/kabukicho/bg-phase03.webp);
}

@media screen and (max-width: 1080px) {
  .phase-content {
    margin-top: 0;
    padding: 0;
    gap: 12px;
  }
  .phase-sub-content {
    width: 100%;
  }
  .phase-bg {
    padding: 40px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-size: cover;
  }
  .phase-num {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 769px) {
  .phase-content {
    grid-template-columns: 1fr;
    order: 2;
  }
  .phase-year {
    writing-mode: horizontal-tb;
  }
  .phase-img {
    order: 1;
  }
  .phase-bg {
    padding: 40px 0;

    .default-content {
      width: 90vw;
    }
  }
}