/* ============================================
   エンタメ業界適職診断（「猫と竜」コラボ版）
   出典 Figma:
     SP  TOP 86:2744 / 設問1 89:3142 / 診断結果 89:3994
     PC  TOP 52:2   / 設問1 73:454  / 診断結果 77:1318
   設計方針:
     - フルブリード構成（赤帯・タン links・フッターは全幅、内容は中央寄せ）
     - コンテンツ幅 SP 350px(390フレーム,左右20) / PC 1200px(1728フレーム,左右264)
     - 768px を境に SP↔PC レイアウトを切り替える
     - 【比例ズーム方式】全寸法を calc(N * var(--u)) で表し、画面幅に比例して
       一律スケールする。Figma設計px値 N をどの画面幅でも比率どおり保つ。
         SP: --u = min(1px, 100vw / 390)   → 390pxで頭打ち、以降は中央寄せ・余白
         PC: --u = min(1px, 100vw / 1728)  → 1728pxで頭打ち、以降は中央寄せ・余白
       line-height / aspect-ratio / letter-spacing / % / flex比率 は相対値のため据え置く。
     - 【文字サイズのアクセシビリティ】font-sizeのみ calc(N * var(--u) * var(--rem-ratio)) とし、
       ブラウザ/OSの「文字サイズ」設定（ルートfont-size変更、vwには反応しない）にも追従する。
       --rem-ratio は既定(16px)で1になるため、この対応による見た目の変化はない。
   ============================================ */

:root {
  --color-bg: #fffcf2;          /* ページ背景 */
  --color-primary: #a70a39;     /* メインの赤（ヘッダー帯・ボタン・フッター） */
  --color-accent: #f1b024;      /* ボタン内側の金枠・footer文字（ゴールド） */
  --color-text: #553e3e;        /* 本文・見出しの基本文字色（ブラウン） */
  --color-pink: #d58799;        /* 選択肢の選択済み塗り */
  --color-choice-shadow: #eac2c5; /* 選択肢ボタンのドロップシャドウ */
  --color-choice-selected-inner: #efd0d7; /* 選択肢の選択済み内枠 */
  --color-tan: #F6E3BD;         /* 結果カード背景 ＆ links セクション背景（ライトタン） */
  --color-banner-ph: #a6a6a6;   /* バナー未着時のプレースホルダー */
  --color-white: #ffffff;

  --font-jp: "Zen Old Mincho", serif;   /* サイト全体の基本フォント（明朝体） */
  --font-mincho: "Zen Old Mincho", serif; /* 基本フォントと同一（結果カード等で明示指定する箇所用） */
  --color-btn-shadow-new: #eac2c5; /* 結果新デザインの赤ボタン影（CTA・もう一度）。旧--color-pinkと別値 */

  /* ブラウザ/OSの「文字サイズ」設定（vwに反応しない拡大縮小）にfont-sizeだけ追従させる係数。
     既定値(ルート16px)では1になり、--u方式の比例ズーム表示に影響しない。
     ユーザーがルートfont-sizeを拡大すると、その比率でfont-sizeのみ拡大される。 */
  --rem-ratio: calc(1rem / 16px);
}

/* ---------- リセット ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

ul, ol { list-style: none; margin: 0; padding: 0; }

button { font-family: inherit; cursor: pointer; }

a { color: inherit; }

/* ---------- 全体レイアウト ---------- */
/* --u: 比例ズームの基準単位。全子孫が calc(N * var(--u)) でこの1変数を継承する。
   SP既定は390フレーム基準・390pxで頭打ち。PC値は @media 内で上書き（1728基準）。 */
.app {
  --u: min(1px, 100vw / 390);
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  overflow-x: hidden;
}

.app__main { flex: 1; }

/* コンテンツ幅コンテナ（SP:390フレーム→内容350 / PC:1200 は @media で上書き） */
.container {
  width: calc(390 * var(--u));
  max-width: 100%;
  margin-inline: auto;
  padding-inline: calc(20 * var(--u));
}

/* 画面切り替え */
.screen { display: none; }
.screen.is-active { display: block; }

/* ============================================
   ヘッダー（全画面共通・新デザイン）
   ロゴ ＋ 適職診断キャッチ（見出し＋金アンダーライン＋リード文を左右の唐草飾りで挟む）。
   赤帯・赤バッジは新デザインで廃止。全画面で同一（画面別の出し分けなし）。
   出典 Figma: SP 307:11322 / PC 290:238
     - SP: ロゴ中央 → 区切り線 → 適職診断キャッチ（縦積み）
     - PC: 左ロゴ ＋ 右適職診断キャッチ（横並び）
   ============================================ */
.site-header {
  position: relative;
  z-index: 0; /* 背景装飾レイヤー(.site-header__decor, z-index:-1)を閉じ込めるスタッキング文脈 */
  width: 100%;
}

/* ヘッダー背景の肉球あしらい（PC専用。.screen__decor と同じくビューポート左端基準・frame座標を --u で表す）。
   overflow:visible で Group4 下端がヘッダー外(KV領域)へ延びるが、後続の .top / KV画像が前面を覆う。 */
.site-header__decor {
  display: none; /* SP: 非表示（SPにヘッダー肉球は無い） */
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(8 * var(--u));   /* Figma SP: header y8 */
  padding-bottom: 0;
}

/* ロゴ（SP: 中央・幅350フル。logo_title.png 696×173 のアスペクトで高さ≒88） */
.site-header__logo {
  margin: 0;
  height: calc(88 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header__logo img {
  display: block;
  width: calc(350 * var(--u));
  height: auto;
}

/* SP専用: ロゴ→キャッチ間の区切り線（両端キャップ＋罫線 / Figma 350×12・y94） */
.site-header__divider {
  display: block;
  width: calc(350 * var(--u));
  height: calc(12 * var(--u));
  margin-top: calc(-2 * var(--u));   /* Figma: ロゴ枠下端96 → 区切り線上端94 */
}

/* 適職診断キャッチ（見出し＋リード文を左右の唐草飾りで挟む） */
.site-header__catch {
  position: relative;
  width: calc(350 * var(--u));
  min-height: calc(112 * var(--u));  /* Figma SP: 適職診断ブロック高112 */
  margin-top: calc(12 * var(--u));   /* Figma: 区切り線下端106 → キャッチ上端118 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* 左右の唐草飾り（ブロック両端に絶対配置・ブロック高いっぱい） */
.site-header__flourish {
  position: absolute;
  top: 0;
  width: calc(44 * var(--u));
  height: calc(112 * var(--u));
}
.site-header__flourish--left  { left: 0; }
.site-header__flourish--right { right: 0; }

/* 見出し＋リード文（中央寄せ） */
.site-header__catch-body {
  width: calc(282 * var(--u));       /* Figma SP: text 幅282 */
  padding-top: calc(8 * var(--u));   /* Figma SP: 見出しtop126 − ブロックtop118 */
  text-align: center;
}

/* 見出し「エンタメ業界適職診断」＋金アンダーライン（見出し下端に重ねる） */
.site-header__title {
  position: relative;
  display: inline-block;
  margin: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: calc(24 * var(--u) * var(--rem-ratio));
  line-height: 1;
  white-space: nowrap;
}
.site-header__title-bar {
  position: absolute;
  left: 50%;
  bottom: calc(-4 * var(--u));       /* 高8を見出し下端中央に重ねる（Figma: バー中心=見出し下端） */
  transform: translateX(-50%);
  width: calc(246 * var(--u));       /* Figma SP: バー幅246 */
  height: calc(8 * var(--u));
  background-color: #f3d9a1;          /* 金アンダーライン */
  border-radius: calc(1 * var(--u));
  z-index: 0;
}
.site-header__title-text {
  position: relative;
  z-index: 1;                         /* 文字は金バーの前面 */
}

/* リード文 */
.site-header__lead {
  margin: calc(12 * var(--u)) 0 0;   /* Figma: 見出し下端150 → リード上端162 */
  color: var(--color-text);
  font-weight: 600;
  font-size: calc(16 * var(--u) * var(--rem-ratio));
  line-height: 1.4;
}
.site-header__lead-br { display: none; } /* SP: 幅282で自然折返し（Figma 3行） */

/* ---------- フッター ---------- */
.site-footer {
  width: 100%;
  height: calc(28 * var(--u)); /* Figma SP(307:11229)。PCは@mediaで32 */
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-footer__copyright {
  margin: 0;
  font-size: calc(12 * var(--u) * var(--rem-ratio));
  color: var(--color-accent);
}

/* ============================================
   共通パーツ
   ============================================ */

/* コラボ診断バッジ（テキスト＋両脇の飾り。Figma node 307:11309 / 283:1678。ピル枠は廃止） */
.top__collab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0; /* Figma SP(307:11309): 飾りが文字ボックスに接する。PCは@mediaで8pxに戻す */
  margin: 0;
  color: var(--color-text);
  font-size: calc(16 * var(--u) * var(--rem-ratio));
  font-weight: 600;
  line-height: 1.4; /* Figma文字ボックス23px(16×1.44)相当。バッジ→タイトル8pxのリズム基準 */
  white-space: nowrap;
}
.top__collab-flourish {
  flex: none;
  width: calc(56 * var(--u));
  height: calc(14 * var(--u));
}
/* 左側の飾りは右側の水平反転で対にする */
.top__collab-flourish--left { transform: scaleX(-1); }

/* レトロゲーム風ボタン（赤塗り＋4px内側の金枠＋ピンクのドロップシャドウ、角丸なし）
   影は --btn-shadow-offset / --btn-shadow-color の2変数に集約し、box-shadow 宣言は
   ここ1箇所のみ。各バリアント・PC側は変数の上書きだけで差を表現する
   （ホバー押し込み量が実効影オフセットに自動追従するようにするため） */
.btn {
  --btn-shadow-offset: calc(4 * var(--u));
  --btn-shadow-color: var(--color-pink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  width: 100%;
  border: none;
  border-radius: 0;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: inherit;
  font-size: calc(18 * var(--u) * var(--rem-ratio));
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: var(--btn-shadow-offset) var(--btn-shadow-offset) 0 0 var(--btn-shadow-color);
}
.btn::before {
  content: "";
  position: absolute;
  inset: calc(4 * var(--u));
  border: calc(1 * var(--u)) solid var(--color-accent);
  pointer-events: none;
}
.btn:disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; }

/* CTA（診断スタート/非公開求人）は新デザインの赤ボタン。影は #eac2c5（旧--color-pinkと別値） */
.btn--cta  { --btn-shadow-color: var(--color-btn-shadow-new); max-width: calc(346 * var(--u)); height: calc(64 * var(--u)); font-weight: 600; /* Figma(307:11288): SemiBold */ }
.btn--next {
  --btn-shadow-offset: calc(3 * var(--u));
  max-width: calc(280 * var(--u));
  height: calc(56 * var(--u));
  font-size: calc(16 * var(--u) * var(--rem-ratio));
}
.btn--prev {
  --btn-shadow-offset: calc(3 * var(--u));
  --btn-shadow-color: #edcccd;
  max-width: calc(280 * var(--u));
  height: calc(56 * var(--u));
  background-color: var(--color-pink);
  font-size: calc(16 * var(--u) * var(--rem-ratio));
}

/* SHAREボタン（生成り地＋ブラウン枠。Figma node 171:5368:
   背景#fffcf2・外枠1px #553e3e・影3px rgba(85,62,62,0.25)・Inter Regular 20px・アイコン28） */
.btn--share {
  --btn-shadow-offset: calc(3 * var(--u));
  --btn-shadow-color: rgba(85, 62, 62, 0.25);
  max-width: calc(280 * var(--u));
  height: calc(56 * var(--u));
  gap: calc(12 * var(--u));
  background-color: var(--color-bg);
  border: calc(1 * var(--u)) solid var(--color-text);
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: calc(20 * var(--u) * var(--rem-ratio));
  font-weight: 400;
}
/* 外枠1px分を差し引く（Figma: 外端から内枠まで4px = border1px + inset3px） */
.btn--share::before {
  inset: calc(3 * var(--u));
  border-color: var(--color-text);
}
.btn--share__icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

/* リトライボタン（Figma node 171:5364: 影3px #d58799・文字16px Medium） */
.btn--retry {
  --btn-shadow-offset: calc(3 * var(--u));
  max-width: calc(280 * var(--u));
  height: calc(56 * var(--u));
  font-size: calc(16 * var(--u) * var(--rem-ratio));
}

/* バナー（未着時グレープレースホルダー、350×75） */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: calc(350 * var(--u));
  height: calc(75 * var(--u));
  background-color: var(--color-banner-ph);
  color: var(--color-white);
  font-size: calc(18 * var(--u) * var(--rem-ratio));
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
}
.banner img { width: 100%; height: 100%; object-fit: contain; }
/* 画像設定済みバナー: リンク領域を画像の実サイズぶんだけに縮め、余白（レターボックス）部分はリンク対象外にする。
   プレースホルダー用グレーも外し、背景に馴染ませる */
.banner--has-image {
  width: auto;
  height: auto;
  background-color: transparent;
  transition: opacity 0.15s ease-out;
}
.banner--has-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(350 * var(--u));
  max-height: calc(75 * 1.25 * var(--u)); /* 元の高さ75の1.25倍 */
}
/* 単独バナー（result__banner-single）はaではなくbuttonで実装（クリックでモーダルを開く導線のため）。
   button のUAデフォルト装飾だけを打ち消し、見た目は .banner / .banner--has-image に委ねる */
.banner--modal-trigger {
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ============================================
   links セクション（公式リンク＋バナー×2、タン背景・全幅）
   TOP と 診断結果 で共通利用
   ============================================ */
/* SP背景ベクター(node 171:3633)のSVGパス "M0 0 L195 27.9634 L390 0 V294 H0 Z"
   ＝上辺は両端0px・中央約28px下がりの直線シェブロン（PC版と同族形状）。clip-pathで厳密再現する。 */
.links {
  position: relative;
  width: 100%;
  margin-top: calc(64 * var(--u));
  /* 下padding 70: Figma SP(307:11231) バナー②下端1430→links下端1500。
     高さ内訳 368 = 56 + 見出し67.2 + gap16 + バナー158 + 70 */
  padding: calc(56 * var(--u)) 0 calc(70 * var(--u));
  background-color: var(--color-tan);
  clip-path: polygon(0 0, 50% calc(28 * var(--u)), 100% 0, 100% 100%, 0 100%);
}
.links__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--u)); /* Figma SP: 見出し下端1255.2→バナー上端1272 */
}
/* 公式リンク見出し: SPはFigma node 307:11280の326×68フレーム内に絶対配置。
   左右のあしらいは20×20で、Figmaどおり4pxの縦位置差を持たせる。PCはFlexへ戻す。 */
