/* =====================================================================
   ② 見た目とアニメーション（案件ごとに書き換えるのはこのファイルだけ）

   1. まず「変数」を変える … 色・フォント・角丸・待ち時間。これだけで雰囲気が変わる
   2. 形を変えたいときは各画面のセクションを編集する
   3. 動きは最後の「アニメーション」セクション

   ※ TOP・設問・結果とも Figma に合わせて実装済み
   ===================================================================== */

/* フォント（Google Fonts）。変える場合は URL と下の --font-* を両方変える */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&family=Playfair+Display:wght@400;500;600&display=swap");

/* =====================================================================
   1. 変数
   ===================================================================== */
:root {
  /* 色 */
  --color-main: #9a8438; /* ボタン・枠線・選択中の選択肢（Figma） */
  --color-text: #181730; /* 本文（Figma） */
  --color-text-on-main: #fff; /* メインカラーの上に乗る文字 */
  --color-bg: #fdfdfd; /* ページ背景（Figma） */
  --color-band: #ecebe0; /* バナー・用語解説集の帯の背景（Figma） */
  --color-surface: #fff; /* カード・選択肢の背景 */
  --color-divider: #d3ccae; /* 用語解説の区切り線（Figma） */
  --color-progress-from: #00b5ce; /* 進捗バーのグラデーション（Figma） */
  --color-progress-to: #9dcc60;
  --color-progress-track: #c8eef3;
  --color-title-from: #00b5ce; /* 「エンタメ業界適職診断」のグラデーション（Figma） */
  --color-title-to: #9dcc60;
  --color-title-glow: rgb(32 186 183 / 0.4);
  --color-title-stroke: #fff; /* 同・白の縁取り（Figma） */

  /* フォント */
  --font-base: "Noto Serif JP", serif;
  --font-number: "Playfair Display", serif; /* Q.1 や 1/5 などの数字 */

  /* 形 */
  --content-width: 1200px;
  --radius-card: 8px;

  /* 動き */
  --diagnosing-duration: 1500ms; /* 「診断中…」を表示しておく時間。0ms で即結果 */
  --enter-duration: 400ms; /* 設問の切り替え・結果の登場にかける時間 */

  /* 比例ズームの基準単位。寸法は calc(Figma の px 値 * var(--u)) で書く
     PC は Figma の幅 1728、SP は 390 を基準に、画面が狭いほど比率のまま縮む（広い画面では 1px で頭打ち） */
  --u: min(1px, 100vw / 1728);
}

@media (max-width: 767px) {
  :root {
    --u: min(1px, 100vw / 390);
  }
}

/* =====================================================================
   2. 共通
   ===================================================================== */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: 1.6;
}

/* 中身が画面より短くてもフッター（コピーライト）を最下部に置く（.app__main が余った高さを埋める）
   背景のもや（.app::before / ::after）が画面の右にはみ出しても横スクロールを出さない */
.app {
  position: relative;
  isolation: isolate; /* 背景のもや（z-index: -1）を .app の中に閉じ込める */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
}

/* 幅は各画面（.top / .question / .result）が持つ */
.app__main {
  flex: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 64px;
  padding: 0 32px;
  border: 2px solid var(--color-main);
  border-radius: 999px;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

.btn--primary {
  background: var(--color-main);
  color: var(--color-text-on-main);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-main);
}

.btn:hover:not(:disabled) {
  opacity: 0.8;
}

.btn:disabled {
  opacity: 0.4;
}

/* バナー（TOP・結果の下）。帯の背景・もやは下の「帯」で指定 */
.banners {
  display: flex;
  justify-content: center;
  gap: calc(24 * var(--u));
  padding: calc(48 * var(--u)) 0;
  width: calc(600 * var(--u));
  margin-inline: auto;
}

.banners__item {
  width: calc(384 * var(--u));
}

.banners__item picture,
.banners__item a {
  display: block;
  width: 100%;
}

.banners__item img {
  width: 100%;
  aspect-ratio: 384 / 114;
  object-fit: cover;
}

/* 「エンタメ業界適職診断」（TOP・ヘッダー）と結果の職種名。文字にグラデーション＋白の縁取り＋光
   text-shadow / -webkit-text-stroke だとグラデーションが隠れるので、すべて filter で付ける
   縁取りは上下左右に影をずらして重ねる（Figma の「外側」の線と同じ見え方になる） */
