/* 共通の見出しスケールで文字の強さを揃え、数字は見出しの約6割へ引き上げる。 */
html body.hero-magic-refined .immersive-controls { padding: clamp(42px, 4.5vw, 76px) 0 0; background: #fff; }
.immersive-heading { margin: 0 4% clamp(26px, 3vw, 48px); }
.immersive-heading .experience-eyebrow { font-size: clamp(12px, 1.1vw, 17px); margin: 0 0 18px; }
.immersive-heading > p { font-size: var(--frame-lead-size); font-weight: 700; line-height: 1.7; }
/* 少し重なる矩形を斜めに切り、隣り合う二辺の間に8pxだけ白を残す。 */
.immersive-grid { display: flex; width: 100%; overflow: hidden; }
.immersive-action { position: relative; flex: 0 0 calc(36% - 5.333px); min-width: 0; aspect-ratio: 3 / 4; overflow: hidden; clip-path: polygon(11.111% 0, 100% 0, 88.889% 100%, 0 100%); }
.immersive-action + .immersive-action { margin-left: calc(-4% + 8px); }
.immersive-action:first-child { clip-path: polygon(0 0, 100% 0, 88.889% 100%, 0 100%); }
.immersive-action:last-child { clip-path: polygon(11.111% 0, 100% 0, 100% 100%, 0 100%); }
.immersive-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.immersive-label { position: absolute; z-index: 1; top: 1.5%; left: 15%; right: 4%; color: var(--ink); }
.immersive-action:first-child .immersive-label { left: 11.111%; }
.immersive-number { display: block; margin-bottom: 8px; color: var(--blue); font: italic 800 clamp(30px, 3.3vw, 53px)/1 Arial, sans-serif; letter-spacing: -.045em; }
html body.hero-magic-refined .immersive-label h3 { margin: 0; font-size: var(--frame-title-size); font-weight: 900; line-height: 1.16; letter-spacing: -.05em; }
.immersive-label > p { margin: 14px 0 0; font-size: var(--frame-lead-size); font-weight: 800; line-height: 1.5; }
.immersive-note { margin: 0; padding: 12px 4%; font-size: 10px; line-height: 1.5; color: #617184; text-align: right; }
/* スマホは一場面ずつ大きく見せ、人物・魔法・短いコピーを同時に読める幅にする。 */
@media (max-width: 640px) {
  .immersive-heading { margin: 0 6% 26px; }
  .immersive-heading > p { max-width: 25em; }
  .immersive-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .immersive-action, .immersive-action:first-child, .immersive-action:last-child { aspect-ratio: 3 / 4; clip-path: none; margin: 0; }
  .immersive-action + .immersive-action { margin-left: 0; }
  .immersive-label, .immersive-action:first-child .immersive-label { top: 5%; left: 7%; right: 7%; }
  .immersive-number { font-size: clamp(22px, 4.4vw, 32px); margin-bottom: 8px; }
  html body.hero-magic-refined .immersive-label h3 { font-size: var(--frame-title-size); }
  .immersive-label > p { margin-top: 12px; font-size: var(--frame-lead-size); }
  .immersive-note { padding: 12px 6%; }
}

/* 採用B1の全フレームは同じ左端と見出しスケール。短い行の文字間は広げない。 */
html body.closing-study-b1 { --section-inset: 4vw; }
/* 操作と記録の見出し下段も、対戦・協力の見出しと同じ青で強調する。 */
html body.closing-study-b1 .frame-heading-accent { color: #0861e9; }
html body.closing-study-b1 :is(#how-title, #movement-title, #multiplayer-title, #avatar-title, #activity-title, #closing-title) {
  margin: 0;
  font-size: var(--frame-title-size);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -.05em;
  text-align: left;
  text-align-last: auto;
}
html body.closing-study-b1 .play-experience { padding-inline: var(--section-inset); }
html body.closing-study-b1 .experience-stage { max-width: none; }
html body.closing-study-b1 .immersive-heading { margin-inline: var(--section-inset); }
html body.closing-study-b1 .immersive-heading .experience-eyebrow { font-size: clamp(12px, 1.1vw, 17px); }
html body.closing-study-b1 .immersive-lead { margin-top: 18px; font-size: var(--frame-lead-size); line-height: 1.75; }
html body.closing-study-b1 .tiles-intro { max-width: none; margin-inline: calc(var(--section-inset) - 16px); }
html body.closing-study-b1 .hero-customization { padding-inline: var(--section-inset); }
html body.closing-study-b1 .customization-intro { max-width: none; }
/* 記録のタイトルは全幅、説明とグラフはその下の二列へ置く。 */
html body.closing-study-b1 .activity-feature { padding-inline: var(--section-inset); row-gap: 28px; }
html body.closing-study-b1 .activity-heading { grid-column: 1 / -1; }
html body.closing-study-b1 .activity-copy > .section-description { font-size: var(--frame-lead-size); font-weight: 700; line-height: 1.75; }
html body.closing-study-b1.closing-mood.hero-magic-refined .closing { padding-inline: var(--section-inset); }
html body.closing-study-b1.closing-mood.hero-magic-refined .closing .closing-copy { padding-inline: 0; }
@media (max-width: 760px) {
  html body.closing-study-b1 { --section-inset: 6vw; }
  html body.closing-study-b1 .tiles-intro { margin-inline: calc(var(--section-inset) - 10px); }
  html body.closing-study-b1.closing-mood.hero-magic-refined .closing .closing-copy { left: var(--section-inset); right: var(--section-inset); width: auto; }
}

/* E4：枠付きカードを廃止。文字のない背景と翻訳可能なコピーで一つの場面を組む。 */
html body.closing-study-b1 .hero-customization.avatar-scene { position: relative; isolation: isolate; padding: 0; overflow: hidden; background: #eaf5ff; }
.avatar-scene-art { display: block; width: 100%; height: auto; }
/* 空の明度を左上だけ整え、背景の群像からコピーを読み分ける。 */
.avatar-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 5% 5%, #fff 0%, #fffffff5 28%, #ffffffb8 48%, #ffffff40 65%, transparent 82%); }
html body.closing-study-b1 .avatar-scene #avatar-title { line-height: 1.12; margin: 0; }
.avatar-scene-copy { position: absolute; z-index: 1; top: 4%; left: var(--section-inset); width: 58%; color: #071d43; }
.avatar-scene-copy .section-label { margin: 0 0 12px; color: #071d43; letter-spacing: .28em; }
html body.closing-study-b1 .avatar-scene #avatar-title, html body.closing-study-b1 .avatar-scene #avatar-title span { color: #071d43; background: none; }
.avatar-scene-lead { margin: 8px 0 0; font-size: clamp(14px, 1.5vw, 24px); font-weight: 700; line-height: 1.6; }
/* 狭い画面ではコピーを先に置き、絵は全幅表示して3人の左右を切らない。 */
@media (max-width: 760px) {
  html body.closing-study-b1 .hero-customization.avatar-scene { display: flex; flex-direction: column; background: linear-gradient(#fff, #edf7ff); }
  .avatar-scene::after { display: none; }
  .avatar-scene-copy { position: relative; order: -1; inset: auto; width: auto; padding: 32px var(--section-inset) 0; }
  .avatar-scene-copy .section-label { margin-bottom: 14px; }
  .avatar-scene-lead { font-size: var(--frame-lead-size); margin-top: 14px; }
  .avatar-scene-art { margin-top: -8%; mask-image: linear-gradient(to bottom, transparent, #000 24%); }
}