.links__official {
  position: relative;
  width: calc(326 * var(--u));
  height: calc(68 * var(--u));
  margin: 0;
  text-align: center;
  line-height: 1.4;
}
.links__official-ornament {
  position: absolute;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.links__official-ornament--left { top: calc(5 * var(--u)); left: 0; }
.links__official-ornament--right { top: calc(9 * var(--u)); right: 0; }
.links__official-text {
  position: absolute;
  top: 0;
  left: calc(21 * var(--u));
  width: calc(271 * var(--u));
  height: calc(68 * var(--u));
  color: var(--color-text);
  font-size: calc(24 * var(--u) * var(--rem-ratio));
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.links__banners {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  width: 100%;
}

/* links下角の唐草飾り（SP基準: 42×42。基準アセットは右下向き、左下は scaleX(-1)）
   Figma: SP 307:11254(BL)/307:11233(BR)・下12/横 左54・右12。PC値は @media で上書き */
.links__corner {
  position: absolute;
  bottom: calc(12 * var(--u));
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  pointer-events: none;
}
.links__corner--bl { left: calc(12 * var(--u)); transform: scaleX(-1); }
.links__corner--br { right: calc(12 * var(--u)); }

/* ============================================
   TOP画面
   ============================================ */
.top {
  position: relative;
  z-index: 0; /* 背景装飾レイヤー(.screen__decor, z-index:-1)を .top 内に閉じ込めるためのスタッキング文脈 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 設問・結果画面の背景装飾コンテナ（.top と同様のスタッキング文脈） */
.question-screen,
.result-screen {
  position: relative;
  z-index: 0;
}

/* 背景装飾レイヤー（肉球/雲。content背面・操作不可・フレーム端でクリップ）
   クラスタは Figma フレーム座標を --u で表し、ヘッダー分のYオフセットを引いて配置する
   （SP: KV上端246→my KV上端≈6 で offset 240 / PC: 205→24 で offset 181）。
   クラスタ内部の肉球・雲は各クラスタに対する % 指定で相対配置する。 */
.screen__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.screen__decor-set { display: contents; }
.screen__decor-set--pc { display: none; } /* SP既定ではPC用クラスタを隠す */
.deco-cluster { position: absolute; }
.deco-cloud,
.deco-paw {
  position: absolute;
  display: block;
  transform-origin: center;
}
.deco-cloud { height: auto; }
.deco-paw { width: calc(39 * var(--u)); height: calc(39 * var(--u)); }
/* linksセクションはタン背景を全幅（full-bleed）で見せる。
   .top が align-items:center で子を中央幅に縮めるため、この要素だけ
   stretch で画面全幅まで引き伸ばす（結果画面＝.screen直下と同じ全幅挙動に揃える）。 */
#js-top-links { align-self: stretch; }

.top__kv { margin-top: calc(16 * var(--u)); }
.top__kv img { width: 100%; height: auto; }

/* ヒーローの縦リズムは Figma SP 実測（KV下端493→バッジ533→タイトル564→リード613→キャラ707→CTA1004）。
   gap は使わず各要素の margin-top で個別に表す（バッジ→タイトル8 / タイトル→リード12 / リード→キャラ43 / キャラ→CTA40）。
   PC側は @media で margin-top をリセットし従来の grid + gap に戻す */
.top__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: calc(40 * var(--u));
}
.top__hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
/* タイトル: 両脇にあしらいを置くため flex 横並び・中央寄せ（Figma node 307:11316 / 283:1685）。あしらいは SP=12×12 / PC=28×28 */
.top__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(31 * var(--u) * var(--rem-ratio));
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  white-space: nowrap;
}
.top__title-ornament {
  flex: none;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}
/* Figma確定(SP node 307:11320): 左揃え・「中から」で改行の2行・line-height 1.6。
   2行目は22字×16px=352px相当でコンテナ350pxをわずかに超えるため、nowrap で
   「う。」の3行目落ちを防ぐ（右へ約2px はみ出すが余白20px内。PCは@mediaで解除） */
.top__lead {
  margin: calc(12 * var(--u)) 0 0;
  width: 100%;
  font-size: calc(16 * var(--u) * var(--rem-ratio));
  line-height: 1.6;
  text-align: left;
}
.top__cats { width: 100%; max-width: calc(350 * var(--u)); margin-top: calc(16 * var(--u)); }
.top__cats img { width: 100%; height: auto; }
.top__cta { margin-top: calc(40 * var(--u)); }

/* キャンペーン詳細バナー（結果画面 .result__banner-single と同じ間隔・サイズ規則を共有） */
.top__banner-single {
  display: flex;
  justify-content: center;
  margin-top: calc(40 * var(--u));
}

/* ============================================
   設問画面
   ============================================ */
.question {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(72 * var(--u)); /* Figma Q1: 次へボタン下端1148→footer上端1220 */
}

/* 場面写真（16:9） */
.question__scene {
  position: relative;
  width: 100%;
  max-width: calc(350 * var(--u));
  aspect-ratio: 350 / 197;
  margin-top: calc(28 * var(--u));
  background-color: #eee7d8;
  overflow: hidden;
}
.question__scene img { width: 100%; height: 100%; object-fit: cover; }
.question__scene-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(12 * var(--u) * var(--rem-ratio));
  color: var(--color-text);
}
.question__scene.is-missing img { display: none; }
.question__scene.is-missing .question__scene-fallback { display: flex; }