.top__title,
.site-header__title,
.result__job {
  --title-stroke: calc(3 * var(--u)); /* 縁取りの太さ */
  --title-glow-blur: calc(4 * var(--u)); /* 光のぼかし。drop-shadow のぼかしは Figma の値の半分で同じ広がりになる（Figma 8 → 4） */
  background: linear-gradient(180deg, var(--color-title-from), var(--color-title-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(var(--title-stroke) 0 0 var(--color-title-stroke))
    drop-shadow(calc(var(--title-stroke) * -1) 0 0 var(--color-title-stroke))
    drop-shadow(0 var(--title-stroke) 0 var(--color-title-stroke))
    drop-shadow(0 calc(var(--title-stroke) * -1) 0 var(--color-title-stroke))
    drop-shadow(0 calc(1 * var(--u)) var(--title-glow-blur) var(--color-title-glow));
  font-weight: 900;
  line-height: 1.15;
}

/* ---------- 背景のもや ----------
   ::before … 左上（全画面共通） / ::after … 右側（画面ごとに位置が違うので各画面のセクションで指定）
   位置は Figma（PC 幅 1728・SP 幅 390）の値を比率で取る */
.app::before,
.app::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

.app::before {
  top: 0;
  left: 0;
  width: calc(881 * var(--u));
  height: calc(425 * var(--u));
  background-image: url("../images/common/mist1.png");
  background-position: calc(-131.4 * var(--u)) calc(-1 * var(--u));
  background-size: calc(1012.7 * var(--u)) calc(426 * var(--u));
}

.app::after {
  background-image: url("../images/common/mist2.png");
}

/* 帯（バナー・用語解説集）。背景色は box-shadow で画面の端まで伸ばす（横スクロールは出ない） */
.banners,
.glossary {
  position: relative;
  background: var(--color-band);
  box-shadow: 0 0 0 100vmax var(--color-band);
  clip-path: inset(0 -100vmax);
}

/* 帯の左上・右下のもや */
.banners::before,
.banners::after,
.glossary::before,
.glossary::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: url("../images/common/mist1.png") no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

.banners::before,
.glossary::before {
  top: 0;
  left: calc(50% - 50vw);
  width: calc(468 * var(--u));
  height: calc(189 * var(--u));
  background-position: calc(-134.6 * var(--u)) calc(-6.7 * var(--u));
  background-size: calc(602.8 * var(--u)) calc(195.7 * var(--u));
}

.banners::after,
.glossary::after {
  right: calc(50% - 50vw);
  bottom: 0;
  transform: rotate(180deg);
}

.banners::after {
  width: calc(315 * var(--u));
  height: calc(123 * var(--u));
  background-position: calc(-264.7 * var(--u)) calc(-63.6 * var(--u));
  background-size: calc(855.3 * var(--u)) calc(186.6 * var(--u));
}

/* ---------- ヘッダー（設問・結果） ----------
   左にロゴ（提供元 × 作品）、右に「エンタメ業界適職診断」と説明文 */
.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: calc(1200 * var(--u));
  margin: 0 auto;
  padding-top: calc(32 * var(--u));
}

/* TOP ではヘッダーを出さない（ロゴ・タイトルは TOP の本文側にある） */
body:has(#screen-top.is-active) .site-header {
  display: none;
}

.site-header__logos {
  display: flex;
  align-items: center;
}

.site-header__logos .media--logo-enter {
  width: calc(273 * var(--u));
}

.site-header__logos .media--logo-cross {
  width: calc(36.9 * var(--u));
  margin-left: calc(26.5 * var(--u));
}

.site-header__logos .media--logo-title {
  width: calc(230 * var(--u));
  margin-left: calc(22.6 * var(--u));
}

.site-header__logos img {
  width: 100%;
}

.site-header__catch {
  width: calc(518 * var(--u));
  padding-top: calc(11 * var(--u));
  text-align: center;
}

.site-header__title {
  font-size: calc(48 * var(--u));
}

/* タイトルと説明文の間の飾り線 */
.site-header__lead {
  font-size: calc(18 * var(--u));
  font-weight: 600;
  line-height: 1.4;
}

.site-header__lead::before {
  content: "";
  display: block;
  width: calc(521.6 * var(--u));
  height: calc(8.4 * var(--u));
  margin: calc(14.6 * var(--u)) calc(-1.8 * var(--u)) calc(14.8 * var(--u));
  background: url("../images/common/head-line.svg") no-repeat center / 100% 100%;
}

/* TOP 用の改行（SITE.lead の <br>）はヘッダーでは使わない */
.site-header__lead br {
  display: none;
}

.site-footer {
  padding: calc(9 * var(--u)) 16px;
  font-size: calc(14 * var(--u));
  line-height: 1;
  text-align: center;
}

/* =====================================================================
   3. TOP（Figma: TOP 34:218 / SP 218:4087）
   PC は左に本文（400）、右に KV（760）。下にバナーの帯
   ===================================================================== */
.top {
  display: grid;
  grid-template-columns: calc(400 * var(--u)) calc(760 * var(--u));
  grid-template-areas:
    "body kv"
    "banners banners";
  justify-content: center;
  column-gap: calc(40 * var(--u));
}

/* 右下のもや */
body:has(#screen-top.is-active) .app::after {
  top: calc(568 * var(--u));
  right: calc(-34 * var(--u));
  width: calc(446 * var(--u));
  height: calc(656 * var(--u));
  background-position: 0 calc(-152.4 * var(--u));
  background-size: calc(1192.9 * var(--u)) calc(808.2 * var(--u));
  transform: rotate(5.73deg);
}

.top .media--kv {
  grid-area: kv;
  margin-top: calc(40 * var(--u));
}

.media--kv img {
  width: 100%;
  aspect-ratio: 760 / 1073;
  object-fit: cover;
}

.top__body {
  grid-area: body;
  padding-top: calc(109 * var(--u));
  text-align: center;
}

/* ロゴ（提供元 × 作品）。下の飾り線は背景で敷く */
.top__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(54 * var(--u));
  background: url("../images/common/line.svg") no-repeat center bottom / 100% calc(6 * var(--u));
}

