@charset "UTF-8";
/* ==========================================================================
   採用タッチポイント診断
   l- レイアウト / p- ページ・セクション固有 / c- 再利用コンポーネント
   ブレイクポイント: PC ≥1025px / Tablet 768–1024px / SP ≤767px
     （Figma に 1440 / 768 / 375 の3フレームがあるため3段階）

   サイズの考え方:
     各ブレイクポイントで「デザイン1px = var(--u)」になるよう --u を定義し、
     余白・文字サイズ・画像幅をすべて calc(N * var(--u)) で書く。
     これでデザイン値をそのまま持ち込みつつ、画面幅に追従する。
     PC だけは 1440px 超で拡大し続けないよう 1px で頭打ちにする。
   ========================================================================== */

:root {
  /* 色（Figma実値） */
  --color-bg:        #fdf9f3;  /* 背景クリーム */
  --color-text:      #000000;
  --color-btn-fill:  #ffffff;
  --color-btn-ghost: rgba(255, 255, 255, 0.2);
  --color-border:    #000000;
  --shadow-btn:      4px 8px 6.6px rgba(0, 0, 0, 0.1);

  /* フォント */
  --font-base: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;

  /* デザイン1px あたりの実寸（既定 = PC 1440 基準） */
  --u: min(calc(100cqw / 1440), 1px);
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  /* ブロックが画面外へはみ出すため。sticky を壊さない clip を使う */
  overflow-x: clip;
}

h1, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* iOS Safari はフォーム要素の文字色・書体を UA 既定（システム青・システムフォント）に
   するため、親から継承させる。これが無いと <button> のラベルだけ青くなる */
button, input, select, textarea {
  color: inherit;
  font-family: inherit;
}

:focus-visible { outline: 3px solid #e60012; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   p-top（TOP / ファーストビュー）
   -------------------------------------------------------------------------- */
.p-top {
  position: relative;
  display: grid;
  place-content: center;
  min-height: 100svh;
  overflow: clip;
  background: var(--color-bg);
  container-type: inline-size;   /* cqw の基準をこのセクションにする */
  /* Figma はコンテンツが中央から少し下（下の余白56）。
     その差分を padding で作って中央寄せのままズラす。
     ボタン上の説明テキスト（35px）が増えたぶん、
     タイトル〜リード文の間隔（.p-top__lead の margin-top）と合わせて調整し、
     タイトル・リード文・ボタンが Figma どおりの位置に残るようにしている */
  padding-top: calc(31.6 * var(--u));
}

/* 背景のブロック。コンテンツの高さに影響させたくないので absolute */
.p-top__blocks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.p-top__blocks img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-top__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: calc(16 * var(--u));
}

/* --- あおり「その求人、誰がくるかな？」 --- */
.p-top__eyebrow { margin-top: calc(-7 * var(--u)); }
.p-top__eyebrow img { width: calc(495.3 * var(--u)); }

/* --- タイトル（LEGOアート） --- */
/* Figma の描画と突き合わせて決めた値。実画の左上は frame 座標 (347, 157) で、
   水平はほぼ中央。あおりの下端(171.6)と 14.6px 重なる。 */
.p-top__title {
  margin-top: calc(-10.6 * var(--u));
  line-height: 0;
}
.p-top__title img { width: calc(746 * var(--u)); }

/* --- リード文 --- */
.p-top__lead {
  /* 新デザインでタイトルとの間隔が 17.3px 詰まった（ボタン上の説明テキストぶん） */
  margin-top: calc(11.1 * var(--u));
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: calc(35 * var(--u));
  letter-spacing: 0.02em;
  text-align: center;
}

/* --- CTA --- */
.p-top__ctas {
  display: flex;
  gap: calc(31 * var(--u));
  margin-top: calc(22 * var(--u));
}

/* ボタン1つぶん（上の説明テキスト＋ボタン）。
   説明は line-height 35 の行ボックスなので、ボタンとの間隔は
   その下端からの差分（PC は +1px）を margin で足し引きする */
.p-top__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-top__cta-note {
  margin: 0 0 calc(1 * var(--u));
  font-weight: 500;
  font-size: calc(13 * var(--u));
  line-height: calc(35 * var(--u));
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   c-btn
   -------------------------------------------------------------------------- */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  width: calc(239 * var(--u));
  height: calc(58 * var(--u));
  /* calc だと 2.99998px → 2px に丸められるため固定値で指定する */
  border: 3px solid var(--color-border);
  border-radius: 90px;
  box-shadow: var(--shadow-btn);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.c-btn--fill  { background: var(--color-btn-fill); }
.c-btn--ghost { background: var(--color-btn-ghost); }

.c-btn:hover { transform: translateY(calc(-2 * var(--u))); }
.c-btn:active { transform: translateY(0); }

.c-btn__label { font-size: calc(18 * var(--u)); letter-spacing: 0.07em; }
.c-btn__arrow { font-size: calc(24 * var(--u)); letter-spacing: 0.02em; }

@media (prefers-reduced-motion: reduce) {
  .c-btn, .c-btn:hover { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Tablet 768–1024px（Figma: 768×1024）
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 1/768。1024px 付近で中身が肥大して 100svh を溢れるため 1px で頭打ちにする */
  :root { --u: min(calc(100cqw / 768), 1px); }

  .p-top__eyebrow { margin-top: calc(8 * var(--u)); }
  .p-top__eyebrow img { width: calc(484.2 * var(--u)); }

  .p-top__title { margin-top: calc(54.8 * var(--u)); }
  .p-top__title img { width: calc(610.4 * var(--u)); }

  .p-top__lead {
    /* 新デザインでタイトルとの間隔が 16px 詰まった（ボタン上の説明テキストぶん） */
    margin-top: calc(26.9 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(35 * var(--u));
  }

  .p-top__ctas { gap: calc(29 * var(--u)); margin-top: calc(37 * var(--u)); }

  .p-top__cta-note { margin-bottom: calc(-1 * var(--u)); }

  /* Tablet は中央よりわずかに上（上144.3 / 下161） */
  .p-top { padding-top: 0; padding-bottom: calc(47.7 * var(--u)); }

  .c-btn { width: calc(222 * var(--u)); height: calc(58 * var(--u)); }
  .c-btn__label { font-size: calc(16 * var(--u)); }
  .c-btn__arrow { font-size: calc(24 * var(--u)); }
}

/* --------------------------------------------------------------------------
   SP ≤767px（Figma: 375×812）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 1/375。大きめの端末(〜430px)までは追従させ、それ以上は 1.2px で頭打ち */
  :root { --u: min(calc(100cqw / 375), 1.2px); }

  /* SP はコンテンツが中央よりかなり上寄せ（上104.7 / 下239） */
  .p-top { padding-top: 0; padding-bottom: calc(77.2 * var(--u)); }

  /* SP はタイトルが画面幅いっぱい（Figma では左右に数pxはみ出す）なので余白を取らない */
  .p-top__inner { padding-inline: 0; }

  .p-top__eyebrow { margin-top: 0; }
  .p-top__eyebrow img { width: calc(262.6 * var(--u)); }

  .p-top__title { margin-top: calc(-3.8 * var(--u)); }
  /* 画面幅を少し超える。.p-top の overflow:clip で切るため横スクロールは出ない */
  .p-top__title img { width: calc(366.3 * var(--u)); max-width: none; }

  .p-top__lead {
    margin-top: calc(13.3 * var(--u));
    font-size: calc(11 * var(--u));
    line-height: calc(29 * var(--u));
  }

  /* SP は2つのボタンを縦積みにする */
  .p-top__ctas {
    flex-direction: column;
    gap: calc(19 * var(--u));
    margin-top: calc(6 * var(--u));
  }

  .p-top__cta-note {
    margin-bottom: calc(-2 * var(--u));
    font-size: calc(10 * var(--u));
  }

  .c-btn {
    gap: calc(8 * var(--u));
    width: calc(206 * var(--u));
    height: calc(44 * var(--u));
    border-width: 2px;
  }
  .c-btn__label { font-size: calc(13 * var(--u)); }
  .c-btn__arrow { font-size: calc(20 * var(--u)); }
}

/* ==========================================================================
   c-modal（「愛を取り戻す」のモーダル）
   --------------------------------------------------------------------------
   Figma: ノード 1:614（1440×867）
   カード 1000×680 / 角丸40 / 影 0 0 24px 8px rgba(0,0,0,.25) / 背景 #fdf9f3
   カード内のLEGOブロックとハートは1枚の画像（modal-card.webp）。
   Figmaの書き出しに焼き込まれた影は白地前提で暗幕の上では合わないため、
   カード本体だけを切り出して角丸と影は CSS で付けている。

   --mu はモーダル専用の「デザイン1px」。幅と高さの両方で頭打ちにして、
   どの画面でもカードが収まるようにしている。
   ※ Tablet / SP は Figma にデザインが無いので、PC の等倍縮小で確定（確認済み）。
   ========================================================================== */
.c-modal {
  --mu: min(1px, calc((100cqw - 32px) / 1000), calc((100cqh - 32px) / 680));
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  container-type: size;   /* cqw / cqh の基準 */
}
.c-modal[hidden] { display: none; }

.c-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  border: none;
}

.c-modal__dialog {
  position: relative;
  width: calc(1000 * var(--mu));
  height: calc(680 * var(--mu));
  border-radius: calc(40 * var(--mu));
  overflow: hidden;          /* 画像の角を角丸で抜く */
  box-shadow: 0 0 calc(24 * var(--mu)) calc(8 * var(--mu)) rgba(0, 0, 0, 0.25);
  background: var(--color-bg);
}

.c-modal__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.c-modal__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SP だけ改行を増やす */
.c-modal__br--sp { display: none; }

.c-modal__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(292 * var(--mu));
}

.c-modal__heading {
  margin: 0;
  font-weight: 700;
  font-size: calc(48 * var(--mu));
  line-height: calc(76 * var(--mu));
  text-align: center;
  white-space: nowrap;
}

.c-modal__text {
  margin-top: calc(12 * var(--mu));
  font-weight: 400;
  font-size: calc(24 * var(--mu));
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}

/* --- 「そっと目を閉じる」ボタン --- */
.c-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--mu));
  width: calc(291 * var(--mu));
  height: calc(58 * var(--mu));
  margin-top: calc(31 * var(--mu));
  /* Figma ではボタンだけ中央より 3.5px 右にある */
  margin-left: calc(7 * var(--mu));
  padding: 0 calc(10 * var(--mu));
  background: #fff;
  border: 3px solid var(--color-border);
  border-radius: 90px;
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: transform 0.18s ease;
}
.c-modal__close:hover { transform: translateY(calc(-2 * var(--mu))); }
.c-modal__close:active { transform: translateY(0); }

.c-modal__close-label {
  font-weight: 600;
  font-size: calc(20 * var(--mu));
  letter-spacing: 0.07em;
  white-space: nowrap;
}
.c-modal__close-icon {
  width: calc(35 * var(--mu));
  height: calc(36 * var(--mu));
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .c-modal__close, .c-modal__close:hover { transform: none; transition: none; }
}

/* モーダル表示中は背面をスクロールさせない */
.is-modal-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   c-modal / Tablet 768–1024px（Figma: ノード 1:901・カード 600×800）
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .c-modal { --mu: min(1px, calc((100cqw - 32px) / 600), calc((100cqh - 32px) / 800)); }

  .c-modal__dialog {
    width: calc(600 * var(--mu));
    height: calc(800 * var(--mu));
  }

  .c-modal__inner { padding-top: calc(400 * var(--mu)); }

  .c-modal__heading {
    font-size: calc(36 * var(--mu));
    line-height: calc(52 * var(--mu));
  }

  .c-modal__text {
    margin-top: calc(22 * var(--mu));
    font-size: calc(20 * var(--mu));
  }

  .c-modal__close {
    margin-top: calc(38 * var(--mu));
    margin-left: calc(1 * var(--mu));
    width: calc(291 * var(--mu));
  }
  .c-modal__close-label { font-size: calc(20 * var(--mu)); }
  .c-modal__close-icon { width: calc(35 * var(--mu)); height: calc(36 * var(--mu)); }
}