/* 進捗（Figma current: SP 331:27805/27574/27338/27102/26866、PC 290:132/504・292:805/1094/1385） */
.question__progress {
  --progress-frame-height: calc(23.030778884887695 * var(--u));
  --progress-track-width: calc(314 * var(--u));
  --progress-fill-top: calc(16.5 * var(--u));
  --progress-track-top: calc(var(--progress-fill-top) + ((var(--progress-fill-height) - var(--progress-track-height)) / 2));
  --progress-track-height: calc(1 * var(--u));
  --progress-fill-height: calc(3 * var(--u));
  --progress-count-top: calc(5 * var(--u));
  --progress-count-width: calc(27 * var(--u));
  --progress-fill-width: calc(60 * var(--u));
  --progress-paw-left: calc(62.2198486328125 * var(--u));
  --progress-paw-offset-x: calc(-15 * var(--u));
  --progress-paw-offset-y: calc(2 * var(--u));
  --progress-paw-width: calc(22.968239059036478 * var(--u));
  --progress-paw-height: calc(23.030778685837276 * var(--u));
  position: relative;
  width: 100%;
  height: var(--progress-frame-height);
  margin-top: calc(8 * var(--u));
}
.question__progress[data-progress-step="2"] { --progress-fill-width: calc(122 * var(--u)); --progress-paw-left: calc(125 * var(--u)); }
.question__progress[data-progress-step="3"] { --progress-fill-width: calc(185 * var(--u)); --progress-paw-left: calc(188 * var(--u)); }
.question__progress[data-progress-step="4"] { --progress-fill-width: calc(250 * var(--u)); --progress-paw-left: calc(251 * var(--u)); --progress-count-width: calc(28 * var(--u)); }
.question__progress[data-progress-step="5"] { --progress-fill-width: calc(313 * var(--u)); --progress-paw-left: calc(314 * var(--u)); --progress-count-width: calc(28 * var(--u)); }
.question__progress-count {
  position: absolute;
  top: var(--progress-count-top);
  right: 0;
  width: var(--progress-count-width);
  margin: 0;
  font-family: var(--font-mincho);
  line-height: 1;
  text-align: right;
  font-size: calc(14 * var(--u) * var(--rem-ratio));
  font-weight: 600;
  color: var(--color-primary);
}
.question__progress-count b { font-size: calc(18 * var(--u) * var(--rem-ratio)); font-weight: 600; }
.question__progress-slash,
.question__progress-total { font-weight: 600; }
.question__progress-bar {
  position: relative;
  width: var(--progress-track-width);
  height: 100%;
}
.question__progress-track,
.question__progress-bar-fill {
  position: absolute;
  left: 0;
  background-color: var(--color-primary);
}
.question__progress-track {
  top: var(--progress-track-top);
  width: var(--progress-track-width);
  height: var(--progress-track-height);
}
.question__progress-bar-fill {
  top: var(--progress-fill-top);
  width: var(--progress-fill-width);
  height: var(--progress-fill-height);
}
.question__progress-paw {
  position: absolute;
  left: calc(var(--progress-paw-left) + var(--progress-paw-offset-x));
  top: var(--progress-paw-offset-y);
  width: var(--progress-paw-width);
  height: var(--progress-paw-height);
  max-width: none;
  pointer-events: none;
}

/* Q番号＋区切り線＋設問文（SPは番号行の下に設問文 / PCは横並び） */
.question__head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: calc(16 * var(--u));
  row-gap: calc(12 * var(--u));
  width: 100%;
  margin-top: calc(24 * var(--u));
}
.question__number {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-mincho);
  font-size: calc(32 * var(--u) * var(--rem-ratio));
  font-weight: 500; /* Figma node 171:3918: Inter Regular・#553e3e */
  line-height: 1;
  color: var(--color-text);
}
.question__divider {
  grid-column: 2;
  grid-row: 1;
  height: calc(1 * var(--u));
  background-color: var(--color-text);
}
.question__text {
  grid-column: 1 / 3;
  grid-row: 2;
  margin: 0;
  font-size: calc(20 * var(--u) * var(--rem-ratio));
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text);
}
.question__text-sub {
  font-size: 0.6875em; /* Figma実測比率 22px/32px（PC）をそのままemで適用 */
}
@media (max-width: 768px) {
  .question__text-sub {
    font-size: 0.8em; /* Figma実測比率 22px/32px（PC）をそのままemで適用 */
  }
}

/* 選択肢ボタン（白地＋赤枠＋ピンクの内枠＋薄ピンク影 / 選択済み=ピンク塗り＋薄ピンク内枠・影なし）
   Figma node 171:3894: 各スロット94px = ボタン82 + 影4 + 間隔8。
   影はレイアウト空間を取らないため gap8 + li margin-bottom4（影ぶん）で再現する。
   選択済みでも余白は詰めない（詰めると選択時に下の要素が動いて見えるため、最終行のみ margin を 0 に戻す） */
.question__choices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  width: 100%;
  margin-top: calc(20 * var(--u)); /* Figma SP 331:27780: 設問文下端672→選択肢上端692 */
}
.question__choices li {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: calc(4 * var(--u));
}
.question__choices li:last-child { margin-bottom: 0; }
.choice-btn {
  /* 影は .btn と同じ変数に集約し、PCホバー押し込み量が実効影オフセットに追従する */
  --btn-shadow-offset: calc(4 * var(--u));
  --btn-shadow-color: var(--color-choice-shadow);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: calc(346 * var(--u));
  min-height: calc(82 * var(--u));
  padding: calc(12 * var(--u)) calc(21 * var(--u)); /* border1 + 21 = 外端からテキストまで22（テキスト幅302） */
  border: calc(1 * var(--u)) solid var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: calc(16 * var(--u) * var(--rem-ratio));
  font-weight: 600; /* Figma SP 331:27784ほか: Zen Old Mincho SemiBold */
  line-height: 1.4;
  text-align: left;
  box-shadow: var(--btn-shadow-offset) var(--btn-shadow-offset) 0 0 var(--btn-shadow-color);
}
/* ::beforeの起点はborder内側(padding box)のため、外端6px = border1px + inset5px */
.choice-btn::before {
  content: "";
  position: absolute;
  inset: calc(5 * var(--u));
  border: calc(1 * var(--u)) solid var(--color-pink);
  pointer-events: none;
}
/* 選択済みは外枠が背景と同色・影が消える（サイズはホバー時と揃えるため未選択時と同一に保つ） */
.choice-btn.is-selected {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  color: var(--color-white);
  box-shadow: none;
}
.choice-btn.is-selected::before { border-color: var(--color-choice-selected-inner); }

.question__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  width: 100%;
  margin-top: calc(40 * var(--u));
}

.question__actions.has-prev .btn--next,
.question__actions.has-prev .btn--prev {
  width: 100%;
}

.question__actions:not(.has-prev) .btn--next { margin-top: 0; }

/* 設問・選択肢内の専門用語の補足（黒文字固定・対象単語のみ太字）
   選択肢ボタン・結果カードと同じ「タン背景＋細枠」の囲みでサイトの世界観に馴染ませる */
.question__glossary {
  width: 100%;
  /* 「選択肢→次へボタン」の余白(40)より広くし、次へボタンが選択肢側のまとまりに見えるようにする */
  margin-top: calc(48 * var(--u));
  padding: calc(16 * var(--u));
  background-color: var(--color-tan);
  border: calc(1 * var(--u)) solid var(--color-primary);
}
.question__glossary-heading {
  margin: 0 0 calc(8 * var(--u));
  color: var(--color-primary);
  font-size: calc(13 * var(--u) * var(--rem-ratio));
  font-weight: 700;
  line-height: 1.4;
}
.question__glossary-item {
  margin: 0;
  color: #000;
  font-size: calc(12 * var(--u) * var(--rem-ratio));
  line-height: 1.6;
}
.question__glossary-item + .question__glossary-item { margin-top: calc(4 * var(--u)); }
.question__glossary-item b { font-weight: 700; }

/* ============================================
   診断結果画面
   ============================================ */
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0;
}

.result__card {
  position: relative;
  width: calc(350 * var(--u));
  max-width: 100%;
  height: calc(860 * var(--u));
  min-height: calc(860 * var(--u));
  margin-top: calc(100 * var(--u));             /* Figma SP: 前面紙 y334（ヘッダー下端 y234） */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  isolation: isolate;
  z-index: 0;
  /* 結果演出終了時に transform の有無が切り替わって画像が再ラスタライズされないよう、
     通常時もアニメーション最終フレームと同じ単位変換を維持する。 */
  transform: translateY(0) scale(1);
}
.result__card--hidden {
  height: calc(876 * var(--u));
  min-height: calc(876 * var(--u));
}

/* Figma SP bg 321:15085: 背面の色紙＋70%紙テクスチャ。
   前面紙(350×860)に対し、背面紙は中心を少し左上へずらして4deg回転。
   ::before=背面の斜め紙、::after=前面紙、カード内容=z-index:2。 */
.result__card::before,
.result__card::after {
  content: "";
  position: absolute;
  border-radius: 0;
  pointer-events: none;
}
.result__card::before {
  z-index: 0;
  width: calc(350 * var(--u));
  height: calc(866 * var(--u));
  left: calc(-14 * var(--u));
  top: calc(-5 * var(--u));
  background: linear-gradient(rgba(209, 164, 81, 0.30), rgba(209, 164, 81, 0.30)),
    url("../images/decor/paper-sp.jpg") center / cover no-repeat;
  box-shadow: 1px 1px 6px 8px rgba(137, 98, 41, 0.08);
  transform: rotate(4deg);
  transform-origin: center;
}
.result__card--hidden::before {
  width: calc(350.033 * var(--u));
  height: calc(884.298 * var(--u));
}
.result__card::after {
  z-index: 1;
  inset: 0;
  background: url("../images/decor/paper-sp.jpg") center / cover no-repeat;
}
.result__card > * {
  position: relative;
  z-index: 2;
}
.result__character,
.result__card-body {
  z-index: 2;
}

/* キャラクター画像（Design_SP 全13フレーム共通: x45 / y246 / 300×400）。
   SPでは元画像の縦横比を保って表示する。 */