.top__logos .media--logo-enter,
.top__logos .media--logo-title {
  width: 100%;
}

.top__logos img {
  width: 100%;
}

.top__logos .media--logo-cross {
  width: calc(50.95 * var(--u));
  margin-top: calc(27 * var(--u));
}

.top__logos .media--logo-title {
  margin-top: calc(10 * var(--u));
}

/* コラボ名（両側に飾り） */
.top__collab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  margin-top: calc(56 * var(--u));
  color: var(--color-main);
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.top__collab::before,
.top__collab::after {
  content: "";
  flex-shrink: 0;
  width: calc(35 * var(--u));
  height: calc(13 * var(--u));
  background: url("../images/common/ornament-l.svg") no-repeat center / contain;
}

.top__collab::after {
  background-image: url("../images/common/ornament-r.svg");
  transform: scaleX(-1);
}

.top__title {
  margin-top: calc(16 * var(--u));
  font-size: calc(64 * var(--u));
}

.top__lead {
  margin-top: calc(21 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.6;
}

.top__start {
  width: 100%;
  height: calc(80 * var(--u));
  min-width: 0;
  min-height: 0;
  margin-top: calc(39 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../images/common/btn-bg.svg") no-repeat center / 100% 100%;
  font-size: calc(24 * var(--u));
  line-height: 1;
}

.top .banners {
  grid-area: banners;
  margin-top: calc(80 * var(--u));
}

/* =====================================================================
   4. 設問（Figma: 設問1 49:1358 / SP 218:4211）
   場面写 → 進捗 → Q → 選択肢 → ボタン → 用語解説集（帯）
   ===================================================================== */
.question {
  position: relative;
  isolation: isolate;
  width: calc(1200 * var(--u));
  margin: 0 auto;
  padding-top: calc(24 * var(--u));
}

/* 右側のもや（Figma の枠 x≥1439 で切り抜く。clip-path は回転前の座標） */
body:has(#screen-question.is-active) .app::after {
  top: calc(759.77 * var(--u));
  right: calc(-439.33 * var(--u));
  width: calc(1055.78 * var(--u));
  height: calc(580.07 * var(--u));
  background-position: 0 calc(-0.4 * var(--u));
  background-size: calc(1055.6 * var(--u)) calc(875.2 * var(--u));
  transform: rotate(-71.93deg);
  clip-path: polygon(
    calc(966.5 * var(--u)) calc(-63.9 * var(--u)),
    calc(1233.6 * var(--u)) calc(754.6 * var(--u)),
    calc(229.7 * var(--u)) calc(1082.2 * var(--u)),
    calc(-37.4 * var(--u)) calc(263.6 * var(--u))
  );
}

.media--scene img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 進捗。線の上に塗り、塗りの先端に印（mark.svg）。右に「1/5」 */
.progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: calc(8 * var(--u));
}

.progress__bar {
  position: relative;
  flex: 0 0 calc(1150 * var(--u));
  height: calc(2 * var(--u));
  margin-top: calc(28 * var(--u));
  border-radius: calc(1 * var(--u));
  background: var(--color-progress-track);
}

.progress__fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--progress) * 100%);
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: linear-gradient(90deg, var(--color-progress-from), var(--color-progress-to));
  transform: translateY(-50%);
  transition: width var(--enter-duration);
}

.progress__fill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: calc(23.75 * var(--u));
  height: calc(35 * var(--u));
  background: url("../images/common/mark.svg") no-repeat center / 100% 100%;
  transform: translate(50%, -50%);
}

