/* 日本語の比較案だけ、同じ幅で両端をそろえる。行ごとの傾斜で下段の左ずれを防ぐ。 */
html[lang=ja] .hero h1.magic-copy-title {
  width: 5.8em;
  transform: none;
  /* 太字フォント本来の字形を使い、画数の多い漢字の内側をつぶさない。 */
  -webkit-text-stroke: 0;
}
html[lang=ja] .hero h1.magic-copy-title > span {
  height: 1.2em;
  line-height: 1.2;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
  transform: skew(-6deg) scaleX(.94);
  transform-origin: left center;
}
/* 「そ／魔」の字面の余白差を補い、二重感嘆符を含む下段も両端で合わせる。 */
html[lang=ja] .hero h1.magic-copy-title > span + span {
  margin-left: .07em;
  width: calc(100% + .03em);
}
/* 魔法を含め全て同じサイズ。感嘆符2つはひとまとまりにして間を空けない。 */
html[lang=ja] .hero h1.magic-copy-title .magic-copy-bang {
  display: inline-block;
  font-size: inherit;
  letter-spacing: -.04em;
  white-space: nowrap;
}
/* PCはJSで見出し・説明・動画・CTA間の余白を均等化する。 */
.hero-magic-refined .hero-video-subtitle {
  font-size: clamp(18px, 1.65vw, 28px);
  line-height: 1.65;
}
@media (max-width: 760px) {
  html[lang=ja] .hero h1.magic-copy-title > span {
    transform: skew(-4deg);
    transform-origin: center;
  }
  /* スマホでは通常の縦積みのまま、説明の上下を同じ24pxにする。 */
  .hero-magic-refined .hero-video-subtitle { font-size: 4.2vw; margin-top: 24px; }
  .hero-magic-refined .hero-film { margin-top: 24px; }
}

/* メインは動画と同幅、説明は動画の80%幅で文字も比例拡大して左端をそろえる。 */
html[lang=ja] .hero-magic-refined h1.magic-copy-title {
  left: 5.5%;
  width: var(--copy-video-width);
  font-size: calc(var(--copy-video-width) / 5.72);
}
html[lang=ja] .hero-magic-refined h1.magic-copy-title > span {
  transform: none;
}
html[lang=ja] .hero-magic-refined h1.magic-copy-title > span + span {
  margin-left: 0;
  width: 100%;
}
.hero-magic-refined .hero-video-subtitle {
  --subtitle-width: calc(var(--copy-video-width) * .8);
  left: 5.5%;
  width: var(--subtitle-width);
  font-size: calc(var(--subtitle-width) / 13);
  text-align: left;
}
@media (max-width: 760px) {
  /* 拡大したコピーの下にもキャラクターの余白を確保する。 */
  .hero-magic-refined .hero-top-art { top: calc(var(--header-height) + 56vw); }
  .hero-magic-refined .hero { padding-top: calc(201vw + var(--header-height)); }
  .hero-magic-refined .hero-scene { height: calc(209vw + var(--header-height)); }
}

/* 採用した短い日本語コピーだけを拡大し、英語は自然に折り返す。 */
html[lang=en] .hero-magic-refined .hero-video-subtitle { font-size: calc(var(--subtitle-width) / 20); }
/* 英語の採用見出しも動画幅に収め、狭いスマホで横スクロールを起こさない。 */
html[lang=en] .hero-magic-refined h1.magic-copy-title { width: var(--copy-video-width); font-size: calc(var(--copy-video-width) / 10.5); }

/* 日本語は指定の2行を保ち、下段の字面も上段の左右端へ光学的に合わせる。 */
html[lang=ja] .hero-magic-refined .hero-video-subtitle { white-space: nowrap; }
html[lang=ja] .hero-magic-refined .hero-video-subtitle > span { display: block; letter-spacing: 0; text-align: justify; text-align-last: justify; text-justify: inter-character; }
html[lang=ja] .hero-magic-refined h1.magic-copy-title > span + span { margin-left: -.09em; width: calc(100% + .15em); }

/* 白いメインコピーだけを、ごく薄い近接影と広めの影で背景から少し浮かせる。 */
.hero-magic-refined h1.magic-copy-title { text-shadow: 0 2px 5px #06366924, 0 3px 18px #0051a94a; }