.result__character {
  position: absolute;
  top: calc(-88 * var(--u));
  /* SPは親子でtransformが二重になると画像の拡大終了時に再ラスタライズされるため、
     カード幅350uと画像幅300uの差分を使って直接中央へ置く。 */
  left: calc(25 * var(--u));
  transform: none;
  width: calc(300 * var(--u));
  max-width: none;
  height: calc(400 * var(--u));
}
.result__character img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  transform-origin: bottom center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  /* motion-char-arrive の最終状態と揃え、クラス除去時の描画スナップを防ぐ。 */
  transform: translateY(0) scale(1);
}
.result__character-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(12 * var(--u) * var(--rem-ratio));
  color: var(--color-text);
  background-color: #eee7d8;
  border: calc(1 * var(--u)) dashed #c9bfae;
}
.result__character.is-missing img { display: none; }
.result__character.is-missing .result__character-fallback { display: flex; }

.result__card-body {
  display: contents;
}
.result__type-badge {
  position: absolute;
  z-index: 2;
  top: calc(324 * var(--u));
  left: calc(24 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  width: calc(302 * var(--u));
  max-width: none;
  height: calc(40 * var(--u));
  margin: 0;
  background-color: var(--color-white);
  border-radius: calc(60 * var(--u));
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: calc(16 * var(--u) * var(--rem-ratio));
  font-weight: 600;
  line-height: normal;
}
.result__job-title {
  position: absolute;
  z-index: 2;
  top: calc(376 * var(--u));
  left: calc(24 * var(--u));
  margin: 0;
  width: calc(302 * var(--u));
  font-family: var(--font-mincho);
  font-size: calc(24 * var(--u) * var(--rem-ratio));
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text);
}
.result__card--greater-daemon .result__job-title { line-height: 0; }
.result__card--greater-daemon .result__job-title-line { display: block; }
.result__card--greater-daemon .result__job-title-line { line-height: 1.6; }
.result__card--pomupora .result__job-title { color: var(--color-primary); }
.result__card--pomupora .result__job-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(23 * var(--u));
  left: calc(4 * var(--u));
  width: calc(294 * var(--u));
  height: calc(8 * var(--u));
  background: #f3d9a1;
}
.result__job-title-sub {
  font-size: calc(16 * var(--u) * var(--rem-ratio));
  font-weight: 600;
}
.result__job-title-sub--md { font-size: calc(18 * var(--u) * var(--rem-ratio)); }
.result__description {
  position: absolute;
  z-index: 2;
  top: calc(454 * var(--u));
  left: calc(24 * var(--u));
  margin: 0;
  width: calc(302 * var(--u));
  max-width: none;
  font-family: var(--font-mincho);
  font-size: calc(16 * var(--u) * var(--rem-ratio));
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--color-text);
}
.result__card--hidden .result__description { top: calc(423 * var(--u)); }
.result__description-emphasis {
  position: relative;
  display: inline-block;
  font-size: calc(18 * var(--u) * var(--rem-ratio));
  font-weight: 600;
  color: var(--color-primary);
  isolation: isolate;
}
.result__description-emphasis::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: calc(129 * var(--u));
  height: calc(6 * var(--u));
  border-radius: calc(1 * var(--u));
  background: #f3d9a1;
  transform: translateX(-50%);
}
.result__description-sp .result__description-emphasis::before {
  left: calc(50% - 0.5 * var(--u));
  bottom: calc(1.6875 * var(--u));
}

.result__cta-text {
  position: absolute;
  z-index: 2;
  top: calc(654 * var(--u));
  left: calc(24 * var(--u));
  width: calc(302 * var(--u));
  max-width: none;
  margin: 0;
  font-family: var(--font-mincho);
  font-size: calc(16 * var(--u) * var(--rem-ratio));
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--color-text);
}
.result__card--long .result__cta-text { top: calc(676 * var(--u)); }
.result__card--hidden .result__cta-text { top: calc(692 * var(--u)); }
.result__cta-text-job {
  font-size: calc(18 * var(--u) * var(--rem-ratio));
  font-weight: 700;
}
.result__cta-text-job .result__job-title-sub {
  font-size: calc(16 * var(--u) * var(--rem-ratio));
  font-weight: 700;
}
.result__cta {
  --btn-shadow-offset: calc(3 * var(--u));
  position: absolute;
  z-index: 2;
  top: calc(764 * var(--u));
  left: calc(35 * var(--u));
  width: calc(280 * var(--u));
  max-width: none;
  height: calc(56 * var(--u));
  margin: 0;
  font-family: var(--font-mincho);
  font-size: calc(18 * var(--u) * var(--rem-ratio));
  font-weight: 600;
}
.result__card--hidden .result__cta { top: calc(780 * var(--u)); }

.result__sub-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  width: 100%;
  margin-top: calc(56 * var(--u));
  margin-bottom: 0;
}

/* ---- 結果カード新デザインの装飾 ----
   SP背景は Figma node 321:15085、PC背景は Figma node 299:6779 を基準に実装。
   .result__card-main は display:contents でSP時にレイアウト上「透明」にし、
   従来どおり .result__character(絶対配置) と .result__card-body を
   .result__card の直接フレックス子として振る舞わせる。 */
.result__side-line {
  display: block;
  position: absolute;
  z-index: 2;
  top: calc(56 * var(--u));
  bottom: calc(56 * var(--u));
  width: calc(1 * var(--u));
  background: #978773;
  pointer-events: none;
}
.result__side-line--l { left: calc(10 * var(--u)); }
.result__side-line--r { right: calc(10 * var(--u)); }
.result__divider {
  display: block;
  position: absolute;
  z-index: 2;
  top: calc(622 * var(--u));
  left: calc(24 * var(--u));
  width: calc(302 * var(--u));
  height: calc(12 * var(--u));
  background: url("../images/decor/divider-sp.svg") center / contain no-repeat;
}
.result__card--long .result__divider { top: calc(644 * var(--u)); }
.result__card--hidden .result__divider { top: calc(660 * var(--u)); }
.result__type-flourish {
  display: block;
  flex: 0 0 auto;
  width: calc(34 * var(--u));
  height: calc(10 * var(--u));
  background: url("../images/decor/badge-flourish-sp.svg") center / contain no-repeat;
}
.result__type-flourish--l { transform: scaleX(-1); }
.result__corner {
  display: block;
  position: absolute;
  z-index: 2;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  background: url("../images/decor/corner.svg") center / contain no-repeat;
  pointer-events: none;
}
.result__corner--tl { top: calc(8 * var(--u)); left: calc(8 * var(--u)); transform: rotate(180deg); }
.result__corner--tr { top: calc(8 * var(--u)); right: calc(8 * var(--u)); transform: rotate(180deg) scaleX(-1); }
.result__corner--bl { bottom: calc(8 * var(--u)); left: calc(8 * var(--u)); transform: scaleX(-1); }
.result__corner--br { bottom: calc(8 * var(--u)); right: calc(8 * var(--u)); }
.result__card-main { display: contents; }
.result__type-badge-text { display: inline; }
.result__job-title-pc,
.result__description-pc,
.result__cta-text-pc { display: none; }

/* カード下・SHAREボタン上の単独バナー（新デザインで追加。SPは中央寄せのプレースホルダー） */
.result__banner-single {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: calc(40 * var(--u));
}

/* ============================================
   PC レイアウト（768px以上）
   --u を 1728px フレーム基準へ切り替え、以降の寸法もすべて calc(N * var(--u))。
   ============================================ */
