@charset "UTF-8";

/* ▼ 共通ラッパー */
.mv__title--wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s, transform 1s;
  /* height: 500px; */
  height: clamp(calc(500px/3), calc(500/1440*100vw), 500px);
}

/* ▼ ローディング後に表示される（初期フェードイン） */
.mv__title--wrap.show {
  opacity: 1;
  transform: translateY(0);
}

/* ▼ h1タイトル群 */
.mv__heading {
  z-index: 1;
  transition: opacity 0.5s ease;
}

/* ▼ h1を非表示にするためのクラス */
.mv__heading.hidden {
  opacity: 0;
}

/* ▼ タイピングテキスト（初期状態） */
.mv__message {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); /* h1と同じ位置に出現 */
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
  white-space: pre-wrap;
  line-height: 1.6;
  z-index: 2;
  font-size: 1.2rem;
  width: 100%;
  padding: 0 4vw;
  box-sizing: border-box;
}

/* ▼ タイピング中：フェードインだけ（位置は変えない） */
.mv__message.visible {
    opacity: 1;
    font-size: var(--font-h3);
}

/* ▼ タイピング完了後に「下にスライド」 */
.mv__message.slidown {
  transform: translate(-50%, 230%); /* 少し下に移動 */
  font-size: var(--font-p-base);
}

@media screen and (min-width:1441px) {
    /* ▼ 共通ラッパー */
.mv__title--wrap {
    height: 500px;
  }
  
  /* ▼ タイピングテキスト（初期状態） */
  .mv__message {
    line-height: 1.6;
    font-size: 34px;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
  }
  
  /* ▼ タイピング中：フェードインだけ（位置は変えない） */
  .mv__message.visible {
      font-size: var(34px);
  }
  
  /* ▼ タイピング完了後に「下にスライド」 */
  .mv__message.slidown {
    transform: translate(-50%, 140px); /* 少し下に移動 */
    font-size: var(20px);
  }
}

@media screen and (max-width:450px) {
    /* ▼ 共通ラッパー */
.mv__title--wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s, transform 1s;
    /* height: 500px; */
    height: calc(320/375*100vw);
    top: 20vw;
    padding: 4vw;
  }
  
  /* ▼ ローディング後に表示される（初期フェードイン） */
  .mv__title--wrap.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* ▼ h1タイトル群 */
  .mv__heading {
    z-index: 1;
    transition: opacity 0.5s ease;
  }
  
  /* ▼ h1を非表示にするためのクラス */
  .mv__heading.hidden {
    opacity: 0;
  }
  
  /* ▼ タイピングテキスト（初期状態） */
  .mv__message {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%); /* h1と同じ位置に出現 */
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
    white-space: pre-wrap;
    line-height: 1.6;
    z-index: 2;
    font-size: 1.2rem;
    width: 100%;
    padding: 0 4vw;
    box-sizing: border-box;
  }
  
  /* ▼ タイピング中：フェードインだけ（位置は変えない） */
  .mv__message.visible {
      opacity: 1;
      font-size: calc(24/375*100vw);
  }
  
  /* ▼ タイピング完了後に「下にスライド」 */
  .mv__message.slidown {
    transform: translate(-50%, 50%); /* 少し下に移動 */
    font-size: calc(16/375*100vw);
  }
  
}