/* --------------------------------------------------------------------------
   c-modal / SP ≤767px（Figma: ノード 1:1188・カード 300×540）
   見出し3行・サブ2行とPC/Tabletより改行が増える
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .c-modal { --mu: min(1px, calc((100cqw - 32px) / 300), calc((100cqh - 32px) / 540)); }

  /* Figma のカード上端は 142px。中央寄せ(136px)より 6px 下なので padding で寄せる */
  .c-modal { padding-top: calc(12 * var(--mu)); }

  .c-modal__br--sp { display: inline; }

  .c-modal__dialog {
    width: calc(300 * var(--mu));
    height: calc(540 * var(--mu));
  }

  .c-modal__inner { padding-top: calc(221 * var(--mu)); }

  .c-modal__heading {
    font-size: calc(20 * var(--mu));
    line-height: calc(29.3 * var(--mu));
  }

  .c-modal__text {
    margin-top: calc(17 * var(--mu));
    font-size: calc(13 * var(--mu));
    line-height: calc(16 * var(--mu));   /* Figma 実測の行送り */
  }

  .c-modal__close {
    margin-top: calc(24 * var(--mu));
    margin-left: calc(2 * var(--mu));
    width: calc(233 * var(--mu));
    /* SP だけ中身がボタン中央より 3.5px 右（左右paddingの差で寄せる） */
    padding-inline: calc(17 * var(--mu)) calc(10 * var(--mu));
  }
  .c-modal__close-label { font-size: calc(14 * var(--mu)); }
  .c-modal__close-icon { width: calc(23 * var(--mu)); height: calc(23 * var(--mu)); }
}

/* ==========================================================================
   p-diag（設問ページ / diagnosis.html）※ PC のみ
   --------------------------------------------------------------------------
   Figma: ノード 11:1105（ページ本体 1440×3731）
          プロセスバーは 9:904 ほか9状態（ページ内の旧バーではなくこちらを採用）

   背景のLEGOブロック・おまけ帯・飛行機・雲は1枚の画像にまとめている
   （Figma の書き出しから文字とボタンだけ塗りつぶしたもの）。
   ========================================================================== */
.p-diag {
  /* ブレイクポイントごとにデザイン幅が違うので、基準は下のメディアクエリで差し替える */
  --u: min(calc(100cqw / 1440), 1px);
  position: relative;
  min-height: 100svh;
  background-color: var(--color-bg);
  overflow-x: clip;
  container-type: inline-size;   /* cqw の基準 */
  isolation: isolate;
}

.p-diag__inner {
  position: relative;
  width: calc(1440 * var(--u));
  margin-inline: auto;
  padding-top: calc(74 * var(--u));
  padding-bottom: calc(194 * var(--u));
  /* 帯・装飾より前面 */
  z-index: 2;
}

/* --------------------------------------------------------------------------
   背景（おまけの帯 + 装飾）
   帯 → 装飾 → 中身 の順に重なる
   -------------------------------------------------------------------------- */
/* 帯は画面幅いっぱい。1440 に固定するとワイド画面で帯の端が浮いて見えるため */
.p-diag__band {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--band-y, 2897) * var(--u));
  height: calc(var(--band-h, 454) * var(--u));
  z-index: 0;
  pointer-events: none;
}

.p-diag__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 最下部の装飾がページ下端を数十px はみ出して縦スクロールを作るので切る */
  overflow: clip;
}

/* 1点ずつ配置。スクロールで画面に入ったら is-in が付いて出現する。
   画面端で切れている装飾は画面の左右端に貼り付け、それ以外は 1440 の中央基準で置く。
   これでワイドモニターでも切り口が見えない。 */
.c-deco {
  position: absolute;
  /* --deco-half はデザイン幅の半分（PC 720 / Tablet 384 / SP 187.5）。
     これを基準に中央から配置すると、ワイド画面でも左右に伸びない */
  left: calc(50% + (var(--deco-x) - var(--deco-half, 720)) * var(--u));
  top: calc(var(--deco-y) * var(--u));
  width: calc(var(--deco-w) * var(--u));
  height: calc(var(--deco-h) * var(--u));
}

/* スクロールで画面に入ったら出現する（装飾と「おまけ」見出しで共用） */
.c-reveal {
  opacity: 0;
  /* --deco-spin は1つずつ逆向きに傾けて、一斉に出た感じを消すためのもの */
  transform: translateY(calc(32 * var(--u))) scale(0.86) rotate(var(--deco-spin, -4deg));
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--deco-delay, 0ms);
  will-change: opacity, transform;
}
.c-reveal.is-in {
  opacity: 1;
  transform: none;
}
.c-deco[data-anchor="left"]  { left: 0; }
.c-deco[data-anchor="right"] { left: auto; right: 0; }

@media (prefers-reduced-motion: reduce) {
  .c-reveal { opacity: 1; transform: none; transition: none; }
  .c-letter__img { transition: none; }
  .p-result__title.is-intro .c-letter__img { animation: none; }
  .c-map__letters .c-letter__img { opacity: 1; }
  .c-map__letters.is-in .c-letter__img { animation: none; }
}



/* --------------------------------------------------------------------------
   c-progress（プロセスバー）
   回答数に応じて塗り幅・ブロック位置・配色・ラベル位置が変わる。
   数値は data.js の DIAGNOSIS.progress（Figma 実測値）から JS が流し込む。
   -------------------------------------------------------------------------- */
/* スクロールに追従させる。
   Figma の地は「白10% + GLASS（ぼかし半径57）」のすりガラス。
   地を塗りつぶさず、背面のブロックが透けて見える状態にしてある。
   読みにくい場合は --progress-bg の不透明度を上げる */