@media (min-width: 768px) {
  .app { --u: min(1px, 100vw / 1728); }

  /* コンテンツ幅コンテナ（内容1200を中央寄せ。1728フレーム・左右264marginに一致） */
  .container { width: calc(1200 * var(--u)); max-width: 100%; padding-inline: 0; }

  /* ---- ヘッダー（PC: 左ロゴ ＋ 右適職診断キャッチ / Figma 290:238, 1200×149・y32） ---- */
  .site-header__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: calc(32 * var(--u));   /* Figma PC: header y32 */
    padding-bottom: 0;
    gap: calc(96 * var(--u));           /* ロゴ右端864 → キャッチ左端960 */
  }

  /* ロゴ（PC: 左寄せ・幅600。アスペクトで高さ≒149＝行高いっぱい） */
  .site-header__logo {
    height: auto;
    display: block;
    flex: 0 0 auto;
  }
  .site-header__logo img { width: calc(600 * var(--u)); height: auto; }

  /* 区切り線はSP専用（PCは非表示） */
  .site-header__divider { display: none; }

  /* ヘッダー背景の肉球あしらいはPCのみ表示（Figma Group2/Group4） */
  .site-header__decor { display: block; }

  /* 適職診断キャッチ（PC: 504×120） */
  .site-header__catch {
    width: calc(504 * var(--u));
    min-height: calc(120 * var(--u));
    margin-top: 0;
    flex: 0 0 auto;
  }
  .site-header__flourish {
    width: calc(50 * var(--u));
    height: calc(120 * var(--u));
  }
  .site-header__catch-body {
    width: calc(396 * var(--u));        /* Figma PC: lead幅396 */
    padding-top: calc(9 * var(--u));    /* Figma PC: 見出しtop55 − ブロックtop46 */
  }
  .site-header__title { font-size: calc(32 * var(--u) * var(--rem-ratio)); }
  .site-header__title-bar {
    width: calc(328 * var(--u));        /* Figma PC: バー幅328 */
    height: calc(10 * var(--u));
    bottom: calc(-5 * var(--u));
  }
  .site-header__lead {
    margin-top: calc(15 * var(--u));    /* Figma PC: 見出し下端87 → リード上端102 */
    font-size: calc(18 * var(--u) * var(--rem-ratio));
  }
  .site-header__lead-br { display: inline; } /* PC: 明示改行で2行 */

  /* ---- フッター ---- */
  .site-footer { height: calc(32 * var(--u)); }
  .site-footer__copyright { font-size: calc(14 * var(--u) * var(--rem-ratio)); }

  /* ---- 共通パーツ ---- */
  /* コラボ診断バッジ PC(node 283:1678): 文字24px・飾り80×20 */
  .top__collab { font-size: calc(24 * var(--u) * var(--rem-ratio)); gap: calc(8 * var(--u)); line-height: 1.6; /* SPのみ1.4。PCは従来のbody継承値を維持 */ }
  .top__collab-flourish { width: calc(80 * var(--u)); height: calc(20 * var(--u)); }
  /* このルールはSP側バリアントの変数上書きより後方のため、PCの .btn--next の影も
     ここで 6px・ピンクに戻る（変数化前の box-shadow カスケードと同じ実効値） */
  .btn {
    --btn-shadow-offset: calc(6 * var(--u));
    --btn-shadow-color: var(--color-pink);
  }
  .btn::before { inset: calc(6 * var(--u)); border-width: calc(2 * var(--u)); }
  /* CTAの影は #eac2c5（上の .btn 変数上書きより後方に置いて勝たせる）。幅は538(node 283:1682) */
  .btn--cta  { --btn-shadow-color: var(--color-btn-shadow-new); max-width: calc(538 * var(--u)); height: calc(80 * var(--u)); font-size: calc(24 * var(--u) * var(--rem-ratio)); }
  .btn--next { max-width: calc(200 * var(--u)); height: calc(59 * var(--u)); font-size: calc(20 * var(--u) * var(--rem-ratio)); }
  .btn--prev {
    --btn-shadow-offset: calc(4 * var(--u));
    --btn-shadow-color: rgba(167, 10, 57, 0.2);
    max-width: calc(200 * var(--u));
    height: calc(59 * var(--u));
    font-size: calc(20 * var(--u) * var(--rem-ratio));
  }
  .btn--share, .btn--retry {
    --btn-shadow-offset: calc(4 * var(--u));
    --btn-shadow-color: var(--color-pink);
    max-width: calc(240 * var(--u));
    height: calc(59 * var(--u));
    font-size: calc(20 * var(--u) * var(--rem-ratio));
  }
  .btn--share::before, .btn--retry::before { border-width: calc(1 * var(--u)); }
  .btn--share {
    --btn-shadow-color: rgba(85, 62, 62, 0.25);
    gap: calc(12 * var(--u));
    /* PC(77:1318)従来仕様の維持: 白背景（SP側の#fffcf2化を漏らさない） */
    background-color: var(--color-white);
    border: calc(1 * var(--u)) solid var(--color-text);
    font-family: var(--font-mincho);
    font-weight: 400;
  }
  /* 外枠1px分を差し引く（Figma実測: 外端から内枠まで6px = border1px + inset5px） */
  .btn--share::before { inset: calc(5 * var(--u)); }
  .btn--share__icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

  /* ---- links ---- */
  /* Figma背景ベクター(node 170:2788)のSVGパス "M0 0 L864 80 L1728 0 V383 H0 Z"
     ＝上辺は両端0px・中央80px下がりの直線シェブロン。clip-pathで厳密再現する。
     深さ・上余白は画面幅に比例スケール（--u、.app から 1728基準を継承）。
     フレーム高さ383 = padding-top130 + テキスト32 + gap40 + バナー125 + padding-bottom56。 */
  .links {
    margin-top: calc(88 * var(--u));   /* Figma: links上端1634 − cats下端1546 = 88（ヒーローとの間） */
    padding: calc(130 * var(--u)) 0 calc(56 * var(--u));
    clip-path: polygon(0 0, 50% calc(80 * var(--u)), 100% 0, 100% 100%, 0 100%);
  }
  /* Figma: 公式リンク下端(1821)→バナー上端(1861)=40px */
  .links__inner { gap: calc(40 * var(--u)); }
  /* PCは両脇あしらいとのFlex配置・本文1行へ戻す */
  .links__official {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    gap: calc(16 * var(--u));
  }
  .links__official-ornament { position: static; width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
  .links__official-text {
    position: static;
    width: auto;
    height: auto;
    font-size: calc(32 * var(--u) * var(--rem-ratio));
    white-space: nowrap;
  }
  .links__official-br { display: none; }
  .links__banners { flex-direction: row; justify-content: center; gap: calc(16 * var(--u)); }
  .banner { max-width: calc(584 * var(--u)); height: calc(125 * var(--u)); font-size: calc(24 * var(--u) * var(--rem-ratio)); }
  .banner--has-image { height: auto;}
  .banner--has-image img { max-width: calc(584 * var(--u)); max-height: calc(125 * 1.25 * var(--u)); }

  /* links下角の唐草飾り（PC: 100×100。Figma 283:1647(BL 左121/下19)・283:1626(BR 右20/下20)） */
  .links__corner { width: calc(100 * var(--u)); height: calc(100 * var(--u)); }
  .links__corner--bl { left: calc(20 * var(--u)); bottom: calc(19 * var(--u)); }
  .links__corner--br { right: calc(20 * var(--u)); bottom: calc(20 * var(--u)); }

  /* ---- TOP ---- */
  /* 背景装飾: SP用クラスタを隠しPC用クラスタを表示 */
  .screen__decor-set--sp { display: none; }
  .screen__decor-set--pc { display: contents; }
  .top__kv { margin-top: calc(24 * var(--u)); }   /* Figma: KV上端205 − ヘッダー下端181 = 24 */
  .top__hero {
    display: grid;
    grid-template-columns: 608fr 560fr;
    grid-template-rows: auto auto;
    column-gap: calc(32 * var(--u));
    row-gap: calc(24 * var(--u));
    align-items: center;
    margin-top: calc(48 * var(--u));   /* Figma: cats上端1100 − KV下端1052 = 48 */
  }
  .top__hero-text {
    grid-column: 2;
    grid-row: 1;
    gap: calc(20 * var(--u));
  }
  .top__cats {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: calc(608 * var(--u));
    margin-top: 0; /* SPの縦リズム用margin(43)をリセット（PCはgridのgapで間隔を取る） */
    justify-self: center;
    align-self: center;
  }
  .top__cta { grid-column: 2; grid-row: 2; margin-top: 0; justify-self: center; align-self: start; }
  /* PC(node 283:1685): 46px・両脇あしらいとの間隔14px・あしらい28×28。SPの縦リズム用marginはリセット */
  .top__title { margin-top: 0; font-size: calc(46 * var(--u) * var(--rem-ratio)); gap: calc(14 * var(--u)); }
  .top__title-ornament { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
  /* PC(node 283:1689)は中央揃え・24px（SPのみ左揃え・nowrap） */
  .top__lead { margin-top: 0; font-size: calc(24 * var(--u) * var(--rem-ratio)); text-align: center; }
  /* キャンペーン詳細バナー（.result__banner-single と同じ間隔規則） */
  .top__banner-single { margin-top: calc(78 * var(--u)); }

  /* ---- 設問 ---- */
  .question { padding-bottom: calc(96 * var(--u)); }
  .question__scene { max-width: calc(1200 * var(--u)); aspect-ratio: 1200 / 675; margin-top: calc(28 * var(--u)); }
  .question__progress {
    --progress-frame-height: calc(32.51414108276367 * var(--u));
    --progress-track-width: calc(1150 * var(--u));
    --progress-fill-top: calc(22.5 * var(--u));
    --progress-fill-height: calc(5 * var(--u));
    --progress-count-top: calc(7.000095367431641 * var(--u));
    --progress-count-width: calc(32 * var(--u));
    --progress-fill-width: calc(227 * var(--u));
    --progress-paw-left: calc(229.3297576904297 * var(--u));
    --progress-paw-offset-x: calc(-21 * var(--u));
    --progress-paw-offset-y: calc(2.2 * var(--u));
    --progress-paw-width: calc(32.42583850264964 * var(--u));
    --progress-paw-height: calc(32.51413973460512 * var(--u));
    margin-top: calc(16 * var(--u));
  }
  .question__progress[data-progress-step="2"] { --progress-fill-width: calc(456 * var(--u)); --progress-paw-left: calc(459 * var(--u)); --progress-count-width: calc(33 * var(--u)); }
  .question__progress[data-progress-step="3"] { --progress-fill-width: calc(684 * var(--u)); --progress-paw-left: calc(689 * var(--u)); --progress-count-width: calc(33 * var(--u)); }
  .question__progress[data-progress-step="4"] { --progress-fill-width: calc(916 * var(--u)); --progress-paw-left: calc(919 * var(--u)); --progress-count-width: calc(34 * var(--u)); }
  .question__progress[data-progress-step="5"] { --progress-fill-width: calc(1146 * var(--u)); --progress-paw-left: calc(1150 * var(--u)); --progress-count-width: calc(33 * var(--u)); }
  .question__progress-count { font-size: calc(16 * var(--u) * var(--rem-ratio)); font-weight: 600; text-align: center; }
  .question__progress-count b { font-size: calc(24 * var(--u) * var(--rem-ratio)); font-weight: 400; }
  .question__progress-total { font-size: calc(16 * var(--u) * var(--rem-ratio)); }
  .question__head {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto;
    column-gap: calc(24 * var(--u));
    margin-top: calc(56 * var(--u));
  }
  .question__number { grid-row: 1; align-self: center; font-size: calc(48 * var(--u) * var(--rem-ratio)); color: var(--color-text); }
  .question__divider { grid-column: 2; grid-row: 1; width: calc(1 * var(--u)); height: auto; align-self: stretch; }
  .question__text { grid-column: 3; grid-row: 1; align-self: center; font-size: calc(32 * var(--u) * var(--rem-ratio)); line-height: 1.4; }
  .question__choices { gap: calc(18 * var(--u)); margin-top: calc(56 * var(--u)); }
  /* PC(Figma 290:107): 未選択は1194px本体+6px影で1200pxに収める。 */
  .question__choices li {
    justify-content: flex-start;
    margin-bottom: calc(6 * var(--u));
  }
  .choice-btn {
    --btn-shadow-offset: calc(6 * var(--u));
    max-width: calc(1194 * var(--u));
    min-height: calc(80 * var(--u));
    padding: calc(12 * var(--u)) calc(24 * var(--u));
    font-size: calc(24 * var(--u) * var(--rem-ratio));
    justify-content: center;
    text-align: center;
    border: calc(2 * var(--u)) solid var(--color-primary);
  }
  /* ::beforeの起点は親のborder内側(padding box)のため、外枠2px分を差し引いて4pxにする
     （outer枠の外端からinner枠までの実測6px = border2px + inset4px） */
  .choice-btn::before { inset: calc(4 * var(--u)); border-width: calc(2 * var(--u)); }
  /* 選択済みはドロップシャドウなし（サイズはホバー時と揃えるため未選択時と同一に保つ） */
  .choice-btn.is-selected {
    border-color: var(--color-pink);
    box-shadow: none;
  }
  .question__actions {
    margin-top: calc(56 * var(--u));
  }
  .question__actions.has-prev {
    flex-direction: row;
    justify-content: center;
    gap: calc(40 * var(--u));
  }

  /* 用語解説（PC）: SPと同じ数値のままだと --u が1728フレーム基準になり
     768px付近の一般的なウィンドウ幅で極端に小さく見えるため、他要素同様PC専用の数値に上げる */
  .question__glossary {
    /* 「選択肢→次へボタン」の余白(56)より広くし、次へボタンが選択肢側のまとまりに見えるようにする */
    margin-top: calc(64 * var(--u));
    padding: calc(24 * var(--u)) calc(32 * var(--u));
  }
  .question__glossary-heading {
    font-size: calc(18 * var(--u) * var(--rem-ratio));
    margin-bottom: calc(12 * var(--u));
  }
  .question__glossary-item {
    font-size: calc(16 * var(--u) * var(--rem-ratio));
  }
  .question__glossary-item + .question__glossary-item { margin-top: calc(8 * var(--u)); }

  /* ============================================================
     ---- 結果カード新デザイン（Figma node 292:2612 シロタエ）----
     古紙テクスチャの1枚カード（背後に傾いた2枚目が覗く）。
     左に472×630のキャラ画像、右にタイプバッジ＋職種名＋説明。
     カード内に区切り線→CTA訴求文→CTAボタンまで内包。
     本文は Zen Old Mincho（明朝）。四隅飾り・縦罫線・区切り線・
     バッジ両脇飾りは images/decor の書き出しアセットを参照。
     座標は front紙(264,303,1163×830)を基準に Figma実測px→calc(N*u)。
     ============================================================ */
  .result__card {
    position: relative;
    width: calc(1163 * var(--u));
    max-width: none;
    align-self: flex-start;             /* 古紙はコンテンツ左端(x264)に左寄せ。右37pxは背後紙が覗く */
    margin-top: calc(122 * var(--u));   /* ヘッダー下端→古紙上端（Figma: 前面紙y303−ヘッダー下y181） */
    height: auto;
    min-height: calc(830 * var(--u));    /* Figma PC bg: 前面紙 1163×830 */
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background-color: transparent;
    border-radius: 0;
    overflow: visible;                  /* 画像の上オーバーラップと背後紙の覗きを見せる */
  }
  /* 背後に重なる2枚目の紙（Figma 299:6780-6782）。
     背面紙の回転後bboxは front比で右37px・上40px、実体は1105.228×827.557を-176.13deg回転。 */
  .result__card::before,
  .result__card::after {
    inset: auto;
    width: calc(1105.228 * var(--u));
    height: calc(827.557 * var(--u));
    left: calc(65.886 * var(--u));
    top: calc(-3.779 * var(--u));
    transform: rotate(-176.13deg);
    transform-origin: center;
    border-radius: 0;
  }
  .result__card.result__card--hidden::before {
    width: calc(1105.228 * var(--u));
    height: calc(827.557 * var(--u));
  }
  .result__card::before {
    background: linear-gradient(rgba(209, 164, 81, 0.30), rgba(209, 164, 81, 0.30)),
      url("../images/decor/paper.jpg") center / cover no-repeat;
    box-shadow: 1px 3px 8px 12px rgba(137, 98, 41, 0.08);
  }
  .result__card::after {
    inset: 0;
    width: auto;
    height: auto;
    background: url("../images/decor/paper.jpg") center / cover no-repeat;
    box-shadow: none;
    transform: none;
  }

  /* 四隅の唐草飾り（90×90）。自然向き=右下(BR, node292:2864)を書き出し、
     他3隅はミラー変換で対称配置。実測どおり各コーナーからインセット20px。 */
  .result__corner {
    width: calc(90 * var(--u));
    height: calc(90 * var(--u));
  }
  .result__corner--tl { top: calc(20 * var(--u)); left: calc(20 * var(--u)); transform: rotate(180deg); }
  .result__corner--tr { top: calc(20 * var(--u)); right: calc(20 * var(--u)); transform: rotate(180deg) scaleX(-1); }
  .result__corner--bl { bottom: calc(20 * var(--u)); left: calc(20 * var(--u)); transform: scaleX(-1); }
  .result__corner--br { bottom: calc(20 * var(--u)); right: calc(20 * var(--u)); }

  /* 左右の縦罫線（Figma Line11/12: 端から30px・上端126px・高さ578px） */
  .result__side-line {
    display: block;
    position: absolute;
    z-index: 2;
    top: calc(126 * var(--u));
    width: calc(2 * var(--u));
    height: calc(578 * var(--u));
    background: url("../images/decor/side-line.svg") center / 100% 100% no-repeat;
    pointer-events: none;
  }
  .result__side-line--l { left: calc(30 * var(--u)); }
  .result__side-line--r { right: calc(30 * var(--u)); }

  /* 2カラム本体: 画像は絶対配置で左に、本文列は右に margin-left で寄せる。
     dividerもこの中に置き、画像外枠の下端をdivider上端の32px上へ固定する。 */
  .result__card-main {
    --result-divider-height: calc(20 * var(--u));
    --result-character-divider-gap: calc(32 * var(--u));
    display: block;
    position: relative;
  }
  .result__character {
    left: calc(76 * var(--u));
    top: auto;
    bottom: calc(var(--result-divider-height) + var(--result-character-divider-gap));
    transform: none;
    width: calc(472 * var(--u));
    height: calc(630 * var(--u));
    max-width: none;
  }
  /* Design_PCの13フレームは外枠幅472pxを共通化。キャラ画像は余白込みで全キャラ
     共通サイズ書き出し済みのため、widthのみ固定しheightはautoで縦横比を保つ
     （個別ルールでのクロップ/ズームはしない。指定はSPと同じ base の
     .result__character img { width:100%; height:auto } がPCにも継承されて効く）。 */
  .result__card-body {
    display: flex;
    flex-direction: column;
    margin-left: calc(572 * var(--u));  /* Figma PC: 本文列 x836 − front紙 x264 */
    width: calc(515 * var(--u));
    height: calc(488 * var(--u));
    min-height: calc(488 * var(--u));   /* front紙上端(303)→最長本文下端(791) */
    padding-top: calc(112 * var(--u));  /* バッジ上端: front紙上端から112px（frame415-303） */
    align-items: stretch;
    gap: 0;
    font-family: var(--font-mincho);
  }
  .result__card-body > * {
    flex-shrink: 0;
  }
  /* タイプバッジ（白ピル＋両脇の唐草飾り80×20＋明朝24px SemiBold） */
  .result__type-badge {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(16 * var(--u));
    width: 100%;
    max-width: none;
    height: calc(48 * var(--u));
    background-color: var(--color-white);
    border-radius: calc(60 * var(--u));
  }
  .result__type-flourish {
    display: block;
    flex: 0 0 auto;
    width: calc(80 * var(--u));
    height: calc(20 * var(--u));
    background: url("../images/decor/badge-flourish.svg") center / contain no-repeat;
  }
  .result__type-flourish--l { transform: scaleX(-1); }
  .result__type-badge-text {
    font-family: var(--font-mincho);
    font-size: calc(24 * var(--u) * var(--rem-ratio));
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
  }
  .result__job-title {
    position: static;
    margin-top: calc(24 * var(--u));    /* バッジ下(463)→職種名(487) */
    width: 100%;
    font-family: var(--font-mincho);
    font-size: calc(40 * var(--u) * var(--rem-ratio));
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
  }
  .result__card .result__job-title { line-height: 1.3; }
  .result__job-title-pc { white-space: nowrap; }
  .result__job-title-pc .result__job-title-sub {
    font-size: calc(24 * var(--u) * var(--rem-ratio));
  }
  .result__card .result__description {
    position: static;
    margin-top: calc(32 * var(--u));    /* 職種名下(591)→説明(623) */
    width: 100%;
    max-width: none;
    font-family: var(--font-mincho);
    font-size: calc(20 * var(--u) * var(--rem-ratio));
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
  }
  /* Figma 299:7176: 40px行と24px行を別々の1.6行高で積み、本文位置は維持する。 */
  .result__card--greater-daemon .result__job-title {
    margin-top: calc(21 * var(--u));
    line-height: 0;
  }
  .result__card--greater-daemon .result__job-title-pc,
  .result__card--greater-daemon .result__job-title-line {
    display: block;
  }
  .result__card--greater-daemon .result__job-title-line {
    line-height: 1.6;
  }
  .result__card--greater-daemon .result__description {
    margin-top: calc(25.6 * var(--u));
  }
  /* Figma 299:7577: 隠し結果のみ見出し・本文強調を赤＋金下線にする。 */
  .result__card--pomupora .result__job-title {
    position: relative;
    top: auto;
    left: auto;
    margin-top: calc(32 * var(--u));
    color: var(--color-primary);
    isolation: isolate;
  }
  .result__card--pomupora .result__job-title::before {
    display: block;
    top: calc(40 * var(--u));
    left: 50%;
    width: calc(492 * var(--u));
    height: calc(12 * var(--u));
    border-radius: calc(1 * var(--u));
    transform: translateX(-50%);
  }
  .result__card--pomupora .result__description {
    margin-top: calc(32 * var(--u));
  }
  .result__description-pc .result__description-emphasis {
    font-size: calc(24 * var(--u) * var(--rem-ratio));
  }
  .result__description-pc .result__description-emphasis::before {
    width: calc(175 * var(--u));
    height: calc(8 * var(--u));
  }

  /* 区切り線（菱形キャップ付き。front紙内 1019幅・左右72px余白で中央） */
  .result__divider {
    display: block;
    width: calc(1019 * var(--u));
    height: var(--result-divider-height);
    margin: calc(76 * var(--u)) auto 0;  /* 説明下(791)→区切り線(867) */
    background: url("../images/decor/divider.svg") center / contain no-repeat;
  }
  .result__card .result__divider {
    position: relative;
    top: auto;
    left: auto;
  }

  /* CTA訴求文（明朝。職種名部分だけ24px Bold、残り20px SemiBold） */
  .result__cta-text {
    margin: calc(32 * var(--u)) auto 0;  /* 区切り線下(887)→訴求文(919) */
    max-width: calc(945 * var(--u));
    font-family: var(--font-mincho);
    font-size: calc(20 * var(--u) * var(--rem-ratio));
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
  }
  .result__card .result__cta-text {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }
  .result__cta-text-job {
    font-family: var(--font-mincho);
    font-size: calc(24 * var(--u) * var(--rem-ratio));
    font-weight: 700;
  }
  .result__cta-br { display: none; }    /* PCは1行表示（改行タグ無効） */

  /* CTAボタン（538×80・影#eac2c5・金枠2px・明朝24px。カード内・下76pxで紙下端） */
  .result__card .result__cta {
    --btn-shadow-color: var(--color-btn-shadow-new);
    --btn-shadow-offset: calc(4 * var(--u));
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: calc(538 * var(--u));
    height: calc(80 * var(--u));
    margin: calc(24 * var(--u)) auto calc(76 * var(--u));  /* 訴求文下(953)→ボタン(977) / ボタン下(1057)→紙下(1133) */
    font-family: var(--font-mincho);
    font-size: calc(24 * var(--u) * var(--rem-ratio));
    font-weight: 600;
  }
  .result__job-title-sp,
  .result__description-sp,
  .result__cta-text-sp { display: none; }
  .result__job-title-pc,
  .result__description-pc,
  .result__cta-text-pc { display: inline; }

  /* 単独バナー（Figma node292:2789: 584×125・カード下78px） */
  .result__banner-single { margin-top: calc(78 * var(--u)); }
  .result__banner-single .banner { max-width: calc(584 * var(--u)); height: calc(125 * var(--u)); }
  .result__banner-single .banner--has-image { height: auto; }
  .result__banner-single .banner--has-image img { max-width: calc(584 * var(--u)); max-height: calc(125 * 1.25 * var(--u)); }

  /* SHARE / もう一度診断する（240×59・横並び・gap40・単独バナー下72px）
     もう一度診断する: 影#eac2c5・Noto Medium 20px（新デザイン node292:2778） */
  .result__sub-actions {
    flex-direction: row;
    justify-content: center;
    gap: calc(40 * var(--u));
    margin-top: calc(72 * var(--u));
  }
  .result__sub-actions .btn--retry {
    --btn-shadow-color: var(--color-btn-shadow-new);
    font-size: calc(20 * var(--u) * var(--rem-ratio));
  }
}

/* ============================================
   ボタンのホバー押し込み（PCレイアウト×ホバー可能デバイス限定）
   - レトロ風ボタンを影の方向へ実効影オフセットぶん沈み込ませ、影を消す
     （押し込み量は --btn-shadow-offset 経由で各バリアントの影に自動追従）
   - (hover: hover) 併用で768px以上のタッチ端末のスティッキーホバーを防ぐ
   - 選択肢のホバーは未選択時のみ。選択済みは PC の .is-selected 側で
     同値の押し込みを維持するため、ホバー→選択で位置がズレない
   ============================================ */
@media (min-width: 768px) and (hover: hover) {
  .btn,
  .choice-btn {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  }
  .btn:not(:disabled):hover,
  .choice-btn:not(.is-selected):hover {
    transform: translate(var(--btn-shadow-offset), var(--btn-shadow-offset));
    box-shadow: 0 0 0 0 var(--btn-shadow-color); /* none だと補間されないため全ゼロ影にする */
  }
  /* 選択済みもホバーと同じ押し込み位置を維持し、ホバー→選択で位置がズレないようにする */
  .choice-btn.is-selected {
    transform: translate(var(--btn-shadow-offset), var(--btn-shadow-offset));
  }

  /* バナー（画像設定済み）のホバー: 透明度を下げてクリック可能であることを示す */
  .banner--has-image:hover {
    opacity: 0.7;
  }
}

/* ============================================
   アニメーション演出（js/motion.js と連動・「猫と竜」特化）
   - 各クラス（.opening-preloader / .is-enter-* / .is-revealing / .is-enter）は
     motion.js が CONFIG.motion と prefers-reduced-motion を判定した上で付与・生成する
   - 足跡・肉球スタンプの Canvas 描画は motion.js 側（色もJS内定数）
   - 結果の木漏れ日は結果カード内の有限CSSアニメーションとして描画する
   - 寸法は既存方針どおり calc(N * var(--u))。ただし body 直下に挿入される
     オーバーレイ／演出canvasは --u（.app定義）を継承しないため px 指定
     （Canvas側は JS で同値の単位を算出して使う）
   ============================================ */

/* ---------- 共通keyframes ---------- */
@keyframes motion-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes motion-fade-rise {
  from { opacity: 0; transform: translateY(calc(14 * var(--u))); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ---------- オープニング「全画面プリローダー」（motion.js が body 直下に生成・除去。初回表示のみ） ----------
   TOPページ本体はオーバーレイの背後で最初から通常表示のまま。
   足跡ぐるぐるループ（約1秒）の後、オーバーレイをふわっとフェードアウトさせて見せる */
.opening-preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: var(--color-bg);
  opacity: 1;
  transition: opacity 0.55s ease-out;
}
.opening-preloader.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* ---------- 設問遷移スライドイン（進む=右から / 戻る=左から） ----------
   オーバーシュート系イージングで猫らしい「とてん」とした着地にする */
@keyframes motion-slide-in-right {
  from { opacity: 0; transform: translateX(calc(32 * var(--u))); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes motion-slide-in-left {
  from { opacity: 0; transform: translateX(calc(-32 * var(--u))); }
  to   { opacity: 1; transform: translateX(0); }
}
.question.is-enter-forward { animation: motion-slide-in-right 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.question.is-enter-back    { animation: motion-slide-in-left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* 進捗バーの肉球「ぽん」着地: 設問が進んだ/戻ったとき（.is-enter-* 付与時）だけ発火し、
   選択肢クリックの再描画（遷移クラスなし）では発火しない */
@keyframes motion-progress-paw-land {
  from { transform: scale(1.4) rotate(-8deg); }
  to   { transform: scale(1) rotate(0deg); }
}
.question.is-enter-forward .question__progress-paw,
.question.is-enter-back .question__progress-paw {
  animation: motion-progress-paw-land 0.3s ease-out 0.25s both;
}
/* 選択肢は上から順に微スタッガーで続けて登場 */
.question.is-enter-forward .question__choice-item,
.question.is-enter-back .question__choice-item { animation: motion-fade-rise 0.4s ease-out both; }
.question.is-enter-forward .question__choice-item:nth-child(1),
.question.is-enter-back .question__choice-item:nth-child(1) { animation-delay: 0.1s; }
.question.is-enter-forward .question__choice-item:nth-child(2),
.question.is-enter-back .question__choice-item:nth-child(2) { animation-delay: 0.14s; }
.question.is-enter-forward .question__choice-item:nth-child(3),
.question.is-enter-back .question__choice-item:nth-child(3) { animation-delay: 0.18s; }
.question.is-enter-forward .question__choice-item:nth-child(4),
.question.is-enter-back .question__choice-item:nth-child(4) { animation-delay: 0.22s; }
.question.is-enter-forward .question__choice-item:nth-child(5),
.question.is-enter-back .question__choice-item:nth-child(5) { animation-delay: 0.26s; }

/* ---------- 「診断中…」オーバーレイ（motion.js が body 直下に生成・除去） ---------- */
.diagnosing-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  opacity: 1;
  transition: opacity 0.4s ease;
}
.diagnosing-overlay.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.diagnosing-overlay__text {
  margin: 0;
  display: flex;
  align-items: center;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@keyframes motion-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-4px); }
}
.diagnosing-overlay__dots { display: inline-flex; margin-left: 6px; }
.diagnosing-overlay__dots span {
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border-radius: 50%;
  background-color: var(--color-primary);
  animation: motion-dot-pulse 1.2s ease-in-out infinite;
}
.diagnosing-overlay__dots span:nth-child(2) { animation-delay: 0.2s; }
.diagnosing-overlay__dots span:nth-child(3) { animation-delay: 0.4s; }

/* ---------- 結果発表「森の木漏れ日」 ----------
   全画面の紙吹雪は使わず、古紙が静かに着地したあと、キャラの背後にだけ
   淡い光筋と14個の光斑を短く見せる。光はカード内容より下のレイヤーに置き、
   本文・CTAの可読性とクリック操作を妨げない。 */
.result__forest-light {
  position: absolute !important;
  z-index: 2;
  top: calc(-96 * var(--u));
  left: calc(-12 * var(--u));
  width: calc(374 * var(--u));
  height: calc(540 * var(--u));
  overflow: hidden;
  pointer-events: none;
}
.result__forest-beam,
.result__forest-mote {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.result__forest-beam {
  z-index: 0;
  top: -8%;
  left: 17%;
  width: 68%;
  height: 96%;
  background: linear-gradient(116deg,
    transparent 19%,
    rgba(255, 250, 220, 0.12) 31%,
    rgba(255, 236, 155, 0.68) 48%,
    rgba(241, 176, 36, 0.18) 60%,
    transparent 74%);
  filter: blur(calc(8 * var(--u)));
  transform-origin: 50% 0;
}
.result__forest-mote {
  z-index: 1;
  width: var(--mote-size);
  height: var(--mote-size);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 241, 1) 0%,
    rgba(255, 225, 132, 0.88) 34%,
    rgba(241, 176, 36, 0.30) 62%,
    transparent 76%);
  filter: blur(calc(0.35 * var(--u)));
  box-shadow: 0 0 calc(10 * var(--u)) rgba(241, 176, 36, 0.28);
}
.result__forest-mote--1 { --mote-size: calc(26 * var(--u)); --mote-drift: calc(10 * var(--u));  left: 12%; top: 19%; animation-delay: 0.28s !important; }
.result__forest-mote--2 { --mote-size: calc(16 * var(--u)); --mote-drift: calc(-8 * var(--u)); left: 28%; top: 39%; animation-delay: 0.42s !important; }
.result__forest-mote--3 { --mote-size: calc(21 * var(--u)); --mote-drift: calc(9 * var(--u));  left: 45%; top: 12%; animation-delay: 0.34s !important; }
.result__forest-mote--4 { --mote-size: calc(32 * var(--u)); --mote-drift: calc(-12 * var(--u)); left: 62%; top: 31%; animation-delay: 0.50s !important; }
.result__forest-mote--5 { --mote-size: calc(15 * var(--u)); --mote-drift: calc(7 * var(--u));  left: 79%; top: 17%; animation-delay: 0.40s !important; }
.result__forest-mote--6 { --mote-size: calc(24 * var(--u)); --mote-drift: calc(-10 * var(--u)); left: 87%; top: 46%; animation-delay: 0.57s !important; }
.result__forest-mote--7 { --mote-size: calc(13 * var(--u)); --mote-drift: calc(8 * var(--u));  left: 36%; top: 59%; animation-delay: 0.64s !important; }
.result__forest-mote--8 { --mote-size: calc(19 * var(--u)); --mote-drift: calc(-8 * var(--u)); left: 70%; top: 62%; animation-delay: 0.70s !important; }
.result__forest-mote--9 { --mote-size: calc(18 * var(--u)); --mote-drift: calc(6 * var(--u));  left: 20%; top: 52%; animation-delay: 0.54s !important; }
.result__forest-mote--10 { --mote-size: calc(12 * var(--u)); --mote-drift: calc(-6 * var(--u)); left: 54%; top: 45%; animation-delay: 0.62s !important; }
.result__forest-mote--11 { --mote-size: calc(23 * var(--u)); --mote-drift: calc(11 * var(--u)); left: 75%; top: 39%; animation-delay: 0.31s !important; }
.result__forest-mote--12 { --mote-size: calc(14 * var(--u)); --mote-drift: calc(-9 * var(--u)); left: 7%; top: 34%; animation-delay: 0.47s !important; }
.result__forest-mote--13 { --mote-size: calc(20 * var(--u)); --mote-drift: calc(8 * var(--u));  left: 50%; top: 67%; animation-delay: 0.58s !important; }
.result__forest-mote--14 { --mote-size: calc(11 * var(--u)); --mote-drift: calc(-7 * var(--u)); left: 91%; top: 25%; animation-delay: 0.36s !important; }

@media (min-width: 768px) {
  .result__forest-light {
    top: calc(-62 * var(--u));
    left: calc(-22 * var(--u));
    width: calc(670 * var(--u));
    height: calc(720 * var(--u));
  }
  .result__forest-beam {
    left: 14%;
    width: 72%;
  }
}

@keyframes motion-card-settle {
  0%   { opacity: 0; transform: translateY(calc(24 * var(--u))) scale(0.975); }
  72%  { opacity: 1; transform: translateY(calc(-3 * var(--u))) scale(1.002); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes motion-char-arrive {
  0%   { opacity: 0; transform: translateY(calc(18 * var(--u))) scale(0.94); }
  72%  { opacity: 1; transform: translateY(calc(-3 * var(--u))) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes motion-forest-beam {
  0%   { opacity: 0; transform: translateY(calc(-8 * var(--u))) scale(0.96); }
  34%  { opacity: 0.64; }
  70%  { opacity: 0.34; }
  100% { opacity: 0; transform: translateY(calc(5 * var(--u))) scale(1.02); }
}
@keyframes motion-forest-mote {
  0%   { opacity: 0; transform: translate(0, calc(18 * var(--u))) scale(0.65); }
  28%  { opacity: 0.88; }
  70%  { opacity: 0.44; }
  100% { opacity: 0; transform: translate(var(--mote-drift), calc(-42 * var(--u))) scale(1.18); }
}

.result.is-revealing .result__card {
  animation: motion-card-settle 0.62s cubic-bezier(0.22, 0.8, 0.32, 1) both;
}
.result.is-revealing .result__character img {
  animation: motion-char-arrive 0.64s cubic-bezier(0.2, 0.72, 0.3, 1) 0.10s both;
}
.result.is-revealing:not(.is-result-light-disabled) .result__forest-beam {
  animation: motion-forest-beam 1.2s ease-out 0.25s both;
}
.result.is-revealing:not(.is-result-light-disabled) .result__forest-mote {
  animation-name: motion-forest-mote;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.result.is-revealing .result__type-badge,
.result.is-revealing .result__job-title,
.result.is-revealing .result__description,
.result.is-revealing .result__divider,
.result.is-revealing .result__cta-text,
.result.is-revealing .result__cta,
.result.is-revealing .result__banner-single,
.result.is-revealing .result__sub-actions { animation: motion-fade-rise 0.42s ease-out both; }
.result.is-revealing .result__type-badge    { animation-delay: 0.34s; }
.result.is-revealing .result__job-title    { animation-delay: 0.42s; }
.result.is-revealing .result__description  { animation-delay: 0.50s; }
.result.is-revealing .result__divider      { animation-delay: 0.58s; }
.result.is-revealing .result__cta-text     { animation-delay: 0.72s; }
.result.is-revealing .result__cta          { animation-delay: 0.84s; }
.result.is-revealing .result__banner-single { animation-delay: 0.92s; }
.result.is-revealing .result__sub-actions  { animation-delay: 1.02s; }

/* ?key= 直リンク時は軽いフェードインのみ（溜め演出・木漏れ日なし） */
.result.is-enter { animation: motion-fade 0.4s ease-out both; }

/* ---------- 演出用canvas（足跡・肉球スタンプ。motion.js が body 直下に生成・除去） ----------
   z-index はコンテンツ・診断中オーバーレイ(1000)より上の1001帯、操作は透過 */
.motion-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  pointer-events: none;
}

/* ---------- 単独バナー（result__banner-single）クリックで開く詳細画像モーダル ----------
   Figmaにこの要素のノードは無いため、既存トークンを使った独自実装。
   dialogのtop layerを利用し、結果画面内のスタッキング文脈や後続のlinksより常に前面へ表示する。 */
.image-modal {
  display: none;
  position: fixed;
  inset: 0;
  width: calc(100vw - 24px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  /* SP: 画面右上の×ボタン(80×80)と画像が重ならないよう、ボタン高さ分の上部余白を確保 */
  padding: 40px 0 0;
  overflow: visible;
  border: 0;
  background-color: transparent;
  color: var(--color-text);
}
.image-modal[open] {
  display: block;
  animation: motion-fade 0.2s ease-out both;
}
.image-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  animation: motion-fade 0.2s ease-out both;
}
.image-modal__viewport {
  max-height: calc(100dvh - 24px - 40px);
  overflow-x: hidden;
  overflow-y: auto;
}
.image-modal__viewport picture {
  display: block;
}
.image-modal__image {
  display: block;
  width: 100%;
  height: auto;
}
.image-modal__close {
  position: fixed;
  z-index: 1;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 0;
  background-color: transparent;
  color: transparent;
  font-size: 0;
  mix-blend-mode: difference;
  cursor: pointer;
}
.image-modal__close::before,
.image-modal__close::after {
  content: "";
  position: absolute;
  /* 回転後に見える×印の上端・右端を、透明な操作領域の上端・右端へ揃える。 */
  top: 16.7px;
  right: -6.3px;
  width: 48px;
  height: 2px;
  border-radius: 999px;
  background-color: var(--color-white);
}
.image-modal__close::before { transform: rotate(45deg); }
.image-modal__close::after { transform: rotate(-45deg); }
/* キーボード操作時のみリング表示。モーダル開封時のプログラム focus は
   data-suppress-focus-ring で抑止（SP実機で丸いリングが残るのを防ぐ） */
.image-modal__close:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  border-radius: 50%;
}
.image-modal__close[data-suppress-focus-ring]:focus,
.image-modal__close[data-suppress-focus-ring]:focus-visible {
  outline: none;
}
body.is-modal-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  .image-modal {
    /* 左右に×ボタン分(80)＋端12px＝92pxずつ空け、狭幅でも画像と×が重ならないようにする。
       ×自体の位置は従来どおりビューポート右端寄り（下の right 計算）のまま */
    width: min(1200px, calc(100vw - 184px));
    max-height: calc(100dvh - 32px);
    padding: 0;
  }
  .image-modal__viewport { max-height: calc(100dvh - 32px); }
  .image-modal__close {
    position: absolute;
    top: 0;
    right: calc(12px - 50vw + 50%);
  }
}

/* ---------- reduced-motion 対応（JS側のスキップ判定に加えたCSSの安全網） ----------
   .btn / .choice-btn はホバー押し込みのtransitionのみ無効化（押し込み状態自体は瞬時に反映される） */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .choice-btn,
  .opening-preloader,
  .question.is-enter-forward,
  .question.is-enter-back,
  .question.is-enter-forward .question__choice-item,
  .question.is-enter-back .question__choice-item,
  .question.is-enter-forward .question__progress-paw,
  .question.is-enter-back .question__progress-paw,
  .result.is-revealing .result__card,
  .result.is-revealing .result__character img,
  .result.is-revealing .result__forest-beam,
  .result.is-revealing .result__forest-mote,
  .result.is-revealing .result__type-badge,
  .result.is-revealing .result__job-title,
  .result.is-revealing .result__description,
  .result.is-revealing .result__divider,
  .result.is-revealing .result__cta-text,
  .result.is-revealing .result__cta,
  .result.is-revealing .result__banner-single,
  .result.is-revealing .result__sub-actions,
  .result.is-enter,
  .diagnosing-overlay,
  .diagnosing-overlay__dots span,
  .image-modal[open],
  .image-modal[open]::backdrop {
    animation: none !important;
    transition: none !important;
  }
}