/* Bの派生だけ、空の左上へコピーを戻す。旧3案は専用URLのまま保持。 */
.closing-study-b1 { --closing-mood-art: url('assets/closing-mood-b1-v37.webp'); }
.closing-study-b2 { --closing-mood-art: url('assets/closing-mood-b2-v34.webp'); }
.closing-study-b3 { --closing-mood-art: url('assets/closing-mood-b3-v34.webp'); }
.closing-study-b4 { --closing-mood-art: url('assets/closing-mood-b4-v34.webp'); }
.closing-study-b5 { --closing-mood-art: url('assets/closing-mood-b5-v34.webp'); }
.closing-mood.hero-magic-refined .closing { display: flex; min-height: 57.14vw; padding: 3vw 4.15% 2.4vw; background: #142d49; }
.closing-mood.hero-magic-refined .closing-art { position: absolute; z-index: -1; inset: 0; height: 100%; width: 100%; aspect-ratio: auto; background-image: var(--closing-mood-art); background-size: cover; background-position: center; }
.closing-mood.hero-magic-refined .closing-copy { position: relative; padding: 0 1.5%; text-align: left; color: white; text-shadow: 0 2px 12px #11223955; }
.closing-mood.hero-magic-refined .closing .section-label { color: white; justify-content: flex-start; }
.closing-mood.hero-magic-refined .closing h2 { font-size: 3.7vw; line-height: 1.35; }
.closing-mood.hero-magic-refined .closing h2 br { display: block; }
.closing-mood.hero-magic-refined .closing-copy > p:last-child { font-size: 1.2vw; margin-top: 1vw; }
.closing-mood.hero-magic-refined .closing-download { width: 100%; margin: auto 0 0; }
/* B1は左20%を切り、残る80%を同比率で拡大。人物の高さや足元は切らない。 */
.closing-study-b1.closing-mood.hero-magic-refined .closing-art { background-size: 125% auto; background-position: right bottom; background-repeat: no-repeat; }
/* 見出しと説明は画像の左上へそろえ、トリミングとは独立して配置する。 */
.closing-study-b1.closing-mood.hero-magic-refined .closing-copy { width: 43%; margin-left: 0; margin-right: auto; padding: 0 1.5%; text-align: left; }
@media(min-width:761px) {
  /* 画像の上を約6%切り、下端の余白ごと開始欄を画像内へ収める。 */
  .closing-study-b1.closing-mood.hero-magic-refined .closing { min-height: 84.85vw; padding-bottom: 2.4vw; }
}
@media(max-width:760px) {
  /* 横構図は切らずに残し、小画面では端末別の開始ボタンを画像の下へ。 */
  .closing-mood.hero-magic-refined .closing { display: block; min-height: 0; padding: 0 12px 24px; background: #edf5ff; }
  .closing-mood.hero-magic-refined .closing-art { height: 57.14vw; background-size: 100% auto; }
  .closing-mood.hero-magic-refined .closing-copy { position: absolute; top: 12px; left: 5%; right: 0; padding: 0; }
  .closing-mood.hero-magic-refined .closing .section-label { display: none; }
  .closing-mood.hero-magic-refined .closing h2 { font-size: 5.6vw; line-height: 1.2; }
  .closing-mood.hero-magic-refined .closing-copy > p:last-child { font-size: 2.4vw; line-height: 1.6; margin-top: 5px; }
  .closing-mood.hero-magic-refined .closing-download { width: 100%; margin: calc(57.14vw + 14px) 0 0; }
  /* スマホでも同じ左側だけを切り、説明は左上、開始欄は絵の下に配置する。 */
  .closing-study-b1.closing-mood.hero-magic-refined .closing { display: flex; min-height: 125vw; padding: 18px 12px 20px; }
  .closing-study-b1.closing-mood.hero-magic-refined .closing-art { height: 100%; background-size: 125% auto; background-position: right -4.43vw; }
  /* 縦画面は人物を中央切抜きせず、パネルの背後を同じ原画の石畳でつなぐ。 */
  .closing-study-b1.closing-mood.hero-magic-refined .closing-art::after { content: ''; position: absolute; inset: 75vw 0 0; background-image: var(--closing-mood-art); background-size: 125% 800%; background-position: right bottom; filter: blur(12px); transform: scale(1.08); mask-image: linear-gradient(transparent, #000 24px); }
  .closing-study-b1.closing-mood.hero-magic-refined .closing-copy { left: 5%; right: auto; width: 51%; padding: 0; }
  .closing-study-b1.closing-mood.hero-magic-refined .closing-copy > p:last-child { font-size: 2.2vw; }
  .closing-study-b1.closing-mood.hero-magic-refined .closing-download { margin-top: auto; }
  /* 小画面では開始欄をコンパクトにし、背後の人物が見える高さを残す。 */
  .closing-study-b1 .closing-download .download-card { padding: 12px; gap: 10px; }
  .closing-study-b1 .closing-download .device-title { font-size: 14px; margin-bottom: 6px; }
  .closing-study-b1 .closing-download .store-badge { height: 38px; }
  .closing-study-b1 .closing-download .web-play { min-height: 38px; padding-block: 8px; }
}

/* フッターを原画の中へ収め、下端だけに徐々にぼける薄いガラス層を敷く。 */
.closing-study-b1.closing-mood.hero-magic-refined .closing { padding-bottom: 0; }
.closing-study-b1 .closing .footer {
  position: relative; isolation: isolate; order: 3; flex-shrink: 0;
  width: calc(100% + 9.052%); margin: 18px -4.526% 0;
  padding: 26px 5% 24px; background: transparent; color: #fff;
  text-shadow: 0 1px 3px #071e37, 0 2px 10px #071e3799;
}
.closing-study-b1 .closing .footer::before {
  content: ''; position: absolute; z-index: -1; inset: -22px 0 0; pointer-events: none;
  background: linear-gradient(transparent, #10283e66 55%, #10283e8c);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  mask-image: linear-gradient(transparent, #000 65%);
}
.closing-study-b1 .closing .footer :is(a, button) { color: #fff; }
.closing-study-b1 .closing .footer :is(a, button):focus-visible { outline: 2px solid #ffe537; outline-offset: 5px; }
@media (max-width: 760px) {
  /* 折り返したリンクにも余白を残し、画像と開始パネルの間隔は保持する。 */
  .closing-study-b1.closing-mood.hero-magic-refined .closing { min-height: calc(125vw + 90px); }
  .closing-study-b1 .closing .footer { width: calc(100% + 24px); margin: 14px -12px 0; padding: 24px 20px 22px; }
}

/* 原画の上端と人物の大きさを固定し、足元に開始パネルが来る分だけ下を切る。 */
@media (min-width: 761px) {
  .closing-study-b1.closing-mood.hero-magic-refined .closing { min-height: 74.85vw; }
  .closing-study-b1.closing-mood.hero-magic-refined .closing-art { background-position: right -4.43vw; }
}
@media (max-width: 760px) {
  .closing-study-b1.closing-mood.hero-magic-refined .closing { min-height: calc(123vw + 90px); }
}

/* 最後の白い見出しも、元の影を少しだけ濃く広くして輪郭を読みやすくする。 */
.closing-mood.hero-magic-refined .closing-copy h2 { text-shadow: 0 2px 5px #11223929, 0 3px 16px #11223966; }