.c-progress {
  --progress-bg: rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 20;
  width: calc(1365 * var(--u));
  height: calc(160 * var(--u));
  margin-left: calc(38 * var(--u));
  background: var(--progress-bg);
  backdrop-filter: blur(calc(28 * var(--u)));
  -webkit-backdrop-filter: blur(calc(28 * var(--u)));
  border-radius: calc(20 * var(--u));
  /* GLASS の縁の光。CSS には相当する効果が無いので内側の細い白線で寄せる */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.c-progress__meta {
  position: absolute;
  top: calc(42 * var(--u));
  display: flex;
  align-items: baseline;
  gap: calc(26 * var(--u));
  margin: 0;
  white-space: nowrap;
}
/* 主体性フェーズ（0〜5問）は右寄せ、固有性フェーズ（6〜9問）は左寄せ */
.c-progress[data-phase="shutaisei"] .c-progress__meta { left: calc(986 * var(--u)); }
.c-progress[data-phase="koyusei"]   .c-progress__meta { left: calc(182 * var(--u)); }

.c-progress__label {
  font-size: calc(20 * var(--u));
  line-height: calc(29 * var(--u));
  font-weight: 500;
  letter-spacing: 0.05em;
}
.c-progress__count {
  font-size: calc(16 * var(--u));
  line-height: calc(23 * var(--u));
  font-weight: 600;
}

.c-progress__track {
  position: absolute;
  left: calc(182 * var(--u));
  top: calc(88 * var(--u));
  display: block;
  width: calc(1000 * var(--u));
  height: calc(24 * var(--u));
  background: var(--progress-track, #fff3e1);
  border-radius: 999px;
  overflow: hidden;
}
.c-progress__fill {
  display: block;
  width: calc(var(--progress-width, 0) * var(--u));
  height: 100%;
  background: var(--progress-fill, #ef331b);
  border-radius: 999px;
  transition: width 0.35s ease, background-color 0.35s ease;
}

/* ブロックはバーの上下にまたがる。親で切らないこと。
   top は Figma のメタデータ値(127.5)ではなく、レンダリングからの実測値。
   セクション高 166.96 − ブロック高 144.25 = 22.7 とも一致する */
.c-progress__brick {
  position: absolute;
  top: calc(22.7 * var(--u));
  left: calc(var(--progress-brick-x, 114) * var(--u));
  width: calc(136.44 * var(--u));
  height: calc(144.25 * var(--u));
  transition: left 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .c-progress__fill, .c-progress__brick { transition: none; }
}

/* --------------------------------------------------------------------------
   見出し・設問リスト
   -------------------------------------------------------------------------- */
.p-diag__group[data-axis="shutaisei"] { --axis: #e60012; }
.p-diag__group[data-axis="koyusei"]   { --axis: #189354; }

.p-diag__group { margin-top: calc(76 * var(--u)); }
.p-diag__group + .p-diag__group { margin-top: calc(120 * var(--u)); }

.p-diag__heading {
  width: calc(1200 * var(--u));
  margin: 0 0 0 calc(180 * var(--u));
  color: var(--axis);
  font-size: calc(36 * var(--u));
  line-height: calc(52 * var(--u));
  font-weight: 700;
  letter-spacing: 0;
}

.p-diag__list {
  margin: calc(37 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.c-question {
  width: calc(1200 * var(--u));
  margin: 0 auto;
  padding: calc(24 * var(--u)) calc(60 * var(--u));
  border-radius: calc(20 * var(--u));
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.c-question + .c-question { margin-top: calc(21 * var(--u)); }

/* 未回答のときは枠線だけで示す（地は透明のまま） */
.c-question.is-error {
  outline: 2px solid var(--axis);
  outline-offset: calc(-2 * var(--u));
}

.c-question__head {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
}
.c-question__badge {
  padding: calc(10 * var(--u)) calc(24 * var(--u));
  border: 2px solid var(--axis);
  border-radius: 50px;
  color: var(--axis);
  font-size: calc(16 * var(--u));
  line-height: calc(23 * var(--u));
  font-weight: 500;
}
.c-question__cat {
  color: var(--axis);
  font-size: calc(16 * var(--u));
  line-height: calc(23 * var(--u));
  font-weight: 500;
}

.c-question__text {
  margin: 0;
  font-size: calc(24 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 500;
}

.c-question__choices {
  display: flex;
  gap: calc(40 * var(--u));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-question__choice { flex: 0 0 calc(240 * var(--u)); min-width: 0; }

/* --------------------------------------------------------------------------
   c-choice（回答ボタン）
   選択時は枠線が 3px → 4px になるが、box-sizing: border-box と高さ固定で
   レイアウトはずれない
   -------------------------------------------------------------------------- */
.c-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(55 * var(--u));
  padding: 0 calc(16 * var(--u));
  background: #fff;
  border: 3px solid #000;
  border-radius: 47px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
  color: #000;
  font-size: calc(20 * var(--u));
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.c-choice:hover { border-color: var(--axis, #e60012); }
.c-choice.is-selected {
  background: var(--axis, #e60012);
  border: 4px solid var(--axis, #e60012);
  color: #fff;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   p-bonus（おまけ・採点対象外）
   帯・LEGOアート「おまけ」・飛行機・雲は背景画像側にある
   -------------------------------------------------------------------------- */
/* 流れの起点は注記(y=3005)。Q9 の下端 2743 からの差 */
.p-bonus {
  position: relative;
  margin-top: calc(262 * var(--u));
}

/* 「おまけ」アートは注記より上・左に食い込むので絶対配置。
   注記の上端(3005)からの差 103px ぶん上に出す。
   画像は帯の色を地にした不透明画像なので、文字より後ろに置く。 */
.p-bonus__heading {
  position: absolute;
  left: calc(110.7 * var(--u));
  top: calc(-83.7 * var(--u));
  z-index: 0;
  width: calc(493.3 * var(--u));
  margin: 0;
  line-height: 0;
  pointer-events: none;
}

.p-bonus__note,
.p-bonus__body { position: relative; z-index: 1; }
.p-bonus__heading img { width: 100%; height: auto; }

.p-bonus__note {
  width: calc(402 * var(--u));
  margin: 0 0 0 calc(569 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 500;
}

.p-bonus__body {
  width: calc(1200 * var(--u));
  margin: calc(50 * var(--u)) auto 0;
  padding: calc(24 * var(--u)) calc(60 * var(--u));
  border-radius: calc(20 * var(--u));
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.p-bonus__text {
  min-height: calc(92 * var(--u));
  margin: 0;
  font-size: calc(24 * var(--u));
  line-height: calc(40 * var(--u));
  font-weight: 400;
}

.p-bonus__choices {
  display: flex;
  justify-content: center;
  gap: calc(40 * var(--u));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-bonus__choice { flex: 0 0 calc(240 * var(--u)); min-width: 0; }

.c-choice--bonus {
  height: calc(53 * var(--u));
  /* 「あまり届いていなかった」が 240px に収まるよう左右の余白を詰める（Figma も同じ） */
  padding-inline: calc(8 * var(--u));
  border-width: 2px;
  border-radius: 38px;
}
/* 選択状態は Figma に無いので、診断ボタンと同じ赤に揃えてある（確認済み） */
.c-choice--bonus.is-selected { border-width: 2px; background: #e60012; border-color: #e60012; }

/* --------------------------------------------------------------------------
   c-cta（診断結果を見る）
   -------------------------------------------------------------------------- */
.p-diag__submit { margin-top: calc(139 * var(--u)); }

.p-diag__error {
  width: calc(1144 * var(--u));
  margin: 0 0 calc(16 * var(--u)) calc(148 * var(--u));
  color: #e60012;
  font-size: calc(20 * var(--u));
  font-weight: 700;
}

.c-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(1144 * var(--u));
  height: calc(99 * var(--u));
  margin-left: calc(148 * var(--u));
  background: #e60012;
  border: none;
  border-radius: calc(52 * var(--u));
  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: calc(36 * var(--u));
  font-weight: 700;
  letter-spacing: 0.07em;
  cursor: pointer;
}
.c-cta:hover { background: #c8000f; }

/* ==========================================================================
   おまけの演出（飛行機・雲・花火）
   --------------------------------------------------------------------------
   飛行機と雲は背景には出さず、おまけのボタンを押したときだけ飛ばす。
   レイヤーは position:fixed ＋ overflow:hidden なので、
   画面外へ飛んでも横スクロールは発生しない。
   ========================================================================== */
.c-plane-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}

.c-plane,
.c-cloud {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  will-change: transform, opacity;
}
.c-cloud { opacity: 0; }

/* 花火。仕様書では「コンテンツ背面」だがページの地が不透明で見えないため前面に出す。
   pointer-events: none なのでクリックは妨げない */
.c-fireworks {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.c-fireworks.is-active { opacity: 1; }

/* 演出中はおまけの4ボタンを押せなくする */
.p-bonus.is-animating .c-choice--bonus { opacity: 0.5; cursor: not-allowed; }

/* 未回答のときは選択肢を枠線で示す（設問カードと同じ考え方） */
.p-bonus.is-error .c-choice--bonus {
  outline: 2px solid #e60012;
  outline-offset: calc(2 * var(--u));
}

/* ==========================================================================
   p-result（診断結果ページ / Figma: /result_1 Desktop 1:1477）
   --------------------------------------------------------------------------
   1440×2793 のキャンバスをそのまま持ち込み、各要素を Figma の座標で置く。
   サイズはすべて calc(N * var(--u)) なので画面幅に比例して縮む。
   いまは PC デザインのみ。Tablet / SP が揃ったら --u とこの座標を上書きする。
   ========================================================================== */

.p-result {
  /* Tablet / SP の :root 上書きを受けないよう、このページ内で PC 基準に固定 */
  --u: min(calc(100cqw / 1440), 1px);
  --map-line: #a7a7a7;
  --map-muted: #999999;
  --axis-label: #8d8d8d;

  position: relative;
  min-height: 100svh;
  background: var(--color-bg);
  /* ブロックが左右にはみ出す。sticky を壊さない clip を使う */
  overflow-x: clip;
  container-type: inline-size;
  isolation: isolate;
}

.p-result__inner {
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(2793 * var(--u));
  margin-inline: auto;
  z-index: 2;
}

/* 背景のLEGOブロック。スクロールで出現させる */
.p-result__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: clip;
  pointer-events: none;
}

/* SP だけ改行する <br>。PC / Tablet では無効化する */
.u-br-sp { display: none; }
/* PC だけ改行する <br>。Tablet / SP では無効化する */
.u-br-pc { display: inline; }
/* Tablet / SP だけ改行する <br>。PC では無効化する */
.u-br-tbsp { display: none; }

/* 読み上げ用。目には見せない */
.u-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   ファーストビュー
   -------------------------------------------------------------------------- */

.p-result__eyebrow {
  position: absolute;
  left: 0; right: 0;
  top: calc(142 * var(--u));
  font-size: calc(36 * var(--u));
  line-height: calc(52 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  /* 字送りの最後の1文字分だけ右に寄るのを戻す */
  text-indent: 0.08em;
  text-align: center;
}

.p-result__title {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 0;
  margin: 0;
  font-size: 0;
  /* Figma はグループ全体に影（10,12 / blur 15.6 / 黒25%）。
     filter なら文字のシルエットにだけ影がつく */
  filter: drop-shadow(calc(10 * var(--u)) calc(12 * var(--u)) calc(15.6 * var(--u)) rgba(0, 0, 0, 0.25));
}

/* 文字ブロック（鳥・肌・級 など）。
   Figma の x/y は「回転前の左上」、回転は反時計回りが正。
   CSS は時計回りが正なので符号を反転し、原点を左上に合わせる。
   回転は外側（左上基準）、拡大は内側（中心基準）に分けてある。
   --lz は重なり順。Figma は children[0] が最背面なので先頭ほど手前にする */
.c-letter {
  position: absolute;
  display: block;
  left: calc(var(--lx) * var(--u));
  top: calc(var(--ly) * var(--u));
  width: calc(var(--lw) * var(--u));
  z-index: var(--lz, 1);
  transform-origin: 0 0;
  transform: rotate(calc(var(--lr) * -1deg));
}

.c-letter__img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  /* 戻りより寄りをゆっくり。最後に少し行き過ぎてから収まる */
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* カーソルを乗せた文字を大きくする */
.p-result__title .c-letter:hover { z-index: 10; }
.p-result__title .c-letter:hover .c-letter__img { transform: scale(1.28); }

/* ページを開いた瞬間の演出。
   小さく → 大きく行き過ぎ（ズームイン）→ 縮みすぎ（ズームアウト）→ 等倍に収まる */
@keyframes resultLetterIn {
  0%   { opacity: 0; transform: scale(0.12); }
  40%  { opacity: 1; transform: scale(1.55); }
  62%  { transform: scale(0.78); }
  80%  { transform: scale(1.16); }
  92%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.p-result__title.is-intro .c-letter__img {
  animation: resultLetterIn 2.2s cubic-bezier(0.37, 0, 0.35, 1) both;
  animation-delay: var(--ldelay, 0ms);
}

.p-result__lead {
  position: absolute;
  left: 0; right: 0;
  top: calc(674 * var(--u));
  /* 句点の余白ぶん左にずれるので、デザインの位置まで右へ戻す */
  padding-left: calc(38 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: calc(58 * var(--u));
  font-weight: 800;
  color: var(--lead-color, #0576c3);
  text-align: center;
}

.p-result__headline {
  position: absolute;
  left: 0; right: 0;
  top: calc(777 * var(--u));
  font-size: calc(64 * var(--u));
  line-height: calc(93 * var(--u));
  font-weight: 700;
  text-align: center;
}

.p-result__sub {
  position: absolute;
  left: 0; right: 0;
  top: calc(881 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: calc(38 * var(--u));
  font-weight: 400;
  text-align: center;
}

/* --------------------------------------------------------------------------
   診断マップ
   -------------------------------------------------------------------------- */

.c-map {
  position: absolute;
  left: calc(120 * var(--u));
  top: calc(992 * var(--u));
  width: calc(1200 * var(--u));
  height: calc(924 * var(--u));
  background: rgba(254, 218, 163, 0.3);
  border-radius: calc(20 * var(--u));
}

.c-map__title {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(63 * var(--u));
  width: calc(1080 * var(--u));
  margin: 0;
  font-size: calc(36 * var(--u));
  line-height: calc(52 * var(--u));
  font-weight: 700;
  color: #189354;
  text-align: center;
}

.c-map__grid {
  position: absolute;
  left: calc(64 * var(--u));
  top: calc(160 * var(--u));
  display: grid;
  grid-template-columns: calc(530 * var(--u)) calc(531 * var(--u));
  grid-template-rows: calc(200 * var(--u)) calc(200 * var(--u));
  column-gap: calc(25 * var(--u));
  row-gap: calc(26 * var(--u));
}

.c-map__cell {
  position: relative;
  background: #fff;
  border-radius: calc(20 * var(--u));
}
.c-map__cell.is-current { background: #fedaa3; }

/* Figma はセル中央ではなく、左から179の位置に左揃えで置いている */
.c-map__name {
  position: absolute;
  left: calc(179 * var(--u));
  top: calc(65 * var(--u));
  font-size: calc(48 * var(--u));
  line-height: calc(70 * var(--u));
  font-weight: 600;
  color: var(--map-muted);
  white-space: nowrap;
}

.c-map__letters { position: absolute; inset: 0; }

/* マトリクス内の文字は、拡大はせず少し下からふわっと出す。
   画面に入ってから再生する */
.c-map__letters .c-letter__img { opacity: 0; }
.c-map__letters.is-in .c-letter__img {
  /* 3文字そろえて同時に出す（1文字ずつのずれは付けない） */
  animation: resultLetterFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0ms;
}

@keyframes resultLetterFade {
  from { opacity: 0; transform: translateY(calc(10 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

/* 軸の矢印。線＋先端のくの字（Figma も塗りの三角ではなく線） */
.c-map__axis {
  position: absolute;
  background: var(--map-line);
}
.c-map__axis::after {
  content: '';
  position: absolute;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border: 0 solid var(--map-line);
}
.c-map__axis--y {
  left: calc(40 * var(--u));
  top: calc(166 * var(--u));
  width: 2px;
  height: calc(420 * var(--u));
}
.c-map__axis--y::after {
  left: 1px;
  top: 0;
  border-top-width: 2px;
  border-left-width: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.c-map__axis--x {
  left: calc(64 * var(--u));
  top: calc(606 * var(--u));
  width: calc(1086 * var(--u));
  height: 2px;
}
.c-map__axis--x::after {
  right: 0;
  top: 1px;
  border-top-width: 2px;
  border-right-width: 2px;
  transform: translate(50%, -50%) rotate(45deg);
}

.c-map__axislabel {
  position: absolute;
  font-size: calc(16 * var(--u));
  line-height: calc(23 * var(--u));
  font-weight: 600;
  color: var(--axis-label);
  white-space: nowrap;
}
/* 縦書きではなく、横組みを90°回して置いている（Figma と同じ） */
.c-map__axislabel--y {
  left: calc(16 * var(--u));
  top: calc(400 * var(--u));
  width: calc(48 * var(--u));
  transform-origin: 0 0;
  transform: rotate(-90deg);
}
.c-map__axislabel--x {
  left: calc(578 * var(--u));
  top: calc(610 * var(--u));
}

/* スコアカード */
.c-score {
  position: absolute;
  top: calc(698 * var(--u));
  height: calc(164 * var(--u));
  background: var(--score-bg);
  border-radius: calc(20 * var(--u));
  color: #fff;
}
.c-score--shutaisei { left: calc(64 * var(--u));  width: calc(530 * var(--u)); }
.c-score--koyusei   { left: calc(619 * var(--u)); width: calc(531 * var(--u)); }

.c-score__label {
  position: absolute;
  left: 0; right: 0;
  top: calc(29 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 800;
  text-align: center;
}
.c-score__value {
  position: absolute;
  left: 0; right: 0;
  top: calc(57 * var(--u));
  font-size: calc(64 * var(--u));
  line-height: calc(93 * var(--u));
  font-weight: 800;
  text-align: center;
}

/* --------------------------------------------------------------------------
   診断コメント
   -------------------------------------------------------------------------- */

.p-result__comment {
  position: absolute;
  left: calc(120 * var(--u));
  top: calc(1974 * var(--u));
  width: calc(1200 * var(--u));
  height: calc(361 * var(--u));
  background: #fdf0db;
  border-radius: calc(20 * var(--u));
}

.p-result__comment-heading {
  position: absolute;
  left: calc(52 * var(--u));
  top: calc(21.3 * var(--u));
  width: calc(452 * var(--u));
  margin: 0;
  line-height: 0;
}
.p-result__comment-heading img { width: 100%; height: auto; }

.p-result__comment-text {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(148 * var(--u));
  width: calc(1080 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(40 * var(--u));
  font-weight: 400;
}

.p-result__advice {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(259 * var(--u));
  display: flex;
  align-items: center;
  height: calc(49 * var(--u));
}

.c-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(198 * var(--u));
  height: calc(49 * var(--u));
  margin-right: calc(24 * var(--u));
  border: 3px solid #1262b8;
  border-radius: calc(50 * var(--u));
  color: #1262b8;
  font-size: calc(16 * var(--u));
  line-height: calc(23 * var(--u));
  font-weight: 600;
}

.p-result__advice-text {
  font-size: calc(24 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   次のアクション
   -------------------------------------------------------------------------- */

.p-result__actions {
  position: absolute;
  left: 0; right: 0;
  top: calc(2399 * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(12 * var(--u));
}

.c-action__wrap { position: relative; display: block; }

.c-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(230 * var(--u));
  height: calc(95 * var(--u));
  background: var(--cta-bg);
  border-radius: calc(76 * var(--u));
  box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: calc(24 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 500;
  text-decoration: none;
}
.c-action:hover { filter: brightness(1.08); }

/* 「おすすめ」の吹き出し。推奨ボタンの上にかぶせる */
.c-action__badge {
  position: absolute;
  left: 50%;
  top: calc(-28 * var(--u));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(155 * var(--u));
  height: calc(48 * var(--u));
  background: #fff;
  border: 2px solid #ac020f;
  border-radius: calc(50 * var(--u));
  z-index: 1;
}
.c-action__badge img {
  width: calc(103 * var(--u));
  height: auto;
}

/* --------------------------------------------------------------------------
   もう一度診断を受ける
   -------------------------------------------------------------------------- */

.p-result__retry {
  position: absolute;
  left: 0; right: 0;
  top: calc(2559 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  font-weight: 400;
  text-align: center;
}
.p-result__retry a {
  color: var(--map-line);
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--u));
}

/* --------------------------------------------------------------------------
   p-result / Tablet（Figma: /result_1 Tablet 1:1573 — 768×2166）
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .p-result { --u: min(calc(100cqw / 768), 1px); --deco-half: 384; }

  .u-br-pc { display: none; }
  .u-br-tbsp { display: inline; }
  .p-result__inner { width: calc(768 * var(--u)); height: calc(2166 * var(--u)); }

  .p-result__eyebrow { top: calc(92 * var(--u));  font-size: calc(24 * var(--u)); line-height: calc(35 * var(--u)); }
  .p-result__lead    { top: calc(481 * var(--u)); padding-left: 0; font-size: calc(40 * var(--u)); line-height: calc(58 * var(--u)); }
  .p-result__headline{ top: calc(604 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(58 * var(--u)); }
  .p-result__sub     { top: calc(699 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(29 * var(--u)); }

  .c-letter {
    left: calc(var(--lxt) * var(--u));
    top: calc(var(--lyt) * var(--u));
    width: calc(var(--lwt) * var(--u));
    transform: rotate(calc(var(--lrt, var(--lr)) * -1deg));
  }

  .c-map { left: calc(34 * var(--u)); top: calc(813 * var(--u)); width: calc(700 * var(--u)); height: calc(728 * var(--u)); border-radius: calc(13.33 * var(--u)); }
  .c-map__title { left: calc(101 * var(--u)); top: calc(36 * var(--u)); width: calc(498 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(46 * var(--u)); }
  .c-map__grid {
    left: calc(52 * var(--u)); top: calc(118 * var(--u));
    grid-template-columns: calc(290 * var(--u)) calc(290 * var(--u));
    grid-template-rows: calc(150 * var(--u)) calc(150 * var(--u));
    column-gap: calc(17 * var(--u)); row-gap: calc(18 * var(--u));
  }
  /* Tablet / SP はセル中央ぞろえ（Figma も中央） */
  .c-map__name { left: 0; right: 0; top: calc(46 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(58 * var(--u)); text-align: center; }

  .c-map__axis--y { left: calc(37 * var(--u));  top: calc(122 * var(--u)); height: calc(314 * var(--u)); }
  .c-map__axis--x { left: calc(52 * var(--u));  top: calc(453 * var(--u)); width: calc(597 * var(--u)); }
  .c-map__axislabel { font-size: calc(14 * var(--u)); line-height: calc(23 * var(--u)); }
  .c-map__axislabel--y { left: calc(13 * var(--u));  top: calc(312 * var(--u)); width: calc(48 * var(--u)); }
  .c-map__axislabel--x { left: calc(322 * var(--u)); top: calc(457 * var(--u)); }

  .c-score { top: calc(524 * var(--u)); height: calc(150 * var(--u)); }
  .c-score--shutaisei { left: calc(52 * var(--u));  width: calc(290 * var(--u)); }
  .c-score--koyusei   { left: calc(359 * var(--u)); width: calc(290 * var(--u)); }
  .c-score__label { top: calc(29 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(29 * var(--u)); }
  .c-score__value { top: calc(58 * var(--u)); font-size: calc(48 * var(--u)); line-height: calc(70 * var(--u)); }

  .p-result__comment { left: calc(34 * var(--u)); top: calc(1589 * var(--u)); width: calc(700 * var(--u)); height: calc(290 * var(--u)); border-radius: calc(13.33 * var(--u)); }
  .p-result__comment-heading { left: calc(30.75 * var(--u)); top: calc(37.25 * var(--u)); width: calc(305.2 * var(--u)); }
  .p-result__comment-text { left: calc(36 * var(--u)); top: calc(122 * var(--u)); width: calc(628 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(30 * var(--u)); }

  .p-result__advice { left: calc(36 * var(--u)); top: calc(206 * var(--u)); height: calc(44 * var(--u)); }
  .c-tag { width: calc(178 * var(--u)); height: calc(44 * var(--u)); margin-right: calc(24 * var(--u)); border-width: 2px; font-size: calc(14 * var(--u)); }
  .p-result__advice-text { font-size: calc(20 * var(--u)); line-height: calc(29 * var(--u)); }

  .p-result__actions { top: calc(1909 * var(--u)); gap: calc(7 * var(--u)); }
  .c-action { width: calc(134 * var(--u)); height: calc(60 * var(--u)); border-radius: calc(94 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .c-action__badge { top: calc(-12 * var(--u)); width: calc(75 * var(--u)); height: calc(23 * var(--u)); }
  .c-action__badge img { width: calc(50 * var(--u)); }

  .p-result__retry { top: calc(2017 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(17 * var(--u)); }
}

/* --------------------------------------------------------------------------
   p-result / SP（Figma: /result_1 Mobile 1:1669 — 375×1807）
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .p-result { --u: min(calc(100cqw / 375), 1.2px); --deco-half: 187.5; }
  .p-result__inner { width: calc(375 * var(--u)); height: calc(1807 * var(--u)); }

  /* SP は見出しを2行に割る */
  .u-br-sp { display: inline; }

  .p-result__eyebrow { top: calc(92 * var(--u));  font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); }
  .p-result__lead    { top: calc(262 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
  .p-result__headline{ top: calc(303 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(35 * var(--u)); }
  .p-result__sub     { top: calc(386 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); }

  .c-letter {
    left: calc(var(--lxs) * var(--u));
    top: calc(var(--lys) * var(--u));
    width: calc(var(--lws) * var(--u));
    transform: rotate(calc(var(--lrs, var(--lr)) * -1deg));
  }

  .c-map { left: calc(34 * var(--u)); top: calc(443 * var(--u)); width: calc(300 * var(--u)); height: calc(511 * var(--u)); border-radius: calc(13.33 * var(--u)); }
  .c-map__cell { border-radius: calc(10 * var(--u)); }
  .c-map__title { left: calc(39.5 * var(--u)); top: calc(22 * var(--u)); width: calc(221 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .c-map__grid {
    left: calc(24 * var(--u)); top: calc(60 * var(--u));
    grid-template-columns: calc(120 * var(--u)) calc(120 * var(--u));
    grid-template-rows: calc(80 * var(--u)) calc(80 * var(--u));
    column-gap: calc(11 * var(--u)); row-gap: calc(11 * var(--u));
  }
  .c-map__name { top: calc(28 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }

  .c-map__axis--y { left: calc(19 * var(--u));  top: calc(60 * var(--u));  height: calc(171 * var(--u)); width: 1px; }
  .c-map__axis--x { left: calc(25 * var(--u));  top: calc(239 * var(--u)); width: calc(250 * var(--u)); height: 1px; }
  .c-map__axis::after { width: calc(5 * var(--u)); height: calc(5 * var(--u)); }
  .c-map__axis--y::after { border-top-width: 1px; border-left-width: 1px; }
  .c-map__axis--x::after { border-top-width: 1px; border-right-width: 1px; }
  .c-map__axislabel { font-size: calc(10 * var(--u)); line-height: calc(15 * var(--u)); }
  .c-map__axislabel--y { left: calc(4 * var(--u));   top: calc(159 * var(--u)); width: calc(32 * var(--u)); }
  .c-map__axislabel--x { left: calc(134 * var(--u)); top: calc(239 * var(--u)); }

  /* SP はスコアカードを縦に積む。角丸は Figma 実値（ほぼ長丸） */
  .c-score { height: calc(99 * var(--u)); border-radius: calc(60 * var(--u)); }
  .c-score--shutaisei { border-radius: calc(70 * var(--u)); }
  .c-score--shutaisei { left: calc(28 * var(--u)); top: calc(268 * var(--u)); width: calc(251 * var(--u)); }
  .c-score--koyusei   { left: calc(25 * var(--u)); top: calc(376 * var(--u)); width: calc(251 * var(--u)); }
  .c-score__label { top: calc(17 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
  .c-score__value { top: calc(35 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(58 * var(--u)); }

  .p-result__comment { left: calc(34 * var(--u)); top: calc(986 * var(--u)); width: calc(300 * var(--u)); height: calc(289 * var(--u)); border-radius: calc(7.14 * var(--u)); }
  .p-result__comment-heading { left: calc(36.2 * var(--u)); top: calc(28.8 * var(--u)); width: calc(234.2 * var(--u)); }
  .p-result__comment-text { left: calc(36 * var(--u)); top: calc(97 * var(--u)); width: calc(235 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(20 * var(--u)); }

  /* SP はタグを上、本文を下に積む */
  .p-result__advice {
    left: calc(42 * var(--u)); top: calc(182 * var(--u));
    width: calc(224 * var(--u)); height: calc(75 * var(--u));
    flex-direction: column; align-items: center; justify-content: space-between;
  }
  .c-tag { width: calc(169 * var(--u)); height: calc(43 * var(--u)); margin-right: 0; font-size: calc(13 * var(--u)); }
  .p-result__advice-text { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); text-align: center; }

  /* SP はボタンを縦積み */
  .p-result__actions {
    top: calc(1320 * var(--u));
    flex-direction: column; align-items: center;
    gap: calc(23 * var(--u));
  }
  /* 最後の1つだけ Figma の間隔が狭い */
  .p-result__actions .c-action__wrap:last-child { margin-top: calc(-3 * var(--u)); }
  .c-action { width: calc(296 * var(--u)); height: calc(60 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 700; }
  .c-action__badge { top: calc(-16 * var(--u)); width: calc(99 * var(--u)); height: calc(31 * var(--u)); }
  .c-action__badge img { width: calc(66 * var(--u)); }

  .p-result__retry { top: calc(1739 * var(--u)); font-size: calc(11 * var(--u)); line-height: calc(13 * var(--u)); }
}

/* ==========================================================================
   p-diag / Tablet（Figma: 49:1172 — 768×3050）
   ========================================================================== */

@media (max-width: 1024px) {
  .p-diag { --u: min(calc(100cqw / 768), 1px); --deco-half: 384; }
  .p-diag__inner {
    width: calc(768 * var(--u));
    padding-top: calc(74 * var(--u));
    padding-bottom: calc(167 * var(--u));
  }

  .c-progress {
    width: calc(693 * var(--u));
    height: calc(160 * var(--u));
    margin-left: calc(38 * var(--u));
  }
  .c-progress__meta { top: calc(58 * var(--u)); gap: calc(20 * var(--u)); }
  .p-diag .c-progress[data-phase="shutaisei"] .c-progress__meta { left: calc(509 * var(--u)); }
  .p-diag .c-progress[data-phase="koyusei"]   .c-progress__meta { left: calc(92 * var(--u)); }
  .c-progress__label { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .c-progress__count { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }

  .c-progress__track {
    left: calc(40 * var(--u));
    top: calc(88 * var(--u));
    width: calc(614 * var(--u));
    height: calc(16 * var(--u));
  }
  .c-progress__fill { width: calc(var(--progress-ratio, 0) * 614 * var(--u)); }
  /* ブロックはバーの端に乗る。比率からバー上の位置を出す */
  .c-progress__brick {
    top: calc(52 * var(--u));
    left: calc((3.6 + var(--progress-brick-ratio, 0) * 614) * var(--u));
    width: calc(72.8 * var(--u));
    height: calc(76.9 * var(--u));
  }

  .p-diag__group { margin-top: calc(51 * var(--u)); }
  .p-diag__group + .p-diag__group { margin-top: calc(71 * var(--u)); }
  .p-diag__heading {
    width: calc(618 * var(--u));
    margin-left: calc(81 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: calc(35 * var(--u));
  }
  .p-diag__list { margin-top: calc(42 * var(--u)); }

  .c-question {
    width: calc(672 * var(--u));
    padding: calc(24 * var(--u)) calc(30 * var(--u));
    gap: calc(16 * var(--u));
  }
  .c-question + .c-question { margin-top: 0; }
  .c-question__head { gap: calc(24 * var(--u)); }
  .c-question__badge {
    padding: calc(12 * var(--u)) calc(26 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(20 * var(--u));
  }
  .c-question__cat { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .c-question__text { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }

  .c-question__choices { gap: calc(10 * var(--u)); }
  .c-question__choice { flex: 0 0 calc(150 * var(--u)); }
  .c-choice {
    height: calc(49 * var(--u));
    border-radius: calc(39 * var(--u));
    font-size: calc(16 * var(--u));
  }

  /* おまけ。帯は 2400、見出しアートは 2442、注記は 2474、設問は 2522 */
  .p-bonus { margin-top: calc(141 * var(--u)); }
  .p-bonus__heading {
    left: 0;
    top: calc(-84.7 * var(--u));
    width: calc(254 * var(--u));
  }
  .p-bonus__note {
    width: calc(335 * var(--u));
    margin-left: calc(276 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(29 * var(--u));
  }
  .p-bonus__body {
    width: calc(705 * var(--u));
    margin-top: calc(19 * var(--u));
    padding: calc(24 * var(--u)) calc(20 * var(--u));
  }
  .p-bonus__text {
    min-height: calc(60 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(30 * var(--u));
  }
  .p-bonus__choices { gap: calc(15 * var(--u)); }
  .p-bonus__choice { flex: 0 0 calc(160 * var(--u)); }
  .c-choice--bonus { height: calc(43 * var(--u)); font-size: calc(13 * var(--u)); }

  .p-diag__submit { margin-top: calc(122 * var(--u)); }
  .c-cta {
    width: calc(641 * var(--u));
    height: calc(72 * var(--u));
    margin-left: calc(64 * var(--u));
    border-radius: calc(52 * var(--u));
    font-size: calc(36 * var(--u));
  }
}

/* ==========================================================================
   p-diag / SP（Figma: 49:1508 — 375×3376）
   プロセスバーは縦向きで画面右に貼り付く
   ========================================================================== */

@media (max-width: 767px) {
  .p-diag { --u: min(calc(100cqw / 375), 1.2px); --deco-half: 187.5; }
  .p-diag__inner {
    width: calc(375 * var(--u));
    /* プロセスバーの位置（y=16）が起点。見出しまでの差は下の group で付ける */
    padding-top: calc(16 * var(--u));
    padding-bottom: calc(113 * var(--u));
  }

  /* 縦バー。流れからは抜いて（負のマージン）右端に貼り付けたまま追従させる */
  .c-progress {
    width: calc(33 * var(--u));
    height: calc(433 * var(--u));
    /* 下の負マージンで本文を押し下げない（バーは流れに残したまま追従させる） */
    margin: 0 calc(17 * var(--u)) calc(-433 * var(--u)) auto;
    top: calc(16 * var(--u));
    border-radius: calc(20 * var(--u));
  }
  /* ラベルと件数は Figma どおり90°倒して縦に読ませる。
     バーが縦なので、2つはバーに沿って上下に並ぶ */
  .p-diag .c-progress__meta,
  .p-diag .c-progress[data-phase] .c-progress__meta {
    left: calc(9 * var(--u));
    top: calc(16 * var(--u));
    display: block;
    width: calc(14 * var(--u));
    height: calc(100 * var(--u));
    gap: 0;
  }
  .c-progress__label,
  .c-progress__count {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    transform: translateX(calc(14 * var(--u))) rotate(90deg);
    white-space: nowrap;
    font-size: calc(10 * var(--u));
    line-height: calc(14 * var(--u));
  }
  .c-progress__count { top: calc(73 * var(--u)); }

  /* Figma 49:2192〜49:2256（9状態）に合わせた縦バー。
     トラック（薄い地）は 197 から。塗りは 126 から伸びるので、
     トラックからはみ出して描けるように overflow を解除してある */
  .c-progress__track {
    left: calc(8 * var(--u));
    top: calc(197 * var(--u));
    width: calc(16 * var(--u));
    height: calc(224 * var(--u));
    overflow: visible;
  }
  .c-progress__fill {
    position: absolute;
    left: 0;
    top: calc(-71 * var(--u));   /* 126 − 197 */
    width: 100%;
    height: calc(var(--progress-sp-len, 0) * var(--u));
    transition: height 0.35s ease, background-color 0.35s ease;
  }
  .c-progress__brick {
    left: calc(-4 * var(--u));
    top: calc(var(--progress-sp-pos, 109.5) * var(--u));
    /* バーより横にはみ出すので、リセットの max-width を解除する */
    width: calc(39 * var(--u));
    max-width: none;
    height: auto;
    transform: none;
    transition: top 0.35s ease;
  }

  .p-diag__group { margin-top: calc(52 * var(--u)); }
  .p-diag__group + .p-diag__group { margin-top: calc(38 * var(--u)); }
  .p-diag__heading {
    width: calc(291 * var(--u));
    margin-left: calc(30 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(27 * var(--u));
  }
  /* 見出しの行ボックスぶん詰める */
  .p-diag__list { margin-top: calc(-3 * var(--u)); }

  .c-question {
    width: calc(339 * var(--u));
    margin: 0;
    padding: calc(30 * var(--u));
    gap: calc(16 * var(--u));
  }
  .c-question__head { gap: calc(10 * var(--u)); }
  .c-question__badge {
    padding: calc(8 * var(--u)) calc(26 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(17 * var(--u));
  }
  .c-question__cat { font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); }
  .c-question__text { font-size: calc(14 * var(--u)); line-height: calc(24 * var(--u)); }

  /* SP は選択肢を 2×2 に並べる */
  .c-question__choices {
    display: grid;
    grid-template-columns: calc(120 * var(--u)) calc(120 * var(--u));
    column-gap: calc(10 * var(--u));
    row-gap: calc(16 * var(--u));
    width: calc(286 * var(--u));
  }
  .c-question__choice { flex: none; }
  .c-choice {
    height: calc(43 * var(--u));
    padding: 0 calc(8 * var(--u));
    border-width: 2px;
    border-radius: calc(39 * var(--u));
    font-size: calc(13 * var(--u));
  }
  .c-choice.is-selected { border-width: 2px; }

  /* Q9 のカード下端から「おまけ」アート上端までを 54px 空ける
     （アートは .p-bonus の 109.5px 上に出るので、その分を足した値） */
  .p-bonus { margin-top: calc(163.5 * var(--u)); }
  .p-bonus__heading {
    left: 0;
    top: calc(-109.5 * var(--u));
    width: calc(209.5 * var(--u));
  }
  .p-bonus__note {
    width: calc(235 * var(--u));
    margin-left: calc(36 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(20 * var(--u));
  }
  .p-bonus__body {
    width: calc(286 * var(--u));
    margin: 0 auto 0 calc(33 * var(--u));
    padding: calc(10 * var(--u)) 0 calc(44 * var(--u));
  }
  .p-bonus__text {
    min-height: calc(60 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(20 * var(--u));
  }
  /* SP はおまけの選択肢も縦積み */
  .p-bonus__choices {
    display: grid;
    grid-template-columns: calc(243 * var(--u));
    /* PC の justify-content: center が grid のトラックを中央に寄せてしまうので戻す */
    justify-content: start;
    row-gap: calc(15 * var(--u));
    margin-top: calc(4 * var(--u));
  }
  .p-bonus__choice { flex: none; }
  .c-choice--bonus { height: calc(35 * var(--u)); font-size: calc(13 * var(--u)); }

  .p-diag__submit { margin-top: calc(30 * var(--u)); }
  .c-cta {
    width: calc(286 * var(--u));
    height: calc(55 * var(--u));
    margin-left: calc(45 * var(--u));
    border-radius: calc(52 * var(--u));
    font-size: calc(24 * var(--u));
  }
}

/* ==========================================================================
   p-result / レイアウトB（汎用的・表面的で共通）
   Figma: /result_2（1:1767 ほか）/ result_3（1:2318 ほか）
   --------------------------------------------------------------------------
   鳥肌級との違いだけを上書きする。
   ・リード文（レベルです。）はタイトルの右脇に小さく置く
   ・見出し下のサブ文が無い
   ・CTA は3つ
   ・見出し脇にミイラと雨だれのアートが入る
   ========================================================================== */

.p-result[data-layout="b"] .p-result__inner { height: calc(2793 * var(--u)); }

/* 雨だれは文字の後ろ、ミイラは文字の前 */
.c-letter--art { z-index: 0; }
.c-letter--art + .c-letter--art { z-index: 9; }

/* 自己満は獅子舞が文字より手前（Figma /result4） */
.p-result[data-result="jikoman"] .c-letter--art { z-index: 9; }

.p-result[data-layout="b"] .p-result__lead {
  left: calc(823 * var(--u));
  right: auto;
  top: calc(403 * var(--u));
  width: calc(166 * var(--u));
  padding-left: 0;
  font-size: calc(24 * var(--u));
  line-height: calc(35 * var(--u));
}
.p-result[data-layout="b"] .p-result__headline { top: calc(765 * var(--u)); }

.p-result[data-layout="b"] .p-result__advice { width: calc(676 * var(--u)); }

/* CTA は3つ。1つあたりの幅と角丸が違う */
.p-result[data-layout="b"] .p-result__actions { gap: calc(20 * var(--u)); }
.p-result[data-layout="b"] .c-action {
  width: calc(387 * var(--u));
  border-radius: calc(131 * var(--u));
}

@media (max-width: 1024px) {
  .p-result[data-layout="b"] .p-result__inner { height: calc(2062 * var(--u)); }

  .p-result[data-layout="b"] .p-result__eyebrow { top: calc(100 * var(--u)); }
  .p-result[data-layout="b"] .p-result__lead {
    left: calc(459 * var(--u));
    top: calc(315 * var(--u));
    width: calc(139 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(29 * var(--u));
  }
  .p-result[data-layout="b"] .p-result__headline {
    top: calc(566 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: calc(58 * var(--u));
  }

  .p-result[data-layout="b"] .c-map {
    left: calc(34 * var(--u));
    top: calc(728 * var(--u));
    width: calc(700 * var(--u));
    height: calc(678 * var(--u));
  }
  .p-result[data-layout="b"] .c-map__title {
    left: calc(93 * var(--u));
    top: calc(39 * var(--u));
    width: calc(515 * var(--u));
  }
  .p-result[data-layout="b"] .c-map__grid {
    left: calc(50 * var(--u));
    top: calc(114 * var(--u));
    column-gap: calc(19 * var(--u));
    row-gap: calc(16 * var(--u));
  }
  .p-result[data-layout="b"] .c-map__name { top: calc(47 * var(--u)); }
  .p-result[data-layout="b"] .c-map__axis--y { left: calc(37 * var(--u)); top: calc(118 * var(--u)); height: calc(308 * var(--u)); }
  .p-result[data-layout="b"] .c-map__axis--x { left: calc(50 * var(--u)); top: calc(443 * var(--u)); width: calc(599 * var(--u)); }
  .p-result[data-layout="b"] .c-map__axislabel--y { left: calc(14 * var(--u)); top: calc(296 * var(--u)); }
  .p-result[data-layout="b"] .c-map__axislabel--x { left: calc(327 * var(--u)); top: calc(447 * var(--u)); }

  .p-result[data-layout="b"] .c-score { top: calc(480 * var(--u)); }
  .p-result[data-layout="b"] .c-score--shutaisei { left: calc(50 * var(--u)); }
  .p-result[data-layout="b"] .c-score--koyusei   { left: calc(359 * var(--u)); }

  .p-result[data-layout="b"] .p-result__comment {
    left: calc(34 * var(--u));
    top: calc(1446 * var(--u));
    width: calc(700 * var(--u));
    height: calc(290 * var(--u));
  }
  .p-result[data-layout="b"] .p-result__comment-heading { left: calc(35.75 * var(--u)); }
  .p-result[data-layout="b"] .p-result__comment-text { left: calc(50 * var(--u)); top: calc(126 * var(--u)); }
  .p-result[data-layout="b"] .p-result__advice { left: calc(37 * var(--u)); top: calc(209 * var(--u)); width: calc(605 * var(--u)); }

  .p-result[data-layout="b"] .p-result__actions { top: calc(1793 * var(--u)); gap: calc(11 * var(--u)); }
  .p-result[data-layout="b"] .c-action { width: calc(226 * var(--u)); height: calc(72 * var(--u)); border-radius: calc(131 * var(--u)); font-size: calc(24 * var(--u)); }
  .p-result[data-layout="b"] .c-action__badge { top: calc(-21 * var(--u)); width: calc(113 * var(--u)); height: calc(36 * var(--u)); }
  .p-result[data-layout="b"] .c-action__badge img { width: calc(75 * var(--u)); }

  .p-result[data-layout="b"] .p-result__retry { top: calc(1922 * var(--u)); }
}

@media (max-width: 767px) {
  .p-result[data-layout="b"] .p-result__inner { height: calc(1683 * var(--u)); }

  .p-result[data-layout="b"] .p-result__eyebrow { top: calc(73 * var(--u)); }
  .p-result[data-layout="b"] .p-result__lead {
    left: calc(226 * var(--u));
    top: calc(188 * var(--u));
    width: calc(97 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(20 * var(--u));
  }
  .p-result[data-layout="b"] .p-result__headline {
    top: calc(339 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: calc(35 * var(--u));
  }

  .p-result[data-layout="b"] .c-map {
    left: calc(38 * var(--u));
    top: calc(443 * var(--u));
    width: calc(300 * var(--u));
    height: calc(511 * var(--u));
  }
  .p-result[data-layout="b"] .c-map__title {
    left: calc(43 * var(--u));
    top: calc(22 * var(--u));
    width: calc(221 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(20 * var(--u));
  }
  .p-result[data-layout="b"] .c-map__name { top: calc(28 * var(--u)); }
  .p-result[data-layout="b"] .c-map__grid { left: calc(24 * var(--u)); top: calc(60 * var(--u)); column-gap: calc(11 * var(--u)); row-gap: calc(11 * var(--u)); }
  .p-result[data-layout="b"] .c-map__axis--y { left: calc(19 * var(--u)); top: calc(60 * var(--u)); height: calc(171 * var(--u)); }
  .p-result[data-layout="b"] .c-map__axis--x { left: calc(25 * var(--u)); top: calc(239 * var(--u)); width: calc(250 * var(--u)); }
  .p-result[data-layout="b"] .c-map__axislabel--y { left: calc(4 * var(--u)); top: calc(159 * var(--u)); }
  .p-result[data-layout="b"] .c-map__axislabel--x { left: calc(134 * var(--u)); top: calc(239 * var(--u)); }

  .p-result[data-layout="b"] .c-score--shutaisei { left: calc(28 * var(--u)); top: calc(270 * var(--u)); }
  .p-result[data-layout="b"] .c-score--koyusei   { left: calc(25 * var(--u)); top: calc(381 * var(--u)); }

  .p-result[data-layout="b"] .p-result__comment {
    left: calc(42 * var(--u));
    top: calc(986 * var(--u));
    width: calc(300 * var(--u));
    height: calc(310 * var(--u));
  }
  .p-result[data-layout="b"] .p-result__comment-heading { left: calc(36.2 * var(--u)); top: calc(28.8 * var(--u)); }
  .p-result[data-layout="b"] .p-result__comment-text { left: calc(26 * var(--u)); top: calc(97 * var(--u)); width: calc(239 * var(--u)); }
  /* 1行に収まるよう Figma の 258 より少し広く取る */
  .p-result[data-layout="b"] .p-result__advice { left: calc(16 * var(--u)); top: calc(202 * var(--u)); width: calc(283 * var(--u)); }

  .p-result[data-layout="b"] .p-result__actions { top: calc(1320 * var(--u)); gap: calc(23 * var(--u)); }
  .p-result[data-layout="b"] .c-action {
    width: calc(296 * var(--u));
    height: calc(60 * var(--u));
    border-radius: calc(94 * var(--u));
    font-size: calc(15 * var(--u));
    font-weight: 700;
  }
  .p-result[data-layout="b"] .p-result__actions .c-action__wrap:last-child { margin-top: 0; }
  .p-result[data-layout="b"] .c-action__badge {
    top: calc(-14 * var(--u));
    width: calc(99 * var(--u));
    height: calc(31 * var(--u));
  }
  .p-result[data-layout="b"] .c-action__badge img { width: calc(66 * var(--u)); }

  .p-result[data-layout="b"] .p-result__retry { top: calc(1576 * var(--u)); }
}

/* --------------------------------------------------------------------------
   c-rain（汎用的 MV の雨だれ）
   線が上から伸び、丸が線の先端に付いて落ちてくる。
   --rl は線の長さ（SVG のユーザー単位）、--rd は1本ごとのずれ
   -------------------------------------------------------------------------- */
.c-rain {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.c-rain__line {
  stroke: var(--rain-color, #004f96);
  stroke-dasharray: var(--rl);
  stroke-dashoffset: var(--rl);
  animation: rainDraw 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--rd, 0ms);
}
.c-rain__dot {
  fill: var(--rain-color, #004f96);
  transform: translateY(calc(var(--rl) * -1px));
  animation: rainFall 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--rd, 0ms);
}

@keyframes rainDraw {
  0%   { stroke-dashoffset: var(--rl); opacity: 0; }
  18%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes rainFall {
  0%   { transform: translateY(calc(var(--rl) * -1px)); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .c-rain__line { stroke-dashoffset: 0; animation: none; }
  .c-rain__dot  { transform: none; animation: none; }
}

/* ==========================================================================
   p-result / 表面的（Figma: /result_3 — Desktop 1:2318 / Tablet 1:2515 / Mobile 1:2712）
   レイアウトBとの差分だけを上書きする
   ========================================================================== */

.p-result[data-result="hyomenteki"] .p-result__lead {
  left: calc(828 * var(--u));
  top: calc(390 * var(--u));
  width: calc(142 * var(--u));
}
.p-result[data-result="hyomenteki"] .p-result__advice { width: calc(812 * var(--u)); }

@media (max-width: 1024px) {
  .p-result[data-result="hyomenteki"] .p-result__inner { height: calc(2102 * var(--u)); }

  .p-result[data-result="hyomenteki"] .p-result__eyebrow { top: calc(93 * var(--u)); }
  .p-result[data-result="hyomenteki"] .p-result__lead {
    left: calc(469 * var(--u));
    top: calc(299 * var(--u));
    width: calc(119 * var(--u));
  }
  .p-result[data-result="hyomenteki"] .p-result__headline { top: calc(634 * var(--u)); }

  .p-result[data-result="hyomenteki"] .c-map { top: calc(769 * var(--u)); height: calc(706 * var(--u)); }
  /* レイアウトB（汎用的）より見出しが 5px 左。Figma 実測 */
  .p-result[data-result="hyomenteki"] .p-result__comment-heading { left: calc(30.75 * var(--u)); }
  .p-result[data-result="hyomenteki"] .c-map__title { top: calc(39 * var(--u)); }
  .p-result[data-result="hyomenteki"] .c-score { top: calc(509 * var(--u)); }

  .p-result[data-result="hyomenteki"] .p-result__comment { top: calc(1522 * var(--u)); }
  /* アドバイスは2行なので高さを持たせる（PC の 812 を打ち消す） */
  .p-result[data-result="hyomenteki"] .p-result__advice {
    top: calc(206 * var(--u));
    width: calc(605 * var(--u));
    height: calc(58 * var(--u));
  }

  .p-result[data-result="hyomenteki"] .p-result__actions { top: calc(1869 * var(--u)); }
  .p-result[data-result="hyomenteki"] .p-result__retry { top: calc(1999 * var(--u)); }
}

@media (max-width: 767px) {
  .p-result[data-result="hyomenteki"] .p-result__inner { height: calc(1786 * var(--u)); }

  .p-result[data-result="hyomenteki"] .p-result__eyebrow { top: calc(81 * var(--u)); }
  .p-result[data-result="hyomenteki"] .p-result__lead {
    left: calc(233 * var(--u));
    top: calc(211 * var(--u));
    width: calc(83 * var(--u));
  }
  .p-result[data-result="hyomenteki"] .p-result__headline { top: calc(427 * var(--u)); }

  /* Tablet 用の指定が SP にも効いてしまうので、ここで打ち消す */
  .p-result[data-result="hyomenteki"] .c-map { top: calc(523 * var(--u)); height: calc(511 * var(--u)); }
  .p-result[data-result="hyomenteki"] .c-map__title { top: calc(22 * var(--u)); }
  .p-result[data-result="hyomenteki"] .c-score--shutaisei { top: calc(270 * var(--u)); }
  .p-result[data-result="hyomenteki"] .c-score--koyusei   { top: calc(381 * var(--u)); }

  .p-result[data-result="hyomenteki"] .p-result__comment { left: calc(38 * var(--u)); top: calc(1064 * var(--u)); height: calc(330 * var(--u)); }
  .p-result[data-result="hyomenteki"] .p-result__comment-heading { left: calc(37.2 * var(--u)); }
  .p-result[data-result="hyomenteki"] .p-result__comment-text { left: calc(30 * var(--u)); }
  .p-result[data-result="hyomenteki"] .p-result__advice {
    left: calc(21 * var(--u));
    top: calc(202 * var(--u));
    width: calc(258 * var(--u));
    height: calc(103 * var(--u));
  }
  /* アドバイスが2行なので Figma の行送り（24px）に合わせる */
  .p-result[data-result="hyomenteki"] .p-result__advice-text { line-height: calc(24 * var(--u)); }

  .p-result[data-result="hyomenteki"] .p-result__actions { top: calc(1427 * var(--u)); }
  .p-result[data-result="hyomenteki"] .p-result__retry { top: calc(1686 * var(--u)); }
}

/* ==========================================================================
   p-result / 自己満（Figma: /result_4 — Desktop 5:3 / Tablet 5:205 / Mobile 5:407）
   レイアウトBとの差分だけを上書きする
   ========================================================================== */

.p-result[data-result="jikoman"] .p-result__lead {
  left: calc(832 * var(--u));
  top: calc(421 * var(--u));
  width: calc(142 * var(--u));
}
.p-result[data-result="jikoman"] .p-result__advice { width: calc(628 * var(--u)); }

@media (max-width: 1024px) {
  .p-result[data-result="jikoman"] .p-result__inner { height: calc(2132 * var(--u)); }

  .p-result[data-result="jikoman"] .p-result__eyebrow { top: calc(142 * var(--u)); }
  .p-result[data-result="jikoman"] .p-result__lead {
    left: calc(463 * var(--u));
    top: calc(329 * var(--u));
    width: calc(119 * var(--u));
  }
  .p-result[data-result="jikoman"] .p-result__headline { top: calc(687 * var(--u)); }

  .p-result[data-result="jikoman"] .c-map { top: calc(830 * var(--u)); }

  .p-result[data-result="jikoman"] .p-result__comment { left: calc(33 * var(--u)); top: calc(1546 * var(--u)); }
  /* PC の 628 を打ち消す */
  .p-result[data-result="jikoman"] .p-result__advice { width: calc(605 * var(--u)); }

  .p-result[data-result="jikoman"] .p-result__actions { top: calc(1903 * var(--u)); }
  .p-result[data-result="jikoman"] .p-result__retry { top: calc(2026 * var(--u)); }
}

@media (max-width: 767px) {
  .p-result[data-result="jikoman"] .p-result__inner { height: calc(1672 * var(--u)); }

  .p-result[data-result="jikoman"] .p-result__eyebrow { top: calc(65 * var(--u)); }
  .p-result[data-result="jikoman"] .p-result__lead {
    left: calc(222 * var(--u));
    top: calc(179 * var(--u));
    width: calc(83 * var(--u));
  }
  .p-result[data-result="jikoman"] .p-result__headline { top: calc(347 * var(--u)); }

  /* Tablet 用の指定が SP にも効いてしまうので、ここで打ち消す */
  .p-result[data-result="jikoman"] .c-map { top: calc(438 * var(--u)); }
  .p-result[data-result="jikoman"] .p-result__comment { left: calc(38 * var(--u)); top: calc(986 * var(--u)); }
  .p-result[data-result="jikoman"] .p-result__advice { width: calc(258 * var(--u)); }

  .p-result[data-result="jikoman"] .p-result__actions { top: calc(1320 * var(--u)); }
  .p-result[data-result="jikoman"] .p-result__retry { top: calc(1576 * var(--u)); }
}

/* ==========================================================================
   c-entry（結果を見る前の登録モーダル）
   Figma: /diagnosis_popup — Desktop 54:2969 / Tablet 54:3925 / Mobile 54:5328
   body 直下に置くので、--u は :root のものをそのまま使う
   ========================================================================== */

.c-entry {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 * var(--u)) calc(16 * var(--u));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.c-entry[hidden] { display: none; }

.c-entry__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border: 0;
}

.c-entry__dialog {
  position: relative;
  width: calc(1200 * var(--u));
  max-width: 100%;
  margin: auto;
  background: var(--color-bg);
  border-radius: calc(40 * var(--u));
}

.c-entry__form {
  padding: calc(112 * var(--u)) calc(90 * var(--u)) calc(89 * var(--u));
}

.c-entry__title {
  margin: 0;
  font-size: calc(48 * var(--u));
  line-height: calc(70 * var(--u));
  font-weight: 500;
  text-align: center;
}
.c-entry__lead {
  margin: calc(22 * var(--u)) 0 0;
  font-size: calc(24 * var(--u));
  line-height: calc(29 * var(--u));
  text-align: center;
}

/* 入力1項目ぶん。ラベル → 入力 → エラー文 の縦積み */
.c-entry__field { margin-top: calc(40 * var(--u)); }
.c-entry__field:first-of-type { margin-top: calc(61 * var(--u)); }

.c-entry__label {
  display: block;
  margin: 0;
  font-size: calc(24 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 500;
}

.c-entry__input {
  display: block;
  width: 100%;
  height: calc(53 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: 0 calc(34 * var(--u));
  background: #fff;
  border: 2px solid #000;
  border-radius: calc(12 * var(--u));
  color: #000;
  font-family: inherit;
  font-size: calc(24 * var(--u));
  line-height: 1.2;
}
.c-entry__input::placeholder { color: #d9d9d9; }
.c-entry__input:focus-visible { outline: 3px solid #0576c3; outline-offset: 2px; }
.c-entry__field.is-error .c-entry__input { border-color: #e60012; }

.c-entry__error {
  margin: calc(8 * var(--u)) 0 0;
  color: #e60012;
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
}
.c-entry__error[hidden] { display: none; }

/* 打ち間違いを1クリックで直すボタン */
.c-entry__fix {
  padding: 0;
  background: none;
  border: 0;
  color: #0576c3;
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* 自社への愛。PC は横4つ */
.c-entry__loves {
  display: grid;
  grid-template-columns: repeat(4, calc(240 * var(--u)));
  gap: calc(20 * var(--u));
  margin: calc(16 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.c-entry__love-item { margin: 0; }

.c-entry__love {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(53 * var(--u));
  padding: 0 calc(8 * var(--u));
  background: #fff;
  border: 2px solid #000;
  border-radius: calc(36 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.c-entry__radio:checked + .c-entry__love {
  background: #e60012;
  border-color: #e60012;
  color: #fff;
  font-weight: 800;
}
.c-entry__radio:focus-visible + .c-entry__love { outline: 3px solid #0576c3; outline-offset: 2px; }
.c-entry__field.is-error .c-entry__love { border-color: #e60012; }

.c-entry__summary {
  margin: calc(24 * var(--u)) 0 0;
  color: #e60012;
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
  text-align: center;
}
.c-entry__summary[hidden] { display: none; }

.c-entry__submit {
  display: block;
  width: 100%;
  height: calc(82 * var(--u));
  margin-top: calc(44 * var(--u));
  background: #e60012;
  border: 0;
  border-radius: calc(150 * var(--u));
  color: #fff;
  font-family: inherit;
  font-size: calc(32 * var(--u));
  font-weight: 800;
  cursor: pointer;
}
/* 4項目すべて埋まるまでは押しても進めない（理由を出したいので無効化はしない） */
.c-entry__submit.is-disabled {
  background: #d9d9d9;
  color: #fff;
  cursor: not-allowed;
}

.c-entry__note {
  margin: calc(17 * var(--u)) 0 0;
  color: #a7a7a7;
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
  text-align: center;
}
.c-entry__link { color: inherit; text-decoration: underline; }

.c-entry__back { margin: calc(40 * var(--u)) 0 0; line-height: calc(29 * var(--u)); text-align: center; }
.c-entry__back-btn {
  padding: 0;
  background: none;
  border: 0;
  color: #a7a7a7;
  font-family: inherit;
  font-size: calc(24 * var(--u));
  line-height: calc(29 * var(--u));
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .c-entry__dialog { width: calc(600 * var(--u)); border-radius: calc(20 * var(--u)); }
  .c-entry__form { padding: calc(79 * var(--u)) calc(45 * var(--u)) calc(65 * var(--u)); }

  .c-entry__title { font-size: calc(36 * var(--u)); line-height: calc(52 * var(--u)); }
  .c-entry__lead  { margin-top: calc(22 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(30 * var(--u)); }

  .c-entry__field { margin-top: calc(20 * var(--u)); }
  .c-entry__field:first-of-type { margin-top: calc(23 * var(--u)); }
  .c-entry__label { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
  .c-entry__input {
    height: calc(41 * var(--u));
    margin-top: calc(16 * var(--u));
    padding: 0 calc(33 * var(--u));
    font-size: calc(16 * var(--u));
  }
  .c-entry__error { font-size: calc(13 * var(--u)); line-height: calc(20 * var(--u)); }

  .c-entry__loves {
    grid-template-columns: repeat(2, calc(240 * var(--u)));
    gap: calc(20 * var(--u));
  }
  .c-entry__love { height: calc(45 * var(--u)); font-size: calc(16 * var(--u)); }

  .c-entry__summary { margin-top: calc(20 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }

  .c-entry__submit {
    width: calc(430 * var(--u));
    height: calc(57 * var(--u));
    margin: calc(68 * var(--u)) auto 0;
    font-size: calc(24 * var(--u));
  }
  .c-entry__note { margin-top: calc(16 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); }
  .c-entry__back { margin-top: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
  .c-entry__back-btn { font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); }
}

@media (max-width: 767px) {
  .c-entry { padding: calc(16 * var(--u)) calc(12 * var(--u)); }
  .c-entry__dialog { width: calc(300 * var(--u)); }
  .c-entry__form { padding: calc(42 * var(--u)) calc(13 * var(--u)) calc(47 * var(--u)); }

  .c-entry__title { font-size: calc(20 * var(--u)); line-height: calc(29 * var(--u)); }
  .c-entry__lead  { margin-top: calc(17 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); }

  .c-entry__field { margin-top: calc(17 * var(--u)); }
  .c-entry__field:first-of-type { margin-top: calc(41 * var(--u)); }
  .c-entry__label { font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); }
  .c-entry__input {
    height: calc(38 * var(--u));
    margin-top: calc(10 * var(--u));
    padding: 0 calc(11 * var(--u));
    /* デザインは 13px だが、16px を下回ると iOS がフォーカス時に拡大するので下限を付ける */
    font-size: max(16px, calc(13 * var(--u)));
  }
  .c-entry__error { font-size: calc(11 * var(--u)); line-height: calc(16 * var(--u)); }

  .c-entry__loves { grid-template-columns: 1fr; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
  .c-entry__love { height: calc(34 * var(--u)); font-size: calc(12 * var(--u)); }

  .c-entry__summary { margin-top: calc(16 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); }

  .c-entry__submit {
    width: calc(242 * var(--u));
    height: calc(57 * var(--u));
    margin: calc(40 * var(--u)) auto 0;
    font-size: calc(16 * var(--u));
  }
  .c-entry__note { margin-top: calc(15 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); }
  .c-entry__back { margin-top: calc(28 * var(--u)); line-height: calc(16 * var(--u)); }
  .c-entry__back-btn { font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); }
}

/* ==========================================================================
   p-contact（お問い合わせ）
   Figma: /contact — Desktop 111:11530 / Tablet 111:11804 / Mobile 111:12078
   フォーム本体は formrun の埋め込みなので、ここは地・見出し・リード・枠だけ
   ========================================================================== */

.p-contact {
  --u: min(calc(100cqw / 1440), 1px);
  --deco-half: 720;
  position: relative;
  min-height: 100svh;
  background-color: var(--color-bg);
  overflow-x: clip;
  container-type: inline-size;
  isolation: isolate;
}

/* ページ下端に切られているブロックは、フォームの長さに関わらず下端に貼り付ける */
.p-contact .c-deco[data-vanchor="bottom"] { top: auto; bottom: 0; }

/* 背景のブロック。設問ページ・結果ページと同じ置き方 */
.p-contact__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: clip;
}

.p-contact__inner {
  position: relative;
  z-index: 2;
  width: calc(1440 * var(--u));
  max-width: 100%;
  margin-inline: auto;
  /* 余白は container 側に置くと 100cqw が自分自身を参照して破綻するので、ここで持つ */
  padding: calc(229 * var(--u)) 0 calc(200 * var(--u));
}

.p-contact__title {
  margin: 0;
  color: #e60012;
  font-size: calc(64 * var(--u));
  line-height: calc(93 * var(--u));
  font-weight: 700;
  text-align: center;
}

.p-contact__lead {
  margin: calc(51 * var(--u)) 0 0;
  font-size: calc(20 * var(--u));
  line-height: calc(42 * var(--u));
  text-align: center;
}

/* formrun の埋め込みを入れる箱。高さはフォーム側に任せる */
.p-contact__form {
  width: calc(616 * var(--u));
  max-width: 100%;
  margin: calc(190 * var(--u)) auto 0;
}

@media (max-width: 1024px) {
  .p-contact { --u: min(calc(100cqw / 768), 1px); --deco-half: 384; }
  .p-contact__inner { width: calc(768 * var(--u)); padding: calc(179 * var(--u)) 0 calc(80 * var(--u)); }

  .p-contact__title { font-size: calc(40 * var(--u)); line-height: calc(58 * var(--u)); }
  .p-contact__lead  { margin-top: calc(31 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(42 * var(--u)); }

  .p-contact__form {
    width: calc(612 * var(--u));
    margin: calc(146 * var(--u)) auto 0 calc(94 * var(--u));
  }
}

@media (max-width: 767px) {
  .p-contact { --u: min(calc(100cqw / 375), 1.2px); --deco-half: 187.5; }
  .p-contact__inner { width: calc(375 * var(--u)); padding: calc(99 * var(--u)) 0 calc(64 * var(--u)); }

  .p-contact__title { font-size: calc(24 * var(--u)); line-height: calc(35 * var(--u)); }
  .p-contact__lead  { margin-top: calc(27 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(24 * var(--u)); }

  .p-contact__form {
    width: calc(287 * var(--u));
    margin: calc(122 * var(--u)) auto 0;
  }
}

/* ==========================================================================
   c-entry（結果を見る前の登録モーダル）
   Figma: /diagnosis_popup — Desktop 54:2969 / Tablet 54:3925 / Mobile 54:5328
   body 直下に置くので、--u は :root のものをそのまま使う
   ========================================================================== */

.c-entry {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 * var(--u)) calc(16 * var(--u));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.c-entry[hidden] { display: none; }

.c-entry__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border: 0;
}

.c-entry__dialog {
  position: relative;
  width: calc(1200 * var(--u));
  max-width: 100%;
  margin: auto;
  background: var(--color-bg);
  border-radius: calc(40 * var(--u));
}

.c-entry__form {
  padding: calc(112 * var(--u)) calc(90 * var(--u)) calc(89 * var(--u));
}

.c-entry__title {
  margin: 0;
  font-size: calc(48 * var(--u));
  line-height: calc(70 * var(--u));
  font-weight: 500;
  text-align: center;
}
.c-entry__lead {
  margin: calc(22 * var(--u)) 0 0;
  font-size: calc(24 * var(--u));
  line-height: calc(29 * var(--u));
  text-align: center;
}

/* 入力1項目ぶん。ラベル → 入力 → エラー文 の縦積み */
.c-entry__field { margin-top: calc(40 * var(--u)); }
.c-entry__field:first-of-type { margin-top: calc(61 * var(--u)); }

.c-entry__label {
  display: block;
  margin: 0;
  font-size: calc(24 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 500;
}

.c-entry__input {
  display: block;
  width: 100%;
  height: calc(53 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: 0 calc(34 * var(--u));
  background: #fff;
  border: 2px solid #000;
  border-radius: calc(12 * var(--u));
  color: #000;
  font-family: inherit;
  font-size: calc(24 * var(--u));
  line-height: 1.2;
}
.c-entry__input::placeholder { color: #d9d9d9; }
.c-entry__input:focus-visible { outline: 3px solid #0576c3; outline-offset: 2px; }
.c-entry__field.is-error .c-entry__input { border-color: #e60012; }

.c-entry__error {
  margin: calc(8 * var(--u)) 0 0;
  color: #e60012;
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
}
.c-entry__error[hidden] { display: none; }

/* 打ち間違いを1クリックで直すボタン */
.c-entry__fix {
  padding: 0;
  background: none;
  border: 0;
  color: #0576c3;
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* 自社への愛。PC は横4つ */
.c-entry__loves {
  display: grid;
  grid-template-columns: repeat(4, calc(240 * var(--u)));
  gap: calc(20 * var(--u));
  margin: calc(16 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.c-entry__love-item { margin: 0; }

.c-entry__love {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(53 * var(--u));
  padding: 0 calc(8 * var(--u));
  background: #fff;
  border: 2px solid #000;
  border-radius: calc(36 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.c-entry__radio:checked + .c-entry__love {
  background: #e60012;
  border-color: #e60012;
  color: #fff;
  font-weight: 800;
}
.c-entry__radio:focus-visible + .c-entry__love { outline: 3px solid #0576c3; outline-offset: 2px; }
.c-entry__field.is-error .c-entry__love { border-color: #e60012; }

.c-entry__summary {
  margin: calc(24 * var(--u)) 0 0;
  color: #e60012;
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
  text-align: center;
}
.c-entry__summary[hidden] { display: none; }

.c-entry__submit {
  display: block;
  width: 100%;
  height: calc(82 * var(--u));
  margin-top: calc(44 * var(--u));
  background: #e60012;
  border: 0;
  border-radius: calc(150 * var(--u));
  color: #fff;
  font-family: inherit;
  font-size: calc(32 * var(--u));
  font-weight: 800;
  cursor: pointer;
}
/* 4項目すべて埋まるまでは押しても進めない（理由を出したいので無効化はしない） */
.c-entry__submit.is-disabled {
  background: #d9d9d9;
  color: #fff;
  cursor: not-allowed;
}

.c-entry__note {
  margin: calc(17 * var(--u)) 0 0;
  color: #a7a7a7;
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
  text-align: center;
}
.c-entry__link { color: inherit; text-decoration: underline; }

.c-entry__back { margin: calc(40 * var(--u)) 0 0; line-height: calc(29 * var(--u)); text-align: center; }
.c-entry__back-btn {
  padding: 0;
  background: none;
  border: 0;
  color: #a7a7a7;
  font-family: inherit;
  font-size: calc(24 * var(--u));
  line-height: calc(29 * var(--u));
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .c-entry__dialog { width: calc(600 * var(--u)); border-radius: calc(20 * var(--u)); }
  .c-entry__form { padding: calc(79 * var(--u)) calc(45 * var(--u)) calc(65 * var(--u)); }

  .c-entry__title { font-size: calc(36 * var(--u)); line-height: calc(52 * var(--u)); }
  .c-entry__lead  { margin-top: calc(22 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(30 * var(--u)); }

  .c-entry__field { margin-top: calc(20 * var(--u)); }
  .c-entry__field:first-of-type { margin-top: calc(23 * var(--u)); }
  .c-entry__label { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
  .c-entry__input {
    height: calc(41 * var(--u));
    margin-top: calc(16 * var(--u));
    padding: 0 calc(33 * var(--u));
    font-size: calc(16 * var(--u));
  }
  .c-entry__error { font-size: calc(13 * var(--u)); line-height: calc(20 * var(--u)); }

  .c-entry__loves {
    grid-template-columns: repeat(2, calc(240 * var(--u)));
    gap: calc(20 * var(--u));
  }
  .c-entry__love { height: calc(45 * var(--u)); font-size: calc(16 * var(--u)); }

  .c-entry__summary { margin-top: calc(20 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }

  .c-entry__submit {
    width: calc(430 * var(--u));
    height: calc(57 * var(--u));
    margin: calc(68 * var(--u)) auto 0;
    font-size: calc(24 * var(--u));
  }
  .c-entry__note { margin-top: calc(16 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); }
  .c-entry__back { margin-top: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
  .c-entry__back-btn { font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); }
}

@media (max-width: 767px) {
  .c-entry { padding: calc(16 * var(--u)) calc(12 * var(--u)); }
  .c-entry__dialog { width: calc(300 * var(--u)); }
  .c-entry__form { padding: calc(42 * var(--u)) calc(13 * var(--u)) calc(47 * var(--u)); }

  .c-entry__title { font-size: calc(20 * var(--u)); line-height: calc(29 * var(--u)); }
  .c-entry__lead  { margin-top: calc(17 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); }

  .c-entry__field { margin-top: calc(17 * var(--u)); }
  .c-entry__field:first-of-type { margin-top: calc(41 * var(--u)); }
  .c-entry__label { font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); }
  .c-entry__input {
    height: calc(38 * var(--u));
    margin-top: calc(10 * var(--u));
    padding: 0 calc(11 * var(--u));
    /* デザインは 13px だが、16px を下回ると iOS がフォーカス時に拡大するので下限を付ける */
    font-size: max(16px, calc(13 * var(--u)));
  }
  .c-entry__error { font-size: calc(11 * var(--u)); line-height: calc(16 * var(--u)); }

  .c-entry__loves { grid-template-columns: 1fr; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
  .c-entry__love { height: calc(34 * var(--u)); font-size: calc(12 * var(--u)); }

  .c-entry__summary { margin-top: calc(16 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); }

  .c-entry__submit {
    width: calc(242 * var(--u));
    height: calc(57 * var(--u));
    margin: calc(40 * var(--u)) auto 0;
    font-size: calc(16 * var(--u));
  }
  .c-entry__note { margin-top: calc(15 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); }
  .c-entry__back { margin-top: calc(28 * var(--u)); line-height: calc(16 * var(--u)); }
  .c-entry__back-btn { font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); }
}