/* 採用ページの各フレームは、見出し・説明・英字ラベルを左揃えで統一する。 */
.hero-magic-refined :is(.experience-heading, .experience-setup-title, .body-controls-heading, .tiles-intro, .customization-intro, .activity-copy, .closing-copy) { text-align: left; }
.hero-magic-refined :is(.body-controls-heading h2, .body-controls-heading .experience-eyebrow, .tiles-intro .section-label, .customization-intro .section-label, .closing .section-label) { justify-content: flex-start; }
/* 中央見出し用の先頭の飾り線を外し、ラベルの文字から読み始められるようにする。 */
.hero-magic-refined :is(.tiles-intro, .customization-intro) .section-label::before { display: none; }
.hero-magic-refined .tiles-intro { max-width: 1440px; }
.hero-magic-refined .customization-intro { max-width: 1380px; }
/* 採用A：文字・生活写真・縦の実画面を独立させ、原寸比率で並べる。 */
.play-experience { padding: clamp(28px, 3.3vw, 64px) 3.2% 0; background: linear-gradient(#e8f5ff 0, #fff 150px); }
.experience-stage { position: relative; display: grid; grid-template-columns: minmax(0, 2.38fr) minmax(0, 1fr); grid-template-areas: 'heading game' 'photo game'; column-gap: 22px; align-items: end; max-width: 1720px; margin: auto; }
.experience-heading { grid-area: heading; align-self: start; padding: 0 0 24px; }
.experience-eyebrow { display: flex; align-items: center; gap: 18px; font: 700 13px/1.5 Arial, sans-serif; letter-spacing: .15em; color: #0088ec; margin-bottom: 18px; }
.experience-eyebrow::after { content: ''; width: 90px; height: 1px; background: currentColor; }
.experience-heading h2 { font-size: clamp(29px, 5.25vw, 84px); line-height: 1.3; letter-spacing: -.055em; }
.experience-heading h2 > span { display: block; width: fit-content; }
.experience-highlight { background: linear-gradient(transparent 86%, var(--yellow) 86%, var(--yellow) 97%, transparent 97%); }
.experience-lead { margin-top: 15px; font-size: clamp(14px, 1.55vw, 25px); font-weight: 700; line-height: 1.8; }
.experience-photo { position: relative; grid-area: photo; }
.experience-photo > img { width: 100%; height: auto; }
/* 写真と同じ座標系の骨格を重ねる。実測表示ではなく操作を伝える静的な演出。 */
.experience-tracking { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 4px #00bfff); }
.experience-tracking path { fill: none; stroke: #8defff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.experience-tracking circle { fill: #fff; stroke: #1bb7f7; stroke-width: 3; }
.tracking-en { display: none; }
html[lang=en] .tracking-ja { display: none; }
html[lang=en] .tracking-en { display: inline; }
.experience-setup-title { max-width: 1720px; margin: 26px auto 0; text-align: center; font-size: clamp(18px, 2vw, 28px); }
.experience-callout { position: absolute; top: 30%; right: 1.5%; font-size: clamp(13px, 1.45vw, 23px); font-weight: 800; color: #005cbf; text-shadow: 0 1px 6px #fff; }
.experience-link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.experience-link circle { fill: #10a5ff; stroke: white; stroke-width: 3; }
.experience-link path { fill: none; stroke: #119df9; stroke-width: 2; }
.experience-game { grid-area: game; position: relative; align-self: end; }
.experience-game img { width: 100%; height: auto; }
.experience-game figcaption { position: absolute; bottom: 9px; left: 10px; padding: 4px 7px; font-size: 10px; font-weight: 700; color: white; background: #002650b8; }
.experience-mobile-response { display: none; }
/* 三段階は端末の区分ではなく開始手順として、均等な一列にまとめる。 */
.experience-steps { list-style: none; margin: 0 auto; padding: 30px 0; max-width: 1720px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.experience-steps li { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 5px 12px; }
.experience-steps li + li { border-left: 1px solid #8ec8ff; }
.experience-step-number { color: #008aef; font: 800 clamp(23px, 2.3vw, 36px)/1 Arial, sans-serif; }
.experience-steps strong { font-size: clamp(14px, 1.7vw, 27px); }
.experience-steps .icon { width: clamp(30px, 3.2vw, 50px); height: clamp(30px, 3.2vw, 50px); }
/* 採用B：三動作を写真→矢印→実画面の共通リズムにそろえる。 */
.body-controls { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 5vw, 88px) 3.2% 35px; background: #fff; }
.body-controls::before, .body-controls::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 140px; height: 90px; background: linear-gradient(140deg, #159fff 60%, #ffe52c 60%); clip-path: polygon(0 0,100% 35%,0 100%); }
.body-controls::before { top: 30px; left: -75px; }
.body-controls::after { bottom: 20px; right: -75px; transform: rotate(180deg); }
.body-controls-heading { max-width: 1720px; margin: auto auto 30px; text-align: center; }
.body-controls-heading .experience-eyebrow { justify-content: center; }
.body-controls-heading h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 14px; font-size: clamp(35px, 5.25vw, 82px); line-height: 1.3; letter-spacing: -.05em; }
.body-controls-heading h2 small { font-size: .47em; }
.body-controls-heading > p:last-child { margin-top: 14px; font-size: clamp(15px, 1.6vw, 26px); font-weight: 700; }
.body-control-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px; max-width: 1720px; margin: auto; }
.body-control { position: relative; min-width: 0; padding: 0; }
.body-control:first-child { padding-left: 0; }
.body-control:last-child { padding-right: 0; }
.body-control + .body-control::before { content: ''; position: absolute; top: 0; bottom: 0; left: -22px; width: 1px; background: #9cd3ff; }
.body-control h3 { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.body-control h3 > span { font: italic 900 clamp(46px, 6.3vw, 98px)/1 Arial, sans-serif; color: #ffe12c; letter-spacing: -.065em; }
.body-control h3 strong { font-size: clamp(19px, 2.4vw, 38px); letter-spacing: -.05em; }
/* 3枚組の正方形写真を腰まで表示し、手・肘・上体の動きを読み取りやすくする。 */
.body-person { aspect-ratio: 1; background: url('assets/body-controls-ja-v31.webp') left top / 300% 100% no-repeat; }
.body-dodge { background-position-x: center; }
.body-guard { background-position-x: right; }
.body-response-arrow { position: relative; z-index: 1; width: 34px; height: 38px; background: #0079f9; clip-path: polygon(30% 0,70% 0,70% 55%,100% 55%,50% 100%,0 55%,30% 55%); margin: -14px auto -10px; }
/* 実画面の縦横比を保ち、下側65%だけを人物写真と同じ横幅で表示する。 */
.body-screen { width: 100%; max-width: none; margin: auto; }
.body-screen-image { position: relative; aspect-ratio: 390 / 548.6; overflow: hidden; border: 1px solid #dae7f1; }
.body-screen-image > img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; }
.body-screen figcaption { margin-top: 12px; font-size: clamp(15px, 1.75vw, 28px); font-weight: 800; text-align: center; white-space: nowrap; }
.body-dodge-guide { position: absolute; left: 8%; width: 84%; bottom: 24.6%; fill: none; stroke: #078aff; stroke-width: 10px; filter: drop-shadow(0 1px 2px white); }
.body-controls-note { max-width: 1720px; margin: 28px auto 0; text-align: right; font-size: 11px; color: #607389; }
/* 既存の日英写真切替を保ち、英語の長い見出しは自然に折り返す。 */
html[lang=en] .body-person { background-image: url('assets/controls-en-v16.webp'); }
html[lang=en] .experience-heading h2 { font-size: clamp(30px, 4.7vw, 75px); letter-spacing: -.04em; }
html[lang=en] .body-control h3 strong { font-size: clamp(18px, 2.05vw, 34px); }
html[lang=en] .body-screen figcaption { font-size: clamp(13px, 1.35vw, 23px); white-space: normal; }
/* 最後の誘導は背中越しの対峙。見出しを空へ置き、主人公と軍勢を隠さない。 */
.hero-magic-refined .closing { min-height: 58vw; padding-top: 3vw; background: #e8f7ff; }
.hero-magic-refined .closing-art { background-image: url('assets/closing-army-desktop-v32.webp'); background-position: center; }
.hero-magic-refined .closing-copy { padding-top: 0; color: white; text-shadow: 0 2px 12px #06497d50; }
.hero-magic-refined .closing .section-label { color: white; }
.hero-magic-refined .closing h2 { font-size: 3.6vw; }
.hero-magic-refined .closing h2 br { display: none; }
.hero-magic-refined .closing-copy > p:last-child { margin-top: .8vw; font-size: 1.2vw; }
.hero-magic-refined .closing-download { margin-top: auto; }
@media (max-width: 760px) {
  /* スマホ専用の縦構図は全体を見せ、画像の下へダウンロード欄を続ける。 */
  .hero-magic-refined .closing { display: block; min-height: 0; padding: 0 12px 24px; }
  .hero-magic-refined .closing-art { top: 0; height: 150vw; background-image: url('assets/closing-army-mobile-v32.webp'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat; mask-image: none; }
  .hero-magic-refined .closing-copy { position: absolute; top: 28px; left: 12px; right: 12px; padding: 0; }
  .hero-magic-refined .closing h2 { font-size: 7.1vw; }
  .hero-magic-refined .closing-copy > p:last-child { font-size: 12px; margin-top: 12px; }
  .hero-magic-refined .closing-download { margin-top: 150vw; }
  /* スマホでも生活写真と縦画面を同時に見せ、続く各動作は写真と実画面を対にする。 */
  .play-experience { padding: 32px 18px 0; }
  .experience-stage { grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); grid-template-areas: 'heading heading' 'photo photo' 'response game'; gap: 0 20px; align-items: stretch; }
  .experience-heading { padding-bottom: 20px; }
  .experience-eyebrow { font-size: 10px; margin-bottom: 12px; }
  .experience-heading h2 { font-size: clamp(23px, 6.25vw, 45px); line-height: 1.45; }
  .experience-lead { font-size: 13px; margin-top: 12px; }
  /* 全身とスマホを切らずに同時に見せる。縦画面との高さの差は説明の余白へ使う。 */
  .experience-photo { align-self: center; margin-bottom: 22px; }
  .experience-photo > img { width: 100%; height: auto; }
  .experience-link { display: none; }
  .experience-callout { display: none; }
  .experience-mobile-response { display: block; grid-area: response; align-self: center; }
  .experience-mobile-response strong { font-size: clamp(25px, 7vw, 40px); color: #0065ed; line-height: 1.4; }
  .experience-mobile-response p { font-size: 12px; line-height: 1.9; margin-top: 13px; }
  .experience-mobile-response > span { display: block; color: #0088ed; margin-top: 10px; font-size: 32px; }
  .experience-game { align-self: center; }
  .experience-game figcaption { font-size: 7px; bottom: 3px; left: 3px; padding: 2px 3px; }
  .experience-steps { padding: 22px 0 28px; }
  .experience-steps li { padding: 0 4px; gap: 8px 4px; flex-wrap: wrap; }
  .experience-step-number { font-size: 18px; }
  .experience-steps strong { order: 3; flex-basis: 100%; text-align: center; font-size: clamp(10px, 2.9vw, 17px); }
  .experience-steps .icon { width: 26px; height: 26px; }
  .body-controls { padding: 32px 18px 24px; }
  .body-controls-heading { margin-bottom: 24px; }
  .body-controls-heading h2 { font-size: clamp(28px, 7.65vw, 52px); gap: 9px; }
  .body-controls-heading h2 small { display: block; width: 100%; font-size: .65em; }
  .body-controls-heading > p:last-child { font-size: 13px; line-height: 1.8; }
  .body-control-grid { display: block; }
  .body-control, .body-control:first-child, .body-control:last-child { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'label label' 'person screen'; gap: 12px 20px; padding: 22px 0; align-items: center; }
  .body-control + .body-control { border-left: none; border-top: 1px solid #abd8ff; }
  .body-control + .body-control::before { display: none; }
  .body-control h3 { grid-area: label; margin: 0; gap: 15px; }
  .body-control h3 > span { font-size: 54px; }
  .body-control h3 strong { font-size: 25px; }
  .body-person { grid-area: person; aspect-ratio: 1; }
  .body-response-arrow { position: absolute; left: 50%; top: 57%; width: 23px; height: 28px; margin: 0; transform: translate(-50%, -50%) rotate(-90deg); }
  .body-screen { grid-area: screen; width: 100%; }
  .body-screen figcaption { font-size: 13px; margin-top: 7px; white-space: normal; }
  .body-controls-note { margin-top: 12px; font-size: 9px; line-height: 1.7; text-align: left; }
  html[lang=en] .experience-heading h2 { font-size: clamp(27px, 7vw, 48px); }
  html[lang=en] .body-control h3 strong { font-size: 24px; }
}

/* 各フレームの主見出しと説明を共通の文字サイズに揃え、トップのコピーより一段控える。 */
html body.hero-magic-refined {
  --frame-title-size: clamp(36px, 5.5vw, 88px);
  --frame-lead-size: clamp(17px, 1.85vw, 29px);
}
html body.hero-magic-refined :is(.experience-heading, .body-controls-heading, .tiles-intro, .customization-intro, .activity-copy, .closing-copy) h2 {
  font-size: var(--frame-title-size);
  line-height: 1.3;
  letter-spacing: -.05em;
}
html body.hero-magic-refined :is(.experience-lead, .body-controls-heading > p:last-child, .tiles-lead, .customization-intro > p:last-child, .activity-copy > h2 + p, .closing-copy > p:last-child) {
  font-size: var(--frame-lead-size);
  line-height: 1.75;
  font-weight: 700;
  text-align: left;
}
/* 拡大した見出しを収める幅を確保し、写真と文章の重なりを避ける。 */
@media (min-width: 761px) {
  html body.hero-magic-refined .experience-stage { grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr); }
  html body.hero-magic-refined .closing-copy { width: 62%; }
}
@media (max-width: 760px) {
  html body.hero-magic-refined { --frame-title-size: clamp(24px, 6.6vw, 48px); --frame-lead-size: clamp(15px, 3.85vw, 22px); }
  html body.hero-magic-refined .closing-copy { width: 86%; }
}
/* 最後の画像フレームも、背景別の旧サイズ指定より共通の文字階層を優先する。 */
html body.hero-magic-refined.closing-mood .closing .closing-copy h2 { font-size: var(--frame-title-size); line-height: 1.3; }
html body.hero-magic-refined.closing-mood .closing .closing-copy > p:last-child { font-size: var(--frame-lead-size); line-height: 1.75; }
html body.hero-magic-refined.closing-mood .closing .closing-copy { width: 62%; }
@media (max-width: 760px) {
  html body.hero-magic-refined.closing-mood .closing .closing-copy { width: 86%; }
}

/* 大見出しはマーカー線ではなく、濃紺と青の文字色・余白で階層を作る。 */
.hero-magic-refined .experience-highlight { background: none; }
.hero-magic-refined .experience-heading .experience-highlight { color: #0861d9; }
.hero-magic-refined .tiles-intro h2 span::after { display: none; }
.hero-magic-refined .customization-intro h2 span { text-decoration: none; }
/* 操作説明の左右の三角形は外し、写真と動作の対応に視線を集中させる。 */
.hero-magic-refined .body-controls::before,
.hero-magic-refined .body-controls::after { display: none; }
/* 英字ラベルにだけ短い細線を残し、フレーム共通の控えめなアクセントにする。 */
.hero-magic-refined :is(.experience-heading, .body-controls-heading, .tiles-intro, .customization-intro) :is(.experience-eyebrow, .section-label) { gap: 14px; letter-spacing: .16em; }
.hero-magic-refined :is(.experience-heading, .body-controls-heading, .tiles-intro, .customization-intro) :is(.experience-eyebrow, .section-label)::after { width: 36px; height: 1px; opacity: .5; }

/* 準備→動きの認識→ゲームの反応の順に、PCでもスマホでも読み進められる構成。 */
.hero-magic-refined .experience-stage { grid-template-areas: 'heading heading' 'photo game'; align-items: center; }
.hero-magic-refined .experience-heading { padding-bottom: 28px; }
.hero-magic-refined .experience-setup-title { margin-top: 24px; }
.hero-magic-refined .experience-steps { margin: 0; padding: 20px 0 24px; }
.hero-magic-refined .experience-lead { margin-top: 0; }
/* 下側65%を広く見せ、キャラクターと魔法が読み取れる縦枠へまとめる。 */
.hero-magic-refined .experience-game { align-self: center; width: 100%; }
.experience-game-viewport { position: relative; aspect-ratio: 390 / 549; overflow: hidden; background: #d7e8e9; }
.experience-game-viewport > img { position: absolute; width: 100%; height: auto; bottom: 0; left: 0; }
/* 写真と同じ人物のカメラ表示を右上に重ね、認識中のプレイを具体的に伝える。 */
.experience-camera { position: absolute; top: 8px; right: 8px; width: 29%; aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid white; border-radius: 5px; box-shadow: 0 2px 8px #09244340; background: #edf4fa; }
.experience-camera > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 正面写真と同じ座標で関節を結び、小窓でも認識点を読める太さにする。 */
.experience-camera-bones { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 1px #007baa); }
.experience-camera-bones path { fill: none; stroke: #76edff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.experience-camera-bones circle { fill: #ecffff; stroke: #00bce5; stroke-width: 6; }
.experience-camera > span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; background: #092443b3; color: white; text-align: center; font: 700 7px/1.2 Arial, sans-serif; letter-spacing: .08em; }
.hero-magic-refined .experience-game figcaption { position: static; background: none; color: #526984; font-size: 9px; padding: 7px 0 0; line-height: 1.5; }
@media (min-width: 761px) {
  html body.hero-magic-refined .experience-stage { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero-magic-refined .experience-stage { grid-template-areas: 'heading heading' 'photo photo' 'response game'; }
  .hero-magic-refined .experience-heading { padding-bottom: 20px; }
  .hero-magic-refined .experience-steps { padding: 18px 0 24px; }
  .experience-camera { top: 5px; right: 5px; width: 34%; border-width: 1px; }
  .experience-camera > span { font-size: 5px; }
}

/* 準備は一つの細い帯に集約し、説明は動作写真と組にして文字だけの段を減らす。 */
.hero-magic-refined .experience-preparation { display: flex; align-items: center; gap: 28px; margin-top: 24px; padding: 16px 20px; background: #edf6fd; border-radius: 4px; }
.hero-magic-refined .experience-preparation .experience-setup-title { margin: 0; flex-shrink: 0; font-size: 17px; }
.hero-magic-refined .experience-preparation .experience-steps { flex: 1; padding: 0; }
.hero-magic-refined .experience-preparation .experience-steps li { gap: 10px; }
.hero-magic-refined .experience-preparation .experience-steps strong { font-size: clamp(13px, 1.3vw, 21px); }
.hero-magic-refined .experience-preparation .experience-step-number { font-size: 20px; }
.hero-magic-refined .experience-preparation .icon { width: 30px; height: 30px; }
.hero-magic-refined .experience-stage { grid-template-areas: 'heading heading' 'demo game'; align-items: start; }
.experience-demonstration { grid-area: demo; min-width: 0; }
.hero-magic-refined .experience-demonstration .experience-lead { padding: 0 0 18px; }
.hero-magic-refined .experience-game { align-self: start; }
@media (max-width: 760px) {
  /* 小画面でも準備帯は短く保ち、写真のすぐ上に認識の説明を置く。 */
  .hero-magic-refined .experience-preparation { display: block; margin-top: 18px; padding: 14px 10px; }
  .hero-magic-refined .experience-preparation .experience-setup-title { font-size: 14px; margin-bottom: 12px; }
  .hero-magic-refined .experience-preparation .experience-steps strong { font-size: 11px; }
  .hero-magic-refined .experience-preparation .experience-steps li { gap: 6px; }
  .hero-magic-refined .experience-preparation .icon { width: 25px; height: 25px; }
  .hero-magic-refined .experience-stage { grid-template-areas: 'heading heading' 'demo demo' 'response game'; }
}