/* ファーストビュー：左にロゴ・横書きのコピー・体験の丸、右に縦長の写真2枚を重ねる */
.mv {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 44rem) minmax(0, 58rem);
  justify-content: center;
  align-items: center;
  column-gap: 12rem;
  height: calc(100vh - 34px);
  min-height: 40vw;
  padding-top: 6rem;
}

.mv__logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.mv__logo-sm { font-size: 1.6rem; font-weight: 500; letter-spacing: 0.5em; }
.mv__logo-main { margin-top: 0.6rem; font-size: 4.4rem; font-weight: 500; letter-spacing: 0.08em; }
.mv__logo-jp { margin-top: 1.2rem; font-size: 1.2rem; letter-spacing: 0.4em; }

.mv__catch {
  margin-top: 6rem;
  font-size: 3rem;
  line-height: 1.9;
  letter-spacing: 0.24em;
  font-weight: 400;
}
.mv__line { display: block; }
/* 1 文字ずつ浮かぶ（JS で span に分ける） */
.mv__char { display: inline-block; }
.js .mv__char { opacity: 0; transform: translateY(6px); transition: opacity 1s ease, transform 1s ease; }
.js .mv__char.is-on { opacity: 1; transform: none; }

.mv__blot { position: relative; margin-top: 4rem; width: 19rem; height: 19rem; padding-top: 1.4rem; }
.mv__blot .blot__sub { font-size: 1.2rem; }
.mv__blot .blot__main { font-size: 1.7rem; letter-spacing: 0.2em; }

.mv__photos { position: relative; height: min(72rem, 100vh - 180px); }
.mv__img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 2 / 3;
}
.mv__img img { object-position: 40% center; }
.mv__sub {
  position: absolute;
  left: 0;
  bottom: -3rem;
  width: 22rem;
  aspect-ratio: 4 / 5;
  box-shadow: 0 0 0 1rem var(--white);
}

/* 1024〜1279px は 2 列が画面からはみ出しかけるので、列と間を詰めて左右に余白をとる */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mv { grid-template-columns: minmax(0, 40rem) minmax(0, 52rem); column-gap: 6rem; padding-inline: 5rem; }
  .mv__photos { height: min(64rem, 100vh - 180px); }
}

/* 開いたときの出方：コピーが先、残りはあとから 1 秒で */
.js .js-intro { opacity: 0; transition: opacity 1s cubic-bezier(0.45, 0, 0.55, 1); }
.js .js-intro.is-on { opacity: 1; }

@media (max-width: 1023px) {
  .mv {
    display: block;
    height: auto;
    min-height: 0;
    max-width: 40rem;
    margin-inline: auto;
    padding: 10rem 2rem 6rem;
  }
  .mv__logo-sm { font-size: 1.3rem; }
  .mv__logo-main { font-size: 3.6rem; }
  .mv__logo-jp { font-size: 1.1rem; }
  .mv__catch { margin-top: 3.6rem; font-size: 2rem; line-height: 1.9; letter-spacing: 0.2em; }
  .mv__text { position: relative; }
  .mv__blot { position: absolute; right: 0; bottom: 0; margin: 0; width: 12.4rem; height: 12.4rem; padding-top: 0.6rem; }
  .mv__blot .blot__sub { font-size: 0.95rem; }
  .mv__blot .blot__main { font-size: 1.25rem; letter-spacing: 0.14em; }
  .mv__photos { height: 42rem; margin-top: 4rem; }
  .mv__sub { width: 14rem; bottom: -2rem; box-shadow: 0 0 0 0.6rem var(--white); }
}