/* 画面内の衣装と奥行きを比較する三案。元の採用ページの背景には触れない。 */
.closing-study-a.hero-magic-refined .closing-art { background-image: url('assets/closing-study-a-v33.webp'); }
.closing-study-b.hero-magic-refined .closing-art { background-image: url('assets/closing-study-b-v33.webp'); }
.closing-study-c.hero-magic-refined .closing-art { background-image: url('assets/closing-study-c-v33.webp'); }
/* タイトルを絵の外へまとめ、全身・敵・奥行きを一枚で見せる。 */
[class*='closing-study-'].hero-magic-refined .closing { display: block; padding: 0; min-height: 0; background: #f3f9ff; }
[class*='closing-study-'].hero-magic-refined .closing-copy { color: #08294a; text-shadow: none; text-align: center; padding: 38px 18px 30px; }
[class*='closing-study-'].hero-magic-refined .closing .section-label { color: #0870d5; justify-content: center; }
[class*='closing-study-'].hero-magic-refined .closing h2 { font-size: clamp(28px, 4vw, 64px); }
[class*='closing-study-'].hero-magic-refined .closing-copy > p:last-child { font-size: clamp(13px, 1.2vw, 18px); }
[class*='closing-study-'].hero-magic-refined .closing-art { position: relative; z-index: 0; inset: auto; height: auto; aspect-ratio: 1660 / 948; background-size: cover; background-position: center; mask-image: none; }
/* 背景がDOMでは先頭なので、順序のみをCSSで調整して見出し→絵→CTAへ。 */
[class*='closing-study-'].hero-magic-refined .closing { display: flex; flex-direction: column; }
[class*='closing-study-'].hero-magic-refined .closing-copy { order: 0; }
[class*='closing-study-'].hero-magic-refined .closing-art { order: 1; width: 100%; flex: none; }
[class*='closing-study-'].hero-magic-refined .closing-download { order: 2; width: 91.7%; margin: -3.7vw auto 28px; z-index: 1; }
@media (max-width: 760px) {
  /* 比較段階は横構図全体を表示し、中央トリミングで対峙する両者を欠かさない。 */
  [class*='closing-study-'].hero-magic-refined .closing-copy { position: relative; top: auto; left: auto; right: auto; padding: 30px 16px 24px; }
  [class*='closing-study-'].hero-magic-refined .closing-download { width: calc(100% - 24px); margin: 16px auto 24px; }
}