.progress__count {
  font-family: var(--font-number);
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.progress__count b {
  font-size: calc(40 * var(--u));
  font-weight: 400;
}

/* Q（左に番号と縦線、右に問題文） */
.question__head {
  display: flex;
  align-items: stretch;
  gap: calc(24 * var(--u));
  margin-top: calc(54 * var(--u));
}

/* 「Q.」と数字で大きさが違うので ::first-letter（「Q.」まで含まれる）で小さくする */
.question__number {
  flex-shrink: 0;
  width: calc(97 * var(--u));
  padding-top: calc(4 * var(--u));
  border-right: 1px solid var(--color-text);
  font-family: var(--font-number);
  font-size: calc(64 * var(--u));
  line-height: 1;
}

.question__number::first-letter {
  font-size: calc(40 * var(--u));
  font-weight: 500;
}

.question__text {
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.4;
}

.question__text span {
  font-size: calc(24 * var(--u));
}

.question__choices {
  display: grid;
  gap: calc(16 * var(--u));
  margin-top: calc(56 * var(--u));
}

.choice-btn {
  width: 100%;
  min-height: calc(80 * var(--u));
  padding: calc(8 * var(--u)) calc(40 * var(--u));
  border: calc(2 * var(--u)) solid var(--color-main);
  border-radius: calc(45 * var(--u));
  background: var(--color-surface);
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: normal;
  transition: background-color 0.2s, color 0.2s;
}

.choice-btn span {
  font-size: calc(18 * var(--u));
}

.choice-btn:hover,
.choice-btn.is-selected {
  background: var(--color-main);
  color: var(--color-text-on-main);
}

/* ボタン。Q1 は「次へ」だけ中央、Q2 以降は「戻る」左・「次へ」右 */
.question__actions {
  display: flex;
  justify-content: center;
  margin-top: calc(56 * var(--u));
}

.question__actions:has(#js-prev-btn) {
  justify-content: space-between;
}

.question__actions:last-child {
  margin-bottom: calc(80 * var(--u)); /* 用語解説が無い設問 */
}

.question__actions .btn {
  width: calc(400 * var(--u));
  height: calc(80 * var(--u));
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../images/common/btn-bg.svg") no-repeat center / 100% 100%;
  font-size: calc(24 * var(--u));
  line-height: 1;
}

.question__actions .btn--secondary {
  background-image: url("../images/common/btn-outline.svg");
}

/* 用語解説集（帯） */
.glossary {
  margin-top: calc(80 * var(--u));
  padding: calc(56 * var(--u)) 0 calc(88 * var(--u));
}

.glossary::after {
  width: calc(310 * var(--u));
  height: calc(158 * var(--u));
  background-position: calc(-264.7 * var(--u)) calc(-28.6 * var(--u));
  background-size: calc(855.3 * var(--u)) calc(186.6 * var(--u));
}

.glossary__heading {
  color: var(--color-main);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.glossary__heading::after {
  content: "";
  display: block;
  height: calc(6 * var(--u));
  margin-top: calc(7.8 * var(--u));
  background: url("../images/common/line-wide.svg") no-repeat center / 100% 100%;
}

.glossary dl {
  margin-top: calc(24 * var(--u));
}

.glossary__item + .glossary__item {
  margin-top: calc(16 * var(--u));
  padding-top: calc(16 * var(--u));
  border-top: 1px solid var(--color-divider);
}

/* 用語。左にひし形（diamond.svg を縦向きに回す） */
.glossary__item dt {
  position: relative;
  padding-left: calc(16 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.glossary__item dt::before {
  content: "";
  position: absolute;
  top: calc(6 * var(--u));
  left: calc(-2 * var(--u));
  width: calc(12 * var(--u));
  height: calc(8 * var(--u));
  background: url("../images/common/diamond.svg") no-repeat center / 100% 100%;
  transform: rotate(90deg);
}

.glossary__item dd {
  margin-top: calc(12 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 500;
  line-height: 1.5;
}

/* =====================================================================
   5. 診断中（全画面のオーバーレイ）
   ===================================================================== */
.diagnosing {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgb(24 23 48 / 0.85);
  color: #fff;
}

.diagnosing__text {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* =====================================================================
   6. 結果（Figma: 診断結果_アルス 55:4610 / SP 237:15035）
   PC は左にキャラ（623×1100）、右に文章（537）を上下中央で並べる
   その下にキャンペーンバナー → SHARE・もう一度診断する → バナーの帯
   ===================================================================== */
.result {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(1200 * var(--u));
  margin: 0 auto;
  padding-top: calc(24 * var(--u));
}

/* 右側のもや（設問と同じ形で、縦位置だけ違う） */
body:has(#screen-result.is-active) .app::after {
  top: calc(517.77 * var(--u));
  right: calc(-439.33 * var(--u));
  width: calc(1055.78 * var(--u));
  height: calc(580.07 * var(--u));
  background-position: 0 calc(-0.4 * var(--u));
  background-size: calc(1055.6 * var(--u)) calc(875.2 * var(--u));
  transform: rotate(-71.93deg);
  clip-path: polygon(
    calc(966.5 * var(--u)) calc(-63.9 * var(--u)),
    calc(1233.6 * var(--u)) calc(754.6 * var(--u)),
    calc(229.7 * var(--u)) calc(1082.2 * var(--u)),
    calc(-37.4 * var(--u)) calc(263.6 * var(--u))
  );
}

/* キャラは1〜5行目をまたぎ、右の文章（2〜4行目）は上下の 1fr で中央に寄る */
.result__card {
  display: grid;
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-columns: calc(623 * var(--u)) calc(537 * var(--u));
  column-gap: calc(40 * var(--u));
  width: 100%;
}

/* キャラ。後ろに飾り枠（character-frame.svg） */
.media--character {
  grid-row: 1 / -1;
  grid-column: 1;
}

.media--character::before {
  content: "";
  position: absolute;
  top: calc(165 * var(--u));
  left: calc(49 * var(--u));
  z-index: -1;
  width: calc(525 * var(--u));
  height: calc(770 * var(--u));
  background: url("../images/common/character-frame.svg") no-repeat center / 100% 100%;
}

.media--character img {
  width: 100%;
  aspect-ratio: 623 / 1100;
}

.result__body {
  grid-row: 2;
  grid-column: 2;
}

/* 「あなたは / ○○ タイプ！」。下に飾り線 */
/* 改行は SITE.resultHeading の <br> だけ（ブラウザの文字幅が Figma よりわずかに広く、名前の途中で折り返すのを防ぐ） */
.result__heading {
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.result__heading strong,
.result__cta-text strong {
  font-weight: 700;
}

.result__heading strong {
  font-size: calc(40 * var(--u));
}

.result__heading::after,
.result__message::after {
  content: "";
  display: block;
  height: calc(6 * var(--u));
  background: url("../images/common/line-result.svg") no-repeat center / 100% 100%;
}

.result__heading::after {
  margin-top: calc(35 * var(--u));
}

/* 職種名。改行位置は content.js の job に書いた <br>（Figma に合わせている）
   自動では折り返さない（Figma で 534px ある行が、ブラウザでは枠の 537px をわずかに超えて3行になるため）
   幅は文字に合わせる（枠をはみ出した文字にもグラデーションが塗られるように）
   SP は自動で折り返すので、Figma と同じく「ー」や小さい「ャ」などを行頭に置かない（line-break: strict） */
.result__job {
  width: max-content;
  margin-top: calc(32 * var(--u));
  font-size: calc(48 * var(--u));
  line-height: 1.4;
  white-space: nowrap;
  line-break: strict;
}

.result__job span {
  font-size: calc(40 * var(--u));
}

.result__message {
  margin-top: calc(23.6 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1.8;
}

.result__message::after {
  margin-top: calc(32 * var(--u));
}

/* 「○○」の非公開求人を多数ご用意しています */
.result__cta-text {
  grid-row: 3;
  grid-column: 2;
  margin-top: calc(32 * var(--u));
  color: var(--color-main);
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

.result__cta-text strong {
  font-size: calc(24 * var(--u));
  white-space: nowrap; /* 「」の職種名は1行に収める（Figma のミレーユも枠をはみ出して1行） */
}

/* 職種名の <br> は、この文の中では使わない */
.result__cta-text strong br {
  display: none;
}

.result__cta {
  grid-row: 4;
  grid-column: 2;
  height: calc(80 * var(--u));
  min-width: 0;
  min-height: 0;
  margin-top: calc(14 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../images/common/btn-bg-wide.svg") no-repeat center / 100% 100%;
  font-size: calc(24 * var(--u));
  line-height: 1;
}

/* キャンペーンバナー（画像が無い間は灰色の枠） */
.result__campaign {
  display: block;
  width: calc(820 * var(--u));
  margin-top: calc(88 * var(--u));
}

.media--campaign,
.media--campaign.is-missing {
  min-height: 0;
}

.media--campaign,
.media--campaign img {
  width: 100%;
}

.media--campaign img {
  object-fit: cover;
}

/* 詳細画像があるときはボタンになる（ボタンの枠・背景を消す） */
button.result__campaign {
  padding: 0;
  border: 0;
  background: none;
  transition: opacity 0.2s;
}

button.result__campaign:hover {
  opacity: 0.8;
}

/* キャンペーンの詳細モーダル。画像は幅いっぱいに表示し、縦に長い分は .image-modal__viewport の中でスクロール
   SP: 画面の幅いっぱい（左右 12px 空け）。上に × の分の余白 40px を空けて、画像と × が重ならないようにする
   PC: 画像の幅（900px）まで。左右に × の分（92px ずつ）を空ける */
.image-modal {
  width: calc(100vw - 24px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 40px 0 0;
  overflow: visible;
  border: 0;
  background: none;
}

.image-modal__viewport {
  max-height: calc(100dvh - 24px - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain; /* 端までスクロールしても後ろのページが動かないように */
}

@media (min-width: 768px) {
  .image-modal {
    width: min(900px, 100vw - 184px);
    max-height: calc(100dvh - 32px);
    padding: 0;
  }

  .image-modal__viewport {
    max-height: calc(100dvh - 32px);
  }
}

.image-modal::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.image-modal[open],
.image-modal[open]::backdrop {
  animation: fade-in 0.2s ease-out;
}

.image-modal__image {
  display: block;
  width: 100%;
  height: auto;
}

/* × は画面の右上に固定。白い線2本を回して描く */
.image-modal__close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
}

.image-modal__close::before,
.image-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}

.image-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.image-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* キーボード操作のときだけ × に白い枠を出す。タップ・クリックで開いた直後は出さない（app.js が属性を付け外し） */
.image-modal__close:focus-visible {
  outline: 2px solid #fff;
  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;
}

/* SHARE（白地＋金枠・X のアイコン）と もう一度診断する */
.result__actions {
  display: flex;
  gap: calc(16 * var(--u));
  margin-top: calc(56 * var(--u));
}

.result__actions:last-child {
  margin-bottom: calc(80 * var(--u)); /* バナーが無いとき */
}

.result__actions .btn {
  width: calc(400 * var(--u));
  height: calc(80 * var(--u));
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../images/common/btn-bg.svg") no-repeat center / 100% 100%;
  color: var(--color-text-on-main);
  font-size: calc(24 * var(--u));
  line-height: 1;
}

.result__actions #js-share-btn {
  gap: calc(14 * var(--u));
  background-image: url("../images/common/btn-outline.svg");
  color: var(--color-main);
  font-family: var(--font-number);
}

.result__actions #js-share-btn::after {
  content: "";
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  background: url("../images/common/icon-x.svg") no-repeat center / 100% 100%;
}

.result .banners {
  align-self: stretch;
  margin-top: calc(97 * var(--u));
}

/* =====================================================================
   7. スマホ（767px 以下）
   幅 390 の枠を画面の中央に置く（390 より広い画面では枠のまま、狭い画面では比率のまま縮む）
   ===================================================================== */
@media (max-width: 767px) {
  .site-footer {
    padding: calc(8 * var(--u)) 16px;
    font-size: calc(12 * var(--u));
  }

  .top__title,
  .site-header__title,
  .result__job {
    --title-stroke: calc(2 * var(--u));
    --title-glow-blur: calc(2.5 * var(--u)); /* Figma 5 → 2.5 */
  }

  .top__title {
    --title-stroke: calc(2.5 * var(--u));
  }

  /* ---------- 背景のもや・帯 ---------- */
  .app::before {
    left: calc((100% - 390 * var(--u)) / 2);
    width: calc(390 * var(--u));
    height: calc(188 * var(--u));
    background-position: calc(-58.1 * var(--u)) calc(-0.5 * var(--u));
    background-size: calc(448.3 * var(--u)) calc(188.5 * var(--u));
    opacity: 0.15;
  }

  .app::after {
    opacity: 0.15;
  }

  .banners::before,
  .glossary::before {
    width: calc(186 * var(--u));
    height: calc(109 * var(--u));
    background-position: calc(-131.9 * var(--u)) 0;
    background-size: calc(317.7 * var(--u)) calc(108.5 * var(--u));
  }

  .banners::after,
  .glossary::after {
    width: calc(200 * var(--u));
    height: calc(75 * var(--u));
    background-position: calc(-168.1 * var(--u)) calc(-38.8 * var(--u));
    background-size: calc(543 * var(--u)) calc(113.8 * var(--u));
  }

  /* ---------- ロゴの横並び（TOP・ヘッダー共通）。下に飾り線 ---------- */
  .top__logos,
  .site-header__logos {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-inline: calc(20 * var(--u));
    padding-top: calc(16 * var(--u));
    background: url("../images/common/line-sp.svg") no-repeat center bottom / 100% calc(6 * var(--u));
  }

  .top__logos .media--logo-enter,
  .site-header__logos .media--logo-enter {
    width: calc(172 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .top__logos .media--logo-cross,
  .site-header__logos .media--logo-cross {
    width: calc(21.5 * var(--u));
    margin: calc(33.6 * var(--u)) 0 0;
  }

  .top__logos .media--logo-title,
  .site-header__logos .media--logo-title {
    width: calc(125 * var(--u));
    margin: 0;
  }

  /* ---------- ヘッダー ---------- */
  .site-header {
    display: block;
    width: calc(390 * var(--u));
    padding-top: 0;
  }

  .site-header__logos {
    padding-bottom: calc(14 * var(--u));
  }

  .site-header__catch {
    width: auto;
    margin-inline: calc(20 * var(--u));
    padding-top: calc(8 * var(--u));
  }

  .site-header__title {
    font-size: calc(24 * var(--u));
  }

  .site-header__lead {
    padding-inline: calc(15 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .site-header__lead::before {
    width: calc(349.6 * var(--u));
    margin: calc(7.2 * var(--u)) calc(-15 * var(--u)) calc(4.8 * var(--u));
    background-image: url("../images/common/head-line-sp.svg");
  }

  /* ---------- TOP（Figma SP 218:4087）。ロゴ → KV → 本文の順に縦へ並べる
     .top__body を display: contents にして、中身を .top のグリッドに直接並べ替える ---------- */
  .top {
    grid-template-columns: calc(390 * var(--u));
    grid-template-areas:
      "logos"
      "kv"
      "collab"
      "title"
      "lead"
      "start"
      "banners";
  }

  body:has(#screen-top.is-active) .app::after {
    top: calc(644.5 * var(--u));
    right: auto;
    left: calc((100% - 390 * var(--u)) / 2 + 189.2 * var(--u));
    width: calc(239.3 * var(--u));
    height: calc(351.6 * var(--u));
    background-position: 0 calc(-81.7 * var(--u));
    background-size: calc(639.6 * var(--u)) calc(433.3 * var(--u));
    transform: rotate(2.74deg);
  }

  .top__body {
    display: contents;
  }

  .top__logos {
    grid-area: logos;
    padding-bottom: calc(18 * var(--u));
  }

  .top .media--kv {
    margin-top: calc(20 * var(--u));
  }

  .top__collab {
    grid-area: collab;
    margin-top: calc(28 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .top__collab::before,
  .top__collab::after {
    width: calc(32 * var(--u));
    height: calc(12 * var(--u));
  }

  .top__title {
    grid-area: title;
    justify-self: center;
    margin-top: calc(12 * var(--u));
    font-size: calc(34 * var(--u));
  }

  .top__lead {
    grid-area: lead;
    margin: calc(12 * var(--u)) calc(20 * var(--u)) 0;
    font-size: calc(16 * var(--u));
    text-align: center;
  }

  .top__lead br {
    display: none;
  }

  .top .top__start { /* 後ろの .btn（SP）に負けないよう .top を付ける */
    grid-area: start;
    justify-self: center;
    width: calc(350 * var(--u));
    height: calc(64 * var(--u));
    min-height: 0;
    margin-top: calc(25 * var(--u));
    padding: 0;
    background-image: url("../images/common/btn-bg-sp.svg");
    font-size: calc(18 * var(--u));
  }

  .banners {
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--u));
    padding: calc(40 * var(--u)) 0;
    width: 100%; /* PC 側の 600*--u のままだと画面からはみ出して右に寄るため */
  }

  .banners__item {
    width: calc(250 * var(--u));
  }

  .banners__item img {
    aspect-ratio: 350 / 104;
  }

  .top .banners {
    margin-top: calc(64 * var(--u));
  }

  .btn {
    min-width: 0;
    min-height: 52px;
    padding: 0 16px;
    font-size: 16px;
    white-space: nowrap; /* 「もう一度診断する」が2行に割れないように */
  }

  /* ---------- 設問（Figma SP 218:4211） ---------- */
  .question {
    width: calc(390 * var(--u));
    padding: calc(32.8 * var(--u)) calc(20 * var(--u)) 0;
  }

  /* 右側のもや（Figma の枠 237〜390 × 424〜682 で切り抜く） */
  body:has(#screen-question.is-active) .app::after {
    top: calc(414.55 * var(--u));
    right: auto;
    left: calc((100% - 390 * var(--u)) / 2 + 236.86 * var(--u));
    width: calc(267.67 * var(--u));
    height: calc(274.52 * var(--u));
    background-position: 0 calc(-91.36 * var(--u));
    background-size: calc(715.4 * var(--u)) calc(484.7 * var(--u));
    transform: rotate(2.74deg);
    clip-path: polygon(
      calc(-5.8 * var(--u)) calc(16 * var(--u)),
      calc(147 * var(--u)) calc(8.7 * var(--u)),
      calc(159.3 * var(--u)) calc(266.4 * var(--u)),
      calc(6.5 * var(--u)) calc(273.7 * var(--u))
    );
  }

  /* ボタンの下・帯（用語解説集／バナー）の上にあるもや（上下反転） */
  .question__actions,
  .result__actions {
    position: relative;
  }

  .question__actions::after,
  .result__actions::after {
    content: "";
    position: absolute;
    bottom: calc(-72 * var(--u));
    left: calc(-20 * var(--u));
    z-index: -1;
    width: calc(274 * var(--u));
    height: calc(117 * var(--u));
    background: url("../images/common/mist1.png") no-repeat calc(-8.77 * var(--u)) calc(-1.72 * var(--u)) / calc(282.8 * var(--u)) calc(119.3 * var(--u));
    opacity: 0.15;
    transform: scaleY(-1);
    pointer-events: none;
  }

  .progress__bar {
    flex-basis: calc(315 * var(--u));
    margin-top: calc(17 * var(--u));
  }

  .progress__fill {
    height: calc(4 * var(--u));
    border-radius: calc(2 * var(--u));
  }

  .progress__fill::after {
    width: calc(19.33 * var(--u));
    height: calc(28 * var(--u));
    background-image: url("../images/common/mark-sp.svg");
  }

  .progress__count {
    font-size: calc(16 * var(--u));
  }

  .progress__count b {
    font-size: calc(24 * var(--u));
  }

  /* 番号の右に横線、その下に問題文 */
  .question__head {
    display: block;
    margin-top: calc(15 * var(--u));
  }

  .question__number {
    position: relative;
    width: auto;
    padding-top: 0;
    border-right: 0;
    font-size: calc(40 * var(--u));
  }

  .question__number::first-letter {
    font-size: calc(24 * var(--u));
  }

  .question__number::after {
    content: "";
    position: absolute;
    top: calc(26 * var(--u));
    right: 0;
    left: calc(52 * var(--u));
    height: 1px;
    background: var(--color-text);
  }

  .question__text {
    margin-top: calc(12 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: 1.5;
  }

  .question__text span {
    font-size: calc(16 * var(--u));
  }

  .question__choices {
    gap: calc(8 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .choice-btn {
    min-height: calc(98 * var(--u));
    padding: calc(8 * var(--u)) calc(28 * var(--u));
    border-radius: calc(55 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.4;
    text-align: left;
  }

  .choice-btn span {
    font-size: calc(16 * var(--u));
  }

  .question__actions {
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--u));
    margin-top: calc(40 * var(--u));
  }

  .question__actions .btn {
    width: calc(350 * var(--u));
    height: calc(64 * var(--u));
    min-height: 0;
    padding: 0;
    background-image: url("../images/common/btn-bg-sp.svg");
    font-size: calc(18 * var(--u));
  }

  .question__actions .btn--secondary {
    background-image: url("../images/common/btn-outline-sp.svg");
  }

  .glossary {
    margin-top: calc(72 * var(--u));
    padding: calc(40 * var(--u)) 0 calc(48 * var(--u));
  }

  .glossary__heading {
    font-size: calc(20 * var(--u));
  }

  .glossary__heading::after {
    margin-top: calc(8 * var(--u));
    background-image: url("../images/common/line-sp.svg");
  }

  .glossary dl {
    margin-top: calc(20 * var(--u));
  }

  .glossary__item dt {
    font-size: calc(18 * var(--u));
  }

  .glossary__item dt::before {
    top: calc(5 * var(--u));
  }

  .glossary__item dd {
    margin-top: calc(8 * var(--u));
  }

  /* ---------- 結果（Figma SP 237:15035）
     見出し → キャラ → 職種名 → 説明 → 非公開求人 の順に縦へ並べる
     .result__body を display: contents にして、中身を .result__card のグリッドに直接並べ替える ---------- */
  .result {
    width: calc(390 * var(--u));
    padding: calc(24.8 * var(--u)) calc(20 * var(--u)) 0;
  }

  body:has(#screen-result.is-active) .app::after {
    top: calc(414.55 * var(--u));
    right: auto;
    left: calc((100% - 390 * var(--u)) / 2 + 236.86 * var(--u));
    width: calc(267.67 * var(--u));
    height: calc(274.52 * var(--u));
    background-position: 0 calc(-91.36 * var(--u));
    background-size: calc(715.4 * var(--u)) calc(484.7 * var(--u));
    transform: rotate(2.74deg);
    clip-path: polygon(
      calc(-5.8 * var(--u)) calc(16 * var(--u)),
      calc(147 * var(--u)) calc(8.7 * var(--u)),
      calc(159.3 * var(--u)) calc(266.4 * var(--u)),
      calc(6.5 * var(--u)) calc(273.7 * var(--u))
    );
  }

  .result__card {
    grid-template-rows: none;
    grid-template-columns: 100%;
    grid-template-areas:
      "heading"
      "character"
      "job"
      "message"
      "cta-text"
      "cta";
  }

  .result__body {
    display: contents;
  }

  .result__heading {
    grid-area: heading;
    font-size: calc(18 * var(--u));
  }

  .result__heading strong {
    font-size: calc(24 * var(--u));
  }

  .result__heading {
    white-space: normal;
  }

  .result__heading::after,
  .result__message::after {
    background-image: url("../images/common/line-sp.svg");
  }

  .result__heading::after {
    margin-top: calc(22.2 * var(--u));
  }

  .media--character {
    grid-area: character;
    margin-top: calc(24 * var(--u));
  }

  .media--character::before {
    top: calc(89 * var(--u));
    left: calc(25 * var(--u));
    width: calc(300 * var(--u));
    height: calc(440 * var(--u));
    background-image: url("../images/common/character-frame-sp.svg");
  }

  .result__job {
    grid-area: job;
    margin-top: calc(24 * var(--u));
    font-size: calc(32 * var(--u));
  }

  .result__job span {
    font-size: calc(24 * var(--u));
  }

  .result__job {
    width: auto;
    white-space: normal;
  }

  .result__job br {
    display: none;
  }

  .result__message {
    grid-area: message;
    margin-top: calc(12.4 * var(--u));
    font-size: calc(16 * var(--u));
  }

  .result__message::after {
    margin-top: calc(20 * var(--u));
  }

  .result__cta-text {
    grid-area: cta-text;
    margin-top: calc(20 * var(--u));
    text-align: left;
  }

  .result__cta-text strong {
    font-size: inherit;
    white-space: normal;
  }

  .result__cta-text br {
    display: none;
  }

  .result .result__cta { /* 後ろの .btn（SP）に負けないよう .result を付ける */
    grid-area: cta;
    height: calc(64 * var(--u));
    min-height: 0;
    margin-top: calc(16.8 * var(--u));
    padding: 0;
    background-image: url("../images/common/btn-bg-sp.svg");
    font-size: calc(18 * var(--u));
  }

  .result__campaign {
    width: 100%;
    margin-top: calc(65 * var(--u));
  }

  .result__actions {
    flex-direction: column;
    margin-top: calc(24 * var(--u));
  }

  .result__actions .btn {
    width: calc(350 * var(--u));
    height: calc(64 * var(--u));
    min-height: 0;
    padding: 0;
    background-image: url("../images/common/btn-bg-sp.svg");
    font-size: calc(18 * var(--u));
  }

  .result__actions #js-share-btn {
    background-image: url("../images/common/btn-outline-sp.svg");
    font-size: calc(20 * var(--u));
  }

  .result__actions #js-share-btn::after {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
    background-image: url("../images/common/icon-x-sp.svg");
  }

  .result .banners {
    margin-top: calc(72 * var(--u));
  }
}

/* =====================================================================
   8. アニメーション
   app.js は下のクラスを付け外しするだけ。動きはすべてここで決める
     .question.is-entering[data-direction="forward"|"back"] … 設問の切り替え
     .diagnosing.is-active                                   … 診断中
     .result.is-revealed                                     … 結果の登場
   ===================================================================== */
.question.is-entering[data-direction="forward"] {
  animation: slide-in-right var(--enter-duration) ease-out;
}

.question.is-entering[data-direction="back"] {
  animation: slide-in-left var(--enter-duration) ease-out;
}

.diagnosing.is-active {
  animation: fade-in 0.3s ease-out;
}

.diagnosing.is-active .diagnosing__text {
  animation: pulse 1s ease-in-out infinite;
}

.result.is-revealed .result__card {
  animation: rise-in calc(var(--enter-duration) * 2) ease-out;
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: 0.4;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}