#page__mv {
  margin-bottom: 15rem;
  .page__mvWrap {
    display: grid;
    grid-template-columns: 27.2% auto;
    width: 94.4%;
    margin-left: auto;
    background: var(--colorMainBlue);

    .page__mvTextarea {
      align-content: center;
      display: grid;
      gap: 1.8rem;
      min-height: 35rem;
      width: fit-content;
      /* min-width: 26rem; */

      .page__mvTitle,
      .page__mvText {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        animation: mvTextSlide 1.5s ease-out forwards;
      }
      .page__mvTitle {
        font-size: 3.6rem;
        font-weight: 700;
        padding-left: 3.8rem;
        color: var(--colorWhite);
        line-height: 1.36;
        letter-spacing: 0.1em;

      } 
      .page__mvText {
        font-size: 2rem;
        font-family: var(--fontOzwald);
        max-width: 33rem;
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 3.8rem;
        background: var(--colorWhite);
        position: relative;
        letter-spacing: 0.045em;
        clip-path: polygon(0 0, 100% 0, calc(100% - 2.2rem) 100%, 0% 100%);
        font-weight: 400;
        position: relative;
        left: -0.1rem;
      }
    }
    .page__mvImg {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .page__mvWrap--bg {
    grid-template-columns: 1fr;
    background: linear-gradient(to right, #33A2FF, #84C7FF);
    .page__mvTextarea {
      min-height: 22rem;
      width: fit-content;
      .page__mvTitle,
      .page__mvText {
        animation: mvTextSlide 1.5s ease-out forwards;
      }
      .page__mvText  {
        max-width: 100%;
      }
    }
  }
  .breadcrumb {
    background: var(--colorLightBlue);
    width: 91.5%;
    margin-left: auto;
    padding: 1rem 1.6rem;
    .breadcrumbList {
      display: flex;
      gap: 1.6vw;
      li {
        font-size: 1.4rem;
        letter-spacing: 0.01em;
        position: relative;
        &::after {
          position: absolute;
          right: 0;
          top: 50%;
          right: -1em;
          content: "";
          display: inline-block;
          vertical-align: middle;
          color: var(--colorBlack);
          line-height: 1;
          width: 0.5em;
          height: 0.5em;
          border: 0.1em solid currentColor;
          border-left: 0;
          border-bottom: 0;
          box-sizing: border-box;
          transform: translateX(-25%) translateY(-50%) rotate(45deg);
        }
      }
      li:nth-last-child(1) {
        &::after {
          content: none;
        }
      }
    }
  }
  @media screen and (max-width: 1440px) {
    .page__mvWrap {
       grid-template-columns: 37rem auto;
    }
  }
  @media screen and (max-width: 767px) {
    margin-bottom: 10rem;
    .page__mvWrap {
      grid-template-columns: 1fr;
      width: 100%;
      margin-left: 0;
      .page__mvTextarea {
        order: 2;
        min-height: unset;
        padding-block: 4.2rem;
        .page__mvTitle {
          padding-left: 7vw;
        }
        .page__mvText {
          padding-left: 7vw;
          &::after {
            width: 4vw;
          }
        }
      }
      .page__mvImg {
        order: 1;
        img {
          min-height: 50vw;
        }
      }
    }
    .breadcrumb {
      width: 93.5%;
      padding: 2vw 5vw;
      .breadcrumbList {
        gap: 0 5vw;
        flex-wrap: wrap;
      }
    }
  }
}

@keyframes mvTextSlide {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}